agent-nuvira 2.7.0 → 2.7.2

package/dist/web-dashboard/src/components/EnvVarEditor.js

@@ -0,0 +1,138 @@
+"use strict";
+/**
+ * Environment Variable Editor — Manages API keys for marketplace skills.
+ *
+ * This component allows users to:
+ * - View all configured environment variables
+ * - Add new environment variables
+ * - Edit existing values
+ * - Delete variables
+ * - Test if variables are set correctly
+ * - Import/export variable sets
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvVarEditor = EnvVarEditor;
+const react_1 = require("react");
+// ─── Component ───────────────────────────────────────────────────────────
+function EnvVarEditor({ envVars, onSave, onDelete, onTest, readOnly = false, }) {
+    const [editingVar, setEditingVar] = (0, react_1.useState)(null);
+    const [editValue, setEditValue] = (0, react_1.useState)('');
+    const [showAdd, setShowAdd] = (0, react_1.useState)(false);
+    const [newName, setNewName] = (0, react_1.useState)('');
+    const [newValue, setNewValue] = (0, react_1.useState)('');
+    const [testingVar, setTestingVar] = (0, react_1.useState)(null);
+    const [testResults, setTestResults] = (0, react_1.useState)({});
+    // Sort: required first, then by name
+    const sortedVars = [...envVars].sort((a, b) => {
+        if (a.requiredBy && !b.requiredBy)
+            return -1;
+        if (!a.requiredBy && b.requiredBy)
+            return 1;
+        return a.name.localeCompare(b.name);
+    });
+    const handleSave = (name) => {
+        onSave(name, editValue);
+        setEditingVar(null);
+        setEditValue('');
+    };
+    const handleAdd = () => {
+        if (newName && newValue) {
+            onSave(newName, newValue);
+            setNewName('');
+            setNewValue('');
+            setShowAdd(false);
+        }
+    };
+    const handleTest = async (name) => {
+        if (!onTest)
+            return;
+        setTestingVar(name);
+        try {
+            const result = await onTest(name);
+            setTestResults((prev) => ({ ...prev, [name]: result }));
+        }
+        catch {
+            setTestResults((prev) => ({ ...prev, [name]: false }));
+        }
+        finally {
+            setTestingVar(null);
+        }
+    };
+    return (<div className="env-var-editor">
+      <div className="env-var-header">
+        <h3 className="env-var-title">🔐 Environment Variables</h3>
+        {!readOnly && (<button className="admin-mini-btn" type="button" onClick={() => setShowAdd(!showAdd)}>
+            {showAdd ? '✕ Cancel' : '+ Add Variable'}
+          </button>)}
+      </div>
+
+      {/* Add new variable form */}
+      {showAdd && !readOnly && (<div className="env-var-add-form">
+          <input className="env-var-input" type="text" placeholder="Variable name (e.g., MY_API_KEY)" value={newName} onChange={(e) => setNewName(e.target.value)}/>
+          <input className="env-var-input" type="password" placeholder="Value" value={newValue} onChange={(e) => setNewValue(e.target.value)}/>
+          <button className="admin-refresh-btn" type="button" disabled={!newName || !newValue} onClick={handleAdd}>
+            💾 Save
+          </button>
+        </div>)}
+
+      {/* Variable list */}
+      <div className="env-var-list">
+        {sortedVars.length === 0 ? (<div className="env-var-empty">
+            No environment variables configured. Add one to get started.
+          </div>) : (sortedVars.map((envVar) => (<div key={envVar.name} className={`env-var-row ${envVar.isSet ? 'env-var-set' : 'env-var-missing'} ${envVar.isProviderCredential ? 'env-var-blocked' : ''}`}>
+              <div className="env-var-row-header">
+                <span className="env-var-name">
+                  {envVar.name}
+                  {envVar.requiredBy && (<span className="env-var-required-badge">
+                      required by {envVar.requiredBy}
+                    </span>)}
+                  {envVar.isProviderCredential && (<span className="env-var-blocked-badge">
+                      🔒 provider credential (blocked)
+                    </span>)}
+                </span>
+                <span className="env-var-status">
+                  {envVar.isSet ? '✅ Set' : '❌ Not set'}
+                </span>
+              </div>
+
+              {envVar.description && (<div className="env-var-description">{envVar.description}</div>)}
+
+              {editingVar === envVar.name ? (<div className="env-var-edit">
+                  <input className="env-var-input" type="password" value={editValue} onChange={(e) => setEditValue(e.target.value)} placeholder="Enter new value..."/>
+                  <button className="admin-refresh-btn" type="button" onClick={() => handleSave(envVar.name)}>
+                    💾 Save
+                  </button>
+                  <button className="admin-mini-btn" type="button" onClick={() => setEditingVar(null)}>
+                    Cancel
+                  </button>
+                </div>) : (<div className="env-var-actions">
+                  {!readOnly && !envVar.isProviderCredential && (<button className="admin-mini-btn" type="button" onClick={() => {
+                        setEditingVar(envVar.name);
+                        setEditValue('');
+                    }}>
+                      ✏️ Edit
+                    </button>)}
+                  {onTest && (<button className="admin-mini-btn" type="button" disabled={testingVar === envVar.name} onClick={() => handleTest(envVar.name)}>
+                      {testingVar === envVar.name ? '⏳ Testing...' : '🧪 Test'}
+                    </button>)}
+                  {!readOnly && (<button className="admin-mini-btn admin-mini-btn-danger" type="button" onClick={() => onDelete(envVar.name)}>
+                      🗑️ Delete
+                    </button>)}
+                  {testResults[envVar.name] !== undefined && (<span className={`env-var-test-result ${testResults[envVar.name] ? 'env-var-test-pass' : 'env-var-test-fail'}`}>
+                      {testResults[envVar.name] ? '✅ Valid' : '❌ Invalid'}
+                    </span>)}
+                </div>)}
+            </div>)))}
+      </div>
+
+      {/* Help text */}
+      <div className="env-var-help">
+        <p>
+          <strong>Tip:</strong> Environment variables are stored in <code>~/.nuvira/.env</code> and
+          injected into skill executions. Provider credentials (ANTHROPIC_API_KEY, OPENAI_API_KEY, etc.)
+          are automatically blocked from skill execution for security.
+        </p>
+      </div>
+    </div>);
+}
+exports.default = EnvVarEditor;

