@matthesketh/fleet 1.8.1 → 1.11.1

package/dist/tui/tests/redaction-rerender.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import { InputDispatcher } from '@matthesketh/ink-input-dispatcher';
+// stable mock fleet status. the reference must stay constant across renders:
+// dashboard memoises its list items, so a changing status object would rebuild
+// them anyway and mask the redaction-staleness bug this test guards.
+const { MOCK_STATUS } = vi.hoisted(() => ({
+    MOCK_STATUS: {
+        totalApps: 3,
+        healthy: 3,
+        unhealthy: 0,
+        apps: [
+            { name: 'alpha-service', systemd: 'active', containers: '1/1', health: 'healthy' },
+            { name: 'bravo-service', systemd: 'active', containers: '1/1', health: 'healthy' },
+            { name: 'charlie-service', systemd: 'active', containers: '1/1', health: 'healthy' },
+        ],
+    },
+}));
+vi.mock('../hooks/use-fleet-data', () => ({
+    useFleetData: () => ({ status: MOCK_STATUS, loading: false, error: null }),
+}));
+// fixed available height so the list renders every row under a test stdout.
+vi.mock('@matthesketh/ink-viewport', () => ({
+    useAvailableHeight: () => 20,
+    Viewport: ({ children }) => children,
+}));
+import { Dashboard } from '../views/Dashboard.js';
+import { AppStateContext, AppDispatchContext, initialState } from '../state.js';
+const delay = (ms) => new Promise((r) => setTimeout(r, ms));
+function Harness({ redacted }) {
+    return (_jsx(AppStateContext.Provider, { value: { ...initialState, redacted }, children: _jsx(AppDispatchContext.Provider, { value: () => { }, children: _jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(Dashboard, {}) }) }) }));
+}
+describe('redaction re-renders every visible row', () => {
+    it('toggling redaction updates all app rows without scrolling', async () => {
+        const { lastFrame, rerender } = render(_jsx(Harness, { redacted: false }));
+        await delay(50);
+        const plain = lastFrame() ?? '';
+        expect(plain).toContain('alpha-service');
+        expect(plain).toContain('bravo-service');
+        expect(plain).toContain('charlie-service');
+        // flip redaction — equivalent to pressing 'x'. no j/k/arrow keys are sent,
+        // so nothing scrolls; every visible row must still pick up the new label.
+        rerender(_jsx(Harness, { redacted: true }));
+        await delay(50);
+        const out = lastFrame() ?? '';
+        expect(out).not.toContain('alpha-service');
+        expect(out).not.toContain('bravo-service');
+        expect(out).not.toContain('charlie-service');
+        // redacted labels follow the app-NN pattern from redactName()
+        expect(out).toMatch(/app-\d\d/);
+    });
+});

package/dist/tui/tests/scroll-flicker-proof.test.d.ts

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

package/dist/tui/tests/scroll-flicker-proof.test.js

