@aragon-agent/tui 0.0.0-stage → 0.0.1

package/dist/ui/AutocompletePopup.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Autocomplete popup (spec §3.6). A shared bordered suggestion menu used by both
+ * the slash-command palette and `@file` completion. Presentational only — the
+ * suggestion list, selection index, and key handling live in `PromptInput`.
+ */
+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;
+}
+interface AutocompletePopupProps {
+    items: Suggestion[];
+    selected: number;
+    theme: Theme;
+    caps: TermCapabilities;
+    maxRows?: number;
+    layout?: AutocompleteLayout;
+}
+export declare function AutocompletePopup({ items, selected, theme, caps, maxRows, layout, }: AutocompletePopupProps): React.ReactElement | null;
+export {};

package/dist/ui/AutocompletePopup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { pickGlyphs } from './glyphs.js';
+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);
+    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, wrap: "truncate", children: [_jsx(Text, { color: active ? theme.accent : theme.muted, children: active ? `${glyphs.caret} ` : '  ' }), _jsx(Text, { color: active ? undefined : theme.primary, children: item.label.replace(/\s+/g, ' ') }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint.replace(/\s+/g, ' ')] }) : null] }, idx));
+            }), showMore && _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
+}

package/dist/ui/BottomStatusRow.d.ts

@@ -0,0 +1,10 @@
+/** Renders an already allocated detail row; it never chooses visibility or animation. */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { StatusLinePlan } from './layout/status-layout.js';
+export interface BottomStatusRowProps {
+    plan: StatusLinePlan;
+    columns: number;
+    theme: Theme;
+}
+export declare function BottomStatusRow({ plan, columns, theme }: BottomStatusRowProps): React.ReactElement;

package/dist/ui/BottomStatusRow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Renders an already allocated detail row; it never chooses visibility or animation. */
+import React from 'react';
+import { Box, Text } from 'ink';
+export function BottomStatusRow({ plan, columns, theme }) {
+    const tones = { normal: theme.primary, muted: theme.muted, warning: theme.noticeWarn, error: theme.noticeError,
+        accent: theme.accent, govern: theme.governAccent };
+    return _jsxs(Box, { height: 1, width: columns, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { children: " " }) }), plan.fields.map((field, index) => _jsxs(React.Fragment, { children: [index > 0 && _jsx(Box, { width: plan.separatorCells, flexShrink: 0, children: _jsx(Text, { color: theme.muted, children: plan.separator }) }), _jsx(Box, { width: field.cells, flexShrink: 0, children: _jsx(Text, { wrap: "truncate", color: tones[field.tone], children: field.text }) })] }, field.id))] });
+}

package/dist/ui/Composer.d.ts

