@matthesketh/fleet 1.1.0 → 1.2.0

package/dist/tui/components/AppList.js

@@ -25,7 +25,7 @@ export function AppList({ items, onSelect, renderItem }) {
     return (_jsx(Box, { flexDirection: "column", children: items.map((item, i) => {
             const selected = i === selectedIndex;
             if (renderItem) {
-                return (_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), renderItem(item, selected)] }, item.name));
+                return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: selected ? colors.primary : colors.muted, children: selected ? '> ' : '  ' }), renderItem(item, selected)] }, item.name));
             }
             return (_jsxs(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: [selected ? '> ' : '  ', item.label ?? item.name] }, item.name));
         }) }));

package/dist/tui/components/Confirm.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { Text, Box } from 'ink';
+import { Modal } from '@matthesketh/ink-modal';
 import { useAppState } from '../state.js';
 import { colors } from '../theme.js';
 export function Confirm() {
     const { confirmAction } = useAppState();
-    if (!confirmAction)
-        return null;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.warning, paddingX: 2, paddingY: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: colors.warning, children: confirmAction.label }), _jsx(Text, { color: colors.muted, children: confirmAction.description }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: colors.success, children: "y" }), " confirm"] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: colors.error, children: "n" }), " cancel"] })] })] }));
+    return (_jsx(Modal, { visible: confirmAction !== null, title: confirmAction?.label, borderColor: colors.warning, width: 50, footer: _jsxs(Box, { gap: 2, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: colors.success, children: "y" }), " confirm"] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: colors.error, children: "n" }), " cancel"] })] }), children: _jsx(Text, { color: colors.muted, children: confirmAction?.description ?? '' }) }));
 }

package/dist/tui/components/Header.js

@@ -1,16 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { Tabs } from '@matthesketh/ink-tabs';
+import { Breadcrumb } from '@matthesketh/ink-breadcrumb';
 import { useAppState } from '../state.js';
 import { colors } from '../theme.js';
-const TABS = [
-    { view: 'dashboard', label: 'Dashboard' },
-    { view: 'health', label: 'Health' },
-    { view: 'secrets', label: 'Secrets' },
+const TAB_ITEMS = [
+    { id: 'dashboard', label: 'Dashboard' },
+    { id: 'health', label: 'Health' },
+    { id: 'secrets', label: 'Secrets' },
 ];
-function VaultIndicator({ sealed }) {
-    return (_jsx(Text, { color: sealed ? colors.warning : colors.success, children: sealed ? '[SEALED]' : '[UNSEALED]' }));
+const TOP_VIEWS = new Set(['dashboard', 'health', 'secrets']);
+function resolveActiveTab(view, previousView) {
+    if (TOP_VIEWS.has(view))
+        return view;
+    if (view === 'app-detail' || view === 'logs')
+        return 'dashboard';
+    if (view === 'secret-edit')
+        return 'secrets';
+    return previousView ?? 'dashboard';
+}
+function buildBreadcrumb(view, selectedApp) {
+    switch (view) {
+        case 'dashboard':
+            return ['Dashboard'];
+        case 'health':
+            return ['Health'];
+        case 'secrets':
+            return ['Secrets'];
+        case 'app-detail':
+            return ['Dashboard', selectedApp ?? '...'];
+        case 'logs':
+            return ['Dashboard', selectedApp ?? '...', 'Logs'];
+        case 'secret-edit':
+            return ['Secrets', selectedApp ?? '...', 'Edit'];
+        default:
+            return ['Dashboard'];
+    }
 }
 export function Header({ vaultSealed }) {
-    const { currentView, redacted } = useAppState();
-    return (_jsxs(Box, { borderStyle: "single", borderBottom: true, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { bold: true, color: colors.primary, children: "Fleet" }), _jsx(Text, { color: colors.muted, children: "|" }), TABS.map(tab => (_jsx(Text, { bold: currentView === tab.view || currentView === 'app-detail' && tab.view === 'dashboard' || currentView === 'secret-edit' && tab.view === 'secrets' || currentView === 'logs' && tab.view === 'dashboard', color: currentView === tab.view ? colors.primary : colors.muted, children: tab.label }, tab.view)))] }), _jsxs(Box, { gap: 1, children: [redacted && _jsx(Text, { color: "magenta", bold: true, children: "[REDACTED]" }), _jsx(VaultIndicator, { sealed: vaultSealed })] })] }));
+    const { currentView, previousView, selectedApp, redacted } = useAppState();
+    const activeTab = resolveActiveTab(currentView, previousView);
+    const breadcrumb = buildBreadcrumb(currentView, selectedApp);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { borderStyle: "single", borderBottom: true, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, alignItems: "center", children: [_jsx(Text, { bold: true, color: colors.primary, children: "Fleet" }), _jsx(Tabs, { tabs: TAB_ITEMS, activeId: activeTab, accentColor: colors.primary })] }), _jsxs(Box, { gap: 1, children: [redacted && _jsx(Text, { color: "magenta", bold: true, children: "[REDACTED]" }), _jsx(Text, { color: vaultSealed ? colors.warning : colors.success, children: vaultSealed ? '[SEALED]' : '[UNSEALED]' })] })] }), breadcrumb.length > 1 && (_jsx(Box, { paddingX: 1, children: _jsx(Breadcrumb, { path: breadcrumb, activeColor: colors.primary }) }))] }));
 }

