@kitlangton/motel 0.2.1 → 0.2.5

package/src/startupBench.ts

@@ -0,0 +1,19 @@
+const EPOCH_KEY = "__motelStartupEpoch"
+
+type GlobalWithStartupEpoch = typeof globalThis & {
+	[EPOCH_KEY]?: number
+}
+
+const globalWithEpoch = globalThis as GlobalWithStartupEpoch
+
+if (globalWithEpoch[EPOCH_KEY] === undefined) {
+	globalWithEpoch[EPOCH_KEY] = performance.now()
+}
+
+export const startupBenchEnabled = process.env.MOTEL_BENCH_STARTUP_PHASES === "1"
+
+export const startupBenchMark = (phase: string) => {
+	if (!startupBenchEnabled) return
+	const elapsedMs = performance.now() - (globalWithEpoch[EPOCH_KEY] ?? performance.now())
+	process.stderr.write(`[motel-startup] ${phase} ${elapsedMs.toFixed(3)}ms\n`)
+}

package/src/storybook/aiChatStory.tsx

@@ -212,6 +212,7 @@ const StoryApp = () => {
 				bodyLines={bodyLines}
 				paneWidth={w}
 			/>
+			<Divider width={contentWidth} />
 			<box paddingLeft={1} paddingRight={1} height={FOOTER_ROWS}>
 				<TextLine>
 					<span fg={colors.count} attributes={TextAttributes.BOLD}>1-9</span>

package/src/ui/AiChatView.tsx

@@ -48,6 +48,16 @@ const rowTextColor = (chunk: Chunk | null, role: Role, selected: boolean): strin
 	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")
@@ -151,15 +161,16 @@ export const AiChatView = ({
 }) => {
 	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 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],
+		() => detailChunkId ? chunkById.get(detailChunkId) ?? null : null,
+		[chunkById, detailChunkId],
 	)
 
 	const selectedRowIndex = useMemo(
@@ -201,7 +212,7 @@ export const AiChatView = ({
 	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 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)
@@ -257,18 +268,23 @@ export const AiChatView = ({
 								</TextLine>
 							)
 						}
-						const chunk = chunks.find((candidate) => candidate.id === row.chunkId) ?? null
+						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={rowTextColor(chunk, row.role, isSelected)} attributes={isSelected ? TextAttributes.BOLD : undefined}>{prefix}{display}</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>

package/src/ui/TraceDetailsPane.tsx

@@ -5,7 +5,7 @@ import { AlignedHeaderLine, Divider, FilterBar, PlainLine, TextLine } from "./pr
 import { WaterfallTimeline } from "./Waterfall.tsx"
 import { computeMatchingSpanIds } from "./waterfallFilter.ts"
 import { getVisibleSpans } from "./waterfallModel.ts"
-import type { LoadStatus, LogState } from "./state.ts"
+import type { LoadStatus } from "./state.ts"
 import { colors, SEPARATOR } from "./theme.ts"
 
 /**
@@ -24,13 +24,12 @@ export const TraceDetailsPane = ({
 	traceSummary,
 	traceStatus,
 	traceError,
-	traceLogsState,
+	traceLogCount,
 	contentWidth,
 	bodyLines,
 	paneWidth,
 	selectedSpanIndex,
 	collapsedSpanIds,
-	focused = false,
 	onSelectSpan,
 	waterfallFilterMode,
 	waterfallFilterText,
@@ -39,13 +38,12 @@ export const TraceDetailsPane = ({
 	traceSummary: TraceSummaryItem | null
 	traceStatus: LoadStatus
 	traceError: string | null
-	traceLogsState: LogState
+	traceLogCount: number
 	contentWidth: number
 	bodyLines: number
 	paneWidth: number
 	selectedSpanIndex: number | null
 	collapsedSpanIds: ReadonlySet<string>
-	focused?: boolean
 	onSelectSpan: (index: number) => void
 	waterfallFilterMode: boolean
 	waterfallFilterText: string
@@ -54,20 +52,6 @@ export const TraceDetailsPane = ({
 		() => trace ? getVisibleSpans(trace.spans, collapsedSpanIds) : [],
 		[trace, collapsedSpanIds],
 	)
-	const selectedSpan = selectedSpanIndex !== null ? filteredSpans[selectedSpanIndex] ?? null : null
-	const traceLogCount = traceLogsState.data.length
-	const spanLogCounts = useMemo(() => {
-		const counts = new Map<string, number>()
-		for (const log of traceLogsState.data) {
-			if (!log.spanId) continue
-			counts.set(log.spanId, (counts.get(log.spanId) ?? 0) + 1)
-		}
-		return counts
-	}, [traceLogsState.data])
-	const selectedSpanLogs = useMemo(
-		() => selectedSpan ? traceLogsState.data.filter((log) => log.spanId === selectedSpan.spanId) : [],
-		[selectedSpan, traceLogsState.data],
-	)
 	const matchingSpanIds = useMemo(
 		() => trace ? computeMatchingSpanIds(trace.spans, waterfallFilterText) : null,
 		[trace, waterfallFilterText],
@@ -144,14 +128,12 @@ export const TraceDetailsPane = ({
 						</box>
 					) : null}
 					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-						<WaterfallTimeline
-							trace={trace}
-							filteredSpans={filteredSpans}
-							spanLogCounts={spanLogCounts}
-							selectedSpanLogs={selectedSpanLogs}
-							contentWidth={contentWidth}
-							bodyLines={waterfallBodyLines}
-							selectedSpanIndex={selectedSpanIndex}
+					<WaterfallTimeline
+						trace={trace}
+						filteredSpans={filteredSpans}
+						contentWidth={contentWidth}
+						bodyLines={waterfallBodyLines}
+						selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
 							matchingSpanIds={matchingSpanIds}
 							onSelectSpan={onSelectSpan}

package/src/ui/Waterfall.tsx

@@ -1,4 +1,4 @@
-import { memo, useLayoutEffect, useRef, useState } from "react"
+import { memo, useLayoutEffect, useState } from "react"
 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"
@@ -280,8 +280,6 @@ export const SpanPreview = ({
 export const WaterfallTimeline = ({
 	trace,
 	filteredSpans,
-	spanLogCounts,
-	selectedSpanLogs,
 	contentWidth,
 	bodyLines,
 	selectedSpanIndex,
@@ -291,8 +289,6 @@ export const WaterfallTimeline = ({
 }: {
 	trace: TraceItem
 	filteredSpans: readonly TraceSpanItem[]
-	spanLogCounts: ReadonlyMap<string, number>
-	selectedSpanLogs: readonly LogItem[]
 	contentWidth: number
 	bodyLines: number
 	selectedSpanIndex: number | null
@@ -320,13 +316,12 @@ export const WaterfallTimeline = ({
 	const viewportSize = Math.max(1, bodyLines)
 	const maxOffset = Math.max(0, filteredSpans.length - viewportSize)
 	const [scrollOffset, setScrollOffset] = useState(0)
-	const lastTraceIdRef = useRef<string | null>(null)
 
-	// Reset scroll offset when the trace changes.
-	if (trace.traceId !== lastTraceIdRef.current) {
+	// Reset scroll offset when the trace changes. Keep this out of render so
+	// a trace switch doesn't force a render-phase state update on hot paths.
+	useLayoutEffect(() => {
 		setScrollOffset(0)
-		lastTraceIdRef.current = trace.traceId
-	}
+	}, [trace.traceId])
 
 	// Auto-follow selection: only if the selected span would be hidden
 	// by the current window, shift just enough to bring it back. Runs in

package/src/ui/aiChatModel.test.ts

@@ -328,6 +328,50 @@ describe("buildChatListRows", () => {
 		expect(rows[0]!.text).toBe("hello there")
 		expect(rows[1]!.text).toContain("bash")
 	})
+
+	it("uses matching tool-call context for tool-result rows", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolCallId: "tc-1", toolName: "bash", input: { command: "git status --short --branch" } },
+					],
+				},
+				{
+					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/file.ts" } },
+					],
+				},
+			]),
+		)
+		const rows = buildChatListRows(chunks).filter((r) => r.kind === "chunk")
+		expect(rows[1]!.text).toContain("bash  git status --short --branch")
+		expect(rows[1]!.meta).toContain("## dev...origin/dev")
+	})
+
+	it("shows read result rows with the originating file path inline", () => {
+		const chunks = buildChunks(
+			makeDetail([
+				{
+					role: "assistant",
+					content: [
+						{ type: "tool-call", toolCallId: "tc-2", toolName: "read", input: { filePath: "/src/formatter.ts", offset: 40, limit: 80 } },
+					],
+				},
+				{
+					role: "tool",
+					content: [
+						{ type: "tool-result", toolCallId: "tc-2", toolName: "read", output: { type: "text", value: "1: export const x = 1" } },
+					],
+				},
+			]),
+		)
+		const rows = buildChatListRows(chunks).filter((r) => r.kind === "chunk")
+		expect(rows[1]!.text).toContain("read  /src/formatter.ts @40 +80")
+		expect(rows[1]!.meta).toContain("1: export const x = 1")
+	})
 })
 
 describe("chunkDetailTitle + renderChunkDetailLines", () => {

package/src/ui/aiChatModel.ts

@@ -479,6 +479,13 @@ const firstBodyLine = (body: string) => {
 	return line.replace(/\s+/g, " ").trim()
 }
 
+const stripTransportGlyph = (text: string) => text.replace(/^[→←]\s+/, "")
+
+const toolRowPreview = (text: string, width = 40) => {
+	const compact = firstBodyLine(text)
+	return compact.length > 0 ? shorten(compact, width) : null
+}
+
 /**
  * Stable list rows for the main chat pane. One role divider per turn,
  * one selectable row per chunk. Plain text chunks use their first body
@@ -487,6 +494,10 @@ const firstBodyLine = (body: string) => {
  */
 export const buildChatListRows = (chunks: readonly Chunk[]): readonly ChatListRow[] => {
 	const rows: ChatListRow[] = []
+	const toolCallById = new Map<string, Chunk>()
+	for (const chunk of chunks) {
+		if (chunk.kind === "tool-call" && chunk.toolCallId) toolCallById.set(chunk.toolCallId, chunk)
+	}
 	let prevRole: Role | null = null
 	let prevMessageIndex = -1
 
@@ -522,7 +533,33 @@ export const buildChatListRows = (chunks: readonly Chunk[]): readonly ChatListRo
 		// structured chunk headers here. Otherwise tool rows render as
 		// `→ → bash ...` and results as `← ← read ...`.
 		if (chunk.kind === "tool-call" || chunk.kind === "tool-result") {
-			text = text.replace(/^[→←]\s+/, "")
+			text = stripTransportGlyph(text)
+		}
+
+		if (chunk.kind === "tool-call") {
+			const preview = toolRowPreview(chunk.body)
+			// Keep row text focused on the primary action (already encoded in
+			// `header`) and use the dim right column for "there is more here"
+			// metadata only when it adds signal. For JSON-heavy tool args this
+			// is usually just noise, so we currently leave meta alone.
+			if (preview && preview !== text) {
+				meta = meta ?? null
+			}
+		}
+
+		if (chunk.kind === "tool-result") {
+			const matchingCall = chunk.toolCallId ? toolCallById.get(chunk.toolCallId) ?? null : null
+			if (matchingCall) {
+				// Carry the originating call summary into the result row so the
+				// list can answer "result of what?" without opening the modal.
+				// Example: `← bash  git status --short --branch`,
+				// `← read  /src/formatter.ts @40 +80`.
+				text = stripTransportGlyph(matchingCall.header)
+			}
+			const preview = toolRowPreview(chunk.body)
+			if (preview) {
+				meta = chunk.headerMeta ? `${chunk.headerMeta} · ${preview}` : preview
+			}
 		}
 		if (chunk.kind === "system") {
 			text = "prompt"

package/src/ui/app/TraceWorkspace.tsx

@@ -21,7 +21,7 @@ interface SharedTraceDetailsProps {
 	readonly traceSummary: TraceSummaryItem | null
 	readonly traceStatus: TraceDetailState["status"]
 	readonly traceError: string | null
-	readonly traceLogsState: LogState
+	readonly traceLogCount: number
 	readonly selectedSpanIndex: number | null
 	readonly collapsedSpanIds: ReadonlySet<string>
 	readonly waterfallFilterMode: boolean
@@ -33,7 +33,6 @@ interface TraceDetailsSceneProps extends SharedTraceDetailsProps {
 	readonly contentWidth: number
 	readonly bodyLines: number
 	readonly paneWidth: number
-	readonly focused: boolean
 }
 
 const TraceDetailsScene = ({
@@ -41,13 +40,12 @@ const TraceDetailsScene = ({
 	traceSummary,
 	traceStatus,
 	traceError,
-	traceLogsState,
+	traceLogCount,
 	contentWidth,
 	bodyLines,
 	paneWidth,
 	selectedSpanIndex,
 	collapsedSpanIds,
-	focused,
 	waterfallFilterMode,
 	waterfallFilterText,
 	onSelectSpan,
@@ -57,13 +55,12 @@ const TraceDetailsScene = ({
 		traceSummary={traceSummary}
 		traceStatus={traceStatus}
 		traceError={traceError}
-		traceLogsState={traceLogsState}
+		traceLogCount={traceLogCount}
 		contentWidth={contentWidth}
 		bodyLines={bodyLines}
 		paneWidth={paneWidth}
 		selectedSpanIndex={selectedSpanIndex}
 		collapsedSpanIds={collapsedSpanIds}
-		focused={focused}
 		waterfallFilterMode={waterfallFilterMode}
 		waterfallFilterText={waterfallFilterText}
 		onSelectSpan={onSelectSpan}
@@ -292,7 +289,7 @@ export const TraceWorkspace = ({
 		traceSummary: selectedTraceSummary,
 		traceStatus: traceDetailState.status,
 		traceError: traceDetailState.error,
-		traceLogsState: logState,
+		traceLogCount: logState.data.length,
 		selectedSpanIndex,
 		collapsedSpanIds,
 		waterfallFilterMode,
@@ -336,7 +333,6 @@ export const TraceWorkspace = ({
 							contentWidth={rightContentWidth}
 							bodyLines={wideBodyLines}
 							paneWidth={rightPaneWidth}
-							focused={false}
 						/>
 					</box>
 				</box>
@@ -352,7 +348,6 @@ export const TraceWorkspace = ({
 							contentWidth={leftContentWidth}
 							bodyLines={wideBodyLines}
 							paneWidth={leftPaneWidth}
-							focused={true}
 						/>
 					</box>
 					<SeparatorColumn height={wideBodyHeight} junctionChars={separatorCrossChars} />
@@ -412,7 +407,6 @@ export const TraceWorkspace = ({
 					contentWidth={rightContentWidth}
 					bodyLines={narrowBodyLines}
 					paneWidth={contentWidth}
-					focused={false}
 				/>
 			</>
 		)
@@ -432,7 +426,6 @@ export const TraceWorkspace = ({
 					contentWidth={rightContentWidth}
 					bodyLines={narrowFullBodyLines}
 					paneWidth={contentWidth}
-					focused={true}
 				/>
 			) : (
 				<SpanDrillInScene

package/src/ui/app/useTraceScreenData.ts

@@ -13,6 +13,7 @@ import {
 	detailViewAtom,
 	ensureAiCallDetail,
 	ensureTraceAttributeKeys,
+	ensureTraceAttributeValues,
 	filterModeAtom,
 	filterTextAtom,
 	getCachedAiCallDetail,
@@ -21,7 +22,6 @@ import {
 	initialServiceLogState,
 	initialTraceDetailState,
 	invalidateAiCallDetailCache,
-	invalidateFacetCaches,
 	loadFilteredTraceSummaries,
 	loadRecentTraceSummaries,
 	loadServiceLogs,
@@ -47,7 +47,7 @@ import {
 import { isAiSpan } from "../../domain.ts"
 import { buildChunks, type Chunk } from "../aiChatModel.ts"
 import { parseFilterText } from "../filterParser.ts"
-import { getVisibleSpans } from "../Waterfall.tsx"
+import { getVisibleSpans } from "../waterfallModel.ts"
 
 const clampSelectionIndex = (index: number, length: number) => {
 	if (length === 0) return 0
@@ -166,17 +166,25 @@ export const useTraceScreenData = () => {
 		serviceLogCacheRef.current.clear()
 		traceDetailInflightRef.current.clear()
 		traceLogInflightRef.current.clear()
-		invalidateFacetCaches()
 		invalidateAiCallDetailCache()
 	}, [refreshNonce])
 
 	// Pre-warm the attribute picker facet keys for the currently-selected
-	// service so pressing `f` feels instant. Fire-and-forget; errors are
-	// surfaced when the user actually opens the picker.
+	// service so pressing `f` feels instant. Once keys are known, also
+	// prefetch the value lists for the first few visible keys so the common
+	// path of opening `f`, picking a top key, and reopening again stays
+	// near-instant. Fire-and-forget; errors are surfaced when the user
+	// actually opens the picker.
 	useEffect(() => {
 		if (!selectedTraceService) return
-		void ensureTraceAttributeKeys(selectedTraceService).catch(() => {})
-	}, [selectedTraceService, refreshNonce])
+		void ensureTraceAttributeKeys(selectedTraceService)
+			.then((entry) => Promise.allSettled(
+				entry.data
+					.slice(0, 6)
+					.map((row) => ensureTraceAttributeValues(selectedTraceService, row.value)),
+			))
+			.catch(() => {})
+	}, [selectedTraceService])
 
 	useEffect(() => {
 		let cancelled = false

package/src/ui/atoms.ts

@@ -87,7 +87,7 @@ export const selectedSpanIndexAtom = Atom.make<number | null>(null).pipe(Atom.ke
 export const selectedAttrIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
 export const detailViewAtom = Atom.make<DetailView>("waterfall").pipe(Atom.keepAlive)
 export const showHelpAtom = Atom.make(false).pipe(Atom.keepAlive)
-export const autoRefreshAtom = Atom.make(false).pipe(Atom.keepAlive)
+export const autoRefreshAtom = Atom.make(true).pipe(Atom.keepAlive)
 export const filterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
 export const filterTextAtom = Atom.make("").pipe(Atom.keepAlive)
 

package/src/ui/persistence.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from "node:fs"
 import { dirname } from "node:path"
 import { config } from "../config.ts"
-import type { ThemeName } from "./theme.ts"
+import { defaultThemeName, type ThemeName } from "./theme.ts"
 
 const lastServicePath = `${dirname(config.otel.databasePath)}/last-service.txt`
 
@@ -26,9 +26,9 @@ const lastThemePath = `${dirname(config.otel.databasePath)}/last-theme.txt`
 export const readLastTheme = (): ThemeName => {
 	try {
 		const raw = readFileSync(lastThemePath, "utf-8").trim()
-		return raw === "tokyo-night" || raw === "catppuccin" || raw === "motel-default" ? raw : "motel-default"
+		return raw === "tokyo-night" || raw === "catppuccin" || raw === "motel-default" ? raw : defaultThemeName
 	} catch {
-		return "motel-default"
+		return defaultThemeName
 	}
 }
 

package/src/ui/theme.ts

@@ -135,13 +135,15 @@ export const themes = {
 
 export type ThemeName = keyof typeof themes
 
-export const themeOrder: readonly ThemeName[] = ["motel-default", "tokyo-night", "catppuccin"]
+export const defaultThemeName: ThemeName = "tokyo-night"
 
-export const colors: ThemeColors = { ...motelDefaultTheme.colors }
-export const waterfallColors: ThemeWaterfallColors = { ...motelDefaultTheme.waterfall }
+export const themeOrder: readonly ThemeName[] = ["tokyo-night", "catppuccin", "motel-default"]
+
+export const colors: ThemeColors = { ...themes[defaultThemeName].colors }
+export const waterfallColors: ThemeWaterfallColors = { ...themes[defaultThemeName].waterfall }
 
 export const applyTheme = (name: ThemeName) => {
-	const theme = themes[name] ?? motelDefaultTheme
+	const theme = themes[name] ?? themes[defaultThemeName]
 	Object.assign(colors, theme.colors)
 	Object.assign(waterfallColors, theme.waterfall)
 	return theme
@@ -152,7 +154,7 @@ export const cycleThemeName = (current: ThemeName) => {
 	return themeOrder[nextIndex] ?? themeOrder[0]
 }
 
-export const themeLabel = (name: ThemeName) => themes[name]?.label ?? motelDefaultTheme.label
+export const themeLabel = (name: ThemeName) => themes[name]?.label ?? themes[defaultThemeName].label
 
 export const SEPARATOR = " \u00b7 "
 export const G_PREFIX_TIMEOUT_MS = 500

package/src/ui/useKeyboardNav.ts

@@ -19,6 +19,9 @@ import {
 	detailViewAtom,
 	filterModeAtom,
 	filterTextAtom,
+	getCachedFacetKeys,
+	getCachedFacetValues,
+	initialAttrFacetState,
 	refreshNonceAtom,
 	selectedAttrIndexAtom,
 	selectedChatChunkIdAtom,
@@ -39,7 +42,7 @@ import { filterFacets } from "./AttrFilterModal.tsx"
 import { G_PREFIX_TIMEOUT_MS } from "./theme.ts"
 import { cycleThemeName, themeLabel } from "./theme.ts"
 import { computeMatchingSpanIds, findAdjacentMatch } from "./waterfallFilter.ts"
-import { getVisibleSpans } from "./Waterfall.tsx"
+import { getVisibleSpans } from "./waterfallModel.ts"
 import { resolveCollapseStep } from "./waterfallNav.ts"
 
 /**
@@ -125,7 +128,7 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 	const [pickerMode, setPickerMode] = useAtom(attrPickerModeAtom)
 	const [pickerInput, setPickerInput] = useAtom(attrPickerInputAtom)
 	const [pickerIndex, setPickerIndex] = useAtom(attrPickerIndexAtom)
-	const [attrFacets] = useAtom(attrFacetStateAtom)
+	const [attrFacets, setAttrFacets] = useAtom(attrFacetStateAtom)
 	const [activeAttrKey, setActiveAttrKey] = useAtom(activeAttrKeyAtom)
 	const [activeAttrValue, setActiveAttrValue] = useAtom(activeAttrValueAtom)
 	const [waterfallFilterMode, setWaterfallFilterMode] = useAtom(waterfallFilterModeAtom)
@@ -259,6 +262,26 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 		setPickerIndex(0)
 	}
 
+	const hydrateCachedPickerKeys = (service: string | null) => {
+		if (!service) {
+			setAttrFacets(initialAttrFacetState)
+			return
+		}
+		const cached = getCachedFacetKeys(service)
+		if (!cached) return
+		setAttrFacets({ status: "ready", key: null, data: cached.data, error: null })
+	}
+
+	const hydrateCachedPickerValues = (service: string | null, key: string | null) => {
+		if (!service || !key) {
+			setAttrFacets(initialAttrFacetState)
+			return
+		}
+		const cached = getCachedFacetValues(service, key)
+		if (!cached) return
+		setAttrFacets({ status: "ready", key, data: cached.data, error: null })
+	}
+
 	const closePicker = () => {
 		setPickerMode("off")
 		resetPicker()
@@ -587,6 +610,7 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 			const row = rows[clampedIndex]
 			if (!row) return true
 			if (s.pickerMode === "keys") {
+				hydrateCachedPickerValues(s.selectedTraceService, row.value)
 				setActiveAttrKey(row.value)
 				setPickerMode("values")
 				resetPicker()
@@ -604,6 +628,7 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				return true
 			}
 			if (s.pickerMode === "values") {
+				hydrateCachedPickerKeys(s.selectedTraceService)
 				setPickerMode("keys")
 				setActiveAttrKey(null)
 				setPickerIndex(0)
@@ -857,6 +882,7 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 			return true
 		}
 		if ((key.name === "f" || key.name === "F") && !key.ctrl && !key.meta) {
+			hydrateCachedPickerKeys(s.selectedTraceService)
 			setPickerMode("keys")
 			resetPicker()
 			setActiveAttrKey(null)