@kitlangton/motel 0.1.0

package/src/ui/Waterfall.tsx

@@ -0,0 +1,412 @@
+import { memo, useRef } from "react"
+import type { LogItem, TraceItem, TraceSpanItem } from "../domain.ts"
+import { formatDuration, lifecycleLabel, 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("")
+}
+
+const PARTIAL_BLOCKS = ["", "\u258f", "\u258e", "\u258d", "\u258c", "\u258b", "\u258a", "\u2589", "\u2588"] as const
+const ULTRA_SHORT_MARKERS = ["\u258f", "\u258e", "\u258d", "\u258c"] as const
+
+type WaterfallBarSegment = {
+	readonly text: string
+	readonly fg: string
+	readonly bg?: string
+}
+
+const renderWaterfallBar = (
+	span: TraceSpanItem,
+	trace: TraceItem,
+	barWidth: number,
+	barColor: string,
+	laneColor: string,
+): { readonly segments: readonly WaterfallBarSegment[]; readonly afterCells: number } => {
+	if (barWidth < 3 || trace.durationMs === 0) {
+		return {
+			segments: [{ text: "\u2588", fg: barColor }],
+			afterCells: Math.max(0, barWidth - 1),
+		}
+	}
+
+	const traceStart = trace.startedAt.getTime()
+	const spanStart = span.startTime.getTime()
+	const relativeStart = Math.max(0, spanStart - traceStart)
+	const startFrac = relativeStart / trace.durationMs
+	const endFrac = Math.min(1, Math.max(startFrac, (relativeStart + Math.max(0, span.durationMs)) / trace.durationMs))
+	const totalUnits = barWidth * 8
+	const startUnits = Math.max(0, Math.min(totalUnits - 1, Math.floor(startFrac * totalUnits)))
+	const endUnits = Math.max(startUnits + 1, Math.min(totalUnits, Math.ceil(endFrac * totalUnits)))
+	const startCell = Math.floor(startUnits / 8)
+	const endCell = Math.floor((endUnits - 1) / 8)
+	const startOffset = startUnits % 8
+	const endOffset = endUnits % 8
+	const segments: WaterfallBarSegment[] = []
+
+	if (startCell > 0) {
+		segments.push({ text: " ".repeat(startCell), fg: laneColor, bg: laneColor })
+	}
+
+	if (startCell === endCell) {
+		const singleCellUnits = Math.max(1, endUnits - startUnits)
+		if (singleCellUnits <= 4) {
+			const centeredMarker = ULTRA_SHORT_MARKERS[Math.max(0, singleCellUnits - 1)] ?? "\u258f"
+			segments.push({ text: centeredMarker, fg: barColor })
+			return {
+				segments,
+				afterCells: Math.max(0, barWidth - startCell - 1),
+			}
+		}
+
+		if (startOffset === 0) {
+			segments.push({ text: PARTIAL_BLOCKS[singleCellUnits], fg: barColor })
+		} else {
+			segments.push({ text: PARTIAL_BLOCKS[startOffset], fg: laneColor, bg: barColor })
+		}
+		return {
+			segments,
+			afterCells: Math.max(0, barWidth - startCell - 1),
+		}
+	}
+
+	if (startOffset > 0) {
+		segments.push({ text: PARTIAL_BLOCKS[startOffset], fg: laneColor, bg: barColor })
+	}
+
+	const fullStartCell = startCell + (startOffset > 0 ? 1 : 0)
+	const fullEndCell = endCell - (endOffset > 0 ? 1 : 0)
+	const fullCells = Math.max(0, fullEndCell - fullStartCell + 1)
+	if (fullCells > 0) {
+		segments.push({ text: "\u2588".repeat(fullCells), fg: barColor })
+	}
+
+	if (endOffset > 0) {
+		segments.push({ text: PARTIAL_BLOCKS[endOffset], fg: barColor })
+	}
+
+	return {
+		segments,
+		afterCells: Math.max(0, barWidth - endCell - 1),
+	}
+}
+
+const durationColor = (durationMs: number) => {
+	if (durationMs >= 10_000) return colors.warning
+	if (durationMs >= 1_000) return colors.accent
+	if (durationMs >= 100) return colors.count
+	if (durationMs > 0) return colors.muted
+	return colors.muted
+}
+
+export const getWaterfallLayout = (contentWidth: number, traceDurationMs: number, includeLogs = true) => {
+	const labelMaxWidth = Math.min(Math.floor(contentWidth * 0.4), 32)
+	const durationWidth = Math.max(8, formatDuration(traceDurationMs).length + 1)
+	const logWidth = includeLogs ? 5 : 0
+	const barWidth = Math.max(6, contentWidth - labelMaxWidth - durationWidth - logWidth - 2)
+	return { labelMaxWidth, durationWidth, logWidth, barWidth } as const
+}
+
+export const getWaterfallColumns = (contentWidth: number, traceDurationMs: number, durationMs: number, logCount: number, includeLogs = true) => {
+	const { labelMaxWidth, durationWidth, logWidth, barWidth } = getWaterfallLayout(contentWidth, traceDurationMs, includeLogs)
+	const durationCell = formatDuration(Math.max(0, durationMs)).padStart(durationWidth)
+	const logText = logCount > 0 ? `${logCount}lg` : ""
+	const logCell = logText.padStart(logWidth)
+	return { labelMaxWidth, durationWidth, logWidth, barWidth, durationCell, logCell } 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,
+	logCount,
+	trace,
+	index,
+	spans,
+	contentWidth,
+	selected,
+	collapsed,
+	hasChildSpans,
+	onSelect,
+	includeLogs,
+}: {
+	span: TraceSpanItem
+	logCount: number
+	trace: TraceItem
+	index: number
+	spans: readonly TraceSpanItem[]
+	contentWidth: number
+	selected: boolean
+	collapsed: boolean
+	hasChildSpans: boolean
+	onSelect: () => void
+	includeLogs: boolean
+}) => {
+	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 opName = span.isRunning ? `${span.operationName} [${lifecycleLabel(span)}]` : span.operationName
+
+	const { labelMaxWidth, barWidth, durationCell, logCell } = getWaterfallColumns(contentWidth, trace.durationMs, span.durationMs, logCount, includeLogs)
+
+	const opMaxWidth = Math.max(4, labelMaxWidth - prefix.length - 2)
+	const opTruncated = opName.length > opMaxWidth ? `${opName.slice(0, opMaxWidth - 1)}\u2026` : opName
+	const labelLen = prefix.length + 2 + opTruncated.length
+	const labelPad = " ".repeat(Math.max(0, labelMaxWidth - labelLen))
+
+	const isError = span.status === "error"
+	const barColor = selected ? (isError ? waterfallColors.barSelectedError : waterfallColors.barSelected) : isError ? waterfallColors.barError : waterfallColors.bar
+	const laneColor = selected ? waterfallColors.barLane : waterfallColors.barBg
+	const { segments, afterCells } = renderWaterfallBar(span, trace, barWidth, barColor, laneColor)
+	const bg = selected ? colors.selectedBg : undefined
+	const treeColor = selected ? colors.separator : colors.treeLine
+	const indicatorColor = isError ? colors.error : hasChildSpans ? (selected ? colors.selectedText : colors.muted) : colors.passing
+	const opColor = selected ? colors.selectedText : span.isRunning ? colors.warning : colors.text
+
+	const durationFg = durationColor(span.durationMs)
+	const logFg = logCount > 0 ? colors.defaultService : colors.muted
+
+	return (
+		<box height={1} onMouseDown={onSelect}>
+			<TextLine bg={bg}>
+				{prefix ? <span fg={treeColor}>{prefix}</span> : null}
+				<span fg={indicatorColor}>{indicator}</span>
+				<span fg={opColor}>{` ${opTruncated}`}</span>
+				<span>{labelPad}</span>
+				<span> </span>
+				{segments.map((segment, index) => (
+					<span key={`${span.spanId}-bar-${index}`} fg={segment.fg} bg={segment.bg}>{segment.text}</span>
+				))}
+				{afterCells > 0 ? <span fg={laneColor} bg={laneColor}>{" ".repeat(afterCells)}</span> : null}
+				<span> </span>
+				<span fg={durationFg}>{durationCell}</span>
+				{logCell.length > 0 ? <span fg={logFg}>{logCell}</span> : null}
+			</TextLine>
+		</box>
+	)
+})
+WaterfallRow.displayName = "WaterfallRow"
+
+export const SpanPreview = ({
+	span,
+	logs,
+	contentWidth,
+	maxLines,
+}: {
+	span: TraceSpanItem
+	logs: readonly LogItem[]
+	contentWidth: number
+	maxLines: number
+}) => {
+	const entries = spanPreviewEntries(span, logs, maxLines)
+	if (entries.length === 0) return null
+
+	const maxKeyLen = Math.min(22, entries.reduce((max, e) => Math.max(max, e.key.length), 0))
+	const valMaxWidth = Math.max(8, contentWidth - maxKeyLen - 3)
+	const indent = " ".repeat(maxKeyLen + 2)
+
+	const lines: Array<{ keyPart: string; valPart: string; isWarning?: boolean }> = []
+	for (const entry of entries) {
+		const keyStr = entry.key.length > maxKeyLen ? `${entry.key.slice(0, maxKeyLen - 1)}\u2026` : entry.key.padEnd(maxKeyLen)
+		const val = entry.value
+		if (val.length <= valMaxWidth) {
+			lines.push({ keyPart: keyStr, valPart: val, isWarning: entry.isWarning })
+		} else {
+			let remaining = val
+			let first = true
+			while (remaining.length > 0) {
+				const chunk = remaining.slice(0, valMaxWidth)
+				remaining = remaining.slice(valMaxWidth)
+				lines.push({ keyPart: first ? keyStr : indent, valPart: chunk, isWarning: entry.isWarning })
+				first = false
+			}
+		}
+	}
+
+	return (
+		<box flexDirection="column">
+			{lines.slice(0, maxLines).map((line, i) => (
+				<TextLine key={`preview-${i}`}>
+					<span fg={line.isWarning ? colors.error : colors.previewKey}>{line.keyPart}</span>
+					<span fg={colors.separator}>  </span>
+					<span fg={line.isWarning ? colors.error : colors.muted}>{line.valPart}</span>
+				</TextLine>
+			))}
+		</box>
+	)
+}
+
+export const WaterfallTimeline = ({
+	trace,
+	filteredSpans,
+	spanLogCounts,
+	selectedSpanLogs,
+	contentWidth,
+	bodyLines,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	onSelectSpan,
+}: {
+	trace: TraceItem
+	filteredSpans: readonly TraceSpanItem[]
+	spanLogCounts: ReadonlyMap<string, number>
+	selectedSpanLogs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+	selectedSpanIndex: number | null
+	collapsedSpanIds: ReadonlySet<string>
+	onSelectSpan: (index: number) => void
+}) => {
+	const selectedSpan = selectedSpanIndex !== null ? filteredSpans[selectedSpanIndex] ?? null : null
+	const includeLogs = filteredSpans.some((span) => (spanLogCounts.get(span.spanId) ?? 0) > 0)
+
+	const spanIndexById = new Map<string, number>()
+	for (let i = 0; i < trace.spans.length; i++) {
+		spanIndexById.set(trace.spans[i].spanId, i)
+	}
+
+	// Virtual windowing: only render visible rows, shift window only when
+	// the selection would go out of view (no jerkiness).
+	const viewportSize = Math.max(1, bodyLines)
+	const scrollOffsetRef = useRef(0)
+	const lastTraceIdRef = useRef<string | null>(null)
+
+	// Reset scroll offset when the trace changes
+	if (trace.traceId !== lastTraceIdRef.current) {
+		scrollOffsetRef.current = 0
+		lastTraceIdRef.current = trace.traceId
+	}
+
+	// Only shift the window when the selection would be outside it
+	if (selectedSpanIndex !== null) {
+		if (selectedSpanIndex < scrollOffsetRef.current) {
+			scrollOffsetRef.current = selectedSpanIndex
+		} else if (selectedSpanIndex >= scrollOffsetRef.current + viewportSize) {
+			scrollOffsetRef.current = selectedSpanIndex - viewportSize + 1
+		}
+	}
+	scrollOffsetRef.current = Math.max(0, Math.min(scrollOffsetRef.current, Math.max(0, filteredSpans.length - viewportSize)))
+
+	const windowStart = scrollOffsetRef.current
+	const windowSpans = filteredSpans.slice(windowStart, windowStart + viewportSize)
+	const blankCount = Math.max(0, viewportSize - windowSpans.length)
+
+	return (
+		<box flexDirection="column">
+			{windowSpans.map((span, index) => {
+				const actualIndex = windowStart + index
+				const fullIndex = spanIndexById.get(span.spanId) ?? -1
+				return (
+					<WaterfallRow
+						key={`${trace.traceId}-${span.spanId}`}
+						span={span}
+						logCount={spanLogCounts.get(span.spanId) ?? 0}
+						trace={trace}
+						index={fullIndex}
+						spans={trace.spans}
+						contentWidth={contentWidth}
+						selected={selectedSpanIndex === actualIndex}
+						collapsed={collapsedSpanIds.has(span.spanId)}
+						hasChildSpans={fullIndex >= 0 && findFirstChildIndex(trace.spans, fullIndex) !== null}
+						includeLogs={includeLogs}
+						onSelect={() => onSelectSpan(actualIndex)}
+					/>
+				)
+			})}
+			{Array.from({ length: blankCount }, (_, i) => (
+				<BlankRow key={`blank-${i}`} />
+			))}
+		</box>
+	)
+}

