@kitlangton/motel 0.1.3 → 0.2.1

package/src/storybook/aiChatStory.tsx

@@ -0,0 +1,243 @@
+// Storybook-style preview for AiChatView. Renders the component
+// against a menu of fixtures so we can iterate on the rendering
+// without needing real LLM traffic captured.
+//
+// Run it: `bun run story:chat`
+// Keys:
+//   1..N      switch fixture
+//   j / k     scroll down / up (1 line)
+//   ctrl-d/u  half-page
+//   gg / G    jump to top / bottom
+//   r         force re-render with a fresh date (to sanity-check headers)
+//   q / ^c    quit
+
+import { RegistryProvider } from "@effect/atom-react"
+import { RGBA, TextAttributes, createCliRenderer } from "@opentui/core"
+import { createRoot, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { buildChunks, type Chunk } from "../ui/aiChatModel.ts"
+import { AiChatView } from "../ui/AiChatView.tsx"
+import { Divider, TextLine } from "../ui/primitives.tsx"
+import type { AiCallDetailState } from "../ui/state.ts"
+import { applyTheme, colors, SEPARATOR } from "../ui/theme.ts"
+import type { ChatFixture } from "./fixtures/index.ts"
+import { errorFixture } from "./fixtures/errorState.ts"
+import { imagePasteFixture } from "./fixtures/imagePaste.ts"
+import { kitchenSinkFixture } from "./fixtures/kitchenSink.ts"
+import { rawPromptFixture } from "./fixtures/rawPrompt.ts"
+import { shortFixture } from "./fixtures/short.ts"
+import { toolHeavyFixture } from "./fixtures/toolHeavy.ts"
+
+// Kitchen-sink first so launching the story lands on something that
+// shows every rendering branch at once. The other fixtures exercise
+// one case at a time for regression testing.
+const FIXTURES: readonly ChatFixture[] = [
+	kitchenSinkFixture,
+	shortFixture,
+	toolHeavyFixture,
+	imagePasteFixture,
+	rawPromptFixture,
+	errorFixture,
+]
+
+const HEADER_ROWS = 2
+const FOOTER_ROWS = 1
+
+const StoryApp = () => {
+	applyTheme("motel-default")
+	const renderer = useRenderer()
+	const { width, height } = useTerminalDimensions()
+	const w = width ?? 120
+	const h = height ?? 32
+	const [fixtureIdx, setFixtureIdx] = useState(0)
+	const [selectedChunkId, setSelectedChunkId] = useState<string | null>(null)
+	const [detailChunkId, setDetailChunkId] = useState<string | null>(null)
+	const [detailScrollOffset, setDetailScrollOffset] = useState(0)
+	const pendingGRef = useRef(false)
+	const quittingRef = useRef(false)
+
+	const fixture = FIXTURES[fixtureIdx] ?? FIXTURES[0]!
+
+	const detailState: AiCallDetailState = useMemo(() => ({
+		status: "ready",
+		spanId: fixture.span.spanId,
+		data: fixture.detail,
+		error: null,
+	}), [fixture])
+
+	const chunks = useMemo<readonly Chunk[]>(() => buildChunks(fixture.detail), [fixture])
+
+	// Reset selection + expansion whenever fixture changes.
+	useEffect(() => {
+		setSelectedChunkId(chunks[0]?.id ?? null)
+		setDetailChunkId(null)
+		setDetailScrollOffset(0)
+	}, [fixtureIdx, chunks])
+
+	const move = (delta: number) => {
+		if (chunks.length === 0) return
+		const idx = selectedChunkId ? chunks.findIndex((c) => c.id === selectedChunkId) : 0
+		const next = chunks[Math.max(0, Math.min(idx + delta, chunks.length - 1))]
+		if (next) setSelectedChunkId(next.id)
+	}
+
+	useKeyboard((key) => {
+		if (key.name === "q" || (key.ctrl && key.name === "c")) {
+			// renderer.destroy() runs the opentui teardown (disables
+			// mouse tracking / kitty keyboard / bracketed paste / alt
+			// screen) before onDestroy exits the process. Bypassing it
+			// with a raw process.exit leaks those escape sequences into
+			// the host shell.
+			if (quittingRef.current) return
+			quittingRef.current = true
+			renderer.destroy()
+			return
+		}
+		if (/^[1-9]$/.test(key.name) && !key.ctrl && !key.meta) {
+			const idx = parseInt(key.name, 10) - 1
+			if (idx < FIXTURES.length) setFixtureIdx(idx)
+			return
+		}
+		if (key.name === "j" || key.name === "down") {
+			if (detailChunkId) setDetailScrollOffset((current) => current + 1)
+			else move(1)
+			return
+		}
+		if (key.name === "k" || key.name === "up") {
+			if (detailChunkId) setDetailScrollOffset((current) => Math.max(0, current - 1))
+			else move(-1)
+			return
+		}
+		if (key.name === "pagedown" || (key.ctrl && key.name === "d")) {
+			if (detailChunkId) setDetailScrollOffset((current) => current + Math.max(1, Math.floor(bodyLines / 2)))
+			else move(Math.max(1, Math.floor(chunks.length / 4)))
+			return
+		}
+		if (key.name === "pageup" || (key.ctrl && key.name === "u")) {
+			if (detailChunkId) setDetailScrollOffset((current) => Math.max(0, current - Math.max(1, Math.floor(bodyLines / 2))))
+			else move(-Math.max(1, Math.floor(chunks.length / 4)))
+			return
+		}
+		if (key.name === "g" && !key.shift) {
+			if (detailChunkId) {
+				if (pendingGRef.current) {
+					setDetailScrollOffset(0)
+					pendingGRef.current = false
+				} else {
+					pendingGRef.current = true
+					setTimeout(() => { pendingGRef.current = false }, 500)
+				}
+				return
+			}
+			if (pendingGRef.current) {
+				if (chunks[0]) setSelectedChunkId(chunks[0].id)
+				pendingGRef.current = false
+			} else {
+				pendingGRef.current = true
+				setTimeout(() => { pendingGRef.current = false }, 500)
+			}
+			return
+		}
+		if (key.name === "g" && key.shift) {
+			if (detailChunkId) setDetailScrollOffset(999999)
+			else {
+				const last = chunks[chunks.length - 1]
+				if (last) setSelectedChunkId(last.id)
+			}
+			return
+		}
+		if (key.name === "escape") {
+			setDetailChunkId(null)
+			setDetailScrollOffset(0)
+			return
+		}
+		if (key.name === "return" || key.name === "enter") {
+			const chunk = chunks.find((c) => c.id === selectedChunkId)
+			if (chunk) {
+				setDetailChunkId(chunk.id)
+				setDetailScrollOffset(0)
+			}
+			return
+		}
+	})
+
+	const bodyLines = Math.max(4, h - HEADER_ROWS - FOOTER_ROWS - 4 /* AI_CHAT_HEADER_ROWS */)
+
+	// Short compact labels — a single TextLine truncates with "..." if
+	// it overflows the padded content width, so we keep labels tight and
+	// use a single separator between items.
+	const fixtureList = FIXTURES.map((f, i) => (
+		<span key={f.id}>
+			<span fg={i === fixtureIdx ? colors.accent : colors.muted} attributes={i === fixtureIdx ? TextAttributes.BOLD : undefined}>
+				{`${i + 1} ${f.label}`}
+			</span>
+			{i < FIXTURES.length - 1 ? <span fg={colors.separator}>{" \u00b7 "}</span> : null}
+		</span>
+	))
+
+	// Header + divider live inside a paddingLeft/Right={1} box, so the
+	// real content width is `w - 2`. Divider must match or we get a
+	// mid-line "..." truncation.
+	const contentWidth = Math.max(8, w - 2)
+
+	return (
+		<box width={w} height={h} flexDirection="column" backgroundColor={RGBA.fromHex(colors.screenBg)}>
+			<box paddingLeft={1} paddingRight={1} height={HEADER_ROWS} flexDirection="column">
+				<TextLine>
+					<span fg={colors.muted} attributes={TextAttributes.BOLD}>AI CHAT</span>
+					<span fg={colors.separator}>{" \u00b7 "}</span>
+					{fixtureList}
+				</TextLine>
+				<Divider width={contentWidth} />
+			</box>
+			<AiChatView
+				span={fixture.span}
+				detailState={detailState}
+				chunks={chunks}
+				selectedChunkId={selectedChunkId}
+				onSelectChunk={(chunkId) => setSelectedChunkId(chunkId)}
+				detailChunkId={detailChunkId}
+				onOpenDetail={(chunkId) => {
+					setSelectedChunkId(chunkId)
+					setDetailChunkId(chunkId)
+					setDetailScrollOffset(0)
+				}}
+				onCloseDetail={() => {
+					setDetailChunkId(null)
+					setDetailScrollOffset(0)
+				}}
+				detailScrollOffset={detailScrollOffset}
+				onSetDetailScrollOffset={(updater) => setDetailScrollOffset(updater)}
+				contentWidth={Math.max(24, w - 2)}
+				bodyLines={bodyLines}
+				paneWidth={w}
+			/>
+			<box paddingLeft={1} paddingRight={1} height={FOOTER_ROWS}>
+				<TextLine>
+					<span fg={colors.count} attributes={TextAttributes.BOLD}>1-9</span>
+					<span fg={colors.muted}>{" fixture  "}</span>
+					<span fg={colors.count} attributes={TextAttributes.BOLD}>j/k</span>
+					<span fg={colors.muted}>{" move  "}</span>
+					<span fg={colors.count} attributes={TextAttributes.BOLD}>enter</span>
+					<span fg={colors.muted}>{" detail  "}</span>
+					<span fg={colors.count} attributes={TextAttributes.BOLD}>gg/G</span>
+					<span fg={colors.muted}>{" top/bottom  "}</span>
+					<span fg={colors.count} attributes={TextAttributes.BOLD}>q</span>
+					<span fg={colors.muted}>{" quit"}</span>
+				</TextLine>
+			</box>
+		</box>
+	)
+}
+
+const renderer = await createCliRenderer({
+	exitOnCtrlC: false,
+	screenMode: "alternate-screen",
+	onDestroy: () => { process.exit(0) },
+})
+
+createRoot(renderer).render(
+	<RegistryProvider>
+		<StoryApp />
+	</RegistryProvider>,
+)

package/src/storybook/fixtures/errorState.ts

@@ -0,0 +1,44 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// A tool-call that errored mid-stream: finishReason === "error" and a
+// tool-result whose output shape is irregular (object without the
+// expected `type: "text"` wrapper). Covers graceful-degrade rendering.
+export const errorFixture: ChatFixture = {
+	id: "error",
+	label: "error",
+	span: makeSpan({ status: "error", durationMs: 820 }),
+	detail: makeDetail({
+		status: "error",
+		finishReason: "error",
+		durationMs: 820,
+		promptMessages: {
+			messages: [
+				{ role: "user", content: [{ type: "text", text: "Grab the latest commits from main." }] },
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolCallId: "tc-1", toolName: "bash", input: { command: "git fetch origin main && git log --oneline -5 origin/main" } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{
+							type: "tool-result",
+							toolCallId: "tc-1",
+							toolName: "bash",
+							output: { error: "HTTP 429 rate limited", code: 429, retryable: true },
+						},
+					],
+				},
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "The request was rate-limited. I'll retry after a delay — or you can rerun manually." },
+					],
+				},
+			],
+		},
+		responseText: null,
+	}),
+}

