@kitlangton/motel 0.1.1 → 0.1.3

package/src/ui/state.ts

@@ -106,6 +106,32 @@ export const autoRefreshAtom = Atom.make(false).pipe(Atom.keepAlive)
 export const filterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
 export const filterTextAtom = Atom.make("").pipe(Atom.keepAlive)
 
+// Attribute filter (F key): pick a span-attribute key + exact value to restrict the trace list.
+export type AttrPickerMode = "off" | "keys" | "values"
+export const attrPickerModeAtom = Atom.make<AttrPickerMode>("off").pipe(Atom.keepAlive)
+export const attrPickerInputAtom = Atom.make("").pipe(Atom.keepAlive)
+export const attrPickerIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+
+export interface AttrFacetState {
+	readonly status: LoadStatus
+	readonly key: string | null // null when loading keys; set when loading values
+	readonly data: readonly { readonly value: string; readonly count: number }[]
+	readonly error: string | null
+}
+
+export const initialAttrFacetState: AttrFacetState = {
+	status: "ready",
+	key: null,
+	data: [],
+	error: null,
+}
+
+export const attrFacetStateAtom = Atom.make(initialAttrFacetState).pipe(Atom.keepAlive)
+
+// Applied filter (drives trace list query)
+export const activeAttrKeyAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+export const activeAttrValueAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+
 const lastThemePath = `${dirname(config.otel.databasePath)}/last-theme.txt`
 const readLastTheme = (): ThemeName => {
 	try {
@@ -132,6 +158,12 @@ export const collapsedSpanIdsAtom = Atom.make(new Set<string>() as ReadonlySet<s
 
 export const loadTraceServices = () => queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listServices))
 export const loadRecentTraceSummaries = (serviceName: string) => queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listTraceSummaries(serviceName)))
+export const loadFilteredTraceSummaries = (serviceName: string, attributeFilters: Readonly<Record<string, string>>) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.searchTraceSummaries({ serviceName, attributeFilters, limit: config.otel.traceFetchLimit })))
+export const loadTraceAttributeKeys = (serviceName: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listFacets({ type: "traces", field: "attribute_keys", serviceName, limit: 200 })))
+export const loadTraceAttributeValues = (serviceName: string, key: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.listFacets({ type: "traces", field: "attribute_values", serviceName, key, limit: 200 })))
 export const loadTraceDetail = (traceId: string) => queryRuntime.runPromise(Effect.flatMap(TraceQueryService.asEffect(), (service) => service.getTrace(traceId)))
 export const loadTraceLogs = (traceId: string) => queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listTraceLogs(traceId)))
 export const loadServiceLogs = (serviceName: string) => queryRuntime.runPromise(Effect.flatMap(LogQueryService.asEffect(), (service) => service.listRecentLogs(serviceName)))

package/src/ui/theme.ts

@@ -32,32 +32,37 @@ export interface ThemeDefinition {
 	readonly waterfall: ThemeWaterfallColors
 }
 
+// motel-default palette derived in OKLCH. All "surface" tokens share hue
+// 282 (twilight purple) at varying lightness so depth is communicated by
+// lightness alone (footer < screen < selected < bar track). The amber
+// accent (hue 73) sits almost complementary to the surfaces, giving the
+// motel-sign neon maximum contrast without color clash.
 const motelDefaultTheme: ThemeDefinition = {
 	name: "motel-default",
 	label: "Motel Default",
 	colors: {
-		screenBg: "#1c1b29",
-		text: "#ede7da",
-		muted: "#9f9788",
-		separator: "#6f685d",
-		accent: "#f4a51c",
-		error: "#f97316",
-		selectedBg: "#263044",
-		warning: "#facc15",
+		screenBg: "#111120",       // oklch(0.185 0.030 282)
+		text: "#eee5d6",           // oklch(0.925 0.022 82)  — warm cream
+		muted: "#9a9181",          // oklch(0.660 0.025 82)
+		separator: "#686155",      // oklch(0.495 0.020 81)
+		accent: "#f5a41a",         // oklch(0.780 0.161 73)  — motel neon
+		error: "#f97312",          // oklch(0.705 0.187 48)
+		selectedBg: "#2b2c48",     // oklch(0.305 0.050 282) — same hue as screen
+		warning: "#facc16",        // oklch(0.861 0.173 92)
 		selectedText: "#f8fafc",
-		count: "#d7c5a1",
-		passing: "#7dd3a3",
-		defaultService: "#93c5fd",
-		footerBg: "#000000",
-		treeLine: "#524d45",
-		previewKey: "#6a6358",
+		count: "#d7c5a1",          // oklch(0.830 0.052 85)
+		passing: "#7ed5a4",        // oklch(0.805 0.110 158)
+		defaultService: "#93c5fe", // oklch(0.810 0.096 252)
+		footerBg: "#04040e",       // oklch(0.115 0.025 282) — deeper than screen
+		treeLine: "#48433b",       // oklch(0.385 0.015 80)
+		previewKey: "#645d51",     // oklch(0.480 0.020 80)
 	},
 	waterfall: {
-		bar: "#f4a51c",
-		barError: "#f97316",
-		barBg: "#2a2520",
-		barLane: "#4a4338",
-		barSelected: "#e8c547",
+		bar: "#f5a41a",            // = accent
+		barError: "#f97312",       // = error
+		barBg: "#1f1f34",          // oklch(0.250 0.040 282) — purple track (was warm)
+		barLane: "#3d3e5b",        // oklch(0.375 0.050 282)
+		barSelected: "#f3c048",    // oklch(0.832 0.145 85) — warmer amber
 		barSelectedError: "#ff8c42",
 	},
 }

