@productbrain/cli 0.1.0-beta.55 → 0.1.0-beta.5504

package/dist/commands/admin/cockpit.js

@@ -1,21 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * Ink TUI cockpit for pb admin (WP-314 S1).
+ * Ink TUI cockpit for pb admin (WP-314 S1, WP-317 S3).
  *
- * Renders a worst-first sorted workspaces table with sparkbar health, PARITY
- * column, fuzzy filter, and keyboard navigation.
+ * WP-317 S3 adds:
+ *   - Persistent env banner (DEV/PROD) on every tab
+ *   - Tab navigation: Workspaces | Seeds | Changelog
+ *   - Tab/Shift+Tab keyboard switching; mouse enable/disable sequences (best-effort)
+ *   - Seeds tab: shows SEED_COMMAND_ENTRIES with static status (real runtime data in S4)
  *
  * Keyboard bindings:
- *   /        Enter filter mode
- *   Escape   Exit filter mode / clear filter, or exit cockpit
- *   Up/Down  Navigate rows
- *   Enter    Drill into selected workspace (fires onDrillIn)
- *   q        Quit cockpit
- *   ?        Toggle help overlay
+ *   Tab          Next tab
+ *   Shift+Tab    Previous tab
+ *   /            Enter filter mode (Workspaces + Seeds tabs)
+ *   Escape       Exit filter mode / clear filter, or exit cockpit
+ *   Up/Down      Navigate rows
+ *   Enter        Drill into selected workspace (Workspaces tab only)
+ *   q            Quit cockpit
+ *   ?            Toggle help overlay
  */
 import { useState, useMemo, useEffect, useCallback } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import TextInput from 'ink-text-input';
+import { adminCall } from '../../lib/client.js';
+import { resolveWorkspaceArg, resolveUserArg } from './inspect.js';
+import { classifyDeployment } from '../../lib/deployment.js';
+import { seedStatusColor } from './seedStatusColor.js';
+// ---------------------------------------------------------------------------
+// Env label derivation
+// ---------------------------------------------------------------------------
+function deriveEnvLabel(siteUrl) {
+    const tier = classifyDeployment(siteUrl);
+    if (tier === 'local')
+        return 'DEV';
+    if (tier === 'dev-cloud')
+        return 'DEV·CLOUD';
+    return 'PROD';
+}
 // ---------------------------------------------------------------------------
 // Health scoring
 // ---------------------------------------------------------------------------
@@ -46,6 +66,12 @@ function fuzzyMatch(ws, query) {
     const q = query.toLowerCase();
     return ws.name.toLowerCase().includes(q) || ws.slug.toLowerCase().includes(q);
 }
+function fuzzyMatchSeed(seed, query) {
+    if (!query)
+        return true;
+    const q = query.toLowerCase();
+    return seed.name.toLowerCase().includes(q) || seed.description.toLowerCase().includes(q);
+}
 // ---------------------------------------------------------------------------
 // Column widths
 // ---------------------------------------------------------------------------
@@ -54,6 +80,8 @@ const COL_ENTRIES = 8;
 const COL_COLS = 12;
 const COL_PARITY = 10;
 const COL_HEALTH = 14; // bar + percentage
+const COL_SEED_CMD = 34;
+const COL_SEED_STATUS = 10;
 function padRight(s, width) {
     return s.length >= width ? s.slice(0, width - 1) + '…' : s.padEnd(width);
 }
@@ -61,12 +89,338 @@ function padLeft(s, width) {
     return s.length >= width ? s.slice(0, width) : s.padStart(width);
 }
 // ---------------------------------------------------------------------------