package/src/storybook/fixtures/imagePaste.ts

@@ -0,0 +1,34 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// User pastes an image as a data URL alongside text. The renderer
+// should replace the base64 blob with a compact `[data:image/png
+// base64 NNk]` marker and leave the prose readable. Regression case
+// for the "screen filled with base64" bug.
+const base64Chunk = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAD".repeat(1000)
+
+export const imagePasteFixture: ChatFixture = {
+	id: "image-paste",
+	label: "image",
+	span: makeSpan(),
+	detail: makeDetail({
+		promptMessages: {
+			messages: [
+				{ role: "system", content: "You are a code review assistant." },
+				{
+					role: "user",
+					content: [
+						{ type: "text", text: `I captured this screenshot of the bug: data:image/png;base64,${base64Chunk}\n\nCan you tell me what's off about the formatting here?` },
+					],
+				},
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "Based on the image, the top padding looks inconsistent between rows. Let me open the component to check." },
+						{ type: "tool-call", toolCallId: "tc-1", toolName: "read", input: { filePath: "/src/ui/Row.tsx" } },
+					],
+				},
+			],
+		},
+		responseText: "The padding comes from two different tokens; we should unify them.",
+	}),
+}

package/src/storybook/fixtures/index.ts

@@ -0,0 +1,62 @@
+// Shared fixture type for the AI-chat storybook. Each fixture is a
+// label + a synthetic span + a synthetic AI call detail, in the same
+// shape the real server returns. Prefer hand-crafted minimal examples
+// over real captures — they exercise renderer cases deliberately and
+// don't leak session content into the repo.
+
+import type { AiCallDetail, TraceSpanItem } from "../../domain.ts"
+
+export interface ChatFixture {
+	readonly id: string
+	readonly label: string
+	readonly span: TraceSpanItem
+	readonly detail: AiCallDetail
+}
+
+export const makeSpan = (overrides: Partial<TraceSpanItem> = {}): TraceSpanItem => ({
+	spanId: "fixture-span-0000",
+	parentSpanId: null,
+	operationName: "ai.streamText",
+	serviceName: "storybook",
+	scopeName: "ai",
+	kind: "internal",
+	status: "ok",
+	startTime: new Date(),
+	durationMs: 2400,
+	isRunning: false,
+	depth: 0,
+	tags: {
+		"ai.operationId": "ai.streamText",
+		"ai.model.id": "claude-opus-4-7",
+		"ai.model.provider": "anthropic",
+		"ai.prompt.messages": "[]",
+	},
+	warnings: [],
+	events: [],
+	...overrides,
+})
+
+export const makeDetail = (overrides: Partial<AiCallDetail> = {}): AiCallDetail => ({
+	traceId: "fixture-trace-0000",
+	spanId: "fixture-span-0000",
+	operation: "streamText",
+	service: "storybook",
+	functionId: "story.demo",
+	provider: "anthropic",
+	model: "claude-opus-4-7",
+	status: "ok",
+	startedAt: new Date().toISOString(),
+	durationMs: 2400,
+	sessionId: "ses_fixture",
+	userId: "kit",
+	finishReason: "stop",
+	promptMessages: null,
+	responseText: null,
+	toolCalls: [],
+	toolsAvailable: null,
+	providerMetadata: null,
+	usage: { inputTokens: 1234, outputTokens: 321, totalTokens: 1555, cachedInputTokens: 0, reasoningTokens: null },
+	timing: { msToFirstChunk: null, msToFinish: null, avgOutputTokensPerSecond: null },
+	logs: [],
+	...overrides,
+})

