@pugi/cli 0.1.0-beta.5 → 0.1.0-beta.51

package/dist/tui/repl.js

@@ -26,9 +26,12 @@ import { ConversationPane } from './conversation-pane.js';
 import { InputBox } from './input-box.js';
 import { ReplSplash } from './repl-splash.js';
 import { StatusBar } from './status-bar.js';
+import { ThinkingSpinner } from './thinking-spinner.js';
 import { ToolStreamPane } from './tool-stream-pane.js';
 import { UpdateBanner } from './update-banner.js';
+import { WelcomeBanner } from './welcome-banner.js';
 import { collectWorkspaceContext } from './workspace-context.js';
+import { useTheme } from '../core/theme/context.js';
 import { slugForCwd } from '../core/repl/history.js';
 import { SLASH_COMMAND_HELP, SLASH_COMMAND_GROUPS } from '../core/repl/slash-commands.js';
 const TICK_INTERVAL_MS = 200;
@@ -56,6 +59,12 @@ export function Repl(props) {
     // Tenant block crowding the top.
     const [splashVisible, setSplashVisible] = useState(false);
     const dismissSplash = useCallback(() => setSplashVisible(false), []);
+    // CEO P0 #2 (2026-05-29): CC-style welcome banner. Visible from boot
+    // until the operator submits the first brief OR the session emits
+    // its first agent event. The host owns dismissal lifecycle (kept
+    // symmetric with the splash) so the welcome card never lingers
+    // behind а live transcript.
+    const [welcomeVisible, setWelcomeVisible] = useState(Boolean(props.welcomeData));
     // α6.14 wave 3: workspace context snapshot for the status bar. We
     // read once at mount and freeze; a brand-new PUGI.md or skill is
     // surfaced on the next REPL boot rather than via a watcher.
@@ -99,6 +108,20 @@ export function Repl(props) {
             setSplashVisible(false);
         }
     }, [splashVisible, state.agents.length, state.transcript.length]);
