@aragon-agent/cli 0.6.28 → 0.6.31

package/dist/ui/App.js

@@ -16,13 +16,13 @@ import { computeCost } from '../agent/usage.js';
 import { parseMaxTokensInput, DEFAULT_TRANSCRIPT_RETAIN, DEFAULT_TRANSCRIPT_WINDOW, } from '../config/schema.js';
 import { updatePersistedConfig } from '../config/store.js';
 import { appendPrompt, loadPromptHistory } from '../config/prompt-history.js';
-import { bumpSubmitCount, setMouseNoticeVersion, setVtInputNoticeVersion, } from '../config/ui-state.js';
+import { bumpSubmitCount, setMouseNoticeVersion, setScrollModeNoticeVersion, setVtInputNoticeVersion, } from '../config/ui-state.js';
 import { getLogger } from '../logging/logger.js';
 import { isTerminalStatus } from '../proc/types.js';
 import { getSecrets } from '../logging/secret-registry.js';
 import { redactText } from '../logging/redact.js';
 import { resolveTuiCapabilities } from './capabilities.js';
-import { useStartupNotices, MOUSE_NOTICE_VERSION, VT_INPUT_NOTICE_VERSION, } from './use-startup-notices.js';
+import { useStartupNotices, MOUSE_NOTICE_VERSION, SCROLL_MODE_NOTICE_VERSION, VT_INPUT_NOTICE_VERSION, } from './use-startup-notices.js';
 import { getTheme } from './theme.js';
 import { pickGlyphs } from './glyphs.js';
 import { Header } from './Header.js';
@@ -38,6 +38,9 @@ import { BottomStatusRow } from './BottomStatusRow.js';
 // Only the updater's pure visibility predicate enters the status detail plan.
 import { shouldRenderUpdateLine } from '../update/types.js';
 import { AppShell } from './layout/AppShell.js';
+import { ScrollbackShell } from './ScrollbackShell.js';
+import { useScrollbackView } from './scrollback/use-scrollback-view.js';
+import { buildExitSummary } from './scrollback/exit-summary.js';
 import { ScrollViewport } from './layout/ScrollViewport.js';
 import { buildTodoRailLayout } from './layout/todo-layout.js';
 import { buildTeamPanelLayout } from './layout/team-panel.js';
@@ -46,14 +49,14 @@ import { useTerminalSize } from './layout/useTerminalSize.js';
 import { useHeightStore } from './use-height-store.js';
 import { useRenderGovernor } from './use-render-governor.js';
 import { readScrollbarPerf, setPerfResetHook, setPerfSnapshotProvider, } from '../commands/perf.js';
-import { buildFrameBudget } from './layout/budget.js';
-import { OVERLAY_PAGE, useWheelRouting } from './use-wheel-routing.js';
+import { buildFrameBudget, POPUP_CAPACITY_SHARE } from './layout/budget.js';
+import { useWheelRouting } from './use-wheel-routing.js';
 import { INDEX_KEY_FRAME } from '../input/limits.js';
 import { INDEX_SKILL_NAME, buildIndexConfirmSummary, hasProjectIndex, indexBuildInvocationArgs, } from '../commands/index-build.js';
 import { installConsoleBridge } from './console-bridge.js';
 import { publishExitSnapshot } from './exit-snapshot.js';
 import { publishSessionView } from './session-bridge.js';
-import { OverlayFrame } from './layout/OverlayFrame.js';
+import { OverlayFrame, overlayPageSize } from './layout/OverlayFrame.js';
 import { helpRows } from './overlays/HelpOverlay.js';
 import { ModelPicker } from './overlays/ModelPicker.js';
 import { createModelProbe } from '../agent/model-probe.js';
@@ -132,7 +135,11 @@ function seedViewState(seed) {
         ? viewReducer(base, { type: 'restoreEntries', entries: seed.entries })
         : base;
 }