@@ -0,0 +1,145 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useReducer } from 'react';
+import { EventEmitter } from 'node:events';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+// Force Ink's real (non-CI) render path so the flicker branch is reachable.
+// ink-testing-library renders in debug mode, where Ink's onRender returns
+// before the clear-screen branch — so it cannot observe the flicker at all.
+// This proof drives Ink's genuine production render() instead.
+vi.mock('is-in-ci', () => ({ default: false }));
+// eslint-disable-next-line import/first
+import { render, Box, Text } from 'ink';
+// eslint-disable-next-line import/first
+import { Viewport, useAvailableHeight } from '@matthesketh/ink-viewport';
+// eslint-disable-next-line import/first
+import { ScrollableList } from '@matthesketh/ink-scrollable-list';
+// eslint-disable-next-line import/first
+import { InputDispatcher, useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+// ESC (0x1B) built without a control-char literal in source.
+const ESC = String.fromCharCode(27);
+// Ink writes this exact sequence (ansiEscapes.clearTerminal) before a frame
+// whenever the frame height is >= stdout.rows — a full-screen wipe on every
+// re-render. That wipe IS the flicker; counting it proves its presence.
+const CLEAR_TERMINAL = `${ESC}[2J${ESC}[3J${ESC}[H`;
+const DOWN_ARROW = `${ESC}[B`;
+const ROWS = 24;
+const COLUMNS = 120;
+const SCROLL_STEPS = 20;
+const APPS = Array.from({ length: 200 }, (_, i) => `app-${i}`);
+/** A stdout that records every byte Ink writes and reports a fixed size. */
+class RecordingStdout extends EventEmitter {
+    columns = COLUMNS;
+    rows = ROWS;
+    isTTY = true;
+    writes = [];
+    write = (data) => {
+        this.writes.push(data);
+        return true;
+    };
+}
+/** A TTY-like stdin mirroring ink-testing-library's: a keypress is delivered
+ *  via both the 'readable'/read() and 'data' paths. */
+class FakeStdin extends EventEmitter {
+    isTTY = true;
+    data = null;
+    press = (data) => {
+        this.data = data;
+        this.emit('readable');
+        this.emit('data', data);
+    };
+    setEncoding() { }
+    setRawMode() { }
+    resume() { }
+    pause() { }
+    ref() { }
+    unref() { }
+    read = () => {
+        const d = this.data;
+        this.data = null;
+        return d;
+    };
+}
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+/** Mirrors Fleet's Dashboard: a windowed ScrollableList sized off
+ *  useAvailableHeight(), driven by j / down-arrow via the input dispatcher. */
+function MockDashboard() {
+    const [index, move] = useReducer((cur, delta) => Math.max(0, Math.min(APPS.length - 1, cur + delta)), 0);
+    const available = useAvailableHeight();
+    const listHeight = Math.max(5, available - 4); // same formula as Dashboard.tsx
+    const handler = (input, key) => {
+        if (input === 'j' || key.downArrow) {
+            move(1);
+            return true;
+        }
+        if (input === 'k' || key.upArrow) {
+            move(-1);
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(handler);
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Text, { bold: true, children: [APPS.length, " apps"] }), _jsx(ScrollableList, { items: APPS, selectedIndex: index, maxVisible: listHeight, renderItem: (item, selected) => (_jsxs(Text, { color: selected ? 'cyan' : undefined, children: [selected ? '> ' : '  ', item] })) })] }));
+}
+/** Fleet's real chrome: InputDispatcher outside, Viewport(chrome) inside. */
+function FleetUI() {
+    return (_jsx(InputDispatcher, { globalHandler: () => false, children: _jsxs(Viewport, { chrome: 6, children: [_jsx(Text, { children: "fleet" }), _jsx(MockDashboard, {})] }) }));
+}
+/** The pre-fix viewport: a root box pinned to the FULL terminal height. */
+function LegacyChrome() {
+    return (_jsx(InputDispatcher, { globalHandler: () => false, children: _jsxs(Box, { flexDirection: "column", height: ROWS, children: [_jsx(Text, { children: "fleet" }), _jsx(MockDashboard, {})] }) }));
+}
+/** Mount with Ink's production render path, scroll SCROLL_STEPS rows, and
+ *  record every byte Ink writes to the terminal. */
+async function scrollAndRecord(node) {
+    const stdout = new RecordingStdout();
+    const stdin = new FakeStdin();
+    const app = render(node, {
+        stdout: stdout,
+        stdin: stdin,
+        debug: false,
+        exitOnCtrlC: false,
+        patchConsole: false,
+    });
+    await sleep(40);
+    for (let i = 0; i < SCROLL_STEPS; i++) {
+        stdin.press(DOWN_ARROW);
+        await sleep(45); // > Ink's 32ms render throttle, so each scroll renders
+    }
+    await sleep(60);
+    app.unmount();
+    const output = stdout.writes.join('');
+    return { clears: output.split(CLEAR_TERMINAL).length - 1, output };
+}
+describe('Fleet TUI scroll flicker proof', () => {
+    beforeEach(() => {
+        process.setMaxListeners(0);
+        Object.defineProperty(process.stdout, 'rows', {
+            value: ROWS,
+            writable: true,
+            configurable: true,
+        });
+        Object.defineProperty(process.stdout, 'columns', {
+            value: COLUMNS,
+            writable: true,
+            configurable: true,
+        });
+    });
+    // skipped on ci: ink picks up github_actions / ci directly and gates the
+    // clearterminal branch on tty-ish heuristics that the in-process recorder
+    // can't fully spoof. the control passes locally where the production
+    // render path is reachable, so the proof below still has its anchor when
+    // run pre-commit; gh actions just doesn't reproduce the legacy bug.
+    it.skipIf(Boolean(process.env.CI))('CONTROL: a full-terminal-height frame flickers on every scroll render', async () => {
+        const { clears } = await scrollAndRecord(_jsx(LegacyChrome, {}));
+        expect(clears).toBeGreaterThan(0);
+    });
+    it('Fleet UI scrolls 20 rows with ZERO full-screen clears', async () => {
+        const { clears, output } = await scrollAndRecord(_jsx(FleetUI, {}));
+        // The scroll genuinely happened: ScrollableList only renders its
+        // "more above" indicator once the window has scrolled down.
+        expect(output).toContain('more above');
+        // ...and across every one of those re-renders, Ink never wiped the
+        // screen. Zero clearTerminal sequences => zero flicker.
+        expect(clears).toBe(0);
+    });
+});

