herdr-remote 0.2.39 → 0.3.31

package/dist/tui/components/TextField.js

@@ -1,50 +0,0 @@
-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';
-// Anything below 0x20, plus DEL: escape sequences and control keys that must
-// never end up as literal text in a field.
-const CONTROL_CHARACTERS = /[\x00-\x1f\x7f]/;
-/**
- * A single-line editor.
- *
- * Small enough to own rather than depend on: the TUI needs exactly one editing
- * affordance, and keeping it here means the escape/confirm contract is the same
- * everywhere and stays consistent with `useInput({ isActive })` gating, so a
- * keystroke never lands in both the editor and the surrounding menu.
- */
-export function TextField({ value, placeholder, active, mask = false, onSubmit, onCancel, }) {
-    const [buffer, setBuffer] = useState(value);
-    useEffect(() => {
-        if (active)
-            setBuffer(value);
-    }, [active, value]);
-    useInput((input, key) => {
-        if (key.return) {
-            onSubmit(buffer);
-            return;
-        }
-        if (key.escape) {
-            setBuffer(value);
-            onCancel();
-            return;
-        }
-        if (key.backspace || key.delete) {
-            setBuffer((current) => current.slice(0, -1));
-            return;
-        }
-        if (key.ctrl && input === 'u') {
-            setBuffer('');
-            return;
-        }
-        if (input && !key.ctrl && !key.meta && !CONTROL_CHARACTERS.test(input)) {
-            setBuffer((current) => current + input);
-        }
-    }, { isActive: active });
-    const display = active ? buffer : value;
-    const shown = mask && display ? '•'.repeat(Math.min(display.length, 32)) : display;
-    if (!active) {
-        return shown ? _jsx(Text, { children: shown }) : _jsx(Text, { color: theme.muted, children: placeholder ?? '' });
-    }
-    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: shown }), _jsx(Text, { color: theme.accent, inverse: true, children: ' ' })] }));
-}

