herdr-remote 0.2.18 → 0.2.19

package/dist/tui/screens/Herdr.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.js';
+import { FieldRow, Message, Panel, Row, Selectable, StatusDot } from '../components/common.js';
+import { TextField } from '../components/TextField.js';
+import { MIN_HERDR_VERSION, getField, getFieldPlaceholder, herdrVersion, saveDraft, setField, } from '../api.js';
+export function HerdrScreen({ ctx }) {
+    const { t, draft, editingId } = ctx;
+    const [selected, setSelected] = useState('socketPath');
+    const [installed, setInstalled] = useState(null);
+    useEffect(() => {
+        setInstalled(herdrVersion());
+    }, []);
+    const entries = [
+        { id: 'socketPath', kind: 'field', label: t('herdr.socketPath') },
+        { id: 'herdrArgs', kind: 'field', label: t('herdr.args') },
+        { id: 'herdrAutoStart', kind: 'toggle', label: t('field.herdrAutoStart') },
+        { id: 'save', kind: 'action', label: t('common.save') },
+    ];
+    const applyField = (id, value) => {
+        const result = setField(draft, id, value);
+        if (result.errorKey) {
+            ctx.notify(t(result.errorKey), 'error');
+            return false;
+        }
+        ctx.updateDraft(result.draft);
+        return true;
+    };
+    const save = () => {
+        try {
+            const result = saveDraft(draft);
+            ctx.reloadConfig();
+            ctx.notify(t('common.saved', { path: result.path }), 'success');
+        }
+        catch (error) {
+            ctx.notify(t('error.saveFailed', { message: error.message }), 'error');
+        }
+    };
+    const activate = (id) => {
+        if (id === 'socketPath' || id === 'herdrArgs') {
+            ctx.setEditing(id);
+            return;
+        }
+        if (id === 'herdrAutoStart') {
+            applyField(id, draft.herdr.autoStart ? 'off' : 'on');
+            return;
+        }
+        if (id === 'save')
+            save();
+    };
+    useInput((input, key) => {
+        const index = entries.findIndex((entry) => entry.id === selected);
+        const safeIndex = index >= 0 ? index : 0;
+        if (key.upArrow)
+            setSelected(entries[(safeIndex - 1 + entries.length) % entries.length].id);
+        else if (key.downArrow)
+            setSelected(entries[(safeIndex + 1) % entries.length].id);
+        else if (key.return)
+            activate(selected);
+        else if (input === 's')
+            save();
+    }, { isActive: editingId === null });
+    return (_jsxs(Panel, { title: t('herdr.title'), children: [entries.map((entry) => entry.kind === 'toggle' ? (_jsx(FieldRow, { label: entry.label, selected: selected === entry.id, onSelect: () => {
+                    setSelected(entry.id);
+                    activate(entry.id);
+                }, onHover: () => setSelected(entry.id), children: _jsx(Text, { color: draft.herdr.autoStart ? theme.ok : theme.muted, children: draft.herdr.autoStart ? `[×] ${t('common.on')}` : `[ ] ${t('common.off')}` }) }, entry.id)) : entry.kind === 'field' ? (_jsx(FieldRow, { label: entry.label, selected: selected === entry.id, onSelect: () => activate(entry.id), onHover: () => setSelected(entry.id), children: _jsx(TextField, { value: getField(draft, entry.id), placeholder: ctx.t(getFieldPlaceholder(draft, entry.id)), active: editingId === entry.id, onSubmit: (value) => {
+                        if (applyField(entry.id, value))
+                            ctx.setEditing(null);
+                    }, onCancel: () => ctx.setEditing(null) }) }, entry.id)) : (_jsx(Box, { marginTop: 1, children: _jsx(Selectable, { selected: selected === entry.id, onSelect: () => {
+                        setSelected(entry.id);
+                        activate(entry.id);
+                    }, onHover: () => setSelected(entry.id), children: entry.label }) }, entry.id))), selected === 'herdrAutoStart' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('herdr.autoStartHint') }) })) : null, ctx.dirty ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.warn, children: t('hint.unsavedChanges') }) })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [installed?.version ? (_jsx(Row, { label: t('herdr.version'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: installed.supported ? 'ok' : 'warn' }), _jsx(Text, { children: ` ${installed.version}` })] }) })) : null, installed?.version && !installed.supported ? (_jsx(Text, { color: theme.warn, children: t('herdr.versionOutdated', { version: installed.version, minimum: MIN_HERDR_VERSION }) })) : null, installed && !installed.ok ? (_jsx(Text, { color: theme.warn, children: t('herdr.cliMissing') })) : null] }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}

