@kitlangton/motel 0.2.0 → 0.2.1

package/src/ui/aiState.ts

@@ -0,0 +1,71 @@
+import { Effect } from "effect"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import type { AiCallDetail } from "../domain.ts"
+import { queryRuntime } from "../runtime.ts"
+import { TraceQueryService } from "../services/TraceQueryService.ts"
+import type { LoadStatus } from "./atoms.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(TraceQueryService.asEffect(), (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 aiCallDetailCache = new Map<string, AiCallDetail | null>()
+const aiCallDetailInflight = new Map<string, Promise<AiCallDetail | null>>()
+
+export const getCachedAiCallDetail = (spanId: string): AiCallDetail | null | undefined =>
+	aiCallDetailCache.has(spanId) ? aiCallDetailCache.get(spanId) ?? null : undefined
+
+export const ensureAiCallDetail = (spanId: string): Promise<AiCallDetail | null> => {
+	if (aiCallDetailCache.has(spanId)) return Promise.resolve(aiCallDetailCache.get(spanId) ?? null)
+	const existing = aiCallDetailInflight.get(spanId)
+	if (existing) return existing
+	const request = loadAiCallDetail(spanId)
+		.then((data) => {
+			aiCallDetailCache.set(spanId, data)
+			return data
+		})
+		.finally(() => {
+			aiCallDetailInflight.delete(spanId)
+		})
+	aiCallDetailInflight.set(spanId, request)
+	return request
+}
+
+export const invalidateAiCallDetailCache = () => {
+	aiCallDetailCache.clear()
+	aiCallDetailInflight.clear()
+}

package/src/ui/app/TraceWorkspace.tsx

@@ -1,9 +1,12 @@
-import type { LogItem, TraceItem, TraceSummaryItem } from "../../domain.ts"
+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 "../state.ts"
+import type { AiCallDetailState, DetailView, LogState, ServiceLogState, TraceDetailState } from "../state.ts"
 import { colors, SEPARATOR } from "../theme.ts"
 import { TraceDetailsPane } from "../TraceDetailsPane.tsx"
 import type { TraceListProps } from "../TraceList.tsx"