package/dist/tui/components/common.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Box, Text } from 'ink';
-import { useMouseTarget } from '../mouse/index.js';
-import { SELECTED_MARKER, STATUS_COLOR, STATUS_GLYPH, UNSELECTED_MARKER, theme, } from '../theme.js';
-export function StatusDot({ level }) {
-    return _jsx(Text, { color: STATUS_COLOR[level], children: STATUS_GLYPH[level] });
-}
-// Wide enough for the longest label in either language plus a separating
-// space. Too narrow and Ink wraps the label onto a second line or butts it
-// straight against its value.
-const LABEL_COLUMN_WIDTH = 20;
-/** A `label   value` row with the labels aligned into a column. */
-export function Row({ label, labelWidth = LABEL_COLUMN_WIDTH, children, }) {
-    return (_jsxs(Box, { children: [_jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { color: theme.muted, wrap: "truncate-end", children: label }) }), _jsx(Box, { flexGrow: 1, children: children })] }));
-}
-/**
- * One row of a list that responds to both the keyboard and the mouse.
- *
- * Each row is its own component because the mouse hooks bind to a ref: mapping
- * over items in the parent and calling hooks inline would make the hook order
- * depend on the list length.
- *
- * The row stretches to the full width of its container so the whole line is a
- * click target, not just the few columns the label happens to occupy.
- */
-export function Selectable({ selected, disabled = false, onSelect, onHover, children, }) {
-    const ref = useRef(null);
-    const hovered = useMouseTarget(ref, { disabled, onClick: onSelect });
-    useFollowPointer(hovered, onHover);
-    const active = selected || hovered;
-    const color = disabled ? theme.muted : active ? theme.accent : undefined;
-    return (_jsxs(Box, { ref: ref, children: [_jsxs(Text, { color: active ? theme.accent : undefined, children: [active ? SELECTED_MARKER : UNSELECTED_MARKER, ' '] }), _jsx(Text, { color: color, bold: active, dimColor: disabled, children: children })] }));
-}
-/**
- * Move the keyboard cursor to whatever the pointer is over.
- *
- * Without this the two run independently and a list shows two markers at once —
- * one where the keyboard is, one under the mouse — leaving it ambiguous which
- * one Enter would activate.
- */
-function useFollowPointer(hovered, onHover) {
-    const handler = useRef(onHover);
-    handler.current = onHover;
-    useEffect(() => {
-        if (hovered)
-            handler.current?.();
-    }, [hovered]);
-}
-/**
- * Keyboard/mouse driven list. `onChange` moves the highlight, `onSelect`
- * activates an entry.
- */
-export function Menu({ items, selectedId, onChange, onSelect, }) {
-    return (_jsx(Box, { flexDirection: "column", children: items.map((item) => (_jsx(Selectable, { selected: item.id === selectedId, disabled: item.disabled, onSelect: () => onSelect(item.id), onHover: () => onChange(item.id), children: item.label }, item.id))) }));
-}
-/**
- * A `label  value` row that is clickable across its whole width.
- *
- * Used for settings: clicking anywhere on the line — label or value — starts
- * editing it, which is what a pointer user expects.
- */
-export function FieldRow({ label, selected, disabled = false, labelWidth = 22, onSelect, onHover, children, }) {
-    const ref = useRef(null);
-    const hovered = useMouseTarget(ref, { disabled, onClick: onSelect });
-    useFollowPointer(hovered, onHover);
-    const active = selected || hovered;
-    return (_jsxs(Box, { ref: ref, children: [_jsxs(Box, { width: labelWidth, flexShrink: 0, children: [_jsxs(Text, { color: active ? theme.accent : undefined, children: [active ? SELECTED_MARKER : UNSELECTED_MARKER, ' '] }), _jsx(Text, { color: active ? theme.accent : theme.muted, bold: active, wrap: "truncate-end", children: label })] }), _jsx(Box, { flexGrow: 1, children: children })] }));
-}
-/** A framed panel used for every screen body, so the layout stays predictable. */
-export function Panel({ title, children }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, flexGrow: 1, children: [title ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: title }) })) : null, children] }));
-}
-/** Feedback from the last action. Colour is the only signal, no icons. */
-export function Message({ text, level, }) {
-    if (!text)
-        return null;
-    const color = level === 'error' ? theme.bad : level === 'success' ? theme.ok : theme.muted;
-    return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: color, children: text }) }));
-}

package/dist/tui/index.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from 'ink';
-import { App } from './App.js';
-import { MouseProvider, createMouseSource } from './mouse/index.js';
-import { enterFullScreen, restoreTerminal } from './terminal.js';
-import { configExists } from './api.js';
-export { App } from './App.js';
-export { Wizard } from './screens/Wizard.js';
-export async function startTui({ language = null } = {}) {
-    const needsWizard = !configExists();
-    const mouse = createMouseSource(process.stdin, process.stdout);
-    // Before render: Ink draws from wherever the cursor is, and the mouse hit
-    // test assumes the app starts at row 1.
-    enterFullScreen();
-    const instance = render(_jsx(MouseProvider, { source: mouse, children: _jsx(App, { initialLanguage: language, needsWizard: needsWizard }) }), { stdin: mouse.stdin, exitOnCtrlC: false });
-    const cleanup = () => {
-        mouse.dispose();
-        restoreTerminal();
-    };
-    const onSignal = () => {
-        instance.unmount();
-        cleanup();
-        process.exit(0);
-    };
-    process.once('SIGINT', onSignal);
-    process.once('SIGTERM', onSignal);
-    process.once('exit', cleanup);
-    try {
-        await instance.waitUntilExit();
-    }
-    finally {
-        cleanup();
-        process.off('SIGINT', onSignal);
-        process.off('SIGTERM', onSignal);
-    }
-}

