@matthesketh/fleet 1.1.0 → 1.6.0

package/dist/tui/hooks/use-health.js

@@ -1,8 +1,11 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { useStableState } from '@matthesketh/ink-stable-state';
 import { runFleetJson } from '../exec-bridge.js';
 import { useInterval } from './use-interval.js';
 export function useHealth(autoRefreshMs = 15_000) {
-    const [results, setResults] = useState([]);
+    // useStableState short-circuits setState when the new payload is structurally
+    // equal to the previous one — no flicker on identical poll cycles.
+    const [results, setResults] = useStableState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const initialised = useRef(false);
@@ -20,7 +23,7 @@ export function useHealth(autoRefreshMs = 15_000) {
             }
             setLoading(false);
         });
-    }, []);
+    }, [setResults]);
     useEffect(() => {
         refresh();
     }, [refresh]);

package/dist/tui/hooks/use-terminal-size.d.ts

@@ -0,0 +1 @@
+export { useTerminalSize, useAvailableHeight } from '@matthesketh/ink-viewport';

package/dist/tui/hooks/use-terminal-size.js

@@ -0,0 +1 @@
+export { useTerminalSize, useAvailableHeight } from '@matthesketh/ink-viewport';

package/dist/tui/router.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useReducer, useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useReducer, useState, useEffect, useCallback, useRef } from 'react';
 import { Box, Text } from 'ink';
-import { reducer, initialState, AppStateContext, AppDispatchContext } from './state.js';
-import { useKeyboard } from './hooks/use-keyboard.js';
+import { InputDispatcher } from '@matthesketh/ink-input-dispatcher';
+import { Viewport } from '@matthesketh/ink-viewport';
+import { ToastProvider } from '@matthesketh/ink-toast';
+import { ToastContainer } from '@matthesketh/ink-toast';
+import { checkForUpdate, applyUpdate } from '../core/self-update.js';
+import { KeyBindingHelp } from '@matthesketh/ink-keybinding-help';
+import { reducer, initialState, AppStateContext, AppDispatchContext, nextTopView } from './state.js';
 import { Header } from './components/Header.js';
 import { KeyHint } from './components/KeyHint.js';
 import { Confirm } from './components/Confirm.js';
@@ -13,6 +18,35 @@ import { SecretEdit } from './views/SecretEdit.js';
 import { HealthView } from './views/HealthView.js';
 import { LogsView } from './views/LogsView.js';
 import { isSealed, isInitialized } from '../core/secrets.js';