package/dist/tui/screens/Keepalive.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.js';
+import { Message, Panel, Row, Selectable, StatusDot } from '../components/common.js';
+import { ChoiceList } from './Relay.js';
+import { keepalive, saveDraft, setField } from '../api.js';
+const MANAGERS = ['auto', 'systemd', 'launchd', 'supervisor', 'none'];
+export function Keepalive({ ctx }) {
+    const { t, status, draft, editingId } = ctx;
+    const [selected, setSelected] = useState('install');
+    const current = status?.keepalive;
+    const entries = [
+        { id: 'install', label: t('keepalive.install') },
+        { id: 'restart', label: t('keepalive.restart') },
+        { id: 'uninstall', label: t('keepalive.uninstall') },
+        { id: 'manager', label: `${t('keepalive.manager')}: ${draft.keepalive.manager}` },
+        ...(process.platform === 'linux' && current?.manager === 'systemd' && !current?.linger
+            ? [{ id: 'linger', label: t('keepalive.enableLinger') }]
+            : []),
+    ];
+    const activate = (id) => {
+        if (id === 'manager') {
+            ctx.setEditing('keepaliveManager');
+            return;
+        }
+        ctx.run(() => {
+            if (id === 'install') {
+                const result = keepalive.install(ctx.config);
+                ctx.notify(t('keepalive.installed', { manager: result.manager }), 'success');
+                return;
+            }
+            if (id === 'uninstall') {
+                keepalive.uninstall(ctx.config);
+                ctx.notify(t('keepalive.uninstalled'), 'success');
+                return;
+            }
+            if (id === 'restart') {
+                keepalive.restart(ctx.config);
+                ctx.notify(t('keepalive.restarted'), 'success');
+                return;
+            }
+            if (id === 'linger') {
+                const result = keepalive.enableLinger();
+                ctx.notify(t('keepalive.lingerDone', { username: result.username }), 'success');
+            }
+        });
+    };
+    useInput((_input, key) => {
+        const index = entries.findIndex((entry) => entry.id === selected);
+        if (key.upArrow)
+            setSelected(entries[(index - 1 + entries.length) % entries.length].id);
+        else if (key.downArrow)
+            setSelected(entries[(index + 1) % entries.length].id);
+        else if (key.return)
+            activate(selected);
+    }, { isActive: editingId === null });
+    if (editingId === 'keepaliveManager') {
+        return (_jsx(Panel, { title: t('field.keepalive'), children: _jsx(ChoiceList, { options: MANAGERS.map((manager) => ({ id: manager, label: manager })), current: draft.keepalive.manager, onPick: (manager) => {
+                    const result = setField(draft, 'keepaliveManager', manager);
+                    if (result.errorKey) {
+                        ctx.notify(t(result.errorKey), 'error');
+                        return;
+                    }
+                    ctx.updateDraft(result.draft);
+                    try {
+                        saveDraft(result.draft);
+                        ctx.reloadConfig();
+                    }
+                    catch (error) {
+                        ctx.notify(t('error.saveFailed', { message: error.message }), 'error');
+                    }
+                    ctx.setEditing(null);
+                }, onCancel: () => ctx.setEditing(null) }) }));
+    }
+    return (_jsxs(Panel, { title: t('keepalive.title'), children: [_jsx(Row, { label: t('keepalive.manager'), children: _jsx(Text, { children: current?.manager ?? t('common.unknown') }) }), _jsx(Row, { label: t('keepalive.state'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: current?.active ? 'ok' : current?.installed ? 'warn' : 'idle' }), _jsxs(Text, { children: [' ', current?.active
+                                    ? t('common.running')
+                                    : current?.installed
+                                        ? t('common.installed')
+                                        : t('common.notInstalled')] })] }) }), current?.unitPath ? (_jsx(Row, { label: t('keepalive.unitPath'), children: _jsx(Text, { color: theme.muted, children: current.unitPath }) })) : null, _jsx(Box, { marginTop: 1, flexDirection: "column", children: entries.map((entry) => (_jsx(Selectable, { selected: selected === entry.id, onSelect: () => {
+                        setSelected(entry.id);
+                        activate(entry.id);
+                    }, onHover: () => setSelected(entry.id), children: entry.label }, entry.id))) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [current?.manager === 'systemd' ? (_jsx(Text, { color: current.linger ? theme.muted : theme.warn, children: current.linger ? t('keepalive.lingerEnabled') : t('keepalive.lingerDisabled') })) : null, current?.manager === 'supervisor' ? (_jsx(Text, { color: theme.warn, children: t('keepalive.fallbackNote') })) : null, _jsx(Text, { color: theme.muted, children: t('keepalive.logsHint', { command: status?.logsHint ?? '' }) })] }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}

package/dist/tui/screens/Overview.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { theme } from '../theme.js';
+import { Message, Panel, Row, StatusDot } from '../components/common.js';
+import { formatUptime } from '../api.js';
+function level(alive) {
+    if (alive === null || alive === undefined)
+        return 'idle';
+    return alive ? 'ok' : 'bad';
+}
+export function Overview({ ctx }) {
+    const { t, status, config } = ctx;
+    if (!status) {
+        return (_jsx(Panel, { title: t('overview.title'), children: _jsx(Text, { color: theme.muted, children: t('common.loading') }) }));
+    }
+    const health = status.relay.health || {};
+    const relayReachable = health.ok !== false;
+    const relayLevel = status.relay.local
+        ? level(status.relay.alive)
+        : relayReachable
+            ? 'ok'
+            : 'bad';
+    const keepaliveLevel = status.keepalive.active
+        ? 'ok'
+        : status.keepalive.installed
+            ? 'warn'
+            : 'idle';
+    const nothingRunning = !status.host.alive && (status.relay.local ? !status.relay.alive : !relayReachable);
+    return (_jsxs(Panel, { title: t('overview.title'), children: [_jsx(Row, { label: t('overview.mode'), children: _jsx(Text, { children: t(`mode.${status.mode}`) }) }), _jsx(Row, { label: t('overview.relay'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: relayLevel }), _jsxs(Text, { children: [' ', status.relay.local
+                                    ? t('overview.relayLocal', { bind: status.relay.bind ?? '', port: status.relay.port })
+                                    : t('overview.relayRemote', { url: status.relay.remoteUrl ?? '' })] }), status.relay.local && status.relay.pid ? (_jsx(Text, { color: theme.muted, children: `  ${t('common.pid', { pid: status.relay.pid })}` })) : null] }) }), _jsx(Row, { label: t('overview.host'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: level(status.host.alive) }), _jsx(Text, { children: ` ${status.host.alive ? t('common.running') : t('common.stopped')}` }), status.host.pid ? (_jsx(Text, { color: theme.muted, children: `  ${t('common.pid', { pid: status.host.pid })}` })) : null] }) }), _jsx(Row, { label: t('overview.socket'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: status.host.socketExists ? 'ok' : 'warn' }), _jsx(Text, { color: theme.muted, children: ` ${status.host.socketPath}` }), status.host.socketExists ? null : (_jsx(Text, { color: theme.warn, children: `  ${t('overview.socketMissing')}` }))] }) }), _jsx(Row, { label: t('overview.webUrl'), children: _jsx(Text, { color: theme.accent, children: status.publicUrl }) }), _jsx(Row, { label: t('overview.keepalive'), children: _jsxs(Box, { children: [_jsx(StatusDot, { level: keepaliveLevel }), _jsxs(Text, { children: [` ${status.keepalive.manager} — `, status.keepalive.active
+                                    ? t('common.running')
+                                    : status.keepalive.installed
+                                        ? t('common.installed')
+                                        : t('common.notInstalled')] })] }) }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: relayReachable ? (_jsxs(_Fragment, { children: [_jsx(Row, { label: t('overview.hosts'), children: _jsx(Text, { children: health.hosts ?? 0 }) }), _jsx(Row, { label: t('overview.devices'), children: _jsx(Text, { children: health.clients ?? 0 }) }), _jsx(Row, { label: t('overview.uptime'), children: _jsx(Text, { color: theme.muted, children: formatUptime(health.uptimeSeconds, t) }) })] })) : (_jsx(Text, { color: theme.warn, children: t('overview.unreachable', { message: health.message ?? '' }) })) }), nothingRunning ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('overview.notStarted') }) })) : null, config.relay.mode === 'local' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('mode.local.description') }) })) : null, _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}