-// Cockpit component
+// Tab names and order
+// ---------------------------------------------------------------------------
+const TABS = ['workspaces', 'seeds', 'changelog', 'manage'];
+const TAB_LABELS = {
+    workspaces: 'Workspaces',
+    seeds: 'Seeds',
+    changelog: 'Changelog',
+    manage: 'Manage',
+};
+function nextTab(current) {
+    const idx = TABS.indexOf(current);
+    return TABS[(idx + 1) % TABS.length];
+}
+function prevTab(current) {
+    const idx = TABS.indexOf(current);
+    return TABS[(idx - 1 + TABS.length) % TABS.length];
+}
+// ---------------------------------------------------------------------------
+// Env banner sub-component
+// ---------------------------------------------------------------------------
+function EnvBanner({ siteUrl }) {
+    const envLabel = deriveEnvLabel(siteUrl);
+    const envColor = envLabel === 'PROD' ? 'green' : envLabel === 'DEV·CLOUD' ? 'cyan' : 'yellow';
+    // Truncate siteUrl for display
+    const displayUrl = siteUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');
+    const truncUrl = displayUrl.length > 40 ? displayUrl.slice(0, 39) + '…' : displayUrl;
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "pb admin cockpit  " }), _jsxs(Text, { bold: true, color: envColor, children: ["[", envLabel, "]"] }), _jsxs(Text, { color: "gray", children: ["  ", truncUrl] })] }));
+}
 // ---------------------------------------------------------------------------
