@cdoing/opentuicli 0.1.2 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdoing/opentuicli",
-  "version": "0.1.2",
+  "version": "0.1.18",
   "description": "OpenTUI-based terminal interface for cdoing agent (inspired by opencode's TUI)",
   "type": "module",
   "main": "dist/index.js",
@@ -22,7 +22,8 @@
     "@opentui/react": "0.1.87",
     "chalk": "^4.1.2",
     "commander": "^13.1.0",
-    "react": "^19.1.0"
+    "react": "^19.1.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@types/node": "^22.13.10",
@@ -30,5 +31,6 @@
     "esbuild": "^0.25.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.8.2"
-  }
+  },
+  "license": "Apache-2.0"
 }

package/src/app.tsx

@@ -8,7 +8,7 @@
  *   - Session browser overlay (Ctrl+S)
  *   - Setup wizard overlay (/setup)
  *   - Keyboard-driven navigation
- *   - Model picker dialog (Ctrl+P)
+ *   - Command palette (Ctrl+P)
  *   - Theme support (dark/light/auto)
  *   - Status bar with token counts and context %
  */
@@ -17,13 +17,18 @@ import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
 import { createRoot, useKeyboard, useTerminalDimensions } from "@opentui/react";
-import { createCliRenderer, TextAttributes } from "@opentui/core";
+import { createCliRenderer, TextAttributes, RGBA } from "@opentui/core";
 import { useState, useRef, useCallback } from "react";
 import {
   ToolRegistry,
   PermissionManager,
   PermissionMode,
+  ProcessManager,
+  TodoStore,
+  MemoryStore,
   registerAllTools,
+  resolveOAuthToken,
+  supportsOAuth,
 } from "@cdoing/core";
 import { AgentRunner, getDefaultModel, getApiKeyEnvVar } from "@cdoing/ai";
 import type { ModelConfig } from "@cdoing/ai";
@@ -31,6 +36,7 @@ import type { ModelConfig } from "@cdoing/ai";
 import { ThemeProvider, useTheme, detectTerminalTheme, restoreTerminalBackground, getThemeColors, setTerminalBackground } from "./context/theme";
 import { SDKProvider } from "./context/sdk";
 import { ToastProvider } from "./components/toast";
+import { useSettingsStore } from "./store/settings";
 import { Home } from "./routes/home";
 import { SessionView } from "./routes/session";
 import { StatusBar } from "./components/status-bar";