package/src/storybook/fixtures/kitchenSink.ts

@@ -0,0 +1,148 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// "Kitchen sink" fixture — every rendering branch in one transcript so
+// we can iterate on styling without flipping between fixtures. Each
+// section below is labelled with the case it exercises.
+//
+// Order roughly mirrors what a realistic conversation looks like so
+// scrolling feels natural, but it's not meant to be a coherent chat.
+
+const base64Chunk = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAD".repeat(400)
+
+export const kitchenSinkFixture: ChatFixture = {
+	id: "kitchen-sink",
+	label: "kitchen-sink",
+	span: makeSpan({ operationName: "ai.streamText", durationMs: 12_400 }),
+	detail: makeDetail({
+		durationMs: 12_400,
+		finishReason: "tool-calls",
+		usage: { inputTokens: 42_000, outputTokens: 1_200, totalTokens: 43_200, cachedInputTokens: 18_500, reasoningTokens: 320 },
+		promptMessages: {
+			messages: [
+				// ── 1. Long system prompt → collapses to 6 lines + hint
+				{
+					role: "system",
+					content: Array.from(
+						{ length: 120 },
+						(_, i) => `System instruction ${i}: long boilerplate that nobody reads inline`,
+					).join("\n"),
+				},
+
+				// ── 2. Plain user text
+				{ role: "user", content: [{ type: "text", text: "I'd like to refactor the formatter and add a todo list." }] },
+
+				// ── 3. Assistant turn exercising many inline patterns:
+				//     reasoning, plain text, bash tool-call with noisy
+				//     infra keys, read with filePath+offset+limit, todowrite
+				//     with count, task with description+subagent_type.
+				{
+					role: "assistant",
+					content: [
+						{ type: "reasoning", text: "I should start by inspecting the current formatter and the test file, then plan the changes in a todo list before touching any code." },
+						{ type: "text", text: "Plan: check current state, build a todo list, then delegate the heavy read to a subagent." },
+						{ type: "tool-call", toolCallId: "tc-1", toolName: "bash", input: { command: "git status --short --branch", timeout: 120_000, workdir: "/Users/kit/code/open-source/opencode", description: "ignored" } },
+						{ type: "tool-call", toolCallId: "tc-2", toolName: "read", input: { filePath: "/src/formatter.ts", offset: 40, limit: 80 } },
+						{ type: "tool-call", toolCallId: "tc-3", toolName: "todowrite", input: { todos: [{}, {}, {}, {}, {}] } },
+						{ type: "tool-call", toolCallId: "tc-4", toolName: "task", input: { description: "Find every caller of formatDocument and summarise their shape", subagent_type: "explore" } },
+					],
+				},
+
+				// ── 4. Tool results: short plain, long truncated, and
+				//     irregular object-shaped output (error-case fallback).
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-1", toolName: "bash", output: { type: "text", value: "## dev...origin/dev [ahead 8, behind 11]\n M src/formatter.ts" } },
+						{ type: "tool-result", toolCallId: "tc-2", toolName: "read", output: { type: "text", value: Array.from({ length: 80 }, (_, i) => `${i + 1}: // formatter line ${i} — some body content`).join("\n") } },
+						{ type: "tool-result", toolCallId: "tc-3", toolName: "todowrite", output: { type: "text", value: "ok (5 todos)" } },
+						{ type: "tool-result", toolCallId: "tc-4", toolName: "task", output: { error: "rate-limited", code: 429, retryable: true } },
+					],
+				},
+
+				// ── 5. Another assistant turn: edit (primary+secondary
+				//     summary line), webfetch (url), unknown tool, unknown
+				//     content-part type.
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "Now the edit itself, then a quick doc fetch for context:" },
+						{ type: "tool-call", toolCallId: "tc-5", toolName: "edit", input: { filePath: "/src/formatter.ts", oldString: "function format(doc: Doc)", newString: "export function format(doc: Doc)" } },
+						{ type: "tool-call", toolCallId: "tc-6", toolName: "webfetch", input: { url: "https://effect.website/docs/observability/tracing", format: "markdown" } },
+						{ type: "tool-call", toolCallId: "tc-7", toolName: "novel-tool-unknown-to-us", input: { foo: "bar", count: 3 } },
+						// Unknown content part kind — should fall through to
+						// the `[future-thing] …` hint line.
+						{ type: "future-thing", payload: { a: 1, b: "x" } } as unknown as { type: string },
+					],
+				},
+
+				// ── 6. User pastes an image (base64 data URL) → scrubbed
+				//     to a compact marker.
+				{
+					role: "user",
+					content: [
+						{ type: "text", text: `Here's the bug screenshot: data:image/png;base64,${base64Chunk}\n\nCan you tell me what's wrong with the spacing?` },
+					],
+				},
+
+				// ── 7. Final assistant turn — text only, for the response
+				//     baseline.
+				{
+					role: "assistant",
+					content: [{ type: "text", text: "The padding token on row 3 is using `spacing.md` instead of `spacing.sm`. Swapping it fixes the alignment." }],
+				},
+
+				// ── 8. Extra cycles below are purely to make the kitchen sink
+				//     scroll in the story so spacing/selection can be judged in
+				//     motion rather than only in the first viewport.
+				{ role: "user", content: [{ type: "text", text: "Can you also check the border color on the warning banner?" }] },
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "Yep — I’ll inspect the banner component and its token mapping." },
+						{ type: "tool-call", toolCallId: "tc-8", toolName: "read", input: { filePath: "/src/components/WarningBanner.tsx", offset: 1, limit: 120 } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-8", toolName: "read", output: { type: "text", value: Array.from({ length: 25 }, (_, i) => `${i + 1}: const borderColor = tokens.warning.border // sample ${i}`).join("\n") } },
+					],
+				},
+
+				{ role: "assistant", content: [{ type: "text", text: "The banner is using the right border token, but the hover state swaps in the generic accent border. That’s why it feels inconsistent." }] },
+				{ role: "user", content: [{ type: "text", text: "What about the empty state in the sidebar — too much top padding there too?" }] },
+
+				{
+					role: "assistant",
+					content: [
+						{ type: "reasoning", text: "This is another quick component read. I should keep the answer short and just point to the token causing the extra top space." },
+						{ type: "tool-call", toolCallId: "tc-9", toolName: "grep", input: { pattern: "empty state|paddingTop|padding-top", path: "/src" } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-9", toolName: "grep", output: { type: "text", value: "src/ui/Sidebar.tsx:44: const paddingTop = tokens.spacing.xl\nsrc/ui/Sidebar.tsx:72: <EmptyState style={{ paddingTop }} />" } },
+					],
+				},
+				{ role: "assistant", content: [{ type: "text", text: "Yes — the sidebar empty state is using `spacing.xl`. Dropping it to `spacing.lg` would align it with the rest of the panel chrome." }] },
+
+				{ role: "user", content: [{ type: "text", text: "Could you sketch the three fixes as a compact todo list?" }] },
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolCallId: "tc-10", toolName: "todowrite", input: { todos: [{ title: "fix row-3 padding token" }, { title: "fix warning banner hover border" }, { title: "reduce sidebar empty-state top padding" }] } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-10", toolName: "todowrite", output: { type: "text", value: "ok (3 todos)" } },
+					],
+				},
+				{ role: "assistant", content: [{ type: "text", text: "1. Fix row 3 padding token. 2. Keep warning banner hover on the warning border token. 3. Reduce sidebar empty-state top padding from `xl` to `lg`." }] },
+			],
+		},
+		responseText: "The padding token on row 3 is using `spacing.md` instead of `spacing.sm`. Swapping it fixes the alignment.",
+	}),
+}