+const HELP_GROUPS = [
+    {
+        title: 'Navigation',
+        bindings: [
+            { key: 'j/k', description: 'move up/down' },
+            { key: 'Enter', description: 'select / confirm' },
+            { key: 'Tab', description: 'switch view' },
+            { key: 'Esc', description: 'go back' },
+        ],
+    },
+    {
+        title: 'Actions',
+        bindings: [
+            { key: 'x', description: 'toggle redaction' },
+            { key: 'f', description: 'follow logs' },
+            { key: 'q', description: 'quit' },
+        ],
+    },
+    {
+        title: 'Secrets',
+        bindings: [
+            { key: 'u', description: 'unseal vault' },
+            { key: 'l', description: 'seal vault' },
+            { key: 'a', description: 'add secret' },
+            { key: 'd', description: 'delete secret' },
+            { key: 'r', description: 'reveal / hide' },
+        ],
+    },
+];
 function ViewRouter() {
     const state = React.useContext(AppStateContext);
     switch (state.currentView) {
@@ -32,13 +66,44 @@ function ViewRouter() {
             return _jsx(Dashboard, {});
     }
 }
-function KeyboardHandler() {
-    useKeyboard();
-    return null;
+const CHROME_ROWS = 6;
+function UpdateBanner({ info, inProgress }) {
+    if (!info?.available && !inProgress)
+        return null;
+    if (inProgress) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, children: _jsx(Text, { color: "yellow", children: "Updating fleet\u2026 (git pull + npm run build)" }) }) }));
+    }
+    const ahead = info.behind;
+    const subject = info.latestSubject ? ` — ${info.latestSubject}` : '';
+    return (_jsx(Box, { paddingX: 1, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Text, { color: "cyan", children: ["\u2191 Update available: ", ahead, " commit", ahead === 1 ? '' : 's', " ahead", subject, ". Press "] }), _jsx(Text, { color: "cyan", bold: true, children: "U" }), _jsx(Text, { color: "cyan", children: " to install." })] }) }));
 }
 export function App() {
     const [state, dispatch] = useReducer(reducer, initialState);
     const [vaultSealed, setVaultSealed] = useState(true);
+    const [showHelp, setShowHelp] = useState(false);
+    const [updateInfo, setUpdateInfo] = useState(null);
+    const [updateInProgress, setUpdateInProgress] = useState(false);
+    const confirmRef = useRef(state.confirmAction);
+    const updateInfoRef = useRef(null);
+    const updateInProgressRef = useRef(false);
+    useEffect(() => {
+        confirmRef.current = state.confirmAction;
+    }, [state.confirmAction]);
+    useEffect(() => { updateInfoRef.current = updateInfo; }, [updateInfo]);
+    useEffect(() => { updateInProgressRef.current = updateInProgress; }, [updateInProgress]);
+    // One-shot update check on mount + a recheck every 30 minutes for long sessions.
+    useEffect(() => {
+        let cancelled = false;
+        const run = () => {
+            checkForUpdate().then(info => {
+                if (!cancelled)
+                    setUpdateInfo(info);
+            }).catch(() => { });
+        };
+        run();
+        const interval = setInterval(run, 30 * 60 * 1000);
+        return () => { cancelled = true; clearInterval(interval); };
+    }, []);
     useEffect(() => {
         try {
             if (isInitialized()) {
@@ -61,5 +126,65 @@ export function App() {
         }, 5000);
         return () => clearInterval(interval);
     }, []);
-    return (_jsx(AppStateContext.Provider, { value: state, children: _jsxs(AppDispatchContext.Provider, { value: dispatch, children: [_jsx(KeyboardHandler, {}), _jsxs(Box, { flexDirection: "column", height: process.stdout.rows || 24, children: [_jsx(Header, { vaultSealed: vaultSealed }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(ViewRouter, {}), _jsx(Confirm, {}), state.error && (_jsx(Box, { paddingX: 1, children: _jsx(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, children: _jsx(Text, { color: "red", children: state.error }) }) }))] }), _jsx(KeyHint, {})] })] }) }));
+    const globalHandler = useCallback((input, key) => {
+        if (showHelp) {
+            setShowHelp(false);
+            return true;
+        }
+        if (confirmRef.current) {
+            if (input === 'y' || input === 'Y') {
+                confirmRef.current.onConfirm();
+                dispatch({ type: 'CANCEL_CONFIRM' });
+            }
+            else if (input === 'n' || input === 'N' || key.escape) {
+                dispatch({ type: 'CANCEL_CONFIRM' });
+            }
+            return true;
+        }
+        if (input === '?' && state.currentView !== 'secret-edit') {
+            setShowHelp(true);
+            return true;
+        }
+        if (input === 'q' && state.currentView !== 'secret-edit') {
+            process.exit(0);
+            return true;
+        }
+        if (input === 'x' && state.currentView !== 'secret-edit') {
+            dispatch({ type: 'TOGGLE_REDACT' });
+            return true;
+        }
+        // U → apply pending update. Only fires when one is actually available.
+        if ((input === 'U' || input === 'u') && state.currentView !== 'secret-edit') {
+            const info = updateInfoRef.current;
+            if (info?.available && !updateInProgressRef.current) {
+                setUpdateInProgress(true);
+                applyUpdate().then(result => {
+                    setUpdateInProgress(false);
+                    if (result.ok) {
+                        setUpdateInfo({ available: false, behind: 0, latestSubject: '', branch: info.branch });
+                    }
+                    // Result reported via UpdateBanner below.
+                    App.__lastUpdateOutput = result.output;
+                }).catch(err => {
+                    setUpdateInProgress(false);
+                    App.__lastUpdateOutput = err instanceof Error ? err.message : String(err);
+                });
+                return true;
+            }
+        }
+        if (key.tab) {
+            const topViews = ['dashboard', 'health', 'secrets', 'logs-multi'];
+            const base = topViews.includes(state.currentView)
+                ? state.currentView
+                : state.previousView ?? 'dashboard';
+            dispatch({ type: 'NAVIGATE', view: nextTopView(base) });
+            return true;
+        }
+        if (key.escape && state.previousView) {
+            dispatch({ type: 'GO_BACK' });
+            return true;
+        }
+        return false;
+    }, [state.currentView, state.previousView, showHelp]);
+    return (_jsx(AppStateContext.Provider, { value: state, children: _jsx(AppDispatchContext.Provider, { value: dispatch, children: _jsx(ToastProvider, { children: _jsx(InputDispatcher, { globalHandler: globalHandler, children: _jsxs(Viewport, { chrome: CHROME_ROWS, children: [_jsx(Header, { vaultSealed: vaultSealed }), _jsx(UpdateBanner, { info: updateInfo, inProgress: updateInProgress }), _jsx(Box, { flexGrow: 1, flexDirection: "column", children: showHelp ? (_jsx(KeyBindingHelp, { groups: HELP_GROUPS, title: "Fleet TUI \u2014 Keyboard Shortcuts" })) : (_jsxs(_Fragment, { children: [_jsx(ViewRouter, {}), _jsx(Confirm, {}), state.error && (_jsx(Box, { paddingX: 1, children: _jsx(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, children: _jsx(Text, { color: "red", children: state.error }) }) }))] })) }), _jsx(ToastContainer, {}), _jsx(KeyHint, {})] }) }) }) }) }));
 }

