@kitlangton/motel 0.2.0 → 0.2.1

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.",
+	}),
+}

package/src/telemetry.test.ts

@@ -158,6 +158,23 @@ describe("motel telemetry store", () => {
 										{ key: "ai.response.msToFinish", value: { stringValue: "20000" } },
 									],
 								},
+								{
+									traceId: "trace-ai",
+									spanId: "ai-stream-1-do",
+									parentSpanId: "ai-stream-1",
+									name: "ai.streamText.doStream",
+									kind: 1,
+									startTimeUnixNano: String(nowNanos + 21n * oneSecond),
+									endTimeUnixNano: String(nowNanos + 39n * oneSecond),
+									attributes: [
+										{ key: "ai.operationId", value: { stringValue: "ai.streamText.doStream" } },
+										{ key: "ai.telemetry.functionId", value: { stringValue: "session.llm" } },
+										{ key: "ai.model.provider", value: { stringValue: "openai.responses" } },
+										{ key: "ai.model.id", value: { stringValue: "gpt-5.4" } },
+										{ key: "ai.telemetry.metadata.sessionId", value: { stringValue: "ses_test123" } },
+										{ key: "ai.prompt.messages", value: { stringValue: '[{"role":"user","content":"Tell me a joke about programming"}]' } },
+									],
+								},
 								{
 									traceId: "trace-ai",
 									spanId: "ai-tool-1",
@@ -617,6 +634,17 @@ describe("motel telemetry store", () => {
 		expect(streamCall?.usage?.outputTokens).toBe(42)
 	})
 
+	it("dedupes nested doStream spans from AI summaries", async () => {
+		const result = await storeRuntime.runPromise(
+			Effect.flatMap(TelemetryStore.asEffect(), (store) =>
+				store.searchAiCalls({ sessionId: "ses_test123" }),
+			).pipe(Effect.provideService(References.MinimumLogLevel, "None")),
+		)
+
+		expect(result.map((call) => call.spanId)).toEqual(["ai-stream-1"])
+		expect(result.map((call) => call.spanId)).not.toContain("ai-stream-1-do")
+	})
+
 	it("filters AI calls by model", async () => {
 		const result = await storeRuntime.runPromise(
 			Effect.flatMap(TelemetryStore.asEffect(), (store) =>