@kitlangton/motel 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitlangton/motel",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A local OpenTelemetry ingest + TUI viewer for development, backed by SQLite.",
   "type": "module",
   "license": "MIT",

package/src/services/TelemetryStore.ts

@@ -163,6 +163,15 @@ const parseSummaryRow = (row: TraceSummaryRow): TraceSummaryItem => ({
 	warnings: [],
 })
 
+// Skip attribute facet rows whose value blob is longer than this. Prevents
+// multi-MB text attrs (ai.prompt, ai.prompt.messages, etc.) from dominating
+// picker-open time — SQLite skips reading those pages from disk when the
+// length predicate is evaluated against the page header, taking queries over
+// a 2GB database from ~1.2s down to ~370ms. Keys whose values are ALL fat
+// simply don't appear in the picker, which is the desired behaviour: you'd
+// never want to filter traces by exact-match on a 1MB prompt blob anyway.
+const FACET_VALUE_MAX_LEN = 512
+
 const TRACE_SUMMARY_SELECT_SQL = `
 	SELECT
 		trace_id,
@@ -437,13 +446,30 @@ export const TelemetryStoreLive = Layer.effect(
 		mkdirSync(dirname(config.otel.databasePath), { recursive: true })
 		const db = yield* Effect.acquireRelease(
 			Effect.sync(() => new Database(config.otel.databasePath, { create: true })),
-			(db) => Effect.sync(() => db.close()),
+			(db) => Effect.sync(() => {
+				// `PRAGMA optimize` at close persists any stats SQLite gathered
+				// during the session, so the next process start gets an accurate
+				// query planner on the first query instead of a 3-second cold
+				// run. Cheap: it skips work unless stats have drifted.
+				try { db.exec(`PRAGMA optimize;`) } catch { /* nothing */ }
+				db.close()
+			}),
 		)
 		db.exec(`
 			PRAGMA journal_mode = WAL;
 			PRAGMA synchronous = NORMAL;
 			PRAGMA temp_store = MEMORY;
 			PRAGMA busy_timeout = 5000;