+    // CEO P0 #2 (2026-05-29) v2: welcome banner stays until the operator
+    // actively engages the loop — first agent spawn. Boot-time auto-init
+    // emits system rows into `state.transcript` (skip-trust hints, dirty
+    // tree warnings) which used к dismiss the banner within ~2s, hiding
+    // the brand mascot before the operator could read it. Drop the
+    // `transcript.length` trigger; agent spawn (= real dispatch) remains
+    // the sole signal that the operator stopped reading the banner.
+    useEffect(() => {
+        if (!welcomeVisible)
+            return;
+        if (state.agents.length > 0) {
+            setWelcomeVisible(false);
+        }
+    }, [welcomeVisible, state.agents.length]);
     const personaNames = useMemo(() => buildPersonaNameMap(), []);
     const { exit } = useApp();
     const handleSubmit = useCallback((line) => {
@@ -106,6 +129,10 @@ export function Repl(props) {
         // `setSplashVisible(false)` is a no-op once the state already
         // settled to false (timer fired or `agent.spawned` arrived).
         setSplashVisible(false);
+        // CEO P0 #2 (2026-05-29): same dismissal for the welcome banner
+        // — the operator engaging the input box is the cleanest signal
+        // they have finished reading the boot card.
+        setWelcomeVisible(false);
         // Run async without awaiting - the session module owns the
         // network call, errors land in the transcript automatically.
         void props.session.handleInput(line).then((verdict) => {
@@ -183,6 +210,46 @@ export function Repl(props) {
             return undefined;
         return props.session.cancel();
     }, [props.session, modalActive]);
+    // Wave 6 BT 8 (Claude Code parity): Esc-Esc walkback. Forwards to
+    // ReplSession.walkbackLastTurn which trims the trailing operator
+    // turn + its persona response from the in-memory transcript. Returns
+    // `'walked-back'` so the input box knows the host did the work;
+    // `'nothing'` covers both the empty-transcript and dispatch-in-flight
+    // refusals (the session module owns the refusal copy in both cases).
+    const handleWalkback = useCallback(() => {
+        if (modalActive)
+            return 'nothing';
+        const verdict = props.session.walkbackLastTurn();
+        return verdict === 'walked-back' ? 'walked-back' : 'nothing';
+    }, [props.session, modalActive]);
+    // Wave 7 — Shift+Tab cycles the 6 canonical permission modes (CC
+    // parity). Refuses while a modal is active so the operator does not
+    // accidentally flip mode mid-prompt; otherwise resolves the current
+    // mode through the workspace > global > default merge, advances via
+    // `nextPermissionMode`, и persists к .pugi/session.json. Returns the
+    // new mode string so the InputBox can flash a one-line toast.
+    const handleCyclePermissionMode = useCallback(() => {
+        if (modalActive)
+            return null;
+        try {
+            // Lazy-require так this code path doesn't drag the permissions
+            // module into the splash + boot stages where it isn't needed.
+            // The require is sync but the inner work is pure JSON IO.
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            const perm = require('../core/permissions/index.js');
+            const workspaceRoot = process.cwd();
+            const current = perm.resolveMode({ workspaceRoot });
+            const next = perm.nextPermissionMode(current);
+            perm.setCurrentMode(workspaceRoot, next);
+            return next;
+        }
+        catch {
+            // Persistence is best-effort — if .pugi/session.json is read-only
+            // или ENOENT-on-parent the toast is suppressed so we don't lie
+            // about the flip к the operator.
+            return null;
+        }
+    }, [modalActive]);
     // α6.14.5 CEO dogfood 2026-05-25 (parity with Claude Code): input
     // box pinned to alt-screen BOTTOM, conversation grows above it.
     // Beta.3's height={rows} fix broke keystroke focus - raw echo at
@@ -191,14 +258,25 @@ export function Repl(props) {
     // input, and the input stays the sole focusable surface adjacent
     // to the cursor row, so all keystrokes route through it.
     const altScreenRows = process.stdout.rows ?? 24;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, minHeight: altScreenRows, children: [props.updateBanner ? _jsx(UpdateBanner, { result: props.updateBanner }) : null, splashVisible ? (_jsx(ReplSplash, { cliVersion: state.cliVersion, workspaceLabel: state.workspaceLabel, plan: props.splashPlan, model: props.splashModel, tenant: props.splashTenant, onDismiss: dismissSplash, mascotPrePrinted: props.mascotPrePrinted === true })) : null, _jsx(Header, { state: state }), _jsx(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, justifyContent: "flex-end", children: overlay === 'help' ? (_jsx(HelpOverlay, {})) : overlay === 'roster' ? (_jsx(RosterOverlay, {})) : overlay === 'farewell' ? (_jsx(FarewellOverlay, {})) : (_jsx(MainArea, { state: state, personaNames: personaNames, nowEpochMs: tickNow, hideToolStream: props.hideToolStream === true, toolStreamCollapsed: toolStreamCollapsed })) }), state.pendingAsk ? (_jsx(Box, { marginTop: 1, children: _jsx(AskModal, { tag: state.pendingAsk, onResolve: handleAskResolve }) })) : null, state.pendingPlanReview ? (_jsx(Box, { marginTop: 1, children: _jsx(PlanReviewModal, { tag: state.pendingPlanReview, onResolve: handlePlanReviewResolve }) })) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [overlay === 'farewell' || modalActive ? null : (_jsx(InputBox, { onSubmit: handleSubmit, onExit: handleExit, onCancel: handleCancel, now: props.now, 
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, minHeight: altScreenRows, children: [welcomeVisible && props.welcomeData ? (_jsx(WelcomeBanner, { data: props.welcomeData, mascotPrePrinted: props.mascotPrePrinted === true, autoInitStatus: props.autoInitStatus ?? null })) : null, splashVisible ? (_jsx(ReplSplash, { cliVersion: state.cliVersion, workspaceLabel: state.workspaceLabel, plan: props.splashPlan, model: props.splashModel, tenant: props.splashTenant, onDismiss: dismissSplash, mascotPrePrinted: props.mascotPrePrinted === true })) : null, _jsx(Header, { state: state }), _jsx(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, justifyContent: "flex-end", children: overlay === 'help' ? (_jsx(HelpOverlay, {})) : overlay === 'roster' ? (_jsx(RosterOverlay, {})) : overlay === 'farewell' ? (_jsx(FarewellOverlay, {})) : (_jsx(MainArea, { state: state, personaNames: personaNames, nowEpochMs: tickNow, hideToolStream: props.hideToolStream === true, toolStreamCollapsed: toolStreamCollapsed })) }), state.pendingAsk ? (_jsx(Box, { marginTop: 1, children: _jsx(AskModal, { tag: state.pendingAsk, onResolve: handleAskResolve }) })) : null, state.pendingPlanReview ? (_jsx(Box, { marginTop: 1, children: _jsx(PlanReviewModal, { tag: state.pendingPlanReview, onResolve: handlePlanReviewResolve }) })) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [overlay === 'farewell' || modalActive ? null : (_jsx(InputBox, { onSubmit: handleSubmit, onExit: handleExit, onCancel: handleCancel, onWalkback: handleWalkback, onCyclePermissionMode: handleCyclePermissionMode, now: props.now, 
                         // Slug from process.cwd() (full path) so two workspaces with
                         // the same basename do not share history. state.workspaceLabel
                         // is the basename only. Codex review P2.
-                        workspaceSlug: slugForCwd(process.cwd()) })), _jsx(StatusBar, { connection: state.connection, activeAgentCount: countActive(state), tokensDownstreamTotal: state.tokensDownstreamTotal, briefStartedAtEpochMs: state.briefStartedAtEpochMs, nowEpochMs: tickNow, pulsePhase: pulsePhase, pugiMdCount: workspaceContext.pugiMdCount, mcpServerCount: workspaceContext.mcpServerCount, skillCount: workspaceContext.skillCount, quotaPct: props.quotaPct, dispatchState: state.dispatchState, dispatchToolLabel: state.dispatchToolLabel })] })] }));
+                        workspaceSlug: slugForCwd(process.cwd()) })), _jsx(ThinkingSpinner, { dispatchState: state.dispatchState, dispatchToolLabel: state.dispatchToolLabel }), _jsx(StatusBar, { connection: state.connection, activeAgentCount: countActive(state), tokensDownstreamTotal: state.tokensDownstreamTotal, briefStartedAtEpochMs: state.briefStartedAtEpochMs, nowEpochMs: tickNow, pulsePhase: pulsePhase, pugiMdCount: workspaceContext.pugiMdCount, mcpServerCount: workspaceContext.mcpServerCount, skillCount: workspaceContext.skillCount, quotaPct: props.quotaPct, dispatchState: state.dispatchState, dispatchToolLabel: state.dispatchToolLabel, lastCompletedOutcome: state.lastCompletedOutcome, 
+                        // α7 cost-meter sprint — surface accumulated session totals
+                        // + per-turn delta flash on the status bar's top row. The
+                        // session module owns accumulation; the bar is a pure render.
+                        sessionTokensIn: state.sessionTokensIn, sessionTokensOut: state.sessionTokensOut, sessionCostUsd: state.sessionCostUsd, sessionStartedAtEpochMs: state.sessionStartedAtEpochMs, lastTurnDelta: state.lastTurnDelta }), props.updateBanner ? _jsx(UpdateBanner, { result: props.updateBanner }) : null] })] }));
 }
 function Header({ state }) {
-    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Pugi" }), _jsx(Text, { bold: true, color: "cyan", children: ".io" }), _jsx(Text, { dimColor: true, children: `  ·  workspace: ${state.workspaceLabel}  ·  v${state.cliVersion}  ·  ` }), _jsx(Text, { color: "cyan", children: state.connection === 'on_watch' ? 'on watch' : state.connection.replace('_', ' ') })] }));
+    // Leak L30 (2026-05-27): the header `.io` brand accent + connection
+    // pill route through `useTheme()` so the operator's `/theme` flip
+    // (default / dark / light / colorblind) re-tints the chrome on
+    // re-mount. The `useTheme` hook returns the `default` preset's
+    // colors when no provider is mounted, preserving the previous
+    // `#3da9fc` constants for tests that import `<Repl />` standalone.
+    const theme = useTheme();
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Pugi" }), _jsx(Text, { bold: true, color: theme.accent, children: ".io" }), _jsx(Text, { dimColor: true, children: `  ·  workspace: ${state.workspaceLabel}  ·  v${state.cliVersion}  ·  ` }), _jsx(Text, { color: theme.accent, children: state.connection === 'on_watch' ? 'on watch' : state.connection.replace('_', ' ') })] }));
 }
 function MainArea({ state, personaNames, nowEpochMs, hideToolStream, toolStreamCollapsed, }) {
     // α6.12: three vertical panes stacked above the input box.
@@ -238,14 +316,14 @@ function HelpOverlay() {
                 const rows = grouped.get(group);
                 if (!rows || rows.length === 0)
                     return null;
-                return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: `  -- ${group} --` }), rows.map((row) => (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: `  /${row.name} ${row.args}`.padEnd(22, ' ') }), _jsx(Text, { dimColor: true, children: row.gloss })] }, row.name)))] }, group));
+                return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: `  -- ${group} --` }), rows.map((row) => (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "#3da9fc", children: `  /${row.name} ${row.args}`.padEnd(22, ' ') }), _jsx(Text, { dimColor: true, children: row.gloss })] }, row.name)))] }, group));
             }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: `${PUGI_TAGLINE}` }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: 'Press any key to dismiss.' }) })] }));
 }
 function RosterOverlay() {
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "On-watch roster" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: THE_TEN.map((persona) => (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: `  ${persona.name.padEnd(10, ' ')}` }), _jsx(Text, { dimColor: true, children: `${persona.role.padEnd(20, ' ')}` }), _jsx(Text, { children: persona.oneLiner })] }, persona.slug))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: 'Press any key to dismiss.' }) })] }));
 }
 function FarewellOverlay() {
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", paddingY: 2, children: _jsx(Text, { bold: true, color: "cyan", children: PUGI_TAGLINE }) }));
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", paddingY: 2, children: _jsx(Text, { bold: true, color: "#3da9fc", children: PUGI_TAGLINE }) }));
 }
 function applyVerdictSideEffects(verdict, handlers) {
     switch (verdict.kind) {
@@ -270,8 +348,10 @@ function applyVerdictSideEffects(verdict, handlers) {
         case 'consensus':
         case 'diff':
         case 'cost':
+        case 'quota':
         case 'status':
         case 'resume':
+        case 'mcp':
         case 'stub':
             // All non-overlay verdicts: the session module already appended
             // any operator-visible system lines (and, for `ask`, set

package/dist/tui/splash.js

@@ -21,7 +21,7 @@ export function Splash({ data }) {
             cmd: 'pugi login',
             gloss: 'Connect this terminal to your Pugi account',
         };
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: "cyan", children: "pugi.io" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `v${data.cliVersion}  ·  ${data.apiUrl}` }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Account: " }), _jsx(Text, { children: accountLine })] }), data.isAuthenticated && data.plan ? (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Plan: " }), _jsx(Text, { children: data.plan })] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Quick start:" }), _jsx(HintRow, { command: primaryHint.cmd, gloss: primaryHint.gloss }), data.isAuthenticated ? (_jsx(HintRow, { command: 'pugi login', gloss: 'Re-authenticate or switch accounts' })) : (_jsx(HintRow, { command: 'pugi code "fix the bug"', gloss: 'Run a one-shot coding task' })), _jsx(HintRow, { command: 'pugi review --triple', gloss: 'Run the Anvil triple-review gate' }), _jsx(HintRow, { command: 'pugi help', gloss: 'Full command reference' })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Docs: https://pugi.dev   \u00B7   Status: https://pugi.io/status" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: "#3da9fc", children: "pugi.io" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `v${data.cliVersion}  ·  ${data.apiUrl}` }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Account: " }), _jsx(Text, { children: accountLine })] }), data.isAuthenticated && data.plan ? (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "Plan: " }), _jsx(Text, { children: data.plan })] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Quick start:" }), _jsx(HintRow, { command: primaryHint.cmd, gloss: primaryHint.gloss }), data.isAuthenticated ? (_jsx(HintRow, { command: 'pugi login', gloss: 'Re-authenticate or switch accounts' })) : (_jsx(HintRow, { command: 'pugi code "fix the bug"', gloss: 'Run a one-shot coding task' })), _jsx(HintRow, { command: 'pugi review --triple', gloss: 'Run the Anvil triple-review gate' }), _jsx(HintRow, { command: 'pugi help', gloss: 'Full command reference' })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Docs: https://pugi.dev   \u00B7   Status: https://pugi.io/status" }) })] }));
 }
 function HintRow({ command, gloss }) {
     // Pad command names so the gloss column lines up across rows.

package/dist/tui/status-bar.js

@@ -1,5 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { formatCostUsd, formatTokens } from '../core/repl/model-pricing.js';
+/**
+ * Window during which the per-turn delta flash stays visible on the
+ * cost-meter row. CEO spec: ~2 seconds after completion. Past that, the
+ * flash dimms out and the row shows session totals only.
+ */
+const TURN_DELTA_FLASH_MS = 2_000;
 /**
  * Cyan dot glyphs across the pulse cycle. Three steps keep the motion
  * subtle - a true gradient would force an Ink rerender on every
@@ -17,8 +24,73 @@ export function StatusBar(props) {
     // first. When the connection is healthy (`on_watch` / `connecting`),
     // the FSM dispatch state takes over to show the dispatch lifecycle
     // (`dispatching` / `tool: read` / `aborting` / etc.).
-    const status = composeStatusLabel(props.connection, props.dispatchState, props.dispatchToolLabel);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: status.color, children: `${glyph ?? '●'} ${status.label}` }), _jsx(Text, { dimColor: true, children: `  ·  ${props.activeAgentCount} agents  ·  ` }), _jsx(Text, { children: `↓ ${tokenLabel} tokens` }), _jsx(Text, { dimColor: true, children: `  ·  ${elapsedLabel}` })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `${formatCount(props.pugiMdCount)} PUGI.md  ·  ${formatCount(props.mcpServerCount)} MCP  ·  ${formatCount(props.skillCount)} skills  ·  ${formatQuota(props.quotaPct)} quota` }) })] }));
+    const status = composeStatusLabel(props.connection, props.dispatchState, props.dispatchToolLabel, props.lastCompletedOutcome);
+    // α7 cost-meter sprint — the cost row anchors above the legacy
+    // dispatch-state line so the operator's eye lands on the meter first
+    // (matches Claude Code TUI footer rhythm). The session-elapsed slot
+    // uses sessionStartedAtEpochMs (REPL boot), distinct from the
+    // per-brief `elapsedLabel` on the row below.
+    const costRow = renderCostMeterRow(props.sessionTokensIn ?? 0, props.sessionTokensOut ?? 0, props.sessionCostUsd ?? 0, props.sessionStartedAtEpochMs, now);
+    const deltaFlash = renderTurnDeltaFlash(props.lastTurnDelta, now);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: `↑ ${costRow.tokensInLabel}` }), _jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { color: "cyan", children: `↓ ${costRow.tokensOutLabel}` }), _jsx(Text, { dimColor: true, children: `  ·  ` }), _jsx(Text, { bold: true, children: costRow.costLabel }), _jsx(Text, { dimColor: true, children: `  ·  ${costRow.elapsedLabel}` }), deltaFlash ? (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { color: "green", children: deltaFlash })] })) : null] }), _jsxs(Box, { children: [_jsx(Text, { color: status.color, children: `${glyph ?? '●'} ${status.label}` }), _jsx(Text, { dimColor: true, children: `  ·  ${props.activeAgentCount} agents  ·  ` }), _jsx(Text, { children: `↓ ${tokenLabel} tokens` }), _jsx(Text, { dimColor: true, children: `  ·  ${elapsedLabel}` }), typeof props.externalDispatchCount === 'number' && props.externalDispatchCount > 0 ? (_jsx(Text, { color: "yellow", children: `  ·  ${props.externalDispatchCount} dispatch${props.externalDispatchCount === 1 ? '' : 'es'} active. /cancel к manage.` })) : null] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `${formatCount(props.pugiMdCount)} PUGI.md  ·  ${formatCount(props.mcpServerCount)} MCP  ·  ${formatCount(props.skillCount)} skills  ·  ${formatQuota(props.quotaPct)} quota` }) })] }));
+}
+/**
+ * α7 cost-meter sprint — assemble the cost-meter row labels. Pure helper
+ * so the snapshot tests assert the formatted shape without standing up
+ * an Ink renderer.
+ */
+export function renderCostMeterRow(tokensIn, tokensOut, costUsd, sessionStartedAtEpochMs, nowEpochMs) {
+    const elapsedMs = typeof sessionStartedAtEpochMs === 'number'
+        ? Math.max(0, nowEpochMs - sessionStartedAtEpochMs)
+        : 0;
+    return {
+        tokensInLabel: formatTokens(tokensIn),
+        tokensOutLabel: formatTokens(tokensOut),
+        costLabel: formatCostUsd(costUsd),
+        elapsedLabel: formatElapsedShort(elapsedMs),
+    };
+}
+/**
+ * α7 cost-meter sprint — render the per-turn delta flash when the most
+ * recent turn completed within the flash window. Returns null when no
+ * turn has completed yet OR the flash has expired (the elapsed slot
+ * gets the slot back). The flash format mirrors the spec:
+ *
+ *     `+200/+1.1k +$0.01`
+ *
+ * Exported for snapshot tests.
+ */
+export function renderTurnDeltaFlash(delta, nowEpochMs) {
+    if (!delta)
+        return null;
+    const elapsedSinceMs = nowEpochMs - delta.completedAtEpochMs;
+    if (elapsedSinceMs < 0 || elapsedSinceMs > TURN_DELTA_FLASH_MS)
+        return null;
+    const inLabel = formatTokens(delta.tokensIn);
+    const outLabel = formatTokens(delta.tokensOut);
+    const costLabel = delta.costUsd > 0 ? ` +${formatCostUsd(delta.costUsd)}` : '';
+    return `+${inLabel}/+${outLabel}${costLabel}`;
+}
+/**
+ * α7 cost-meter sprint — local copy of the session elapsed formatter.
+ * Mirrors the helper in `core/repl/session.ts` so the status bar stays
+ * a pure leaf component without a circular import on session.ts (the
+ * model-pricing module's `formatDuration` is similar but ships an
+ * `XhYm` ceiling that does not match the CEO spec's `2m44s` shape).
+ */
+function formatElapsedShort(elapsedMs) {
+    if (!Number.isFinite(elapsedMs) || elapsedMs <= 0)
+        return '0s';
+    const totalSec = Math.floor(elapsedMs / 1000);
+    if (totalSec < 60)
+        return `${totalSec}s`;
+    const min = Math.floor(totalSec / 60);
+    const sec = totalSec % 60;
+    if (min < 60)
+        return `${min}m${sec.toString().padStart(2, '0')}s`;
+    const hr = Math.floor(min / 60);
+    const restMin = min % 60;
+    return `${hr}h${restMin.toString().padStart(2, '0')}m`;
 }
 /**
  * Render a count badge — number if defined, `—` placeholder otherwise.
@@ -75,7 +147,7 @@ export function connectionLabel(connection) {
  * `tool: <kind>` upstream so we just concatenate; null falls through
  * to the bare `tool` placeholder.
  */
-function composeStatusLabel(connection, dispatchState, toolLabel) {
+function composeStatusLabel(connection, dispatchState, toolLabel, lastCompletedOutcome) {
     // Transport health wins.
     if (connection === 'offline' || connection === 'reconnecting') {
         return connectionLabel(connection);
@@ -93,6 +165,16 @@ function composeStatusLabel(connection, dispatchState, toolLabel) {
         case 'awaiting_response':
             return { label: 'dispatching', color: 'cyan' };
         case 'completed':
+            // Branch on the work-done outcome so the bottom-bar tells the
+            // same truth as the agent-tree (2026-05-26 — memory
+            // feedback_no_fake_dispatch_promises). `'replied'` = text-only
+            // turn, render with the same neutral gray + arrow used in the
+            // agent-tree. `'shipped'` = real side-effect (or older server
+            // that omits the outcome field). Defaults to `'shipped'` so
+            // older callers without the prop wired stay back-compat.
+            if (lastCompletedOutcome === 'replied') {
+                return { label: 'replied', color: 'gray' };
+            }
             return { label: 'shipped', color: 'green' };
         case 'idle':
         case undefined:
@@ -111,18 +193,14 @@ function formatElapsed(startedAt, now) {
     const seconds = Math.floor((ms % 60_000) / 1000);
     return `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
 }
-/**
- * Format the downstream token counter as 1.2k / 12.4k / 1.0m. Anvil
- * F1 emits totals in the tens-of-thousands range during a single
- * brief, so anything more than three significant figures is noise.
- */
-function formatTokens(total) {
-    if (total < 1_000)
-        return total.toString();
-    if (total < 1_000_000)
-        return `${(total / 1_000).toFixed(1)}k`;
-    return `${(total / 1_000_000).toFixed(1)}m`;
-}
+// `formatTokens` for the downstream-throughput slot is imported from
+// `core/repl/model-pricing.ts` — single source of truth for token
+// formatting across the cost-meter row, `/cost` slash, and the legacy
+// downstream-tokens slot. The shape is identical to the prior local
+// helper (`<1000` raw, `<1m` one-decimal k, `≥1m` one-decimal m); the
+// only semantic difference is non-finite / negative inputs render as
+// `0` instead of throwing, matching the cost-meter row's defensive
+// posture.
 function clampPhase(phase) {
     if (typeof phase !== 'number' || Number.isNaN(phase))
         return 0;

package/dist/tui/status-table.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function StatusTable({ snapshot }) {
+    const labelWidth = Math.max('Label'.length, ...snapshot.fields.map((f) => f.label.length));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Pugi status" }) }), snapshot.fields.map((field) => (_jsxs(Box, { children: [_jsxs(Text, { children: [field.label.padEnd(labelWidth, ' '), "  "] }), field.available ? (_jsx(Text, { children: field.value })) : (_jsx(Text, { dimColor: true, children: field.value }))] }, field.key))), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["CLI ", snapshot.meta.cliVersion, "  Node ", snapshot.meta.nodeVersion, "  cwd ", snapshot.meta.cwd] }) })] }));
+}
+//# sourceMappingURL=status-table.js.map

package/dist/tui/stickers-art.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Curated ASCII pug corpus. Five variants — wide enough that repeat
+ * invocations look fresh, narrow enough that every entry stays
+ * hand-vetted (no procedural slop). Each art block intentionally fits
+ * inside an 80-column terminal so the surrounding box border does not
+ * wrap on narrow shells.
+ *
+ * The trailing newline at the end of each `art` string is intentional —
+ * keeps the renderer's join logic uniform between the boxed and the
+ * `--ascii-only` paths.
+ */
+export const PUG_STICKERS = Object.freeze([
+    {
+        id: 'classic-face',
+        caption: 'classic pug face',
+        art: [
+            '   _._     _,-\'""`-._',
+            '  (,-.`._,\'(       |\\`-/|',
+            '      `-.-\' \\ )-`( , o o)',
+            '            `-    \\`_`"\'-',
+        ].join('\n'),
+    },
+    {
+        id: 'sit-pose',
+        caption: 'sit, stay, ship',
+        art: [
+            '    /\\___/\\',
+            '   ( o   o )',
+            '   (  =^=  )',
+            '    (______)',
+        ].join('\n'),
+    },
+    {
+        id: 'peek',
+        caption: 'peek-a-pug',
+        art: [
+            '       __',
+            '   ___/  \\___',
+            '  /  o    o  \\',
+            ' |   >  ^  <  |',
+            '  \\__________/',
+        ].join('\n'),
+    },
+    {
+        id: 'sleepy',
+        caption: 'sleepy pug, no Zzz today',
+        art: [
+            '     .--.',
+            '    / -  -\\',
+            '   ( ^    ^ )',
+            '    \\  ^^  /',
+            '     `----\'',
+        ].join('\n'),
+    },
+    {
+        id: 'shipping',
+        caption: 'shipping pug',
+        art: [
+            '   .---.   .---.',
+            '   |o_o|   |o_o|',
+            '   \\_^_/   \\_^_/',
+            '   /| |\\   /| |\\',
+            '  shipped • shipped',
+        ].join('\n'),
+    },
+]);
+/**
+ * Curated rotating-quote pool. Brand voice gate (brandbook §08):
+ * `brief / dispatch / stop / agents / quit / shipped` are the power
+ * words; quotes lean on those and на the operator-mode register.
+ * Adding lines: keep each ≤ 64 chars so the boxed renderer never wraps,
+ * stay в the operator's voice, no AI attribution, no hype.
+ */
+export const PUG_QUOTES = Object.freeze([
+    'Pugi: your engineering co-pilot.',
+    'Brief it. It ships.',
+    'Built for operators, not for benchmarks.',
+    'Pugi: твой инженерный напарник.',
+    'Dispatch agents, not promises.',
+    'Small CLI. Loud workforce.',
+    'Engineering at the speed of brief.',
+    'Pugi: shipping is the default mode.',
+]);
+/**
+ * Clamp a raw rng draw to a safe array index. Handles every hostile
+ * shape the spec exercises:
+ *   - rng returns NaN → fall back to 0
+ *   - rng returns 1.0 → clamp to length-1 (Math.floor would land at n)
+ *   - rng returns -ε → clamp to 0
+ * The caller hands в the corpus length; the helper never touches the
+ * corpus itself so it stays trivially testable.
+ */
+function safeIndex(raw, length) {
+    if (!Number.isFinite(raw))
+        return 0;
+    const floored = Math.floor(raw);
+    if (floored < 0)
+        return 0;
+    if (floored >= length)
+        return length - 1;
+    return floored;
+}
+/**
+ * Pick one art variant. Defaults to `Math.random` but the caller can
+ * inject a deterministic source — the spec uses a sequence-driven
+ * stub to assert the picker hits each entry в the corpus.
+ */
+export function pickArtVariant(rng = Math.random) {
+    const raw = rng() * PUG_STICKERS.length;
+    return PUG_STICKERS[safeIndex(raw, PUG_STICKERS.length)];
+}
+/**
+ * Pick one rotating brand quote. Same contract as `pickArtVariant` —
+ * test-injectable rng so the spec can pin the chosen index.
+ */
+export function pickQuote(rng = Math.random) {
+    const raw = rng() * PUG_QUOTES.length;
+    return PUG_QUOTES[safeIndex(raw, PUG_QUOTES.length)];
+}
+/**
+ * Plain-text renderer for the `--ascii-only` flag and the non-TTY shell
+ * path. Emits the art verbatim, then a blank line, then the quote.
+ * No box border — scripting use-case (`pugi stickers --ascii-only`
+ * piped to `figlet`, `lolcat`, or a regression-fixture file) gets a
+ * stable contract free of decorative ANSI noise.
+ */
+export function renderPugStickersText(art, quote) {
+    return `${art.art}\n\n${quote}`;
+}
+export function PugStickersArt({ art, quote }) {
+    const lines = art.art.split('\n');
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Pugi stickers" }), _jsxs(Text, { dimColor: true, children: ["  \u2014 ", art.caption] })] }), _jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { children: line }, `art-${i}`))) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["\"", quote, "\""] }) })] }));
+}
+//# sourceMappingURL=stickers-art.js.map

