@cdoing/opentuicli 0.1.6 → 0.1.19

package/src/components/setup-wizard.tsx

@@ -16,64 +16,68 @@ import { TextAttributes } from "@opentui/core";
 import { useState, useRef, useEffect } from "react";
 import { useKeyboard } from "@opentui/react";
 import { useTheme } from "../context/theme";
+import { getProviders } from "@cdoing/ai";
+import { getOAuthProvider, supportsOAuth } from "@cdoing/core";
 
 export interface SetupWizardProps {
   onComplete: (config: { provider: string; model: string; apiKey?: string; oauthToken?: string }) => void;
   onClose: () => void;
 }
 
-const PROVIDERS = [
-  { id: "anthropic", name: "Anthropic (Claude)", hint: "Claude Sonnet, Opus, Haiku" },
-  { id: "openai", name: "OpenAI", hint: "GPT-4o, o3" },
-  { id: "google", name: "Google AI", hint: "Gemini 2.0 Flash, 2.5 Pro" },
-  { id: "ollama", name: "Ollama (Local)", hint: "No API key needed" },
-];
+// ── Data from centralized catalog ─────────────────────────────────────────────
+
+const _catalog = getProviders();
+
+const PROVIDERS = _catalog.map((p: { id: string; label: string; hint: string }) => ({
+  id: p.id,
+  name: p.label,
+  hint: p.hint,
+}));
 
 const AUTH_METHODS = [
   { id: "apikey", name: "API Key", hint: "all models available - console.anthropic.com" },
   { id: "oauth", name: "OAuth", hint: "Claude Pro/Max - opens browser" },
 ];
 
