@aryasaatvik/motel 0.3.0

package/src/ui/aiState.ts

@@ -0,0 +1,59 @@
+import { Effect } from "effect"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import type { AiCallDetail } from "../domain.ts"
+import { queryRuntime } from "../runtime.ts"
+import { TelemetryStoreReadonly } from "../services/TelemetryStore.ts"
+import type { LoadStatus } from "./atoms.ts"
+import { makeCachedLoader } from "./cachedLoader.ts"
+
+// AI chat view (full-screen when drilled into an `isAiSpan` span).
+// ---------------------------------------------------------------------
+// The main pane is a normal selectable list of semantic chunks (one row
+// per chunk, with stable list scrolling). Opening a chunk shows its full
+// content in a modal overlay that owns its own line scroll offset. This
+// feels much closer to the rest of motel than the previous in-line
+// expansion experiment.
+// ---------------------------------------------------------------------
+/** Chunk id currently selected in the list (null = first chunk). */
+export const selectedChatChunkIdAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+/** Chunk id whose detail modal is currently open. */
+export const chatDetailChunkIdAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
+/** Line scroll offset inside the open detail modal. */
+export const chatDetailScrollOffsetAtom = Atom.make(0).pipe(Atom.keepAlive)
+
+export interface AiCallDetailState {
+	readonly status: LoadStatus
+	readonly spanId: string | null
+	readonly data: AiCallDetail | null
+	readonly error: string | null
+}
+
+export const initialAiCallDetailState: AiCallDetailState = {
+	status: "ready",
+	spanId: null,
+	data: null,
+	error: null,
+}
+
+export const aiCallDetailStateAtom = Atom.make(initialAiCallDetailState).pipe(Atom.keepAlive)
+
+export const loadAiCallDetail = (spanId: string) =>
+	queryRuntime.runPromise(Effect.flatMap(TelemetryStoreReadonly, (service) => service.getAiCall(spanId)))
+
+// AI call detail cache: the `ai.prompt` payload can easily be 50KB+ and
+// we don't want to re-hit SQLite every time j/k moves the selection
+// between adjacent AI spans. Cleared alongside the other per-refresh
+// caches in `useTraceScreenData`.
+const aiCallDetailLoader = makeCachedLoader<string, AiCallDetail | null>({
+	load: loadAiCallDetail,
+})
+
+export const getCachedAiCallDetail = (spanId: string): AiCallDetail | null | undefined =>
+	aiCallDetailLoader.get(spanId)
+
+export const ensureAiCallDetail = (spanId: string): Promise<AiCallDetail | null> =>
+	aiCallDetailLoader.ensure(spanId)
+
+export const invalidateAiCallDetailCache = () => {
+	aiCallDetailLoader.invalidate()
+}

package/src/ui/app/TraceListPane.tsx

