@kitlangton/motel 0.1.3 → 0.2.1

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)
@@ -80,13 +94,25 @@ export const SeparatorColumn = ({ height, junctionChars }: { height: number; jun
 	)
 }
 
-export const FilterBar = ({ text, width }: { text: string; width: number }) => (
-	<TextLine fg={colors.accent}>
-		<span fg={colors.muted}>{"/"}</span>
-		<span fg={colors.text}>{fitCell(text, width - 2)}</span>
-		<span fg={colors.accent}>{"\u2588"}</span>
-	</TextLine>
-)
+export const FilterBar = ({ text, width }: { text: string; width: number }) => {
+	// Layout: "/<text>█  op name · :error · :ai <query>"
+	// Cursor block sits immediately after the typed text (no padding —
+	// fitCell would pad the empty string to fill the available width and
+	// push the cursor to the far right, which looked like a bug). The
+	// hint only renders while the input is empty so real typing never
+	// collides with it.
+	const hint = text.length === 0 ? "  op name · :error · :ai <query>" : ""
+	const textMaxWidth = Math.max(1, width - 2 - hint.length)
+	const displayText = text.length > textMaxWidth ? text.slice(text.length - textMaxWidth) : text
+	return (
+		<TextLine fg={colors.accent}>
+			<span fg={colors.muted}>{"/"}</span>
+			<span fg={colors.text}>{displayText}</span>
+			<span fg={colors.accent}>{"\u2588"}</span>
+			{hint ? <span fg={colors.muted}>{hint}</span> : null}
+		</TextLine>
+	)
+}
 
 const FooterKey = ({ label }: { label: string }) => <span fg={colors.count} attributes={TextAttributes.BOLD}>{label}</span>
 
@@ -118,7 +144,7 @@ export const HelpModal = ({ width, height, autoRefresh, themeLabel, onClose }: {
 					{row("t", `cycle theme (${themeLabel})`)}
 					{row("tab", "toggle service logs")}
 					{row("[ ]", "switch service")}
-					{row("/", "filter by root operation")}
+					{row("/", "filter by root operation (\u2003:error, :ai <query>)")}
 					{row("f", "filter traces by span attribute")}
 					{row("s", "cycle sort mode")}
 					{row("a", `auto refresh ${autoRefresh ? "on" : "off"}`)}

package/src/ui/state.ts

@@ -1,169 +1,4 @@
-import { Effect } from "effect"
-import * as Atom from "effect/unstable/reactivity/Atom"
-import { readFileSync } from "node:fs"
-import { dirname } from "node:path"
-import { config } from "../config.ts"
-import type { LogItem, TraceItem, TraceSummaryItem } from "../domain.ts"
-import { queryRuntime } from "../runtime.ts"
-import { LogQueryService } from "../services/LogQueryService.ts"
-import { TraceQueryService } from "../services/TraceQueryService.ts"
-import type { ThemeName } from "./theme.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)
-const lastServicePath = `${dirname(config.otel.databasePath)}/last-service.txt`
-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(() => {})
-}
-
-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)
-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)
-
-// 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 // null when loading keys; set when loading values
-	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)
-
-const lastThemePath = `${dirname(config.otel.databasePath)}/last-theme.txt`
-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(() => {})
-}
-
-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)
-
-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)))
-export const loadFilteredTraceSummaries = (serviceName: string, attributeFilters: Readonly<Record<string, string>>) =>
-	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.searchTraceSummaries({ serviceName, attributeFilters, 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 })))
-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)))
+export * from "./atoms.ts"
+export * from "./persistence.ts"
+export * from "./loaders.ts"
+export * from "./aiState.ts"

package/src/ui/useAttrFilterPicker.ts

