codemaxxing 0.1.7 → 0.1.8

package/dist/index.js

@@ -10,7 +10,7 @@ import { listSessions, getSession, loadMessages } from "./utils/sessions.js";
 import { execSync } from "child_process";
 import { isGitRepo, getBranch, getStatus, getDiff, undoLastCommit } from "./utils/git.js";
 import { getTheme, listThemes, THEMES, DEFAULT_THEME } from "./themes.js";
-import { PROVIDERS, openRouterOAuth, anthropicSetupToken, importCodexToken, importQwenToken, copilotDeviceFlow } from "./utils/auth.js";
+import { PROVIDERS, getCredentials, openRouterOAuth, anthropicSetupToken, importCodexToken, importQwenToken, copilotDeviceFlow } from "./utils/auth.js";
 const VERSION = "0.1.5";
 // ── Helpers ──
 function formatTimeAgo(date) {
@@ -108,6 +108,8 @@ function App() {
     const [themePickerIndex, setThemePickerIndex] = useState(0);
     const [loginPicker, setLoginPicker] = useState(false);
     const [loginPickerIndex, setLoginPickerIndex] = useState(0);
+    const [loginMethodPicker, setLoginMethodPicker] = useState(null);
+    const [loginMethodIndex, setLoginMethodIndex] = useState(0);
     const [approval, setApproval] = useState(null);
     // Listen for paste events from stdin interceptor
     useEffect(() => {
@@ -497,83 +499,127 @@ function App() {
                 return;
             }
         }
-        // Login picker navigation
-        if (loginPicker) {
-            const loginProviders = PROVIDERS.filter((p) => p.id !== "local");
+        // Login method picker navigation (second level — pick auth method)
+        if (loginMethodPicker) {
+            const methods = loginMethodPicker.methods;
             if (key.upArrow) {
-                setLoginPickerIndex((prev) => (prev - 1 + loginProviders.length) % loginProviders.length);
+                setLoginMethodIndex((prev) => (prev - 1 + methods.length) % methods.length);
                 return;
             }
             if (key.downArrow) {
-                setLoginPickerIndex((prev) => (prev + 1) % loginProviders.length);
+                setLoginMethodIndex((prev) => (prev + 1) % methods.length);
+                return;
+            }
+            if (key.escape) {
+                setLoginMethodPicker(null);
+                setLoginPicker(true); // go back to provider picker
                 return;
             }
             if (key.return) {
-                const selected = loginProviders[loginPickerIndex];
-                setLoginPicker(false);
-                if (selected.id === "openrouter") {
+                const method = methods[loginMethodIndex];
+                const providerId = loginMethodPicker.provider;
+                setLoginMethodPicker(null);
+                if (method === "oauth" && providerId === "openrouter") {
                     addMsg("info", "Starting OpenRouter OAuth — opening browser...");
                     setLoading(true);
                     setSpinnerMsg("Waiting for authorization...");
                     openRouterOAuth((msg) => addMsg("info", msg))
-                        .then((cred) => {
-                        addMsg("info", `✅ OpenRouter authenticated! You now have access to 200+ models.`);
-                        addMsg("info", `Switch with: /model anthropic/claude-sonnet-4`);
+                        .then(() => {
+                        addMsg("info", `✅ OpenRouter authenticated! Access to 200+ models.`);
                         setLoading(false);
                     })
-                        .catch((err) => {
-                        addMsg("error", `OAuth failed: ${err.message}`);
-                        setLoading(false);
-                    });
+                        .catch((err) => { addMsg("error", `OAuth failed: ${err.message}`); setLoading(false); });
                 }
-                else if (selected.id === "anthropic") {
-                    addMsg("info", "Starting Anthropic setup-token flow...");
+                else if (method === "setup-token") {
+                    addMsg("info", "Starting setup-token flow — browser will open...");
                     setLoading(true);
                     setSpinnerMsg("Waiting for Claude Code auth...");
                     anthropicSetupToken((msg) => addMsg("info", msg))
-                        .then((cred) => {
-                        addMsg("info", `✅ Anthropic authenticated! (${cred.label})`);
-                        setLoading(false);
-                    })
-                        .catch((err) => {
-                        addMsg("error", `Anthropic auth failed: ${err.message}`);
-                        setLoading(false);
-                    });
+                        .then((cred) => { addMsg("info", `✅ Anthropic authenticated! (${cred.label})`); setLoading(false); })
+                        .catch((err) => { addMsg("error", `Auth failed: ${err.message}`); setLoading(false); });
                 }
-                else if (selected.id === "openai") {
+                else if (method === "cached-token" && providerId === "openai") {
                     const imported = importCodexToken((msg) => addMsg("info", msg));
                     if (imported) {
                         addMsg("info", `✅ Imported Codex credentials! (${imported.label})`);
                     }
                     else {
-                        addMsg("info", "No Codex CLI found. Run: codemaxxing auth api-key openai <your-key>");
+                        addMsg("info", "No Codex CLI found. Install Codex CLI and sign in first.");
                     }
                 }
-                else if (selected.id === "qwen") {
+                else if (method === "cached-token" && providerId === "qwen") {
                     const imported = importQwenToken((msg) => addMsg("info", msg));
                     if (imported) {
                         addMsg("info", `✅ Imported Qwen credentials! (${imported.label})`);
                     }
                     else {
-                        addMsg("info", "No Qwen CLI found. Run: codemaxxing auth api-key qwen <your-key>");
+                        addMsg("info", "No Qwen CLI found. Install Qwen CLI and sign in first.");
                     }
                 }
-                else if (selected.id === "copilot") {
+                else if (method === "device-flow") {
                     addMsg("info", "Starting GitHub Copilot device flow...");
                     setLoading(true);
                     setSpinnerMsg("Waiting for GitHub authorization...");
                     copilotDeviceFlow((msg) => addMsg("info", msg))
-                        .then(() => {
-                        addMsg("info", `✅ GitHub Copilot authenticated!`);
-                        setLoading(false);
-                    })
-                        .catch((err) => {
-                        addMsg("error", `Copilot auth failed: ${err.message}`);
-                        setLoading(false);
-                    });
+                        .then(() => { addMsg("info", `✅ GitHub Copilot authenticated!`); setLoading(false); })
+                        .catch((err) => { addMsg("error", `Copilot auth failed: ${err.message}`); setLoading(false); });
+                }
+                else if (method === "api-key") {
+                    const provider = PROVIDERS.find((p) => p.id === providerId);
+                    addMsg("info", `Enter your API key via CLI:\n  codemaxxing auth api-key ${providerId} <your-key>\n  Get key at: ${provider?.consoleUrl ?? "your provider's dashboard"}`);
+                }
+                return;
+            }
+            return;
+        }
+        // Login picker navigation (first level — pick provider)
+        if (loginPicker) {
+            const loginProviders = PROVIDERS.filter((p) => p.id !== "local");
+            if (key.upArrow) {
+                setLoginPickerIndex((prev) => (prev - 1 + loginProviders.length) % loginProviders.length);
+                return;
+            }
+            if (key.downArrow) {
+                setLoginPickerIndex((prev) => (prev + 1) % loginProviders.length);
+                return;
+            }
+            if (key.return) {
+                const selected = loginProviders[loginPickerIndex];
+                setLoginPicker(false);
+                // Get available methods for this provider (filter out 'none')
+                const methods = selected.methods.filter((m) => m !== "none");
+                if (methods.length === 1) {
+                    // Only one method — execute it directly
+                    setLoginMethodPicker({ provider: selected.id, methods });
+                    setLoginMethodIndex(0);
+                    // Simulate Enter press on the single method
+                    if (methods[0] === "oauth" && selected.id === "openrouter") {
+                        setLoginMethodPicker(null);
+                        addMsg("info", "Starting OpenRouter OAuth — opening browser...");
+                        setLoading(true);
+                        setSpinnerMsg("Waiting for authorization...");
+                        openRouterOAuth((msg) => addMsg("info", msg))
+                            .then(() => { addMsg("info", `✅ OpenRouter authenticated! Access to 200+ models.`); setLoading(false); })
+                            .catch((err) => { addMsg("error", `OAuth failed: ${err.message}`); setLoading(false); });
+                    }
+                    else if (methods[0] === "device-flow") {
+                        setLoginMethodPicker(null);
+                        addMsg("info", "Starting GitHub Copilot device flow...");
+                        setLoading(true);
+                        setSpinnerMsg("Waiting for GitHub authorization...");
+                        copilotDeviceFlow((msg) => addMsg("info", msg))
+                            .then(() => { addMsg("info", `✅ GitHub Copilot authenticated!`); setLoading(false); })
+                            .catch((err) => { addMsg("error", `Copilot auth failed: ${err.message}`); setLoading(false); });
+                    }
+                    else if (methods[0] === "api-key") {
+                        setLoginMethodPicker(null);
+                        addMsg("info", `Enter your API key via CLI:\n  codemaxxing auth api-key ${selected.id} <your-key>\n  Get key at: ${selected.consoleUrl ?? "your provider's dashboard"}`);
+                    }
                 }
                 else {
-                    addMsg("info", `Run: codemaxxing auth api-key ${selected.id} <your-key>\n  Get key at: ${selected.consoleUrl ?? selected.baseUrl}`);
+                    // Multiple methods — show submenu
+                    setLoginMethodPicker({ provider: selected.id, methods });
+                    setLoginMethodIndex(0);
                 }
                 return;
             }
@@ -738,7 +784,16 @@ function App() {
                     default:
                         return _jsx(Text, { children: msg.text }, msg.id);
                 }
-            }), loading && !approval && !streaming && _jsx(NeonSpinner, { message: spinnerMsg, colors: theme.colors }), streaming && !loading && _jsx(StreamingIndicator, { colors: theme.colors }), approval && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["\u26A0 Approve ", approval.tool, "?"] }), approval.tool === "write_file" && approval.args.path ? (_jsxs(Text, { color: theme.colors.muted, children: ["  📄 ", String(approval.args.path)] })) : null, approval.tool === "write_file" && approval.args.content ? (_jsxs(Text, { color: theme.colors.muted, children: ["  ", String(approval.args.content).split("\n").length, " lines, ", String(approval.args.content).length, "B"] })) : null, approval.tool === "run_command" && approval.args.command ? (_jsxs(Text, { color: theme.colors.muted, children: ["  $ ", String(approval.args.command)] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.success, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.error, bold: true, children: "[n]" }), _jsx(Text, { children: "o  " }), _jsx(Text, { color: theme.colors.primary, bold: true, children: "[a]" }), _jsx(Text, { children: "lways" })] })] })), themePicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Choose a theme:" }), listThemes().map((key, i) => (_jsxs(Text, { children: [i === themePickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === themePickerIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: key }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", THEMES[key].description] }), key === theme.name.toLowerCase() ? _jsx(Text, { color: theme.colors.muted, children: " (current)" }) : null] }, key))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), sessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Resume a session:" }), sessionPicker.map((s, i) => (_jsxs(Text, { children: [i === sessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === sessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), showSuggestions && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.muted, paddingX: 1, marginBottom: 0, children: [cmdMatches.slice(0, 6).map((c, i) => (_jsxs(Text, { children: [i === cmdIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === cmdIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: c.cmd }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", c.desc] })] }, i))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Tab select" })] })), _jsxs(Box, { borderStyle: "single", borderColor: approval ? theme.colors.warning : theme.colors.border, paddingX: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "> " }), approval ? (_jsx(Text, { color: theme.colors.warning, children: "waiting for approval..." })) : ready && !loading ? (_jsxs(Box, { children: [pastedChunks.map((p) => (_jsxs(Text, { color: theme.colors.muted, children: ["[Pasted text #", p.id, " +", p.lines, " lines]"] }, p.id))), _jsx(TextInput, { value: input, onChange: (v) => { setInput(v); setCmdIndex(0); }, onSubmit: handleSubmit }, inputKey)] })) : (_jsx(Text, { dimColor: true, children: loading ? "waiting for response..." : "initializing..." }))] }), agent && (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { dimColor: true, children: ["💬 ", agent.getContextLength(), " messages · ~", (() => {
+            }), loading && !approval && !streaming && _jsx(NeonSpinner, { message: spinnerMsg, colors: theme.colors }), streaming && !loading && _jsx(StreamingIndicator, { colors: theme.colors }), approval && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["\u26A0 Approve ", approval.tool, "?"] }), approval.tool === "write_file" && approval.args.path ? (_jsxs(Text, { color: theme.colors.muted, children: ["  📄 ", String(approval.args.path)] })) : null, approval.tool === "write_file" && approval.args.content ? (_jsxs(Text, { color: theme.colors.muted, children: ["  ", String(approval.args.content).split("\n").length, " lines, ", String(approval.args.content).length, "B"] })) : null, approval.tool === "run_command" && approval.args.command ? (_jsxs(Text, { color: theme.colors.muted, children: ["  $ ", String(approval.args.command)] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.success, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.error, bold: true, children: "[n]" }), _jsx(Text, { children: "o  " }), _jsx(Text, { color: theme.colors.primary, bold: true, children: "[a]" }), _jsx(Text, { children: "lways" })] })] })), loginPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "\uD83D\uDCAA Choose a provider:" }), PROVIDERS.filter((p) => p.id !== "local").map((p, i) => (_jsxs(Text, { children: [i === loginPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === loginPickerIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: p.name }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", p.description] }), getCredentials().some((c) => c.provider === p.id) ? _jsx(Text, { color: theme.colors.success, children: " \u2713" }) : null] }, p.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), loginMethodPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "How do you want to authenticate?" }), loginMethodPicker.methods.map((method, i) => {
+                        const labels = {
+                            "oauth": "🌐 Browser login (OAuth)",
+                            "setup-token": "🔑 Link subscription (via Claude Code CLI)",
+                            "cached-token": "📦 Import from existing CLI",
+                            "api-key": "🔒 Enter API key manually",
+                            "device-flow": "📱 Device flow (GitHub)",
+                        };
+                        return (_jsxs(Text, { children: [i === loginMethodIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === loginMethodIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: labels[method] ?? method })] }, method));
+                    }), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc back" })] })), themePicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Choose a theme:" }), listThemes().map((key, i) => (_jsxs(Text, { children: [i === themePickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === themePickerIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: key }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", THEMES[key].description] }), key === theme.name.toLowerCase() ? _jsx(Text, { color: theme.colors.muted, children: " (current)" }) : null] }, key))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), sessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Resume a session:" }), sessionPicker.map((s, i) => (_jsxs(Text, { children: [i === sessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === sessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), showSuggestions && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.muted, paddingX: 1, marginBottom: 0, children: [cmdMatches.slice(0, 6).map((c, i) => (_jsxs(Text, { children: [i === cmdIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === cmdIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: c.cmd }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", c.desc] })] }, i))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Tab select" })] })), _jsxs(Box, { borderStyle: "single", borderColor: approval ? theme.colors.warning : theme.colors.border, paddingX: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "> " }), approval ? (_jsx(Text, { color: theme.colors.warning, children: "waiting for approval..." })) : ready && !loading ? (_jsxs(Box, { children: [pastedChunks.map((p) => (_jsxs(Text, { color: theme.colors.muted, children: ["[Pasted text #", p.id, " +", p.lines, " lines]"] }, p.id))), _jsx(TextInput, { value: input, onChange: (v) => { setInput(v); setCmdIndex(0); }, onSubmit: handleSubmit }, inputKey)] })) : (_jsx(Text, { dimColor: true, children: loading ? "waiting for response..." : "initializing..." }))] }), agent && (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { dimColor: true, children: ["💬 ", agent.getContextLength(), " messages · ~", (() => {
                             const tokens = agent.estimateTokens();
                             return tokens >= 1000 ? `${(tokens / 1000).toFixed(1)}k` : String(tokens);
                         })(), " tokens", modelName ? ` · 🤖 ${modelName}` : ""] }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codemaxxing",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Open-source terminal coding agent. Connect any LLM. Max your code.",
   "main": "dist/index.js",
   "bin": {

package/src/index.tsx

@@ -137,6 +137,8 @@ function App() {
   const [themePickerIndex, setThemePickerIndex] = useState(0);
   const [loginPicker, setLoginPicker] = useState(false);
   const [loginPickerIndex, setLoginPickerIndex] = useState(0);
+  const [loginMethodPicker, setLoginMethodPicker] = useState<{ provider: string; methods: string[] } | null>(null);
+  const [loginMethodIndex, setLoginMethodIndex] = useState(0);
   const [approval, setApproval] = useState<{
     tool: string;
     args: Record<string, unknown>;
@@ -543,77 +545,115 @@ function App() {
       }
     }
 
-    // Login picker navigation
-    if (loginPicker) {
-      const loginProviders = PROVIDERS.filter((p) => p.id !== "local");
+    // Login method picker navigation (second level — pick auth method)
+    if (loginMethodPicker) {
+      const methods = loginMethodPicker.methods;
       if (key.upArrow) {
-        setLoginPickerIndex((prev: number) => (prev - 1 + loginProviders.length) % loginProviders.length);
+        setLoginMethodIndex((prev: number) => (prev - 1 + methods.length) % methods.length);
         return;
       }
       if (key.downArrow) {
-        setLoginPickerIndex((prev: number) => (prev + 1) % loginProviders.length);
+        setLoginMethodIndex((prev: number) => (prev + 1) % methods.length);
+        return;
+      }
+      if (key.escape) {
+        setLoginMethodPicker(null);
+        setLoginPicker(true); // go back to provider picker
         return;
       }
       if (key.return) {
-        const selected = loginProviders[loginPickerIndex];
-        setLoginPicker(false);
+        const method = methods[loginMethodIndex];
+        const providerId = loginMethodPicker.provider;
+        setLoginMethodPicker(null);
 
-        if (selected.id === "openrouter") {
+        if (method === "oauth" && providerId === "openrouter") {
           addMsg("info", "Starting OpenRouter OAuth — opening browser...");
           setLoading(true);
           setSpinnerMsg("Waiting for authorization...");
           openRouterOAuth((msg: string) => addMsg("info", msg))
-            .then((cred) => {
-              addMsg("info", `✅ OpenRouter authenticated! You now have access to 200+ models.`);
-              addMsg("info", `Switch with: /model anthropic/claude-sonnet-4`);
+            .then(() => {
+              addMsg("info", `✅ OpenRouter authenticated! Access to 200+ models.`);
               setLoading(false);
             })
-            .catch((err: any) => {
-              addMsg("error", `OAuth failed: ${err.message}`);
-              setLoading(false);
-            });
-        } else if (selected.id === "anthropic") {
-          addMsg("info", "Starting Anthropic setup-token flow...");
+            .catch((err: any) => { addMsg("error", `OAuth failed: ${err.message}`); setLoading(false); });
+        } else if (method === "setup-token") {
+          addMsg("info", "Starting setup-token flow — browser will open...");
           setLoading(true);
           setSpinnerMsg("Waiting for Claude Code auth...");
           anthropicSetupToken((msg: string) => addMsg("info", msg))
-            .then((cred) => {
-              addMsg("info", `✅ Anthropic authenticated! (${cred.label})`);
-              setLoading(false);
-            })
-            .catch((err: any) => {
-              addMsg("error", `Anthropic auth failed: ${err.message}`);
-              setLoading(false);
-            });
-        } else if (selected.id === "openai") {
+            .then((cred) => { addMsg("info", `✅ Anthropic authenticated! (${cred.label})`); setLoading(false); })
+            .catch((err: any) => { addMsg("error", `Auth failed: ${err.message}`); setLoading(false); });
+        } else if (method === "cached-token" && providerId === "openai") {
           const imported = importCodexToken((msg: string) => addMsg("info", msg));
-          if (imported) {
-            addMsg("info", `✅ Imported Codex credentials! (${imported.label})`);
-          } else {
-            addMsg("info", "No Codex CLI found. Run: codemaxxing auth api-key openai <your-key>");
-          }
-        } else if (selected.id === "qwen") {
+          if (imported) { addMsg("info", `✅ Imported Codex credentials! (${imported.label})`); }
+          else { addMsg("info", "No Codex CLI found. Install Codex CLI and sign in first."); }
+        } else if (method === "cached-token" && providerId === "qwen") {
           const imported = importQwenToken((msg: string) => addMsg("info", msg));
-          if (imported) {
-            addMsg("info", `✅ Imported Qwen credentials! (${imported.label})`);
-          } else {
-            addMsg("info", "No Qwen CLI found. Run: codemaxxing auth api-key qwen <your-key>");
-          }
-        } else if (selected.id === "copilot") {
+          if (imported) { addMsg("info", `✅ Imported Qwen credentials! (${imported.label})`); }
+          else { addMsg("info", "No Qwen CLI found. Install Qwen CLI and sign in first."); }
+        } else if (method === "device-flow") {
           addMsg("info", "Starting GitHub Copilot device flow...");
           setLoading(true);
           setSpinnerMsg("Waiting for GitHub authorization...");
           copilotDeviceFlow((msg: string) => addMsg("info", msg))
-            .then(() => {
-              addMsg("info", `✅ GitHub Copilot authenticated!`);
-              setLoading(false);
-            })
-            .catch((err: any) => {
-              addMsg("error", `Copilot auth failed: ${err.message}`);
-              setLoading(false);
-            });
+            .then(() => { addMsg("info", `✅ GitHub Copilot authenticated!`); setLoading(false); })
+            .catch((err: any) => { addMsg("error", `Copilot auth failed: ${err.message}`); setLoading(false); });
+        } else if (method === "api-key") {
+          const provider = PROVIDERS.find((p) => p.id === providerId);
+          addMsg("info", `Enter your API key via CLI:\n  codemaxxing auth api-key ${providerId} <your-key>\n  Get key at: ${provider?.consoleUrl ?? "your provider's dashboard"}`);
+        }
+        return;
+      }
+      return;
+    }
+
+    // Login picker navigation (first level — pick provider)
+    if (loginPicker) {
+      const loginProviders = PROVIDERS.filter((p) => p.id !== "local");
+      if (key.upArrow) {
+        setLoginPickerIndex((prev: number) => (prev - 1 + loginProviders.length) % loginProviders.length);
+        return;
+      }
+      if (key.downArrow) {
+        setLoginPickerIndex((prev: number) => (prev + 1) % loginProviders.length);
+        return;
+      }
+      if (key.return) {
+        const selected = loginProviders[loginPickerIndex];
+        setLoginPicker(false);
+
+        // Get available methods for this provider (filter out 'none')
+        const methods = selected.methods.filter((m) => m !== "none");
+
+        if (methods.length === 1) {
+          // Only one method — execute it directly
+          setLoginMethodPicker({ provider: selected.id, methods });
+          setLoginMethodIndex(0);
+          // Simulate Enter press on the single method
+          if (methods[0] === "oauth" && selected.id === "openrouter") {
+            setLoginMethodPicker(null);
+            addMsg("info", "Starting OpenRouter OAuth — opening browser...");
+            setLoading(true);
+            setSpinnerMsg("Waiting for authorization...");
+            openRouterOAuth((msg: string) => addMsg("info", msg))
+              .then(() => { addMsg("info", `✅ OpenRouter authenticated! Access to 200+ models.`); setLoading(false); })
+              .catch((err: any) => { addMsg("error", `OAuth failed: ${err.message}`); setLoading(false); });
+          } else if (methods[0] === "device-flow") {
+            setLoginMethodPicker(null);
+            addMsg("info", "Starting GitHub Copilot device flow...");
+            setLoading(true);
+            setSpinnerMsg("Waiting for GitHub authorization...");
+            copilotDeviceFlow((msg: string) => addMsg("info", msg))
+              .then(() => { addMsg("info", `✅ GitHub Copilot authenticated!`); setLoading(false); })
+              .catch((err: any) => { addMsg("error", `Copilot auth failed: ${err.message}`); setLoading(false); });
+          } else if (methods[0] === "api-key") {
+            setLoginMethodPicker(null);
+            addMsg("info", `Enter your API key via CLI:\n  codemaxxing auth api-key ${selected.id} <your-key>\n  Get key at: ${selected.consoleUrl ?? "your provider's dashboard"}`);
+          }
         } else {
-          addMsg("info", `Run: codemaxxing auth api-key ${selected.id} <your-key>\n  Get key at: ${selected.consoleUrl ?? selected.baseUrl}`);
+          // Multiple methods — show submenu
+          setLoginMethodPicker({ provider: selected.id, methods });
+          setLoginMethodIndex(0);
         }
         return;
       }
@@ -855,6 +895,45 @@ function App() {
         </Box>
       )}
 
+      {/* ═══ LOGIN PICKER ═══ */}
+      {loginPicker && (
+        <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>
+          <Text bold color={theme.colors.secondary}>💪 Choose a provider:</Text>
+          {PROVIDERS.filter((p) => p.id !== "local").map((p, i) => (
+            <Text key={p.id}>
+              {i === loginPickerIndex ? <Text color={theme.colors.suggestion} bold>{"▸ "}</Text> : <Text>{"  "}</Text>}
+              <Text color={i === loginPickerIndex ? theme.colors.suggestion : theme.colors.primary} bold>{p.name}</Text>
+              <Text color={theme.colors.muted}>{" — "}{p.description}</Text>
+              {getCredentials().some((c) => c.provider === p.id) ? <Text color={theme.colors.success}> ✓</Text> : null}
+            </Text>
+          ))}
+          <Text dimColor>{"  ↑↓ navigate · Enter select · Esc cancel"}</Text>
+        </Box>
+      )}
+
+      {/* ═══ LOGIN METHOD PICKER ═══ */}
+      {loginMethodPicker && (
+        <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>
+          <Text bold color={theme.colors.secondary}>How do you want to authenticate?</Text>
+          {loginMethodPicker.methods.map((method, i) => {
+            const labels: Record<string, string> = {
+              "oauth": "🌐 Browser login (OAuth)",
+              "setup-token": "🔑 Link subscription (via Claude Code CLI)",
+              "cached-token": "📦 Import from existing CLI",
+              "api-key": "🔒 Enter API key manually",
+              "device-flow": "📱 Device flow (GitHub)",
+            };
+            return (
+              <Text key={method}>
+                {i === loginMethodIndex ? <Text color={theme.colors.suggestion} bold>{"▸ "}</Text> : <Text>{"  "}</Text>}
+                <Text color={i === loginMethodIndex ? theme.colors.suggestion : theme.colors.primary} bold>{labels[method] ?? method}</Text>
+              </Text>
+            );
+          })}
+          <Text dimColor>{"  ↑↓ navigate · Enter select · Esc back"}</Text>
+        </Box>
+      )}
+
       {/* ═══ THEME PICKER ═══ */}
       {themePicker && (
         <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>