Components

Transcript

Chat-transcript building blocks for the page-session context: a self-contained scrolling panel, a hover-scrubbable turn rail, and the message/tool-call bubbles beneath it (c85).

TranscriptMessageOne speaker's bubble inside a turn — every content part that speaker produced together (text and/or tool calls), right-aligned for the user, left-aligned for the agent. The bubble's one squared corner grows a matching skewed-square tail (cssarrowplease-style) pointing at a UxAvatar (user) or AgentPawn (agent) beside it.
TranscriptNavigatorChatGPT-style turn rail — one thin tick per turn, packed edge-to-edge (no dead zone between rows). The whole rail tracks the mouse's Y position continuously; each tick's width is a falloff of its distance to the cursor, so the closest turn grows while the rest stay short, and a title/summary flyout follows whichever tick currently has the most influence. Clicking targets that same turn, even off-center.
TranscriptPanelThe outer chat-transcript card — header with a live turn count, the turn-navigator rail (hidden for a single turn), and the scrolling turn stack. Self-contained: sizing is shrink-to-fit by default (max-h-full, not h-full) so a short transcript takes its natural height and a long one fills the ancestor's available space and scrolls internally past that, never the outer page. minHeight is a floor under both.
TranscriptToolCallOne tool-call burst inside a message — collapsed to a single row (title shown verbatim, e.g. "Ran: whoami") until clicked, then expands to an indented, monospace input/content/output block plus an optional one-line summary.
TranscriptTurnOne turn's message stack — purely presentational, iterating `turn.messages` through TranscriptMessage. A turn's title/summary never render inline here; they only surface in TranscriptNavigator's hover flyout.
TranscriptMessage
TranscriptNavigator
TranscriptPanel
TranscriptToolCall
TranscriptTurn

Qpoint Brand Style Guide