@kitlangton/motel 0.1.0

package/src/ui/primitives.tsx

@@ -0,0 +1,170 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { colors } from "./theme.ts"
+import { fitCell, truncateText } from "./format.ts"
+import type { DetailView } from "./state.ts"
+
+export const BlankRow = () => <box height={1} />
+
+export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: string; fg?: string; bold?: boolean }) => (
+	<box height={1}>
+		{bold ? (
+			<text wrapMode="none" truncate fg={fg} attributes={TextAttributes.BOLD}>
+				{text}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{text}
+			</text>
+		)}
+	</box>
+)
+
+export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
+	<box height={1}>
+		{bg ? (
+			<text wrapMode="none" truncate fg={fg} bg={bg}>
+				{children}
+			</text>
+		) : (
+			<text wrapMode="none" truncate fg={fg}>
+				{children}
+			</text>
+		)}
+	</box>
+)
+
+export const AlignedHeaderLine = ({ left, right, width, rightFg = colors.muted }: { left: string; right: string; width: number; rightFg?: string }) => {
+	const availableRightWidth = Math.max(8, width - left.length - 2)
+	const rightText = truncateText(right, availableRightWidth)
+	const gap = Math.max(2, width - left.length - rightText.length)
+
+	return (
+		<TextLine>
+			<span fg={colors.accent} attributes={TextAttributes.BOLD}>{left}</span>
+			<span fg={colors.muted}>{" ".repeat(gap)}</span>
+			<span fg={rightFg}>{rightText}</span>
+		</TextLine>
+	)
+}
+
+export const Divider = ({ width }: { width: number }) => (
+	<PlainLine text={"\u2500".repeat(Math.max(1, width))} fg={colors.separator} />
+)
+
+/** Horizontal divider split into left ─ junction ─ right, using flex row so
+ *  the junction character lands at exactly the same column as the SeparatorColumn. */
+export const SplitDivider = ({ leftWidth, junction, rightWidth }: { leftWidth: number; junction: string; rightWidth: number }) => (
+	<box flexDirection="row" height={1}>
+		<box width={leftWidth}><text fg={colors.separator} wrapMode="none" truncate>{"\u2500".repeat(leftWidth)}</text></box>
+		<box width={1}><text fg={colors.separator}>{junction}</text></box>
+		<box width={rightWidth}><text fg={colors.separator} wrapMode="none" truncate>{"\u2500".repeat(rightWidth)}</text></box>
+	</box>
+)
+
+/** Row index → junction character override. Callers supply exactly the
+ *  glyph they want at each row so the separator lines up with whatever
+ *  divider geometry the neighboring panes happen to have:
+ *    - `\u251c` (├) when only the right pane has a divider at that row
+ *    - `\u2524` (┤) when only the left pane has a divider at that row
+ *    - `\u253c` (┼) when both do
+ */
+export const SeparatorColumn = ({ height, junctionChars }: { height: number; junctionChars?: ReadonlyMap<number, string> }) => {
+	const lines: string[] = []
+	for (let i = 0; i < Math.max(1, height); i++) {
+		lines.push(junctionChars?.get(i) ?? "\u2502")
+	}
+	return (
+		<box width={1} height={height} overflow="hidden">
+			<text fg={colors.separator}>{lines.join("\n")}</text>
+		</box>
+	)
+}
+
+export const FilterBar = ({ text, width }: { text: string; width: number }) => (
+	<TextLine fg={colors.accent}>
+		<span fg={colors.muted}>{"/"}</span>
+		<span fg={colors.text}>{fitCell(text, width - 2)}</span>
+		<span fg={colors.accent}>{"\u2588"}</span>
+	</TextLine>
+)
+
+const FooterKey = ({ label }: { label: string }) => <span fg={colors.count} attributes={TextAttributes.BOLD}>{label}</span>
+
+export const HelpModal = ({ width, height, autoRefresh, themeLabel, onClose }: { width: number; height: number; autoRefresh: boolean; themeLabel: string; onClose: () => void }) => {
+	const panelWidth = Math.min(76, Math.max(52, width - 10))
+	const left = Math.max(2, Math.floor((width - panelWidth) / 2))
+	const top = Math.max(1, Math.floor(height / 5))
+	const sectionGap = Math.max(1, panelWidth - 24)
+	const row = (key: string, desc: string) => (
+			<TextLine>
+				<span fg={colors.count} attributes={TextAttributes.BOLD}>{key.padEnd(11)}</span>
+				<span fg={colors.muted}>{desc}</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}>Help</span>
+						<span fg={colors.muted}>{" ".repeat(sectionGap)}</span>
+						<span fg={colors.muted}>esc / enter / ? close</span>
+					</TextLine>
+					<BlankRow />
+					{row("j k  ↑ ↓", "move selection")}
+					{row("enter", "select spans / open detail / jump from logs")}
+					{row("esc", "back out of detail or span selection")}
+					{row("t", `cycle theme (${themeLabel})`)}
+					{row("tab", "toggle service logs")}
+					{row("[ ]", "switch service")}
+					{row("/", "filter traces")}
+					{row("s", "cycle sort mode")}
+					{row("a", `auto refresh ${autoRefresh ? "on" : "off"}`)}
+					{row("r", "refresh traces")}
+					{row("y", "copy selected trace/span ids")}
+					{row("o / O", "open trace / open web UI")}
+					{row("gg / G", "jump to first / last")}
+					{row("^d / ^u", "page down / up")}
+					{row("q", "quit")}
+				</box>
+			</box>
+		</box>
+	)
+}
+
+export const FooterHints = ({ spanNavActive, detailView, autoRefresh, width: _width }: { spanNavActive: boolean; detailView: DetailView; autoRefresh: boolean; width: number }) => {
+	const enterAction = detailView === "service-logs"
+		? "trace"
+		: spanNavActive && detailView === "waterfall"
+			? "detail"
+			: "spans"
+	const escAction = spanNavActive
+		? (detailView === "span-detail" ? "back" : "traces")
+		: null
+	const items: Array<[string, string]> = [
+		["j/k", "move"],
+		["enter", enterAction],
+		...(escAction ? [["esc", escAction] as [string, string]] : []),
+		["t", "theme"],
+		["tab", "logs"],
+		["/", "filter"],
+		["s", "sort"],
+		["a", autoRefresh ? "live" : "paused"],
+		["?", "help"],
+		["q", "quit"],
+	]
+	const renderItems = (items: ReadonlyArray<readonly [string, string]>) => (
+		items.flatMap(([key, label], index) => [
+			<FooterKey key={`${key}-key`} label={key} />,
+			<span key={`${key}-label`} fg={colors.muted}>{` ${label}`}</span>,
+			index < items.length - 1 ? <span key={`${key}-sep`} fg={colors.separator}>{" · "}</span> : null,
+		])
+	)
+
+	return (
+		<TextLine>
+			{renderItems(items)}
+		</TextLine>
+	)
+}

