@kitlangton/motel 0.1.1 → 0.1.2

package/AGENTS.md

@@ -2,8 +2,14 @@
 
 ## Commands
 - Install deps: `bun install`
-- Run the TUI: `bun run dev` or `bun run start`
-- Run the local server only: `bun run server`
+- Run the TUI: `bun run dev` or `bun run start` (auto-ensures a managed
+  OTLP daemon is running in the background so traces ingest while the TUI
+  is up)
+- Start the background daemon only: `bun run daemon` (same as `motel start`)
+- Stop the managed daemon: `bun run stop`
+- Daemon status JSON: `bun run status`
+- Restart daemon + relaunch TUI: `bun run restart`
+- Run the local server in the foreground (no daemon, no TUI): `bun run server`
 - Run tests: `bun run test`
 - Query services via CLI: `bun run cli services`
 - Query traces via CLI: `bun run cli traces <service> [limit]`
@@ -36,6 +42,7 @@
 - `/api/ai/calls` searches AI SDK calls (streamText, generateText, etc.) with first-class filters for `model`, `provider`, `sessionId`, `functionId`, `operation`, `status`, `text` (cross-field search), and returns compact summaries with previews and token usage.
 - `/api/ai/calls/<span-id>` returns the full detail of a single AI call including complete prompt messages, response text, tool calls, timing, and correlated logs.
 - `/api/ai/stats` aggregates AI call statistics by `provider`, `model`, `functionId`, `sessionId`, or `status` with aggregations: `count`, `avg_duration`, `p95_duration`, `total_input_tokens`, `total_output_tokens`.
+- `/api/facets?type=traces&field=attribute_keys&service=<svc>` lists span-attribute keys for a service, ranked by discriminating power (keys with many distinct values first). Pair with `field=attribute_values&key=<key>` to list values for a specific key. Used by the TUI `f` attribute filter.
 - `/api/docs` lists available documentation; `/api/docs/debug` and `/api/docs/effect` return the full skill content.
 
 ## Architecture
@@ -48,11 +55,16 @@
   (pane widths, body lines, viewport rows, drill-in level).
 - `src/ui/app/TraceWorkspace.tsx` renders the drill-in state machine:
   L0 (trace list), L1 (waterfall), L2 (span detail), plus the service
-  logs side mode.
-- `src/ui/app/TraceListPane.tsx` wraps `TraceList` in a scrollbox with
-  the filter bar and list header.
-- `src/ui/TraceList.tsx` renders trace rows (trace id, duration, span
-  count, relative age).
+  logs side mode. When drilled in the list is hidden entirely and the
+  detail pane(s) expand to fill.
+- `src/ui/app/TraceListPane.tsx` hosts the trace list: header + optional
+  filter bar + virtual-windowed body (no opentui scrollbox — that had a
+  race with Yoga layout timing).
+- `src/ui/TraceList.tsx` exports `TraceListHeader` (the `TRACES 100 · ...`
+  strip) and `TraceListBody` (virtual-windowed rows with mouse-wheel
+  scrolling). The body owns its own scrollOffset state, preserves the
+  selected row's visual position across auto-refresh shifts, and snaps
+  the window to follow selection that moves off-screen.
 - `src/ui/Waterfall.tsx` renders the waterfall timeline with a
   virtualised scroll viewport; `src/ui/waterfallNav.ts` is the pure
   collapse/expand/walk resolver (unit-tested).
@@ -116,7 +128,7 @@
 - `MOTEL_OTEL_TRACE_LIMIT`: defaults to `100`
 - `MOTEL_OTEL_LOG_LIMIT`: defaults to `80`
 - `MOTEL_OTEL_RETENTION_HOURS`: defaults to `168` (7d)
-- `MOTEL_OTEL_MAX_DB_SIZE_MB`: defaults to `256` (size-based retention cap)
+- `MOTEL_OTEL_MAX_DB_SIZE_MB`: defaults to `1024` (size-based retention cap)
 
 ## TUI Keys
 - `?`: toggle shortcut help
