@aragon-agent/cli 0.6.29 → 0.6.32

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,12 @@ 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 { LiveTail } from './scrollback/LiveTail.js';
+import { SCROLLBACK_LIMITS } from './scrollback/limits.js';
+import { TODO_LIMITS } from '../todo/limits.js';
 import { ScrollViewport } from './layout/ScrollViewport.js';
 import { buildTodoRailLayout } from './layout/todo-layout.js';
 import { buildTeamPanelLayout } from './layout/team-panel.js';
@@ -132,7 +138,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();
@@ -164,8 +174,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
      * 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, cols);
-    const tooSmall = dimensions.inactive;
+    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
@@ -1054,6 +1064,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(() => {
@@ -1491,6 +1503,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);
@@ -1541,6 +1554,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
@@ -2042,7 +2056,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;
@@ -2063,10 +2079,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')) {
@@ -2090,7 +2108,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.
@@ -2226,11 +2250,27 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // there is the exact cost `tui-render-performance` exists to remove. The
     // running tool, when there is one, is within a few entries of the end.
     let runningTool;
+    // THE WAIT PROJECTION (long-task-jobs §4.9 / AC-28). Derived here, in the same
+    // reverse loop, because both answers come from the same place: which tool is in
+    // flight, and — when that tool is `job_wait` — which job it is waiting for and
+    // for how long. The timeout is read from the CALL'S OWN ARGUMENTS rather than
+    // from the config, so a `timeoutSeconds` the model chose is what the row says.
+    let wait;
     if (running) {
         for (let i = state.entries.length - 1; i >= 0; i -= 1) {
             const e = state.entries[i];
             if (e.kind === 'tool' && e.status === 'running') {
                 runningTool = e.name;
+                if (e.name === 'job_wait' && e.args) {
+                    const args = e.args;
+                    const requested = typeof args.timeoutSeconds === 'number'
+                        ? args.timeoutSeconds
+                        : cfg.jobs.waitSeconds;
+                    wait = {
+                        jobId: typeof args.job === 'string' ? args.job : 'job',
+                        upToSeconds: Math.max(0, Math.round(requested)),
+                    };
+                }
                 break;
             }
         }
@@ -2243,7 +2283,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,
@@ -2263,9 +2302,58 @@ 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;
+    // The FULL-SCREEN rail only: native mode draws its rail inside the live region's
+    // panel band (`nativeRail` below), because there is no fixed frame to hang a column
+    // on. This name says which of the two it is; the old `showRail` read like a global
+    // switch and that is how native mode ended up with no rail at all.
+    const fullscreenRailVisible = 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,
+        // The band's inputs. `teamRowsNatural` is the roster layout computed above, so the
+        // band clamps a number this frame already trusts instead of measuring the roster a
+        // second time (`buildTeamPanelLayout` stays the single authority).
+        itemCount: state.todos?.items.length ?? 0,
+        panelEnabled: cfg.todo.panel,
+        teamRowsNatural: teamLayout.rowCount,
+    });
+    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 ?? '',
@@ -2299,15 +2387,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.
@@ -2326,9 +2409,14 @@ 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,
+        // `null` outside native mode, and `/perf` prints `n/a` for it: a band row of
+        // zeroes in full-screen mode would read like a panel that failed to show.
+        band: nativeBudget
+            ? { ...nativeBudget.band, contentCols: nativeBudget.contentCols }
+            : null,
         // A getter: the bridge's `frameReady` and geometry change outside React renders.
         get scrollbar() {
             return readScrollbarPerf({
@@ -2376,9 +2464,12 @@ 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,
+        // The bounded-wait label, when `job_wait` is what is holding the run. Absent
+        // for every other tool, which keeps every existing plan byte-identical.
+        ...(wait ? { wait } : {}),
         waitingForConfirmation: !!humanRequest || !!confirmState,
         stopping: interruptGesture.current.phase === 'stopping',
         interruptPhase: interruptGesture.current.phase,
@@ -2392,7 +2483,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,
@@ -2401,45 +2492,72 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             updateAvailable: !!updateSnapshot && shouldRenderUpdateLine(updateSnapshot) } });
     const composer = (_jsx(Composer, { deleteDisambiguated: terminal?.deleteDisambiguated ?? false, onCompletionContextChange: setCompletion, cols: frameBudget.composerCols, terminalRows: rows, statusExpanded: statusExpanded, onInteraction: returnToComposer, reducedMotion: cfg.reducedMotion ?? false, onEscape: handleComposerEscape, onEscapeDismiss: cancelConfirmation, isActive: overlay === null && !tooSmall, running: state.status === 'running', history: promptHistory, commands: commandOptions, cwd: controller.getCwd(), showHint: false, submitCount: cfg.submitCount, hintsEnabled: cfg.hints, agentMode: state.agentMode, services: liveServices, modeToggleKey: modeToggleKey, popupMaxRows: popupMaxRows, popupMaxHeight: frameBudget.popupMaxHeight, onPopupRowsChange: onPopupRowsChange, onDraftRows: onDraftRows, onDraftPresence: onDraftPresence, draftClearNonce: draftClearNonce, onNotice: notify, theme: theme, caps: caps, onSubmit: handleSubmit, onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) }));
     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;