@@ -74,19 +80,32 @@ function AppShell(props: {
   permissionManager: PermissionManager;
 }) {
   const dims = useTerminalDimensions();
-  const { theme, themeId, setMode, setThemeId } = useTheme();
+  const { theme, themeId, customBg, setMode, setThemeId } = useTheme();
   const t = theme;
 
   const [route, setRoute] = useState<Route>(props.options.prompt ? "session" : "home");
   const [dialog, setDialog] = useState<Dialog>("none");
   const [status, setStatus] = useState("Ready");
-  const [provider, setProvider] = useState(props.options.provider);
-  const [model, setModel] = useState(props.options.model || getDefaultModel(props.options.provider) || "default");
   const [workingDir, setWorkingDir] = useState(props.options.workingDir);
   const [tokens, setTokens] = useState<{ input: number; output: number } | undefined>();
   const [contextPercent, setContextPercent] = useState(0);
   const [activeTool, setActiveTool] = useState<string | undefined>();
-  const [showSidebar, setShowSidebar] = useState(true);
+
+  // Persisted settings from Zustand store
+  const provider = useSettingsStore((s) => s.provider);
+  const model = useSettingsStore((s) => s.model);
+  const sidebarMode = useSettingsStore((s) => s.sidebarMode);
+  const setProvider = useSettingsStore((s) => s.setProvider);
+  const setModel = useSettingsStore((s) => s.setModel);
+  const setSidebarMode = useSettingsStore((s) => s.setSidebarMode);
+
+  // Auto-hide sidebar when terminal is too narrow (like opencode: > 120 cols)
+  const wide = dims.width > 120;
+  const showSidebar = sidebarMode === "show" || (sidebarMode === "auto" && wide);
+
+  const closeDialog = useCallback(() => {
+    setDialog("none");
+  }, []);
 
   // Mutable refs for agent rebuild
   const agentRef = useRef(props.agent);
@@ -119,11 +138,34 @@ function AppShell(props: {
   });
 
   // ── Agent Rebuild ──────────────────────────────────
-  const rebuildAgent = useCallback((newProvider: string, newModel: string, apiKey?: string) => {
-    // Resolve API key
+  const rebuildAgent = useCallback((newProvider: string, newModel: string, apiKey?: string, oauthToken?: string) => {
+    // Resolve API key or OAuth token
     // If apiKey is explicitly "" (empty string), it means logout — skip all fallbacks
     let resolvedKey = apiKey;
-    if (apiKey === undefined) {
+    let resolvedOAuthToken = oauthToken;
+
+    if (!resolvedKey && !resolvedOAuthToken && apiKey !== "") {
+      // Try OAuth first for providers that support it
+      if (supportsOAuth(newProvider)) {
+        resolveOAuthToken(newProvider).then((token) => {
+          if (token) {
+            const modelConfig: Partial<ModelConfig> = {
+              provider: newProvider,
+              model: newModel,
+              oauthToken: token,
+              baseURL: props.options.baseUrl || undefined,
+              temperature: 0,
+              maxTokens: 8096,
+            };
+            const newAgent = new AgentRunner(modelConfig, registryRef.current, pmRef.current);
+            agentRef.current = newAgent;
+            setProvider(newProvider);
+            setModel(newModel);
+          }
+        }).catch(() => {});
+        // If OAuth token is being resolved async, still try API key fallback synchronously
+      }
+
       const envVar = getApiKeyEnvVar(newProvider);
       if (process.env[envVar]) {
         resolvedKey = process.env[envVar];
@@ -142,6 +184,7 @@ function AppShell(props: {
       provider: newProvider,
       model: newModel,
       apiKey: resolvedKey || undefined,
+      oauthToken: resolvedOAuthToken || undefined,
       baseURL: props.options.baseUrl || undefined,
       temperature: 0,
       maxTokens: 8096,
@@ -161,8 +204,20 @@ function AppShell(props: {
   // ── Global Keyboard ──────────────────────────────────
 
   useKeyboard((key: any) => {
-    // Don't intercept keys when a dialog is open (except escape)
-    if (dialog !== "none" && key.name !== "escape") return;
+    // Don't intercept keys when a dialog is open (let the dialog handle them)
+    // Exception: Ctrl+C and Escape should always work
+    if (dialog !== "none") {
+      if (key.ctrl && key.name === "c") {
+        const cleanup = (globalThis as any).__cdoingCleanup;
+        if (cleanup) cleanup();
+        process.exit(0);
+      }
+      if (key.name === "escape") {
+        setDialog("none");
+        setRoute("home");
+      }
+      return;
+    }
 
     // Ctrl+C — graceful quit
     if (key.ctrl && key.name === "c") {
@@ -175,9 +230,9 @@ function AppShell(props: {
       setRoute("session");
       setStatus("Ready");
     }
-    // Ctrl+P — model picker
+    // Ctrl+P — command palette
     if (key.ctrl && key.name === "p") {
-      setDialog((d) => (d === "model" ? "none" : "model"));
+      setDialog((d) => (d === "command" ? "none" : "command"));
     }
     // Ctrl+S — session browser
     if (key.ctrl && key.name === "s") {
@@ -185,15 +240,15 @@ function AppShell(props: {
     }
     // Ctrl+B — toggle sidebar
     if (key.ctrl && key.name === "b") {
-      setShowSidebar((s) => !s);
+      setSidebarMode(sidebarMode === "hide" ? "show" : sidebarMode === "show" ? "hide" : showSidebar ? "hide" : "show");
     }
     // Ctrl+T — theme picker
     if (key.ctrl && key.name === "t") {
       setDialog((d) => (d === "theme" ? "none" : "theme"));
     }
-    // Ctrl+X — command palette
-    if (key.ctrl && key.name === "x") {
-      setDialog((d) => (d === "command" ? "none" : "command"));
+    // Ctrl+O — model picker (Ctrl+M = Enter in terminals)
+    if (key.ctrl && key.name === "o") {
+      setDialog((d) => (d === "model" ? "none" : "model"));
     }
     // F1 — help dialog
     if (key.name === "f1") {
@@ -214,9 +269,9 @@ function AppShell(props: {
   }, []);
 
   return (
-    <box width={dims.width} height={dims.height} flexDirection="column">
+    <box width={dims.width} height={dims.height} flexDirection="column" backgroundColor={customBg ? RGBA.fromHex(customBg) : t.bg}>
       {/* Header bar */}
-      <box height={1} flexDirection="row" paddingX={1} flexShrink={0}>
+      <box height={1} flexDirection="row" paddingX={1} flexShrink={0} backgroundColor={t.bgSubtle}>
         <text fg={t.primary} attributes={TextAttributes.BOLD}>{"cdoing"}</text>
         <text fg={t.border}>{" │ "}</text>
         <text fg={t.textMuted}>{model}</text>
@@ -267,7 +322,7 @@ function AppShell(props: {
             ) : dialog === "setup" ? (
               <SetupWizard
                 onComplete={(config) => {
-                  rebuildAgent(config.provider, config.model, config.apiKey);
+                  rebuildAgent(config.provider, config.model, config.apiKey, config.oauthToken);
                   setDialog("none");
                 }}
                 onClose={() => setDialog("none")}
@@ -291,11 +346,19 @@ function AppShell(props: {
                 onContextPercent={setContextPercent}
                 onOpenDialog={(d) => setDialog(d as Dialog)}
                 initialMessage={initialMessageRef.current}
+                dialogOpen={dialog !== "none"}
               />
             )}
           </box>
         </SDKProvider>
 
+        {/* Vertical border between content and sidebar */}
+        {showSidebar && (
+          <box width={1} flexShrink={0}>
+            <text fg={t.border}>{"│\n".repeat(Math.max(dims.height - 4, 1))}</text>
+          </box>
+        )}
+
         {/* Sidebar (right panel) */}
         {showSidebar && (
           <Sidebar
@@ -368,6 +431,7 @@ function AppShell(props: {
                 break;
               // Model
               case "model:switch":
+              case "model:provider":
                 setDialog("model");
                 break;
               // Theme
@@ -382,11 +446,13 @@ function AppShell(props: {
                 break;
               // Display
               case "display:sidebar":
-                setShowSidebar((s) => !s);
+                setSidebarMode(sidebarMode === "hide" ? "show" : sidebarMode === "show" ? "hide" : showSidebar ? "hide" : "show");
                 break;
-              case "display:timestamps":
-              case "display:thinking":
-                // Display toggles — extend as needed
+              // Tools (dispatch as slash commands into session)
+              case "tool:shell":
+              case "tool:search":
+              case "tool:tree":
+                setRoute("session");
                 break;
               // System
               case "system:status":
@@ -431,6 +497,96 @@ function AppShell(props: {
       {dialog === "status" && (
         <DialogStatus onClose={() => setDialog("none")} />
       )}
+
+    </box>
+  );
+}
+
+// ── Error Boundary ───────────────────────────────────────
+
+// Global error signal — set by uncaughtException/unhandledRejection handlers,
+// read by the AppRoot wrapper to swap in the error screen.
+let __fatalError: Error | null = null;
+let __fatalErrorSetter: ((err: Error | null) => void) | null = null;
+
+function AppRoot(props: {
+  children: any;
+}) {
+  const [error, setError] = useState<Error | null>(__fatalError);
+  __fatalErrorSetter = setError;
+
+  if (error) {
+    return <ErrorScreen error={error} onReset={() => setError(null)} />;
+  }
+  return props.children;
+}
+
+function ErrorScreen(props: {
+  error: Error;
+  onReset: () => void;
+}) {
+  const dims = useTerminalDimensions();
+  const maxW = Math.max(dims.width, 40);
+
+  const colors = {
+    bg: "#0a0a0a",
+    text: "#eeeeee",
+    muted: "#808080",
+    primary: "#fab283",
+    error: "#ff6b6b",
+  };
+
+  const issueURL = `https://github.com/AhmadMuj/cdoing-agent/issues/new?title=${encodeURIComponent(`tui: fatal: ${props.error.message}`)}&body=${encodeURIComponent("```\n" + (props.error.stack || props.error.message).substring(0, 4000) + "\n```")}`;
+
+  useKeyboard((key: any) => {
+    if (key.ctrl && key.name === "c") {
+      const cleanup = (globalThis as any).__cdoingCleanup;
+      if (cleanup) cleanup();
+      else process.exit(1);
+    }
+    if (key.name === "r") {
+      props.onReset();
+    }
+    if (key.name === "q" || key.name === "escape") {
+      const cleanup = (globalThis as any).__cdoingCleanup;
+      if (cleanup) cleanup();
+      else process.exit(0);
+    }
+  });
+
+  const stackLines = (props.error.stack || "").split("\n").slice(0, Math.max(5, dims.height - 12));
+
+  return (
+    <box
+      width={dims.width}
+      height={dims.height}
+      flexDirection="column"
+      backgroundColor={colors.bg}
+      paddingX={2}
+      paddingY={1}
+    >
+      <text fg={colors.error} attributes={TextAttributes.BOLD}>
+        {"  A fatal error occurred!"}
+      </text>
+      <text>{""}</text>
+      <text fg={colors.text} attributes={TextAttributes.BOLD}>
+        {`  ${props.error.message}`}
+      </text>
+      <text>{""}</text>
+      <text fg={colors.muted}>{"  Stack trace:"}</text>
+      {stackLines.map((line, i) => (
+        <text key={i} fg={colors.muted}>
+          {`  ${line}`}
+        </text>
+      ))}
+      <text>{""}</text>
+      <text fg={colors.primary}>{"  Report this issue:"}</text>
+      <text fg={colors.muted}>{`  ${issueURL.length > maxW - 4 ? issueURL.substring(0, maxW - 7) + "..." : issueURL}`}</text>
+      <text>{""}</text>
+      <box height={1} flexShrink={0}>
+        <text fg={colors.muted}>{"─".repeat(maxW)}</text>
+      </box>
+      <text fg={colors.text}>{"  r Reset TUI  •  q/Esc Exit  •  Ctrl+C Force quit"}</text>
     </box>
   );
 }
@@ -451,13 +607,25 @@ export async function startTUI(options: TUIOptions): Promise<void> {
     return "allow";
   });
 
+  const processManager = new ProcessManager();
+  const todoStore = new TodoStore();
+  const memoryStore = new MemoryStore(options.workingDir);
   await registerAllTools(registry, {
     workingDir: options.workingDir,
     permissionManager: pm,
+    processManager,
+    todoStore,
+    memoryStore,
+    planExitCallback: (summary: string) => {
+      // Signal that plan is ready — the session component handles the approval via /plan approve
+      console.log("\n  📋 Plan ready: " + summary);
+      console.log("  Use /plan approve, /plan reject, or /plan show\n");
+    },
   });
 
-  // Resolve API key: flag → env var → stored config (~/.cdoing/config.json)
+  // Resolve API key: flag → env var → stored config → OAuth token
   let resolvedApiKey = options.apiKey;
+  let resolvedOAuthToken: string | undefined;
   let resolvedProvider = options.provider;
   let resolvedModel = options.model;
   let resolvedBaseUrl = options.baseUrl;
@@ -492,13 +660,39 @@ export async function startTUI(options: TUIOptions): Promise<void> {
     else if (storedConfig.apiKeys?.[resolvedProvider]) {
       resolvedApiKey = storedConfig.apiKeys[resolvedProvider];
     }
+
+    // If no API key found, try OAuth token
+    if (!resolvedApiKey && supportsOAuth(resolvedProvider)) {
+      try {
+        const token = await resolveOAuthToken(resolvedProvider);
+        if (token) resolvedOAuthToken = token;
+      } catch {}
+    }
+  }
+
+  // Hydrate settings store with resolved CLI values (overrides persisted defaults when flags are explicit)
+  const settingsStore = useSettingsStore.getState();
+  if (resolvedProvider && resolvedProvider !== "anthropic") {
+    settingsStore.setProvider(resolvedProvider);
+  } else if (!settingsStore.provider || settingsStore.provider === "anthropic") {
+    settingsStore.setProvider(resolvedProvider);
+  }
+  if (resolvedModel) {
+    settingsStore.setModel(resolvedModel);
+  } else if (!settingsStore.model) {
+    settingsStore.setModel(getDefaultModel(settingsStore.provider) || "default");
   }
 
-  // Build model config
+  // Use persisted values as the effective config (store is now hydrated)
+  const effectiveProvider = useSettingsStore.getState().provider;
+  const effectiveModel = useSettingsStore.getState().model;
+
+  // Build model config (use effective values from persisted store)
   const modelConfig: Partial<ModelConfig> = {
-    provider: resolvedProvider,
-    model: resolvedModel || undefined,
+    provider: effectiveProvider,
+    model: effectiveModel || undefined,
     apiKey: resolvedApiKey || undefined,
+    oauthToken: resolvedOAuthToken || undefined,
     baseURL: resolvedBaseUrl || undefined,
     temperature: 0,
     maxTokens: 8096,
@@ -517,9 +711,24 @@ export async function startTUI(options: TUIOptions): Promise<void> {
   const resolvedMode: "dark" | "light" = options.theme === "light" ? "light"
     : options.theme === "auto" ? (detectedMode || "dark")
     : "dark";
-  const initialColors = getThemeColors("default", resolvedMode);
+  // Hydrate theme settings from store
+  const persistedThemeId = useSettingsStore.getState().themeId;
+  const persistedMode = useSettingsStore.getState().mode;
+  if (options.theme !== "light" && options.theme !== "dark") {
+    // "auto" mode — use persisted mode if available
+    if (persistedMode) settingsStore.setMode(persistedMode);
+  } else {
+    settingsStore.setMode(options.theme === "light" ? "light" : "dark");
+  }
+
+  const initialColors = getThemeColors(persistedThemeId || "default", resolvedMode);
   setTerminalBackground(initialColors.bg);
 
+  // Reset terminal size to a good default (80x24 minimum)
+  const cols = Math.max(process.stdout.columns || 80, 80);
+  const rows = Math.max(process.stdout.rows || 24, 24);
+  process.stdout.write(`\x1b[8;${rows};${cols}t`);
+
   console.clear();
 
   // Set terminal title on mount
@@ -530,17 +739,29 @@ export async function startTUI(options: TUIOptions): Promise<void> {
     exitOnCtrlC: false,
   });
   const root = createRoot(renderer);
+  // Install global error handlers to catch uncaught exceptions and show the error screen
+  const handleFatalError = (err: unknown) => {
+    const error = err instanceof Error ? err : new Error(String(err));
+    process.stderr.write(`\n[cdoing] Fatal error: ${error.message}\n${error.stack || ""}\n`);
+    __fatalError = error;
+    if (__fatalErrorSetter) __fatalErrorSetter(error);
+  };
+  process.on("uncaughtException", handleFatalError);
+  process.on("unhandledRejection", handleFatalError);
+
   root.render(
-    <ThemeProvider mode={options.theme} detectedMode={detectedMode} syncTerminalBg>
-      <ToastProvider>
-        <AppShell
-          options={{ ...options, provider: resolvedProvider, model: resolvedModel || undefined }}
-          agent={agent}
-          registry={registry}
-          permissionManager={pm}
-        />
-      </ToastProvider>
-    </ThemeProvider>
+    <AppRoot>
+      <ThemeProvider mode={options.theme} themeId={persistedThemeId} detectedMode={detectedMode} syncTerminalBg>
+        <ToastProvider>
+          <AppShell
+            options={{ ...options, provider: effectiveProvider, model: effectiveModel || undefined }}
+            agent={agent}
+            registry={registry}
+            permissionManager={pm}
+          />
+        </ToastProvider>
+      </ThemeProvider>
+    </AppRoot>
   );
 
   // Graceful cleanup: unmount React, destroy renderer, restore terminal