@pugi/cli 0.1.0-alpha.3 → 0.1.0-alpha.6

package/dist/tui/repl.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * REPL root component - Sprint α5.7 (ADR-0056 PR-PUGI-CLI-REPL-DEFAULT).
+ *
+ * Three-zone layout:
+ *
+ *   header   - `Pugi.io · workspace: <name> · v<X> on watch`
+ *   main     - conversation pane (top half) + agent tree (bottom half)
+ *   footer   - input box + status bar + key hints
+ *
+ * The component subscribes to a ReplSession instance for state. It does
+ * NOT own the SSE client or the transport - the session module does.
+ * This keeps the component a pure render over a typed state plus three
+ * callbacks (submit, exit, overlay request).
+ *
+ * Overlays (`/help`, `/agents`) are rendered as full-pane modals that
+ * eclipse the main area so they read top-to-bottom even on small
+ * terminals. Pressing any key dismisses an overlay.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { PUGI_TAGLINE, THE_TEN } from '@pugi/personas';
+import { AgentTree } from './agent-tree.js';
+import { ConversationPane } from './conversation-pane.js';
+import { InputBox } from './input-box.js';
+import { StatusBar } from './status-bar.js';
+import { SLASH_COMMAND_HELP } from '../core/repl/slash-commands.js';
+const TICK_INTERVAL_MS = 200;
+const PULSE_INTERVAL_MS = 700;
+export function Repl(props) {
+    const [state, setState] = useState(props.session.getState());
+    const [overlay, setOverlay] = useState('none');
+    const [pulsePhase, setPulsePhase] = useState(0);
+    const [tickNow, setTickNow] = useState((props.now ?? Date.now)());
+    // Subscribe to session state updates. The session module fires the
+    // callback synchronously inside `patch` so we mirror without a
+    // batching layer.
+    useEffect(() => {
+        const unsubscribe = props.session.subscribe(setState);
+        return unsubscribe;
+    }, [props.session]);
+    // 200ms tick for the status-bar wall-clock + token counter rerender.
+    // Cheaper than re-mounting the session subscription and lets the
+    // status bar lag the dispatcher events by at most one frame.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTickNow((props.now ?? Date.now)());
+        }, TICK_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, [props.now]);
+    // Pulse the on-watch dot every 700ms. Three glyphs cycle, so the
+    // operator sees a gentle three-step animation rather than a binary
+    // blink. Subtle by design - brand voice forbids flashing.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setPulsePhase((prev) => (prev + 1) % 3);
+        }, PULSE_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, []);
+    useEffect(() => {
+        props.onOverlayChange?.(overlay);
+    }, [overlay, props]);
+    const personaNames = useMemo(() => buildPersonaNameMap(), []);
+    const { exit } = useApp();
+    const handleSubmit = useCallback((line) => {
+        // Run async without awaiting - the session module owns the
+        // network call, errors land in the transcript automatically.
+        void props.session.handleInput(line).then((verdict) => {
+            applyVerdictSideEffects(verdict, {
+                showHelp: () => setOverlay('help'),
+                showRoster: () => setOverlay('roster'),
+                farewell: () => {
+                    setOverlay('farewell');
+                    setTimeout(() => {
+                        props.session.close();
+                        exit();
+                    }, 800);
+                },
+            });
+        });
+    }, [props.session, exit]);
+    const handleExit = useCallback(() => {
+        setOverlay('farewell');
+        setTimeout(() => {
+            props.session.close();
+            exit();
+        }, 400);
+    }, [props.session, exit]);
+    // Any keystroke dismisses an overlay; mounting useInput at the root
+    // gives us the dismiss without colliding with the input box (which
+    // unmounts while an overlay is active).
+    useInput((_input, _key) => {
+        if (overlay !== 'none' && overlay !== 'farewell') {
+            setOverlay('none');
+        }
+    }, { isActive: overlay === 'help' || overlay === 'roster' });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Header, { state: state }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: overlay === 'help' ? (_jsx(HelpOverlay, {})) : overlay === 'roster' ? (_jsx(RosterOverlay, {})) : overlay === 'farewell' ? (_jsx(FarewellOverlay, {})) : (_jsx(MainArea, { state: state, personaNames: personaNames, nowEpochMs: tickNow })) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [overlay === 'farewell' ? null : (_jsx(InputBox, { onSubmit: handleSubmit, onExit: handleExit, now: props.now })), _jsx(StatusBar, { connection: state.connection, activeAgentCount: countActive(state), tokensDownstreamTotal: state.tokensDownstreamTotal, briefStartedAtEpochMs: state.briefStartedAtEpochMs, nowEpochMs: tickNow, pulsePhase: pulsePhase })] })] }));
+}
+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('_', ' ') })] }));
+}
+function MainArea({ state, personaNames, nowEpochMs, }) {
+    // Show the last 12 transcript rows in the conversation slot so the
+    // bottom of the frame stays anchored to the input box. The agent
+    // tree drops below the transcript; new agents push the operator
+    // line up the screen, mirroring Claude Code / Codex CLI.
+    const conversationSlice = state.transcript.slice(-12);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ConversationPane, { rows: conversationSlice, personaNames: personaNames }), _jsx(Box, { marginTop: 1, children: _jsx(AgentTree, { agents: state.agents, nowEpochMs: nowEpochMs }) })] }));
+}
+function HelpOverlay() {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Pugi REPL help" }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: SLASH_COMMAND_HELP.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))) }), _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 }) }));
+}
+function applyVerdictSideEffects(verdict, handlers) {
+    switch (verdict.kind) {
+        case 'help':
+            handlers.showHelp();
+            return;
+        case 'roster':
+            handlers.showRoster();
+            return;
+        case 'quit':
+            handlers.farewell();
+            return;
+        case 'dispatch':
+        case 'stop':
+        case 'error':
+        case 'noop':
+            return;
+    }
+}
+function countActive(state) {
+    let count = 0;
+    for (const agent of state.agents) {
+        if (agent.status === 'queued' || agent.status === 'thinking')
+            count += 1;
+    }
+    return count;
+}
+function buildPersonaNameMap() {
+    const map = new Map();
+    for (const persona of THE_TEN) {
+        map.set(persona.slug, persona.name);
+    }
+    return map;
+}
+//# sourceMappingURL=repl.js.map

