@kitlangton/motel 0.1.0 → 0.1.2

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, includeLogs = true) => {
+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 = includeLogs ? 5 : 0
-	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 type WaterfallSuffixMetrics = {
+	readonly maxDurationWidth: number
+	readonly suffixWidth: number
 }
 
-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
+/**
+ * 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,11 +250,10 @@ const WaterfallRow = memo(({
 	selected,
 	collapsed,
 	hasChildSpans,
+	suffixMetrics,
 	onSelect,
-	includeLogs,
 }: {
 	span: TraceSpanItem
-	logCount: number
 	trace: TraceItem
 	index: number
 	spans: readonly TraceSpanItem[]
@@ -230,15 +261,15 @@ const WaterfallRow = memo(({
 	selected: boolean
 	collapsed: boolean
 	hasChildSpans: boolean
+	suffixMetrics: WaterfallSuffixMetrics
 	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 { 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
@@ -248,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, afterCells } = 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}>
@@ -268,10 +305,10 @@ const WaterfallRow = memo(({
 				{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}
+				<span>{durationPad}</span>
+				<span fg={durationFg}>{durNumber}</span>
+				<span fg={unitFg}>{durUnit}</span>
 			</TextLine>
 		</box>
 	)
@@ -349,7 +386,6 @@ export const WaterfallTimeline = ({
 	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++) {
@@ -382,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
@@ -391,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}
@@ -399,7 +454,7 @@ export const WaterfallTimeline = ({
 						selected={selectedSpanIndex === actualIndex}
 						collapsed={collapsedSpanIds.has(span.spanId)}
 						hasChildSpans={fullIndex >= 0 && findFirstChildIndex(trace.spans, fullIndex) !== null}
-						includeLogs={includeLogs}
+						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>
+	)
+}

package/src/ui/app/TraceWorkspace.tsx

@@ -1,5 +1,3 @@
-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"
@@ -21,7 +19,6 @@ interface TraceWorkspaceProps {
 	readonly filterMode: boolean
 	readonly filterText: string
 	readonly traceListProps: TraceListProps
-	readonly traceListScrollRef: RefObject<ScrollBoxRenderable | null>
 	readonly selectedTraceService: string | null
 	readonly serviceLogState: ServiceLogState
 	readonly selectedServiceLogIndex: number
@@ -44,7 +41,6 @@ export const TraceWorkspace = ({
 	filterMode,
 	filterText,
 	traceListProps,
-	traceListScrollRef,
 	selectedTraceService,
 	serviceLogState,
 	selectedServiceLogIndex,
@@ -107,10 +103,11 @@ export const TraceWorkspace = ({
 	}
 
 	if (isWideLayout) {
-		return (
-			<box flexGrow={1} flexDirection="row">
-				<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
-					{viewLevel <= 1 ? (
+		// L0: list (left) + trace preview (right). The two-pane zoom.
+		if (viewLevel === 0) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceListPane
 							traceListProps={traceListProps}
 							filterMode={filterMode}
@@ -119,53 +116,86 @@ export const TraceWorkspace = ({
 							containerHeight={wideBodyHeight}
 							bodyHeight={wideTraceListBodyHeight}
 							padding={sectionPadding}
-							scrollRef={traceListScrollRef}
 						/>
-					) : (
+					</box>
+					<SeparatorColumn height={wideBodyHeight} junctionChars={separatorJunctionChars} />
+					<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceDetailsPane
 							trace={selectedTrace}
 							traceSummary={selectedTraceSummary}
 							traceStatus={traceDetailState.status}
 							traceError={traceDetailState.error}
 							traceLogsState={logState}
-							contentWidth={leftContentWidth}
+							contentWidth={rightContentWidth}
 							bodyLines={wideBodyLines}
-							paneWidth={leftPaneWidth}
+							paneWidth={rightPaneWidth}
 							selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
 							focused={false}
 							onSelectSpan={selectSpan}
 						/>
-					)}
+					</box>
 				</box>
-				<SeparatorColumn height={wideBodyHeight} junctionChars={viewLevel === 2 ? separatorCrossChars : separatorJunctionChars} />
-				<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
-					{viewLevel <= 1 ? (
+			)
+		}
+
+		// L1: the user pressed enter on a trace — hide the list entirely and
+		// let the waterfall take the full width. `leftPaneWidth` is already
+		// `contentWidth` in this case (see useAppLayout), so one pane fills
+		// the row.
+		if (viewLevel === 1) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
 						<TraceDetailsPane
 							trace={selectedTrace}
 							traceSummary={selectedTraceSummary}
 							traceStatus={traceDetailState.status}
 							traceError={traceDetailState.error}
 							traceLogsState={logState}
-							contentWidth={rightContentWidth}
+							contentWidth={Math.max(24, leftPaneWidth - sectionPadding * 2)}
 							bodyLines={wideBodyLines}
-							paneWidth={rightPaneWidth}
+							paneWidth={leftPaneWidth}
 							selectedSpanIndex={selectedSpanIndex}
 							collapsedSpanIds={collapsedSpanIds}
-							focused={viewLevel === 1}
-							onSelectSpan={selectSpan}
-						/>
-					) : (
-						<SpanDetailPane
-							span={selectedSpan}
-							trace={selectedTrace}
-							logs={selectedSpanLogs}
-							contentWidth={rightContentWidth}
-							bodyLines={wideBodyLines}
-							paneWidth={rightPaneWidth}
 							focused={true}
+							onSelectSpan={selectSpan}
 						/>
-					)}
+					</box>
+				</box>
+			)
+		}
+
+		// L2: waterfall-left + span detail-right. Still no list.
+		return (
+			<box flexGrow={1} flexDirection="row">
+				<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+					<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={separatorCrossChars} />
+				<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
+					<SpanDetailPane
+						span={selectedSpan}
+						trace={selectedTrace}
+						logs={selectedSpanLogs}
+						contentWidth={rightContentWidth}
+						bodyLines={wideBodyLines}
+						paneWidth={rightPaneWidth}
+						focused={true}
+					/>
 				</box>
 			</box>
 		)
@@ -182,7 +212,6 @@ export const TraceWorkspace = ({
 					containerHeight={narrowListHeight}
 					bodyHeight={narrowTraceListBodyHeight}
 					padding={sectionPadding}
-					scrollRef={traceListScrollRef}
 				/>
 				<Divider width={contentWidth} />
 				<TraceDetailsPane

package/src/ui/app/useAppLayout.ts

@@ -25,10 +25,28 @@ export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIn
 		detailView === "span-detail" ? 2 :
 		selectedSpanIndex !== null ? 1 :
 		0
+	// At L0 we show list + preview side-by-side. Once drilled in (L1/L2) the
+	// trace list is hidden entirely and the detail pane(s) take the full
+	// width — either one pane (waterfall at L1) or a 50/50 split between
+	// waterfall and span detail at L2.
 	const splitRatio = viewLevelForLayout === 2 ? 0.5 : 0.4
-	const leftPaneWidth = isWideLayout ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth
-	const rightPaneWidth = isWideLayout ? Math.max(28, contentWidth - leftPaneWidth - splitGap) : contentWidth
-	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 3) : Math.max(24, contentWidth - sectionPadding * 2)
+	const listHidden = viewLevelForLayout >= 1
+	const leftPaneWidth = !isWideLayout
+		? contentWidth
+		: listHidden
+			? (viewLevelForLayout === 2 ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth)
+			: Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio))
+	const rightPaneWidth = !isWideLayout
+		? contentWidth
+		: listHidden && viewLevelForLayout !== 2
+			? 0
+			: Math.max(28, contentWidth - leftPaneWidth - splitGap)
+	// Left pane: paddingLeft (1) + scrollbar column (1). No right padding —
+	// the vertical pane divider handles visual separation from the right pane.
+	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 2) : Math.max(24, contentWidth - sectionPadding * 2)
+	// Right pane: both left and right padding. Trace details and span detail
+	// content needs a little breathing room on the right so long op names
+	// and the duration column don't butt against the pane border.
 	const rightContentWidth = isWideLayout ? Math.max(24, rightPaneWidth - sectionPadding * 2) : Math.max(24, contentWidth - sectionPadding * 2)
 	const headerFooterWidth = Math.max(24, contentWidth - 2)
 	const wideBodyHeight = availableContentHeight
@@ -56,6 +74,7 @@ export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIn
 		sectionPadding,
 		availableContentHeight,
 		viewLevel: viewLevelForLayout,
+		listHidden,
 		footerNotice,
 		footerHeight,
 		leftPaneWidth,

package/src/ui/app/useTraceScreenData.ts

@@ -3,6 +3,8 @@ import { useCallback, useEffect, useMemo, useRef } from "react"
 import { config } from "../../config.js"
 import type { LogItem, TraceItem } from "../../domain.ts"
 import {
+	activeAttrKeyAtom,
+	activeAttrValueAtom,
 	autoRefreshAtom,
 	collapsedSpanIdsAtom,
 	detailViewAtom,
@@ -11,6 +13,7 @@ import {
 	initialLogState,
 	initialServiceLogState,
 	initialTraceDetailState,
+	loadFilteredTraceSummaries,
 	loadRecentTraceSummaries,
 	loadServiceLogs,
 	loadTraceDetail,
@@ -47,6 +50,8 @@ export const useTraceScreenData = () => {
 	const [autoRefresh] = useAtom(autoRefreshAtom)
 	const [filterMode] = useAtom(filterModeAtom)
 	const [filterText] = useAtom(filterTextAtom)
+	const [activeAttrKey] = useAtom(activeAttrKeyAtom)
+	const [activeAttrValue] = useAtom(activeAttrValueAtom)
 	const [traceSort] = useAtom(traceSortAtom)
 
 	const selectedTraceRef = useRef<string | null>(null)
@@ -94,7 +99,11 @@ export const useTraceScreenData = () => {
 					setSelectedTraceService(effectiveService)
 				}
 
-				const traces = effectiveService ? await loadRecentTraceSummaries(effectiveService) : []
+				const traces = effectiveService
+					? (activeAttrKey && activeAttrValue
+						? await loadFilteredTraceSummaries(effectiveService, { [activeAttrKey]: activeAttrValue })
+						: await loadRecentTraceSummaries(effectiveService))
+					: []
 				if (cancelled) return
 
 				const prevTraceId = selectedTraceRef.current
@@ -117,7 +126,7 @@ export const useTraceScreenData = () => {
 		return () => {
 			cancelled = true
 		}
-	}, [refreshNonce, selectedTraceService, setSelectedTraceIndex, setSelectedTraceService, setTraceState])
+	}, [refreshNonce, selectedTraceService, activeAttrKey, activeAttrValue, setSelectedTraceIndex, setSelectedTraceService, setTraceState])
 
 	useEffect(() => {
 		setSelectedTraceIndex((current) => {
@@ -402,6 +411,8 @@ export const useTraceScreenData = () => {
 		autoRefresh,
 		filterMode,
 		filterText,
+		activeAttrKey,
+		activeAttrValue,
 		traceSort,
 		selectedTraceSummary,
 		selectedTrace,

package/src/ui/format.ts

@@ -19,13 +19,22 @@ export const formatShortDate = (date: Date) => date.toLocaleDateString("en-US",
 export const formatTimestamp = (date: Date) => date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }).toLowerCase()
 
 export const formatDuration = (durationMs: number) => {
+	const { number, unit } = splitDuration(durationMs)
+	return `${number}${unit}`
+}
+
+/**
+ * Split a duration into its numeric and unit parts so the unit can render
+ * dimmer than the number (easier to visually parse a column of durations).
+ */
+export const splitDuration = (durationMs: number): { number: string; unit: "s" | "ms" } => {
 	const trimDecimal = (value: string) => value.replace(/\.0+$/, "").replace(/(\.\d*[1-9])0+$/, "$1")
 
-	if (durationMs >= 10_000) return `${Math.round(durationMs / 1000)}s`
-	if (durationMs >= 1000) return `${trimDecimal((durationMs / 1000).toFixed(1))}s`
-	if (durationMs >= 100) return `${Math.round(durationMs)}ms`
-	if (durationMs >= 10) return `${trimDecimal(durationMs.toFixed(1))}ms`
-	return `${trimDecimal(durationMs.toFixed(2))}ms`
+	if (durationMs >= 10_000) return { number: `${Math.round(durationMs / 1000)}`, unit: "s" }
+	if (durationMs >= 1000) return { number: trimDecimal((durationMs / 1000).toFixed(1)), unit: "s" }
+	if (durationMs >= 100) return { number: `${Math.round(durationMs)}`, unit: "ms" }
+	if (durationMs >= 10) return { number: trimDecimal(durationMs.toFixed(1)), unit: "ms" }
+	return { number: trimDecimal(durationMs.toFixed(2)), unit: "ms" }
 }
 
 export const lifecycleLabel = (value: { readonly isRunning: boolean }) => (value.isRunning ? "open" : "closed")

package/src/ui/primitives.tsx

@@ -118,7 +118,8 @@ export const HelpModal = ({ width, height, autoRefresh, themeLabel, onClose }: {
 					{row("t", `cycle theme (${themeLabel})`)}
 					{row("tab", "toggle service logs")}
 					{row("[ ]", "switch service")}
-					{row("/", "filter traces")}
+					{row("/", "filter by root operation")}
+					{row("f", "filter traces by span attribute")}
 					{row("s", "cycle sort mode")}
 					{row("a", `auto refresh ${autoRefresh ? "on" : "off"}`)}
 					{row("r", "refresh traces")}
@@ -149,6 +150,7 @@ export const FooterHints = ({ spanNavActive, detailView, autoRefresh, width: _wi
 		["t", "theme"],
 		["tab", "logs"],
 		["/", "filter"],
+		["f", "attr"],
 		["s", "sort"],
 		["a", autoRefresh ? "live" : "paused"],
 		["?", "help"],