@@ -133,7 +145,9 @@
 - `tab`: toggle service logs view
 - `[` / `]`: switch services
 - `s`: cycle sort mode (recent → slowest → errors)
+- `t`: cycle theme (motel-default → tokyo-night → catppuccin)
 - `/`: enter filter mode (type to match on root operation name; `:error` restricts to failing traces)
+- `f`: open attribute filter picker (browse span-attribute keys → values for the current service; `backspace` walks back to keys; `esc` in the trace list clears the active filter)
 - `a`: pause or resume auto-refresh
 - `r`: refresh now
 - `c`: copy setup instructions for another Effect app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitlangton/motel",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A local OpenTelemetry ingest + TUI viewer for development, backed by SQLite.",
   "type": "module",
   "license": "MIT",
@@ -50,6 +50,7 @@
     "daemon": "bun run src/motel.ts daemon",
     "status": "bun run src/motel.ts status",
     "stop": "bun run src/motel.ts stop",
+    "restart": "bun run src/motel.ts restart",
     "server": "bun run src/motel.ts server",
     "mcp": "bun run src/mcp.ts",
     "test": "bun test",

package/src/App.tsx

@@ -1,16 +1,26 @@
-import { RGBA, TextAttributes, type ScrollBoxRenderable } from "@opentui/core"
+import { RGBA, TextAttributes } from "@opentui/core"
 import { useAtom } from "@effect/atom-react"
 import { useTerminalDimensions } from "@opentui/react"
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
-import { formatTimestamp, traceRowId } from "./ui/format.ts"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { formatTimestamp } from "./ui/format.ts"
 import { Divider, FooterHints, HelpModal, PlainLine, SplitDivider, TextLine } from "./ui/primitives.tsx"
 import { useAppLayout } from "./ui/app/useAppLayout.ts"
 import { useTraceScreenData } from "./ui/app/useTraceScreenData.ts"
 import { TraceWorkspace } from "./ui/app/TraceWorkspace.tsx"
-import { noticeAtom, persistSelectedTheme, selectedThemeAtom } from "./ui/state.ts"
+import {
+	attrPickerIndexAtom,
+	attrPickerInputAtom,
+	attrPickerModeAtom,
+	attrFacetStateAtom,
+	noticeAtom,
+	persistSelectedTheme,
+	selectedThemeAtom,
+} from "./ui/state.ts"
 import { applyTheme, colors, SEPARATOR, themeLabel } from "./ui/theme.ts"
 import { getVisibleSpans } from "./ui/Waterfall.tsx"
 import { useKeyboardNav } from "./ui/useKeyboardNav.ts"
