@aragon-agent/cli 0.6.13 → 0.6.15

package/dist/ui/App.js

@@ -7,10 +7,9 @@ import { selectTranscriptEntries, mergePendingEntries } from '../agent/queued-me
  * keybindings, routes slash commands, and renders the header / transcript /
  * input / toast stack / status bar / overlays.
  */
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import process from 'node:process';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Text, useApp, useInput, useStdout } from 'ink';
-import { advanceInterruptGesture, cancelInterruptConfirmation, } from '../input/interrupt-gesture.js';
+import { advanceInterruptGesture, INTERRUPT_CONFIRM_MS, cancelInterruptConfirmation, } from '../input/interrupt-gesture.js';
 import { initialViewState, reduceEvent, viewReducer, } from '../agent/reducer.js';
 import { mergeDeltas } from '../agent/coalesce.js';
 import { computeCost } from '../agent/usage.js';
@@ -22,7 +21,7 @@ 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 { detectCapabilities } from './capabilities.js';
+import { resolveTuiCapabilities } from './capabilities.js';
 import { useStartupNotices, MOUSE_NOTICE_VERSION, VT_INPUT_NOTICE_VERSION, } from './use-startup-notices.js';
 import { getTheme } from './theme.js';
 import { pickGlyphs } from './glyphs.js';
@@ -36,15 +35,8 @@ import { secondsLeft } from '../agent/retry-view.js';
 import { TeamPanel } from './TeamPanel.js';
 import { TodoPanel } from './TodoPanel.js';
 import { BottomStatusRow } from './BottomStatusRow.js';
-import { UpdateLine } from './UpdateLine.js';
-// The updater's two PURE modules. `shouldRenderUpdateLine` decides the row's
-// presence AT THE CALL SITE (C-15), and `UPDATE_LIMITS` owns the width
-// threshold - both are values, and both are resolved here rather than inside
-// `UpdateLine` so that component's only edge into `update/` stays erasable by
-// tsc (cli-auto-update section 3.1 rule 1 / IF-1). Neither module opens a
-// socket, spawns a process or creates a timer.
+// Only the updater's pure visibility predicate enters the status detail plan.
 import { shouldRenderUpdateLine } from '../update/types.js';
-import { UPDATE_LIMITS } from '../update/limits.js';
 import { AppShell } from './layout/AppShell.js';
 import { ScrollViewport } from './layout/ScrollViewport.js';
 import { buildTodoRailLayout } from './layout/todo-layout.js';
@@ -54,8 +46,7 @@ import { useTerminalSize } from './layout/useTerminalSize.js';
 import { useHeightStore } from './use-height-store.js';
 import { useRenderGovernor } from './use-render-governor.js';
 import { readScrollbarPerf, setPerfResetHook, setPerfSnapshotProvider, } from '../commands/perf.js';
-import { MIN_FULLSCREEN_ROWS, MIN_FULLSCREEN_COLS } from './layout/frame.js';
-import { HINT_MIN_ROWS, clampDraftRows, viewportRows as computeViewportRows } from './layout/budget.js';
+import { buildFrameBudget } from './layout/budget.js';
 import { OVERLAY_PAGE, useWheelRouting } from './use-wheel-routing.js';
 import { installConsoleBridge } from './console-bridge.js';
 import { publishExitSnapshot } from './exit-snapshot.js';
@@ -75,6 +66,9 @@ import { QueuePanel } from './QueuePanel.js';
 import { QueueOverlay } from './overlays/QueueOverlay.js';
 import { buildQueueLayout } from './layout/queue-layout.js';
 import { interactionCopy } from './interaction-copy.js';
