@aragon-agent/cli 0.6.4 → 0.6.7

package/dist/ui/App.js

@@ -11,7 +11,6 @@ import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { initialViewState, reduceEvent, viewReducer, } from '../agent/reducer.js';
 import { mergeDeltas } from '../agent/coalesce.js';
 import { computeCost } from '../agent/usage.js';
-import { isApproximate } from '../compaction/pressure.js';
 import { parseMaxTokensInput, DEFAULT_TRANSCRIPT_RETAIN, DEFAULT_TRANSCRIPT_WINDOW, } from '../config/schema.js';
 import { updatePersistedConfig } from '../config/store.js';
 import { appendPrompt, loadPromptHistory } from '../config/prompt-history.js';
@@ -47,8 +46,8 @@ 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 { todoRailRows, todoRailWidth } from './layout/rail.js';
-import { TODO_LIMITS } from '../todo/limits.js';
+import { buildTodoRailLayout } from './layout/todo-layout.js';
+import { buildTeamPanelLayout } from './layout/team-panel.js';
 import { advanceBudget, decideFollowThrough, emptyBudget, } from '../todo/follow-through.js';
 import { useTerminalSize } from './layout/useTerminalSize.js';
 import { useHeightStore } from './use-height-store.js';
@@ -751,6 +750,27 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
             }
         });
     }, [controller]);
+    // --- Context occupancy (context-usage-gauge-accuracy §3.3 / I-1). --------
+    //
+    // A SEVENTH SUBSCRIPTION, AND THE SOLE DISPATCHER OF `contextUsage`. The gauge
+    // used to be written from three reducer branches fed by two upstreams, which
+    // is what let a stale `snapshot` bounce the bar back to the pre-compaction
+    // figure one statement after a compaction correctly dropped it (P0-1). One
+    // writer makes that unrepresentable.
+    //
+    // IT SUBSCRIBES UNCONDITIONALLY. `subscribeContextUsage` is not a compaction
+    // forwarder - the meter exists in every session, including one started with
+    // `--no-compaction`, which is precisely the session whose gauge previously had
+    // one sample per turn and read 0 % after a `/resume`.
+    useEffect(() => {
+        // SEED ON MOUNT so a resumed session shows a real occupancy on frame 1
+        // rather than after its first completed turn. `getContextUsage()` measures
+        // on demand, so this works before any event has ever arrived.
+        dispatch({ type: 'contextUsage', snapshot: controller.getContextUsage() });
+        return controller.subscribeContextUsage((snapshot) => {
+            dispatch({ type: 'contextUsage', snapshot });
+        });
+    }, [controller]);
     // --- Compaction event stream (context-auto-compaction §5.2). -------------
     //
     // A SIXTH SUBSCRIPTION, for the reason the team, todo and fast ones record:
@@ -787,23 +807,20 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
                         model: event.model,
                     });
                     break;
-                case 'compaction_end': {
+                case 'compaction_end':
+                    // THE CARD, AND NOTHING ELSE (context-usage-gauge-accuracy §3.3).
+                    //
+                    // A `contextTokensEstimated` dispatch used to live here, hand-building
+                    // the post-compaction occupancy out of `record.tokensAfter` plus the
+                    // snapshot's `estimateOffset`. It is gone because the gauge now has ONE
+                    // writer: `ContextMeter` learns about the splice from
+                    // `CompactionWiring.settlePending` itself and re-measures, so the bar
+                    // falls in the same frame WITHOUT this branch and without the `snapshot`
+                    // branch below racing it. Those two dispatches were the second and
+                    // third writers of one number, and the loser of that race was the
+                    // correct value (P0-1).
                     dispatch({ type: 'compactionEnd', record: event.record });
-                    // THE GAUGE MUST FALL IMMEDIATELY (§6.2 / AC-5), and it must fall to a
-                    // number in the SAME UNIT as the one it replaces (P1-11). The value
-                    // being overwritten came from `occupiedTokens(usage)` — a provider
-                    // measurement that includes the tool schemas — while
-                    // `record.tokensAfter` comes from core's `estimatePromptTokens`, which
-                    // never counts them. Writing the raw estimate makes the bar fall too
-                    // far and then visibly climb again on the next `turn_end` for no reason
-                    // the user can see, which is the same is-this-thing-working doubt the
-                    // immediate drop exists to prevent, one turn later.
-                    if (event.record.applied) {
-                        const offset = controller.getCompactionSnapshot().pressure.estimateOffset ?? 0;
-                        dispatch({ type: 'contextTokensEstimated', tokens: event.record.tokensAfter + offset });
-                    }
                     break;
-                }
                 case 'usage': {
                     // Compaction spend is REAL SPEND at the SUMMARIZER's price (§6.4 /
                     // AC-15), which may be neither the lead's nor the fast tier's — so the
@@ -820,24 +837,12 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
                     break;
                 }
                 case 'snapshot':
+                    // THE CHIP, THE COUNTS AND THE SUMMARIZER (§3.3). The occupancy that
+                    // rides along on `snapshot.pressure` is deliberately NOT dispatched
+                    // here: the meter that produced it publishes it on its own channel, and
+                    // a second dispatch of the same number is the second writer this
+                    // feature removed.
                     dispatch({ type: 'compactionSnapshot', snapshot: event.snapshot });