package/dist/web-dashboard/src/components/EvalsPage.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * EvalsPage — P2 eval runner in the GUI (GUI parity with `buff eval run`).
+ *
+ * Runs the REAL `buff eval run` through the task runner (shared TaskConsole),
+ * with live output and cancel. Past runs come from the dashboard data feed
+ * (evals.json, auto-refreshed every 10s), so results appear in the table as
+ * soon as a run finishes.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = EvalsPage;
+const TaskConsole_1 = __importDefault(require("./TaskConsole"));
+const PRESETS = [
+    { label: '⚡ Quick smoke', args: ['eval', 'run', '--tasks', 'quick', '--format', 'text'] },
+    { label: '⏱ Medium suite', args: ['eval', 'run', '--tasks', 'medium', '--format', 'text'] },
+    { label: '🐢 Slow suite', args: ['eval', 'run', '--tasks', 'slow', '--format', 'text'] },
+    { label: '🏆 M2B parity', args: ['eval', 'run', '--suite', 'm2b', '--format', 'text'] },
+    { label: '📦 Full suite', args: ['eval', 'run', '--suite', 'full', '--format', 'text'] },
+];
+function fmtPct(v) {
+    if (typeof v !== 'number')
+        return '—';
+    return `${Math.round(v * 100)}%`;
+}
+function fmtDate(at) {
+    return new Date(at).toLocaleString();
+}
+function EvalsPage({ data }) {
+    const runs = data?.evals?.runs ?? [];
+    return (<div className="panel">
+      <div className="panel-header">
+        <h2>🏆 Evals — run buff eval from the GUI</h2>
+      </div>
+
+      <TaskConsole_1.default presets={PRESETS} customPlaceholder="e.g. eval run --tasks my-task --provider groq --model llama" timeoutMs={900_000} hint={<>
+            Runs the real <code>buff eval run</code> as an isolated process — same engine, same ledger, same results
+            as the CLI. Long suites can take minutes; you can cancel mid-run.
+          </>}/>
+
+      <h3 className="section-subtitle">📜 Past runs (auto-refreshes)</h3>
+      {runs.length > 0 ? (<div className="admin-table-wrapper">
+          <table className="admin-table">
+            <thead>
+              <tr>
+                <th>Started</th>
+                <th>Provider</th>
+                <th>Model</th>
+                <th>Tasks</th>
+                <th>Pass</th>
+                <th>Completion</th>
+                <th>Composite</th>
+                <th>Cost</th>
+              </tr>
+            </thead>
+            <tbody>
+              {runs.map((r) => (<tr key={r.id}>
+                  <td>{fmtDate(r.startedAt)}</td>
+                  <td className="admin-provider-type">{r.provider}</td>
+                  <td>{r.model}</td>
+                  <td>{r.summary.totalTasks}</td>
+                  <td>{r.summary.tasksPassed}/{r.summary.totalTasks}</td>
+                  <td>{fmtPct(r.summary.completionRate)}</td>
+                  <td>{fmtPct(r.summary.avgCompositeScore)}</td>
+                  <td>${(r.summary.totalCostUsd ?? 0).toFixed(4)}</td>
+                </tr>))}
+            </tbody>
+          </table>
+        </div>) : (<div className="empty-state">No eval runs yet — start one above (or `buff eval run` from the CLI).</div>)}
+    </div>);
+}