package/dist/tui/routines/RoutinesApp.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Registry } from '../../core/registry.js';
+import type { RoutinesRuntime } from './runtime.js';
+export interface RoutinesAppProps {
+    runtime: RoutinesRuntime;
+    registry: Registry;
+}
+export declare function RoutinesApp({ runtime, registry }: RoutinesAppProps): React.JSX.Element;

package/dist/tui/routines/RoutinesApp.js

@@ -0,0 +1,277 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Box, Text } from 'ink';
+import { Tabs } from '@matthesketh/ink-tabs';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { CostTab } from './tabs/CostTab.js';
+import { DashboardTab } from './tabs/DashboardTab.js';
+import { GitTab } from './tabs/GitTab.js';
+import { LogsTab } from './tabs/LogsTab.js';
+import { OpsTab } from './tabs/OpsTab.js';
+import { RepoDetailView } from './tabs/RepoDetailView.js';
+import { RoutinesTab } from './tabs/RoutinesTab.js';
+import { ScaffoldTab } from './tabs/ScaffoldTab.js';
+import { SecurityTab } from './tabs/SecurityTab.js';
+import { SettingsTab } from './tabs/SettingsTab.js';
+import { TimelineTab } from './tabs/TimelineTab.js';
+import { RoutineForm } from './components/RoutineForm.js';
+import { CommandPalette } from './components/CommandPalette.js';
+import { LiveRunPanel } from './components/LiveRunPanel.js';
+import { useSignals } from './hooks/use-signals.js';
+function targetsForRegistry(apps) {
+    return apps.map(a => ({
+        repoName: a.name,
+        repoPath: typeof a.composePath === 'string' && a.composePath ? a.composePath : '',
+    }));
+}
+export function RoutinesApp({ runtime, registry }) {
+    const [activeTab, setActiveTab] = useState('dashboard');
+    const [dashboardIndex, setDashboardIndex] = useState(0);
+    const [routinesIndex, setRoutinesIndex] = useState(0);
+    const [routinesDetail, setRoutinesDetail] = useState(false);
+    const [focusedRepo, setFocusedRepo] = useState(null);
+    const [modal, setModal] = useState(null);
+    const [routinesVersion, setRoutinesVersion] = useState(0);
+    const targets = useMemo(() => targetsForRegistry(registry.apps), [registry]);
+    const { snapshot, loading, lastRefreshed, refresh } = useSignals(runtime.collector, targets, 30_000);
+    const routines = useMemo(() => {
+        void routinesVersion;
+        runtime.store.reload();
+        return runtime.store.list();
+    }, [runtime.store, routinesVersion]);
+    const dashboardRows = useMemo(() => targets.map(t => ({ repo: t.repoName, signals: snapshot.get(t.repoName) ?? [] })), [targets, snapshot]);
+    const bump = () => setRoutinesVersion(v => v + 1);
+    const handleFormSubmit = async (routine) => {
+        await runtime.engine.register(routine);
+        setModal(null);
+        bump();
+    };
+    const handleDelete = async (id) => {
+        await runtime.engine.unregister(id);
+        setModal(null);
+        setRoutinesIndex(i => Math.max(0, Math.min(i, routines.length - 2)));
+        bump();
+    };
+    const paletteActions = useMemo(() => {
+        const items = [
+            { id: 'nav:dashboard', group: 'nav', label: 'go to Dashboard' },
+            { id: 'nav:routines', group: 'nav', label: 'go to Routines' },
+            { id: 'action:refresh', group: 'action', label: 'refresh signals now' },
+            { id: 'action:new', group: 'action', label: 'new routine…' },
+        ];
+        for (const r of routines) {
+            items.push({ id: `routine:run:${r.id}`, group: 'routine', label: `run "${r.id}" now` });
+            items.push({ id: `routine:edit:${r.id}`, group: 'routine', label: `edit "${r.id}"` });
+            items.push({
+                id: `routine:toggle:${r.id}`,
+                group: 'routine',
+                label: r.enabled ? `disable "${r.id}"` : `enable "${r.id}"`,
+            });
+        }
+        for (const app of registry.apps) {
+            items.push({ id: `repo:${app.name}`, group: 'repo', label: `focus repo "${app.name}"` });
+        }
+        return items;
+    }, [routines, registry]);
+    const handlePalette = async (action) => {
+        setModal(null);
+        if (action.id === 'nav:dashboard') {
+            setActiveTab('dashboard');
+            return;
+        }
+        if (action.id === 'nav:routines') {
+            setActiveTab('routines');
+            return;
+        }
+        if (action.id === 'action:refresh') {
+            await refresh(true);
+            return;
+        }
+        if (action.id === 'action:new') {
+            setModal({ kind: 'form' });
+            return;
+        }
+        if (action.id.startsWith('routine:run:')) {
+            const id = action.id.slice('routine:run:'.length);
+            setActiveTab('routines');
+            setModal({ kind: 'live-run', routineId: id });
+            return;
+        }
+        if (action.id.startsWith('routine:edit:')) {
+            const id = action.id.slice('routine:edit:'.length);
+            const r = runtime.store.get(id);
+            if (r)
+                setModal({ kind: 'form', initial: r });
+            return;
+        }
+        if (action.id.startsWith('routine:toggle:')) {
+            const id = action.id.slice('routine:toggle:'.length);
+            const r = runtime.store.get(id);
+            if (r)
+                await runtime.engine.register({ ...r, enabled: !r.enabled });
+            bump();
+            return;
+        }
+        if (action.id.startsWith('repo:')) {
+            const repo = action.id.slice('repo:'.length);
+            setFocusedRepo(repo);
+            setActiveTab('repo-detail');
+        }
+    };
+    useRegisterHandler((input, key) => {
+        if (modal?.kind === 'palette')
+            return false;
+        if (modal)
+            return false;
+        if (input === 'p' || (key.ctrl && input === 'k')) {
+            setModal({ kind: 'palette' });
+            return true;
+        }
+        if (input === '1') {
+            setActiveTab('dashboard');
+            return true;
+        }
+        if (input === '2') {
+            setActiveTab('routines');
+            setRoutinesDetail(false);
+            return true;
+        }
+        if (input === '3') {
+            setActiveTab('git');
+            return true;
+        }
+        if (input === '4') {
+            setActiveTab('ops');
+            return true;
+        }
+        if (input === '5') {
+            setActiveTab('security');
+            return true;
+        }
+        if (input === '6') {
+            setActiveTab('logs');
+            return true;
+        }
+        if (input === '7') {
+            setActiveTab('cost');
+            return true;
+        }
+        if (input === '8') {
+            setActiveTab('timeline');
+            return true;
+        }
+        if (input === '9') {
+            setActiveTab('scaffold');
+            return true;
+        }
+        if (input === '0') {
+            setActiveTab('settings');
+            return true;
+        }
+        if (activeTab === 'repo-detail') {
+            if (key.escape) {
+                setActiveTab('dashboard');
+                setFocusedRepo(null);
+                return true;
+            }
+            if (input === 'a') {
+                const nightly = runtime.store.get('nightly-audit');
+                if (nightly)
+                    setModal({ kind: 'live-run', routineId: nightly.id });
+                return true;
+            }
+            return false;
+        }
+        if (activeTab === 'dashboard') {
+            if (input === 'j' || key.downArrow) {
+                setDashboardIndex(i => Math.min(i + 1, Math.max(dashboardRows.length - 1, 0)));
+                return true;
+            }
+            if (input === 'k' || key.upArrow) {
+                setDashboardIndex(i => Math.max(i - 1, 0));
+                return true;
+            }
+            if (input === 'r') {
+                void refresh(true);
+                return true;
+            }
+            if (key.return && dashboardRows[dashboardIndex]) {
+                setFocusedRepo(dashboardRows[dashboardIndex].repo);
+                setActiveTab('repo-detail');
+                return true;
+            }
+        }
+        if (activeTab === 'routines') {
+            if (input === 'j' || key.downArrow) {
+                setRoutinesIndex(i => Math.min(i + 1, Math.max(routines.length - 1, 0)));
+                return true;
+            }
+            if (input === 'k' || key.upArrow) {
+                setRoutinesIndex(i => Math.max(i - 1, 0));
+                return true;
+            }
+            if (key.return) {
+                setRoutinesDetail(o => !o);
+                return true;
+            }
+            if (key.escape) {
+                setRoutinesDetail(false);
+                return true;
+            }
+            const selected = routines[routinesIndex];
+            if (input === 'n') {
+                setModal({ kind: 'form' });
+                return true;
+            }
+            if (input === 'e' && selected) {
+                setModal({ kind: 'form', initial: selected });
+                return true;
+            }
+            if (input === 'd' && selected) {
+                setModal({ kind: 'delete', id: selected.id });
+                return true;
+            }
+            if (input === 't' && selected) {
+                void runtime.engine.register({ ...selected, enabled: !selected.enabled }).then(bump);
+                return true;
+            }
+            if (input === 'r' && selected) {
+                setModal({ kind: 'live-run', routineId: selected.id });
+                return true;
+            }
+        }
+        return false;
+    });
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Tabs, { tabs: [
+                    { id: 'dashboard', label: '1  Dashboard', badge: dashboardRows.length },
+                    { id: 'routines', label: '2  Routines', badge: routines.length },
+                    { id: 'git', label: '3  Git' },
+                    { id: 'ops', label: '4  Ops' },
+                    { id: 'security', label: '5  Security' },
+                    { id: 'logs', label: '6  Logs' },
+                    { id: 'cost', label: '7  Cost' },
+                    { id: 'timeline', label: '8  Timeline' },
+                    { id: 'scaffold', label: '9  Scaffold' },
+                    { id: 'settings', label: '0  Settings' },
+                    ...(activeTab === 'repo-detail' ? [{ id: 'repo-detail', label: `◆  ${focusedRepo ?? ''}` }] : []),
+                ], activeId: activeTab, accentColor: "cyan" }), activeTab === 'dashboard' && (_jsx(DashboardTab, { rows: dashboardRows, selectedIndex: dashboardIndex, loading: loading, lastRefreshed: lastRefreshed, signalsByRepo: snapshot, seededNotice: runtime.seeded })), activeTab === 'routines' && (_jsx(RoutinesTab, { engine: runtime.engine, routines: routines, selectedIndex: routinesIndex, detailOpen: routinesDetail })), activeTab === 'git' && _jsx(GitTab, { apps: registry.apps }), activeTab === 'ops' && _jsx(OpsTab, { apps: registry.apps }), activeTab === 'security' && _jsx(SecurityTab, { apps: registry.apps }), activeTab === 'logs' && _jsx(LogsTab, { apps: registry.apps }), activeTab === 'cost' && _jsx(CostTab, { engine: runtime.engine }), activeTab === 'timeline' && _jsx(TimelineTab, { engine: runtime.engine }), activeTab === 'scaffold' && _jsx(ScaffoldTab, {}), activeTab === 'settings' && _jsx(SettingsTab, { runtime: runtime }), activeTab === 'repo-detail' && focusedRepo && (() => {
+                const app = registry.apps.find(a => a.name === focusedRepo);
+                return app
+                    ? _jsx(RepoDetailView, { app: app })
+                    : _jsxs(Text, { color: "red", children: ["repo not found: ", focusedRepo] });
+            })(), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "1-8 tabs \u00B7 9 scaffold \u00B7 0 settings \u00B7 p palette \u00B7 j/k \u00B7 enter drill \u00B7 n/e/d/t routines \u00B7 r run \u00B7 Esc back \u00B7 q quit" }) }), modal?.kind === 'form' && (_jsx(RoutineForm, { initial: modal.initial, onSubmit: (r) => { void handleFormSubmit(r); }, onCancel: () => setModal(null) })), modal?.kind === 'delete' && (_jsx(ConfirmDelete, { id: modal.id, onConfirm: () => { void handleDelete(modal.id); }, onCancel: () => setModal(null) })), modal?.kind === 'palette' && (_jsx(CommandPalette, { actions: paletteActions, onSelect: (action) => { void handlePalette(action); }, onCancel: () => setModal(null) })), modal?.kind === 'live-run' && (_jsx(LiveRunPanel, { engine: runtime.engine, routineId: modal.routineId, onClose: () => { setModal(null); bump(); } }))] }));
+}
+function ConfirmDelete({ id, onConfirm, onCancel }) {
+    useRegisterHandler((input, key) => {
+        if (input === 'y' || input === 'Y') {
+            onConfirm();
+            return true;
+        }
+        if (input === 'n' || input === 'N' || key.escape) {
+            onCancel();
+            return true;
+        }
+        return false;
+    });
+    return (_jsx(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, marginTop: 1, children: _jsxs(Text, { children: ["Delete routine ", _jsx(Text, { bold: true, color: "cyan", children: id }), "? ", _jsx(Text, { color: "green", children: "y" }), " confirm   ", _jsx(Text, { color: "red", children: "n" }), " cancel"] }) }));
+}