+import { createRunMetrics, updateRunMetrics, freezeRunMetrics, projectRunMetrics } from './run-metrics.js';
+import { projectStatusFeedback } from './status-feedback.js';
+import { planStatusDetail } from './layout/status-detail-layout.js';
 import { emptyTailState } from './layout/follow-state.js';
 /**
  * Decide what the `Max tokens` field means, WITHOUT letting a bad value in it
@@ -130,15 +124,13 @@ function seedViewState(thinkingVisible) {
 export function App({ controller, version, initialOverlay, initialPrompt, confirmBridge, humanInputBridge, mouseSource, vtInputWarning, updateBridge, pasteBridge, terminal, }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
-    const { rows, cols } = useTerminalSize();
-    const tooSmall = (rows < MIN_FULLSCREEN_ROWS || cols < MIN_FULLSCREEN_COLS);
-    const composerRef = useRef(null);
-    const activityRef = useRef(null);
-    const [cursorVisible, setCursorVisible] = useState(true);
-    // Whether the run status row above the input is inside the viewport. It is
-    // `true` while the row is not mounted (`elementVisible(null)`), so it is NEVER
-    // a decision on its own - always AND it with `runRowEnabled` (`runRowShown`).
-    const [activityRowVisible, setActivityRowVisible] = useState(true);
+    const size = useTerminalSize();
+    const [draftRows, setDraftRows] = useState(1);
+    const [popupRows, setPopupRows] = useState(0);
+    const [statusExpanded, setStatusExpanded] = useState(false);
+    const dimensions = buildFrameBudget({ ...size, draftRows, popupRows, statusExpanded });
+    const { rows, cols } = dimensions;
+    const tooSmall = dimensions.inactive;
     // --- Render governor (tui-render-performance L4). ------------------------
     //
     // FIRST, BEFORE ANY OTHER WORK IN THIS BODY. The hook stamps
@@ -156,7 +148,10 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // frame 1. `seedViewState` is module-scope so the lazy initializer is a stable
     // function reference.
     const [state, dispatch] = useReducer(viewReducer, cfg.showThinking, seedViewState);
-    const [elapsedMs, setElapsedMs] = useState(0);
+    const metrics = useRef(createRunMetrics());
+    const manualMetrics = useRef(createRunMetrics());
+    const [, setMetricsClock] = useState(0);
+    const copyFeedback = useRef(null);
     /**
      * Forces the render that re-reads `Date.now()` for the live compaction card
      * while the run is IDLE (hardening W5). The value itself is never read - the
@@ -206,13 +201,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // the completion list are memoized against it, so a skill installed mid-session
     // gets its `/<name>` command and its autocomplete entry immediately.
     const [skillsNonce, setSkillsNonce] = useState(0);
-    const caps = useMemo(() => {
-        const detected = detectCapabilities(process.env, stdout);
-        return {
-            colorLevel: cfg.color === false ? 0 : cfg.colorLevel ?? detected.colorLevel,
-            unicode: cfg.unicode ?? detected.unicode,
-        };
-    }, [cfg.color, cfg.colorLevel, cfg.unicode, stdout]);
+    const caps = useMemo(() => resolveTuiCapabilities({}, cfg.color), [cfg.color]);
     const theme = useMemo(() => getTheme(cfg.theme, caps), [cfg.theme, caps]);
     const glyphs = useMemo(() => pickGlyphs(caps), [caps]);
     const reducedMotion = cfg.reducedMotion ?? false;
@@ -227,6 +216,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const interactionPhase = useRef(controller.isRunning() ? 'running' : 'idle');
     const submissionSequence = useRef(0);
     const mounted = useRef(true);
+    const switchingConversation = useRef(false);
+    const drainCompactionQueue = useRef(() => { });
     /**
      * Live service snapshots, keyed by id, for the status chip and the Ctrl+C rung.
      *
@@ -246,7 +237,6 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
      */
     const servicesRef = useRef(services);
     servicesRef.current = services;