package/dist/tui/screens/Pair.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import QRCode from 'qrcode';
+import { theme } from '../theme.js';
+import { Menu, Message, Panel } from '../components/common.js';
+import { extractPairingCode, pair } from '../api.js';
+// A QR block needs room for the symbol plus its quiet zone; below this the
+// output wraps into noise, so the URL alone is the honest thing to show.
+const MIN_QR_COLUMNS = 44;
+export function PairScreen({ ctx }) {
+    const { t, run } = ctx;
+    const { columns } = useWindowSize();
+    const [pairing, setPairing] = useState(null);
+    const [qr, setQr] = useState(null);
+    const [remainingMs, setRemainingMs] = useState(0);
+    const [selected, setSelected] = useState('generate');
+    useEffect(() => {
+        if (!pairing)
+            return undefined;
+        const tick = () => setRemainingMs(Math.max(0, pairing.expiresAt - Date.now()));
+        tick();
+        const timer = setInterval(tick, 1000);
+        return () => clearInterval(timer);
+    }, [pairing]);
+    useEffect(() => {
+        if (!pairing || columns < MIN_QR_COLUMNS) {
+            setQr(null);
+            return;
+        }
+        let cancelled = false;
+        QRCode.toString(pairing.pairUrl, { type: 'terminal', small: true, errorCorrectionLevel: 'L' })
+            .then((value) => {
+            if (!cancelled)
+                setQr(value.replace(/\n$/, ''));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setQr(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [pairing, columns]);
+    const generate = () => run(async () => {
+        ctx.notify(t('pair.working'));
+        try {
+            const result = await pair();
+            const code = extractPairingCode(result);
+            setPairing({ ...result, code });
+            ctx.notify('', 'info');
+        }
+        catch (error) {
+            const message = error.message;
+            setPairing(null);
+            throw new Error(/host_offline|no Herdr host|did not register/i.test(message)
+                ? t('pair.hostOffline')
+                : t('pair.failed', { message }));
+        }
+    });
+    useInput((_input, key) => {
+        if (key.return)
+            generate();
+    }, { isActive: ctx.editingId === null });
+    const expired = pairing !== null && remainingMs <= 0;
+    const minutes = Math.floor(remainingMs / 60000);
+    const seconds = Math.floor((remainingMs % 60000) / 1000);
+    return (_jsxs(Panel, { title: t('pair.title'), children: [_jsx(Menu, { items: [{ id: 'generate', label: pairing ? t('pair.regenerate') : t('pair.generate') }], selectedId: selected, onChange: setSelected, onSelect: generate }), pairing ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: `${t('pair.code')}  ` }), _jsx(Text, { bold: true, color: expired ? theme.muted : theme.accent, children: pairing.code.split('').join(' ') })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: `${t('pair.url')}  ` }), _jsx(Text, { children: pairing.pairUrl })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: expired ? theme.bad : theme.muted, children: expired
+                                ? t('pair.expired')
+                                : t('pair.expires', {
+                                    minutes: `${minutes}:${String(seconds).padStart(2, '0')}`,
+                                    time: new Date(pairing.expiresAt).toLocaleTimeString(),
+                                }) }) }), !expired && qr ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { children: qr }), _jsx(Text, { color: theme.muted, children: t('pair.qrHint') })] })) : null, !expired && !qr && columns < MIN_QR_COLUMNS ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('pair.qrUnavailable') }) })) : null, _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('pair.instructions') }) })] })) : null, _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}

