@matthesketh/fleet 1.1.0 → 1.6.0

package/dist/tui/tests/flicker.test.js

@@ -0,0 +1,105 @@
+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('no-flicker guarantees', () => {
+    it('tab switch produces no intermediate frames', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        const beforeCount = frames.length;
+        stdin.write('\t');
+        await delay(50);
+        // grab only the frames produced by this action
+        const newFrames = frames.slice(beforeCount);
+        // every new frame must show the destination view, never a blank or half-state
+        for (const frame of newFrames) {
+            expect(frame).toContain('view:');
+            // should not show a frame with view:dashboard after we switched to health
+            expect(frame).toContain('view:health');
+        }
+    });
+    it('enter on dashboard does not flash dashboard before showing detail', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        stdin.write('j');
+        await delay(50);
+        const beforeCount = frames.length;
+        stdin.write('\r');
+        await delay(50);
+        const newFrames = frames.slice(beforeCount);
+        // should have at least one frame with the detail view
+        const detailFrames = newFrames.filter(f => f.includes('view:app-detail'));
+        expect(detailFrames.length).toBeGreaterThan(0);
+        // no frame should show view:dashboard after the enter press
+        // (which would indicate SELECT_APP rendered before NAVIGATE)
+        for (const frame of newFrames) {
+            if (frame.includes('view:')) {
+                expect(frame).toContain('view:app-detail');
+            }
+        }
+    });
+    it('arrow key navigation produces exactly one visual change', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        const beforeCount = frames.length;
+        stdin.write('\x1B[B'); // down arrow
+        await delay(50);
+        const newFrames = frames.slice(beforeCount);
+        // all new frames should show the cursor on app-bravo
+        for (const frame of newFrames) {
+            expect(frame).toContain('> app-bravo');
+        }
+    });
+    it('escape from sub-view does not flash intermediate state', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        // go to detail
+        stdin.write('\r');
+        await delay(50);
+        expect(frames[frames.length - 1]).toContain('view:app-detail');
+        const beforeCount = frames.length;
+        stdin.write('\x1B');
+        await delay(50);
+        const newFrames = frames.slice(beforeCount);
+        for (const frame of newFrames) {
+            expect(frame).toContain('view:dashboard');
+        }
+    });
+    it('rapid key presses do not produce garbled frames', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        // rapid j-j-j
+        stdin.write('j');
+        stdin.write('j');
+        stdin.write('j');
+        await delay(100);
+        const lastFrame = frames[frames.length - 1];
+        // should be clamped at the last item
+        expect(lastFrame).toContain('> app-charlie');
+        // should still show the view label
+        expect(lastFrame).toContain('view:dashboard');
+    });
+    it('help overlay toggle produces no blank frames', async () => {
+        const { stdin, frames } = render(_jsx(TestApp, { items: apps }));
+        await delay(100);
+        const beforeCount = frames.length;
+        stdin.write('?');
+        await delay(50);
+        const helpFrames = frames.slice(beforeCount);
+        for (const frame of helpFrames) {
+            expect(frame).toContain('view:dashboard');
+            expect(frame).toContain('help-overlay');
+        }
+        const beforeDismiss = frames.length;
+        stdin.write('x');
+        await delay(50);
+        const dismissFrames = frames.slice(beforeDismiss);
+        for (const frame of dismissFrames) {
+            expect(frame).toContain('view:dashboard');
+            // help should be gone
+            expect(frame).not.toContain('help-overlay');
+        }
+    });
+});

package/dist/tui/tests/keyboard-integration.test.d.ts

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

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

@@ -0,0 +1,120 @@
+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:logs-multi');
+        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', '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.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 View = 'dashboard' | 'app-detail' | 'health' | 'secrets' | 'secret-edit' | 'logs' | 'logs-multi';
+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: 'dashboard' | 'health' | 'secrets' | 'appDetail';
+    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,48 @@ 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))
+            .finally(() => 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 +71,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,58 @@
 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}`;
+                    // 404 → "no /health" (app never implemented one — distinct from a real failure).
+                    // Keeps the TUI honest after the post-incident health-check fix.
+                    const httpStr = result.http
+                        ? result.http.ok
+                            ? `${result.http.status}`
+                            : result.http.endpointMissing
+                                ? 'no /health'
+                                : `${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" })] }));
+                } })] }));
 }