-                    // ONE NUMBER ON SCREEN AND IN THE TRIGGER (R-11 / hardening §3.2.4).
-                    // The checkpoint's occupancy is a measured base PLUS an estimate of
-                    // what was appended after it, and without this the gauge would still
-                    // show the bare base from the last `turn_end` - so a user watching
-                    // 76 % would see compaction fire and conclude the feature is broken.
-                    //
-                    // `contextTokensEstimated` IS REUSED RATHER THAN A SECOND WRITER ADDED:
-                    // it is the one existing action for "this figure is derived", and it
-                    // already sets the `~`. Gated on `isApproximate`, which is precisely
-                    // the case it was built for - a wholly measured figure belongs to
-                    // `turnEnd`.
-                    if (isApproximate(event.snapshot.pressure)) {
-                        dispatch({
-                            type: 'contextTokensEstimated',
-                            tokens: event.snapshot.pressure.occupied,
-                        });
-                    }
                     break;
             }
         });
@@ -1128,6 +1133,10 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // 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);
+    const onPopupRowsChange = useCallback((next) => {
+        setPopupRows(previous => previous === next ? previous : next);
+    }, []);
     const draftRowsRef = useRef(1);
     const shrinkTimer = useRef(null);
     const onDraftRows = useCallback((next) => {
@@ -1821,8 +1830,12 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
         }
     });
     // --- Render ------------------------------------------------------------
-    const modelInfo = controller.getModelInfo();
-    const modelKnown = !!controller.getModelRegistry().getModel(cfg.provider, cfg.model);
+    // `const modelInfo = controller.getModelInfo()` AND ITS `modelKnown` COMPANION
+    // USED TO LIVE HERE (context-usage-gauge-accuracy §4.3). They fed the status
+    // bar's `contextWindow` / `contextWindowKnown` props, which no longer exist:
+    // the denominator and its trustworthiness are resolved inside `ContextMeter`,
+    // which is what lets the user's `contextWindow` override reach the gauge at
+    // all. Nothing else in this render read them.
     const overlay = state.overlay;
     const hasKey = controller.hasApiKey();
     const empty = state.entries.length === 0;
@@ -1878,22 +1891,19 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // and every test that never types byte-identical to before.
     const viewportBudget = computeViewportRows(rows, draftRows);
     const overlayMaxRows = fullscreen ? viewportBudget : Number.POSITIVE_INFINITY;
-    // --- The todo rail (todo-plan-execution §3.9). --------------------------
-    //
-    // ONE NUMBER FOR THE GATE AND FOR THE LAYOUT (I-10). `railRows` is both what
-    // decides whether the panel mounts and what the panel lays out against; a
-    // panel that mounts on one number and renders against another shows nothing
-    // and reports nothing. `todoRailRows` is NOT `viewportBudget`: the live team
-    // roster costs up to 8 rows inside `AppShell`'s measured bottom box that the
-    // budget knows nothing about (P1-3).
-    const railRows = todoRailRows(viewportBudget, state.team !== null);
-    const railWidth = todoRailWidth(cols);
-    const showRail = fullscreen && // non-goal 4: inline mode has no fixed frame
-        cfg.todo.panel && // `/todo panel off`, persisted
-        overlay === null && // a modal owns the screen (D-7)
-        state.todos !== null && // no list -> no furniture, zero layout cost
-        railWidth > 0 && // too narrow (under 80 columns)
-        railRows >= TODO_LIMITS.panelMinRows; // too short to say anything useful
+    // Renderers consume these same projections. Team capacity does not depend on
+    // popup occupancy, so a menu cannot toggle the team's collapsed state.
+    const teamLayout = buildTeamPanelLayout({
+        snapshot: state.team, terminalRows: rows, availableRows: viewportBudget,
+    });
+    const railLayout = buildTodoRailLayout({
+        mode, cols, panelEnabled: cfg.todo.panel, overlayOpen: overlay !== null,
+        itemCount: state.todos?.items.length ?? 0, viewportBudget,
+        teamRows: teamLayout.rowCount, popupRows,
+    });
+    // Every viewport consumer uses contentCols; header, composer, status and
+    // overlays keep the full terminal width. Overlay visibility is in the gate.
+    const { visible: showRail, width: railWidth, rows: railRows, contentCols } = railLayout;
     // The inline plan strip (todo-plan-followthrough §3.7 / W2).
     //
     // DELIBERATELY NOT `!showRail`, which is true for FOUR different reasons and
@@ -1906,12 +1916,6 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // needless — this runs in RENDER scope, where `cfg` is re-read every frame.
     // The asymmetry with the `agent_end` handler above is the whole of P1-1.
     const showStrip = !fullscreen && cfg.todo.panel && state.todos !== null;