package/src/ui/state.ts

@@ -0,0 +1,137 @@
+import { Effect } from "effect"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import { readFileSync } from "node:fs"
+import { dirname } from "node:path"
+import { config } from "../config.ts"
+import type { LogItem, TraceItem, TraceSummaryItem } from "../domain.ts"
+import { queryRuntime } from "../runtime.ts"
+import { LogQueryService } from "../services/LogQueryService.ts"
+import { TraceQueryService } from "../services/TraceQueryService.ts"
+import type { ThemeName } from "./theme.ts"
+
+export type LoadStatus = "loading" | "ready" | "error"
+export type DetailView = "waterfall" | "span-detail" | "service-logs"
+
+export interface TraceState {
+	readonly status: LoadStatus
+	readonly services: readonly string[]
+	readonly data: readonly TraceSummaryItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface TraceDetailState {
+	readonly status: LoadStatus
+	readonly traceId: string | null
+	readonly data: TraceItem | null
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface LogState {
+	readonly status: LoadStatus
+	readonly traceId: string | null
+	readonly data: readonly LogItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export interface ServiceLogState {
+	readonly status: LoadStatus
+	readonly serviceName: string | null
+	readonly data: readonly LogItem[]
+	readonly error: string | null
+	readonly fetchedAt: Date | null
+}
+
+export const initialTraceState: TraceState = {
+	status: "loading",
+	services: [],
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialLogState: LogState = {
+	status: "ready",
+	traceId: null,
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialTraceDetailState: TraceDetailState = {
+	status: "ready",
+	traceId: null,
+	data: null,
+	error: null,
+	fetchedAt: null,
+}
+
+export const initialServiceLogState: ServiceLogState = {
+	status: "ready",
+	serviceName: null,
+	data: [],
+	error: null,
+	fetchedAt: null,
+}
+
+export const traceStateAtom = Atom.make(initialTraceState).pipe(Atom.keepAlive)
+export const traceDetailStateAtom = Atom.make(initialTraceDetailState).pipe(Atom.keepAlive)
+export const logStateAtom = Atom.make(initialLogState).pipe(Atom.keepAlive)
+export const serviceLogStateAtom = Atom.make(initialServiceLogState).pipe(Atom.keepAlive)
+export const selectedServiceLogIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+export const selectedTraceIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+const lastServicePath = `${dirname(config.otel.databasePath)}/last-service.txt`
+const readLastService = (): string | null => {
+	try { return readFileSync(lastServicePath, "utf-8").trim() || null }
+	catch { return null }
+}
+
+let lastPersistedService = readLastService()
+
+export const persistSelectedService = (service: string) => {
+	if (service === lastPersistedService) return
+	lastPersistedService = service
+	Bun.write(lastServicePath, service).catch(() => {})
+}
+
+export const selectedTraceServiceAtom = Atom.make<string | null>(readLastService() ?? config.otel.serviceName).pipe(Atom.keepAlive)
+export const refreshNonceAtom = Atom.make(0).pipe(Atom.keepAlive)
+export const noticeAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+export const selectedSpanIndexAtom = Atom.make<number | null>(null).pipe(Atom.keepAlive)
+export const detailViewAtom = Atom.make<DetailView>("waterfall").pipe(Atom.keepAlive)
+export const showHelpAtom = Atom.make(false).pipe(Atom.keepAlive)
+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)
+
+const lastThemePath = `${dirname(config.otel.databasePath)}/last-theme.txt`
+const readLastTheme = (): ThemeName => {
+	try {
+		const raw = readFileSync(lastThemePath, "utf-8").trim()
+		return raw === "tokyo-night" || raw === "catppuccin" || raw === "motel-default" ? raw : "motel-default"
+	} catch {
+		return "motel-default"
+	}
+}
+
+let lastPersistedTheme = readLastTheme()
+
+export const persistSelectedTheme = (theme: ThemeName) => {
+	if (theme === lastPersistedTheme) return
+	lastPersistedTheme = theme
+	Bun.write(lastThemePath, theme).catch(() => {})
+}
+
+export const selectedThemeAtom = Atom.make<ThemeName>(readLastTheme()).pipe(Atom.keepAlive)
+
+export type TraceSortMode = "recent" | "slowest" | "errors"
+export const traceSortAtom = Atom.make<TraceSortMode>("recent").pipe(Atom.keepAlive)
+export const collapsedSpanIdsAtom = Atom.make(new Set<string>() as ReadonlySet<string>).pipe(Atom.keepAlive)
+
+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 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

@@ -0,0 +1,153 @@
+export interface ThemeColors {
+	readonly screenBg: string
+	readonly text: string
+	readonly muted: string
+	readonly separator: string
+	readonly accent: string
+	readonly error: string
+	readonly selectedBg: string
+	readonly warning: string
+	readonly selectedText: string
+	readonly count: string
+	readonly passing: string
+	readonly defaultService: string
+	readonly footerBg: string
+	readonly treeLine: string
+	readonly previewKey: string
+}
+
+export interface ThemeWaterfallColors {
+	readonly bar: string
+	readonly barError: string
+	readonly barBg: string
+	readonly barLane: string
+	readonly barSelected: string
+	readonly barSelectedError: string
+}
+
+export interface ThemeDefinition {
+	readonly name: ThemeName
+	readonly label: string
+	readonly colors: ThemeColors
+	readonly waterfall: ThemeWaterfallColors
+}
+
+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",
+		selectedText: "#f8fafc",
+		count: "#d7c5a1",
+		passing: "#7dd3a3",
+		defaultService: "#93c5fd",
+		footerBg: "#000000",
+		treeLine: "#524d45",
+		previewKey: "#6a6358",
+	},
+	waterfall: {
+		bar: "#f4a51c",
+		barError: "#f97316",
+		barBg: "#2a2520",
+		barLane: "#4a4338",
+		barSelected: "#e8c547",
+		barSelectedError: "#ff8c42",
+	},
+}
+
+const tokyoNightTheme: ThemeDefinition = {
+	name: "tokyo-night",
+	label: "Tokyo Night",
+	colors: {
+		screenBg: "#1a1b26",
+		text: "#c0caf5",
+		muted: "#7a88b6",
+		separator: "#565f89",
+		accent: "#7aa2f7",
+		error: "#f7768e",
+		selectedBg: "#283457",
+		warning: "#e0af68",
+		selectedText: "#f8fbff",
+		count: "#bb9af7",
+		passing: "#9ece6a",
+		defaultService: "#73daca",
+		footerBg: "#000000",
+		treeLine: "#414868",
+		previewKey: "#6b739c",
+	},
+	waterfall: {
+		bar: "#7aa2f7",
+		barError: "#f7768e",
+		barBg: "#1f2335",
+		barLane: "#2a3050",
+		barSelected: "#bb9af7",
+		barSelectedError: "#ff9eaf",
+	},
+}
+
+const catppuccinTheme: ThemeDefinition = {
+	name: "catppuccin",
+	label: "Catppuccin Mocha",
+	colors: {
+		screenBg: "#11111b",
+		text: "#cdd6f4",
+		muted: "#a6adc8",
+		separator: "#6c7086",
+		accent: "#f5c2e7",
+		error: "#f38ba8",
+		selectedBg: "#313244",
+		warning: "#f9e2af",
+		selectedText: "#f5f7ff",
+		count: "#fab387",
+		passing: "#a6e3a1",
+		defaultService: "#89dceb",
+		footerBg: "#000000",
+		treeLine: "#585b70",
+		previewKey: "#9399b2",
+	},
+	waterfall: {
+		bar: "#f5c2e7",
+		barError: "#f38ba8",
+		barBg: "#1e1e2e",
+		barLane: "#313244",
+		barSelected: "#fab387",
+		barSelectedError: "#eba0ac",
+	},
+}
+
+export const themes = {
+	"motel-default": motelDefaultTheme,
+	"tokyo-night": tokyoNightTheme,
+	catppuccin: catppuccinTheme,
+} as const
+
+export type ThemeName = keyof typeof themes
+
+export const themeOrder: readonly ThemeName[] = ["motel-default", "tokyo-night", "catppuccin"]
+
+export const colors: ThemeColors = { ...motelDefaultTheme.colors }
+export const waterfallColors: ThemeWaterfallColors = { ...motelDefaultTheme.waterfall }
+
+export const applyTheme = (name: ThemeName) => {
+	const theme = themes[name] ?? motelDefaultTheme
+	Object.assign(colors, theme.colors)
+	Object.assign(waterfallColors, theme.waterfall)
+	return theme
+}
+
+export const cycleThemeName = (current: ThemeName) => {
+	const nextIndex = (themeOrder.indexOf(current) + 1) % themeOrder.length
+	return themeOrder[nextIndex] ?? themeOrder[0]
+}
+
+export const themeLabel = (name: ThemeName) => themes[name]?.label ?? motelDefaultTheme.label
+
+export const SEPARATOR = " \u00b7 "
+export const G_PREFIX_TIMEOUT_MS = 500

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/traceSortNav.repro.seed.ts

@@ -0,0 +1,62 @@
+/**
+ * Seed script for traceSortNav.repro.test.ts. Invoked as a child process so
+ * `config.ts` picks up our test DB path at module-load time.
+ */
+
+import { Effect } from "effect"
+import { storeRuntime } from "../runtime.ts"
+import { TelemetryStore } from "../services/TelemetryStore.ts"
+
+const SERVICE_NAME = "sort-nav-repro"
+const base = BigInt(Date.now()) * 1_000_000n
+const ms = (n: number) => String(base + BigInt(n) * 1_000_000n)
+
+// A is the oldest, E is the newest. Durations are arranged so the three
+// sort orders we care about all differ:
+//   recent   = [E, D, C, B, A]
+//   slowest  = [D, B, E, A, C]
+//   errors   = none set, falls back to recency
+// Enough traces that the list scrolls in a typical 40-row terminal, and
+// enough duration spread that `slowest` order is meaningfully different
+// from `recent`.
+const specs: ReadonlyArray<{ id: string; op: string; startMsAgo: number; durMs: number }> = [
+	{ id: "a", op: "opA", startMsAgo: 1500, durMs: 10 },
+	{ id: "b", op: "opB", startMsAgo: 1400, durMs: 50 },
+	{ id: "c", op: "opC", startMsAgo: 1300, durMs: 5 },
+	{ id: "d", op: "opD", startMsAgo: 1200, durMs: 100 },
+	{ id: "e", op: "opE", startMsAgo: 1100, durMs: 25 },
+	{ id: "f", op: "opF", startMsAgo: 1000, durMs: 75 },
+	{ id: "g", op: "opG", startMsAgo: 900, durMs: 3 },
+	{ id: "h", op: "opH", startMsAgo: 800, durMs: 200 },
+	{ id: "i", op: "opI", startMsAgo: 700, durMs: 15 },
+	{ id: "j", op: "opJ", startMsAgo: 600, durMs: 60 },
+	{ id: "k", op: "opK", startMsAgo: 500, durMs: 1 },
+	{ id: "l", op: "opL", startMsAgo: 400, durMs: 150 },
+	{ id: "m", op: "opM", startMsAgo: 300, durMs: 40 },
+	{ id: "n", op: "opN", startMsAgo: 200, durMs: 20 },
+	{ id: "o", op: "opO", startMsAgo: 100, durMs: 7 },
+]
+
+const resourceSpans = specs.map((spec) => ({
+	resource: { attributes: [{ key: "service.name", value: { stringValue: SERVICE_NAME } }] },
+	scopeSpans: [
+		{
+			scope: { name: "s" },
+			spans: [
+				{
+					traceId: spec.id.repeat(32),
+					spanId: spec.id.repeat(16),
+					name: spec.op,
+					kind: 1,
+					startTimeUnixNano: ms(-spec.startMsAgo),
+					endTimeUnixNano: ms(-spec.startMsAgo + spec.durMs),
+				},
+			],
+		},
+	],
+}))
+
+await storeRuntime.runPromise(
+	Effect.flatMap(TelemetryStore.asEffect(), (store) => store.ingestTraces({ resourceSpans })),
+)
+process.exit(0)