package/dist/tui/mouse/index.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
-export { createMouseSource } from './source.js';
-export { splitMouseInput, createMouseSplitter } from './protocol.js';
-/**
- * Absolute position of an element, in 1-based terminal coordinates.
- *
- * Yoga reports each node's offset relative to its parent, so the walk up the
- * tree accumulates them. The +1 converts to terminal coordinates, which is only
- * correct because the app owns the alternate screen and therefore starts at
- * row 1 — rendering below a shell prompt would shift every row.
- */
-export function measureElement(node) {
-    if (!node?.yogaNode)
-        return null;
-    const layout = node.yogaNode.getComputedLayout();
-    let left = 0;
-    let top = 0;
-    let current = node;
-    while (current?.yogaNode) {
-        const own = current.yogaNode.getComputedLayout();
-        left += own.left;
-        top += own.top;
-        current = current.parentNode ?? undefined;
-    }
-    return { left: left + 1, top: top + 1, width: layout.width, height: layout.height };
-}
-/**
- * Half-open containment: a row-N item owns row N and nothing else.
- *
- * The inclusive test used by @ink-tools/ink-mouse (`y <= top + height`) makes
- * every one-row item also claim the row below it, so two neighbours fire for a
- * single click and the selection lands on the wrong one.
- */
-export function rectContains(rect, x, y) {
-    return (x >= rect.left && x < rect.left + rect.width && y >= rect.top && y < rect.top + rect.height);
-}
-// Two contexts on purpose: the registry must stay referentially stable, or
-// every hover would re-run the registration effect of every target on screen.
-const MouseRegistryContext = createContext(null);
-const MouseStateContext = createContext(null);
-export function MouseProvider({ source, children, }) {
-    const targets = useRef(new Set());
-    const pressed = useRef(null);
-    const [hovered, setHovered] = useState(null);
-    const [enabled, setEnabled] = useState(false);
-    const register = useCallback((target) => {
-        targets.current.add(target);
-        return () => {
-            targets.current.delete(target);
-            if (pressed.current === target)
-                pressed.current = null;
-            setHovered((current) => (current === target ? null : current));
-        };
-    }, []);
-    /** The innermost registered element under the pointer. */
-    const hitTest = useCallback((x, y) => {
-        let best = null;
-        let bestArea = Number.POSITIVE_INFINITY;
-        for (const target of targets.current) {
-            const rect = measureElement(target.ref.current);
-            if (!rect || rect.width <= 0 || rect.height <= 0)
-                continue;
-            if (!rectContains(rect, x, y))
-                continue;
-            const area = rect.width * rect.height;
-            if (area < bestArea) {
-                best = target;
-                bestArea = area;
-            }
-        }
-        return best;
-    }, []);
-    useEffect(() => {
-        if (!source)
-            return undefined;
-        return source.subscribe((event) => {
-            if (event.type === 'wheel')
-                return;
-            const target = hitTest(event.x, event.y);
-            if (event.type === 'move') {
-                // Only re-render when the pointer actually crosses into a different
-                // element; any-motion tracking fires on every cell otherwise.
-                setHovered((current) => (current === target ? current : target));
-                return;
-            }
-            if (event.type === 'press') {
-                if (event.button !== 'left')
-                    return;
-                pressed.current = target;
-                setHovered(target);
-                return;
-            }
-            // Release: a click counts only when press and release share a target,
-            // so dragging off a row cancels it the way a button should.
-            if (pressed.current && pressed.current === target)
-                target?.onClick?.();
-            pressed.current = null;
-        });
-    }, [source, hitTest]);
-    useEffect(() => {
-        const previous = hovered;
-        previous?.onHover?.(true);
-        return () => previous?.onHover?.(false);
-    }, [hovered]);
-    const enable = useCallback(() => {
-        if (!source)
-            return;
-        source.enable();
-        setEnabled(source.isEnabled());
-    }, [source]);
-    const disable = useCallback(() => {
-        if (!source)
-            return;
-        source.disable();
-        setEnabled(source.isEnabled());
-    }, [source]);
-    const registry = useMemo(() => ({ register }), [register]);
-    const state = useMemo(() => ({
-        supported: Boolean(source?.supported),
-        enabled,
-        enable,
-        disable,
-    }), [source, enabled, enable, disable]);
-    return (_jsx(MouseRegistryContext.Provider, { value: registry, children: _jsx(MouseStateContext.Provider, { value: state, children: children }) }));
-}
-const KEYBOARD_ONLY = {
-    supported: false,
-    enabled: false,
-    enable: () => { },
-    disable: () => { },
-};
-export function useMouse() {
-    // Tests mount screens without a provider; degrade to keyboard only rather
-    // than crash the interface.
-    return useContext(MouseStateContext) ?? KEYBOARD_ONLY;
-}
-/**
- * Make an element clickable and hoverable.
- *
- * Returns whether the pointer is currently over it, so callers can highlight
- * without tracking mouse state themselves.
- */
-export function useMouseTarget(ref, { onClick, disabled = false } = {}) {
-    const context = useContext(MouseRegistryContext);
-    const [hovered, setHovered] = useState(false);
-    const handler = useRef(onClick);
-    handler.current = onClick;
-    const target = useMemo(() => ({
-        ref,
-        onClick: () => handler.current?.(),
-        onHover: setHovered,
-    }), [ref]);
-    useEffect(() => {
-        if (!context || disabled)
-            return undefined;
-        return context.register(target);
-    }, [context, target, disabled]);
-    useEffect(() => {
-        if (disabled)
-            setHovered(false);
-    }, [disabled]);
-    return hovered && !disabled;
-}