package/dist/tui/screens/Relay.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.js';
+import { FieldRow, Menu, Message, Panel, Row, Selectable } from '../components/common.js';
+import { TextField } from '../components/TextField.js';
+import { bindAddress, fieldsForMode, getField, getFieldPlaceholder, isOfficialRelay, listReachableAddresses, probeRelay, regenerateHostIdentity, relayStartCommand, saveDraft, selectedMode, setField, setRelayPassword, } from '../api.js';
+export function RelayScreen({ ctx }) {
+    const { t, draft, editingId } = ctx;
+    const [selected, setSelected] = useState('mode');
+    const [revealTokens, setRevealTokens] = useState(false);
+    const [showEnv, setShowEnv] = useState(false);
+    const [password, setPassword] = useState(ctx.runtime.relayPassword || '');
+    // The official relay is ours: its address is fixed and it takes no password.
+    // Both are therefore facts to *show*, not fields to fill in — an editable box
+    // holding a value that must not change is an invitation to break the setup.
+    const official = isOfficialRelay(draft);
+    const fields = useMemo(() => fieldsForMode(draft.relay.mode).filter((field) => ['mode', 'port', 'lanHost', 'remoteUrl', 'publicUrl'].includes(field.id)), [draft.relay.mode]);
+    const entries = [
+        ...fields.map((field) => ({
+            id: field.id,
+            // The official relay's address is ours and its browser URL follows from
+            // it, so neither is offered for editing: an editable box holding a value
+            // that must not change is an invitation to break the setup.
+            kind: (official && (field.id === 'remoteUrl' || field.id === 'publicUrl')
+                ? 'readonly'
+                : 'field'),
+            fieldKind: field.kind,
+            label: t(field.labelKey),
+        })),
+        // The password only matters when talking to a relay somebody else started;
+        // a local relay is configured with our own token automatically, and the
+        // official one authenticates workstations by their own host token.
+        ...(draft.relay.mode === 'remote' && !official
+            ? [{ id: 'password', kind: 'password', label: t('relay.password') }]
+            : []),
+        // Saving needs a row of its own. Every field here only edits a draft, and
+        // the services restart from what is on disk — with `s` as the sole way to
+        // commit, a change could look applied, survive a restart, and never take
+        // effect. It is also the only way to save with the mouse.
+        { id: 'save', kind: 'action', label: t('common.save') },
+        { id: 'test', kind: 'action', label: t('relay.test') },
+        ...(draft.relay.mode === 'remote' && !official
+            ? [
+                {
+                    id: 'reveal',
+                    kind: 'action',
+                    label: revealTokens ? t('relay.hidePassword') : t('relay.showPassword'),
+                },
+                { id: 'env', kind: 'action', label: t('relay.envSnippet') },
+            ]
+            : []),
+        { id: 'regenerate', kind: 'action', label: t('relay.regenerate') },
+    ];
+    const addresses = useMemo(() => listReachableAddresses({ includeLoopback: false }), []);
+    /**
+     * Apply several fields as one edit.
+     *
+     * Each `setField` has to build on the previous result rather than on `draft`,
+     * which is the value captured when this render began. Calling a single-field
+     * helper twice in a row silently dropped the first change: the second call
+     * started from the stale draft and committed it back over the first.
+     */
+    const applyFields = (updates) => {
+        let next = draft;
+        for (const [id, value] of updates) {
+            const result = setField(next, id, value);
+            if (result.errorKey) {
+                ctx.notify(t(result.errorKey), 'error');
+                return false;
+            }
+            next = result.draft;
+        }
+        ctx.updateDraft(next);
+        ctx.notify('', 'info');
+        return true;
+    };
+    const applyField = (id, value) => applyFields([[id, value]]);
+    const save = () => {
+        try {
+            const result = saveDraft(draft);
+            ctx.reloadConfig();
+            ctx.notify(t('common.saved', { path: result.path }), 'success');
+        }
+        catch (error) {
+            const problems = error.problems;
+            ctx.notify(problems
+                ? problems.map((key) => t(key)).join(' ')
+                : t('error.saveFailed', { message: error.message }), 'error');
+        }
+    };
+    const activate = (id) => {
+        const entry = entries.find((candidate) => candidate.id === id);
+        if (!entry)
+            return;
+        if (entry.kind === 'readonly') {
+            ctx.notify(t('relay.officialFixed'), 'info');
+            return;
+        }
+        if (entry.kind === 'field' || entry.kind === 'password') {
+            ctx.setEditing(id);
+            return;
+        }
+        if (id === 'save') {
+            save();
+            return;
+        }
+        if (id === 'reveal') {
+            setRevealTokens((current) => !current);
+            return;
+        }
+        if (id === 'env') {
+            setShowEnv((current) => !current);
+            return;
+        }
+        if (id === 'regenerate') {
+            ctx.run(() => {
+                regenerateHostIdentity();
+                ctx.reloadConfig();
+                ctx.notify(t('relay.regenerated'), 'success');
+            });
+            return;
+        }
+        if (id === 'test') {
+            ctx.run(async () => {
+                const result = await probeRelay(ctx.config);
+                ctx.notify(result.ok
+                    ? t('relay.testOk', { version: result.version ?? '?', hosts: result.hosts ?? 0 })
+                    : t('relay.testFailed', { message: result.message ?? '' }), result.ok ? 'success' : 'error');
+            });
+        }
+    };
+    useInput((input, key) => {
+        const index = entries.findIndex((entry) => entry.id === selected);
+        if (key.upArrow)
+            setSelected(entries[(index - 1 + entries.length) % entries.length].id);
+        else if (key.downArrow)
+            setSelected(entries[(index + 1) % entries.length].id);
+        else if (key.return)
+            activate(selected);
+        else if (input === 's')
+            save();
+    }, { isActive: editingId === null });
+    // Choice editors take over the panel so the option list is unambiguous.
+    if (editingId === 'mode') {
+        return (_jsx(Panel, { title: t('field.mode'), children: _jsx(ChoiceList, { options: [
+                    ...['local', 'lan'].map((mode) => ({
+                        id: mode,
+                        label: t(`mode.${mode}`),
+                        description: t(`mode.${mode}.description`),
+                    })),
+                    {
+                        id: 'official',
+                        label: t('mode.official'),
+                        description: t('mode.official.description'),
+                    },
+                    { id: 'remote', label: t('mode.remote'), description: t('mode.remote.description') },
+                ], 
+                // Reflects the official relay as its own selection rather than as an
+                // indistinguishable "self-hosted" row that happens to hold our URL.
+                current: selectedMode(draft), onPick: (choice) => {
+                    // `official` is a mode the settings model understands: it sets the
+                    // address along with the mode, and choosing the self-hosted relay
+                    // clears it again. The screen does not have to keep the two fields
+                    // in step by hand, which is what let the picker land on "official"
+                    // while every row below still described a self-hosted relay.
+                    if (!applyField('mode', choice))
+                        return;
+                    if (choice === 'official') {
+                        // A password typed for somebody else's relay is not a credential
+                        // the official one wants, and leaving it behind would send it
+                        // there on the next connection.
+                        setPassword('');
+                        setRelayPassword('');
+                    }
+                    ctx.setEditing(null);
+                }, onCancel: () => ctx.setEditing(null) }) }));
+    }
+    if (editingId === 'lanHost') {
+        const options = addresses.map((address) => ({
+            id: address.address,
+            label: `${address.address}  (${address.name}, ${t(addressKindKey(address.kind))})`,
+        }));
+        return (_jsx(Panel, { title: t('relay.selectAddress'), children: options.length === 0 ? (_jsx(Text, { color: theme.warn, children: t('relay.noAddresses') })) : (_jsx(ChoiceList, { options: options, current: draft.relay.lanHost || options[0].id, onPick: (address) => {
+                    applyField('lanHost', address);
+                    ctx.setEditing(null);
+                }, onCancel: () => ctx.setEditing(null) })) }));
+    }
+    return (_jsxs(Panel, { title: t('relay.title'), children: [draft.relay.mode !== 'remote' ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Row, { label: t('relay.listenAddress'), children: _jsx(Text, { color: theme.muted, children: `${bindAddress(draft)}:${draft.relay.port}` }) }), _jsx(Text, { color: theme.muted, children: t('relay.listenAddressHint') })] })) : null, entries.map((entry) => entry.kind === 'action' ? (_jsx(Selectable, { selected: selected === entry.id, onSelect: () => {
+                    setSelected(entry.id);
+                    activate(entry.id);
+                }, onHover: () => setSelected(entry.id), children: entry.label }, entry.id)) : (_jsx(FieldRow, { label: entry.label, selected: selected === entry.id, onSelect: () => activate(entry.id), onHover: () => setSelected(entry.id), children: entry.kind === 'password' ? (_jsx(TextField, { value: password, placeholder: t('relay.passwordEmpty'), active: editingId === 'password', mask: !revealTokens, onSubmit: (value) => {
+                        setPassword(value);
+                        setRelayPassword(value);
+                        ctx.setEditing(null);
+                        ctx.notify(t('relay.passwordSaved'), 'success');
+                    }, onCancel: () => ctx.setEditing(null) })) : entry.kind === 'readonly' ? (
+                // Fixed by us, so it is printed rather than offered for editing.
+                _jsx(Text, { color: theme.muted, children: `${getField(draft, entry.id) || placeholderText(ctx, entry.id)}  (${t('relay.locked')})` })) : entry.fieldKind === 'choice' ? (
+                // Choice fields are picked from a list, never typed, so they
+                // show the translated label rather than the stored id — and the
+                // official relay is named as itself, not as "self-hosted".
+                _jsx(Text, { children: t(`mode.${selectedMode(draft)}`) })) : (_jsx(TextField, { value: getField(draft, entry.id), placeholder: placeholderText(ctx, entry.id), active: editingId === entry.id, onSubmit: (value) => {
+                        if (applyField(entry.id, value))
+                            ctx.setEditing(null);
+                    }, onCancel: () => ctx.setEditing(null) })) }, entry.id))), ctx.dirty ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.warn, children: t('hint.unsavedChanges') }) })) : null, draft.relay.mode === 'remote' ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: official ? t('relay.officialHint') : t('relay.passwordHint') }) })) : null, _jsx(Box, { marginTop: 1, children: _jsx(Row, { label: t('relay.identity'), children: _jsx(Text, { color: theme.muted, children: ctx.runtime.hostId }) }) }), showEnv ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: theme.border, paddingX: 1, children: [_jsx(Text, { color: theme.muted, children: t('relay.envHint') }), _jsx(Text, { children: relayStartCommand(ctx.config, password) })] })) : null, official ? null : (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('relay.docsHint') }) })), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}
+function placeholderText(ctx, id) {
+    const raw = getFieldPlaceholder(ctx.draft, id);
+    // Placeholders that name a translation key are resolved here so the model
+    // stays free of language concerns.
+    return raw.startsWith('placeholder.') ? ctx.t(raw) : raw;
+}
+function addressKindKey(kind) {
+    return `relay.address${kind.charAt(0).toUpperCase()}${kind.slice(1)}`;
+}
+/**
+ * A modal list of options driven by both arrow keys and the mouse.
+ *
+ * It owns the cursor so the highlighted row and the keyboard agree; the parent
+ * only learns which option was chosen.
+ */
+export function ChoiceList({ options, current, onPick, onCancel, }) {
+    const [cursor, setCursor] = useState(() => {
+        const index = options.findIndex((option) => option.id === current);
+        return index >= 0 ? index : 0;
+    });
+    const active = options[Math.min(cursor, options.length - 1)];
+    useInput((_input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.upArrow)
+            setCursor((value) => (value - 1 + options.length) % options.length);
+        else if (key.downArrow)
+            setCursor((value) => (value + 1) % options.length);
+        else if (key.return && active)
+            onPick(active.id);
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Menu, { items: options.map((option) => ({ id: option.id, label: option.label })), selectedId: active?.id ?? '', onChange: (id) => setCursor(options.findIndex((option) => option.id === id)), onSelect: onPick }), active?.description ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: active.description }) })) : null] }));
+}

