@kitlangton/motel 0.2.0 → 0.2.4

package/src/ui/app/useTraceScreenData.ts

@@ -1,18 +1,27 @@
 import { useAtom } from "@effect/atom-react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { config } from "../../config.js"
-import type { LogItem, TraceItem } from "../../domain.ts"
+import type { LogItem, TraceItem, TraceSummaryItem } from "../../domain.ts"
 import {
 	activeAttrKeyAtom,
 	activeAttrValueAtom,
+	aiCallDetailStateAtom,
 	autoRefreshAtom,
+	chatDetailChunkIdAtom,
+	chatDetailScrollOffsetAtom,
 	collapsedSpanIdsAtom,
 	detailViewAtom,
+	ensureAiCallDetail,
+	ensureTraceAttributeKeys,
 	filterModeAtom,
 	filterTextAtom,
+	getCachedAiCallDetail,
+	initialAiCallDetailState,
 	initialLogState,
 	initialServiceLogState,
 	initialTraceDetailState,
+	invalidateAiCallDetailCache,
+	invalidateFacetCaches,
 	loadFilteredTraceSummaries,
 	loadRecentTraceSummaries,
 	loadServiceLogs,
@@ -22,6 +31,8 @@ import {
 	logStateAtom,
 	persistSelectedService,
 	refreshNonceAtom,
+	selectedAttrIndexAtom,
+	selectedChatChunkIdAtom,
 	selectedServiceLogIndexAtom,
 	selectedSpanIndexAtom,
 	selectedTraceIndexAtom,
@@ -29,11 +40,70 @@ import {
 	serviceLogStateAtom,
 	showHelpAtom,
 	traceDetailStateAtom,
+	type TraceSortMode,
 	traceSortAtom,
 	traceStateAtom,
 } from "../state.ts"
+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
+	return Math.max(0, Math.min(index, length - 1))
+}
+
+const resolveEffectiveService = (
+	services: readonly string[],
+	selectedTraceService: string | null,
+) => services.includes(selectedTraceService ?? "")
+	? selectedTraceService
+	: selectedTraceService ?? services[0] ?? config.otel.serviceName
+
+const loadTraceSummariesForService = (
+	serviceName: string | null,
+	filters: {
+		readonly activeAttrKey: string | null
+		readonly activeAttrValue: string | null
+		readonly debouncedAiText: string | null
+	},
+) => {
+	if (!serviceName) return Promise.resolve([] as readonly TraceSummaryItem[])
+	const hasAttrFilter = Boolean(filters.activeAttrKey && filters.activeAttrValue)
+	const hasAiFilter = Boolean(filters.debouncedAiText)
+	if (!hasAttrFilter && !hasAiFilter) return loadRecentTraceSummaries(serviceName)
+	return loadFilteredTraceSummaries(serviceName, {
+		attributeFilters: hasAttrFilter ? { [filters.activeAttrKey as string]: filters.activeAttrValue as string } : undefined,
+		aiText: hasAiFilter ? filters.debouncedAiText : null,
+	})
+}
+
+const applyClientTraceFilters = (
+	traces: readonly TraceSummaryItem[],
+	filterText: string,
+	parsedFilter: ReturnType<typeof parseFilterText>,
+) => filterText
+	? traces.filter((trace) => {
+		if (parsedFilter.errorOnly && trace.errorCount === 0) return false
+		if (parsedFilter.operationNeedle && !trace.rootOperationName.toLowerCase().includes(parsedFilter.operationNeedle)) return false
+		return true
+	})
+	: traces
+
+const sortTraceSummaries = (traces: readonly TraceSummaryItem[], traceSort: TraceSortMode) => {
+	if (traceSort === "recent") return traces
+	return [...traces].sort((a, b) => {
+		if (traceSort === "slowest") return b.durationMs - a.durationMs
+		if (traceSort === "errors") return b.errorCount - a.errorCount || b.startedAt.getTime() - a.startedAt.getTime()
+		return 0
+	})
+}
+
+const getSelectedVisibleSpan = (
+	spans: readonly TraceItem["spans"][number][],
+	selectedSpanIndex: number | null,
+) => selectedSpanIndex === null ? null : spans[selectedSpanIndex] ?? null
 
 export const useTraceScreenData = () => {
 	const [traceState, setTraceState] = useAtom(traceStateAtom)
@@ -45,6 +115,11 @@ export const useTraceScreenData = () => {
 	const [selectedTraceService, setSelectedTraceService] = useAtom(selectedTraceServiceAtom)
 	const [refreshNonce, setRefreshNonce] = useAtom(refreshNonceAtom)
 	const [selectedSpanIndex, setSelectedSpanIndex] = useAtom(selectedSpanIndexAtom)
+	const [, setSelectedAttrIndex] = useAtom(selectedAttrIndexAtom)
+	const [, setChatDetailChunkId] = useAtom(chatDetailChunkIdAtom)
+	const [, setChatDetailScrollOffset] = useAtom(chatDetailScrollOffsetAtom)
+	const [selectedChatChunkId, setSelectedChatChunkId] = useAtom(selectedChatChunkIdAtom)
+	const [aiCallDetailState, setAiCallDetailState] = useAtom(aiCallDetailStateAtom)
 	const [detailView, setDetailView] = useAtom(detailViewAtom)
 	const [showHelp, setShowHelp] = useAtom(showHelpAtom)
 	const [collapsedSpanIds, setCollapsedSpanIds] = useAtom(collapsedSpanIdsAtom)
@@ -91,8 +166,18 @@ 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.
+	useEffect(() => {
+		if (!selectedTraceService) return
+		void ensureTraceAttributeKeys(selectedTraceService).catch(() => {})
+	}, [selectedTraceService, refreshNonce])
+
 	useEffect(() => {
 		let cancelled = false
 
@@ -103,28 +188,17 @@ export const useTraceScreenData = () => {
 				const services = await loadTraceServices()
 				if (cancelled) return
 
-				const effectiveService = services.includes(selectedTraceService ?? "")
-					? selectedTraceService
-					: selectedTraceService ?? services[0] ?? config.otel.serviceName
+				const effectiveService = resolveEffectiveService(services, selectedTraceService)
 
 				if (effectiveService !== selectedTraceService) {
 					setSelectedTraceService(effectiveService)
 				}
 
-				// Branch on whether any server-side filter is active. `:ai`
-				// (debouncedAiText) and the attr picker compose; either
-				// alone also uses the filtered loader. Unfiltered falls
-				// back to the fast recent-summaries path.
-				const hasAttrFilter = Boolean(activeAttrKey && activeAttrValue)
-				const hasAiFilter = Boolean(debouncedAiText)
-				const traces = effectiveService
-					? (hasAttrFilter || hasAiFilter
-						? await loadFilteredTraceSummaries(effectiveService, {
-							attributeFilters: hasAttrFilter ? { [activeAttrKey as string]: activeAttrValue as string } : undefined,
-							aiText: hasAiFilter ? debouncedAiText : null,
-						})
-						: await loadRecentTraceSummaries(effectiveService))
-					: []
+				const traces = await loadTraceSummariesForService(effectiveService, {
+					activeAttrKey,
+					activeAttrValue,
+					debouncedAiText,
+				})
 				if (cancelled) return
 
 				const prevTraceId = selectedTraceRef.current
@@ -151,14 +225,18 @@ export const useTraceScreenData = () => {
 
 	useEffect(() => {
 		setSelectedTraceIndex((current) => {
-			if (traceState.data.length === 0) return 0
-			return Math.max(0, Math.min(current, traceState.data.length - 1))
+			return clampSelectionIndex(current, traceState.data.length)
 		})
 	}, [traceState.data.length, setSelectedTraceIndex])
 
 	const selectedTraceSummary = traceState.data[selectedTraceIndex] ?? null
 	const selectedTraceId = selectedTraceSummary?.traceId ?? null
 	const selectedTrace = traceDetailState.traceId === selectedTraceId ? traceDetailState.data : null
+	const selectedVisibleSpans = useMemo(
+		() => selectedTrace ? getVisibleSpans(selectedTrace.spans, collapsedSpanIds) : [],
+		[selectedTrace, collapsedSpanIds],
+	)
+	const selectedVisibleSpan = getSelectedVisibleSpan(selectedVisibleSpans, selectedSpanIndex)
 	selectedTraceRef.current = selectedTraceId
 
 	const warmTraceDetail = useCallback((traceId: string, hydrateSelection: boolean) => {
@@ -295,6 +373,72 @@ export const useTraceScreenData = () => {
 		setSelectedSpanIndex(null)
 	}, [selectedTraceId, setCollapsedSpanIds, setSelectedSpanIndex])
 
+	// Reset the attribute cursor whenever the span selection moves. Without
+	// this, drilling from span A (with 34 tags) to span B (with 3 tags)
+	// would leave the cursor pointing past the end of B's tag list until
+	// the user hit `j`/`k` again.
+	useEffect(() => {
+		setSelectedAttrIndex(0)
+		setChatDetailChunkId(null)
+		setChatDetailScrollOffset(0)
+		// New span → drop chunk selection and any open detail modal.
+		// The effect below will re-select the first chunk once the
+		// detail loads.
+		setSelectedChatChunkId(null)
+	}, [selectedSpanIndex, selectedTraceId, setSelectedAttrIndex, setChatDetailChunkId, setChatDetailScrollOffset, setSelectedChatChunkId])
+
+	// Load the parsed AI call detail for the currently-selected span when
+	// it's an AI span and the user is drilled into L2. Cached module-level
+	// so re-entering the chat view for a span we already loaded is free.
+	const selectedSpanId = selectedVisibleSpan?.spanId ?? null
+	const shouldLoadAiDetail = detailView === "span-detail" && selectedVisibleSpan !== null && isAiSpan(selectedVisibleSpan.tags)
+
+	useEffect(() => {
+		if (!shouldLoadAiDetail || !selectedSpanId) {
+			setAiCallDetailState(initialAiCallDetailState)
+			return
+		}
+		const cached = getCachedAiCallDetail(selectedSpanId)
+		if (cached !== undefined) {
+			setAiCallDetailState({ status: "ready", spanId: selectedSpanId, data: cached, error: null })
+			return
+		}
+		setAiCallDetailState({ status: "loading", spanId: selectedSpanId, data: null, error: null })
+		let cancelled = false
+		ensureAiCallDetail(selectedSpanId)
+			.then((data) => {
+				if (cancelled) return
+				setAiCallDetailState({ status: "ready", spanId: selectedSpanId, data, error: null })
+			})
+			.catch((err) => {
+				if (cancelled) return
+				setAiCallDetailState({
+					status: "error",
+					spanId: selectedSpanId,
+					data: null,
+					error: err instanceof Error ? err.message : String(err),
+				})
+			})
+		return () => { cancelled = true }
+	}, [shouldLoadAiDetail, selectedSpanId, setAiCallDetailState])
+
+	// Chunk model — rebuilt whenever the detail payload changes.
+	// Width-independent, so this lives here instead of in the view.
+	const aiChatChunks = useMemo<readonly Chunk[]>(() => {
+		if (!shouldLoadAiDetail || !aiCallDetailState.data) return []
+		return buildChunks(aiCallDetailState.data)
+	}, [shouldLoadAiDetail, aiCallDetailState.data])
+
+	// Once chunks are available, pin selection to the first chunk unless
+	// the user has already chosen one. Also handles the "chunk list
+	// changed and the previous selection disappeared" case.
+	useEffect(() => {
+		if (aiChatChunks.length === 0) return
+		const stillValid = selectedChatChunkId !== null
+			&& aiChatChunks.some((c) => c.id === selectedChatChunkId)
+		if (!stillValid) setSelectedChatChunkId(aiChatChunks[0]!.id)
+	}, [aiChatChunks, selectedChatChunkId, setSelectedChatChunkId])
+
 	useEffect(() => {
 		if (selectedSpanIndex === null) return
 		if (!selectedTrace || selectedTrace.spans.length === 0) {
@@ -302,11 +446,11 @@ export const useTraceScreenData = () => {
 			setDetailView("waterfall")
 			return
 		}
-		const visibleCount = getVisibleSpans(selectedTrace.spans, collapsedSpanIds).length
+		const visibleCount = selectedVisibleSpans.length
 		if (selectedSpanIndex >= visibleCount) {
 			setSelectedSpanIndex(visibleCount - 1)
 		}
-	}, [selectedTrace, selectedSpanIndex, collapsedSpanIds, setDetailView, setSelectedSpanIndex])
+	}, [selectedTrace, selectedSpanIndex, selectedVisibleSpans.length, setDetailView, setSelectedSpanIndex])
 
 	useEffect(() => {
 		const traceId = selectedTraceId
@@ -375,8 +519,7 @@ export const useTraceScreenData = () => {
 
 	useEffect(() => {
 		setSelectedServiceLogIndex((current) => {
-			if (serviceLogState.data.length === 0) return 0
-			return Math.max(0, Math.min(current, serviceLogState.data.length - 1))
+			return clampSelectionIndex(current, serviceLogState.data.length)
 		})
 	}, [serviceLogState.data.length, setSelectedServiceLogIndex])
 
@@ -384,21 +527,10 @@ export const useTraceScreenData = () => {
 	// against already-loaded summaries (no server round-trip). The `:ai`
 	// query, by contrast, is applied server-side in the load effect
 	// above so we don't need to re-filter it here.
-	const preFilterTraces = filterText
-		? traceState.data.filter((trace) => {
-			if (parsedFilter.errorOnly && trace.errorCount === 0) return false
-			if (parsedFilter.operationNeedle && !trace.rootOperationName.toLowerCase().includes(parsedFilter.operationNeedle)) return false
-			return true
-		})
-		: traceState.data
-
-	const filteredTraces = traceSort === "recent"
-		? preFilterTraces
-		: [...preFilterTraces].sort((a, b) => {
-			if (traceSort === "slowest") return b.durationMs - a.durationMs
-			if (traceSort === "errors") return b.errorCount - a.errorCount || b.startedAt.getTime() - a.startedAt.getTime()
-			return 0
-		})
+	const filteredTraces = useMemo(() => {
+		const preFiltered = applyClientTraceFilters(traceState.data, filterText, parsedFilter)
+		return sortTraceSummaries(preFiltered, traceSort)
+	}, [filterText, parsedFilter, traceSort, traceState.data])
 
 	useEffect(() => {
 		if (!selectedTraceId || filteredTraces.length === 0) return
@@ -440,5 +572,7 @@ export const useTraceScreenData = () => {
 		selectedTrace,
 		selectedTraceId,
 		filteredTraces,
+		aiCallDetailState,
+		aiChatChunks,
 	} as const
 }

package/src/ui/atoms.ts

@@ -0,0 +1,131 @@
+import * as Atom from "effect/unstable/reactivity/Atom"
+import { config } from "../config.ts"
+import type { LogItem, TraceItem, TraceSummaryItem } from "../domain.ts"
+import type { ThemeName } from "./theme.ts"
+import { readLastService, readLastTheme } from "./persistence.ts"
+
+export type LoadStatus = "loading" | "ready" | "error"
+export type DetailView = "waterfall" | "span-detail" | "service-logs"
+
+export interface TraceState {
+	readonly status: LoadStatus
+	readonly services: readonly string[]
+	readonly data: readonly TraceSummaryItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface TraceDetailState {
+	readonly status: LoadStatus
+	readonly traceId: string | null
+	readonly data: TraceItem | null
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface LogState {
+	readonly status: LoadStatus
+	readonly traceId: string | null
+	readonly data: readonly LogItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface ServiceLogState {
+	readonly status: LoadStatus
+	readonly serviceName: string | null
+	readonly data: readonly LogItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export const initialTraceState: TraceState = {
+	status: "loading",
+	services: [],
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialLogState: LogState = {
+	status: "ready",
+	traceId: null,
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialTraceDetailState: TraceDetailState = {
+	status: "ready",
+	traceId: null,
+	data: null,
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialServiceLogState: ServiceLogState = {
+	status: "ready",
+	serviceName: null,
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const traceStateAtom = Atom.make(initialTraceState).pipe(Atom.keepAlive)
+export const traceDetailStateAtom = Atom.make(initialTraceDetailState).pipe(Atom.keepAlive)
+export const logStateAtom = Atom.make(initialLogState).pipe(Atom.keepAlive)
+export const serviceLogStateAtom = Atom.make(initialServiceLogState).pipe(Atom.keepAlive)
+export const selectedServiceLogIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+export const selectedTraceIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+export const selectedTraceServiceAtom = Atom.make<string | null>(readLastService() ?? config.otel.serviceName).pipe(Atom.keepAlive)
+export const refreshNonceAtom = Atom.make(0).pipe(Atom.keepAlive)
+export const noticeAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+export const selectedSpanIndexAtom = Atom.make<number | null>(null).pipe(Atom.keepAlive)
+// Cursor inside the full-screen span content view (detailView === "span-detail").
+// Tracks which span tag is currently selected for copy / drill-in. Reset to 0
+// on each new span so the cursor doesn't point past a shorter tag list.
+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 filterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
+export const filterTextAtom = Atom.make("").pipe(Atom.keepAlive)
+
+// Waterfall-scoped filter: the `/` key while drilled into a trace
+// (viewLevel >= 1) opens this filter instead of the trace-list one.
+// Purely client-side — dims spans whose operation name and attribute
+// values don't contain the needle.
+export const waterfallFilterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
+export const waterfallFilterTextAtom = Atom.make("").pipe(Atom.keepAlive)
+
+// Attribute filter (F key): pick a span-attribute key + exact value to restrict the trace list.
+export type AttrPickerMode = "off" | "keys" | "values"
+export const attrPickerModeAtom = Atom.make<AttrPickerMode>("off").pipe(Atom.keepAlive)
+export const attrPickerInputAtom = Atom.make("").pipe(Atom.keepAlive)
+export const attrPickerIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+
+export interface AttrFacetState {
+	readonly status: LoadStatus
+	readonly key: string | null
+	readonly data: readonly { readonly value: string; readonly count: number }[]
+	readonly error: string | null
+}
+
+export const initialAttrFacetState: AttrFacetState = {
+	status: "ready",
+	key: null,
+	data: [],
+	error: null,
+}
+
+export const attrFacetStateAtom = Atom.make(initialAttrFacetState).pipe(Atom.keepAlive)
+
+// Applied filter (drives trace list query)
+export const activeAttrKeyAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+export const activeAttrValueAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+
+export const selectedThemeAtom = Atom.make<ThemeName>(readLastTheme()).pipe(Atom.keepAlive)
+
+export type TraceSortMode = "recent" | "slowest" | "errors"
+export const traceSortAtom = Atom.make<TraceSortMode>("recent").pipe(Atom.keepAlive)
+export const collapsedSpanIdsAtom = Atom.make(new Set<string>() as ReadonlySet<string>).pipe(Atom.keepAlive)

package/src/ui/loaders.ts

@@ -0,0 +1,120 @@
+import { Effect } from "effect"
+import { config } from "../config.ts"
+import { queryRuntime } from "../runtime.ts"
+import { LogQueryService } from "../services/LogQueryService.ts"
+import { TraceQueryService } from "../services/TraceQueryService.ts"
+
+export const loadTraceServices = () =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listServices))
+
+export const loadRecentTraceSummaries = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listTraceSummaries(serviceName)))
+
+/**
+ * Server-side trace summary search. Accepts any combination of:
+ *
+ * - `attributeFilters` — exact-match span attributes (from the `f` picker)
+ * - `aiText`           — FTS5-backed search across LLM prompt/response
+ *                        content (AI_FTS_KEYS), from the `:ai <query>`
+ *                        modifier in the `/` filter
+ *
+ * Both filters compose: when both are set, a trace must match both. When
+ * neither is set, callers should prefer `loadRecentTraceSummaries` so
+ * the server can skip the search path entirely.
+ */
+export const loadFilteredTraceSummaries = (
+	serviceName: string,
+	options: {
+		readonly attributeFilters?: Readonly<Record<string, string>>
+		readonly aiText?: string | null
+	},
+) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.searchTraceSummaries({
+		serviceName,
+		attributeFilters: options.attributeFilters,
+		aiText: options.aiText ?? null,
+		limit: config.otel.traceFetchLimit,
+	})))
+
+export const loadTraceAttributeKeys = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listFacets({ type: "traces", field: "attribute_keys", serviceName, limit: 200 })))
+
+export const loadTraceAttributeValues = (serviceName: string, key: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listFacets({ type: "traces", field: "attribute_values", serviceName, key, limit: 200 })))
+
+// ---------------------------------------------------------------------------
+// Facet cache (drives the `f` attribute filter picker)
+// ---------------------------------------------------------------------------
+
+export interface FacetRow {
+	readonly value: string
+	readonly count: number
+}
+
+export interface FacetCacheEntry {
+	readonly data: readonly FacetRow[]
+	readonly fetchedAt: Date
+}
+
+const facetKeysCache = new Map<string, FacetCacheEntry>()
+const facetValuesCache = new Map<string, FacetCacheEntry>()
+const facetKeysInflight = new Map<string, Promise<FacetCacheEntry>>()
+const facetValuesInflight = new Map<string, Promise<FacetCacheEntry>>()
+
+const valuesKey = (service: string, key: string) => `${service}\u0000${key}`
+
+export const getCachedFacetKeys = (service: string): FacetCacheEntry | null =>
+	facetKeysCache.get(service) ?? null
+
+export const getCachedFacetValues = (service: string, key: string): FacetCacheEntry | null =>
+	facetValuesCache.get(valuesKey(service, key)) ?? null
+
+export const ensureTraceAttributeKeys = (service: string): Promise<FacetCacheEntry> => {
+	const existing = facetKeysInflight.get(service)
+	if (existing) return existing
+	const request = loadTraceAttributeKeys(service)
+		.then((data) => {
+			const entry = { data, fetchedAt: new Date() } satisfies FacetCacheEntry
+			facetKeysCache.set(service, entry)
+			return entry
+		})
+		.finally(() => {
+			facetKeysInflight.delete(service)
+		})
+	facetKeysInflight.set(service, request)
+	return request
+}
+
+export const ensureTraceAttributeValues = (service: string, key: string): Promise<FacetCacheEntry> => {
+	const cacheKey = valuesKey(service, key)
+	const existing = facetValuesInflight.get(cacheKey)
+	if (existing) return existing
+	const request = loadTraceAttributeValues(service, key)
+		.then((data) => {
+			const entry = { data, fetchedAt: new Date() } satisfies FacetCacheEntry
+			facetValuesCache.set(cacheKey, entry)
+			return entry
+		})
+		.finally(() => {
+			facetValuesInflight.delete(cacheKey)
+		})
+	facetValuesInflight.set(cacheKey, request)
+	return request
+}
+
+/** Called from the refreshNonce effect alongside the trace / log cache clears. */
+export const invalidateFacetCaches = () => {
+	facetKeysCache.clear()
+	facetValuesCache.clear()
+	facetKeysInflight.clear()
+	facetValuesInflight.clear()
+}
+
+export const loadTraceDetail = (traceId: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.getTrace(traceId)))
+
+export const loadTraceLogs = (traceId: string) =>
+	queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listTraceLogs(traceId)))
+
+export const loadServiceLogs = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listRecentLogs(serviceName)))

package/src/ui/persistence.ts

@@ -0,0 +1,41 @@
+import { readFileSync } from "node:fs"
+import { dirname } from "node:path"
+import { config } from "../config.ts"
+import type { ThemeName } from "./theme.ts"
+
+const lastServicePath = `${dirname(config.otel.databasePath)}/last-service.txt`
+
+export const readLastService = (): string | null => {
+	try {
+		return readFileSync(lastServicePath, "utf-8").trim() || null
+	} catch {
+		return null
+	}
+}
+
+let lastPersistedService = readLastService()
+
+export const persistSelectedService = (service: string) => {
+	if (service === lastPersistedService) return
+	lastPersistedService = service
+	Bun.write(lastServicePath, service).catch(() => {})
+}
+
+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"
+	} catch {
+		return "motel-default"
+	}
+}
+
+let lastPersistedTheme = readLastTheme()
+
+export const persistSelectedTheme = (theme: ThemeName) => {
+	if (theme === lastPersistedTheme) return
+	lastPersistedTheme = theme
+	Bun.write(lastThemePath, theme).catch(() => {})
+}

package/src/ui/primitives.tsx

@@ -1,4 +1,5 @@
 import { RGBA, TextAttributes } from "@opentui/core"
+import { Children } from "react"
 import { colors } from "./theme.ts"
 import { fitCell, truncateText } from "./format.ts"
 import type { DetailView } from "./state.ts"
@@ -19,19 +20,32 @@ export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: stri
 	</box>
 )
 
-export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
-	<box height={1}>
-		{bg ? (
-			<text wrapMode="none" truncate fg={fg} bg={bg}>
-				{children}
-			</text>
-		) : (
-			<text wrapMode="none" truncate fg={fg}>
-				{children}
-			</text>
-		)}
-	</box>
-)
+const collapseFormattingWhitespace = (children: React.ReactNode) => Children.toArray(children).filter((child) => {
+	if (typeof child !== "string") return true
+	if (child.trim().length > 0) return true
+	// OpenTUI preserves JSX indentation/newline text nodes, so strip the
+	// formatting-only whitespace between inline spans while keeping any
+	// intentional in-band spaces that callers render explicitly.
+	return !/[\r\n\t]/.test(child)
+})
+
+export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => {
+	const inlineChildren = collapseFormattingWhitespace(children)
+
+	return (
+		<box height={1}>
+			{bg ? (
+				<text wrapMode="none" truncate fg={fg} bg={bg}>
+					{inlineChildren}
+				</text>
+			) : (
+				<text wrapMode="none" truncate fg={fg}>
+					{inlineChildren}
+				</text>
+			)}
+		</box>
+	)
+}
 
 export const AlignedHeaderLine = ({ left, right, width, rightFg = colors.muted }: { left: string; right: string; width: number; rightFg?: string }) => {
 	const availableRightWidth = Math.max(8, width - left.length - 2)