@kitlangton/motel 0.2.0 → 0.2.1

package/src/ui/Waterfall.tsx

@@ -1,81 +1,17 @@
 import { memo, useLayoutEffect, useRef, useState } from "react"
-import type { LogItem, TraceItem, TraceSpanItem } from "../domain.ts"
+import { isAiSpan, type LogItem, type TraceItem, type TraceSpanItem } from "../domain.ts"
 import { formatDuration, lifecycleLabel, splitDuration, truncateText } from "./format.ts"
 import { BlankRow, TextLine } from "./primitives.tsx"
 import { colors, waterfallColors } from "./theme.ts"
-
-/** Filter spans to only those visible given a set of collapsed span IDs. */
-export const getVisibleSpans = (spans: readonly TraceSpanItem[], collapsedIds: ReadonlySet<string>): readonly TraceSpanItem[] => {
-	if (collapsedIds.size === 0) return spans
-	const result: TraceSpanItem[] = []
-	let skipDepth = -1
-	for (const span of spans) {
-		if (skipDepth >= 0 && span.depth > skipDepth) continue
-		skipDepth = -1
-		result.push(span)
-		if (collapsedIds.has(span.spanId)) {
-			skipDepth = span.depth
-		}
-	}
-	return result
-}
-
-/** Find the index of a span's parent in the visible list. */
-export const findParentIndex = (spans: readonly TraceSpanItem[], index: number): number | null => {
-	const span = spans[index]
-	if (!span || span.depth === 0) return null
-	for (let i = index - 1; i >= 0; i--) {
-		if (spans[i]!.depth < span.depth) return i
-	}
-	return null
-}
-
-/** Find the index of a span's first child in the visible list. */
-export const findFirstChildIndex = (spans: readonly TraceSpanItem[], index: number): number | null => {
-	const span = spans[index]
-	const next = spans[index + 1]
-	if (span && next && next.depth > span.depth) return index + 1
-	return null
-}
-
-const INTERESTING_TAGS = [
-	"http.method", "http.url", "http.status_code", "http.route",
-	"db.system", "db.statement", "db.name",
-	"messaging.system", "messaging.destination",
-	"error", "error.message",
-	"net.peer.name", "net.peer.port",
-] as const
-
-const buildTreePrefix = (spans: readonly TraceSpanItem[], index: number): string => {
-	const span = spans[index]
-	if (span.depth === 0) return ""
-
-	const parts: string[] = []
-
-	const isLastChild = (spanIndex: number, depth: number): boolean => {
-		for (let i = spanIndex + 1; i < spans.length; i++) {
-			if (spans[i].depth < depth) return true
-			if (spans[i].depth === depth) return false
-		}
-		return true
-	}
-
-	parts.push(isLastChild(index, span.depth) ? "\u2514\u2500" : "\u251c\u2500")
-
-	for (let d = span.depth - 1; d >= 1; d--) {
-		let parentIndex = index
-		for (let i = index - 1; i >= 0; i--) {
-			if (spans[i].depth === d) {
-				parentIndex = i
-				break
-			}
-			if (spans[i].depth < d) break
-		}
-		parts.push(isLastChild(parentIndex, d) ? "  " : "\u2502 ")
-	}
-
-	return parts.reverse().join("")
-}
+export { getVisibleSpans } from "./waterfallModel.ts"
+import {
+	buildTreePrefix,
+	findFirstChildIndex,
+	getWaterfallLayout,
+	getWaterfallSuffixMetrics,
+	type WaterfallSuffixMetrics,
+	spanPreviewEntries,
+} from "./waterfallModel.ts"
 
 const PARTIAL_BLOCKS = ["", "\u258f", "\u258e", "\u258d", "\u258c", "\u258b", "\u258a", "\u2589", "\u2588"] as const
 const ULTRA_SHORT_MARKERS = ["\u258f", "\u258e", "\u258d", "\u258c"] as const
@@ -180,66 +116,6 @@ const durationColor = (durationMs: number) => {
 	return colors.muted
 }
 