package/dist/tui/routines/components/AlertsPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Signal } from '../../../core/routines/schema.js';
+export interface AlertsPanelProps {
+    signals: Map<string, Signal[]>;
+    maxRows?: number;
+}
+export declare function AlertsPanel({ signals, maxRows }: AlertsPanelProps): React.JSX.Element;

package/dist/tui/routines/components/AlertsPanel.js

@@ -0,0 +1,22 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { signalStateColor, truncate } from '../format.js';
+export function AlertsPanel({ signals, maxRows = 8 }) {
+    const alerts = [];
+    for (const [repo, list] of signals) {
+        for (const sig of list) {
+            if (sig.state === 'error' || sig.state === 'warn') {
+                alerts.push({ repo, signal: sig });
+            }
+        }
+    }
+    alerts.sort((a, b) => {
+        const order = (s) => (s.state === 'error' ? 0 : 1);
+        const diff = order(a.signal) - order(b.signal);
+        if (diff !== 0)
+            return diff;
+        return a.repo.localeCompare(b.repo);
+    });
+    const rows = alerts.slice(0, maxRows);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { bold: true, children: ["Alerts (", alerts.length, ")"] }), rows.length === 0 && _jsx(Text, { color: "green", children: "  all clear" }), rows.map((a, i) => (_jsxs(Box, { children: [_jsx(Text, { color: signalStateColor[a.signal.state], children: "\u25CF " }), _jsx(Box, { width: 20, children: _jsx(Text, { children: truncate(a.repo, 18) }) }), _jsx(Box, { width: 14, children: _jsx(Text, { color: "gray", children: a.signal.kind }) }), _jsx(Text, { children: truncate(a.signal.detail || String(a.signal.value ?? ''), 50) })] }, `${a.repo}-${a.signal.kind}-${i}`))), alerts.length > maxRows && (_jsxs(Text, { color: "gray", children: ["  +", alerts.length - maxRows, " more\u2026"] }))] }));
+}

