@kitlangton/motel 0.1.0

package/src/ui/TraceDetailsPane.tsx

@@ -0,0 +1,169 @@
+import { useMemo } from "react"
+import type { TraceItem, TraceSummaryItem } from "../domain.ts"
+import { formatDuration, formatShortDate, formatTimestamp } from "./format.ts"
+import { AlignedHeaderLine, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import { getVisibleSpans, WaterfallTimeline } from "./Waterfall.tsx"
+import type { LoadStatus, LogState } from "./state.ts"
+import { colors, SEPARATOR } from "./theme.ts"
+
+/**
+ * Level-1 view: trace header + waterfall timeline body.
+ *
+ * Does not try to render a span detail/preview — the App orchestrates
+ * Level-2 layout separately (either as a second horizontal pane in wide
+ * mode, or as a full-screen takeover in narrow mode).
+ *
+ * Total height: `bodyLines + HEADER_ROWS`.
+ */
+export const TRACE_DETAILS_HEADER_ROWS = 4
+
+export const TraceDetailsPane = ({
+	trace,
+	traceSummary,
+	traceStatus,
+	traceError,
+	traceLogsState,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	focused = false,
+	onSelectSpan,
+}: {
+	trace: TraceItem | null
+	traceSummary: TraceSummaryItem | null
+	traceStatus: LoadStatus
+	traceError: string | null
+	traceLogsState: LogState
+	contentWidth: number
+	bodyLines: number
+	paneWidth: number
+	selectedSpanIndex: number | null
+	collapsedSpanIds: ReadonlySet<string>
+	focused?: boolean
+	onSelectSpan: (index: number) => void
+}) => {
+	const filteredSpans = useMemo(
+		() => 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 traceMeta = trace ?? traceSummary
+	const hasTraceSelection = traceSummary !== null
+	const isLoadingTrace = hasTraceSelection && trace === null && traceStatus !== "error"
+
+	const focusIndicator = focused ? "\u25b8 " : ""
+	const headerTitle = `${focusIndicator}TRACE DETAILS`
+	const headerRight = traceMeta
+		? `${traceMeta.errorCount > 0 ? `${traceMeta.errorCount} errors` : traceMeta.isRunning ? "running" : isLoadingTrace ? "loading" : "healthy"} \u00b7 ${formatDuration(traceMeta.durationMs)}${traceLogCount > 0 ? ` \u00b7 ${traceLogCount} logs` : ""}`
+		: traceStatus === "error"
+			? "trace unavailable"
+			: "waiting for trace"
+	const headerColor = isLoadingTrace
+		? colors.count
+		: traceMeta?.isRunning
+		? colors.warning
+		: traceMeta && traceMeta.errorCount > 0
+		? colors.error
+		: colors.passing
+
+	const dateStr = traceMeta ? `${formatShortDate(traceMeta.startedAt)} ${formatTimestamp(traceMeta.startedAt)}` : ""
+	const opLeft = traceMeta?.rootOperationName ?? ""
+	const opGap = Math.max(2, contentWidth - opLeft.length - dateStr.length)
+	const warningCount = traceMeta?.warnings.length ?? 0
+	const firstWarning = traceMeta?.warnings[0] ?? ""
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + TRACE_DETAILS_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left={headerTitle} right={headerRight} width={contentWidth} rightFg={headerColor} />
+			</box>
+			{trace ? (
+				<>
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<TextLine>
+							<span>{opLeft}</span>
+							<span>{" ".repeat(opGap)}</span>
+							<span fg={colors.muted}>{dateStr}</span>
+						</TextLine>
+						{warningCount > 0 ? (
+							<TextLine>
+								<span fg={colors.defaultService}>{trace.serviceName}</span>
+								<span fg={colors.separator}>{SEPARATOR}</span>
+								<span fg={colors.count}>{trace.spanCount} spans</span>
+								<span fg={colors.separator}>{SEPARATOR}</span>
+								<span fg={colors.error}>{warningCount} warning{warningCount === 1 ? "" : "s"}: {firstWarning}</span>
+							</TextLine>
+						) : (
+							<TextLine>
+								<span fg={colors.defaultService}>{trace.serviceName}</span>
+								<span fg={colors.separator}>{SEPARATOR}</span>
+								<span fg={colors.count}>{trace.spanCount} spans</span>
+								<span fg={colors.separator}>{SEPARATOR}</span>
+								<span fg={colors.muted}>{trace.traceId.slice(0, 16)}</span>
+							</TextLine>
+						)}
+					</box>
+					<Divider width={paneWidth} />
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<WaterfallTimeline
+							trace={trace}
+							filteredSpans={filteredSpans}
+							spanLogCounts={spanLogCounts}
+							selectedSpanLogs={selectedSpanLogs}
+							contentWidth={contentWidth}
+							bodyLines={bodyLines}
+							selectedSpanIndex={selectedSpanIndex}
+							collapsedSpanIds={collapsedSpanIds}
+							onSelectSpan={onSelectSpan}
+						/>
+					</box>
+				</>
+			) : isLoadingTrace && traceMeta ? (
+				<>
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<TextLine>
+							<span>{opLeft}</span>
+							<span>{" ".repeat(opGap)}</span>
+							<span fg={colors.muted}>{dateStr}</span>
+						</TextLine>
+						<TextLine>
+							<span fg={colors.defaultService}>{traceMeta.serviceName}</span>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.count}>{traceMeta.spanCount} spans</span>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.count}>warming adjacent trace...</span>
+						</TextLine>
+					</box>
+					<Divider width={paneWidth} />
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<PlainLine text="Loading trace details..." fg={colors.count} />
+					</box>
+				</>
+			) : hasTraceSelection && traceStatus === "error" ? (
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<PlainLine text={traceError ?? "Could not load trace."} fg={colors.error} />
+				</box>
+			) : (
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<PlainLine text="No trace selected. Use j/k in the trace list." fg={colors.muted} />
+				</box>
+			)}
+		</box>
+	)
+}