package/src/ui/traceDetailsWidth.repro.test.ts

@@ -0,0 +1,115 @@
+/**
+ * End-to-end reproducer for waterfall underfilling the trace-details pane.
+ *
+ * Strategy:
+ * 1. Seed a deterministic trace into a fresh SQLite database.
+ * 2. Launch the motel TUI under tuistory in narrow mode so trace details take
+ *    the full screen width.
+ * 3. Drill into the trace details view.
+ * 4. Assert the root waterfall row reaches the right-side duration column
+ *    instead of stopping several cells early.
+ */
+
+import { afterAll, beforeAll, describe, expect, it } from "bun:test"
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+
+const TUISTORY_BIN = "tuistory"
+const SESSION = `motel-trace-width-${Date.now()}`
+
+const hasTuistory = async () => {
+	try {
+		const proc = Bun.spawn({ cmd: ["which", TUISTORY_BIN], stdout: "pipe", stderr: "ignore" })
+		return (await proc.exited) === 0
+	} catch {
+		return false
+	}
+}
+
+const tui = async (args: readonly string[]) => {
+	const proc = Bun.spawn({ cmd: [TUISTORY_BIN, ...args], stdout: "pipe", stderr: "pipe" })
+	const [stdout, stderr] = await Promise.all([
+		new Response(proc.stdout).text(),
+		new Response(proc.stderr).text(),
+	])
+	return { code: await proc.exited, stdout, stderr }
+}
+
+const snapshot = async () => (await tui(["snapshot", "--session", SESSION])).stdout
+
+const press = async (...keys: string[]) => {
+	await tui(["press", "--session", SESSION, ...keys])
+	await Bun.sleep(120)
+}
+
+const dividerWidth = (snap: string) =>
+	snap.split("\n").find((line) => line.startsWith("─"))?.length ?? 0
+
+const rootWaterfallRow = (snap: string) =>
+	snap.split("\n").find((line) => line.startsWith(" ▾ root.op") || line.startsWith(" ▸ root.op") || line.startsWith(" · root.op")) ?? null
+
+describe("trace details waterfall width (end-to-end TUI)", () => {
+	const tempDir = mkdtempSync(join(tmpdir(), "motel-trace-width-"))
+	const dbPath = join(tempDir, "telemetry.sqlite")
+	const lastServicePath = join(tempDir, "last-service.txt")
+	let canRun = false
+
+	beforeAll(async () => {
+		canRun = await hasTuistory()
+		if (!canRun) return
+
+		writeFileSync(lastServicePath, "waterfall-repro")
+
+		const seed = Bun.spawn({
+			cmd: ["bun", "run", "src/ui/waterfallNav.repro.seed.ts"],
+			cwd: process.cwd(),
+			env: {
+				...process.env,
+				MOTEL_OTEL_DB_PATH: dbPath,
+				MOTEL_OTEL_ENABLED: "false",
+			},
+			stdout: "pipe",
+			stderr: "pipe",
+		})
+		const seedCode = await seed.exited
+		if (seedCode !== 0) {
+			const err = await new Response(seed.stderr).text()
+			throw new Error(`seed failed: ${err}`)
+		}
+
+		await tui(["close", "--session", SESSION])
+		const launch = await tui([
+			"launch",
+			"bun run src/index.tsx",
+			"--session", SESSION,
+			"--cols", "96",
+			"--rows", "40",
+			"--cwd", process.cwd(),
+			"--env", `MOTEL_OTEL_DB_PATH=${dbPath}`,
+			"--env", "MOTEL_OTEL_ENABLED=false",
+			"--timeout", "15000",
+		])
+		if (launch.code !== 0) throw new Error(`launch failed: ${launch.stderr}`)
+		await tui(["wait", "root.op", "--session", SESSION, "--timeout", "10000"])
+		await tui(["wait-idle", "--session", SESSION, "--timeout", "5000"])
+	}, 60_000)
+
+	afterAll(async () => {
+		if (canRun) await tui(["close", "--session", SESSION])
+		try { rmSync(tempDir, { recursive: true, force: true }) } catch {}
+	})
+
+	it("fills the full-width trace details pane in narrow mode", async () => {
+		if (!canRun) return
+
+		await press("return")
+		const snap = await snapshot()
+		const divider = dividerWidth(snap)
+		const row = rootWaterfallRow(snap)
+
+		expect(divider).toBe(96)
+		expect(row).not.toBeNull()
+		expect(row!.length).toBeGreaterThanOrEqual(divider - 1)
+	}, 60_000)
+})

