@kitlangton/motel 0.2.4 → 0.2.5

package/AGENTS.md

@@ -31,6 +31,18 @@
 - Effect LSP diagnostics over the whole project: `bunx effect-language-service diagnostics --project tsconfig.json --format text`
 - Effect LSP interactive setup wizard: `bunx effect-language-service setup`
 
+## Release Strategy
+- npm package: `@kitlangton/motel`
+- Current published npm `latest`: `0.2.4` (`npm view @kitlangton/motel dist-tags --json`)
+- Tags are versioned as `vX.Y.Z` (`git tag --sort=-version:refname` shows `v0.2.4`, `v0.2.3`, ...)
+- Publishing is handled by GitHub Actions in `.github/workflows/publish.yml`, not by local manual `npm publish`
+- The publish workflow triggers on `git push` of tags matching `v*` or via manual `workflow_dispatch`
+- The workflow runs `bun install --frozen-lockfile`, `bun run typecheck`, `bun run test`, then `npm publish --provenance`
+- `npm publish` runs `prepublishOnly`, which builds the web UI via `bun run web:build`
+- Before tagging a release, make sure the committed `package.json` version matches the intended git tag exactly
+- Preferred release flow: update `package.json` version, commit the release changes, create tag `v<package.json version>`, push the commit and tag, then verify the GitHub Actions publish and npm dist-tags
+- Do not create or push release tags from a dirty worktree with unrelated uncommitted changes; ask before including unrelated edits in a release
+
 ## Effect LSP
 The repo is wired up with `@effect/language-service` as a `tsconfig.json` `plugins` entry. Editors that pick up the TypeScript workspace plugin (Zed, VSCode, Cursor, NVim via vtsls) will surface Effect-specific diagnostics, quick fixes, and refactors inline. In Zed this requires selecting the workspace TypeScript version — it does so automatically when `node_modules/typescript` is present.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitlangton/motel",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "A local OpenTelemetry ingest + TUI viewer for development, backed by SQLite.",
   "type": "module",
   "license": "MIT",
@@ -68,6 +68,10 @@
     "web:dev": "bun run --cwd web dev",
     "web:build": "bun run --cwd web build",
     "story:chat": "bun run src/storybook/aiChatStory.tsx",
+    "bench:motel-cold-start": "bun run scripts/bench-motel-cold-start.ts",
+    "bench:ingest-logs": "bun run scripts/bench-ingest-logs.ts",
+    "bench:ingest-traces": "bun run scripts/bench-ingest-traces.ts",
+    "bench:search-spans": "bun run scripts/bench-search-spans.ts",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run web:build"
   },

package/src/App.tsx

@@ -7,6 +7,7 @@ import { Divider, FooterHints, HelpModal, PlainLine, SplitDivider, TextLine } fr
 import { useAppLayout } from "./ui/app/useAppLayout.ts"
 import { useTraceScreenData } from "./ui/app/useTraceScreenData.ts"
 import { TraceWorkspace } from "./ui/app/TraceWorkspace.tsx"
