herdr-remote 0.2.18 → 0.2.20

package/dist/tui/screens/Wizard.js

@@ -0,0 +1,235 @@
+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, Message, Panel, Selectable } from '../components/common.js';
+import { TextField } from '../components/TextField.js';
+import { ChoiceList } from './Relay.js';
+import { OFFICIAL_RELAY_URL, configPath, keepalive, listReachableAddresses, loadConfig, saveDraft, selectedMode, setField, setRelayPassword, startAll, } from '../api.js';
+/**
+ * The questions worth asking for a given access mode, in order.
+ *
+ * `remoteUrl` matters because the official relay is a remote relay whose
+ * address and credentials are already known, so it asks neither question. The
+ * step counter is derived from this list, so it has to agree with the route
+ * actually taken or the wizard reports "step 5 of 5" on its third screen.
+ */
+function stepsFor(mode, remoteUrl) {
+    const steps = ['language', 'access'];
+    if (mode === 'lan')
+        steps.push('address');
+    if (mode === 'remote' && remoteUrl !== OFFICIAL_RELAY_URL)
+        steps.push('relayUrl', 'password');
+    steps.push('finish');
+    return steps;
+}
+/**
+ * First-run setup.
+ *
+ * The one decision a new install cannot make for the user is how they intend to
+ * reach the machine, because it decides whether anything listens beyond
+ * loopback. Asking once, up front, beats a default that is either useless on a
+ * phone or wider than the user expected.
+ */
+export function Wizard({ ctx, onDone }) {
+    const { t, draft } = ctx;
+    const [step, setStep] = useState('language');
+    const [password, setPassword] = useState(ctx.runtime.relayPassword || '');
+    const [startNow, setStartNow] = useState(true);
+    const [installKeepalive, setInstallKeepalive] = useState(true);
+    const [finishSelection, setFinishSelection] = useState('startNow');
+    const addresses = useMemo(() => listReachableAddresses({ includeLoopback: false }), []);
+    const steps = useMemo(() => stepsFor(draft.relay.mode, draft.relay.remoteUrl), [draft.relay.mode, draft.relay.remoteUrl]);
+    const stepIndex = Math.max(0, steps.indexOf(step));
+    /**
+     * Apply several fields as one edit. Each `setField` builds on the previous
+     * result: `draft` is the value captured when this render began, so applying
+     * two fields through two separate calls committed the second over the first.
+     */
+    const applyAll = (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 apply = (id, value) => applyAll([[id, value]]);
+    /**
+     * Move to the next step.
+     *
+     * `order` is passed explicitly by the access step because the step list
+     * depends on the mode that was just chosen, and the draft holding it has not
+     * re-rendered yet — reading the memo here would use the previous mode and
+     * skip straight past the relay questions.
+     */
+    const advance = (from, order = steps) => {
+        const index = order.indexOf(from);
+        setStep(order[Math.min(order.length - 1, index + 1)]);
+    };
+    const back = () => {
+        const index = steps.indexOf(step);
+        if (index > 0)
+            setStep(steps[index - 1]);
+    };
+    const finish = () => {
+        ctx.run(async () => {
+            if (draft.relay.mode === 'remote') {
+                // Empty is meaningful: it is how you join a public relay.
+                setRelayPassword(password);
+            }
+            saveDraft(draft);
+            ctx.reloadConfig();
+            const finalConfig = loadConfig();
+            // Keep-alive first, deliberately. Installing it starts the services
+            // through the service manager, so starting them here beforehand would
+            // leave a second, detached copy holding the relay port and a second host
+            // connector fighting the first for the same host id — which browsers see
+            // as an endless reconnect loop. `startAll` defers to the manager once it
+            // is installed, so the two options can no longer both spawn.
+            let keepaliveInstalled = false;
+            if (installKeepalive) {
+                try {
+                    keepalive.install(finalConfig);
+                    keepaliveInstalled = true;
+                }
+                catch (error) {
+                    // Keep-alive is a convenience; a container without systemd should not
+                    // block a working setup.
+                    ctx.notify(t('keepalive.failed', { message: error.message }), 'error');
+                }
+            }
+            if (startNow && !keepaliveInstalled)
+                startAll(finalConfig);
+            onDone();
+        });
+    };
+    const header = (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, children: t('wizard.title') }), _jsx(Text, { color: theme.muted, children: t('wizard.step', { current: stepIndex + 1, total: steps.length }) })] }));
+    if (step === 'language') {
+        return (_jsxs(Panel, { title: t('wizard.languageTitle'), children: [header, _jsx(ChoiceList, { options: [
+                        { id: 'auto', label: t('about.languageAuto', { detected: ctx.locale }) },
+                        { id: 'zh', label: t('about.languageZh') },
+                        { id: 'en', label: t('about.languageEn') },
+                    ], current: draft.ui.language, onPick: (language) => {
+                        if (apply('language', language))
+                            advance('language');
+                    }, onCancel: () => { } }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+    }
+    if (step === 'access') {
+        return (_jsxs(Panel, { title: t('wizard.accessTitle'), children: [header, _jsx(ChoiceList, { options: [
+                        ...['local', 'lan'].map((mode) => ({
+                            id: mode,
+                            label: t(`mode.${mode}`),
+                            description: t(`mode.${mode}.description`),
+                        })),
+                        // Offered ahead of the self-hosted option because it is the one
+                        // that needs no server. It is still a separate, explicit choice:
+                        // it routes the terminal through a relay this user does not own.
+                        {
+                            id: 'official',
+                            label: t('mode.official'),
+                            description: t('mode.official.description'),
+                        },
+                        {
+                            id: 'remote',
+                            label: t('mode.remote'),
+                            description: t('mode.remote.description'),
+                        },
+                    ], current: selectedMode(draft), onPick: (choice) => {
+                        if (choice === 'official') {
+                            // The official relay is "remote" with the address already known,
+                            // so the URL question is answered and skipped. It is a public
+                            // relay, so there is no join password to ask for either — and any
+                            // password left over from a previous self-hosted answer would
+                            // only be sent to a relay that does not want it.
+                            if (!apply('mode', 'official'))
+                                return;
+                            setRelayPassword('');
+                            advance('access', stepsFor('remote', OFFICIAL_RELAY_URL));
+                            return;
+                        }
+                        if (apply('mode', choice)) {
+                            // Leaving the official relay clears its address, so the URL step
+                            // that follows starts empty rather than pre-loaded with ours.
+                            advance('access', stepsFor(choice, choice === 'remote' ? '' : draft.relay.remoteUrl));
+                        }
+                    }, onCancel: back }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('wizard.accessHint') }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+    }
+    if (step === 'address') {
+        return (_jsxs(Panel, { title: t('wizard.addressTitle'), children: [header, addresses.length === 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.warn, children: t('relay.noAddresses') }), _jsx(Box, { marginTop: 1, children: _jsx(Selectable, { selected: true, onSelect: () => advance('address'), children: t('wizard.finish') }) }), _jsx(SkipKey, { onSkip: () => advance('address'), onBack: back })] })) : (_jsx(ChoiceList, { options: addresses.map((address) => ({
+                        id: address.address,
+                        label: `${address.address}  (${address.name}, ${address.kind})`,
+                    })), current: draft.relay.lanHost || addresses[0].address, onPick: (address) => {
+                        if (apply('lanHost', address))
+                            advance('address');
+                    }, onCancel: back })), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+    }
+    if (step === 'relayUrl') {
+        return (_jsxs(Panel, { title: t('wizard.relayTitle'), children: [header, _jsx(FieldRow, { label: t('wizard.relayUrlLabel'), selected: true, onSelect: () => { }, children: _jsx(TextField, { value: draft.relay.remoteUrl, placeholder: "wss://relay.example.com", active: true, onSubmit: (value) => {
+                            if (!value) {
+                                ctx.notify(t('error.remoteUrlRequired'), 'error');
+                                return;
+                            }
+                            if (apply('remoteUrl', value))
+                                advance('relayUrl');
+                        }, onCancel: back }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('wizard.relayHint') }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+    }
+    if (step === 'password') {
+        return (_jsxs(Panel, { title: t('wizard.passwordTitle'), children: [header, _jsx(FieldRow, { label: t('relay.password'), selected: true, onSelect: () => { }, children: _jsx(TextField, { value: password, placeholder: t('relay.passwordEmpty'), active: true, mask: true, onSubmit: (value) => {
+                            setPassword(value);
+                            advance('password');
+                        }, onCancel: back }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('wizard.passwordHint') }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+    }
+    const finishItems = [
+        { id: 'startNow', label: `${t('wizard.startNow')}  [${startNow ? '×' : ' '}]` },
+        {
+            id: 'installKeepalive',
+            label: `${t('wizard.installKeepalive')}  [${installKeepalive ? '×' : ' '}]`,
+        },
+        { id: 'finish', label: t('wizard.finish') },
+    ];
+    const activateFinish = (id) => {
+        if (id === 'startNow') {
+            setStartNow((value) => !value);
+            return;
+        }
+        if (id === 'installKeepalive') {
+            setInstallKeepalive((value) => !value);
+            return;
+        }
+        finish();
+    };
+    return (_jsxs(Panel, { title: t('wizard.finishTitle'), children: [header, _jsx(FinishKeys, { items: finishItems.map((item) => item.id), selected: finishSelection, onSelect: setFinishSelection, onActivate: activateFinish, onBack: back }), finishItems.map((item) => (_jsx(Selectable, { selected: finishSelection === item.id, onSelect: () => {
+                    setFinishSelection(item.id);
+                    activateFinish(item.id);
+                }, onHover: () => setFinishSelection(item.id), children: item.label }, item.id))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('wizard.finishHint', { path: configPath() }) }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
+}
+function FinishKeys({ items, selected, onSelect, onActivate, onBack, }) {
+    useInput((_input, key) => {
+        const index = Math.max(0, items.indexOf(selected));
+        if (key.escape)
+            onBack();
+        else if (key.upArrow)
+            onSelect(items[(index - 1 + items.length) % items.length]);
+        else if (key.downArrow)
+            onSelect(items[(index + 1) % items.length]);
+        else if (key.return)
+            onActivate(selected);
+    });
+    return null;
+}
+function SkipKey({ onSkip, onBack }) {
+    useInput((_input, key) => {
+        if (key.return)
+            onSkip();
+        else if (key.escape)
+            onBack();
+    });
+    return null;
+}

package/dist/tui/terminal.js

@@ -0,0 +1,39 @@
+import { DISABLE_MOUSE } from './mouse/protocol.js';
+const ESC = String.fromCharCode(27);
+const ENTER_ALT_SCREEN = `${ESC}[?1049h${ESC}[H`;
+const EXIT_ALT_SCREEN = `${ESC}[?1049l`;
+const SHOW_CURSOR = `${ESC}[?25h`;
+/**
+ * Take over the alternate screen.
+ *
+ * Two reasons. The interface is full-screen, so the shell's scrollback should
+ * come back untouched on exit. More importantly, mouse reports arrive in
+ * absolute terminal coordinates while element positions are computed relative
+ * to the Ink root — those only agree when the app starts at row 1. Rendering
+ * under a shell prompt shifted every click down by however many lines happened
+ * to be on screen.
+ */
+export function enterFullScreen(output = process.stdout) {
+    try {
+        output.write(ENTER_ALT_SCREEN);
+    }
+    catch {
+        // Not a terminal we can drive; rendering still works, clicks may be offset.
+    }
+}
+/**
+ * Undo everything we turned on.
+ *
+ * Ink and the mouse layer both clean up on an orderly unmount, but a signal or
+ * an uncaught error bypasses that, and a terminal left in mouse-reporting mode
+ * swallows text selection in every command the user runs afterwards. Writing
+ * the sequences unconditionally is harmless when they were never enabled.
+ */
+export function restoreTerminal(output = process.stdout) {
+    try {
+        output.write(`${DISABLE_MOUSE}${SHOW_CURSOR}${EXIT_ALT_SCREEN}`);
+    }
+    catch {
+        // The stream may already be closed during shutdown; nothing useful to do.
+    }
+}

package/dist/tui/theme.js

@@ -0,0 +1,33 @@
+// A deliberately quiet palette.
+//
+// The previous TUI painted 24-bit terracotta on filled backgrounds, which
+// fought with every terminal theme it ran in. These are the eight basic ANSI
+// colours instead, so the interface inherits whatever palette the user already
+// chose: one accent for "where you are", and colour elsewhere only where it
+// carries meaning (a service is up, down, or in between).
+export const theme = {
+    /** Selection and focus. */
+    accent: 'cyan',
+    /** Frame lines and separators. */
+    border: 'gray',
+    /** Secondary text: labels, hints, paths. */
+    muted: 'gray',
+    ok: 'green',
+    warn: 'yellow',
+    bad: 'red',
+};
+export const SELECTED_MARKER = '▸';
+export const UNSELECTED_MARKER = ' ';
+export const STATUS_COLOR = {
+    ok: theme.ok,
+    warn: theme.warn,
+    bad: theme.bad,
+    idle: theme.muted,
+};
+/** Filled for a live state, hollow for an inactive one. */
+export const STATUS_GLYPH = {
+    ok: '●',
+    warn: '●',
+    bad: '●',
+    idle: '○',
+};