@aryasaatvik/motel 0.3.0

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

@@ -0,0 +1,231 @@
+/**
+ * End-to-end reproducer for "navigation broken after changing sort".
+ *
+ * Strategy:
+ *   1. Seed 5 traces with distinct durations so `recent` and `slowest` give
+ *      obviously different orderings.
+ *   2. Launch the TUI, capture the default (recent) order and the selected row.
+ *   3. Press `s` to switch to `slowest`, capture the new order.
+ *   4. Drive `j` / `k` and make sure the highlighted row steps through the
+ *      *sorted* list, not the underlying raw order.
+ */
+
+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-sort-${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)
+}
+
+/**
+ * Extract the ordered list of operation names that appear as trace rows in
+ * the left pane, and the currently-selected operation inferred from the
+ * TRACE DETAILS pane on the right (whose second row shows the selected
+ * trace's root operation name). tuistory's plain-text snapshots don't
+ * preserve background color, so the visual "selected row" marker in
+ * TraceList isn't visible — we use the right pane as the source of truth.
+ */
+const listRows = (snap: string): { readonly rows: readonly string[]; readonly selected: string | null } => {
+	const rows: string[] = []
+	let selected: string | null = null
+	let inDetailsPane = false
+	let detailsLinesConsumed = 0
+	for (const raw of snap.split("\n")) {
+		const leftHalf = raw.split("\u2502")[0] ?? raw
+		const rightHalf = raw.includes("\u2502") ? raw.split("\u2502").slice(1).join("\u2502") : ""
+
+		// Trace rows: left pane, `·` then the operation name as the first
+		// token. (Earlier versions appended `#<hash>`; that's been removed.)
+		const rowMatch = leftHalf.match(/^\s+\u00b7\s+(op[A-Z])\b/)
+		if (rowMatch) rows.push(rowMatch[1]!)
+
+		// Selected trace: right pane, line immediately after `TRACE DETAILS`
+		// header holds the selected root operation name.
+		if (rightHalf.includes("TRACE DETAILS") || leftHalf.includes("TRACE DETAILS")) {
+			inDetailsPane = true
+			detailsLinesConsumed = 0
+			continue
+		}
+		if (inDetailsPane) {
+			detailsLinesConsumed++
+			if (detailsLinesConsumed === 1) {
+				// The op name row: right pane (if wide) or left pane (if narrow).
+				const source = rightHalf || leftHalf
+				const opMatch = source.match(/^\s*(\S+)/)
+				if (opMatch && opMatch[1] !== "No" && opMatch[1] !== "waiting") {
+					selected = opMatch[1]!
+				}
+				inDetailsPane = false
+			}
+		}
+	}
+	return { rows, selected }
+}
+
+const SERVICE_NAME = "sort-nav-repro"
+
+describe("trace navigation after changing sort", () => {
+	const tempDir = mkdtempSync(join(tmpdir(), "motel-sort-repro-"))
+	const dbPath = join(tempDir, "telemetry.sqlite")
+	const port = 50_000 + Math.floor(Math.random() * 5_000)
+	const daemonEnv = { MOTEL_RUNTIME_DIR: tempDir, MOTEL_OTEL_DB_PATH: dbPath, MOTEL_OTEL_BASE_URL: `http://127.0.0.1:${port}`, MOTEL_OTEL_QUERY_URL: `http://127.0.0.1:${port}`, MOTEL_OTEL_PORT: String(port) }
+	const lastServicePath = join(tempDir, "last-service.txt")
+	let canRun = false
+
+	beforeAll(async () => {
+		canRun = await hasTuistory()
+		if (!canRun) return
+
+		writeFileSync(lastServicePath, SERVICE_NAME)
+
+		// Seed in a child process so config.ts picks up our DB path fresh.
+		const seed = Bun.spawn({
+			cmd: ["bun", "run", "src/ui/traceSortNav.repro.seed.ts"],
+			cwd: process.cwd(),
+			env: { ...process.env, ...daemonEnv, 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])
+		// Use a modest height (20 rows) where the 15-trace list must scroll to
+		// reveal the bottom rows while still leaving room for the details pane
+		// on the right (needed by the test's selected-trace extraction).
+		const launch = await tui([
+			"launch",
+			"bun run src/index.tsx",
+			"--session", SESSION,
+			"--cols", "120",
+			"--rows", "20",
+			"--cwd", process.cwd(),
+			"--env", `MOTEL_OTEL_DB_PATH=${dbPath}`,
+			"--env", `MOTEL_RUNTIME_DIR=${tempDir}`,
+			"--env", `MOTEL_OTEL_BASE_URL=${daemonEnv.MOTEL_OTEL_BASE_URL}`,
+			"--env", `MOTEL_OTEL_QUERY_URL=${daemonEnv.MOTEL_OTEL_QUERY_URL}`,
+			"--env", `MOTEL_OTEL_PORT=${port}`,
+			"--env", "MOTEL_OTEL_ENABLED=false",
+			"--timeout", "15000",
+		])
+		if (launch.code !== 0) throw new Error(`launch failed: ${launch.stderr}`)
+		await tui(["wait", "opE", "--session", SESSION, "--timeout", "10000"])
+		await tui(["wait-idle", "--session", SESSION, "--timeout", "5000"])
+	}, 60_000)
+
+	afterAll(async () => {
+		if (canRun) {
+			await tui(["close", "--session", SESSION])
+			const stop = Bun.spawn({ cmd: ["bun", "run", "src/motel.ts", "stop"], cwd: process.cwd(), env: { ...process.env, ...daemonEnv }, stdout: "ignore", stderr: "ignore" })
+			await stop.exited
+		}
+		try { rmSync(tempDir, { recursive: true, force: true }) } catch {}
+	})
+
+	// Expected orders given the seed (A..O):
+	//   recent : O N M L K J I H G F E D C B A   (newest first)
+	//   slowest: H L D F J B M E N I A O C G K   (durations 200..1 ms)
+	const RECENT_ORDER = ["opO", "opN", "opM", "opL", "opK", "opJ", "opI", "opH", "opG", "opF", "opE", "opD", "opC", "opB", "opA"]
+	const SLOWEST_ORDER = ["opH", "opL", "opD", "opF", "opJ", "opB", "opM", "opE", "opN", "opI", "opA", "opO", "opC", "opG", "opK"]
+
+	it("default sort is 'recent' (most recent first), selection starts at the top", async () => {
+		if (!canRun) return
+		const snap = await snapshot()
+		const parsed = listRows(snap)
+		if (parsed.selected === null) {
+			// Dump raw snapshot to aid diagnosis when the extraction helper misses.
+			console.error("--- RAW SNAPSHOT ---\n" + snap + "\n--- END ---")
+		}
+		expect(parsed.selected).toBe("opO")
+	})
+
+	it("after `s`, the visible order is `slowest` and selection stays on the same trace", async () => {
+		if (!canRun) return
+		await press("s")
+		const { selected } = listRows(await snapshot())
+		// opO moves from recent #0 to slowest #11. Selection follows the trace.
+		expect(selected).toBe("opO")
+	})
+
+	it("j moves through the SORTED order (not raw data order)", async () => {
+		if (!canRun) return
+		// Currently selected = opO at slowest index 11 (SLOWEST_ORDER[11] = "opO").
+		// Press j repeatedly and each step should land on the next sorted row.
+		const startIdx = SLOWEST_ORDER.indexOf("opO")
+		for (let offset = 1; offset <= 3; offset++) {
+			await press("j")
+			const expected = SLOWEST_ORDER[startIdx + offset]
+			const { selected } = listRows(await snapshot())
+			expect(selected).toBe(expected)
+		}
+	})
+
+	it("k moves backward through the sorted order", async () => {
+		if (!canRun) return
+		// We are 3 rows past opO in SLOWEST_ORDER.
+		for (let i = 0; i < 3; i++) await press("k")
+		expect(listRows(await snapshot()).selected).toBe("opO")
+	})
+
+	it("G jumps to the bottom of the sorted list, gg to the top", async () => {
+		if (!canRun) return
+		await press("G")
+		expect(listRows(await snapshot()).selected).toBe(SLOWEST_ORDER[SLOWEST_ORDER.length - 1]!)
+
+		await press("g", "g")
+		expect(listRows(await snapshot()).selected).toBe(SLOWEST_ORDER[0]!)
+	})
+
+	it("switching sort back to 'recent' restores recency order and keeps selection on the same trace", async () => {
+		if (!canRun) return
+		// Currently on SLOWEST_ORDER[0] = "opH". Press `s` twice: slowest → errors → recent.
+		await press("s")
+		await press("s")
+		const { selected } = listRows(await snapshot())
+		expect(selected).toBe("opH")
+	})
+
+	it("scrolling: selecting a trace near the bottom brings it into view, and changing sort keeps it in view", async () => {
+		if (!canRun) return
+		// Jump to the bottom of the recent list (opA), then change sort to slowest.
+		// opA is at slowest index 10 — well down the list. Selection must stay on opA
+		// AND the viewport must scroll to show it.
+		await press("G")
+		expect(listRows(await snapshot()).selected).toBe("opA")
+
+		await press("s")
+		const after = listRows(await snapshot())
+		expect(after.selected).toBe("opA")
+		// The row for opA must be visible in the rendered list.
+		expect(after.rows).toContain("opA")
+	})
+})

package/src/ui/useAttrFilterPicker.ts

@@ -0,0 +1,89 @@
+import { useAtom } from "@effect/atom-react"
+import { useEffect } from "react"
+import {
+	attrFacetStateAtom,
+	attrPickerModeAtom,
+	initialAttrFacetState,
+	selectedTraceServiceAtom,
+} from "./atoms.ts"
+import {
+	getCachedFacetKeys,
+	getCachedFacetValues,
+	refreshTraceAttributeKeys,
+	refreshTraceAttributeValues,
+} from "./loaders.ts"
+
+// Drive the picker's data state from (pickerMode, service, selectedKey).
+//
+// Strategy: stale-while-revalidate. On reopen we publish whatever the
+// module-level cache has instantly (no "loading…" flash), then kick off a
+// background revalidation. The first time we see a (service, key) tuple
+// we still show `loading` so the UI has something to say. The module-level
+// caches in `loaders.ts` mean a service-change pre-warm can fill the cache
+// before the user ever presses `f`.
+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
+		const publishReady = (key: string | null, data: readonly { readonly value: string; readonly count: number }[]) => {
+			setFacetState({ status: "ready", key, data, error: null })
+		}
+		const publishLoading = (key: string | null, previous: readonly { readonly value: string; readonly count: number }[] = []) => {
+			setFacetState({ status: "loading", key, data: previous, error: null })
+		}
+		const publishError = (key: string | null, previous: readonly { readonly value: string; readonly count: number }[], err: unknown) => {
+			setFacetState({
+				status: "error",
+				key,
+				data: previous,
+				error: err instanceof Error ? err.message : String(err),
+			})
+		}
+
+		if (pickerMode === "keys") {
+			const cached = getCachedFacetKeys(service)
+			if (cached) {
+				publishReady(null, cached.data)
+			} else {
+				publishLoading(null)
+			}
+			refreshTraceAttributeKeys(service)
+				.then((entry) => {
+					if (cancelled) return
+					publishReady(null, entry.data)
+				})
+				.catch((err) => {
+					if (cancelled) return
+					publishError(null, cached?.data ?? [], err)
+				})
+		} else if (selectedKey) {
+			const cached = getCachedFacetValues(service, selectedKey)
+			if (cached) {
+				publishReady(selectedKey, cached.data)
+			} else {
+				publishLoading(selectedKey)
+			}
+			refreshTraceAttributeValues(service, selectedKey)
+				.then((entry) => {
+					if (cancelled) return
+					publishReady(selectedKey, entry.data)
+				})
+				.catch((err) => {
+					if (cancelled) return
+					publishError(selectedKey, cached?.data ?? [], err)
+				})
+		} else {
+			// values mode with no key yet — just show empty state.
+			publishReady(null, [])
+		}
+
+		return () => { cancelled = true }
+	}, [pickerMode, service, selectedKey, setFacetState])
+}