@kitlangton/motel 0.1.0

package/src/ui/ServiceLogs.tsx

@@ -0,0 +1,112 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { useLayoutEffect, useRef } from "react"
+import type { LogItem } from "../domain.ts"
+import { fitCell, formatLogTimestamp, formatTimestamp, logHeadline, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { Divider, PlainLine, TextLine } from "./primitives.tsx"
+import type { ServiceLogState } from "./state.ts"
+import { colors, SEPARATOR } from "./theme.ts"
+
+export const ServiceLogsView = ({
+	serviceName,
+	logsState,
+	selectedIndex,
+	onSelectLog,
+	contentWidth,
+	bodyLines,
+}: {
+	serviceName: string | null
+	logsState: ServiceLogState
+	selectedIndex: number
+	onSelectLog: (index: number) => void
+	contentWidth: number
+	bodyLines: number
+}) => {
+	const timeWidth = 8
+	const levelWidth = 5
+	const traceWidth = 8
+	const messageWidth = Math.max(16, contentWidth - timeWidth - levelWidth - traceWidth - 3)
+
+	if (logsState.status === "loading" && logsState.data.length === 0) {
+		return <PlainLine text="Loading recent service logs..." fg={colors.count} />
+	}
+
+	if (logsState.status === "error") {
+		return <PlainLine text={logsState.error ?? "Could not load logs."} fg={colors.error} />
+	}
+
+	if (logsState.data.length === 0) {
+		return <PlainLine text={`No logs captured yet for service ${serviceName ?? "unknown"}.`} fg={colors.muted} />
+	}
+
+	const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const safeSelectedIndex = Math.max(0, Math.min(selectedIndex, logsState.data.length - 1))
+	const selectedLog = logsState.data[safeSelectedIndex] ?? null
+	const detailWidth = Math.max(16, contentWidth - 2)
+	const detailBodyLines = selectedLog ? wrapTextLines(selectedLog.body, detailWidth, 6) : []
+	const detailAttributeLines = selectedLog ? relevantLogAttributes(selectedLog).slice(0, 3) : []
+	const detailHeight = selectedLog ? 3 + detailBodyLines.length + detailAttributeLines.length : 0
+	const listHeight = Math.max(4, bodyLines - detailHeight - 1)
+
+	useLayoutEffect(() => {
+		scrollRef.current?.scrollChildIntoView(`svc-log-${safeSelectedIndex}`)
+	}, [safeSelectedIndex])
+
+	return (
+		<box flexDirection="column">
+			{selectedLog ? (
+				<>
+					<TextLine>
+						<span fg={logSeverityColor(selectedLog.severityText)}>{selectedLog.severityText.toLowerCase()}</span>
+						<span fg={colors.separator}>{SEPARATOR}</span>
+						<span fg={colors.muted}>{formatLogTimestamp(selectedLog.timestamp)}</span>
+						<span fg={colors.separator}>{SEPARATOR}</span>
+						<span fg={colors.count}>{selectedLog.traceId ? selectedLog.traceId.slice(-8) : "no-trace"}</span>
+					</TextLine>
+					<TextLine>
+						<span fg={colors.defaultService}>{selectedLog.scopeName ?? selectedLog.serviceName}</span>
+						{selectedLog.spanId ? <><span fg={colors.separator}>{SEPARATOR}</span><span fg={colors.muted}>{selectedLog.spanId.slice(-8)}</span></> : null}
+					</TextLine>
+					{detailBodyLines.map((line, index) => (
+						<PlainLine key={`log-detail-${selectedLog.id}-${index}`} text={line} fg={colors.text} />
+					))}
+					{detailAttributeLines.map(([key, value]) => (
+						<TextLine key={`log-attr-${selectedLog.id}-${key}`}>
+							<span fg={colors.count}>{truncateText(key, 18).padEnd(18, " ")}</span>
+							<span fg={colors.muted}> </span>
+							<span fg={colors.muted}>{truncateText(value, Math.max(12, detailWidth - 20))}</span>
+						</TextLine>
+					))}
+					<Divider width={contentWidth} />
+				</>
+			) : null}
+			<TextLine fg={colors.muted}>
+				<span>{fitCell("time", timeWidth)}</span>
+				<span> </span>
+				<span>{fitCell("lvl", levelWidth)}</span>
+				<span> </span>
+				<span>{fitCell("trace", traceWidth)}</span>
+				<span> </span>
+				<span>{fitCell("message", messageWidth)}</span>
+			</TextLine>
+			<scrollbox ref={scrollRef} height={listHeight} flexGrow={0}>
+				{logsState.data.map((log, index) => {
+					const selected = index === safeSelectedIndex
+					const trace = log.traceId ? log.traceId.slice(-8) : "-"
+					return (
+						<box id={`svc-log-${index}`} key={log.id} height={1} onMouseDown={() => onSelectLog(index)}>
+							<TextLine fg={selected ? colors.selectedText : colors.text} bg={selected ? colors.selectedBg : undefined}>
+								<span fg={colors.muted}>{fitCell(formatTimestamp(log.timestamp), timeWidth)}</span>
+								<span> </span>
+								<span fg={logSeverityColor(log.severityText)}>{fitCell(log.severityText.toLowerCase(), levelWidth)}</span>
+								<span> </span>
+								<span fg={colors.count}>{fitCell(trace, traceWidth)}</span>
+								<span> </span>
+								<span fg={selected ? colors.selectedText : colors.text}>{fitCell(logHeadline(log.body), messageWidth)}</span>
+							</TextLine>
+						</box>
+					)
+				})}
+			</scrollbox>
+		</box>
+	)
+}

package/src/ui/SpanDetail.tsx

@@ -0,0 +1,134 @@
+import { TextAttributes } from "@opentui/core"
+import type { LogItem, TraceSpanItem } from "../domain.ts"
+import { formatTimestamp, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+export const SpanDetailView = ({
+	span,
+	logs,
+	contentWidth,
+	bodyLines,
+}: {
+	span: TraceSpanItem
+	logs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+}) => {
+	const tagEntries = Object.entries(span.tags)
+	const maxKeyLen = Math.min(28, tagEntries.reduce((max, [key]) => Math.max(max, key.length), 0))
+	const maxLogLines = logs.length > 0 ? Math.min(4, Math.max(1, Math.floor(bodyLines * 0.3))) : 0
+	const visibleLogs = logs.slice(0, maxLogLines)
+	const visibleWarnings = span.warnings.slice(0, visibleLogs.length > 0 ? 1 : 2)
+	const visibleEvents = span.events.slice(0, 2)
+	const reservedForWarnings = visibleWarnings.length > 0 ? visibleWarnings.length + 2 : 0
+	const reservedForEvents = visibleEvents.length > 0 ? visibleEvents.length + 2 : 0
+	const reservedForLogs = visibleLogs.length > 0 ? visibleLogs.reduce((total, log) => total + 3 + Math.min(3, wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3).length), 1) : 0
+	const maxTagLines = Math.max(0, bodyLines - 4 - reservedForWarnings - reservedForEvents - reservedForLogs)
+
+	// NOTE: op name, service, duration, lifecycle, status, and spanId are all
+	// rendered by the enclosing SpanDetailPane header (rows 0..2). Starting
+	// the body at TAGS avoids the visible duplication where the pane meta
+	// and the first two body lines mirrored each other.
+	return (
+		<box flexDirection="column">
+			{tagEntries.length > 0 ? (
+				<>
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>TAGS</span>
+					</TextLine>
+					{tagEntries.slice(0, maxTagLines).map(([key, value]) => {
+						const keyStr = key.length > maxKeyLen ? `${key.slice(0, maxKeyLen - 1)}\u2026` : key.padEnd(maxKeyLen)
+						const valMaxWidth = Math.max(8, contentWidth - maxKeyLen - 2)
+						const valStr = value.length > valMaxWidth ? `${value.slice(0, valMaxWidth - 1)}\u2026` : value
+
+						return (
+							<TextLine key={key}>
+								<span fg={colors.count}>{keyStr}</span>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.text}>{valStr}</span>
+							</TextLine>
+						)
+					})}
+					{tagEntries.length > maxTagLines ? (
+						<PlainLine text={`  \u2026 ${tagEntries.length - maxTagLines} more`} fg={colors.muted} />
+					) : null}
+				</>
+			) : (
+				<PlainLine text="No tags on this span." fg={colors.muted} />
+			)}
+			{visibleWarnings.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>WARNINGS</span>
+					</TextLine>
+					{visibleWarnings.map((warning, i) => (
+						<PlainLine key={i} text={warning} fg={colors.error} />
+					))}
+				</>
+			) : null}
+			{visibleEvents.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>EVENTS</span>
+					</TextLine>
+					{visibleEvents.map((event, index) => {
+						const preview = Object.entries(event.attributes).slice(0, 1)
+						return (
+							<box key={`${event.name}-${index}`} flexDirection="column">
+								<TextLine>
+									<span fg={colors.muted}>{formatTimestamp(event.timestamp)}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={colors.text}>{event.name}</span>
+								</TextLine>
+								{preview.map(([key, value]) => (
+									<TextLine key={`${event.name}-${key}`}>
+										<span fg={colors.count}>{truncateText(key, 18).padEnd(18, " ")}</span>
+										<span fg={colors.muted}> </span>
+										<span fg={colors.muted}>{truncateText(value, Math.max(12, contentWidth - 20))}</span>
+									</TextLine>
+								))}
+							</box>
+						)
+					})}
+				</>
+			) : null}
+			{visibleLogs.length > 0 ? (
+				<>
+					<BlankRow />
+					<TextLine>
+						<span fg={colors.accent} attributes={TextAttributes.BOLD}>RELATED LOGS</span>
+					</TextLine>
+					{visibleLogs.map((log) => {
+						const logBodyLines = wrapTextLines(log.body, Math.max(16, contentWidth - 2), 3)
+						const attributePreview = relevantLogAttributes(log).slice(0, 1)
+
+						return (
+							<box key={log.id} flexDirection="column">
+								<TextLine>
+									<span fg={colors.muted}>{formatTimestamp(log.timestamp)}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={logSeverityColor(log.severityText)}>{log.severityText.toLowerCase()}</span>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={colors.defaultService}>{log.scopeName ?? log.serviceName}</span>
+								</TextLine>
+								{logBodyLines.map((line, index) => (
+									<PlainLine key={`${log.id}-body-${index}`} text={line} fg={colors.text} />
+								))}
+								{attributePreview.map(([key, value]) => (
+									<TextLine key={`${log.id}-${key}`}>
+										<span fg={colors.count}>{truncateText(key, 18).padEnd(18, " ")}</span>
+										<span fg={colors.muted}> </span>
+										<span fg={colors.muted}>{truncateText(value, Math.max(12, contentWidth - 20))}</span>
+									</TextLine>
+								))}
+							</box>
+						)
+					})}
+				</>
+			) : null}
+		</box>
+	)
+}