package/src/ui/app/TraceListPane.tsx

@@ -0,0 +1,34 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+import { FilterBar } from "../primitives.tsx"
+import { TraceList, type TraceListProps } from "../TraceList.tsx"
+
+interface TraceListPaneProps {
+	readonly traceListProps: TraceListProps
+	readonly filterMode: boolean
+	readonly filterText: string
+	readonly filterWidth: number
+	readonly containerHeight: number
+	readonly bodyHeight: number
+	readonly padding: number
+	readonly scrollRef: RefObject<ScrollBoxRenderable | null>
+}
+
+export const TraceListPane = ({
+	traceListProps,
+	filterMode,
+	filterText,
+	filterWidth,
+	containerHeight,
+	bodyHeight,
+	padding,
+	scrollRef,
+}: TraceListPaneProps) => (
+	<box height={containerHeight} flexDirection="column" paddingLeft={padding} paddingRight={padding}>
+		<TraceList showHeader {...traceListProps} />
+		{filterMode ? <FilterBar text={filterText} width={filterWidth} /> : null}
+		<scrollbox ref={scrollRef} height={filterMode ? bodyHeight - 1 : bodyHeight} flexGrow={0}>
+			<TraceList showHeader={false} {...traceListProps} />
+		</scrollbox>
+	</box>
+)