-// Braille spinner frames for the running fix indicator
+// Tab bar sub-component
+// ---------------------------------------------------------------------------
+function TabBar({ activeTab }) {
+    return (_jsxs(Box, { marginBottom: 1, children: [TABS.map((tab, i) => {
+                const isActive = tab === activeTab;
+                const label = TAB_LABELS[tab];
+                return (_jsx(Box, { marginRight: 2, children: isActive ? (_jsx(Text, { bold: true, color: "cyan", underline: true, children: label })) : (_jsx(Text, { color: "gray", children: label })) }, tab));
+            }), _jsx(Text, { dimColor: true, color: "gray", children: "  Tab/Shift+Tab to switch" })] }));
+}
+// ---------------------------------------------------------------------------
+// Seeds tab sub-component
+// ---------------------------------------------------------------------------
+// Braille spinner frames (shared)
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn, onRunFix }) {
+function SeedsTab({ seedRows }) {
+    const [filter, setFilter] = useState('');
+    const [isFiltering, setIsFiltering] = useState(false);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const filtered = useMemo(() => {
+        return seedRows.filter((s) => fuzzyMatchSeed(s, filter));
+    }, [seedRows, filter]);
+    const clampedIdx = Math.min(selectedIdx, Math.max(0, filtered.length - 1));
+    useInput((input, key) => {
+        if (isFiltering) {
+            if (key.escape) {
+                setIsFiltering(false);
+                setFilter('');
+            }
+            return;
+        }
+        if (input === '/') {
+            setIsFiltering(true);
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIdx((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIdx((i) => Math.min(filtered.length - 1, i + 1));
+            return;
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: "gray", bold: true, children: ['  ', padRight('COMMAND', COL_SEED_CMD), ' ', padRight('STATUS', COL_SEED_STATUS), 'WS?'] }) }), _jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_SEED_CMD + COL_SEED_STATUS + 10) }) }), filtered.length === 0 && (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: "gray", children: ["  No seeds match \"", filter, "\""] }) })), filtered.map((seed, idx) => {
+                const isSelected = idx === clampedIdx;
+                const shortName = seed.name.startsWith('seed:') ? seed.name.slice('seed:'.length) : seed.name;
+                const statusColor = seedStatusColor(seed.status); // WP-607 Task 5 + PR #792 round 4 (eX5Z5): each status gets its own colour — "mid-run"/"partial" never look like "never heard of it"
+                const appliedLabel = seed.appliedAt != null
+                    ? new Date(seed.appliedAt).toISOString().slice(0, 10)
+                    : '—';
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : 'white', children: padRight(shortName, COL_SEED_CMD - 2) }), _jsxs(Text, { color: statusColor, children: [' ', padRight(seed.summary ? `${seed.status} (${seed.summary})` : seed.status, COL_SEED_STATUS)] }), _jsx(Text, { dimColor: true, color: "gray", children: seed.requiresWorkspaceId ? 'ws' : '—' })] }), isSelected && (_jsxs(Box, { paddingLeft: 4, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, color: "gray", children: [seed.description, seed.dryRunSupported ? '  (dry-run ✓)' : ''] }), _jsxs(Text, { dimColor: true, color: "gray", children: ['applied: ', appliedLabel] })] }))] }, seed.name));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_SEED_CMD + COL_SEED_STATUS + 10) }) }), _jsx(Box, { marginTop: 0, children: isFiltering ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "/ " }), _jsx(TextInput, { value: filter, onChange: setFilter, onSubmit: () => setIsFiltering(false) })] })) : (_jsxs(Text, { color: "gray", children: [filtered.length, " seed", filtered.length !== 1 ? 's' : '', filter ? ` matching "${filter}"` : '', '  ', _jsx(Text, { dimColor: true, color: "gray", children: "/ filter \u00B7 \u2191\u2193 nav" })] })) })] }));
+}
+// ---------------------------------------------------------------------------
+// Changelog heatmap tab (WP-317 E8)
+// ---------------------------------------------------------------------------
+function ChangelogTab({ changelogRows, siteUrl }) {
+    // Group by day (YYYY-MM-DD), count per day
+    const countsByDay = new Map();
+    for (const row of changelogRows) {
+        const day = new Date(row.timestamp).toISOString().slice(0, 10);
+        countsByDay.set(day, (countsByDay.get(day) ?? 0) + 1);
+    }
+    // 90 days ending today
+    const today = new Date();
+    const days = [];
+    for (let i = 89; i >= 0; i--) {
+        const d = new Date(today);
+        d.setDate(today.getDate() - i);
+        days.push(d.toISOString().slice(0, 10));
+    }
+    function cell(day) {
+        const n = countsByDay.get(day) ?? 0;
+        if (n === 0)
+            return '·';
+        if (n <= 2)
+            return '░';
+        if (n <= 5)
+            return '▒';
+        return '█';
+    }
+    // Group into weeks of 7 days
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7) {
+        weeks.push(days.slice(i, i + 7));
+    }
+    // Month labels: collect unique months from week start days
+    const monthLabels = weeks.map((week) => {
+        const month = week[0] ? week[0].slice(0, 7) : '';
+        return month ? new Date(week[0] + 'T00:00:00Z').toLocaleString('default', { month: 'short' }) : '';
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, children: "Changelog \u2014 90 days" }), _jsx(Text, { dimColor: true, children: siteUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '     ' }), monthLabels.map((m, wi) => (_jsx(Text, { dimColor: true, children: m.padEnd(8).slice(0, 8) }, wi)))] }), _jsx(Box, { marginTop: 0, flexDirection: "column", children: [0, 1, 2, 3, 4, 5, 6].map((dow) => {
+                    const dayLabel = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][dow];
+                    return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: dayLabel + ' ' }), weeks.map((week, wi) => {
+                                const day = week[dow];
+                                return (_jsxs(Text, { children: [day ? cell(day) : ' ', ' '] }, wi));
+                            })] }, dow));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["\u00B7 0  \u2591 1-2  \u2592 3-5  \u2588 6+   ", days.length, " days, ", changelogRows.length, " change", changelogRows.length !== 1 ? 's' : ''] }) })] }));
+}
+const TEST_ONLY_WARNING = '⚠  TEST-ONLY — for onboarding reset testing only (BR-210)';
+const MANAGE_OPS = [
+    { op: 'delete-workspace', label: 'delete-workspace', description: 'Permanently delete a workspace and all its data' },
+    { op: 'delete-user', label: 'delete-user', description: 'Permanently delete a user across all workspaces' },
+];
+function ManageTab({ onFlowActive }) {
+    const [flowState, setFlowState] = useState('idle');
+    const [selectedOpIdx, setSelectedOpIdx] = useState(0);
+    const [selectedOp, setSelectedOp] = useState(null);
+    const [targetInput, setTargetInput] = useState('');
+    const [resolvedId, setResolvedId] = useState(null);
+    const [dryRunResult, setDryRunResult] = useState(null);
+    const [confirmInput, setConfirmInput] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [errorMsg, setErrorMsg] = useState(null);
+    const [spinnerFrame, setSpinnerFrame] = useState(0);
+    const [doneResult, setDoneResult] = useState(null);
+    useEffect(() => {
+        const isActive = flowState !== 'idle' && flowState !== 'done';
+        onFlowActive?.(isActive);
+    }, [flowState, onFlowActive]);
+    useEffect(() => {
+        if (!loading)
+            return;
+        const timer = setInterval(() => setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
+        return () => clearInterval(timer);
+    }, [loading]);
+    function goIdle() {
+        setFlowState('idle');
+        setSelectedOp(null);
+        setTargetInput('');
+        setResolvedId(null);
+        setDryRunResult(null);
+        setConfirmInput('');
+        setErrorMsg(null);
+        setDoneResult(null);
+    }
+    useInput((input, key) => {
+        if (flowState === 'idle') {
+            if (key.upArrow) {
+                setSelectedOpIdx((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setSelectedOpIdx((i) => Math.min(MANAGE_OPS.length - 1, i + 1));
+                return;
+            }
+            if (key.return) {
+                const op = MANAGE_OPS[selectedOpIdx].op;
+                setSelectedOp(op);
+                setFlowState('entering-target');
+                return;
+            }
+            return;
+        }
+        if (flowState === 'entering-target') {
+            if (key.escape) {
+                goIdle();
+                return;
+            }
+            return;
+        }
+        if (flowState === 'showing-dry-run') {
+            if (key.escape) {
+                goIdle();
+                return;
+            }
+            if (key.return) {
+                setFlowState('confirming');
+                setConfirmInput('');
+                return;
+            }
+            return;
+        }
+        if (flowState === 'confirming') {
+            if (key.escape) {
+                goIdle();
+                return;
+            }
+            return;
+        }
+        if (flowState === 'done') {
+            goIdle();
+            return;
+        }
+    });
+    async function handleTargetSubmit(value) {
+        if (!value.trim())
+            return;
+        setLoading(true);
+        setErrorMsg(null);
+        try {
+            let id;
+            if (selectedOp === 'delete-workspace') {
+                id = await resolveWorkspaceArg(value.trim());
+                if (!id) {
+                    setErrorMsg(`Workspace not found: "${value.trim()}"`);
+                    setLoading(false);
+                    return;
+                }
+            }
+            else {
+                id = await resolveUserArg(value.trim());
+            }
+            setResolvedId(id);
+            let result;
+            if (selectedOp === 'delete-workspace') {
+                result = await adminCall('manage:delete-workspace', { workspaceId: id, dryRun: true });
+            }
+            else {
+                result = await adminCall('manage:delete-user', { clerkUserId: id, dryRun: true });
+            }
+            if (result?.success === false && result?.reason === 'user_owns_workspace') {
+                setErrorMsg('Cannot delete: user is the sole member of a workspace. Delete the workspace first.');
+                setLoading(false);
+                return;
+            }
+            setDryRunResult(result);
+            setFlowState('showing-dry-run');
+        }
+        catch (err) {
+            setErrorMsg(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function handleConfirmSubmit(value) {
+        if (!resolvedId || !selectedOp)
+            return;
+        const expectedText = `DELETE ${targetInput.trim()}`;
+        if (value !== expectedText) {
+            setErrorMsg('Input did not match — try again');
+            setConfirmInput('');
+            return;
+        }
+        setLoading(true);
+        setErrorMsg(null);
+        try {
+            let result;
+            if (selectedOp === 'delete-workspace') {
+                result = await adminCall('manage:delete-workspace', { workspaceId: resolvedId, dryRun: false });
+            }
+            else {
+                result = await adminCall('manage:delete-user', { clerkUserId: resolvedId, dryRun: false });
+            }
+            if (result?.success === false && result?.reason === 'user_owns_workspace') {
+                setErrorMsg('Cannot delete: user is the sole member of a workspace.');
+                goIdle();
+                return;
+            }
+            setDoneResult(result);
+            setFlowState('done');
+            // done state renders success screen; user presses any key → goIdle() fires via useInput handler
+        }
+        catch (err) {
+            setErrorMsg(err instanceof Error ? err.message : String(err));
+            goIdle();
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    function renderDeletionDryRunSummary(result) {
+        if (!result)
+            return '—';
+        const log = result.deletionLog ?? [];
+        const total = log.reduce((sum, e) => sum + e.count, 0);
+        const lines = [`  Total rows to delete: ${total}`];
+        for (const entry of log) {
+            if (entry.count > 0)
+                lines.push(`    ${entry.table}: ${entry.count}`);
+        }
+        return lines.join('\n');
+    }
+    if (flowState === 'idle') {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "red", children: "Manage \u2014 Destructive Operations" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "yellow", children: TEST_ONLY_WARNING }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: "Select an operation:" }) }), MANAGE_OPS.map((item, idx) => {
+                    const isSelected = idx === selectedOpIdx;
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : 'white', children: item.label })] }), isSelected && (_jsx(Box, { paddingLeft: 4, children: _jsx(Text, { dimColor: true, color: "gray", children: item.description }) }))] }, item.op));
+                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", children: "\u2191\u2193 navigate \u00B7 Enter select" }) })] }));
+    }
+    if (flowState === 'entering-target') {
+        const prompt = selectedOp === 'delete-workspace' ? 'Enter workspace slug:' : 'Enter user email:';
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "red", children: ["Manage \u2014 ", selectedOp] }) }), loading ? (_jsxs(Text, { color: "cyan", children: [SPINNER_FRAMES[spinnerFrame], " Resolving\u2026"] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [prompt, " "] }), _jsx(TextInput, { value: targetInput, onChange: setTargetInput, onSubmit: (v) => { void handleTargetSubmit(v); } })] }), errorMsg && _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", errorMsg] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", children: "Enter confirm \u00B7 Escape cancel" }) })] }))] }));
+    }
+    if (flowState === 'showing-dry-run') {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "yellow", paddingX: 2, paddingY: 1, children: [_jsxs(Text, { bold: true, color: "yellow", children: ["Dry-run impact \u2014 ", selectedOp] }), _jsxs(Text, { color: "gray", children: ["Target: ", targetInput.trim()] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "red", bold: true, children: TEST_ONLY_WARNING }) }), _jsx(Text, { color: "white", children: renderDeletionDryRunSummary(dryRunResult) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", children: "Enter to confirm \u2192 \u00B7 Escape cancel" }) })] }));
+    }
+    if (flowState === 'confirming') {
+        const expectedText = `DELETE ${targetInput.trim()}`;
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "red", paddingX: 2, paddingY: 1, children: [_jsxs(Text, { bold: true, color: "red", children: ["\u26A0  CONFIRM DELETION \u2014 ", selectedOp] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { color: "red", bold: true, children: TEST_ONLY_WARNING }) }), loading ? (_jsxs(Text, { color: "cyan", children: [SPINNER_FRAMES[spinnerFrame], " Deleting\u2026"] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: ["Type ", _jsx(Text, { bold: true, children: expectedText }), " to confirm: "] }), _jsx(TextInput, { value: confirmInput, onChange: setConfirmInput, onSubmit: (v) => { void handleConfirmSubmit(v); } })] }), errorMsg && _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", errorMsg] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", children: "Enter confirm \u00B7 Escape cancel" }) })] }))] }));
+    }
+    if (flowState === 'done') {
+        const total = (doneResult?.deletionLog ?? []).reduce((sum, e) => sum + e.count, 0);
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "green", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "green", children: "\u2713 Deleted successfully" }), _jsxs(Text, { color: "gray", children: [total, " rows removed"] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, color: "gray", children: "Press any key to return" }) })] }));
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Cockpit component
+// ---------------------------------------------------------------------------
+export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn, onRunFix, siteUrl, seedRows, changelogRows, onFlowActive }) {
     const { exit } = useApp();
+    const [activeTab, setActiveTab] = useState('workspaces');
     const [filter, setFilter] = useState('');
     const [isFiltering, setIsFiltering] = useState(false);
     const [selectedIdx, setSelectedIdx] = useState(0);
@@ -77,6 +431,12 @@ export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn,
     const [spinnerFrame, setSpinnerFrame] = useState(0);
     /** Set of workspace _ids whose topIssue was cleared locally after a fix ran. */
     const [localFixes, setLocalFixes] = useState(new Set());
+    // ManageTab flow active — blocks Tab/Shift-Tab (WP-324 S2, done-when #4)
+    const [manageFlowActive, setManageFlowActive] = useState(false);
+    const handleManageFlowActive = useCallback((active) => {
+        setManageFlowActive(active);
+        onFlowActive?.(active);
+    }, [onFlowActive]);
     // Animate spinner while a fix is running
     useEffect(() => {
         if (!runningFix)
@@ -86,6 +446,17 @@ export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn,
         }, 80);
         return () => clearInterval(timer);
     }, [runningFix]);
