@kitlangton/motel 0.2.4 → 0.2.6

package/src/ui/ServiceLogs.tsx

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef } from "react"
 import type { LogItem } from "../domain.ts"
 import { fitCell, formatLogTimestamp, formatTimestamp, logHeadline, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
 import { Divider, PlainLine, TextLine } from "./primitives.tsx"
-import type { ServiceLogState } from "./state.ts"
+import type { ServiceLogState } from "./atoms.ts"
 import { colors, SEPARATOR } from "./theme.ts"
 
 export const ServiceLogsView = ({
@@ -26,6 +26,15 @@ export const ServiceLogsView = ({
 	const traceWidth = 8
 	const messageWidth = Math.max(16, contentWidth - timeWidth - levelWidth - traceWidth - 3)
 
+	// Hooks must be called unconditionally — keep them above the early
+	// returns. The data-dependent values below all tolerate a 0-length
+	// data array, so this stays correct in the empty/loading/error cases.
+	const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const safeSelectedIndex = Math.max(0, Math.min(selectedIndex, logsState.data.length - 1))
+	useLayoutEffect(() => {
+		scrollRef.current?.scrollChildIntoView(`svc-log-${safeSelectedIndex}`)
+	}, [safeSelectedIndex])
+
 	if (logsState.status === "loading" && logsState.data.length === 0) {
 		return <PlainLine text="Loading recent service logs..." fg={colors.count} />
 	}
@@ -38,8 +47,6 @@ export const ServiceLogsView = ({
 		return <PlainLine text={`No logs captured yet for service ${serviceName ?? "unknown"}.`} fg={colors.muted} />
 	}
 
-	const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-	const safeSelectedIndex = Math.max(0, Math.min(selectedIndex, logsState.data.length - 1))
 	const selectedLog = logsState.data[safeSelectedIndex] ?? null
 	const detailWidth = Math.max(16, contentWidth - 2)
 	const detailBodyLines = selectedLog ? wrapTextLines(selectedLog.body, detailWidth, 6) : []
@@ -47,10 +54,6 @@ export const ServiceLogsView = ({
 	const detailHeight = selectedLog ? 3 + detailBodyLines.length + detailAttributeLines.length : 0
 	const listHeight = Math.max(4, bodyLines - detailHeight - 1)
 
-	useLayoutEffect(() => {
-		scrollRef.current?.scrollChildIntoView(`svc-log-${safeSelectedIndex}`)
-	}, [safeSelectedIndex])
-
 	return (
 		<box flexDirection="column">
 			{selectedLog ? (

package/src/ui/SpanContentView.tsx

@@ -47,6 +47,25 @@ export const SpanContentView = ({
 	readonly paneWidth: number
 	readonly selectedAttrIndex: number
 }) => {
+	const valueWrapWidth = Math.max(16, contentWidth - VALUE_INDENT.length - CURSOR_WIDTH)
+	const tags = span?.tags
+
+	// Block layout is memoised on tags identity — otherwise every j/k press
+	// would rewrap every attribute's value even though only the highlight
+	// moved. Hooks must be called unconditionally, so this lives above the
+	// `!span` early return and the memo handles the empty case itself.
+	const blocks = useMemo<readonly AttrBlock[]>(() => {
+		if (!tags) return []
+		return Object.entries(tags).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) }
+		})
+	}, [tags, valueWrapWidth])
+
 	if (!span) {
 		return (
 			<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_CONTENT_HEADER_ROWS} overflow="hidden">
@@ -61,25 +80,9 @@ export const SpanContentView = ({
 		)
 	}
 
-	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 selected = Math.max(0, Math.min(selectedAttrIndex, blocks.length - 1))
 	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`
@@ -137,14 +140,14 @@ export const SpanContentView = ({
 					<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.count}>{`${blocks.length} tags`}</span>
 					<span fg={colors.separator}>{SEPARATOR}</span>
-					<span fg={colors.muted}>{`${selected + 1}/${entries.length}`}</span>
+					<span fg={colors.muted}>{`${selected + 1}/${blocks.length}`}</span>
 				</TextLine>
 			</box>
 			<Divider width={paneWidth} />
 			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-				{entries.length === 0 ? (
+				{blocks.length === 0 ? (
 					<PlainLine text="No tags on this span." fg={colors.muted} />
 				) : (
 					visible.map((block, offset) => {
@@ -165,7 +168,7 @@ export const SpanContentView = ({
 									</TextLine>
 								) : (
 									block.valueLines.map((line, i) => (
-										<TextLine key={i}>
+										<TextLine key={`${block.key}-${i}`}>
 											<span fg={colors.separator}>{VALUE_INDENT}</span>
 											<span fg={isSelected ? colors.text : colors.muted}>{line}</span>
 										</TextLine>

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 } from "./state.ts"
+import type { LoadStatus } from "./atoms.ts"
 import { colors, SEPARATOR } from "./theme.ts"
 
 /**

package/src/ui/TraceList.tsx

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef, useState } from "react"
 import type { TraceSummaryItem } from "../domain.ts"
 import { fitCell, formatDuration, lifecycleLabel, relativeTime, traceIndicator, traceIndicatorColor, traceRowId } from "./format.ts"
 import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
-import type { LoadStatus } from "./state.ts"
+import type { LoadStatus } from "./atoms.ts"
 import { colors } from "./theme.ts"
 
 const getTraceRowLayout = (contentWidth: number) => {

package/src/ui/aiState.ts

@@ -2,8 +2,9 @@ import { Effect } from "effect"
 import * as Atom from "effect/unstable/reactivity/Atom"
 import type { AiCallDetail } from "../domain.ts"
 import { queryRuntime } from "../runtime.ts"
-import { TraceQueryService } from "../services/TraceQueryService.ts"
+import { TelemetryStoreReadonly } from "../services/TelemetryStore.ts"
 import type { LoadStatus } from "./atoms.ts"
+import { makeCachedLoader } from "./cachedLoader.ts"
 
 // AI chat view (full-screen when drilled into an `isAiSpan` span).
 // ---------------------------------------------------------------------
@@ -37,35 +38,22 @@ export const initialAiCallDetailState: AiCallDetailState = {
 export const aiCallDetailStateAtom = Atom.make(initialAiCallDetailState).pipe(Atom.keepAlive)
 
 export const loadAiCallDetail = (spanId: string) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.getAiCall(spanId)))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.getAiCall(spanId)))
 
 // AI call detail cache: the `ai.prompt` payload can easily be 50KB+ and
 // we don't want to re-hit SQLite every time j/k moves the selection
 // between adjacent AI spans. Cleared alongside the other per-refresh
 // caches in `useTraceScreenData`.
-const aiCallDetailCache = new Map<string, AiCallDetail | null>()
-const aiCallDetailInflight = new Map<string, Promise<AiCallDetail | null>>()
+const aiCallDetailLoader = makeCachedLoader<string, AiCallDetail | null>({
+	load: loadAiCallDetail,
+})
 
 export const getCachedAiCallDetail = (spanId: string): AiCallDetail | null | undefined =>
-	aiCallDetailCache.has(spanId) ? aiCallDetailCache.get(spanId) ?? null : undefined
+	aiCallDetailLoader.get(spanId)
 
-export const ensureAiCallDetail = (spanId: string): Promise<AiCallDetail | null> => {
-	if (aiCallDetailCache.has(spanId)) return Promise.resolve(aiCallDetailCache.get(spanId) ?? null)
-	const existing = aiCallDetailInflight.get(spanId)
-	if (existing) return existing
-	const request = loadAiCallDetail(spanId)
-		.then((data) => {
-			aiCallDetailCache.set(spanId, data)
-			return data
-		})
-		.finally(() => {
-			aiCallDetailInflight.delete(spanId)
-		})
-	aiCallDetailInflight.set(spanId, request)
-	return request
-}
+export const ensureAiCallDetail = (spanId: string): Promise<AiCallDetail | null> =>
+	aiCallDetailLoader.ensure(spanId)
 
 export const invalidateAiCallDetailCache = () => {
-	aiCallDetailCache.clear()
-	aiCallDetailInflight.clear()
+	aiCallDetailLoader.invalidate()
 }

package/src/ui/app/TraceWorkspace.tsx

@@ -6,7 +6,8 @@ import { AlignedHeaderLine, BlankRow, Divider, SeparatorColumn, TextLine } from
 import { ServiceLogsView } from "../ServiceLogs.tsx"
 import { SpanContentView } from "../SpanContentView.tsx"
 import { SpanDetailPane } from "../SpanDetailPane.tsx"
-import type { AiCallDetailState, DetailView, LogState, ServiceLogState, TraceDetailState } from "../state.ts"
+import type { DetailView, LogState, ServiceLogState, TraceDetailState } from "../atoms.ts"
+import type { AiCallDetailState } from "../aiState.ts"
 import { colors, SEPARATOR } from "../theme.ts"
 import { TraceDetailsPane } from "../TraceDetailsPane.tsx"
 import type { TraceListProps } from "../TraceList.tsx"

package/src/ui/app/useAppLayout.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react"
 import { fitCell } from "../format.ts"
-import type { DetailView } from "../state.ts"
+import type { DetailView } from "../atoms.ts"
 
 interface UseAppLayoutInput {
 	readonly width: number | undefined

package/src/ui/app/useTraceScreenData.ts

@@ -5,34 +5,17 @@ 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,
-	loadTraceDetail,
-	loadTraceLogs,
-	loadTraceServices,
 	logStateAtom,
-	persistSelectedService,
 	refreshNonceAtom,
 	selectedAttrIndexAtom,
-	selectedChatChunkIdAtom,
 	selectedServiceLogIndexAtom,
 	selectedSpanIndexAtom,
 	selectedTraceIndexAtom,
@@ -43,7 +26,28 @@ import {
 	type TraceSortMode,
 	traceSortAtom,
 	traceStateAtom,
-} from "../state.ts"
+} from "../atoms.ts"
+import {
+	aiCallDetailStateAtom,
+	chatDetailChunkIdAtom,
+	chatDetailScrollOffsetAtom,
+	ensureAiCallDetail,
+	getCachedAiCallDetail,
+	initialAiCallDetailState,
+	invalidateAiCallDetailCache,
+	selectedChatChunkIdAtom,
+} from "../aiState.ts"
+import {
+	ensureTraceAttributeKeys,
+	ensureTraceAttributeValues,
+	loadFilteredTraceSummaries,
+	loadRecentTraceSummaries,
+	loadServiceLogs,
+	loadTraceDetail,
+	loadTraceLogs,
+	loadTraceServices,
+} from "../loaders.ts"
+import { persistSelectedService } from "../persistence.ts"
 import { isAiSpan } from "../../domain.ts"
 import { buildChunks, type Chunk } from "../aiChatModel.ts"
 import { parseFilterText } from "../filterParser.ts"
@@ -166,17 +170,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/cachedLoader.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "bun:test"
+import { makeCachedLoader } from "./cachedLoader.ts"
+
+describe("makeCachedLoader", () => {
+	it("ensures cached values without loading twice", async () => {
+		let loads = 0
+		const loader = makeCachedLoader<string, number>({ load: async () => ++loads })
+
+		expect(await loader.ensure("key")).toBe(1)
+		expect(await loader.ensure("key")).toBe(1)
+		expect(loads).toBe(1)
+	})
+
+	it("refreshes stale values while publishing the updated cache", async () => {
+		let value = 1
+		const loader = makeCachedLoader<string, number>({ load: async () => value })
+
+		expect(await loader.ensure("key")).toBe(1)
+		value = 2
+		expect(await loader.refresh("key")).toBe(2)
+		expect(loader.get("key")).toBe(2)
+	})
+})

package/src/ui/cachedLoader.ts

@@ -0,0 +1,60 @@
+// Generic cache with inflight-promise dedup, used by the facet and AI
+// call detail caches. Both previously duplicated this pattern by hand:
+// a Map for the cached value, a parallel Map for in-flight promises,
+// and three small exports (get / ensure / invalidate). This factory is
+// the seam; callers only need to supply a loader and (optionally) a
+// hash function for compound keys.
+
+export interface CachedLoader<K, V> {
+	/** Synchronous cache lookup. Returns `undefined` if the key has never been loaded. */
+	readonly get: (key: K) => V | undefined
+	/** Resolves with the cached value if present, otherwise loads it (deduplicating concurrent calls for the same key). */
+	readonly ensure: (key: K) => Promise<V>
+	/** Loads the latest value while deduplicating any load already running for this key. */
+	readonly refresh: (key: K) => Promise<V>
+	/** Drops every cached value and aborts dedup tracking for in-flight loads. */
+	readonly invalidate: () => void
+}
+
+export interface CachedLoaderOptions<K, V> {
+	readonly load: (key: K) => Promise<V>
+	/** Required when `K` is a compound type that can't be used as a Map key directly. */
+	readonly hash?: (key: K) => string
+}
+
+export const makeCachedLoader = <K, V>(opts: CachedLoaderOptions<K, V>): CachedLoader<K, V> => {
+	const hash = opts.hash ?? ((k) => k as unknown as string)
+	const cache = new Map<string, V>()
+	const inflight = new Map<string, Promise<V>>()
+
+	const get = (key: K) => cache.get(hash(key))
+
+	const refresh = (key: K): Promise<V> => {
+		const h = hash(key)
+		const existing = inflight.get(h)
+		if (existing) return existing
+		const request = opts.load(key)
+			.then((data) => {
+				cache.set(h, data)
+				return data
+			})
+			.finally(() => {
+				inflight.delete(h)
+			})
+		inflight.set(h, request)
+		return request
+	}
+
+	const ensure = (key: K): Promise<V> => {
+		const h = hash(key)
+		if (cache.has(h)) return Promise.resolve(cache.get(h) as V)
+		return refresh(key)
+	}
+
+	const invalidate = () => {
+		cache.clear()
+		inflight.clear()
+	}
+
+	return { get, ensure, refresh, invalidate }
+}

package/src/ui/loaders.ts

@@ -1,14 +1,14 @@
 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"
+import { TelemetryStoreReadonly } from "../services/TelemetryStore.ts"
+import { makeCachedLoader } from "./cachedLoader.ts"
 
 export const loadTraceServices = () =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listServices))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listServices))
 
 export const loadRecentTraceSummaries = (serviceName: string) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listTraceSummaries(serviceName)))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listTraceSummaries(serviceName)))
 
 /**
  * Server-side trace summary search. Accepts any combination of:
@@ -29,7 +29,7 @@ export const loadFilteredTraceSummaries = (
 		readonly aiText?: string | null
 	},
 ) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.searchTraceSummaries({
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.searchTraceSummaries({
 		serviceName,
 		attributeFilters: options.attributeFilters,
 		aiText: options.aiText ?? null,
@@ -37,10 +37,10 @@ export const loadFilteredTraceSummaries = (
 	})))
 
 export const loadTraceAttributeKeys = (serviceName: string) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listFacets({ type: "traces", field: "attribute_keys", serviceName, limit: 200 })))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (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 })))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listFacets({ type: "traces", field: "attribute_values", serviceName, key, limit: 200 })))
 
 // ---------------------------------------------------------------------------
 // Facet cache (drives the `f` attribute filter picker)
@@ -56,65 +56,46 @@ export interface FacetCacheEntry {
 	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 wrapWithTimestamp = (data: readonly FacetRow[]): FacetCacheEntry => ({ data, fetchedAt: new Date() })
 
-const valuesKey = (service: string, key: string) => `${service}\u0000${key}`
+const facetKeysLoader = makeCachedLoader<string, FacetCacheEntry>({
+	load: (service) => loadTraceAttributeKeys(service).then(wrapWithTimestamp),
+})
+
+const facetValuesLoader = makeCachedLoader<{ readonly service: string; readonly key: string }, FacetCacheEntry>({
+	hash: ({ service, key }) => `${service}\u0000${key}`,
+	load: ({ service, key }) => loadTraceAttributeValues(service, key).then(wrapWithTimestamp),
+})
 
 export const getCachedFacetKeys = (service: string): FacetCacheEntry | null =>
-	facetKeysCache.get(service) ?? null
+	facetKeysLoader.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
-}
+	facetValuesLoader.get({ service, key }) ?? null
 
-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
-}
+export const ensureTraceAttributeKeys = (service: string): Promise<FacetCacheEntry> =>
+	facetKeysLoader.ensure(service)
+
+export const refreshTraceAttributeKeys = (service: string): Promise<FacetCacheEntry> =>
+	facetKeysLoader.refresh(service)
+
+export const ensureTraceAttributeValues = (service: string, key: string): Promise<FacetCacheEntry> =>
+	facetValuesLoader.ensure({ service, key })
+
+export const refreshTraceAttributeValues = (service: string, key: string): Promise<FacetCacheEntry> =>
+	facetValuesLoader.refresh({ service, key })
 
 /** Called from the refreshNonce effect alongside the trace / log cache clears. */
 export const invalidateFacetCaches = () => {
-	facetKeysCache.clear()
-	facetValuesCache.clear()
-	facetKeysInflight.clear()
-	facetValuesInflight.clear()
+	facetKeysLoader.invalidate()
+	facetValuesLoader.invalidate()
 }
 
 export const loadTraceDetail = (traceId: string) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.getTrace(traceId)))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.getTrace(traceId)))
 
 export const loadTraceLogs = (traceId: string) =>
-	queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listTraceLogs(traceId)))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listTraceLogs(traceId)))
 
 export const loadServiceLogs = (serviceName: string) =>
-	queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listRecentLogs(serviceName)))
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listRecentLogs(serviceName)))

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/primitives.tsx

@@ -2,7 +2,7 @@ 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"
+import type { DetailView } from "./atoms.ts"
 
 export const BlankRow = () => <box height={1} />
 

package/src/ui/state.ts

@@ -1,3 +1,5 @@
+// Compatibility barrel retained for published deep imports. New modules
+// should import from the focused state/cache modules directly.
 export * from "./atoms.ts"
 export * from "./persistence.ts"
 export * from "./loaders.ts"

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/traceDetailsWidth.repro.test.ts

@@ -52,6 +52,8 @@ const rootWaterfallRow = (snap: string) =>
 describe("trace details waterfall width (end-to-end TUI)", () => {
 	const tempDir = mkdtempSync(join(tmpdir(), "motel-trace-width-"))
 	const dbPath = join(tempDir, "telemetry.sqlite")
+	const port = 45_000 + Math.floor(Math.random() * 5_000)
+	const daemonEnv = { MOTEL_RUNTIME_DIR: tempDir, MOTEL_OTEL_DB_PATH: dbPath, MOTEL_OTEL_BASE_URL: `http://127.0.0.1:${port}`, MOTEL_OTEL_QUERY_URL: `http://127.0.0.1:${port}`, MOTEL_OTEL_PORT: String(port) }
 	const lastServicePath = join(tempDir, "last-service.txt")
 	let canRun = false
 
@@ -66,6 +68,7 @@ describe("trace details waterfall width (end-to-end TUI)", () => {
 			cwd: process.cwd(),
 			env: {
 				...process.env,
+				...daemonEnv,
 				MOTEL_OTEL_DB_PATH: dbPath,
 				MOTEL_OTEL_ENABLED: "false",
 			},
@@ -87,6 +90,10 @@ describe("trace details waterfall width (end-to-end TUI)", () => {
 			"--rows", "40",
 			"--cwd", process.cwd(),
 			"--env", `MOTEL_OTEL_DB_PATH=${dbPath}`,
+			"--env", `MOTEL_RUNTIME_DIR=${tempDir}`,
+			"--env", `MOTEL_OTEL_BASE_URL=${daemonEnv.MOTEL_OTEL_BASE_URL}`,
+			"--env", `MOTEL_OTEL_QUERY_URL=${daemonEnv.MOTEL_OTEL_QUERY_URL}`,
+			"--env", `MOTEL_OTEL_PORT=${port}`,
 			"--env", "MOTEL_OTEL_ENABLED=false",
 			"--timeout", "15000",
 		])
@@ -96,7 +103,11 @@ describe("trace details waterfall width (end-to-end TUI)", () => {
 	}, 60_000)
 
 	afterAll(async () => {
-		if (canRun) await tui(["close", "--session", SESSION])
+		if (canRun) {
+			await tui(["close", "--session", SESSION])
+			const stop = Bun.spawn({ cmd: ["bun", "run", "src/motel.ts", "stop"], cwd: process.cwd(), env: { ...process.env, ...daemonEnv }, stdout: "ignore", stderr: "ignore" })
+			await stop.exited
+		}
 		try { rmSync(tempDir, { recursive: true, force: true }) } catch {}
 	})