-    // Every consumer INSIDE the viewport slot switches to this; the header,
-    // composer, status bar, toasts and every overlay keep the full frame width
-    // (C-7). Overlays keep it because `showRail` already includes `overlay ===
-    // null`: splitting the screen with a status panel behind a modal is both worse
-    // design and a second source of width-contract bugs in six components.
-    const contentCols = cols - (showRail ? railWidth : 0);
     const overlayNode = 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: {
             provider: cfg.provider,
             model: cfg.model,
@@ -2031,8 +2035,8 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // 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 = fullscreen ? (_jsx(Composer, { isActive: overlay === null, 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, scrolledLines: scrolledLines, onDraftRows: onDraftRows, onNotice: notify, theme: theme, caps: caps, onSubmit: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) })) : (_jsx(Box, { marginTop: 1, children: _jsx(PromptInput, { isActive: overlay === null, running: state.status === 'running', history: promptHistory, commands: commandOptions, cwd: controller.getCwd(), agentMode: state.agentMode, theme: theme, caps: caps, onSubmit: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) }) }));
-    return (_jsx(AppShell, { mode: mode, rows: rows, cols: cols, header: header, viewport: viewport, team: state.team ? (_jsx(TeamPanel, { snapshot: state.team, rows: rows, cols: cols, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null, rail: showRail && state.todos ? (_jsx(TodoPanel, { snapshot: state.todos, width: railWidth, rows: railRows, running: running, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null, strip: showStrip && state.todos ? (_jsx(TodoStrip, { snapshot: state.todos, cols: cols, theme: theme, caps: caps })) : null, toast: _jsx(BottomStatusRow, { mode: mode, toasts: state.toasts, 
+    const composer = fullscreen ? (_jsx(Composer, { isActive: overlay === null, 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: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) })) : (_jsx(Box, { marginTop: 1, children: _jsx(PromptInput, { isActive: overlay === null, running: state.status === 'running', history: promptHistory, commands: commandOptions, cwd: controller.getCwd(), agentMode: state.agentMode, theme: theme, caps: caps, onSubmit: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) }) }));
+    return (_jsx(AppShell, { mode: mode, rows: rows, cols: cols, header: header, viewport: viewport, team: state.team ? (_jsx(TeamPanel, { snapshot: state.team, layout: fullscreen ? teamLayout : undefined, rows: rows, cols: cols, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null, rail: showRail && state.todos ? (_jsx(TodoPanel, { snapshot: state.todos, width: railWidth, rows: railRows, running: running, reducedMotion: viewReducedMotion, theme: theme, caps: caps })) : null, strip: showStrip && state.todos ? (_jsx(TodoStrip, { snapshot: state.todos, cols: cols, theme: theme, caps: caps })) : null, toast: _jsx(BottomStatusRow, { mode: mode, toasts: state.toasts, 
             // `!overlayNode` suppresses the line while an overlay owns the screen:
             // the full-screen branch replaces the whole viewport with the overlay,
             // and a working line under a settings screen is noise attached to a
@@ -2070,7 +2074,14 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
             // branch replaces the whole viewport with the overlay, and an update
             // notice under a settings screen is noise attached to a surface it is
             // not visible on.
-            update: updateSnapshot && !overlayNode && shouldRenderUpdateLine(updateSnapshot) ? (_jsx(UpdateLine, { snapshot: updateSnapshot, compact: cols < UPDATE_LIMITS.statusCompactCols, theme: theme, caps: caps })) : null, theme: theme }), composer: composer, status: _jsx(StatusBar, { model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, contextTokens: state.contextTokens, contextWindow: modelInfo.contextWindow, contextWindowKnown: modelKnown, contextEstimated: state.contextTokensEstimated, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ecoRung: governor.rung, ...(state.team
+            update: updateSnapshot && !overlayNode && shouldRenderUpdateLine(updateSnapshot) ? (_jsx(UpdateLine, { snapshot: updateSnapshot, compact: cols < UPDATE_LIMITS.statusCompactCols, theme: theme, caps: caps })) : null, theme: theme }), composer: composer, status: _jsx(StatusBar, { model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, 
+            // ONE OBJECT INSTEAD OF FOUR PARALLEL PROPS (§4.3). The four were a
+            // projection of "many sources of truth" into the props layer, and a
+            // caller could update three of them; a single reading cannot be
+            // partially stale. The window and its `known` flag now travel INSIDE
+            // it, resolved by the meter - which is what makes the user's
+            // `contextWindow` override reach the bar.
+            context: state.context, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ecoRung: governor.rung, ...(state.team
                 ? {
                     teamActive: {
                         running: state.team.runs.filter((r) => r.phase !== 'queued' && r.phase !== 'done' &&
@@ -2081,8 +2092,9 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
                 : {}), ...(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()
                 ? {
-                    compactionActive: { inFlight: state.compaction.inFlight },
                     gaugeMarks: {
                         warn: cfg.compaction.warnThreshold * 100,
                         high: cfg.compaction.threshold * 100,

package/dist/ui/AutocompletePopup.d.ts

@@ -6,6 +6,7 @@
 import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
+import { type AutocompleteLayout } from './layout/autocomplete.js';
 export interface Suggestion {
     label: string;
     hint?: string;
@@ -16,6 +17,7 @@ interface AutocompletePopupProps {
     theme: Theme;
     caps: TermCapabilities;
     maxRows?: number;
+    layout?: AutocompleteLayout;
 }
-export declare function AutocompletePopup({ items, selected, theme, caps, maxRows, }: AutocompletePopupProps): React.ReactElement | null;
+export declare function AutocompletePopup({ items, selected, theme, caps, maxRows, layout, }: AutocompletePopupProps): React.ReactElement | null;
 export {};

package/dist/ui/AutocompletePopup.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { pickGlyphs } from './glyphs.js';
-const DEFAULT_MAX_ROWS = 6;
-export function AutocompletePopup({ items, selected, theme, caps, maxRows = DEFAULT_MAX_ROWS, }) {
-    if (items.length === 0)
+import { buildAutocompleteLayout } from './layout/autocomplete.js';
+export function AutocompletePopup({ items, selected, theme, caps, maxRows, layout, }) {
+    const projection = layout ?? buildAutocompleteLayout({ itemCount: items.length, selected, maxRows });
+    if (projection.rowCount === 0)
         return null;
     const glyphs = pickGlyphs(caps);
-    // Keep the highlighted row within a window of `maxRows`.
-    const start = Math.max(0, Math.min(selected - maxRows + 1, items.length - maxRows));
-    const windowStart = Math.max(0, start);
-    const visible = items.slice(windowStart, windowStart + maxRows);
-    const moreBelow = items.length - (windowStart + visible.length);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: glyphs.boxStyle, borderColor: theme.border, paddingX: 1, children: [visible.map((item, i) => {
+    const { start: windowStart, count, moreBelow, showMore } = projection;
+    const visible = items.slice(windowStart, windowStart + count);
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: theme.border, paddingX: 1, children: [visible.map((item, i) => {
                 const idx = windowStart + i;
                 const active = idx === selected;
-                return (_jsxs(Text, { inverse: active, children: [_jsx(Text, { color: active ? undefined : theme.primary, children: item.label }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint] }) : null] }, item.label));
-            }), moreBelow > 0 && _jsxs(Text, { color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
+                return (_jsxs(Text, { inverse: active, wrap: "truncate", children: [_jsx(Text, { color: active ? undefined : theme.primary, children: item.label.replace(/\s+/g, ' ') }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint.replace(/\s+/g, ' ')] }) : null] }, idx));
+            }), showMore && _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
 }

package/dist/ui/BottomStatusRow.d.ts

@@ -11,7 +11,7 @@
  * box is its only `flexShrink={1}` child — so an extra chrome row does not make
  * the frame taller, Yoga takes the row out of the TRANSCRIPT. Meanwhile
  * `viewportRows()` keeps returning the old number to `ScrollViewport`,
- * `selectWindow`'s spacers, `overlayMaxRows`, `popupMaxRows` and `todoRailRows`.
+ * `selectWindow`'s spacers, `overlayMaxRows`, `popupMaxRows` and `buildTodoRailLayout`.
  * The transcript would draw one row shorter than every consumer believes, ONLY
  * WHILE A RUN IS IN FLIGHT, so the layout would shift on submit and shift back on
  * `agent_end`.

package/dist/ui/Composer.d.ts

@@ -49,6 +49,8 @@ export interface ComposerProps {
      */
     modeToggleKey?: string;
     popupMaxRows?: number;
+    popupMaxHeight?: number;
+    onPopupRowsChange?: (rows: number) => void;
     /**
      * Rows of newer output below the viewport, forwarded to the input row's chip
      * (tui-selection-and-scroll-follow §4.2 / G7).
@@ -117,5 +119,5 @@ declare function hintText(opts: {
  * than fishing the string out of a rendered frame.
  */
 export declare const hintTextForTest: typeof hintText;
-export declare function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services, modeToggleKey, popupMaxRows, scrolledLines, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }: ComposerProps): React.ReactElement;
+export declare function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services, modeToggleKey, popupMaxRows, popupMaxHeight, onPopupRowsChange, scrolledLines, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }: ComposerProps): React.ReactElement;
 export {};

package/dist/ui/Composer.js

@@ -90,7 +90,7 @@ function hintText(opts) {
  * than fishing the string out of a rendered frame.
  */
 export const hintTextForTest = hintText;
-export function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services = 0, modeToggleKey = MODE_TOGGLE_KEYS.primary, popupMaxRows, scrolledLines = 0, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }) {
+export function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services = 0, modeToggleKey = MODE_TOGGLE_KEYS.primary, popupMaxRows, popupMaxHeight, onPopupRowsChange, scrolledLines = 0, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }) {
     const [hasDraft, setHasDraft] = useState(false);
     const onDraftChange = useCallback((next) => {
         setHasDraft(next.hasDraft);
@@ -110,7 +110,7 @@ export function Composer({ isActive, running, history, commands, cwd, showHint,
                     : theme.idleBorder ?? theme.border;
     const glyphs = pickGlyphs(caps);
     const visible = showHint && hintsEnabled;
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(PromptInput, { isActive: isActive, running: running, history: history, commands: commands, cwd: cwd, theme: theme, caps: caps, popupMaxRows: popupMaxRows, onSubmit: onSubmit, onHelp: onHelp, agentMode: agentMode, bordered: { color: borderColor }, onDraftChange: onDraftChange, onNotice: onNotice, scrolledLines: scrolledLines }), visible && (
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(PromptInput, { isActive: isActive, running: running, history: history, commands: commands, cwd: cwd, theme: theme, caps: caps, popupMaxRows: popupMaxRows, popupMaxHeight: popupMaxHeight, onPopupRowsChange: onPopupRowsChange, onSubmit: onSubmit, onHelp: onHelp, agentMode: agentMode, bordered: { color: borderColor }, onDraftChange: onDraftChange, onNotice: onNotice, scrolledLines: scrolledLines }), visible && (
             // The chip rides the EXISTING hint row rather than adding one, so it
             // costs zero rows on a 24-row terminal.
             _jsxs(Box, { flexDirection: "row", flexShrink: 0, children: [_jsx(Text, { children: '  ' }), _jsx(ModeChip, { mode: agentMode, theme: theme, caps: caps }), _jsx(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: hintText({

package/dist/ui/PromptInput.d.ts

@@ -48,6 +48,9 @@ interface PromptInputProps {
      * `App` derives this from `budget.ts` so the popup shrinks instead.
      */
     popupMaxRows?: number;
+    /** Total menu rows, including borders and the overflow hint. */
+    popupMaxHeight?: number;
+    onPopupRowsChange?: (rows: number) => void;
     onSubmit: (text: string) => void;
     onHelp?: () => void;
     /**
@@ -173,5 +176,5 @@ export declare function fileTokenAt(buffer: string, cursor: number): {
     end: number;
     query: string;
 } | null;
-export declare function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines, }: PromptInputProps): React.ReactElement;
+export declare function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, popupMaxHeight, onPopupRowsChange, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines, }: PromptInputProps): React.ReactElement;
 export {};

package/dist/ui/PromptInput.js

@@ -19,12 +19,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * stays a plain `useState` because it is written from the debounced glob effect
  * rather than from a key.
  */
-import { useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { glob as tinyGlob } from 'tinyglobby';
 import { pickGlyphs } from './glyphs.js';
 import { recognize } from '../input/keymap.js';
 import { AutocompletePopup } from './AutocompletePopup.js';
+import { buildAutocompleteLayout } from './layout/autocomplete.js';
 import { editorReducer, INITIAL_EDITOR_STATE, } from './editor-reducer.js';
 import { hasPasteFrame, splitPasteFrames } from './paste-frames.js';
 import { allocatePasteId, expandPastes, expandRangeOverTokens } from './paste-tokens.js';
@@ -246,7 +247,7 @@ function isControlSeq(input) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines = 0, }) {
+export function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, popupMaxHeight, onPopupRowsChange, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines = 0, }) {
     const { stdout } = useStdout();
     const [editor, dispatch] = useReducer(editorReducer, INITIAL_EDITOR_STATE);
     const { buffer, cursor, historyIndex, dismissed, sel } = editor;
@@ -263,6 +264,19 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             ? fileMatches.map((p) => ({ label: p }))
             : [];
     const clampedSel = popupItems.length > 0 ? Math.min(sel, popupItems.length - 1) : 0;
+    const popupLayout = buildAutocompleteLayout({
+        itemCount: isActive ? popupItems.length : 0,
+        selected: clampedSel,
+        maxRows: popupMaxRows,
+        maxHeight: popupMaxHeight,
+    });
+    const popupVisible = isActive && popupLayout.rowCount > 0;
+    // Report on every mount, including zero. Cleanup belongs to a separate
+    // effect so changing height does not publish an intermediate zero budget.
+    useLayoutEffect(() => {
+        onPopupRowsChange?.(popupLayout.rowCount);
+    }, [onPopupRowsChange, popupLayout.rowCount]);
+    useLayoutEffect(() => () => onPopupRowsChange?.(0), [onPopupRowsChange]);
     // --- Debounced `@file` scan. ---------------------------------------------
     useEffect(() => {
         if (fileQuery === null || fileQuery.length < 1) {
@@ -428,7 +442,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         if (key.tab && key.shift)
             return;
         // Popup navigation owns Up/Down/Tab/→/Enter/Esc while it is open.
-        if (popupItems.length > 0) {
+        if (popupVisible) {
             if (key.upArrow) {
                 dispatch({ type: 'select', sel: Math.max(0, clampedSel - 1) });
                 return;
@@ -550,7 +564,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         const split = splitRowAtColumn(row, layout.cursorCol);
         return (_jsxs(_Fragment, { children: [renderSegments(split.before, `b${i}.`), _jsx(Text, { inverse: true, children: split.at ? split.at.text : ' ' }), renderSegments(split.after, `a${i}.`)] }));
     });
-    const inputRow = (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: markerColor, bold: true, children: [marker, ' '] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: buffer.length === 0 ? (_jsx(Text, { color: theme.muted, children: placeholder })) : (rowNodes.map((node, i) => overflow && i === rowNodes.length - 1 ? (
+    const inputRow = (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: markerColor, bold: true, children: [marker, ' '] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: buffer.length === 0 ? (_jsx(Text, { wrap: "truncate", color: theme.muted, children: placeholder })) : (rowNodes.map((node, i) => overflow && i === rowNodes.length - 1 ? (
                 // The overflow indicator rides the LAST rendered row rather than
                 // taking one of its own: an extra row would put the composer's
                 // real height one above the `draftRows` it just reported (I-8).
@@ -565,5 +579,5 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             // the user is typing — `↓ 9` becomes `↓ 10` becomes `↓ 100` — and every
             // change would otherwise re-wrap a draft that fills the line.
             _jsx(Box, { flexShrink: 0, alignSelf: "flex-start", marginLeft: 1, width: chip.cells, justifyContent: "flex-end", children: _jsx(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: chip.text }) }))] }));
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [popupItems.length > 0 && (_jsx(AutocompletePopup, { items: popupItems, selected: clampedSel, theme: theme, caps: caps, maxRows: popupMaxRows })), bordered ? (_jsx(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: bordered.color, paddingX: 1, children: inputRow })) : (inputRow)] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [popupVisible && (_jsx(AutocompletePopup, { items: popupItems, selected: clampedSel, theme: theme, caps: caps, maxRows: popupMaxRows, layout: popupLayout })), bordered ? (_jsx(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: bordered.color, paddingX: 1, children: inputRow })) : (inputRow)] }));
 }

package/dist/ui/StatusBar.d.ts

@@ -1,8 +1,15 @@
 /**
  * Status bar (spec §4.8). Width-aware, borderless, EXACTLY one row: a left
  * cluster (run status, model, thinking level) and a right cluster (context
- * gauge, tokens, cost, tokens/sec + elapsed while running, off-bottom `↑N`).
- * Clusters drop out gracefully on narrow terminals.
+ * gauge, occupancy pair, session total, cost, tokens/sec + elapsed while
+ * running, off-bottom `↑N`). Clusters drop out gracefully on narrow terminals.
+ *
+ * THE RIGHT CLUSTER'S WIDTH LADDER (context-usage-gauge-accuracy §3.6):
+ *
+ *   >= 96   [####....] 43%  86.0k/200.0k  total 1.2M^ 48.0k v  $3.21  12 tok/s  1m02s
+ *   72-95   [####....] 43%  86.0k/200.0k  $3.21
+ *   60-71   [####....] 43%  $3.21
+ *   < 60    43%  $3.21
  *
  * Dropping the round border here buys back 3 rows of a 24-row terminal — an
  * eighth of the screen was being spent framing a single line of text.
@@ -11,14 +18,23 @@ import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
 import type { UsageTotal } from '../agent/reducer.js';
+import type { ContextUsageSnapshot } from '../compaction/types.js';
 import { type AgentMode } from '../agent/agent-mode.js';
 interface StatusBarProps {
     model: string;
     provider: string;
     usageTotal: UsageTotal;
-    contextTokens: number;
-    contextWindow: number;
-    contextWindowKnown: boolean;
+    /**
+     * Context occupancy, as one object (context-usage-gauge-accuracy §4.3).
+     *
+     * IT REPLACED FOUR PARALLEL PROPS - `contextTokens`, `contextWindow`,
+     * `contextWindowKnown`, `contextEstimated`. Four props describing one reading
+     * are four chances for a caller to update three of them, which is the props-
+     * layer form of the "many writers" defect this feature removed from the
+     * reducer. `usageTotal` stays separate because it genuinely IS another
+     * quantity: session spend, not occupancy.
+     */
+    context: ContextUsageSnapshot;
     status: 'idle' | 'running';
     elapsedMs: number;
     thinkingLevel: string;
@@ -187,16 +203,6 @@ interface StatusBarProps {
         warn: number;
         high: number;
     };
-    /**
-     * Whether `contextTokens` is a DERIVED figure rather than a measured one.
-     *
-     * It WIDENS THE EXISTING `~`, it does not add a second marker. Today that
-     * prefix means "the window is a guess" (`contextWindowKnown`); with compaction
-     * it also has to mean "the occupancy is a guess", because the bar is written
-     * from an estimate for one turn after every compaction so it can fall
-     * immediately (§6.2 / AC-5).
-     */
-    contextEstimated?: boolean;
 }
 export declare function StatusBar(props: StatusBarProps): React.ReactElement;
 export {};

package/dist/ui/StatusBar.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text, useStdout } from 'ink';
 import { pickGlyphs } from './glyphs.js';
-import { formatCost, formatTokens, formatDuration } from '../agent/usage.js';
+import { formatCost, formatTokens, formatDuration, promptTokensOf } from '../agent/usage.js';
 import { buildGauge } from './gauge.js';
 import { MODE_LABEL } from '../agent/agent-mode.js';
 import { formatRetryChip } from '../agent/retry-view.js';
@@ -12,6 +12,26 @@ import { TODO_LIMITS } from '../todo/limits.js';
 import { PROC_LIMITS } from '../proc/limits.js';
 /** Below this the `eco` chip costs the context gauge more than it is worth. */
 const ECO_MIN_COLS = 72;
+/**
+ * Where `86k/200k` starts being shown (context-usage-gauge-accuracy §3.6 / W5).
+ *
+ * IT TAKES THE COLUMNS THE SESSION TOTAL USED TO HAVE, and the ordering is the
+ * point rather than a layout accident (D-6). "How full am I, out of how much" is
+ * the question a user asks the gauge; "what has this session cost in tokens" is
+ * a different one, and putting the second in front of the first spends the
+ * scarce columns on the number the user is more likely to MISREAD - the total
+ * looks like an occupancy until you notice it exceeds the window.
+ */
+const ABSOLUTE_PAIR_MIN_COLS = 72;
+/**
+ * Where the session total returns, now prefixed.
+ *
+ * `total ` IS AN ASCII WORD, NOT A SIGMA. `ui/**` is inside the glyph scanner's
+ * scope, so a new symbol would need an entry in `glyphs.ts` with an ASCII
+ * fallback for a legacy `cmd.exe` - a real cost for a three-character prefix
+ * that reads worse.
+ */
+const SESSION_TOTAL_MIN_COLS = 96;
 /**
  * I-5 — DO NOT "CLEAN THIS UP". Ink short-circuits identical output at TWO
  * gates (`ink.js:132` and `log-update.js:13`), so a fixed frame whose React
@@ -31,23 +51,42 @@ function redrawChar(nonce) {
     return nonce % 2 === 0 ? ' ' : NBSP;
 }
 export function StatusBar(props) {
-    const { model, provider, usageTotal, contextTokens, contextWindow, contextWindowKnown, status, elapsedMs, thinkingLevel, tokPerSec, theme, caps, scrolledLines = 0, redrawNonce = 0, agentMode = 'build', pendingAgentMode = null, teamActive, todoActive, servicesActive, retryActive, ecoRung = 0, fastActive, compactionActive, gaugeMarks, contextEstimated = false, } = props;
+    const { model, provider, usageTotal, context, status, elapsedMs, thinkingLevel, tokPerSec, theme, caps, scrolledLines = 0, redrawNonce = 0, agentMode = 'build', pendingAgentMode = null, teamActive, todoActive, servicesActive, retryActive, ecoRung = 0, fastActive, compactionActive, gaugeMarks, } = props;
     const { stdout } = useStdout();
     const cols = stdout?.columns ?? 80;
     const running = status === 'running';
     const glyphs = pickGlyphs(caps);
-    const pct = contextWindow > 0 ? Math.min(100, Math.round((contextTokens / contextWindow) * 100)) : 0;
+    // THE PERCENTAGE IS NOT RECOMPUTED HERE ANY MORE. It arrives already divided
+    // and clamped by the same code the compaction trigger reads, which is the
+    // whole of AC-2: a user watching 78 % and a `/compact status` reporting 91 %
+    // would rightly conclude one of them is lying.
+    const pct = context.pct;
     // `gaugeMarks` is spread rather than passed as `undefined`, so a session with
     // compaction off takes `buildGauge`'s own default and the bar is byte-identical
     // to the pre-feature build.
     const gauge = gaugeMarks
         ? buildGauge(pct, cols < 72 ? 8 : 12, theme, caps, gaugeMarks)
         : buildGauge(pct, cols < 72 ? 8 : 12, theme, caps);
-    // ONE `~` FOR TWO KINDS OF APPROXIMATION (§6.2). A second marker would be a
-    // second thing to explain for a distinction the user does not act on
-    // differently: either way the number is a guess.
-    const pctLabel = `${contextWindowKnown && !contextEstimated ? '' : '~'}${gauge.pct}%`;
-    const tokens = `${formatTokens(usageTotal.inputTokens)}${glyphs.arrowUp} ${formatTokens(usageTotal.outputTokens)}${glyphs.arrowDown}`;
+    // `~` BELONGS TO THE NUMERATOR, `?` TO THE DENOMINATOR (P2-7). One glyph used
+    // to carry three meanings - the window is a guess, the occupancy is a guess,
+    // the occupancy contains an appended-message estimate - and a user could not
+    // tell from it which half to distrust. The `~` keeps every case it had: an
+    // unknown window still produces it, so a session that never touches the new
+    // absolute pair sees the identical string it saw before.
+    const occupancyApproximate = context.source === 'estimate' || context.deltaTokens > 0;
+    const pctLabel = `${context.windowKnown && !occupancyApproximate ? '' : '~'}${gauge.pct}%`;
+    // `?` ON THE WINDOW, AND ONLY ON THE NEW READOUT. `windowKnown` is false
+    // exactly when `buildRuntimeModel` invented the 128k placeholder, and saying
+    // `128k?` is the difference between a denominator the user can act on and one
+    // they will assume came from their model card.
+    const windowLabel = `${formatTokens(context.window)}${context.windowKnown ? '' : '?'}`;
+    const absolutePair = `${formatTokens(context.occupied)}/${windowLabel}`;
+    // THE PROMPT-SIDE TOTAL, NOT `inputTokens` (P1-3 / AC-11). Anthropic reports
+    // `input_tokens` EXCLUDING cached tokens, so the old expression under-reported
+    // for anyone behind a caching gateway - on the same row as a `$` that has
+    // always priced the cache. Any session with cache hits sees this number grow,
+    // and that is the fix rather than a regression.
+    const tokens = `total ${formatTokens(promptTokensOf(usageTotal))}${glyphs.arrowUp} ${formatTokens(usageTotal.outputTokens)}${glyphs.arrowDown}`;
     const statusGlyph = running ? theme.symbols.toolRunning : theme.symbols.toolPending;
     // Nothing at all in build mode with nothing pending: the default posture is
     // not news, and a permanent word here would be furniture.
@@ -69,5 +108,5 @@ export function StatusBar(props) {
                                 ? `todo ${todoActive.done}/${todoActive.total}`
                                 : `[${todoActive.done}/${todoActive.total}]`] })), servicesActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= PROC_LIMITS.statusCompactCols
                                 ? `svc ${servicesActive.live}`
-                                : `[${servicesActive.live}]`] })), cols >= 60 && (_jsxs(Text, { color: theme.muted, children: ['  ', provider, ":", model] })), thinkingLevel !== 'off' && cols >= 72 && (_jsxs(Text, { color: theme.accent, children: ["  think:", thinkingLevel] }))] }), _jsxs(Box, { flexDirection: "row", children: [compactionActive && cols >= COMPACTION_LIMITS.statusCompactCols && (_jsxs(Text, { color: compactionActive.inFlight ? theme.accent : theme.muted, children: [compactionActive.inFlight ? 'compacting' : 'compact', '  '] })), fastActive && cols >= FAST_LIMITS.statusCompactCols && (_jsxs(Text, { color: theme.muted, children: ["fast", fastActive.inFlight ? '*' : '', '  '] })), ecoRung > 0 && cols >= ECO_MIN_COLS && (_jsxs(Text, { color: theme.muted, children: ["eco", '  '] })), scrolledLines > 0 && (_jsxs(Text, { color: theme.noticeWarn, children: [glyphs.arrowUp, scrolledLines, '  '] })), cols >= 60 && (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "[" }), _jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty }), _jsx(Text, { color: theme.muted, children: "] " })] })), _jsx(Text, { color: theme.muted, children: pctLabel }), cols >= 72 && _jsxs(Text, { color: theme.muted, children: ["  ", tokens] }), _jsxs(Text, { color: theme.muted, children: ["  ", formatCost(usageTotal.costUsd)] }), running && (_jsxs(Text, { color: theme.muted, children: [tokPerSec > 0 && cols >= 72 ? `  ${tokPerSec} tok/s` : '', "  ", formatDuration(elapsedMs)] }))] })] }));
+                                : `[${servicesActive.live}]`] })), cols >= 60 && (_jsxs(Text, { color: theme.muted, children: ['  ', provider, ":", model] })), thinkingLevel !== 'off' && cols >= 72 && (_jsxs(Text, { color: theme.accent, children: ["  think:", thinkingLevel] }))] }), _jsxs(Box, { flexDirection: "row", children: [compactionActive && cols >= COMPACTION_LIMITS.statusCompactCols && (_jsxs(Text, { color: compactionActive.inFlight ? theme.accent : theme.muted, children: [compactionActive.inFlight ? 'compacting' : 'compact', '  '] })), fastActive && cols >= FAST_LIMITS.statusCompactCols && (_jsxs(Text, { color: theme.muted, children: ["fast", fastActive.inFlight ? '*' : '', '  '] })), ecoRung > 0 && cols >= ECO_MIN_COLS && (_jsxs(Text, { color: theme.muted, children: ["eco", '  '] })), scrolledLines > 0 && (_jsxs(Text, { color: theme.noticeWarn, children: [glyphs.arrowUp, scrolledLines, '  '] })), cols >= 60 && (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "[" }), _jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty }), _jsx(Text, { color: theme.muted, children: "] " })] })), _jsx(Text, { color: theme.muted, children: pctLabel }), cols >= ABSOLUTE_PAIR_MIN_COLS && (_jsxs(Text, { color: theme.muted, children: ["  ", absolutePair] })), cols >= SESSION_TOTAL_MIN_COLS && _jsxs(Text, { color: theme.muted, children: ["  ", tokens] }), _jsxs(Text, { color: theme.muted, children: ["  ", formatCost(usageTotal.costUsd)] }), running && (_jsxs(Text, { color: theme.muted, children: [tokPerSec > 0 && cols >= 72 ? `  ${tokPerSec} tok/s` : '', "  ", formatDuration(elapsedMs)] }))] })] }));
 }

package/dist/ui/TeamPanel.d.ts

@@ -19,6 +19,7 @@
 import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
+import { type TeamPanelLayout } from './layout/team-panel.js';
 import type { SubagentRun, TeamSnapshot } from '../team/types.js';
 export interface TeamPanelProps {
     snapshot: TeamSnapshot;
@@ -35,6 +36,7 @@ export interface TeamPanelProps {
     caps: TermCapabilities;
     /** Injectable clock so the panel test does not depend on wall time. */
     now?: number;
+    layout?: TeamPanelLayout;
 }
 export declare function activityBudget(cols: number): number;
 /**
@@ -55,4 +57,4 @@ export declare function activityBudget(cols: number): number;
  * columns and break at 80.
  */
 export declare function activityLine(run: SubagentRun, cols: number): string;
-export declare function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, }: TeamPanelProps): React.ReactElement;
+export declare function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, layout, }: TeamPanelProps): React.ReactElement | null;