dmux 5.9.0 → 5.11.0

package/dist/components/popups/inferenceSetupPopup.js

@@ -0,0 +1,939 @@
+#!/usr/bin/env node
+/**
+ * Standalone popup for configuring inference providers.
+ *
+ * A progressive wizard: provider picker (fuzzy search) → credential entry when
+ * missing → dynamically discovered model picker → optional backup target →
+ * review-and-save summary. Writes the standard popup result shape
+ * `{ primary, backup }` consumed by PopupManager.
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { render, Box, Text, useApp, useInput } from 'ink';
+import { pathToFileURL } from 'url';
+import CleanTextInput from '../inputs/CleanTextInput.js';
+import Spinner from '../indicators/Spinner.js';
+import { PopupContainer, PopupWrapper, writeCancelAndExit, writeSuccessAndExit, } from './shared/index.js';
+import { POPUP_CONFIG } from './config.js';
+import { getInferenceApiKey, resolveInferenceProvider, storeInferenceCredential, } from '../../utils/inferenceProviders.js';
+import { persistEnvironmentKeyToShell } from '../../utils/envKeySetup.js';
+import { discoverInferenceModels } from '../../services/InferenceService.js';
+import { getCodexAppServerClient, resetCodexAppServerClient, } from '../../services/CodexAppServerClient.js';
+import { getGrokBuildStatus, loginToGrokBuild, } from '../../services/GrokBuildClient.js';
+import { buildCustomPartialTarget, clampSelection, detectChatGptAccount, detectGrokBuildAccount, detectProviderCredentials, getVisibleWindow, isValidCustomBaseUrl, isValidEnvKeyName, normalizeEnvKeyName, rankInferenceModels, rankInferenceProviders, sanitizeSearchQuery, } from '../../utils/inferenceWizard.js';
+const LIST_MAX_VISIBLE = 8;
+const ROW_MAX_WIDTH = 78;
+const LIST_COL_WIDTH = 48;
+const DETAIL_COL_WIDTH = 34;
+// Fixed 2-character marker gutter so every row label starts at the same x.
+const MARKER_SELECTED = '▸ ';
+const MARKER_BLANK = '  ';
+function truncate(text, maxWidth = ROW_MAX_WIDTH) {
+    // eslint-disable-next-line no-control-regex
+    const clean = text.replace(/[\x00-\x1f\x7f]/g, '');
+    return clean.length > maxWidth ? `${clean.slice(0, maxWidth - 1)}…` : clean;
+}
+function targetTitle(target) {
+    return target === 'primary' ? 'Primary' : 'Backup';
+}
+function ScrollList({ items, selectedIndex, maxVisible = LIST_MAX_VISIBLE, renderItem, }) {
+    const { start, end } = getVisibleWindow(selectedIndex, items.length, maxVisible);
+    return (React.createElement(Box, { flexDirection: "column" },
+        start > 0 && React.createElement(Text, { dimColor: true },
+            '  ↑ ',
+            start,
+            " more"),
+        items.slice(start, end).map((item, offset) => {
+            const index = start + offset;
+            return (React.createElement(React.Fragment, { key: index }, renderItem(item, index === selectedIndex, index)));
+        }),
+        end < items.length && React.createElement(Text, { dimColor: true },
+            '  ↓ ',
+            items.length - end,
+            " more")));
+}
+/** Full-width bordered search input shared by the list screens. */
+const SearchField = ({ value, onChange, onSubmit, placeholder }) => (React.createElement(Box, { borderStyle: "round", borderColor: POPUP_CONFIG.inputBorderColor, paddingX: 1, width: "100%" },
+    React.createElement(CleanTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, maxWidth: ROW_MAX_WIDTH, disableUpDownArrows: true, disableEscape: true, ignoreFocus: true })));
+/**
+ * A write-only secret field: characters are captured but rendered as bullets
+ * and the buffer never leaves this component except through onSubmit.
+ */
+const MaskedSecretInput = ({ onSubmit, onBack }) => {
+    const [length, setLength] = useState(0);
+    const bufferRef = useRef('');
+    useInput((input, key) => {
+        if (key.escape) {
+            bufferRef.current = '';
+            onBack();
+            return;
+        }
+        if (key.return) {
+            const secret = bufferRef.current.trim();
+            if (secret) {
+                bufferRef.current = '';
+                onSubmit(secret);
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            bufferRef.current = bufferRef.current.slice(0, -1);
+            setLength(bufferRef.current.length);
+            return;
+        }
+        if (key.ctrl && input === 'u') {
+            bufferRef.current = '';
+            setLength(0);
+            return;
+        }
+        if (key.ctrl || key.meta || key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.tab) {
+            return;
+        }
+        const printable = input
+            .replace(/\u001b\[\d+~/g, '')
+            // eslint-disable-next-line no-control-regex
+            .replace(/[\x00-\x1f\x7f]/g, '');
+        if (printable) {
+            bufferRef.current += printable;
+            setLength(bufferRef.current.length);
+        }
+    });
+    const shown = Math.min(length, 40);
+    return (React.createElement(Box, { borderStyle: POPUP_CONFIG.inputBorderStyle, borderColor: POPUP_CONFIG.inputBorderColor, paddingX: 1 },
+        React.createElement(Text, { color: POPUP_CONFIG.titleColor }, '> '),
+        React.createElement(Text, null,
+            '•'.repeat(shown),
+            length > shown ? '…' : ''),
+        React.createElement(Text, { inverse: true }, " "),
+        length === 0 && React.createElement(Text, { dimColor: true }, " paste or type your API key")));
+};
+const ProviderScreen = ({ target, badges, onChoose, onBack, }) => {
+    const [query, setQuery] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const ranked = useMemo(() => rankInferenceProviders(query), [query]);
+    const prevQueryRef = useRef(query);
+    if (prevQueryRef.current !== query) {
+        prevQueryRef.current = query;
+        if (selectedIndex !== 0)
+            setSelectedIndex(0);
+    }
+    useInput((_input, key) => {
+        if (key.escape) {
+            if (query)
+                setQuery('');
+            else
+                onBack();
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev) => clampSelection(prev + 1, ranked.length));
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => clampSelection(prev - 1, ranked.length));
+        }
+    });
+    const handleSubmit = () => {
+        const provider = ranked[clampSelection(selectedIndex, ranked.length)];
+        if (provider)
+            onChoose(provider);
+    };
+    const selected = ranked[clampSelection(selectedIndex, ranked.length)];
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true },
+            targetTitle(target),
+            " provider"),
+        React.createElement(Text, { dimColor: true }, target === 'primary'
+            ? 'Powers pane analysis, names, summaries, and merges.'
+            : 'Used automatically when the primary provider fails.'),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(SearchField, { value: query, onChange: setQuery, onSubmit: handleSubmit, placeholder: "Search providers\u2026" })),
+        React.createElement(Box, { marginTop: 1 }, ranked.length === 0 ? (React.createElement(Text, { color: POPUP_CONFIG.errorColor },
+            "No providers match \u201C",
+            truncate(query, 40),
+            "\u201D. Press ESC to clear the search.")) : (React.createElement(React.Fragment, null,
+            React.createElement(Box, { width: LIST_COL_WIDTH, flexDirection: "column" },
+                React.createElement(ScrollList, { items: ranked, selectedIndex: selectedIndex, renderItem: (provider, isSelected) => {
+                        const badge = badges.get(provider.id);
+                        const badgeText = badge
+                            ? badge.kind === 'api-key'
+                                ? '✓ key detected'
+                                : '✓ signed in'
+                            : provider.custom
+                                ? 'your endpoint'
+                                : '';
+                        return (React.createElement(Box, { key: provider.id, width: LIST_COL_WIDTH, paddingRight: 1 },
+                            React.createElement(Text, { color: isSelected ? POPUP_CONFIG.titleColor : undefined, bold: isSelected },
+                                isSelected ? MARKER_SELECTED : MARKER_BLANK,
+                                truncate(provider.name, 30)),
+                            React.createElement(Box, { flexGrow: 1 }),
+                            badgeText && (React.createElement(Text, { color: badge ? POPUP_CONFIG.successColor : undefined, dimColor: !badge }, badgeText))));
+                    } })),
+            React.createElement(Box, { width: DETAIL_COL_WIDTH, flexDirection: "column", borderStyle: "single", borderColor: "gray", borderTop: false, borderRight: false, borderBottom: false, paddingLeft: 1 }, selected && (React.createElement(React.Fragment, null,
+                React.createElement(Text, { bold: true }, truncate(selected.name, DETAIL_COL_WIDTH - 2)),
+                React.createElement(Text, { dimColor: true, wrap: "wrap" }, selected.description),
+                badges.get(selected.id)?.kind === 'api-key' && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: POPUP_CONFIG.successColor, wrap: "wrap" },
+                        "Found ",
+                        badges.get(selected.id).envKey,
+                        " \u2014 no key entry needed.")))))))))));
+};
+const CUSTOM_FIELDS = [
+    {
+        key: 'name',
+        label: 'Display name',
+        placeholder: 'Acme AI (optional)',
+        hint: 'Shown in dmux settings and summaries.',
+    },
+    {
+        key: 'baseUrl',
+        label: 'Base URL',
+        placeholder: 'https://api.acme.dev/v1',
+        hint: 'An OpenAI-compatible endpoint exposing /models and /chat/completions.',
+    },
+    {
+        key: 'envKey',
+        label: 'API-key environment variable',
+        placeholder: 'ACME_API_KEY',
+        hint: 'Uppercase letters, digits, and underscores.',
+    },
+];
+const CustomScreen = ({ onComplete, onBack }) => {
+    const [fieldIndex, setFieldIndex] = useState(0);
+    const [values, setValues] = useState({ name: '', baseUrl: '', envKey: '' });
+    const [error, setError] = useState(null);
+    const field = CUSTOM_FIELDS[fieldIndex];
+    useInput((_input, key) => {
+        if (key.escape) {
+            setError(null);
+            if (fieldIndex > 0)
+                setFieldIndex(fieldIndex - 1);
+            else
+                onBack();
+        }
+    });
+    const handleSubmit = () => {
+        const value = values[field.key].trim();
+        if (field.key === 'baseUrl' && !isValidCustomBaseUrl(value)) {
+            setError('Enter a full http:// or https:// URL.');
+            return;
+        }
+        if (field.key === 'envKey') {
+            if (!isValidEnvKeyName(value)) {
+                setError('Use uppercase letters, digits, and underscores (for example ACME_API_KEY).');
+                return;
+            }
+            onComplete({ ...values, envKey: normalizeEnvKeyName(value) });
+            return;
+        }
+        setError(null);
+        setFieldIndex(fieldIndex + 1);
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true }, "Custom OpenAI-compatible provider"),
+        React.createElement(Text, { dimColor: true },
+            "Step ",
+            fieldIndex + 1,
+            " of ",
+            CUSTOM_FIELDS.length),
+        CUSTOM_FIELDS.slice(0, fieldIndex).map((done) => (React.createElement(Box, { key: done.key, marginTop: done.key === 'name' ? 1 : 0 },
+            React.createElement(Text, { color: POPUP_CONFIG.successColor }, "\u2713 "),
+            React.createElement(Text, { dimColor: true },
+                done.label,
+                ": ",
+                values[done.key].trim() || (done.key === 'name' ? 'Custom provider' : ''))))),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, null, field.label),
+            React.createElement(CleanTextInput, { value: values[field.key], onChange: (next) => {
+                    setError(null);
+                    setValues((prev) => ({ ...prev, [field.key]: next }));
+                }, onSubmit: handleSubmit, placeholder: field.placeholder, maxWidth: ROW_MAX_WIDTH, disableUpDownArrows: true, disableEscape: true, ignoreFocus: true }),
+            React.createElement(Text, { dimColor: true }, field.hint)),
+        error && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: POPUP_CONFIG.errorColor }, error)))));
+};
+const CredentialScreen = ({ provider, onReady, onBack }) => {
+    const [phase, setPhase] = useState('checking');
+    const [errorMessage, setErrorMessage] = useState('');
+    const aliveRef = useRef(true);
+    const envKey = provider.envKeys[0];
+    useEffect(() => {
+        (async () => {
+            try {
+                const existing = await getInferenceApiKey(provider);
+                if (!aliveRef.current)
+                    return;
+                if (existing) {
+                    onReady(`Using ${existing.envKey} from your environment`);
+                    return;
+                }
+            }
+            catch {
+                // Fall through to manual entry.
+            }
+            if (aliveRef.current)
+                setPhase(envKey ? 'enter' : 'error');
+            if (aliveRef.current && !envKey) {
+                setErrorMessage(`${provider.name} does not define an API-key environment variable.`);
+            }
+        })();
+        return () => {
+            aliveRef.current = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useInput((_input, key) => {
+        if (phase !== 'enter' && key.escape) {
+            onBack();
+            return;
+        }
+        if (phase === 'error' && key.return && envKey) {
+            setErrorMessage('');
+            setPhase('enter');
+        }
+    });
+    const handleSecret = async (secret) => {
+        setPhase('saving');
+        try {
+            await storeInferenceCredential(envKey, secret);
+            const { shellConfigPath } = await persistEnvironmentKeyToShell(envKey, secret);
+            if (!aliveRef.current)
+                return;
+            onReady(`Saved ${envKey} to ${shellConfigPath}`);
+        }
+        catch (error) {
+            if (!aliveRef.current)
+                return;
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+            setPhase('error');
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true },
+            provider.name,
+            " API key"),
+        phase === 'checking' && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+            React.createElement(Text, null, " Checking for an existing key\u2026"))),
+        phase === 'enter' && (React.createElement(React.Fragment, null,
+            React.createElement(Text, { dimColor: true },
+                "No ",
+                envKey,
+                " was found. Paste one to continue."),
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, null, envKey),
+                React.createElement(MaskedSecretInput, { onSubmit: (secret) => void handleSecret(secret), onBack: onBack }),
+                React.createElement(Text, { dimColor: true }, "Input stays hidden. The key is saved to your shell profile and ~/.dmux for future sessions.")))),
+        phase === 'saving' && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+            React.createElement(Text, null,
+                " Saving ",
+                envKey,
+                "\u2026"))),
+        phase === 'error' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: POPUP_CONFIG.errorColor }, truncate(errorMessage, 160)),
+            envKey ? (React.createElement(Text, { dimColor: true }, "Enter to try again \u2022 ESC to go back")) : (React.createElement(Text, { dimColor: true }, "ESC to go back"))))));
+};
+const ChatGptScreen = ({ onReady, onBack }) => {
+    const [phase, setPhase] = useState('checking');
+    const [authUrl, setAuthUrl] = useState(null);
+    const [errorMessage, setErrorMessage] = useState('');
+    const aliveRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            aliveRef.current = false;
+        };
+    }, []);
+    const checkAccount = async () => {
+        setPhase('checking');
+        try {
+            const account = await getCodexAppServerClient().getAccount();
+            if (!aliveRef.current)
+                return;
+            if (account?.type === 'chatgpt') {
+                onReady(`Using ChatGPT${account.email ? ` as ${account.email}` : ''}`);
+                return;
+            }
+            setPhase('signedOut');
+        }
+        catch (error) {
+            if (!aliveRef.current)
+                return;
+            setErrorMessage(`Codex CLI is required for ChatGPT subscription inference: ${error instanceof Error ? error.message : String(error)}`);
+            setPhase('error');
+        }
+    };
+    useEffect(() => {
+        void checkAccount();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const startLogin = async () => {
+        setPhase('waiting');
+        setAuthUrl(null);
+        try {
+            const client = getCodexAppServerClient();
+            const login = await client.startChatGptLogin();
+            if (!aliveRef.current)
+                return;
+            setAuthUrl(login.authUrl || login.verificationUrl || null);
+            await client.waitForLogin(login.loginId);
+            if (!aliveRef.current)
+                return;
+            const account = await client.getAccount();
+            if (!aliveRef.current)
+                return;
+            if (account?.type === 'chatgpt') {
+                onReady(`Using ChatGPT${account.email ? ` as ${account.email}` : ''}`);
+            }
+            else {
+                setErrorMessage('Codex is not signed in with a ChatGPT subscription.');
+                setPhase('error');
+            }
+        }
+        catch (error) {
+            if (!aliveRef.current)
+                return;
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+            setPhase('error');
+        }
+    };
+    useInput((_input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.return) {
+            if (phase === 'signedOut')
+                void startLogin();
+            if (phase === 'error') {
+                resetCodexAppServerClient();
+                setErrorMessage('');
+                void checkAccount();
+            }
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true }, "ChatGPT subscription"),
+        phase === 'checking' && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+            React.createElement(Text, null, " Checking your Codex login\u2026"))),
+        phase === 'signedOut' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, null, "No ChatGPT login was found."),
+            React.createElement(Text, { dimColor: true }, "Press Enter to sign in \u2014 your browser will open to authorize Codex."))),
+        phase === 'waiting' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+                React.createElement(Text, null, " Waiting for you to finish signing in\u2026")),
+            authUrl && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, { dimColor: true }, "If your browser did not open, visit:"),
+                React.createElement(Text, { color: POPUP_CONFIG.titleColor, wrap: "wrap" }, authUrl))))),
+        phase === 'error' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: POPUP_CONFIG.errorColor, wrap: "wrap" }, truncate(errorMessage, 240)),
+            React.createElement(Text, { dimColor: true }, "Enter to retry \u2022 ESC to go back")))));
+};
+function cleanGrokLoginOutput(value) {
+    return value
+        .replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, '')
+        .replace(/\r/g, '')
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .slice(-6);
+}
+const GrokBuildScreen = ({ onReady, onBack }) => {
+    const [phase, setPhase] = useState('checking');
+    const [loginOutput, setLoginOutput] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const aliveRef = useRef(true);
+    const loginAbortRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            aliveRef.current = false;
+            loginAbortRef.current?.abort();
+        };
+    }, []);
+    const checkAccount = async () => {
+        setPhase('checking');
+        try {
+            const status = await getGrokBuildStatus();
+            if (!aliveRef.current)
+                return;
+            if (status.authenticated) {
+                onReady('Using your Grok Build subscription');
+                return;
+            }
+            setPhase('signedOut');
+        }
+        catch (error) {
+            if (!aliveRef.current)
+                return;
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+            setPhase('error');
+        }
+    };
+    useEffect(() => {
+        void checkAccount();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const startLogin = async () => {
+        setPhase('waiting');
+        setLoginOutput('');
+        setErrorMessage('');
+        const controller = new AbortController();
+        loginAbortRef.current = controller;
+        try {
+            await loginToGrokBuild((chunk) => {
+                if (aliveRef.current)
+                    setLoginOutput((previous) => `${previous}${chunk}`.slice(-8_000));
+            }, controller.signal);
+            if (!aliveRef.current)
+                return;
+            onReady('Using your Grok Build subscription');
+        }
+        catch (error) {
+            if (!aliveRef.current || controller.signal.aborted)
+                return;
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+            setPhase('error');
+        }
+        finally {
+            if (loginAbortRef.current === controller)
+                loginAbortRef.current = null;
+        }
+    };
+    useInput((_input, key) => {
+        if (key.escape) {
+            loginAbortRef.current?.abort();
+            onBack();
+            return;
+        }
+        if (key.return) {
+            if (phase === 'signedOut')
+                void startLogin();
+            if (phase === 'error')
+                void checkAccount();
+        }
+    });
+    const outputLines = cleanGrokLoginOutput(loginOutput);
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true }, "Grok Build subscription"),
+        React.createElement(Text, { dimColor: true }, "Uses the SpaceXAI login managed by the Grok Build CLI."),
+        phase === 'checking' && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+            React.createElement(Text, null, " Checking your Grok Build login\u2026"))),
+        phase === 'signedOut' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, null, "No Grok Build subscription login was found."),
+            React.createElement(Text, { dimColor: true }, "Press Enter to sign in with SpaceXAI in your browser."))),
+        phase === 'waiting' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+                React.createElement(Text, null, " Waiting for Grok Build sign-in\u2026")),
+            outputLines.map((line, index) => (React.createElement(Text, { key: `${index}-${line}`, dimColor: true, wrap: "wrap" }, truncate(line, 160)))))),
+        phase === 'error' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: POPUP_CONFIG.errorColor, wrap: "wrap" }, truncate(errorMessage, 240)),
+            React.createElement(Text, { dimColor: true }, "Enter to check again \u2022 ESC to go back")))));
+};
+const ModelsScreen = ({ target, draft, onModelsLoaded, onChoose, onBack, }) => {
+    const [phase, setPhase] = useState(draft.models ? 'ready' : 'loading');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [query, setQuery] = useState('');
+    const [manualId, setManualId] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const aliveRef = useRef(true);
+    const providerName = draft.provider?.name || draft.partialTarget?.providerName || 'provider';
+    const models = draft.models || [];
+    const loadModels = async () => {
+        if (!draft.partialTarget)
+            return;
+        setPhase('loading');
+        setErrorMessage('');
+        try {
+            const discovered = await discoverInferenceModels(draft.partialTarget);
+            if (!aliveRef.current)
+                return;
+            if (discovered.length === 0) {
+                setErrorMessage(`${providerName} returned an empty model catalog.`);
+                setPhase('error');
+                return;
+            }
+            onModelsLoaded(discovered);
+            setPhase('ready');
+        }
+        catch (error) {
+            if (!aliveRef.current)
+                return;
+            setErrorMessage(error instanceof Error ? error.message : String(error));
+            setPhase('error');
+        }
+    };
+    useEffect(() => {
+        if (!draft.models)
+            void loadModels();
+        return () => {
+            aliveRef.current = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const ranked = useMemo(() => rankInferenceModels(models, query), [models, query]);
+    const prevQueryRef = useRef(query);
+    if (prevQueryRef.current !== query) {
+        prevQueryRef.current = query;
+        if (selectedIndex !== 0)
+            setSelectedIndex(0);
+    }
+    useInput((input, key) => {
+        if (phase === 'ready') {
+            if (key.escape) {
+                if (query)
+                    setQuery('');
+                else
+                    onBack();
+                return;
+            }
+            if (key.downArrow) {
+                setSelectedIndex((prev) => clampSelection(prev + 1, ranked.length));
+                return;
+            }
+            if (key.upArrow) {
+                setSelectedIndex((prev) => clampSelection(prev - 1, ranked.length));
+            }
+            return;
+        }
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (phase === 'error' && key.ctrl && input === 'r') {
+            void loadModels();
+        }
+    });
+    const handleSubmit = () => {
+        const model = ranked[clampSelection(selectedIndex, ranked.length)];
+        if (model) {
+            onChoose(model.id);
+            return;
+        }
+        const fallback = sanitizeSearchQuery(query);
+        if (fallback)
+            onChoose(fallback);
+    };
+    const selected = ranked[clampSelection(selectedIndex, ranked.length)];
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true },
+            targetTitle(target),
+            " model \u00B7 ",
+            providerName),
+        draft.credentialNote && (React.createElement(Text, { dimColor: true },
+            "\u2713 ",
+            truncate(draft.credentialNote))),
+        phase === 'loading' && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { color: POPUP_CONFIG.titleColor }),
+            React.createElement(Text, null,
+                " Loading models from ",
+                providerName,
+                "\u2026"))),
+        phase === 'ready' && (React.createElement(React.Fragment, null,
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SearchField, { value: query, onChange: setQuery, onSubmit: handleSubmit, placeholder: `Search ${models.length} models…` })),
+            React.createElement(Box, { marginTop: 1 }, ranked.length === 0 ? (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: POPUP_CONFIG.errorColor },
+                    "No models match \u201C",
+                    truncate(query, 40),
+                    "\u201D."),
+                React.createElement(Text, { dimColor: true }, "Press Enter to use it as a custom model id, or ESC to clear."))) : (React.createElement(React.Fragment, null,
+                React.createElement(Box, { width: LIST_COL_WIDTH, flexDirection: "column" },
+                    React.createElement(Text, { dimColor: true }, query
+                        ? `${ranked.length} of ${models.length} models`
+                        : `${models.length} models`),
+                    React.createElement(ScrollList, { items: ranked, selectedIndex: selectedIndex, renderItem: (model, isSelected) => (React.createElement(Box, { key: model.id, width: LIST_COL_WIDTH, paddingRight: 1 },
+                            React.createElement(Text, { color: isSelected ? POPUP_CONFIG.titleColor : undefined, bold: isSelected },
+                                isSelected ? MARKER_SELECTED : MARKER_BLANK,
+                                truncate(model.name, LIST_COL_WIDTH - 2)))) })),
+                React.createElement(Box, { width: DETAIL_COL_WIDTH, flexDirection: "column", borderStyle: "single", borderColor: "gray", borderTop: false, borderRight: false, borderBottom: false, paddingLeft: 1 }, selected && (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { bold: true, wrap: "wrap" }, truncate(selected.name, DETAIL_COL_WIDTH - 2)),
+                    selected.id !== selected.name && (React.createElement(Text, { dimColor: true, wrap: "wrap" }, selected.id)),
+                    selected.description && (React.createElement(Box, { marginTop: 1 },
+                        React.createElement(Text, { dimColor: true, wrap: "wrap" }, truncate(selected.description, 200)))))))))))),
+        phase === 'error' && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { color: POPUP_CONFIG.errorColor, wrap: "wrap" },
+                "Could not load the model catalog: ",
+                truncate(errorMessage, 200)),
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+                React.createElement(Text, null, "Enter a model id manually"),
+                React.createElement(CleanTextInput, { value: manualId, onChange: setManualId, onSubmit: () => {
+                        const id = manualId.trim();
+                        if (id)
+                            onChoose(id);
+                    }, placeholder: "for example gpt-5-mini", maxWidth: ROW_MAX_WIDTH, disableUpDownArrows: true, disableEscape: true, ignoreFocus: true }),
+                React.createElement(Text, { dimColor: true }, "Ctrl+R to retry loading the catalog"))))));
+};
+const BACKUP_OPTIONS = [
+    {
+        label: 'Finish with just the primary',
+        description: 'You can add a backup later from Settings → Inference providers.',
+        wantBackup: false,
+    },
+    {
+        label: 'Add a backup model',
+        description: 'dmux fails over to it automatically when the primary errors out.',
+        wantBackup: true,
+    },
+];
+const BackupOfferScreen = ({ onDecide, onBack }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useInput((_input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev) => clampSelection(prev + 1, BACKUP_OPTIONS.length));
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((prev) => clampSelection(prev - 1, BACKUP_OPTIONS.length));
+            return;
+        }
+        if (key.return) {
+            onDecide(BACKUP_OPTIONS[selectedIndex].wantBackup);
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true }, "Add a backup?"),
+        React.createElement(Text, { dimColor: true }, "A second provider/model keeps AI features working during outages."),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" }, BACKUP_OPTIONS.map((option, index) => {
+            const isSelected = index === selectedIndex;
+            return (React.createElement(Box, { key: option.label, flexDirection: "column" },
+                React.createElement(Text, { color: isSelected ? POPUP_CONFIG.titleColor : undefined, bold: isSelected },
+                    isSelected ? MARKER_SELECTED : MARKER_BLANK,
+                    option.label),
+                isSelected && React.createElement(Text, { dimColor: true },
+                    '  ',
+                    option.description)));
+        }))));
+};
+const SummaryScreen = ({ drafts, onSave, onBack }) => {
+    useInput((_input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+        if (key.return)
+            onSave();
+    });
+    const describe = (draft) => {
+        if (!draft.partialTarget || !draft.modelId)
+            return null;
+        const name = draft.provider?.name || draft.partialTarget.providerName || draft.partialTarget.providerId;
+        return `${name} / ${draft.modelId}`;
+    };
+    const backupLine = describe(drafts.backup);
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true }, "Review configuration"),
+        React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, { dimColor: true }, 'Primary  '),
+                React.createElement(Text, { color: POPUP_CONFIG.successColor }, truncate(describe(drafts.primary) || '', 68))),
+            React.createElement(Box, null,
+                React.createElement(Text, { dimColor: true }, 'Backup   '),
+                backupLine ? (React.createElement(Text, { color: POPUP_CONFIG.successColor }, truncate(backupLine, 68))) : (React.createElement(Text, { dimColor: true }, "none")))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "Saved globally for all dmux projects."))));
+};
+export const InferenceSetupApp = ({ resultFile, onComplete }) => {
+    const { exit } = useApp();
+    const [steps, setSteps] = useState([{ kind: 'provider', target: 'primary' }]);
+    const [drafts, setDrafts] = useState({
+        primary: {},
+        backup: {},
+    });
+    const [badges, setBadges] = useState(new Map());
+    const step = steps[steps.length - 1];
+    useEffect(() => {
+        return () => {
+            // Provider badges and ChatGPT model discovery share one app-server
+            // process. Ink's exit only unmounts the tree, so close it explicitly to
+            // let the popup process terminate cleanly.
+            resetCodexAppServerClient();
+        };
+    }, []);
+    useEffect(() => {
+        let alive = true;
+        void detectProviderCredentials().then((detected) => {
+            if (!alive)
+                return;
+            setBadges((prev) => new Map([...prev, ...detected]));
+        });
+        void detectChatGptAccount().then((account) => {
+            if (!alive || !account)
+                return;
+            setBadges((prev) => {
+                const next = new Map(prev);
+                next.set('chatgpt', { kind: 'chatgpt', email: account.email });
+                return next;
+            });
+        });
+        void detectGrokBuildAccount().then((account) => {
+            if (!alive || !account)
+                return;
+            setBadges((prev) => {
+                const next = new Map(prev);
+                next.set('grok-build', { kind: 'grok-build' });
+                return next;
+            });
+        });
+        return () => {
+            alive = false;
+        };
+    }, []);
+    const push = (next) => setSteps((prev) => [...prev, next]);
+    const replaceTop = (next) => setSteps((prev) => [...prev.slice(0, -1), next]);
+    const cancel = () => {
+        if (resultFile)
+            writeCancelAndExit(resultFile, exit);
+        else {
+            onComplete?.(null);
+            exit();
+        }
+    };
+    const back = () => {
+        if (steps.length > 1)
+            setSteps((prev) => prev.slice(0, -1));
+        else
+            cancel();
+    };
+    useInput((input, key) => {
+        if (key.ctrl && input === 'c')
+            cancel();
+    });
+    const updateDraft = (target, patch) => {
+        setDrafts((prev) => ({ ...prev, [target]: { ...prev[target], ...patch } }));
+    };
+    const handleProviderChosen = (target, provider) => {
+        updateDraft(target, {
+            provider,
+            partialTarget: { providerId: provider.id },
+            credentialNote: undefined,
+            models: undefined,
+            modelId: undefined,
+        });
+        if (provider.custom)
+            push({ kind: 'custom', target });
+        else if (provider.protocol === 'chatgpt')
+            push({ kind: 'chatgpt', target });
+        else if (provider.protocol === 'grok-build')
+            push({ kind: 'grokBuild', target });
+        else
+            push({ kind: 'credential', target });
+    };
+    const handleCustomComplete = (target, fields) => {
+        const partialTarget = buildCustomPartialTarget(fields);
+        const provider = resolveInferenceProvider({ ...partialTarget, modelId: '__setup__' });
+        if (!provider)
+            return;
+        updateDraft(target, { provider, partialTarget, models: undefined, modelId: undefined });
+        push({ kind: 'credential', target });
+    };
+    const handleCredentialReady = (target, note) => {
+        updateDraft(target, { credentialNote: note });
+        // Replace instead of push so ESC from the model list returns to the
+        // provider picker rather than re-triggering the credential check.
+        replaceTop({ kind: 'models', target });
+    };
+    const handleModelChosen = (target, modelId) => {
+        updateDraft(target, { modelId });
+        if (target === 'primary')
+            push({ kind: 'backupOffer' });
+        else
+            push({ kind: 'summary' });
+    };
+    const handleBackupDecision = (wantBackup) => {
+        if (wantBackup) {
+            push({ kind: 'provider', target: 'backup' });
+        }
+        else {
+            setDrafts((prev) => ({ ...prev, backup: {} }));
+            push({ kind: 'summary' });
+        }
+    };
+    const handleSave = () => {
+        const { primary, backup } = drafts;
+        if (!primary.partialTarget || !primary.modelId)
+            return;
+        const result = {
+            primary: { ...primary.partialTarget, modelId: primary.modelId },
+            backup: backup.partialTarget && backup.modelId
+                ? { ...backup.partialTarget, modelId: backup.modelId }
+                : null,
+        };
+        if (resultFile)
+            writeSuccessAndExit(resultFile, result, exit);
+        else {
+            onComplete?.(result);
+            exit();
+        }
+    };
+    const footer = (() => {
+        switch (step.kind) {
+            case 'provider':
+                return `↑↓ navigate • Enter select • ${steps.length > 1 ? 'ESC back' : POPUP_CONFIG.cancelHint}`;
+            case 'custom':
+                return 'Enter continue • ESC back';
+            case 'credential':
+                return 'Enter save key • ESC back';
+            case 'chatgpt':
+                return 'Enter continue • ESC back';
+            case 'grokBuild':
+                return 'Enter sign in • ESC back';
+            case 'models':
+                return '↑↓ navigate • Enter select • ESC back';
+            case 'backupOffer':
+                return '↑↓ navigate • Enter choose • ESC back';
+            case 'summary':
+                return 'Enter save • ESC back';
+        }
+    })();
+    const screen = (() => {
+        switch (step.kind) {
+            case 'provider':
+                return (React.createElement(ProviderScreen, { key: `provider-${step.target}`, target: step.target, badges: badges, onChoose: (provider) => handleProviderChosen(step.target, provider), onBack: back }));
+            case 'custom':
+                return (React.createElement(CustomScreen, { key: `custom-${step.target}`, onComplete: (fields) => handleCustomComplete(step.target, fields), onBack: back }));
+            case 'credential': {
+                const provider = drafts[step.target].provider;
+                if (!provider)
+                    return null;
+                return (React.createElement(CredentialScreen, { key: `credential-${step.target}-${provider.id}`, provider: provider, onReady: (note) => handleCredentialReady(step.target, note), onBack: back }));
+            }
+            case 'chatgpt':
+                return (React.createElement(ChatGptScreen, { key: `chatgpt-${step.target}`, onReady: (note) => handleCredentialReady(step.target, note), onBack: back }));
+            case 'grokBuild':
+                return (React.createElement(GrokBuildScreen, { key: `grok-build-${step.target}`, onReady: (note) => handleCredentialReady(step.target, note), onBack: back }));
+            case 'models':
+                return (React.createElement(ModelsScreen, { key: `models-${step.target}-${drafts[step.target].provider?.id || 'custom'}`, target: step.target, draft: drafts[step.target], onModelsLoaded: (models) => updateDraft(step.target, { models }), onChoose: (modelId) => handleModelChosen(step.target, modelId), onBack: back }));
+            case 'backupOffer':
+                return React.createElement(BackupOfferScreen, { key: "backup-offer", onDecide: handleBackupDecision, onBack: back });
+            case 'summary':
+                return React.createElement(SummaryScreen, { key: "summary", drafts: drafts, onSave: handleSave, onBack: back });
+        }
+    })();
+    // Match the 90-column tmux popup's 88-column interior and keep first-run
+    // inline onboarding from stretching across an ultra-wide terminal.
+    const content = React.createElement(PopupContainer, { footer: footer, width: 88 }, screen);
+    return resultFile ? (React.createElement(PopupWrapper, { resultFile: resultFile, allowEscapeToCancel: false }, content)) : content;
+};
+/* ------------------------------------------------------------------ */
+/* Entry point                                                        */
+/* ------------------------------------------------------------------ */
+function main() {
+    const resultFile = process.argv[2];
+    if (!resultFile) {
+        console.error('Error: Result file path required');
+        process.exit(1);
+    }
+    render(React.createElement(InferenceSetupApp, { resultFile: resultFile }));
+}
+const entryPointHref = process.argv[1] ? pathToFileURL(process.argv[1]).href : '';
+if (import.meta.url === entryPointHref) {
+    main();
+}
+//# sourceMappingURL=inferenceSetupPopup.js.map