@kitlangton/motel 0.1.3 → 0.2.1

package/src/ui/waterfallFilter.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from "bun:test"
+import type { TraceSpanItem } from "../domain.ts"
+import { computeMatchingSpanIds, findAdjacentMatch, spanMatchesFilter } from "./waterfallFilter.ts"
+
+const span = (spanId: string, operationName: string, tags: Record<string, string> = {}): TraceSpanItem => ({
+	spanId,
+	parentSpanId: null,
+	serviceName: "test",
+	scopeName: null,
+	kind: null,
+	operationName,
+	startTime: new Date(0),
+	isRunning: false,
+	durationMs: 1,
+	status: "ok",
+	depth: 0,
+	tags,
+	warnings: [],
+	events: [],
+})
+
+describe("spanMatchesFilter", () => {
+	it("matches operation name case-insensitively", () => {
+		expect(spanMatchesFilter(span("a", "ai.StreamText"), "stream")).toBe(true)
+		expect(spanMatchesFilter(span("a", "ai.StreamText"), "nope")).toBe(false)
+	})
+
+	it("matches tag values but not keys", () => {
+		expect(spanMatchesFilter(span("a", "op", { "ai.model.id": "claude" }), "claude")).toBe(true)
+		// Key-only match should not count, otherwise searching "ai" dims nothing.
+		expect(spanMatchesFilter(span("a", "op", { "ai.model.id": "claude" }), "model.id")).toBe(false)
+	})
+
+	it("returns true when the needle is empty", () => {
+		expect(spanMatchesFilter(span("a", "op"), "")).toBe(true)
+	})
+})
+
+describe("computeMatchingSpanIds", () => {
+	it("returns null for empty/whitespace filter", () => {
+		expect(computeMatchingSpanIds([span("a", "op")], "")).toBeNull()
+		expect(computeMatchingSpanIds([span("a", "op")], "   ")).toBeNull()
+	})
+
+	it("returns only matching span ids", () => {
+		const spans = [span("a", "ai.streamText"), span("b", "Agent.get"), span("c", "ai.toolCall")]
+		const ids = computeMatchingSpanIds(spans, "ai")
+		expect(ids).not.toBeNull()
+		expect(Array.from(ids!)).toEqual(["a", "c"])
+	})
+})
+
+describe("findAdjacentMatch", () => {
+	const spans = [span("a", "one"), span("b", "two"), span("c", "three"), span("d", "four")]
+	const matches = new Set(["b", "d"])
+
+	it("finds next from current selection", () => {
+		expect(findAdjacentMatch(spans, matches, 0, 1)).toBe(1)  // a -> b
+		expect(findAdjacentMatch(spans, matches, 1, 1)).toBe(3)  // b -> d
+	})
+
+	it("wraps forward past the end", () => {
+		expect(findAdjacentMatch(spans, matches, 3, 1)).toBe(1)  // d -> b (wrap)
+	})
+
+	it("finds previous from current selection", () => {
+		expect(findAdjacentMatch(spans, matches, 3, -1)).toBe(1) // d -> b
+		expect(findAdjacentMatch(spans, matches, 1, -1)).toBe(3) // b -> d (wrap)
+	})
+
+	it("starts from beginning/end when nothing is selected", () => {
+		expect(findAdjacentMatch(spans, matches, null, 1)).toBe(1)  // forward → first match
+		expect(findAdjacentMatch(spans, matches, null, -1)).toBe(3) // backward → last match
+	})
+
+	it("returns null when there are no matches", () => {
+		expect(findAdjacentMatch(spans, new Set(), 0, 1)).toBeNull()
+	})
+
+	it("handles a single match by returning it regardless of direction", () => {
+		expect(findAdjacentMatch(spans, new Set(["c"]), 0, 1)).toBe(2)
+		expect(findAdjacentMatch(spans, new Set(["c"]), 0, -1)).toBe(2)
+	})
+})

package/src/ui/waterfallFilter.ts

