@kitlangton/motel 0.2.0 → 0.2.4

package/src/ui/TraceDetailsPane.tsx

@@ -2,9 +2,10 @@ import { useMemo } from "react"
 import type { TraceItem, TraceSummaryItem } from "../domain.ts"
 import { formatDuration, formatShortDate, formatTimestamp } from "./format.ts"
 import { AlignedHeaderLine, Divider, FilterBar, PlainLine, TextLine } from "./primitives.tsx"
-import { getVisibleSpans, WaterfallTimeline } from "./Waterfall.tsx"
+import { WaterfallTimeline } from "./Waterfall.tsx"
 import { computeMatchingSpanIds } from "./waterfallFilter.ts"
-import type { LoadStatus, LogState } from "./state.ts"
+import { getVisibleSpans } from "./waterfallModel.ts"
+import type { LoadStatus } from "./state.ts"
 import { colors, SEPARATOR } from "./theme.ts"
 
 /**
@@ -23,13 +24,12 @@ export const TraceDetailsPane = ({
 	traceSummary,
 	traceStatus,
 	traceError,
-	traceLogsState,
+	traceLogCount,
 	contentWidth,
 	bodyLines,
 	paneWidth,
 	selectedSpanIndex,
 	collapsedSpanIds,
-	focused = false,
 	onSelectSpan,
 	waterfallFilterMode,
 	waterfallFilterText,
@@ -38,13 +38,12 @@ export const TraceDetailsPane = ({
 	traceSummary: TraceSummaryItem | null
 	traceStatus: LoadStatus
 	traceError: string | null
-	traceLogsState: LogState
+	traceLogCount: number
 	contentWidth: number
 	bodyLines: number
 	paneWidth: number
 	selectedSpanIndex: number | null
 	collapsedSpanIds: ReadonlySet<string>
-	focused?: boolean
 	onSelectSpan: (index: number) => void
 	waterfallFilterMode: boolean
 	waterfallFilterText: string
@@ -53,20 +52,6 @@ export const TraceDetailsPane = ({
 		() => trace ? getVisibleSpans(trace.spans, collapsedSpanIds) : [],
 		[trace, collapsedSpanIds],
 	)
-	const selectedSpan = selectedSpanIndex !== null ? filteredSpans[selectedSpanIndex] ?? null : null
-	const traceLogCount = traceLogsState.data.length
-	const spanLogCounts = useMemo(() => {
-		const counts = new Map<string, number>()
-		for (const log of traceLogsState.data) {
-			if (!log.spanId) continue
-			counts.set(log.spanId, (counts.get(log.spanId) ?? 0) + 1)
-		}
-		return counts
-	}, [traceLogsState.data])
-	const selectedSpanLogs = useMemo(
-		() => selectedSpan ? traceLogsState.data.filter((log) => log.spanId === selectedSpan.spanId) : [],
-		[selectedSpan, traceLogsState.data],
-	)
 	const matchingSpanIds = useMemo(
 		() => trace ? computeMatchingSpanIds(trace.spans, waterfallFilterText) : null,
 		[trace, waterfallFilterText],
@@ -143,14 +128,12 @@ export const TraceDetailsPane = ({
 						</box>
 					) : null}
 					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-						<WaterfallTimeline
-							trace={trace}
-							filteredSpans={filteredSpans}
-							spanLogCounts={spanLogCounts}
-							selectedSpanLogs={selectedSpanLogs}
-							contentWidth={contentWidth}
-							bodyLines={waterfallBodyLines}
-							selectedSpanIndex={selectedSpanIndex}
+					<WaterfallTimeline
+						trace={trace}
+						filteredSpans={filteredSpans}
+						contentWidth={contentWidth}
+						bodyLines={waterfallBodyLines}
+						selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
 							matchingSpanIds={matchingSpanIds}
 							onSelectSpan={onSelectSpan}

package/src/ui/Waterfall.tsx

@@ -1,81 +1,17 @@
-import { memo, useLayoutEffect, useRef, useState } from "react"
-import type { LogItem, TraceItem, TraceSpanItem } from "../domain.ts"
+import { memo, useLayoutEffect, useState } from "react"
+import { isAiSpan, type LogItem, type TraceItem, type TraceSpanItem } from "../domain.ts"
 import { formatDuration, lifecycleLabel, splitDuration, truncateText } from "./format.ts"
 import { BlankRow, TextLine } from "./primitives.tsx"
 import { colors, waterfallColors } from "./theme.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
-}
-
-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
-
-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("")
-}
+export { getVisibleSpans } from "./waterfallModel.ts"
+import {
+	buildTreePrefix,
+	findFirstChildIndex,
+	getWaterfallLayout,
+	getWaterfallSuffixMetrics,
+	type WaterfallSuffixMetrics,
+	spanPreviewEntries,
+} from "./waterfallModel.ts"
 
 const PARTIAL_BLOCKS = ["", "\u258f", "\u258e", "\u258d", "\u258c", "\u258b", "\u258a", "\u2589", "\u2588"] as const
 const ULTRA_SHORT_MARKERS = ["\u258f", "\u258e", "\u258d", "\u258c"] as const
@@ -180,66 +116,6 @@ const durationColor = (durationMs: number) => {
 	return colors.muted
 }
 
-export const getWaterfallLayout = (contentWidth: number, suffixWidth: number) => {
-	const labelMaxWidth = Math.min(Math.floor(contentWidth * 0.4), 32)
-	// Two single-space gaps: one between label and bar, one between bar and suffix.
-	const barWidth = Math.max(6, contentWidth - labelMaxWidth - suffixWidth - 2)
-	return { labelMaxWidth, barWidth } as const
-}
-
-export type WaterfallSuffixMetrics = {
-	readonly maxDurationWidth: number
-	readonly suffixWidth: number
-}
-
-/**
- * Compute a shared suffix (duration) width from the visible viewport.
- * Reserving the width once keeps every row's duration right-aligned on the
- * same column regardless of per-row content. Log correlation lives in the
- * span detail pane, not the row suffix.
- */
-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 }
-}
-
-// Retained for tests: per-row view of the shared layout.
-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)
-}
 
 const WaterfallRow = memo(({
 	span,
@@ -267,14 +143,33 @@ const WaterfallRow = memo(({
 	onSelect: () => void
 }) => {
 	const prefix = buildTreePrefix(spans, index)
-	// Match the trace list indicator: `!` on error, chevron on collapsible parents, `·` on leaves.
-	const indicator = span.status === "error" ? "!" : hasChildSpans ? (collapsed ? "\u25b8" : "\u25be") : "\u00b7"
+	const isAi = isAiSpan(span.tags)
+	// Indicator column: `!` on error, chevron on collapsible parents,
+	// `✦` on AI leaves (LLM payloads detected — enter drills into a
+	// specialized chat view), `·` on other leaves. AI parents keep the
+	// chevron glyph so tree structure stays readable; the accent color
+	// (applied below) carries the "AI content lives here" signal.
+	const indicator = span.status === "error" ? "!"
+		: hasChildSpans ? (collapsed ? "\u25b8" : "\u25be")
+		: isAi ? "\u2726"
+		: "\u00b7"
 	const opName = span.isRunning ? `${span.operationName} [${lifecycleLabel(span)}]` : span.operationName
 
 	const { labelMaxWidth, barWidth } = getWaterfallLayout(contentWidth, suffixMetrics.suffixWidth)
 
-	const opMaxWidth = Math.max(4, labelMaxWidth - prefix.length - 2)
-	const opTruncated = opName.length > opMaxWidth ? `${opName.slice(0, opMaxWidth - 1)}\u2026` : opName
+	// Op name budget = labelMaxWidth minus (prefix + indicator + 1 space).
+	// Never force a minimum: at very deep nesting or narrow widths the
+	// prefix + indicator may already fill the label column, in which
+	// case we render the op as an empty string (or a lone ellipsis) so
+	// the line stays within contentWidth. Previous code forced op to 4
+	// chars which could push total row width past the pane and make
+	// OpenTUI smear "..." across the right edge.
+	const opMaxWidth = Math.max(0, labelMaxWidth - prefix.length - 2)
+	const opTruncated = opMaxWidth === 0
+		? ""
+		: opName.length > opMaxWidth
+			? `${opName.slice(0, Math.max(0, opMaxWidth - 1))}\u2026`
+			: opName
 	const labelLen = prefix.length + 2 + opTruncated.length
 	const labelPad = " ".repeat(Math.max(0, labelMaxWidth - labelLen))
 
@@ -292,6 +187,11 @@ const WaterfallRow = memo(({
 	const indicatorColor = selected ? colors.selectedText
 		: dimmed ? colors.separator
 		: isError ? colors.error
+		// AI accent outranks parent/leaf color so both AI parents and AI
+		// leaves scan as "there's an LLM payload here" from across the
+		// waterfall. Error still wins because a failed AI span is first
+		// and foremost a failure.
+		: isAi ? colors.accent
 		: hasChildSpans ? colors.muted
 		: colors.passing
 	const opColor = selected ? colors.selectedText
@@ -380,8 +280,6 @@ export const SpanPreview = ({
 export const WaterfallTimeline = ({
 	trace,
 	filteredSpans,
-	spanLogCounts,
-	selectedSpanLogs,
 	contentWidth,
 	bodyLines,
 	selectedSpanIndex,
@@ -391,8 +289,6 @@ export const WaterfallTimeline = ({
 }: {
 	trace: TraceItem
 	filteredSpans: readonly TraceSpanItem[]
-	spanLogCounts: ReadonlyMap<string, number>
-	selectedSpanLogs: readonly LogItem[]
 	contentWidth: number
 	bodyLines: number
 	selectedSpanIndex: number | null
@@ -420,13 +316,12 @@ export const WaterfallTimeline = ({
 	const viewportSize = Math.max(1, bodyLines)
 	const maxOffset = Math.max(0, filteredSpans.length - viewportSize)
 	const [scrollOffset, setScrollOffset] = useState(0)
-	const lastTraceIdRef = useRef<string | null>(null)
 
-	// Reset scroll offset when the trace changes.
-	if (trace.traceId !== lastTraceIdRef.current) {
+	// Reset scroll offset when the trace changes. Keep this out of render so
+	// a trace switch doesn't force a render-phase state update on hot paths.
+	useLayoutEffect(() => {
 		setScrollOffset(0)
-		lastTraceIdRef.current = trace.traceId
-	}
+	}, [trace.traceId])
 
 	// Auto-follow selection: only if the selected span would be hidden
 	// by the current window, shift just enough to bring it back. Runs in