package/src/ui/useAttrFilterPicker.ts

@@ -0,0 +1,47 @@
+import { useAtom } from "@effect/atom-react"
+import { useEffect } from "react"
+import {
+	attrFacetStateAtom,
+	attrPickerModeAtom,
+	initialAttrFacetState,
+	loadTraceAttributeKeys,
+	loadTraceAttributeValues,
+	selectedTraceServiceAtom,
+} from "./state.ts"
+
+// When the picker is open, load the current facet page (keys, or values for
+// a specific key) and keep it in sync with the selected service. We key the
+// effect off picker mode + service + target key so refetches happen on drill
+// in/out and when the user switches services mid-pick.
+export const useAttrFilterPicker = (selectedKey: string | null) => {
+	const [pickerMode] = useAtom(attrPickerModeAtom)
+	const [service] = useAtom(selectedTraceServiceAtom)
+	const [, setFacetState] = useAtom(attrFacetStateAtom)
+
+	useEffect(() => {
+		if (pickerMode === "off" || !service) {
+			setFacetState(initialAttrFacetState)
+			return
+		}
+		let cancelled = false
+		setFacetState({ status: "loading", key: pickerMode === "values" ? selectedKey : null, data: [], error: null })
+		const load = async () => {
+			try {
+				const rows = pickerMode === "keys"
+					? await loadTraceAttributeKeys(service)
+					: selectedKey
+						? await loadTraceAttributeValues(service, selectedKey)
+						: []
+				if (cancelled) return
+				setFacetState({ status: "ready", key: pickerMode === "values" ? selectedKey : null, data: rows, error: null })
+			} catch (err) {
+				if (cancelled) return
+				setFacetState({ status: "error", key: pickerMode === "values" ? selectedKey : null, data: [], error: err instanceof Error ? err.message : String(err) })
+			}
+		}
+		void load()
+		return () => {
+			cancelled = true
+		}
+	}, [pickerMode, service, selectedKey, setFacetState])
+}

package/src/ui/useKeyboardNav.ts

@@ -1,10 +1,16 @@
 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"
 import {
+	activeAttrKeyAtom,
+	activeAttrValueAtom,
+	attrFacetStateAtom,
+	attrPickerIndexAtom,
+	attrPickerInputAtom,
+	attrPickerModeAtom,
 	autoRefreshAtom,
 	collapsedSpanIdsAtom,
 	detailViewAtom,
@@ -22,11 +28,39 @@ import {
 	type TraceSortMode,
 	traceStateAtom,
 } from "./state.ts"
+import { filterFacets } from "./AttrFilterModal.tsx"
 import { G_PREFIX_TIMEOUT_MS } from "./theme.ts"
 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[]
@@ -65,6 +99,12 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 	const [filterMode, setFilterMode] = useAtom(filterModeAtom)
 	const [filterText, setFilterText] = useAtom(filterTextAtom)
 	const [traceSort, setTraceSort] = useAtom(traceSortAtom)
+	const [pickerMode, setPickerMode] = useAtom(attrPickerModeAtom)
+	const [pickerInput, setPickerInput] = useAtom(attrPickerInputAtom)
+	const [pickerIndex, setPickerIndex] = useAtom(attrPickerIndexAtom)
+	const [attrFacets] = useAtom(attrFacetStateAtom)
+	const [activeAttrKey, setActiveAttrKey] = useAtom(activeAttrKeyAtom)
+	const [activeAttrValue, setActiveAttrValue] = useAtom(activeAttrValueAtom)
 
 	const pendingGRef = useRef(false)
 	const pendingGTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -73,12 +113,50 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 	const spanNavActive = detailView !== "service-logs" && selectedSpanIndex !== null
 	const serviceLogNavActive = detailView === "service-logs"
 
-	const stateRef = useRef({ traceState, serviceLogState, selectedServiceLogIndex, selectedTheme, selectedTraceIndex, selectedSpanIndex, selectedTraceService, detailView, showHelp, collapsedSpanIds, spanNavActive, serviceLogNavActive, filterMode, filterText, autoRefresh, traceSort, ...params })
+	// 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:
 	// rapid repeated keypresses can otherwise observe stale selection state.
 	useLayoutEffect(() => {
-		stateRef.current = { traceState, serviceLogState, selectedServiceLogIndex, selectedTheme, selectedTraceIndex, selectedSpanIndex, selectedTraceService, detailView, showHelp, collapsedSpanIds, spanNavActive, serviceLogNavActive, filterMode, filterText, autoRefresh, traceSort, ...params }
+		stateRef.current = { traceState, serviceLogState, selectedServiceLogIndex, selectedTheme, selectedTraceIndex, selectedSpanIndex, selectedTraceService, detailView, showHelp, collapsedSpanIds, spanNavActive, serviceLogNavActive, filterMode, filterText, autoRefresh, traceSort, pickerMode, pickerInput, pickerIndex, attrFacets, activeAttrKey, activeAttrValue, ...params }
 	})
 
 	const clearPendingG = () => {
@@ -230,7 +308,8 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				if (s.serviceLogState.data.length === 0) return 0
 				return Math.max(0, Math.min(current + direction * serviceLogPageSize, s.serviceLogState.data.length - 1))
 			})