-    const runBaselineOut = useRef(0);
     const runStartedAt = useRef(0);
     const toastTimers = useRef(new Map());
     /** Every outstanding `gate.request()`. Held in a ref, never in state: it is
@@ -320,11 +310,21 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         aborted: false,
         errored: false,
     });
+    const interruptTimer = useRef(null);
     const resetInterrupt = useCallback(() => {
+        if (interruptTimer.current)
+            clearTimeout(interruptTimer.current);
+        interruptTimer.current = null;
         interruptGesture.current = { phase: 'ready' };
     }, []);
     const cancelConfirmation = useCallback(() => {
+        if (interruptGesture.current.phase !== 'armed')
+            return;
         interruptGesture.current = cancelInterruptConfirmation(interruptGesture.current);
+        if (interruptTimer.current)
+            clearTimeout(interruptTimer.current);
+        interruptTimer.current = null;
+        setMetricsClock(Date.now());
     }, []);
     useEffect(() => {
         if (state.overlay)
@@ -335,12 +335,41 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         return () => {
             mounted.current = false;
             submissionSequence.current += 1;
-            if (interactionPhase.current === 'starting')
+            if (interactionPhase.current === 'starting' || controller.isCompactionBusy?.())
                 controller.abort();
             interactionPhase.current = 'idle';
             resetInterrupt();
         };
     }, [controller, resetInterrupt]);
+    useEffect(() => {
+        drainCompactionQueue.current = () => {
+            // A conversation switch owns the queue until its command has committed.
+            void Promise.resolve().then(async () => {
+                if (!mounted.current || switchingConversation.current
+                    || controller.isCompactionBusy() || controller.isRunning()
+                    || interactionPhase.current !== 'idle' || !controller.hasPendingUserMessages()
+                    || controller.areModelSettingsBlocked())
+                    return;
+                const preflight = controller.preflight();
+                if (!preflight.ok) {
+                    dispatch({ type: 'notice', level: 'error', text: preflight.message ?? 'Configuration error.' });
+                    return;
+                }
+                interactionPhase.current = 'starting';
+                try {
+                    await controller.continue();
+                }
+                finally {
+                    if (interactionPhase.current === 'starting')
+                        interactionPhase.current = 'idle';
+                }
+            });
+        };
+        return controller.subscribeCompactionBusy?.((busy) => {
+            if (!busy)
+                drainCompactionQueue.current();
+        });
+    }, [controller]);
     /**
      * Disarm an armed continuation. Idempotent; NEVER touches the budget — a
      * cancelled continuation was never issued, so it must not be charged (AC-18).
@@ -454,8 +483,11 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                     generation = controller.runGeneration;
                 return;
             }
-            if (event.type === 'agent_start')
+            metrics.current = updateRunMetrics(metrics.current, event, Date.now());
+            if (event.type === 'agent_start') {
                 interactionPhase.current = 'running';
+                manualMetrics.current = createRunMetrics();
+            }
             if (event.type === 'agent_end') {
                 interactionPhase.current = 'idle';
                 resetInterrupt();
@@ -529,7 +561,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                     // a fired continuation would either be swallowed into
                     // `controller.steer()` (the quiet failure) or reach
                     // `controller.prompt()`, which REJECTS while running.
-                    if (controller.isRunning())
+                    if (controller.isRunning() || controller.isCompactionBusy?.())
                         return;
                     const live = controller.getTodoSnapshot();
                     if (!live || live.doneCount >= live.total)
@@ -776,6 +808,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         return controller.subscribeCompaction((event) => {
             switch (event.type) {
                 case 'compaction_start':
+                    if (interactionPhase.current === 'idle') {
+                        manualMetrics.current = updateRunMetrics(createRunMetrics(), { type: 'agent_start' }, Date.now());
+                    }
                     dispatch({
                         type: 'compactionStart',
                         index: event.index,
@@ -784,6 +819,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                     });
                     break;
                 case 'compaction_end':
+                    manualMetrics.current = freezeRunMetrics(manualMetrics.current, Date.now());
                     // THE CARD, AND NOTHING ELSE (context-usage-gauge-accuracy §3.3).
                     //
                     // A `contextTokensEstimated` dispatch used to live here, hand-building
@@ -805,10 +841,11 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                     // same class of lie as the `$0.00` `pricingUnknown` exists to prevent,
                     // just in the other direction.
                     const snapshot = controller.getCompactionSnapshot();
-                    const ref = controller.getCompactionSummarizerRef();
-                    const costDelta = snapshot.pricingUnknown || !ref
+                    const ref = event.modelRef ?? controller.getCompactionSummarizerRef();
+                    const costDelta = (event.pricingUnknown ?? snapshot.pricingUnknown)
                         ? 0
-                        : computeCost(event.usage, controller.getModelInfoFor(ref).cost);
+                        : event.costUsd ?? (ref
+                            ? computeCost(event.usage, controller.getModelInfoFor(ref).cost) : 0);
                     dispatch({ type: 'compactionUsage', usage: event.usage, costDelta });
                     break;
                 }
@@ -854,18 +891,21 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             }
         });
     }, [controller, flushPending, governorInterval]);
-    // --- Elapsed timer + tokens/sec baseline while running. ----------------
+    // Event boundaries own start/end; ticks only refresh the live projection.
     useEffect(() => {
-        if (state.status !== 'running') {
-            setElapsedMs(0);
+        if (state.status !== 'running')
             return;
-        }
-        runBaselineOut.current = stateRef.current.usageTotal.outputTokens;
-        const startedAt = Date.now();
-        setElapsedMs(0);
-        const id = setInterval(() => setElapsedMs(Date.now() - startedAt), 200);
+        const id = setInterval(() => setMetricsClock(Date.now()), 200);
         return () => clearInterval(id);
     }, [state.status]);
+    useLayoutEffect(() => {
+        if (manualMetrics.current.startedAt === null || !state.compactionEntryId)
+            return;
+        const entry = state.entries.find(item => item.id === state.compactionEntryId);
+        if (entry?.kind === 'compaction' && entry.startedAt !== undefined) {
+            manualMetrics.current = { ...manualMetrics.current, startedAt: entry.startedAt };
+        }
+    }, [state.compactionEntryId, state.entries]);
     // --- Live compaction elapsed tick (hardening §3.6 / W5). ---------------
     //
     // ONLY WHILE A CARD IS LIVE AND THE RUN IS NOT, so an ordinary session has no
@@ -912,6 +952,10 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         for (const timer of toastTimers.current.values())
             clearTimeout(timer);
         toastTimers.current.clear();
+        if (ctrlCTimer.current)
+            clearTimeout(ctrlCTimer.current);
+        if (interruptTimer.current)
+            clearTimeout(interruptTimer.current);
     }, []);
     // --- Console bridge (fullscreen only, I-4). ----------------------------
     // Ink's own patchConsole writes straight to stdout, which shifts the fixed
@@ -1084,45 +1128,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             bridge.notify = null;
         };
     }, [pasteBridge]);
-    // --- The composer's height (tui-paste-handling section 5.5 / D-12). ------
-    //
-    // GROWTH IS IMMEDIATE, SHRINK IS DEFERRED BY ONE TICK (R-12). Growing late
-    // overdraws the frame for a frame; shrinking early makes a `Backspace` that
-    // crosses a wrap boundary bounce the whole transcript, and a run of deletions
-    // bounce it repeatedly. Deferring coalesces the run into one move.
-    //
-    // The ref mirrors the state so the decision is made OUTSIDE the updater: React
-    // may call an updater more than once, and scheduling a timer from inside one
-    // would arm it twice.
-    const [draftRows, setDraftRows] = useState(1);
-    const [popupRows, setPopupRows] = useState(0);
+    // Synchronous layout reports keep the fixed slot and its contents in one frame.
     const onPopupRowsChange = useCallback((next) => {
         setPopupRows(previous => previous === next ? previous : next);
     }, []);
-    const draftRowsRef = useRef(1);
-    const shrinkTimer = useRef(null);
     const onDraftRows = useCallback((next) => {
-        const wanted = Math.max(1, next);
-        if (shrinkTimer.current) {
-            clearTimeout(shrinkTimer.current);
-            shrinkTimer.current = null;
-        }
-        if (wanted === draftRowsRef.current)
-            return;
-        if (wanted > draftRowsRef.current) {
-            draftRowsRef.current = wanted;
-            setDraftRows(wanted);
-            return;
-        }
-        shrinkTimer.current = setTimeout(() => {
-            shrinkTimer.current = null;
-            draftRowsRef.current = wanted;
-            setDraftRows(wanted);
-        }, 0);
-    }, []);
-    useEffect(() => () => {
-        if (shrinkTimer.current)
-            clearTimeout(shrinkTimer.current);
+        setDraftRows(previous => previous === next ? previous : next);
     }, []);
     // --- Auto-update bridge (cli-auto-update section 3.8 / 6.3). ------------
     //
@@ -1178,26 +1189,26 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         clipboard: { write: terminal?.writeForeign },
         onRequest: () => {
             ctrlCArmed.current = false;
+            setMetricsClock(Date.now());
             if (ctrlCTimer.current)
                 clearTimeout(ctrlCTimer.current);
             ctrlCTimer.current = null;
         },
         onStateChange: setCopyState,
         onBusy: ({ cleanupPending }) => toast('info', cleanupPending
-            ? '\u590d\u5236\u5931\u8d25\uff0c\u6b63\u5728\u6e05\u7406' : '\u6b63\u5728\u590d\u5236'),
+            ? 'Copy failed; cleaning up' : 'Copying'),
         onResult: (result, request) => {
             selectionBridge?.onCopied?.(result, request.lines, request.text.length);
-            if (result.status === 'confirmed') {
-                toast('success', `\u5df2\u590d\u5236 ${request.lines} \u884c`);
-            }
-            else if (result.status === 'sent') {
-                toast('info', '\u5df2\u8bf7\u6c42\u7ec8\u7aef\u590d\u5236\uff0c\u7ed3\u679c\u672a\u786e\u8ba4');
-            }
-            else {
-                const text = `${interactionCopy.copyFailed}\uff1a${interactionCopy.copyReasons[result.reason]}`;
-                toast('warn', text);
+            const text = result.status === 'confirmed' ? `Copied ${request.lines} lines`
+                : result.status === 'sent' ? 'Copy sent to terminal; not confirmed'
+                    : `${interactionCopy.copyFailed}: ${interactionCopy.copyReasons[result.reason]}`;
+            copyFeedback.current = { result: {
+                    status: result.status === 'confirmed' || result.status === 'sent' ? result.status : 'error',
+                    text
+                }, previousIds: new Set(stateRef.current.toasts.map(item => item.id)) };
+            toast(result.status === 'confirmed' ? 'success' : result.status === 'sent' ? 'info' : 'warn', text);
+            if (result.status !== 'confirmed' && result.status !== 'sent')
                 notify('error', text);
-            }
         },
     }), []);
     useEffect(() => () => copyCoordinator.dispose(), [copyCoordinator]);
@@ -1217,6 +1228,18 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         // subscription on every render.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectionBridge]);
+    useLayoutEffect(() => {
+        const feedback = copyFeedback.current;
+        if (!feedback)
+            return;
+        if (!feedback.toastId) {
+            feedback.toastId = state.toasts.find(item => !feedback.previousIds.has(item.id)
+                && item.text === feedback.result.text)?.id;
+        }
+        if (feedback.toastId && !state.toasts.some(item => item.id === feedback.toastId)) {
+            copyFeedback.current = null;
+        }
+    }, [state.toasts]);
     const selectionController = selectionBridge?.controller ?? null;
     /**
      * I-9, the DERIVED half — and the one that matters (D-14 / P1-4).
@@ -1238,6 +1261,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const onViewportShiftChange = useCallback(() => {
         selectionController?.clear();
     }, [selectionController]);
+    const onGeometryChange = useCallback(() => {
+        selectionController?.clear();
+        terminal?.scrollbar?.controller?.cancel();
+        terminal?.scrollbar?.invalidate();
+        setSelectionHold(false);
+    }, [selectionController, terminal]);
     // I-9, the ENUMERATED half. `shiftUp` covers every movement of the rows and is
     // wired straight into `ScrollViewport` below; these three are the cases that
     // change the screen while leaving `shiftUp` untouched — a key that scrolls
@@ -1315,6 +1344,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         state: stateRef.current,
         dispatch: (action) => {
             if (action.type === 'resetConversation' || action.type === 'restoreEntries') {
+                metrics.current = createRunMetrics();
+                manualMetrics.current = createRunMetrics();
                 setScrollResetKey((n) => n + 1);
                 const wasStarting = interactionPhase.current === 'starting';
                 submissionSequence.current += 1;
@@ -1404,7 +1435,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         // must be the one that runs, whichever branch it takes.
         cancelFollowThrough();
         cancelConfirmation();
-        if (interactionPhase.current === 'running') {
+        if (interactionPhase.current === 'running' || controller.isCompactionBusy?.()) {
             try {
                 const queueId = controller.queueUserMessage(message);
                 dispatch({ type: 'steerQueued', queueId, text: message });
@@ -1458,6 +1489,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     };
     submitRef.current = submitMessage;
     const executeSlashInput = async (raw) => {
+        const switchWhileBusy = controller.isCompactionBusy?.()
+            && /^\s*\/(clear|reset|resume)(?:\s|$)/.test(raw);
+        if (switchWhileBusy) {
+            switchingConversation.current = true;
+            await controller.cancelCompaction();
+        }
         // Retain a recoverable command before any asynchronous handler can fail.
         const safe = redactText(raw, getSecrets());
         recordPrompt(safe);
@@ -1469,6 +1506,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             const reason = error instanceof Error ? error.message : String(error);
             notify('error', `Command failed: ${redactText(reason, getSecrets())}\nInput: ${safe}`);
         }
+        finally {
+            if (switchWhileBusy) {
+                switchingConversation.current = false;
+                drainCompactionQueue.current();
+            }
+        }
     };
     const handleSubmit = (raw) => {
         const trimmed = raw.trimStart();
@@ -1619,6 +1662,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             (selectionController?.hasPendingSelection() ?? false)) {
             const payload = selectionController.takeSelection();
             ctrlCArmed.current = false;
+            setMetricsClock(Date.now());
             if (ctrlCTimer.current)
                 clearTimeout(ctrlCTimer.current);
             ctrlCTimer.current = null;
@@ -1654,14 +1698,25 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                 return;
             }
             ctrlCArmed.current = true;
-            toast('warn', 'Press Ctrl+C again to exit.');
+            // Gesture feedback follows its live state, without a second toast lifetime.
+            setMetricsClock(value => value + 1);
             if (ctrlCTimer.current)
                 clearTimeout(ctrlCTimer.current);
             ctrlCTimer.current = setTimeout(() => {
+                ctrlCTimer.current = null;
                 ctrlCArmed.current = false;
+                setMetricsClock(value => value + 1);
             }, 1500);
             return;
         }
+        if (key.ctrl && input.toLowerCase() === 'g') {
+            if (tooSmall || stateRef.current.overlay)
+                return;
+            setStatusExpanded(value => !value);
+            return;
+        }
+        if (tooSmall)
+            return;
         // R-P1-7: the overlay branch MUST come before the transcript scroll branch
         // and MUST return. `PgUp` used to fall through to `scrollBy()` while an
         // overlay was open. The stable viewport ignores inactive intents, but routing
@@ -1803,6 +1858,10 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const handleComposerEscape = useCallback(() => {
         if (stateRef.current.overlay)
             return;
+        if (controller.isCompactionBusy?.()) {
+            controller.abort();
+            return;
+        }
         if (interactionPhase.current === 'idle') {
             if (followTimer.current) {
                 cancelFollowThrough();
@@ -1815,8 +1874,16 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         const next = advanceInterruptGesture(interruptGesture.current, performance.now());
         interruptGesture.current = next.state;
         if (next.action === 'hint') {
-            dispatch({ type: 'pushToast', level: 'info',
-                text: '\u4e2d\u65ad\u5df2\u51c6\u5907' });
+            if (interruptTimer.current)
+                clearTimeout(interruptTimer.current);
+            interruptTimer.current = setTimeout(() => {
+                interruptTimer.current = null;
+                if (interruptGesture.current.phase !== 'armed')
+                    return;
+                interruptGesture.current = { phase: 'ready' };
+                setMetricsClock(Date.now());
+            }, INTERRUPT_CONFIRM_MS + 1);
+            setMetricsClock(value => value + 1);
             return;
         }
         endReasonRef.current.aborted = true;
@@ -1826,6 +1893,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             interactionPhase.current = 'idle';
             resetInterrupt();
             autoContinuationRef.current = false;
+            metrics.current = freezeRunMetrics(metrics.current, Date.now());
             if (next.action === 'force-stop')
                 controller.forceStop();
             else
@@ -1836,8 +1904,7 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         }
         controller.abort();
         if (sequence === submissionSequence.current && interactionPhase.current === 'running') {
-            dispatch({ type: 'pushToast', level: 'info',
-                text: '\u6b63\u5728\u505c\u6b62' });
+            setMetricsClock(value => value + 1);
         }
     }, [controller, cancelFollowThrough, resetInterrupt]);
     // --- Render ------------------------------------------------------------
@@ -1855,9 +1922,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // RENDER SCOPE, so the chip and the composer hint agree with what the Ctrl+C
     // handler will do on the very next keystroke.
     const liveServices = liveServiceCount(services);
-    const tokPerSec = state.status === 'running' && elapsedMs > 500
-        ? Math.max(0, Math.round((state.usageTotal.outputTokens - runBaselineOut.current) / (elapsedMs / 1000)))
-        : 0;
+    const projectedMetrics = projectRunMetrics(manualMetrics.current.startedAt !== null
+        && state.status !== 'running' ? manualMetrics.current : metrics.current, Date.now());
+    const { elapsedMs, tokPerSec, speedKnown } = projectedMetrics;
     // --- The activity line's seed (§3.2.3 / P1-7). --------------------------
     //
     // RENDER SCOPE. Without this the ref holds `0` on the first run (an arbitrary
@@ -1896,9 +1963,11 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // milliseconds because `ToolCard` is `React.memo`'d with the default
     // comparator; `Transcript` passes it on only to running tool entries.
     const nowSec = running || compactionLive ? Math.floor(Date.now() / 1000) : undefined;
-    const viewportBudget = computeViewportRows(rows, draftRows);
+    const frameBudget = buildFrameBudget({ rows, cols, draftRows,
+        popupRows: overlay ? 0 : popupRows, statusExpanded });
+    const viewportBudget = frameBudget.viewportRows;
     const overlayMaxRows = viewportBudget;
-    const composerBaseRows = 2 + clampDraftRows(rows, draftRows);
+    const composerBaseRows = 0;
     const baseRail = buildTodoRailLayout({
         cols: cols - 1, panelEnabled: cfg.todo.panel, overlayOpen: false,
         itemCount: state.todos?.items.length ?? 0, viewportBudget,
@@ -1915,11 +1984,11 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     const railLayout = buildTodoRailLayout({
         cols: cols - 1, panelEnabled: cfg.todo.panel, overlayOpen: false,
         itemCount: state.todos?.items.length ?? 0, viewportBudget,
-        teamRows: teamLayout.rowCount, queueRows: queueLayout.rows, popupRows, composerBaseRows,
+        teamRows: teamLayout.rowCount, queueRows: queueLayout.rows, popupRows: 0, composerBaseRows,
     });
     const { visible: showRail, width: railWidth, rows: railRows, contentCols } = railLayout;
     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, { registry: controller.getModelRegistry(), currentProvider: cfg.provider, currentModel: cfg.model, maxRows: overlayMaxRows, cols: cols, theme: theme, caps: caps, onSelect: handleModelSelect })) : overlay === 'settings' ? (_jsx(SettingsScreen, { initial: {
+    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: {
             provider: cfg.provider,
             model: cfg.model,
             baseUrl: cfg.baseUrl ?? '',
@@ -1951,12 +2020,12 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
         }, apiKeys: cfg.apiKeys, maxRows: overlayMaxRows, cols: cols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, draft: settingsDraft, 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, { state: confirmState, maxRows: overlayMaxRows, cols: cols, theme: theme, caps: caps, onClose: closeConfirm })) : overlay === 'question' && humanRequest?.kind === 'questions' ? (_jsx(QuestionOverlay, { 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, { plan: humanRequest.plan, maxRows: overlayMaxRows, cols: cols, scrollOffset: overlayScroll, onScrollClamp: setOverlayScroll, theme: theme, caps: caps, onVerdict: handlePlanVerdict })) : null;
-    const header = (_jsx(Header, { cwd: controller.getCwd(), provider: cfg.provider, model: cfg.model, hasKey: hasKey, variant: pickHeaderVariant(cols), theme: theme, caps: caps }));
+        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, caps), version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: viewportBudget, theme: theme, caps: caps })) : null;
+    const opener = empty ? (_jsx(SessionOpener, { variant: pickOpenerVariant(viewportBudget, contentCols), version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: viewportBudget, theme: theme, caps: caps })) : null;
     const density = cfg.density;
     const transcriptWindow = cfg.transcriptWindow ?? DEFAULT_TRANSCRIPT_WINDOW;
     // The fixed status bar remains visible underneath every overlay and toast.
@@ -1985,8 +2054,8 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
             });
         },
     };
-    // Completion belongs to the document footer; cap it to keep the editor usable.
-    const popupMaxRows = Math.max(1, viewportBudget - 4);
+    // Completion shares the fixed editor slot and its frame budget.
+    const popupMaxRows = 6;
     // WHICH KEY THE HINT ROW NAMES (shift-tab-mode-toggle-still-dead-on-windows,
     // C3-1). Derived from `vtInputWarning` rather than from a probe of its own,
     // because that prop is already the single answer to "can this console deliver
@@ -1997,21 +2066,47 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
     // Both keys always WORK (they share one branch in the input handler); this
     // only decides which one the user is taught.
     const modeToggleKey = vtInputWarning ? MODE_TOGGLE_KEYS.fallback : MODE_TOGGLE_KEYS.primary;
-    const composer = (_jsx(Composer, { measureRef: composerRef, deleteDisambiguated: terminal?.deleteDisambiguated ?? false, onCompletionContextChange: setCompletion, cols: contentCols, cursorVisible: cursorVisible, 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: rows >= HINT_MIN_ROWS, submitCount: cfg.submitCount, hintsEnabled: cfg.hints, agentMode: state.agentMode, services: liveServices, modeToggleKey: modeToggleKey, popupMaxRows: popupMaxRows, popupMaxHeight: railLayout.popupMaxHeight, onPopupRowsChange: onPopupRowsChange, scrolledLines: scrolledLines, onDraftRows: onDraftRows, onNotice: notify, theme: theme, caps: caps, onSubmit: handleSubmit, onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) }));
+    const pendingCopy = copyFeedback.current;
+    const copyResult = pendingCopy && state.toasts.some(item => pendingCopy.toastId
+        ? item.id === pendingCopy.toastId
+        : !pendingCopy.previousIds.has(item.id) && item.text === pendingCopy.result.text)
+        ? pendingCopy.result : undefined;
+    const latestToast = state.toasts.at(-1);
+    const feedbackProjection = projectStatusFeedback({
+        interactionPhase: interactionPhase.current, interruptPhase: interruptGesture.current.phase,
+        completion, overlay, copyState, copyResult, ctrlCArmed: ctrlCArmed.current,
+        selectionPending: selectionController?.hasPendingSelection() ?? false, liveServices,
+        toast: latestToast ? { text: latestToast.text,
+            level: latestToast.level === 'success' ? 'info' : latestToast.level } : undefined,
+    });
+    const statusInput = {
+        columns: cols, phase: state.runPhase, pendingCount: state.pendingSteering.length,
+        context: state.context, usageTotal: state.usageTotal, thinkingLevel: cfg.thinkingLevel,
+        elapsedMs, tokPerSec, speedKnown, activeTool: state.activeTool, runOutcome: state.runOutcome,
+        waitingForConfirmation: !!humanRequest || !!confirmState,
+        stopping: interruptGesture.current.phase === 'stopping',
+        interruptPhase: interruptGesture.current.phase,
+        compacting: compactionLive || !!state.compaction?.inFlight,
+        mode: state.agentMode, pendingMode: state.pendingAgentMode,
+        servicesActive: { live: liveServices }, ecoRung: governor.rung,
+        teamActive: state.team ? { running: state.team.runs.filter(item => !['queued', 'done', 'failed', 'aborted'].includes(item.phase)).length,
+            total: state.team.runs.length } : undefined,
+        todoActive: state.todos ? { done: state.todos.doneCount, total: state.todos.total } : undefined,
+        fastActive: state.fast?.live ? { inFlight: state.fast.inFlight } : undefined,
+        ...feedbackProjection,
+    };
+    const details = planStatusDetail({ status: statusInput, model: cfg.model, provider: cfg.provider,
+        hints: { interactionPhase: interactionPhase.current, cols, completion, overlay,
+            selectionPending: selectionController?.hasPendingSelection() ?? false,
+            copyInFlight: copyState.busy, copyCleanupPending: copyState.cleanupPending,
+            services: liveServices, hintsEnabled: cfg.hints, modeToggleKey,
+            interruptPhase: interruptGesture.current.phase,
+            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, 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;
-    const viewport = (_jsxs(ScrollViewport, { active: overlay === null && !tooSmall, overlay: tooSmall ? null : overlayNode, footer: _jsxs(_Fragment, { children: [team, _jsx(QueuePanel, { layout: queueLayout, theme: theme }), composer] }), rail: rail, scrollbar: terminal?.scrollbar, composerRef: composerRef, onComposerVisibilityChange: setCursorVisible, activityRef: activityRef, onActivityVisibilityChange: setActivityRowVisible, resetKey: scrollResetKey, intent: scrollIntent, pinToBottomNonce: pinToBottomNonce, onScrolledLinesChange: setScrolledLines, onViewportShiftChange: onViewportShiftChange, 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, toast: _jsx(BottomStatusRow, { toasts: state.toasts, hints: { interactionPhase: state.runPhase === 'starting' ? 'starting'
-                    : running ? 'running' : 'idle', cols, completion,
-                selectionPending: selectionController?.hasPendingSelection() ?? false,
-                copyInFlight: copyState.busy, copyCleanupPending: copyState.cleanupPending,
-                overlay, services: liveServices, hintsEnabled: cfg.hints, modeToggleKey,
-                interruptHint: interruptGesture.current.phase === 'stopping'
-                    ? 'Esc force-stop' : interruptGesture.current.phase === 'armed'
-                    ? 'Esc confirm' : 'Esc x2 interrupt',
-                updateAvailable: !!updateSnapshot && !overlayNode && !running
-                    && shouldRenderUpdateLine(updateSnapshot),
-            }, update: updateSnapshot && !overlayNode && !running && shouldRenderUpdateLine(updateSnapshot) ? (_jsx(UpdateLine, { snapshot: updateSnapshot, compact: cols < UPDATE_LIMITS.statusCompactCols, theme: theme, caps: caps })) : null, theme: theme }), status: _jsx(StatusBar, { pendingSteering: state.pendingSteering, runPhase: state.runPhase, activeTool: state.activeTool, runOutcome: state.runOutcome, reducedMotion: reducedMotion, waitingForConfirmation: !!humanRequest || !!confirmState, stopping: interruptGesture.current.phase === 'stopping', interruptHint: interruptGesture.current.phase === 'stopping'
+    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, 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
@@ -2029,9 +2124,9 @@ export function App({ controller, version, initialOverlay, initialPrompt, confir
                 }
                 : {}), ...(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 } } : {}), ...(state.compaction?.live
-                ? { compactionActive: { inFlight: state.compaction.inFlight } }
-                : {}), ...(controller.isCompactionEnabled()
+                : {}), ...(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,