@aryasaatvik/motel 0.3.0

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(true).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/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/filterParser.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "bun:test"
+import { parseFilterText } from "./filterParser.ts"
+
+describe("parseFilterText", () => {
+	it("returns empty state for empty input", () => {
+		expect(parseFilterText("")).toEqual({ aiText: null, errorOnly: false, operationNeedle: "" })
+	})
+
+	it("extracts a bare operation-name needle", () => {
+		expect(parseFilterText("streamText")).toEqual({
+			aiText: null, errorOnly: false, operationNeedle: "streamtext",
+		})
+	})
+
+	it("recognizes :error modifier", () => {
+		expect(parseFilterText(":error")).toEqual({
+			aiText: null, errorOnly: true, operationNeedle: "",
+		})
+	})
+
+	it("composes :error with an operation needle", () => {
+		expect(parseFilterText("llm :error")).toEqual({
+			aiText: null, errorOnly: true, operationNeedle: "llm",
+		})
+	})
+
+	it("extracts :ai query up to end of string", () => {
+		expect(parseFilterText(":ai rate limit")).toEqual({
+			aiText: "rate limit", errorOnly: false, operationNeedle: "",
+		})
+	})
+
+	it("extracts :ai query stopping at the next modifier", () => {
+		expect(parseFilterText(":ai tool_use :error")).toEqual({
+			aiText: "tool_use", errorOnly: true, operationNeedle: "",
+		})
+	})
+
+	it("composes operation needle + :ai + :error", () => {
+		expect(parseFilterText("stream :ai rate :error")).toEqual({
+			aiText: "rate", errorOnly: true, operationNeedle: "stream",
+		})
+	})
+
+	it("ignores :ai with empty query", () => {
+		expect(parseFilterText(":ai ")).toEqual({
+			aiText: null, errorOnly: false, operationNeedle: "",
+		})
+	})
+
+	it("is case-insensitive for modifiers", () => {
+		expect(parseFilterText(":AI foo :ERROR")).toEqual({
+			aiText: "foo", errorOnly: true, operationNeedle: "",
+		})
+	})
+})

package/src/ui/filterParser.ts

@@ -0,0 +1,45 @@
+/**
+ * Parses the `/` filter input in the trace list into its component
+ * modifiers. Supports composable tokens:
+ *
+ * - `:error`           — restricts to traces with at least one failed span
+ * - `:ai <query...>`   — FTS-backed search against LLM prompt/response
+ *                        content (AI_FTS_KEYS) across every span in the
+ *                        trace. The query runs up to the next `:modifier`
+ *                        or end of input, so `"/ :ai rate limit :error"`
+ *                        passes `"rate limit"` as the aiText and also
+ *                        sets errorOnly.
+ * - bare text          — case-insensitive substring match against the
+ *                        trace's root operation name (client-side)
+ *
+ * Keep this a pure function: it's unit-tested separately and the React
+ * hook just calls it per render.
+ */
+export interface ParsedFilter {
+	readonly aiText: string | null
+	readonly errorOnly: boolean
+	readonly operationNeedle: string
+}
+
+export const parseFilterText = (raw: string): ParsedFilter => {
+	const text = raw ?? ""
+
+	// `:ai <query>` — greedy up to the next `:` modifier or end. The
+	// leading `(^|\s)` guard prevents matching a stray `:ai` glued to
+	// non-space characters (shouldn't happen in practice but cheap).
+	const aiMatch = text.match(/(?:^|\s):ai\s+([^:]*?)(?=\s:|$)/i)
+	const aiText = aiMatch?.[1]?.trim() || null
+
+	const errorOnly = /(?:^|\s):error(?=\s|$)/i.test(text)
+
+	// Whatever remains after removing the recognized modifiers becomes the
+	// operation-name needle. Lowercased here so the call site can do a
+	// plain includes() without re-lowercasing.
+	const operationNeedle = text
+		.replace(/(?:^|\s):ai\s+[^:]*?(?=\s:|$)/i, " ")
+		.replace(/(?:^|\s):error(?=\s|$)/i, " ")
+		.trim()
+		.toLowerCase()
+
+	return { aiText, errorOnly, operationNeedle }
+}

package/src/ui/format.ts

