@kitlangton/motel 0.2.0 → 0.2.4

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) =>

package/src/ui/AiChatView.tsx

@@ -0,0 +1,308 @@
+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 splitToolRowText = (text: string): { readonly head: string; readonly tail: string | null } => {
+	const match = text.match(/\s{2,}/)
+	const sep = match?.index ?? -1
+	if (sep < 0) return { head: text, tail: null }
+	return {
+		head: text.slice(0, sep),
+		tail: text.slice(sep + match![0].length),
+	}
+}
+
+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 chunkById = useMemo(() => new Map(chunks.map((chunk) => [chunk.id, chunk] as const)), [chunks])
+	const selectedOrdinal = useMemo(
+		() => selectedChunkId ? selectable.findIndex((row) => row.chunkId === selectedChunkId) : -1,
+		[selectable, selectedChunkId],
+	)
+	const [scrollOffset, setScrollOffset] = useState(0)
+
+	const detailChunk = useMemo(
+		() => detailChunkId ? chunkById.get(detailChunkId) ?? null : null,
+		[chunkById, 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, selectedOrdinal + 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 = row.chunkId ? chunkById.get(row.chunkId) ?? null : 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)
+						const toolLike = chunk?.kind === "tool-call" || chunk?.kind === "tool-result"
+						const { head, tail } = toolLike ? splitToolRowText(display) : { head: display, tail: null }
+						const headColor = rowTextColor(chunk, row.role, isSelected)
+						const tailColor = isSelected ? colors.muted : colors.separator
+						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={headColor} attributes={isSelected ? TextAttributes.BOLD : undefined}>{`${prefix}${head}`}</span>
+									{tail ? <span fg={tailColor}>{` ${tail}`}</span> : null}
+									{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>
+	)
+}

package/src/ui/SpanDetail.tsx