package/dist/tui/style-table.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { OUTPUT_STYLES, OUTPUT_STYLE_SLUGS, } from '../core/output-style/presets.js';
+import { useTheme } from '../core/theme/context.js';
+/**
+ * Banner above the table. Plain text (not bold) so the prefix `*`
+ * remains the dominant active-row cue.
+ */
+function buildBanner(active, source) {
+    return `Active style: ${active} (${source})`;
+}
+export function StyleTable({ active, source }) {
+    // Leak L30 (2026-05-27): the active-row marker color flows through
+    // the theme so `colorblind` operators see cyan instead of green
+    // (which their palette re-maps to `success`). Falls back to the
+    // default theme's `success` token when no provider is mounted.
+    const theme = useTheme();
+    const slugWidth = Math.max('NAME'.length, ...OUTPUT_STYLE_SLUGS.map((slug) => slug.length));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Pugi output styles" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `  ${'NAME'.padEnd(slugWidth)}  GLOSS` }) }), OUTPUT_STYLE_SLUGS.map((slug) => (_jsx(StyleRow, { slug: slug, active: active, slugWidth: slugWidth, activeColor: theme.success }, slug))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: buildBanner(active, source) }) })] }));
+}
+function StyleRow({ slug, active, slugWidth, activeColor }) {
+    const isActive = slug === active;
+    const marker = isActive ? '*' : ' ';
+    const slugPart = slug.padEnd(slugWidth, ' ');
+    const gloss = OUTPUT_STYLES[slug].gloss;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: isActive ? activeColor : undefined, bold: isActive, children: `${marker} ${slugPart}` }), _jsx(Text, { children: `  ${gloss}` })] }));
+}
+//# sourceMappingURL=style-table.js.map

