@kitlangton/motel 0.1.1 → 0.1.2

package/src/ui/TraceDetailsPane.tsx

@@ -67,8 +67,7 @@ export const TraceDetailsPane = ({
 	const hasTraceSelection = traceSummary !== null
 	const isLoadingTrace = hasTraceSelection && trace === null && traceStatus !== "error"
 
-	const focusIndicator = focused ? "\u25b8 " : ""
-	const headerTitle = `${focusIndicator}TRACE DETAILS`
+	const headerTitle = "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"
@@ -86,7 +85,6 @@ export const TraceDetailsPane = ({
 	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">
@@ -101,23 +99,17 @@ export const TraceDetailsPane = ({
 							<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>
-						)}
+						<TextLine>
+							<span fg={colors.count}>{trace.spanCount} spans</span>
+							{warningCount > 0 ? (
+								<>
+									<span fg={colors.separator}>{SEPARATOR}</span>
+									<span fg={colors.error}>{warningCount} warning{warningCount === 1 ? "" : "s"}</span>
+								</>
+							) : null}
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.muted}>{trace.traceId}</span>
+						</TextLine>
 					</box>
 					<Divider width={paneWidth} />
 					<box flexDirection="column" paddingLeft={1} paddingRight={1}>
@@ -143,11 +135,11 @@ export const TraceDetailsPane = ({
 							<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>
+							<span fg={colors.separator}>{SEPARATOR}</span>
+							<span fg={colors.muted}>{traceMeta.traceId}</span>
 						</TextLine>
 					</box>
 					<Divider width={paneWidth} />

package/src/ui/TraceList.tsx

@@ -1,9 +1,8 @@
 import { TextAttributes } from "@opentui/core"
-import { memo } from "react"
-import { config } from "../config.ts"
+import { useLayoutEffect, useRef, useState } from "react"
 import type { TraceSummaryItem } from "../domain.ts"
 import { fitCell, formatDuration, lifecycleLabel, relativeTime, traceIndicator, traceIndicatorColor, traceRowId } from "./format.ts"
-import { PlainLine, TextLine } from "./primitives.tsx"
+import { BlankRow, PlainLine, TextLine } from "./primitives.tsx"
 import type { LoadStatus } from "./state.ts"
 import { colors } from "./theme.ts"
 
@@ -12,9 +11,11 @@ const getTraceRowLayout = (contentWidth: number) => {
 	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))
+	// Row layout: state + gap + title + duration + gap + count + gap + age.
+	// Let the title expand to fill whatever width is left so the metrics
+	// cluster lands against the right edge of the pane.
+	const fixed = stateWidth + durationWidth + countWidth + ageWidth + 3
+	const titleWidth = Math.max(8, contentWidth - fixed)
 	return { stateWidth, durationWidth, countWidth, ageWidth, titleWidth }
 }
 
@@ -40,13 +41,17 @@ const TraceRow = ({
 		: trace.rootOperationName
 	const titleColor = selected ? colors.selectedText : trace.isRunning ? colors.warning : colors.text
 
+	// Always surface a duration, including `0ms` for sub-millisecond traces —
+	// a visible duration is easier to scan than a blank column.
+	const durationText = formatDuration(Math.max(0, trace.durationMs))
+
 	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 fg={colors.muted}>{fitCell(durationText, durationWidth, "right")}</span>
 				<span> </span>
 				<span fg={colors.muted}>{fitCell(`${trace.spanCount}sp`, countWidth, "right")}</span>
 				<span> </span>
@@ -71,8 +76,53 @@ export interface TraceListProps {
 	readonly onSelectTrace: (traceId: string) => void
 }
 
-export const TraceList = ({
-	showHeader,
+interface TraceListBodyProps extends TraceListProps {
+	readonly viewportRows: number
+}
+
+/**
+ * Header strip that sits above the body (renders the `TRACES 100 · filter: x`
+ * line). Kept as a separate component so the body can live inside a
+ * virtual-windowed box without the header scrolling with it.
+ */
+export const TraceListHeader = ({
+	traces,
+	services,
+	selectedService,
+	filterText,
+	sortMode,
+	totalCount,
+	contentWidth,
+}: TraceListProps) => {
+	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>
+	)
+}
+
+/**
+ * Virtual-windowed body for the trace list. Replaces the previous
+ * opentui <scrollbox> which had a race with opentui's render-time Yoga
+ * layout: useLayoutEffect fires BEFORE the scrollbar's scrollSize has
+ * been updated to reflect new content height, so setting scrollTop after
+ * a refresh got clamped against the stale max. We own the scroll offset
+ * directly as React state and render only the visible rows, eliminating
+ * the race entirely.
+ */
+export const TraceListBody = ({
 	traces,
 	selectedTraceId,
 	status,
@@ -80,41 +130,103 @@ export const TraceList = ({
 	contentWidth,
 	services,
 	selectedService,
-	focused = true,
-	filterText,
-	sortMode,
-	totalCount,
+	viewportRows,
 	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>
-		)
+}: TraceListBodyProps) => {
+	const [scrollOffset, setScrollOffset] = useState(0)
+	// Track (selectedTraceId, its index in `traces`) from the previous render
+	// so we can detect the refresh-shift case (same traceId, new index because
+	// rows were prepended/removed around it) and slide scrollOffset by the
+	// same delta — preserving the selected row's visual position instead of
+	// letting it jump every time auto-refresh pulls in new traces.
+	const lastSelectedIdRef = useRef<string | null>(null)
+	const lastSelectedIndexRef = useRef<number | null>(null)
+	const lastServiceRef = useRef<string | null>(null)
+
+	const viewport = Math.max(1, viewportRows)
+	const maxOffset = Math.max(0, traces.length - viewport)
+
+	useLayoutEffect(() => {
+		// Service change or initial mount: pin to top.
+		if (lastServiceRef.current !== selectedService) {
+			lastServiceRef.current = selectedService
+			lastSelectedIdRef.current = null
+			lastSelectedIndexRef.current = null
+			setScrollOffset(0)
+			return
+		}
+
+		if (!selectedTraceId) {
+			lastSelectedIdRef.current = null
+			lastSelectedIndexRef.current = null
+			return
+		}
+
+		const index = traces.findIndex((t) => t.traceId === selectedTraceId)
+		if (index < 0) {
+			lastSelectedIdRef.current = null
+			lastSelectedIndexRef.current = null
+			return
+		}
+
+		const prevId = lastSelectedIdRef.current
+		const prevIndex = lastSelectedIndexRef.current
+		const isRefreshShift = prevId === selectedTraceId && prevIndex !== null && prevIndex !== index
+
+		setScrollOffset((current) => {
+			let next = current
+			if (isRefreshShift) {
+				// Same row, new position because rows shifted around it — slide
+				// the window by the same delta to keep the row in the same
+				// visible slot.
+				next = current + (index - prevIndex)
+			} else if (index < current) {
+				// Selection moved above the viewport (user pressed k/up or
+				// jumped via gg/home). Snap the top to the selection.
+				next = index
+			} else if (index >= current + viewport) {
+				// Selection moved below the viewport — snap the bottom to it.
+				next = index - viewport + 1
+			}
+			return Math.max(0, Math.min(next, maxOffset))
+		})
+
+		lastSelectedIdRef.current = selectedTraceId
+		lastSelectedIndexRef.current = index
+	}, [traces, selectedTraceId, selectedService, viewport, maxOffset])
+
+	// Mouse wheel moves the scroll window WITHOUT touching selection — lets
+	// the user browse ahead of / behind their selected trace freely.
+	const handleWheel = (event: { scroll?: { direction: string; delta: number }; stopPropagation?: () => void }) => {
+		const info = event.scroll
+		if (!info || traces.length === 0) return
+		const magnitude = Math.max(1, Math.round(info.delta))
+		const signed = info.direction === "up" ? -magnitude : info.direction === "down" ? magnitude : 0
+		if (signed === 0) return
+		setScrollOffset((current) => Math.max(0, Math.min(current + signed, maxOffset)))
+		event.stopPropagation?.()
 	}
 
+	if (status === "loading" && traces.length === 0) {
+		return <PlainLine text="Loading traces..." fg={colors.muted} />
+	}
+	if (status === "error") {
+		return <PlainLine text={error ?? "Could not load traces."} fg={colors.error} />
+	}
+	if (status === "ready" && services.length === 0) {
+		return <PlainLine text="No services reporting yet. Start your app and emit a span." fg={colors.muted} />
+	}
+	if (status === "ready" && selectedService && traces.length === 0) {
+		return <PlainLine text="No traces in the current lookback window." fg={colors.muted} />
+	}
+
+	const windowStart = Math.max(0, Math.min(scrollOffset, maxOffset))
+	const windowTraces = traces.slice(windowStart, windowStart + viewport)
+	const blanks = Math.max(0, viewport - windowTraces.length)
+
 	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) => (
+		<box flexDirection="column" onMouseScroll={handleWheel}>
+			{windowTraces.map((trace) => (
 				<TraceRow
 					key={trace.traceId}
 					trace={trace}
@@ -123,6 +235,20 @@ export const TraceList = ({
 					onSelect={() => onSelectTrace(trace.traceId)}
 				/>
 			))}
+			{Array.from({ length: blanks }, (_, i) => (
+				<BlankRow key={`trace-blank-${i}`} />
+			))}
 		</box>
 	)
 }
+
+// Backwards-compatible single-entry wrapper (header + body) for callers
+// that haven't been updated to the split layout yet.
+export const TraceList = ({
+	showHeader,
+	viewportRows,
+	...props
+}: { showHeader: boolean; viewportRows?: number } & TraceListProps) => {
+	if (showHeader) return <TraceListHeader {...props} />
+	return <TraceListBody {...props} viewportRows={viewportRows ?? 20} />
+}

package/src/ui/Waterfall.tsx

@@ -1,6 +1,6 @@
-import { memo, useRef } from "react"
+import { memo, useLayoutEffect, useRef, useState } from "react"
 import type { LogItem, TraceItem, TraceSpanItem } from "../domain.ts"
-import { formatDuration, lifecycleLabel, truncateText } from "./format.ts"
+import { formatDuration, lifecycleLabel, splitDuration, truncateText } from "./format.ts"
 import { BlankRow, TextLine } from "./primitives.tsx"
 import { colors, waterfallColors } from "./theme.ts"
 
@@ -92,12 +92,17 @@ const renderWaterfallBar = (
 	barWidth: number,
 	barColor: string,
 	laneColor: string,
-): { readonly segments: readonly WaterfallBarSegment[]; readonly afterCells: number } => {
+	rowBg: string,
+): { readonly segments: readonly WaterfallBarSegment[] } => {
+	// Timeline semantics: the leading gap (before the bar starts) is the
+	// "runway" showing how long after trace start this span kicked in — render
+	// it in the lane color. The trailing gap (after the bar ends) is post-span
+	// dead time — render it in the row bg so it visually disappears.
 	if (barWidth < 3 || trace.durationMs === 0) {
-		return {
-			segments: [{ text: "\u2588", fg: barColor }],
-			afterCells: Math.max(0, barWidth - 1),
-		}
+		const trailing = Math.max(0, barWidth - 1)
+		const segs: WaterfallBarSegment[] = [{ text: "\u2588", fg: barColor }]
+		if (trailing > 0) segs.push({ text: " ".repeat(trailing), fg: rowBg, bg: rowBg })
+		return { segments: segs }
 	}
 
 	const traceStart = trace.startedAt.getTime()
@@ -114,33 +119,40 @@ const renderWaterfallBar = (
 	const endOffset = endUnits % 8
 	const segments: WaterfallBarSegment[] = []
 
-	if (startCell > 0) {
-		segments.push({ text: " ".repeat(startCell), fg: laneColor, bg: laneColor })
+	const pushLeading = (cells: number) => {
+		if (cells > 0) segments.push({ text: " ".repeat(cells), fg: laneColor, bg: laneColor })
+	}
+	const pushTrailing = (cells: number) => {
+		if (cells > 0) segments.push({ text: " ".repeat(cells), fg: rowBg, bg: rowBg })
 	}
 
+	pushLeading(startCell)
+
 	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),
-			}
+			// The marker is a left-aligned sliver — the rest of the cell is
+			// post-bar space, so it uses the row bg (transparent) rather than
+			// carrying the dark lane track past where the span ended.
+			segments.push({ text: centeredMarker, fg: barColor, bg: rowBg })
+			pushTrailing(Math.max(0, barWidth - startCell - 1))
+			return { segments }
 		}
 
 		if (startOffset === 0) {
-			segments.push({ text: PARTIAL_BLOCKS[singleCellUnits], fg: barColor })
+			// Bar fills from the left of the cell; post-bar pixels fall to row bg.
+			segments.push({ text: PARTIAL_BLOCKS[singleCellUnits], fg: barColor, bg: rowBg })
 		} else {
+			// Bar starts partway into the cell; left pixels are lane, right is bar.
 			segments.push({ text: PARTIAL_BLOCKS[startOffset], fg: laneColor, bg: barColor })
 		}
-		return {
-			segments,
-			afterCells: Math.max(0, barWidth - startCell - 1),
-		}
+		pushTrailing(Math.max(0, barWidth - startCell - 1))
+		return { segments }
 	}
 
 	if (startOffset > 0) {
+		// Leading partial: left portion is lane (runway), right is bar.
 		segments.push({ text: PARTIAL_BLOCKS[startOffset], fg: laneColor, bg: barColor })
 	}
 
@@ -152,13 +164,12 @@ const renderWaterfallBar = (
 	}
 
 	if (endOffset > 0) {
-		segments.push({ text: PARTIAL_BLOCKS[endOffset], fg: barColor })
+		// Trailing partial: left portion is bar, right is row bg (transparent).
+		segments.push({ text: PARTIAL_BLOCKS[endOffset], fg: barColor, bg: rowBg })
 	}
 
-	return {
-		segments,
-		afterCells: Math.max(0, barWidth - endCell - 1),
-	}
+	pushTrailing(Math.max(0, barWidth - endCell - 1))
+	return { segments }
 }
 
 const durationColor = (durationMs: number) => {
@@ -169,20 +180,42 @@ const durationColor = (durationMs: number) => {
 	return colors.muted
 }
 
-export const getWaterfallLayout = (contentWidth: number, traceDurationMs: number) => {
+export const getWaterfallLayout = (contentWidth: number, suffixWidth: number) => {
 	const labelMaxWidth = Math.min(Math.floor(contentWidth * 0.4), 32)
-	const durationWidth = Math.max(8, formatDuration(traceDurationMs).length + 1)
-	const logWidth = 5
-	const barWidth = Math.max(6, contentWidth - labelMaxWidth - durationWidth - logWidth - 2)
-	return { labelMaxWidth, durationWidth, logWidth, barWidth } as const
+	// 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 const getWaterfallColumns = (contentWidth: number, traceDurationMs: number, durationMs: number, logCount: number) => {
-	const { labelMaxWidth, durationWidth, logWidth, barWidth } = getWaterfallLayout(contentWidth, traceDurationMs)
-	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 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 }> => {
@@ -210,7 +243,6 @@ export const spanPreviewEntries = (span: TraceSpanItem, logs: readonly LogItem[]
 
 const WaterfallRow = memo(({
 	span,
-	logCount,
 	trace,
 	index,
 	spans,
@@ -218,10 +250,10 @@ const WaterfallRow = memo(({
 	selected,
 	collapsed,
 	hasChildSpans,
+	suffixMetrics,
 	onSelect,
 }: {
 	span: TraceSpanItem
-	logCount: number
 	trace: TraceItem
 	index: number
 	spans: readonly TraceSpanItem[]
@@ -229,6 +261,7 @@ const WaterfallRow = memo(({
 	selected: boolean
 	collapsed: boolean
 	hasChildSpans: boolean
+	suffixMetrics: WaterfallSuffixMetrics
 	onSelect: () => void
 }) => {
 	const prefix = buildTreePrefix(spans, index)
@@ -236,7 +269,7 @@ const WaterfallRow = memo(({
 	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)
+	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
@@ -246,14 +279,20 @@ const WaterfallRow = memo(({
 	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 } = renderWaterfallBar(span, trace, barWidth, barColor, laneColor)
+	const rowBg = selected ? colors.selectedBg : colors.screenBg
+	const { segments } = renderWaterfallBar(span, trace, barWidth, barColor, laneColor, rowBg)
 	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
+	const unitFg = colors.muted
+
+	// Split the duration so the unit (s/ms) renders dimmer than the number.
+	const { number: durNumber, unit: durUnit } = splitDuration(Math.max(0, span.durationMs))
+	const durationCell = `${durNumber}${durUnit}`
+	const durationPad = " ".repeat(Math.max(0, suffixMetrics.maxDurationWidth - durationCell.length))
 
 	return (
 		<box height={1} onMouseDown={onSelect}>
@@ -267,8 +306,9 @@ const WaterfallRow = memo(({
 					<span key={`${span.spanId}-bar-${index}`} fg={segment.fg} bg={segment.bg}>{segment.text}</span>
 				))}
 				<span> </span>
-				<span fg={durationFg}>{durationCell}</span>
-				<span fg={logFg}>{logCell}</span>
+				<span>{durationPad}</span>
+				<span fg={durationFg}>{durNumber}</span>
+				<span fg={unitFg}>{durUnit}</span>
 			</TextLine>
 		</box>
 	)
@@ -347,8 +387,6 @@ export const WaterfallTimeline = ({
 }) => {
 	const selectedSpan = selectedSpanIndex !== null ? filteredSpans[selectedSpanIndex] ?? null : null
 
-	const { labelMaxWidth, durationWidth, barWidth } = getWaterfallLayout(contentWidth, trace.durationMs)
-
 	const spanIndexById = new Map<string, number>()
 	for (let i = 0; i < trace.spans.length; i++) {
 		spanIndexById.set(trace.spans[i].spanId, i)
@@ -380,8 +418,28 @@ export const WaterfallTimeline = ({
 	const windowSpans = filteredSpans.slice(windowStart, windowStart + viewportSize)
 	const blankCount = Math.max(0, viewportSize - windowSpans.length)
 
+	// One shared suffix width, measured from the current viewport, so every
+	// row's duration cell lines up on the same right-edge column.
+	const suffixMetrics = getWaterfallSuffixMetrics(windowSpans)
+
+	// Mouse wheel moves the span selection by the scroll delta. The waterfall
+	// uses virtual windowing (not a scrollbox) so native scroll does nothing;
+	// we convert wheel events into selection moves, which the windowing code
+	// already translates into visible-viewport shifts.
+	const handleWheel = (event: { scroll?: { direction: string; delta: number }; stopPropagation?: () => void }) => {
+		const info = event.scroll
+		if (!info || filteredSpans.length === 0) return
+		const magnitude = Math.max(1, Math.round(info.delta))
+		const signed = info.direction === "up" ? -magnitude : info.direction === "down" ? magnitude : 0
+		if (signed === 0) return
+		const start = selectedSpanIndex ?? 0
+		const next = Math.max(0, Math.min(start + signed, filteredSpans.length - 1))
+		if (next !== selectedSpanIndex) onSelectSpan(next)
+		event.stopPropagation?.()
+	}
+
 	return (
-		<box flexDirection="column">
+		<box flexDirection="column" onMouseScroll={handleWheel}>
 			{windowSpans.map((span, index) => {
 				const actualIndex = windowStart + index
 				const fullIndex = spanIndexById.get(span.spanId) ?? -1
@@ -389,7 +447,6 @@ export const WaterfallTimeline = ({
 					<WaterfallRow
 						key={`${trace.traceId}-${span.spanId}`}
 						span={span}
-						logCount={spanLogCounts.get(span.spanId) ?? 0}
 						trace={trace}
 						index={fullIndex}
 						spans={trace.spans}
@@ -397,6 +454,7 @@ export const WaterfallTimeline = ({
 						selected={selectedSpanIndex === actualIndex}
 						collapsed={collapsedSpanIds.has(span.spanId)}
 						hasChildSpans={fullIndex >= 0 && findFirstChildIndex(trace.spans, fullIndex) !== null}
+						suffixMetrics={suffixMetrics}
 						onSelect={() => onSelectSpan(actualIndex)}
 					/>
 				)

package/src/ui/app/TraceListPane.tsx

@@ -1,7 +1,5 @@
-import type { ScrollBoxRenderable } from "@opentui/core"
-import type { RefObject } from "react"
 import { FilterBar } from "../primitives.tsx"
-import { TraceList, type TraceListProps } from "../TraceList.tsx"
+import { TraceListBody, TraceListHeader, type TraceListProps } from "../TraceList.tsx"
 
 interface TraceListPaneProps {
 	readonly traceListProps: TraceListProps
@@ -11,9 +9,16 @@ interface TraceListPaneProps {
 	readonly containerHeight: number
 	readonly bodyHeight: number
 	readonly padding: number
-	readonly scrollRef: RefObject<ScrollBoxRenderable | null>
 }
 
+/**
+ * Replaced the opentui <scrollbox> with a direct virtual-windowed body.
+ * Rationale: the scrollbox's scrollSize is updated during opentui's render
+ * pass, not during React commit, so the useLayoutEffect that adjusted
+ * scrollTop on refresh was reading a stale max and clamping our intended
+ * scroll position. Rendering only the visible rows ourselves keeps the
+ * viewport math entirely in React state and eliminates the race.
+ */
 export const TraceListPane = ({
 	traceListProps,
 	filterMode,
@@ -22,13 +27,13 @@ export const TraceListPane = ({
 	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>
-)
+}: TraceListPaneProps) => {
+	const bodyRows = Math.max(1, filterMode ? bodyHeight - 1 : bodyHeight)
+	return (
+		<box height={containerHeight} flexDirection="column" paddingLeft={padding} paddingRight={0}>
+			<TraceListHeader {...traceListProps} />
+			{filterMode ? <FilterBar text={filterText} width={filterWidth} /> : null}
+			<TraceListBody {...traceListProps} viewportRows={bodyRows} />
+		</box>
+	)
+}