@@ -4,6 +4,50 @@ import { formatTimestamp, logSeverityColor, relevantLogAttributes, truncateText,
 import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
 import { colors, SEPARATOR } from "./theme.ts"
 
+/**
+ * Inline-vs-stacked threshold for tag rendering.
+ *
+ * A tag renders **inline** (`key  value` on one row) when:
+ *   - the key is ≤ INLINE_KEY_MAX chars AND
+ *   - the value fits in the remaining width on one line AND
+ *   - the value contains no newlines.
+ *
+ * Otherwise it **stacks** — the key gets its own row (full, no truncation)
+ * and the value is wrapped below with a leading indent. Long LLM payloads
+ * (`ai.prompt.messages`, `gen_ai.completion`, etc.) always hit the stacked
+ * path, which is what makes them readable at a glance.
+ */
+const INLINE_KEY_MAX = 24
+/** Max wrapped rows we'll spend on a single stacked value's content. */
+const VALUE_WRAP_MAX_LINES = 4
+/** Leading indent for stacked values — subtle but visible. */
+const STACK_INDENT = "  "
+
+interface TagRender {
+	readonly key: string
+	readonly value: string
+	readonly inline: boolean
+	readonly valueLines: readonly string[]
+	readonly rowCount: number
+}
+
+const planTag = (key: string, value: string, contentWidth: number, inlineKeyPad: number): TagRender => {
+	const hasNewline = value.includes("\n")
+	const inlineValueWidth = Math.max(1, contentWidth - inlineKeyPad - 2)
+	const canInline =
+		!hasNewline &&
+		key.length <= INLINE_KEY_MAX &&
+		value.length <= inlineValueWidth
+	if (canInline) {
+		return { key, value, inline: true, valueLines: [value], rowCount: 1 }
+	}
+	const wrapWidth = Math.max(16, contentWidth - STACK_INDENT.length)
+	const valueLines = wrapTextLines(value, wrapWidth, VALUE_WRAP_MAX_LINES)
+	// 1 row for the key + N rows for wrapped value (at least 1).
+	const rowCount = 1 + Math.max(1, valueLines.length)
+	return { key, value, inline: false, valueLines, rowCount }
+}
+
 export const SpanDetailView = ({
 	span,
 	logs,
@@ -16,15 +60,41 @@ export const SpanDetailView = ({
 	bodyLines: number
 }) => {
 	const tagEntries = Object.entries(span.tags)
-	const maxKeyLen = Math.min(28, tagEntries.reduce((max, [key]) => Math.max(max, key.length), 0))
+	// Column width for inline keys. We cap at INLINE_KEY_MAX so a single
+	// very-long key doesn't widen the column for everyone. Short keys still
+	// align against each other.
+	const inlineKeyPad = Math.min(
+		INLINE_KEY_MAX,
+		tagEntries.reduce((max, [key]) => (key.length <= INLINE_KEY_MAX ? Math.max(max, key.length) : max), 0),
+	)
+
 	const maxLogLines = logs.length > 0 ? Math.min(4, Math.max(1, Math.floor(bodyLines * 0.3))) : 0
 	const visibleLogs = logs.slice(0, maxLogLines)
 	const visibleWarnings = span.warnings.slice(0, visibleLogs.length > 0 ? 1 : 2)
 	const visibleEvents = span.events.slice(0, 2)
 	const reservedForWarnings = visibleWarnings.length > 0 ? visibleWarnings.length + 2 : 0
 	const reservedForEvents = visibleEvents.length > 0 ? visibleEvents.length + 2 : 0
-	const reservedForLogs = visibleLogs.length > 0 ? visibleLogs.reduce((total, log) => total + 3 + Math.min(3, wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3).length), 1) : 0
-	const maxTagLines = Math.max(0, bodyLines - 4 - reservedForWarnings - reservedForEvents - reservedForLogs)
+	const reservedForLogs = visibleLogs.length > 0
+		? visibleLogs.reduce((total, log) => total + 3 + Math.min(3, wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3).length), 1)
+		: 0
+	// Budget for the TAGS section: total body minus header (TAGS row + blank)
+	// minus every other section's reservation. Each stacked tag spends more
+	// rows than an inline one so we plan the full visible set up-front rather
+	// than slicing by entry count.
+	const tagBudget = Math.max(0, bodyLines - 2 - reservedForWarnings - reservedForEvents - reservedForLogs)
+
+	const planned: TagRender[] = []
+	let rowsUsed = 0
+	let skipped = 0
+	for (const [key, value] of tagEntries) {
+		const plan = planTag(key, value, contentWidth, inlineKeyPad)
+		if (rowsUsed + plan.rowCount > tagBudget) {
+			skipped = tagEntries.length - planned.length
+			break
+		}
+		planned.push(plan)
+		rowsUsed += plan.rowCount
+	}
 
 	// NOTE: op name, service, duration, lifecycle, status, and spanId are all
 	// rendered by the enclosing SpanDetailPane header (rows 0..2). Starting
@@ -37,21 +107,32 @@ export const SpanDetailView = ({
 					<TextLine>
 						<span fg={colors.accent} attributes={TextAttributes.BOLD}>TAGS</span>
 					</TextLine>
-					{tagEntries.slice(0, maxTagLines).map(([key, value]) => {
-						const keyStr = key.length > maxKeyLen ? `${key.slice(0, maxKeyLen - 1)}\u2026` : key.padEnd(maxKeyLen)
-						const valMaxWidth = Math.max(8, contentWidth - maxKeyLen - 2)
-						const valStr = value.length > valMaxWidth ? `${value.slice(0, valMaxWidth - 1)}\u2026` : value
-
-						return (
-							<TextLine key={key}>
-								<span fg={colors.count}>{keyStr}</span>
-								<span fg={colors.muted}>  </span>
-								<span fg={colors.text}>{valStr}</span>
+					{planned.map((tag) => tag.inline ? (
+						<TextLine key={tag.key}>
+							<span fg={colors.count}>{tag.key.padEnd(inlineKeyPad)}</span>
+							<span fg={colors.muted}>  </span>
+							<span fg={colors.text}>{tag.value}</span>
+						</TextLine>
+					) : (
+						<box key={tag.key} flexDirection="column">
+							<TextLine>
+								<span fg={colors.count}>{tag.key}</span>
 							</TextLine>
-						)
-					})}
-					{tagEntries.length > maxTagLines ? (
-						<PlainLine text={`  \u2026 ${tagEntries.length - maxTagLines} more`} fg={colors.muted} />
+							{tag.valueLines.length === 0 ? (
+								<TextLine>
+									<span fg={colors.muted}>{STACK_INDENT}</span>
+									<span fg={colors.muted}>(empty)</span>
+								</TextLine>
+							) : tag.valueLines.map((line, index) => (
+								<TextLine key={index}>
+									<span fg={colors.muted}>{STACK_INDENT}</span>
+									<span fg={colors.text}>{line}</span>
+								</TextLine>
+							))}
+						</box>
+					))}
+					{skipped > 0 ? (
+						<PlainLine text={`${STACK_INDENT}\u2026 ${skipped} more`} fg={colors.muted} />
 					) : null}
 				</>
 			) : (