package/dist/tui/theme-table.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { compileSampleRow, THEMES, THEME_SLUGS, } from '../core/theme/presets.js';
+/**
+ * Banner above the table. Plain text (not bold) so the prefix `*`
+ * remains the dominant active-row cue. Mirrors `<StyleTable>` so the
+ * Settings-group surfaces read identically.
+ */
+function buildBanner(active, source) {
+    return `Active theme: ${active} (${source})`;
+}
+export function ThemeTable({ active, source }) {
+    const slugWidth = Math.max('NAME'.length, ...THEME_SLUGS.map((slug) => slug.length));
+    // The gloss column gets sized to the widest gloss + 2 padding so
+    // the sample column lines up. Computed once per render so the
+    // layout stays stable when the catalogue grows.
+    const glossWidth = Math.max('GLOSS'.length, ...THEME_SLUGS.map((slug) => THEMES[slug].gloss.length));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Pugi themes" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `  ${'NAME'.padEnd(slugWidth)}  ${'GLOSS'.padEnd(glossWidth)}  SAMPLE` }) }), THEME_SLUGS.map((slug) => (_jsx(ThemeRow, { slug: slug, active: active, slugWidth: slugWidth, glossWidth: glossWidth }, slug))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: buildBanner(active, source) }) })] }));
+}
+function ThemeRow({ slug, active, slugWidth, glossWidth }) {
+    const isActive = slug === active;
+    const marker = isActive ? '*' : ' ';
+    const slugPart = slug.padEnd(slugWidth, ' ');
+    const preset = THEMES[slug];
+    const gloss = preset.gloss.padEnd(glossWidth, ' ');
+    const sample = compileSampleRow(slug);
+    return (_jsxs(Box, { children: [_jsx(Text, { color: isActive ? preset.colors.accent : undefined, bold: isActive, children: `${marker} ${slugPart}` }), _jsx(Text, { children: `  ${gloss}  ` }), _jsx(Text, { color: preset.colors.foreground, children: sample.foreground }), _jsx(Text, { children: ' ' }), _jsx(Text, { color: preset.colors.accent, children: sample.accent }), _jsx(Text, { children: ' ' }), _jsx(Text, { color: preset.colors.success, children: sample.success }), _jsx(Text, { children: ' ' }), _jsx(Text, { color: preset.colors.warning, children: sample.warning }), _jsx(Text, { children: ' ' }), _jsx(Text, { color: preset.colors.error, children: sample.error })] }));
+}
+//# sourceMappingURL=theme-table.js.map