package/dist/tui/types.d.ts

@@ -1,4 +1,4 @@
-export type View = 'dashboard' | 'app-detail' | 'health' | 'secrets' | 'secret-edit' | 'logs' | 'logs-multi';
+export type View = 'dashboard' | 'app-detail' | 'health' | 'secrets' | 'secret-edit' | 'logs' | 'logs-multi' | 'command-palette';
 export type SecretsSubView = 'app-list' | 'secret-list';
 export interface TuiState {
     currentView: View;

package/dist/tui/views/CommandPalette.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function CommandPalette(props: {
+    onOpenView: (view: string) => void;
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/tui/views/CommandPalette.js

@@ -0,0 +1,90 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Box, Text } from 'ink';
+import { useRegisterHandler } from '@matthesketh/ink-input-dispatcher';
+import { ScrollableList } from '@matthesketh/ink-scrollable-list';
+import { loadRegistry } from '../../registry/index.js';
+import { allCommands } from '../../registry/registry.js';
+import { ArgForm } from '../components/ArgForm.js';
+import { runFleetCommand } from '../exec-bridge.js';
+import { colors } from '../theme.js';
+export function CommandPalette(props) {
+    // load the registry once and snapshot the visible commands. a lazy useState
+    // initialiser runs exactly once — unlike a bare call in the render body.
+    const [commands] = useState(() => {
+        loadRegistry();
+        return allCommands().filter(c => !c.cliOnly);
+    });
+    const [query, setQuery] = useState('');
+    const [index, setIndex] = useState(0);
+    const [chosen, setChosen] = useState(null);
+    const [output, setOutput] = useState(null);
+    const filtered = useMemo(() => commands.filter(c => (c.name + ' ' + c.summary).toLowerCase().includes(query.toLowerCase())), [commands, query]);
+    const listHandler = (input, key) => {
+        if (chosen || output !== null)
+            return false;
+        if (key.escape) {
+            props.onClose();
+            return true;
+        }
+        if (key.downArrow) {
+            setIndex(i => Math.min(i + 1, filtered.length - 1));
+            return true;
+        }
+        if (key.upArrow) {
+            setIndex(i => Math.max(i - 1, 0));
+            return true;
+        }
+        if (key.return) {
+            const cmd = filtered[index];
+            if (!cmd)
+                return true;
+            if (cmd.tui && typeof cmd.tui === 'object') {
+                props.onOpenView(cmd.tui.view);
+                return true;
+            }
+            setChosen(cmd);
+            return true;
+        }
+        if (key.backspace || key.delete) {
+            setQuery(q => q.slice(0, -1));
+            setIndex(0);
+            return true;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setQuery(q => q + input);
+            setIndex(0);
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(listHandler);
+    if (output !== null) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Text, { bold: true, color: colors.primary, children: [chosen?.name, " result"] }), _jsx(Text, { children: output }), _jsx(Text, { color: colors.muted, children: "esc to close" }), _jsx(CloseOnEscape, { onClose: () => { setOutput(null); setChosen(null); } })] }));
+    }
+    if (chosen) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: colors.primary, children: chosen.name }), _jsx(ArgForm, { schema: chosen.args, onCancel: () => setChosen(null), onSubmit: async (values) => {
+                        const argv = [chosen.name];
+                        for (const [k, v] of Object.entries(values)) {
+                            if (v === true)
+                                argv.push(`--${k}`);
+                            else if (v !== false && v !== '' && v != null)
+                                argv.push(`--${k}`, String(v));
+                        }
+                        const r = await runFleetCommand(argv);
+                        setOutput(r.output);
+                    } })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, color: colors.primary, children: "Command palette" }), _jsxs(Text, { color: colors.muted, children: ["filter: ", query || '(type to filter)'] }), _jsx(ScrollableList, { items: filtered, selectedIndex: Math.min(index, Math.max(0, filtered.length - 1)), maxVisible: 12, emptyText: "  no matching commands", renderItem: (cmd, selected) => (_jsxs(Box, { children: [_jsx(Text, { color: selected ? colors.primary : colors.muted, children: selected ? '> ' : '  ' }), _jsx(Box, { width: 20, children: _jsx(Text, { bold: selected, children: cmd.name }) }), _jsx(Text, { color: colors.muted, children: cmd.summary })] })) })] }));
+}
+function CloseOnEscape(props) {
+    const handler = (_input, key) => {
+        if (key.escape) {
+            props.onClose();
+            return true;
+        }
+        return false;
+    };
+    useRegisterHandler(handler);
+    return _jsx(_Fragment, {});
+}

