@aragon-agent/cli 0.6.31 → 0.6.33

package/dist/ui/App.js

@@ -41,6 +41,9 @@ 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';
@@ -2247,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;
             }
         }
@@ -2274,9 +2293,17 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         pending: state.pendingSteering, columns: baseRail.contentCols, terminalRows: rows,
         availableRows: Math.max(0, viewportBudget - composerBaseRows - 1), paused: !running,
     }), [state.pendingSteering, baseRail.contentCols, rows, viewportBudget, composerBaseRows, running]);
+    // THE POOL, NOT THE VIEWPORT MINUS A QUEUE THAT IS NOT DRAWN
+    // (tui-full-height-live-region RV-P1-3). `QueuePanel` only mounts in the full-screen
+    // layout, so native mode used to reserve rows for a card nobody paints. And it MUST be
+    // `viewportBudget` rather than `nativeBudget.band.*`: `viewportRows === remaining` by
+    // construction, and reading the band back here would close a loop with `teamRows`
+    // (AC-34, asserted textually by `live-band.test.ts`).
     const teamLayout = buildTeamPanelLayout({
         snapshot: state.team, terminalRows: rows,
-        availableRows: Math.max(0, viewportBudget - composerBaseRows - queueLayout.rows - 1),
+        availableRows: native
+            ? Math.max(0, viewportBudget - 1)
+            : Math.max(0, viewportBudget - composerBaseRows - queueLayout.rows - 1),
     });
     const railLayout = buildTodoRailLayout({
         cols: cols - 1, panelEnabled: cfg.todo.panel, overlayOpen: false,
@@ -2284,8 +2311,11 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         teamRows: teamLayout.rowCount, queueRows: queueLayout.rows, popupRows: 0, composerBaseRows,
     });
     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;
+    // 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]);
     // --- Native scroll (tui-native-terminal-scroll). -----------------------------
     //
@@ -2293,16 +2323,22 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // 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;
+    // The header and the opener are SLOTS OF THE SHELL, not printed bytes (D3/D4): at
+    // `H = rows - 1` a printed row is pushed off the screen by the very next frame, so
+    // `printBanner()` was a way of making the banner invisible. Neither is passed here.
+    // The opener node is built below, because its height now comes from the native band.
     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,
+        reducedMotion, rows, cols,
         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
@@ -2324,6 +2360,14 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     }, [native, scrollback, controller, glyphs]);
     useEffect(() => { setGuardTripped(false); }, [rows, cols]);
     const nativeBudget = native ? scrollbackView.budget : null;
+    // THE EMPTY-SESSION CARD, ONE NODE FOR BOTH MODES (D4 / RV-P0-1). The wordmark and the
+    // getting-started card are the first block of content in `app` mode (they scroll away
+    // with the transcript) and the shell's `opener` slot in native mode. Its height used to
+    // be a `rows - 8` guess in native mode; the honest input is the band's own pool, which
+    // is why this node is built after `nativeBudget`.
+    const openerRows = nativeBudget ? nativeBudget.band.bandRows : viewportBudget;
+    const openerCols = nativeBudget ? nativeBudget.previewCols : contentCols;
+    const opener = empty ? (_jsx(SessionOpener, { variant: pickOpenerVariant(openerRows, openerCols), version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: openerRows, theme: theme, caps: caps })) : 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,
@@ -2384,6 +2428,19 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         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,
+                // The tail window, joined here because it belongs to the VIEW pipeline rather
+                // than to the band: `window=<start>/<n>` is what makes the visible-vs-printed
+                // gap observable (known limitation 5).
+                windowStart: scrollbackView.windowStart,
+                windowEntries: scrollbackView.tailEntries.length,
+            }
+            : null,
         // A getter: the bridge's `frameReady` and geometry change outside React renders.
         get scrollbar() {
             return readScrollbarPerf({
@@ -2434,6 +2491,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         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,
@@ -2456,10 +2516,25 @@ 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 })] }));
     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'
+    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
@@ -2475,7 +2550,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                     total: state.team.runs.length,
                 },
             }
