@matthesketh/fleet 1.0.0 → 1.2.0

package/dist/tui/tests/keyboard-integration.test.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { describe, it, expect } from 'vitest';
+import { TestApp } from './test-app.js';
+const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+const apps = ['app-alpha', 'app-bravo', 'app-charlie'];
+describe('keyboard integration', () => {
+    it('tab switches between top-level views', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        expect(lastFrame()).toContain('view:dashboard');
+        stdin.write('\t');
+        await delay(50);
+        expect(lastFrame()).toContain('view:health');
+        stdin.write('\t');
+        await delay(50);
+        expect(lastFrame()).toContain('view:secrets');
+        stdin.write('\t');
+        await delay(50);
+        expect(lastFrame()).toContain('view:dashboard');
+    });
+    it('arrow down moves selection in dashboard', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        expect(lastFrame()).toContain('> app-alpha');
+        stdin.write('\x1B[B');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-bravo');
+        stdin.write('\x1B[B');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-charlie');
+    });
+    it('arrow up moves selection up in dashboard', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('\x1B[B');
+        await delay(50);
+        stdin.write('\x1B[B');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-charlie');
+        stdin.write('\x1B[A');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-bravo');
+    });
+    it('j/k keys also navigate the list', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('j');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-bravo');
+        stdin.write('k');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-alpha');
+    });
+    it('enter selects an app and navigates to detail', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('j');
+        await delay(50);
+        stdin.write('\r');
+        await delay(50);
+        expect(lastFrame()).toContain('view:app-detail');
+        expect(lastFrame()).toContain('detail:app-bravo');
+    });
+    it('escape goes back from sub-view', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('\r');
+        await delay(50);
+        expect(lastFrame()).toContain('view:app-detail');
+        stdin.write('\x1B');
+        await delay(50);
+        expect(lastFrame()).toContain('view:dashboard');
+    });
+    it('arrow keys are clamped at list boundaries', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('\x1B[A');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-alpha');
+        stdin.write('\x1B[B');
+        await delay(50);
+        stdin.write('\x1B[B');
+        await delay(50);
+        stdin.write('\x1B[B');
+        await delay(50);
+        expect(lastFrame()).toContain('> app-charlie');
+    });
+    it('? toggles help overlay and any key dismisses it', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('?');
+        await delay(50);
+        expect(lastFrame()).toContain('help-overlay');
+        stdin.write('x');
+        await delay(50);
+        expect(lastFrame()).not.toContain('help-overlay');
+    });
+    it('tab works from a sub-view, using previousView as base', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('\r');
+        await delay(50);
+        expect(lastFrame()).toContain('view:app-detail');
+        stdin.write('\t');
+        await delay(50);
+        expect(lastFrame()).toContain('view:health');
+    });
+    it('escape does nothing on top-level view with no previousView', async () => {
+        const { stdin, lastFrame } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        expect(lastFrame()).toContain('view:dashboard');
+        stdin.write('\x1B');
+        await delay(50);
+        expect(lastFrame()).toContain('view:dashboard');
+    });
+});

package/dist/tui/tests/test-app.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function TestApp({ items }: {
+    items: string[];
+}): React.JSX.Element;

package/dist/tui/tests/test-app.js