-export function App({ controller, version, initialOverlay, initialPrompt, confirmBridge, humanInputBridge, mouseSource, vtInputWarning, updateBridge, pasteBridge, terminal, initialEntries, session, sessionBridge, sessionNotice, }) {
+export function App({ controller, version, initialOverlay, initialPrompt, confirmBridge, humanInputBridge, mouseSource, vtInputWarning, updateBridge, pasteBridge, terminal, scrollMode = 'app', scrollback, initialEntries, session, sessionBridge, sessionNotice, }) {
+    const native = scrollMode === 'native' && scrollback !== undefined;
+    /** Set when the native writer swallowed repeated tall frames; cleared by a resize. */
+    const [guardTripped, setGuardTripped] = useState(false);
+    const scrollbackViewRef = useRef(null);
     const { exit } = useApp();
     const { stdout } = useStdout();
     const size = useTerminalSize();
@@ -148,7 +155,24 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const [statusExpanded, setStatusExpanded] = useState(false);
     const dimensions = buildFrameBudget({ ...size, draftRows, popupRows, statusExpanded });
     const { rows, cols } = dimensions;
-    const tooSmall = dimensions.inactive;
+    /**
+     * Rows one PgUp/PgDn - and one Shift+wheel notch - turns inside a controlled
+     * overlay (defect 11).
+     *
+     * ONE VALUE FOR BOTH BRANCHES, derived from the overlay's real window: a
+     * constant 8 was 42% of `/help`'s 19-row window, so a shortcut list needed
+     * twelve keystrokes and overlapped itself by eleven rows on every turn. The
+     * wheel branch gets it through `getOverlayPage`, so the two can never disagree.
+     *
+     * MEASURED FROM THIS BUDGET, NOT `frameBudget` BELOW. The two agree on every
+     * frame except the one that opens an overlay with the completion menu still
+     * reported (`frameBudget` zeroes `popupRows` there), and that exception only
+     * makes the real window LARGER - so this page can under-turn for one frame but
+     * can never step past the window and skip content. The unsafe direction is the
+     * one that matters, and it is unreachable.
+     */
+    const overlayPage = overlayPageSize(dimensions.viewportRows + (native ? 1 : 0), cols);
+    const tooSmall = dimensions.inactive || (native && guardTripped);
     // --- Render governor (tui-render-performance L4). ------------------------
     //
     // FIRST, BEFORE ANY OTHER WORK IN THIS BODY. The hook stamps
@@ -1037,6 +1061,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             nodeVersion: vtInputWarning.nodeVersion,
             onSeen: () => setVtInputNoticeVersion(VT_INPUT_NOTICE_VERSION),
         }
+        : undefined, native
+        ? { onSeen: () => setScrollModeNoticeVersion(SCROLL_MODE_NOTICE_VERSION) }
         : undefined);
     // --- Exit snapshot: the only way state reaches cli.tsx (§4.4). ----------
     useEffect(() => {
@@ -1474,6 +1500,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         ...(sessionBridge?.branch ? { branch: sessionBridge.branch } : {}),
         dispatch: (action) => {
             if (action.type === 'resetConversation' || action.type === 'restoreEntries') {
+                scrollbackViewRef.current?.notifyReset(action.type === 'resetConversation' ? 'clear' : 'restore');
                 metrics.current = createRunMetrics();
                 manualMetrics.current = createRunMetrics();
                 setScrollResetKey((n) => n + 1);
@@ -1524,6 +1551,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             }
             : {}),
         ...(terminal?.writeForeign ? { writeForeign: terminal.writeForeign } : {}),
+        ...(native ? { nativeScroll: true } : {}),
     });
     /**
      * Submitting a prompt no longer touches `config.json` at all — it appends one
@@ -1764,6 +1792,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         isPointerCaptured: () => terminal?.scrollbar?.controller?.isCaptured() ?? false,
         isActive: () => !tooSmall,
         getOverlay: () => stateRef.current.overlay,
+        getOverlayPage: () => overlayPage,
         onScroll: scrollBy,
         onOverlayScroll: (delta) => setOverlayScroll((n) => Math.max(0, n + delta)),
     });
@@ -1975,12 +2004,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             const controlled = overlay === 'help' || overlay === 'settings' || overlay === 'plan' || overlay === 'queue';
             if (key.pageUp) {
                 if (controlled)
-                    setOverlayScroll((n) => Math.max(0, n - OVERLAY_PAGE));
+                    setOverlayScroll((n) => Math.max(0, n - overlayPage));
                 return;
             }
             if (key.pageDown) {
                 if (controlled)
-                    setOverlayScroll((n) => n + OVERLAY_PAGE);
+                    setOverlayScroll((n) => n + overlayPage);
                 return;
             }
             // `settings` keeps Up/Down for field movement — a high-frequency action
@@ -2024,7 +2053,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             setRedrawNonce((n) => n + 1);
             return;
         }
-        {
+        // Native mode has no scrollable viewport: the terminal owns scrolling, so these
+        // keys are left alone. An open overlay is application content and keeps them.
+        if (!native || stateRef.current.overlay) {
             if (key.pageUp) {
                 scrollBy('pageUp');
                 return;
@@ -2045,10 +2076,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         if (key.ctrl && (input === 't' || input === 'T')) {
             const revealing = !stateRef.current.thinkingVisible;
             dispatch({ type: 'toggleThinking' });
+            // Printed history never changes, so say what the toggle actually reaches.
+            const scope = native ? ' Applies to new messages.' : '';
             if (!revealing)
-                toast('info', 'Thinking hidden.');
+                toast('info', `Thinking hidden.${scope}`);
             else
-                toast('info', 'Thinking shown.');
+                toast('info', `Thinking shown.${scope}`);
             return;
         }
         if (key.ctrl && (input === 'o' || input === 'O')) {
@@ -2072,7 +2105,13 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                 e.kind === 'team' ||
                 e.kind === 'compaction' ||
                 (e.kind === 'service' && !e.terminal));
-            if (last)
+            // Native mode cannot rewrite what is already printed, so it PRINTS an expanded
+            // copy as a new block instead of toggling the old one (spec 4.7).
+            if (last && native) {
+                if (!scrollbackViewRef.current?.reprintExpanded(last.id))
+                    toast('info', 'Nothing to expand.');
+            }
+            else if (last)
                 dispatch({ type: 'toggleExpand', id: last.id });
             // WIDENED FROM `No tool output to expand.`: with three expandable kinds the
             // old wording would be wrong in two of the three empty cases.
@@ -2225,7 +2264,6 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const frameBudget = buildFrameBudget({ rows, cols, draftRows,
         popupRows: overlay ? 0 : popupRows, statusExpanded });
     const viewportBudget = frameBudget.viewportRows;
-    const overlayMaxRows = viewportBudget;
     const composerBaseRows = 0;
     const baseRail = buildTodoRailLayout({
         cols: cols - 1, panelEnabled: cfg.todo.panel, overlayOpen: false,
@@ -2245,9 +2283,49 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         itemCount: state.todos?.items.length ?? 0, viewportBudget,
         teamRows: teamLayout.rowCount, queueRows: queueLayout.rows, popupRows: 0, composerBaseRows,
     });
-    const { visible: showRail, width: railWidth, rows: railRows, contentCols } = railLayout;
+    const { visible: railVisible, width: railWidth, rows: railRows, contentCols } = railLayout;
+    // No fixed frame means no side rail in native mode (N4); the status chip carries it.
+    const showRail = railVisible && !native;
     const transcriptEntries = useMemo(() => selectTranscriptEntries(state.entries, state.pendingSteering), [state.entries, state.pendingSteering]);
-    const overlayNode = overlay === 'queue' ? (_jsx(QueueOverlay, { pending: state.pendingSteering, cols: cols, maxRows: overlayMaxRows, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps })) : overlay === 'help' ? (_jsx(OverlayFrame, { title: "Help", hint: `Esc close ${glyphs.midDot} PgUp/PgDn scroll`, maxRows: overlayMaxRows, cols: cols, rows: helpRows(theme, caps), scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps })) : overlay === 'model' ? (_jsx(ModelPicker, { isActive: !tooSmall, registry: controller.getModelRegistry(), currentProvider: cfg.provider, currentModel: cfg.model, maxRows: overlayMaxRows, cols: cols, theme: theme, caps: caps, onSelect: handleModelSelect })) : overlay === 'settings' ? (_jsx(SettingsScreen, { isActive: !tooSmall, initial: {
+    // --- Native scroll (tui-native-terminal-scroll). -----------------------------
+    //
+    // ALWAYS CALLED, INERT WHEN `enabled` IS FALSE: hooks cannot be conditional, and
+    // an inert hook is what keeps `scrollMode: 'app'` byte-identical (I-S9).
+    const viewCols = native ? Math.max(1, cols - 1) : cols;
+    const header = (_jsx(Header, { columns: viewCols, statusExpanded: statusExpanded, scrolledLines: scrolledLines, overlayOpen: overlay !== null, cwd: controller.getCwd(), provider: cfg.provider, model: cfg.model, hasKey: hasKey, variant: pickHeaderVariant(cols), theme: theme, caps: caps }));
+    // The wordmark + getting-started card now live INSIDE the viewport, as its
+    // first block of content, so they scroll away instead of being yanked out of
+    // the header the moment the first message lands.
+    const opener = empty ? (_jsx(SessionOpener, { variant: pickOpenerVariant(native ? Math.max(0, rows - 8) : viewportBudget, native ? viewCols : contentCols), version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: native ? Math.max(0, rows - 8) : viewportBudget, theme: theme, caps: caps })) : null;
+    const scrollbackView = useScrollbackView({
+        enabled: native, bridge: scrollback, entries: state.entries, runActive: running,
+        theme, caps, density: cfg.density, thinkingVisible: state.thinkingVisible,
+        reducedMotion, rows, cols, headerNode: header, openerNode: opener,
+        overlayOpen: overlay !== null, draftRows, popupRows: overlay ? 0 : popupRows,
+        statusExpanded, forceInactive: native && guardTripped,
+    });
+    scrollbackViewRef.current = scrollbackView;
+    // The two hooks `cli.tsx` calls from OUTSIDE React: the exit summary (every exit
+    // path, some of which run after this tree is gone, so it reads refs, never state)
+    // and the writer's tall-frame guard. A resize clears the degraded state.
+    useLayoutEffect(() => {
+        if (!native || !scrollback)
+            return undefined;
+        scrollback.getSummaryRows = () => {
+            const live = controller.getConfig();
+            return buildExitSummary({
+                entries: stateRef.current.entries, usageTotal: stateRef.current.usageTotal,
+                provider: live.provider, model: live.model, elapsedMs: Date.now() - startedAt.current,
+                ...(identityRef.current ? { sessionId: identityRef.current.id } : {}), glyphs,
+            });
+        };
+        scrollback.onGuardTrip = () => setGuardTripped(true);
+        return () => { scrollback.onGuardTrip = null; };
+    }, [native, scrollback, controller, glyphs]);
+    useEffect(() => { setGuardTripped(false); }, [rows, cols]);
+    const nativeBudget = native ? scrollbackView.budget : null;
+    const overlayMaxRows = nativeBudget ? nativeBudget.overlayRows : viewportBudget;
+    const overlayNode = overlay === 'queue' ? (_jsx(QueueOverlay, { pending: state.pendingSteering, cols: viewCols, maxRows: overlayMaxRows, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps })) : overlay === 'help' ? (_jsx(OverlayFrame, { title: "Help", hint: `Esc close ${glyphs.midDot} PgUp/PgDn scroll`, maxRows: overlayMaxRows, cols: viewCols, rows: helpRows(theme, caps, native), scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps })) : overlay === 'model' ? (_jsx(ModelPicker, { isActive: !tooSmall, registry: controller.getModelRegistry(), currentProvider: cfg.provider, currentModel: cfg.model, maxRows: overlayMaxRows, cols: viewCols, theme: theme, caps: caps, onSelect: handleModelSelect })) : overlay === 'settings' ? (_jsx(SettingsScreen, { isActive: !tooSmall, initial: {
             provider: cfg.provider,
             model: cfg.model,
             baseUrl: cfg.baseUrl ?? '',
@@ -2281,15 +2359,10 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             // the save handler cannot disagree about what `(inherit)` means.
             ...fastSettingsFrom(cfg.fast),
             ...compactionSettingsFrom(cfg.compaction),
-        }, apiKeys: cfg.apiKeys, maxRows: overlayMaxRows, cols: cols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, draft: settingsDraft, probe: probe, onProfileSave: handleProfileSave, onReload: () => controller.createModelSettingsDraft(), onClose: () => dispatch({ type: 'setOverlay', overlay: null }), 
+        }, apiKeys: cfg.apiKeys, maxRows: overlayMaxRows, cols: viewCols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, draft: settingsDraft, probe: probe, onProfileSave: handleProfileSave, onReload: () => controller.createModelSettingsDraft(), onClose: () => dispatch({ type: 'setOverlay', overlay: null }), 
         // Read from `cfg` (render scope, re-read every frame), so `/retry off`
         // while the screen is open shows the new value on the next paint.
-        retrySummary: cfg.retry.enabled && cfg.retry.maxRetries > 0 ? String(cfg.retry.maxRetries) : 'off' })) : overlay === 'confirm' && confirmState ? (_jsx(ConfirmDialog, { isActive: !tooSmall, state: confirmState, maxRows: overlayMaxRows, cols: cols, theme: theme, caps: caps, onClose: closeConfirm })) : overlay === 'question' && humanRequest?.kind === 'questions' ? (_jsx(QuestionOverlay, { isActive: !tooSmall, questions: humanRequest.questions, maxRows: overlayMaxRows, cols: cols, theme: theme, caps: caps, onSubmit: (answers) => resolveHuman({ kind: 'answers', answers, cancelled: false }) })) : overlay === 'plan' && humanRequest?.kind === 'plan' ? (_jsx(PlanReviewOverlay, { isActive: !tooSmall, plan: humanRequest.plan, maxRows: overlayMaxRows, cols: cols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, onVerdict: handlePlanVerdict })) : null;
-    const header = (_jsx(Header, { columns: cols, statusExpanded: statusExpanded, scrolledLines: scrolledLines, overlayOpen: overlay !== null, cwd: controller.getCwd(), provider: cfg.provider, model: cfg.model, hasKey: hasKey, variant: pickHeaderVariant(cols), theme: theme, caps: caps }));
-    // The wordmark + getting-started card now live INSIDE the viewport, as its
-    // first block of content, so they scroll away instead of being yanked out of
-    // the header the moment the first message lands.
-    const opener = empty ? (_jsx(SessionOpener, { variant: pickOpenerVariant(viewportBudget, contentCols), version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: viewportBudget, theme: theme, caps: caps })) : null;
+        retrySummary: cfg.retry.enabled && cfg.retry.maxRetries > 0 ? String(cfg.retry.maxRetries) : 'off' })) : overlay === 'confirm' && confirmState ? (_jsx(ConfirmDialog, { isActive: !tooSmall, state: confirmState, maxRows: overlayMaxRows, cols: viewCols, theme: theme, caps: caps, onClose: closeConfirm })) : overlay === 'question' && humanRequest?.kind === 'questions' ? (_jsx(QuestionOverlay, { isActive: !tooSmall, questions: humanRequest.questions, maxRows: overlayMaxRows, cols: viewCols, theme: theme, caps: caps, onSubmit: (answers) => resolveHuman({ kind: 'answers', answers, cancelled: false }) })) : overlay === 'plan' && humanRequest?.kind === 'plan' ? (_jsx(PlanReviewOverlay, { isActive: !tooSmall, plan: humanRequest.plan, maxRows: overlayMaxRows, cols: viewCols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, onVerdict: handlePlanVerdict })) : null;
     const density = cfg.density;
     const transcriptWindow = cfg.transcriptWindow ?? DEFAULT_TRANSCRIPT_WINDOW;
     // The fixed status bar remains visible underneath every overlay and toast.
@@ -2308,8 +2381,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         heightsMeasured: heights.stats().measured,
         heightsEstimated: heights.stats().estimated,
         cols: contentCols,
-        mode: 'fullscreen',
-        viewportRows: viewportBudget,
+        mode: native ? 'native' : 'fullscreen',
+        viewportRows: nativeBudget ? nativeBudget.liveRows : viewportBudget,
         offset: scrolledLines,
         // A getter: the bridge's `frameReady` and geometry change outside React renders.
         get scrollbar() {
@@ -2319,7 +2392,17 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         },
     };
     // Completion shares the fixed editor slot and its frame budget.
-    const popupMaxRows = 6;
+    //
+    // THE FRAME BUDGET, NOT A LITERAL 6 (defect 10), BUT NOT ALL OF IT EITHER.
+    // `popupMaxHeight` is the capacity `buildFrameBudget` already computed, and a
+    // second, smaller constant here is what made 57 commands browsable six at a time
+    // on a 30-row terminal. Handing over the WHOLE capacity is wrong in the other
+    // direction: `popupCapacity` reserves exactly one message row, so at 20 rows it
+    // grants 13, the transcript collapses to a single row and the TODO rail
+    // disappears - measured, `todo-app-layout.test.tsx` catches it. Half the granted
+    // capacity keeps the menu growing with the terminal (6 rows at 20, 11 at 30, 16
+    // at 40) while the conversation and the rail keep theirs.
+    const popupMaxRows = Math.floor(frameBudget.popupMaxHeight / POPUP_CAPACITY_SHARE);
     // WHICH KEY THE HINT ROW NAMES (shift-tab-mode-toggle-still-dead-on-windows,
     // C3-1). Derived from `vtInputWarning` rather than from a probe of its own,
     // because that prop is already the single answer to "can this console deliver
@@ -2348,7 +2431,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             level: latestToast.level === 'success' ? 'info' : latestToast.level } : undefined,
     });
     const statusInput = {
-        columns: cols, phase: state.runPhase, pendingCount: state.pendingSteering.length,
+        columns: viewCols, phase: state.runPhase, pendingCount: state.pendingSteering.length,
         context: state.context, usageTotal: state.usageTotal, thinkingLevel: cfg.thinkingLevel,
         elapsedMs, tokPerSec, speedKnown, activeTool: state.activeTool, runOutcome: state.runOutcome,
         waitingForConfirmation: !!humanRequest || !!confirmState,
@@ -2364,7 +2447,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         ...feedbackProjection,
     };
     const details = planStatusDetail({ status: statusInput, model: cfg.model, provider: cfg.provider,
-        hints: { interactionPhase: interactionPhase.current, cols, completion, overlay,
+        hints: { interactionPhase: interactionPhase.current, cols: viewCols, completion, overlay,
             selectionPending: selectionController?.hasPendingSelection() ?? false,
             copyInFlight: copyState.busy, copyCleanupPending: copyState.cleanupPending,
             hasDraft: hasDraftRef.current, services: liveServices,
@@ -2375,43 +2458,48 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const team = state.team ? (_jsx(TeamPanel, { snapshot: state.team, layout: teamLayout, rows: rows, cols: contentCols, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null;
     const rail = showRail && state.todos ? (_jsx(TodoPanel, { snapshot: state.todos, width: railWidth, rows: railRows, running: running, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null;
     const viewport = (_jsxs(ScrollViewport, { active: overlay === null && !tooSmall, overlay: overlayNode, footer: _jsxs(_Fragment, { children: [team, _jsx(QueuePanel, { layout: queueLayout, theme: theme })] }), rail: rail, scrollbar: terminal?.scrollbar, resetKey: scrollResetKey, intent: scrollIntent, pinToBottomNonce: pinToBottomNonce, onScrolledLinesChange: setScrolledLines, onViewportShiftChange: onViewportShiftChange, onGeometryChange: onGeometryChange, geometryKey: `${rows}:${cols}:${viewportBudget}:${frameBudget.composerSlotRows}:${frameBudget.statusRows}:${contentCols}:${overlay}:${tooSmall}`, tailRowsRef: tailSink, hold: selectionHold, resumeMs: cfg.scrollResumeMs, showScrollIndicator: true, cols: contentCols, theme: theme, caps: caps, children: [opener, _jsx(TranscriptList, { entries: transcriptEntries, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: viewReducedMotion, density: density, nowSec: nowSec, theme: theme, caps: caps, windowSize: transcriptWindow, cols: contentCols, heights: heights, mountedSink: mountedCount, tailSink: tailSink })] }));
-    return (_jsx(AppShell, { inactive: tooSmall, placeholder: _jsxs(Text, { wrap: "truncate", color: theme.noticeWarn, children: [glyphs.warn, " Terminal too small - needs at least 40 columns and 12 rows."] }), rows: rows, cols: cols, header: header, viewport: viewport, viewportRows: frameBudget.viewportRows, composer: composer, composerSlotRows: frameBudget.composerSlotRows, statusRows: frameBudget.statusRows, details: _jsx(BottomStatusRow, { plan: details, columns: cols, theme: theme }), status: _jsx(StatusBar, { columns: cols, speedKnown: speedKnown, ...feedbackProjection, interruptPhase: interruptGesture.current.phase, pendingSteering: state.pendingSteering, runPhase: state.runPhase, activeTool: state.activeTool, runOutcome: state.runOutcome, reducedMotion: reducedMotion, ...(sessionId ? { sessionId } : {}), waitingForConfirmation: !!humanRequest || !!confirmState, stopping: interruptGesture.current.phase === 'stopping', interruptHint: interruptGesture.current.phase === 'stopping'
-                ? 'Esc force-stop' : 'Esc x2 interrupt', model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, 
-            // ONE OBJECT INSTEAD OF FOUR PARALLEL PROPS (§4.3). The four were a
-            // projection of "many sources of truth" into the props layer, and a
-            // caller could update three of them; a single reading cannot be
-            // partially stale. The window and its `known` flag now travel INSIDE
-            // it, resolved by the meter - which is what makes the user's
-            // `contextWindow` override reach the bar.
-            context: state.context, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ecoRung: governor.rung, ...(state.team
-                ? {
-                    teamActive: {
-                        running: state.team.runs.filter((r) => r.phase !== 'queued' && r.phase !== 'done' &&
-                            r.phase !== 'failed' && r.phase !== 'aborted').length,
-                        total: state.team.runs.length,
-                    },
-                }
-                : {}), ...(state.todos && !showRail
-                ? { todoActive: { done: state.todos.doneCount, total: state.todos.total } }
-                : {}), ...(liveServices > 0 ? { servicesActive: { live: liveServices } } : {}), ...(state.fast?.live ? { fastActive: { inFlight: state.fast.inFlight } } : {}), 
-            // Manual compaction starts before its next snapshot is published.
-            compactionActive: { inFlight: statusInput.compacting ?? false }, ...(controller.isCompactionEnabled()
-                ? {
-                    gaugeMarks: {
-                        warn: cfg.compaction.warnThreshold * 100,
-                        high: cfg.compaction.threshold * 100,
-                    },
-                }
-                : {}), ...(state.retry
-                ? {
-                    retryActive: {
-                        attempt: state.retry.attempt,
-                        max: state.retry.maxRetries,
-                        // Recomputed at RENDER from the absolute `resumeAt`, which is
-                        // what keeps the chip and the transcript card showing the same
-                        // number without either of them owning a second clock.
-                        secondsLeft: secondsLeft(state.retry.resumeAt, Date.now()),
-                    },
-                }
-                : {}) }) }));
+    const detailsNode = _jsx(BottomStatusRow, { plan: details, columns: viewCols, theme: theme });
+    const statusNode = (_jsx(StatusBar, { columns: viewCols, speedKnown: speedKnown, ...feedbackProjection, interruptPhase: interruptGesture.current.phase, pendingSteering: state.pendingSteering, runPhase: state.runPhase, activeTool: state.activeTool, runOutcome: state.runOutcome, reducedMotion: reducedMotion, ...(sessionId ? { sessionId } : {}), waitingForConfirmation: !!humanRequest || !!confirmState, stopping: interruptGesture.current.phase === 'stopping', interruptHint: interruptGesture.current.phase === 'stopping'
+            ? 'Esc force-stop' : 'Esc x2 interrupt', model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, 
+        // ONE OBJECT INSTEAD OF FOUR PARALLEL PROPS (§4.3). The four were a
+        // projection of "many sources of truth" into the props layer, and a
+        // caller could update three of them; a single reading cannot be
+        // partially stale. The window and its `known` flag now travel INSIDE
+        // it, resolved by the meter - which is what makes the user's
+        // `contextWindow` override reach the bar.
+        context: state.context, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ecoRung: governor.rung, ...(state.team
+            ? {
+                teamActive: {
+                    running: state.team.runs.filter((r) => r.phase !== 'queued' && r.phase !== 'done' &&
+                        r.phase !== 'failed' && r.phase !== 'aborted').length,
+                    total: state.team.runs.length,
+                },
+            }
+            : {}), ...(state.todos && !showRail
+            ? { todoActive: { done: state.todos.doneCount, total: state.todos.total } }
+            : {}), ...(liveServices > 0 ? { servicesActive: { live: liveServices } } : {}), ...(state.fast?.live ? { fastActive: { inFlight: state.fast.inFlight } } : {}), 
+        // Manual compaction starts before its next snapshot is published.
+        compactionActive: { inFlight: statusInput.compacting ?? false }, ...(controller.isCompactionEnabled()
+            ? {
+                gaugeMarks: {
+                    warn: cfg.compaction.warnThreshold * 100,
+                    high: cfg.compaction.threshold * 100,
+                },
+            }
+            : {}), ...(state.retry
+            ? {
+                retryActive: {
+                    attempt: state.retry.attempt,
+                    max: state.retry.maxRetries,
+                    // Recomputed at RENDER from the absolute `resumeAt`, which is
+                    // what keeps the chip and the transcript card showing the same
+                    // number without either of them owning a second clock.
+                    secondsLeft: secondsLeft(state.retry.resumeAt, Date.now()),
+                },
+            }
+            : {}) }));
+    if (nativeBudget) {
+        return (_jsx(ScrollbackShell, { budget: nativeBudget, overlay: overlayNode, liveTailLines: scrollbackView.liveTailLines, composer: composer, status: statusNode, details: detailsNode, placeholder: _jsxs(Text, { wrap: "truncate", color: theme.noticeWarn, children: [glyphs.warn, " Terminal too small - needs at least 40 columns and 12 rows."] }), theme: theme }));
+    }
+    return (_jsx(AppShell, { inactive: tooSmall, placeholder: _jsxs(Text, { wrap: "truncate", color: theme.noticeWarn, children: [glyphs.warn, " Terminal too small - needs at least 40 columns and 12 rows."] }), rows: rows, cols: cols, header: header, viewport: viewport, viewportRows: frameBudget.viewportRows, composer: composer, composerSlotRows: frameBudget.composerSlotRows, statusRows: frameBudget.statusRows, details: detailsNode, status: statusNode }));
 }

package/dist/ui/AutocompletePopup.js

@@ -12,6 +12,6 @@ export function AutocompletePopup({ items, selected, theme, caps, maxRows, layou
     return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: theme.border, paddingX: 1, children: [visible.map((item, i) => {
                 const idx = windowStart + i;
                 const active = idx === selected;
-                return (_jsxs(Text, { inverse: active, wrap: "truncate", children: [_jsx(Text, { color: active ? undefined : theme.primary, children: item.label.replace(/\s+/g, ' ') }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint.replace(/\s+/g, ' ')] }) : null] }, idx));
+                return (_jsxs(Text, { inverse: active, wrap: "truncate", children: [_jsx(Text, { color: active ? theme.accent : theme.muted, children: active ? `${glyphs.caret} ` : '  ' }), _jsx(Text, { color: active ? undefined : theme.primary, children: item.label.replace(/\s+/g, ' ') }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint.replace(/\s+/g, ' ')] }) : null] }, idx));
             }), showMore && _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
 }

package/dist/ui/Header.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { basename } from 'node:path';
 import { Box, Text } from 'ink';
 import { Logo } from './Logo.js';
-import { planHeaderHints } from './layout/header-hints.js';
+import { planHeaderHints, HEADER_HINT_LIMITS } from './layout/header-hints.js';
 export function Header({ cwd, provider, model, hasKey, variant, theme, caps, columns = 80, statusExpanded = false, scrolledLines = 0, overlayOpen = false }) {
     // The right-hand hints are planned, not assembled (tui-branch-terminal-shortcut
     // 3.9 / D-11). `plan.text` is exactly `plan.cells` wide and already carries the
@@ -10,5 +10,10 @@ export function Header({ cwd, provider, model, hasKey, variant, theme, caps, col
     // hint by guessing one cell short - and the ladder that decides which hints
     // survive a narrow terminal lives in a pure function with its own tests.
     const plan = planHeaderHints({ columns, statusExpanded, overlayOpen, scrolledLines });
-    return _jsxs(Box, { flexDirection: "row", height: 1, width: columns, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { width: Math.max(0, columns - plan.cells), flexShrink: 0, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Logo, { variant: variant === 'mini' ? 'mini' : 'bar', theme: theme, caps: caps }), variant !== 'mini' && _jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.accent, children: ['  ', provider, ":", model] }), _jsxs(Text, { color: theme.muted, children: ['  ', basename(cwd) || cwd] }), _jsxs(Text, { color: hasKey ? theme.toolDone : theme.toolRunning, children: ['  ', hasKey ? theme.symbols.keyOn : theme.symbols.keyOff] })] })] }) }), _jsx(Box, { width: plan.cells, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: plan.text }) })] });
+    // THE TWO HALVES ARE SEPARATED BY CELLS, NOT BY LUCK (defect 12). The left half
+    // is `wrap="truncate"`, which draws its ellipsis in the LAST cell it owns; with
+    // the right half starting in the very next cell a narrow terminal read
+    // `aragon...Details off` as one string. The blank column comes out of the left
+    // half's width, so the row still spans exactly `columns`.
+    return _jsxs(Box, { flexDirection: "row", height: 1, width: columns, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { width: Math.max(0, columns - plan.cells - HEADER_HINT_LIMITS.separatorCells), flexShrink: 0, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Logo, { variant: variant === 'mini' ? 'mini' : 'bar', theme: theme, caps: caps }), variant !== 'mini' && _jsxs(_Fragment, { children: [_jsxs(Text, { color: theme.accent, children: ['  ', provider, ":", model] }), _jsxs(Text, { color: theme.muted, children: ['  ', basename(cwd) || cwd] }), _jsxs(Text, { color: hasKey ? theme.toolDone : theme.toolRunning, children: ['  ', hasKey ? theme.symbols.keyOn : theme.symbols.keyOff] })] })] }) }), _jsx(Box, { width: HEADER_HINT_LIMITS.separatorCells, flexShrink: 0 }), _jsx(Box, { width: plan.cells, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: plan.text }) })] });
 }

package/dist/ui/Markdown.js

@@ -16,22 +16,49 @@ function renderBlock(block, key, theme, glyphs) {
         case 'code':
             return (_jsx(CodeBlock, { code: block.code, lang: block.lang, theme: theme, glyphs: glyphs }, `b${key}`));
         case 'table': {
-            const formatted = formatTable(block.rows, block.align);
-            return (_jsx(Box, { flexDirection: "column", children: formatted.map((row, r) => (_jsx(Text, { wrap: "truncate", bold: r === 0, color: r === 0 ? theme.accent : undefined, children: row }, r))) }, `b${key}`));
+            // Glyphs are injected rather than hardcoded: this module is inside the
+            // ASCII-only scan, and the pure parser defaults to ASCII `|` / `-`.
+            const formatted = formatTable(block.rows, block.align, {
+                separator: glyphs.railVertical,
+                rule: glyphs.hrule,
+            });
+            return (_jsx(Box, { flexDirection: "column", children: formatted.map((row, r) => (_jsx(Text, { wrap: "truncate", bold: r === 0, color: tableRowColor(r, theme), children: row }, r))) }, `b${key}`));
         }
         default:
             return _jsx(InlineLine, { line: block.text, theme: theme, glyphs: glyphs }, `b${key}`);
     }
 }
+/**
+ * Table row 0 is the header (bold + accent); row 1 is the divider drawn under it.
+ *
+ * The divider must stay distinguishable at colour level 0, where bold is dropped
+ * to nothing, so it is MUTED and never bold: in `--no-color` the `----` run is
+ * itself the signal, and in a coloured tier the weight difference separates the
+ * header from the rule beneath it.
+ */
+function tableRowColor(index, theme) {
+    if (index === 0)
+        return theme.accent;
+    if (index === 1)
+        return theme.muted;
+    return undefined;
+}
 /**
  * Fenced code. The round border is gone (§4.3): nested inside a tool card it
  * produced a box inside a box and squeezed an 80-column terminal down to 74
  * usable columns. A left rail plus the language tag conveys the same "this is
  * code" boundary for 1 column and 0 rows.
+ *
+ * The language tag is a muted TITLE, not a body row: it used to carry a chip
+ * background and one padding space either side of the text, so it rendered as
+ * `  |  ts` above code rows that start at `| export ...` — a body line that
+ * happened to be the language. It keeps its own row on purpose: the height
+ * estimator (`virtual-window.estimateEntryRows`) counts RAW markdown lines and
+ * has no code-block branch, so the fence line must still occupy exactly 1 row.
  */
 function CodeBlock({ code, lang, theme, glyphs, }) {
     const rendered = highlightCached(code, lang);
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: [lang.length > 0 && (_jsx(Text, { color: theme.chip.fg, backgroundColor: theme.chip.bg, children: ` ${lang} ` })), _jsx(Text, { children: rendered })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: [lang.length > 0 && (_jsx(Text, { bold: true, color: theme.muted, children: lang })), _jsx(Text, { children: rendered })] }));
 }
 /** Six heading levels used to render identically; now they carry three weights. */
 function headingStyle(level, theme) {

package/dist/ui/PromptInput.js

@@ -234,6 +234,31 @@ export function fileTokenAt(buffer, cursor) {
         end += 1;
     return { start, end, query: buffer.slice(start + 1, end) };
 }
+/**
+ * How many `@file` candidates reach the popup.
+ *
+ * The popup has its own row budget; this is the list it windows. Twenty ranked
+ * paths are enough to spot the one you meant, and it bounds the array that every
+ * draft edit re-renders.
+ */
+const FILE_MATCH_LIMIT = 20;
+/**
+ * Segments in a path - the first ranking key for an EMPTY `@` query (defect 10).
+ *
+ * A bare `@` matches every file in the tree, and `tinyGlob` returns them in
+ * whatever order the filesystem walked, so opening the popup without a rank gave
+ * a correct-but-arbitrary twenty. Shallowest first, then shortest, then
+ * alphabetical: the paths a user is reaching for (`src/`, a root config) come
+ * before `packages/cli/src/ui/layout/deep/thing.ts`.
+ */
+function pathDepth(path) {
+    let depth = 1;
+    for (const char of path) {
+        if (char === '/' || char === '\\')
+            depth += 1;
+    }
+    return depth;
+}
 /** A leading C0 control byte or ESC sequence should never be inserted raw. */
 function isControlSeq(input) {
     if (input.length === 0)
@@ -253,7 +278,11 @@ export function PromptInput({ cols: colsProp, terminalRows: terminalRowsProp, st
     const slashSug = dismissed ? null : slashSuggestions(buffer, commands);
     const fileTok = fileTokenAt(buffer, cursor);
     const fileQuery = fileTok ? fileTok.query : null;
-    const fileActive = !dismissed && !!fileTok && fileTok.query.length >= 1 && fileMatches.length > 0;
+    // A BARE `@` OPENS THE POPUP (defect 10). The `query.length >= 1` gate here and
+    // the `< 1` early return in the scan effect below were the whole reason a lone
+    // `@` showed nothing while `README.md` promises "@ opens a file-path completion
+    // popup". An empty query is a legitimate one: it lists the shallowest paths.
+    const fileActive = !dismissed && !!fileTok && fileMatches.length > 0;
     const popupKind = slashSug && slashSug.length > 0 ? 'slash' : fileActive ? 'file' : null;
     const popupItems = popupKind === 'slash'
         ? slashSug
@@ -263,7 +292,7 @@ export function PromptInput({ cols: colsProp, terminalRows: terminalRowsProp, st
     const clampedSel = popupItems.length > 0 ? Math.min(sel, popupItems.length - 1) : 0;
     // --- Debounced `@file` scan. ---------------------------------------------
     useEffect(() => {
-        if (fileQuery === null || fileQuery.length < 1) {
+        if (fileQuery === null) {
             setFileMatches([]);
             return;
         }
@@ -279,7 +308,16 @@ export function PromptInput({ cols: colsProp, terminalRows: terminalRowsProp, st
                 if (cancelled)
                     return;
                 const q = fileQuery.toLowerCase();
-                setFileMatches(matches.filter((m) => m.toLowerCase().includes(q)).slice(0, 20));
+                // RANKED, NOT WALK ORDER (defect 10). An empty query matches every path
+                // in the tree, so without a sort the popup for a bare `@` was
+                // correct-but-arbitrary - the first twenty the filesystem happened to
+                // hand back.
+                const ranked = matches
+                    .filter((m) => m.toLowerCase().includes(q))
+                    .sort((a, b) => pathDepth(a) - pathDepth(b)
+                    || a.length - b.length || (a < b ? -1 : a > b ? 1 : 0))
+                    .slice(0, FILE_MATCH_LIMIT);
+                setFileMatches(ranked);
             })
                 .catch(() => {
                 if (!cancelled)

package/dist/ui/ScrollbackShell.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ScrollbackShell — the bounded LIVE REGION of native-scroll mode
+ * (tui-native-terminal-scroll §4.6).
+ *
+ * The full-screen `AppShell` fills the whole terminal; this shell is only as tall as
+ * `budget.liveRows` (the root box height IS that number: giving it the frame height
+ * would make the "small region" a whole screen again, and Ink would then repaint a
+ * screenful per frame). Everything settled has already been printed into the
+ * terminal's own scrollback above it.
+ *
+ * Top to bottom: [overlay | streaming preview] -> composer -> status (-> details).
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { ScrollbackBudget } from './scrollback/budget.js';
+export interface ScrollbackShellProps {
+    budget: ScrollbackBudget;
+    /** Shown instead of the preview when an overlay is open. */
+    overlay: React.ReactNode | null;
+    /** Plain preview rows, bottom-aligned just above the composer. */
+    liveTailLines: readonly string[];
+    composer: React.ReactNode;
+    status: React.ReactNode;
+    details?: React.ReactNode;
+    placeholder: React.ReactNode;
+    theme: Theme;
+}
+export declare function ScrollbackShell({ budget, overlay, liveTailLines, composer, status, details, placeholder, theme, }: ScrollbackShellProps): React.ReactElement;

package/dist/ui/ScrollbackShell.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function ScrollbackShell({ budget, overlay, liveTailLines, composer, status, details, placeholder, theme, }) {
+    const width = budget.contentCols;
+    if (budget.inactive) {
+        return (_jsx(Box, { flexDirection: "column", height: budget.liveRows, width: width, overflow: "hidden", flexShrink: 0, children: budget.liveRows > 0 ? placeholder : null }));
+    }
+    const tail = liveTailLines.slice(-budget.liveTailRows);
+    return (_jsxs(Box, { flexDirection: "column", height: budget.liveRows, width: width, overflow: "hidden", flexShrink: 0, children: [budget.overlayRows > 0 && (_jsx(Box, { flexDirection: "column", height: budget.overlayRows, flexShrink: 0, overflow: "hidden", children: overlay })), budget.liveTailRows > 0 && (_jsx(Box, { flexDirection: "column", height: budget.liveTailRows, flexShrink: 0, justifyContent: "flex-end", overflow: "hidden", children: tail.map((line, index) => (_jsx(Text, { wrap: "truncate", color: theme.muted, children: line }, index))) })), _jsx(Box, { flexDirection: "column", height: budget.composerSlotRows, justifyContent: "flex-end", flexShrink: 0, overflow: "hidden", children: composer }), _jsx(Box, { height: budget.statusRows > 0 ? 1 : 0, flexShrink: 0, overflow: "hidden", children: status }), budget.statusRows === 2 && (_jsx(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: details }))] }));
+}

package/dist/ui/Transcript.js

@@ -65,6 +65,13 @@ function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion,
             // place by `turnStart` (5.2.3).
             return frame(glyphs.queued, theme.muted, _jsx(QueuedEntry, { text: entry.text, theme: theme, caps: caps }));
         case 'assistant': {
+            // Render-layer backstop for the reducer prune (defect 5) - the reducer is the
+            // source of truth, and this only catches a settled, entirely empty bubble
+            // that reached here some other way. Returned BEFORE `frame(...)`, so neither
+            // the glyph row nor the separation row is drawn.
+            if (!entry.streaming && entry.text.trim() === '' && (entry.thinking ?? '').trim() === '') {
+                return null;
+            }
             const animate = entry.streaming && !reducedMotion && caps.unicode;
             return frame(animate ? _jsx(Spinner, { type: "dots" }) : glyphs.assistant, theme.primary, _jsx(AssistantEntry, { text: entry.text, thinking: entry.thinking, thinkingOpen: entry.thinkingOpen, thinkingVisible: thinkingVisible, streaming: entry.streaming, aborted: entry.aborted, 
                 // `EntryViewImpl` hands each renderer EXPLICIT SCALAR PROPS, so