package/dist/tui/views/CommandPalette.test.d.ts

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

package/dist/tui/views/CommandPalette.test.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { z } from 'zod';
+import { InputDispatcher } from '@matthesketh/ink-input-dispatcher';
+vi.mock('../exec-bridge', () => ({
+    runFleetCommand: vi.fn(async () => ({ ok: true, output: 'done' })),
+}));
+import { runFleetCommand } from '../exec-bridge.js';
+import { register, defineCommand } from '../../registry/registry.js';
+import { loadRegistry, _resetLoader } from '../../registry/index.js';
+import { CommandPalette } from './CommandPalette.js';
+/** flush ink's render queue after a keystroke */
+const flush = () => new Promise(r => setTimeout(r, 30));
+beforeEach(() => _resetLoader());
+afterEach(() => _resetLoader());
+describe('CommandPalette', () => {
+    it('lists registry commands', async () => {
+        const { lastFrame } = render(_jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(CommandPalette, { onOpenView: () => { }, onClose: () => { } }) }));
+        await flush();
+        // assert against the first alphabetical command — the palette caps
+        // visible items at 12 so commands later in the list (status, stop,
+        // whoami, ...) may scroll off when the registry grows.
+        expect(lastFrame() ?? '').toContain('add');
+    });
+    it('hides non-matching commands when a query is typed', async () => {
+        const { lastFrame, stdin } = render(_jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(CommandPalette, { onOpenView: () => { }, onClose: () => { } }) }));
+        await flush();
+        // sanity: at least the first command is visible before filtering
+        expect(lastFrame() ?? '').toContain('add');
+        // type a query that matches nothing
+        stdin.write('z');
+        await flush();
+        stdin.write('z');
+        await flush();
+        stdin.write('z');
+        await flush();
+        stdin.write('z');
+        await flush();
+        const frame = lastFrame() ?? '';
+        expect(frame).not.toContain('status');
+        expect(frame).toContain('no matching commands');
+    });
+    it('calls onOpenView when enter is pressed on a command with a tui view', async () => {
+        // type 'stat' to filter to only status, then press enter.
+        const onOpenView = vi.fn();
+        const { stdin } = render(_jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(CommandPalette, { onOpenView: onOpenView, onClose: () => { } }) }));
+        await flush();
+        stdin.write('s');
+        await flush();
+        stdin.write('t');
+        await flush();
+        stdin.write('a');
+        await flush();
+        stdin.write('t');
+        await flush();
+        stdin.write('\r');
+        await flush();
+        expect(onOpenView).toHaveBeenCalledWith('dashboard');
+    });
+    it('builds argv from an empty-args command and calls runFleetCommand', async () => {
+        // register an ad-hoc command with no tui and an empty args schema.
+        // loadRegistry() first so the loaded flag is set and the component's own
+        // call does not wipe the ad-hoc registration.
+        loadRegistry();
+        register(defineCommand({
+            name: 'demo-run',
+            summary: 'a demo command',
+            args: z.object({}),
+            async run() { return { ok: true, summary: 'ok', data: null }; },
+        }));
+        const { stdin } = render(_jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(CommandPalette, { onOpenView: () => { }, onClose: () => { } }) }));
+        await flush();
+        // type 'demo-run' to filter to exactly this command so the test is
+        // stable regardless of how many other commands are in the registry.
+        for (const ch of 'demo-run') {
+            stdin.write(ch);
+            await flush();
+        }
+        // press enter on demo-run → ArgForm shown (no tui field).
+        stdin.write('\r');
+        await flush();
+        // ArgForm with no fields: press enter → onSubmit({}) → runFleetCommand.
+        stdin.write('\r');
+        await flush();
+        expect(vi.mocked(runFleetCommand)).toHaveBeenCalledWith(['demo-run']);
+    });
+    it('builds --flag argv when a boolean field is toggled before submit', async () => {
+        // register a command with a boolean arg.
+        loadRegistry();
+        register(defineCommand({
+            name: 'demo-flag',
+            summary: 'a flag demo',
+            args: z.object({ force: z.boolean().default(false) }),
+            async run() { return { ok: true, summary: 'ok', data: null }; },
+        }));
+        const { stdin } = render(_jsx(InputDispatcher, { globalHandler: () => false, children: _jsx(CommandPalette, { onOpenView: () => { }, onClose: () => { } }) }));
+        await flush();
+        // type 'demo-flag' to filter to exactly this command so the test is
+        // stable regardless of how many other commands are in the registry.
+        for (const ch of 'demo-flag') {
+            stdin.write(ch);
+            await flush();
+        }
+        // press enter on demo-flag.
+        stdin.write('\r');
+        await flush();
+        // ArgForm is now showing the 'force' boolean field (cursor on it).
+        // press space to toggle force → true.
+        stdin.write(' ');
+        await flush();
+        // press enter to submit { force: true }.
+        stdin.write('\r');
+        await flush();
+        expect(vi.mocked(runFleetCommand)).toHaveBeenCalledWith(['demo-flag', '--force']);
+    });
+});