+import { AttrFilterModal } from "./ui/AttrFilterModal.tsx"
+import { useAttrFilterPicker } from "./ui/useAttrFilterPicker.ts"
 
 export const App = () => {
 	const { width, height } = useTerminalDimensions()
@@ -36,11 +46,18 @@ export const App = () => {
 		autoRefresh,
 		filterMode,
 		filterText,
+		activeAttrKey,
+		activeAttrValue,
 		traceSort,
 		selectedTraceSummary,
 		selectedTrace,
 		filteredTraces,
 	} = useTraceScreenData()
+	const [pickerMode] = useAtom(attrPickerModeAtom)
+	const [pickerInput] = useAtom(attrPickerInputAtom)
+	const [pickerIndex] = useAtom(attrPickerIndexAtom)
+	const [attrFacets] = useAtom(attrFacetStateAtom)
+	useAttrFilterPicker(activeAttrKey)
 
 	const layout = useAppLayout({ width, height, notice, detailView, selectedSpanIndex })
 	const {
@@ -61,7 +78,6 @@ export const App = () => {
 	} = layout
 
 	const noticeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-	const traceListScrollRef = useRef<ScrollBoxRenderable | null>(null)
 
 	const flashNotice = (message: string) => {
 		if (noticeTimeoutRef.current !== null) {
@@ -83,27 +99,6 @@ export const App = () => {
 		persistSelectedTheme(selectedTheme)
 	}, [selectedTheme])
 
-	useLayoutEffect(() => {
-		const box = traceListScrollRef.current
-		const traceId = selectedTraceSummary?.traceId
-		if (!box || !traceId) return
-		const indexInList = filteredTraces.findIndex((trace) => trace.traceId === traceId)
-		if (indexInList < 0) return
-		const currentTop = box.scrollTop
-		const viewportRows = Math.max(1, traceViewportRows)
-		let nextTop = currentTop
-		if (indexInList < currentTop) {
-			nextTop = indexInList
-		} else if (indexInList >= currentTop + viewportRows) {
-			nextTop = indexInList - viewportRows + 1
-		}
-		const maxTop = Math.max(0, filteredTraces.length - viewportRows)
-		nextTop = Math.max(0, Math.min(nextTop, maxTop))
-		if (nextTop !== currentTop) {
-			box.scrollTop = nextTop
-		}
-	}, [filteredTraces, selectedTraceIndex, selectedTraceSummary?.traceId, traceSort, traceViewportRows])
-
 	const { spanNavActive } = useKeyboardNav({
 		selectedTrace,
 		filteredTraces,
@@ -117,12 +112,15 @@ export const App = () => {
 
 	const headerServiceLabel = selectedTraceService ?? "none"
 	const autoLabel = autoRefresh ? "● live" : "○ paused"
+	const attrFilterLabel = activeAttrKey && activeAttrValue
+		? `  [${activeAttrKey}=${activeAttrValue.length > 20 ? `${activeAttrValue.slice(0, 19)}…` : activeAttrValue}]`
+		: ""
 	const headerRight = traceState.fetchedAt
 		? `${autoLabel}  ${formatTimestamp(traceState.fetchedAt)}`
 		: traceState.status === "loading"
 			? "loading traces..."
 			: ""
-	const headerLeftLen = "MOTEL".length + SEPARATOR.length + headerServiceLabel.length
+	const headerLeftLen = "MOTEL".length + SEPARATOR.length + headerServiceLabel.length + attrFilterLabel.length
 	const headerGap = Math.max(2, headerFooterWidth - headerLeftLen - headerRight.length)
 	const visibleFooterNotice = footerNotice
 
@@ -168,6 +166,7 @@ export const App = () => {
 					<span fg={colors.muted} attributes={TextAttributes.BOLD}>MOTEL</span>
 					<span fg={colors.separator}>{SEPARATOR}</span>
 					<span fg={colors.muted}>{headerServiceLabel}</span>
+					{attrFilterLabel ? <span fg={colors.accent} attributes={TextAttributes.BOLD}>{attrFilterLabel}</span> : null}
 					<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
 					<span fg={colors.muted} attributes={TextAttributes.BOLD}>{headerRight}</span>
 				</TextLine>
@@ -181,7 +180,6 @@ export const App = () => {
 				filterMode={filterMode}
 				filterText={filterText}
 				traceListProps={traceListProps}
-				traceListScrollRef={traceListScrollRef}
 				selectedTraceService={selectedTraceService}
 				serviceLogState={serviceLogState}
 				selectedServiceLogIndex={selectedServiceLogIndex}
@@ -212,6 +210,18 @@ export const App = () => {
 				</>
 			) : null}
 			{showHelp ? <HelpModal width={width ?? 100} height={height ?? 24} autoRefresh={autoRefresh} themeLabel={themeLabel(selectedTheme)} onClose={() => setShowHelp(false)} /> : null}
+			{pickerMode !== "off" ? (
+				<AttrFilterModal
+					width={width ?? 100}
+					height={height ?? 24}
+					mode={pickerMode}
+					input={pickerInput}
+					selectedIndex={pickerIndex}
+					selectedKey={activeAttrKey}
+					state={attrFacets}
+					onClose={() => { /* handled via keyboard */ }}
+				/>
+			) : null}
 		</box>
 	)
 }

package/src/config.ts

@@ -34,6 +34,6 @@ export const config = {
 		traceFetchLimit: parsePositiveInt(process.env.MOTEL_OTEL_TRACE_LIMIT, 100),
 		logFetchLimit: parsePositiveInt(process.env.MOTEL_OTEL_LOG_LIMIT, 80),
 		retentionHours: parsePositiveInt(process.env.MOTEL_OTEL_RETENTION_HOURS, 168),
-		maxDbSizeMb: parsePositiveInt(process.env.MOTEL_OTEL_MAX_DB_SIZE_MB, 256),
+		maxDbSizeMb: parsePositiveInt(process.env.MOTEL_OTEL_MAX_DB_SIZE_MB, 1024),
 	},
 } as const

package/src/httpApi.ts

@@ -310,7 +310,10 @@ export const MotelHttpApi = HttpApi.make("MotelTelemetry")
 							Schema.annotateKey({ description: "Data source to facet: 'traces' facets span columns, 'logs' facets log columns" }),
 						),
 						field: Schema.String.pipe(
-							Schema.annotateKey({ description: "Column to facet. Traces: service, operation, status. Logs: service, severity, scope" }),
+							Schema.annotateKey({ description: "Column to facet. Traces: service, operation, status, attribute_keys, attribute_values. Logs: service, severity, scope. For attribute_values, also pass key=<attribute-name>." }),
+						),
+						key: Schema.optionalKey(Schema.String).pipe(
+							Schema.annotateKey({ description: "Attribute key to get values for (required when field=attribute_values)." }),
 						),
 						service: ServiceParam,
 						lookback: LookbackParam,
@@ -320,7 +323,7 @@ export const MotelHttpApi = HttpApi.make("MotelTelemetry")
 					error: ErrorResponse,
 				})
 					.annotate(OpenApi.Summary, "Get facet value counts")
-					.annotate(OpenApi.Description, "Returns distinct values and their counts for a given field, useful for discovering what data exists before querying. For example: ?type=logs&field=severity returns the distribution of log levels."),
+					.annotate(OpenApi.Description, "Returns distinct values and their counts for a given field, useful for discovering what data exists before querying. Examples: ?type=logs&field=severity returns log level distribution; ?type=traces&field=attribute_keys&service=opencode lists top span attribute keys; ?type=traces&field=attribute_values&key=ai.model.id lists values seen for that key."),
 
 				// AI Call endpoints
 				HttpApiEndpoint.get("aiCalls", "/api/ai/calls", {

package/src/localServer.ts

@@ -504,6 +504,7 @@ const TelemetryGroupLive = HttpApiBuilder.group(
 							type,
 							field,
 							serviceName: url.searchParams.get("service"),
+							key: url.searchParams.get("key"),
 							lookbackMinutes: parseLookbackMinutes(url.searchParams.get("lookback"), config.otel.traceLookbackMinutes),
 							limit: parseLimit(url.searchParams.get("limit"), 20),
 						}),

package/src/motel.ts

@@ -36,6 +36,17 @@ case "stop": {
 	break
 }
 
+case "restart": {
+	// Stop any running managed daemon, then start a fresh one + launch the
+	// TUI. Handy during local development when you've rebuilt the server
+	// 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
+}
+
 case "server": {
 	await run(applyManagedDaemonEnv)
 	await import("./server.js")
@@ -56,6 +67,7 @@ case "-h": {
 	motel daemon
 	motel status
 	motel stop
+	motel restart
 	motel server
 	motel mcp
 	motel services

package/src/services/TelemetryStore.ts

@@ -94,6 +94,7 @@ interface FacetSearch {
 	readonly type: "traces" | "logs"
 	readonly field: string
 	readonly serviceName?: string | null
+	readonly key?: string | null
 	readonly lookbackMinutes?: number
 	readonly limit?: number
 }
@@ -612,41 +613,73 @@ export const TelemetryStoreLive = Layer.effect(
 			const now = yield* Clock.currentTimeMillis
 
 			yield* Effect.sync(() => {
-				let deletedData = false
-				// Time-based retention
 				const cutoff = now - config.otel.retentionHours * 60 * 60 * 1000
-				const deletedSpans = db.query(`DELETE FROM spans WHERE start_time_ms < ?`).run(cutoff) as { changes?: number }
-				const deletedLogs = db.query(`DELETE FROM logs WHERE timestamp_ms < ?`).run(cutoff) as { changes?: number }
-				deletedData = (deletedSpans.changes ?? 0) > 0 || (deletedLogs.changes ?? 0) > 0
 
-				// Size-based retention: if actual data exceeds max, delete oldest 20% of rows.
-				// Use (page_count - freelist_count) to ignore freed-but-not-vacuumed pages;
-				// otherwise a large freelist triggers a deletion death spiral.
+				// Evict at TRACE granularity so we never leave a trace half-gutted
+				// (previous logic deleted oldest 20% of spans, which happily sliced
+				// across traces and corrupted the summary rebuild). Running traces
+				// are protected — only `active_span_count = 0` summaries are in
+				// scope for eviction.
+				const toEvict = new Set<string>()
+
+				// Time-based: completed traces whose last span ended before cutoff.
+				const timeExpired = db.query(
+					`SELECT trace_id FROM trace_summaries WHERE active_span_count = 0 AND ended_at_ms > 0 AND ended_at_ms < ?`,
+				).all(cutoff) as readonly { trace_id: string }[]
+				for (const row of timeExpired) toEvict.add(row.trace_id)
+
+				// Size-based: if actual data exceeds cap, drop oldest 20% of the
+				// remaining completed traces. `(page_count - freelist_count)`
+				// ignores freed-but-not-vacuumed pages so a large freelist doesn't
+				// trigger a deletion death spiral.
 				const pageCount = (db.query(`PRAGMA page_count`).get() as { page_count: number }).page_count
 				const freePages = (db.query(`PRAGMA freelist_count`).get() as { freelist_count: number }).freelist_count
 				const pageSize = (db.query(`PRAGMA page_size`).get() as { page_size: number }).page_size
 				const dbSize = (pageCount - freePages) * pageSize
 				if (dbSize > maxDbSizeBytes) {
-					const spanCount = (db.query(`SELECT COUNT(*) AS c FROM spans`).get() as { c: number }).c
-					const logCount = (db.query(`SELECT COUNT(*) AS c FROM logs`).get() as { c: number }).c
-					const spanCutCount = Math.max(1, Math.floor(spanCount * 0.2))
-					const logCutCount = Math.max(1, Math.floor(logCount * 0.2))
-					db.query(`DELETE FROM spans WHERE rowid IN (SELECT rowid FROM spans ORDER BY start_time_ms ASC LIMIT ?)`).run(spanCutCount)
-					db.query(`DELETE FROM logs WHERE rowid IN (SELECT rowid FROM logs ORDER BY timestamp_ms ASC LIMIT ?)`).run(logCutCount)
-					deletedData = true
+					const completedCount = (db.query(
+						`SELECT COUNT(*) AS c FROM trace_summaries WHERE active_span_count = 0`,
+					).get() as { c: number }).c
+					const traceCutCount = Math.max(1, Math.floor(completedCount * 0.2))
+					const oldest = db.query(
+						`SELECT trace_id FROM trace_summaries WHERE active_span_count = 0 ORDER BY started_at_ms ASC LIMIT ?`,
+					).all(traceCutCount) as readonly { trace_id: string }[]
+					// Set.add dedupes overlap with the time-expired batch above.
+					for (const row of oldest) toEvict.add(row.trace_id)
 				}
 
-				if (deletedData) {
-					db.query(`DELETE FROM span_attributes WHERE NOT EXISTS (SELECT 1 FROM spans WHERE spans.trace_id = span_attributes.trace_id AND spans.span_id = span_attributes.span_id)`).run()
-					db.query(`DELETE FROM log_attributes WHERE NOT EXISTS (SELECT 1 FROM logs WHERE logs.id = log_attributes.log_id)`).run()
+				// Always prune orphan logs (no trace_id) by timestamp — they're
+				// not covered by trace eviction.
+				db.query(`DELETE FROM logs WHERE trace_id IS NULL AND timestamp_ms < ?`).run(cutoff)
+
+				if (toEvict.size === 0) return
+
+				// Batch the trace-id list so the IN placeholders stay under
+				// SQLite's default limit (~999). Each batch wipes every row
+				// reachable from those trace_ids across the cascade tables.
+				const traceIds = Array.from(toEvict)
+				const BATCH_SIZE = 500
+				for (let offset = 0; offset < traceIds.length; offset += BATCH_SIZE) {
+					const batch = traceIds.slice(offset, offset + BATCH_SIZE)
+					const placeholders = batch.map(() => "?").join(",")
+					db.query(`DELETE FROM span_attributes WHERE trace_id IN (${placeholders})`).run(...batch)
 					try {
-						db.query(`DELETE FROM span_operation_fts WHERE NOT EXISTS (SELECT 1 FROM spans WHERE spans.trace_id = span_operation_fts.trace_id AND spans.span_id = span_operation_fts.span_id)`).run()
-						db.query(`DELETE FROM log_body_fts WHERE NOT EXISTS (SELECT 1 FROM logs WHERE logs.id = CAST(log_body_fts.log_id AS INTEGER))`).run()
+						db.query(`DELETE FROM span_operation_fts WHERE trace_id IN (${placeholders})`).run(...batch)
 					} catch {
-						// FTS tables may not exist.
+						// FTS table may not exist on old DBs.
 					}
-					db.query(`DELETE FROM trace_summaries`).run()
-					rebuildTraceSummaries.run()
+					db.query(`DELETE FROM spans WHERE trace_id IN (${placeholders})`).run(...batch)
+					db.query(`DELETE FROM logs WHERE trace_id IN (${placeholders})`).run(...batch)
+					db.query(`DELETE FROM trace_summaries WHERE trace_id IN (${placeholders})`).run(...batch)
+				}
+
+				// Log-side orphans (log_attributes + FTS) are keyed by log.id,
+				// so prune what no longer has a parent log row.
+				db.query(`DELETE FROM log_attributes WHERE NOT EXISTS (SELECT 1 FROM logs WHERE logs.id = log_attributes.log_id)`).run()
+				try {
+					db.query(`DELETE FROM log_body_fts WHERE NOT EXISTS (SELECT 1 FROM logs WHERE logs.id = CAST(log_body_fts.log_id AS INTEGER))`).run()
+				} catch {
+					// FTS table may not exist on old DBs.
 				}
 			})
 		})
@@ -1424,6 +1457,49 @@ export const TelemetryStoreLive = Layer.effect(
 						`).all(...(input.serviceName ? [cutoff, input.serviceName, limit] : [cutoff, limit])) as Array<{ value: string; count: number }>
 						return rows
 					}
+					if (input.field === "attribute_keys") {
+						// Count distinct traces each attribute key appears on, optionally
+						// scoped to a service. Keys with many distinct values (e.g. sessionId,
+						// user id, model) rank higher than keys that are constant across every
+						// trace (service.name, telemetry.sdk.*) — the latter can't discriminate
+						// between traces so they're useless as filters.
+						const params: Array<string | number> = [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 s.start_time_ms >= ?
+							${input.serviceName ? "AND s.service_name = ?" : ""}
+							GROUP BY sa.key
+							ORDER BY (CASE WHEN distinct_values = 1 THEN 1 ELSE 0 END) ASC,
+							         distinct_values DESC,
+							         count DESC,
+							         value ASC
+							LIMIT ?
+						`).all(...params) as Array<{ value: string; count: number; distinct_values: number }>
+						return rows.map((row) => ({ value: row.value, count: row.count }))
+					}
+					if (input.field === "attribute_values") {
+						if (!input.key) return [] as FacetItem[]
+						const params: Array<string | number> = [input.key, cutoff]
+						if (input.serviceName) params.push(input.serviceName)
+						params.push(limit)
+						const rows = db.query(`
+							SELECT sa.value AS value, COUNT(DISTINCT sa.trace_id) AS count
+							FROM span_attributes sa
+							JOIN spans s ON s.trace_id = sa.trace_id AND s.span_id = sa.span_id
+							WHERE sa.key = ? AND s.start_time_ms >= ?
+							${input.serviceName ? "AND s.service_name = ?" : ""}
+							GROUP BY sa.value
+							ORDER BY count DESC, value ASC
+							LIMIT ?
+						`).all(...params) as Array<{ value: string; count: number }>
+						return rows
+					}
 				}
 
 				return [] as FacetItem[]

package/src/services/TraceQueryService.ts

@@ -8,6 +8,8 @@ export class TraceQueryService extends Context.Service<
 		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>> }) => 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>
 		readonly getTrace: (traceId: string) => Effect.Effect<TraceItem | null, Error>