@@ -0,0 +1,59 @@
+import type { TraceSpanItem } from "../domain.ts"
+
+/**
+ * Case-insensitive substring match against a span's operation name and
+ * any of its tag values. Keys aren't checked — they're dotted
+ * identifiers the user never types, so matching them just creates false
+ * positives on bare tokens like "ai" or "response".
+ */
+export const spanMatchesFilter = (span: TraceSpanItem, needle: string): boolean => {
+	if (!needle) return true
+	if (span.operationName.toLowerCase().includes(needle)) return true
+	for (const value of Object.values(span.tags)) {
+		if (typeof value === "string" && value.toLowerCase().includes(needle)) return true
+	}
+	return false
+}
+
+/**
+ * Compute the set of span IDs that match the given filter text. Returns
+ * null when the filter is empty so callers can skip dimming entirely
+ * (hot path during waterfall scrolling).
+ */
+export const computeMatchingSpanIds = (
+	spans: readonly TraceSpanItem[],
+	filterText: string,
+): ReadonlySet<string> | null => {
+	const needle = filterText.trim().toLowerCase()
+	if (!needle) return null
+	const matches = new Set<string>()
+	for (const span of spans) {
+		if (spanMatchesFilter(span, needle)) matches.add(span.spanId)
+	}
+	return matches
+}
+
+/**
+ * Find the next (direction=1) or previous (direction=-1) matching span
+ * index in `filteredSpans` relative to `currentIndex`. Wraps around the
+ * ends. Returns `null` when the list has no matches at all. When
+ * `currentIndex` is null (nothing selected), starts from either end
+ * based on direction.
+ */
+export const findAdjacentMatch = (
+	filteredSpans: readonly TraceSpanItem[],
+	matchingSpanIds: ReadonlySet<string>,
+	currentIndex: number | null,
+	direction: 1 | -1,
+): number | null => {
+	if (filteredSpans.length === 0 || matchingSpanIds.size === 0) return null
+	const start = currentIndex ?? (direction === 1 ? -1 : filteredSpans.length)
+	const n = filteredSpans.length
+	// Walk the ring exactly once so we wrap but never loop forever.
+	for (let step = 1; step <= n; step++) {
+		const idx = ((start + direction * step) % n + n) % n
+		const span = filteredSpans[idx]
+		if (span && matchingSpanIds.has(span.spanId)) return idx
+	}
+	return null
+}

package/src/ui/waterfallModel.ts

@@ -0,0 +1,130 @@
+import type { LogItem, TraceSpanItem } from "../domain.ts"
+import { formatDuration } from "./format.ts"
+
+/** Filter spans to only those visible given a set of collapsed span IDs. */
+export const getVisibleSpans = (spans: readonly TraceSpanItem[], collapsedIds: ReadonlySet<string>): readonly TraceSpanItem[] => {
+	if (collapsedIds.size === 0) return spans
+	const result: TraceSpanItem[] = []
+	let skipDepth = -1
+	for (const span of spans) {
+		if (skipDepth >= 0 && span.depth > skipDepth) continue
+		skipDepth = -1
+		result.push(span)
+		if (collapsedIds.has(span.spanId)) {
+			skipDepth = span.depth
+		}
+	}
+	return result
+}
+
+/** Find the index of a span's parent in the visible list. */
+export const findParentIndex = (spans: readonly TraceSpanItem[], index: number): number | null => {
+	const span = spans[index]
+	if (!span || span.depth === 0) return null
+	for (let i = index - 1; i >= 0; i--) {
+		if (spans[i]!.depth < span.depth) return i
+	}
+	return null
+}
+
+/** Find the index of a span's first child in the visible list. */
+export const findFirstChildIndex = (spans: readonly TraceSpanItem[], index: number): number | null => {
+	const span = spans[index]
+	const next = spans[index + 1]
+	if (span && next && next.depth > span.depth) return index + 1
+	return null
+}
+
+export const buildTreePrefix = (spans: readonly TraceSpanItem[], index: number): string => {
+	const span = spans[index]
+	if (span.depth === 0) return ""
+
+	const parts: string[] = []
+
+	const isLastChild = (spanIndex: number, depth: number): boolean => {
+		for (let i = spanIndex + 1; i < spans.length; i++) {
+			if (spans[i].depth < depth) return true
+			if (spans[i].depth === depth) return false
+		}
+		return true
+	}
+
+	parts.push(isLastChild(index, span.depth) ? "\u2514\u2500" : "\u251c\u2500")
+
+	for (let d = span.depth - 1; d >= 1; d--) {
+		let parentIndex = index
+		for (let i = index - 1; i >= 0; i--) {
+			if (spans[i].depth === d) {
+				parentIndex = i
+				break
+			}
+			if (spans[i].depth < d) break
+		}
+		parts.push(isLastChild(parentIndex, d) ? "  " : "\u2502 ")
+	}
+
+	return parts.reverse().join("")
+}
+
+const INTERESTING_TAGS = [
+	"http.method", "http.url", "http.status_code", "http.route",
+	"db.system", "db.statement", "db.name",
+	"messaging.system", "messaging.destination",
+	"error", "error.message",
+	"net.peer.name", "net.peer.port",
+] as const
+
+export const getWaterfallLayout = (contentWidth: number, suffixWidth: number) => {
+	const gapsAndSuffix = suffixWidth + 2
+	const remaining = Math.max(4, contentWidth - gapsAndSuffix)
+	const labelMaxWidth = Math.max(4, Math.min(Math.floor(remaining * 0.5), 32))
+	const barWidth = Math.max(1, contentWidth - labelMaxWidth - gapsAndSuffix)
+	return { labelMaxWidth, barWidth } as const
+}
+
+export type WaterfallSuffixMetrics = {
+	readonly maxDurationWidth: number
+	readonly suffixWidth: number
+}
+
+export const getWaterfallSuffixMetrics = (
+	spans: readonly { readonly durationMs: number; readonly spanId: string }[],
+): WaterfallSuffixMetrics => {
+	let maxDurationWidth = 0
+	for (const span of spans) {
+		const d = formatDuration(Math.max(0, span.durationMs)).length
+		if (d > maxDurationWidth) maxDurationWidth = d
+	}
+	return { maxDurationWidth, suffixWidth: maxDurationWidth }
+}
+
+export const getWaterfallColumns = (
+	contentWidth: number,
+	metrics: WaterfallSuffixMetrics,
+) => {
+	const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, metrics.suffixWidth)
+	return { labelMaxWidth, barWidth, suffixWidth: metrics.suffixWidth } as const
+}
+
+export const spanPreviewEntries = (span: TraceSpanItem, logs: readonly LogItem[], maxEntries: number): Array<{ key: string; value: string; isWarning?: boolean }> => {
+	const entries = Object.entries(span.tags)
+	const interesting = entries.filter(([key]) =>
+		INTERESTING_TAGS.includes(key as (typeof INTERESTING_TAGS)[number]) || key.startsWith("error"),
+	)
+	const rest = entries.filter(([key]) =>
+		!INTERESTING_TAGS.includes(key as (typeof INTERESTING_TAGS)[number]) && !key.startsWith("error") && !key.startsWith("otel.") && key !== "span.kind",
+	)
+	const tagResults: Array<{ key: string; value: string; isWarning?: boolean }> = []
+	if (logs.length > 0) {
+		tagResults.push({ key: "logs", value: `${logs.length} correlated` })
+		tagResults.push({ key: "log", value: logs[0]!.body.replace(/\s+/g, " ") })
+	}
+
+	tagResults.push(...[...interesting, ...rest]
+		.slice(0, maxEntries - span.warnings.length)
+		.map(([key, value]) => ({ key, value })))
+	for (const warning of span.warnings) {
+		tagResults.push({ key: "warning", value: warning, isWarning: true })
+	}
+	return tagResults.slice(0, maxEntries)
+}