@@ -0,0 +1,115 @@
+/** Input border and draft shell. Global action hints and activity live below the viewport. */
+import React from 'react';
+import { type DOMElement } from 'ink';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+import { pickGlyphs } from './glyphs.js';
+import type { ComposerSubmitResult } from './composer-input.js';
+import { type CommandOption, type DraftFill } from './PromptInput.js';
+import type { RunActivity } from './run-status-row.js';
+import { type AgentMode } from '../model/agent/agent-mode.js';
+/** Legacy caller shape retained for source compatibility; Composer no longer mounts it. */
+export interface RunRowProps {
+    activity: RunActivity;
+    /** The row is in the viewport with no overlay: draw the animated spinner. */
+    live: boolean;
+    /** Measured by `ScrollViewport` to learn whether the row has scrolled away. */
+    rowRef?: React.RefObject<DOMElement>;
+}
+export interface ComposerProps {
+    /** Compatibility prop; activity is now rendered by the global StatusBar. */
+    runRow?: RunRowProps | null;
+    cols?: number;
+    terminalRows?: number;
+    statusExpanded?: boolean;
+    deleteDisambiguated?: boolean;
+    onCompletionContextChange?: (context: 'none' | 'slash' | 'file') => void;
+    cursorVisible?: boolean;
+    onInteraction?: () => void;
+    measureRef?: React.RefObject<DOMElement>;
+    /** False while an overlay owns the keyboard (the input is visually blurred). */
+    isActive: boolean;
+    reducedMotion?: boolean;
+    onEscape?: () => void;
+    onEscapeDismiss?: () => void;
+    running: boolean;
+    history: string[];
+    commands: CommandOption[];
+    cwd: string;
+    /** Dropped on short terminals to buy back a row (§5.4). */
+    showHint: boolean;
+    /** Compatibility prop; submission count no longer hides essential actions. */
+    submitCount: number;
+    /** Compatibility prop; App owns secondary teaching-hint visibility. */
+    hintsEnabled: boolean;
+    /** Mirror of the controller's effective mode; drives the border. */
+    agentMode: AgentMode;
+    /**
+     * The adopted posture (governance-mode 10.2). A governed one paints the idle/draft
+     * border in `governAccent`, the same slot PLAN uses `accent` for. Absent = the
+     * pre-governance border logic, unchanged.
+     */
+    posture?: string;
+    /** Compatibility prop; the global action row names the effective mode key. */
+    modeToggleKey?: string;
+    popupMaxRows?: number;
+    popupMaxHeight?: number;
+    onPopupRowsChange?: (rows: number) => void;
+    /** Compatibility prop; history position is displayed by Header. */
+    scrolledLines?: number;
+    /** Compatibility prop; the global status and action rows show live services. */
+    services?: number;
+    /**
+     * The composer's DRAFT row count, forwarded upward (tui-paste-handling
+     * section 5.5).
+     *
+     * `hasDraft` stays here, because the border reacts to it and routing that
+     * through `App` would re-render the transcript on the first keystroke of every
+     * message. The row count is the opposite case: `layout/budget.ts` needs it, so
+     * it has to reach `App` — and it changes on a line break rather than on a
+     * character, which is what keeps the re-render rate the same (R-6).
+     */
+    onDraftRows?: (rows: number) => void;
+    /**
+     * Draft PRESENCE, forwarded upward for the Ctrl+C ladder
+     * (ctrl-c-clear-draft-exit). App stores it in a ref only - no state,
+     * so the transcript does not re-render on the first keystroke of a
+     * message (the same cost the comment above documents).
+     */
+    onDraftPresence?: (hasDraft: boolean) => void;
+    /**
+     * Downward half of the same channel: ticks when App asks the editor
+     * to clear the draft (Ctrl+C x2 while drafting). Passed through to
+     * PromptInput unchanged.
+     */
+    draftClearNonce?: number;
+    /** Downward half of the fill channel; forwarded to `PromptInput` unchanged. */
+    draftFill?: DraftFill;
+    /** `prompts.insertMode`, forwarded unchanged. */
+    insertMode?: 'insert' | 'replace';
+    /** Paste refusals from `PromptInput`, routed to `App`'s notice dispatch. */
+    onNotice?: (level: 'warn' | 'error', text: string) => void;
+    theme: Theme;
+    caps: TermCapabilities;
+    onSubmit: (text: string) => ComposerSubmitResult;
+    onHelp?: () => void;
+}
+/** Legacy helper retained for consumers and contract tests; not rendered by Composer. */
+export declare function runningHintClauses(opts: {
+    glyphs: ReturnType<typeof pickGlyphs>;
+    services: number;
+}): string[];
+/** Compatibility formatter. Product hints use interaction-hints.ts. */
+declare function hintText(opts: {
+    running: boolean;
+    submitCount: number;
+    glyphs: ReturnType<typeof pickGlyphs>;
+    mode: AgentMode;
+    toggleKey: string;
+    /** Live background services; 0 leaves both rows byte-identical to today's. */
+    services: number;
+}): string;
+/** Compatibility export for existing hint contract tests. */
+export declare const hintTextForTest: typeof hintText;
+export declare function Composer({ deleteDisambiguated, onCompletionContextChange, cols, terminalRows, statusExpanded, cursorVisible, onInteraction, measureRef, isActive, reducedMotion, onEscape, onEscapeDismiss, running, history, commands, cwd, agentMode, posture, popupMaxRows, popupMaxHeight, onPopupRowsChange, onDraftRows, onDraftPresence, draftClearNonce, draftFill, insertMode, onNotice, theme, caps, onSubmit, onHelp, }: ComposerProps): React.ReactElement;
+export {};