@@ -0,0 +1,79 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useReducer, useState, useCallback } from 'react';
+import { Text, Box } from 'ink';
+import { InputDispatcher, useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { reducer, initialState, nextTopView } from '../state.js';
+function MockDashboard({ state, dispatch, items, }) {
+    const handler = (input, key) => {
+        if (items.length === 0)
+            return false;
+        if (input === 'j' || key.downArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'dashboard', index: Math.min(state.dashboardIndex + 1, items.length - 1) });
+            return true;
+        }
+        if (input === 'k' || key.upArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'dashboard', index: Math.max(state.dashboardIndex - 1, 0) });
+            return true;
+        }
+        if (key.return) {
+            dispatch({ type: 'SELECT_APP', app: items[state.dashboardIndex] });
+            dispatch({ type: 'NAVIGATE', view: 'app-detail' });
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(handler);
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => (_jsxs(Text, { children: [i === state.dashboardIndex ? '> ' : '  ', item] }, item))) }));
+}
+export function TestApp({ items }) {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const [showHelp, setShowHelp] = useState(false);
+    const globalHandler = useCallback((input, key) => {
+        if (showHelp) {
+            setShowHelp(false);
+            return true;
+        }
+        if (state.confirmAction) {
+            if (input === 'y' || input === 'Y') {
+                state.confirmAction.onConfirm();
+                dispatch({ type: 'CANCEL_CONFIRM' });
+            }
+            else if (input === 'n' || input === 'N' || key.escape) {
+                dispatch({ type: 'CANCEL_CONFIRM' });
+            }
+            return true;
+        }
+        if (input === '?') {
+            setShowHelp(true);
+            return true;
+        }
+        if (key.tab) {
+            const topViews = ['dashboard', 'health', 'secrets'];
+            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.confirmAction, state.currentView, state.previousView, showHelp]);
+    const renderView = () => {
+        switch (state.currentView) {
+            case 'dashboard':
+                return _jsx(MockDashboard, { state: state, dispatch: dispatch, items: items });
+            case 'health':
+                return _jsx(Text, { children: "health-view" });
+            case 'secrets':
+                return _jsx(Text, { children: "secrets-view" });
+            case 'app-detail':
+                return _jsxs(Text, { children: ["detail:", state.selectedApp] });
+            default:
+                return _jsx(MockDashboard, { state: state, dispatch: dispatch, items: items });
+        }
+    };
+    return (_jsx(InputDispatcher, { globalHandler: globalHandler, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["view:", state.currentView] }), showHelp ? _jsx(Text, { children: "help-overlay" }) : renderView()] }) }));
+}

package/dist/tui/types.d.ts

@@ -1,4 +1,5 @@
 export type View = 'dashboard' | 'app-detail' | 'health' | 'secrets' | 'secret-edit' | 'logs';