-		} else if (s.spanNavActive && s.selectedTrace) {
+		} else if (s.spanNavActive) {
+			if (!s.selectedTrace) return
 			const visibleCount = getVisibleSpans(s.selectedTrace.spans, s.collapsedSpanIds).length
 			setSelectedSpanIndex((current) => {
 				if (visibleCount === 0) return null
@@ -257,6 +336,83 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 	useKeyboard((key) => {
 		const s = $()
 
+		// Attribute picker modal owns the keyboard while open.
+		if (s.pickerMode !== "off") {
+			const rows = filterFacets(s.attrFacets.data, s.pickerInput)
+			const clampedIndex = rows.length === 0 ? 0 : Math.max(0, Math.min(s.pickerIndex, rows.length - 1))
+			const move = (delta: number) => {
+				if (rows.length === 0) return
+				setPickerIndex(Math.max(0, Math.min(clampedIndex + delta, rows.length - 1)))
+			}
+			if (key.name === "escape") {
+				setPickerMode("off")
+				setPickerInput("")
+				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 }
+			if (key.name === "pagedown") { move(10); return }
+			if (key.name === "return" || key.name === "enter") {
+				const row = rows[clampedIndex]
+				if (!row) return
+				if (s.pickerMode === "keys") {
+					// Drill from keys → values for this key.
+					setActiveAttrKey(row.value)
+					setPickerMode("values")
+					setPickerInput("")
+					setPickerIndex(0)
+				} else {
+					// Apply: activeAttrKey is already set, now pin the value.
+					setActiveAttrValue(row.value)
+					setPickerMode("off")
+					setPickerInput("")
+					setPickerIndex(0)
+					s.flashNotice(`Filter: ${s.activeAttrKey}=${row.value}`)
+				}
+				return
+			}
+			if (key.name === "backspace") {
+				if (s.pickerInput.length > 0) {
+					setPickerInput(s.pickerInput.slice(0, -1))
+					setPickerIndex(0)
+					return
+				}
+				// At empty input in values mode, backspace walks back to keys.
+				if (s.pickerMode === "values") {
+					setPickerMode("keys")
+					setActiveAttrKey(null)
+					setPickerIndex(0)
+					return
+				}
+				return
+			}
+			// 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
+			}
+			return
+		}
+
 		// Filter mode: capture text input
 		if (s.filterMode) {
 			if (key.name === "escape") {
@@ -264,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
@@ -365,6 +532,15 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 				setSelectedSpanIndex(null)
 				return
 			}
+			// At the trace list, `esc` clears any applied attribute filter so
+			// there's a clean way back to the unfiltered list without hunting
+			// for the picker key.
+			if (s.activeAttrKey || s.activeAttrValue) {
+				setActiveAttrKey(null)
+				setActiveAttrValue(null)
+				s.flashNotice("Cleared attribute filter")
+				return
+			}
 			return
 		}
 		if (key.name === "return" || key.name === "enter") {
@@ -416,6 +592,15 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 			setFilterMode(true)
 			return
 		}
+		if ((key.name === "f" || key.name === "F") && !key.ctrl && !key.meta) {
+			// Open attribute picker at the keys step. If a filter is already
+			// applied, reopening lets the user refine or switch.
+			setPickerMode("keys")
+			setPickerInput("")
+			setPickerIndex(0)
+			setActiveAttrKey(null)
+			return
+		}
 		if (key.name === "tab") {
 			toggleServiceLogsView()
 			return
@@ -431,12 +616,17 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 		if (key.name === "up" || key.name === "k") {
 			if (s.serviceLogNavActive) {
 				moveServiceLogBy(-1)
-			} else if (s.spanNavActive && s.selectedTrace) {
-				const visibleCount = getVisibleSpans(s.selectedTrace.spans, s.collapsedSpanIds).length
-				setSelectedSpanIndex((current) => {
-					if (current === null || visibleCount === 0) return 0
-					return Math.max(0, current - 1)
-				})
+			} else if (s.spanNavActive) {
+				// Locked to span nav; never fall through to trace-list nav while
+				// drilled in. If the trace detail is still loading, swallow the
+				// key instead of silently leaking it to the trace list.
+				if (s.selectedTrace) {
+					const visibleCount = getVisibleSpans(s.selectedTrace.spans, s.collapsedSpanIds).length
+					setSelectedSpanIndex((current) => {
+						if (current === null || visibleCount === 0) return 0
+						return Math.max(0, current - 1)
+					})
+				}
 			} else {
 				moveTraceBy(-1)
 			}
@@ -445,12 +635,14 @@ export const useKeyboardNav = (params: KeyboardNavParams) => {
 		if (key.name === "down" || key.name === "j") {
 			if (s.serviceLogNavActive) {
 				moveServiceLogBy(1)
-			} else if (s.spanNavActive && s.selectedTrace) {
-				const visibleCount = getVisibleSpans(s.selectedTrace.spans, s.collapsedSpanIds).length
-				setSelectedSpanIndex((current) => {
-					if (current === null || visibleCount === 0) return 0
-					return Math.min(current + 1, visibleCount - 1)
-				})
+			} else if (s.spanNavActive) {
+				if (s.selectedTrace) {
+					const visibleCount = getVisibleSpans(s.selectedTrace.spans, s.collapsedSpanIds).length
+					setSelectedSpanIndex((current) => {
+						if (current === null || visibleCount === 0) return 0
+						return Math.min(current + 1, visibleCount - 1)
+					})
+				}
 			} else {
 				moveTraceBy(1)
 			}

package/src/ui/waterfallNav.test.ts

@@ -3,7 +3,8 @@ import type { TraceSpanItem } from "../domain.ts"
 import {
 	findFirstChildIndex,
 	findParentIndex,
-	getWaterfallColumns,
+	getWaterfallLayout,
+	getWaterfallSuffixMetrics,
 	getVisibleSpans,
 } from "./Waterfall.tsx"
 import { resolveCollapseStep } from "./waterfallNav.ts"
@@ -130,13 +131,27 @@ describe("getVisibleSpans", () => {
 	})
 })
 
-describe("getWaterfallColumns", () => {
-	it("pads duration and log columns to fill the reserved width", () => {
+describe("getWaterfallSuffixMetrics", () => {
+	it("uses the widest visible duration as the shared suffix width", () => {
+		const spans = [
+			{ spanId: "a", durationMs: 1 },
+			{ spanId: "b", durationMs: 57_000 },
+			{ spanId: "c", durationMs: 120 },
+		]
+		const metrics = getWaterfallSuffixMetrics(spans)
+		// `120ms` = 5 is the widest
+		expect(metrics.maxDurationWidth).toBe(5)
+		expect(metrics.suffixWidth).toBe(5)
+	})
+
+	it("layout reserves the suffix once and leaves the rest for the bar", () => {
 		const contentWidth = 72
-		const columns = getWaterfallColumns(contentWidth, 153_000, 1, 0)
-		expect(columns.durationCell.length).toBe(columns.durationWidth)
-		expect(columns.logCell.length).toBe(columns.logWidth)
-		expect(columns.labelMaxWidth + 1 + columns.barWidth + 1 + columns.durationCell.length + columns.logCell.length).toBe(contentWidth)
+		const metrics = getWaterfallSuffixMetrics(
+			[{ spanId: "a", durationMs: 57_000 }, { spanId: "b", durationMs: 1 }],
+		)
+		const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, metrics.suffixWidth)
+		// label + 1 (gap before bar) + bar + 1 (gap before suffix) + suffix = contentWidth
+		expect(labelMaxWidth + 1 + barWidth + 1 + metrics.suffixWidth).toBe(contentWidth)
 	})
 })