package/dist/tui/routines/components/AlertsPanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tui/routines/components/AlertsPanel.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { describe, it, expect } from 'vitest';
+import { AlertsPanel } from './AlertsPanel.js';
+const mk = (repo, kind, state, detail) => ({
+    repo, kind, state, value: null, detail,
+    collectedAt: new Date().toISOString(), ttlMs: 10_000,
+});
+describe('AlertsPanel', () => {
+    it('shows "all clear" when no warn/error signals present', () => {
+        const map = new Map([
+            ['a', [mk('a', 'git-clean', 'ok', '')]],
+        ]);
+        const { lastFrame } = render(_jsx(AlertsPanel, { signals: map }));
+        expect(lastFrame()).toContain('all clear');
+    });
+    it('lists error signals with their detail', () => {
+        const map = new Map([
+            ['my-app', [mk('my-app', 'container-up', 'error', 'all containers down')]],
+        ]);
+        const { lastFrame } = render(_jsx(AlertsPanel, { signals: map }));
+        const frame = lastFrame();
+        expect(frame).toContain('my-app');
+        expect(frame).toContain('container-up');
+        expect(frame).toContain('all containers down');
+    });
+    it('orders errors before warns', () => {
+        const map = new Map([
+            ['warn-repo', [mk('warn-repo', 'git-clean', 'warn', '3 changes')]],
+            ['err-repo', [mk('err-repo', 'ci-status', 'error', 'build failed')]],
+        ]);
+        const { lastFrame } = render(_jsx(AlertsPanel, { signals: map }));
+        const frame = lastFrame();
+        const errIdx = frame.indexOf('err-repo');
+        const warnIdx = frame.indexOf('warn-repo');
+        expect(errIdx).toBeGreaterThan(-1);
+        expect(warnIdx).toBeGreaterThan(-1);
+        expect(errIdx).toBeLessThan(warnIdx);
+    });
+    it('truncates the alert count header', () => {
+        const signals = [];
+        for (let i = 0; i < 20; i++)
+            signals.push(mk(`r${i}`, 'git-clean', 'error', `issue ${i}`));
+        const map = new Map();
+        for (const s of signals)
+            map.set(s.repo, [s]);
+        const { lastFrame } = render(_jsx(AlertsPanel, { signals: map, maxRows: 5 }));
+        const frame = lastFrame();
+        expect(frame).toContain('Alerts (20)');
+        expect(frame).toContain('+15 more');
+    });
+});