-export const getWaterfallLayout = (contentWidth: number, suffixWidth: number) => {
-	const labelMaxWidth = Math.min(Math.floor(contentWidth * 0.4), 32)
-	// Two single-space gaps: one between label and bar, one between bar and suffix.
-	const barWidth = Math.max(6, contentWidth - labelMaxWidth - suffixWidth - 2)
-	return { labelMaxWidth, barWidth } as const
-}
-
-export type WaterfallSuffixMetrics = {
-	readonly maxDurationWidth: number
-	readonly suffixWidth: number
-}
-
-/**
- * Compute a shared suffix (duration) width from the visible viewport.
- * Reserving the width once keeps every row's duration right-aligned on the
- * same column regardless of per-row content. Log correlation lives in the
- * span detail pane, not the row suffix.
- */
-export const getWaterfallSuffixMetrics = (
-	spans: readonly { readonly durationMs: number; readonly spanId: string }[],
-): WaterfallSuffixMetrics => {
-	let maxDurationWidth = 0
-	for (const span of spans) {
-		const d = formatDuration(Math.max(0, span.durationMs)).length
-		if (d > maxDurationWidth) maxDurationWidth = d
-	}
-	return { maxDurationWidth, suffixWidth: maxDurationWidth }
-}
-
-// Retained for tests: per-row view of the shared layout.
-export const getWaterfallColumns = (
-	contentWidth: number,
-	metrics: WaterfallSuffixMetrics,
-) => {
-	const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, metrics.suffixWidth)
-	return { labelMaxWidth, barWidth, suffixWidth: metrics.suffixWidth } as const
-}
-
-export const spanPreviewEntries = (span: TraceSpanItem, logs: readonly LogItem[], maxEntries: number): Array<{ key: string; value: string; isWarning?: boolean }> => {
-	const entries = Object.entries(span.tags)
-	const interesting = entries.filter(([key]) =>
-		INTERESTING_TAGS.includes(key as (typeof INTERESTING_TAGS)[number]) || key.startsWith("error"),
-	)
-	const rest = entries.filter(([key]) =>
-		!INTERESTING_TAGS.includes(key as (typeof INTERESTING_TAGS)[number]) && !key.startsWith("error") && !key.startsWith("otel.") && key !== "span.kind",
-	)
-	const tagResults: Array<{ key: string; value: string; isWarning?: boolean }> = []
-	if (logs.length > 0) {
-		tagResults.push({ key: "logs", value: `${logs.length} correlated` })
-		tagResults.push({ key: "log", value: logs[0]!.body.replace(/\s+/g, " ") })
-	}
-
-	tagResults.push(...[...interesting, ...rest]
-		.slice(0, maxEntries - span.warnings.length)
-		.map(([key, value]) => ({ key, value })))
-	for (const warning of span.warnings) {
-		tagResults.push({ key: "warning", value: warning, isWarning: true })
-	}
-	return tagResults.slice(0, maxEntries)
-}
 
 const WaterfallRow = memo(({
 	span,
@@ -267,14 +143,33 @@ const WaterfallRow = memo(({
 	onSelect: () => void
 }) => {
 	const prefix = buildTreePrefix(spans, index)
-	// Match the trace list indicator: `!` on error, chevron on collapsible parents, `·` on leaves.
-	const indicator = span.status === "error" ? "!" : hasChildSpans ? (collapsed ? "\u25b8" : "\u25be") : "\u00b7"
+	const isAi = isAiSpan(span.tags)
+	// Indicator column: `!` on error, chevron on collapsible parents,
+	// `✦` on AI leaves (LLM payloads detected — enter drills into a
+	// specialized chat view), `·` on other leaves. AI parents keep the
+	// chevron glyph so tree structure stays readable; the accent color
+	// (applied below) carries the "AI content lives here" signal.
+	const indicator = span.status === "error" ? "!"
+		: hasChildSpans ? (collapsed ? "\u25b8" : "\u25be")
+		: isAi ? "\u2726"
+		: "\u00b7"
 	const opName = span.isRunning ? `${span.operationName} [${lifecycleLabel(span)}]` : span.operationName
 
 	const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, suffixMetrics.suffixWidth)
 
-	const opMaxWidth = Math.max(4, labelMaxWidth - prefix.length - 2)
-	const opTruncated = opName.length > opMaxWidth ? `${opName.slice(0, opMaxWidth - 1)}\u2026` : opName
+	// Op name budget = labelMaxWidth minus (prefix + indicator + 1 space).
+	// Never force a minimum: at very deep nesting or narrow widths the
+	// prefix + indicator may already fill the label column, in which
+	// case we render the op as an empty string (or a lone ellipsis) so
+	// the line stays within contentWidth. Previous code forced op to 4
+	// chars which could push total row width past the pane and make
+	// OpenTUI smear "..." across the right edge.
+	const opMaxWidth = Math.max(0, labelMaxWidth - prefix.length - 2)
+	const opTruncated = opMaxWidth === 0
+		? ""
+		: opName.length > opMaxWidth
+			? `${opName.slice(0, Math.max(0, opMaxWidth - 1))}\u2026`
+			: opName
 	const labelLen = prefix.length + 2 + opTruncated.length
 	const labelPad = " ".repeat(Math.max(0, labelMaxWidth - labelLen))
 
@@ -292,6 +187,11 @@ const WaterfallRow = memo(({
 	const indicatorColor = selected ? colors.selectedText
 		: dimmed ? colors.separator
 		: isError ? colors.error
+		// AI accent outranks parent/leaf color so both AI parents and AI
+		// leaves scan as "there's an LLM payload here" from across the
+		// waterfall. Error still wins because a failed AI span is first
+		// and foremost a failure.
+		: isAi ? colors.accent
 		: hasChildSpans ? colors.muted
 		: colors.passing
 	const opColor = selected ? colors.selectedText

package/src/ui/aiChatModel.test.ts

@@ -0,0 +1,347 @@
+import { describe, expect, it } from "bun:test"
+import {
+	buildChatListRows,
+	buildChunks,
+	chunkDetailTitle,
+	type Chunk,
+	isChunkExpanded,
+	renderChunkDetailLines,
+	renderChunks,
+	toggleChunkExpansion,
+} from "./aiChatModel.ts"
+
+const makeDetail = (messages: unknown, responseText: string | null = null) => ({
+	promptMessages: messages,
+	responseText,
+})
+
+const findByKind = (chunks: readonly Chunk[], kind: Chunk["kind"]) =>
+	chunks.filter((c) => c.kind === kind)
+
+describe("buildChunks", () => {
+	it("returns no chunks for a null detail", () => {
+		expect(buildChunks(null).length).toBe(0)
+	})
+
+	it("unwraps the `{ messages: [...] }` Vercel AI SDK shape", () => {
+		const chunks = buildChunks(
+			makeDetail({ messages: [{ role: "user", content: "hi" }] }),
+		)
+		expect(chunks.length).toBe(1)
+		expect(chunks[0]!.kind).toBe("user-text")
+		expect(chunks[0]!.body).toBe("hi")
+	})
+
+	it("accepts a bare message array", () => {
+		const chunks = buildChunks(
+			makeDetail([{ role: "assistant", content: "hello" }]),
+		)
+		expect(chunks[0]!.kind).toBe("assistant-text")
+		expect(chunks[0]!.body).toBe("hello")
+	})
+
+	it("marks system prompts collapsible + default-collapsed", () => {
+		const chunks = buildChunks(
+			makeDetail([{ role: "system", content: "you are helpful" }]),
+		)
+		expect(chunks[0]!.kind).toBe("system")
+		expect(chunks[0]!.collapsible).toBe(true)
+		expect(chunks[0]!.collapsedByDefault).toBe(true)
+	})
+
+	it("builds a tool-call chunk with inline summary in the header", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolName: "read", input: { filePath: "/tmp/x.ts" } },
+					],
+				},
+			]),
+		)
+		const tc = findByKind(chunks, "tool-call")[0]!
+		expect(tc.header).toContain("read")
+		expect(tc.header).toContain("/tmp/x.ts")
+		expect(tc.toolName).toBe("read")
+	})
+
+	it("strips noisy infra fields from bash tool summaries", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "assistant",
+					content: [
+						{
+							type: "tool-call",
+							toolName: "bash",
+							input: {
+								command: "git status --short",
+								timeout: 120_000,
+								workdir: "/home/me",
+								description: "ignored",
+							},
+						},
+					],
+				},
+			]),
+		)
+		const tc = findByKind(chunks, "tool-call")[0]!
+		expect(tc.header).toContain("git status --short")
+		expect(tc.header).not.toContain("timeout")
+		expect(tc.header).not.toContain("workdir")
+	})
+
+	it("summarises todowrite with a count", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "assistant",
+					content: [{ type: "tool-call", toolName: "todowrite", input: { todos: [{}, {}, {}] } }],
+				},
+			]),
+		)
+		expect(findByKind(chunks, "tool-call")[0]!.header).toContain("3 todos")
+	})
+
+	it("scrubs base64 data URLs from user content", () => {
+		const big = "a".repeat(400)
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "user",
+					content: [{ type: "text", text: `look at data:image/png;base64,${big} thanks` }],
+				},
+			]),
+		)
+		const body = chunks[0]!.body
+		expect(body).not.toContain("aaaaaaaaaa")
+		expect(body).toContain("[data:image/png base64")
+	})
+
+	it("collapses long tool results by default", () => {
+		const longOutput = Array.from({ length: 50 }, (_, i) => `line ${i}`).join("\n")
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "tool",
+					content: [
+						{
+							type: "tool-result",
+							toolName: "bash",
+							output: { type: "text", value: longOutput },
+						},
+					],
+				},
+			]),
+		)
+		const tr = findByKind(chunks, "tool-result")[0]!
+		expect(tr.collapsible).toBe(true)
+		expect(tr.collapsedByDefault).toBe(true)
+	})
+
+	it("keeps short tool results expanded by default", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolName: "bash", output: { type: "text", value: "ok" } },
+					],
+				},
+			]),
+		)
+		const tr = findByKind(chunks, "tool-result")[0]!
+		expect(tr.collapsedByDefault).toBe(false)
+	})
+
+	it("appends a response chunk when responseText is set", () => {
+		const chunks = buildChunks(
+			makeDetail([{ role: "user", content: "hi" }], "final answer"),
+		)
+		const response = findByKind(chunks, "response")[0]!
+		expect(response.body).toBe("final answer")
+	})
+
+	it("falls back to a raw-prompt chunk when messages is a plain string", () => {
+		const chunks = buildChunks(makeDetail("bare prompt string"))
+		expect(chunks[0]!.kind).toBe("raw-prompt")
+		expect(chunks[0]!.body).toBe("bare prompt string")
+	})
+
+	it("gives each chunk a stable id keyed by message + part index", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "a" },
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolName: "read", input: { filePath: "/x" } },
+						{ type: "tool-call", toolName: "read", input: { filePath: "/y" } },
+					],
+				},
+			]),
+		)
+		const ids = chunks.map((c) => c.id)
+		expect(new Set(ids).size).toBe(ids.length)
+		// Second assistant part gets messageIndex=1, partIndex=1.
+		expect(chunks.find((c) => c.id === "m1p1")).toBeDefined()
+	})
+})
+
+describe("isChunkExpanded + toggleChunkExpansion", () => {
+	const makeChunk = (over: Partial<Chunk> = {}): Chunk => ({
+		id: "x",
+		kind: "reasoning",
+		role: "assistant",
+		messageIndex: 0,
+		partIndex: 0,
+		header: "reasoning",
+		headerMeta: null,
+		body: "thinking",
+		needsHeader: true,
+		collapsible: true,
+		collapsedByDefault: true,
+		...over,
+	})
+
+	it("non-collapsible chunks are always expanded", () => {
+		const chunk = makeChunk({ collapsible: false, collapsedByDefault: false })
+		expect(isChunkExpanded(chunk, new Set())).toBe(true)
+	})
+
+	it("default-collapsed chunks need a positive override to expand", () => {
+		const chunk = makeChunk({ collapsedByDefault: true })
+		expect(isChunkExpanded(chunk, new Set())).toBe(false)
+		expect(isChunkExpanded(chunk, new Set(["x"]))).toBe(true)
+	})
+
+	it("default-open chunks need a negative override to collapse", () => {
+		const chunk = makeChunk({ collapsedByDefault: false })
+		expect(isChunkExpanded(chunk, new Set())).toBe(true)
+		expect(isChunkExpanded(chunk, new Set(["!x"]))).toBe(false)
+	})
+
+	it("toggleChunkExpansion flips visibility per chunk", () => {
+		const chunk = makeChunk({ collapsedByDefault: true })
+		const once = toggleChunkExpansion(chunk, new Set())
+		expect(isChunkExpanded(chunk, once)).toBe(true)
+		const twice = toggleChunkExpansion(chunk, once)
+		expect(isChunkExpanded(chunk, twice)).toBe(false)
+	})
+})
+
+describe("renderChunks", () => {
+	it("emits a role divider when the role changes", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "hi" },
+				{ role: "assistant", content: "hello" },
+			]),
+		)
+		const lines = renderChunks(chunks, { width: 80, expanded: new Set() })
+		const dividers = lines.filter((l) => l.kind === "role-divider")
+		expect(dividers.length).toBe(2)
+	})
+
+	it("hides bodies for collapsed chunks (no per-chunk expand hint)", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "system", content: "long system prompt here " .repeat(5) },
+				{ role: "user", content: "hi" },
+			]),
+		)
+		const lines = renderChunks(chunks, { width: 80, expanded: new Set() })
+		const systemChunkId = chunks.find((c) => c.kind === "system")!.id
+		const systemBodyLines = lines.filter((l) => l.chunkId === systemChunkId && l.kind === "text")
+		// Collapsed: only the chunk-header line survives, no body text
+		// and no "enter to expand" filler (the bottom footer carries the
+		// global keyboard hint now).
+		expect(systemBodyLines.length).toBe(0)
+		const systemHeaders = lines.filter((l) => l.chunkId === systemChunkId && l.kind === "chunk-header")
+		expect(systemHeaders.length).toBe(1)
+	})
+
+	it("renders role dividers on turn boundaries", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "hi" },
+				{ role: "assistant", content: "hello" },
+				{ role: "user", content: "thanks" },
+			]),
+		)
+		const lines = renderChunks(chunks, { width: 80, expanded: new Set() })
+		const dividers = lines.filter((l) => l.kind === "role-divider").map((l) => l.text)
+		expect(dividers).toEqual(["USER", "ASSISTANT", "USER"])
+	})
+
+	it("omits chunk-header rows for plain text chunks (user/assistant/response)", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "hi" },
+				{ role: "assistant", content: "hello" },
+			], "final"),
+		)
+		const lines = renderChunks(chunks, { width: 80, expanded: new Set() })
+		// No chunk-header rows should exist for the user-text / assistant-text / response chunks.
+		const plainTextChunkIds = chunks
+			.filter((c) => ["user-text", "assistant-text", "response"].includes(c.kind))
+			.map((c) => c.id)
+		const headersForPlainText = lines.filter(
+			(l) => l.kind === "chunk-header" && plainTextChunkIds.includes(l.chunkId ?? ""),
+		)
+		expect(headersForPlainText.length).toBe(0)
+	})
+
+	it("annotates each line with its chunkId so selection can find it", () => {
+		const chunks = buildChunks(
+			makeDetail([{ role: "user", content: "hi" }]),
+		)
+		const lines = renderChunks(chunks, { width: 80, expanded: new Set() })
+		const userChunkId = chunks[0]!.id
+		const taggedLines = lines.filter((l) => l.chunkId === userChunkId)
+		expect(taggedLines.length).toBeGreaterThan(0)
+	})
+})
+
+describe("buildChatListRows", () => {
+	it("emits one role divider per turn and one chunk row per chunk", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "hi" },
+				{ role: "assistant", content: [{ type: "tool-call", toolName: "read", input: { filePath: "/x" } }] },
+			]),
+		)
+		const rows = buildChatListRows(chunks)
+		expect(rows.filter((r) => r.kind === "role-divider").map((r) => r.text)).toEqual(["USER", "ASSISTANT"])
+		expect(rows.filter((r) => r.kind === "chunk").length).toBe(chunks.length)
+	})
+
+	it("uses first body line for plain text chunks and header text for structured chunks", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{ role: "user", content: "hello there" },
+				{ role: "assistant", content: [{ type: "tool-call", toolName: "bash", input: { command: "git status" } }] },
+			]),
+		)
+		const rows = buildChatListRows(chunks).filter((r) => r.kind === "chunk")
+		expect(rows[0]!.text).toBe("hello there")
+		expect(rows[1]!.text).toContain("bash")
+	})
+})
+
+describe("chunkDetailTitle + renderChunkDetailLines", () => {
+	it("returns a readable modal title per kind", () => {
+		const chunks = buildChunks(makeDetail([{ role: "assistant", content: [{ type: "tool-call", toolName: "bash", input: { command: "git status" } }] }]))
+		expect(chunkDetailTitle(chunks[0]!)).toBe("TOOL CALL · bash")
+	})
+
+	it("wraps full detail lines for the modal", () => {
+		const chunks = buildChunks(makeDetail([{ role: "user", content: "a ".repeat(200) }]))
+		const lines = renderChunkDetailLines(chunks[0]!, 40)
+		expect(lines.length).toBeGreaterThan(1)
+		for (const line of lines) {
+			expect(line.length).toBeLessThanOrEqual(40)
+		}
+	})
+})