package/dist/ui/Composer.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Input border and draft shell. Global action hints and activity live below the viewport. */
+import { useCallback, useState } from 'react';
+import { Box } from 'ink';
+import { HINT_FADE_AFTER } from '../model/config/schema.js';
+import { PromptInput } from './PromptInput.js';
+import { MODE_LABEL, nextMode } from '../model/agent/agent-mode.js';
+import { isGovernedModeValue } from './governance-status.js';
+/** Legacy helper retained for consumers and contract tests; not rendered by Composer. */
+export function runningHintClauses(opts) {
+    const { glyphs, services } = opts;
+    const clauses = [`${glyphs.enterKey} queue`, `esc${glyphs.times}2 interrupt`];
+    if (services > 0)
+        clauses.push(`ctrl+c stop ${services}`);
+    clauses.push(`ctrl+c${glyphs.times}2 exit`);
+    return clauses;
+}
+/** Compatibility formatter. Product hints use interaction-hints.ts. */
+function hintText(opts) {
+    const { running, submitCount, glyphs, mode, toggleKey, services } = opts;
+    const dot = ` ${glyphs.midDot} `;
+    if (running)
+        return runningHintClauses({ glyphs, services }).join(dot);
+    const toggle = `${toggleKey} ${MODE_LABEL[nextMode(mode)].toLowerCase()}`;
+    const stop = services > 0 ? [`ctrl+c stop ${services}`] : [];
+    if (submitCount >= HINT_FADE_AFTER)
+        return [...stop, toggle, '? help'].join(dot);
+    return [
+        ...stop,
+        `${glyphs.enterKey} send`,
+        `${glyphs.shiftEnter} newline`,
+        '/ commands',
+        '@ files',
+        toggle,
+        '? help',
+    ].join(dot);
+}
+/** Compatibility export for existing hint contract tests. */
+export const hintTextForTest = hintText;
+export function Composer({ deleteDisambiguated, onCompletionContextChange, cols, terminalRows, statusExpanded, cursorVisible, onInteraction, measureRef, isActive, reducedMotion, onEscape, onEscapeDismiss, running, history, commands, cwd, agentMode, posture, popupMaxRows, popupMaxHeight, onPopupRowsChange, onDraftRows, onDraftPresence, draftClearNonce, draftFill, insertMode, onNotice, theme, caps, onSubmit, onHelp, }) {
+    const [hasDraft, setHasDraft] = useState(false);
+    const onDraftChange = useCallback((next) => {
+        setHasDraft(next.hasDraft);
+        // Presence FIRST: the App ref must be current before the row-count
+        // report below can trigger the App render that reads it.
+        onDraftPresence?.(next.hasDraft);
+        onDraftRows?.(next.rows);
+    }, [onDraftPresence, onDraftRows]);
+    // Plan mode inserts ONE branch, above `draft` and below `running`. The
+    // ordering is load-bearing: an in-flight run's border must stay `toolRunning`,
+    // because "is it running" is more urgent than "which mode".
+    const borderColor = !isActive
+        ? theme.toolPending
+        : running
+            ? theme.toolRunning
+            : isGovernedModeValue(posture)
+                ? theme.governAccent
+                : agentMode === 'plan'
+                    ? theme.accent
+                    : hasDraft
+                        ? theme.focusBorder ?? theme.primary
+                        : theme.idleBorder ?? theme.border;
+    return (_jsx(Box, { ref: measureRef, width: cols, flexDirection: "column", flexShrink: 0, children: _jsx(PromptInput, { deleteDisambiguated: deleteDisambiguated, onCompletionContextChange: onCompletionContextChange, cols: cols, terminalRows: terminalRows, statusExpanded: statusExpanded, cursorVisible: cursorVisible, onInteraction: onInteraction, isActive: isActive, reducedMotion: reducedMotion, onEscape: onEscape, onEscapeDismiss: onEscapeDismiss, running: running, history: history, commands: commands, cwd: cwd, theme: theme, caps: caps, popupMaxRows: popupMaxRows, popupMaxHeight: popupMaxHeight, onPopupRowsChange: onPopupRowsChange, onSubmit: onSubmit, onHelp: onHelp, agentMode: agentMode, borderColor: borderColor, onDraftChange: onDraftChange, draftClearNonce: draftClearNonce, draftFill: draftFill, insertMode: insertMode, onNotice: onNotice }) }));
+}