@@ -0,0 +1,39 @@
+import { FilterBar } from "../primitives.tsx"
+import { TraceListBody, TraceListHeader, 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
+}
+
+/**
+ * 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,
+	filterText,
+	filterWidth,
+	containerHeight,
+	bodyHeight,
+	padding,
+}: 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

@@ -0,0 +1,452 @@
+import { isAiSpan, type LogItem, type TraceItem, type TraceSummaryItem } from "../../domain.ts"
+import type { Chunk } from "../aiChatModel.ts"
+import { AiChatView } from "../AiChatView.tsx"
+import { formatShortDate, formatTimestamp } from "../format.ts"
+import { AlignedHeaderLine, BlankRow, Divider, SeparatorColumn, TextLine } from "../primitives.tsx"
+import { ServiceLogsView } from "../ServiceLogs.tsx"
+import { SpanContentView } from "../SpanContentView.tsx"
+import { SpanDetailPane } from "../SpanDetailPane.tsx"
+import type { DetailView, LogState, ServiceLogState, TraceDetailState } from "../atoms.ts"
+import type { AiCallDetailState } from "../aiState.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 SharedTraceDetailsProps {
+	readonly trace: TraceItem | null
+	readonly traceSummary: TraceSummaryItem | null
+	readonly traceStatus: TraceDetailState["status"]
+	readonly traceError: string | null
+	readonly traceLogCount: number
+	readonly selectedSpanIndex: number | null
+	readonly collapsedSpanIds: ReadonlySet<string>
+	readonly waterfallFilterMode: boolean
+	readonly waterfallFilterText: string
+	readonly onSelectSpan: (index: number) => void
+}
+
+interface TraceDetailsSceneProps extends SharedTraceDetailsProps {
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+}
+
+const TraceDetailsScene = ({
+	trace,
+	traceSummary,
+	traceStatus,
+	traceError,
+	traceLogCount,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	waterfallFilterMode,
+	waterfallFilterText,
+	onSelectSpan,
+}: TraceDetailsSceneProps) => (
+	<TraceDetailsPane
+		trace={trace}
+		traceSummary={traceSummary}
+		traceStatus={traceStatus}
+		traceError={traceError}
+		traceLogCount={traceLogCount}
+		contentWidth={contentWidth}
+		bodyLines={bodyLines}
+		paneWidth={paneWidth}
+		selectedSpanIndex={selectedSpanIndex}
+		collapsedSpanIds={collapsedSpanIds}
+		waterfallFilterMode={waterfallFilterMode}
+		waterfallFilterText={waterfallFilterText}
+		onSelectSpan={onSelectSpan}
+	/>
+)
+
+interface SpanDrillInSceneProps {
+	readonly aiDrillIn: boolean
+	readonly selectedSpan: TraceItem["spans"][number] | null
+	readonly aiCallDetailState: AiCallDetailState
+	readonly aiChatChunks: readonly Chunk[]
+	readonly selectedChatChunkId: string | null
+	readonly onSelectChatChunk: (chunkId: string) => void
+	readonly chatDetailChunkId: string | null
+	readonly onOpenChatChunkDetail: (chunkId: string) => void
+	readonly onCloseChatChunkDetail: () => void
+	readonly chatDetailScrollOffset: number
+	readonly onSetChatDetailScrollOffset: (updater: (current: number) => number) => void
+	readonly contentWidth: number
+	readonly bodyLines: number
+	readonly paneWidth: number
+	readonly selectedAttrIndex: number
+}
+
+const SpanDrillInScene = ({
+	aiDrillIn,
+	selectedSpan,
+	aiCallDetailState,
+	aiChatChunks,
+	selectedChatChunkId,
+	onSelectChatChunk,
+	chatDetailChunkId,
+	onOpenChatChunkDetail,
+	onCloseChatChunkDetail,
+	chatDetailScrollOffset,
+	onSetChatDetailScrollOffset,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedAttrIndex,
+}: SpanDrillInSceneProps) => aiDrillIn ? (
+	<AiChatView
+		span={selectedSpan}
+		detailState={aiCallDetailState}
+		chunks={aiChatChunks}
+		selectedChunkId={selectedChatChunkId}
+		onSelectChunk={onSelectChatChunk}
+		detailChunkId={chatDetailChunkId}
+		onOpenDetail={onOpenChatChunkDetail}
+		onCloseDetail={onCloseChatChunkDetail}
+		detailScrollOffset={chatDetailScrollOffset}
+		onSetDetailScrollOffset={onSetChatDetailScrollOffset}
+		contentWidth={contentWidth}
+		bodyLines={bodyLines}
+		paneWidth={paneWidth}
+	/>
+) : (
+	<SpanContentView
+		span={selectedSpan}
+		contentWidth={contentWidth}
+		bodyLines={bodyLines}
+		paneWidth={paneWidth}
+		selectedAttrIndex={selectedAttrIndex}
+	/>
+)
+
+interface ServiceLogsSceneProps {
+	readonly selectedTraceService: string | null
+	readonly serviceLogState: ServiceLogState
+	readonly selectedServiceLogIndex: number
+	readonly setSelectedServiceLogIndex: (value: number | ((current: number) => number)) => void
+	readonly headerFooterWidth: number
+	readonly availableContentHeight: number
+}
+
+const ServiceLogsScene = ({
+	selectedTraceService,
+	serviceLogState,
+	selectedServiceLogIndex,
+	setSelectedServiceLogIndex,
+	headerFooterWidth,
+	availableContentHeight,
+}: ServiceLogsSceneProps) => (
+	<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>
+)
+
+interface NarrowDrillInHeaderProps {
+	readonly contentWidth: number
+	readonly viewLevel: 0 | 1 | 2
+	readonly selectedTraceSummary: TraceSummaryItem | null
+	readonly selectedSpan: TraceItem["spans"][number] | null
+}
+
+const NarrowDrillInHeader = ({ contentWidth, viewLevel, selectedTraceSummary, selectedSpan }: NarrowDrillInHeaderProps) => (
+	<>
+		<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} />
+	</>
+)
+
+interface TraceWorkspaceProps {
+	readonly layout: AppLayout
+	readonly detailView: DetailView
+	readonly filterMode: boolean
+	readonly filterText: string
+	readonly waterfallFilterMode: boolean
+	readonly waterfallFilterText: string
+	readonly traceListProps: TraceListProps
+	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 selectedAttrIndex: number
+	readonly aiCallDetailState: AiCallDetailState
+	readonly aiChatChunks: readonly Chunk[]
+	readonly selectedChatChunkId: string | null
+	readonly onSelectChatChunk: (chunkId: string) => void
+	readonly chatDetailChunkId: string | null
+	readonly onOpenChatChunkDetail: (chunkId: string) => void
+	readonly onCloseChatChunkDetail: () => void
+	readonly chatDetailScrollOffset: number
+	readonly onSetChatDetailScrollOffset: (updater: (current: number) => number) => void
+	readonly selectSpan: (index: number) => void
+}
+
+export const TraceWorkspace = ({
+	layout,
+	detailView,
+	filterMode,
+	filterText,
+	waterfallFilterMode,
+	waterfallFilterText,
+	traceListProps,
+	selectedTraceService,
+	serviceLogState,
+	selectedServiceLogIndex,
+	setSelectedServiceLogIndex,
+	traceDetailState,
+	selectedTrace,
+	selectedTraceSummary,
+	logState,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	viewLevel,
+	selectedSpan,
+	selectedSpanLogs,
+	selectedAttrIndex,
+	aiCallDetailState,
+	aiChatChunks,
+	selectedChatChunkId,
+	onSelectChatChunk,
+	chatDetailChunkId,
+	onOpenChatChunkDetail,
+	onCloseChatChunkDetail,
+	chatDetailScrollOffset,
+	onSetChatDetailScrollOffset,
+	selectSpan,
+}: TraceWorkspaceProps) => {
+	const aiDrillIn = selectedSpan !== null && isAiSpan(selectedSpan.tags)
+	const {
+		contentWidth,
+		headerFooterWidth,
+		isWideLayout,
+		leftPaneWidth,
+		rightPaneWidth,
+		leftContentWidth,
+		rightContentWidth,
+		sectionPadding,
+		wideBodyHeight,
+		wideBodyLines,
+		narrowListHeight,
+		narrowBodyLines,
+		narrowFullBodyLines,
+		wideTraceListBodyHeight,
+		narrowTraceListBodyHeight,
+		availableContentHeight,
+	} = layout
+	const traceDetailsProps: SharedTraceDetailsProps = {
+		trace: selectedTrace,
+		traceSummary: selectedTraceSummary,
+		traceStatus: traceDetailState.status,
+		traceError: traceDetailState.error,
+		traceLogCount: logState.data.length,
+		selectedSpanIndex,
+		collapsedSpanIds,
+		waterfallFilterMode,
+		waterfallFilterText,
+		onSelectSpan: selectSpan,
+	}
+	const drillInContentWidth = Math.max(24, contentWidth - 2)
+
+	if (detailView === "service-logs") {
+		return (
+			<ServiceLogsScene
+				selectedTraceService={selectedTraceService}
+				serviceLogState={serviceLogState}
+				selectedServiceLogIndex={selectedServiceLogIndex}
+				setSelectedServiceLogIndex={setSelectedServiceLogIndex}
+				headerFooterWidth={headerFooterWidth}
+				availableContentHeight={availableContentHeight}
+			/>
+		)
+	}
+
+	if (isWideLayout) {
+		if (viewLevel === 0) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+						<TraceListPane
+							traceListProps={traceListProps}
+							filterMode={filterMode}
+							filterText={filterText}
+							filterWidth={leftContentWidth}
+							containerHeight={wideBodyHeight}
+							bodyHeight={wideTraceListBodyHeight}
+							padding={sectionPadding}
+						/>
+					</box>
+					<SeparatorColumn height={wideBodyHeight} junctionChars={separatorJunctionChars} />
+					<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
+						<TraceDetailsScene
+							{...traceDetailsProps}
+							contentWidth={rightContentWidth}
+							bodyLines={wideBodyLines}
+							paneWidth={rightPaneWidth}
+						/>
+					</box>
+				</box>
+			)
+		}
+
+		if (viewLevel === 1) {
+			return (
+				<box flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+						<TraceDetailsScene
+							{...traceDetailsProps}
+							contentWidth={leftContentWidth}
+							bodyLines={wideBodyLines}
+							paneWidth={leftPaneWidth}
+						/>
+					</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={false}
+						/>
+					</box>
+				</box>
+			)
+		}
+
+		return (
+			<box flexGrow={1} flexDirection="column">
+				<SpanDrillInScene
+					aiDrillIn={aiDrillIn}
+					selectedSpan={selectedSpan}
+					aiCallDetailState={aiCallDetailState}
+					aiChatChunks={aiChatChunks}
+					selectedChatChunkId={selectedChatChunkId}
+					onSelectChatChunk={onSelectChatChunk}
+					chatDetailChunkId={chatDetailChunkId}
+					onOpenChatChunkDetail={onOpenChatChunkDetail}
+					onCloseChatChunkDetail={onCloseChatChunkDetail}
+					chatDetailScrollOffset={chatDetailScrollOffset}
+					onSetChatDetailScrollOffset={onSetChatDetailScrollOffset}
+					contentWidth={drillInContentWidth}
+					bodyLines={wideBodyLines}
+					paneWidth={contentWidth}
+					selectedAttrIndex={selectedAttrIndex}
+				/>
+			</box>
+		)
+	}
+
+	if (viewLevel === 0) {
+		return (
+			<>
+				<TraceListPane
+					traceListProps={traceListProps}
+					filterMode={filterMode}
+					filterText={filterText}
+					filterWidth={leftContentWidth}
+					containerHeight={narrowListHeight}
+					bodyHeight={narrowTraceListBodyHeight}
+					padding={sectionPadding}
+				/>
+				<Divider width={contentWidth} />
+				<TraceDetailsScene
+					{...traceDetailsProps}
+					contentWidth={rightContentWidth}
+					bodyLines={narrowBodyLines}
+					paneWidth={contentWidth}
+				/>
+			</>
+		)
+	}
+
+	return (
+		<>
+			<NarrowDrillInHeader
+				contentWidth={contentWidth}
+				viewLevel={viewLevel}
+				selectedTraceSummary={selectedTraceSummary}
+				selectedSpan={selectedSpan}
+			/>
+			{viewLevel === 1 ? (
+				<TraceDetailsScene
+					{...traceDetailsProps}
+					contentWidth={rightContentWidth}
+					bodyLines={narrowFullBodyLines}
+					paneWidth={contentWidth}
+				/>
+			) : (
+				<SpanDrillInScene
+					aiDrillIn={aiDrillIn}
+					selectedSpan={selectedSpan}
+					aiCallDetailState={aiCallDetailState}
+					aiChatChunks={aiChatChunks}
+					selectedChatChunkId={selectedChatChunkId}
+					onSelectChatChunk={onSelectChatChunk}
+					chatDetailChunkId={chatDetailChunkId}
+					onOpenChatChunkDetail={onOpenChatChunkDetail}
+					onCloseChatChunkDetail={onCloseChatChunkDetail}
+					chatDetailScrollOffset={chatDetailScrollOffset}
+					onSetChatDetailScrollOffset={onSetChatDetailScrollOffset}
+					contentWidth={drillInContentWidth}
+					bodyLines={narrowFullBodyLines}
+					paneWidth={contentWidth}
+					selectedAttrIndex={selectedAttrIndex}
+				/>
+			)}
+		</>
+	)
+}

package/src/ui/app/useAppLayout.ts

@@ -0,0 +1,101 @@
+import { useMemo } from "react"
+import { fitCell } from "../format.ts"
+import type { DetailView } from "../atoms.ts"
+
+interface UseAppLayoutInput {
+	readonly width: number | undefined
+	readonly height: number | undefined
+	readonly notice: string | null
+	readonly detailView: DetailView
+	readonly selectedSpanIndex: number | null
+}
+
+export const useAppLayout = ({ width, height, notice, detailView, selectedSpanIndex }: UseAppLayoutInput) => useMemo(() => {
+	const contentWidth = Math.max(60, width ?? 100)
+	const isWideLayout = (width ?? 100) >= 100
+	const splitGap = 1
+	const sectionPadding = 1
+	const traceListHeaderHeight = 1
+	const footerNotice = notice ? fitCell(notice, Math.max(24, contentWidth - 2)) : null
+	const footerHeight = 1
+	const footerFrameHeight = footerHeight > 0 ? 1 + footerHeight : 0
+	const frameHeight = 1 + 1 + footerFrameHeight
+	const availableContentHeight = Math.max(10, (height ?? 24) - frameHeight)
+	const viewLevelForLayout: 0 | 1 | 2 =
+		detailView === "span-detail" ? 2 :
+		selectedSpanIndex !== null ? 1 :
+		0
+	// Split ratios for the two-pane body:
+	//   L0 (trace list + trace preview):  40% / 60%  — list narrow, preview wide
+	//   L1 (waterfall + span preview):    60% / 40%  — always-on preview,
+	//                                                  read-only (enter drills
+	//                                                  one level deeper)
+	//   L2 (full-screen span content):    single pane — the waterfall is
+	//                                                  hidden entirely; the
+	//                                                  workspace reads
+	//                                                  contentWidth directly
+	//                                                  and the split ratio
+	//                                                  is irrelevant.
+	const splitRatio = viewLevelForLayout === 1 ? 0.6 : 0.4
+	const listHidden = viewLevelForLayout >= 1
+	const leftPaneWidth = !isWideLayout
+		? contentWidth
+		: Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio))
+	const rightPaneWidth = !isWideLayout
+		? contentWidth
+		: 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
+	// TraceDetailsPane + SpanDetailPane both reserve 4 rows for their header
+	// (title, op line, meta line, divider), so `bodyLines = paneHeight - 4`
+	// makes the pane fill its parent exactly. Using `-5` here left a visible
+	// blank row between the last waterfall span and the bottom divider.
+	const wideBodyLines = Math.max(8, wideBodyHeight - 4)
+	const narrowSplitHeight = Math.max(10, availableContentHeight - 1)
+	const narrowListHeight = Math.max(4, Math.min(10, Math.floor(narrowSplitHeight * 0.4), narrowSplitHeight - 9))
+	const narrowDetailHeight = narrowSplitHeight - narrowListHeight
+	const narrowBodyLines = Math.max(2, narrowDetailHeight - 4)
+	const narrowFullBodyLines = Math.max(8, availableContentHeight - 6)
+	const wideTraceListBodyHeight = Math.max(1, wideBodyHeight - traceListHeaderHeight)
+	const narrowTraceListBodyHeight = Math.max(1, narrowListHeight - traceListHeaderHeight)
+	const traceViewportRows = isWideLayout ? wideTraceListBodyHeight : narrowTraceListBodyHeight
+	const tracePageSize = Math.max(1, traceViewportRows - 1)
+	const spanViewportRows = Math.max(1, (isWideLayout ? wideBodyLines : narrowBodyLines) - 1)
+	const spanPageSize = Math.max(1, spanViewportRows - 1)
+
+	return {
+		contentWidth,
+		isWideLayout,
+		splitGap,
+		sectionPadding,
+		availableContentHeight,
+		viewLevel: viewLevelForLayout,
+		listHidden,
+		footerNotice,
+		footerHeight,
+		leftPaneWidth,
+		rightPaneWidth,
+		leftContentWidth,
+		rightContentWidth,
+		headerFooterWidth,
+		wideBodyHeight,
+		wideBodyLines,
+		narrowListHeight,
+		narrowBodyLines,
+		narrowFullBodyLines,
+		wideTraceListBodyHeight,
+		narrowTraceListBodyHeight,
+		traceViewportRows,
+		tracePageSize,
+		spanPageSize,
+	} as const
+}, [detailView, height, notice, selectedSpanIndex, width])
+
+export type AppLayout = ReturnType<typeof useAppLayout>