package/dist/tui/mouse/protocol.js

@@ -1,96 +0,0 @@
-// SGR mouse reporting: parsing and the escape sequences that turn it on.
-//
-// Written here rather than taken from a library because the available ones get
-// the hit test wrong: `@ink-tools/ink-mouse` compares a click against inclusive
-// bounds (`y >= top && y <= bottom`) while its rectangles are half-open, so a
-// one-row item at row N also swallows clicks on row N+1 and two neighbouring
-// rows both fire. In a vertical menu that reads as "the mouse selects the wrong
-// entry".
-const ESC = String.fromCharCode(27);
-/** Any-motion tracking (1003) so hover works without a button held, plus SGR
- * coordinates (1006) so columns past 223 still report correctly. */
-export const ENABLE_MOUSE = `${ESC}[?1000h${ESC}[?1002h${ESC}[?1003h${ESC}[?1006h`;
-export const DISABLE_MOUSE = `${ESC}[?1006l${ESC}[?1003l${ESC}[?1002l${ESC}[?1000l`;
-// ESC [ < button ; column ; row (M|m)
-const SGR_PATTERN = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])/;
-// The longest incomplete prefix worth holding on to; beyond this the input is
-// not a mouse report and must be passed through rather than swallowed.
-const MAX_PENDING = 32;
-function decodeButton(code, isRelease) {
-    if (code & 64)
-        return (code & 3) === 1 ? 'wheel-down' : 'wheel-up';
-    if (isRelease)
-        return 'none';
-    switch (code & 3) {
-        case 0:
-            return 'left';
-        case 1:
-            return 'middle';
-        case 2:
-            return 'right';
-        default:
-            return 'none';
-    }
-}
-function couldBeMousePrefix(value) {
-    // Partial forms of "\x1b[<…" that may complete on the next chunk.
-    return (`${ESC}[<`.startsWith(value.slice(0, 3)) &&
-        value.length <= MAX_PENDING &&
-        /^\x1b(\[(<[\d;]*)?)?$/.test(value));
-}
-/**
- * Separate mouse reports from ordinary key input.
- *
- * Ink's key parser knows nothing about mouse reports, so an unfiltered click
- * would reach `useInput` as a stray Escape and cancel whatever the user was
- * editing. Everything that is not a mouse report is passed through untouched.
- */
-export function splitMouseInput(buffer) {
-    const events = [];
-    let passthrough = '';
-    let index = 0;
-    while (index < buffer.length) {
-        const escapeAt = buffer.indexOf(ESC, index);
-        if (escapeAt === -1) {
-            passthrough += buffer.slice(index);
-            return { events, passthrough, pending: '' };
-        }
-        passthrough += buffer.slice(index, escapeAt);
-        const rest = buffer.slice(escapeAt);
-        const match = SGR_PATTERN.exec(rest);
-        if (match) {
-            const code = Number(match[1]);
-            const isRelease = match[4] === 'm';
-            const isMotion = (code & 32) !== 0;
-            const isWheel = (code & 64) !== 0;
-            events.push({
-                type: isWheel ? 'wheel' : isMotion ? 'move' : isRelease ? 'release' : 'press',
-                button: decodeButton(code, isRelease),
-                x: Number(match[2]),
-                y: Number(match[3]),
-                shift: (code & 4) !== 0,
-                alt: (code & 8) !== 0,
-                ctrl: (code & 16) !== 0,
-            });
-            index = escapeAt + match[0].length;
-            continue;
-        }
-        if (couldBeMousePrefix(rest)) {
-            // Hold the fragment back; the rest of the report is in the next chunk.
-            return { events, passthrough, pending: rest };
-        }
-        // A real escape sequence (arrow key, etc.) — hand it to the key parser.
-        passthrough += ESC;
-        index = escapeAt + 1;
-    }
-    return { events, passthrough, pending: '' };
-}
-/** Stateful wrapper that carries a partial sequence across chunk boundaries. */
-export function createMouseSplitter() {
-    let pending = '';
-    return (chunk) => {
-        const result = splitMouseInput(pending + chunk);
-        pending = result.pending;
-        return { events: result.events, passthrough: result.passthrough };
-    };
-}

package/dist/tui/mouse/source.js

@@ -1,79 +0,0 @@
-import { PassThrough } from 'node:stream';
-import { createMouseSplitter, DISABLE_MOUSE, ENABLE_MOUSE } from './protocol.js';
-/**
- * Read the real stdin, peel off mouse reports, and forward the rest to Ink.
- *
- * Ink and the mouse layer cannot both own stdin: whoever reads it first
- * consumes the bytes. So this reads it once, routes mouse reports to
- * subscribers, and republishes the remaining keystrokes on a stream that looks
- * enough like a TTY for Ink to drive.
- */
-export function createMouseSource(input = process.stdin, output = process.stdout) {
-    const supported = Boolean(input.isTTY && output.isTTY);
-    const listeners = new Set();
-    const split = createMouseSplitter();
-    const forwarded = new PassThrough();
-    const onData = (chunk) => {
-        const text = typeof chunk === 'string' ? chunk : chunk.toString('utf8');
-        const { events, passthrough } = split(text);
-        for (const event of events) {
-            for (const listener of listeners)
-                listener(event);
-        }
-        if (passthrough.length > 0)
-            forwarded.write(passthrough);
-    };
-    if (supported) {
-        input.on('data', onData);
-        // A 'data' listener only starts a stream nobody paused. The Windows color
-        // probe reads stdin before the TUI and pauses it afterwards, and a paused
-        // stdin delivers no keys and keeps nothing alive: the TUI exited at once.
-        input.resume();
-    }
-    // Ink expects a TTY: it checks isTTY and drives raw mode itself. Delegate
-    // those to the real stdin while it reads from our filtered copy.
-    const stdin = forwarded;
-    stdin.isTTY = input.isTTY;
-    stdin.setRawMode = ((mode) => {
-        input.setRawMode?.(mode);
-        return stdin;
-    });
-    stdin.ref = (() => {
-        input.ref?.();
-        return stdin;
-    });
-    stdin.unref = (() => {
-        input.unref?.();
-        return stdin;
-    });
-    let enabled = false;
-    const enable = () => {
-        if (!supported || enabled)
-            return;
-        output.write(ENABLE_MOUSE);
-        enabled = true;
-    };
-    const disable = () => {
-        if (!enabled)
-            return;
-        output.write(DISABLE_MOUSE);
-        enabled = false;
-    };
-    return {
-        stdin,
-        supported,
-        isEnabled: () => enabled,
-        enable,
-        disable,
-        subscribe(listener) {
-            listeners.add(listener);
-            return () => listeners.delete(listener);
-        },
-        dispose() {
-            disable();
-            listeners.clear();
-            if (supported)
-                input.off('data', onData);
-        },
-    };
-}

package/dist/tui/screens/About.js

@@ -1,172 +0,0 @@
-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 { Message, Panel, Row, Selectable } from '../components/common.js';
-import { canSelfUpdate, cliTarballUrl, checkForUpdate, configPath, currentVersion, detectLocale, installKind, installedRelayVersion, performUpdate, runsLocalRelay, saveDraft, setField, stateDir, whileServicesStopped, } from '../api.js';
-/** `https://registry.npmmirror.com` → `registry.npmmirror.com`, for one line of text. */
-const sourceHost = (source) => source.replace(/^https?:\/\//, '');
-export function About({ ctx }) {
-    const { t, draft } = ctx;
-    const [selected, setSelected] = useState('auto');
-    const [update, setUpdate] = useState({ phase: 'idle' });
-    /** Why the install will come from somewhere other than where some sources said. */
-    const [sourceNote, setSourceNote] = useState(null);
-    const checkRef = useState(() => ({ current: { source: '', sources: [] } }))[0];
-    const detected = detectLocale({ preference: 'auto' });
-    const languageOptions = [
-        { id: 'auto', label: t('about.languageAuto', { detected }) },
-        { id: 'zh', label: t('about.languageZh') },
-        { id: 'en', label: t('about.languageEn') },
-    ];
-    // The update row is a selectable option alongside the languages, so one set
-    // of arrow keys drives the whole screen.
-    const updatable = canSelfUpdate();
-    const updateLabel = (() => {
-        switch (update.phase) {
-            case 'checking':
-                return t('update.checking');
-            case 'current':
-                return t('update.upToDate', { version: update.latest });
-            case 'available':
-                return t('update.available', { version: update.latest });
-            case 'updating':
-                return update.attempt > 1
-                    ? t('update.updatingRetry', { version: update.latest, attempt: update.attempt })
-                    : t('update.updating', { version: update.latest });
-            case 'done':
-                return t('update.done', { version: update.latest });
-            case 'error':
-                return t(update.messageKey, update.params);
-            default:
-                return t('update.check');
-        }
-    })();
-    const options = [...languageOptions, { id: 'update', label: updateLabel }];
-    /** Show a check's answer, whether this screen asked or the TUI did on opening. */
-    const applyCheck = (result) => {
-        checkRef.current = { source: result.source ?? '', sources: result.sources ?? [] };
-        // A registry that has not synced the release yet used to be the whole
-        // answer. It is still asked, and said to be behind.
-        const behind = result.behind ?? [];
-        setSourceNote(result.updateAvailable && behind.length > 0 && result.source
-            ? {
-                registries: behind
-                    .map((entry) => `${sourceHost(entry.source)} ${entry.version ?? ''}`.trim())
-                    .join(', '),
-                source: sourceHost(result.source),
-            }
-            : null);
-        setUpdate(result.updateAvailable
-            ? { phase: 'available', latest: result.latest }
-            : { phase: 'current', latest: result.latest });
-    };
-    // The TUI already asked when it opened; start from that answer.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: only a new answer from the opening check matters, not each render's applyCheck or phase
-    useEffect(() => {
-        if (ctx.updateCheck?.ok && update.phase === 'idle')
-            applyCheck(ctx.updateCheck);
-    }, [ctx.updateCheck]);
-    const runCheck = async () => {
-        setUpdate({ phase: 'checking' });
-        setSourceNote(null);
-        const result = await checkForUpdate();
-        if (!result.ok) {
-            setUpdate({ phase: 'error', messageKey: result.errorKey ?? 'update.errorNetwork' });
-            // Which sources were tried, and what each of them said. Without this
-            // the row reads "could not reach npm registry" on a machine where
-            // `npm install` works perfectly, and there is nothing to act on.
-            const { message } = result;
-            if (message)
-                ctx.notify((t) => t('update.errorNetworkDetail', { message }), 'error');
-            return;
-        }
-        ctx.setUpdateCheck(result);
-        applyCheck(result);
-    };
-    const runUpdate = async (latest) => {
-        setUpdate({ phase: 'updating', latest, attempt: 1 });
-        const result = await whileServicesStopped(ctx.config, () => performUpdate({
-            source: checkRef.current.source,
-            sources: checkRef.current.sources,
-            version: latest,
-            onAttempt: ({ attempt }) => setUpdate({ phase: 'updating', latest, attempt }),
-        }));
-        if (!result.ok) {
-            const params = {
-                version: latest,
-                installed: result.installed ?? '',
-                url: cliTarballUrl(latest),
-            };
-            setUpdate({ phase: 'error', messageKey: result.errorKey ?? 'update.errorFailed', params });
-            // npm's own words: "update failed" alone is what left this unfixable.
-            ctx.notify((t) => result.summary
-                ? t('update.errorFailedDetail', { message: result.summary })
-                : t(result.errorKey ?? 'update.errorFailed', params), 'error');
-            return;
-        }
-        setUpdate({ phase: 'done', latest });
-        setSourceNote(null);
-        // Installed: the line under the title has nothing left to announce.
-        ctx.setUpdateCheck(null);
-        ctx.notify((t) => t('update.restartHint'), 'success');
-    };
-    /**
-     * One row, two meanings: check first, then install what the check found.
-     * Refusing to self-update is reported rather than hidden, so a checkout does
-     * not look like a silently broken button.
-     */
-    const activateUpdate = () => {
-        if (update.phase === 'checking' || update.phase === 'updating')
-            return;
-        if (update.phase === 'available') {
-            if (!updatable) {
-                setUpdate({ phase: 'error', messageKey: `update.cannot.${installKind()}` });
-                return;
-            }
-            void runUpdate(update.latest);
-            return;
-        }
-        void runCheck();
-    };
-    const choose = (language) => {
-        const result = setField(draft, 'language', language);
-        const { errorKey } = result;
-        if (errorKey) {
-            ctx.notify((t) => t(errorKey), 'error');
-            return;
-        }
-        ctx.updateDraft(result.draft);
-        try {
-            saveDraft(result.draft);
-            ctx.reloadConfig();
-            ctx.notify((t) => t('common.saved', { path: configPath() }), 'success');
-        }
-        catch (error) {
-            ctx.notify((t) => t('error.saveFailed', { message: error.message }), 'error');
-        }
-    };
-    const activate = (id) => {
-        if (id === 'update') {
-            activateUpdate();
-            return;
-        }
-        choose(id);
-    };
-    useInput((_input, key) => {
-        const index = options.findIndex((option) => option.id === selected);
-        if (key.upArrow)
-            setSelected(options[(index - 1 + options.length) % options.length].id);
-        else if (key.downArrow)
-            setSelected(options[(index + 1) % options.length].id);
-        else if (key.return)
-            activate(selected);
-    }, { isActive: ctx.editingId === null });
-    return (_jsxs(Panel, { title: t('about.title'), children: [_jsx(Text, { color: theme.muted, children: t('about.language') }), _jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: languageOptions.map((option) => (_jsx(Selectable, { selected: selected === option.id, onSelect: () => {
-                        setSelected(option.id);
-                        choose(option.id);
-                    }, onHover: () => setSelected(option.id), children: `${option.label}${draft.ui.language === option.id ? '  ✓' : ''}` }, option.id))) }), _jsx(Text, { color: theme.muted, children: t('update.title') }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [_jsx(Selectable, { selected: selected === 'update', onSelect: () => {
-                            setSelected('update');
-                            activateUpdate();
-                        }, onHover: () => setSelected('update'), children: updateLabel }), sourceNote ? (_jsx(Text, { color: theme.muted, children: `  ${t('update.mirrorBehind', sourceNote)}` })) : null] }), _jsx(Row, { label: t('about.version'), children: _jsx(Text, { color: theme.muted, children: currentVersion() }) }), runsLocalRelay(ctx.config) ? (_jsx(Row, { label: t('about.relayPackage'), children: _jsx(Text, { color: theme.muted, children: installedRelayVersion() ?? '?' }) })) : null, _jsx(Row, { label: t('about.configPath'), children: _jsx(Text, { color: theme.muted, children: configPath() }) }), _jsx(Row, { label: t('about.statePath'), children: _jsx(Text, { color: theme.muted, children: stateDir() }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: t('about.docs') }) }), _jsx(Message, { text: ctx.message?.text ?? null, level: ctx.message?.level ?? 'info' })] }));
-}