+    // Mouse enable/disable (best-effort: ANSI X10 + SGR extension)
+    useEffect(() => {
+        if (!process.stdout.isTTY)
+            return;
+        // Enable mouse reporting: X10 (1000h) + SGR extension (1006h)
+        process.stdout.write('\x1b[?1000h\x1b[?1006h');
+        return () => {
+            // Disable on unmount
+            process.stdout.write('\x1b[?1000l\x1b[?1006l');
+        };
+    }, []);
     // Scored + sorted workspaces (worst-first) with filter applied
     const scored = useMemo(() => {
         const all = workspaces.map((ws) => ({ ws, health: computeHealth(ws) }));
@@ -98,6 +469,16 @@ export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn,
     }, [scored, filter]);
     // Keyboard handling
     useInput((input, key) => {
+        // Tab navigation — blocked during ManageTab destructive flow (WP-324 S2)
+        if (key.tab && !isFiltering && !confirmingFix && !runningFix && !manageFlowActive) {
+            if (key.shift) {
+                setActiveTab((t) => prevTab(t));
+            }
+            else {
+                setActiveTab((t) => nextTab(t));
+            }
+            return;
+        }
         // --- Fix confirm modal intercepts all input when active ---
         if (confirmingFix) {
             if (input === 'y' || input === 'Y') {
@@ -119,6 +500,14 @@ export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn,
         // Block input while fix is running
         if (runningFix)
             return;
+        // Seeds and Changelog tabs don't use workspaces key handling
+        if (activeTab !== 'workspaces') {
+            if (input === 'q' || key.escape) {
+                exit();
+                onExit();
+            }
+            return;
+        }
         if (isFiltering) {
             if (key.escape) {
                 setIsFiltering(false);
@@ -168,19 +557,19 @@ export function Cockpit({ workspaces, currentKeyWorkspaceId, onExit, onDrillIn,
     });
     // Clamp selectedIdx when filter changes
     const clampedIdx = Math.min(selectedIdx, Math.max(0, filtered.length - 1));
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "pb admin " }), _jsx(Text, { color: "gray", children: "\u2014 system cockpit" }), currentKeyWorkspaceId && (_jsxs(Text, { color: "gray", children: [" \u00B7 key workspace: ", currentKeyWorkspaceId.slice(0, 8), "\u2026"] }))] }), _jsx(Box, { children: _jsxs(Text, { color: "gray", bold: true, children: ['  ', padRight('WORKSPACE', COL_WORKSPACE), ' ', padLeft('ENTRIES', COL_ENTRIES), '  ', padRight('COLLECTIONS', COL_COLS), padRight('PARITY', COL_PARITY), 'HEALTH'] }) }), _jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_WORKSPACE + COL_ENTRIES + COL_COLS + COL_PARITY + COL_HEALTH + 4) }) }), filtered.length === 0 && (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: "gray", children: ["  No workspaces match \"", filter, "\""] }) })), filtered.map(({ ws, health }, idx) => {
-                const isSelected = idx === clampedIdx;
-                const isCurrent = ws._id === currentKeyWorkspaceId;
-                const parityLabel = ws.systemCollectionVersion !== null ? 'current' : 'stale';
-                const parityColor = ws.systemCollectionVersion !== null ? 'green' : 'yellow';
-                const bar = sparkbar(health);
-                const pct = `${health}%`;
-                const hasFixableIssue = !!ws.topIssue && !localFixes.has(ws._id);
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isCurrent ? 'cyan' : undefined, children: padRight(ws.slug || ws.name, COL_WORKSPACE) }), _jsxs(Text, { color: "gray", children: [' ', padLeft(ws.entryCount >= 9999 ? '9999+' : String(ws.entryCount), COL_ENTRIES), '  ', padRight(String(ws.collectionCount), COL_COLS)] }), _jsx(Text, { color: parityColor, children: padRight(parityLabel, COL_PARITY) }), _jsx(Text, { color: health >= 70 ? 'green' : health >= 40 ? 'yellow' : 'red', children: bar }), _jsxs(Text, { color: "gray", children: [' ', pct.padStart(4)] })] }), isSelected && hasFixableIssue && (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { dimColor: true, color: "yellow", children: ['↳ ', ws.topIssue.label, ' — press '] }), _jsx(Text, { color: "cyan", children: "f" }), _jsx(Text, { dimColor: true, color: "yellow", children: " to fix" })] }))] }, ws._id));
-            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_WORKSPACE + COL_ENTRIES + COL_COLS + COL_PARITY + COL_HEALTH + 4) }) }), _jsx(Box, { marginTop: 0, children: isFiltering ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "/ " }), _jsx(TextInput, { value: filter, onChange: setFilter, onSubmit: () => setIsFiltering(false) })] })) : runningFix ? (_jsxs(Text, { color: "cyan", children: [SPINNER_FRAMES[spinnerFrame], " Running fix\u2026"] })) : (_jsxs(Text, { color: "gray", children: [filtered.length, " workspace", filtered.length !== 1 ? 's' : '', filter ? ` matching "${filter}"` : '', '  ', _jsxs(Text, { color: "gray", dimColor: true, children: ['/ filter · ↑↓ nav · Enter drill-in · q quit · ? help', (() => {
-                                    const sel = filtered[clampedIdx];
-                                    return sel?.ws.topIssue && !localFixes.has(sel.ws._id) ? ' · f fix' : '';
-                                })()] })] })) }), confirmingFix && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Run fix?" }), _jsxs(Text, { color: "white", children: [" ", confirmingFix.cmd.label] }), _jsxs(Text, { dimColor: true, color: "gray", children: [" cmd: pb admin seed run ", confirmingFix.cmd.cmd, "  est. ", confirmingFix.cmd.estSeconds, "s"] }), _jsx(Text, { color: "gray", children: " " }), _jsxs(Text, { color: "gray", children: [_jsx(Text, { color: "cyan", children: "[y]" }), _jsx(Text, { color: "gray", children: " yes  " }), _jsx(Text, { color: "cyan", children: "[n]" }), _jsx(Text, { color: "gray", children: " no / Escape" })] })] })), showHelp && !confirmingFix && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Keyboard shortcuts" }), _jsx(Text, { color: "gray", children: " /        Start fuzzy filter" }), _jsx(Text, { color: "gray", children: " Escape   Clear filter / exit cockpit" }), _jsx(Text, { color: "gray", children: " \u2191 / \u2193    Navigate rows" }), _jsx(Text, { color: "gray", children: " Enter    Drill into selected workspace" }), _jsx(Text, { color: "gray", children: " f        Run suggested fix for selected row" }), _jsx(Text, { color: "gray", children: " q        Quit cockpit" }), _jsx(Text, { color: "gray", children: " ?        Toggle this help panel" }), _jsx(Text, { dimColor: true, color: "gray", children: " Press ? again to close" })] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(EnvBanner, { siteUrl: siteUrl }), _jsx(TabBar, { activeTab: activeTab }), activeTab === 'workspaces' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsxs(Text, { color: "gray", bold: true, children: ['  ', padRight('WORKSPACE', COL_WORKSPACE), ' ', padLeft('ENTRIES', COL_ENTRIES), '  ', padRight('COLLECTIONS', COL_COLS), padRight('PARITY', COL_PARITY), 'HEALTH'] }) }), _jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_WORKSPACE + COL_ENTRIES + COL_COLS + COL_PARITY + COL_HEALTH + 4) }) }), filtered.length === 0 && (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: "gray", children: ["  No workspaces match \"", filter, "\""] }) })), filtered.map(({ ws, health }, idx) => {
+                        const isSelected = idx === clampedIdx;
+                        const isCurrent = ws._id === currentKeyWorkspaceId;
+                        const parityLabel = ws.systemCollectionVersion !== null ? 'current' : 'stale';
+                        const parityColor = ws.systemCollectionVersion !== null ? 'green' : 'yellow';
+                        const bar = sparkbar(health);
+                        const pct = `${health}%`;
+                        const hasFixableIssue = !!ws.topIssue && !localFixes.has(ws._id);
+                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isCurrent ? 'cyan' : undefined, children: padRight(ws.slug || ws.name, COL_WORKSPACE) }), _jsxs(Text, { color: "gray", children: [' ', padLeft(ws.entryCount >= 9999 ? '9999+' : String(ws.entryCount), COL_ENTRIES), '  ', padRight(String(ws.collectionCount), COL_COLS)] }), _jsx(Text, { color: parityColor, children: padRight(parityLabel, COL_PARITY) }), _jsx(Text, { color: health >= 70 ? 'green' : health >= 40 ? 'yellow' : 'red', children: bar }), _jsxs(Text, { color: "gray", children: [' ', pct.padStart(4)] })] }), isSelected && hasFixableIssue && (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { dimColor: true, color: "yellow", children: ['↳ ', ws.topIssue.label, ' — press '] }), _jsx(Text, { color: "cyan", children: "f" }), _jsx(Text, { dimColor: true, color: "yellow", children: " to fix" })] }))] }, ws._id));
+                    }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: '  ' + '─'.repeat(COL_WORKSPACE + COL_ENTRIES + COL_COLS + COL_PARITY + COL_HEALTH + 4) }) }), _jsx(Box, { marginTop: 0, children: isFiltering ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "/ " }), _jsx(TextInput, { value: filter, onChange: setFilter, onSubmit: () => setIsFiltering(false) })] })) : runningFix ? (_jsxs(Text, { color: "cyan", children: [SPINNER_FRAMES[spinnerFrame], " Running fix\u2026"] })) : (_jsxs(Text, { color: "gray", children: [filtered.length, " workspace", filtered.length !== 1 ? 's' : '', filter ? ` matching "${filter}"` : '', '  ', _jsxs(Text, { color: "gray", dimColor: true, children: ['/ filter · ↑↓ nav · Enter drill-in · q quit · ? help', (() => {
+                                            const sel = filtered[clampedIdx];
+                                            return sel?.ws.topIssue && !localFixes.has(sel.ws._id) ? ' · f fix' : '';
+                                        })()] })] })) }), confirmingFix && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "cyan", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Run fix?" }), _jsxs(Text, { color: "white", children: [" ", confirmingFix.cmd.label] }), _jsxs(Text, { dimColor: true, color: "gray", children: [" cmd: pb admin seed run ", confirmingFix.cmd.cmd, "  est. ", confirmingFix.cmd.estSeconds, "s"] }), _jsx(Text, { color: "gray", children: " " }), _jsxs(Text, { color: "gray", children: [_jsx(Text, { color: "cyan", children: "[y]" }), _jsx(Text, { color: "gray", children: " yes  " }), _jsx(Text, { color: "cyan", children: "[n]" }), _jsx(Text, { color: "gray", children: " no / Escape" })] })] })), showHelp && !confirmingFix && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Keyboard shortcuts" }), _jsx(Text, { color: "gray", children: " Tab / Shift+Tab  Switch tabs" }), _jsx(Text, { color: "gray", children: " /               Start fuzzy filter" }), _jsx(Text, { color: "gray", children: " Escape          Clear filter / exit cockpit" }), _jsx(Text, { color: "gray", children: " \u2191 / \u2193           Navigate rows" }), _jsx(Text, { color: "gray", children: " Enter           Drill into selected workspace" }), _jsx(Text, { color: "gray", children: " f               Run suggested fix for selected row" }), _jsx(Text, { color: "gray", children: " q               Quit cockpit" }), _jsx(Text, { color: "gray", children: " ?               Toggle this help panel" }), _jsx(Text, { dimColor: true, color: "gray", children: " Press ? again to close" })] }))] })), activeTab === 'seeds' && (_jsx(SeedsTab, { seedRows: seedRows })), activeTab === 'changelog' && (_jsx(ChangelogTab, { changelogRows: changelogRows, siteUrl: siteUrl })), activeTab === 'manage' && (_jsx(ManageTab, { onFlowActive: handleManageFlowActive }))] }));
 }
 function statusIcon(ok, warn) {
     if (ok)