-            : {}), ...(state.todos && !showRail
+            : {}), ...(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.
@@ -2499,7 +2576,16 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             }
             : {}) }));
     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 }));
+        // THE OPENER IS MOUNTED ON THE SHELL'S TOP-ALIGNED SLOT (D4 / RV-P0-1): it is sized
+        // from the band's pool above, and bottom-aligning it would reproduce the reported
+        // "blank upper half" INSIDE the region, where the canvas `gap` assertion cannot see it.
+        return (_jsx(ScrollbackShell, { budget: nativeBudget, header: header, overlay: overlayNode, liveTailLines: scrollbackView.liveTailLines, ...(opener ? { opener } : {}), 
+            // Real components for the tail window (I-7); the plain rows above stay as the
+            // fallback for a frame with no preview rows. The WHOLE list is passed: the window
+            // belongs to `tail-window.ts`, and `prev` must come from the same list.
+            tail: nativeBudget.band.previewRows > 0
+                ? (_jsx(LiveTail, { entries: state.entries, 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

@@ -1,28 +1,79 @@
 /**
- * ScrollbackShell — the bounded LIVE REGION of native-scroll mode
- * (tui-native-terminal-scroll §4.6).
+ * ScrollbackShell — the LIVE REGION of native-scroll mode
+ * (tui-native-terminal-scroll §4.6, tui-full-height-live-region D3/D4).
  *
- * 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.
+ * THE REGION IS THE SCREEN. The root box is `budget.liveRows` tall, and that number is
+ * `rows - 1` - the whole area above the writer's parked row. It used to be only as tall
+ * as the panel band asked for, and every row it did not ask for became the canvas
+ * `gap`: blank rows ABOVE the content, which is what a user reports as "the app starts
+ * halfway down the terminal" and as "a big blank between the result and the running
+ * card". `H = rows - 1` is also the ONLY height that both fills the screen and keeps Ink
+ * off its `clearTerminal` branch (that branch fires at `outputHeight >= rows` and
+ * contains `ESC[3J`, which erases the user's scrollback).
  *
- * Top to bottom: [overlay | streaming preview] -> composer -> status (-> details).
+ * Top to bottom: [header][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 =       |
+ *   | tail window      (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.
+ *
+ * TWO SLOTS ARE NOT BOTTOM-ALIGNED, AND ONLY TWO (D3 / D4 / I-F7):
+ *  - `header` is the fixed 1-row slot at the very top. It is NOT printed into the
+ *    scrollback any more: at `H = rows - 1` any printed row is pushed off the screen by
+ *    the next frame, so "print the header" would mean "the header is never visible".
+ *  - `opener` is the empty-session card, and it is the one thing inside the band that is
+ *    TOP-aligned: a 12-row card bottom-aligned in a 24-row column would leave 12 blank
+ *    rows in the upper half of the screen - the original defect, still inside the
+ *    region, where the `gap` assertion could not see it. `opener` and `tail` are
+ *    mutually exclusive by construction (`App` keys them off `entries.length === 0`),
+ *    and they share one box because two boxes would be one more height to get wrong.
+ *
+ * `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 preview when an overlay is open. */
+    /**
+     * REQUIRED: the one-row slot at the top of the region, `budget.headerRows` tall.
+     * Required rather than optional for the reason `budget` and `band` are - a frame
+     * that forgot it would render a header-less screen with nothing to catch it.
+     */
+    header: React.ReactNode;
+    /** Shown instead of the band when an overlay is open. */
     overlay: React.ReactNode | null;
-    /** Plain preview rows, bottom-aligned just above the composer. */
+    /** Plain preview rows: the fallback when `tail` is absent (and what `/perf` counts). */
     liveTailLines: readonly string[];
+    /**
+     * The empty-session card. Mutually exclusive with `tail`, TOP-aligned, and the only
+     * thing in this shell that is not bottom-aligned or a fixed slot (RV-P0-1).
+     */
+    opener?: React.ReactNode;
+    /** Real components for the tail window (`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, composer, status, details, placeholder, theme, }: ScrollbackShellProps): React.ReactElement;
+export declare function ScrollbackShell({ budget, header, overlay, liveTailLines, opener, tail, team, rail, composer, status, details, placeholder, theme, }: ScrollbackShellProps): React.ReactElement;

package/dist/ui/ScrollbackShell.js

@@ -1,10 +1,18 @@
 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, }) {
+export function ScrollbackShell({ budget, header, overlay, liveTailLines, opener, 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 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 }))] }));
+    const band = budget.band;
+    // `opener ?? tail ?? lines` is ONE slot, not three: whichever is mounted decides the
+    // alignment of the box, so the two can never both be drawn and fight for the height.
+    const leftColumn = opener ?? tail;
+    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: opener ? 'flex-start' : 'flex-end', overflow: "hidden", children: leftColumn ?? 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: [budget.headerRows > 0 && (_jsx(Box, { height: budget.headerRows, flexShrink: 0, overflow: "hidden", children: header })), 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;

package/dist/ui/entries/ServiceCard.js

@@ -81,8 +81,19 @@ function statusClause(props, dot) {
         const took = readyAt === undefined ? '' : `${dot}${formatDuration(readyAt - startedAt)}`;
         return `ready${took}`;
     }
-    if (status === 'running')
-        return 'running';
+    // A LIVE JOB SHOWS ITS ELAPSED TIME (D-8), because a task's whole story is
+    // "how long has this been going". The number comes from the transcript's 1 Hz
+    // `nowSec`; without it the card falls back to the spawn time and reads `0ms`,
+    // which is honest about never having been ticked rather than wrong about it.
+    if (status === 'running') {
+        // NO CLOCK, NO FIGURE. Falling back to `startedAt` would print `0ms` on every
+        // settled frame, which reads as "it just started" - a wrong number rather than
+        // an absent one.
+        if (props.nowSec === undefined)
+            return 'running';
+        const elapsed = Math.max(0, props.nowSec * 1000 - startedAt);
+        return `running${dot}${formatDuration(elapsed)}`;
+    }
     if (status === 'starting')
         return 'starting';
     const lived = endedAt === undefined ? '' : `${dot}${formatDuration(endedAt - startedAt)}`;
@@ -92,20 +103,44 @@ function statusClause(props, dot) {
         return `failed${lived}`;
     return `exited${exitCode === null ? '' : ` code ${exitCode}`}${lived}`;
 }
+/**
+ * The progress row, or `undefined` when there is nothing to draw.
+ *
+ * STALLED OUTRANKS PROGRESS: "no output for 6m" is the more urgent of the two
+ * facts, and drawing both would cost a second row the height estimator does not
+ * know about. The `no output` figure needs `nowSec`; without it the badge is
+ * omitted rather than printed with a wrong number.
+ */
+function progressRow(props) {
+    if (props.stalled === true) {
+        if (props.nowSec === undefined || props.lastOutputAt === undefined) {
+            return { text: 'no output', stalled: true };
+        }
+        const quiet = Math.max(0, props.nowSec * 1000 - props.lastOutputAt);
+        return { text: `no output ${formatDuration(quiet)}`, stalled: true };
+    }
+    if (props.progress)
+        return { text: props.progress, stalled: false };
+    return undefined;
+}
 function ServiceCardImpl(props) {
     const { serviceId, command, url, rows, expanded, terminal, theme, caps } = props;
     const glyphs = pickGlyphs(caps);
     const color = serviceCardColor(props, theme);
     const dot = `  ${glyphs.midDot}  `;
     const clause = statusClause(props, dot);
+    // THE NOUN, NOT THE KIND: `task t1` and `service s1` are the same component
+    // drawing two kinds of job, and every id keeps its existing prefix (I-2).
+    const noun = props.jobKind === 'task' ? 'task' : 'service';
     // THE TERMINAL RECORD IS ONE ROW, ALWAYS. It is a SECOND event at a SECOND
     // time — the only thing `<Static>` permits once the live card is printed — so
     // it names what happened and nothing else (D-11).
     if (terminal) {
-        return (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: color, wrap: "truncate", children: ["service ", serviceId, " ", clause, props.killIncomplete ? ' (may have left a detached child)' : ''] }) }));
+        return (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { color: color, wrap: "truncate", children: [noun, " ", serviceId, " ", clause, props.killIncomplete ? ' (may have left a detached child)' : ''] }) }));
     }
     const shown = rows.slice(-(expanded ? EXPANDED_TAIL_ROWS : COLLAPSED_TAIL_ROWS));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: theme.accent, bold: true, children: ["service ", serviceId] }), _jsxs(Text, { color: theme.muted, wrap: "truncate", children: ['  ', command] }), _jsxs(Text, { color: color, wrap: "truncate", children: [dot, clause] })] }), url !== undefined && (_jsxs(Box, { flexDirection: "row", flexShrink: 0, paddingLeft: 1, children: [_jsx(Text, { color: theme.primary, children: url }), _jsxs(Text, { color: theme.muted, children: [dot, "ctrl+c stop", dot, "ctrl+o log"] })] })), shown.length > 0 && (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: shown.map((line, index) => (_jsx(Text, { color: theme.muted, wrap: "truncate", children: line }, index))) }))] }));