package/dist/tui/components/KeyHint.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatusBar } from '@matthesketh/ink-status-bar';
 import { useAppState } from '../state.js';
-import { colors } from '../theme.js';
 const viewHints = {
     dashboard: [
         { key: 'j/k', label: 'navigate' },
         { key: 'Enter', label: 'select' },
         { key: 'Tab', label: 'switch view' },
+        { key: '?', label: 'help' },
         { key: 'x', label: 'redact' },
         { key: 'q', label: 'quit' },
     ],
@@ -31,7 +31,6 @@ const viewHints = {
         { key: 'a', label: 'add' },
         { key: 'd', label: 'delete' },
         { key: 'r', label: 'reveal' },
-        { key: 'x', label: 'redact' },
         { key: 'Esc', label: 'back' },
         { key: 'q', label: 'quit' },
     ],
@@ -51,5 +50,5 @@ export function KeyHint() {
     const hints = confirmAction
         ? [{ key: 'y', label: 'confirm' }, { key: 'n', label: 'cancel' }]
         : viewHints[currentView] ?? [];
-    return (_jsx(Box, { borderStyle: "single", borderTop: true, paddingX: 1, gap: 2, children: hints.map(hint => (_jsxs(Box, { gap: 0, children: [_jsx(Text, { bold: true, color: colors.primary, children: hint.key }), _jsxs(Text, { color: colors.muted, children: [" ", hint.label] })] }, hint.key))) }));
+    return _jsx(StatusBar, { items: hints });
 }

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,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useReducer, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useReducer, useState, useEffect, useCallback } 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 { 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 +17,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 +65,11 @@ function ViewRouter() {
             return _jsx(Dashboard, {});
     }
 }