package/dist/tui/routines/components/CommandPalette.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface PaletteAction {
+    id: string;
+    label: string;
+    group: 'nav' | 'routine' | 'repo' | 'action';
+}
+export interface CommandPaletteProps {
+    actions: PaletteAction[];
+    onSelect(action: PaletteAction): void;
+    onCancel(): void;
+}
+export declare function CommandPalette({ actions, onSelect, onCancel }: CommandPaletteProps): React.JSX.Element;

package/dist/tui/routines/components/CommandPalette.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { FuzzySelect } from '@matthesketh/ink-fuzzy-select';
+const GROUP_COLOR = {
+    nav: 'cyan',
+    routine: 'magenta',
+    repo: 'yellow',
+    action: 'green',
+};
+export function CommandPalette({ actions, onSelect, onCancel }) {
+    const items = actions.map(a => ({ label: a.label, value: a.id }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "\u2318  command palette" }), _jsx(FuzzySelect, { items: items, onSelect: (item) => {
+                    const found = actions.find(a => a.id === item.value);
+                    if (found)
+                        onSelect(found);
+                }, onCancel: onCancel, placeholder: "type to search commands\u2026", maxVisible: 10, renderItem: (item, selected) => {
+                    const full = actions.find(a => a.id === item.value);
+                    const color = full ? GROUP_COLOR[full.group] : 'gray';
+                    return (_jsxs(Box, { children: [_jsx(Box, { width: 2, children: _jsx(Text, { color: selected ? 'cyan' : undefined, children: selected ? '▶' : ' ' }) }), _jsx(Box, { width: 10, children: _jsxs(Text, { color: color, children: ["[", full?.group ?? '?', "]"] }) }), _jsx(Text, { color: selected ? 'cyan' : undefined, children: item.label })] }));
+                } }), _jsx(Text, { color: "gray", children: "Enter select \u00B7 Esc cancel" })] }));
+}

package/dist/tui/routines/components/LiveRunPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RoutineEngine } from '../../../core/routines/engine.js';
+export interface LiveRunPanelProps {
+    engine: RoutineEngine;
+    routineId: string;
+    target?: {
+        repo: string | null;
+        repoPath: string | null;
+    };
+    onClose(): void;
+}
+export declare function LiveRunPanel({ engine, routineId, target, onClose }: LiveRunPanelProps): React.JSX.Element;