+export type SecretsSubView = 'app-list' | 'secret-list';
 export interface TuiState {
     currentView: View;
     previousView: View | null;
@@ -8,6 +9,11 @@ export interface TuiState {
     loading: boolean;
     error: string | null;
     confirmAction: ConfirmAction | null;
+    dashboardIndex: number;
+    healthIndex: number;
+    secretsIndex: number;
+    secretsSubView: SecretsSubView;
+    appDetailIndex: number;
 }
 export interface ConfirmAction {
     label: string;
@@ -38,4 +44,11 @@ export type Action = {
     action: ConfirmAction;
 } | {
     type: 'CANCEL_CONFIRM';
+} | {
+    type: 'SET_INDEX';
+    view: string;
+    index: number;
+} | {
+    type: 'SET_SECRETS_SUBVIEW';
+    subView: SecretsSubView;
 };

package/dist/tui/views/AppDetail.js

@@ -1,7 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
 import { useAppState, useAppDispatch, useRedact } from '../state.js';
 import { runFleetCommand } from '../exec-bridge.js';
 import { colors } from '../theme.js';
@@ -14,28 +15,49 @@ const ACTIONS = [
     { key: '5', label: 'Logs', command: ['logs'] },
 ];
 export function AppDetail() {
-    const { selectedApp, redacted } = useAppState();
+    const { selectedApp, redacted, appDetailIndex } = useAppState();
     const dispatch = useAppDispatch();
     const redact = useRedact();
-    const [actionIndex, setActionIndex] = useState(0);
     const [running, setRunning] = useState(false);
     const [result, setResult] = useState(null);
-    const reg = load();
-    const app = selectedApp ? findApp(reg, selectedApp) : undefined;
-    useInput((input, key) => {
-        if (running)
+    const [app, setApp] = useState(undefined);
+    useEffect(() => {
+        if (selectedApp) {
+            try {
+                const reg = load();
+                setApp(findApp(reg, selectedApp));
+            }
+            catch {
+                setApp(undefined);
+            }
+        }
+    }, [selectedApp]);
+    function executeAction(action) {
+        if (!selectedApp)
             return;
+        setRunning(true);
+        setResult(null);
+        runFleetCommand([...action.command, selectedApp]).then(res => {
+            setResult(res);
+            setRunning(false);
+        });
+    }
+    const handler = (input, key) => {
+        if (running)
+            return false;
         if (input === 'j' || key.downArrow) {
-            setActionIndex(prev => Math.min(prev + 1, ACTIONS.length - 1));
+            dispatch({ type: 'SET_INDEX', view: 'appDetail', index: Math.min(appDetailIndex + 1, ACTIONS.length - 1) });
+            return true;
         }
-        else if (input === 'k' || key.upArrow) {
-            setActionIndex(prev => Math.max(prev - 1, 0));
+        if (input === 'k' || key.upArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'appDetail', index: Math.max(appDetailIndex - 1, 0) });
+            return true;
         }
-        else if (key.return) {
-            const action = ACTIONS[actionIndex];
+        if (key.return) {
+            const action = ACTIONS[appDetailIndex];
             if (action.command[0] === 'logs') {
                 dispatch({ type: 'NAVIGATE', view: 'logs' });
-                return;
+                return true;
             }
             if (action.destructive) {
                 dispatch({
@@ -50,23 +72,16 @@ export function AppDetail() {
             else {
                 executeAction(action);
             }
+            return true;
         }
-    });
-    function executeAction(action) {
-        if (!selectedApp)
-            return;
-        setRunning(true);
-        setResult(null);
-        runFleetCommand([...action.command, selectedApp]).then(res => {
-            setResult(res);
-            setRunning(false);
-        });
-    }
+        return false;
+    };
+    useRegisterHandler(handler);
     if (!app) {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: colors.error, children: ["App not found: ", selectedApp] }) }));
     }
     return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: colors.primary, children: redact(app.displayName || app.name) }), _jsxs(Box, { marginY: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Type:      " }), app.type] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Service:   " }), redacted ? '***' : app.serviceName] }), _jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Compose:   " }), redacted ? '***' : app.composePath] }), app.domains.length > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Domains:   " }), redacted ? '***' : app.domains.join(', ')] })), app.port && (_jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Port:      " }), app.port] })), _jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Containers:" }), " ", redacted ? '***' : app.containers.join(', ')] }), app.gitRepo && (_jsxs(Text, { children: [_jsx(Text, { color: colors.muted, children: "Git:       " }), redacted ? '***' : app.gitRepo] }))] }), _jsx(Text, { bold: true, children: "Actions" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: ACTIONS.map((action, i) => {
-                    const selected = i === actionIndex;
+                    const selected = i === appDetailIndex;
                     return (_jsxs(Text, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), _jsxs(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: ["[", action.key, "] ", action.label] }), action.destructive && _jsx(Text, { color: colors.warning, children: " !" })] }, action.key));
                 }) }), running && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Running..."] }) })), result && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: result.ok ? colors.success : colors.error, children: result.ok ? 'Done' : 'Failed' }), result.output && (_jsx(Text, { color: colors.muted, children: result.output.trim().slice(0, 500) }))] }))] }));
 }

package/dist/tui/views/Dashboard.js

@@ -1,15 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
-import { useAppDispatch, useRedact } from '../state.js';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { ScrollableList } from '@matthesketh/ink-scrollable-list';
+import { useAvailableHeight } from '@matthesketh/ink-viewport';
+import { useAppState, useAppDispatch, useRedact } from '../state.js';
 import { useFleetData } from '../hooks/use-fleet-data.js';