package/dist/tui/views/Dashboard.js

@@ -5,16 +5,20 @@ 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 { useAppState, useAppDispatch, useRedact } from '../state.js';
+import { useAppState, useAppDispatch, redactName } from '../state.js';
 import { useFleetData } from '../hooks/use-fleet-data.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 items = useMemo(() => (status?.apps ?? []).map(app => ({
+        ...app,
+        // bake the redacted label onto the item: ScrollableList memoises rows by
+        // item identity, so a redaction toggle must yield fresh item objects.
+        displayLabel: state.redacted ? redactName(app.name) : app.name,
+    })), [status, state.redacted]);
     const handler = (input, key) => {
         if (items.length === 0)
             return false;
@@ -47,8 +51,7 @@ export function Dashboard() {
         return _jsx(Text, { color: colors.muted, children: "No data" });
     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"] }))] }), _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);
-                    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) }) })] }));
+                    const label = item.displayLabel;
+                    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: label.length > 22 ? label.slice(0, 19) + '...' : label }) }), _jsx(Box, { width: 14, children: _jsx(Text, { children: item.systemd.slice(0, 12) }) }), _jsx(Box, { width: 14, children: _jsx(Text, { children: item.containers }) }), _jsx(Box, { width: 12, children: _jsx(Text, { children: item.health.slice(0, 10) }) })] }));
                 } })] }));
 }

package/dist/tui/views/HealthView.js