package/src/storybook/fixtures/rawPrompt.ts

@@ -0,0 +1,15 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// Older AI SDK captures stored `ai.prompt` as a plain string instead
+// of a structured `{ messages: [...] }` object. Renderer should fall
+// back to a single PROMPT (raw) block. Smoke-test for the fallback
+// path.
+export const rawPromptFixture: ChatFixture = {
+	id: "raw-prompt",
+	label: "raw",
+	span: makeSpan(),
+	detail: makeDetail({
+		promptMessages: "Summarise the following: a long bare prompt with no message structure. Imagine this is how an older ai-sdk version captured the conversation. It's just one opaque text blob that used to flow into the model.",
+		responseText: "Here's a one-line summary.",
+	}),
+}

package/src/storybook/fixtures/short.ts

@@ -0,0 +1,27 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// Minimal 2-turn Q&A. Serves as the "baseline sanity check" — if this
+// doesn't render cleanly, something's wrong with the headers/wrapping.
+export const shortFixture: ChatFixture = {
+	id: "short",
+	label: "short",
+	span: makeSpan(),
+	detail: makeDetail({
+		promptMessages: {
+			messages: [
+				{ role: "system", content: "You are a helpful assistant. Keep replies concise." },
+				{ role: "user", content: [{ type: "text", text: "Hey, can you explain what SQLite WAL mode means in one paragraph?" }] },
+				{
+					role: "assistant",
+					content: [
+						{
+							type: "text",
+							text: "WAL (write-ahead log) is a journaling mode in SQLite where writes are appended to a separate `.wal` file instead of rewriting the main database in place. Readers can keep reading the last committed snapshot from the main file while a writer is appending to the WAL, which means concurrent reads and writes don't block each other. Periodically SQLite checkpoints the WAL back into the main database. The upside: much higher concurrency than the default rollback journal. The downside: you get an extra file per database and slightly more complex crash recovery.",
+						},
+					],
+				},
+			],
+		},
+		responseText: "WAL (write-ahead log) is a journaling mode in SQLite where writes are appended to a separate `.wal` file instead of rewriting the main database in place. Readers can keep reading the last committed snapshot from the main file while a writer is appending to the WAL, which means concurrent reads and writes don't block each other.",
+	}),
+}