-import { AppList } from '../components/AppList.js';
-import { StatusBadge } from '../components/StatusBadge.js';
 import { colors } from '../theme.js';
 export function Dashboard() {
+    const state = useAppState();
     const dispatch = useAppDispatch();
     const { status, loading, error } = useFleetData();
     const redact = useRedact();
+    const availableHeight = useAvailableHeight();
+    const items = useMemo(() => status?.apps.map(app => ({ ...app, name: app.name })) ?? [], [status]);
+    const handler = (input, key) => {
+        if (items.length === 0)
+            return false;
+        if (input === 'j' || key.downArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'dashboard', index: Math.min(state.dashboardIndex + 1, items.length - 1) });
+            return true;
+        }
+        if (input === 'k' || key.upArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'dashboard', index: Math.max(state.dashboardIndex - 1, 0) });
+            return true;
+        }
+        if (key.return) {
+            const item = items[state.dashboardIndex];
+            if (item) {
+                dispatch({ type: 'SELECT_APP', app: item.name });
+                dispatch({ type: 'NAVIGATE', view: 'app-detail' });
+            }
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(handler);
     if (loading && !status) {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Loading fleet status..."] }) }));
     }
@@ -18,12 +45,10 @@ export function Dashboard() {
     }
     if (!status)
         return _jsx(Text, { color: colors.muted, children: "No data" });
-    const items = status.apps.map(app => ({ ...app, name: app.name }));
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: [status.totalApps, " apps"] }), _jsxs(Text, { color: colors.success, children: [status.healthy, " healthy"] }), status.unhealthy > 0 && (_jsxs(Text, { color: colors.error, children: [status.unhealthy, " unhealthy"] })), loading && _jsx(Text, { color: colors.muted, children: _jsx(Spinner, { type: "dots" }) })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, children: ["  ", 'APP'.padEnd(24), 'SYSTEMD'.padEnd(14), 'CONTAINERS'.padEnd(14), "HEALTH"] }) }), _jsx(AppList, { items: items, onSelect: (item) => {
-                    dispatch({ type: 'SELECT_APP', app: item.name });
-                    dispatch({ type: 'NAVIGATE', view: 'app-detail' });
-                }, renderItem: (item, selected) => {
+    const listHeight = Math.max(5, availableHeight - 4);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, children: [status.totalApps, " apps"] }), _jsxs(Text, { color: colors.success, children: [status.healthy, " healthy"] }), status.unhealthy > 0 && (_jsxs(Text, { color: colors.error, children: [status.unhealthy, " unhealthy"] })), loading && _jsx(Text, { color: colors.muted, children: _jsx(Spinner, { type: "dots" }) })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, children: ['APP'.padEnd(24), 'SYSTEMD'.padEnd(14), 'CONTAINERS'.padEnd(14), 'HEALTH'.padEnd(12)] }) }), _jsx(ScrollableList, { items: items, selectedIndex: Math.min(state.dashboardIndex, items.length - 1), maxVisible: listHeight, renderItem: (item, selected) => {
                     const app = status.apps.find(a => a.name === item.name);
-                    return (_jsxs(Box, { children: [_jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: redact(app.name).padEnd(22) }), _jsx(Text, { children: "  " }), _jsx(Box, { width: 14, children: _jsx(StatusBadge, { value: app.systemd, type: "systemd" }) }), _jsx(Box, { width: 14, children: _jsx(Text, { children: app.containers }) }), _jsx(StatusBadge, { value: app.health, type: "health" })] }));
+                    const displayName = redact(app.name);
+                    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: selected ? colors.primary : colors.muted, children: selected ? '> ' : '  ' }), _jsx(Box, { width: 24, children: _jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: displayName.length > 22 ? displayName.slice(0, 19) + '...' : displayName }) }), _jsx(Box, { width: 14, children: _jsx(Text, { children: app.systemd.slice(0, 12) }) }), _jsx(Box, { width: 14, children: _jsx(Text, { children: app.containers }) }), _jsx(Box, { width: 12, children: _jsx(Text, { children: app.health.slice(0, 10) }) })] }));
                 } })] }));
 }

package/dist/tui/views/HealthView.js

@@ -1,28 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { ScrollableList } from '@matthesketh/ink-scrollable-list';
+import { useAvailableHeight } from '@matthesketh/ink-viewport';
 import { useHealth } from '../hooks/use-health.js';
 import { StatusBadge } from '../components/StatusBadge.js';