+    // --- Native panel band (release-gate-and-native-panels §6.3/§6.4) -------------
+    //
+    // SEPARATE NODES, NOT THE TWO ABOVE (RV-P1-7). Those carry `cols={contentCols}` for
+    // the full-screen layout, which has to stay byte-identical (I-3); reusing them here
+    // would silently narrow it. Every number below comes from `budget.band`, and the
+    // number that decides whether a panel mounts IS the number it lays out against - a
+    // panel that mounts on one value and lays out against another renders nothing and
+    // reports nothing (TodoPanel's own I-10 / P1-3 note).
+    const nativeBand = nativeBudget ? nativeBudget.band : null;
+    const nativeRail = state.todos && nativeBand && nativeBand.railRows >= TODO_LIMITS.panelMinRows
+        ? (_jsx(TodoPanel, { snapshot: state.todos, width: nativeBand.railCols, rows: nativeBand.railRows, running: running, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null;
+    // `cols` is the band's left column, not `contentCols`: `TeamPanel.activityBudget` is
+    // continuous in `cols`, so a roster laid out against a column it is not in is exactly
+    // the bug that pushes the elapsed column off an 80-column terminal.
+    const nativeTeam = state.team && nativeBand ? (_jsx(TeamPanel, { snapshot: state.team, layout: teamLayout, rows: rows, cols: nativeBand.previewCols, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null;
+    const rail = fullscreenRailVisible && 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, ...(wait ? { wait } : {}), 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 && !(native
+            ? (nativeBudget?.band.railRows ?? 0) > 0
+            : fullscreenRailVisible)
+            ? { 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, 
+            // Real components for the unfinished tail (I-7); the plain rows above stay as
+            // the fallback for a frame with no preview rows.
+            tail: nativeBudget.band.previewRows > 0
+                ? (_jsx(LiveTail, { unsettled: scrollbackView.unsettledEntries, maxEntries: SCROLLBACK_LIMITS.liveTailMaxEntries, rows: nativeBudget.band.previewRows, cols: nativeBudget.previewCols, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: viewReducedMotion, density: cfg.density, nowSec: nowSec, theme: theme, caps: caps }))
+                : undefined, team: nativeTeam, rail: nativeRail, 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/ScrollbackShell.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 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 | panel band][composer][status][details].
+ *
+ * THE PANEL BAND IS THE PART NATIVE MODE WAS MISSING
+ * (release-gate-and-native-panels §6.1). A fixed frame can put a rail beside the
+ * transcript; without one the rail and the roster simply had nowhere to go, so the
+ * default mode showed neither. The band is a row pool inside the live region:
+ *
+ *   +---------------------------------------------+-----------------+
+ *   | team roster      (height = band.teamRows)    | TODO rail       |
+ *   +---------------------------------------------+ (height =       |
+ *   | unfinished tail  (height = band.previewRows) |  band.railRows) |
+ *   +---------------------------------------------+-----------------+
+ *
+ * Every box in it has an explicit `height` and `width` plus `overflow="hidden"`, and
+ * that is a correctness requirement rather than tidiness: a box that grows with its
+ * content would make the region taller than `budget.liveRows`, and a frame as tall as
+ * the terminal makes Ink erase the user's scrollback (I-4).
+ *
+ * `liveTailLines` STAYS. It is the plain-text fallback for the frames where the real
+ * tail is not mounted (and the floor of the measurement path); `tail` wins when both
+ * are given, so the two can never be drawn on top of each other.
+ */
+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 band when an overlay is open. */
+    overlay: React.ReactNode | null;
+    /** Plain preview rows: the fallback when `tail` is absent (and what `/perf` counts). */
+    liveTailLines: readonly string[];
+    /** Real components for the unfinished tail (`LiveTail`). */
+    tail?: React.ReactNode;
+    /** The subagent roster, drawn at the top of the band's left column. */
+    team?: React.ReactNode;
+    /** The TODO rail, drawn as the band's right-hand column. */
+    rail?: React.ReactNode;
+    composer: React.ReactNode;
+    status: React.ReactNode;
+    details?: React.ReactNode;
+    placeholder: React.ReactNode;
+    theme: Theme;
+}
+export declare function ScrollbackShell({ budget, overlay, liveTailLines, tail, team, rail, composer, status, details, placeholder, theme, }: ScrollbackShellProps): React.ReactElement;

package/dist/ui/ScrollbackShell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function ScrollbackShell({ budget, overlay, liveTailLines, tail, team, rail, 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 band = budget.band;
+    const tailLines = liveTailLines.slice(-budget.liveTailRows);
+    // The overlay and the band are alternatives, not siblings: the band reports
+    // `bandRows = remaining` for an overlay frame, so drawing both would double the
+    // region's height and take the frame to the terminal height (the `ESC[3J` case).
+    const top = band.reason === 'overlay' ? (_jsx(Box, { flexDirection: "column", height: budget.overlayRows, flexShrink: 0, overflow: "hidden", children: overlay })) : band.bandRows > 0 ? (_jsxs(Box, { flexDirection: "row", height: band.bandRows, flexShrink: 0, overflow: "hidden", children: [_jsxs(Box, { flexDirection: "column", width: budget.previewCols, flexShrink: 0, overflow: "hidden", children: [band.teamRows > 0 && (_jsx(Box, { height: band.teamRows, flexShrink: 0, overflow: "hidden", children: team })), band.previewRows > 0 && (_jsx(Box, { flexDirection: "column", height: band.previewRows, flexShrink: 0, justifyContent: "flex-end", overflow: "hidden", children: tail ?? tailLines.map((line, index) => (_jsx(Text, { wrap: "truncate", color: theme.muted, children: line }, index))) }))] }), band.railRows > 0 && (_jsx(Box, { height: band.railRows, width: band.railCols, flexShrink: 0, overflow: "hidden", children: rail }))] })) : null;
+    return (_jsxs(Box, { flexDirection: "column", height: budget.liveRows, width: width, overflow: "hidden", flexShrink: 0, children: [top, _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/StatusBar.d.ts

@@ -19,6 +19,11 @@ export interface StatusBarProps {
         name: string;
         toolCallId: string;
     } | null;
+    /** A bounded wait in flight; replaces the `Running job_wait` label (§4.9). */
+    wait?: {
+        jobId: string;
+        upToSeconds: number;
+    };
     runOutcome?: "none" | "ended" | "interrupted" | "failed";
     reducedMotion?: boolean;
     waitingForConfirmation?: boolean;

package/dist/ui/StatusBar.js

@@ -27,6 +27,7 @@ export function StatusBar(props) {
         context: props.context, usageTotal: props.usageTotal,
         thinkingLevel: props.thinkingLevel, elapsedMs: props.elapsedMs, tokPerSec: props.tokPerSec,
         activeTool: props.activeTool, runOutcome: props.runOutcome, spinner: glyph,
+        ...(props.wait ? { wait: props.wait } : {}),
         speedKnown: props.speedKnown, feedback: props.feedback, escapeAction: props.escapeAction,
         interruptPhase: props.interruptPhase,
         waitingForConfirmation: props.waitingForConfirmation, stopping: props.stopping,

package/dist/ui/Transcript.d.ts

@@ -26,6 +26,20 @@ interface TranscriptProps {
     theme: Theme;
     caps: TermCapabilities;
 }
+/**
+ * The value `EntryView` should receive for `nowSec` on THIS entry.
+ *
+ * `undefined` for everything that is not a running tool, which is what keeps
+ * every other card's memo boundary intact — `undefined === undefined` in the
+ * comparator, on every frame, forever.
+ *
+ * EXPORTED for `ui/scrollback/LiveTail.tsx` (release-gate-and-native-panels §6.5), and
+ * that is the whole of this feature's change to this file: the live region mounts the
+ * same `EntryView` the transcript does, so it must feed it the same per-entry clock.
+ * A copy of this rule in the band would be a second answer to "does this card tick?"
+ * and the two would disagree the first time a consumer is added.
+ */
+export declare function nowSecFor(entry: Entry, nowSec: number | undefined): number | undefined;
 export interface EntryViewProps {
     entry: Entry;
     /** Previous entry in the list; `undefined` for the first item. */

package/dist/ui/Transcript.js

@@ -27,8 +27,14 @@ import { advanceTailRows } from './layout/follow-state.js';
  * `undefined` for everything that is not a running tool, which is what keeps
  * every other card's memo boundary intact — `undefined === undefined` in the
  * comparator, on every frame, forever.
+ *
+ * EXPORTED for `ui/scrollback/LiveTail.tsx` (release-gate-and-native-panels §6.5), and
+ * that is the whole of this feature's change to this file: the live region mounts the
+ * same `EntryView` the transcript does, so it must feed it the same per-entry clock.
+ * A copy of this rule in the band would be a second answer to "does this card tick?"
+ * and the two would disagree the first time a consumer is added.
  */
-function nowSecFor(entry, nowSec) {
+export function nowSecFor(entry, nowSec) {
     if (entry.kind === 'tool' && entry.status === 'running')
         return nowSec;
     // THE LIVE COMPACTION CARD IS THE SECOND CONSUMER (hardening W5). It is at most
@@ -36,6 +42,12 @@ function nowSecFor(entry, nowSec) {
     // function protects is unchanged for every other card, forever.
     if (entry.kind === 'compaction' && entry.live)
         return nowSec;
+    // THE THIRD CONSUMER IS A LIVE JOB (long-task-jobs D-8), and it is the reason
+    // this stays a single 1 Hz clock: a task's elapsed time and its `no output`
+    // badge both have to move, and a per-card `setInterval` would be one timer per
+    // job. `terminal` entries are excluded so a settled record never re-renders.
+    if (entry.kind === 'service' && !entry.terminal)
+        return nowSec;
     return undefined;
 }
 function noticeColor(level, theme) {
@@ -113,7 +125,7 @@ function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion,
                     ? Math.max(0, nowSec * 1000 - entry.startedAt)
                     : undefined, live: entry.live, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
         case 'service':
-            return frame(serviceGlyph(entry, glyphs), serviceCardColor(entry, theme), _jsx(ServiceCard, { serviceId: entry.serviceId, command: entry.command, status: entry.status, url: entry.url, port: entry.port, exitCode: entry.exitCode, startedAt: entry.startedAt, readyAt: entry.readyAt, endedAt: entry.endedAt, rows: entry.rows, terminal: entry.terminal, killIncomplete: entry.killIncomplete, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
+            return frame(serviceGlyph(entry, glyphs), serviceCardColor(entry, theme), _jsx(ServiceCard, { serviceId: entry.serviceId, jobKind: entry.jobKind, command: entry.command, status: entry.status, url: entry.url, port: entry.port, exitCode: entry.exitCode, startedAt: entry.startedAt, readyAt: entry.readyAt, endedAt: entry.endedAt, rows: entry.rows, terminal: entry.terminal, killIncomplete: entry.killIncomplete, progress: entry.progress, stalled: entry.stalled, lastOutputAt: entry.lastOutputAt, nowSec: nowSec, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
         case 'notice':
             return frame(noticeSymbol(entry.level, theme), noticeColor(entry.level, theme), _jsx(Text, { color: noticeColor(entry.level, theme), children: entry.text }));
         default:

package/dist/ui/entries/ServiceCard.d.ts

@@ -23,9 +23,11 @@ import React from 'react';
 import type { Theme } from '../theme.js';
 import type { TermCapabilities } from '../capabilities.js';
 import { pickGlyphs } from '../glyphs.js';
-import type { ServiceStatus } from '../../proc/types.js';
+import type { JobKind, ServiceStatus } from '../../proc/types.js';
 export interface ServiceCardProps {
     serviceId: string;
+    /** `service` or `task`: NOUN ONLY, never a rename of the entry kind (I-2). */
+    jobKind?: JobKind;
     command: string;
     status: ServiceStatus;
     url?: string;
@@ -39,6 +41,20 @@ export interface ServiceCardProps {
     terminal?: boolean;
     killIncomplete?: boolean;
     expanded?: boolean;
+    /** The extracted progress line, one row, already clipped by the supervisor. */
+    progress?: string;
+    /** Silence past `jobs.stallSeconds` - a muted badge, never an action. */
+    stalled?: boolean;
+    /** When output last arrived; with `nowSec` it renders `no output 6m02s`. */
+    lastOutputAt?: number;
+    /**
+     * The transcript's 1 Hz clock (D-8).
+     *
+     * ONE CLOCK FOR EVERYTHING. A per-card `setInterval` would be one timer per job,
+     * and the transcript's comparator already includes `nowSec`, so the live elapsed
+     * figure and the `no output` figure update for free.
+     */
+    nowSec?: number;
     /** Accepted for comparator consistency; this card never animates (D-14). */
     reducedMotion?: boolean;
     theme: Theme;