+    const progress = progressRow(props);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: theme.accent, bold: true, children: [noun, " ", serviceId] }), _jsxs(Text, { color: theme.muted, wrap: "truncate", children: ['  ', command] }), _jsxs(Text, { color: color, wrap: "truncate", children: [dot, clause] })] }), progress !== undefined && (_jsx(Box, { flexDirection: "row", flexShrink: 0, paddingLeft: 1, children: _jsx(Text, { color: progress.stalled ? theme.noticeWarn : theme.muted, wrap: "truncate", children: progress.stalled ? progress.text : `[progress] ${progress.text}` }) })), url !== undefined && (_jsxs(Box, { flexDirection: "row", flexShrink: 0, paddingLeft: 1, children: [_jsx(Text, { color: theme.primary, children: url }), _jsxs(Text, { color: theme.muted, children: [dot, "ctrl+c stop", dot, "ctrl+o log"] })] })), shown.length > 0 && (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: shown.map((line, index) => (_jsx(Text, { color: theme.muted, wrap: "truncate", children: line }, index))) }))] }));
 }
 /**
  * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3).

package/dist/ui/layout/status-layout.d.ts

@@ -15,6 +15,18 @@ export interface StatusLayoutInput {
         name: string;
         toolCallId: string;
     } | null;
+    /**
+     * A bounded wait in flight (long-task-jobs §4.9).
+     *
+     * PRESENT ONLY WHILE `job_wait` IS THE ACTIVE TOOL, and it REPLACES the
+     * `Running job_wait` label rather than joining it: "Waiting on t3 (up to 30s)"
+     * is the state the user asked about (what, and how long at most), while the
+     * tool name is an implementation detail of how the runtime is waiting.
+     */
+    wait?: {
+        jobId: string;
+        upToSeconds: number;
+    };
     runOutcome?: 'none' | 'ended' | 'interrupted' | 'failed';
     spinner?: string;
     waitingForConfirmation?: boolean;