@@ -3,16 +3,22 @@ import { useEffect } from "react"
 import {
 	attrFacetStateAtom,
 	attrPickerModeAtom,
+	ensureTraceAttributeKeys,
+	ensureTraceAttributeValues,
+	getCachedFacetKeys,
+	getCachedFacetValues,
 	initialAttrFacetState,
-	loadTraceAttributeKeys,
-	loadTraceAttributeValues,
 	selectedTraceServiceAtom,
 } from "./state.ts"
 
-// When the picker is open, load the current facet page (keys, or values for
-// a specific key) and keep it in sync with the selected service. We key the
-// effect off picker mode + service + target key so refetches happen on drill
-// in/out and when the user switches services mid-pick.
+// Drive the picker's data state from (pickerMode, service, selectedKey).
+//
+// Strategy: stale-while-revalidate. On reopen we publish whatever the
+// module-level cache has instantly (no "loading…" flash), then kick off a
+// background revalidation. The first time we see a (service, key) tuple
+// we still show `loading` so the UI has something to say. The module-level
+// caches in `state.ts` mean a service-change pre-warm can fill the cache
+// before the user ever presses `f`.
 export const useAttrFilterPicker = (selectedKey: string | null) => {
 	const [pickerMode] = useAtom(attrPickerModeAtom)
 	const [service] = useAtom(selectedTraceServiceAtom)
@@ -24,24 +30,58 @@ export const useAttrFilterPicker = (selectedKey: string | null) => {
 			return
 		}
 		let cancelled = false
-		setFacetState({ status: "loading", key: pickerMode === "values" ? selectedKey : null, data: [], error: null })
-		const load = async () => {
-			try {
-				const rows = pickerMode === "keys"
-					? await loadTraceAttributeKeys(service)
-					: selectedKey
-						? await loadTraceAttributeValues(service, selectedKey)
-						: []
-				if (cancelled) return
-				setFacetState({ status: "ready", key: pickerMode === "values" ? selectedKey : null, data: rows, error: null })
-			} catch (err) {
-				if (cancelled) return
-				setFacetState({ status: "error", key: pickerMode === "values" ? selectedKey : null, data: [], error: err instanceof Error ? err.message : String(err) })
-			}
+		const publishReady = (key: string | null, data: readonly { readonly value: string; readonly count: number }[]) => {
+			setFacetState({ status: "ready", key, data, error: null })
+		}
+		const publishLoading = (key: string | null, previous: readonly { readonly value: string; readonly count: number }[] = []) => {
+			setFacetState({ status: "loading", key, data: previous, error: null })
 		}
-		void load()
-		return () => {
-			cancelled = true
+		const publishError = (key: string | null, previous: readonly { readonly value: string; readonly count: number }[], err: unknown) => {
+			setFacetState({
+				status: "error",
+				key,
+				data: previous,
+				error: err instanceof Error ? err.message : String(err),
+			})
 		}
+
+		if (pickerMode === "keys") {
+			const cached = getCachedFacetKeys(service)
+			if (cached) {
+				publishReady(null, cached.data)
+			} else {
+				publishLoading(null)
+			}
+			ensureTraceAttributeKeys(service)
+				.then((entry) => {
+					if (cancelled) return
+					publishReady(null, entry.data)
+				})
+				.catch((err) => {
+					if (cancelled) return
+					publishError(null, cached?.data ?? [], err)
+				})
+		} else if (selectedKey) {
+			const cached = getCachedFacetValues(service, selectedKey)
+			if (cached) {
+				publishReady(selectedKey, cached.data)
+			} else {
+				publishLoading(selectedKey)
+			}
+			ensureTraceAttributeValues(service, selectedKey)
+				.then((entry) => {
+					if (cancelled) return
+					publishReady(selectedKey, entry.data)
+				})
+				.catch((err) => {
+					if (cancelled) return
+					publishError(selectedKey, cached?.data ?? [], err)
+				})
+		} else {
+			// values mode with no key yet — just show empty state.
+			publishReady(null, [])
+		}
+
+		return () => { cancelled = true }
 	}, [pickerMode, service, selectedKey, setFacetState])
 }