@cdoing/cli 0.1.0

package/src/ui/SessionBrowser.tsx

@@ -0,0 +1,161 @@
+/**
+ * SessionBrowser — Interactive TUI for browsing and selecting conversations.
+ *
+ * Triggered by /ls in chat or `cdoing ls` CLI command.
+ * Arrow keys to navigate, Enter to load, d to delete, f to fork, Esc to close.
+ */
+
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import type { Conversation } from "../history";
+import { getTheme } from "./theme";
+
+interface SessionBrowserProps {
+  conversations: Conversation[];
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onFork: (id: string) => void;
+  onClose: () => void;
+}
+
+function formatDate(ts: number): string {
+  const d = new Date(ts);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+export const SessionBrowser: React.FC<SessionBrowserProps> = ({
+  conversations,
+  onSelect,
+  onDelete,
+  onFork,
+  onClose,
+}) => {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+
+  const termHeight = (process.stdout.rows || 24) - 8;
+  const maxVisible = Math.max(5, termHeight);
+
+  // Scroll window
+  const scrollOffset = Math.max(0, selectedIdx - Math.floor(maxVisible / 2));
+  const visible = conversations.slice(scrollOffset, scrollOffset + maxVisible);
+
+  useInput(useCallback((char, key) => {
+    if (confirmDelete) {
+      if (char === "y" || char === "Y") {
+        onDelete(confirmDelete);
+        setConfirmDelete(null);
+        setSelectedIdx((i) => Math.min(i, Math.max(0, conversations.length - 2)));
+      } else {
+        setConfirmDelete(null);
+      }
+      return;
+    }
+
+    if (key.escape) { onClose(); return; }
+
+    if (key.upArrow || (key.ctrl && char === "p")) {
+      setSelectedIdx((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (key.downArrow || (key.ctrl && char === "n")) {
+      setSelectedIdx((i) => Math.min(conversations.length - 1, i + 1));
+      return;
+    }
+    if (key.return && conversations[selectedIdx]) {
+      onSelect(conversations[selectedIdx].id);
+      return;
+    }
+    if (char === "d" && conversations[selectedIdx]) {
+      setConfirmDelete(conversations[selectedIdx].id);
+      return;
+    }
+    if (char === "f" && conversations[selectedIdx]) {
+      onFork(conversations[selectedIdx].id);
+      return;
+    }
+  }, [confirmDelete, conversations, selectedIdx, onSelect, onDelete, onFork, onClose]));
+
+  const t = getTheme();
+
+  if (conversations.length === 0) {
+    return (
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text color={t.accent} bold>  📚 Session Browser</Text>
+        <Text dimColor={t.useDim} color={t.textDim}>  No saved conversations.</Text>
+        <Text dimColor={t.useDim} color={t.textDim}>  Press Esc to close.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      {/* Header */}
+      <Box>
+        <Text color={t.accent} bold>  📚 Sessions </Text>
+        <Text dimColor={t.useDim} color={t.textDim}>{`(${conversations.length} total)`}</Text>
+      </Box>
+      <Text dimColor={t.useDim} color={t.textDim}>  {"─".repeat(60)}</Text>
+
+      {/* Confirm delete */}
+      {confirmDelete ? (
+        <Box paddingLeft={2}>
+          <Text color={t.error}>Delete this session? </Text>
+          <Text color={t.warning}>[y/N] </Text>
+        </Box>
+      ) : null}
+
+      {/* Session list */}
+      {visible.map((conv, i) => {
+        const globalIdx = scrollOffset + i;
+        const isSelected = globalIdx === selectedIdx;
+        const msgCount = conv.messages.filter((m) => m.role === "user").length;
+        const date = formatDate(conv.updatedAt);
+        const title = conv.title.length > 42 ? conv.title.substring(0, 39) + "…" : conv.title;
+
+        return (
+          <Box key={conv.id} paddingLeft={2}>
+            {isSelected ? (
+              <Box>
+                <Text color={t.accent} bold>{"▶ "}</Text>
+                <Text backgroundColor={t.selectedBg} color={t.selected === "white" ? "black" : t.selected}>{` ${title.padEnd(42)} `}</Text>
+                <Text color={t.sessionDate}>{` ${date.padEnd(8)} `}</Text>
+                <Text dimColor={t.useDim} color={t.textDim}>{`${msgCount}msg`}</Text>
+              </Box>
+            ) : (
+              <Box>
+                <Text dimColor={t.useDim} color={t.textDim}>{"  "}</Text>
+                <Text color={t.sessionTitle}>{` ${title.padEnd(42)} `}</Text>
+                <Text dimColor={t.useDim} color={t.textDim}>{` ${date.padEnd(8)} `}</Text>
+                <Text dimColor={t.useDim} color={t.textDim}>{`${msgCount}msg`}</Text>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+
+      {/* Scroll indicator */}
+      {conversations.length > maxVisible ? (
+        <Box paddingLeft={2}>
+          <Text dimColor={t.useDim} color={t.textDim}>
+            {`  ${scrollOffset + 1}–${Math.min(scrollOffset + maxVisible, conversations.length)} of ${conversations.length}`}
+          </Text>
+        </Box>
+      ) : null}
+
+      {/* Footer controls */}
+      <Text dimColor={t.useDim} color={t.textDim}>  {"─".repeat(60)}</Text>
+      <Text dimColor={t.useDim} color={t.textDim}>{"  ↑/↓ navigate  Enter=load  f=fork  d=delete  Esc=close"}</Text>
+    </Box>
+  );
+};

package/src/ui/SetupWizard.tsx

@@ -0,0 +1,412 @@
+/**
+ * SetupWizard — interactive in-TUI wizard for provider / model / API key / OAuth.
+ * Triggered by /setup.  Arrow keys navigate, Enter selects, Esc cancels.
+ *
+ * Flow:
+ *  Anthropic  →  1. Provider  2. Auth method  3. Model (filtered)  4. API key or OAuth
+ *  Others     →  1. Provider  2. Model  3. API key
+ *  Ollama     →  1. Provider  2. Model  (no key needed)
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import { loadConfig, saveConfig } from "../config";
+import { generateOAuthUrl, exchangeOAuthCode } from "../oauth";
+import { getTheme } from "./theme";
+
+// ── Static data ───────────────────────────────────────────────────────────────
+
+const PROVIDERS = [
+  { value: "anthropic", label: "Anthropic (Claude)",  hint: "claude-sonnet-4-6, claude-opus-4-6" },
+  { value: "openai",    label: "OpenAI (GPT)",        hint: "gpt-4o, gpt-4o-mini" },
+  { value: "google",    label: "Google (Gemini)",     hint: "gemini-2.0-flash, gemini-1.5-pro" },
+  { value: "ollama",    label: "Ollama (local)",      hint: "llama3.1, mistral, codellama" },
+];
+
+const AUTH_METHODS = [
+  { value: "apikey", label: "API key",  hint: "all models available · console.anthropic.com" },
+  { value: "oauth",  label: "OAuth",    hint: "Claude Pro/Max · opens browser" },
+];
+
+// All models per provider
+const ALL_MODELS: Record<string, { value: string; label: string; hint: string }[]> = {
+  anthropic: [
+    { value: "claude-sonnet-4-6", label: "Claude Sonnet 4.6", hint: "recommended · fast & smart" },
+    { value: "claude-opus-4-6",   label: "Claude Opus 4.6",   hint: "most capable" },
+    { value: "claude-haiku-4-5",  label: "Claude Haiku 4.5",  hint: "fastest" },
+  ],
+  openai: [
+    { value: "gpt-4o",      label: "GPT-4o",      hint: "recommended" },
+    { value: "gpt-4o-mini", label: "GPT-4o mini", hint: "fastest · cheapest" },
+    { value: "o3-mini",     label: "o3-mini",      hint: "reasoning" },
+  ],
+  google: [
+    { value: "gemini-2.0-flash", label: "Gemini 2.0 Flash", hint: "recommended · fast" },
+    { value: "gemini-1.5-pro",   label: "Gemini 1.5 Pro",   hint: "most capable" },
+    { value: "gemini-1.5-flash", label: "Gemini 1.5 Flash", hint: "fastest" },
+  ],
+  ollama: [
+    { value: "llama3.1",    label: "LLaMA 3.1",   hint: "general purpose" },
+    { value: "mistral",     label: "Mistral",      hint: "fast & capable" },
+    { value: "codellama",   label: "CodeLlama",    hint: "code-focused" },
+    { value: "phi3",        label: "Phi-3",        hint: "small & fast" },
+  ],
+};
+
+// OAuth only supports Haiku currently
+const OAUTH_MODELS = [
+  { value: "claude-haiku-4-5", label: "Claude Haiku 4.5", hint: "only model supported with OAuth" },
+];
+
+const KEY_URLS: Record<string, string> = {
+  anthropic: "https://console.anthropic.com/settings/keys",
+  openai:    "https://platform.openai.com/api-keys",
+  google:    "https://aistudio.google.com/apikey",
+};
+
+type Step =
+  | "provider"
+  | "auth-method"
+  | "model"
+  | "apikey"
+  | "oauth-paste"
+  | "oauth-exchanging"
+  | "done";
+
+// ── Menu sub-component ────────────────────────────────────────────────────────
+
+interface MenuProps<T extends { value: string; label: string; hint?: string }> {
+  title: string;
+  items: T[];
+  selectedIdx: number;
+}
+
+function Menu<T extends { value: string; label: string; hint?: string }>({
+  title,
+  items,
+  selectedIdx,
+}: MenuProps<T>) {
+  const t = getTheme();
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      <Text color={t.accent} bold>{title}</Text>
+      <Text dimColor={t.useDim} color={t.textDim}>{"─".repeat(50)}</Text>
+      {items.map((item, i) => {
+        const isSelected = i === selectedIdx;
+        return (
+          <Box key={item.value}>
+            {isSelected
+              ? <Text color={t.accent} bold>{"  ❯ "}</Text>
+              : <Text dimColor={t.useDim} color={t.textDim}>{"    "}</Text>}
+            {isSelected
+              ? <Text color={t.text} bold>{item.label}</Text>
+              : <Text color={t.text}>{item.label}</Text>}
+            {item.hint
+              ? <Text dimColor={t.useDim} color={t.textDim}>{`  ${item.hint}`}</Text>
+              : null}
+          </Box>
+        );
+      })}
+      <Text dimColor={t.useDim} color={t.textDim}>{"─".repeat(50)}</Text>
+      <Text dimColor={t.useDim} color={t.textDim}>{"↑/↓ navigate  Enter select  Esc cancel"}</Text>
+    </Box>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+export interface SetupWizardProps {
+  currentProvider: string;
+  currentModel: string;
+  onDone: (result: { provider: string; model: string; apiKey?: string; oauthToken?: string }) => void;
+  onCancel: () => void;
+}
+
+export const SetupWizard: React.FC<SetupWizardProps> = ({
+  currentProvider,
+  currentModel,
+  onDone,
+  onCancel,
+}) => {
+  const initProviderIdx = Math.max(0, PROVIDERS.findIndex(p => p.value === currentProvider));
+
+  const [step, setStep]                       = useState<Step>("provider");
+  const [providerIdx, setProviderIdx]         = useState(initProviderIdx);
+  const [authIdx, setAuthIdx]                 = useState(0);
+  const [modelIdx, setModelIdx]               = useState(0);
+  const [chosenProvider, setChosenProvider]   = useState(currentProvider);
+  const [chosenAuthMethod, setChosenAuthMethod] = useState<"apikey" | "oauth">("apikey");
+  const [chosenModel, setChosenModel]         = useState(currentModel);
+  // API key step
+  const [apiKeyInput, setApiKeyInput]         = useState("");
+  const [showKey, setShowKey]                 = useState(false);
+  // OAuth paste step
+  const [oauthUrl, setOauthUrl]               = useState("");
+  const [oauthVerifier, setOauthVerifier]     = useState("");
+  const [oauthCodeInput, setOauthCodeInput]   = useState("");
+  const [showCode, setShowCode]               = useState(false);
+  const [oauthError, setOauthError]           = useState("");
+  const exchangingRef                         = useRef(false);
+
+  // Generate OAuth URL and open browser when entering oauth-paste step
+  useEffect(() => {
+    if (step !== "oauth-paste") return;
+    const { url, codeVerifier } = generateOAuthUrl();
+    setOauthUrl(url);
+    setOauthVerifier(codeVerifier);
+    setOauthCodeInput("");
+    setOauthError("");
+    openBrowser(url);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
+  // Returns the model list for the current provider + auth selection
+  const getModels = useCallback((provider: string, authMethod: "apikey" | "oauth") => {
+    if (provider === "anthropic" && authMethod === "oauth") return OAUTH_MODELS;
+    return ALL_MODELS[provider] || [];
+  }, []);
+
+  useInput(useCallback((char, key) => {
+    if (key.escape) { onCancel(); return; }
+
+    // ── 1. Provider ───────────────────────────────────────────────────────
+    if (step === "provider") {
+      if (key.upArrow)   { setProviderIdx(i => Math.max(0, i - 1)); return; }
+      if (key.downArrow) { setProviderIdx(i => Math.min(PROVIDERS.length - 1, i + 1)); return; }
+      if (key.return) {
+        const p = PROVIDERS[providerIdx].value;
+        setChosenProvider(p);
+        setAuthIdx(0);
+        if (p === "anthropic") {
+          setStep("auth-method");
+        } else {
+          // Non-Anthropic: skip auth-method, go straight to model
+          const models = ALL_MODELS[p] || [];
+          setModelIdx(Math.max(0, models.findIndex(m => m.value === currentModel)));
+          setStep("model");
+        }
+        return;
+      }
+    }
+
+    // ── 2. Auth method (Anthropic only) ───────────────────────────────────
+    if (step === "auth-method") {
+      if (key.upArrow)   { setAuthIdx(i => Math.max(0, i - 1)); return; }
+      if (key.downArrow) { setAuthIdx(i => Math.min(AUTH_METHODS.length - 1, i + 1)); return; }
+      if (key.return) {
+        const auth = AUTH_METHODS[authIdx].value as "apikey" | "oauth";
+        setChosenAuthMethod(auth);
+        const models = getModels("anthropic", auth);
+        // Pre-select current model if available, else 0
+        setModelIdx(Math.max(0, models.findIndex(m => m.value === currentModel)));
+        setStep("model");
+        return;
+      }
+    }
+
+    // ── 3. Model ──────────────────────────────────────────────────────────
+    if (step === "model") {
+      const models = getModels(chosenProvider, chosenAuthMethod);
+      if (key.upArrow)   { setModelIdx(i => Math.max(0, i - 1)); return; }
+      if (key.downArrow) { setModelIdx(i => Math.min(models.length - 1, i + 1)); return; }
+      if (key.return) {
+        const m = models[modelIdx]?.value || "";
+        setChosenModel(m);
+        if (chosenProvider === "ollama") {
+          _save(chosenProvider, m, undefined);
+          onDone({ provider: chosenProvider, model: m });
+          setStep("done");
+        } else if (chosenAuthMethod === "oauth") {
+          exchangingRef.current = false;
+          setStep("oauth-paste");
+        } else {
+          setStep("apikey");
+        }
+        return;
+      }
+    }
+
+    // ── 4a. API key entry ─────────────────────────────────────────────────
+    if (step === "apikey") {
+      if (key.return) {
+        const trimmed = apiKeyInput.trim();
+        _save(chosenProvider, chosenModel, trimmed || undefined);
+        onDone({ provider: chosenProvider, model: chosenModel, apiKey: trimmed || undefined });
+        setStep("done");
+        return;
+      }
+      if (key.backspace || key.delete) { setApiKeyInput(k => k.slice(0, -1)); return; }
+      if (key.ctrl && char === "s")    { setShowKey(v => !v); return; }
+      if (char && !key.ctrl && !key.meta) { setApiKeyInput(k => k + char); return; }
+    }
+
+    // ── 4b. OAuth paste ───────────────────────────────────────────────────
+    if (step === "oauth-paste") {
+      if (key.return) {
+        const code = oauthCodeInput.trim();
+        if (!code || exchangingRef.current) return;
+        exchangingRef.current = true;
+        setStep("oauth-exchanging");
+        exchangeOAuthCode(code, oauthVerifier)
+          .then((tokens) => {
+            _saveOAuth(chosenProvider, chosenModel);
+            setTimeout(() => {
+              onDone({ provider: chosenProvider, model: chosenModel, oauthToken: tokens.access_token });
+            }, 600);
+          })
+          .catch((err: Error) => {
+            exchangingRef.current = false;
+            setOauthError(err.message);
+            setStep("oauth-paste");
+          });
+        return;
+      }
+      if (key.backspace || key.delete) { setOauthCodeInput(k => k.slice(0, -1)); return; }
+      if (key.ctrl && char === "s")    { setShowCode(v => !v); return; }
+      if (char && !key.ctrl && !key.meta) { setOauthCodeInput(k => k + char); return; }
+    }
+  }, [step, providerIdx, authIdx, modelIdx, chosenProvider, chosenAuthMethod,
+      chosenModel, apiKeyInput, oauthCodeInput, oauthVerifier,
+      getModels, onCancel, onDone]));
+
+  // ── Step label helpers ────────────────────────────────────────────────────
+
+  // Total steps: Anthropic=4, Ollama=2, others=3
+  const total = chosenProvider === "anthropic" ? 4 : chosenProvider === "ollama" ? 2 : 3;
+  // Step number depends on flow
+  const stepNum: Record<Step, string> = {
+    "provider":          `1/${total}`,
+    "auth-method":       "2/4",
+    "model":             chosenProvider === "anthropic" ? "3/4" : chosenProvider === "ollama" ? "2/2" : "2/3",
+    "apikey":            chosenProvider === "anthropic" ? "4/4" : "3/3",
+    "oauth-paste":       "4/4",
+    "oauth-exchanging":  "4/4",
+    "done":              "",
+  };
+
+  // ── Renders ───────────────────────────────────────────────────────────────
+
+  if (step === "provider") {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color={getTheme().accent} bold>{`  ⚙  Setup Wizard  (${stepNum.provider} — Provider)`}</Text>
+        <Menu title={"  Choose a provider"} items={PROVIDERS} selectedIdx={providerIdx} />
+      </Box>
+    );
+  }
+
+  if (step === "auth-method") {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color={getTheme().accent} bold>{`  ⚙  Setup Wizard  (${stepNum["auth-method"]} — Authentication)`}</Text>
+        <Menu title={"  How do you want to authenticate?"} items={AUTH_METHODS} selectedIdx={authIdx} />
+      </Box>
+    );
+  }
+
+  if (step === "model") {
+    const models = getModels(chosenProvider, chosenAuthMethod);
+    const title = chosenProvider === "anthropic" && chosenAuthMethod === "oauth"
+      ? "  Choose a model  (OAuth supports Haiku only)"
+      : `  Choose a model for ${chosenProvider}`;
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Text color={getTheme().accent} bold>{`  ⚙  Setup Wizard  (${stepNum.model} — Model)`}</Text>
+        <Menu title={title} items={models} selectedIdx={modelIdx} />
+      </Box>
+    );
+  }
+
+  if (step === "apikey") {
+    const tt = getTheme();
+    const masked = showKey ? apiKeyInput : apiKeyInput.replace(/./g, "●");
+    const url = KEY_URLS[chosenProvider];
+    return (
+      <Box flexDirection="column" paddingY={1} paddingLeft={2}>
+        <Text color={tt.accent} bold>{`  ⚙  Setup Wizard  (${stepNum.apikey} — API Key)`}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"─".repeat(50)}</Text>
+        <Text color={tt.text}>{`  Provider: ${chosenProvider}   Model: ${chosenModel}`}</Text>
+        {url ? <Text dimColor={tt.useDim} color={tt.textDim}>{`  Get a key: ${url}`}</Text> : null}
+        <Text>{" "}</Text>
+        <Box>
+          <Text color={tt.prompt}>{"  API key: "}</Text>
+          <Text color={tt.text}>{masked || " "}</Text>
+          <Text color={tt.cursor}>{"▊"}</Text>
+        </Box>
+        <Text>{" "}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"  Paste key then Enter  ·  Ctrl+S toggle visible  ·  Enter alone to skip"}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"  Esc cancel"}</Text>
+      </Box>
+    );
+  }
+
+  if (step === "oauth-paste") {
+    const tt = getTheme();
+    const maskedCode = showCode ? oauthCodeInput : oauthCodeInput.replace(/./g, "●");
+    return (
+      <Box flexDirection="column" paddingY={1} paddingLeft={2}>
+        <Text color={tt.accent} bold>{`  ⚙  Setup Wizard  (${stepNum["oauth-paste"]} — OAuth)`}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"─".repeat(50)}</Text>
+        <Text color={tt.text}>{"  1. Browser opening to Claude login…"}</Text>
+        {oauthUrl
+          ? <Text dimColor={tt.useDim} color={tt.textDim}>{`     If it didn't open: ${oauthUrl.substring(0, 72)}…`}</Text>
+          : null}
+        <Text color={tt.text}>{"  2. Approve → you'll land on a page with a code in the URL"}</Text>
+        <Text color={tt.text}>{"  3. Copy the code= value from the URL and paste below"}</Text>
+        {oauthError
+          ? <Text color={tt.error}>{`\n  ✗ ${oauthError}`}</Text>
+          : null}
+        <Text>{" "}</Text>
+        <Box>
+          <Text color={tt.prompt}>{"  Code: "}</Text>
+          <Text color={tt.text}>{maskedCode || " "}</Text>
+          <Text color={tt.cursor}>{"▊"}</Text>
+        </Box>
+        <Text>{" "}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"  Paste code then Enter  ·  Ctrl+S toggle visible  ·  Esc cancel"}</Text>
+      </Box>
+    );
+  }
+
+  if (step === "oauth-exchanging") {
+    const tt = getTheme();
+    return (
+      <Box flexDirection="column" paddingY={1} paddingLeft={2}>
+        <Text color={tt.accent} bold>{`  ⚙  Setup Wizard  (${stepNum["oauth-exchanging"]} — OAuth)`}</Text>
+        <Text dimColor={tt.useDim} color={tt.textDim}>{"─".repeat(50)}</Text>
+        <Text color={tt.warning}>{"  Exchanging code for tokens…"}</Text>
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function _save(provider: string, model: string, apiKey: string | undefined) {
+  const config = loadConfig();
+  config.provider = provider;
+  config.model = model || undefined;
+  if (apiKey) {
+    config.apiKeys = config.apiKeys || {};
+    config.apiKeys[provider] = apiKey;
+  }
+  saveConfig(config);
+}
+
+/** OAuth: save provider/model only — token is already in keychain via exchangeOAuthCode */
+function _saveOAuth(provider: string, model: string) {
+  const config = loadConfig();
+  config.provider = provider;
+  config.model = model || undefined;
+  saveConfig(config);
+}
+
+function openBrowser(url: string): void {
+  const { exec } = require("child_process") as typeof import("child_process");
+  const cmd = process.platform === "darwin" ? `open "${url}"`
+    : process.platform === "win32" ? `start "" "${url}"`
+    : `xdg-open "${url}"`;
+  exec(cmd, () => {});
+}

package/src/ui/Spinner.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import { getTheme } from "./theme";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const INTERVAL_MS = 80;
+
+// Blinking dot frames: pulsing dots for "thinking"
+const DOT_FRAMES = ["   ", "·  ", "·· ", "···", " ··", "  ·", "   "];
+const DOT_INTERVAL_MS = 200;
+
+interface SpinnerProps {
+  label: string;
+  color?: string;
+  startTime?: number; // show elapsed time if provided
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  label,
+  color,
+  startTime,
+}) => {
+  const t = getTheme();
+  const spinnerColor = color || t.spinner;
+  const [dotFrame, setDotFrame] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setDotFrame((f) => (f + 1) % DOT_FRAMES.length);
+      if (startTime) {
+        setElapsed(Math.floor((Date.now() - startTime) / 1000));
+      }
+    }, DOT_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [startTime]);
+
+  const elapsedStr = startTime && elapsed > 0 ? ` (${elapsed}s)` : "";
+
+  return (
+    <Box paddingLeft={2}>
+      <Text color={spinnerColor as any}>{label}</Text>
+      <Text color={spinnerColor as any}>{DOT_FRAMES[dotFrame]}</Text>
+      <Text color={t.elapsed} dimColor={t.useDim}>{elapsedStr}</Text>
+    </Box>
+  );
+};
+
+interface ToolSpinnerProps {
+  name: string;
+  preview: string;
+  status: "running" | "done" | "error";
+}
+
+const TOOL_ICONS: Record<string, string> = {
+  file_read:       "📖",
+  file_write:      "✏️ ",
+  file_edit:       "🔧",
+  multi_edit:      "🔧",
+  file_delete:     "🗑️",
+  ast_edit:        "🌳",
+  notebook_edit:   "📓",
+  glob_search:     "🔍",
+  grep_search:     "🔎",
+  codebase_search: "🔎",
+  shell_exec:      "💻",
+  file_run:        "▶",
+  web_fetch:       "🌐",
+  web_search:      "🔮",
+  sub_agent:       "🤖",
+  todo:            "📋",
+  list_dir:        "📁",
+  view_diff:       "📊",
+  view_repo_map:   "🗺️",
+  code_verify:     "✅",
+  system_info:     "ℹ️",
+};
+
+export const ToolSpinner: React.FC<ToolSpinnerProps> = ({ name, preview, status }) => {
+  const t = getTheme();
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    if (status !== "running") return;
+    const id = setInterval(() => setFrame((f) => (f + 1) % FRAMES.length), INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [status]);
+
+  const icon = TOOL_ICONS[name] || "⚡";
+  const spinner = status === "running" ? FRAMES[frame] + " " : "";
+  const color =
+    status === "error" ? t.toolError : status === "done" ? t.toolDone : t.toolRunning;
+  const statusMark =
+    status === "done" ? "✓ " : status === "error" ? "✗ " : spinner;
+
+  return (
+    <Box paddingLeft={2}>
+      <Text color={color as any}>{statusMark}{icon} </Text>
+      <Text color={color as any}>{name}</Text>
+      {preview ? <Text color={t.toolPreview} dimColor={t.useDim}>{"  " + preview.slice(0, 55)}</Text> : null}
+    </Box>
+  );
+};