@@ -7,7 +7,7 @@ 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 { useAppState, useAppDispatch, useRedact } from '../state.js';
+import { useAppState, useAppDispatch, redactName } from '../state.js';
 import { colors } from '../theme.js';
 export function HealthView() {
     const state = useAppState();
@@ -17,13 +17,18 @@ export function HealthView() {
     // 15s) flip `loading` true/false too, but the data is already on screen —
     // ticking a spinner there causes the whole table to redraw at frame rate.
     const initialLoad = loading && results.length === 0;
-    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 items = useMemo(() => results.map(r => ({
+        ...r,
+        // same reasoning as the dashboard view — ScrollableList memoises rows by
+        // item identity, so the redacted label must live on the item itself.
+        displayApp: state.redacted ? redactName(r.app) : r.app,
+    })), [results, state.redacted]);
     const handler = (input, key) => {
         if (results.length === 0)
             return false;
@@ -45,7 +50,7 @@ export function HealthView() {
         return (_jsx(Box, { padding: 1, children: _jsxs(Text, { color: colors.error, children: ["Error: ", error] }) }));
     }
     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"] })] }), _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) => {
+    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"] })] }), _jsxs(Text, { bold: true, children: ['  APP'.padEnd(26), 'SYSTEMD'.padEnd(12), 'CONTAINERS'.padEnd(20), 'HTTP'.padEnd(10), "OVERALL"] }), _jsx(ScrollableList, { items: items, selectedIndex: Math.min(state.healthIndex, items.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).
@@ -57,6 +62,6 @@ export function HealthView() {
                                 ? '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" })] }));
+                    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: selected ? colors.primary : colors.muted, children: selected ? '> ' : '  ' }), _jsx(Text, { children: result.displayApp.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/SecretEdit.js

@@ -5,7 +5,6 @@ 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';
 import { colors } from '../theme.js';
 export function SecretEdit() {
     const { selectedApp, selectedSecret } = useAppState();
@@ -23,22 +22,20 @@ export function SecretEdit() {
                 clearTimeout(timerRef.current);
         };
     }, []);
-    useEffect(() => {
-        if (!isNew && selectedApp && selectedSecret) {
-            try {
-                const existing = getCoreSecret(selectedApp, selectedSecret);
-                if (existing)
-                    setValue(existing);
-            }
-            catch {
-                // ignore
-            }
-        }
-    }, [isNew, selectedApp, selectedSecret]);
-    const save = () => {
+    // SECURITY: existing secret values are NEVER preloaded into editor state.
+    // The TextInput's `mask="*"` only changes the rendered glyph — the
+    // underlying React state would still hold plaintext, exposing it to
+    // DevTools dumps, error boundary captures, and process memory dumps.
+    // Editing requires re-typing the value, matching the CLI posture in
+    // `src/commands/secrets.ts` which rejects argv values for the same reason.
+    const save = async () => {
         if (!selectedApp || !keyName)
             return;
-        const result = secrets.saveSecret(selectedApp, keyName, value);
+        const result = await secrets.saveSecret(selectedApp, keyName, value);
+        // Clear the local plaintext from React state immediately, regardless of
+        // success/failure. The state holds plaintext only for the duration of
+        // the save call.
+        setValue('');
         if (result.ok) {
             setStatus('Saved and re-sealed');
             timerRef.current = setTimeout(() => {
@@ -60,5 +57,7 @@ export function SecretEdit() {
     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');
-                                } })) : (_jsx(Text, { bold: true, children: keyName }))] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.muted, children: "Value: " }), phase === 'value' ? (_jsx(TextInput, { value: value, onChange: setValue, onSubmit: save, mask: "*" })) : (_jsx(Text, { color: colors.muted, children: "(press Enter on key first)" }))] })] }), status && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: status.startsWith('Error') ? colors.error : colors.success, children: status }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: "Enter to save | Esc to cancel" }) })] }));
+                                } })) : (_jsx(Text, { bold: true, children: keyName }))] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.muted, children: "Value: " }), phase === 'value' ? (_jsx(TextInput, { value: value, onChange: setValue, onSubmit: save, mask: "*" })) : (_jsx(Text, { color: colors.muted, children: "(press Enter on key first)" }))] })] }), status && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: status.startsWith('Error') ? colors.error : colors.success, children: status }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: isNew
+                        ? 'Adding new secret. Type the key name, then the value.'
+                        : `Editing ${keyName} - paste new value to replace. (Current value not displayed.)` }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.muted, children: "Enter to save | Esc to cancel" }) })] }));
 }

package/dist/tui/views/SecretEdit.test.d.ts

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