Thread Map

Written for the variant you picked above: Paper

Build a chat transcript with a minimap rail. Props: title, turns [{id, role: user | assistant, text, code, tool}], names {user, assistant}, theme and className. Map maths (pure functions): ticks on a rail of a given height, scaled from each turn's measured top and height in the scrolling thread (at least 3px tall, with a 2px gap); the visible window as a box on the rail (at least 18px); the scroll position that centres the window on a point of the rail; the indices of turns whose text, code or tool line mention a query; and the turn being read — the last one whose top is within the top third of the view. Layout: a header with the title and a search field (with a count "2 of 5" in a status region, previous/next buttons when there's more than one, Enter and Shift+Enter to step, Escape to clear). Below, a 480px frame: the thread on the left — a focusable log of turns, user messages as right-aligned bubbles, assistant replies as text with optional code blocks and tool-call chips, the current turn marked with a thin rule on its left, matches wrapped in <mark> — and a 46px rail on the right. Measure the turns with a ResizeObserver and getBoundingClientRect and redraw the rail from the measurements. On the rail each turn is a tick: assistant turns in the accent, wider and to the left; user turns muted and to the right; a small bracket where there's code and a dot where a tool ran. Matching turns get a yellow ring and the current one an accent ring. A translucent window with an accent edge shows the visible part. Pressing on the rail jumps there and dragging scrubs (pointer capture). J and K move to the next and previous turn with smooth scrolling (instant under reduced motion); searching scrolls to the current match. A hint line shows the keys. Two themes, paper and night. Selected variant — Paper (paper): Palette for this theme (Paper): --tm-assist #2f6fd1; --tm-bg #fbfaf7; --tm-code #f3f1ec; --tm-hit #f2c33d; --tm-ink #1c1b18; --tm-line rgba(28, 27, 24, 0.1); --tm-mark rgba(242, 195, 61, 0.45); --tm-muted #66625a; --tm-rail #f1eee8; --tm-user #ece7dd. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "paper". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Scroll, drag or click the map to move; search to light up matching turns and step through them; J and K step through the conversation. Motion: Smooth scrolling to turns and matches; ticks and the current-turn rule change in 160–200ms. Reduced motion jumps instantly. Accessibility: The thread is a focusable, labelled log with each turn named by speaker and number; search is labelled with a live count; J/K and the search controls give full keyboard access, so the pointer-only rail is hidden from assistive tech. Responsive behavior: The rail narrows to 30px on phones and the search field shrinks. Touch: Dragging a finger on the map scrubs the thread; the thread scrolls normally. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Scroll, drag or click the map to move; search to light up matching turns and step through them; J and K step through the conversation.

Motion

Smooth scrolling to turns and matches; ticks and the current-turn rule change in 160–200ms. Reduced motion jumps instantly.

Accessibility

The thread is a focusable, labelled log with each turn named by speaker and number; search is labelled with a live count; J/K and the search controls give full keyboard access, so the pointer-only rail is hidden from assistive tech.

Responsive

The rail narrows to 30px on phones and the search field shrinks.

On touch

Dragging a finger on the map scrubs the thread; the thread scrolls normally.