@kitlangton/motel 0.1.1 → 0.1.2

package/src/ui/app/TraceWorkspace.tsx

@@ -1,5 +1,3 @@
-import type { ScrollBoxRenderable } from "@opentui/core"
-import type { RefObject } from "react"
 import type { LogItem, TraceItem, TraceSummaryItem } from "../../domain.ts"
 import { formatShortDate, formatTimestamp } from "../format.ts"
 import { AlignedHeaderLine, BlankRow, Divider, SeparatorColumn, TextLine } from "../primitives.tsx"
@@ -21,7 +19,6 @@ interface TraceWorkspaceProps {
 	readonly filterMode: boolean
 	readonly filterText: string
 	readonly traceListProps: TraceListProps
-	readonly traceListScrollRef: RefObject<ScrollBoxRenderable | null>
 	readonly selectedTraceService: string | null
 	readonly serviceLogState: ServiceLogState
 	readonly selectedServiceLogIndex: number
@@ -44,7 +41,6 @@ export const TraceWorkspace = ({
 	filterMode,
 	filterText,
 	traceListProps,
-	traceListScrollRef,
 	selectedTraceService,
 	serviceLogState,
 	selectedServiceLogIndex,
@@ -107,10 +103,11 @@ export const TraceWorkspace = ({
 	}
 
 	if (isWideLayout) {
-		return (
-			<box flexGrow={1} flexDirection="row">
-				<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
-					{viewLevel <= 1 ? (
+		// L0: list (left) + trace preview (right). The two-pane zoom.
+		if (viewLevel === 0) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceListPane
 							traceListProps={traceListProps}
 							filterMode={filterMode}
@@ -119,53 +116,86 @@ export const TraceWorkspace = ({
 							containerHeight={wideBodyHeight}
 							bodyHeight={wideTraceListBodyHeight}
 							padding={sectionPadding}
-							scrollRef={traceListScrollRef}
 						/>
-					) : (
+					</box>
+					<SeparatorColumn height={wideBodyHeight} junctionChars={separatorJunctionChars} />
+					<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceDetailsPane
 							trace={selectedTrace}
 							traceSummary={selectedTraceSummary}
 							traceStatus={traceDetailState.status}
 							traceError={traceDetailState.error}
 							traceLogsState={logState}
-							contentWidth={leftContentWidth}
+							contentWidth={rightContentWidth}
 							bodyLines={wideBodyLines}
-							paneWidth={leftPaneWidth}
+							paneWidth={rightPaneWidth}
 							selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
 							focused={false}
 							onSelectSpan={selectSpan}
 						/>
-					)}
+					</box>
 				</box>
-				<SeparatorColumn height={wideBodyHeight} junctionChars={viewLevel === 2 ? separatorCrossChars : separatorJunctionChars} />
-				<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
-					{viewLevel <= 1 ? (
+			)
+		}
+
+		// L1: the user pressed enter on a trace — hide the list entirely and
+		// let the waterfall take the full width. `leftPaneWidth` is already
+		// `contentWidth` in this case (see useAppLayout), so one pane fills
+		// the row.
+		if (viewLevel === 1) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceDetailsPane
 							trace={selectedTrace}
 							traceSummary={selectedTraceSummary}
 							traceStatus={traceDetailState.status}
 							traceError={traceDetailState.error}
 							traceLogsState={logState}
-							contentWidth={rightContentWidth}
+							contentWidth={Math.max(24, leftPaneWidth - sectionPadding * 2)}
 							bodyLines={wideBodyLines}
-							paneWidth={rightPaneWidth}
+							paneWidth={leftPaneWidth}
 							selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
-							focused={viewLevel === 1}
-							onSelectSpan={selectSpan}
-						/>
-					) : (
-						<SpanDetailPane
-							span={selectedSpan}
-							trace={selectedTrace}
-							logs={selectedSpanLogs}
-							contentWidth={rightContentWidth}
-							bodyLines={wideBodyLines}
-							paneWidth={rightPaneWidth}
 							focused={true}
+							onSelectSpan={selectSpan}
 						/>
-					)}
+					</box>
+				</box>
+			)
+		}
+
+		// L2: waterfall-left + span detail-right. Still no list.
+		return (
+			<box flexGrow={1} flexDirection="row">
+				<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+					<TraceDetailsPane
+						trace={selectedTrace}
+						traceSummary={selectedTraceSummary}
+						traceStatus={traceDetailState.status}
+						traceError={traceDetailState.error}
+						traceLogsState={logState}
+						contentWidth={leftContentWidth}
+						bodyLines={wideBodyLines}
+						paneWidth={leftPaneWidth}
+						selectedSpanIndex={selectedSpanIndex}
+						collapsedSpanIds={collapsedSpanIds}
+						focused={false}
+						onSelectSpan={selectSpan}
+					/>
+				</box>
+				<SeparatorColumn height={wideBodyHeight} junctionChars={separatorCrossChars} />
+				<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
+					<SpanDetailPane
+						span={selectedSpan}
+						trace={selectedTrace}
+						logs={selectedSpanLogs}
+						contentWidth={rightContentWidth}
+						bodyLines={wideBodyLines}
+						paneWidth={rightPaneWidth}
+						focused={true}
+					/>
 				</box>
 			</box>
 		)
@@ -182,7 +212,6 @@ export const TraceWorkspace = ({
 					containerHeight={narrowListHeight}
 					bodyHeight={narrowTraceListBodyHeight}
 					padding={sectionPadding}
-					scrollRef={traceListScrollRef}
 				/>
 				<Divider width={contentWidth} />
 				<TraceDetailsPane

package/src/ui/app/useAppLayout.ts

@@ -25,10 +25,28 @@ export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIn
 		detailView === "span-detail" ? 2 :
 		selectedSpanIndex !== null ? 1 :
 		0
+	// At L0 we show list + preview side-by-side. Once drilled in (L1/L2) the
+	// trace list is hidden entirely and the detail pane(s) take the full
+	// width — either one pane (waterfall at L1) or a 50/50 split between
+	// waterfall and span detail at L2.
 	const splitRatio = viewLevelForLayout === 2 ? 0.5 : 0.4
-	const leftPaneWidth = isWideLayout ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth
-	const rightPaneWidth = isWideLayout ? Math.max(28, contentWidth - leftPaneWidth - splitGap) : contentWidth
-	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 3) : Math.max(24, contentWidth - sectionPadding * 2)
+	const listHidden = viewLevelForLayout >= 1
+	const leftPaneWidth = !isWideLayout
+		? contentWidth
+		: listHidden
+			? (viewLevelForLayout === 2 ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth)
+			: Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio))
+	const rightPaneWidth = !isWideLayout
+		? contentWidth
+		: listHidden && viewLevelForLayout !== 2
+			? 0
+			: Math.max(28, contentWidth - leftPaneWidth - splitGap)
+	// Left pane: paddingLeft (1) + scrollbar column (1). No right padding —
+	// the vertical pane divider handles visual separation from the right pane.
+	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 2) : Math.max(24, contentWidth - sectionPadding * 2)
+	// Right pane: both left and right padding. Trace details and span detail
+	// content needs a little breathing room on the right so long op names
+	// and the duration column don't butt against the pane border.
 	const rightContentWidth = isWideLayout ? Math.max(24, rightPaneWidth - sectionPadding * 2) : Math.max(24, contentWidth - sectionPadding * 2)
 	const headerFooterWidth = Math.max(24, contentWidth - 2)
 	const wideBodyHeight = availableContentHeight
@@ -56,6 +74,7 @@ export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIn
 		sectionPadding,
 		availableContentHeight,
 		viewLevel: viewLevelForLayout,
+		listHidden,
 		footerNotice,
 		footerHeight,
 		leftPaneWidth,

package/src/ui/app/useTraceScreenData.ts

@@ -3,6 +3,8 @@ import { useCallback, useEffect, useMemo, useRef } from "react"
 import { config } from "../../config.js"
 import type { LogItem, TraceItem } from "../../domain.ts"
 import {
+	activeAttrKeyAtom,
+	activeAttrValueAtom,
 	autoRefreshAtom,
 	collapsedSpanIdsAtom,
 	detailViewAtom,
@@ -11,6 +13,7 @@ import {
 	initialLogState,
 	initialServiceLogState,
 	initialTraceDetailState,
+	loadFilteredTraceSummaries,
 	loadRecentTraceSummaries,
 	loadServiceLogs,
 	loadTraceDetail,
@@ -47,6 +50,8 @@ export const useTraceScreenData = () => {
 	const [autoRefresh] = useAtom(autoRefreshAtom)
 	const [filterMode] = useAtom(filterModeAtom)
 	const [filterText] = useAtom(filterTextAtom)
+	const [activeAttrKey] = useAtom(activeAttrKeyAtom)
+	const [activeAttrValue] = useAtom(activeAttrValueAtom)
 	const [traceSort] = useAtom(traceSortAtom)
 
 	const selectedTraceRef = useRef<string | null>(null)
@@ -94,7 +99,11 @@ export const useTraceScreenData = () => {
 					setSelectedTraceService(effectiveService)
 				}
 
-				const traces = effectiveService ? await loadRecentTraceSummaries(effectiveService) : []
+				const traces = effectiveService
+					? (activeAttrKey && activeAttrValue
+						? await loadFilteredTraceSummaries(effectiveService, { [activeAttrKey]: activeAttrValue })
+						: await loadRecentTraceSummaries(effectiveService))
+					: []
 				if (cancelled) return
 
 				const prevTraceId = selectedTraceRef.current
@@ -117,7 +126,7 @@ export const useTraceScreenData = () => {
 		return () => {
 			cancelled = true
 		}
-	}, [refreshNonce, selectedTraceService, setSelectedTraceIndex, setSelectedTraceService, setTraceState])
+	}, [refreshNonce, selectedTraceService, activeAttrKey, activeAttrValue, setSelectedTraceIndex, setSelectedTraceService, setTraceState])
 
 	useEffect(() => {
 		setSelectedTraceIndex((current) => {
@@ -402,6 +411,8 @@ export const useTraceScreenData = () => {
 		autoRefresh,
 		filterMode,
 		filterText,
+		activeAttrKey,
+		activeAttrValue,
 		traceSort,
 		selectedTraceSummary,
 		selectedTrace,

package/src/ui/format.ts

@@ -19,13 +19,22 @@ export const formatShortDate = (date: Date) => date.toLocaleDateString("en-US",
 export const formatTimestamp = (date: Date) => date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }).toLowerCase()
 
 export const formatDuration = (durationMs: number) => {
+	const { number, unit } = splitDuration(durationMs)
+	return `${number}${unit}`
+}
+
+/**
+ * Split a duration into its numeric and unit parts so the unit can render
+ * dimmer than the number (easier to visually parse a column of durations).
+ */
+export const splitDuration = (durationMs: number): { number: string; unit: "s" | "ms" } => {
 	const trimDecimal = (value: string) => value.replace(/\.0+$/, "").replace(/(\.\d*[1-9])0+$/, "$1")
 
-	if (durationMs >= 10_000) return `${Math.round(durationMs / 1000)}s`
-	if (durationMs >= 1000) return `${trimDecimal((durationMs / 1000).toFixed(1))}s`
-	if (durationMs >= 100) return `${Math.round(durationMs)}ms`
-	if (durationMs >= 10) return `${trimDecimal(durationMs.toFixed(1))}ms`
-	return `${trimDecimal(durationMs.toFixed(2))}ms`
+	if (durationMs >= 10_000) return { number: `${Math.round(durationMs / 1000)}`, unit: "s" }
+	if (durationMs >= 1000) return { number: trimDecimal((durationMs / 1000).toFixed(1)), unit: "s" }
+	if (durationMs >= 100) return { number: `${Math.round(durationMs)}`, unit: "ms" }
+	if (durationMs >= 10) return { number: trimDecimal(durationMs.toFixed(1)), unit: "ms" }
+	return { number: trimDecimal(durationMs.toFixed(2)), unit: "ms" }
 }
 
 export const lifecycleLabel = (value: { readonly isRunning: boolean }) => (value.isRunning ? "open" : "closed")

package/src/ui/primitives.tsx

@@ -118,7 +118,8 @@ export const HelpModal = ({ width, height, autoRefresh, themeLabel, onClose }: {
 					{row("t", `cycle theme (${themeLabel})`)}
 					{row("tab", "toggle service logs")}
 					{row("[ ]", "switch service")}
-					{row("/", "filter traces")}
+					{row("/", "filter by root operation")}
+					{row("f", "filter traces by span attribute")}
 					{row("s", "cycle sort mode")}
 					{row("a", `auto refresh ${autoRefresh ? "on" : "off"}`)}
 					{row("r", "refresh traces")}
@@ -149,6 +150,7 @@ export const FooterHints = ({ spanNavActive, detailView, autoRefresh, width: _wi
 		["t", "theme"],
 		["tab", "logs"],
 		["/", "filter"],
+		["f", "attr"],
 		["s", "sort"],
 		["a", autoRefresh ? "live" : "paused"],
 		["?", "help"],

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])
+}