+			-- Bump cache above the 2MB default. 64MB fits most hot index pages
+			-- (trace_summaries, spans, span_attributes indexes) in RAM even on
+			-- multi-GB databases, cutting cold-read latency meaningfully on
+			-- picker / search queries that sweep the index.
+			PRAGMA cache_size = -65536;
+			-- Let SQLite memory-map the first 256MB of the file. This is a
+			-- cheap way to avoid read() syscalls on hot pages and lets the OS
+			-- page cache serve index lookups directly. Safe on macOS and Linux;
+			-- SQLite silently caps at actual file size for smaller DBs.
+			PRAGMA mmap_size = 268435456;
 
 			CREATE TABLE IF NOT EXISTS spans (
 				trace_id TEXT NOT NULL,
@@ -551,6 +577,24 @@ export const TelemetryStoreLive = Layer.effect(
 			// Existing databases may already have the column.
 		}
 
+		// Prime the query planner. `PRAGMA optimize` is SQLite's modern,
+		// lightweight stats refresh: it only re-ANALYZEs indexes whose row
+		// counts have drifted significantly since the last run, capped at
+		// `analysis_limit` iterations per index so it finishes in a
+		// bounded time even on large databases. Without this, queries like
+		// the attribute picker facet run with guessed row estimates and
+		// pay 3-4s on cold open instead of 400ms.
+		try {
+			db.exec(`PRAGMA analysis_limit = 1000; PRAGMA optimize;`)
+			// First-time databases won't have sqlite_stat1 until we run a
+			// real ANALYZE. Force it once if stats haven't been collected.
+			const hasStats = db.query(`SELECT 1 FROM sqlite_master WHERE name = 'sqlite_stat1' LIMIT 1`).get() !== null
+			if (!hasStats) db.exec(`ANALYZE;`)
+		} catch {
+			// ANALYZE / optimize failures are never fatal — queries still work,
+			// they just run with default row estimates.
+		}
+
 		const insertSpan = db.query(`
 			INSERT INTO spans (
 				trace_id, span_id, parent_span_id, service_name, scope_name, operation_name, kind,
@@ -687,6 +731,16 @@ export const TelemetryStoreLive = Layer.effect(
 		// Run cleanup every 60 seconds in the background, tied to the layer's scope
 		yield* Effect.forkScoped(Effect.repeat(cleanupExpired(), Schedule.spaced("60 seconds")))
 
+		// Periodically refresh query planner stats. `PRAGMA optimize` is a
+		// no-op when nothing has changed, so this is essentially free on idle
+		// servers and keeps facet/search planner estimates accurate as data
+		// grows. 15 minutes is slower than ingestion rates we care about but
+		// frequent enough that the attribute picker stays snappy.
+		const refreshPlannerStats = Effect.sync(() => {
+			try { db.exec(`PRAGMA optimize;`) } catch { /* ignore */ }
+		})
+		yield* Effect.forkScoped(Effect.repeat(refreshPlannerStats, Schedule.spaced("15 minutes")))
+
 		const ingestTraces = Effect.fn("motel/TelemetryStore.ingestTraces")(function* (payload: OtlpTraceExportRequest) {
 			return yield* Effect.sync(() => {
 				let insertedSpans = 0
@@ -1463,7 +1517,14 @@ export const TelemetryStoreLive = Layer.effect(
 						// 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]
+						//
+						// Performance note: we skip rows whose value blob is larger than
+						// 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.
+						const params: Array<string | number> = [FACET_VALUE_MAX_LEN, cutoff]
 						if (input.serviceName) params.push(input.serviceName)
 						params.push(limit)
 						const rows = db.query(`
@@ -1472,7 +1533,8 @@ export const TelemetryStoreLive = Layer.effect(
 							       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 >= ?
+							WHERE LENGTH(sa.value) < ?
+							  AND 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,
@@ -1485,14 +1547,18 @@ export const TelemetryStoreLive = Layer.effect(
 					}
 					if (input.field === "attribute_values") {
 						if (!input.key) return [] as FacetItem[]
-						const params: Array<string | number> = [input.key, cutoff]
+						// Skip multi-KB values here too — they blow up GROUP BY on big text.
+						// Matches the attribute_keys pre-filter so the picker stays responsive
+						// if someone hand-crafts a URL that targets a fat key.
+						const params: Array<string | number> = [input.key, FACET_VALUE_MAX_LEN, 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 >= ?
+							WHERE sa.key = ? AND LENGTH(sa.value) < ?
+							  AND s.start_time_ms >= ?
 							${input.serviceName ? "AND s.service_name = ?" : ""}
 							GROUP BY sa.value
 							ORDER BY count DESC, value ASC

package/src/ui/useKeyboardNav.ts

@@ -1,6 +1,6 @@
 import { useAtom } from "@effect/atom-react"
 import { useKeyboard, useRenderer } from "@opentui/react"
-import { useLayoutEffect, useRef } from "react"
+import { useEffect, useLayoutEffect, useRef } from "react"
 import type { TraceItem, TraceSummaryItem } from "../domain.ts"
 import { otelServerInstructions } from "../instructions.ts"
 import { copyToClipboard, traceUiUrl, webUiUrl } from "./format.ts"
@@ -34,6 +34,33 @@ import { cycleThemeName, themeLabel } from "./theme.ts"
 import { getVisibleSpans } from "./Waterfall.tsx"
 import { resolveCollapseStep } from "./waterfallNav.ts"
 
+/**
+ * Pull a printable string out of a key event. Handles two cases:
+ *
+ * 1. A plain printable key (1 char) — returns the char.
+ * 2. A multi-char sequence that arrived as one event (common when the
+ *    terminal has bracketed paste disabled but the user pasted quickly and
+ *    opentui's parser returned the whole buffer as one key). Returns the
+ *    sanitised sequence with control bytes stripped.
+ *
+ * Returns `null` for non-printable events (function keys, modifiers, etc.)
+ * so callers can skip them.
+ */
+const extractPrintable = (key: {
+	readonly name: string
+	readonly sequence?: string
+	readonly ctrl: boolean
+	readonly meta: boolean
+}): string | null => {
+	if (key.ctrl || key.meta) return null
+	if (key.name.length === 1) return key.name
+	const seq = key.sequence ?? ""
+	// Only accept sequences that are pure printable text. Any escape or
+	// control byte means this was a function / navigation key.
+	if (seq.length > 1 && !/[\x00-\x1f\x7f]/.test(seq)) return seq
+	return null
+}
+
 interface KeyboardNavParams {
 	selectedTrace: TraceItem | null
 	filteredTraces: readonly TraceSummaryItem[]
@@ -86,6 +113,44 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 	const spanNavActive = detailView !== "service-logs" && selectedSpanIndex !== null
 	const serviceLogNavActive = detailView === "service-logs"
 
+	// Bracketed paste: when the terminal has bracketed paste enabled, opentui
+	// surfaces the full pasted text as a single "paste" event on keyInput.
+	// Route it into whichever input is currently open. We also enable the
+	// mode ourselves (`\x1b[?2004h`) in case the host terminal didn't — it's
+	// a no-op on terminals that already had it on.
+	useEffect(() => {
+		const keyInput = (renderer as unknown as { keyInput?: { on: (event: string, handler: (e: unknown) => void) => void; off: (event: string, handler: (e: unknown) => void) => void } }).keyInput
+		if (!keyInput) return
+		try {
+			process.stdout.write("\x1b[?2004h")
+		} catch {
+			// Best effort — some test environments don't have a real TTY.
+		}
+		const handler = (event: unknown) => {
+			const bytes = (event as { bytes?: Uint8Array }).bytes
+			if (!bytes || bytes.length === 0) return
+			const text = Buffer.from(bytes).toString("utf8").replace(/[\x00-\x1f\x7f]+/g, (match) => match === "\n" ? " " : "")
+			if (!text) return
+			const s = stateRef.current
+			if (s.pickerMode !== "off") {
+				setPickerInput((current) => current + text)
+				setPickerIndex(0)
+				return
+			}
+			if (s.filterMode) {
+				setFilterText((current) => current + text)
+				return
+			}
+		}
+		keyInput.on("paste", handler)
+		return () => {
+			keyInput.off("paste", handler)
+			try {
+				process.stdout.write("\x1b[?2004l")
+			} catch {}
+		}
+	}, [renderer, setFilterText, setPickerInput, setPickerIndex])
+
 	const stateRef = useRef({ traceState, serviceLogState, selectedServiceLogIndex, selectedTheme, selectedTraceIndex, selectedSpanIndex, selectedTraceService, detailView, showHelp, collapsedSpanIds, spanNavActive, serviceLogNavActive, filterMode, filterText, autoRefresh, traceSort, pickerMode, pickerInput, pickerIndex, attrFacets, activeAttrKey, activeAttrValue, ...params })
 	// Keep the keyboard handler's state mirror in sync before the next paint.
 	// OpenTUI's own effect-event helper uses useLayoutEffect for this same reason:
@@ -285,6 +350,17 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				setPickerIndex(0)
 				return
 			}
+			// Ctrl-C: clear input, or close the picker if already empty.
+			if (key.ctrl && key.name === "c") {
+				if (s.pickerInput.length > 0) {
+					setPickerInput("")
+					setPickerIndex(0)
+				} else {
+					setPickerMode("off")
+					setPickerIndex(0)
+				}
+				return
+			}
 			if (key.name === "up" || (key.ctrl && key.name === "p")) { move(-1); return }
 			if (key.name === "down" || (key.ctrl && key.name === "n")) { move(1); return }
 			if (key.name === "pageup") { move(-10); return }
@@ -323,8 +399,14 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				}
 				return
 			}
-			if (key.name.length === 1 && !key.ctrl && !key.meta) {
-				setPickerInput(s.pickerInput + key.name)
+			// Prefer key.sequence over key.name so multi-char paste events that
+			// slip through as a single raw sequence still get inserted in full.
+			const printable = extractPrintable(key)
+			if (printable) {
+				// Functional setState — multiple key events in the same tick would
+				// otherwise all read a stale stateRef.current.pickerInput and
+				// clobber each other, losing all but the last char of a paste.
+				setPickerInput((current) => current + printable)
 				setPickerIndex(0)
 				return
 			}
@@ -338,17 +420,28 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				setFilterText("")
 				return
 			}
+			// Ctrl-C: clear the input, or exit filter mode if already empty.
+			if (key.ctrl && key.name === "c") {
+				if (s.filterText.length > 0) {
+					setFilterText("")
+				} else {
+					setFilterMode(false)
+				}
+				return
+			}
 			if (key.name === "return" || key.name === "enter") {
 				setFilterMode(false)
 				return
 			}
 			if (key.name === "backspace") {
-				setFilterText(s.filterText.slice(0, -1))
+				setFilterText((current) => current.slice(0, -1))
 				return
 			}
-			// Single printable character
-			if (key.name.length === 1 && !key.ctrl && !key.meta) {
-				setFilterText(s.filterText + key.name)
+			const printable = extractPrintable(key)
+			if (printable) {
+				// Functional setState so rapid keystrokes / pastes don't clobber
+				// each other via a stale stateRef.current.filterText closure.
+				setFilterText((current) => current + printable)
 				return
 			}
 			return