package/dist/web-dashboard/src/components/EvalsPage.test.js

@@ -0,0 +1,120 @@
+"use strict";
+/**
+ * P2 — EvalsPage tests (eval runner in the GUI).
+ *
+ * The page mounts the shared TaskConsole with the `buff eval run` presets and
+ * renders past runs from the dashboard data feed. Page-specific behavior is
+ * covered here; the console's run/stream/cancel mechanics live in
+ * TaskConsole.test.tsx.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const EvalsPage_1 = __importDefault(require("./EvalsPage"));
+const api_1 = require("../api");
+const DATA = {
+    evals: {
+        totalRuns: 2,
+        latest: null,
+        runs: [
+            {
+                id: 'r1',
+                provider: 'groq',
+                model: 'llama-3.3-70b',
+                startedAt: 1700000000000,
+                summary: {
+                    totalTasks: 4, tasksPassed: 3, completionRate: 0.75, testPassRate: 0.8,
+                    avgTimeToFixMs: 1000, avgEditAccuracy: 0.9, avgTokenEfficiency: 0.5,
+                    totalRollbacks: 1, dependencyInstallRate: 1, recoveryRate: 0.9,
+                    avgCompositeScore: 0.72, totalCostUsd: 0.012,
+                },
+            },
+        ],
+    },
+    serverTime: 1,
+};
+const TASK = {
+    id: 'task-1',
+    command: 'eval run --tasks quick --format text',
+    args: ['eval', 'run', '--tasks', 'quick', '--format', 'text'],
+    cwd: '/tmp',
+    status: 'running',
+    exitCode: null,
+    startedAt: Date.now(),
+    finishedAt: null,
+    durationMs: null,
+    timeoutMs: 900000,
+    logs: [],
+};
+function mockAuthed(authenticated = true, role = 'admin') {
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'fetchAdminAuthStatus').mockResolvedValue({
+        configured: true,
+        authenticated,
+        user: authenticated ? 'admin' : null,
+        role: authenticated ? role : null,
+    });
+}
+function mockRunApi() {
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'startTask').mockResolvedValue({ ok: true, task: TASK });
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'getTask').mockResolvedValue({ status: 200, task: TASK });
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'subscribeTask').mockReturnValue(() => { });
+}
+(0, vitest_1.afterEach)(() => {
+    (0, react_1.cleanup)();
+    vitest_1.vi.restoreAllMocks();
+    (0, api_1.setAdminToken)(null);
+});
+(0, vitest_1.describe)('EvalsPage', () => {
+    (0, vitest_1.it)('gates running behind the admin session', async () => {
+        mockAuthed(false);
+        (0, react_1.render)(<EvalsPage_1.default data={DATA}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText(/Log in \(admin or operator\)/)).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.queryByRole('button', { name: /Quick smoke/ })).toBeNull();
+    });
+    (0, vitest_1.it)('renders past runs from the data feed', async () => {
+        mockAuthed();
+        (0, react_1.render)(<EvalsPage_1.default data={DATA}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('groq')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.getByText('llama-3.3-70b')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('3/4')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('72%')).toBeTruthy();
+    });
+    (0, vitest_1.it)('a preset button starts the right eval task with the eval timeout', async () => {
+        mockAuthed();
+        mockRunApi();
+        const start = vitest_1.vi.mocked(api_1.dashboardAPI.startTask);
+        (0, react_1.render)(<EvalsPage_1.default data={DATA}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Quick smoke/ })).toBeTruthy());
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Quick smoke/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith(['eval', 'run', '--tasks', 'quick', '--format', 'text'], 900_000));
+    });
+    (0, vitest_1.it)('the custom input runs a full eval command line', async () => {
+        mockAuthed();
+        mockRunApi();
+        const start = vitest_1.vi.mocked(api_1.dashboardAPI.startTask);
+        (0, react_1.render)(<EvalsPage_1.default data={DATA}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByPlaceholderText(/eval run/)).toBeTruthy());
+        react_1.fireEvent.change(react_1.screen.getByPlaceholderText(/eval run/), { target: { value: 'eval run --tasks my-task --format text' } });
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Run' }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith(['eval', 'run', '--tasks', 'my-task', '--format', 'text'], 900_000));
+    });
+    (0, vitest_1.it)('streams the live console and offers cancel while running', async () => {
+        mockAuthed();
+        mockRunApi();
+        vitest_1.vi.spyOn(api_1.dashboardAPI, 'getTask').mockResolvedValue({
+            status: 200,
+            task: { ...TASK, logs: [{ stream: 'stdout', text: 'task 1/4 started', at: Date.now() }] },
+        });
+        const cancel = vitest_1.vi.spyOn(api_1.dashboardAPI, 'cancelTask').mockResolvedValue({ ok: true });
+        (0, react_1.render)(<EvalsPage_1.default data={DATA}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Quick smoke/ })).toBeTruthy());
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Quick smoke/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('task 1/4 started')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Cancel/ })).toBeTruthy();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Cancel/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(cancel).toHaveBeenCalledWith('task-1'));
+    });
+});

package/dist/web-dashboard/src/components/ExecutionHistory.js

@@ -0,0 +1,201 @@
+"use strict";
+/**
+ * Execution History — View past skill executions in the dashboard.
+ *
+ * This component shows:
+ * - List of all skill executions
+ * - Filter by skill name, status, runtime
+ * - View execution details (stdout, stderr, duration)
+ * - Export execution history
+ * - Clear history
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExecutionHistory = ExecutionHistory;
+const react_1 = require("react");
+// ─── Component ───────────────────────────────────────────────────────────
+function ExecutionHistory({ onFetch, onClear, onExport, }) {
+    const [entries, setEntries] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [filterSkill, setFilterSkill] = (0, react_1.useState)('');
+    const [filterStatus, setFilterStatus] = (0, react_1.useState)('');
+    const [selectedEntry, setSelectedEntry] = (0, react_1.useState)(null);
+    const [stats, setStats] = (0, react_1.useState)(null);
+    // Fetch entries on mount and when filters change
+    (0, react_1.useEffect)(() => {
+        fetchEntries();
+    }, [filterSkill, filterStatus]);
+    const fetchEntries = async () => {
+        setLoading(true);
+        try {
+            const fetched = await onFetch({
+                skillName: filterSkill || undefined,
+                status: filterStatus || undefined,
+                limit: 100,
+            });
+            setEntries(fetched);
+            // Calculate stats
+            const total = fetched.length;
+            const success = fetched.filter((e) => e.status === 'success').length;
+            const failure = fetched.filter((e) => e.status === 'failure').length;
+            const avgDuration = total > 0
+                ? Math.round(fetched.reduce((sum, e) => sum + e.durationMs, 0) / total)
+                : 0;
+            setStats({ total, success, failure, avgDuration });
+        }
+        catch (err) {
+            console.error('Failed to fetch execution history:', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleExport = async (format) => {
+        if (!onExport)
+            return;
+        try {
+            const data = await onExport(format);
+            const blob = new Blob([data], { type: format === 'json' ? 'application/json' : 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `execution-history.${format}`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            console.error('Failed to export history:', err);
+        }
+    };
+    const handleClear = async () => {
+        if (!onClear)
+            return;
+        if (!confirm('Are you sure you want to clear all execution history?'))
+            return;
+        try {
+            await onClear();
+            setEntries([]);
+            setStats(null);
+        }
+        catch (err) {
+            console.error('Failed to clear history:', err);
+        }
+    };
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'success': return '✅';
+            case 'failure': return '❌';
+            case 'timeout': return '⏰';
+            case 'rejected': return '🚫';
+            case 'error': return '💥';
+            default: return '❓';
+        }
+    };
+    const getRuntimeIcon = (runtime) => {
+        switch (runtime) {
+            case 'python': return '🐍';
+            case 'node': return '🟢';
+            case 'shell': return '🖥️';
+            case 'ruby': return '💎';
+            case 'go': return '🔵';
+            case 'rust': return '🦀';
+            default: return '📜';
+        }
+    };
+    return (<div className="execution-history">
+      <div className="execution-history-header">
+        <h3 className="execution-history-title">📜 Execution History</h3>
+        <div className="execution-history-actions">
+          <button className="admin-mini-btn" type="button" onClick={() => handleExport('json')}>
+            📥 Export JSON
+          </button>
+          <button className="admin-mini-btn" type="button" onClick={() => handleExport('csv')}>
+            📥 Export CSV
+          </button>
+          {onClear && (<button className="admin-mini-btn admin-mini-btn-danger" type="button" onClick={handleClear}>
+              🗑️ Clear
+            </button>)}
+        </div>
+      </div>
+
+      {/* Stats */}
+      {stats && (<div className="execution-history-stats">
+          <div className="stat-item">
+            <span className="stat-value">{stats.total}</span>
+            <span className="stat-label">Total</span>
+          </div>
+          <div className="stat-item stat-success">
+            <span className="stat-value">{stats.success}</span>
+            <span className="stat-label">Success</span>
+          </div>
+          <div className="stat-item stat-failure">
+            <span className="stat-value">{stats.failure}</span>
+            <span className="stat-label">Failed</span>
+          </div>
+          <div className="stat-item">
+            <span className="stat-value">{stats.avgDuration}ms</span>
+            <span className="stat-label">Avg Duration</span>
+          </div>
+        </div>)}
+
+      {/* Filters */}
+      <div className="execution-history-filters">
+        <input className="env-var-input" type="text" placeholder="Filter by skill name..." value={filterSkill} onChange={(e) => setFilterSkill(e.target.value)}/>
+        <select className="env-var-input" value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
+          <option value="">All statuses</option>
+          <option value="success">Success</option>
+          <option value="failure">Failure</option>
+          <option value="timeout">Timeout</option>
+          <option value="rejected">Rejected</option>
+          <option value="error">Error</option>
+        </select>
+      </div>
+
+      {/* Entry list */}
+      <div className="execution-history-list">
+        {loading ? (<div className="execution-history-empty">Loading...</div>) : entries.length === 0 ? (<div className="execution-history-empty">
+            No execution history found. Execute a skill to see results here.
+          </div>) : (entries.map((entry) => (<div key={entry.id} className={`execution-history-entry ${entry.status}`} onClick={() => setSelectedEntry(selectedEntry?.id === entry.id ? null : entry)}>
+              <div className="entry-header">
+                <span className="entry-icon">{getStatusIcon(entry.status)}</span>
+                <span className="entry-skill">{entry.skillName}</span>
+                <span className="entry-runtime">{getRuntimeIcon(entry.runtime)} {entry.runtime}</span>
+                <span className="entry-duration">{entry.durationMs}ms</span>
+                <span className="entry-time">
+                  {new Date(entry.timestamp).toLocaleString()}
+                </span>
+                <span className="entry-expand">
+                  {selectedEntry?.id === entry.id ? '▼' : '▶'}
+                </span>
+              </div>
+
+              {selectedEntry?.id === entry.id && (<div className="entry-details">
+                  <div className="entry-detail-row">
+                    <span className="detail-label">Status:</span>
+                    <span className="detail-value">{entry.status}</span>
+                  </div>
+                  <div className="entry-detail-row">
+                    <span className="detail-label">Runtime:</span>
+                    <span className="detail-value">{entry.runtime}</span>
+                  </div>
+                  <div className="entry-detail-row">
+                    <span className="detail-label">Duration:</span>
+                    <span className="detail-value">{entry.durationMs}ms</span>
+                  </div>
+                  {entry.exitCode !== undefined && (<div className="entry-detail-row">
+                      <span className="detail-label">Exit Code:</span>
+                      <span className="detail-value">{entry.exitCode}</span>
+                    </div>)}
+                  {entry.error && (<div className="entry-detail-row">
+                      <span className="detail-label">Error:</span>
+                      <span className="detail-value entry-error">{entry.error}</span>
+                    </div>)}
+                  {entry.command && (<div className="entry-detail-row">
+                      <span className="detail-label">Command:</span>
+                      <code className="detail-value">{entry.command}</code>
+                    </div>)}
+                </div>)}
+            </div>)))}
+      </div>
+    </div>);
+}
+exports.default = ExecutionHistory;