@@ -0,0 +1,128 @@
+import { resolveOtelUrl } from "../config.ts"
+import type { LogItem } from "../domain.ts"
+import { colors } from "./theme.ts"
+
+export const truncateText = (text: string, width: number) => {
+	if (width <= 0) return ""
+	if (text.length <= width) return text
+	if (width <= 3) return text.slice(0, width)
+	return `${text.slice(0, width - 3)}...`
+}
+
+export const fitCell = (text: string, width: number, align: "left" | "right" = "left") => {
+	const trimmed = truncateText(text, width)
+	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
+}
+
+export const formatShortDate = (date: Date) => date.toLocaleDateString("en-US", { month: "numeric", day: "numeric" })
+
+export const formatTimestamp = (date: Date) => date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }).toLowerCase()
+
+export const formatDuration = (durationMs: number) => {
+	const { number, unit } = splitDuration(durationMs)
+	return `${number}${unit}`
+}
+
+/**
+ * Split a duration into its numeric and unit parts so the unit can render
+ * dimmer than the number (easier to visually parse a column of durations).
+ */
+export const splitDuration = (durationMs: number): { number: string; unit: "s" | "ms" } => {
+	const trimDecimal = (value: string) => value.replace(/\.0+$/, "").replace(/(\.\d*[1-9])0+$/, "$1")
+
+	if (durationMs >= 10_000) return { number: `${Math.round(durationMs / 1000)}`, unit: "s" }
+	if (durationMs >= 1000) return { number: trimDecimal((durationMs / 1000).toFixed(1)), unit: "s" }
+	if (durationMs >= 100) return { number: `${Math.round(durationMs)}`, unit: "ms" }
+	if (durationMs >= 10) return { number: trimDecimal(durationMs.toFixed(1)), unit: "ms" }
+	return { number: trimDecimal(durationMs.toFixed(2)), unit: "ms" }
+}
+
+export const lifecycleLabel = (value: { readonly isRunning: boolean }) => (value.isRunning ? "open" : "closed")
+
+export const relativeTime = (date: Date) => {
+	const seconds = Math.max(0, Math.floor((Date.now() - date.getTime()) / 1000))
+	if (seconds < 60) return `${seconds}s`
+	if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+	if (seconds < 86_400) return `${Math.floor(seconds / 3600)}h`
+	return `${Math.floor(seconds / 86_400)}d`
+}
+
+export const formatLogTimestamp = (timestamp: Date) => `${formatShortDate(timestamp)} ${formatTimestamp(timestamp)}`
+
+export const logHeadline = (body: string) => body.split(/\r?\n/, 1)[0]?.replace(/\s+/g, " ").trim() || ""
+
+export const wrapTextLines = (text: string, width: number, maxLines: number) => {
+	const normalized = text.replace(/\r/g, "")
+	const hardLines = normalized.split("\n")
+	const lines: string[] = []
+
+	for (const hardLine of hardLines) {
+		let remaining = hardLine
+		if (remaining.length === 0) {
+			lines.push("")
+			if (lines.length >= maxLines) return lines
+			continue
+		}
+		while (remaining.length > 0) {
+			lines.push(remaining.slice(0, width))
+			remaining = remaining.slice(width)
+			if (lines.length >= maxLines) {
+				if (remaining.length > 0) {
+					lines[maxLines - 1] = truncateText(lines[maxLines - 1]!, width)
+				}
+				return lines
+			}
+		}
+	}
+
+	return lines.slice(0, maxLines)
+}
+
+export const traceIndicator = (trace: { readonly errorCount: number }) => (trace.errorCount > 0 ? "!" : "\u00b7")
+export const traceIndicatorColor = (trace: { readonly errorCount: number }) => (trace.errorCount > 0 ? colors.error : colors.passing)
+export const traceRowId = (traceId: string) => `trace-row-${traceId}`
+
+export const logSeverityColor = (severity: string) => {
+	if (severity.startsWith("ERROR") || severity.startsWith("FATAL")) return colors.error
+	if (severity.startsWith("WARN")) return colors.warning
+	return colors.count
+}
+
+export const relevantLogAttributes = (log: LogItem) =>
+	Object.entries(log.attributes).filter(([key]) =>
+		![
+			"deployment.environment.name",
+			"service.instance.id",
+			"service.name",
+			"telemetry.sdk.name",
+			"telemetry.sdk.language",
+			"fiberId",
+			"spanId",
+			"traceId",
+		].includes(key),
+	)
+
+export const traceUiUrl = (traceId: string) => resolveOtelUrl(`/trace/${traceId}`)
+export const webUiUrl = () => resolveOtelUrl(`/traces`)
+
+export const copyToClipboard = async (value: string) => {
+	const proc = Bun.spawn({
+		cmd: ["pbcopy"],
+		stdin: "pipe",
+		stdout: "ignore",
+		stderr: "pipe",
+	})
+
+	if (!proc.stdin) {
+		throw new Error("Clipboard is not available")
+	}
+
+	proc.stdin.write(value)
+	proc.stdin.end()
+
+	const exitCode = await proc.exited
+	if (exitCode !== 0) {
+		const stderr = await new Response(proc.stderr).text()
+		throw new Error(stderr.trim() || "Could not copy OTEL server details")
+	}
+}

package/src/ui/loaders.ts

@@ -0,0 +1,101 @@
+import { Effect } from "effect"
+import { config } from "../config.ts"
+import { queryRuntime } from "../runtime.ts"
+import { TelemetryStoreReadonly } from "../services/TelemetryStore.ts"
+import { makeCachedLoader } from "./cachedLoader.ts"
+
+export const loadTraceServices = () =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listServices))
+
+export const loadRecentTraceSummaries = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (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(TelemetryStoreReadonly, (service) => service.searchTraceSummaries({
+		serviceName,
+		attributeFilters: options.attributeFilters,
+		aiText: options.aiText ?? null,
+		limit: config.otel.traceFetchLimit,
+	})))
+
+export const loadTraceAttributeKeys = (serviceName: string) =>
+	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(TelemetryStoreReadonly, (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 wrapWithTimestamp = (data: readonly FacetRow[]): FacetCacheEntry => ({ data, fetchedAt: new Date() })
+
+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 =>
+	facetKeysLoader.get(service) ?? null
+
+export const getCachedFacetValues = (service: string, key: string): FacetCacheEntry | null =>
+	facetValuesLoader.get({ service, key }) ?? null
+
+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 = () => {
+	facetKeysLoader.invalidate()
+	facetValuesLoader.invalidate()
+}
+
+export const loadTraceDetail = (traceId: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.getTrace(traceId)))
+
+export const loadTraceLogs = (traceId: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.listTraceLogs(traceId)))
+
+export const loadServiceLogs = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (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 { defaultThemeName, 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 : defaultThemeName
+	} catch {
+		return defaultThemeName
+	}
+}
+
+let lastPersistedTheme = readLastTheme()
+
+export const persistSelectedTheme = (theme: ThemeName) => {
+	if (theme === lastPersistedTheme) return
+	lastPersistedTheme = theme
+	Bun.write(lastThemePath, theme).catch(() => {})
+}