-import { useRedact } from '../state.js';
+import { useAppState, useAppDispatch, useRedact } from '../state.js';
 import { colors } from '../theme.js';
 export function HealthView() {
+    const state = useAppState();
+    const dispatch = useAppDispatch();
     const { results, loading, error } = useHealth();
     const redact = useRedact();
+    const availableHeight = useAvailableHeight();
+    const counts = useMemo(() => ({
+        healthy: results.filter(r => r.overall === 'healthy').length,
+        degraded: results.filter(r => r.overall === 'degraded').length,
+        down: results.filter(r => r.overall === 'down').length,
+    }), [results]);
+    const handler = (input, key) => {
+        if (results.length === 0)
+            return false;
+        if (input === 'j' || key.downArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'health', index: Math.min(state.healthIndex + 1, results.length - 1) });
+            return true;
+        }
+        if (input === 'k' || key.upArrow) {
+            dispatch({ type: 'SET_INDEX', view: 'health', index: Math.max(state.healthIndex - 1, 0) });
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(handler);
     if (loading && results.length === 0) {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Running health checks..."] }) }));
     }
     if (error && results.length === 0) {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: colors.error, children: ["Error: ", error] }) }));
     }
-    const healthy = results.filter(r => r.overall === 'healthy').length;
-    const degraded = results.filter(r => r.overall === 'degraded').length;
-    const down = results.filter(r => r.overall === 'down').length;
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, children: "Health Monitor" }), _jsxs(Text, { color: colors.success, children: [healthy, " healthy"] }), degraded > 0 && _jsxs(Text, { color: colors.warning, children: [degraded, " degraded"] }), down > 0 && _jsxs(Text, { color: colors.error, children: [down, " down"] }), loading && _jsx(Text, { color: colors.muted, children: _jsx(Spinner, { type: "dots" }) })] }), _jsxs(Text, { bold: true, children: ['  APP'.padEnd(26), 'SYSTEMD'.padEnd(12), 'CONTAINERS'.padEnd(20), 'HTTP'.padEnd(10), "OVERALL"] }), results.map(result => {
-                const runningCount = result.containers.filter(c => c.running).length;
-                const containerStr = `${runningCount}/${result.containers.length}`;
-                const httpStr = result.http
-                    ? result.http.ok ? `${result.http.status}` : `err`
-                    : 'n/a';
-                return (_jsxs(Box, { children: [_jsxs(Text, { children: ['  ', redact(result.app).padEnd(24)] }), _jsx(Box, { width: 12, children: _jsx(StatusBadge, { value: result.systemd.state, type: "systemd" }) }), _jsx(Text, { children: containerStr.padEnd(20) }), _jsx(Box, { width: 10, children: _jsx(Text, { color: result.http?.ok ? colors.success : result.http ? colors.error : colors.muted, children: httpStr }) }), _jsx(StatusBadge, { value: result.overall, type: "health" })] }, result.app));
-            })] }));
+    const listHeight = Math.max(5, availableHeight - 4);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsx(Text, { bold: true, children: "Health Monitor" }), _jsxs(Text, { color: colors.success, children: [counts.healthy, " healthy"] }), counts.degraded > 0 && _jsxs(Text, { color: colors.warning, children: [counts.degraded, " degraded"] }), counts.down > 0 && _jsxs(Text, { color: colors.error, children: [counts.down, " down"] }), loading && _jsx(Text, { color: colors.muted, children: _jsx(Spinner, { type: "dots" }) })] }), _jsxs(Text, { bold: true, children: ['  APP'.padEnd(26), 'SYSTEMD'.padEnd(12), 'CONTAINERS'.padEnd(20), 'HTTP'.padEnd(10), "OVERALL"] }), _jsx(ScrollableList, { items: results, selectedIndex: Math.min(state.healthIndex, results.length - 1), maxVisible: listHeight, renderItem: (result, selected) => {
+                    const runningCount = result.containers.filter(c => c.running).length;
+                    const containerStr = `${runningCount}/${result.containers.length}`;
+                    const httpStr = result.http
+                        ? result.http.ok ? `${result.http.status}` : 'err'
+                        : 'n/a';
+                    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: selected ? colors.primary : colors.muted, children: selected ? '> ' : '  ' }), _jsx(Text, { children: redact(result.app).padEnd(24) }), _jsx(Box, { width: 12, children: _jsx(StatusBadge, { value: result.systemd.state, type: "systemd" }) }), _jsx(Text, { children: containerStr.padEnd(20) }), _jsx(Box, { width: 10, children: _jsx(Text, { color: result.http?.ok ? colors.success : result.http ? colors.error : colors.muted, children: httpStr }) }), _jsx(StatusBadge, { value: result.overall, type: "health" })] }));
+                } })] }));
 }