-const MODELS: Record<string, { id: string; name: string; hint?: string }[]> = {
-  anthropic: [
-    { id: "claude-sonnet-4-6", name: "Claude Sonnet 4.6", hint: "recommended - fast & smart" },
-    { id: "claude-opus-4-6", name: "Claude Opus 4.6", hint: "most capable" },
-    { id: "claude-haiku-4-5-20251001", name: "Claude Haiku 4.5", hint: "fastest" },
-  ],
-  openai: [
-    { id: "gpt-4o", name: "GPT-4o", hint: "recommended" },
-    { id: "gpt-4o-mini", name: "GPT-4o mini", hint: "fastest" },
-    { id: "o3", name: "o3", hint: "reasoning" },
-  ],
-  google: [
-    { id: "gemini-2.0-flash", name: "Gemini 2.0 Flash", hint: "recommended" },
-    { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", hint: "most capable" },
-  ],
-  ollama: [
-    { id: "llama3.1", name: "Llama 3.1", hint: "general purpose" },
-    { id: "codellama", name: "Code Llama", hint: "code-focused" },
-    { id: "mistral", name: "Mistral", hint: "fast & capable" },
-  ],
-};
-
-const OAUTH_MODELS = [
-  { id: "claude-haiku-4-5", name: "Claude Haiku 4.5", hint: "only model supported with OAuth" },
-];
+// All models per provider — from catalog
+const MODELS: Record<string, { id: string; name: string; hint?: string }[]> = {};
+for (const p of _catalog) {
+  MODELS[p.id] = p.models.map((m: { id: string; label: string; hint?: string }) => ({ id: m.id, name: m.label, hint: m.hint }));
+}
 
-const ENV_VARS: Record<string, string> = {
-  anthropic: "ANTHROPIC_API_KEY",
-  openai: "OPENAI_API_KEY",
-  google: "GOOGLE_API_KEY",
-};
+/** Get OAuth models for a provider from core config */
+function getOAuthModels(providerId: string) {
+  const config = getOAuthProvider(providerId);
+  if (!config?.models || config.models.length === 0) {
+    return config?.defaultModel
+      ? [{ id: config.defaultModel, name: config.defaultModel, hint: "OAuth" }]
+      : [];
+  }
+  return config.models.map((m: { id: string; name: string; hint?: string }) => ({ id: m.id, name: m.name, hint: m.hint || "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",
-};
+function providerSupportsOAuth(providerId: string): boolean {
+  return supportsOAuth(providerId);
+}
+
+// Env vars and key URLs from catalog
+const ENV_VARS: Record<string, string> = {};
+const KEY_URLS: Record<string, string> = {};
+for (const p of _catalog as Array<{ id: string; envVar?: string; keyUrl?: string }>) {
+  if (p.envVar) ENV_VARS[p.id] = p.envVar;
+  if (p.keyUrl) KEY_URLS[p.id] = p.keyUrl;
+}
 
 type Step = "provider" | "auth-method" | "model" | "apikey" | "oauth-paste" | "oauth-exchanging";
 
+function readClipboard(): string {
+  try {
+    if (process.platform === "darwin") return execSync("pbpaste", { encoding: "utf-8" });
+    try { return execSync("xclip -selection clipboard -o", { encoding: "utf-8" }); }
+    catch { return execSync("xsel --clipboard --output", { encoding: "utf-8" }); }
+  } catch { return ""; }
+}
+
 function openBrowser(url: string): void {
   try {
     const cmd = process.platform === "darwin" ? `open "${url}"`
@@ -84,9 +88,11 @@ function openBrowser(url: string): void {
 }
 
 export function SetupWizard(props: SetupWizardProps) {
-  const { theme } = useTheme();
+  const { theme, customBg } = useTheme();
   const t = theme;
 
+  const closedRef = useRef(false);
+  const [closed, setClosed] = useState(false);
   const [step, setStep] = useState<Step>("provider");
   const [selectedProvider, setSelectedProvider] = useState(0);
   const [selectedAuth, setSelectedAuth] = useState(0);
@@ -97,6 +103,9 @@ export function SetupWizard(props: SetupWizardProps) {
   const [apiKeyInput, setApiKeyInput] = useState("");
   const [showKey, setShowKey] = useState(false);
   const [error, setError] = useState("");
+  // Custom model input
+  const [customModelInput, setCustomModelInput] = useState("");
+  const [isCustomModel, setIsCustomModel] = useState(false);
 
   // OAuth state
   const [oauthUrl, setOauthUrl] = useState("");
@@ -107,7 +116,7 @@ export function SetupWizard(props: SetupWizardProps) {
   const exchangingRef = useRef(false);
 
   const provider = PROVIDERS[selectedProvider];
-  const models = authMethod === "oauth" ? OAUTH_MODELS : (MODELS[chosenProviderId] || []);
+  const models = authMethod === "oauth" ? getOAuthModels(chosenProviderId) : (MODELS[chosenProviderId] || []);
 
   // Generate OAuth URL when entering oauth-paste step
   useEffect(() => {
@@ -126,21 +135,22 @@ export function SetupWizard(props: SetupWizardProps) {
   }, [step, chosenProviderId]);
 
   useKeyboard((key: any) => {
-    // Escape — go back or close
+    // If already closed, ignore keys
+    if (closedRef.current) return;
+
+    // Escape — close wizard (parent handles navigation to home)
     if (key.name === "escape") {
-      if (step === "oauth-paste" || step === "oauth-exchanging") {
-        setStep("model");
-        setOauthError("");
-      } else if (step === "apikey") {
-        setStep("model");
-        setError("");
-      } else if (step === "model") {
-        setStep(chosenProviderId === "anthropic" ? "auth-method" : "provider");
-      } else if (step === "auth-method") {
-        setStep("provider");
-      } else {
-        props.onClose();
-      }
+      closedRef.current = true;
+      setClosed(true);
+      props.onClose();
+      return;
+    }
+
+    // Ctrl+C — close wizard
+    if (key.ctrl && key.name === "c") {
+      closedRef.current = true;
+      setClosed(true);
+      props.onClose();
       return;
     }
 
@@ -154,7 +164,7 @@ export function SetupWizard(props: SetupWizardProps) {
         const p = PROVIDERS[selectedProvider];
         setChosenProviderId(p.id);
         setSelectedModel(0);
-        if (p.id === "anthropic") {
+        if (providerSupportsOAuth(p.id)) {
           setSelectedAuth(0);
           setStep("auth-method");
         } else {
@@ -165,7 +175,7 @@ export function SetupWizard(props: SetupWizardProps) {
       return;
     }
 
-    // ── Step 2: Auth method (Anthropic only) ──
+    // ── Step 2: Auth method (any OAuth-capable provider) ──
     if (step === "auth-method") {
       if (key.name === "up" || key.name === "k") {
         setSelectedAuth((s) => Math.max(0, s - 1));
@@ -180,13 +190,50 @@ export function SetupWizard(props: SetupWizardProps) {
       return;
     }
 
-    // ── Step 3: Model ──
+    // ── Step 3: Model (presets + custom input) ──
     if (step === "model") {
+      // Custom model text input mode
+      if (isCustomModel) {
+        if (key.name === "return") {
+          const m = customModelInput.trim();
+          if (!m) return;
+          setChosenModelId(m);
+          if (chosenProviderId === "ollama") {
+            saveAndComplete(chosenProviderId, m, undefined);
+          } else if (authMethod === "oauth") {
+            exchangingRef.current = false;
+            setStep("oauth-paste");
+          } else {
+            setStep("apikey");
+            setApiKeyInput("");
+            setError("");
+          }
+        } else if ((key.ctrl || key.meta) && key.name === "v") {
+          const clip = readClipboard().trim();
+          if (clip) setCustomModelInput((s) => s + clip);
+        } else if (key.name === "backspace") {
+          setCustomModelInput((s) => s.slice(0, -1));
+        } else if (key.ctrl && key.name === "u") {
+          setCustomModelInput("");
+        } else if (key.sequence && !key.ctrl && !key.meta) {
+          setCustomModelInput((s) => s + key.sequence);
+        }
+        return;
+      }
+
+      // Preset selection with "Custom..." at bottom
+      const totalItems = models.length + 1;
       if (key.name === "up" || key.name === "k") {
         setSelectedModel((s) => Math.max(0, s - 1));
       } else if (key.name === "down" || key.name === "j") {
-        setSelectedModel((s) => Math.min(models.length - 1, s + 1));
+        setSelectedModel((s) => Math.min(totalItems - 1, s + 1));
       } else if (key.name === "return") {
+        if (selectedModel === models.length) {
+          // Selected "Custom model..."
+          setIsCustomModel(true);
+          setCustomModelInput("");
+          return;
+        }
         const m = models[selectedModel];
         setChosenModelId(m.id);
         if (chosenProviderId === "ollama") {
@@ -211,6 +258,9 @@ export function SetupWizard(props: SetupWizardProps) {
           return;
         }
         saveAndComplete(chosenProviderId, chosenModelId, apiKeyInput.trim());
+      } else if ((key.ctrl || key.meta) && key.name === "v") {
+        const clip = readClipboard().trim();
+        if (clip) { setApiKeyInput((s) => s + clip); setError(""); }
       } else if (key.ctrl && key.name === "s") {
         setShowKey((s) => !s);
       } else if (key.name === "backspace") {
@@ -219,7 +269,7 @@ export function SetupWizard(props: SetupWizardProps) {
       } else if (key.ctrl && key.name === "u") {
         setApiKeyInput("");
         setError("");
-      } else if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+      } else if (key.sequence && !key.ctrl && !key.meta) {
         setApiKeyInput((s) => s + key.sequence);
         setError("");
       }
@@ -256,7 +306,10 @@ export function SetupWizard(props: SetupWizardProps) {
         }
         return;
       }
-      if (key.ctrl && key.name === "s") {
+      if ((key.ctrl || key.meta) && key.name === "v") {
+        const clip = readClipboard().trim();
+        if (clip) { setOauthCodeInput((s) => s + clip); setOauthError(""); }
+      } else if (key.ctrl && key.name === "s") {
         setShowCode((s) => !s);
       } else if (key.name === "backspace") {
         setOauthCodeInput((s) => s.slice(0, -1));
@@ -264,7 +317,7 @@ export function SetupWizard(props: SetupWizardProps) {
       } else if (key.ctrl && key.name === "u") {
         setOauthCodeInput("");
         setOauthError("");
-      } else if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+      } else if (key.sequence && !key.ctrl && !key.meta) {
         setOauthCodeInput((s) => s + key.sequence);
         setOauthError("");
       }
@@ -311,10 +364,15 @@ export function SetupWizard(props: SetupWizardProps) {
     }
   };
 
+  // Workaround: OpenTUI doesn't re-render parent on setDialog("none"),
+  // so we hide the wizard internally when closed
+  if (closed) return <box><text>{""}</text></box>;
+
   return (
     <box
       borderStyle="single"
       borderColor={t.primary}
+      backgroundColor={customBg || t.bg}
       paddingX={2}
       paddingY={1}
       flexDirection="column"
@@ -332,7 +390,7 @@ export function SetupWizard(props: SetupWizardProps) {
             {`Step ${stepLabel("provider")}: Select Provider`}
           </text>
           <text>{""}</text>
-          {PROVIDERS.map((p, i) => (
+          {PROVIDERS.map((p: { id: string; name: string; hint: string }, i: number) => (
             <text
               key={p.id}
               fg={selectedProvider === i ? t.primary : t.textMuted}
@@ -368,15 +426,15 @@ export function SetupWizard(props: SetupWizardProps) {
       )}
 
       {/* Step 3: Model */}
-      {step === "model" && (
+      {step === "model" && !isCustomModel && (
         <box flexDirection="column">
           <text fg={t.text} attributes={TextAttributes.BOLD}>
             {authMethod === "oauth"
-              ? `Step ${stepLabel("model")}: Select Model (OAuth supports Haiku only)`
+              ? `Step ${stepLabel("model")}: Select Model (OAuth — ${provider.name})`
               : `Step ${stepLabel("model")}: Select Model (${provider.name})`}
           </text>
           <text>{""}</text>
-          {models.map((m, i) => (
+          {models.map((m: { id: string; name: string; hint?: string }, i: number) => (
             <text
               key={m.id}
               fg={selectedModel === i ? t.primary : t.textMuted}
@@ -385,11 +443,32 @@ export function SetupWizard(props: SetupWizardProps) {
               {`  ${selectedModel === i ? ">" : " "} ${m.name}${m.hint ? `  ${m.hint}` : ""}`}
             </text>
           ))}
+          <text
+            fg={selectedModel === models.length ? t.primary : t.textMuted}
+            attributes={selectedModel === models.length ? TextAttributes.BOLD : undefined}
+          >
+            {`  ${selectedModel === models.length ? ">" : " "} Custom model...  type any model name`}
+          </text>
           <text>{""}</text>
           <text fg={t.textMuted}>{"  Up/Down Navigate  Enter Select  Esc Back"}</text>
         </box>
       )}
 
+      {/* Step 3b: Custom model input */}
+      {step === "model" && isCustomModel && (
+        <box flexDirection="column">
+          <text fg={t.text} attributes={TextAttributes.BOLD}>
+            {`Step ${stepLabel("model")}: Custom Model (${provider.name})`}
+          </text>
+          <text>{""}</text>
+          <text fg={t.text}>
+            {`  > ${customModelInput}|`}
+          </text>
+          <text>{""}</text>
+          <text fg={t.textMuted}>{"  Type model ID then Enter  Esc Back"}</text>
+        </box>
+      )}
+
       {/* Step 4a: API key */}
       {step === "apikey" && (
         <box flexDirection="column">
@@ -416,7 +495,7 @@ export function SetupWizard(props: SetupWizardProps) {
             <text fg={t.error}>{`\n  ${error}`}</text>
           )}
           <text>{""}</text>
-          <text fg={t.textMuted}>{"  Enter Save  Ctrl+S Toggle visibility  Ctrl+U Clear  Esc Back"}</text>
+          <text fg={t.textMuted}>{"  Enter Save  Ctrl+V Paste  Ctrl+S Toggle visibility  Ctrl+U Clear  Esc Back"}</text>
         </box>
       )}
 
@@ -444,7 +523,7 @@ export function SetupWizard(props: SetupWizardProps) {
             {`  Code: ${showCode ? oauthCodeInput : oauthCodeInput.replace(/./g, "*")}|`}
           </text>
           <text>{""}</text>
-          <text fg={t.textMuted}>{"  Paste code then Enter  Ctrl+S Toggle visible  Esc Cancel"}</text>
+          <text fg={t.textMuted}>{"  Ctrl+V Paste  Enter Submit  Ctrl+S Toggle visible  Esc Cancel"}</text>
         </box>
       )}
 

package/src/components/sidebar.tsx

@@ -98,32 +98,85 @@ export function Sidebar(props: SidebarProps) {
     sep();
   }
 
+  // ── LSP ──
+  header("LSP");
+  row("", "LSPs will activate as files are read");
+  sep();
+
   // ── Shortcuts ──
   header("Shortcuts");
-  shortcut("Ctrl+B", "Sidebar");
-  shortcut("Ctrl+N", "New session");
-  shortcut("Ctrl+P", "Model");
+  shortcut("Ctrl+P", "Commands");
+  shortcut("Ctrl+O", "Model");
   shortcut("Ctrl+T", "Theme");
+  shortcut("Ctrl+N", "New session");
   shortcut("Ctrl+S", "Sessions");
-  shortcut("Ctrl+X", "Commands");
+  shortcut("Ctrl+B", "Sidebar");
   shortcut("F1", "Help");
 
+  // ── Getting started card ──
+  const cardW = W - 2;
+  const cardLines: Array<{ text: string; fg: any; bold?: boolean }> = [];
+  cardLines.push({ text: `  ◆ Getting started`, fg: t.primary, bold: true });
+  cardLines.push({ text: ``, fg: t.textDim });
+  cardLines.push({ text: `  Cdoing includes free models`, fg: t.textMuted });
+  cardLines.push({ text: `  so you can start immediately.`, fg: t.textMuted });
+  cardLines.push({ text: ``, fg: t.textDim });
+  cardLines.push({ text: `  Connect from 75+ providers to`, fg: t.textMuted });
+  cardLines.push({ text: `  use other models, including`, fg: t.textMuted });
+  cardLines.push({ text: `  Claude, GPT, Gemini etc`, fg: t.textMuted });
+  cardLines.push({ text: ``, fg: t.textDim });
+  cardLines.push({ text: `  Connect provider      /setup`, fg: t.text, bold: true });
+
   return (
-    <box width={W + 2} flexDirection="column">
+    <box width={W + 2} flexDirection="column" backgroundColor={t.bgSubtle}>
       <box flexDirection="column" flexGrow={1}>
         {lines.map((line, i) => (
-          <text
-            key={i}
-            fg={line.fg}
-            attributes={line.bold ? TextAttributes.BOLD : undefined}
-          >
-            {line.text}
-          </text>
+          <box key={i} height={1}>
+            <text
+              fg={line.fg}
+              attributes={line.bold ? TextAttributes.BOLD : undefined}
+            >
+              {line.text}
+            </text>
+          </box>
         ))}
-        {/* Fill remaining space with border */}
+        {/* Fill remaining space */}
         <box flexGrow={1}>
           <text fg={t.border}>{"│"}</text>
         </box>
+        {/* Getting started card at bottom */}
+        <box flexDirection="column" paddingX={1}>
+          <box height={1}>
+            <text fg={t.border}>{"┌" + "─".repeat(cardW) + "┐"}</text>
+          </box>
+          {cardLines.map((cl, i) => (
+            <box key={`card-${i}`} height={1}>
+              <text fg={t.border}>{"│"}</text>
+              <text fg={cl.fg} attributes={cl.bold ? TextAttributes.BOLD : undefined}>
+                {cl.text.padEnd(cardW)}
+              </text>
+              <text fg={t.border}>{"│"}</text>
+            </box>
+          ))}
+          <box height={1}>
+            <text fg={t.border}>{"└" + "─".repeat(cardW) + "┘"}</text>
+          </box>
+        </box>
+        {/* Working dir + version footer */}
+        <box height={1} paddingX={1}>
+          <text fg={t.textDim}>
+            {trunc((() => {
+              const home = process.env.HOME || "";
+              return home && props.workingDir.startsWith(home)
+                ? "~" + props.workingDir.slice(home.length) : props.workingDir;
+            })(), W - 2)}
+          </text>
+        </box>
+        <box height={1} paddingX={1}>
+          <text fg={t.success}>{"● "}</text>
+          <text fg={t.text} attributes={TextAttributes.BOLD}>{"Cdoing"}</text>
+          <text fg={t.textDim}>{" Agent"}</text>
+        </box>
       </box>
     </box>
   );

package/src/components/status-bar.tsx

@@ -33,7 +33,7 @@ export function StatusBar(props: StatusBarProps) {
   const contextBar = pct > 0 ? ` ctx:${pct}%` : "";
 
   return (
-    <box height={1} flexDirection="row" justifyContent="space-between">
+    <box height={1} flexDirection="row" justifyContent="space-between" backgroundColor={t.bgSubtle}>
       <box flexDirection="row">
         <text fg={t.primary} attributes={TextAttributes.BOLD}>
           {` ${props.provider}`}
@@ -69,7 +69,7 @@ export function StatusBar(props: StatusBarProps) {
       <box flexDirection="row">
         <text fg={t.textDim}>{shortDir}</text>
         <text fg={t.textDim}>{" │ "}</text>
-        <text fg={t.textMuted}>{"^N:New ^P:Model ^C:Quit"}</text>
+        <text fg={t.textMuted}>{"^P:Commands  ^O:Model  ^C:Quit"}</text>
       </box>
     </box>
   );

package/src/context/theme.tsx

@@ -13,6 +13,7 @@
 import { RGBA, rgbToHex, SyntaxStyle } from "@opentui/core";
 import { createContext, useContext, useState, useEffect, useRef, useMemo } from "react";
 import type { ReactNode } from "react";
+import { useSettingsStore } from "../store/settings";
 
 export interface Theme {
   text: RGBA;
@@ -274,6 +275,110 @@ export const THEMES: Record<string, ThemeDef> = {
       warning: "#b88d00", info: "#0090a0", border: "#d0d0d0",
     }),
   },
+  kanagawa: {
+    name: "Kanagawa",
+    dark: buildTheme({
+      bg: "#1F1F28", bgSubtle: "#2A2A37", text: "#DCD7BA", textMuted: "#727169", textDim: "#54546D",
+      primary: "#7E9CD8", secondary: "#957FB8", success: "#98BB6C", error: "#E82424",
+      warning: "#D7A657", info: "#76946A", border: "#54546D",
+    }),
+    light: buildTheme({
+      bg: "#F2E9DE", bgSubtle: "#EAE4D7", text: "#54433A", textMuted: "#9E9389", textDim: "#B8AFA6",
+      primary: "#2D4F67", secondary: "#957FB8", success: "#98BB6C", error: "#E82424",
+      warning: "#D7A657", info: "#76946A", border: "#D4CBBF",
+    }),
+  },
+  nightowl: {
+    name: "Night Owl",
+    dark: buildTheme({
+      bg: "#011627", bgSubtle: "#0b2942", text: "#d6deeb", textMuted: "#637777", textDim: "#44596b",
+      primary: "#82aaff", secondary: "#c792ea", success: "#addb67", error: "#ef5350",
+      warning: "#ffcb8b", info: "#7fdbca", border: "#1d3b53",
+    }),
+    light: buildTheme({
+      bg: "#fbfbfb", bgSubtle: "#f0f0f0", text: "#403f53", textMuted: "#989fb1", textDim: "#c0c0c0",
+      primary: "#4876d6", secondary: "#994cc3", success: "#4d804e", error: "#de3d3b",
+      warning: "#e0af68", info: "#0c969b", border: "#d9d9d9",
+    }),
+  },
+  onedark: {
+    name: "One Dark",
+    dark: buildTheme({
+      bg: "#282c34", bgSubtle: "#2c313c", text: "#abb2bf", textMuted: "#636d83", textDim: "#4b5263",
+      primary: "#61afef", secondary: "#c678dd", success: "#98c379", error: "#e06c75",
+      warning: "#e5c07b", info: "#56b6c2", border: "#3e4451",
+    }),
+    light: buildTheme({
+      bg: "#fafafa", bgSubtle: "#f0f0f0", text: "#383a42", textMuted: "#a0a1a7", textDim: "#c0c0c0",
+      primary: "#4078f2", secondary: "#a626a4", success: "#50a14f", error: "#e45649",
+      warning: "#c18401", info: "#0184bc", border: "#d3d3d3",
+    }),
+  },
+  matrix: {
+    name: "Matrix",
+    dark: buildTheme({
+      bg: "#0a0e0a", bgSubtle: "#0e130d", text: "#62ff94", textMuted: "#8ca391", textDim: "#3d4a44",
+      primary: "#2eff6a", secondary: "#00efff", success: "#62ff94", error: "#ff4b4b",
+      warning: "#e6ff57", info: "#30b3ff", border: "#1e2a1b",
+    }),
+    light: buildTheme({
+      bg: "#eef3ea", bgSubtle: "#e4ebe1", text: "#203022", textMuted: "#748476", textDim: "#a0b0a5",
+      primary: "#1cc24b", secondary: "#24f6d9", success: "#1cc24b", error: "#ff4b4b",
+      warning: "#e6ff57", info: "#30b3ff", border: "#748476",
+    }),
+  },
+  flexoki: {
+    name: "Flexoki",
+    dark: buildTheme({
+      bg: "#100f0f", bgSubtle: "#1c1b1a", text: "#cecdc3", textMuted: "#878580", textDim: "#575653",
+      primary: "#4385be", secondary: "#8b7ec8", success: "#879a39", error: "#d14d41",
+      warning: "#da702c", info: "#3aa99f", border: "#343331",
+    }),
+    light: buildTheme({
+      bg: "#fffcf0", bgSubtle: "#f2f0e5", text: "#100f0f", textMuted: "#878580", textDim: "#b7b5ac",
+      primary: "#205ea6", secondary: "#5e409d", success: "#66800b", error: "#af3029",
+      warning: "#bc5215", info: "#24837b", border: "#e6e4d9",
+    }),
+  },
+  cursor: {
+    name: "Cursor",
+    dark: buildTheme({
+      bg: "#1e1e1e", bgSubtle: "#252526", text: "#d4d4d4", textMuted: "#808080", textDim: "#5a5a5a",
+      primary: "#007acc", secondary: "#c586c0", success: "#6a9955", error: "#f44747",
+      warning: "#cca700", info: "#4ec9b0", border: "#333333",
+    }),
+    light: buildTheme({
+      bg: "#ffffff", bgSubtle: "#f3f3f3", text: "#1e1e1e", textMuted: "#808080", textDim: "#b0b0b0",
+      primary: "#007acc", secondary: "#af00db", success: "#388a34", error: "#cd3131",
+      warning: "#bf8803", info: "#16825d", border: "#e5e5e5",
+    }),
+  },
+  vercel: {
+    name: "Vercel",
+    dark: buildTheme({
+      bg: "#000000", bgSubtle: "#111111", text: "#ededed", textMuted: "#888888", textDim: "#444444",
+      primary: "#ffffff", secondary: "#888888", success: "#0070f3", error: "#ee0000",
+      warning: "#f5a623", info: "#0070f3", border: "#333333",
+    }),
+    light: buildTheme({
+      bg: "#ffffff", bgSubtle: "#fafafa", text: "#000000", textMuted: "#666666", textDim: "#999999",
+      primary: "#000000", secondary: "#666666", success: "#0070f3", error: "#ee0000",
+      warning: "#f5a623", info: "#0070f3", border: "#eaeaea",
+    }),
+  },
+  "osaka-jade": {
+    name: "Osaka Jade",
+    dark: buildTheme({
+      bg: "#111c18", bgSubtle: "#1a2520", text: "#C1C497", textMuted: "#53685B", textDim: "#3d4a44",
+      primary: "#2DD5B7", secondary: "#D2689C", success: "#549e6a", error: "#FF5345",
+      warning: "#E5C736", info: "#2DD5B7", border: "#3d4a44",
+    }),
+    light: buildTheme({
+      bg: "#F6F5DD", bgSubtle: "#E8E7CC", text: "#111c18", textMuted: "#53685B", textDim: "#A8A78C",
+      primary: "#1faa90", secondary: "#a8527a", success: "#3d7a52", error: "#c7392d",
+      warning: "#b5a020", info: "#1faa90", border: "#A8A78C",
+    }),
+  },
 };
 
 /** Get sorted list of theme IDs */
@@ -439,7 +544,7 @@ export function ThemeProvider(props: {
       : props.mode === "auto" ? (props.detectedMode || "dark")
         : "dark";
 
-  const initialThemeId = props.themeId || "default";
+  const initialThemeId = props.themeId || "vercel";
 
   const [themeId, setThemeIdState] = useState(initialThemeId);
   const [currentMode, setCurrentMode] = useState<"dark" | "light">(initialMode);
@@ -473,6 +578,7 @@ export function ThemeProvider(props: {
     const colors = getThemeColors(id, modeRef.current);
     setTheme(colors);
     applyTerminalBg(colors);
+    useSettingsStore.getState().setThemeId(id);
   };
 
   const setMode = (m: "dark" | "light") => {
@@ -481,6 +587,7 @@ export function ThemeProvider(props: {
     const colors = getThemeColors(themeIdRef.current, m);
     setTheme(colors);
     applyTerminalBg(colors);
+    useSettingsStore.getState().setMode(m);
   };
 
   const setCustomBg = (hex: string | null) => {
@@ -503,6 +610,7 @@ export function ThemeProvider(props: {
     } else {
       restoreTerminalBackground();
     }
+    useSettingsStore.getState().setSyncTerminalBg(sync);
   };
 
   // Sync terminal bg on mount — force it immediately

package/src/lib/autocomplete.ts

@@ -31,7 +31,11 @@ export const SLASH_COMMANDS: SlashCommand[] = [
   { name: "/view", description: "View a conversation" },
   { name: "/fork", description: "Fork current conversation" },
   { name: "/delete", description: "Delete a conversation" },
-  { name: "/plan", description: "Toggle plan mode" },
+  { name: "/plan", description: "Plan mode (approve/reject/show/off)" },
+  { name: "/plan approve", description: "Approve plan and start building" },
+  { name: "/plan reject", description: "Reject plan" },
+  { name: "/plan show", description: "Show current plan" },
+  { name: "/plan off", description: "Cancel plan mode" },
   { name: "/tasks", description: "Show active tasks" },
   { name: "/memory", description: "Show agent memory" },
   { name: "/permissions", description: "Show permission rules" },