package/src/storybook/fixtures/toolHeavy.ts

@@ -0,0 +1,65 @@
+import { type ChatFixture, makeDetail, makeSpan } from "./index.ts"
+
+// Realistic multi-turn session with bash + read + edit tool calls and
+// tool results. Mirrors the shape we saw in actual opencode traces.
+// Exercises: smart tool-input summaries, consecutive tool calls,
+// bounded tool-result rendering, reasoning blocks.
+export const toolHeavyFixture: ChatFixture = {
+	id: "tool-heavy",
+	label: "tools",
+	span: makeSpan({ operationName: "ai.streamText", durationMs: 9_400 }),
+	detail: makeDetail({
+		durationMs: 9_400,
+		finishReason: "tool-calls",
+		usage: { inputTokens: 135_131, outputTokens: 943, totalTokens: 136_074, cachedInputTokens: 133_818, reasoningTokens: null },
+		promptMessages: {
+			messages: [
+				{
+					role: "system",
+					content: Array.from({ length: 120 }, (_, i) => `System rule ${i}: long boilerplate content goes here that nobody usually needs to read inline`).join("\n"),
+				},
+				{ role: "user", content: [{ type: "text", text: "Can you review the formatter changes in PR 23020 and tell me if it looks like a regression?" }] },
+				{
+					role: "assistant",
+					content: [
+						{ type: "reasoning", text: "I should inspect the current worktree state and compare it against the PR diff. Starting with `git status` and then grabbing the diff from GitHub." },
+						{ type: "tool-call", toolCallId: "tc-1", toolName: "bash", input: { command: "git status --short --branch", timeout: 120_000, workdir: "/Users/kit/code/open-source/opencode", description: "Show branch state" } },
+						{ type: "tool-call", toolCallId: "tc-2", toolName: "bash", input: { command: "git worktree list", timeout: 120_000, workdir: "/Users/kit/code/open-source/opencode" } },
+						{ type: "tool-call", toolCallId: "tc-3", toolName: "bash", input: { command: "gh pr view 23020 --json title,headRefName,baseRefName,author,url,files", timeout: 120_000 } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-1", toolName: "bash", output: { type: "text", value: "## dev...origin/dev [ahead 8, behind 11]\n M packages/opencode/specs/effect/loose-ends.md" } },
+						{ type: "tool-result", toolCallId: "tc-2", toolName: "bash", output: { type: "text", value: ["/Users/kit/code/open-source/opencode                       6b7f34df2 [dev]", "/private/tmp/oc-repro-22872                                69f7182f0 [kit/repro-write-lsp-hang]", "/private/tmp/opencode-pr22385-base                         87b2a9d74 (detached HEAD)", "/Users/kit/code/open-source/opencode-1.4.7                 9f201d637 (detached HEAD)", "/Users/kit/code/open-source/opencode-await-thenable        343a56418 [kit/oxlint-await-thenable]", "/Users/kit/code/open-source/opencode-config-httpapi        df7e2fe63 [kit/config-httpapi]"].join("\n") } },
+						{ type: "tool-result", toolCallId: "tc-3", toolName: "bash", output: { type: "text", value: '{"title":"fix: add formatter","headRefName":"pr-23020","baseRefName":"dev","url":"https://github.com/anomalyco/opencode/pull/23020","files":[{"path":"packages/opencode/src/formatter.ts","additions":43,"deletions":12}]}' } },
+					],
+				},
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "Let me read the actual formatter diff to see what changed in detail." },
+						{ type: "tool-call", toolCallId: "tc-4", toolName: "read", input: { filePath: "/Users/kit/code/open-source/opencode/packages/opencode/src/formatter.ts" } },
+						{ type: "tool-call", toolCallId: "tc-5", toolName: "read", input: { filePath: "/Users/kit/code/open-source/opencode/packages/opencode/src/formatter.test.ts", offset: 1, limit: 200 } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-4", toolName: "read", output: { type: "text", value: Array.from({ length: 60 }, (_, i) => `${i + 1}: // formatter source line ${i}`).join("\n") } },
+						{ type: "tool-result", toolCallId: "tc-5", toolName: "read", output: { type: "text", value: Array.from({ length: 30 }, (_, i) => `${i + 1}: test("case ${i}", () => { expect(x).toBe(y) })`).join("\n") } },
+					],
+				},
+				{
+					role: "assistant",
+					content: [
+						{ type: "text", text: "The diff changes how trailing newlines are emitted. It looks intentional — they're aligning the output with what prettier does downstream. I wouldn't flag it as a regression." },
+						{ type: "tool-call", toolCallId: "tc-6", toolName: "todowrite", input: { todos: [{ title: "verify tests still pass" }, { title: "comment on the PR" }, { title: "merge if CI green" }] } },
+					],
+				},
+			],
+		},
+		responseText: "Not a regression. The formatter change aligns with how prettier emits trailing newlines; the test still covers the behaviour. I'd approve it.",
+	}),
+}