package/dist/tui/views/LogsView.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { useAvailableHeight } from '@matthesketh/ink-viewport';
 import { useAppState, useAppDispatch, useRedact } from '../state.js';
 import { runFleetCommand, streamFleetCommand } from '../exec-bridge.js';
 import { colors } from '../theme.js';
-const MAX_LINES = 100;
+const MAX_LINES = 200;
 export function LogsView() {
     const { selectedApp } = useAppState();
     const dispatch = useAppDispatch();
     const redact = useRedact();
+    const availableHeight = useAvailableHeight();
     const [lines, setLines] = useState([]);
     const [following, setFollowing] = useState(false);
     const [loading, setLoading] = useState(true);
@@ -34,10 +37,9 @@ export function LogsView() {
             }
         };
     }, [selectedApp]);
-    useInput((input, key) => {
+    const handler = (input, key) => {
         if (input === 'f') {
             if (following) {
-                // Stop following
                 if (streamRef.current) {
                     streamRef.current.kill();
                     streamRef.current = null;
@@ -45,7 +47,6 @@ export function LogsView() {
                 setFollowing(false);
             }
             else if (selectedApp) {
-                // Start following
                 setFollowing(true);
                 const handle = streamFleetCommand(['logs', selectedApp, '-f']);
                 streamRef.current = handle;
@@ -53,19 +54,23 @@ export function LogsView() {
                     setLines(prev => [...prev.slice(-MAX_LINES + 1), line]);
                 });
             }
+            return true;
         }
-        else if (key.escape) {
+        if (key.escape) {
             if (streamRef.current) {
                 streamRef.current.kill();
                 streamRef.current = null;
             }
             dispatch({ type: 'GO_BACK' });
+            return true;
         }
-    });
+        return false;
+    };
+    useRegisterHandler(handler);
     if (loading) {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { children: [_jsx(Spinner, { type: "dots" }), " Loading logs for ", selectedApp, "..."] }) }));
     }
-    // Show last N lines that fit in terminal
-    const visibleLines = lines.slice(-30);
+    const visibleCount = Math.max(5, availableHeight - 3);
+    const visibleLines = lines.slice(-visibleCount);
     return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, gap: 2, children: [_jsxs(Text, { bold: true, color: colors.primary, children: ["Logs: ", redact(selectedApp ?? '')] }), following && (_jsxs(Text, { color: colors.success, children: [_jsx(Spinner, { type: "dots" }), " following"] }))] }), _jsx(Box, { flexDirection: "column", children: visibleLines.map((line, i) => (_jsx(Text, { wrap: "truncate", children: line }, i))) })] }));
 }

package/dist/tui/views/SecretEdit.js

@@ -1,7 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text } from 'ink';
 import TextInput from 'ink-text-input';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
 import { useAppState, useAppDispatch } from '../state.js';
 import { useSecrets } from '../hooks/use-secrets.js';
 import { getSecret as getCoreSecret } from '../../core/secrets-ops.js';
@@ -26,7 +27,7 @@ export function SecretEdit() {
                 // ignore
             }
         }
-    }, []);
+    }, [isNew, selectedApp, selectedSecret]);
     const save = () => {
         if (!selectedApp || !keyName)
             return;
@@ -41,11 +42,14 @@ export function SecretEdit() {
             setStatus(`Error: ${result.error}`);
         }
     };
-    useInput((input, key) => {
+    const handler = (_input, key) => {
         if (key.escape) {
             dispatch({ type: 'GO_BACK' });
+            return true;
         }
-    });
+        return false;
+    };
+    useRegisterHandler(handler);
     return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Text, { bold: true, color: colors.primary, children: [isNew ? 'Add Secret' : 'Edit Secret', " - ", selectedApp] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.muted, children: "Key:   " }), isNew && phase === 'key' ? (_jsx(TextInput, { value: keyName, onChange: setKeyName, onSubmit: () => {
                                     if (keyName)
                                         setPhase('value');