package/dist/ui/GovernancePanel.d.ts

@@ -0,0 +1,50 @@
+/**
+ * GovernancePanel - the legion panel (governance-mode section 10.3).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`, through the layout.
+ *
+ * THIS COMPONENT ONLY COLOURS AND PLACES. Every decision - which tier, which columns, how
+ * wide, what each cell says, which row is hidden - was made by
+ * `layout/governance-panel.ts`, and the `layout` prop is REQUIRED: `App` builds it once to
+ * learn the panel's height (the native band and the TODO rail both budget against it) and
+ * hands the very same object here, so the number that decides whether the panel mounts is
+ * the number it is drawn from. A panel that re-planned itself could draw a taller tier than
+ * the one the band reserved, and the band clips the overflow in silence.
+ *
+ * IT REPLACES `TeamPanel` WHILE A GOVERNED STAGE RUNS (D-17), it does not stack with it:
+ * the repo has been bitten by a "double roster" once (tui-subagent-double-roster), and a
+ * governed dispatch is the one case where two live rosters would be the same children
+ * listed twice.
+ *
+ * NO `ink-spinner` HERE, on purpose. While a governed stage runs the lead's turn is
+ * running, the activity row owns the one spinner (single-spinner-while-running), and every
+ * panel is handed the widened reduced-motion signal anyway - an animation here would never
+ * play. The working marker is `statusGlyph(...)`, and `reducedMotion` is the USER's
+ * preference: it only decides whether a score change flashes for four seconds or stays put.
+ *
+ * COLUMNS ARE FIXED-WIDTH BOXES with exactly one elastic cell (`governance-roster.ts`), the
+ * lesson `TeamPanel` records at length: a flex-grown column under a fixed-height parent
+ * stretches to its widest child and the cells to its right lose their offsets.
+ */
+import React from 'react';
+import type { GovernanceSnapshot } from '../model/governance/types.js';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+import { type EliminatedSince } from './governance-status.js';
+import type { GovernancePanelLayout } from './layout/governance-panel.js';
+/**
+ * The first-seen-eliminated map, kept across snapshots so a replaced member shows its
+ * `replaced by ...` note for exactly one phase. Reset when the run changes or ends.
+ *
+ * A ref written during render is acceptable here because the write is idempotent
+ * (`trackEliminated` returns the same object when nothing is new) and no other component
+ * reads the ref - `App` reads only the returned value.
+ */
+export declare function useEliminatedSince(snapshot: GovernanceSnapshot | null): EliminatedSince;
+export interface GovernancePanelProps {
+    /** Built by `buildGovernancePanelLayout`; the SAME object `App` read the height from. */
+    layout: GovernancePanelLayout;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+export declare function GovernancePanel({ layout, theme, caps }: GovernancePanelProps): React.ReactElement | null;

package/dist/ui/GovernancePanel.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * GovernancePanel - the legion panel (governance-mode section 10.3).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`, through the layout.
+ *
+ * THIS COMPONENT ONLY COLOURS AND PLACES. Every decision - which tier, which columns, how
+ * wide, what each cell says, which row is hidden - was made by
+ * `layout/governance-panel.ts`, and the `layout` prop is REQUIRED: `App` builds it once to
+ * learn the panel's height (the native band and the TODO rail both budget against it) and
+ * hands the very same object here, so the number that decides whether the panel mounts is
+ * the number it is drawn from. A panel that re-planned itself could draw a taller tier than
+ * the one the band reserved, and the band clips the overflow in silence.
+ *
+ * IT REPLACES `TeamPanel` WHILE A GOVERNED STAGE RUNS (D-17), it does not stack with it:
+ * the repo has been bitten by a "double roster" once (tui-subagent-double-roster), and a
+ * governed dispatch is the one case where two live rosters would be the same children
+ * listed twice.
+ *
+ * NO `ink-spinner` HERE, on purpose. While a governed stage runs the lead's turn is
+ * running, the activity row owns the one spinner (single-spinner-while-running), and every
+ * panel is handed the widened reduced-motion signal anyway - an animation here would never
+ * play. The working marker is `statusGlyph(...)`, and `reducedMotion` is the USER's
+ * preference: it only decides whether a score change flashes for four seconds or stays put.
+ *
+ * COLUMNS ARE FIXED-WIDTH BOXES with exactly one elastic cell (`governance-roster.ts`), the
+ * lesson `TeamPanel` records at length: a flex-grown column under a fixed-height parent
+ * stretches to its widest child and the cells to its right lose their offsets.
+ */
+import { useRef } from 'react';
+import { Box, Text } from 'ink';
+import { pickGlyphs } from './glyphs.js';
+import { trackEliminated } from './governance-status.js';
+import { GovernanceLine } from './GovernanceRun.js';
+import { PANEL_MARGIN_CELLS, } from './layout/governance-roster.js';
+/**
+ * The first-seen-eliminated map, kept across snapshots so a replaced member shows its
+ * `replaced by ...` note for exactly one phase. Reset when the run changes or ends.
+ *
+ * A ref written during render is acceptable here because the write is idempotent
+ * (`trackEliminated` returns the same object when nothing is new) and no other component
+ * reads the ref - `App` reads only the returned value.
+ */
+export function useEliminatedSince(snapshot) {
+    const ref = useRef({ runId: null, since: {} });
+    if (snapshot === null) {
+        if (ref.current.runId !== null)
+            ref.current = { runId: null, since: {} };
+        return ref.current.since;
+    }
+    const base = ref.current.runId === snapshot.runId ? ref.current.since : {};
+    ref.current = { runId: snapshot.runId, since: trackEliminated(base, snapshot) };
+    return ref.current.since;
+}
+function Margin() {
+    return (_jsx(Box, { width: PANEL_MARGIN_CELLS, flexShrink: 0, children: _jsx(Text, { children: " " }) }));
+}
+function LineView({ line, theme }) {
+    return (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Margin, {}), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(GovernanceLine, { segments: line.left, theme: theme }) }), line.rightCells > 0 && (_jsx(Box, { width: line.rightCells, flexShrink: 0, justifyContent: "flex-end", children: _jsx(GovernanceLine, { segments: line.right, theme: theme }) }))] }));
+}
+function CellView({ cell, theme }) {
+    const content = _jsx(GovernanceLine, { segments: cell.segments, theme: theme });
+    if (cell.elastic) {
+        return _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: content });
+    }
+    return (_jsx(Box, { width: cell.width, flexShrink: 0, overflow: "hidden", justifyContent: cell.align === 'right' ? 'flex-end' : 'flex-start', children: content }));
+}
+function RosterView({ line, theme }) {
+    return (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Margin, {}), line.cells.map((cell) => (_jsx(CellView, { cell: cell, theme: theme }, cell.key)))] }));
+}
+export function GovernancePanel({ layout, theme, caps }) {
+    if (layout.height === 0 || layout.header === null)
+        return null;
+    const glyphs = pickGlyphs(caps);
+    const rule = layout.ruleCells > 0 ? (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Margin, {}), _jsx(Text, { wrap: "truncate", color: theme.border, children: glyphs.hrule.repeat(layout.ruleCells) })] })) : null;
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", flexShrink: 0, children: [_jsx(LineView, { line: layout.header, theme: theme }), layout.pipeline !== null && _jsx(LineView, { line: layout.pipeline, theme: theme }), rule, layout.rosterRows.map((line) => (_jsx(RosterView, { line: line, theme: theme }, line.key))), layout.overflow !== null && (_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Margin, {}), _jsx(Text, { wrap: "truncate", color: theme.muted, children: layout.overflow })] })), rule, layout.ticker.map((line, index) => (_jsx(LineView, { line: line, theme: theme }, `ticker-${index}`)))] }));
+}

package/dist/ui/GovernanceRun.d.ts

@@ -0,0 +1,18 @@
+/**
+ * GovernanceRun - paints one `Segment[]` run: the single place a governance layout's
+ * semantic tones become Ink colours.
+ *
+ * ASCII ONLY. The panel, the card and the board all draw the same `Segment` vocabulary,
+ * and three private copies of this loop is how their bold / tone handling drifts apart.
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import { type Segment } from './governance-status.js';
+export interface GovernanceRunProps {
+    segments: readonly Segment[];
+    theme: Theme;
+}
+/** The segments as nested `Text`; the CALLER owns wrapping and truncation. */
+export declare function GovernanceRun({ segments, theme }: GovernanceRunProps): React.ReactElement;
+/** One display row: the run inside a `wrap="truncate"` `Text`, so it can never wrap. */
+export declare function GovernanceLine({ segments, theme }: GovernanceRunProps): React.ReactElement;

package/dist/ui/GovernanceRun.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { toneColor } from './governance-status.js';
+/** The segments as nested `Text`; the CALLER owns wrapping and truncation. */
+export function GovernanceRun({ segments, theme }) {
+    return (_jsx(_Fragment, { children: segments.map((part, index) => (_jsx(Text, { color: toneColor(part.tone, theme), ...(part.bold ? { bold: true } : {}), children: part.text }, index))) }));
+}
+/** One display row: the run inside a `wrap="truncate"` `Text`, so it can never wrap. */
+export function GovernanceLine({ segments, theme }) {
+    return (_jsx(Text, { wrap: "truncate", children: _jsx(GovernanceRun, { segments: segments, theme: theme }) }));
+}

package/dist/ui/Header.d.ts

@@ -0,0 +1,48 @@
+/**
+ * One-row brand bar: word mark, identity, working directory, task summary and a
+ * fixed-width hint column (tui-shortcut-drawer-and-task-summary §4.2 / §4.3).
+ *
+ * THIS COMPONENT COMPUTES NO WIDTHS ANY MORE. Both halves come from pure
+ * planners - `planHeaderHints` for the right column and `planHeaderLeft` for the
+ * clause ladder - so the only arithmetic left here is "join what I was given".
+ * The old shape carried a `statusExpanded` flag, a kit switch and a prompts
+ * switch, all of which existed to choose between header clauses; the clauses are
+ * gone (the drawer lists the keys instead), so the props are gone with them.
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+import { type HeaderVariant } from './Logo.js';
+import { type HeaderPanelState } from './layout/header-hints.js';
+interface HeaderProps {
+    cwd: string;
+    provider: string;
+    model: string;
+    hasKey: boolean;
+    variant: HeaderVariant;
+    theme: Theme;
+    caps: TermCapabilities;
+    columns?: number;
+    /**
+     * What the right column says. Derived in ONE place - the line that renders
+     * `<Header>` - so the two overlay slots cannot disagree about it.
+     */
+    panel?: HeaderPanelState;
+    scrolledLines?: number;
+    /**
+     * The session's task label, or `null` while there is none.
+     *
+     * `null` WHILE PENDING TOO: a placeholder here would spend eight columns of the
+     * row to draw an ellipsis and then move everything back when the label lands,
+     * so the first submit visibly jogged the header. The label now appears once,
+     * complete (P2-10).
+     */
+    taskSummary?: {
+        text: string;
+        tone: 'model' | 'fallback';
+    } | null;
+    /** `config.taskSummary.enabled`; `false` removes the cell without removing the words. */
+    summaryEnabled?: boolean;
+}
+export declare function Header({ cwd, provider, model, hasKey, variant, theme, caps, columns, panel, scrolledLines, taskSummary, summaryEnabled, }: HeaderProps): React.ReactElement;
+export {};

package/dist/ui/Header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { basename } from 'node:path';
+import { Box, Text } from 'ink';
+import { Logo } from './Logo.js';
+import { pickGlyphs } from './glyphs.js';
+import { planHeaderHints, HEADER_HINT_LIMITS, } from './layout/header-hints.js';
+import { planHeaderLeft } from './layout/header-left.js';
+export function Header({ cwd, provider, model, hasKey, variant, theme, caps, columns = 80, panel = 'none', scrolledLines = 0, taskSummary = null, summaryEnabled = true, }) {
+    const glyphs = pickGlyphs(caps);
+    // THE RIGHT COLUMN FIRST: it is the only clause that may never be dropped, so
+    // the left half is planned against what is left after it (defect 12).
+    const plan = planHeaderHints({ columns, panel, scrolledLines });
+    const leftCells = Math.max(0, columns - plan.cells - HEADER_HINT_LIMITS.separatorCells);
+    const left = planHeaderLeft({
+        leftCells,
+        provider,
+        model,
+        cwd: basename(cwd) || cwd,
+        hasKey,
+        summary: taskSummary,
+        summaryEnabled,
+        ellipsis: glyphs.ellipsis,
+    });
+    return _jsxs(Box, { flexDirection: "row", height: 1, width: columns, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { width: leftCells, flexShrink: 0, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", children: [_jsx(Logo, { variant: variant === 'mini' ? 'mini' : 'bar', theme: theme, caps: caps }), variant !== 'mini' && _jsxs(_Fragment, { children: [left.text.model && _jsxs(Text, { color: theme.accent, children: ['  ', left.text.model] }), left.text.cwd && _jsxs(Text, { color: theme.muted, children: ['  ', left.text.cwd] }), left.text.summary && _jsxs(Text, { color: theme.muted, children: ['  ', glyphs.midDot, ' '] }), left.text.summary && (taskSummary?.tone === 'fallback'
+                                    ? _jsx(Text, { color: theme.muted, dimColor: true, children: left.text.summary })
+                                    : _jsx(Text, { color: theme.primary, children: left.text.summary })), _jsxs(Text, { color: hasKey ? theme.toolDone : theme.toolRunning, children: ['  ', hasKey ? theme.symbols.keyOn : theme.symbols.keyOff] })] })] }) }), _jsx(Box, { width: HEADER_HINT_LIMITS.separatorCells, flexShrink: 0 }), _jsx(Box, { width: plan.cells, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { color: theme.muted, wrap: "truncate", children: plan.text }) })] });
+}

package/dist/ui/Logo.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Brand wordmark (spec §5.1 / R1). The first row of the frame always starts
+ * with a brand glyph, at every terminal size and every capability tier.
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+/** 6 rows × 52 columns, every row equal width (pinned by logo.test.ts). */
+export declare const LOGO_ART: readonly string[];
+export declare const LOGO_ART_WIDTH = 52;
+export type HeaderVariant = 'bar' | 'mini';
+/** How the one-off opening wordmark renders inside the viewport (§4.2). */
+export type OpenerVariant = 'art' | 'banner' | 'none';
+export declare function pickHeaderVariant(cols: number): HeaderVariant;
+/**
+ * Pick the opening wordmark tier.
+ *
+ * Judged against VIEWPORT rows rather than terminal rows because the wordmark
+ * now spends the viewport's budget, not the frame's: the test has to be against
+ * the account being charged.
+ *
+ * Color preferences must not change geometry: a monochrome TUI gets the same
+ * wordmark as a colored one when there is room for it.
+ */
+export declare function pickOpenerVariant(viewportRows: number, cols: number): OpenerVariant;
+export interface LogoProps {
+    /** `art` / `banner` come from `SessionOpener`; `bar` / `mini` from `Header`. */
+    variant: HeaderVariant | OpenerVariant;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+export declare function Logo({ variant, theme, caps }: LogoProps): React.ReactElement | null;

package/dist/ui/Logo.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { gradientLine } from './gradient.js';
+/** 6 rows × 52 columns, every row equal width (pinned by logo.test.ts). */
+export const LOGO_ART = [
+    ' █████╗ ██████╗  █████╗  ██████╗  ██████╗ ███╗   ██╗',
+    '██╔══██╗██╔══██╗██╔══██╗██╔════╝ ██╔═══██╗████╗  ██║',
+    '███████║██████╔╝███████║██║  ███╗██║   ██║██╔██╗ ██║',
+    '██╔══██║██╔══██╗██╔══██║██║   ██║██║   ██║██║╚██╗██║',
+    '██║  ██║██║  ██║██║  ██║╚██████╔╝╚██████╔╝██║ ╚████║',
+    '╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝',
+];
+export const LOGO_ART_WIDTH = 52;
+/** Minimum viewport rows / cols each tier needs before it earns its budget. */
+const ART_MIN_VIEWPORT_ROWS = 14;
+/**
+ * 4 columns of headroom on purpose: the art renders with `wrap="truncate"`, so
+ * at zero headroom anything upstream claiming a single column silently shears
+ * the right edge off the `N`. Between `LOGO_ART_WIDTH` and this threshold the
+ * opener degrades to `banner`, which is the intended fallback (rename C2).
+ */
+const ART_MIN_COLS = LOGO_ART_WIDTH + 4;
+const BANNER_MIN_COLS = 48;
+const BAR_MIN_COLS = 40;
+export function pickHeaderVariant(cols) {
+    return cols >= BAR_MIN_COLS ? 'bar' : 'mini';
+}
+/**
+ * Pick the opening wordmark tier.
+ *
+ * Judged against VIEWPORT rows rather than terminal rows because the wordmark
+ * now spends the viewport's budget, not the frame's: the test has to be against
+ * the account being charged.
+ *
+ * Color preferences must not change geometry: a monochrome TUI gets the same
+ * wordmark as a colored one when there is room for it.
+ */
+export function pickOpenerVariant(viewportRows, cols) {
+    if (viewportRows >= ART_MIN_VIEWPORT_ROWS &&
+        cols >= ART_MIN_COLS) {
+        return 'art';
+    }
+    if (cols >= BANNER_MIN_COLS)
+        return 'banner';
+    return 'none';
+}
+/** Rotate the gradient stops by one per row so the block reads as a diagonal sheen. */
+function shiftStops(stops, row) {
+    if (stops.length === 0)
+        return stops;
+    const at = row % stops.length;
+    return [...stops.slice(at), ...stops.slice(0, at)];
+}
+export function Logo({ variant, theme, caps }) {
+    const wordmark = `${theme.symbols.wordmark} AragonAgent`;
+    if (variant === 'none')
+        return null;
+    if (variant === 'art') {
+        return (_jsx(_Fragment, { children: LOGO_ART.map((line, i) => (_jsx(Text, { wrap: "truncate", color: theme.gradient.length > 0 ? undefined : theme.logoShadow, children: gradientLine(line, shiftStops(theme.gradient, i), caps.colorLevel) }, i))) }));
+    }
+    if (variant === 'banner') {
+        return (_jsx(Text, { wrap: "truncate", bold: true, color: theme.gradient.length > 0 ? undefined : theme.primary, children: gradientLine(wordmark, theme.gradient, caps.colorLevel) }));
+    }
+    return (_jsx(Text, { bold: true, color: theme.primary, children: wordmark }));
+}

package/dist/ui/Markdown.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Lightweight markdown renderer for Ink (spec §4 / §4.7).
+ *
+ * Supports: fenced code blocks (syntax-highlighted via cli-highlight, on a left
+ * rail with a language tag), six DISTINCT heading weights, horizontal rules,
+ * unordered/ordered lists, blockquotes, pipe tables, and inline **bold** /
+ * *italic* / `code` / ~~strike~~. Anything else renders as plain text. Still
+ * intentionally small — not a CommonMark implementation.
+ *
+ * The grammar lives in `markdown-blocks.ts`; this file only renders. That was
+ * true of the file header long before it was true of the file
+ * (tui-render-performance R2): the block grammar used to run here, in the render
+ * body, on every frame. Both expensive halves are now memoised on the input
+ * string — `parseMarkdownCached` for the AST, `highlightCached` for the ANSI —
+ * while theme and glyphs stay render-time, so `/theme` still takes effect
+ * immediately (K-5).
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+interface MarkdownProps {
+    text: string;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+export declare function Markdown({ text, theme, caps }: MarkdownProps): React.ReactElement;
+/** Turn parsed inline spans into Ink `<Text>` nodes. */
+export declare function renderInline(text: string, theme: Theme): React.ReactNode;
+export {};