package/src/ui/SpanDetailFull.tsx

@@ -0,0 +1,224 @@
+import { TextAttributes } from "@opentui/core"
+import type { ReactNode } from "react"
+import type { LogItem, TraceSpanItem } from "../domain.ts"
+import { formatDuration, formatShortDate, formatTimestamp, lifecycleLabel, logSeverityColor, relevantLogAttributes, truncateText, wrapTextLines } from "./format.ts"
+import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+type Line = ReactNode
+
+/**
+ * Full-pane span detail view. Shows everything we know about a span:
+ * - identifiers, timing, scope, kind, status
+ * - all tags
+ * - all events with all attributes
+ * - all warnings
+ * - all correlated logs with wrapped bodies and relevant attributes
+ *
+ * The view builds a flat array of rendered lines then slices it to `bodyLines`,
+ * honoring a scroll offset so `j/k` scrolling can be wired later.
+ */
+export const SpanDetailFullView = ({
+	span,
+	logs,
+	contentWidth,
+	bodyLines,
+	scrollOffset = 0,
+}: {
+	span: TraceSpanItem
+	logs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+	scrollOffset?: number
+}) => {
+	const lines: Line[] = []
+	let key = 0
+	const push = (node: Line) => lines.push(<box key={key++}>{node}</box>)
+
+	// --- Header: operation + status line ---
+	push(
+		<TextLine>
+			<span fg={colors.text} attributes={TextAttributes.BOLD}>{span.operationName}</span>
+		</TextLine>,
+	)
+	push(
+		<TextLine>
+			<span fg={colors.defaultService}>{span.serviceName}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={colors.count}>{formatDuration(span.durationMs)}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={span.isRunning ? colors.warning : colors.muted}>{lifecycleLabel(span)}</span>
+			<span fg={colors.separator}>{SEPARATOR}</span>
+			<span fg={span.status === "error" ? colors.error : colors.passing}>{span.status}</span>
+		</TextLine>,
+	)
+	push(<BlankRow />)
+
+	// --- Metadata block ---
+	const metaKeyWidth = 10
+	const metaRow = (k: string, v: string, vFg: string = colors.text) => (
+		<TextLine>
+			<span fg={colors.count}>{k.padEnd(metaKeyWidth)}</span>
+			<span fg={colors.muted}> </span>
+			<span fg={vFg}>{truncateText(v, Math.max(8, contentWidth - metaKeyWidth - 1))}</span>
+		</TextLine>
+	)
+	push(<TextLine><span fg={colors.accent} attributes={TextAttributes.BOLD}>META</span></TextLine>)
+	push(metaRow("span id", span.spanId))
+	if (span.parentSpanId) push(metaRow("parent", span.parentSpanId))
+	if (span.kind) push(metaRow("kind", span.kind))
+	if (span.scopeName) push(metaRow("scope", span.scopeName))
+	push(metaRow("started", `${formatShortDate(span.startTime)} ${formatTimestamp(span.startTime)}`))
+	push(metaRow("depth", String(span.depth), colors.muted))
+
+	// --- Tags ---
+	const tagEntries = Object.entries(span.tags)
+	if (tagEntries.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>TAGS</span>
+				<span fg={colors.muted}> ({tagEntries.length})</span>
+			</TextLine>,
+		)
+		const maxKeyLen = Math.min(32, tagEntries.reduce((m, [k]) => Math.max(m, k.length), 0))
+		const valMaxWidth = Math.max(8, contentWidth - maxKeyLen - 2)
+		for (const [tagKey, value] of tagEntries) {
+			const keyStr = tagKey.length > maxKeyLen ? `${tagKey.slice(0, maxKeyLen - 1)}\u2026` : tagKey.padEnd(maxKeyLen)
+			const wrapped = wrapTextLines(value, valMaxWidth, 4)
+			wrapped.forEach((line, idx) => {
+				push(
+					<TextLine>
+						<span fg={colors.count}>{idx === 0 ? keyStr : " ".repeat(maxKeyLen)}</span>
+						<span fg={colors.muted}>  </span>
+						<span fg={colors.text}>{line}</span>
+					</TextLine>,
+				)
+			})
+		}
+	}
+
+	// --- Warnings ---
+	if (span.warnings.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>WARNINGS</span>
+				<span fg={colors.muted}> ({span.warnings.length})</span>
+			</TextLine>,
+		)
+		for (const warning of span.warnings) {
+			for (const line of wrapTextLines(warning, Math.max(16, contentWidth - 2), 4)) {
+				push(<PlainLine text={line} fg={colors.error} />)
+			}
+		}
+	}
+
+	// --- Events ---
+	if (span.events.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>EVENTS</span>
+				<span fg={colors.muted}> ({span.events.length})</span>
+			</TextLine>,
+		)
+		for (const event of span.events) {
+			push(
+				<TextLine>
+					<span fg={colors.muted}>{formatTimestamp(event.timestamp)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.text}>{event.name}</span>
+				</TextLine>,
+			)
+			const attrs = Object.entries(event.attributes)
+			if (attrs.length > 0) {
+				const attrKeyWidth = Math.min(24, attrs.reduce((m, [k]) => Math.max(m, k.length), 0))
+				const attrValWidth = Math.max(8, contentWidth - attrKeyWidth - 4)
+				for (const [attrKey, attrVal] of attrs) {
+					const wrapped = wrapTextLines(attrVal, attrValWidth, 2)
+					wrapped.forEach((line, idx) => {
+						push(
+							<TextLine>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.count}>
+									{idx === 0
+										? (attrKey.length > attrKeyWidth ? `${attrKey.slice(0, attrKeyWidth - 1)}\u2026` : attrKey.padEnd(attrKeyWidth))
+										: " ".repeat(attrKeyWidth)}
+								</span>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.muted}>{line}</span>
+							</TextLine>,
+						)
+					})
+				}
+			}
+		}
+	}
+
+	// --- Logs ---
+	if (logs.length > 0) {
+		push(<BlankRow />)
+		push(
+			<TextLine>
+				<span fg={colors.accent} attributes={TextAttributes.BOLD}>LOGS</span>
+				<span fg={colors.muted}> ({logs.length})</span>
+			</TextLine>,
+		)
+		for (const log of logs) {
+			push(
+				<TextLine>
+					<span fg={colors.muted}>{formatTimestamp(log.timestamp)}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={logSeverityColor(log.severityText)}>{log.severityText.toLowerCase()}</span>
+					<span fg={colors.separator}>{SEPARATOR}</span>
+					<span fg={colors.defaultService}>{log.scopeName ?? log.serviceName}</span>
+				</TextLine>,
+			)
+			for (const line of wrapTextLines(log.body, Math.max(16, contentWidth - 2), 8)) {
+				push(<PlainLine text={line} fg={colors.text} />)
+			}
+			const attrs = relevantLogAttributes(log)
+			if (attrs.length > 0) {
+				const attrKeyWidth = Math.min(22, attrs.reduce((m, [k]) => Math.max(m, k.length), 0))
+				const attrValWidth = Math.max(8, contentWidth - attrKeyWidth - 4)
+				for (const [attrKey, attrVal] of attrs) {
+					const wrapped = wrapTextLines(attrVal, attrValWidth, 2)
+					wrapped.forEach((line, idx) => {
+						push(
+							<TextLine>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.count}>
+									{idx === 0
+										? (attrKey.length > attrKeyWidth ? `${attrKey.slice(0, attrKeyWidth - 1)}\u2026` : attrKey.padEnd(attrKeyWidth))
+										: " ".repeat(attrKeyWidth)}
+								</span>
+								<span fg={colors.muted}>  </span>
+								<span fg={colors.muted}>{line}</span>
+							</TextLine>,
+						)
+					})
+				}
+			}
+		}
+	}
+
+	// --- Slice by scroll ---
+	const totalLines = lines.length
+	const maxOffset = Math.max(0, totalLines - bodyLines)
+	const offset = Math.min(Math.max(0, scrollOffset), maxOffset)
+	const visible = lines.slice(offset, offset + bodyLines)
+
+	return (
+		<box flexDirection="column">
+			{visible}
+			{totalLines > bodyLines ? (
+				<TextLine>
+					<span fg={colors.muted}>
+						{`\u2014 ${offset + 1}\u2013${Math.min(offset + bodyLines, totalLines)} of ${totalLines} lines${offset < maxOffset ? " \u00b7 j/k to scroll" : ""}`}
+					</span>
+				</TextLine>
+			) : null}
+		</box>
+	)
+}