package/src/ui/app/TraceWorkspace.tsx

@@ -0,0 +1,254 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+import type { LogItem, TraceItem, TraceSummaryItem } from "../../domain.ts"
+import { formatShortDate, formatTimestamp } from "../format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, SeparatorColumn, TextLine } from "../primitives.tsx"
+import { ServiceLogsView } from "../ServiceLogs.tsx"
+import { SpanDetailPane } from "../SpanDetailPane.tsx"
+import type { DetailView, LogState, ServiceLogState, TraceDetailState } from "../state.ts"
+import { colors, SEPARATOR } from "../theme.ts"
+import { TraceDetailsPane } from "../TraceDetailsPane.tsx"
+import type { TraceListProps } from "../TraceList.tsx"
+import { TraceListPane } from "./TraceListPane.tsx"
+import type { AppLayout } from "./useAppLayout.ts"
+
+const separatorJunctionChars = new Map<number, string>([[3, "├"]])
+const separatorCrossChars = new Map<number, string>([[3, "┼"]])
+
+interface TraceWorkspaceProps {
+	readonly layout: AppLayout
+	readonly detailView: DetailView
+	readonly filterMode: boolean
+	readonly filterText: string
+	readonly traceListProps: TraceListProps
+	readonly traceListScrollRef: RefObject<ScrollBoxRenderable | null>
+	readonly selectedTraceService: string | null
+	readonly serviceLogState: ServiceLogState
+	readonly selectedServiceLogIndex: number
+	readonly setSelectedServiceLogIndex: (value: number | ((current: number) => number)) => void
+	readonly traceDetailState: TraceDetailState
+	readonly selectedTrace: TraceItem | null
+	readonly selectedTraceSummary: TraceSummaryItem | null
+	readonly logState: LogState
+	readonly selectedSpanIndex: number | null
+	readonly collapsedSpanIds: ReadonlySet<string>
+	readonly viewLevel: 0 | 1 | 2
+	readonly selectedSpan: TraceItem["spans"][number] | null
+	readonly selectedSpanLogs: readonly LogItem[]
+	readonly selectSpan: (index: number) => void
+}
+
+export const TraceWorkspace = ({
+	layout,
+	detailView,
+	filterMode,
+	filterText,
+	traceListProps,
+	traceListScrollRef,
+	selectedTraceService,
+	serviceLogState,
+	selectedServiceLogIndex,
+	setSelectedServiceLogIndex,
+	traceDetailState,
+	selectedTrace,
+	selectedTraceSummary,
+	logState,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	viewLevel,
+	selectedSpan,
+	selectedSpanLogs,
+	selectSpan,
+}: TraceWorkspaceProps) => {
+	const {
+		contentWidth,
+		headerFooterWidth,
+		isWideLayout,
+		leftPaneWidth,
+		rightPaneWidth,
+		leftContentWidth,
+		rightContentWidth,
+		sectionPadding,
+		wideBodyHeight,
+		wideBodyLines,
+		narrowListHeight,
+		narrowBodyLines,
+		narrowFullBodyLines,
+		wideTraceListBodyHeight,
+		narrowTraceListBodyHeight,
+		availableContentHeight,
+	} = layout
+
+	if (detailView === "service-logs") {
+		return (
+			<box flexGrow={1} flexDirection="column" paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine
+					left="SERVICE LOGS"
+					right={`${serviceLogState.data.length} logs${serviceLogState.fetchedAt ? `${SEPARATOR}${formatShortDate(serviceLogState.fetchedAt)} ${formatTimestamp(serviceLogState.fetchedAt)}` : ""}`}
+					width={headerFooterWidth}
+					rightFg={colors.count}
+				/>
+				<TextLine>
+					<span fg={colors.defaultService}>{selectedTraceService ?? "unknown"}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.count}>recent logs</span>
+				</TextLine>
+				<BlankRow />
+				<ServiceLogsView
+					serviceName={selectedTraceService}
+					logsState={serviceLogState}
+					selectedIndex={selectedServiceLogIndex}
+					onSelectLog={setSelectedServiceLogIndex}
+					contentWidth={headerFooterWidth}
+					bodyLines={Math.max(8, availableContentHeight - 3)}
+				/>
+			</box>
+		)
+	}
+
+	if (isWideLayout) {
+		return (
+			<box flexGrow={1} flexDirection="row">
+				<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+					{viewLevel <= 1 ? (
+						<TraceListPane
+							traceListProps={traceListProps}
+							filterMode={filterMode}
+							filterText={filterText}
+							filterWidth={leftContentWidth}
+							containerHeight={wideBodyHeight}
+							bodyHeight={wideTraceListBodyHeight}
+							padding={sectionPadding}
+							scrollRef={traceListScrollRef}
+						/>
+					) : (
+						<TraceDetailsPane
+							trace={selectedTrace}
+							traceSummary={selectedTraceSummary}
+							traceStatus={traceDetailState.status}
+							traceError={traceDetailState.error}
+							traceLogsState={logState}
+							contentWidth={leftContentWidth}
+							bodyLines={wideBodyLines}
+							paneWidth={leftPaneWidth}
+							selectedSpanIndex={selectedSpanIndex}
+							collapsedSpanIds={collapsedSpanIds}
+							focused={false}
+							onSelectSpan={selectSpan}
+						/>
+					)}
+				</box>
+				<SeparatorColumn height={wideBodyHeight} junctionChars={viewLevel === 2 ? separatorCrossChars : separatorJunctionChars} />
+				<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
+					{viewLevel <= 1 ? (
+						<TraceDetailsPane
+							trace={selectedTrace}
+							traceSummary={selectedTraceSummary}
+							traceStatus={traceDetailState.status}
+							traceError={traceDetailState.error}
+							traceLogsState={logState}
+							contentWidth={rightContentWidth}
+							bodyLines={wideBodyLines}
+							paneWidth={rightPaneWidth}
+							selectedSpanIndex={selectedSpanIndex}
+							collapsedSpanIds={collapsedSpanIds}
+							focused={viewLevel === 1}
+							onSelectSpan={selectSpan}
+						/>
+					) : (
+						<SpanDetailPane
+							span={selectedSpan}
+							trace={selectedTrace}
+							logs={selectedSpanLogs}
+							contentWidth={rightContentWidth}
+							bodyLines={wideBodyLines}
+							paneWidth={rightPaneWidth}
+							focused={true}
+						/>
+					)}
+				</box>
+			</box>
+		)
+	}
+
+	if (viewLevel === 0) {
+		return (
+			<>
+				<TraceListPane
+					traceListProps={traceListProps}
+					filterMode={filterMode}
+					filterText={filterText}
+					filterWidth={leftContentWidth}
+					containerHeight={narrowListHeight}
+					bodyHeight={narrowTraceListBodyHeight}
+					padding={sectionPadding}
+					scrollRef={traceListScrollRef}
+				/>
+				<Divider width={contentWidth} />
+				<TraceDetailsPane
+					trace={selectedTrace}
+					traceSummary={selectedTraceSummary}
+					traceStatus={traceDetailState.status}
+					traceError={traceDetailState.error}
+					traceLogsState={logState}
+					contentWidth={rightContentWidth}
+					bodyLines={narrowBodyLines}
+					paneWidth={contentWidth}
+					selectedSpanIndex={selectedSpanIndex}
+					collapsedSpanIds={collapsedSpanIds}
+					focused={false}
+					onSelectSpan={selectSpan}
+				/>
+			</>
+		)
+	}
+
+	return (
+		<>
+			<box paddingLeft={1} paddingRight={1} height={1} flexDirection="column">
+				<TextLine>
+					<span fg={colors.muted}>TRACES</span>
+					{selectedTraceSummary ? (
+						<>
+							<span fg={colors.separator}>{"  "}{SEPARATOR}{"  "}</span>
+							<span fg={viewLevel === 1 ? colors.accent : colors.muted}>{selectedTraceSummary.rootOperationName}</span>
+						</>
+					) : null}
+					{viewLevel === 2 && selectedSpan ? (
+						<>
+							<span fg={colors.separator}>{"  "}{SEPARATOR}{"  "}</span>
+							<span fg={colors.accent}>{selectedSpan.operationName}</span>
+						</>
+					) : null}
+				</TextLine>
+			</box>
+			<Divider width={contentWidth} />
+			{viewLevel === 1 ? (
+				<TraceDetailsPane
+					trace={selectedTrace}
+					traceSummary={selectedTraceSummary}
+					traceStatus={traceDetailState.status}
+					traceError={traceDetailState.error}
+					traceLogsState={logState}
+					contentWidth={rightContentWidth}
+					bodyLines={narrowFullBodyLines}
+					paneWidth={contentWidth}
+					selectedSpanIndex={selectedSpanIndex}
+					collapsedSpanIds={collapsedSpanIds}
+					focused={true}
+					onSelectSpan={selectSpan}
+				/>
+			) : (
+				<SpanDetailPane
+					span={selectedSpan}
+					trace={selectedTrace}
+					logs={selectedSpanLogs}
+					contentWidth={rightContentWidth}
+					bodyLines={narrowFullBodyLines}
+					paneWidth={contentWidth}
+					focused={true}
+				/>
+			)}
+		</>
+	)
+}