package/dist/tui/splash-data.js

@@ -0,0 +1,61 @@
+import { homedir } from 'node:os';
+import { DEFAULT_API_URL, maskApiKey, normalizeApiUrl, readCredentialsFile, resolveActiveCredential, } from '../core/credentials.js';
+/**
+ * Decode the JWT payload for display only — no signature check. The
+ * splash never sends the token over the wire so a stale or malformed
+ * JWT is still safe to show. Mirrors `decodeJwtPrincipal` in
+ * runtime/cli.ts, intentionally duplicated rather than imported to
+ * keep the TUI layer independent of the giant CLI module.
+ */
+function decodeJwtPayload(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length < 2)
+            return null;
+        const payload = parts[1];
+        if (!payload)
+            return null;
+        const padded = payload
+            .replace(/-/g, '+')
+            .replace(/_/g, '/')
+            .padEnd(payload.length + ((4 - (payload.length % 4)) % 4), '=');
+        const json = Buffer.from(padded, 'base64').toString('utf8');
+        const obj = JSON.parse(json);
+        if (!obj || typeof obj !== 'object')
+            return null;
+        return {
+            sub: typeof obj.sub === 'string' ? obj.sub : undefined,
+            email: typeof obj.email === 'string' ? obj.email : undefined,
+            customerId: typeof obj.customerId === 'string' ? obj.customerId : undefined,
+            plan: typeof obj.plan === 'string' ? obj.plan : undefined,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+export function collectSplashData(input) {
+    const env = input.env ?? process.env;
+    const home = input.home ?? homedir();
+    const credential = resolveActiveCredential(env, home);
+    if (!credential) {
+        const file = readCredentialsFile(home);
+        const apiUrl = normalizeApiUrl(env.PUGI_API_URL ?? file.activeApiUrl ?? DEFAULT_API_URL);
+        return {
+            cliVersion: input.cliVersion,
+            apiUrl,
+            isAuthenticated: false,
+        };
+    }
+    const principal = decodeJwtPayload(credential.apiKey);
+    return {
+        cliVersion: input.cliVersion,
+        apiUrl: credential.apiUrl,
+        isAuthenticated: true,
+        apiKeyMasked: maskApiKey(credential.apiKey),
+        ...(principal?.email ? { email: principal.email } : {}),
+        ...(principal?.customerId ? { tenant: principal.customerId } : {}),
+        ...(principal?.plan ? { plan: principal.plan } : {}),
+    };
+}
+//# sourceMappingURL=splash-data.js.map

package/dist/tui/splash.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Bare `pugi` (no args) splash. Rendered only on a real TTY by the
+ * CLI dispatcher; non-TTY callers see the existing usage dump.
+ *
+ * Layout intentionally restrained: bold "pugi.io" wordmark, dim
+ * version/endpoint metadata, neutral body. No background colors, no
+ * emoji decoration, ASCII separators only.
+ */
+export function Splash({ data }) {
+    const accountLine = data.isAuthenticated
+        ? `${data.email ?? data.apiKeyMasked ?? 'authenticated'}${data.tenant ? ` (tenant: ${data.tenant})` : ''}`
+        : 'not signed in';
+    const primaryHint = data.isAuthenticated
+        ? {
+            cmd: 'pugi code "fix the bug"',
+            gloss: 'Run a one-shot coding task',
+        }
+        : {
+            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" }) })] }));
+}
+function HintRow({ command, gloss }) {
+    // Pad command names so the gloss column lines up across rows.
+    const padded = command.padEnd(28, ' ');
+    return (_jsxs(Text, { children: [_jsx(Text, { children: `  ${padded}` }), _jsx(Text, { dimColor: true, children: gloss })] }));
+}
+//# sourceMappingURL=splash.js.map

package/dist/tui/status-bar.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/**
+ * Cyan dot glyphs across the pulse cycle. Three steps keep the motion
+ * subtle - a true gradient would force an Ink rerender on every
+ * 16ms frame and waste cycles on a status bar.
+ */
+const PULSE_DOTS = ['●', '◉', '○'];
+export function StatusBar(props) {
+    const now = props.nowEpochMs ?? Date.now();
+    const elapsedLabel = formatElapsed(props.briefStartedAtEpochMs, now);
+    const tokenLabel = formatTokens(props.tokensDownstreamTotal);
+    const phase = clampPhase(props.pulsePhase);
+    const glyph = PULSE_DOTS[Math.min(phase, PULSE_DOTS.length - 1)] ?? PULSE_DOTS[0];
+    const status = connectionLabel(props.connection);
+    return (_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}` })] }));
+}
+function connectionLabel(connection) {
+    switch (connection) {
+        case 'connecting':
+            return { label: 'connecting', color: 'cyan' };
+        case 'on_watch':
+            return { label: 'on watch', color: 'cyan' };
+        case 'reconnecting':
+            return { label: 'reconnecting', color: 'yellow' };
+        case 'offline':
+            return { label: 'offline', color: 'gray' };
+    }
+}
+function formatElapsed(startedAt, now) {
+    if (typeof startedAt !== 'number')
+        return 'idle';
+    const ms = Math.max(0, now - startedAt);
+    if (ms < 60_000) {
+        return `${Math.floor(ms / 1000)}s`;
+    }
+    const minutes = Math.floor(ms / 60_000);
+    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`;
+}
+function clampPhase(phase) {
+    if (typeof phase !== 'number' || Number.isNaN(phase))
+        return 0;
+    return Math.max(0, Math.min(PULSE_DOTS.length - 1, Math.floor(phase)));
+}
+//# sourceMappingURL=status-bar.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pugi/cli",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.6",
   "description": "Pugi CLI — terminal-native software execution system",
   "homepage": "https://pugi.io",
   "repository": {
@@ -38,19 +38,25 @@
     "access": "public"
   },
   "dependencies": {
+    "ink": "^5.0.1",
+    "react": "^18.3.1",
+    "tinyglobby": "^0.2.16",
     "zod": "^3.23.0",
-    "@pugi/sdk": "0.1.0-alpha.3"
+    "@pugi/personas": "0.1.0",
+    "@pugi/sdk": "0.1.0-alpha.6"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "@types/react": "^18.3.3",
+    "ink-testing-library": "^4.0.0",
     "tsx": "^4.19.0",
     "typescript": "~5.6.0"
   },
   "scripts": {
-    "build": "pnpm --filter @pugi/sdk build && tsc -p tsconfig.json && node scripts/make-bin-executable.mjs",
+    "build": "pnpm --filter @pugi/personas --filter @pugi/sdk build && tsc -p tsconfig.json && node scripts/make-bin-executable.mjs",
     "dev": "tsx src/index.ts",
-    "typecheck": "pnpm --filter @pugi/sdk build && tsc -p tsconfig.json --noEmit",
-    "test": "pnpm run build && node --test --import tsx test/*.spec.ts",
+    "typecheck": "pnpm --filter @pugi/personas --filter @pugi/sdk build && tsc -p tsconfig.json --noEmit",
+    "test": "pnpm run build && node --test --import tsx 'test/**/*.spec.ts' 'test/**/*.spec.tsx'",
     "version:cli": "tsx src/index.ts version",
     "doctor": "tsx src/index.ts doctor --json",
     "pack:smoke": "node scripts/pack-smoke.mjs"