@pugi/cli 0.1.0-beta.7 → 0.1.0-beta.87

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
@@ -12,13 +19,78 @@ export function StatusBar(props) {
     const tokenLabel = formatTokens(props.tokensDownstreamTotal);
     const phase = clampPhase(props.pulsePhase);
     const glyph = PULSE_DOTS[Math.min(phase, PULSE_DOTS.length - 1)] ?? PULSE_DOTS[0];
-    // α6.9: composite status label — connection problems trump dispatch
+    // : composite status label — connection problems trump dispatch
     // state because the operator needs to know about a dropped admin-api
     // 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);
+    // cost-meter sprint — the cost row anchors above the legacy
+    // dispatch-state line so the operator's eye lands on the meter first
+    // (matches the upstream tool 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` }) })] }));
+}
+/**
+ * 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),
+    };
+}
+/**
+ * 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}`;
+}
+/**
+ * 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.
@@ -53,29 +125,29 @@ export function connectionLabel(connection) {
     }
 }
 /**
- * α6.9: compose the visible status label from connection + FSM state.
+ * : compose the visible status label from connection + FSM state.
  *
  * Priority order:
  *
- *   1. `offline` / `reconnecting` — transport health wins; the
- *      operator needs to know about a dropped stream before anything
- *      about the dispatch.
- *   2. `aborting` / `aborted` / `failed` — operator-visible terminal
- *      states the FSM reached; the colour shifts to amber/red so the
- *      anomaly stands out vs the calm cyan baseline.
- *   3. `tool_running` — surfaces the tool label when available
- *      (`tool: read`), falls back to `tool` when not.
- *   4. `awaiting_response` — `dispatching` (matches Codex CLI's verb
- *      for the same state).
- *   5. `completed` — `shipped` (matches the agent tree status glyph
- *      so the operator's eye links the two surfaces).
- *   6. `idle` / unknown — connection label (`on watch` / `connecting`).
+ *  1. `offline` / `reconnecting` — transport health wins; the
+ *     operator needs to know about a dropped stream before anything
+ *     about the dispatch.
+ *  2. `aborting` / `aborted` / `failed` — operator-visible terminal
+ *     states the FSM reached; the colour shifts to amber/red so the
+ *     anomaly stands out vs the calm cyan baseline.
+ *  3. `tool_running` — surfaces the tool label when available
+ *     (`tool: read`), falls back to `tool` when not.
+ *  4. `awaiting_response` — `dispatching` (matches Codex CLI's verb
+ *     for the same state).
+ *  5. `completed` — `shipped` (matches the agent tree status glyph
+ *     so the operator's eye links the two surfaces).
+ *  6. `idle` / unknown — connection label (`on watch` / `connecting`).
  *
  * The dispatch label `dispatchToolLabel` is already shaped as
  * `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 }) {
+    // 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

package/dist/tui/thinking-spinner.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Thinking spinner — animated dispatch indicator (CEO P0 #2).
+ *
+ * Replaces the static `dispatching` / `tool: <name>` strings the bottom
+ * status row used к paint during active brief dispatch with а Claude-
+ * Code-style rotating verb + glyph pair:
+ *
+ *    ✽ Briefing…      (awaiting_response, before the first tool call)
+ *    ◆ Dispatching…   (awaiting_response, после the first tool call)
+ *    ◇ Reviewing…     (tool_running)
+ *    ✦ Synthesizing…  (awaiting_response, late in turn)
+ *    ❋ Shipping…      (tool_running, edit/write/build family tool)
+ *
+ * The rotation cadence is ~800 ms per step so the verb feels alive but
+ * never strobes. The component owns its own timer (cleared on unmount)
+ * и takes the active dispatch state + the optional tool label so the
+ * "Shipping…" branch can light up specifically для write-class tools.
+ *
+ * Mount lifecycle: the REPL renders `<ThinkingSpinner />` only while
+ * `dispatchState` ∈ {`awaiting_response`, `tool_running`}. The
+ * status-bar's legacy `composeStatusLabel` row stays mounted too — they
+ * are not mutually exclusive — but the spinner row sits above the
+ * status row так the operator's eye lands on the live signal first.
+ *
+ * Brand discipline:
+ *  - Verbs from the approved power-words list: `Briefing`,
+ *    `Dispatching`, `Reviewing`, `Synthesizing`, `Shipping`. No
+ *    `Thinking…` (forbidden cool word per DESIGN.md §3.2 voice gate).
+ *  - Glyphs from the Pugi mascot brand glyph kit (`✽ ◆ ◇ ✦ ❋`). No
+ *    emoji — the spinner must paint in а narrow Bash / WSL terminal
+ *    где emoji fall back к `?`.
+ *  - Cyan accent (`#3da9fc`) on the glyph; verb stays default-tone so
+ *    the rotation does not compete with the cost-meter row above.
+ *  - Trailing ellipsis is а single Unicode `…` (DESIGN.md §4 — three-
+ *    dot ellipsis is the ONLY allowed truncation glyph).
+ *
+ * Test surface: `tickSpinnerFrame` is exported so the spec can drive
+ * the frame index without а real-clock timer.
+ */
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+/* ------------------------------------------------------------------ */
+/* Constants                                                         */
+/* ------------------------------------------------------------------ */
+const ACCENT = '#3da9fc';
+const FRAME_INTERVAL_MS = 800;
+const FRAMES = [
+    { glyph: '✽', verb: 'Briefing' },
+    { glyph: '◆', verb: 'Dispatching' },
+    { glyph: '◇', verb: 'Reviewing' },
+    { glyph: '✦', verb: 'Synthesizing' },
+    { glyph: '❋', verb: 'Shipping' },
+];
+/**
+ * Tool labels that anchor к the `Shipping…` frame regardless of
+ * rotation index. These are the write-class tools — the operator sees
+ * "shipping" the moment а real file mutation fires так the indicator
+ * matches the visible filesystem effect.
+ */
+const SHIPPING_TOOLS = new Set([
+    'edit',
+    'write',
+    'build',
+    'multi_edit',
+    'apply_patch',
+]);
+/* ------------------------------------------------------------------ */
+/* Helpers                                                           */
+/* ------------------------------------------------------------------ */
+/**
+ * Compute the visible frame для the current tick. The base index is
+ * derived from а monotonically-incrementing counter (one increment per
+ * `FRAME_INTERVAL_MS` window), и а ship-class tool label overrides the
+ * base so write-tools light up `Shipping…` immediately.
+ *
+ * Exported for the spec so the frame selection is testable without
+ * mounting Ink.
+ */
+export function tickSpinnerFrame(baseIndex, toolLabel) {
+    if (toolLabel && SHIPPING_TOOLS.has(toolLabel.toLowerCase())) {
+        return FRAMES[FRAMES.length - 1] ?? FRAMES[0];
+    }
+    const wrapped = ((baseIndex % FRAMES.length) + FRAMES.length) % FRAMES.length;
+    return FRAMES[wrapped] ?? FRAMES[0];
+}
+/**
+ * Decide whether the spinner should be visible for а dispatch state.
+ * `awaiting_response` и `tool_running` are the only active states; all
+ * other states (`idle`, `aborting`, `aborted`, `completed`, `failed`)
+ * suppress the spinner так the operator does not see а phantom verb
+ * after the dispatch settles.
+ */
+export function isSpinnerActive(dispatchState) {
+    return dispatchState === 'awaiting_response' || dispatchState === 'tool_running';
+}
+/* ------------------------------------------------------------------ */
+/* Component                                                         */
+/* ------------------------------------------------------------------ */
+export function ThinkingSpinner(props) {
+    const active = isSpinnerActive(props.dispatchState);
+    const [frameIndex, setFrameIndex] = useState(0);
+    const intervalMs = props.frameIntervalMs ?? FRAME_INTERVAL_MS;
+    useEffect(() => {
+        if (!active) {
+            // Reset так the next dispatch starts on `Briefing` instead of
+            // mid-rotation. Without this the spinner would resume one verb
+            // later on every turn и quickly drift to `Synthesizing` even на
+            // а fresh brief.
+            setFrameIndex(0);
+            return;
+        }
+        const timer = setInterval(() => {
+            setFrameIndex((previous) => (previous + 1) % FRAMES.length);
+        }, intervalMs);
+        return () => clearInterval(timer);
+    }, [active, intervalMs]);
+    if (!active)
+        return null;
+    const frame = tickSpinnerFrame(frameIndex, props.dispatchToolLabel ?? null);
+    return (_jsxs(Box, { children: [_jsx(Text, { color: ACCENT, children: `${frame.glyph} ` }), _jsx(Text, { children: `${frame.verb}…` })] }));
+}
+//# sourceMappingURL=thinking-spinner.js.map

