@jobshimo/browser-link 0.1.0 → 0.4.0

package/dist/ui/screens.d.ts

@@ -0,0 +1,61 @@
+import { type Language } from '../commands/welcome.js';
+import { type ClientId } from '../installers/index.js';
+import { type InstallReport } from '../commands/install.js';
+interface CommonProps {
+    language: Language;
+}
+interface WelcomeProps extends CommonProps {
+    hideDismiss: boolean;
+    onAccept: () => void;
+    onDismiss: () => void;
+    onSwapLang: () => void;
+    onQuit: () => void;
+}
+export declare function WelcomeScreen({ language, hideDismiss, onAccept, onDismiss, onSwapLang, onQuit, }: WelcomeProps): import("react/jsx-runtime").JSX.Element;
+export type MenuAction = 'register' | 'permissions' | 'multiAgent' | 'extension' | 'doctor' | 'updates' | 'language' | 'welcome' | 'about' | 'repo' | 'quit';
+interface MainMenuProps extends CommonProps {
+    onSelect: (action: MenuAction) => void;
+    onSwapLang: () => void;
+    onQuit: () => void;
+}
+export declare function MainMenu({ language, onSelect, onSwapLang, onQuit }: MainMenuProps): import("react/jsx-runtime").JSX.Element;
+interface ClientPickerProps extends CommonProps {
+    onPick: (id: ClientId) => void;
+    onBack: () => void;
+}
+export declare function ClientPicker({ language, onPick, onBack }: ClientPickerProps): import("react/jsx-runtime").JSX.Element;
+interface InstallResultProps extends CommonProps {
+    report: InstallReport;
+    onBack: () => void;
+}
+export declare function InstallResultView({ language, report, onBack }: InstallResultProps): import("react/jsx-runtime").JSX.Element;
+interface ExtensionViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function ExtensionView({ language, onBack }: ExtensionViewProps): import("react/jsx-runtime").JSX.Element;
+interface DoctorViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function DoctorView({ language, onBack }: DoctorViewProps): import("react/jsx-runtime").JSX.Element;
+interface AboutViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function AboutView({ language, onBack }: AboutViewProps): import("react/jsx-runtime").JSX.Element;
+interface PermissionsViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function PermissionsView({ language, onBack }: PermissionsViewProps): import("react/jsx-runtime").JSX.Element;
+interface UpdatesViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function UpdatesView({ language, onBack }: UpdatesViewProps): import("react/jsx-runtime").JSX.Element;
+interface LanguageViewProps extends CommonProps {
+    onPick: (next: Language) => void;
+    onBack: () => void;
+}
+export declare function LanguageView({ language, onPick, onBack }: LanguageViewProps): import("react/jsx-runtime").JSX.Element;
+interface MultiAgentViewProps extends CommonProps {
+    onBack: () => void;
+}
+export declare function MultiAgentView({ language, onBack }: MultiAgentViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/screens.js

@@ -0,0 +1,603 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useEffect, useMemo, useState } from 'react';
+import { Frame, Menu } from './components.js';
+import { I18N_WELCOME } from '../commands/welcome.js';
+import { I18N_ABOUT } from '../commands/about.js';
+import { INSTALLERS } from '../installers/index.js';
+import { runDoctor, formatDoctor } from '../commands/doctor.js';
+import { getExtensionInfo } from '../commands/extension.js';
+import { checkUpdates } from '../commands/updates.js';
+import { PACKAGE_NAME } from '../version.js';
+import { loadConfig, saveConfig } from '../config.js';
+import { PRESETS, TOOL_CATALOGUE, sanitizeDisabledTools, } from '../permissions.js';
+export function WelcomeScreen({ language, hideDismiss, onAccept, onDismiss, onSwapLang, onQuit, }) {
+    const t = I18N_WELCOME[language];
+    const items = [
+        { value: 'accept', label: t.options.accept },
+    ];
+    if (!hideDismiss)
+        items.push({ value: 'dismiss', label: t.options.dismiss });
+    items.push({ value: 'swap', label: t.options.swap }, { value: 'quit', label: t.options.quit });
+    const [idx, setIdx] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow)
+            setIdx((i) => (i - 1 + items.length) % items.length);
+        else if (key.downArrow)
+            setIdx((i) => (i + 1) % items.length);
+        else if (key.return) {
+            const v = items[idx].value;
+            if (v === 'accept')
+                onAccept();
+            else if (v === 'dismiss')
+                onDismiss();
+            else if (v === 'swap')
+                onSwapLang();
+            else
+                onQuit();
+        }
+        else if (input === 'q' || key.escape)
+            onQuit();
+        else if (input === 'l')
+            onSwapLang();
+    });
+    const footer = language === 'es'
+        ? '↑↓ moverse · ↵ elegir · l idioma · q salir'
+        : '↑↓ navigate · ↵ select · l language · q quit';
+    return (_jsxs(Frame, { title: t.title, footer: footer, children: [_jsx(Section, { title: t.aboutTitle, body: t.about }), _jsx(Section, { title: t.capabilitiesTitle, body: t.capabilities }), _jsx(Section, { title: t.warningTitle, body: t.warning, warn: true }), _jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", italic: true, children: t.responsibility }), _jsx(Text, { color: "gray", italic: true, children: t.extensionNote })] }), _jsx(Text, { color: "white", bold: true, children: t.prompt }), _jsx(Box, { marginTop: 1, children: _jsx(Menu, { items: items, selectedIndex: idx }) })] }));
+}
+function Section({ title, body, warn }) {
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: warn ? 'yellow' : 'cyan', bold: true, children: [warn ? '⚠  ' : '', title] }), _jsx(Text, { children: body })] }));
+}
+const MENU_I18N = {
+    en: {
+        title: 'browser-link — setup',
+        prompt: 'Pick an action',
+        footer: '↑↓ navigate · ↵ select · l language · q quit',
+        options: {
+            register: 'Register browser-link with an MCP client',
+            permissions: 'Permissions — pick which MCP tools to expose',
+            multiAgent: 'Multi-agent — let multiple MCP clients share one bridge',
+            extension: 'Show Chrome extension install steps',
+            doctor: 'Run doctor (diagnose current setup)',
+            updates: 'Check for updates on npm',
+            language: 'Language — switch between English and Español',
+            welcome: 'Show the welcome screen',
+            about: 'About / Help — what is this and how it works',
+            repo: 'Open the GitHub repository',
+            quit: 'Quit',
+        },
+    },
+    es: {
+        title: 'browser-link — configuración',
+        prompt: 'Elegí una acción',
+        footer: '↑↓ moverse · ↵ elegir · l idioma · q salir',
+        options: {
+            register: 'Registrar browser-link en un cliente MCP',
+            permissions: 'Permisos — elegí qué tools del MCP se exponen',
+            multiAgent: 'Multi-agente — varios clientes MCP comparten el mismo puente',
+            extension: 'Ver pasos para instalar la extensión de Chrome',
+            doctor: 'Diagnóstico (estado actual de la instalación)',
+            updates: 'Buscar actualizaciones en npm',
+            language: 'Idioma — cambiar entre English y Español',
+            welcome: 'Mostrar la pantalla de bienvenida',
+            about: 'Información / ayuda — qué es esto y cómo funciona',
+            repo: 'Abrir el repositorio en GitHub',
+            quit: 'Salir',
+        },
+    },
+};
+export function MainMenu({ language, onSelect, onSwapLang, onQuit }) {
+    const t = MENU_I18N[language];
+    const items = [
+        'register',
+        'permissions',
+        'multiAgent',
+        'extension',
+        'doctor',
+        'updates',
+        'language',
+        'welcome',
+        'about',
+        'repo',
+        'quit',
+    ].map((a) => ({ value: a, label: t.options[a] }));
+    const [idx, setIdx] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow)
+            setIdx((i) => (i - 1 + items.length) % items.length);
+        else if (key.downArrow)
+            setIdx((i) => (i + 1) % items.length);
+        else if (key.return) {
+            const v = items[idx].value;
+            if (v === 'quit')
+                onQuit();
+            else
+                onSelect(v);
+        }
+        else if (input === 'q' || key.escape)
+            onQuit();
+        else if (input === 'l')
+            onSwapLang();
+    });
+    return (_jsxs(Frame, { title: t.title, footer: t.footer, children: [_jsx(Text, { color: "white", bold: true, children: t.prompt }), _jsx(Box, { marginTop: 1, children: _jsx(Menu, { items: items, selectedIndex: idx }) })] }));
+}
+const PICKER_I18N = {
+    en: {
+        title: 'Register browser-link in…',
+        prompt: 'Which MCP client?',
+        footer: '↑↓ navigate · ↵ register · Esc back',
+    },
+    es: {
+        title: 'Registrar browser-link en…',
+        prompt: '¿Qué cliente MCP?',
+        footer: '↑↓ moverse · ↵ registrar · Esc volver',
+    },
+};
+export function ClientPicker({ language, onPick, onBack }) {
+    const t = PICKER_I18N[language];
+    const STATUS = {
+        en: { registered: 'registered', notRegistered: 'not registered', notDetected: 'not detected' },
+        es: { registered: 'registrado', notRegistered: 'no registrado', notDetected: 'no detectado' },
+    };
+    const s = STATUS[language];
+    const items = INSTALLERS.map((inst) => {
+        const d = inst.detect();
+        const hint = !d.installed ? s.notDetected : d.registered ? s.registered : s.notRegistered;
+        return { value: inst.id, label: inst.displayName, hint };
+    });
+    const [idx, setIdx] = useState(0);
+    useInput((input, key) => {
+        if (key.upArrow)
+            setIdx((i) => (i - 1 + items.length) % items.length);
+        else if (key.downArrow)
+            setIdx((i) => (i + 1) % items.length);
+        else if (key.return)
+            onPick(items[idx].value);
+        else if (input === 'q' || key.escape)
+            onBack();
+    });
+    return (_jsxs(Frame, { title: t.title, footer: t.footer, children: [_jsx(Text, { color: "white", bold: true, children: t.prompt }), _jsx(Box, { marginTop: 1, children: _jsx(Menu, { items: items, selectedIndex: idx }) })] }));
+}
+const RESULT_I18N = {
+    en: {
+        ok: 'Registered',
+        warn: 'Not registered',
+        hint: 'Restart the MCP client so it picks up the new entry.',
+        footer: '↵ / Esc back to menu',
+    },
+    es: {
+        ok: 'Registrado',
+        warn: 'No registrado',
+        hint: 'Reiniciá el cliente MCP para que tome la nueva entrada.',
+        footer: '↵ / Esc volver al menú',
+    },
+};
+export function InstallResultView({ language, report, onBack }) {
+    const t = RESULT_I18N[language];
+    useInput((_input, key) => {
+        if (key.return || key.escape)
+            onBack();
+    });
+    const ok = report.installedClient;
+    return (_jsxs(Frame, { title: `${report.displayName} — ${ok ? t.ok : t.warn}`, footer: t.footer, children: [_jsxs(Text, { color: ok ? 'green' : 'yellow', children: [ok ? '✓ ' : '⚠ ', report.message] }), ok && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "cyan", children: ["\u2192 ", t.hint] }) }))] }));
+}
+/* ── Extension info ────────────────────────────────────────────────────── */
+const EXT_I18N = {
+    en: {
+        title: 'Chrome extension — install steps',
+        pathLabel: 'Extension assets are at:',
+        stepsLabel: 'Install steps:',
+        afterLoading: 'After loading, open the extension popup on any tab and click "Conectar" to bridge it.',
+        notFound: 'Extension assets not found. Run `npm run build:extension` (dev) or reinstall the package.',
+        footer: '↵ / Esc back to menu',
+    },
+    es: {
+        title: 'Extensión de Chrome — pasos de instalación',
+        pathLabel: 'Los assets de la extensión están en:',
+        stepsLabel: 'Pasos:',
+        afterLoading: 'Después de cargarla, abrí el popup de la extensión en cualquier pestaña y hacé click en "Conectar" para puentearla.',
+        notFound: 'No se encontraron los assets. Corré `npm run build:extension` (dev) o reinstalá el paquete.',
+        footer: '↵ / Esc volver al menú',
+    },
+};
+export function ExtensionView({ language, onBack }) {
+    const t = EXT_I18N[language];
+    const info = getExtensionInfo();
+    useInput((_input, key) => {
+        if (key.return || key.escape)
+            onBack();
+    });
+    return (_jsx(Frame, { title: t.title, footer: t.footer, children: info.path ? (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: t.pathLabel }), _jsx(Text, { color: "cyan", children: info.path }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: t.stepsLabel }), _jsx(Text, { children: info.hints })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", italic: true, children: t.afterLoading }) })] })) : (_jsx(Text, { color: "yellow", children: t.notFound })) }));
+}
+/* ── Doctor ────────────────────────────────────────────────────────────── */
+const DOCTOR_I18N = {
+    en: {
+        title: 'Doctor — diagnose current setup',
+        loading: 'Diagnosing…',
+        refresh: 'r refresh · ↵ / Esc back to menu',
+        footer: '↵ / Esc back to menu',
+    },
+    es: {
+        title: 'Diagnóstico — estado actual de la instalación',
+        loading: 'Diagnosticando…',
+        refresh: 'r refrescar · ↵ / Esc volver al menú',
+        footer: '↵ / Esc volver al menú',
+    },
+};
+export function DoctorView({ language, onBack }) {
+    const t = DOCTOR_I18N[language];
+    const [output, setOutput] = useState(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        setOutput(null);
+        runDoctor().then((r) => {
+            if (!cancelled)
+                setOutput(formatDoctor(r));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [refreshKey]);
+    useInput((input, key) => {
+        if (key.return || key.escape)
+            onBack();
+        else if (input === 'r')
+            setRefreshKey((k) => k + 1);
+    });
+    return (_jsx(Frame, { title: t.title, footer: t.refresh, children: output === null ? _jsx(Text, { color: "gray", children: t.loading }) : _jsx(Text, { children: output }) }));
+}
+export function AboutView({ language, onBack }) {
+    const t = I18N_ABOUT[language];
+    useInput((_input, key) => {
+        if (key.return || key.escape)
+            onBack();
+    });
+    const footer = language === 'es' ? '↵ / Esc volver al menú' : '↵ / Esc back to menu';
+    return (_jsxs(Frame, { title: t.title, footer: footer, children: [_jsx(AboutSection, { title: t.whatTitle, body: t.what }), _jsx(AboutSection, { title: t.howTitle, body: t.how }), _jsx(AboutSection, { title: t.bindingTitle, body: t.binding }), _jsx(AboutSection, { title: t.bridgeToolsTitle, body: t.bridgeTools }), _jsx(AboutSection, { title: t.mapToolsTitle, body: t.mapTools }), _jsx(AboutSection, { title: t.privacyTitle, body: t.privacy }), _jsx(AboutSection, { title: t.helpTitle, body: t.help })] }));
+}
+function AboutSection({ title, body }) {
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: title }), _jsx(Text, { children: body })] }));
+}
+/* ── Permissions ───────────────────────────────────────────────────────── */
+const PERM_I18N = {
+    en: {
+        title: 'Permissions — pick which MCP tools to expose',
+        intro: 'Apply a preset (↵) or toggle individual tools (Space). Press s to save.',
+        presetsHeader: 'Presets',
+        bridgeHeader: 'Browser bridge',
+        mapHeader: 'Persistent UI map',
+        applyPrefix: 'Apply: ',
+        unsaved: '* Unsaved changes — press s to save',
+        saved: '✓ Saved.',
+        restart: 'Changes take effect the next time your MCP client starts the server.',
+        footer: '↑↓ navigate · Space toggle · ↵ apply preset · s save · Esc back',
+    },
+    es: {
+        title: 'Permisos — elegí qué tools del MCP se exponen',
+        intro: 'Aplicá un preset (↵) o cambiá tools individuales (Espacio). Apretá s para guardar.',
+        presetsHeader: 'Presets',
+        bridgeHeader: 'Bridge del browser',
+        mapHeader: 'Mapa persistente',
+        applyPrefix: 'Aplicar: ',
+        unsaved: '* Cambios sin guardar — apretá s para guardar',
+        saved: '✓ Guardado.',
+        restart: 'Los cambios tienen efecto la próxima vez que el cliente MCP arranque el servidor.',
+        footer: '↑↓ moverse · Espacio cambiar · ↵ aplicar preset · s guardar · Esc volver',
+    },
+};
+function setsDiffer(a, b) {
+    if (a.size !== b.size)
+        return true;
+    for (const x of a)
+        if (!b.has(x))
+            return true;
+    return false;
+}
+export function PermissionsView({ language, onBack }) {
+    const t = PERM_I18N[language];
+    const rows = useMemo(() => {
+        const r = [];
+        for (const preset of PRESETS)
+            r.push({ kind: 'preset', preset });
+        r.push({ kind: 'header', family: 'bridge' });
+        for (const tool of TOOL_CATALOGUE) {
+            if (tool.family === 'bridge')
+                r.push({ kind: 'tool', tool });
+        }
+        r.push({ kind: 'header', family: 'map' });
+        for (const tool of TOOL_CATALOGUE) {
+            if (tool.family === 'map')
+                r.push({ kind: 'tool', tool });
+        }
+        return r;
+    }, []);
+    const initial = useMemo(() => new Set(loadConfig().disabledTools ?? []), []);
+    const [savedDisabled, setSavedDisabled] = useState(initial);
+    const [disabled, setDisabled] = useState(initial);
+    const firstNonHeader = rows.findIndex((r) => r.kind !== 'header');
+    const [cursor, setCursor] = useState(firstNonHeader);
+    const [justSaved, setJustSaved] = useState(false);
+    const move = (dir) => {
+        setCursor((idx) => {
+            let i = idx;
+            for (let n = 0; n < rows.length; n++) {
+                i = (i + dir + rows.length) % rows.length;
+                if (rows[i].kind !== 'header')
+                    return i;
+            }
+            return idx;
+        });
+    };
+    const toggleTool = (name) => {
+        setDisabled((prev) => {
+            const next = new Set(prev);
+            if (next.has(name))
+                next.delete(name);
+            else
+                next.add(name);
+            return next;
+        });
+        setJustSaved(false);
+    };
+    const applyPreset = (preset) => {
+        setDisabled(new Set(preset.disabled));
+        setJustSaved(false);
+    };
+    const save = () => {
+        const list = sanitizeDisabledTools([...disabled]);
+        saveConfig({ disabledTools: list });
+        setSavedDisabled(new Set(list));
+        setJustSaved(true);
+    };
+    useInput((input, key) => {
+        if (key.upArrow)
+            move(-1);
+        else if (key.downArrow)
+            move(1);
+        else if (input === ' ') {
+            const row = rows[cursor];
+            if (row?.kind === 'tool')
+                toggleTool(row.tool.name);
+        }
+        else if (key.return) {
+            const row = rows[cursor];
+            if (row?.kind === 'preset')
+                applyPreset(row.preset);
+        }
+        else if (input === 's' || input === 'S') {
+            save();
+        }
+        else if (input === 'q' || key.escape)
+            onBack();
+    });
+    const unsaved = setsDiffer(disabled, savedDisabled);
+    return (_jsxs(Frame, { title: t.title, footer: t.footer, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "white", children: t.intro }) }), _jsx(Box, { flexDirection: "column", children: rows.map((row, i) => {
+                    if (row.kind === 'header') {
+                        const label = row.family === 'bridge' ? t.bridgeHeader : t.mapHeader;
+                        return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "cyan", bold: true, children: [label, ":"] }) }, `h-${i}`));
+                    }
+                    const isCursor = i === cursor;
+                    const cursorMark = isCursor ? '❯' : ' ';
+                    if (row.kind === 'preset') {
+                        return (_jsxs(Box, { children: [_jsxs(Text, { color: isCursor ? 'cyan' : 'gray', children: [cursorMark, " "] }), _jsxs(Text, { color: isCursor ? 'white' : 'gray', bold: isCursor, children: [t.applyPrefix, row.preset.label] })] }, `p-${row.preset.id}`));
+                    }
+                    const isDisabled = disabled.has(row.tool.name);
+                    const checkbox = isDisabled ? '[ ]' : '[x]';
+                    const checkboxColor = isDisabled ? 'red' : 'green';
+                    return (_jsxs(Box, { children: [_jsxs(Text, { color: isCursor ? 'cyan' : 'gray', children: [cursorMark, " "] }), _jsxs(Text, { color: checkboxColor, children: [checkbox, " "] }), _jsx(Text, { color: isCursor ? 'white' : isDisabled ? 'gray' : 'white', bold: isCursor, children: row.tool.name.padEnd(28) }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', row.tool.summary] })] }, `t-${row.tool.name}`));
+                }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [unsaved ? (_jsx(Text, { color: "yellow", children: t.unsaved })) : justSaved ? (_jsx(Text, { color: "green", children: t.saved })) : null, _jsx(Text, { color: "gray", italic: true, children: t.restart })] })] }));
+}
+/* ── Updates ───────────────────────────────────────────────────────────── */
+const UPDATES_I18N = {
+    en: {
+        title: 'Check for updates',
+        checking: 'Checking the npm registry…',
+        current: 'Current version',
+        latest: 'Latest on npm  ',
+        upToDate: '✓ You are on the latest published version.',
+        available: '⚠ A newer version is available.',
+        upgradeCmd: 'To upgrade, run:',
+        error: 'Could not check the registry',
+        footer: 'r retry · ↵ / Esc back to menu',
+    },
+    es: {
+        title: 'Buscar actualizaciones',
+        checking: 'Consultando el registry de npm…',
+        current: 'Versión instalada',
+        latest: 'Última en npm    ',
+        upToDate: '✓ Estás en la última versión publicada.',
+        available: '⚠ Hay una versión más nueva disponible.',
+        upgradeCmd: 'Para actualizar, corré:',
+        error: 'No se pudo consultar el registry',
+        footer: 'r reintentar · ↵ / Esc volver al menú',
+    },
+};
+export function UpdatesView({ language, onBack }) {
+    const t = UPDATES_I18N[language];
+    const [info, setInfo] = useState(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        setInfo(null);
+        checkUpdates().then((r) => {
+            if (!cancelled)
+                setInfo(r);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [refreshKey]);
+    useInput((input, key) => {
+        if (key.return || key.escape)
+            onBack();
+        else if (input === 'r')
+            setRefreshKey((k) => k + 1);
+    });
+    return (_jsx(Frame, { title: t.title, footer: t.footer, children: info === null ? (_jsx(Text, { color: "gray", children: t.checking })) : info.error || info.latest === null ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: "white", children: [t.current, ": "] }), _jsx(Text, { bold: true, children: info.current })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: [t.error, ": ", info.error ?? 'unknown error'] }) })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: "white", children: [t.current, ": "] }), _jsx(Text, { bold: true, children: info.current })] }), _jsxs(Text, { children: [_jsxs(Text, { color: "white", children: [t.latest, ": "] }), _jsx(Text, { bold: true, color: info.newer ? 'yellow' : 'green', children: info.latest })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: info.newer ? 'yellow' : 'green', children: info.newer ? t.available : t.upToDate }) }), info.newer && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "gray", children: t.upgradeCmd }), _jsx(Text, { color: "cyan", children: `npm install -g ${PACKAGE_NAME}@latest` })] }))] })) }));
+}
+/* ── Language ──────────────────────────────────────────────────────────── */
+const LANG_I18N = {
+    en: {
+        title: 'Language — switch between English and Español',
+        prompt: 'Pick a language',
+        saved: '✓ Saved. All output will now use the selected language.',
+        footer: '↑↓ navigate · ↵ pick · Esc back',
+    },
+    es: {
+        title: 'Idioma — cambiar entre English y Español',
+        prompt: 'Elegí un idioma',
+        saved: '✓ Guardado. Todo el output va a usar el idioma elegido.',
+        footer: '↑↓ moverse · ↵ elegir · Esc volver',
+    },
+};
+export function LanguageView({ language, onPick, onBack }) {
+    const t = LANG_I18N[language];
+    const items = [
+        { value: 'en', label: 'English' },
+        { value: 'es', label: 'Español' },
+    ];
+    const [idx, setIdx] = useState(language === 'es' ? 1 : 0);
+    const [saved, setSaved] = useState(false);
+    useInput((_input, key) => {
+        if (key.upArrow)
+            setIdx((i) => (i - 1 + items.length) % items.length);
+        else if (key.downArrow)
+            setIdx((i) => (i + 1) % items.length);
+        else if (key.return) {
+            const next = items[idx].value;
+            onPick(next);
+            setSaved(true);
+        }
+        else if (key.escape)
+            onBack();
+    });
+    return (_jsxs(Frame, { title: t.title, footer: t.footer, children: [_jsx(Text, { color: "white", bold: true, children: t.prompt }), _jsx(Box, { marginTop: 1, children: _jsx(Menu, { items: items, selectedIndex: idx }) }), saved && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "green", children: t.saved }) }))] }));
+}
+const MULTI_AGENT_I18N = {
+    en: {
+        title: 'Multi-agent — let multiple MCP clients share one browser-link',
+        multiHeader: 'Multi-agent mode',
+        multiBody: [
+            'browser-link normally binds 127.0.0.1:17529 from the first MCP',
+            'client that starts it. Other clients (Claude + Copilot + OpenCode at',
+            'the same time) crash with "port in use".',
+            '',
+            'When multi-agent is ON, the second instance becomes a proxy that',
+            'forwards MCP requests to the first one over an internal port',
+            '(127.0.0.1:17530, kernel-validated like the main one). All agents',
+            'end up sharing the same connected Chrome tabs and the same',
+            'persistent UI map.',
+        ].join('\n'),
+        multiToggle: 'Enable multi-agent mode',
+        reelectHeader: 'Auto-reelect on primary close (advanced)',
+        reelectBody: [
+            'When the primary client closes, secondary clients lose the bridge.',
+            'With auto-reelect ON, one of them takes over the primary role',
+            'automatically (race on bind). With it OFF, you relaunch your MCP',
+            'client manually to reconnect.',
+        ].join('\n'),
+        reelectToggle: 'Auto-reelect when primary closes',
+        reelectDisabled: '(enable multi-agent first)',
+        unsaved: '* Unsaved changes — press s to save',
+        saved: '✓ Saved.',
+        restart: 'Restart every MCP client for these changes to take effect.',
+        footer: '↑↓ navigate · Space toggle · s save · Esc back',
+    },
+    es: {
+        title: 'Multi-agente — varios clientes MCP comparten el mismo puente',
+        multiHeader: 'Modo multi-agente',
+        multiBody: [
+            'browser-link normalmente bindea 127.0.0.1:17529 desde el primer',
+            'cliente MCP que lo arranca. Otros clientes (Claude + Copilot +',
+            'OpenCode al mismo tiempo) caen con "port in use".',
+            '',
+            'Con multi-agente activado, el segundo proceso se vuelve un proxy',
+            'que reenvía los pedidos MCP al primero por un puerto interno',
+            '(127.0.0.1:17530, validado por kernel igual que el principal).',
+            'Todos los agentes terminan viendo las mismas pestañas conectadas',
+            'y el mismo mapa persistente.',
+        ].join('\n'),
+        multiToggle: 'Activar modo multi-agente',
+        reelectHeader: 'Re-elección automática al cerrar el primary (avanzado)',
+        reelectBody: [
+            'Cuando el cliente primary cierra, los secundarios pierden el',
+            'puente. Con re-elección automática activada, uno de ellos toma el',
+            'rol de primary automáticamente (race en el bind). Con ella',
+            'desactivada, tenés que relanzar el cliente MCP a mano para',
+            'reconectar.',
+        ].join('\n'),
+        reelectToggle: 'Re-elegir automáticamente al cerrar el primary',
+        reelectDisabled: '(activá primero multi-agente)',
+        unsaved: '* Cambios sin guardar — apretá s para guardar',
+        saved: '✓ Guardado.',
+        restart: 'Reiniciá cada cliente MCP para que los cambios tengan efecto.',
+        footer: '↑↓ moverse · Espacio cambiar · s guardar · Esc volver',
+    },
+};
+export function MultiAgentView({ language, onBack }) {
+    const t = MULTI_AGENT_I18N[language];
+    const initialCfg = useMemo(() => loadConfig(), []);
+    const [savedMulti, setSavedMulti] = useState(initialCfg.multiAgent === true);
+    const [savedReelect, setSavedReelect] = useState(initialCfg.autoReelect === true);
+    const [multi, setMulti] = useState(savedMulti);
+    const [reelect, setReelect] = useState(savedReelect);
+    const [justSaved, setJustSaved] = useState(false);
+    // Only the two toggles are navigable.
+    const [cursor, setCursor] = useState('multi');
+    const move = (dir) => {
+        setCursor((c) => {
+            if (dir === 1)
+                return c === 'multi' ? 'reelect' : 'multi';
+            return c === 'reelect' ? 'multi' : 'reelect';
+        });
+    };
+    const toggle = () => {
+        if (cursor === 'multi') {
+            setMulti((m) => {
+                const next = !m;
+                // Turning multi off also clears the working reelect state, matching
+                // the config normalisation rule (autoReelect implies multiAgent).
+                if (!next)
+                    setReelect(false);
+                return next;
+            });
+        }
+        else {
+            // Auto-reelect can only be turned on when multi is on.
+            if (!multi)
+                return;
+            setReelect((r) => !r);
+        }
+        setJustSaved(false);
+    };
+    const save = () => {
+        saveConfig({ multiAgent: multi, autoReelect: multi ? reelect : false });
+        setSavedMulti(multi);
+        setSavedReelect(multi ? reelect : false);
+        setJustSaved(true);
+    };
+    useInput((input, key) => {
+        if (key.upArrow)
+            move(-1);
+        else if (key.downArrow)
+            move(1);
+        else if (input === ' ')
+            toggle();
+        else if (input === 's' || input === 'S')
+            save();
+        else if (input === 'q' || key.escape)
+            onBack();
+    });
+    const unsaved = multi !== savedMulti || reelect !== savedReelect;
+    const checkbox = (on, dim) => {
+        if (dim)
+            return { mark: '[ ]', color: 'gray' };
+        return on ? { mark: '[x]', color: 'green' } : { mark: '[ ]', color: 'red' };
+    };
+    const multiBox = checkbox(multi, false);
+    const reelectBox = checkbox(multi ? reelect : false, !multi);
+    return (_jsxs(Frame, { title: t.title, footer: t.footer, children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: t.multiHeader }), _jsx(Text, { children: t.multiBody })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: cursor === 'multi' ? 'cyan' : 'gray', children: cursor === 'multi' ? '❯ ' : '  ' }), _jsxs(Text, { color: multiBox.color, children: [multiBox.mark, " "] }), _jsx(Text, { color: cursor === 'multi' ? 'white' : 'gray', bold: cursor === 'multi', children: t.multiToggle })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: t.reelectHeader }), _jsx(Text, { children: t.reelectBody })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: cursor === 'reelect' ? 'cyan' : 'gray', children: cursor === 'reelect' ? '❯ ' : '  ' }), _jsxs(Text, { color: reelectBox.color, children: [reelectBox.mark, " "] }), _jsxs(Text, { color: !multi ? 'gray' : cursor === 'reelect' ? 'white' : 'gray', bold: cursor === 'reelect' && multi, children: [t.reelectToggle, !multi && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', t.reelectDisabled] }))] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [unsaved ? (_jsx(Text, { color: "yellow", children: t.unsaved })) : justSaved ? (_jsx(Text, { color: "green", children: t.saved })) : null, _jsx(Text, { color: "gray", italic: true, children: t.restart })] })] }));
+}
+//# sourceMappingURL=screens.js.map