package/dist/tui/screens/Services.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { theme } from '../theme.js';
+import { Menu, Message, Panel } from '../components/common.js';
+import { readLogTail, restartAll, startAll, stopAll } from '../api.js';
+const LOG_LINES = 8;
+export function Services({ ctx }) {
+    const { t, run, status } = ctx;
+    const [selected, setSelected] = useState('start');
+    const items = [
+        { id: 'start', label: t('services.start') },
+        { id: 'stop', label: t('services.stop') },
+        { id: 'restart', label: t('services.restart') },
+    ];
+    const activate = (id) => {
+        // Starting or restarting reads the configuration from disk, so doing it on
+        // top of an unsaved draft silently applies the old settings — which reads
+        // as "I changed the relay and it never took effect". Stopping is unaffected.
+        if (ctx.dirty && id !== 'stop') {
+            ctx.notify(t('services.unsavedBlocked'), 'error');
+            return;
+        }
+        return run(() => {
+            const config = ctx.config;
+            if (id === 'start') {
+                const result = startAll(config);
+                ctx.notify(result.managed
+                    ? t('services.managedNotice', { manager: result.manager ?? '' })
+                    : t('services.started'), 'success');
+                return;
+            }
+            if (id === 'stop') {
+                const result = stopAll(config);
+                ctx.notify(result.managed
+                    ? t('services.managedNotice', { manager: result.manager ?? '' })
+                    : t('services.stopped'), 'success');
+                return;
+            }
+            const result = restartAll(config);
+            ctx.notify(result.managed
+                ? t('services.managedNotice', { manager: result.manager ?? '' })
+                : t('services.restarted'), 'success');
+        });
+    };
+    useInput((_input, key) => {
+        const index = items.findIndex((item) => item.id === selected);
+        if (key.upArrow)
+            setSelected(items[(index - 1 + items.length) % items.length].id);
+        else if (key.downArrow)
+            setSelected(items[(index + 1) % items.length].id);
+        else if (key.return)
+            activate(selected);
+    }, { isActive: ctx.editingId === null });
+    const relayLog = readLogTail('relay', LOG_LINES);
+    const hostLog = readLogTail('host', LOG_LINES);
+    return (_jsxs(Panel, { title: t('services.title'), children: [_jsx(Menu, { items: items, selectedId: selected, onChange: setSelected, onSelect: activate }), ctx.dirty ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.warn, children: t('services.unsavedBlocked') }) })) : null, status?.keepalive.installed ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('services.managedNotice', { manager: status.keepalive.manager }) }) })) : null, _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.muted, children: t('services.logs') }), _jsx(LogBlock, { title: t('services.logRelay'), lines: relayLog, emptyText: t('services.logEmpty') }), _jsx(LogBlock, { title: t('services.logHost'), lines: hostLog, emptyText: t('services.logEmpty') })] }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}
+function LogBlock({ title, lines, emptyText, }) {
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, color: theme.muted, children: title }), lines.length === 0 ? (_jsx(Text, { color: theme.muted, children: emptyText })) : (lines.map((line, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: log lines are positional and may repeat
+            _jsx(Text, { color: theme.muted, wrap: "truncate-end", children: line }, index))))] }));
+}