package/src/ui/TraceList.tsx

@@ -0,0 +1,128 @@
+import { TextAttributes } from "@opentui/core"
+import { memo } from "react"
+import { config } from "../config.ts"
+import type { TraceSummaryItem } from "../domain.ts"
+import { fitCell, formatDuration, lifecycleLabel, relativeTime, traceIndicator, traceIndicatorColor, traceRowId } from "./format.ts"
+import { PlainLine, TextLine } from "./primitives.tsx"
+import type { LoadStatus } from "./state.ts"
+import { colors } from "./theme.ts"
+
+const getTraceRowLayout = (contentWidth: number) => {
+	const stateWidth = 1
+	const durationWidth = 8
+	const countWidth = 6
+	const ageWidth = 4
+	// Keep the operation column intentionally capped so the metrics cluster stays
+	// visually closer, but still allow common operation names to fit cleanly.
+	const titleWidth = Math.min(20, Math.max(8, contentWidth - stateWidth - durationWidth - countWidth - ageWidth - 2))
+	return { stateWidth, durationWidth, countWidth, ageWidth, titleWidth }
+}
+
+const fitTraceTitle = (text: string, width: number) => {
+	if (width <= 0) return ""
+	return text.length <= width ? text.padEnd(width, " ") : text.slice(0, width)
+}
+
+const TraceRow = ({
+	trace,
+	selected,
+	contentWidth,
+	onSelect,
+}: {
+	trace: TraceSummaryItem
+	selected: boolean
+	contentWidth: number
+	onSelect: () => void
+}) => {
+	const { stateWidth, durationWidth, countWidth, ageWidth, titleWidth } = getTraceRowLayout(contentWidth)
+	const title = trace.isRunning
+		? `${trace.rootOperationName} [${lifecycleLabel(trace)}]`
+		: trace.rootOperationName
+	const titleColor = selected ? colors.selectedText : trace.isRunning ? colors.warning : colors.text
+
+	return (
+		<box id={traceRowId(trace.traceId)} height={1} onMouseDown={onSelect}>
+			<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+				<span fg={traceIndicatorColor(trace)}>{fitCell(traceIndicator(trace), stateWidth)}</span>
+				<span> </span>
+				<span fg={titleColor}>{fitTraceTitle(title, titleWidth)}</span>
+				<span fg={selected ? colors.accent : colors.count}>{fitCell(trace.durationMs >= 1 ? formatDuration(trace.durationMs) : "", durationWidth, "right")}</span>
+				<span> </span>
+				<span fg={colors.muted}>{fitCell(`${trace.spanCount}sp`, countWidth, "right")}</span>
+				<span> </span>
+				<span fg={colors.muted}>{fitCell(relativeTime(trace.startedAt), ageWidth, "right")}</span>
+			</TextLine>
+		</box>
+	)
+}
+
+export interface TraceListProps {
+	readonly traces: readonly TraceSummaryItem[]
+	readonly selectedTraceId: string | null
+	readonly status: LoadStatus
+	readonly error: string | null
+	readonly contentWidth: number
+	readonly services: readonly string[]
+	readonly selectedService: string | null
+	readonly focused?: boolean
+	readonly filterText?: string
+	readonly sortMode?: string
+	readonly totalCount?: number
+	readonly onSelectTrace: (traceId: string) => void
+}
+
+export const TraceList = ({
+	showHeader,
+	traces,
+	selectedTraceId,
+	status,
+	error,
+	contentWidth,
+	services,
+	selectedService,
+	focused = true,
+	filterText,
+	sortMode,
+	totalCount,
+	onSelectTrace,
+}: { showHeader: boolean } & TraceListProps) => {
+	if (showHeader) {
+		const countLabel = totalCount !== undefined && totalCount !== traces.length ? `${traces.length}/${totalCount}` : traces.length > 0 ? String(traces.length) : ""
+		const metaLabel = [
+			filterText ? `filter: ${filterText}` : null,
+			sortMode && sortMode !== "recent" ? `sort: ${sortMode}` : null,
+		].filter((part): part is string => part !== null).join(" · ")
+		const serviceLabel = services.length > 1 && selectedService
+			? `${services.length} services`
+			: ""
+		const leftLabel = `TRACES${countLabel ? ` ${countLabel}` : ""}${metaLabel ? ` · ${metaLabel}` : ""}`
+		const gap = Math.max(2, contentWidth - leftLabel.length - serviceLabel.length)
+		return (
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>TRACES</span>
+				{countLabel ? <span fg={colors.muted}>{` ${countLabel}`}</span> : null}
+				{metaLabel ? <span fg={colors.muted}>{` · ${metaLabel}`}</span> : null}
+				<span fg={colors.muted}>{" ".repeat(gap)}</span>
+				<span fg={colors.muted}>{serviceLabel}</span>
+			</TextLine>
+		)
+	}
+
+	return (
+		<box flexDirection="column">
+			{status === "loading" && traces.length === 0 ? <PlainLine text="Loading traces..." fg={colors.muted} /> : null}
+			{status === "error" ? <PlainLine text={error ?? "Could not load traces."} fg={colors.error} /> : null}
+			{status === "ready" && services.length === 0 ? <PlainLine text="No services reporting yet. Start your app and emit a span." fg={colors.muted} /> : null}
+			{status === "ready" && selectedService && traces.length === 0 ? <PlainLine text="No traces in the current lookback window." fg={colors.muted} /> : null}
+			{traces.map((trace) => (
+				<TraceRow
+					key={trace.traceId}
+					trace={trace}
+					selected={trace.traceId === selectedTraceId}
+					contentWidth={contentWidth}
+					onSelect={() => onSelectTrace(trace.traceId)}
+				/>
+			))}
+		</box>
+	)
+}