package/src/ui/SpanDetailPane.tsx

@@ -0,0 +1,91 @@
+import type { LogItem, TraceItem, TraceSpanItem } from "../domain.ts"
+import { formatDuration, lifecycleLabel } from "./format.ts"
+import { AlignedHeaderLine, Divider, PlainLine, TextLine } from "./primitives.tsx"
+import { SpanDetailView } from "./SpanDetail.tsx"
+import { colors, SEPARATOR } from "./theme.ts"
+
+/**
+ * Level-2 view: focused span. Renders a header matching
+ * `TraceDetailsPane` geometry (so wide-mode side-by-side layouts line up
+ * vertically) plus a body that can grow to fill the available height.
+ *
+ * Total height: `bodyLines + HEADER_ROWS`.
+ */
+export const SPAN_DETAIL_HEADER_ROWS = 4
+
+export const SpanDetailPane = ({
+	span,
+	trace,
+	logs,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	focused = false,
+}: {
+	span: TraceSpanItem | null
+	trace: TraceItem | null
+	logs: readonly LogItem[]
+	contentWidth: number
+	bodyLines: number
+	paneWidth: number
+	focused?: boolean
+}) => {
+	const focusIndicator = focused ? "\u25b8 " : ""
+	const headerTitle = `${focusIndicator}SPAN`
+	const headerRight = span
+		? `${span.status} \u00b7 ${formatDuration(span.durationMs)}${logs.length > 0 ? ` \u00b7 ${logs.length} lg` : ""}`
+		: "no span selected"
+	const headerColor = span
+		? span.isRunning
+			? colors.warning
+			: span.status === "error"
+			? colors.error
+			: colors.passing
+		: colors.muted
+
+	return (
+		<box flexDirection="column" width={paneWidth} height={bodyLines + SPAN_DETAIL_HEADER_ROWS} overflow="hidden">
+			<box paddingLeft={1} paddingRight={1}>
+				<AlignedHeaderLine left={headerTitle} right={headerRight} width={contentWidth} rightFg={headerColor} />
+			</box>
+			{span && trace ? (
+				<>
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<TextLine>
+							<span fg={colors.text}>{span.operationName}</span>
+						</TextLine>
+						<TextLine>
+							<span fg={colors.defaultService}>{span.serviceName}</span>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.muted}>{span.scopeName ?? "no scope"}</span>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={span.isRunning ? colors.warning : colors.muted}>{lifecycleLabel(span)}</span>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.muted}>{span.spanId.slice(0, 16)}</span>
+						</TextLine>
+					</box>
+					<Divider width={paneWidth} />
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<SpanDetailView
+							span={span}
+							logs={logs}
+							contentWidth={contentWidth}
+							bodyLines={bodyLines}
+						/>
+					</box>
+				</>
+			) : (
+				<>
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<TextLine><span fg={colors.muted}>—</span></TextLine>
+						<TextLine><span fg={colors.muted}>—</span></TextLine>
+					</box>
+					<Divider width={paneWidth} />
+					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+						<PlainLine text="Select a span in the waterfall to view its detail." fg={colors.muted} />
+					</box>
+				</>
+			)}
+		</box>
+	)
+}