package/dist/web-dashboard/src/components/GatewayPage.js

@@ -0,0 +1,40 @@
+"use strict";
+/**
+ * GatewayPage — gateway ops in the GUI (GUI parity with `buff gateway`).
+ *
+ * Status, delivery ledger, foreground start, and cron management run the REAL
+ * CLI commands through the shared TaskConsole (isolated child process + live
+ * SSE console + cancel). Note: `gateway start` runs in the foreground — it
+ * streams platform events until you cancel it (the console's Cancel button
+ * SIGTERMs the process).
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GatewayPage;
+const TaskConsole_1 = __importDefault(require("./TaskConsole"));
+const PRESETS = [
+    { label: '🌐 Gateway status', args: ['gateway', 'status'] },
+    { label: '📮 Delivery ledger', args: ['gateway', 'delivery'] },
+    // timeoutMs: 0 = run forever. A gateway is a server process — the default
+    // 5-minute task timeout used to SIGTERM it while the user believed it was
+    // still running.
+    { label: '▶️ Start gateway (foreground)', args: ['gateway', 'start', '--no-events'], timeoutMs: 0 },
+    { label: '⏰ Cron jobs', args: ['admin', 'cron', 'list'] },
+];
+function GatewayPage() {
+    return (<div className="panel">
+      <div className="panel-header">
+        <h2>🌐 Gateway ops — run buff gateway from the GUI</h2>
+      </div>
+
+      <TaskConsole_1.default presets={PRESETS} customPlaceholder="e.g. admin cron run nightly or gateway alias add ops email:team@example.com" timeoutMs={300_000} hint={<>
+            Each command runs as the real CLI in an isolated process (the P1 task runner) — the same engine as your
+            terminal. <code>gateway start</code> runs in the foreground <strong>with no timeout</strong>: it keeps running
+            even after you switch tabs (the process lives on the dashboard server, not the page) and streams platform
+            events until you press <strong>Cancel</strong>. The delivery ledger also has its own view in{' '}
+            <strong>Agent Hub → Channels</strong>.
+          </>}/>
+    </div>);
+}

package/dist/web-dashboard/src/components/GatewayPage.test.js

@@ -0,0 +1,74 @@
+"use strict";
+/**
+ * P2/P3 — GatewayPage tests (gateway ops in the GUI).
+ *
+ * The page mounts the shared TaskConsole with `buff gateway` presets. Its own
+ * surface is thin (page title + presets); the console mechanics live in
+ * TaskConsole.test.tsx.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const GatewayPage_1 = __importDefault(require("./GatewayPage"));
+const api_1 = require("../api");
+const TASK = {
+    id: 'task-1',
+    command: 'gateway status',
+    args: ['gateway', 'status'],
+    cwd: '/tmp',
+    status: 'running',
+    exitCode: null,
+    startedAt: Date.now(),
+    finishedAt: null,
+    durationMs: null,
+    timeoutMs: 300000,
+    logs: [],
+};
+function mockAuthed(authenticated = true, role = 'admin') {
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'fetchAdminAuthStatus').mockResolvedValue({
+        configured: true,
+        authenticated,
+        user: authenticated ? 'admin' : null,
+        role: authenticated ? role : null,
+    });
+}
+function mockRunApi() {
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'startTask').mockResolvedValue({ ok: true, task: TASK });
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'getTask').mockResolvedValue({ status: 200, task: TASK });
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'subscribeTask').mockReturnValue(() => { });
+}
+(0, vitest_1.afterEach)(() => {
+    (0, react_1.cleanup)();
+    vitest_1.vi.restoreAllMocks();
+    (0, api_1.setAdminToken)(null);
+});
+(0, vitest_1.describe)('GatewayPage', () => {
+    (0, vitest_1.it)('gates ops behind the admin session', async () => {
+        mockAuthed(false);
+        (0, react_1.render)(<GatewayPage_1.default />);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText(/Log in \(admin or operator\)/)).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.queryByRole('button', { name: /Gateway status/ })).toBeNull();
+    });
+    (0, vitest_1.it)('preset buttons run the real gateway CLI commands', async () => {
+        mockAuthed();
+        mockRunApi();
+        const start = vitest_1.vi.mocked(api_1.dashboardAPI.startTask);
+        (0, react_1.render)(<GatewayPage_1.default />);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Gateway status/ })).toBeTruthy());
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Gateway status/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith(['gateway', 'status'], 300_000));
+    });
+    (0, vitest_1.it)('the custom input runs an arbitrary gateway/admin command', async () => {
+        mockAuthed();
+        mockRunApi();
+        const start = vitest_1.vi.mocked(api_1.dashboardAPI.startTask);
+        (0, react_1.render)(<GatewayPage_1.default />);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByPlaceholderText(/admin cron run/)).toBeTruthy());
+        react_1.fireEvent.change(react_1.screen.getByPlaceholderText(/admin cron run/), { target: { value: 'admin cron run nightly' } });
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Run' }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith(['admin', 'cron', 'run', 'nightly'], 300_000));
+    });
+});