@@ -13,6 +16,191 @@ 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 traceLogsState: LogState
+	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
+	readonly focused: boolean
+}
+
+const TraceDetailsScene = ({
+	trace,
+	traceSummary,
+	traceStatus,
+	traceError,
+	traceLogsState,
+	contentWidth,
+	bodyLines,
+	paneWidth,
+	selectedSpanIndex,
+	collapsedSpanIds,
+	focused,
+	waterfallFilterMode,
+	waterfallFilterText,
+	onSelectSpan,
+}: TraceDetailsSceneProps) => (
+	<TraceDetailsPane
+		trace={trace}
+		traceSummary={traceSummary}
+		traceStatus={traceStatus}
+		traceError={traceError}
+		traceLogsState={traceLogsState}
+		contentWidth={contentWidth}
+		bodyLines={bodyLines}
+		paneWidth={paneWidth}
+		selectedSpanIndex={selectedSpanIndex}
+		collapsedSpanIds={collapsedSpanIds}
+		focused={focused}
+		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
@@ -34,6 +222,16 @@ interface TraceWorkspaceProps {
 	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
 }
 
@@ -58,8 +256,19 @@ export const TraceWorkspace = ({
 	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,
@@ -78,36 +287,34 @@ export const TraceWorkspace = ({
 		narrowTraceListBodyHeight,
 		availableContentHeight,
 	} = layout
+	const traceDetailsProps: SharedTraceDetailsProps = {
+		trace: selectedTrace,
+		traceSummary: selectedTraceSummary,
+		traceStatus: traceDetailState.status,
+		traceError: traceDetailState.error,
+		traceLogsState: logState,
+		selectedSpanIndex,
+		collapsedSpanIds,
+		waterfallFilterMode,
+		waterfallFilterText,
+		onSelectSpan: selectSpan,
+	}
+	const drillInContentWidth = Math.max(24, contentWidth - 2)
 
 	if (detailView === "service-logs") {
 		return (
-			<box flexGrow={1} flexDirection="column" paddingLeft={1} paddingRight={1}>
-				<AlignedHeaderLine
-					left="SERVICE LOGS"
-					right={`${serviceLogState.data.length} logs${serviceLogState.fetchedAt ? `${SEPARATOR}${formatShortDate(serviceLogState.fetchedAt)} ${formatTimestamp(serviceLogState.fetchedAt)}` : ""}`}
-					width={headerFooterWidth}
-					rightFg={colors.count}
-				/>
-				<TextLine>
-					<span fg={colors.defaultService}>{selectedTraceService ?? "unknown"}</span>
-					<span fg={colors.separator}>{SEPARATOR}</span>
-					<span fg={colors.count}>recent logs</span>
-				</TextLine>
-				<BlankRow />
-				<ServiceLogsView
-					serviceName={selectedTraceService}
-					logsState={serviceLogState}
-					selectedIndex={selectedServiceLogIndex}
-					onSelectLog={setSelectedServiceLogIndex}
-					contentWidth={headerFooterWidth}
-					bodyLines={Math.max(8, availableContentHeight - 3)}
-				/>
-			</box>
+			<ServiceLogsScene
+				selectedTraceService={selectedTraceService}
+				serviceLogState={serviceLogState}
+				selectedServiceLogIndex={selectedServiceLogIndex}
+				setSelectedServiceLogIndex={setSelectedServiceLogIndex}
+				headerFooterWidth={headerFooterWidth}
+				availableContentHeight={availableContentHeight}
+			/>
 		)
 	}
 
 	if (isWideLayout) {
-		// L0: list (left) + trace preview (right). The two-pane zoom.
 		if (viewLevel === 0) {
 			return (
 				<box flexGrow={1} flexDirection="row">
@@ -124,83 +331,65 @@ export const TraceWorkspace = ({
 					</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}
+						<TraceDetailsScene
+							{...traceDetailsProps}
 							contentWidth={rightContentWidth}
 							bodyLines={wideBodyLines}
 							paneWidth={rightPaneWidth}
-							selectedSpanIndex={selectedSpanIndex}
-							collapsedSpanIds={collapsedSpanIds}
 							focused={false}
-							waterfallFilterMode={waterfallFilterMode} waterfallFilterText={waterfallFilterText} onSelectSpan={selectSpan}
 						/>
 					</box>
 				</box>
 			)
 		}
 
-		// 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={Math.max(24, leftPaneWidth - sectionPadding * 2)}
+						<TraceDetailsScene
+							{...traceDetailsProps}
+							contentWidth={leftContentWidth}
 							bodyLines={wideBodyLines}
 							paneWidth={leftPaneWidth}
-							selectedSpanIndex={selectedSpanIndex}
-							collapsedSpanIds={collapsedSpanIds}
 							focused={true}
-							waterfallFilterMode={waterfallFilterMode} waterfallFilterText={waterfallFilterText} 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={false}
 						/>
 					</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}
-						waterfallFilterMode={waterfallFilterMode} waterfallFilterText={waterfallFilterText} 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 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>
 		)
 	}
@@ -218,19 +407,12 @@ export const TraceWorkspace = ({
 					padding={sectionPadding}
 				/>
 				<Divider width={contentWidth} />
-				<TraceDetailsPane
-					trace={selectedTrace}
-					traceSummary={selectedTraceSummary}
-					traceStatus={traceDetailState.status}
-					traceError={traceDetailState.error}
-					traceLogsState={logState}
+				<TraceDetailsScene
+					{...traceDetailsProps}
 					contentWidth={rightContentWidth}
 					bodyLines={narrowBodyLines}
 					paneWidth={contentWidth}
-					selectedSpanIndex={selectedSpanIndex}
-					collapsedSpanIds={collapsedSpanIds}
 					focused={false}
-					waterfallFilterMode={waterfallFilterMode} waterfallFilterText={waterfallFilterText} onSelectSpan={selectSpan}
 				/>
 			</>
 		)
@@ -238,48 +420,37 @@ export const TraceWorkspace = ({
 
 	return (
 		<>
-			<box paddingLeft={1} paddingRight={1} height={1} flexDirection="column">
-				<TextLine>
-					<span fg={colors.muted}>TRACES</span>
-					{selectedTraceSummary ? (
-						<>
-							<span fg={colors.separator}>{"  "}{SEPARATOR}{"  "}</span>
-							<span fg={viewLevel === 1 ? colors.accent : colors.muted}>{selectedTraceSummary.rootOperationName}</span>
-						</>
-					) : null}
-					{viewLevel === 2 && selectedSpan ? (
-						<>
-							<span fg={colors.separator}>{"  "}{SEPARATOR}{"  "}</span>
-							<span fg={colors.accent}>{selectedSpan.operationName}</span>
-						</>
-					) : null}
-				</TextLine>
-			</box>
-			<Divider width={contentWidth} />
+			<NarrowDrillInHeader
+				contentWidth={contentWidth}
+				viewLevel={viewLevel}
+				selectedTraceSummary={selectedTraceSummary}
+				selectedSpan={selectedSpan}
+			/>
 			{viewLevel === 1 ? (
-				<TraceDetailsPane
-					trace={selectedTrace}
-					traceSummary={selectedTraceSummary}
-					traceStatus={traceDetailState.status}
-					traceError={traceDetailState.error}
-					traceLogsState={logState}
+				<TraceDetailsScene
+					{...traceDetailsProps}
 					contentWidth={rightContentWidth}
 					bodyLines={narrowFullBodyLines}
 					paneWidth={contentWidth}
-					selectedSpanIndex={selectedSpanIndex}
-					collapsedSpanIds={collapsedSpanIds}
 					focused={true}
-					waterfallFilterMode={waterfallFilterMode} waterfallFilterText={waterfallFilterText} onSelectSpan={selectSpan}
 				/>
 			) : (
-				<SpanDetailPane
-					span={selectedSpan}
-					trace={selectedTrace}
-					logs={selectedSpanLogs}
-					contentWidth={rightContentWidth}
+				<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}
-					focused={true}
+					selectedAttrIndex={selectedAttrIndex}
 				/>
 			)}
 		</>

package/src/ui/app/useAppLayout.ts

@@ -25,22 +25,25 @@ 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
+	// 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
-		: listHidden
-			? (viewLevelForLayout === 2 ? Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio)) : contentWidth)
-			: Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio))
+		: Math.max(40, Math.floor((contentWidth - splitGap) * splitRatio))
 	const rightPaneWidth = !isWideLayout
 		? contentWidth
-		: listHidden && viewLevelForLayout !== 2
-			? 0
-			: Math.max(28, contentWidth - leftPaneWidth - splitGap)
+		: 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)