@@ -60,6 +62,8 @@ export const TraceQueryServiceLive = Layer.effect(
 			listServices,
 			listRecentTraces,
 			listTraceSummaries,
+			searchTraceSummaries: store.searchTraceSummaries,
+			listFacets: store.listFacets,
 			searchTraces: store.searchTraces,
 			traceStats: store.traceStats,
 			getTrace,

package/src/ui/AttrFilterModal.tsx

@@ -0,0 +1,120 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { BlankRow, TextLine } from "./primitives.tsx"
+import { colors } from "./theme.ts"
+import { fitCell, truncateText } from "./format.ts"
+import type { AttrFacetState, AttrPickerMode } from "./state.ts"
+
+export interface AttrFilterModalProps {
+	readonly width: number
+	readonly height: number
+	readonly mode: Exclude<AttrPickerMode, "off">
+	readonly input: string
+	readonly selectedIndex: number
+	readonly selectedKey: string | null
+	readonly state: AttrFacetState
+	readonly onClose: () => void
+}
+
+// Filter + rank facet rows by the user's current input so typing is
+// responsive even on large key sets. Values list skips this — attribute
+// values are usually opaque ids that users paste in whole.
+export const filterFacets = (
+	rows: readonly { readonly value: string; readonly count: number }[],
+	input: string,
+): readonly { readonly value: string; readonly count: number }[] => {
+	const needle = input.trim().toLowerCase()
+	if (!needle) return rows
+	return rows.filter((row) => row.value.toLowerCase().includes(needle))
+}
+
+export const AttrFilterModal = ({
+	width,
+	height,
+	mode,
+	input,
+	selectedIndex,
+	selectedKey,
+	state,
+	onClose,
+}: AttrFilterModalProps) => {
+	const panelWidth = Math.min(92, Math.max(60, width - 10))
+	const left = Math.max(2, Math.floor((width - panelWidth) / 2))
+	const top = Math.max(1, Math.floor(height / 6))
+	const innerWidth = panelWidth - 4
+	const rows = filterFacets(state.data, input)
+	const clampedIndex = rows.length === 0 ? 0 : Math.max(0, Math.min(selectedIndex, rows.length - 1))
+	const visibleRowCount = Math.max(5, Math.min(18, height - top - 8))
+	const windowStart = Math.max(0, clampedIndex - Math.floor(visibleRowCount / 2))
+	const windowEnd = Math.min(rows.length, windowStart + visibleRowCount)
+	const windowed = rows.slice(windowStart, windowEnd)
+
+	const title = mode === "keys"
+		? "Filter traces by attribute key"
+		: `Filter · ${truncateText(selectedKey ?? "", innerWidth - 14)}`
+
+	const hint = mode === "keys"
+		? "type to narrow · ↑↓ move · enter select · esc cancel"
+		: "type to narrow · ↑↓ move · enter apply · backspace keys · esc cancel"
+
+	const countWidth = 7
+	const valueWidth = Math.max(10, innerWidth - countWidth - 1)
+
+	const renderRow = (row: { readonly value: string; readonly count: number }, isSelected: boolean) => {
+		const label = fitCell(row.value, valueWidth)
+		const count = String(row.count).padStart(countWidth - 1) + " "
+		if (isSelected) {
+			return (
+				<TextLine fg={colors.text} bg={colors.selectedBg}>
+					<span fg={colors.accent} attributes={TextAttributes.BOLD}>{label}</span>
+					<span fg={colors.muted}>{" "}</span>
+					<span fg={colors.muted}>{count}</span>
+				</TextLine>
+			)
+		}
+		return (
+			<TextLine>
+				<span fg={colors.text}>{label}</span>
+				<span fg={colors.muted}>{" "}</span>
+				<span fg={colors.count}>{count}</span>
+			</TextLine>
+		)
+	}
+
+	return (
+		<box position="absolute" zIndex={3000} left={0} top={0} width={width} height={height} backgroundColor={RGBA.fromInts(0, 0, 0, 110)} onMouseUp={onClose}>
+			<box position="absolute" left={left} top={top} width={panelWidth} flexDirection="column" backgroundColor={RGBA.fromInts(20, 20, 28, 255)}>
+				<box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} flexDirection="column">
+					<TextLine>
+						<span fg={colors.count} attributes={TextAttributes.BOLD}>{truncateText(title, innerWidth)}</span>
+					</TextLine>
+					<TextLine>
+						<span fg={colors.muted}>{truncateText(hint, innerWidth)}</span>
+					</TextLine>
+					<BlankRow />
+					<TextLine fg={colors.accent}>
+						<span fg={colors.muted}>{"\u203a "}</span>
+						<span fg={colors.text}>{truncateText(input, Math.max(1, innerWidth - 4))}</span>
+						<span fg={colors.accent}>{"\u2588"}</span>
+					</TextLine>
+					<BlankRow />
+					{state.status === "loading" && rows.length === 0 ? (
+						<TextLine><span fg={colors.muted}>loading…</span></TextLine>
+					) : state.error ? (
+						<TextLine><span fg={colors.error}>{truncateText(state.error, innerWidth)}</span></TextLine>
+					) : rows.length === 0 ? (
+						<TextLine><span fg={colors.muted}>no matches</span></TextLine>
+					) : (
+						windowed.map((row, i) => (
+							<box key={row.value} height={1}>
+								{renderRow(row, windowStart + i === clampedIndex)}
+							</box>
+						))
+					)}
+					{rows.length > windowEnd ? (
+						<TextLine><span fg={colors.muted}>{`+${rows.length - windowEnd} more…`}</span></TextLine>
+					) : null}
+				</box>
+			</box>
+		</box>
+	)
+}

package/src/ui/SpanDetailPane.tsx

@@ -30,8 +30,7 @@ export const SpanDetailPane = ({
 	paneWidth: number
 	focused?: boolean
 }) => {
-	const focusIndicator = focused ? "\u25b8 " : ""
-	const headerTitle = `${focusIndicator}SPAN`
+	const headerTitle = "SPAN"
 	const headerRight = span
 		? `${span.status} \u00b7 ${formatDuration(span.durationMs)}${logs.length > 0 ? ` \u00b7 ${logs.length} lg` : ""}`
 		: "no span selected"