package/dist/tui/tool-stream-pane.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { RESULT_PREVIEW_MAX_CHARS, STREAMING_DELTA_MAX_CHARS, } from '../core/repl/session.js';
 const DEFAULT_COLLAPSE_THRESHOLD = 5;
 const DEFAULT_MAX_ROWS = 8;
 export function ToolStreamPane(props) {
@@ -20,7 +21,7 @@ export function ToolStreamPane(props) {
 }
 function PaneHeader({ count, collapsed }) {
     const verb = collapsed ? 'Ctrl+T to expand' : 'Ctrl+T to collapse';
-    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, dimColor: true, children: '─ tools ' }), _jsx(Text, { dimColor: true, children: `(${count})  ` }), _jsx(Text, { dimColor: true, children: verb })] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, dimColor: true, children: '─ tools ' }), _jsx(Text, { dimColor: true, children: `(${count}) ` }), _jsx(Text, { dimColor: true, children: verb })] }));
 }
 function ToolCallRow({ call, collapseThreshold, }) {
     const glyph = statusGlyph(call.status);
@@ -28,7 +29,38 @@ function ToolCallRow({ call, collapseThreshold, }) {
     const label = formatToolLabel(call.tool, call.args);
     const summary = formatSummary(call);
     const showHint = (call.resultLines ?? 0) > collapseThreshold;
-    return (_jsxs(Box, { children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { children: ' ' }), _jsx(Text, { bold: true, children: label }), _jsx(Text, { dimColor: true, children: `  ${summary}` }), showHint ? (_jsx(Text, { dimColor: true, children: `  · ${call.resultLines} lines, Ctrl+O to expand` })) : null] }));
+    // small-CC-parity batch : on a `running` row,
+    // surface the rolling streaming delta as a dim inline preview after
+    // the label. On a completed row, the same slot carries the
+    // `resultPreview` quoted head. Either way the row stays single-line —
+    // both fields are clamped к their respective char ceilings upstream.
+    const inlineTail = call.status === 'running'
+        ? call.streamingDelta
+        : call.resultPreview;
+    // Error rows: render the label too in red so the eye lands on the
+    // failure even при peripheral attention. The other states keep the
+    // glyph as the only color signal.
+    const labelColor = call.status === 'error' ? 'red' : undefined;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { children: ' ' }), _jsx(Text, { bold: true, color: labelColor, children: label }), _jsx(Text, { dimColor: true, children: ` ${summary}` }), inlineTail ? (_jsx(Text, { dimColor: true, children: ` ${formatInlineTail(call.status, inlineTail)}` })) : null, showHint ? (_jsx(Text, { dimColor: true, children: ` · ${call.resultLines} lines, Ctrl+O to expand` })) : null] }));
+}
+/**
+ * small-CC-parity batch : render the inline tail
+ * slot for either the live `streamingDelta` (during `running`) or the
+ * collapsed `resultPreview` (after completion). Pure helper so the
+ * spec can assert the exact shape.
+ *
+ *  running       → `… npm WARN deprecated…`
+ *  ok / error    → `"<preview head>"`
+ */
+export function formatInlineTail(status, tail) {
+    if (status === 'running') {
+        return tail;
+    }
+    // Wrap the completed preview in quotes so the operator's eye groups
+    // the preview block visually distinct from the canonical detail
+    // (`OK`, `+12 -0`). Mirrors the the upstream tool TUI's quoted-preview
+    // pattern.
+    return `"${tail}"`;
 }
 function statusGlyph(status) {
     switch (status) {
@@ -52,18 +84,35 @@ function statusColor(status) {
 }
 /**
  * Render the canonical `Tool(args)` form. Tool names are capitalised
- * the way Claude Code shows them; args are truncated to 60 chars so
- * the row stays single-line even on 80-col terminals.
+ * the way the upstream tool shows them; args are truncated to keep the row
+ * single-line even on 80-col terminals. Cap = 60 chars (chosen empirically
+ * to leave room for the glyph + 1-space gap + summary + optional
+ * inline tail without overflow on narrow shells).
  */
 function formatToolLabel(tool, args) {
     const name = toolDisplayName(tool);
     const trimmedArgs = args.length > 60 ? `${args.slice(0, 57)}…` : args;
     return `${name}(${trimmedArgs})`;
 }
+/**
+ * Re-export the upstream char caps so the operator-facing constants
+ * have one source of truth. The session module owns the canonical
+ * values (used both during ingest и during the pane's render lookup);
+ * tests assert against these names rather than literal numbers so a
+ * future tuning сtays diff-friendly.
+ */
+export { RESULT_PREVIEW_MAX_CHARS, STREAMING_DELTA_MAX_CHARS };
 function toolDisplayName(tool) {
     switch (tool) {
         case 'read':
             return 'Read';
+        case 'write':
+            // — Write is the most operator-visible tool for the
+            // codegen-dispatch surface (Hiroshi writing index.html / style.css
+            // / script.js for a tic-tac-toe brief). Add the display name so
+            // the tool stream pane renders ✓ Write(index.html) instead of an
+            // unlabeled placeholder. Mirrors the the upstream tool Write rendering.
+            return 'Write';
         case 'edit':
             return 'Edit';
         case 'bash':

package/dist/tui/update-banner.js

@@ -1,8 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { upgradeCommand } from '../runtime/update-check.js';
+import { compareVersions, upgradeCommand, } from '../runtime/update-check.js';
+import { getCachedServerRecommendation } from '../core/transport/version-interceptor.js';
+/**
+ * Resolve the `latest` value the banner should show. Exported so the
+ * spec can lock the merge logic without rendering Ink.
+ */
+export function resolveDisplayedLatest(npmLatest, serverRecommended) {
+    if (!serverRecommended)
+        return npmLatest;
+    return compareVersions(serverRecommended, npmLatest) > 0
+        ? serverRecommended
+        : npmLatest;
+}
+/**
+ * Claude-Code-style corner banner: single line, dim orange, right
+ * aligned. Renders to the bottom of the REPL frame so it never
+ * displaces conversation content. Only mounts when an update is
+ * actually available; identical to no-op when the registry poll
+ * reports current. Suppress with `PUGI_SKIP_UPDATE_BANNER=1`.
+ */
 export function UpdateBanner({ result }) {
     const command = upgradeCommand(result.method);
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: '─ ' }), _jsx(Text, { bold: true, color: "cyan", children: 'Pugi ' }), _jsx(Text, { children: result.installed }), _jsx(Text, { dimColor: true, children: ' (installed) → ' }), _jsx(Text, { bold: true, children: result.latest }), _jsx(Text, { dimColor: true, children: ' (latest)' })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: '  Update: ' }), _jsx(Text, { color: "cyan", children: command })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: '  Skip with PUGI_SKIP_UPDATE_BANNER=1' }) })] }));
+    // Read the cache lazily inside the render so a server response that
+    // landed AFTER the banner was constructed still shows up on the next
+    // re-render. The cache lookup is a single map read — cheap enough to
+    // do per render.
+    const serverRecommended = getCachedServerRecommendation();
+    const displayedLatest = resolveDisplayedLatest(result.latest, serverRecommended);
+    return (_jsx(Box, { justifyContent: "flex-end", children: _jsxs(Text, { color: "#d97706", children: [_jsx(Text, { dimColor: true, children: 'Update available! ' }), _jsx(Text, { dimColor: true, children: `v${displayedLatest} — Run: ` }), _jsx(Text, { bold: true, children: command })] }) }));
 }
 //# sourceMappingURL=update-banner.js.map