-function KeyboardHandler() {
-    useKeyboard();
-    return null;
-}
+const CHROME_ROWS = 6;
 export function App() {
     const [state, dispatch] = useReducer(reducer, initialState);
     const [vaultSealed, setVaultSealed] = useState(true);
+    const [showHelp, setShowHelp] = useState(false);
     useEffect(() => {
         try {
             if (isInitialized()) {
@@ -61,5 +92,46 @@ 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 (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 === '?' && 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;
+        }
+        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]);
+    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(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/state.js

@@ -9,6 +9,11 @@ export const initialState = {
     loading: false,
     error: null,
     confirmAction: null,
+    dashboardIndex: 0,
+    healthIndex: 0,
+    secretsIndex: 0,
+    secretsSubView: 'app-list',
+    appDetailIndex: 0,
 };
 export function reducer(state, action) {
     switch (action.type) {
@@ -26,6 +31,7 @@ export function reducer(state, action) {
                 currentView: state.previousView ?? 'dashboard',
                 previousView: null,
                 selectedSecret: null,
+                secretsSubView: 'app-list',
                 error: null,
                 confirmAction: null,
             };
@@ -43,6 +49,15 @@ export function reducer(state, action) {
             return { ...state, confirmAction: action.action };
         case 'CANCEL_CONFIRM':
             return { ...state, confirmAction: null };
+        case 'SET_INDEX': {
+            const key = `${action.view}Index`;
+            if (key in state) {
+                return { ...state, [key]: action.index };
+            }
+            return state;
+        }
+        case 'SET_SECRETS_SUBVIEW':
+            return { ...state, secretsSubView: action.subView, secretsIndex: 0 };
         default:
             return state;
     }

package/dist/tui/tests/flicker.test.d.ts

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

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,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');

package/dist/tui/views/SecretsView.js

@@ -1,72 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { useEffect, useCallback } from 'react';
+import { Box, Text } from 'ink';
+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 { useSecrets } from '../hooks/use-secrets.js';
 import { colors } from '../theme.js';
 export function SecretsView() {
-    const { selectedApp } = useAppState();
+    const state = useAppState();
     const dispatch = useAppDispatch();
     const redact = useRedact();
     const secrets = useSecrets();
-    const [subView, setSubView] = useState('app-list');
-    const [selectedIndex, setSelectedIndex] = useState(0);
+    const availableHeight = useAvailableHeight();
+    const { secretsSubView: subView, secretsIndex: selectedIndex, selectedApp } = state;
+    const refresh = secrets.refresh;
     useEffect(() => {
-        secrets.refresh();
-    }, []);
+        refresh();
+    }, [refresh]);
     useEffect(() => {
         if (subView === 'secret-list' && selectedApp) {
             secrets.loadAppSecrets(selectedApp);
         }
-    }, [subView, selectedApp]);
-    useInput((input, key) => {
+    }, [subView, selectedApp, secrets.loadAppSecrets]);
+    const handler = useCallback((input, key) => {
         if (subView === 'app-list') {
             if (input === 'j' || key.downArrow) {
-                setSelectedIndex(prev => Math.min(prev + 1, secrets.apps.length - 1));
+                dispatch({ type: 'SET_INDEX', view: 'secrets', index: Math.min(selectedIndex + 1, secrets.apps.length - 1) });
+                return true;
             }
-            else if (input === 'k' || key.upArrow) {
-                setSelectedIndex(prev => Math.max(prev - 1, 0));
+            if (input === 'k' || key.upArrow) {
+                dispatch({ type: 'SET_INDEX', view: 'secrets', index: Math.max(selectedIndex - 1, 0) });
+                return true;
             }
-            else if (key.return && secrets.apps[selectedIndex]) {
+            if (key.return && secrets.apps[selectedIndex]) {
                 dispatch({ type: 'SELECT_APP', app: secrets.apps[selectedIndex].app });
-                setSubView('secret-list');
-                setSelectedIndex(0);
+                dispatch({ type: 'SET_SECRETS_SUBVIEW', subView: 'secret-list' });
+                return true;
             }
-            else if (input === 'u') {
+            if (input === 'u') {
                 const result = secrets.unseal();
                 if (!result.ok) {
                     dispatch({ type: 'SET_ERROR', error: result.error ?? 'Unseal failed' });
                 }
                 secrets.refresh();
+                return true;
             }
-            else if (input === 'l') {
+            if (input === 'l') {
                 const result = secrets.seal();
                 if (!result.ok) {
                     dispatch({ type: 'SET_ERROR', error: result.error ?? 'Seal failed' });
                 }
                 secrets.refresh();
+                return true;
             }
         }
         else if (subView === 'secret-list') {
             if (input === 'j' || key.downArrow) {
-                setSelectedIndex(prev => Math.min(prev + 1, secrets.secrets.length - 1));
+                dispatch({ type: 'SET_INDEX', view: 'secrets', index: Math.min(selectedIndex + 1, secrets.secrets.length - 1) });
+                return true;
             }
-            else if (input === 'k' || key.upArrow) {
-                setSelectedIndex(prev => Math.max(prev - 1, 0));
+            if (input === 'k' || key.upArrow) {
+                dispatch({ type: 'SET_INDEX', view: 'secrets', index: Math.max(selectedIndex - 1, 0) });
+                return true;
             }
-            else if (key.return && secrets.secrets[selectedIndex] && selectedApp) {
+            if (key.return && secrets.secrets[selectedIndex] && selectedApp) {
                 dispatch({ type: 'SELECT_SECRET', key: secrets.secrets[selectedIndex].key });
                 dispatch({ type: 'NAVIGATE', view: 'secret-edit' });
+                return true;
             }
-            else if (key.escape) {
-                setSubView('app-list');
-                setSelectedIndex(0);
+            if (key.escape) {
+                dispatch({ type: 'SET_SECRETS_SUBVIEW', subView: 'app-list' });
+                return true;
             }
-            else if (input === 'a' && selectedApp) {
+            if (input === 'a' && selectedApp) {
                 dispatch({ type: 'SELECT_SECRET', key: null });
                 dispatch({ type: 'NAVIGATE', view: 'secret-edit' });
+                return true;
             }
-            else if (input === 'd' && selectedApp && secrets.secrets[selectedIndex]) {
+            if (input === 'd' && selectedApp && secrets.secrets[selectedIndex]) {
                 const secretKey = secrets.secrets[selectedIndex].key;
                 dispatch({
                     type: 'CONFIRM',
@@ -85,8 +97,9 @@ export function SecretsView() {
                         },
                     },
                 });
+                return true;
             }
-            else if (input === 'r' && selectedApp && secrets.secrets[selectedIndex]) {
+            if (input === 'r' && selectedApp && secrets.secrets[selectedIndex]) {
                 const secretKey = secrets.secrets[selectedIndex].key;
                 if (secrets.revealedValues[secretKey]) {
                     secrets.hideSecret(secretKey);
@@ -94,15 +107,15 @@ export function SecretsView() {
                 else {
                     secrets.revealSecret(selectedApp, secretKey);
                 }
+                return true;
             }
         }
-    });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, paddingX: 1, gap: 2, children: [_jsx(Text, { bold: true, children: "Vault:" }), !secrets.initialized ? (_jsx(Text, { color: colors.error, children: "Not initialized" })) : secrets.sealed ? (_jsx(Text, { color: colors.warning, bold: true, children: "SEALED" })) : (_jsx(Text, { color: colors.success, bold: true, children: "UNSEALED" })), _jsxs(Text, { color: colors.muted, children: [secrets.apps.length, " apps | ", secrets.apps.reduce((sum, a) => sum + a.keyCount, 0), " keys"] })] }), secrets.error && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.error, children: secrets.error }) })), subView === 'app-list' ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Apps with secrets:" }), secrets.apps.length === 0 ? (_jsx(Text, { color: colors.muted, children: "  No secrets managed" })) : (secrets.apps.map((app, i) => {
-                        const selected = i === selectedIndex;
-                        return (_jsxs(Text, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: redact(app.app).padEnd(24) }), _jsx(Text, { color: colors.muted, children: app.type.padEnd(14) }), _jsxs(Text, { children: [String(app.keyCount).padEnd(8), " keys"] })] }, app.app));
-                    }))] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: colors.primary, children: redact(selectedApp ?? '') }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: secrets.secrets.length === 0 ? (_jsx(Text, { color: colors.muted, children: "  No secrets found" })) : (secrets.secrets.map((secret, i) => {
-                            const selected = i === selectedIndex;
-                            const revealed = secrets.revealedValues[secret.key];
-                            return (_jsxs(Text, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: secret.key.padEnd(30) }), _jsx(Text, { color: revealed ? colors.warning : colors.muted, children: revealed ?? secret.maskedValue })] }, secret.key));
-                        })) })] }))] }));
+        return false;
+    }, [subView, selectedIndex, selectedApp, secrets, dispatch, redact]);
+    useRegisterHandler(handler);
+    const listHeight = Math.max(5, availableHeight - 5);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, paddingX: 1, gap: 2, children: [_jsx(Text, { bold: true, children: "Vault:" }), !secrets.initialized ? (_jsx(Text, { color: colors.error, children: "Not initialized" })) : secrets.sealed ? (_jsx(Text, { color: colors.warning, bold: true, children: "SEALED" })) : (_jsx(Text, { color: colors.success, bold: true, children: "UNSEALED" })), _jsxs(Text, { color: colors.muted, children: [secrets.apps.length, " apps | ", secrets.apps.reduce((sum, a) => sum + a.keyCount, 0), " keys"] })] }), secrets.error && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.error, children: secrets.error }) })), subView === 'app-list' ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Apps with secrets:" }), _jsx(ScrollableList, { items: secrets.apps, selectedIndex: Math.min(selectedIndex, secrets.apps.length - 1), maxVisible: listHeight, emptyText: "  No secrets managed", renderItem: (app, selected) => (_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: redact(app.app).padEnd(24) }), _jsx(Text, { color: colors.muted, children: app.type.padEnd(14) }), _jsxs(Text, { children: [String(app.keyCount).padEnd(8), " keys"] })] })) })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: colors.primary, children: redact(selectedApp ?? '') }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ScrollableList, { items: secrets.secrets, selectedIndex: Math.min(selectedIndex, secrets.secrets.length - 1), maxVisible: listHeight, emptyText: "  No secrets found", renderItem: (secret, selected) => {
+                                const revealed = secrets.revealedValues[secret.key];
+                                return (_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, children: selected ? '> ' : '  ' }), _jsx(Text, { bold: selected, color: selected ? colors.primary : colors.text, children: secret.key.padEnd(30) }), _jsx(Text, { color: revealed ? colors.warning : colors.muted, children: revealed ?? secret.maskedValue })] }));
+                            } }) })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/fleet",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Docker production management CLI + MCP server for Claude Code",
   "type": "module",
   "main": "dist/index.js",
@@ -13,6 +13,7 @@
     "LICENSE",
     "README.md"
   ],
+  "workspaces": ["packages/*"],
   "scripts": {
     "build": "tsc",
     "dev": "tsx src/index.ts",
@@ -48,6 +49,21 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.8.0",
+    "@matthesketh/ink-breadcrumb": "*",
+    "@matthesketh/ink-gauge": "*",
+    "@matthesketh/ink-input-dispatcher": "*",
+    "@matthesketh/ink-keybinding-help": "*",
+    "@matthesketh/ink-log-viewer": "*",
+    "@matthesketh/ink-modal": "*",
+    "@matthesketh/ink-pipeline": "*",
+    "@matthesketh/ink-rule": "*",
+    "@matthesketh/ink-scrollable-list": "*",
+    "@matthesketh/ink-split-pane": "*",
+    "@matthesketh/ink-status-bar": "*",
+    "@matthesketh/ink-table": "*",
+    "@matthesketh/ink-tabs": "*",
+    "@matthesketh/ink-toast": "*",
+    "@matthesketh/ink-viewport": "*",
     "ink": "^5.2.1",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",