@kitlangton/motel 0.1.3 → 0.2.1

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) =>
@@ -651,6 +679,39 @@ describe("motel telemetry store", () => {
 		expect(result[0]?.spanId).toBe("ai-stream-1")
 	})
 
+	it("matches AI calls via words in the response text", async () => {
+		// Verifies FTS indexes ai.response.text, not just ai.prompt*. The
+		// seeded ai-stream-2 has response "Error: rate limited".
+		const result = await storeRuntime.runPromise(
+			Effect.flatMap(TelemetryStore.asEffect(), (store) =>
+				store.searchAiCalls({ text: "rate limited" }),
+			).pipe(Effect.provideService(References.MinimumLogLevel, "None")),
+		)
+		expect(result.map((r) => r.spanId)).toContain("ai-stream-2")
+	})
+
+	it("matches AI calls case-insensitively and with partial words", async () => {
+		// unicode61 tokenizer is case-insensitive by default; prefix `*`
+		// handles partial terms like `"PROG"` matching `"programming"`.
+		const result = await storeRuntime.runPromise(
+			Effect.flatMap(TelemetryStore.asEffect(), (store) =>
+				store.searchAiCalls({ text: "PROG" }),
+			).pipe(Effect.provideService(References.MinimumLogLevel, "None")),
+		)
+		expect(result.map((r) => r.spanId)).toContain("ai-stream-1")
+	})
+
+	it("ignores FTS special characters without syntax errors", async () => {
+		// FTS5 treats `"`, `*`, `-`, `:` as operators; toFtsQuery must
+		// strip them so raw user input never crashes the query.
+		const result = await storeRuntime.runPromise(
+			Effect.flatMap(TelemetryStore.asEffect(), (store) =>
+				store.searchAiCalls({ text: `"joke" - about:programming*` }),
+			).pipe(Effect.provideService(References.MinimumLogLevel, "None")),
+		)
+		expect(result.map((r) => r.spanId)).toContain("ai-stream-1")
+	})
+
 	it("filters AI calls by operation type", async () => {
 		const result = await storeRuntime.runPromise(
 			Effect.flatMap(TelemetryStore.asEffect(), (store) =>

package/src/ui/AiChatView.tsx

@@ -0,0 +1,292 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { useLayoutEffect, useMemo, useState } from "react"
+import { isAiSpan, type TraceSpanItem } from "../domain.ts"
+import {
+	buildChatListRows,
+	chunkDetailTitle,
+	renderChunkDetailLines,
+	type Chunk,
+	type ChatListRow,
+	type Role,
+} from "./aiChatModel.ts"
+import { formatDuration, truncateText } from "./format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import type { AiCallDetailState } from "./state.ts"
+import { colors, SEPARATOR } from "./theme.ts"
+
+export const AI_CHAT_HEADER_ROWS = 4
+
+const roleColor = (role: Role): string => {
+	switch (role) {
+		case "user": return colors.accent
+		case "assistant": return colors.text
+		case "system": return colors.muted
+		case "tool": return colors.passing
+		case "response": return colors.accent
+		default: return colors.muted
+	}
+}
+
+const rowPrefix = (chunk: Chunk | null): string => {
+	if (!chunk) return "  "
+	switch (chunk.kind) {
+		case "tool-call": return "→ "
+		case "tool-result": return "← "
+		case "reasoning": return "• "
+		case "response": return "↳ "
+		default: return ""
+	}
+}
+
+const rowTextColor = (chunk: Chunk | null, role: Role, selected: boolean): string => {
+	if (selected) return colors.selectedText
+	if (!chunk) return roleColor(role)
+	if (chunk.kind === "tool-call") return colors.count
+	if (chunk.kind === "tool-result") return colors.passing
+	if (chunk.kind === "reasoning") return colors.muted
+	if (chunk.kind === "system") return colors.muted
+	return colors.text
+}
+
+const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n))
+
+const chunkRows = (rows: readonly ChatListRow[]) => rows.filter((row) => row.kind === "chunk")
+
+interface MouseScrollEvent {
+	readonly scroll?: {
+		readonly direction: string
+		readonly delta: number
+	}
+	readonly stopPropagation?: () => void
+}
+
+const scrollDelta = (event: MouseScrollEvent): number => {
+	const info = event.scroll
+	if (!info) return 0
+	const magnitude = Math.max(1, Math.round(info.delta))
+	if (info.direction === "up") return -magnitude
+	if (info.direction === "down") return magnitude
+	return 0
+}
+
+const ChatDetailModal = ({
+	chunk,
+	scrollOffset,
+	onScrollOffset,
+	paneWidth,
+	paneHeight,
+	onClose,
+}: {
+	readonly chunk: Chunk
+	readonly scrollOffset: number
+	readonly onScrollOffset: (updater: (current: number) => number) => void
+	readonly paneWidth: number
+	readonly paneHeight: number
+	readonly onClose: () => void
+}) => {
+	const modalWidth = Math.min(Math.max(56, Math.floor(paneWidth * 0.8)), paneWidth - 4)
+	const modalHeight = Math.min(Math.max(12, Math.floor(paneHeight * 0.75)), paneHeight - 2)
+	const left = Math.max(2, Math.floor((paneWidth - modalWidth) / 2))
+	const top = Math.max(1, Math.floor((paneHeight - modalHeight) / 2))
+	const innerWidth = Math.max(16, modalWidth - 4)
+	const bodyLines = Math.max(4, modalHeight - 4)
+	const lines = renderChunkDetailLines(chunk, innerWidth)
+	const maxOffset = Math.max(0, lines.length - bodyLines)
+	const offset = clamp(scrollOffset, 0, maxOffset)
+	const visible = lines.slice(offset, offset + bodyLines)
+	const meta = chunk.headerMeta ?? `${lines.length} lines`
+	const handleWheel = (event: MouseScrollEvent) => {
+		const delta = scrollDelta(event)
+		if (delta === 0) return
+		onScrollOffset((current) => clamp(current + delta, 0, maxOffset))
+		event.stopPropagation?.()
+	}
+
+	return (
+		<box position="absolute" zIndex={3500} left={0} top={0} width={paneWidth} height={paneHeight} backgroundColor={RGBA.fromInts(0, 0, 0, 110)} onMouseUp={onClose}>
+			<box position="absolute" left={left} top={top} width={modalWidth} height={modalHeight} flexDirection="column" backgroundColor={RGBA.fromHex(colors.screenBg)} onMouseScroll={handleWheel}>
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left={chunkDetailTitle(chunk)} right={`${meta} ${SEPARATOR} esc close`} width={modalWidth - 2} rightFg={colors.count} />
+				</box>
+				<Divider width={modalWidth} />
+				<box flexDirection="column" paddingLeft={2} paddingRight={2}>
+					{visible.map((line, i) => (
+						<PlainLine key={`detail-${i + offset}`} text={line} fg={colors.text} />
+					))}
+					{visible.length < bodyLines ? Array.from({ length: bodyLines - visible.length }, (_, i) => <BlankRow key={`detail-pad-${i}`} />) : null}
+				</box>
+			</box>
+		</box>
+	)
+}
+
+export const AiChatView = ({
+	span,
+	detailState,
+	chunks,
+	selectedChunkId,
+	onSelectChunk,
+	detailChunkId,
+	onOpenDetail,
+	onCloseDetail,
+	detailScrollOffset,
+	onSetDetailScrollOffset,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+}: {
+	readonly span: TraceSpanItem | null
+	readonly detailState: AiCallDetailState
+	readonly chunks: readonly Chunk[]
+	readonly selectedChunkId: string | null
+	readonly onSelectChunk: (chunkId: string) => void
+	readonly detailChunkId: string | null
+	readonly onOpenDetail: (chunkId: string) => void
+	readonly onCloseDetail: () => void
+	readonly detailScrollOffset: number
+	readonly onSetDetailScrollOffset: (updater: (current: number) => number) => void
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+}) => {
+	const rows = useMemo(() => buildChatListRows(chunks), [chunks])
+	const selectable = useMemo(() => chunkRows(rows), [rows])
+	const [scrollOffset, setScrollOffset] = useState(0)
+
+	const selectedChunk = useMemo(
+		() => selectedChunkId ? chunks.find((chunk) => chunk.id === selectedChunkId) ?? null : null,
+		[chunks, selectedChunkId],
+	)
+	const detailChunk = useMemo(
+		() => detailChunkId ? chunks.find((chunk) => chunk.id === detailChunkId) ?? null : null,
+		[chunks, detailChunkId],
+	)
+
+	const selectedRowIndex = useMemo(
+		() => selectedChunkId ? rows.findIndex((row) => row.kind === "chunk" && row.chunkId === selectedChunkId) : -1,
+		[rows, selectedChunkId],
+	)
+
+	useLayoutEffect(() => {
+		const maxOffset = Math.max(0, rows.length - bodyLines)
+		if (selectedRowIndex < 0) {
+			setScrollOffset((current) => clamp(current, 0, maxOffset))
+			return
+		}
+		setScrollOffset((current) => {
+			let next = clamp(current, 0, maxOffset)
+			if (selectedRowIndex < next) next = selectedRowIndex
+			else if (selectedRowIndex >= next + bodyLines) next = selectedRowIndex - bodyLines + 1
+			return clamp(next, 0, maxOffset)
+		})
+	}, [rows.length, bodyLines, selectedRowIndex])
+
+	if (!span || !isAiSpan(span.tags)) {
+		return (
+			<box flexDirection="column" width={paneWidth} height={bodyLines + AI_CHAT_HEADER_ROWS} overflow="hidden">
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left="AI CHAT" right="not an ai span" width={contentWidth} rightFg={colors.muted} />
+				</box>
+			</box>
+		)
+	}
+
+	const detail = detailState.data
+	const model = detail?.model ?? span.tags["ai.model.id"] ?? "unknown model"
+	const provider = detail?.provider ?? span.tags["ai.model.provider"] ?? null
+	const operation = detail?.operation ?? span.operationName
+	const finishReason = detail?.finishReason ?? null
+	const usage = detail?.usage ?? null
+	const durationLabel = formatDuration(detail?.durationMs ?? span.durationMs)
+	const maxOffset = Math.max(0, rows.length - bodyLines)
+	const offset = clamp(scrollOffset, 0, maxOffset)
+	const visible = rows.slice(offset, offset + bodyLines)
+	const headerRight = `${operation} ${SEPARATOR} ${durationLabel} ${SEPARATOR} ${selectable.length > 0 ? `${Math.max(1, selectable.findIndex((row) => row.chunkId === selectedChunkId) + 1)}/${selectable.length}` : "0/0"}`
+	const handleListWheel = (event: MouseScrollEvent) => {
+		if (detailChunk) return
+		const delta = scrollDelta(event)
+		if (delta === 0) return
+		setScrollOffset((current) => clamp(current + delta, 0, maxOffset))
+		event.stopPropagation?.()
+	}
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + AI_CHAT_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left="AI CHAT" right={headerRight} width={contentWidth} rightFg={colors.count} />
+			</box>
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{"✦ "}</span>
+					<span fg={colors.text}>{model}</span>
+					{provider ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{provider}</span></> : null}
+					{finishReason ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{`finish=${finishReason}`}</span></> : null}
+				</TextLine>
+				<TextLine>
+					{usage ? (
+						<>
+							<span fg={colors.muted}>{"tokens "}</span>
+							<span fg={colors.count}>{usage.inputTokens != null ? `in=${usage.inputTokens}` : ""}</span>
+							<span fg={colors.muted}>{usage.cachedInputTokens != null ? ` cached=${usage.cachedInputTokens}` : ""}</span>
+							<span fg={colors.count}>{usage.outputTokens != null ? ` out=${usage.outputTokens}` : ""}</span>
+							<span fg={colors.muted}>{usage.reasoningTokens != null ? ` reason=${usage.reasoningTokens}` : ""}</span>
+						</>
+					) : (
+						<span fg={colors.muted}>{detail?.sessionId ? `session ${detail.sessionId}` : "no usage reported"}</span>
+					)}
+				</TextLine>
+			</box>
+			<Divider width={paneWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1} onMouseScroll={handleListWheel}>
+				{detailState.status === "loading" && !detail ? (
+					<PlainLine text="loading chat transcript…" fg={colors.muted} />
+				) : detailState.status === "error" ? (
+					<PlainLine text={detailState.error ?? "failed to load chat detail"} fg={colors.error} />
+				) : rows.length === 0 ? (
+					<PlainLine text="no chat content parsed from this span" fg={colors.muted} />
+				) : (
+					visible.map((row, i) => {
+						if (row.kind === "separator") {
+							return <BlankRow key={`row-${offset + i}`} />
+						}
+						if (row.kind === "role-divider") {
+							return (
+								<TextLine key={`row-${offset + i}`}>
+									<span fg={colors.separator}>{" "}</span>
+									<span fg={roleColor(row.role)} attributes={TextAttributes.BOLD}>{row.text}</span>
+								</TextLine>
+							)
+						}
+						const chunk = chunks.find((candidate) => candidate.id === row.chunkId) ?? null
+						const isSelected = row.chunkId === selectedChunkId
+						const prefix = rowPrefix(chunk)
+						const meta = row.meta ?? ""
+						const textWidth = Math.max(8, contentWidth - prefix.length - meta.length - 4)
+						const display = truncateText(row.text, textWidth)
+						const gap = Math.max(1, contentWidth - prefix.length - display.length - meta.length - 1)
+						return (
+							<box key={`row-${offset + i}`} height={1} onMouseDown={() => { if (row.chunkId) onSelectChunk(row.chunkId) }}>
+								<TextLine bg={isSelected ? colors.selectedBg : undefined}>
+									<span fg={isSelected ? roleColor(row.role) : colors.separator}>{isSelected ? "▎" : " "}</span>
+									<span fg={rowTextColor(chunk, row.role, isSelected)} attributes={isSelected ? TextAttributes.BOLD : undefined}>{prefix}{display}</span>
+									{meta ? <><span fg={colors.muted}>{" ".repeat(gap)}</span><span fg={colors.muted}>{meta}</span></> : null}
+								</TextLine>
+							</box>
+						)
+					})
+				)}
+				{visible.length < bodyLines && rows.length > 0 ? Array.from({ length: bodyLines - visible.length }, (_, i) => <BlankRow key={`pad-${i}`} />) : null}
+			</box>
+			{detailChunk ? (
+				<ChatDetailModal
+					chunk={detailChunk}
+					scrollOffset={detailScrollOffset}
+					onScrollOffset={onSetDetailScrollOffset}
+					paneWidth={paneWidth}
+					paneHeight={bodyLines + AI_CHAT_HEADER_ROWS}
+					onClose={onCloseDetail}
+				/>
+			) : null}
+		</box>
+	)
+}

package/src/ui/SpanContentView.tsx

@@ -0,0 +1,181 @@
+import { TextAttributes } from "@opentui/core"
+import { useMemo } from "react"
+import { isAiSpan, type TraceSpanItem } from "../domain.ts"
+import { formatDuration, lifecycleLabel, wrapTextLines } from "./format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+/** Header above the attribute list: "SPAN CONTENT" + status/duration strip. */
+export const SPAN_CONTENT_HEADER_ROWS = 4
+/** Width of the indent used for wrapped lines of a stacked value. */
+const VALUE_INDENT = "  "
+/** Width of the leading marker column that signals "selected" on the cursor row. */
+const CURSOR_WIDTH = 2
+
+/**
+ * Layout plan for a single attribute row. Each attribute renders as at least
+ * two rows (key line + one wrapped value line) plus however many extra wrap
+ * lines the value needs. We precompute row counts up front so the viewport
+ * (j/k scroll) can pick exactly `bodyLines` worth of content without
+ * measuring twice.
+ */
+interface AttrBlock {
+	readonly key: string
+	readonly valueLines: readonly string[]
+	readonly rowCount: number
+}
+
+/**
+ * Full-screen span content view (level 2). Triggered by pressing enter on
+ * a span in the waterfall. Renders every tag stacked key-above-value with
+ * no truncation and word-wrapping to fit the viewport. The selected
+ * attribute is highlighted (accent color on the key, leading `▶`) and
+ * `y` copies its value. Step 3 will branch AI-flagged spans into a
+ * specialised chat-transcript view; this is the generic fallback that
+ * also serves as the baseline for any non-AI span.
+ */
+export const SpanContentView = ({
+	span,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedAttrIndex,
+}: {
+	readonly span: TraceSpanItem | null
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+	readonly selectedAttrIndex: number
+}) => {
+	if (!span) {
+		return (
+			<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_CONTENT_HEADER_ROWS} overflow="hidden">
+				<box paddingLeft={1} paddingRight={1}>
+					<AlignedHeaderLine left="SPAN CONTENT" right="no span selected" width={contentWidth} rightFg={colors.muted} />
+				</box>
+				<BlankRow />
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<PlainLine text="Select a span in the waterfall to view its full content." fg={colors.muted} />
+				</box>
+			</box>
+		)
+	}
+
+	const entries = Object.entries(span.tags)
+	const selected = Math.max(0, Math.min(selectedAttrIndex, entries.length - 1))
+	const valueWrapWidth = Math.max(16, contentWidth - VALUE_INDENT.length - CURSOR_WIDTH)
+	const aiFlag = isAiSpan(span.tags)
+
+	// Block layout is memoised on entries identity — otherwise every j/k
+	// press would rewrap every attribute's value even though only the
+	// highlight moved.
+	const blocks = useMemo<readonly AttrBlock[]>(() => {
+		return entries.map(([key, value]) => {
+			// Word-wrap with a generous line cap — the view is scrollable so
+			// we can afford to show the whole value rather than forcing an
+			// ellipsis. 200 lines covers enormous LLM prompts without
+			// blowing up the render tree.
+			const valueLines = wrapTextLines(value, valueWrapWidth, 200)
+			return { key, valueLines, rowCount: 1 + Math.max(1, valueLines.length) }
+		})
+	}, [entries, valueWrapWidth])
+
+	// Viewport: pick the contiguous window of blocks that (a) fits inside
+	// bodyLines and (b) contains the selected block. We find the first
+	// start index whose accumulated row count from there through `selected`
+	// fits in the budget; that start is the window top. If the selected
+	// block alone is larger than bodyLines we still render it — oversize
+	// values just get cut at the pane edge, no ellipsis.
+	const fitsFrom = (start: number) => {
+		let rows = 0
+		for (let i = start; i <= selected; i++) {
+			rows += blocks[i]?.rowCount ?? 0
+			if (rows > bodyLines) return false
+		}
+		return true
+	}
+	let windowStart = 0
+	for (let i = 0; i <= selected; i++) {
+		if (fitsFrom(i)) {
+			windowStart = i
+			break
+		}
+	}
+	const visible: AttrBlock[] = []
+	let visibleRows = 0
+	for (let i = windowStart; i < blocks.length; i++) {
+		const block = blocks[i]!
+		if (visibleRows + block.rowCount > bodyLines && i > selected) break
+		visible.push(block)
+		visibleRows += block.rowCount
+	}
+	const firstVisibleIndex = windowStart
+
+	const headerStatus = `${span.status} ${SEPARATOR} ${formatDuration(span.durationMs)}`
+	const headerStatusColor = span.isRunning
+		? colors.warning
+		: span.status === "error"
+			? colors.error
+			: colors.passing
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_CONTENT_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left="SPAN CONTENT" right={headerStatus} width={contentWidth} rightFg={headerStatusColor} />
+			</box>
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<TextLine>
+					{aiFlag ? <span fg={colors.accent}>{"\u2726 "}</span> : null}
+					<span fg={colors.text}>{span.operationName}</span>
+				</TextLine>
+				<TextLine>
+					<span fg={colors.defaultService}>{span.serviceName}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{span.scopeName ?? "no scope"}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={span.isRunning ? colors.warning : colors.muted}>{lifecycleLabel(span)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{span.spanId.slice(0, 16)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.count}>{`${entries.length} tags`}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.muted}>{`${selected + 1}/${entries.length}`}</span>
+				</TextLine>
+			</box>
+			<Divider width={paneWidth} />
+			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+				{entries.length === 0 ? (
+					<PlainLine text="No tags on this span." fg={colors.muted} />
+				) : (
+					visible.map((block, offset) => {
+						const index = firstVisibleIndex + offset
+						const isSelected = index === selected
+						const keyColor = isSelected ? colors.accent : colors.count
+						const cursor = isSelected ? "\u25b8 " : "  "
+						return (
+							<box key={`${span.spanId}-${block.key}`} flexDirection="column">
+								<TextLine>
+									<span fg={isSelected ? colors.accent : colors.separator}>{cursor}</span>
+									<span fg={keyColor} attributes={isSelected ? TextAttributes.BOLD : undefined}>{block.key}</span>
+								</TextLine>
+								{block.valueLines.length === 0 ? (
+									<TextLine>
+										<span fg={colors.separator}>{VALUE_INDENT}</span>
+										<span fg={colors.muted}>(empty)</span>
+									</TextLine>
+								) : (
+									block.valueLines.map((line, i) => (
+										<TextLine key={i}>
+											<span fg={colors.separator}>{VALUE_INDENT}</span>
+											<span fg={isSelected ? colors.text : colors.muted}>{line}</span>
+										</TextLine>
+									))
+								)}
+							</box>
+						)
+					})
+				)}
+			</box>
+		</box>
+	)
+}