@@ -77,7 +89,7 @@ export interface StatusLinePlan {
 export declare function cleanStatusText(text: string): string;
 export declare function statusField(id: string, text: string, tone?: StatusField['tone']): StatusField;
 export declare function statusLinePlan(fields: readonly StatusField[], separator?: string): StatusLinePlan;
-export declare function phaseLabels(input: Pick<StatusLayoutInput, 'phase' | 'activeTool' | 'runOutcome' | 'waitingForConfirmation' | 'stopping' | 'compacting' | 'retryActive'>): readonly [string, string];
+export declare function phaseLabels(input: Pick<StatusLayoutInput, 'phase' | 'activeTool' | 'runOutcome' | 'waitingForConfirmation' | 'stopping' | 'compacting' | 'retryActive' | 'wait'>): readonly [string, string];
 export declare function validContext(context: ContextUsageSnapshot): boolean;
 export declare function shortDuration(ms: number): string;
 /** Every field survives each width rung; only the redraw carrier is outside this plan. */

package/dist/ui/layout/status-layout.js

@@ -25,6 +25,16 @@ export function phaseLabels(input) {
         return copy.compacting;
     if (input.retryActive)
         return copy.retrying;
+    // A WAIT OUTRANKS THE TOOL NAME (long-task-jobs AC-28): `Running job_wait`
+    // answers "which tool", `Waiting on t3 (up to 30s)` answers "what am I waiting
+    // for and how long may it take", which is the question a user staring at a
+    // quiet terminal actually has. Both forms carry it - the short rung is
+    // truncated by width, not reworded.
+    if (input.wait) {
+        const label = `Waiting on ${cleanStatusText(input.wait.jobId)} ` +
+            `(up to ${Math.max(0, Math.round(input.wait.upToSeconds))}s)`;
+        return [label, label];
+    }
     if (input.activeTool)
         return [copy.tool[0], copy.tool[1] + ' ' + cleanStatusText(input.activeTool.name)];
     if (input.phase === 'idle' && input.runOutcome && input.runOutcome !== 'none')

package/dist/ui/layout/virtual-window.js

@@ -218,6 +218,13 @@ const TOOL_LIVE_TAIL_ROWS = 8;
 const SERVICE_COLLAPSED_TAIL_ROWS = 2;
 /** Tail rows an EXPANDED `ServiceCard` draws; the snapshot cap (8). */
 const SERVICE_EXPANDED_TAIL_ROWS = 8;
+/**
+ * The progress row the live `ServiceCard` draws when `progress` or `stalled` is
+ * set (long-task-jobs §4.9), duplicated as the number `1` for the same reason as
+ * the two constants above: `virtual-window.ts` counts lines, `ServiceCard.tsx`
+ * draws them, and the pairing is kept by a test (AC-27) rather than by an import.
+ */
+const SERVICE_PROGRESS_ROWS = 1;
 /**
  * Pure UPPER-BOUND estimate of an entry's height, used until a real measurement
  * exists.
@@ -358,7 +365,13 @@ export function estimateEntryRows(entry, cols, density, expanded, thinkingVisibl
             const tail = expanded
                 ? Math.min(entry.rows.length, SERVICE_EXPANDED_TAIL_ROWS)
                 : Math.min(entry.rows.length, SERVICE_COLLAPSED_TAIL_ROWS);
-            return separation + 1 + url + tail;
+            // THE PROGRESS ROW IS ONE MORE LINE (long-task-jobs AC-27), and it is only
+            // ever one because `ServiceCard` draws it with `wrap="truncate"` and the
+            // supervisor clips it to `PROC_LIMITS.waitProgressChars`. A `stalled` badge
+            // REPLACES it rather than adding to it - the two can never both be drawn,
+            // so this stays a single term.
+            const progress = entry.progress || entry.stalled ? SERVICE_PROGRESS_ROWS : 0;
+            return separation + 1 + progress + url + tail;
         }
         default:
             return separation + 1;

package/dist/ui/run-status-row.d.ts

@@ -17,6 +17,18 @@ export interface RunActivity {
     runningTool?: string;
     /** A context compaction is in flight; outranks the tool name and the phrase. */
     compacting?: boolean;
+    /**
+     * A BOUNDED WAIT IS IN FLIGHT (long-task-jobs §4.9).
+     *
+     * `Running job_wait` is a TOOL NAME; `Waiting on t3 (up to 30s)` is a STATE, and
+     * the state is what answers the user's two questions - what is it waiting for,
+     * and how long may that take. No countdown: a ticking number would need its own
+     * re-render, and the sentence is already complete.
+     */
+    wait?: {
+        jobId: string;
+        upToSeconds: number;
+    };
 }
 export interface RunRowPlanInput {
     /** Width of the row's container (the composer's content columns). */