package/src/ui/waterfallNav.test.ts

@@ -6,7 +6,7 @@ import {
 	getWaterfallLayout,
 	getWaterfallSuffixMetrics,
 	getVisibleSpans,
-} from "./Waterfall.tsx"
+} from "./waterfallModel.ts"
 import { resolveCollapseStep } from "./waterfallNav.ts"
 
 // ---------------------------------------------------------------------------
@@ -153,6 +153,22 @@ describe("getWaterfallSuffixMetrics", () => {
 		// label + 1 (gap before bar) + bar + 1 (gap before suffix) + suffix = contentWidth
 		expect(labelMaxWidth + 1 + barWidth + 1 + metrics.suffixWidth).toBe(contentWidth)
 	})
+
+	it("layout fits inside contentWidth at narrow widths without overflow", () => {
+		// Regression guard: a prior `max(6, ...)` floor on barWidth caused
+		// the total row width to exceed contentWidth at narrow panes,
+		// which in turn made OpenTUI's truncate add "..." suffixes
+		// across the right edge. Every width in this sweep must satisfy
+		// label + 1 + bar + 1 + suffix == contentWidth.
+		for (let contentWidth = 14; contentWidth <= 120; contentWidth++) {
+			for (const suffixWidth of [3, 5, 7]) {
+				const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, suffixWidth)
+				expect(labelMaxWidth + 1 + barWidth + 1 + suffixWidth).toBe(contentWidth)
+				expect(barWidth).toBeGreaterThanOrEqual(1)
+				expect(labelMaxWidth).toBeGreaterThanOrEqual(4)
+			}
+		}
+	})
 })
 
 // ---------------------------------------------------------------------------

package/src/ui/waterfallNav.ts

@@ -1,5 +1,5 @@
 import type { TraceSpanItem } from "../domain.ts"
-import { findFirstChildIndex, findParentIndex, getVisibleSpans } from "./Waterfall.tsx"
+import { findFirstChildIndex, findParentIndex, getVisibleSpans } from "./waterfallModel.ts"
 
 export type CollapseStep = {
 	readonly collapsed: ReadonlySet<string>