+import { startupBenchMark } from "./startupBench.js"
 import {
 	type AttrFacetState,
 	attrPickerIndexAtom,
@@ -32,6 +33,8 @@ import { getVisibleSpans } from "./ui/waterfallModel.ts"
 
 const NOTICE_TIMEOUT_MS = 2500
 
+startupBenchMark("app_module_loaded")
+
 const buildHeaderModel = ({
 	headerFooterWidth,
 	selectedTraceService,
@@ -177,6 +180,7 @@ const AppOverlays = ({
 )
 
 export const App = () => {
+	startupBenchMark("app_render_started")
 	const { width, height } = useTerminalDimensions()
 	const [notice, setNotice] = useAtom(noticeAtom)
 	const [selectedTheme] = useAtom(selectedThemeAtom)
@@ -261,6 +265,10 @@ export const App = () => {
 		persistSelectedTheme(selectedTheme)
 	}, [selectedTheme])
 
+	useEffect(() => {
+		startupBenchMark("app_effects_committed")
+	}, [])
+
 	const { spanNavActive } = useKeyboardNav({
 		selectedTrace,
 		filteredTraces,
@@ -337,6 +345,7 @@ export const App = () => {
 	// above an empty column and leaves a visible stale sliver when
 	// toggling tab back and forth with the trace view.
 	const showSplit = isWideLayout && detailView !== "service-logs"
+	startupBenchMark("app_render_ready")
 
 	return (
 		<box width={width ?? 100} height={height ?? 24} flexGrow={1} flexDirection="column" backgroundColor={RGBA.fromHex(colors.screenBg)}>

package/src/StartupGate.tsx

@@ -0,0 +1,291 @@
+import { Effect } from "effect"
+import { RGBA, TextAttributes } from "@opentui/core"
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
+import { useEffect, useMemo, useState } from "react"
+import { App } from "./App.js"
+import { createDaemonManager, ensureManagedDaemon, getManagedDaemonStatus, type DaemonStatus } from "./daemon.js"
+import { MOTEL_SERVICE_ID } from "./registry.js"
+import { Divider, PlainLine, TextLine } from "./ui/primitives.tsx"
+import { colors } from "./ui/theme.ts"
+
+type ConflictStatus = DaemonStatus & {
+	readonly service: typeof MOTEL_SERVICE_ID
+	readonly pid: number
+	readonly workdir: string
+	readonly reason: string
+	readonly sameWorkdir: false
+}
+
+type ConflictScreenState = {
+	kind: "conflict"
+	message: string
+	status: ConflictStatus
+	busy: boolean
+	notice: string | null
+}
+
+type ErrorScreenState = {
+	kind: "error"
+	message: string
+	busy: boolean
+	notice: string | null
+}
+
+type StartupState =
+	| { kind: "loading"; message: string }
+	| { kind: "ready" }
+	| ConflictScreenState
+	| ErrorScreenState
+
+type RecoveryAction = {
+	readonly key: string
+	readonly label: string
+	readonly run: () => Promise<void>
+	readonly disabled?: boolean
+}
+
+const readStatus = () => Effect.runPromise(getManagedDaemonStatus)
+const startDaemon = () => Effect.runPromise(ensureManagedDaemon)
+
+const parsePort = (url: string) => {
+	try {
+		const port = Number(new URL(url).port)
+		return Number.isFinite(port) && port > 0 ? port : undefined
+	} catch {
+		return undefined
+	}
+}
+
+const isRecoverableConflict = (status: DaemonStatus | null): status is ConflictStatus =>
+	status !== null &&
+	status.service === MOTEL_SERVICE_ID &&
+	status.pid !== null &&
+	status.workdir !== null &&
+	status.reason !== null &&
+	!status.sameWorkdir
+
+const stopConflictingDaemon = async (status: ConflictStatus) => {
+	const port = parsePort(status.url)
+	const manager = createDaemonManager({
+		workdir: status.workdir ?? undefined,
+		databasePath: status.databasePath,
+		port,
+	})
+	await Effect.runPromise(manager.stop)
+}
+
+const LoadingScreen = ({ width, height, message }: { width: number; height: number; message: string }) => {
+	const panelWidth = Math.min(76, Math.max(50, width - 8))
+	const left = Math.max(0, Math.floor((width - panelWidth) / 2))
+	const top = Math.max(0, Math.floor((height - 5) / 2))
+
+	return (
+		<box width={width} height={height} backgroundColor={RGBA.fromHex(colors.screenBg)}>
+			<box position="absolute" left={left} top={top} width={panelWidth} flexDirection="column">
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>MOTEL</span>
+					<span fg={colors.separator}>{" · "}</span>
+					<span fg={colors.muted}>starting up...</span>
+				</TextLine>
+				<Divider width={panelWidth} />
+				<box paddingTop={1}>
+					<PlainLine text={message} fg={colors.count} />
+				</box>
+			</box>
+		</box>
+	)
+}
+
+const RecoveryScreen = ({
+	title,
+	message,
+	width,
+	height,
+	detailLines,
+	actions,
+	selectedIndex,
+	notice,
+	busy,
+}: {
+	readonly title: string
+	readonly message: string
+	readonly width: number
+	readonly height: number
+	readonly detailLines: readonly string[]
+	readonly actions: readonly RecoveryAction[]
+	readonly selectedIndex: number
+	readonly notice: string | null
+	readonly busy: boolean
+}) => {
+	const panelWidth = Math.min(96, Math.max(64, width - 8))
+	const left = Math.max(0, Math.floor((width - panelWidth) / 2))
+	const bodyHeight = 9 + detailLines.length + actions.length + (notice ? 2 : 0)
+	const top = Math.max(0, Math.floor((height - bodyHeight) / 2))
+
+	return (
+		<box width={width} height={height} backgroundColor={RGBA.fromHex(colors.screenBg)}>
+			<box position="absolute" left={left} top={top} width={panelWidth} flexDirection="column">
+				<TextLine>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>MOTEL</span>
+					<span fg={colors.separator}>{" · "}</span>
+					<span fg={colors.error} attributes={TextAttributes.BOLD}>{title}</span>
+				</TextLine>
+				<Divider width={panelWidth} />
+				<box paddingTop={1} paddingBottom={1} flexDirection="column">
+					<PlainLine text={message} fg={colors.text} />
+				</box>
+				{detailLines.map((line, index) => (
+					<PlainLine key={`${index}:${line}`} text={line} fg={colors.muted} />
+				))}
+				<box paddingTop={1} flexDirection="column">
+					{actions.map((action, index) => {
+						const selected = index === selectedIndex
+						const prefix = selected ? ">" : " "
+						const text = `${prefix} [${action.key}] ${action.label}${action.disabled ? " (unavailable)" : ""}`
+						return (
+							<TextLine key={action.key} bg={selected ? colors.selectedBg : undefined}>
+								<span fg={selected ? colors.selectedText : colors.text}>{text}</span>
+							</TextLine>
+						)
+					})}
+				</box>
+				<box paddingTop={1} flexDirection="column">
+					{notice ? <PlainLine text={notice} fg={busy ? colors.warning : colors.count} /> : null}
+					<PlainLine text={busy ? "Working..." : "j/k or ↑↓ select · enter run · r retry · k kill conflicting daemon · q quit"} fg={colors.count} />
+				</box>
+			</box>
+		</box>
+	)
+}
+
+export const StartupGate = () => {
+	const renderer = useRenderer()
+	const { width = 100, height = 24 } = useTerminalDimensions()
+	const [startupState, setStartupState] = useState<StartupState>({ kind: "loading", message: "Checking managed daemon..." })
+	const [selectedIndex, setSelectedIndex] = useState(0)
+
+	const attemptStart = async () => {
+		setStartupState({ kind: "loading", message: "Checking managed daemon..." })
+		try {
+			await startDaemon()
+			setStartupState({ kind: "ready" })
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error)
+			const status = await readStatus().catch(() => null)
+			if (isRecoverableConflict(status)) {
+				setSelectedIndex(0)
+				setStartupState({ kind: "conflict", message, status, busy: false, notice: null })
+				return
+			}
+			setSelectedIndex(0)
+			setStartupState({ kind: "error", message, busy: false, notice: null })
+		}
+	}
+
+	useEffect(() => {
+		void attemptStart()
+	}, [])
+
+	const actions = useMemo<readonly RecoveryAction[]>(() => {
+		if (startupState.kind === "conflict") {
+			return [
+				{ key: "r", label: "Retry startup", run: attemptStart },
+				{
+					key: "k",
+					label: `Stop conflicting daemon (${startupState.status.pid})`,
+					run: async () => {
+						setStartupState((current) => current.kind === "conflict"
+							? { ...current, busy: true, notice: `Stopping daemon ${current.status.pid}...` }
+							: current)
+						try {
+							await stopConflictingDaemon(startupState.status)
+							await attemptStart()
+						} catch (error) {
+							const message = error instanceof Error ? error.message : String(error)
+							setStartupState((current) => current.kind === "conflict"
+								? { ...current, busy: false, notice: message }
+								: current)
+						}
+					},
+				},
+				{ key: "q", label: "Quit", run: async () => { renderer.destroy() } },
+			]
+		}
+		if (startupState.kind === "error") {
+			return [
+				{ key: "r", label: "Retry startup", run: attemptStart },
+				{ key: "q", label: "Quit", run: async () => { renderer.destroy() } },
+			]
+		}
+		return []
+	}, [renderer, startupState])
+
+	useKeyboard((key) => {
+		if (startupState.kind === "ready" || startupState.kind === "loading" || key.repeated) return
+		if (key.name === "q" || (key.ctrl && key.name === "c")) {
+			renderer.destroy()
+			return
+		}
+		if (key.name === "up" || key.name === "k") {
+			setSelectedIndex((current) => (current + actions.length - 1) % actions.length)
+			return
+		}
+		if (key.name === "down" || key.name === "j") {
+			setSelectedIndex((current) => (current + 1) % actions.length)
+			return
+		}
+		if (key.name === "r") {
+			void actions.find((action) => action.key === "r")?.run()
+			return
+		}
+		if (key.name === "k") {
+			void actions.find((action) => action.key === "k")?.run()
+			return
+		}
+		if (key.name === "return" || key.name === "enter") {
+			void actions[selectedIndex]?.run()
+		}
+	})
+
+	if (startupState.kind === "ready") return <App />
+	if (startupState.kind === "loading") return <LoadingScreen width={width} height={height} message={startupState.message} />
+	if (startupState.kind === "conflict") {
+		const status = startupState.status
+		const detailLines = [
+			`Port: ${status.url}`,
+			`Conflicting workdir: ${status.workdir}`,
+			`Conflicting pid: ${status.pid}`,
+			`Database: ${status.databasePath}`,
+			status.workdir.startsWith("/tmp") || status.workdir.startsWith("/private/tmp")
+				? "This looks like a temp/test daemon."
+				: "This looks like a real motel daemon started from another project.",
+		]
+		return (
+			<RecoveryScreen
+				title="Daemon Conflict"
+				message={startupState.message}
+				width={width}
+				height={height}
+				detailLines={detailLines}
+				actions={actions}
+				selectedIndex={selectedIndex}
+				notice={startupState.notice}
+				busy={startupState.busy}
+			/>
+		)
+	}
+
+	return (
+		<RecoveryScreen
+			title="Startup Error"
+			message={startupState.message}
+			width={width}
+			height={height}
+			detailLines={["Retry startup or quit the TUI."]}
+			actions={actions}
+			selectedIndex={selectedIndex}
+			notice={startupState.notice}
+			busy={startupState.busy}
+		/>
+	)
+}

package/src/daemon.ts

@@ -10,6 +10,7 @@ const DEFAULT_PORT = 27686
 const START_TIMEOUT_MS = 30_000
 const STOP_TIMEOUT_MS = 10_000
 const LOCK_TIMEOUT_MS = 10_000
+const START_POLL_INTERVAL_MS = 25
 const POLL_INTERVAL_MS = 150
 /** Fast probe used inside the waitForHealthy poll loop — we call it
  *  every POLL_INTERVAL_MS, so a generous budget would stall the loop. */
@@ -329,7 +330,7 @@ export const createDaemonManager = (options: DaemonOptions = {}): DaemonManager
 				}
 				throw new Error(`Daemon process ${pid} exited before becoming healthy. See ${config.logPath}.`)
 			}
-			await sleep(POLL_INTERVAL_MS)
+			await sleep(START_POLL_INTERVAL_MS)
 		}
 		throw new Error(`Timed out waiting for daemon health at ${config.baseUrl}/api/health. See ${config.logPath}.`)
 	}

package/src/index.tsx

@@ -1,7 +1,10 @@
 import { RegistryProvider } from "@effect/atom-react"
 import { createCliRenderer } from "@opentui/core"
 import { createRoot } from "@opentui/react"
-import { App } from "./App.js"
+import { startupBenchMark } from "./startupBench.js"
+import { StartupGate } from "./StartupGate.js"
+
+startupBenchMark("index_module_loaded")
 
 const renderer = await createCliRenderer({
 	exitOnCtrlC: false,
@@ -11,8 +14,12 @@ const renderer = await createCliRenderer({
 	},
 })
 
+startupBenchMark("renderer_ready")
+
 createRoot(renderer).render(
 	<RegistryProvider>
-		<App />
+		<StartupGate />
 	</RegistryProvider>,
 )
+
+startupBenchMark("root_render_called")

package/src/localServer.ts

@@ -12,7 +12,9 @@ import { MotelHttpApi } from "./httpApi.js"
 import { attributeFiltersFromEntries, attributeContainsFiltersFromEntries } from "./queryFilters.js"
 import { MOTEL_SERVICE_ID, MOTEL_VERSION, removeRegistryEntry, writeRegistryEntry } from "./registry.js"
 import { AsyncIngest, AsyncIngestLive } from "./services/AsyncIngest.js"
-import { TelemetryStore, TelemetryStoreLive } from "./services/TelemetryStore.js"
+import { LogQueryService, LogQueryServiceLive } from "./services/LogQueryService.js"
+import { TelemetryStore, TelemetryStoreLive, TelemetryStoreReadonlyLive } from "./services/TelemetryStore.js"
+import { TraceQueryService, TraceQueryServiceLive } from "./services/TraceQueryService.js"
 import type { LogItem, TraceItem, TraceSummaryItem } from "./domain.js"
 import { lifecycleLabel } from "./ui/format.js"
 
@@ -39,6 +41,8 @@ const htmlResponse = (value: string) => HttpServerResponse.html(value)
 const notFoundResponse = (message = "Not found") => jsonResponse({ error: message }, 404)
 const requestUrl = (request: { readonly url: string }) => new URL(request.url, config.otel.baseUrl)
 const withStore = <A>(f: (store: TelemetryStore["Service"]) => Effect.Effect<A, Error>) => Effect.flatMap(TelemetryStore.asEffect(), f)
+const withTraceQuery = <A>(f: (query: TraceQueryService["Service"]) => Effect.Effect<A, Error>) => Effect.flatMap(TraceQueryService.asEffect(), f)
+const withLogQuery = <A>(f: (query: LogQueryService["Service"]) => Effect.Effect<A, Error>) => Effect.flatMap(LogQueryService.asEffect(), f)
 // Response-building helpers are generic in R so a handler can depend
 // on TelemetryStore (query path) or AsyncIngest (worker-RPC path)
 // without forcing every handler onto the same service surface.
@@ -149,7 +153,7 @@ const loadLogsPage = (input: {
 	readonly lookbackMinutes: number
 	readonly cursor: CursorShape | null
 }) =>
-	Effect.flatMap(TelemetryStore.asEffect(), (store) =>
+	Effect.flatMap(LogQueryService.asEffect(), (store) =>
 		Effect.map(
 			store.searchLogs({
 				serviceName: input.serviceName,
@@ -312,7 +316,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					),
 				),
 			)
-			.handleRaw("services", () => respondJson(Effect.map(withStore((store) => store.listServices), (data) => ({ data }))))
+			.handleRaw("services", () => respondJson(Effect.map(withTraceQuery((store) => store.listServices), (data) => ({ data }))))
 			.handleRaw("traces", ({ request }) =>
 				respondRaw(Effect.gen(function*() {
 					const url = requestUrl(request)
@@ -320,7 +324,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					const limit = parseBoundedLimit(url.searchParams.get("limit"), TRACE_DEFAULT_LIMIT, TRACE_MAX_LIMIT)
 					const lookbackMinutes = parseBoundedLookbackMinutes(url.searchParams.get("lookback"), TRACE_DEFAULT_LOOKBACK, TRACE_MAX_LOOKBACK)
 					const cursor = decodeCursor(url.searchParams.get("cursor"))
-					const data = yield* withStore((store) => store.listTraceSummaries(service, {
+					const data = yield* withTraceQuery((store) => store.listTraceSummaries(service, {
 						limit: limit + 1,
 						lookbackMinutes,
 						cursorStartedAtMs: cursor?.kind === "trace" ? cursor.startedAt : undefined,
@@ -336,7 +340,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					const limit = parseBoundedLimit(url.searchParams.get("limit"), TRACE_DEFAULT_LIMIT, TRACE_MAX_LIMIT)
 					const lookbackMinutes = parseBoundedLookbackMinutes(url.searchParams.get("lookback"), TRACE_DEFAULT_LOOKBACK, TRACE_MAX_LOOKBACK)
 					const cursor = decodeCursor(url.searchParams.get("cursor"))
-					const data = yield* withStore((store) =>
+					const data = yield* withTraceQuery((store) =>
 						store.searchTraceSummaries({
 							serviceName: url.searchParams.get("service"),
 							operation: url.searchParams.get("operation"),
@@ -363,7 +367,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					if (!groupBy || (agg !== "count" && agg !== "avg_duration" && agg !== "p95_duration" && agg !== "error_rate")) {
 						return jsonResponse({ error: "Expected groupBy and agg=count|avg_duration|p95_duration|error_rate" }, 400)
 					}
-					const data = yield* withStore((store) =>
+					const data = yield* withTraceQuery((store) =>
 						store.traceStats({
 							groupBy,
 							agg,
@@ -386,7 +390,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					const attributeContainsFilters = attributeContainsFiltersFromQuery(url)
 					const limit = parseBoundedLimit(url.searchParams.get("limit"), SPAN_DEFAULT_LIMIT, SPAN_MAX_LIMIT)
 					const lookbackMinutes = parseBoundedLookbackMinutes(url.searchParams.get("lookback"), TRACE_DEFAULT_LOOKBACK, TRACE_MAX_LOOKBACK)
-					const data = yield* withStore((store) =>
+					const data = yield* withTraceQuery((store) =>
 						store.searchSpans({
 							serviceName: url.searchParams.get("service"),
 							traceId: url.searchParams.get("traceId"),
@@ -423,7 +427,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 				})),
 			)
 			.handleRaw("traceSpans", ({ params }) =>
-				respondJson(Effect.map(withStore((store) => store.listTraceSpans(params.traceId)), (data) => ({ data }))),
+				respondJson(Effect.map(withTraceQuery((store) => store.listTraceSpans(params.traceId)), (data) => ({ data }))),
 			)
 			.handleRaw("spanLogs", ({ params, request }) =>
 				respondRaw(Effect.gen(function*() {
@@ -436,14 +440,14 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 			)
 			.handleRaw("span", ({ params }) =>
 				respondRaw(
-					Effect.flatMap(withStore((store) => store.getSpan(params.spanId)), (data) =>
+					Effect.flatMap(withTraceQuery((store) => store.getSpan(params.spanId)), (data) =>
 						Effect.succeed(data ? jsonResponse({ data }) : notFoundResponse("Span not found")),
 					),
 				),
 			)
 			.handleRaw("trace", ({ params }) =>
 				respondRaw(
-					Effect.flatMap(withStore((store) => store.getTrace(params.traceId)), (data) =>
+					Effect.flatMap(withTraceQuery((store) => store.getTrace(params.traceId)), (data) =>
 						Effect.succeed(data ? jsonResponse({ data }) : notFoundResponse("Trace not found")),
 					),
 				),
@@ -460,7 +464,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					if (!groupBy || agg !== "count") {
 						return jsonResponse({ error: "Expected groupBy and agg=count" }, 400)
 					}
-					const data = yield* withStore((store) =>
+					const data = yield* withLogQuery((store) =>
 						store.logStats({
 							groupBy,
 							agg: "count",
@@ -508,7 +512,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 					if ((type !== "traces" && type !== "logs") || !field) {
 						return jsonResponse({ error: "Expected type=traces|logs and field=<name>" }, 400)
 					}
-					const data = yield* withStore((store) =>
+					const data = yield* withTraceQuery((store) =>
 						store.listFacets({
 							type,
 							field,
@@ -586,9 +590,9 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 			)
 			.handleRaw("tracePage", ({ params }) =>
 				respondRaw(
-					Effect.flatMap(withStore((store) => store.getTrace(params.traceId)), (trace) =>
+					Effect.flatMap(withTraceQuery((store) => store.getTrace(params.traceId)), (trace) =>
 						trace
-							? Effect.map(withStore((store) => store.listTraceLogs(params.traceId)), (logs) => htmlResponse(renderTracePage(trace, logs)))
+							? Effect.map(withLogQuery((store) => store.listTraceLogs(params.traceId)), (logs) => htmlResponse(renderTracePage(trace, logs)))
 							: Effect.succeed(notFoundResponse("Trace not found")),
 					),
 				),
@@ -606,6 +610,10 @@ const ApiLayer = HttpApiBuilder.layer(MotelHttpApi, { openapiPath: "/openapi.jso
 	Layer.provide(HttpApiScalar.layer(MotelHttpApi, { scalar: { forceDarkModeState: "dark", showOperationId: true } })),
 )
 
+const QueryServicesLive = Layer.mergeAll(TraceQueryServiceLive, LogQueryServiceLive).pipe(
+	Layer.provideMerge(TelemetryStoreReadonlyLive),
+)
+
 // Web UI: Vite-built SPA served from web/dist. HttpStaticServer.layer
 // handles GET /*, filesystem lookup under `root`, and SPA fallback to
 // index.html for unknown paths — replacing the hand-rolled serveWebUi
@@ -675,9 +683,11 @@ export const ServerLive = HttpRouter.serve(
 	Layer.provide(HttpMiddleware.layerTracerDisabledForUrls(["/v1/traces", "/v1/logs"])),
 	// AsyncIngest spawns the telemetry worker — keeps the main-thread
 	// event loop free during heavy SQLite writes. Provided alongside
-	// the direct TelemetryStore so query handlers can still resolve
-	// their dependency directly.
+	// the writer TelemetryStore for ingest / maintenance. Query endpoints
+	// resolve through readonly TraceQueryService / LogQueryService so
+	// reads do not contend with the writer connection.
 	Layer.provideMerge(AsyncIngestLive),
+	Layer.provideMerge(QueryServicesLive),
 	Layer.provideMerge(TelemetryStoreLive),
 	Layer.provideMerge(BunHttpServer.layer({
 		port: config.otel.port,

package/src/motel.ts

@@ -12,7 +12,6 @@ case undefined:
 case "tui":
 case "ui": {
 	await run(applyManagedDaemonEnv)
-	await run(ensureManagedDaemon)
 	await import("./index.js")
 	break
 }
@@ -42,7 +41,6 @@ case "restart": {
 	// and want the TUI to reconnect to the new binary in one command.
 	await run(stopManagedDaemon)
 	await run(applyManagedDaemonEnv)
-	await run(ensureManagedDaemon)
 	await import("./index.js")
 	break
 }

package/src/services/AsyncIngest.ts

@@ -55,14 +55,16 @@ export const AsyncIngestLive = Layer.effect(
 		// spawn the worker and make /api/health wait on the worker's SQLite
 		// bootstrap. Cache a lazy initializer instead so the worker only starts
 		// on the first ingest request, but is still shared thereafter.
-		const getClient = yield* RpcClient.make(IngestRpcs).pipe(
-			Effect.provide(WorkerProtocol),
-			Effect.cached,
-		)
-		const withScope = <A, E, R>(effect: Effect.Effect<A, E, R>) => Effect.provideService(effect, Scope.Scope, scope)
+		const getClient = yield* Effect.gen(function*() {
+			const protocolContext = yield* Layer.buildWithScope(WorkerProtocol, scope)
+			return yield* RpcClient.make(IngestRpcs).pipe(
+				Effect.provide(protocolContext),
+				Effect.provideService(Scope.Scope, scope),
+			)
+		}).pipe(Effect.cached)
 		return {
-			ingestTraces: (input, options) => Effect.flatMap(withScope(getClient), (client) => client.ingestTraces(input, options)),
-			ingestLogs: (input, options) => Effect.flatMap(withScope(getClient), (client) => client.ingestLogs(input, options)),
+			ingestTraces: (input, options) => Effect.flatMap(getClient, (client) => client.ingestTraces(input, options)),
+			ingestLogs: (input, options) => Effect.flatMap(getClient, (client) => client.ingestLogs(input, options)),
 		}
 	}),
 )

package/src/services/LogQueryService.ts

@@ -7,8 +7,8 @@ export class LogQueryService extends Context.Service<
 	{
 		readonly listRecentLogs: (serviceName: string) => Effect.Effect<readonly LogItem[], Error>
 		readonly listTraceLogs: (traceId: string) => Effect.Effect<readonly LogItem[], Error>
-		readonly searchLogs: (input: { readonly serviceName?: string; readonly traceId?: string; readonly spanId?: string; readonly body?: string; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly LogItem[], Error>
-		readonly logStats: (input: { readonly groupBy: string; readonly agg: "count"; readonly serviceName?: string | null; readonly traceId?: string | null; readonly spanId?: string | null; readonly body?: string | null; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly { readonly group: string; readonly value: number; readonly count: number }[], Error>
+		readonly searchLogs: (input: { readonly serviceName?: string | null; readonly severity?: string | null; readonly traceId?: string | null; readonly spanId?: string | null; readonly body?: string | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly cursorTimestampMs?: number; readonly cursorId?: string; readonly attributeFilters?: Readonly<Record<string, string>>; readonly attributeContainsFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly LogItem[], Error>
+		readonly logStats: (input: { readonly groupBy: string; readonly agg: "count"; readonly serviceName?: string | null; readonly traceId?: string | null; readonly spanId?: string | null; readonly body?: string | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>>; readonly attributeContainsFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly { readonly group: string; readonly value: number; readonly count: number }[], Error>
 		readonly listFacets: (input: { readonly type: "traces" | "logs"; readonly field: string; readonly serviceName?: string | null; readonly lookbackMinutes?: number; readonly limit?: number }) => Effect.Effect<readonly { readonly value: string; readonly count: number }[], Error>
 	}
 >()("motel/LogQueryService") {}

package/src/services/TelemetryStore.ts

@@ -797,10 +797,82 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 
 		const deleteSpanAttributes = db.query(`DELETE FROM span_attributes WHERE trace_id = ? AND span_id = ?`)
 		const insertSpanAttribute = db.query(`INSERT INTO span_attributes (trace_id, span_id, key, value) VALUES (?, ?, ?, ?)`)
+		const spanAttributeInsertManyByCount = new Map<number, ReturnType<Database["query"]>>()
+		const insertSpanAttributesMany = (traceId: string, spanId: string, attributes: Readonly<Record<string, string>>) => {
+			const entries = Object.entries(attributes)
+			if (entries.length === 0) return
+			if (entries.length === 1) {
+				const [key, value] = entries[0]!
+				insertSpanAttribute.run(traceId, spanId, key, value)
+				return
+			}
+			let query = spanAttributeInsertManyByCount.get(entries.length)
+			if (!query) {
+				query = db.query(`INSERT INTO span_attributes (trace_id, span_id, key, value) VALUES ${entries.map(() => "(?, ?, ?, ?)").join(", ")}`)
+				spanAttributeInsertManyByCount.set(entries.length, query)
+			}
+			query.run(...entries.flatMap(([key, value]) => [traceId, spanId, key, value]))
+		}
 		const deleteSpanOperationSearch = db.query(`DELETE FROM span_operation_fts WHERE trace_id = ? AND span_id = ?`)
 		const insertSpanOperationSearch = db.query(`INSERT INTO span_operation_fts (trace_id, span_id, operation_name) VALUES (?, ?, ?)`)
+		const deleteSpanOperationSearchManyByCount = new Map<number, ReturnType<Database["query"]>>()
+		const insertSpanOperationSearchManyByCount = new Map<number, ReturnType<Database["query"]>>()
+		const updateSpanOperationSearchMany = (operations: ReadonlyArray<readonly [string, string, string]>) => {
+			if (operations.length === 0) return
+			if (operations.length === 1) {
+				const [traceId, spanId, operationName] = operations[0]!
+				deleteSpanOperationSearch.run(traceId, spanId)
+				insertSpanOperationSearch.run(traceId, spanId, operationName)
+				return
+			}
+
+			let deleteQuery = deleteSpanOperationSearchManyByCount.get(operations.length)
+			if (!deleteQuery) {
+				deleteQuery = db.query(`DELETE FROM span_operation_fts WHERE ${operations.map(() => "(trace_id = ? AND span_id = ?)").join(" OR ")}`)
+				deleteSpanOperationSearchManyByCount.set(operations.length, deleteQuery)
+			}
+			deleteQuery.run(...operations.flatMap(([traceId, spanId]) => [traceId, spanId]))
+
+			let insertQuery = insertSpanOperationSearchManyByCount.get(operations.length)
+			if (!insertQuery) {
+				insertQuery = db.query(`INSERT INTO span_operation_fts (trace_id, span_id, operation_name) VALUES ${operations.map(() => "(?, ?, ?)").join(", ")}`)
+				insertSpanOperationSearchManyByCount.set(operations.length, insertQuery)
+			}
+			insertQuery.run(...operations.flatMap(([traceId, spanId, operationName]) => [traceId, spanId, operationName]))
+		}
 		const insertLogAttribute = db.query(`INSERT INTO log_attributes (log_id, key, value) VALUES (?, ?, ?)`)
+		const logAttributeInsertManyByCount = new Map<number, ReturnType<Database["query"]>>()
+		const insertLogAttributesMany = (logId: number, attributes: Readonly<Record<string, string>>) => {
+			const entries = Object.entries(attributes)
+			if (entries.length === 0) return
+			if (entries.length === 1) {
+				const [key, value] = entries[0]!
+				insertLogAttribute.run(logId, key, value)
+				return
+			}
+			let query = logAttributeInsertManyByCount.get(entries.length)
+			if (!query) {
+				query = db.query(`INSERT INTO log_attributes (log_id, key, value) VALUES ${entries.map(() => "(?, ?, ?)").join(", ")}`)
+				logAttributeInsertManyByCount.set(entries.length, query)
+			}
+			query.run(...entries.flatMap(([key, value]) => [logId, key, value]))
+		}
 		const insertLogBodySearch = db.query(`INSERT INTO log_body_fts (log_id, body) VALUES (?, ?)`)
+		const insertLogBodySearchManyByCount = new Map<number, ReturnType<Database["query"]>>()
+		const insertLogBodySearchMany = (entries: ReadonlyArray<readonly [string, string]>) => {
+			if (entries.length === 0) return
+			if (entries.length === 1) {
+				const [logId, body] = entries[0]!
+				insertLogBodySearch.run(logId, body)
+				return
+			}
+			let query = insertLogBodySearchManyByCount.get(entries.length)
+			if (!query) {
+				query = db.query(`INSERT INTO log_body_fts (log_id, body) VALUES ${entries.map(() => "(?, ?)").join(", ")}`)
+				insertLogBodySearchManyByCount.set(entries.length, query)
+			}
+			query.run(...entries.flatMap(([logId, body]) => [logId, body]))
+		}
 
 		const maxDbSizeBytes = config.otel.maxDbSizeMb * 1024 * 1024
 
@@ -961,6 +1033,7 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 				let insertedSpans = 0
 				const transaction = db.transaction((request: OtlpTraceExportRequest) => {
 					const touchedTraceIds = new Set<string>()
+					const touchedOperations: Array<readonly [string, string, string]> = []
 					for (const resourceSpans of request.resourceSpans ?? []) {
 						const resourceAttributes = attributeMap(resourceSpans.resource?.attributes)
 						const serviceName = resourceAttributes["service.name"] || resourceAttributes["service_name"] || "unknown"
@@ -996,20 +1069,21 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 									JSON.stringify(events),
 								)
 								deleteSpanAttributes.run(span.traceId, span.spanId)
-								for (const [key, value] of Object.entries(mergedAttributes)) {
-									insertSpanAttribute.run(span.traceId, span.spanId, key, value)
-								}
-								try {
-									deleteSpanOperationSearch.run(span.traceId, span.spanId)
-									insertSpanOperationSearch.run(span.traceId, span.spanId, span.name ?? "unknown")
-								} catch {
-									// FTS is optional.
-								}
+								insertSpanAttributesMany(span.traceId, span.spanId, mergedAttributes)
+								touchedOperations.push([span.traceId, span.spanId, span.name ?? "unknown"])
 								touchedTraceIds.add(span.traceId)
 								insertedSpans += 1
 							}
 						}
 					}
+					try {
+						const BATCH_SIZE = 500
+						for (let offset = 0; offset < touchedOperations.length; offset += BATCH_SIZE) {
+							updateSpanOperationSearchMany(touchedOperations.slice(offset, offset + BATCH_SIZE))
+						}
+					} catch {
+						// FTS is optional.
+					}
 					for (const traceId of touchedTraceIds) {
 						upsertTraceSummary.run(traceId)
 					}
@@ -1024,6 +1098,7 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 			return yield* Effect.sync(() => {
 				let insertedLogs = 0
 				const transaction = db.transaction((request: OtlpLogExportRequest) => {
+					const touchedLogBodies: Array<readonly [string, string]> = []
 					for (const resourceLogs of request.resourceLogs ?? []) {
 						const resourceAttributes = attributeMap(resourceLogs.resource?.attributes)
 						const serviceName = resourceAttributes["service.name"] || resourceAttributes["service_name"] || "unknown"
@@ -1048,18 +1123,20 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 									JSON.stringify(resourceAttributes),
 								)
 								const logId = Number((result as { lastInsertRowid: number | bigint }).lastInsertRowid)
-								for (const [key, value] of Object.entries(mergedAttributes)) {
-									insertLogAttribute.run(logId, key, value)
-								}
-								try {
-									insertLogBodySearch.run(String(logId), body)
-								} catch {
-									// FTS is optional.
-								}
+								insertLogAttributesMany(logId, mergedAttributes)
+								touchedLogBodies.push([String(logId), body])
 								insertedLogs += 1
 							}
 						}
 					}
+					try {
+						const BATCH_SIZE = 500
+						for (let offset = 0; offset < touchedLogBodies.length; offset += BATCH_SIZE) {
+							insertLogBodySearchMany(touchedLogBodies.slice(offset, offset + BATCH_SIZE))
+						}
+					} catch {
+						// FTS is optional.
+					}
 				})
 
 				transaction(payload)
@@ -1282,6 +1359,8 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 			const candidateLimit = hasContainsFilters ? Math.max(limit * 20, 500) : Math.max(limit * 10, 200)
 
 			return yield* Effect.sync(() => {
+				let fromSql = "FROM spans AS s"
+				const joinParams: Array<string | number> = []
 				const clauses: string[] = ["s.start_time_ms >= ?"]
 				const params: Array<string | number> = [cutoff]
 
@@ -1296,8 +1375,8 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 				if (input.operation) {
 					const ftsQuery = toFtsMatchQuery(input.operation)
 					if (hasFts && ftsQuery) {
-						clauses.push("EXISTS (SELECT 1 FROM span_operation_fts WHERE span_operation_fts.trace_id = s.trace_id AND span_operation_fts.span_id = s.span_id AND span_operation_fts MATCH ?)")
-						params.push(ftsQuery)
+						fromSql += ` INNER JOIN (SELECT trace_id, span_id FROM span_operation_fts WHERE span_operation_fts MATCH ?) AS span_operation_match ON span_operation_match.trace_id = s.trace_id AND span_operation_match.span_id = s.span_id`
+						joinParams.push(ftsQuery)
 					} else {
 						clauses.push("s.operation_name LIKE ? COLLATE NOCASE")
 						params.push(`%${input.operation}%`)
@@ -1321,42 +1400,90 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 				}
 
 				const rows = db.query(`
-					SELECT trace_id, span_id
-					FROM spans AS s
+					SELECT *
+					${fromSql}
 					WHERE ${clauses.join(" AND ")}
 					ORDER BY s.start_time_ms DESC
 					LIMIT ?
-				`).all(...params, candidateLimit) as Array<{ trace_id: string; span_id: string }>
+				`).all(...joinParams, ...params, candidateLimit) as SpanRow[]
 
 				const traceIds = [...new Set(rows.map((row) => row.trace_id))]
 				if (traceIds.length === 0) return [] as readonly SpanItem[]
 
+				const keyOf = (traceId: string, spanId: string) => `${traceId}:${spanId}`
+				const spanContextById = new Map<string, { readonly parentSpanId: string | null; readonly operationName: string }>()
+				for (const row of rows) {
+					spanContextById.set(keyOf(row.trace_id, row.span_id), {
+						parentSpanId: row.parent_span_id,
+						operationName: row.operation_name,
+					})
+				}
+
 				const placeholders = traceIds.map(() => "?").join(", ")
-				const spanRows = db.query(`
-					SELECT * FROM spans
-					WHERE trace_id IN (${placeholders})
+				const rootRows = db.query(`
+					SELECT trace_id, operation_name
+					FROM spans
+					WHERE trace_id IN (${placeholders}) AND parent_span_id IS NULL
 					ORDER BY start_time_ms ASC
-				`).all(...traceIds) as SpanRow[]
-
-				const grouped = new Map<string, SpanRow[]>()
-				for (const row of spanRows) {
-					const group = grouped.get(row.trace_id) ?? []
-					group.push(row)
-					grouped.set(row.trace_id, group)
+				`).all(...traceIds) as Array<{ trace_id: string; operation_name: string }>
+				const rootOperationByTraceId = new Map<string, string>()
+				for (const row of rootRows) {
+					if (!rootOperationByTraceId.has(row.trace_id)) {
+						rootOperationByTraceId.set(row.trace_id, row.operation_name)
+					}
 				}
 
-				const itemById = new Map<string, SpanItem>()
-				for (const traceId of traceIds) {
-					const traceSpanRows = grouped.get(traceId)
-					if (!traceSpanRows) continue
-					for (const item of buildSpanItems(traceId, traceSpanRows)) {
-						itemById.set(`${item.traceId}:${item.span.spanId}`, item)
+				const spanContextLookup = db.query(`
+					SELECT parent_span_id, operation_name
+					FROM spans
+					WHERE trace_id = ? AND span_id = ?
+				`)
+
+				const getSpanContext = (traceId: string, spanId: string) => {
+					const key = keyOf(traceId, spanId)
+					const cached = spanContextById.get(key)
+					if (cached !== undefined) return cached
+					const row = spanContextLookup.get(traceId, spanId) as { parent_span_id: string | null; operation_name: string } | null
+					if (!row) return null
+					const value = {
+						parentSpanId: row.parent_span_id,
+						operationName: row.operation_name,
 					}
+					spanContextById.set(key, value)
+					return value
+				}
+
+				const depthById = new Map<string, number>()
+				const getDepth = (traceId: string, spanId: string, visiting = new Set<string>()): number => {
+					const key = keyOf(traceId, spanId)
+					const cached = depthById.get(key)
+					if (cached !== undefined) return cached
+					if (visiting.has(key)) return 0
+					visiting.add(key)
+					const context = getSpanContext(traceId, spanId)
+					const depth = context?.parentSpanId ? getDepth(traceId, context.parentSpanId, visiting) + 1 : 0
+					depthById.set(key, depth)
+					return depth
 				}
 
 				return rows
-					.map((row) => itemById.get(`${row.trace_id}:${row.span_id}`))
-					.filter((item): item is SpanItem => item !== undefined)
+					.map((row) => {
+						const parentContext = row.parent_span_id ? getSpanContext(row.trace_id, row.parent_span_id) : null
+						const parsedSpan = parseSpanRow(row)
+						const span = {
+							...parsedSpan,
+							depth: getDepth(row.trace_id, row.span_id),
+							warnings: row.parent_span_id && !parentContext
+								? [`missing span ${row.parent_span_id} (1 child)`]
+								: parsedSpan.warnings,
+						}
+						return {
+							traceId: row.trace_id,
+							rootOperationName: rootOperationByTraceId.get(row.trace_id) ?? span.operationName,
+							parentOperationName: parentContext?.operationName ?? null,
+							span,
+						} satisfies SpanItem
+					})
 					.filter((item) => {
 						if (input.parentOperation) {
 							const needle = input.parentOperation.toLowerCase()
@@ -1666,7 +1793,6 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 		})
 
 		const listFacets = Effect.fn("motel/TelemetryStore.listFacets")(function* (input: FacetSearch) {
-
 			const cutoff = (yield* Clock.currentTimeMillis) - (input.lookbackMinutes ?? config.otel.traceLookbackMinutes) * 60 * 1000
 			const limit = input.limit ?? 20
 
@@ -1756,21 +1882,26 @@ export const makeTelemetryStoreLayer = (opts: TelemetryStoreOptions) => Layer.ef
 						// FACET_VALUE_MAX_LEN. For opencode this hides `ai.prompt`,
 						// `ai.prompt.messages`, and `ai.prompt.tools` — which are 1-6MB text
 						// blobs that you'd never want to filter by exact match anyway. The
-						// WHERE clause lets SQLite skip reading those pages from disk, taking
-						// the picker open time from ~1.2s to ~370ms on a 2GB database.
+						// WHERE clause lets SQLite skip reading those pages from disk. We also
+						// dedupe to one (trace, key, value) row before grouping so repeated
+						// span-level duplicates don't blow up the temp B-trees used for the
+						// picker ranking query.
 						const params: Array<string | number> = [FACET_VALUE_MAX_LEN, cutoff]
 						if (input.serviceName) params.push(input.serviceName)
 						params.push(limit)
 						const rows = db.query(`
-							SELECT sa.key AS value,
-							       COUNT(DISTINCT sa.trace_id) AS count,
-							       COUNT(DISTINCT sa.value) AS distinct_values
-							FROM span_attributes sa
-							JOIN spans s ON s.trace_id = sa.trace_id AND s.span_id = sa.span_id
-							WHERE LENGTH(sa.value) < ?
-							  AND s.start_time_ms >= ?
-							${input.serviceName ? "AND s.service_name = ?" : ""}
-							GROUP BY sa.key
+							SELECT scoped.key AS value,
+							       COUNT(DISTINCT scoped.trace_id) AS count,
+							       COUNT(DISTINCT scoped.value) AS distinct_values
+							FROM (
+								SELECT DISTINCT sa.trace_id, sa.key, sa.value
+								FROM span_attributes sa
+								JOIN trace_summaries ts ON ts.trace_id = sa.trace_id
+								WHERE LENGTH(sa.value) < ?
+								  AND ts.started_at_ms >= ?
+								  ${input.serviceName ? "AND ts.service_name = ?" : ""}
+							) AS scoped
+							GROUP BY scoped.key
 							ORDER BY (CASE WHEN distinct_values = 1 THEN 1 ELSE 0 END) ASC,
 							         distinct_values DESC,
 							         count DESC,

package/src/services/TraceQueryService.ts

@@ -6,9 +6,9 @@ export class TraceQueryService extends Context.Service<
 	TraceQueryService,
 	{
 		readonly listServices: Effect.Effect<readonly string[], Error>
-		readonly listRecentTraces: (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number }) => Effect.Effect<readonly TraceItem[], Error>
-		readonly listTraceSummaries: (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number }) => Effect.Effect<readonly TraceSummaryItem[], Error>
-		readonly searchTraceSummaries: (input: { readonly serviceName?: string | null; readonly operation?: string | null; readonly status?: "ok" | "error" | null; readonly minDurationMs?: number | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>>; readonly aiText?: string | null }) => Effect.Effect<readonly TraceSummaryItem[], Error>
+		readonly listRecentTraces: (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number; readonly cursorStartedAtMs?: number; readonly cursorTraceId?: string }) => Effect.Effect<readonly TraceItem[], Error>
+		readonly listTraceSummaries: (serviceName: string | null, options?: { readonly lookbackMinutes?: number; readonly limit?: number; readonly cursorStartedAtMs?: number; readonly cursorTraceId?: string }) => Effect.Effect<readonly TraceSummaryItem[], Error>
+		readonly searchTraceSummaries: (input: { readonly serviceName?: string | null; readonly operation?: string | null; readonly status?: "ok" | "error" | null; readonly minDurationMs?: number | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>>; readonly aiText?: string | null; readonly cursorStartedAtMs?: number; readonly cursorTraceId?: string }) => Effect.Effect<readonly TraceSummaryItem[], Error>
 		readonly listFacets: (input: { readonly type: "traces" | "logs"; readonly field: string; readonly serviceName?: string | null; readonly key?: string | null; readonly lookbackMinutes?: number; readonly limit?: number }) => Effect.Effect<readonly { readonly value: string; readonly count: number }[], Error>
 		readonly searchTraces: (input: { readonly serviceName?: string | null; readonly operation?: string | null; readonly status?: "ok" | "error" | null; readonly minDurationMs?: number | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly TraceItem[], Error>
 		readonly traceStats: (input: { readonly groupBy: string; readonly agg: "count" | "avg_duration" | "p95_duration" | "error_rate"; readonly serviceName?: string | null; readonly operation?: string | null; readonly status?: "ok" | "error" | null; readonly minDurationMs?: number | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly { readonly group: string; readonly value: number; readonly count: number }[], Error>
@@ -16,7 +16,7 @@ export class TraceQueryService extends Context.Service<
 		readonly getSpan: (spanId: string) => Effect.Effect<SpanItem | null, Error>
 		readonly getAiCall: (spanId: string) => Effect.Effect<AiCallDetail | null, Error>
 		readonly listTraceSpans: (traceId: string) => Effect.Effect<readonly SpanItem[], Error>
-		readonly searchSpans: (input: { readonly serviceName?: string | null; readonly operation?: string | null; readonly parentOperation?: string | null; readonly status?: "ok" | "error" | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly SpanItem[], Error>
+		readonly searchSpans: (input: { readonly serviceName?: string | null; readonly traceId?: string | null; readonly operation?: string | null; readonly parentOperation?: string | null; readonly status?: "ok" | "error" | null; readonly lookbackMinutes?: number; readonly limit?: number; readonly attributeFilters?: Readonly<Record<string, string>>; readonly attributeContainsFilters?: Readonly<Record<string, string>> }) => Effect.Effect<readonly SpanItem[], Error>
 	}
 >()("motel/TraceQueryService") {}
 
@@ -31,7 +31,7 @@ export const TraceQueryServiceLive = Layer.effect(
 			return services
 		})()
 
-		const listRecentTraces = Effect.fn("motel/TraceQueryService.listRecentTraces")(function* (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number }) {
+		const listRecentTraces = Effect.fn("motel/TraceQueryService.listRecentTraces")(function* (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number; readonly cursorStartedAtMs?: number; readonly cursorTraceId?: string }) {
 			yield* Effect.annotateCurrentSpan({
 				"trace.service_name": serviceName,
 			})
@@ -40,7 +40,7 @@ export const TraceQueryServiceLive = Layer.effect(
 			return traces
 		})
 
-		const listTraceSummaries = Effect.fn("motel/TraceQueryService.listTraceSummaries")(function* (serviceName: string, options?: { readonly lookbackMinutes?: number; readonly limit?: number }) {
+		const listTraceSummaries = Effect.fn("motel/TraceQueryService.listTraceSummaries")(function* (serviceName: string | null, options?: { readonly lookbackMinutes?: number; readonly limit?: number; readonly cursorStartedAtMs?: number; readonly cursorTraceId?: string }) {
 			yield* Effect.annotateCurrentSpan({
 				"trace.service_name": serviceName,
 			})

package/src/startupBench.ts

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

package/src/ui/app/useTraceScreenData.ts

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

package/src/ui/atoms.ts

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

package/src/ui/persistence.ts

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

package/src/ui/theme.ts

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

package/src/ui/useKeyboardNav.ts

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