Merge branch 'main' into fix/replace-all-spawn-with-cross-spawn

fix: remove unnecessary child_process imports
fix: replace child_process with cross-spawn
2026-06-18 14:32:06 +08:00 · 2026-04-14 23:52:44 +02:00 · 2026-04-10 16:50:50 +03:00 · 2026-04-10 16:37:47 +03:00
120 changed files with 3147 additions and 4910 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,6 @@ lerna-debug.log*
 # Build outputs
 dist/
 dist-server/
 dist-ssr/
 build/
 out/
@@ -139,4 +138,4 @@ tasks/
 !src/i18n/locales/de/tasks.json
 # Git worktrees
-.worktrees/
+.worktrees/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,41 +3,6 @@
 All notable changes to CloudCLI UI will be documented in this file.
 ## [1.29.5](https://github.com/siteboon/claudecodeui/compare/v1.29.4...v1.29.5) (2026-04-16)
 ### Bug Fixes
 * update node-pty to latest version ([6a13e17](https://github.com/siteboon/claudecodeui/commit/6a13e1773b145049ade512aa6e5cac21c2e5c4de))
 ## [1.29.4](https://github.com/siteboon/claudecodeui/compare/v1.29.3...v1.29.4) (2026-04-16)
 ### New Features
 * deleting from sidebar will now ask whether to remove all data as well ([e9c7a50](https://github.com/siteboon/claudecodeui/commit/e9c7a5041c31a6f7b2032f06abe19c52d3d4cd8c))
 ### Bug Fixes
 * pass pathToClaudeCodeExecutable to SDK when CLAUDE_CLI_PATH is set ([4c106a5](https://github.com/siteboon/claudecodeui/commit/4c106a5083d90989bbeedaefdbb68f5b3fa6fd58)), closes [#468](https://github.com/siteboon/claudecodeui/issues/468)
 ### Refactoring
 * remove the sqlite3 dependency ([2895208](https://github.com/siteboon/claudecodeui/commit/289520814cf3ca36403056739ef22021f78c6033))
 * **server:** extract URL detection and color utils from index.js ([#657](https://github.com/siteboon/claudecodeui/issues/657)) ([63e996b](https://github.com/siteboon/claudecodeui/commit/63e996bb77cfa97b1f55f6bdccc50161a75a3eee))
 ### Maintenance
 * upgrade commit lint to 20.5.0 ([0948601](https://github.com/siteboon/claudecodeui/commit/09486016e67d97358c228ebc6eb4502ccb0012e4))
 ## [1.29.3](https://github.com/siteboon/claudecodeui/compare/v1.29.2...v1.29.3) (2026-04-15)
 ### Bug Fixes
 * **version-upgrade-modal:** implement reload countdown and update UI messages ([#655](https://github.com/siteboon/claudecodeui/issues/655)) ([6413042](https://github.com/siteboon/claudecodeui/commit/641304242d7705b54aab65faa4a7673438c92c60))
 ### Maintenance
 * remove unused route (migrated to providers already) ([31f28a2](https://github.com/siteboon/claudecodeui/commit/31f28a2c183f6ead50941027632d7ab64b7bb2d4))
 ## [1.29.2](https://github.com/siteboon/claudecodeui/compare/v1.29.1...v1.29.2) (2026-04-14)
 ### Bug Fixes
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,9 +3,7 @@ import tseslint from "typescript-eslint";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
-import { createNodeResolver, importX } from "eslint-plugin-import-x";
+import importX from "eslint-plugin-import-x";
 import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
 import boundaries from "eslint-plugin-boundaries";
 import tailwindcss from "eslint-plugin-tailwindcss";
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
@@ -84,7 +82,7 @@ export default tseslint.config(
            "sibling",
            "index",
          ],
-          "newlines-between": "always",
+          "newlines-between": "never",
        },
      ],
@@ -100,131 +98,5 @@ export default tseslint.config(
      "no-control-regex": "off",
      "no-useless-escape": "off",
    },
  },
  {
    files: ["server/**/*.{js,ts}"], // apply this block only to backend source files
    ignores: ["server/**/*.d.ts"], // skip generated declaration files in backend linting
    plugins: {
      boundaries, // enforce backend architecture boundaries (module-to-module contracts)
      "import-x": importX, // keep import hygiene rules (duplicates, unresolved paths, etc.)
      "unused-imports": unusedImports, // remove dead imports/variables from backend files
    },
    languageOptions: {
      parser: tseslint.parser, // parse both JS and TS syntax in backend files
      parserOptions: {
        ecmaVersion: "latest", // support modern ECMAScript syntax in backend code
        sourceType: "module", // treat backend files as ESM modules
      },
      globals: {
        ...globals.node, // expose Node.js globals such as process, Buffer, and __dirname equivalents
      },
    },
    settings: {
      "boundaries/include": ["server/**/*.{js,ts}"], // only analyze dependency boundaries inside backend files
      "import/resolver": {
        // boundaries resolves imports through eslint-module-utils, which reads the classic
        // import/resolver setting instead of import-x/resolver-next.
        typescript: {
          project: ["server/tsconfig.json"], // resolve backend aliases using the canonical backend tsconfig
          alwaysTryTypes: true, // keep normal TS package/type resolution working alongside aliases
        },
        node: {
          extensions: [".mjs", ".cjs", ".js", ".json", ".node", ".ts", ".tsx"], // preserve Node-style fallback resolution for plain files
        },
      },
      "import-x/resolver-next": [
        // ESLint's import plugin does not read tsconfig path aliases on its own.
        // This resolver teaches import-x how to understand the backend-only "@/*"
        // mapping defined in server/tsconfig.json, which fixes false no-unresolved errors in editors.
        createTypeScriptImportResolver({
          project: ["server/tsconfig.json"], // point the resolver at the canonical backend tsconfig instead of the frontend one
          alwaysTryTypes: true, // keep standard TypeScript package resolution working while backend aliases are enabled
        }),
        // Keep Node-style resolution available for normal package imports and plain relative JS files.
        // The TypeScript resolver handles aliases, while the Node resolver preserves the expected fallback behavior.
        createNodeResolver({
          extensions: [".mjs", ".cjs", ".js", ".json", ".node", ".ts", ".tsx"],
        }),
      ],
      "boundaries/elements": [
        {
          type: "backend-shared-types", // shared backend type contract that modules may consume without creating runtime coupling
          pattern: ["server/shared/types.{js,ts}"], // support the current shared types path
          mode: "file", // treat the types file itself as the boundary element instead of the whole folder
        },
        {
          type: "backend-module", // logical element name used by boundaries rules below
          pattern: "server/modules/*", // each direct folder in server/modules is treated as one module boundary
          mode: "folder", // classify dependencies at folder-module level (not per individual file)
          capture: ["moduleName"], // capture the module folder name for messages/debugging/template use
        },
      ],
    },
    rules: {
      // --- Unused imports/vars (backend) ---
      "unused-imports/no-unused-imports": "warn", // warn when imports are not used so they can be cleaned up
      "unused-imports/no-unused-vars": "off", // keep backend signal focused on dead imports instead of local unused variables
      // --- Import hygiene (backend) ---
      "import-x/no-duplicates": "warn", // prevent duplicate import lines from the same module
      "import-x/order": [
        "warn", // keep backend import grouping/order consistent with the frontend config
        {
          groups: [
            "builtin", // Node built-ins such as fs, path, and url come first
            "external", // third-party packages come after built-ins
            "internal", // aliased internal imports such as @/... come next
            "parent", // ../ imports come after aliased internal imports
            "sibling", // ./foo imports come after parent imports
            "index", // bare ./ imports stay last
          ],
          "newlines-between": "always", // require a blank line between import groups in backend files too
        },
      ],
      "import-x/no-unresolved": "error", // fail when an import path cannot be resolved
      "import-x/no-useless-path-segments": "warn", // prefer cleaner paths (remove redundant ./ and ../ segments)
      "import-x/no-absolute-path": "error", // disallow absolute filesystem imports in backend files
      // --- General safety/style (backend) ---
      eqeqeq: ["warn", "always", { null: "ignore" }], // avoid accidental coercion while still allowing x == null checks
      // --- Architecture boundaries (backend modules) ---
      "boundaries/dependencies": [
        "error", // treat architecture violations as lint errors
        {
          default: "allow", // allow normal imports unless a rule below explicitly disallows them
          checkInternals: false, // do not apply these cross-module rules to imports inside the same module
          rules: [
            {
              from: { type: "backend-module" }, // modules may depend on the shared types contract only as erased type-only imports
              to: { type: "backend-shared-types" },
              disallow: {
                dependency: { kind: ["value", "typeof"] },
              }, // block runtime imports so shared types stay a compile-time contract instead of a hidden shared module
              message:
                "Backend modules may only use `import type` when importing from server/shared/types.ts (or server/types.ts).",
            },
            {
              to: { type: "backend-module" }, // when importing anything that belongs to another backend module
              disallow: { to: { internalPath: "**" } }, // block all direct/deep imports into module internals by default
              message:
                "Cross-module imports must go through that module's barrel file (server/modules/<module>/index.ts or index.js).", // explicit error message for architecture violations
            },
            {
              to: { type: "backend-module" }, // same target scope as the disallow rule above
              allow: {
                to: {
                  internalPath: [
                    "index", // allow extensionless barrel imports resolved as module root index
                    "index.{js,mjs,cjs,ts,tsx}", // allow explicit index.* barrel file imports
                  ],
                },
              }, // re-allow only public module entry points (barrel files)
            },
          ],
        },
      ],
      "boundaries/no-unknown": "error", // fail fast if boundaries cannot classify a dependency, which prevents silent rule bypasses
    },
  }
 );
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,17 +1,16 @@
 {
  "name": "@cloudcli-ai/cloudcli",
-  "version": "1.29.5",
+  "version": "1.29.2",
  "description": "A web-based UI for Claude Code CLI",
  "type": "module",
-  "main": "dist-server/server/index.js",
+  "main": "server/index.js",
  "bin": {
-    "cloudcli": "dist-server/server/cli.js"
+    "cloudcli": "server/cli.js"
  },
  "files": [
    "server/",
    "shared/",
    "dist/",
    "dist-server/",
    "scripts/",
    "README.md"
  ],
@@ -24,19 +23,14 @@
    "url": "https://github.com/siteboon/claudecodeui/issues"
  },
  "scripts": {
-    "dev": "concurrently --kill-others \"npm run server:dev\" \"npm run client\"",
+    "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"",
-    "server": "node dist-server/server/index.js",
+    "server": "node server/index.js",
    "server:dev": "tsx --tsconfig server/tsconfig.json server/index.js",
    "server:dev-watch": "tsx watch --tsconfig server/tsconfig.json server/index.js",
    "client": "vite",
-    "build": "npm run build:client && npm run build:server",
+    "build": "vite build",
    "build:client": "vite build",
    "prebuild:server": "node -e \"require('node:fs').rmSync('dist-server', { recursive: true, force: true })\"",
    "build:server": "tsc -p server/tsconfig.json && tsc-alias -p server/tsconfig.json",
    "preview": "vite preview",
-    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p server/tsconfig.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
-    "lint": "eslint src/ server/",
+    "lint": "eslint src/",
-    "lint:fix": "eslint src/ server/ --fix",
+    "lint:fix": "eslint src/ --fix",
    "start": "npm run build && npm run server",
    "release": "./release.sh",
    "prepublishOnly": "npm run build",
@@ -104,7 +98,7 @@
    "mime-types": "^3.0.1",
    "multer": "^2.0.1",
    "node-fetch": "^2.7.0",
-    "node-pty": "^1.2.0-beta.12",
+    "node-pty": "^1.1.0-beta34",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
@@ -117,13 +111,15 @@
    "rehype-raw": "^7.0.0",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.7",
    "tailwind-merge": "^3.3.1",
    "web-push": "^3.6.7",
    "ws": "^8.14.2"
  },
  "devDependencies": {
-    "@commitlint/cli": "^20.5.0",
+    "@commitlint/cli": "^20.4.3",
-    "@commitlint/config-conventional": "^20.5.0",
+    "@commitlint/config-conventional": "^20.4.3",
    "@eslint/js": "^9.39.3",
    "@release-it/conventional-changelog": "^10.0.5",
    "@types/node": "^22.19.7",
@@ -134,8 +130,6 @@
    "autoprefixer": "^10.4.16",
    "concurrently": "^8.2.2",
    "eslint": "^9.39.3",
    "eslint-import-resolver-typescript": "^4.4.4",
    "eslint-plugin-boundaries": "^6.0.2",
    "eslint-plugin-import-x": "^4.16.1",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.0.1",
@@ -150,14 +144,11 @@
    "release-it": "^19.0.5",
    "sharp": "^0.34.2",
    "tailwindcss": "^3.4.0",
    "tsc-alias": "^1.8.16",
    "tsx": "^4.21.0",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.56.1",
    "vite": "^7.0.4"
  },
  "lint-staged": {
-    "src/**/*.{ts,tsx,js,jsx}": "eslint",
+    "src/**/*.{ts,tsx,js,jsx}": "eslint"
    "server/**/*.{js,ts}": "eslint"
  }
 }
--- a/redirect-package/bin.js
+++ b/redirect-package/bin.js
@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import('@cloudcli-ai/cloudcli/dist-server/server/cli.js');
+import('@cloudcli-ai/cloudcli/server/cli.js');
--- a/server/claude-sdk.js
+++ b/server/claude-sdk.js
@@ -26,14 +26,13 @@ import {
 } from './services/notification-orchestrator.js';
 import { claudeAdapter } from './providers/claude/adapter.js';
 import { createNormalizedMessage } from './providers/types.js';
 import { getStatusChecker } from './providers/registry.js';
 const activeSessions = new Map();
 const pendingToolApprovals = new Map();
 const TOOL_APPROVAL_TIMEOUT_MS = parseInt(process.env.CLAUDE_TOOL_APPROVAL_TIMEOUT_MS, 10) || 55000;
-const TOOLS_REQUIRING_INTERACTION = new Set(['AskUserQuestion', 'ExitPlanMode']);
+const TOOLS_REQUIRING_INTERACTION = new Set(['AskUserQuestion']);
 function createRequestId() {
  if (typeof crypto.randomUUID === 'function') {
@@ -149,10 +148,6 @@ function mapCliOptionsToSDK(options = {}) {
  const sdkOptions = {};
  if (process.env.CLAUDE_CLI_PATH) {
    sdkOptions.pathToClaudeCodeExecutable = process.env.CLAUDE_CLI_PATH;
  }
  // Map working directory
  if (cwd) {
    sdkOptions.cwd = cwd;
@@ -706,14 +701,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
    // Clean up temporary image files on error
    await cleanupTempFiles(tempImagePaths, tempDir);
    // Check if Claude CLI is installed for a clearer error message
    const installed = getStatusChecker('claude')?.checkInstalled() ?? true;
    const errorContent = !installed
      ? 'Claude Code is not installed. Please install it first: https://docs.anthropic.com/en/docs/claude-code'
      : error.message;
    // Send error to WebSocket
-    ws.send(createNormalizedMessage({ kind: 'error', content: errorContent, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
+    ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: capturedSessionId || sessionId || null, provider: 'claude' }));
    notifyRunFailed({
      userId: ws?.userId || null,
      provider: 'claude',
@@ -721,6 +710,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
      sessionName: sessionSummary,
      error
    });
    throw error;
  }
 }
--- a/server/cli.js
+++ b/server/cli.js
@@ -16,12 +16,11 @@
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
-import { findAppRoot, getModuleDir } from './utils/runtime-paths.js';
+import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-const __dirname = getModuleDir(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
-// The CLI is compiled into dist-server/server, but it still needs to read the top-level
+const __dirname = dirname(__filename);
 // package.json and .env file. Resolving the app root once keeps those lookups stable.
 const APP_ROOT = findAppRoot(__dirname);
 // ANSI color codes for terminal output
 const colors = {
@@ -51,16 +50,13 @@ const c = {
 };
 // Load package.json for version info
-const packageJsonPath = path.join(APP_ROOT, 'package.json');
+const packageJsonPath = path.join(__dirname, '../package.json');
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 // Match the runtime fallback in load-env.js so "cloudcli status" reports the same default
 // database location that the backend will actually use when no DATABASE_PATH is configured.
 const DEFAULT_DATABASE_PATH = path.join(os.homedir(), '.cloudcli', 'auth.db');
 // Load environment variables from .env file if it exists
 function loadEnvFile() {
    try {
-        const envPath = path.join(APP_ROOT, '.env');
+        const envPath = path.join(__dirname, '../.env');
        const envFile = fs.readFileSync(envPath, 'utf8');
        envFile.split('\n').forEach(line => {
            const trimmedLine = line.trim();
@@ -79,12 +75,12 @@ function loadEnvFile() {
 // Get the database path (same logic as db.js)
 function getDatabasePath() {
    loadEnvFile();
-    return process.env.DATABASE_PATH || DEFAULT_DATABASE_PATH;
+    return process.env.DATABASE_PATH || path.join(__dirname, 'database', 'auth.db');
 }
 // Get the installation directory
 function getInstallDir() {
-    return APP_ROOT;
+    return path.join(__dirname, '..');
 }
 // Show status command
@@ -128,7 +124,7 @@ function showStatus() {
    console.log(`       Status: ${projectsExists ? c.ok('[OK] Exists') : c.warn('[WARN] Not found')}`);
    // Config file location
-    const envFilePath = path.join(APP_ROOT, '.env');
+    const envFilePath = path.join(__dirname, '../.env');
    const envExists = fs.existsSync(envFilePath);
    console.log(`\n${c.info('[INFO]')} Configuration File:`);
    console.log(`       ${c.dim(envFilePath)}`);
--- a/server/cursor-cli.js
+++ b/server/cursor-cli.js
@@ -1,12 +1,7 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import crossSpawn from 'cross-spawn';
 import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 import { cursorAdapter } from './providers/cursor/adapter.js';
 import { createNormalizedMessage } from './providers/types.js';
 import { getStatusChecker } from './providers/registry.js';
 // Use cross-spawn on Windows for better command execution
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
 let activeCursorProcesses = new Map(); // Track active processes by session ID
@@ -123,7 +118,7 @@ async function spawnCursor(command, options = {}, ws) {
      console.log('Working directory:', workingDir);
      console.log('Session info - Input sessionId:', sessionId, 'Resume:', resume);
-      const cursorProcess = spawnFunction('cursor-agent', args, {
+      const cursorProcess = spawn('cursor-agent', args, {
        cwd: workingDir,
        stdio: ['pipe', 'pipe', 'pipe'],
        env: { ...process.env } // Inherit all environment variables
@@ -295,13 +290,7 @@ async function spawnCursor(command, options = {}, ws) {
        const finalSessionId = capturedSessionId || sessionId || processKey;
        activeCursorProcesses.delete(finalSessionId);
-        // Check if Cursor CLI is installed for a clearer error message
+        ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: capturedSessionId || sessionId || null, provider: 'cursor' }));
        const installed = getStatusChecker('cursor')?.checkInstalled() ?? true;
        const errorContent = !installed
          ? 'Cursor CLI is not installed. Please install it from https://cursor.com'
          : error.message;
        ws.send(createNormalizedMessage({ kind: 'error', content: errorContent, sessionId: capturedSessionId || sessionId || null, provider: 'cursor' }));
        notifyTerminalState({ error });
        settleOnce(() => reject(error));
--- a/server/database/db.js
+++ b/server/database/db.js
@@ -2,21 +2,11 @@ import Database from 'better-sqlite3';
 import path from 'path';
 import fs from 'fs';
 import crypto from 'crypto';
-import { findAppRoot, getModuleDir } from '../utils/runtime-paths.js';
+import { fileURLToPath } from 'url';
-import {
+import { dirname } from 'path';
  APP_CONFIG_TABLE_SQL,
  USER_NOTIFICATION_PREFERENCES_TABLE_SQL,
  VAPID_KEYS_TABLE_SQL,
  PUSH_SUBSCRIPTIONS_TABLE_SQL,
  SESSION_NAMES_TABLE_SQL,
  SESSION_NAMES_LOOKUP_INDEX_SQL,
  DATABASE_SCHEMA_SQL
 } from './schema.js';
-const __dirname = getModuleDir(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
-// The compiled backend lives under dist-server/server/database, but the install root we log
+const __dirname = dirname(__filename);
 // should still point at the project/app root. Resolving it here avoids build-layout drift.
 const APP_ROOT = findAppRoot(__dirname);
 // ANSI color codes for terminal output
 const colors = {
@@ -34,6 +24,7 @@ const c = {
 // Use DATABASE_PATH environment variable if set, otherwise use default location
 const DB_PATH = process.env.DATABASE_PATH || path.join(__dirname, 'auth.db');
 const INIT_SQL_PATH = path.join(__dirname, 'init.sql');
 // Ensure database directory exists if custom path is provided
 if (process.env.DATABASE_PATH) {
@@ -71,10 +62,14 @@ const db = new Database(DB_PATH);
 // app_config must exist before any other module imports (auth.js reads the JWT secret at load time).
 // runMigrations() also creates this table, but it runs too late for existing installations
 // where auth.js is imported before initializeDatabase() is called.
-db.exec(APP_CONFIG_TABLE_SQL);
+db.exec(`CREATE TABLE IF NOT EXISTS app_config (
  key TEXT PRIMARY KEY,
  value TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 )`);
 // Show app installation path prominently
-const appInstallPath = APP_ROOT;
+const appInstallPath = path.join(__dirname, '../..');
 console.log('');
 console.log(c.dim('═'.repeat(60)));
 console.log(`${c.info('[INFO]')} App Installation: ${c.bright(appInstallPath)}`);
@@ -105,12 +100,53 @@ const runMigrations = () => {
      db.exec('ALTER TABLE users ADD COLUMN has_completed_onboarding BOOLEAN DEFAULT 0');
    }
-    db.exec(USER_NOTIFICATION_PREFERENCES_TABLE_SQL);
+    db.exec(`
-    db.exec(VAPID_KEYS_TABLE_SQL);
+      CREATE TABLE IF NOT EXISTS user_notification_preferences (
-    db.exec(PUSH_SUBSCRIPTIONS_TABLE_SQL);
+        user_id INTEGER PRIMARY KEY,
-    db.exec(APP_CONFIG_TABLE_SQL);
+        preferences_json TEXT NOT NULL,
-    db.exec(SESSION_NAMES_TABLE_SQL);
+        updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    db.exec(SESSION_NAMES_LOOKUP_INDEX_SQL);
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
      )
    `);
    db.exec(`
      CREATE TABLE IF NOT EXISTS vapid_keys (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        public_key TEXT NOT NULL,
        private_key TEXT NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `);
    db.exec(`
      CREATE TABLE IF NOT EXISTS push_subscriptions (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        user_id INTEGER NOT NULL,
        endpoint TEXT NOT NULL UNIQUE,
        keys_p256dh TEXT NOT NULL,
        keys_auth TEXT NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
      )
    `);
    // Create app_config table if it doesn't exist (for existing installations)
    db.exec(`CREATE TABLE IF NOT EXISTS app_config (
      key TEXT PRIMARY KEY,
      value TEXT NOT NULL,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )`);
    // Create session_names table if it doesn't exist (for existing installations)
    db.exec(`CREATE TABLE IF NOT EXISTS session_names (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      session_id TEXT NOT NULL,
      provider TEXT NOT NULL DEFAULT 'claude',
      custom_name TEXT NOT NULL,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
      UNIQUE(session_id, provider)
    )`);
    db.exec('CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider)');
    console.log('Database migrations completed successfully');
  } catch (error) {
@@ -122,7 +158,8 @@ const runMigrations = () => {
 // Initialize database with schema
 const initializeDatabase = async () => {
  try {
-    db.exec(DATABASE_SCHEMA_SQL);
+    const initSQL = fs.readFileSync(INIT_SQL_PATH, 'utf8');
    db.exec(initSQL);
    console.log('Database initialized successfully');
    runMigrations();
  } catch (error) {
--- a/server/database/init.sql
+++ b/server/database/init.sql
@@ -0,0 +1,99 @@
 -- Initialize authentication database
 PRAGMA foreign_keys = ON;
 -- Users table (single user system)
 CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE NOT NULL,
    password_hash TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    last_login DATETIME,
    is_active BOOLEAN DEFAULT 1,
    git_name TEXT,
    git_email TEXT,
    has_completed_onboarding BOOLEAN DEFAULT 0
 );
 -- Indexes for performance
 CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
 CREATE INDEX IF NOT EXISTS idx_users_active ON users(is_active);
 -- API Keys table for external API access
 CREATE TABLE IF NOT EXISTS api_keys (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    key_name TEXT NOT NULL,
    api_key TEXT UNIQUE NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    last_used DATETIME,
    is_active BOOLEAN DEFAULT 1,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 CREATE INDEX IF NOT EXISTS idx_api_keys_key ON api_keys(api_key);
 CREATE INDEX IF NOT EXISTS idx_api_keys_user_id ON api_keys(user_id);
 CREATE INDEX IF NOT EXISTS idx_api_keys_active ON api_keys(is_active);
 -- User credentials table for storing various tokens/credentials (GitHub, GitLab, etc.)
 CREATE TABLE IF NOT EXISTS user_credentials (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    credential_name TEXT NOT NULL,
    credential_type TEXT NOT NULL, -- 'github_token', 'gitlab_token', 'bitbucket_token', etc.
    credential_value TEXT NOT NULL,
    description TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT 1,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 CREATE INDEX IF NOT EXISTS idx_user_credentials_user_id ON user_credentials(user_id);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_type ON user_credentials(credential_type);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);
 -- User notification preferences (backend-owned, provider-agnostic)
 CREATE TABLE IF NOT EXISTS user_notification_preferences (
    user_id INTEGER PRIMARY KEY,
    preferences_json TEXT NOT NULL,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 -- VAPID key pair for Web Push notifications
 CREATE TABLE IF NOT EXISTS vapid_keys (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    public_key TEXT NOT NULL,
    private_key TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );
 -- Browser push subscriptions
 CREATE TABLE IF NOT EXISTS push_subscriptions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    endpoint TEXT NOT NULL UNIQUE,
    keys_p256dh TEXT NOT NULL,
    keys_auth TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 -- Session custom names (provider-agnostic display name overrides)
 CREATE TABLE IF NOT EXISTS session_names (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    session_id TEXT NOT NULL,
    provider TEXT NOT NULL DEFAULT 'claude',
    custom_name TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    UNIQUE(session_id, provider)
 );
 CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider);
 -- App configuration table (auto-generated secrets, settings, etc.)
 CREATE TABLE IF NOT EXISTS app_config (
    key TEXT PRIMARY KEY,
    value TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );
--- a/server/database/schema.js
+++ b/server/database/schema.js
@@ -1,102 +0,0 @@
 export const APP_CONFIG_TABLE_SQL = `CREATE TABLE IF NOT EXISTS app_config (
  key TEXT PRIMARY KEY,
  value TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );`;
 export const USER_NOTIFICATION_PREFERENCES_TABLE_SQL = `CREATE TABLE IF NOT EXISTS user_notification_preferences (
  user_id INTEGER PRIMARY KEY,
  preferences_json TEXT NOT NULL,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );`;
 export const VAPID_KEYS_TABLE_SQL = `CREATE TABLE IF NOT EXISTS vapid_keys (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  public_key TEXT NOT NULL,
  private_key TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );`;
 export const PUSH_SUBSCRIPTIONS_TABLE_SQL = `CREATE TABLE IF NOT EXISTS push_subscriptions (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  endpoint TEXT NOT NULL UNIQUE,
  keys_p256dh TEXT NOT NULL,
  keys_auth TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );`;
 export const SESSION_NAMES_TABLE_SQL = `CREATE TABLE IF NOT EXISTS session_names (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  session_id TEXT NOT NULL,
  provider TEXT NOT NULL DEFAULT 'claude',
  custom_name TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  UNIQUE(session_id, provider)
 );`;
 export const SESSION_NAMES_LOOKUP_INDEX_SQL = `CREATE INDEX IF NOT EXISTS idx_session_names_lookup ON session_names(session_id, provider);`;
 export const DATABASE_SCHEMA_SQL = `PRAGMA foreign_keys = ON;
 CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  last_login DATETIME,
  is_active BOOLEAN DEFAULT 1,
  git_name TEXT,
  git_email TEXT,
  has_completed_onboarding BOOLEAN DEFAULT 0
 );
 CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
 CREATE INDEX IF NOT EXISTS idx_users_active ON users(is_active);
 CREATE TABLE IF NOT EXISTS api_keys (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  key_name TEXT NOT NULL,
  api_key TEXT UNIQUE NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  last_used DATETIME,
  is_active BOOLEAN DEFAULT 1,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 CREATE INDEX IF NOT EXISTS idx_api_keys_key ON api_keys(api_key);
 CREATE INDEX IF NOT EXISTS idx_api_keys_user_id ON api_keys(user_id);
 CREATE INDEX IF NOT EXISTS idx_api_keys_active ON api_keys(is_active);
 CREATE TABLE IF NOT EXISTS user_credentials (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  credential_name TEXT NOT NULL,
  credential_type TEXT NOT NULL,
  credential_value TEXT NOT NULL,
  description TEXT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  is_active BOOLEAN DEFAULT 1,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
 CREATE INDEX IF NOT EXISTS idx_user_credentials_user_id ON user_credentials(user_id);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_type ON user_credentials(credential_type);
 CREATE INDEX IF NOT EXISTS idx_user_credentials_active ON user_credentials(is_active);
 ${USER_NOTIFICATION_PREFERENCES_TABLE_SQL}
 ${VAPID_KEYS_TABLE_SQL}
 ${PUSH_SUBSCRIPTIONS_TABLE_SQL}
 ${SESSION_NAMES_TABLE_SQL}
 ${SESSION_NAMES_LOOKUP_INDEX_SQL}
 ${APP_CONFIG_TABLE_SQL}
 `;
--- a/server/gemini-cli.js
+++ b/server/gemini-cli.js
@@ -1,8 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import crossSpawn from 'cross-spawn';
 // Use cross-spawn on Windows for correct .cmd resolution (same pattern as cursor-cli.js)
 const spawnFunction = process.platform === 'win32' ? crossSpawn : spawn;
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
@@ -10,7 +6,6 @@ import sessionManager from './sessionManager.js';
 import GeminiResponseHandler from './gemini-response-handler.js';
 import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 import { createNormalizedMessage } from './providers/types.js';
 import { getStatusChecker } from './providers/registry.js';
 let activeGeminiProcesses = new Map(); // Track active processes by session ID
@@ -169,7 +164,7 @@ async function spawnGemini(command, options = {}, ws) {
    }
    return new Promise((resolve, reject) => {
-        const geminiProcess = spawnFunction(spawnCmd, spawnArgs, {
+        const geminiProcess = spawn(spawnCmd, spawnArgs, {
            cwd: workingDir,
            stdio: ['pipe', 'pipe', 'pipe'],
            env: { ...process.env } // Inherit all environment variables
@@ -381,15 +376,6 @@ async function spawnGemini(command, options = {}, ws) {
                notifyTerminalState({ code });
                resolve();
            } else {
                // code 127 = shell "command not found" — check installation
                if (code === 127) {
                    const installed = getStatusChecker('gemini')?.checkInstalled() ?? true;
                    if (!installed) {
                        const socketSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : finalSessionId;
                        ws.send(createNormalizedMessage({ kind: 'error', content: 'Gemini CLI is not installed. Please install it first: https://github.com/google-gemini/gemini-cli', sessionId: socketSessionId, provider: 'gemini' }));
                    }
                }
                notifyTerminalState({
                    code,
                    error: code === null ? 'Gemini CLI process was terminated or timed out' : null
@@ -404,14 +390,8 @@ async function spawnGemini(command, options = {}, ws) {
            const finalSessionId = capturedSessionId || sessionId || processKey;
            activeGeminiProcesses.delete(finalSessionId);
            // Check if Gemini CLI is installed for a clearer error message
            const installed = getStatusChecker('gemini')?.checkInstalled() ?? true;
            const errorContent = !installed
                ? 'Gemini CLI is not installed. Please install it first: https://github.com/google-gemini/gemini-cli'
                : error.message;
            const errorSessionId = typeof ws.getSessionId === 'function' ? ws.getSessionId() : finalSessionId;
-            ws.send(createNormalizedMessage({ kind: 'error', content: errorContent, sessionId: errorSessionId, provider: 'gemini' }));
+            ws.send(createNormalizedMessage({ kind: 'error', content: error.message, sessionId: errorSessionId, provider: 'gemini' }));
            notifyTerminalState({ error });
            reject(error);
--- a/server/index.js
+++ b/server/index.js
@@ -3,15 +3,33 @@
 import './load-env.js';
 import fs from 'fs';
 import path from 'path';
-import { findAppRoot, getModuleDir } from './utils/runtime-paths.js';
+import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-const __dirname = getModuleDir(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
-// The server source runs from /server, while the compiled output runs from /dist-server/server.
+const __dirname = dirname(__filename);
 // Resolving the app root once keeps every repo-level lookup below aligned across both layouts.
 const APP_ROOT = findAppRoot(__dirname);
 const installMode = fs.existsSync(path.join(APP_ROOT, '.git')) ? 'git' : 'npm';
-import { c } from './utils/colors.js';
+const installMode = fs.existsSync(path.join(__dirname, '..', '.git')) ? 'git' : 'npm';
 // ANSI color codes for terminal output
 const colors = {
    reset: '\x1b[0m',
    bright: '\x1b[1m',
    cyan: '\x1b[36m',
    green: '\x1b[32m',
    yellow: '\x1b[33m',
    blue: '\x1b[34m',
    dim: '\x1b[2m',
 };
 const c = {
    info: (text) => `${colors.cyan}${text}${colors.reset}`,
    ok: (text) => `${colors.green}${text}${colors.reset}`,
    warn: (text) => `${colors.yellow}${text}${colors.reset}`,
    tip: (text) => `${colors.blue}${text}${colors.reset}`,
    bright: (text) => `${colors.bright}${text}${colors.reset}`,
    dim: (text) => `${colors.dim}${text}${colors.reset}`,
 };
 console.log('SERVER_PORT from env:', process.env.SERVER_PORT);
@@ -21,7 +39,7 @@ import os from 'os';
 import http from 'http';
 import cors from 'cors';
 import { promises as fsPromises } from 'fs';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import pty from 'node-pty';
 import fetch from 'node-fetch';
 import mime from 'mime-types';
@@ -208,7 +226,68 @@ const server = http.createServer(app);
 const ptySessionsMap = new Map();
 const PTY_SESSION_TIMEOUT = 30 * 60 * 1000;
 const SHELL_URL_PARSE_BUFFER_LIMIT = 32768;
-import { stripAnsiSequences, normalizeDetectedUrl, extractUrlsFromText, shouldAutoOpenUrlFromOutput } from './utils/url-detection.js';
+const ANSI_ESCAPE_SEQUENCE_REGEX = /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1B\\))/g;
 const TRAILING_URL_PUNCTUATION_REGEX = /[)\]}>.,;:!?]+$/;
 function stripAnsiSequences(value = '') {
    return value.replace(ANSI_ESCAPE_SEQUENCE_REGEX, '');
 }
 function normalizeDetectedUrl(url) {
    if (!url || typeof url !== 'string') return null;
    const cleaned = url.trim().replace(TRAILING_URL_PUNCTUATION_REGEX, '');
    if (!cleaned) return null;
    try {
        const parsed = new URL(cleaned);
        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
            return null;
        }
        return parsed.toString();
    } catch {
        return null;
    }
 }
 function extractUrlsFromText(value = '') {
    const directMatches = value.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/gi) || [];
    // Handle wrapped terminal URLs split across lines by terminal width.
    const wrappedMatches = [];
    const continuationRegex = /^[A-Za-z0-9\-._~:/?#\[\]@!$&'()*+,;=%]+$/;
    const lines = value.split(/\r?\n/);
    for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        const startMatch = line.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/i);
        if (!startMatch) continue;
        let combined = startMatch[0];
        let j = i + 1;
        while (j < lines.length) {
            const continuation = lines[j].trim();
            if (!continuation) break;
            if (!continuationRegex.test(continuation)) break;
            combined += continuation;
            j++;
        }
        wrappedMatches.push(combined.replace(/\r?\n\s*/g, ''));
    }
    return Array.from(new Set([...directMatches, ...wrappedMatches]));
 }
 function shouldAutoOpenUrlFromOutput(value = '') {
    const normalized = value.toLowerCase();
    return (
        normalized.includes('browser didn\'t open') ||
        normalized.includes('open this url') ||
        normalized.includes('continue in your browser') ||
        normalized.includes('press enter to open') ||
        normalized.includes('open_url:')
    );
 }
 // Single WebSocket server that handles both paths
 const wss = new WebSocketServer({
@@ -326,11 +405,11 @@ app.use('/api/sessions', authenticateToken, messagesRoutes);
 app.use('/api/agent', agentRoutes);
 // Serve public files (like api-docs.html)
-app.use(express.static(path.join(APP_ROOT, 'public')));
+app.use(express.static(path.join(__dirname, '../public')));
 // Static files served after API routes
 // Add cache control: HTML files should not be cached, but assets can be cached
-app.use(express.static(path.join(APP_ROOT, 'dist'), {
+app.use(express.static(path.join(__dirname, '../dist'), {
    setHeaders: (res, filePath) => {
        if (filePath.endsWith('.html')) {
            // Prevent HTML caching to avoid service worker issues after builds
@@ -352,7 +431,7 @@ app.use(express.static(path.join(APP_ROOT, 'dist'), {
 app.post('/api/system/update', authenticateToken, async (req, res) => {
    try {
        // Get the project root directory (parent of server directory)
-        const projectRoot = APP_ROOT;
+        const projectRoot = path.join(__dirname, '..');
        console.log('Starting system update from directory:', projectRoot);
@@ -494,15 +573,12 @@ app.put('/api/sessions/:sessionId/rename', authenticateToken, async (req, res) =
    }
 });
-// Delete project endpoint
+// Delete project endpoint (force=true to delete with sessions)
 // force=true to allow removal even when sessions exist
 // deleteData=true to also delete session/memory files on disk (destructive)
 app.delete('/api/projects/:projectName', authenticateToken, async (req, res) => {
    try {
        const { projectName } = req.params;
        const force = req.query.force === 'true';
-        const deleteData = req.query.deleteData === 'true';
+        await deleteProject(projectName, force);
        await deleteProject(projectName, force, deleteData);
        res.json({ success: true });
    } catch (error) {
        res.status(500).json({ error: error.message });
@@ -2197,7 +2273,7 @@ app.get('*', (req, res) => {
    // Only serve index.html for HTML routes, not for static assets
    // Static assets should already be handled by express.static middleware above
-    const indexPath = path.join(APP_ROOT, 'dist', 'index.html');
+    const indexPath = path.join(__dirname, '../dist/index.html');
    // Check if dist/index.html exists (production build available)
    if (fs.existsSync(indexPath)) {
@@ -2312,7 +2388,7 @@ async function startServer() {
        configureWebPush();
        // Check if running in production mode (dist folder exists)
-        const distIndexPath = path.join(APP_ROOT, 'dist', 'index.html');
+        const distIndexPath = path.join(__dirname, '../dist/index.html');
        const isProduction = fs.existsSync(distIndexPath);
        // Log Claude implementation mode
@@ -2326,7 +2402,7 @@ async function startServer() {
        console.log(`${c.info('[INFO]')} To run in development mode with hot-module replacement, go to http://${DISPLAY_HOST}:${VITE_PORT}`);
        server.listen(SERVER_PORT, HOST, async () => {
-            const appInstallPath = APP_ROOT;
+            const appInstallPath = path.join(__dirname, '..');
            console.log('');
            console.log(c.dim('═'.repeat(63)));
--- a/server/load-env.js
+++ b/server/load-env.js
@@ -2,15 +2,14 @@
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
-import { findAppRoot, getModuleDir } from './utils/runtime-paths.js';
+import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-const __dirname = getModuleDir(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
-// Resolve the repo/app root via the nearest /server folder so this file keeps finding the
+const __dirname = dirname(__filename);
 // same top-level .env file from both /server/load-env.js and /dist-server/server/load-env.js.
 const APP_ROOT = findAppRoot(__dirname);
 try {
-  const envPath = path.join(APP_ROOT, '.env');
+  const envPath = path.join(__dirname, '../.env');
  const envFile = fs.readFileSync(envPath, 'utf8');
  envFile.split('\n').forEach(line => {
    const trimmedLine = line.trim();
@@ -25,10 +24,6 @@ try {
  console.log('No .env file found or error reading it:', e.message);
 }
 // Keep the default database in a stable user-level location so rebuilding dist-server
 // never changes where the backend stores auth.db when DATABASE_PATH is not set explicitly.
 const DEFAULT_DATABASE_PATH = path.join(os.homedir(), '.cloudcli', 'auth.db');
 if (!process.env.DATABASE_PATH) {
-  process.env.DATABASE_PATH = DEFAULT_DATABASE_PATH;
+  process.env.DATABASE_PATH = path.join(os.homedir(), '.cloudcli', 'auth.db');
 }
--- a/server/openai-codex.js
+++ b/server/openai-codex.js
@@ -17,7 +17,6 @@ import { Codex } from '@openai/codex-sdk';
 import { notifyRunFailed, notifyRunStopped } from './services/notification-orchestrator.js';
 import { codexAdapter } from './providers/codex/adapter.js';
 import { createNormalizedMessage } from './providers/types.js';
 import { getStatusChecker } from './providers/registry.js';
 // Track active sessions
 const activeCodexSessions = new Map();
@@ -309,14 +308,7 @@ export async function queryCodex(command, options = {}, ws) {
    if (!wasAborted) {
      console.error('[Codex] Error:', error);
-
+      sendMessage(ws, createNormalizedMessage({ kind: 'error', content: error.message, sessionId: currentSessionId, provider: 'codex' }));
      // Check if Codex SDK is available for a clearer error message
      const installed = getStatusChecker('codex')?.checkInstalled() ?? true;
      const errorContent = !installed
        ? 'Codex CLI is not configured. Please set up authentication first.'
        : error.message;
      sendMessage(ws, createNormalizedMessage({ kind: 'error', content: errorContent, sessionId: currentSessionId, provider: 'codex' }));
      if (!terminalFailure) {
        notifyRunFailed({
          userId: ws?.userId || null,
--- a/server/projects.js
+++ b/server/projects.js
@@ -62,7 +62,8 @@ import fsSync from 'fs';
 import path from 'path';
 import readline from 'readline';
 import crypto from 'crypto';
-import Database from 'better-sqlite3';
+import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import os from 'os';
 import sessionManager from './sessionManager.js';
 import { applyCustomSessionNames } from './database/db.js';
@@ -1163,9 +1164,8 @@ async function isProjectEmpty(projectName) {
  }
 }
-// Remove a project from the UI.
+// Delete a project (force=true to delete even with sessions)
-// When deleteData=true, also delete session/memory files on disk (destructive).
+async function deleteProject(projectName, force = false) {
 async function deleteProject(projectName, force = false, deleteData = false) {
  const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
  try {
@@ -1175,50 +1175,48 @@ async function deleteProject(projectName, force = false, deleteData = false) {
    }
    const config = await loadProjectConfig();
    let projectPath = config[projectName]?.path || config[projectName]?.originalPath;
-    // Destructive path: delete underlying data when explicitly requested
+    // Fallback to extractProjectDirectory if projectPath is not in config
-    if (deleteData) {
+    if (!projectPath) {
-      let projectPath = config[projectName]?.path || config[projectName]?.originalPath;
+      projectPath = await extractProjectDirectory(projectName);
-      if (!projectPath) {
+    }
-        projectPath = await extractProjectDirectory(projectName);
+
    // Remove the project directory (includes all Claude sessions)
    await fs.rm(projectDir, { recursive: true, force: true });
    // Delete all Codex sessions associated with this project
    if (projectPath) {
      try {
        const codexSessions = await getCodexSessions(projectPath, { limit: 0 });
        for (const session of codexSessions) {
          try {
            await deleteCodexSession(session.id);
          } catch (err) {
            console.warn(`Failed to delete Codex session ${session.id}:`, err.message);
          }
        }
      } catch (err) {
        console.warn('Failed to delete Codex sessions:', err.message);
      }
-      // Remove the Claude project directory (session logs, memory, subagent data)
+      // Delete Cursor sessions directory if it exists
-      await fs.rm(projectDir, { recursive: true, force: true });
+      try {
-
+        const hash = crypto.createHash('md5').update(projectPath).digest('hex');
-      // Delete Codex sessions associated with this project
+        const cursorProjectDir = path.join(os.homedir(), '.cursor', 'chats', hash);
-      if (projectPath) {
+        await fs.rm(cursorProjectDir, { recursive: true, force: true });
-        try {
+      } catch (err) {
-          const codexSessions = await getCodexSessions(projectPath, { limit: 0 });
+        // Cursor dir may not exist, ignore
          for (const session of codexSessions) {
            try {
              await deleteCodexSession(session.id);
            } catch (err) {
              console.warn(`Failed to delete Codex session ${session.id}:`, err.message);
            }
          }
        } catch (err) {
          console.warn('Failed to delete Codex sessions:', err.message);
        }
        // Delete Cursor sessions directory if it exists
        try {
          const hash = crypto.createHash('md5').update(projectPath).digest('hex');
          const cursorProjectDir = path.join(os.homedir(), '.cursor', 'chats', hash);
          await fs.rm(cursorProjectDir, { recursive: true, force: true });
        } catch (err) {
          // Cursor dir may not exist, ignore
        }
      }
    }
-    // Always remove from project config
+    // Remove from project config
    delete config[projectName];
    await saveProjectConfig(config);
    return true;
  } catch (error) {
-    console.error(`Error removing project ${projectName}:`, error);
+    console.error(`Error deleting project ${projectName}:`, error);
    throw error;
  }
 }
@@ -1307,10 +1305,16 @@ async function getCursorSessions(projectPath) {
        } catch (_) { }
        // Open SQLite database
-        const db = new Database(storeDbPath, { readonly: true, fileMustExist: true });
+        const db = await open({
          filename: storeDbPath,
          driver: sqlite3.Database,
          mode: sqlite3.OPEN_READONLY
        });
        // Get metadata from meta table
-        const metaRows = db.prepare('SELECT key, value FROM meta').all();
+        const metaRows = await db.all(`
          SELECT key, value FROM meta
        `);
        // Parse metadata
        let metadata = {};
@@ -1332,9 +1336,11 @@ async function getCursorSessions(projectPath) {
        }
        // Get message count
-        const messageCountResult = db.prepare('SELECT COUNT(*) as count FROM blobs').get();
+        const messageCountResult = await db.get(`
          SELECT COUNT(*) as count FROM blobs
        `);
-        db.close();
+        await db.close();
        // Extract session info
        const sessionName = metadata.title || metadata.sessionTitle || 'Untitled Session';
--- a/server/providers/claude/status.js
+++ b/server/providers/claude/status.js
@@ -1,136 +0,0 @@
 /**
 * Claude Provider Status
 *
 * Checks whether Claude Code CLI is installed and whether the user
 * has valid authentication credentials.
 *
 * @module providers/claude/status
 */
 import { execFileSync } from 'child_process';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 /**
 * Check if Claude Code CLI is installed and available.
 * Uses CLAUDE_CLI_PATH env var if set, otherwise looks for 'claude' in PATH.
 * @returns {boolean}
 */
 export function checkInstalled() {
  const cliPath = process.env.CLAUDE_CLI_PATH || 'claude';
  try {
    execFileSync(cliPath, ['--version'], { stdio: 'ignore', timeout: 5000 });
    return true;
  } catch {
    return false;
  }
 }
 /**
 * Full status check: installation + authentication.
 * @returns {Promise<import('../types.js').ProviderStatus>}
 */
 export async function checkStatus() {
  const installed = checkInstalled();
  if (!installed) {
    return {
      installed,
      authenticated: false,
      email: null,
      method: null,
      error: 'Claude Code CLI is not installed'
    };
  }
  const credentialsResult = await checkCredentials();
  if (credentialsResult.authenticated) {
    return {
      installed,
      authenticated: true,
      email: credentialsResult.email || 'Authenticated',
      method: credentialsResult.method || null,
      error: null
    };
  }
  return {
    installed,
    authenticated: false,
    email: credentialsResult.email || null,
    method: credentialsResult.method || null,
    error: credentialsResult.error || 'Not authenticated'
  };
 }
 // ─── Internal helpers ───────────────────────────────────────────────────────
 async function loadSettingsEnv() {
  try {
    const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
    const content = await fs.readFile(settingsPath, 'utf8');
    const settings = JSON.parse(content);
    if (settings?.env && typeof settings.env === 'object') {
      return settings.env;
    }
  } catch {
    // Ignore missing or malformed settings.
  }
  return {};
 }
 /**
 * Checks Claude authentication credentials.
 *
 * Priority 1: ANTHROPIC_API_KEY environment variable
 * Priority 1b: ~/.claude/settings.json env values
 * Priority 2: ~/.claude/.credentials.json OAuth tokens
 */
 async function checkCredentials() {
  if (process.env.ANTHROPIC_API_KEY && process.env.ANTHROPIC_API_KEY.trim()) {
    return { authenticated: true, email: 'API Key Auth', method: 'api_key' };
  }
  const settingsEnv = await loadSettingsEnv();
  if (typeof settingsEnv.ANTHROPIC_API_KEY === 'string' && settingsEnv.ANTHROPIC_API_KEY.trim()) {
    return { authenticated: true, email: 'API Key Auth', method: 'api_key' };
  }
  if (typeof settingsEnv.ANTHROPIC_AUTH_TOKEN === 'string' && settingsEnv.ANTHROPIC_AUTH_TOKEN.trim()) {
    return { authenticated: true, email: 'Configured via settings.json', method: 'api_key' };
  }
  try {
    const credPath = path.join(os.homedir(), '.claude', '.credentials.json');
    const content = await fs.readFile(credPath, 'utf8');
    const creds = JSON.parse(content);
    const oauth = creds.claudeAiOauth;
    if (oauth && oauth.accessToken) {
      const isExpired = oauth.expiresAt && Date.now() >= oauth.expiresAt;
      if (!isExpired) {
        return {
          authenticated: true,
          email: creds.email || creds.user || null,
          method: 'credentials_file'
        };
      }
      return {
        authenticated: false,
        email: creds.email || creds.user || null,
        method: 'credentials_file',
        error: 'OAuth token has expired. Please re-authenticate with claude login'
      };
    }
    return { authenticated: false, email: null, method: null };
  } catch {
    return { authenticated: false, email: null, method: null };
  }
 }
--- a/server/providers/codex/status.js
+++ b/server/providers/codex/status.js
@@ -1,78 +0,0 @@
 /**
 * Codex Provider Status
 *
 * Checks whether the user has valid Codex authentication credentials.
 * Codex uses an SDK that makes direct API calls (no external binary),
 * so installation check always returns true if the server is running.
 *
 * @module providers/codex/status
 */
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 /**
 * Check if Codex is installed.
 * Codex SDK is bundled with this application — no external binary needed.
 * @returns {boolean}
 */
 export function checkInstalled() {
  return true;
 }
 /**
 * Full status check: installation + authentication.
 * @returns {Promise<import('../types.js').ProviderStatus>}
 */
 export async function checkStatus() {
  const installed = checkInstalled();
  const result = await checkCredentials();
  return {
    installed,
    authenticated: result.authenticated,
    email: result.email || null,
    error: result.error || null
  };
 }
 // ─── Internal helpers ───────────────────────────────────────────────────────
 async function checkCredentials() {
  try {
    const authPath = path.join(os.homedir(), '.codex', 'auth.json');
    const content = await fs.readFile(authPath, 'utf8');
    const auth = JSON.parse(content);
    const tokens = auth.tokens || {};
    if (tokens.id_token || tokens.access_token) {
      let email = 'Authenticated';
      if (tokens.id_token) {
        try {
          const parts = tokens.id_token.split('.');
          if (parts.length >= 2) {
            const payload = JSON.parse(Buffer.from(parts[1], 'base64url').toString('utf8'));
            email = payload.email || payload.user || 'Authenticated';
          }
        } catch {
          email = 'Authenticated';
        }
      }
      return { authenticated: true, email };
    }
    if (auth.OPENAI_API_KEY) {
      return { authenticated: true, email: 'API Key Auth' };
    }
    return { authenticated: false, email: null, error: 'No valid tokens found' };
  } catch (error) {
    if (error.code === 'ENOENT') {
      return { authenticated: false, email: null, error: 'Codex not configured' };
    }
    return { authenticated: false, email: null, error: error.message };
  }
 }
--- a/server/providers/cursor/adapter.js
+++ b/server/providers/cursor/adapter.js
@@ -20,16 +20,21 @@ const PROVIDER = 'cursor';
 * @returns {Promise<Array<{id: string, sequence: number, rowid: number, content: object}>>}
 */
 async function loadCursorBlobs(sessionId, projectPath) {
-  // Lazy-import better-sqlite3 so the module doesn't fail if it's unavailable
+  // Lazy-import sqlite so the module doesn't fail if sqlite3 is unavailable
-  const { default: Database } = await import('better-sqlite3');
+  const { default: sqlite3 } = await import('sqlite3');
  const { open } = await import('sqlite');
  const cwdId = crypto.createHash('md5').update(projectPath || process.cwd()).digest('hex');
  const storeDbPath = path.join(os.homedir(), '.cursor', 'chats', cwdId, sessionId, 'store.db');
-  const db = new Database(storeDbPath, { readonly: true, fileMustExist: true });
+  const db = await open({
    filename: storeDbPath,
    driver: sqlite3.Database,
    mode: sqlite3.OPEN_READONLY,
  });
  try {
-    const allBlobs = db.prepare('SELECT rowid, id, data FROM blobs').all();
+    const allBlobs = await db.all('SELECT rowid, id, data FROM blobs');
    const blobMap = new Map();
    const parentRefs = new Map();
@@ -124,7 +129,7 @@ async function loadCursorBlobs(sessionId, projectPath) {
    return messages;
  } finally {
-    db.close();
+    await db.close();
  }
 }
--- a/server/providers/cursor/status.js
+++ b/server/providers/cursor/status.js
@@ -1,128 +0,0 @@
 /**
 * Cursor Provider Status
 *
 * Checks whether cursor-agent CLI is installed and whether the user
 * is logged in.
 *
 * @module providers/cursor/status
 */
 import { execFileSync, spawn } from 'child_process';
 /**
 * Check if cursor-agent CLI is installed.
 * @returns {boolean}
 */
 export function checkInstalled() {
  try {
    execFileSync('cursor-agent', ['--version'], { stdio: 'ignore', timeout: 5000 });
    return true;
  } catch {
    return false;
  }
 }
 /**
 * Full status check: installation + authentication.
 * @returns {Promise<import('../types.js').ProviderStatus>}
 */
 export async function checkStatus() {
  const installed = checkInstalled();
  if (!installed) {
    return {
      installed,
      authenticated: false,
      email: null,
      error: 'Cursor CLI is not installed'
    };
  }
  const result = await checkCursorLogin();
  return {
    installed,
    authenticated: result.authenticated,
    email: result.email || null,
    error: result.error || null
  };
 }
 // ─── Internal helpers ───────────────────────────────────────────────────────
 function checkCursorLogin() {
  return new Promise((resolve) => {
    let processCompleted = false;
    const timeout = setTimeout(() => {
      if (!processCompleted) {
        processCompleted = true;
        if (childProcess) {
          childProcess.kill();
        }
        resolve({
          authenticated: false,
          email: null,
          error: 'Command timeout'
        });
      }
    }, 5000);
    let childProcess;
    try {
      childProcess = spawn('cursor-agent', ['status']);
    } catch {
      clearTimeout(timeout);
      processCompleted = true;
      resolve({
        authenticated: false,
        email: null,
        error: 'Cursor CLI not found or not installed'
      });
      return;
    }
    let stdout = '';
    let stderr = '';
    childProcess.stdout.on('data', (data) => {
      stdout += data.toString();
    });
    childProcess.stderr.on('data', (data) => {
      stderr += data.toString();
    });
    childProcess.on('close', (code) => {
      if (processCompleted) return;
      processCompleted = true;
      clearTimeout(timeout);
      if (code === 0) {
        const emailMatch = stdout.match(/Logged in as ([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/i);
        if (emailMatch) {
          resolve({ authenticated: true, email: emailMatch[1] });
        } else if (stdout.includes('Logged in')) {
          resolve({ authenticated: true, email: 'Logged in' });
        } else {
          resolve({ authenticated: false, email: null, error: 'Not logged in' });
        }
      } else {
        resolve({ authenticated: false, email: null, error: stderr || 'Not logged in' });
      }
    });
    childProcess.on('error', () => {
      if (processCompleted) return;
      processCompleted = true;
      clearTimeout(timeout);
      resolve({
        authenticated: false,
        email: null,
        error: 'Cursor CLI not found or not installed'
      });
    });
  });
 }
--- a/server/providers/gemini/status.js
+++ b/server/providers/gemini/status.js
@@ -1,111 +0,0 @@
 /**
 * Gemini Provider Status
 *
 * Checks whether Gemini CLI is installed and whether the user
 * has valid authentication credentials.
 *
 * @module providers/gemini/status
 */
 import { execFileSync } from 'child_process';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
 /**
 * Check if Gemini CLI is installed.
 * Uses GEMINI_PATH env var if set, otherwise looks for 'gemini' in PATH.
 * @returns {boolean}
 */
 export function checkInstalled() {
  const cliPath = process.env.GEMINI_PATH || 'gemini';
  try {
    execFileSync(cliPath, ['--version'], { stdio: 'ignore', timeout: 5000 });
    return true;
  } catch {
    return false;
  }
 }
 /**
 * Full status check: installation + authentication.
 * @returns {Promise<import('../types.js').ProviderStatus>}
 */
 export async function checkStatus() {
  const installed = checkInstalled();
  if (!installed) {
    return {
      installed,
      authenticated: false,
      email: null,
      error: 'Gemini CLI is not installed'
    };
  }
  const result = await checkCredentials();
  return {
    installed,
    authenticated: result.authenticated,
    email: result.email || null,
    error: result.error || null
  };
 }
 // ─── Internal helpers ───────────────────────────────────────────────────────
 async function checkCredentials() {
  if (process.env.GEMINI_API_KEY && process.env.GEMINI_API_KEY.trim()) {
    return { authenticated: true, email: 'API Key Auth' };
  }
  try {
    const credsPath = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
    const content = await fs.readFile(credsPath, 'utf8');
    const creds = JSON.parse(content);
    if (creds.access_token) {
      let email = 'OAuth Session';
      try {
        const tokenRes = await fetch(`https://oauth2.googleapis.com/tokeninfo?access_token=${creds.access_token}`);
        if (tokenRes.ok) {
          const tokenInfo = await tokenRes.json();
          if (tokenInfo.email) {
            email = tokenInfo.email;
          }
        } else if (!creds.refresh_token) {
          return {
            authenticated: false,
            email: null,
            error: 'Access token invalid and no refresh token found'
          };
        } else {
          // Token might be expired but we have a refresh token, so CLI will refresh it
          email = await getActiveAccountEmail() || email;
        }
      } catch {
        // Network error, fallback to checking local accounts file
        email = await getActiveAccountEmail() || email;
      }
      return { authenticated: true, email };
    }
    return { authenticated: false, email: null, error: 'No valid tokens found in oauth_creds' };
  } catch {
    return { authenticated: false, email: null, error: 'Gemini CLI not configured' };
  }
 }
 async function getActiveAccountEmail() {
  try {
    const accPath = path.join(os.homedir(), '.gemini', 'google_accounts.json');
    const accContent = await fs.readFile(accPath, 'utf8');
    const accounts = JSON.parse(accContent);
    return accounts.active || null;
  } catch {
    return null;
  }
 }
--- a/server/providers/registry.js
+++ b/server/providers/registry.js
@@ -1,9 +1,8 @@
 /**
 * Provider Registry
 *
- * Centralizes provider adapter and status checker lookup. All code that needs
+ * Centralizes provider adapter lookup. All code that needs a provider adapter
- * a provider adapter or status checker should go through this registry instead
+ * should go through this registry instead of importing individual adapters directly.
 * of importing individual modules directly.
 *
 * @module providers/registry
 */
@@ -13,11 +12,6 @@ import { cursorAdapter } from './cursor/adapter.js';
 import { codexAdapter } from './codex/adapter.js';
 import { geminiAdapter } from './gemini/adapter.js';
 import * as claudeStatus from './claude/status.js';
 import * as cursorStatus from './cursor/status.js';
 import * as codexStatus from './codex/status.js';
 import * as geminiStatus from './gemini/status.js';
 /**
 * @typedef {import('./types.js').ProviderAdapter} ProviderAdapter
 * @typedef {import('./types.js').SessionProvider} SessionProvider
@@ -26,20 +20,12 @@ import * as geminiStatus from './gemini/status.js';
 /** @type {Map<string, ProviderAdapter>} */
 const providers = new Map();
 /** @type {Map<string, { checkInstalled: () => boolean, checkStatus: () => Promise<import('./types.js').ProviderStatus> }>} */
 const statusCheckers = new Map();
 // Register built-in providers
 providers.set('claude', claudeAdapter);
 providers.set('cursor', cursorAdapter);
 providers.set('codex', codexAdapter);
 providers.set('gemini', geminiAdapter);
 statusCheckers.set('claude', claudeStatus);
 statusCheckers.set('cursor', cursorStatus);
 statusCheckers.set('codex', codexStatus);
 statusCheckers.set('gemini', geminiStatus);
 /**
 * Get a provider adapter by name.
 * @param {string} name - Provider name (e.g., 'claude', 'cursor', 'codex', 'gemini')
@@ -49,15 +35,6 @@ export function getProvider(name) {
  return providers.get(name);
 }
 /**
 * Get a provider status checker by name.
 * @param {string} name - Provider name
 * @returns {{ checkInstalled: () => boolean, checkStatus: () => Promise<import('./types.js').ProviderStatus> } | undefined}
 */
 export function getStatusChecker(name) {
  return statusCheckers.get(name);
 }
 /**
 * Get all registered provider names.
 * @returns {string[]}
--- a/server/providers/types.js
+++ b/server/providers/types.js
@@ -69,19 +69,6 @@
 * @property {object} [tokenUsage] - Token usage data (provider-specific)
 */
 // ─── Provider Status ────────────────────────────────────────────────────────
 /**
 * Result of a provider status check (installation + authentication).
 *
 * @typedef {Object} ProviderStatus
 * @property {boolean} installed - Whether the provider's CLI/SDK is available
 * @property {boolean} authenticated - Whether valid credentials exist
 * @property {string|null} email - User email or auth method identifier
 * @property {string|null} [method] - Auth method (e.g. 'api_key', 'credentials_file')
 * @property {string|null} [error] - Error message if not installed or not authenticated
 */
 // ─── Provider Adapter Interface ──────────────────────────────────────────────
 /**
--- a/server/routes/agent.js
+++ b/server/routes/agent.js
@@ -1,5 +1,5 @@
 import express from 'express';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import path from 'path';
 import os from 'os';
 import { promises as fs } from 'fs';
--- a/server/routes/cli-auth.js
+++ b/server/routes/cli-auth.js
@@ -1,27 +1,434 @@
 /**
 * CLI Auth Routes
 *
 * Thin router that delegates to per-provider status checkers
 * registered in the provider registry.
 *
 * @module routes/cli-auth
 */
 import express from 'express';
-import { getAllProviders, getStatusChecker } from '../providers/registry.js';
+import { spawn } from 'cross-spawn';
 import fs from 'fs/promises';
 import path from 'path';
 import os from 'os';
 const router = express.Router();
-for (const provider of getAllProviders()) {
+router.get('/claude/status', async (req, res) => {
-  router.get(`/${provider}/status`, async (req, res) => {
+  try {
-    try {
+    const credentialsResult = await checkClaudeCredentials();
-      const checker = getStatusChecker(provider);
+
-      res.json(await checker.checkStatus());
+    if (credentialsResult.authenticated) {
-    } catch (error) {
+      return res.json({
-      console.error(`Error checking ${provider} status:`, error);
+        authenticated: true,
-      res.status(500).json({ authenticated: false, error: error.message });
+        email: credentialsResult.email || 'Authenticated',
        method: credentialsResult.method  // 'api_key' or 'credentials_file'
      });
    }
    return res.json({
      authenticated: false,
      email: null,
      method: null,
      error: credentialsResult.error || 'Not authenticated'
    });
  } catch (error) {
    console.error('Error checking Claude auth status:', error);
    res.status(500).json({
      authenticated: false,
      email: null,
      method: null,
      error: error.message
    });
  }
 });
 router.get('/cursor/status', async (req, res) => {
  try {
    const result = await checkCursorStatus();
    res.json({
      authenticated: result.authenticated,
      email: result.email,
      error: result.error
    });
  } catch (error) {
    console.error('Error checking Cursor auth status:', error);
    res.status(500).json({
      authenticated: false,
      email: null,
      error: error.message
    });
  }
 });
 router.get('/codex/status', async (req, res) => {
  try {
    const result = await checkCodexCredentials();
    res.json({
      authenticated: result.authenticated,
      email: result.email,
      error: result.error
    });
  } catch (error) {
    console.error('Error checking Codex auth status:', error);
    res.status(500).json({
      authenticated: false,
      email: null,
      error: error.message
    });
  }
 });
 router.get('/gemini/status', async (req, res) => {
  try {
    const result = await checkGeminiCredentials();
    res.json({
      authenticated: result.authenticated,
      email: result.email,
      error: result.error
    });
  } catch (error) {
    console.error('Error checking Gemini auth status:', error);
    res.status(500).json({
      authenticated: false,
      email: null,
      error: error.message
    });
  }
 });
 async function loadClaudeSettingsEnv() {
  try {
    const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
    const content = await fs.readFile(settingsPath, 'utf8');
    const settings = JSON.parse(content);
    if (settings?.env && typeof settings.env === 'object') {
      return settings.env;
    }
  } catch (error) {
    // Ignore missing or malformed settings and fall back to other auth sources.
  }
  return {};
 }
 /**
 * Checks Claude authentication credentials using two methods with priority order:
 *
 * Priority 1: ANTHROPIC_API_KEY environment variable
 * Priority 1b: ~/.claude/settings.json env values
 * Priority 2: ~/.claude/.credentials.json OAuth tokens
 *
 * The Claude Agent SDK prioritizes environment variables over authenticated subscriptions.
 * This matching behavior ensures consistency with how the SDK authenticates.
 *
 * References:
 * - https://support.claude.com/en/articles/12304248-managing-api-key-environment-variables-in-claude-code
 *   "Claude Code prioritizes environment variable API keys over authenticated subscriptions"
 * - https://platform.claude.com/docs/en/agent-sdk/overview
 *   SDK authentication documentation
 *
 * @returns {Promise<Object>} Authentication status with { authenticated, email, method }
 *   - authenticated: boolean indicating if valid credentials exist
 *   - email: user email or auth method identifier
 *   - method: 'api_key' for env var, 'credentials_file' for OAuth tokens
 */
 async function checkClaudeCredentials() {
  // Priority 1: Check for ANTHROPIC_API_KEY environment variable
  // The SDK checks this first and uses it if present, even if OAuth tokens exist.
  // When set, API calls are charged via pay-as-you-go rates instead of subscription.
  if (process.env.ANTHROPIC_API_KEY && process.env.ANTHROPIC_API_KEY.trim()) {
    return {
      authenticated: true,
      email: 'API Key Auth',
      method: 'api_key'
    };
  }
  // Priority 1b: Check ~/.claude/settings.json env values.
  // Claude Code can read proxy/auth values from settings.json even when the
  // CloudCLI server process itself was not started with those env vars exported.
  const settingsEnv = await loadClaudeSettingsEnv();
  if (typeof settingsEnv.ANTHROPIC_API_KEY === 'string' && settingsEnv.ANTHROPIC_API_KEY.trim()) {
    return {
      authenticated: true,
      email: 'API Key Auth',
      method: 'api_key'
    };
  }
  if (typeof settingsEnv.ANTHROPIC_AUTH_TOKEN === 'string' && settingsEnv.ANTHROPIC_AUTH_TOKEN.trim()) {
    return {
      authenticated: true,
      email: 'Configured via settings.json',
      method: 'api_key'
    };
  }
  // Priority 2: Check ~/.claude/.credentials.json for OAuth tokens
  // This is the standard authentication method used by Claude CLI after running
  // 'claude /login' or 'claude setup-token' commands.
  try {
    const credPath = path.join(os.homedir(), '.claude', '.credentials.json');
    const content = await fs.readFile(credPath, 'utf8');
    const creds = JSON.parse(content);
    const oauth = creds.claudeAiOauth;
    if (oauth && oauth.accessToken) {
      const isExpired = oauth.expiresAt && Date.now() >= oauth.expiresAt;
      if (!isExpired) {
        return {
          authenticated: true,
          email: creds.email || creds.user || null,
          method: 'credentials_file'
        };
      }
    }
    return {
      authenticated: false,
      email: null,
      method: null
    };
  } catch (error) {
    return {
      authenticated: false,
      email: null,
      method: null
    };
  }
 }
 function checkCursorStatus() {
  return new Promise((resolve) => {
    let processCompleted = false;
    const timeout = setTimeout(() => {
      if (!processCompleted) {
        processCompleted = true;
        if (childProcess) {
          childProcess.kill();
        }
        resolve({
          authenticated: false,
          email: null,
          error: 'Command timeout'
        });
      }
    }, 5000);
    let childProcess;
    try {
      childProcess = spawn('cursor-agent', ['status']);
    } catch (err) {
      clearTimeout(timeout);
      processCompleted = true;
      resolve({
        authenticated: false,
        email: null,
        error: 'Cursor CLI not found or not installed'
      });
      return;
    }
    let stdout = '';
    let stderr = '';
    childProcess.stdout.on('data', (data) => {
      stdout += data.toString();
    });
    childProcess.stderr.on('data', (data) => {
      stderr += data.toString();
    });
    childProcess.on('close', (code) => {
      if (processCompleted) return;
      processCompleted = true;
      clearTimeout(timeout);
      if (code === 0) {
        const emailMatch = stdout.match(/Logged in as ([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/i);
        if (emailMatch) {
          resolve({
            authenticated: true,
            email: emailMatch[1],
            output: stdout
          });
        } else if (stdout.includes('Logged in')) {
          resolve({
            authenticated: true,
            email: 'Logged in',
            output: stdout
          });
        } else {
          resolve({
            authenticated: false,
            email: null,
            error: 'Not logged in'
          });
        }
      } else {
        resolve({
          authenticated: false,
          email: null,
          error: stderr || 'Not logged in'
        });
      }
    });
    childProcess.on('error', (err) => {
      if (processCompleted) return;
      processCompleted = true;
      clearTimeout(timeout);
      resolve({
        authenticated: false,
        email: null,
        error: 'Cursor CLI not found or not installed'
      });
    });
  });
 }
 async function checkCodexCredentials() {
  try {
    const authPath = path.join(os.homedir(), '.codex', 'auth.json');
    const content = await fs.readFile(authPath, 'utf8');
    const auth = JSON.parse(content);
    // Tokens are nested under 'tokens' key
    const tokens = auth.tokens || {};
    // Check for valid tokens (id_token or access_token)
    if (tokens.id_token || tokens.access_token) {
      // Try to extract email from id_token JWT payload
      let email = 'Authenticated';
      if (tokens.id_token) {
        try {
          // JWT is base64url encoded: header.payload.signature
          const parts = tokens.id_token.split('.');
          if (parts.length >= 2) {
            // Decode the payload (second part)
            const payload = JSON.parse(Buffer.from(parts[1], 'base64url').toString('utf8'));
            email = payload.email || payload.user || 'Authenticated';
          }
        } catch {
          // If JWT decoding fails, use fallback
          email = 'Authenticated';
        }
      }
      return {
        authenticated: true,
        email
      };
    }
    // Also check for OPENAI_API_KEY as fallback auth method
    if (auth.OPENAI_API_KEY) {
      return {
        authenticated: true,
        email: 'API Key Auth'
      };
    }
    return {
      authenticated: false,
      email: null,
      error: 'No valid tokens found'
    };
  } catch (error) {
    if (error.code === 'ENOENT') {
      return {
        authenticated: false,
        email: null,
        error: 'Codex not configured'
      };
    }
    return {
      authenticated: false,
      email: null,
      error: error.message
    };
  }
 }
 async function checkGeminiCredentials() {
  if (process.env.GEMINI_API_KEY && process.env.GEMINI_API_KEY.trim()) {
    return {
      authenticated: true,
      email: 'API Key Auth'
    };
  }
  try {
    const credsPath = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
    const content = await fs.readFile(credsPath, 'utf8');
    const creds = JSON.parse(content);
    if (creds.access_token) {
      let email = 'OAuth Session';
      try {
        // Validate token against Google API
        const tokenRes = await fetch(`https://oauth2.googleapis.com/tokeninfo?access_token=${creds.access_token}`);
        if (tokenRes.ok) {
          const tokenInfo = await tokenRes.json();
          if (tokenInfo.email) {
            email = tokenInfo.email;
          }
        } else if (!creds.refresh_token) {
          // Token invalid and no refresh token available
          return {
            authenticated: false,
            email: null,
            error: 'Access token invalid and no refresh token found'
          };
        } else {
          // Token might be expired but we have a refresh token, so CLI will refresh it
          try {
            const accPath = path.join(os.homedir(), '.gemini', 'google_accounts.json');
            const accContent = await fs.readFile(accPath, 'utf8');
            const accounts = JSON.parse(accContent);
            if (accounts.active) {
              email = accounts.active;
            }
          } catch (e) { }
        }
      } catch (e) {
        // Network error, fallback to checking local accounts file
        try {
          const accPath = path.join(os.homedir(), '.gemini', 'google_accounts.json');
          const accContent = await fs.readFile(accPath, 'utf8');
          const accounts = JSON.parse(accContent);
          if (accounts.active) {
            email = accounts.active;
          }
        } catch (err) { }
      }
      return {
        authenticated: true,
        email: email
      };
    }
    return {
      authenticated: false,
      email: null,
      error: 'No valid tokens found in oauth_creds'
    };
  } catch (error) {
    return {
      authenticated: false,
      email: null,
      error: 'Gemini CLI not configured'
    };
  }
 }
 export default router;
--- a/server/routes/codex.js
+++ b/server/routes/codex.js
@@ -1,5 +1,5 @@
 import express from 'express';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
--- a/server/routes/commands.js
+++ b/server/routes/commands.js
@@ -1,15 +1,13 @@
 import express from 'express';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import os from 'os';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
 import { parseFrontmatter } from '../utils/frontmatter.js';
 import { findAppRoot, getModuleDir } from '../utils/runtime-paths.js';
-const __dirname = getModuleDir(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
-// This route reads the top-level package.json for the status command, so it needs the real
+const __dirname = path.dirname(__filename);
 // app root even after compilation moves the route file under dist-server/server/routes.
 const APP_ROOT = findAppRoot(__dirname);
 const router = express.Router();
@@ -293,7 +291,7 @@ Custom commands can be created in:
  '/status': async (args, context) => {
    // Read version from package.json
-    const packageJsonPath = path.join(APP_ROOT, 'package.json');
+    const packageJsonPath = path.join(path.dirname(__dirname), '..', 'package.json');
    let version = 'unknown';
    let packageName = 'claude-code-ui';
--- a/server/routes/cursor.js
+++ b/server/routes/cursor.js
@@ -2,7 +2,9 @@ import express from 'express';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
-import Database from 'better-sqlite3';
+import { spawn } from 'cross-spawn';
 import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import crypto from 'crypto';
 import { CURSOR_MODELS } from '../../shared/modelConstants.js';
 import { applyCustomSessionNames } from '../database/db.js';
@@ -385,10 +387,16 @@ router.get('/sessions', async (req, res) => {
        } catch (_) {}
        // Open SQLite database
-        const db = new Database(storeDbPath, { readonly: true, fileMustExist: true });
+        const db = await open({
          filename: storeDbPath,
          driver: sqlite3.Database,
          mode: sqlite3.OPEN_READONLY
        });
        // Get metadata from meta table
-        const metaRows = db.prepare('SELECT key, value FROM meta').all();
+        const metaRows = await db.all(`
          SELECT key, value FROM meta
        `);
        let sessionData = {
          id: sessionId,
@@ -450,11 +458,20 @@ router.get('/sessions', async (req, res) => {
        // Get message count from JSON blobs only (actual messages, not DAG structure)
        try {
-          const blobCount = db.prepare(`SELECT COUNT(*) as count FROM blobs WHERE substr(data, 1, 1) = X'7B'`).get();
+          const blobCount = await db.get(`
            SELECT COUNT(*) as count 
            FROM blobs 
            WHERE substr(data, 1, 1) = X'7B'
          `);
          sessionData.messageCount = blobCount.count;
          // Get the most recent JSON blob for preview (actual message, not DAG structure)
-          const lastBlob = db.prepare(`SELECT data FROM blobs WHERE substr(data, 1, 1) = X'7B' ORDER BY rowid DESC LIMIT 1`).get();
+          const lastBlob = await db.get(`
            SELECT data FROM blobs 
            WHERE substr(data, 1, 1) = X'7B'
            ORDER BY rowid DESC 
            LIMIT 1
          `);
          if (lastBlob && lastBlob.data) {
            try {
@@ -509,7 +526,7 @@ router.get('/sessions', async (req, res) => {
          console.log('Could not read blobs:', e.message);
        }
-        db.close();
+        await db.close();
        // Finalize createdAt: use parsed meta value when valid, else fall back to store.db mtime
        if (!sessionData.createdAt) {
@@ -561,4 +578,221 @@ router.get('/sessions', async (req, res) => {
    });
  }
 });
-export default router;
+
 // GET /api/cursor/sessions/:sessionId - Get specific Cursor session from SQLite
 router.get('/sessions/:sessionId', async (req, res) => {
  try {
    const { sessionId } = req.params;
    const { projectPath } = req.query;
    // Calculate cwdID hash for the project path
    const cwdId = crypto.createHash('md5').update(projectPath || process.cwd()).digest('hex');
    const storeDbPath = path.join(os.homedir(), '.cursor', 'chats', cwdId, sessionId, 'store.db');
    // Open SQLite database
    const db = await open({
      filename: storeDbPath,
      driver: sqlite3.Database,
      mode: sqlite3.OPEN_READONLY
    });
    // Get all blobs to build the DAG structure
    const allBlobs = await db.all(`
      SELECT rowid, id, data FROM blobs
    `);
    // Build the DAG structure from parent-child relationships
    const blobMap = new Map(); // id -> blob data
    const parentRefs = new Map(); // blob id -> [parent blob ids]
    const childRefs = new Map(); // blob id -> [child blob ids]
    const jsonBlobs = []; // Clean JSON messages
    for (const blob of allBlobs) {
      blobMap.set(blob.id, blob);
      // Check if this is a JSON blob (actual message) or protobuf (DAG structure)
      if (blob.data && blob.data[0] === 0x7B) { // Starts with '{' - JSON blob
        try {
          const parsed = JSON.parse(blob.data.toString('utf8'));
          jsonBlobs.push({ ...blob, parsed });
        } catch (e) {
          console.log('Failed to parse JSON blob:', blob.rowid);
        }
      } else if (blob.data) { // Protobuf blob - extract parent references
        const parents = [];
        let i = 0;
        // Scan for parent references (0x0A 0x20 followed by 32-byte hash)
        while (i < blob.data.length - 33) {
          if (blob.data[i] === 0x0A && blob.data[i+1] === 0x20) {
            const parentHash = blob.data.slice(i+2, i+34).toString('hex');
            if (blobMap.has(parentHash)) {
              parents.push(parentHash);
            }
            i += 34;
          } else {
            i++;
          }
        }
        if (parents.length > 0) {
          parentRefs.set(blob.id, parents);
          // Update child references
          for (const parentId of parents) {
            if (!childRefs.has(parentId)) {
              childRefs.set(parentId, []);
            }
            childRefs.get(parentId).push(blob.id);
          }
        }
      }
    }
    // Perform topological sort to get chronological order
    const visited = new Set();
    const sorted = [];
    // DFS-based topological sort
    function visit(nodeId) {
      if (visited.has(nodeId)) return;
      visited.add(nodeId);
      // Visit all parents first (dependencies)
      const parents = parentRefs.get(nodeId) || [];
      for (const parentId of parents) {
        visit(parentId);
      }
      // Add this node after all its parents
      const blob = blobMap.get(nodeId);
      if (blob) {
        sorted.push(blob);
      }
    }
    // Start with nodes that have no parents (roots)
    for (const blob of allBlobs) {
      if (!parentRefs.has(blob.id)) {
        visit(blob.id);
      }
    }
    // Visit any remaining nodes (disconnected components)
    for (const blob of allBlobs) {
      visit(blob.id);
    }
    // Now extract JSON messages in the order they appear in the sorted DAG
    const messageOrder = new Map(); // JSON blob id -> order index
    let orderIndex = 0;
    for (const blob of sorted) {
      // Check if this blob references any JSON messages
      if (blob.data && blob.data[0] !== 0x7B) { // Protobuf blob
        // Look for JSON blob references
        for (const jsonBlob of jsonBlobs) {
          try {
            const jsonIdBytes = Buffer.from(jsonBlob.id, 'hex');
            if (blob.data.includes(jsonIdBytes)) {
              if (!messageOrder.has(jsonBlob.id)) {
                messageOrder.set(jsonBlob.id, orderIndex++);
              }
            }
          } catch (e) {
            // Skip if can't convert ID
          }
        }
      }
    }
    // Sort JSON blobs by their appearance order in the DAG
    const sortedJsonBlobs = jsonBlobs.sort((a, b) => {
      const orderA = messageOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
      const orderB = messageOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
      if (orderA !== orderB) return orderA - orderB;
      // Fallback to rowid if not in order map
      return a.rowid - b.rowid;
    });
    // Use sorted JSON blobs
    const blobs = sortedJsonBlobs.map((blob, idx) => ({
      ...blob,
      sequence_num: idx + 1,
      original_rowid: blob.rowid
    }));
    // Get metadata from meta table
    const metaRows = await db.all(`
      SELECT key, value FROM meta
    `);
    // Parse metadata
    let metadata = {};
    for (const row of metaRows) {
      if (row.value) {
        try {
          // Try to decode as hex-encoded JSON
          const hexMatch = row.value.toString().match(/^[0-9a-fA-F]+$/);
          if (hexMatch) {
            const jsonStr = Buffer.from(row.value, 'hex').toString('utf8');
            metadata[row.key] = JSON.parse(jsonStr);
          } else {
            metadata[row.key] = row.value.toString();
          }
        } catch (e) {
          metadata[row.key] = row.value.toString();
        }
      }
    }
    // Extract messages from sorted JSON blobs
    const messages = [];
    for (const blob of blobs) {
      try {
        // We already parsed JSON blobs earlier
        const parsed = blob.parsed;
        if (parsed) {
          // Filter out ONLY system messages at the server level
          // Check both direct role and nested message.role
          const role = parsed?.role || parsed?.message?.role;
          if (role === 'system') {
            continue; // Skip only system messages
          }
          messages.push({ 
            id: blob.id, 
            sequence: blob.sequence_num,
            rowid: blob.original_rowid, 
            content: parsed 
          });
        }
      } catch (e) {
        // Skip blobs that cause errors
        console.log(`Skipping blob ${blob.id}: ${e.message}`);
      }
    }
    await db.close();
    res.json({ 
      success: true, 
      session: {
        id: sessionId,
        projectPath: projectPath,
        messages: messages,
        metadata: metadata,
        cwdId: cwdId
      }
    });
  } catch (error) {
    console.error('Error reading Cursor session:', error);
    res.status(500).json({ 
      error: 'Failed to read Cursor session', 
      details: error.message 
    });
  }
 });
 export default router;
--- a/server/routes/git.js
+++ b/server/routes/git.js
@@ -1,5 +1,5 @@
 import express from 'express';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import path from 'path';
 import { promises as fs } from 'fs';
 import { extractProjectDirectory } from '../projects.js';
--- a/server/routes/mcp.js
+++ b/server/routes/mcp.js
@@ -4,7 +4,7 @@ import path from 'path';
 import os from 'os';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 const router = express.Router();
 const __filename = fileURLToPath(import.meta.url);
@@ -549,4 +549,4 @@ function parseClaudeGetOutput(output) {
  }
 }
-export default router;
+export default router;
--- a/server/routes/projects.js
+++ b/server/routes/projects.js
@@ -1,7 +1,7 @@
 import express from 'express';
 import { promises as fs } from 'fs';
 import path from 'path';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import os from 'os';
 import { addProjectManually } from '../projects.js';
--- a/server/routes/taskmaster.js
+++ b/server/routes/taskmaster.js
@@ -12,7 +12,7 @@ import express from 'express';
 import fs from 'fs';
 import path from 'path';
 import { promises as fsPromises } from 'fs';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import os from 'os';
--- a/server/routes/user.js
+++ b/server/routes/user.js
@@ -2,7 +2,7 @@ import express from 'express';
 import { userDb } from '../database/db.js';
 import { authenticateToken } from '../middleware/auth.js';
 import { getSystemGitConfig } from '../utils/gitConfig.js';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 const router = express.Router();
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -1,33 +0,0 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2022"],
    "baseUrl": ".",
    "paths": {
      // In the backend config, "@" maps to the /server directory itself.
      "@/*": ["*"]
    },
    // The backend is still mostly JavaScript today, so allowJs lets us add a real
    // TypeScript build without forcing a large rename before the tooling is usable.
    "allowJs": true,
    // Keep the migration incremental: existing JS keeps building, while any new TS files
    // still go through the normal TypeScript pipeline and strict checks.
    "checkJs": false,
    "strict": true,
    "noEmitOnError": true,
    // The backend build emits both /server and /shared into dist-server, so rootDir must
    // stay one level above this file even though the config itself now lives in /server.
    "rootDir": "..",
    "outDir": "../dist-server",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "types": ["node"]
  },
  "include": ["./**/*.js", "./**/*.ts", "../shared/**/*.js", "../shared/**/*.ts"],
  "exclude": ["../dist", "../dist-server", "../node_modules", "../src"]
 }
--- a/server/utils/colors.js
+++ b/server/utils/colors.js
@@ -1,21 +0,0 @@
 // ANSI color codes for terminal output
 const colors = {
    reset: '\x1b[0m',
    bright: '\x1b[1m',
    cyan: '\x1b[36m',
    green: '\x1b[32m',
    yellow: '\x1b[33m',
    blue: '\x1b[34m',
    dim: '\x1b[2m',
 };
 const c = {
    info: (text) => `${colors.cyan}${text}${colors.reset}`,
    ok: (text) => `${colors.green}${text}${colors.reset}`,
    warn: (text) => `${colors.yellow}${text}${colors.reset}`,
    tip: (text) => `${colors.blue}${text}${colors.reset}`,
    bright: (text) => `${colors.bright}${text}${colors.reset}`,
    dim: (text) => `${colors.dim}${text}${colors.reset}`,
 };
 export { colors, c };
--- a/server/utils/gitConfig.js
+++ b/server/utils/gitConfig.js
@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 function spawnAsync(command, args) {
  return new Promise((resolve, reject) => {
--- a/server/utils/plugin-loader.js
+++ b/server/utils/plugin-loader.js
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import os from 'os';
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 const PLUGINS_DIR = path.join(os.homedir(), '.claude-code-ui', 'plugins');
 const PLUGINS_CONFIG_PATH = path.join(os.homedir(), '.claude-code-ui', 'plugins.json');
--- a/server/utils/plugin-process-manager.js
+++ b/server/utils/plugin-process-manager.js
@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import path from 'path';
 import { scanPlugins, getPluginsConfig, getPluginDir } from './plugin-loader.js';
--- a/server/utils/runtime-paths.js
+++ b/server/utils/runtime-paths.js
@@ -1,37 +0,0 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 export function getModuleDir(importMetaUrl) {
  return path.dirname(fileURLToPath(importMetaUrl));
 }
 export function findServerRoot(startDir) {
  // Source files live under /server, while compiled files live under /dist-server/server.
  // Walking up to the nearest "server" folder gives every backend module one stable anchor
  // that works in both layouts instead of relying on fragile "../.." assumptions.
  let currentDir = startDir;
  while (path.basename(currentDir) !== 'server') {
    const parentDir = path.dirname(currentDir);
    if (parentDir === currentDir) {
      throw new Error(`Could not resolve the backend server root from "${startDir}".`);
    }
    currentDir = parentDir;
  }
  return currentDir;
 }
 export function findAppRoot(startDir) {
  const serverRoot = findServerRoot(startDir);
  const parentOfServerRoot = path.dirname(serverRoot);
  // Source files live at <app>/server, while compiled files live at <app>/dist-server/server.
  // When the nearest server folder sits inside dist-server we need to hop one extra level up
  // so repo-level files still resolve from the real app root instead of the build directory.
  return path.basename(parentOfServerRoot) === 'dist-server'
    ? path.dirname(parentOfServerRoot)
    : parentOfServerRoot;
 }
--- a/server/utils/url-detection.js
+++ b/server/utils/url-detection.js
@@ -1,71 +0,0 @@
 const ANSI_ESCAPE_SEQUENCE_REGEX = /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~]|\][^\x07]*(?:\x07|\x1B\\))/g;
 const TRAILING_URL_PUNCTUATION_REGEX = /[)\]}>.,;:!?]+$/;
 function stripAnsiSequences(value = '') {
    return value.replace(ANSI_ESCAPE_SEQUENCE_REGEX, '');
 }
 function normalizeDetectedUrl(url) {
    if (!url || typeof url !== 'string') return null;
    const cleaned = url.trim().replace(TRAILING_URL_PUNCTUATION_REGEX, '');
    if (!cleaned) return null;
    try {
        const parsed = new URL(cleaned);
        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
            return null;
        }
        return parsed.toString();
    } catch {
        return null;
    }
 }
 function extractUrlsFromText(value = '') {
    const directMatches = value.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/gi) || [];
    // Handle wrapped terminal URLs split across lines by terminal width.
    const wrappedMatches = [];
    const continuationRegex = /^[A-Za-z0-9\-._~:/?#\[\]@!$&'()*+,;=%]+$/;
    const lines = value.split(/\r?\n/);
    for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        const startMatch = line.match(/https?:\/\/[^\s<>"'`\\\x1b\x07]+/i);
        if (!startMatch) continue;
        let combined = startMatch[0];
        let j = i + 1;
        while (j < lines.length) {
            const continuation = lines[j].trim();
            if (!continuation) break;
            if (!continuationRegex.test(continuation)) break;
            combined += continuation;
            j++;
        }
        wrappedMatches.push(combined.replace(/\r?\n\s*/g, ''));
    }
    return Array.from(new Set([...directMatches, ...wrappedMatches]));
 }
 function shouldAutoOpenUrlFromOutput(value = '') {
    const normalized = value.toLowerCase();
    return (
        normalized.includes('browser didn\'t open') ||
        normalized.includes('open this url') ||
        normalized.includes('continue in your browser') ||
        normalized.includes('press enter to open') ||
        normalized.includes('open_url:')
    );
 }
 export {
    ANSI_ESCAPE_SEQUENCE_REGEX,
    TRAILING_URL_PUNCTUATION_REGEX,
    stripAnsiSequences,
    normalizeDetectedUrl,
    extractUrlsFromText,
    shouldAutoOpenUrlFromOutput
 };
--- a/src/components/app/AppContent.tsx
+++ b/src/components/app/AppContent.tsx
@@ -122,28 +122,8 @@ export default function AppContent() {
    }
  }, [isConnected, selectedSession?.id, sendMessage]);
  // Adjust the app container to stay above the virtual keyboard on iOS Safari.
  // On Chrome for Android the layout viewport already shrinks when the keyboard opens,
  // so inset-0 adjusts automatically. On iOS the layout viewport stays full-height and
  // the keyboard overlays it — we use the Visual Viewport API to track keyboard height
  // and apply it as a CSS variable that shifts the container's bottom edge up.
  useEffect(() => {
    const vv = window.visualViewport;
    if (!vv) return;
    const update = () => {
      // Only resize matters — keyboard open/close changes vv.height.
      // Do NOT listen to scroll: on iOS Safari, scrolling content changes
      // vv.offsetTop which would make --keyboard-height fluctuate during
      // normal scrolling, causing the container to bounce up and down.
      const kb = Math.max(0, window.innerHeight - vv.height);
      document.documentElement.style.setProperty('--keyboard-height', `${kb}px`);
    };
    vv.addEventListener('resize', update);
    return () => vv.removeEventListener('resize', update);
  }, []);
  return (
-    <div className="fixed inset-0 flex bg-background" style={{ bottom: 'var(--keyboard-height, 0px)' }}>
+    <div className="fixed inset-0 flex bg-background">
      {!isMobile ? (
        <div className="h-full flex-shrink-0 border-r border-border/50">
          <Sidebar {...sidebarSharedProps} />
--- a/src/components/chat/hooks/useChatComposerState.ts
+++ b/src/components/chat/hooks/useChatComposerState.ts
@@ -19,7 +19,7 @@ import type {
  PendingPermissionRequest,
  PermissionMode,
 } from '../types/types';
-import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import { escapeRegExp } from '../utils/chatFormatting';
 import { useFileMentions } from './useFileMentions';
 import { type SlashCommand, useSlashCommands } from './useSlashCommands';
@@ -33,7 +33,7 @@ interface UseChatComposerStateArgs {
  selectedProject: Project | null;
  selectedSession: ProjectSession | null;
  currentSessionId: string | null;
-  provider: LLMProvider;
+  provider: SessionProvider;
  permissionMode: PermissionMode | string;
  cyclePermissionMode: () => void;
  cursorModel: string;
@@ -737,7 +737,7 @@ export function useChatComposerState({
    }
    // Re-run when input changes so restored drafts get the same autosize behavior as typed text.
    textareaRef.current.style.height = 'auto';
-    textareaRef.current.style.height = `${Math.max(22, textareaRef.current.scrollHeight)}px`;
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
    const expanded = textareaRef.current.scrollHeight > lineHeight * 2;
    setIsTextareaExpanded(expanded);
@@ -824,7 +824,7 @@ export function useChatComposerState({
    (event: FormEvent<HTMLTextAreaElement>) => {
      const target = event.currentTarget;
      target.style.height = 'auto';
-      target.style.height = `${Math.max(22, target.scrollHeight)}px`;
+      target.style.height = `${target.scrollHeight}px`;
      setCursorPosition(target.selectionStart);
      syncInputOverlayScroll(target);
--- a/src/components/chat/hooks/useChatProviderState.ts
+++ b/src/components/chat/hooks/useChatProviderState.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { authenticatedFetch } from '../../../utils/api';
 import { CLAUDE_MODELS, CODEX_MODELS, CURSOR_MODELS, GEMINI_MODELS } from '../../../../shared/modelConstants';
 import type { PendingPermissionRequest, PermissionMode } from '../types/types';
-import type { ProjectSession, LLMProvider } from '../../../types/app';
+import type { ProjectSession, SessionProvider } from '../../../types/app';
 interface UseChatProviderStateArgs {
  selectedSession: ProjectSession | null;
@@ -11,8 +11,8 @@ interface UseChatProviderStateArgs {
 export function useChatProviderState({ selectedSession }: UseChatProviderStateArgs) {
  const [permissionMode, setPermissionMode] = useState<PermissionMode>('default');
  const [pendingPermissionRequests, setPendingPermissionRequests] = useState<PendingPermissionRequest[]>([]);
-  const [provider, setProvider] = useState<LLMProvider>(() => {
+  const [provider, setProvider] = useState<SessionProvider>(() => {
-    return (localStorage.getItem('selected-provider') as LLMProvider) || 'claude';
+    return (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
  });
  const [cursorModel, setCursorModel] = useState<string>(() => {
    return localStorage.getItem('cursor-model') || CURSOR_MODELS.DEFAULT;
--- a/src/components/chat/hooks/useChatRealtimeHandlers.ts
+++ b/src/components/chat/hooks/useChatRealtimeHandlers.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import type { PendingPermissionRequest } from '../types/types';
-import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
 type PendingViewSession = {
@@ -48,7 +48,7 @@ type LatestChatMessage = {
 interface UseChatRealtimeHandlersArgs {
  latestMessage: LatestChatMessage | null;
-  provider: LLMProvider;
+  provider: SessionProvider;
  selectedProject: Project | null;
  selectedSession: ProjectSession | null;
  currentSessionId: string | null;
--- a/src/components/chat/hooks/useChatSessionState.ts
+++ b/src/components/chat/hooks/useChatSessionState.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import type { MutableRefObject } from 'react';
 import { authenticatedFetch } from '../../../utils/api';
 import type { ChatMessage, Provider } from '../types/types';
-import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import { createCachedDiffCalculator, type DiffCalculator } from '../utils/messageTransforms';
 import { normalizedToChatMessages } from './useChatMessages';
 import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
@@ -40,7 +40,7 @@ interface ScrollRestoreState {
 function chatMessageToNormalized(
  msg: ChatMessage,
  sessionId: string,
-  provider: LLMProvider,
+  provider: SessionProvider,
 ): NormalizedMessage | null {
  const id = `local_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
  const ts = msg.timestamp instanceof Date
@@ -151,7 +151,7 @@ export function useChatSessionState({
  // When a real session ID arrives and we have a pending user message, flush it to the store
  const prevActiveSessionRef = useRef<string | null>(null);
  if (activeSessionId && activeSessionId !== prevActiveSessionRef.current && pendingUserMessage) {
-    const prov = (localStorage.getItem('selected-provider') as LLMProvider) || 'claude';
+    const prov = (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
    const normalized = chatMessageToNormalized(pendingUserMessage, activeSessionId, prov);
    if (normalized) {
      sessionStore.appendRealtime(activeSessionId, normalized);
@@ -189,7 +189,7 @@ export function useChatSessionState({
      setPendingUserMessage(msg);
      return;
    }
-    const prov = (localStorage.getItem('selected-provider') as LLMProvider) || 'claude';
+    const prov = (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
    const normalized = chatMessageToNormalized(msg, activeSessionId, prov);
    if (normalized) {
      sessionStore.appendRealtime(activeSessionId, normalized);
@@ -240,7 +240,7 @@ export function useChatSessionState({
      try {
        const slot = await sessionStore.fetchMore(selectedSession.id, {
-          provider: sessionProvider as LLMProvider,
+          provider: sessionProvider as SessionProvider,
          projectName: selectedProject.name,
          projectPath: selectedProject.fullPath || selectedProject.path || '',
          limit: MESSAGES_PER_PAGE,
@@ -374,7 +374,7 @@ export function useChatSessionState({
    // Fetch from server → store updates → chatMessages re-derives automatically
    setIsLoadingSessionMessages(true);
    sessionStore.fetchFromServer(selectedSession.id, {
-      provider: (selectedSession.__provider || provider) as LLMProvider,
+      provider: (selectedSession.__provider || provider) as SessionProvider,
      projectName: selectedProject.name,
      projectPath: selectedProject.fullPath || selectedProject.path || '',
      limit: MESSAGES_PER_PAGE,
@@ -410,7 +410,7 @@ export function useChatSessionState({
        // Skip store refresh during active streaming
        if (!isLoading) {
          await sessionStore.refreshFromServer(selectedSession.id, {
-            provider: (selectedSession.__provider || provider) as LLMProvider,
+            provider: (selectedSession.__provider || provider) as SessionProvider,
            projectName: selectedProject.name,
            projectPath: selectedProject.fullPath || selectedProject.path || '',
          });
@@ -468,7 +468,7 @@ export function useChatSessionState({
          try {
            // Load all messages into the store for search navigation
            const slot = await sessionStore.fetchFromServer(selectedSession.id, {
-              provider: sessionProvider as LLMProvider,
+              provider: sessionProvider as SessionProvider,
              projectName: selectedProject.name,
              projectPath: selectedProject.fullPath || selectedProject.path || '',
              limit: null,
@@ -655,7 +655,7 @@ export function useChatSessionState({
    try {
      const slot = await sessionStore.fetchFromServer(requestSessionId, {
-        provider: sessionProvider as LLMProvider,
+        provider: sessionProvider as SessionProvider,
        projectName: selectedProject.name,
        projectPath: selectedProject.fullPath || selectedProject.path || '',
        limit: null,
--- a/src/components/chat/tools/ToolRenderer.tsx
+++ b/src/components/chat/tools/ToolRenderer.tsx
@@ -1,13 +1,8 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import type { Project } from '../../../types/app';
 import type { SubagentChildTool } from '../types/types';
 import { getToolConfig } from './configs/toolConfigs';
 import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
 import { PlanDisplay } from './components/PlanDisplay';
 import { ToolStatusBadge } from './components/ToolStatusBadge';
 import type { ToolStatus } from './components/ToolStatusBadge';
 type DiffLine = {
  type: string;
@@ -41,32 +36,12 @@ function getToolCategory(toolName: string): string {
  if (toolName === 'Bash') return 'bash';
  if (['TodoWrite', 'TodoRead'].includes(toolName)) return 'todo';
  if (['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskGet'].includes(toolName)) return 'task';
-  if (toolName === 'Task') return 'agent';
+  if (toolName === 'Task') return 'agent';  // Subagent task
  if (toolName === 'exit_plan_mode' || toolName === 'ExitPlanMode') return 'plan';
  if (toolName === 'AskUserQuestion') return 'question';
  return 'default';
 }
 // Exact denial messages from server/claude-sdk.js — other providers can't reliably signal denial
 const CLAUDE_DENIAL_MESSAGES = [
  'user denied tool use',
  'tool disallowed by settings',
  'permission request timed out',
  'permission request cancelled',
 ];
 function deriveToolStatus(toolResult: any): ToolStatus {
  if (!toolResult) return 'running';
  if (toolResult.isError) {
    const content = String(toolResult.content || '').toLowerCase().trim();
    if (CLAUDE_DENIAL_MESSAGES.some((msg) => content.includes(msg))) {
      return 'denied';
    }
    return 'error';
  }
  return 'completed';
 }
 /**
 * Main tool renderer router
 * Routes to OneLineDisplay or CollapsibleDisplay based on tool config
@@ -98,12 +73,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
    }
  }, [mode, toolInput, toolResult]);
  // Only derive and show status badge on input renders
  const toolStatus = useMemo(
    () => mode === 'input' ? deriveToolStatus(toolResult) : undefined,
    [mode, toolResult],
  );
  const handleAction = useCallback(() => {
    if (displayConfig?.action === 'open-file' && onFileOpen) {
      const value = displayConfig.getValue?.(parsedData) || '';
@@ -113,7 +82,9 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
  // Route subagent containers to dedicated component (after hooks to satisfy Rules of Hooks)
  if (isSubagentContainer && subagentState) {
-    if (mode === 'result') return null;
+    if (mode === 'result') {
      return null;
    }
    return (
      <SubagentContainer
        toolInput={toolInput}
@@ -144,34 +115,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        wrapText={displayConfig.wrapText}
        colorScheme={displayConfig.colorScheme}
        resultId={mode === 'input' ? `tool-result-${toolId}` : undefined}
        status={toolStatus !== 'completed' ? toolStatus : undefined}
      />
    );
  }
  if (displayConfig.type === 'plan') {
    const title = typeof displayConfig.title === 'function'
      ? displayConfig.title(parsedData)
      : displayConfig.title || 'Plan';
    const contentProps = displayConfig.getContentProps?.(parsedData, {
      selectedProject,
      createDiff,
      onFileOpen
    }) || {};
    const isStreaming = mode === 'input' && !toolResult;
    return (
      <PlanDisplay
        title={title}
        content={contentProps.content || ''}
        defaultOpen={displayConfig.defaultOpen ?? autoExpandTools}
        isStreaming={isStreaming}
        showRawParameters={mode === 'input' && showRawParameters}
        rawContent={rawToolInput}
        toolName={toolName}
        toolId={toolId}
      />
    );
  }
@@ -191,6 +134,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
      onFileOpen
    }) || {};
    // Build the content component based on contentType
    let contentComponent: React.ReactNode = null;
    switch (displayConfig.contentType) {
@@ -267,6 +211,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
      }
    }
    // For edit tools, make the title (filename) clickable to open the file
    const handleTitleClick = (toolName === 'Edit' || toolName === 'Write' || toolName === 'ApplyPatch') && contentProps.filePath && onFileOpen
      ? () => onFileOpen(contentProps.filePath, {
          old_string: contentProps.oldContent,
@@ -274,8 +219,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        })
      : undefined;
    const badgeElement = toolStatus && toolStatus !== 'completed' ? <ToolStatusBadge status={toolStatus} /> : undefined;
    return (
      <CollapsibleDisplay
        toolName={toolName}
@@ -283,7 +226,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
        title={title}
        defaultOpen={defaultOpen}
        onTitleClick={handleTitleClick}
        badge={badgeElement}
        showRawParameters={mode === 'input' && showRawParameters}
        rawContent={rawToolInput}
        toolCategory={getToolCategory(toolName)}
--- a/src/components/chat/tools/components/CollapsibleDisplay.tsx
+++ b/src/components/chat/tools/components/CollapsibleDisplay.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
 import { CollapsibleSection } from './CollapsibleSection';
 interface CollapsibleDisplayProps {
@@ -8,7 +7,6 @@ interface CollapsibleDisplayProps {
  title: string;
  defaultOpen?: boolean;
  action?: React.ReactNode;
  badge?: React.ReactNode;
  onTitleClick?: () => void;
  children: React.ReactNode;
  showRawParameters?: boolean;
@@ -19,14 +17,14 @@ interface CollapsibleDisplayProps {
 const borderColorMap: Record<string, string> = {
  edit: 'border-l-amber-500 dark:border-l-amber-400',
-  search: 'border-l-muted-foreground/40',
+  search: 'border-l-gray-400 dark:border-l-gray-500',
  bash: 'border-l-green-500 dark:border-l-green-400',
  todo: 'border-l-violet-500 dark:border-l-violet-400',
  task: 'border-l-violet-500 dark:border-l-violet-400',
  agent: 'border-l-purple-500 dark:border-l-purple-400',
  plan: 'border-l-indigo-500 dark:border-l-indigo-400',
  question: 'border-l-blue-500 dark:border-l-blue-400',
-  default: 'border-l-border',
+  default: 'border-l-gray-300 dark:border-l-gray-600',
 };
 export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
@@ -34,14 +32,14 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
  title,
  defaultOpen = false,
  action,
  badge,
  onTitleClick,
  children,
  showRawParameters = false,
  rawContent,
  className = '',
-  toolCategory,
+  toolCategory
 }) => {
  // Fall back to default styling for unknown/new categories so className never includes "undefined".
  const borderColor = borderColorMap[toolCategory || 'default'] || borderColorMap.default;
  return (
@@ -51,16 +49,15 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
        toolName={toolName}
        open={defaultOpen}
        action={action}
        badge={badge}
        onTitleClick={onTitleClick}
      >
        {children}
        {showRawParameters && rawContent && (
-          <Collapsible className="mt-2">
+          <details className="group/raw relative mt-2">
-            <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground">
+            <summary className="flex cursor-pointer items-center gap-1.5 py-0.5 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
              <svg
-                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
+                className="h-2.5 w-2.5 transition-transform duration-150 group-open/raw:rotate-90"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
@@ -68,13 +65,11 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
              raw params
-            </CollapsibleTrigger>
+            </summary>
-            <CollapsibleContent>
+            <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-gray-200/40 bg-gray-50 p-2 font-mono text-[11px] text-gray-600 dark:border-gray-700/40 dark:bg-gray-900/50 dark:text-gray-400">
-              <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-border/40 bg-muted p-2 font-mono text-[11px] text-muted-foreground">
+              {rawContent}
-                {rawContent}
+            </pre>
-              </pre>
+          </details>
            </CollapsibleContent>
          </Collapsible>
        )}
      </CollapsibleSection>
    </div>
--- a/src/components/chat/tools/components/CollapsibleSection.tsx
+++ b/src/components/chat/tools/components/CollapsibleSection.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
 interface CollapsibleSectionProps {
  title: string;
  toolName?: string;
  open?: boolean;
  action?: React.ReactNode;
  badge?: React.ReactNode;
  onTitleClick?: () => void;
  children: React.ReactNode;
  className?: string;
@@ -21,68 +18,44 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  toolName,
  open = false,
  action,
  badge,
  onTitleClick,
  children,
-  className = '',
+  className = ''
 }) => {
  return (
-    <Collapsible defaultOpen={open} className={cn('group/section', className)}>
+    <details className={`group/details relative ${className}`} open={open}>
-      {/* When there's a clickable title (Edit/Write), only the chevron toggles collapse */}
+      <summary className="flex cursor-pointer select-none items-center gap-1.5 py-0.5 text-xs group-open/details:sticky group-open/details:top-0 group-open/details:z-10 group-open/details:-mx-1 group-open/details:bg-background group-open/details:px-1">
-      {onTitleClick ? (
+        <svg
-        <div className="flex cursor-default select-none items-center gap-1.5 py-0.5 text-xs group-data-[state=open]/section:sticky group-data-[state=open]/section:top-0 group-data-[state=open]/section:z-10 group-data-[state=open]/section:-mx-1 group-data-[state=open]/section:bg-background group-data-[state=open]/section:px-1">
+          className="h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-150 group-open/details:rotate-90 dark:text-gray-500"
-          <CollapsibleTrigger className="flex flex-shrink-0 items-center p-0.5 text-muted-foreground hover:text-foreground">
+          fill="none"
-            <svg
+          stroke="currentColor"
-              className="h-3 w-3 transition-transform duration-150 group-data-[state=open]/section:rotate-90"
+          viewBox="0 0 24 24"
-              fill="none"
+        >
-              stroke="currentColor"
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              viewBox="0 0 24 24"
+        </svg>
-            >
+        {toolName && (
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          <span className="flex-shrink-0 font-medium text-gray-500 dark:text-gray-400">{toolName}</span>
-            </svg>
+        )}
-          </CollapsibleTrigger>
+        {toolName && (
-          {toolName && (
+          <span className="flex-shrink-0 text-[10px] text-gray-300 dark:text-gray-600">/</span>
-            <span className="flex-shrink-0 font-medium text-muted-foreground">{toolName}</span>
+        )}
-          )}
+        {onTitleClick ? (
          {toolName && (
            <span className="flex-shrink-0 text-[10px] text-muted-foreground/40">/</span>
          )}
          <button
-            onClick={onTitleClick}
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTitleClick(); }}
-            className="flex-1 truncate text-left font-mono text-primary transition-colors hover:text-primary/80 hover:underline"
+            className="flex-1 truncate text-left font-mono text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
          >
            {title}
          </button>
-          {badge && <span className="ml-auto flex-shrink-0">{badge}</span>}
+        ) : (
-          {action && <span className="ml-1 flex-shrink-0">{action}</span>}
+          <span className="flex-1 truncate text-gray-600 dark:text-gray-400">
-        </div>
+            {title}
-      ) : (
+          </span>
-        <CollapsibleTrigger className="flex w-full select-none items-center gap-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground group-data-[state=open]/section:sticky group-data-[state=open]/section:top-0 group-data-[state=open]/section:z-10 group-data-[state=open]/section:-mx-1 group-data-[state=open]/section:bg-background group-data-[state=open]/section:px-1">
+        )}
-          <svg
+        {action && <span className="ml-1 flex-shrink-0">{action}</span>}
-            className="h-3 w-3 flex-shrink-0 transition-transform duration-150 group-data-[state=open]/section:rotate-90"
+      </summary>
-            fill="none"
+      <div className="mt-1.5 pl-[18px]">
-            stroke="currentColor"
+        {children}
-            viewBox="0 0 24 24"
+      </div>
-          >
+    </details>
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          {toolName && (
            <span className="flex-shrink-0 font-medium">{toolName}</span>
          )}
          {toolName && (
            <span className="flex-shrink-0 text-[10px] text-muted-foreground/40">/</span>
          )}
          <span className="flex-1 truncate text-left">{title}</span>
          {badge && <span className="ml-auto flex-shrink-0">{badge}</span>}
          {action && <span className="ml-1 flex-shrink-0">{action}</span>}
        </CollapsibleTrigger>
      )}
      <CollapsibleContent>
        <div className="mt-1.5 pl-[18px]">
          {children}
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
 };
--- a/src/components/chat/tools/components/ContentRenderers/TodoList.tsx
+++ b/src/components/chat/tools/components/ContentRenderers/TodoList.tsx
@@ -1,21 +1,114 @@
 import { memo, useMemo } from 'react';
-import { Queue, QueueItem, QueueItemIndicator, QueueItemContent } from '../../../../../shared/view/ui';
+import { CheckCircle2, Circle, Clock, type LucideIcon } from 'lucide-react';
-import type { QueueItemStatus } from '../../../../../shared/view/ui';
+import { Badge } from '../../../../../shared/view/ui';
 type TodoStatus = 'completed' | 'in_progress' | 'pending';
 type TodoPriority = 'high' | 'medium' | 'low';
 export type TodoItem = {
  id?: string;
  content: string;
  status: string;
  priority?: string;
  activeForm?: string;
 };
-const normalizeStatus = (status: string): QueueItemStatus => {
+type NormalizedTodoItem = {
-  if (status === 'completed') return 'completed';
+  id?: string;
-  if (status === 'in_progress') return 'in_progress';
+  content: string;
  status: TodoStatus;
  priority: TodoPriority;
 };
 type StatusConfig = {
  icon: LucideIcon;
  iconClassName: string;
  badgeClassName: string;
  textClassName: string;
 };
 // Centralized visual config keeps rendering logic compact and easier to scan.
 const STATUS_CONFIG: Record<TodoStatus, StatusConfig> = {
  completed: {
    icon: CheckCircle2,
    iconClassName: 'w-3.5 h-3.5 text-green-500 dark:text-green-400',
    badgeClassName:
      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800',
    textClassName: 'line-through text-gray-500 dark:text-gray-400',
  },
  in_progress: {
    icon: Clock,
    iconClassName: 'w-3.5 h-3.5 text-blue-500 dark:text-blue-400',
    badgeClassName:
      'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800',
    textClassName: 'text-gray-900 dark:text-gray-100',
  },
  pending: {
    icon: Circle,
    iconClassName: 'w-3.5 h-3.5 text-gray-400 dark:text-gray-500',
    badgeClassName:
      'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700',
    textClassName: 'text-gray-900 dark:text-gray-100',
  },
 };
 const PRIORITY_BADGE_CLASS: Record<TodoPriority, string> = {
  high: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800',
  medium:
    'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800',
  low: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700',
 };
 // Incoming tool payloads can vary; normalize to supported UI states.
 const normalizeStatus = (status: string): TodoStatus => {
  if (status === 'completed' || status === 'in_progress') {
    return status;
  }
  return 'pending';
 };
 const normalizePriority = (priority?: string): TodoPriority => {
  if (priority === 'high' || priority === 'medium') {
    return priority;
  }
  return 'low';
 };
 const TodoRow = memo(
  ({ todo }: { todo: NormalizedTodoItem }) => {
    const statusConfig = STATUS_CONFIG[todo.status];
    const StatusIcon = statusConfig.icon;
    return (
      <div className="flex items-start gap-2 rounded border border-gray-200 bg-white p-2 transition-colors dark:border-gray-700 dark:bg-gray-800">
        <div className="mt-0.5 flex-shrink-0">
          <StatusIcon className={statusConfig.iconClassName} />
        </div>
        <div className="min-w-0 flex-1">
          <div className="mb-0.5 flex items-start justify-between gap-2">
            <p className={`text-xs font-medium ${statusConfig.textClassName}`}>
              {todo.content}
            </p>
            <div className="flex flex-shrink-0 gap-1">
              <Badge
                variant="outline"
                className={`px-1.5 py-px text-[10px] ${PRIORITY_BADGE_CLASS[todo.priority]}`}
              >
                {todo.priority}
              </Badge>
              <Badge
                variant="outline"
                className={`px-1.5 py-px text-[10px] ${statusConfig.badgeClassName}`}
              >
                {todo.status.replace('_', ' ')}
              </Badge>
            </div>
          </div>
        </div>
      </div>
    );
  }
 );
 const TodoList = memo(
  ({
    todos,
@@ -24,33 +117,36 @@ const TodoList = memo(
    todos: TodoItem[];
    isResult?: boolean;
  }) => {
-    const normalized = useMemo(
+    // Memoize normalization to avoid recomputing list metadata on every render.
-      () => todos.map((todo) => ({ ...todo, queueStatus: normalizeStatus(todo.status) })),
+    const normalizedTodos = useMemo<NormalizedTodoItem[]>(
-      [todos],
+      () =>
        todos.map((todo) => ({
          id: todo.id,
          content: todo.content,
          status: normalizeStatus(todo.status),
          priority: normalizePriority(todo.priority),
        })),
      [todos]
    );
-    if (normalized.length === 0) return null;
+    if (normalizedTodos.length === 0) {
      return null;
    }
    return (
-      <div>
+      <div className="space-y-1.5">
        {isResult && (
-          <div className="mb-1.5 text-xs font-medium text-muted-foreground">
+          <div className="mb-1.5 text-xs font-medium text-gray-600 dark:text-gray-400">
-            Todo List ({normalized.length} {normalized.length === 1 ? 'item' : 'items'})
+            Todo List ({normalizedTodos.length}{' '}
            {normalizedTodos.length === 1 ? 'item' : 'items'})
          </div>
        )}
-        <Queue>
+        {normalizedTodos.map((todo, index) => (
-          {normalized.map((todo, index) => (
+          <TodoRow key={todo.id ?? `${todo.content}-${index}`} todo={todo} />
-            <QueueItem key={todo.id ?? `${todo.content}-${index}`} status={todo.queueStatus}>
+        ))}
              <QueueItemIndicator />
              <QueueItemContent>{todo.content}</QueueItemContent>
            </QueueItem>
          ))}
        </Queue>
      </div>
    );
-  },
+  }
 );
 TodoList.displayName = 'TodoList';
 export default TodoList;
--- a/src/components/chat/tools/components/OneLineDisplay.tsx
+++ b/src/components/chat/tools/components/OneLineDisplay.tsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 import { copyTextToClipboard } from '../../../../utils/clipboard';
 import { ToolStatusBadge } from './ToolStatusBadge';
 import type { ToolStatus } from './ToolStatusBadge';
 type ActionType = 'copy' | 'open-file' | 'jump-to-results' | 'none';
@@ -25,7 +23,6 @@ interface OneLineDisplayProps {
  resultId?: string;
  toolResult?: any;
  toolId?: string;
  status?: ToolStatus;
 }
 /**
@@ -43,15 +40,14 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
  style,
  wrapText = false,
  colorScheme = {
-    primary: 'text-foreground',
+    primary: 'text-gray-700 dark:text-gray-300',
-    secondary: 'text-muted-foreground',
+    secondary: 'text-gray-500 dark:text-gray-400',
    background: '',
-    border: 'border-border',
+    border: 'border-gray-300 dark:border-gray-600',
-    icon: 'text-muted-foreground',
+    icon: 'text-gray-500 dark:text-gray-400'
  },
  toolResult,
-  toolId,
+  toolId
  status,
 }) => {
  const [copied, setCopied] = useState(false);
  const isTerminal = style === 'terminal';
@@ -59,7 +55,9 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
  const handleAction = async () => {
    if (action === 'copy' && value) {
      const didCopy = await copyTextToClipboard(value);
-      if (!didCopy) return;
+      if (!didCopy) {
        return;
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } else if (onAction) {
@@ -70,7 +68,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
  const renderCopyButton = () => (
    <button
      onClick={handleAction}
-      className="ml-1 flex-shrink-0 text-muted-foreground/40 opacity-0 transition-all hover:text-muted-foreground group-hover:opacity-100"
+      className="ml-1 flex-shrink-0 text-gray-400 opacity-0 transition-all hover:text-gray-600 group-hover:opacity-100 dark:hover:text-gray-200"
      title="Copy to clipboard"
      aria-label="Copy to clipboard"
    >
@@ -86,7 +84,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
    </button>
  );
-  // Terminal style: dark pill around the command
+  // Terminal style: dark pill only around the command
  if (isTerminal) {
    return (
      <div className="group my-1">
@@ -102,13 +100,12 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
                <span className="select-none text-green-600 dark:text-green-500">$ </span>{value}
              </code>
            </div>
            {status && <ToolStatusBadge status={status} className="mt-0.5" />}
            {action === 'copy' && renderCopyButton()}
          </div>
        </div>
        {secondary && (
          <div className="ml-7 mt-1">
-            <span className="text-[11px] italic text-muted-foreground/60">
+            <span className="text-[11px] italic text-gray-400 dark:text-gray-500">
              {secondary}
            </span>
          </div>
@@ -117,21 +114,20 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
    );
  }
-  // File open style
+  // File open style - show filename only, full path on hover
  if (action === 'open-file') {
    const displayName = value.split('/').pop() || value;
    return (
      <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} my-0.5 py-0.5 pl-3`}>
-        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
+        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
-        <span className="text-[10px] text-muted-foreground/40">/</span>
+        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
        <button
          onClick={handleAction}
-          className="truncate font-mono text-xs text-primary transition-colors hover:text-primary/80 hover:underline"
+          className="truncate font-mono text-xs text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
          title={value}
        >
          {displayName}
        </button>
        {status && <ToolStatusBadge status={status} className="ml-auto" />}
      </div>
    );
  }
@@ -140,21 +136,20 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
  if (action === 'jump-to-results') {
    return (
      <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} my-0.5 py-0.5 pl-3`}>
-        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
+        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
-        <span className="text-[10px] text-muted-foreground/40">/</span>
+        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
        <span className={`min-w-0 flex-1 truncate font-mono text-xs ${colorScheme.primary}`}>
          {value}
        </span>
        {secondary && (
-          <span className="flex-shrink-0 text-[11px] italic text-muted-foreground/60">
+          <span className="flex-shrink-0 text-[11px] italic text-gray-400 dark:text-gray-500">
            {secondary}
          </span>
        )}
        {status && <ToolStatusBadge status={status} />}
        {toolResult && (
          <a
            href={`#tool-result-${toolId}`}
-            className="flex flex-shrink-0 items-center gap-0.5 text-[11px] text-primary transition-colors hover:text-primary/80"
+            className="flex flex-shrink-0 items-center gap-0.5 text-[11px] text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
          >
            <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -172,10 +167,10 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
        <span className={`${colorScheme.icon} flex-shrink-0 text-xs`}>{icon}</span>
      )}
      {!icon && (label || toolName) && (
-        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
+        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
      )}
      {(icon || label || toolName) && (
-        <span className="text-[10px] text-muted-foreground/40">/</span>
+        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
      )}
      <span className={`font-mono text-xs ${wrapText ? 'whitespace-pre-wrap break-all' : 'truncate'} min-w-0 flex-1 ${colorScheme.primary}`}>
        {value}
@@ -185,7 +180,6 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
          {secondary}
        </span>
      )}
      {status && <ToolStatusBadge status={status} />}
      {action === 'copy' && renderCopyButton()}
    </div>
  );
--- a/src/components/chat/tools/components/PlanDisplay.tsx
+++ b/src/components/chat/tools/components/PlanDisplay.tsx
@@ -1,137 +0,0 @@
 import React from 'react';
 import { ChevronsUpDown, FileText } from 'lucide-react';
 import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Button,
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Shimmer,
 } from '../../../../shared/view/ui';
 import { usePermission } from '../../../../contexts/PermissionContext';
 import { MarkdownContent } from './ContentRenderers';
 interface PlanDisplayProps {
  title: string;
  content: string;
  defaultOpen?: boolean;
  isStreaming?: boolean;
  showRawParameters?: boolean;
  rawContent?: string;
  toolName: string;
  toolId?: string;
 }
 export const PlanDisplay: React.FC<PlanDisplayProps> = ({
  title,
  content,
  defaultOpen = false,
  isStreaming = false,
  showRawParameters = false,
  rawContent,
  toolName: _toolName,
 }) => {
  const permissionCtx = usePermission();
  const pendingRequest = permissionCtx?.pendingPermissionRequests.find(
    (r) => r.toolName === 'ExitPlanMode' || r.toolName === 'exit_plan_mode'
  );
  const handleBuild = () => {
    if (pendingRequest && permissionCtx) {
      permissionCtx.handlePermissionDecision(pendingRequest.requestId, { allow: true });
    }
  };
  const handleRevise = () => {
    if (pendingRequest && permissionCtx) {
      permissionCtx.handlePermissionDecision(pendingRequest.requestId, {
        allow: false,
        message: 'User asked to revise the plan',
      });
    }
  };
  return (
    <Collapsible defaultOpen={defaultOpen}>
      <Card className="my-1 flex flex-col shadow-none">
        {/* Header — always visible */}
        <CardHeader className="flex flex-row items-start justify-between space-y-0 px-4 pb-0 pt-4">
          <div className="flex items-center gap-2">
            <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
            <CardTitle className="text-sm font-semibold">
              {isStreaming ? <Shimmer>{title}</Shimmer> : title}
            </CardTitle>
          </div>
          <CollapsibleTrigger className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle plan</span>
          </CollapsibleTrigger>
        </CardHeader>
        {/* Collapsible content */}
        <CollapsibleContent>
          <CardContent className="px-4 pb-4 pt-3">
            {content ? (
              <MarkdownContent
                content={content}
                className="prose prose-sm max-w-none dark:prose-invert"
              />
            ) : isStreaming ? (
              <div className="py-2">
                <Shimmer>Generating plan...</Shimmer>
              </div>
            ) : null}
            {showRawParameters && rawContent && (
              <Collapsible className="mt-3">
                <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground">
                  <svg
                    className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                  raw params
                </CollapsibleTrigger>
                <CollapsibleContent>
                  <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-border/40 bg-muted p-2 font-mono text-[11px] text-muted-foreground">
                    {rawContent}
                  </pre>
                </CollapsibleContent>
              </Collapsible>
            )}
          </CardContent>
        </CollapsibleContent>
        {/* Footer — always visible when permission is pending */}
        {pendingRequest && (
          <CardFooter className="justify-end gap-2 border-t border-border/40 px-4 pb-3 pt-3">
            <Button
              variant="ghost"
              size="sm"
              onClick={handleRevise}
              className="text-muted-foreground"
            >
              Revise
            </Button>
            <Button size="sm" onClick={handleBuild}>
              Build{' '}
              <kbd className="ml-1 rounded bg-primary-foreground/20 px-1 py-0.5 font-mono text-[10px]">
                ⌘↩
              </kbd>
            </Button>
          </CardFooter>
        )}
      </Card>
    </Collapsible>
  );
 };
--- a/src/components/chat/tools/components/SubagentContainer.tsx
+++ b/src/components/chat/tools/components/SubagentContainer.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type { SubagentChildTool } from '../../types/types';
 import { CollapsibleSection } from './CollapsibleSection';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
 interface SubagentContainerProps {
  toolInput: unknown;
@@ -66,21 +65,21 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
      >
        {/* Prompt/request to the subagent */}
        {prompt && (
-          <div className="mb-2 line-clamp-4 whitespace-pre-wrap break-words text-xs text-muted-foreground">
+          <div className="mb-2 line-clamp-4 whitespace-pre-wrap break-words text-xs text-gray-600 dark:text-gray-400">
            {prompt}
          </div>
        )}
        {/* Current tool indicator (while running) */}
        {currentTool && !isComplete && (
-          <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+          <div className="mt-1 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
            <span className="h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-purple-500 dark:bg-purple-400" />
-            <span className="text-muted-foreground/60">Currently:</span>
+            <span className="text-gray-400 dark:text-gray-500">Currently:</span>
-            <span className="font-medium text-foreground">{currentTool.toolName}</span>
+            <span className="font-medium text-gray-600 dark:text-gray-300">{currentTool.toolName}</span>
            {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput) && (
              <>
-                <span className="text-muted-foreground/40">/</span>
+                <span className="text-gray-300 dark:text-gray-600">/</span>
-                <span className="truncate font-mono text-muted-foreground">
+                <span className="truncate font-mono text-gray-500 dark:text-gray-400">
                  {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput)}
                </span>
              </>
@@ -100,10 +99,10 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
        {/* Tool history (collapsed) */}
        {childTools.length > 0 && (
-          <Collapsible className="mt-2">
+          <details className="group/history mt-2">
-            <CollapsibleTrigger className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground">
+            <summary className="flex cursor-pointer items-center gap-1 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
              <svg
-                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
+                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 group-open/history:rotate-90"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
@@ -111,31 +110,29 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
              <span>View tool history ({childTools.length})</span>
-            </CollapsibleTrigger>
+            </summary>
-            <CollapsibleContent>
+            <div className="mt-1 space-y-0.5 border-l border-gray-200 pl-3 dark:border-gray-700">
-              <div className="mt-1 space-y-0.5 border-l border-border pl-3">
+              {childTools.map((child, index) => (
-                {childTools.map((child, index) => (
+                <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
-                  <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                  <span className="w-4 flex-shrink-0 text-right text-gray-400 dark:text-gray-500">{index + 1}.</span>
-                    <span className="w-4 flex-shrink-0 text-right text-muted-foreground/60">{index + 1}.</span>
+                  <span className="font-medium">{child.toolName}</span>
-                    <span className="font-medium text-foreground">{child.toolName}</span>
+                  {getCompactToolDisplay(child.toolName, child.toolInput) && (
-                    {getCompactToolDisplay(child.toolName, child.toolInput) && (
+                    <span className="truncate font-mono text-gray-400 dark:text-gray-500">
-                      <span className="truncate font-mono text-muted-foreground/70">
+                      {getCompactToolDisplay(child.toolName, child.toolInput)}
-                        {getCompactToolDisplay(child.toolName, child.toolInput)}
+                    </span>
-                      </span>
+                  )}
-                    )}
+                  {child.toolResult?.isError && (
-                    {child.toolResult?.isError && (
+                    <span className="flex-shrink-0 text-red-500">(error)</span>
-                      <span className="flex-shrink-0 text-red-500">(error)</span>
+                  )}
-                    )}
+                </div>
-                  </div>
+              ))}
-                ))}
+            </div>
-              </div>
+          </details>
            </CollapsibleContent>
          </Collapsible>
        )}
        {/* Final result */}
        {isComplete && toolResult && (
-          <div className="mt-2 text-xs text-muted-foreground">
+          <div className="mt-2 text-xs text-gray-600 dark:text-gray-400">
            {(() => {
              let content = toolResult.content;
--- a/src/components/chat/tools/components/ToolStatusBadge.tsx
+++ b/src/components/chat/tools/components/ToolStatusBadge.tsx
@@ -1,42 +0,0 @@
 import { cn } from '../../../../lib/utils';
 export type ToolStatus = 'running' | 'completed' | 'error' | 'denied';
 const STATUS_CONFIG: Record<ToolStatus, { label: string; className: string }> = {
  running: {
    label: 'Running',
    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
  },
  completed: {
    label: 'Completed',
    className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
  },
  error: {
    label: 'Error',
    className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
  },
  denied: {
    label: 'Denied',
    className: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
  },
 };
 interface ToolStatusBadgeProps {
  status: ToolStatus;
  className?: string;
 }
 export function ToolStatusBadge({ status, className }: ToolStatusBadgeProps) {
  const config = STATUS_CONFIG[status];
  return (
    <span
      className={cn(
        'inline-flex items-center rounded px-1.5 py-px text-[10px] font-medium',
        config.className,
        className,
      )}
    >
      {config.label}
    </span>
  );
 }
--- a/src/components/chat/tools/components/index.ts
+++ b/src/components/chat/tools/components/index.ts
@@ -5,5 +5,3 @@ export { CollapsibleDisplay } from './CollapsibleDisplay';
 export { SubagentContainer } from './SubagentContainer';
 export * from './ContentRenderers';
 export * from './InteractiveRenderers';
 export { ToolStatusBadge } from './ToolStatusBadge';
 export type { ToolStatus } from './ToolStatusBadge';
--- a/src/components/chat/tools/configs/toolConfigs.ts
+++ b/src/components/chat/tools/configs/toolConfigs.ts
@@ -5,7 +5,7 @@
 export interface ToolDisplayConfig {
  input: {
-    type: 'one-line' | 'collapsible' | 'plan' | 'hidden';
+    type: 'one-line' | 'collapsible' | 'hidden';
    // One-line config
    icon?: string;
    label?: string;
@@ -31,7 +31,7 @@ export interface ToolDisplayConfig {
  result?: {
    hidden?: boolean;
    hideOnSuccess?: boolean;
-    type?: 'one-line' | 'collapsible' | 'plan' | 'special';
+    type?: 'one-line' | 'collapsible' | 'special';
    title?: string | ((result: any) => string);
    defaultOpen?: boolean;
    // Special result handlers
@@ -494,7 +494,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
  exit_plan_mode: {
    input: {
-      type: 'plan',
+      type: 'collapsible',
      title: 'Implementation plan',
      defaultOpen: true,
      contentType: 'markdown',
@@ -503,14 +503,29 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
      })
    },
    result: {
-      hidden: true
+      type: 'collapsible',
      contentType: 'markdown',
      getContentProps: (result) => {
        try {
          let parsed = result.content;
          if (typeof parsed === 'string') {
            parsed = JSON.parse(parsed);
          }
          return {
            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
          };
        } catch (e) {
          console.warn('Failed to parse plan content:', e);
          return { content: '' };
        }
      }
    }
  },
  // Also register as ExitPlanMode (the actual tool name used by Claude)
  ExitPlanMode: {
    input: {
-      type: 'plan',
+      type: 'collapsible',
      title: 'Implementation plan',
      defaultOpen: true,
      contentType: 'markdown',
@@ -519,7 +534,22 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
      })
    },
    result: {
-      hidden: true
+      type: 'collapsible',
      contentType: 'markdown',
      getContentProps: (result) => {
        try {
          let parsed = result.content;
          if (typeof parsed === 'string') {
            parsed = JSON.parse(parsed);
          }
          return {
            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
          };
        } catch (e) {
          console.warn('Failed to parse plan content:', e);
          return { content: '' };
        }
      }
    }
  },
--- a/src/components/chat/types/types.ts
+++ b/src/components/chat/types/types.ts
@@ -1,6 +1,6 @@
-import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
-export type Provider = LLMProvider;
+export type Provider = SessionProvider;
 export type PermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions' | 'plan';
--- a/src/components/chat/view/ChatInterface.tsx
+++ b/src/components/chat/view/ChatInterface.tsx
@@ -1,17 +1,14 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
 import PermissionContext from '../../../contexts/PermissionContext';
 import { QuickSettingsPanel } from '../../quick-settings-panel';
 import type { ChatInterfaceProps, Provider  } from '../types/types';
-import type { LLMProvider } from '../../../types/app';
+import type { SessionProvider } from '../../../types/app';
 import { useChatProviderState } from '../hooks/useChatProviderState';
 import { useChatSessionState } from '../hooks/useChatSessionState';
 import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
 import { useChatComposerState } from '../hooks/useChatComposerState';
 import { useSessionStore } from '../../../stores/useSessionStore';
 import ChatMessagesPane from './subcomponents/ChatMessagesPane';
 import ChatComposer from './subcomponents/ChatComposer';
@@ -209,9 +206,9 @@ function ChatInterface({
  // so missed streaming events are shown. Also reset isLoading.
  const handleWebSocketReconnect = useCallback(async () => {
    if (!selectedProject || !selectedSession) return;
-    const providerVal = (localStorage.getItem('selected-provider') as LLMProvider) || 'claude';
+    const providerVal = (localStorage.getItem('selected-provider') as SessionProvider) || 'claude';
    await sessionStore.refreshFromServer(selectedSession.id, {
-      provider: (selectedSession.__provider || providerVal) as LLMProvider,
+      provider: (selectedSession.__provider || providerVal) as SessionProvider,
      projectName: selectedProject.name,
      projectPath: selectedProject.fullPath || selectedProject.path || '',
    });
@@ -270,11 +267,6 @@ function ChatInterface({
    };
  }, [resetStreamingState]);
  const permissionContextValue = useMemo(() => ({
    pendingPermissionRequests,
    handlePermissionDecision,
  }), [pendingPermissionRequests, handlePermissionDecision]);
  if (!selectedProject) {
    const selectedProviderLabel =
      provider === 'cursor'
@@ -300,7 +292,7 @@ function ChatInterface({
  }
  return (
-    <PermissionContext.Provider value={permissionContextValue}>
+    <>
      <div className="flex h-full flex-col">
        <ChatMessagesPane
          scrollContainerRef={scrollContainerRef}
@@ -401,6 +393,7 @@ function ChatInterface({
          onTextareaScrollSync={syncInputOverlayScroll}
          onTextareaInput={handleTextareaInput}
          onInputFocusChange={handleInputFocusChange}
          isInputFocused={isInputFocused}
          placeholder={t('input.placeholder', {
            provider:
              provider === 'cursor'
@@ -417,7 +410,7 @@ function ChatInterface({
      </div>
      <QuickSettingsPanel />
-    </PermissionContext.Provider>
+    </>
  );
 }
--- a/src/components/chat/view/subcomponents/ChatComposer.tsx
+++ b/src/components/chat/view/subcomponents/ChatComposer.tsx
@@ -11,24 +11,12 @@ import type {
  SetStateAction,
  TouchEvent,
 } from 'react';
 import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon } from 'lucide-react';
 import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
 import CommandMenu from './CommandMenu';
 import ClaudeStatus from './ClaudeStatus';
 import ImageAttachment from './ImageAttachment';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
-import ThinkingModeSelector from './ThinkingModeSelector';
+import ChatInputControls from './ChatInputControls';
 import TokenUsagePie from './TokenUsagePie';
 import {
  PromptInput,
  PromptInputHeader,
  PromptInputBody,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputTools,
  PromptInputButton,
  PromptInputSubmit,
 } from '../../../../shared/view/ui';
 interface MentionableFile {
  name: string;
@@ -98,6 +86,7 @@ interface ChatComposerProps {
  onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
  onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
  onInputFocusChange?: (focused: boolean) => void;
  isInputFocused?: boolean;
  placeholder: string;
  isTextareaExpanded: boolean;
  sendByCtrlEnter?: boolean;
@@ -153,6 +142,7 @@ export default function ChatComposer({
  onTextareaScrollSync,
  onTextareaInput,
  onInputFocusChange,
  isInputFocused,
  placeholder,
  isTextareaExpanded,
  sendByCtrlEnter,
@@ -170,43 +160,81 @@ export default function ChatComposer({
    (r) => r.toolName === 'AskUserQuestion'
  );
-  // Hide the thinking/status bar while any permission request is pending
+  // On mobile, when input is focused, float the input box at the bottom
-  const hasPendingPermissions = pendingPermissionRequests.length > 0;
+  const mobileFloatingClass = isInputFocused
    ? 'max-sm:fixed max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:z-50 max-sm:bg-background max-sm:shadow-[0_-4px_20px_rgba(0,0,0,0.15)]'
    : '';
  return (
-    <div className="flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
+    <div className={`flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6 ${mobileFloatingClass}`}>
-      {!hasPendingPermissions && (
+      {!hasQuestionPanel && (
-        <ClaudeStatus
+        <div className="flex-1">
-          status={claudeStatus}
+          <ClaudeStatus
-          isLoading={isLoading}
+            status={claudeStatus}
-          onAbort={onAbortSession}
+            isLoading={isLoading}
-          provider={provider}
+            onAbort={onAbortSession}
-        />
+            provider={provider}
      )}
      {pendingPermissionRequests.length > 0 && (
        <div className="mx-auto mb-3 max-w-4xl">
          <PermissionRequestsBanner
            pendingPermissionRequests={pendingPermissionRequests}
            handlePermissionDecision={handlePermissionDecision}
            handleGrantToolPermission={handleGrantToolPermission}
          />
        </div>
      )}
-      {!hasQuestionPanel && <div className="relative mx-auto max-w-4xl">
+      <div className="mx-auto mb-3 max-w-4xl">
-        {isUserScrolledUp && hasMessages && (
+        <PermissionRequestsBanner
-          <div className="absolute -top-10 left-0 right-0 z-10 flex justify-center">
+          pendingPermissionRequests={pendingPermissionRequests}
-            <button
+          handlePermissionDecision={handlePermissionDecision}
-              type="button"
+          handleGrantToolPermission={handleGrantToolPermission}
-              onClick={onScrollToBottom}
+        />
-              className="flex h-8 w-8 items-center justify-center rounded-full border border-border/50 bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:bg-accent hover:text-foreground"
+
-              title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
+        {!hasQuestionPanel && <ChatInputControls
-            >
+          permissionMode={permissionMode}
-              <ArrowDownIcon className="h-4 w-4" />
+          onModeSwitch={onModeSwitch}
-            </button>
+          provider={provider}
          thinkingMode={thinkingMode}
          setThinkingMode={setThinkingMode}
          tokenBudget={tokenBudget}
          slashCommandsCount={slashCommandsCount}
          onToggleCommandMenu={onToggleCommandMenu}
          hasInput={hasInput}
          onClearInput={onClearInput}
          isUserScrolledUp={isUserScrolledUp}
          hasMessages={hasMessages}
          onScrollToBottom={onScrollToBottom}
        />}
      </div>
      {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative mx-auto max-w-4xl">
        {isDragActive && (
          <div className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/15">
            <div className="rounded-xl border border-border/30 bg-card p-4 shadow-lg">
              <svg className="mx-auto mb-2 h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                />
              </svg>
              <p className="text-sm font-medium">Drop images here</p>
            </div>
          </div>
        )}
        {attachedImages.length > 0 && (
          <div className="mb-2 rounded-xl bg-muted/40 p-2">
            <div className="flex flex-wrap gap-2">
              {attachedImages.map((file, index) => (
                <ImageAttachment
                  key={index}
                  file={file}
                  onRemove={() => onRemoveImage(index)}
                  uploadProgress={uploadingImages.get(file.name)}
                  error={imageErrors.get(file.name)}
                />
              ))}
            </div>
          </div>
        )}
        {showFileDropdown && filteredFiles.length > 0 && (
          <div className="absolute bottom-full left-0 right-0 z-50 mb-2 max-h-48 overflow-y-auto rounded-xl border border-border/50 bg-card/95 shadow-lg backdrop-blur-md">
            {filteredFiles.map((file, index) => (
@@ -244,56 +272,21 @@ export default function ChatComposer({
          frequentCommands={frequentCommands}
        />
-        <PromptInput
+        <div
          onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void}
          status={isLoading ? 'streaming' : 'ready'}
          className={isTextareaExpanded ? 'chat-input-expanded' : ''}
          {...getRootProps()}
          className={`relative overflow-hidden rounded-2xl border border-border/50 bg-card/80 shadow-sm backdrop-blur-sm transition-all duration-200 focus-within:border-primary/30 focus-within:shadow-md focus-within:ring-1 focus-within:ring-primary/15 ${
            isTextareaExpanded ? 'chat-input-expanded' : ''
          }`}
        >
          {isDragActive && (
            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/15">
              <div className="rounded-xl border border-border/30 bg-card p-4 shadow-lg">
                <svg className="mx-auto mb-2 h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                  />
                </svg>
                <p className="text-sm font-medium">Drop images here</p>
              </div>
            </div>
          )}
          {attachedImages.length > 0 && (
            <PromptInputHeader>
              <div className="rounded-xl bg-muted/40 p-2">
                <div className="flex flex-wrap gap-2">
                  {attachedImages.map((file, index) => (
                    <ImageAttachment
                      key={index}
                      file={file}
                      onRemove={() => onRemoveImage(index)}
                      uploadProgress={uploadingImages.get(file.name)}
                      error={imageErrors.get(file.name)}
                    />
                  ))}
                </div>
              </div>
            </PromptInputHeader>
          )}
          <input {...getInputProps()} />
-
+          <div ref={inputHighlightRef} aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
-          <PromptInputBody>
+            <div className="chat-input-placeholder block w-full whitespace-pre-wrap break-words py-1.5 pl-12 pr-20 text-base leading-6 text-transparent sm:py-4 sm:pr-40">
-            <div ref={inputHighlightRef} aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-xl">
+              {renderInputWithMentions(input)}
              <div className="chat-input-placeholder block w-full whitespace-pre-wrap break-words px-4 py-2 text-sm leading-6 text-transparent">
                {renderInputWithMentions(input)}
              </div>
            </div>
          </div>
-            <PromptInputTextarea
+          <div className="relative z-10">
            <textarea
              ref={textareaRef}
              value={input}
              onChange={onInputChange}
@@ -305,110 +298,54 @@ export default function ChatComposer({
              onBlur={() => onInputFocusChange?.(false)}
              onInput={onTextareaInput}
              placeholder={placeholder}
              className="chat-input-placeholder block max-h-[40vh] min-h-[50px] w-full resize-none overflow-y-auto rounded-2xl bg-transparent py-1.5 pl-12 pr-20 text-base leading-6 text-foreground placeholder-muted-foreground/50 transition-all duration-200 focus:outline-none sm:max-h-[300px] sm:min-h-[80px] sm:py-4 sm:pr-40"
              style={{ height: '50px' }}
            />
        </PromptInputBody>
        <PromptInputFooter>
          <PromptInputTools>
            <PromptInputButton
              tooltip={{ content: t('input.attachImages') }}
              onClick={openImagePicker}
            >
              <ImageIcon />
            </PromptInputButton>
            <button
              type="button"
-              onClick={onModeSwitch}
+              onClick={openImagePicker}
-              className={`rounded-lg border px-1.5 py-1 text-xs font-medium transition-all duration-200 sm:px-2.5 ${
+              className="absolute left-2 top-1/2 -translate-y-1/2 transform rounded-xl p-2 transition-colors hover:bg-accent/60"
-                permissionMode === 'default'
+              title={t('input.attachImages')}
                  ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
                  : permissionMode === 'acceptEdits'
                    ? 'border-green-300/60 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-600/40 dark:bg-green-900/15 dark:text-green-300 dark:hover:bg-green-900/25'
                    : permissionMode === 'bypassPermissions'
                      ? 'border-orange-300/60 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-600/40 dark:bg-orange-900/15 dark:text-orange-300 dark:hover:bg-orange-900/25'
                      : 'border-primary/20 bg-primary/5 text-primary hover:bg-primary/10'
              }`}
              title={t('input.clickToChangeMode')}
            >
-              <div className="flex items-center gap-1.5">
+              <svg className="h-5 w-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <div
+                <path
-                  className={`h-2 w-2 rounded-full sm:h-1.5 sm:w-1.5 ${
+                  strokeLinecap="round"
-                    permissionMode === 'default'
+                  strokeLinejoin="round"
-                      ? 'bg-muted-foreground'
+                  strokeWidth={2}
-                      : permissionMode === 'acceptEdits'
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                        ? 'bg-green-500'
                        : permissionMode === 'bypassPermissions'
                          ? 'bg-orange-500'
                          : 'bg-primary'
                  }`}
                />
-                <span className="hidden sm:inline">
+              </svg>
                  {permissionMode === 'default' && t('codex.modes.default')}
                  {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
                  {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
                  {permissionMode === 'plan' && t('codex.modes.plan')}
                </span>
              </div>
            </button>
-            {provider === 'claude' && (
+            <button
-              <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
+              type="submit"
-            )}
+              disabled={!input.trim() || isLoading}
-
+              onMouseDown={(event) => {
-            <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+                event.preventDefault();
-
+                onSubmit(event);
-            <PromptInputButton
+              }}
-              tooltip={{ content: t('input.showAllCommands') }}
+              onTouchStart={(event) => {
-              onClick={onToggleCommandMenu}
+                event.preventDefault();
-              className="relative"
+                onSubmit(event);
              }}
              className="absolute right-2 top-1/2 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-xl bg-primary transition-all duration-200 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground sm:h-11 sm:w-11"
            >
-              <MessageSquareIcon />
+              <svg className="h-4 w-4 rotate-90 transform text-primary-foreground sm:h-[18px] sm:w-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              {slashCommandsCount > 0 && (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                <span
+              </svg>
-                  className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground"
+            </button>
                >
                  {slashCommandsCount}
                </span>
              )}
            </PromptInputButton>
            {hasInput && (
              <PromptInputButton
                tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }}
                onClick={onClearInput}
                className="hidden sm:inline-flex"
              >
                <XIcon />
              </PromptInputButton>
            )}
          </PromptInputTools>
          <div className="flex items-center gap-2">
            <div
-              className={`hidden text-xs text-muted-foreground/50 transition-opacity duration-200 lg:block ${
+              className={`pointer-events-none absolute bottom-1 left-12 right-14 hidden text-xs text-muted-foreground/50 transition-opacity duration-200 sm:right-40 sm:block ${
                input.trim() ? 'opacity-0' : 'opacity-100'
              }`}
            >
              {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
            </div>
            <PromptInputSubmit
              disabled={!input.trim() || isLoading}
              className="h-10 w-10 sm:h-10 sm:w-10"
              onMouseDown={(event) => {
                event.preventDefault();
                onSubmit(event as unknown as MouseEvent<HTMLButtonElement>);
              }}
              onTouchStart={(event) => {
                event.preventDefault();
                onSubmit(event as unknown as TouchEvent<HTMLButtonElement>);
              }}
            />
          </div>
-        </PromptInputFooter>
+        </div>
-      </PromptInput>
+      </form>}
      </div>}
    </div>
  );
 }
--- a/src/components/chat/view/subcomponents/ChatInputControls.tsx
+++ b/src/components/chat/view/subcomponents/ChatInputControls.tsx
@@ -0,0 +1,137 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import type { PermissionMode, Provider } from '../../types/types';
 import ThinkingModeSelector from './ThinkingModeSelector';
 import TokenUsagePie from './TokenUsagePie';
 interface ChatInputControlsProps {
  permissionMode: PermissionMode | string;
  onModeSwitch: () => void;
  provider: Provider | string;
  thinkingMode: string;
  setThinkingMode: React.Dispatch<React.SetStateAction<string>>;
  tokenBudget: { used?: number; total?: number } | null;
  slashCommandsCount: number;
  onToggleCommandMenu: () => void;
  hasInput: boolean;
  onClearInput: () => void;
  isUserScrolledUp: boolean;
  hasMessages: boolean;
  onScrollToBottom: () => void;
 }
 export default function ChatInputControls({
  permissionMode,
  onModeSwitch,
  provider,
  thinkingMode,
  setThinkingMode,
  tokenBudget,
  slashCommandsCount,
  onToggleCommandMenu,
  hasInput,
  onClearInput,
  isUserScrolledUp,
  hasMessages,
  onScrollToBottom,
 }: ChatInputControlsProps) {
  const { t } = useTranslation('chat');
  return (
    <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
      <button
        type="button"
        onClick={onModeSwitch}
        className={`rounded-lg border px-2.5 py-1 text-sm font-medium transition-all duration-200 sm:px-3 sm:py-1.5 ${
          permissionMode === 'default'
            ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
            : permissionMode === 'acceptEdits'
              ? 'border-green-300/60 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-600/40 dark:bg-green-900/15 dark:text-green-300 dark:hover:bg-green-900/25'
              : permissionMode === 'bypassPermissions'
                ? 'border-orange-300/60 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-600/40 dark:bg-orange-900/15 dark:text-orange-300 dark:hover:bg-orange-900/25'
                : 'border-primary/20 bg-primary/5 text-primary hover:bg-primary/10'
        }`}
        title={t('input.clickToChangeMode')}
      >
        <div className="flex items-center gap-1.5">
          <div
            className={`h-1.5 w-1.5 rounded-full ${
              permissionMode === 'default'
                ? 'bg-muted-foreground'
                : permissionMode === 'acceptEdits'
                  ? 'bg-green-500'
                  : permissionMode === 'bypassPermissions'
                    ? 'bg-orange-500'
                    : 'bg-primary'
            }`}
          />
          <span>
            {permissionMode === 'default' && t('codex.modes.default')}
            {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
            {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
            {permissionMode === 'plan' && t('codex.modes.plan')}
          </span>
        </div>
      </button>
      {provider === 'claude' && (
        <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
      )}
      <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
      <button
        type="button"
        onClick={onToggleCommandMenu}
        className="relative flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground sm:h-8 sm:w-8"
        title={t('input.showAllCommands')}
      >
        <svg className="h-4 w-4 sm:h-5 sm:w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
          />
        </svg>
        {slashCommandsCount > 0 && (
          <span
            className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground sm:h-5 sm:w-5"
          >
            {slashCommandsCount}
          </span>
        )}
      </button>
      {hasInput && (
        <button
          type="button"
          onClick={onClearInput}
          className="group flex h-7 w-7 items-center justify-center rounded-lg border border-border/50 bg-card shadow-sm transition-all duration-200 hover:bg-accent/60 sm:h-8 sm:w-8"
          title={t('input.clearInput', { defaultValue: 'Clear input' })}
        >
          <svg
            className="h-3.5 w-3.5 text-muted-foreground transition-colors group-hover:text-foreground sm:h-4 sm:w-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
      {isUserScrolledUp && hasMessages && (
        <button
          onClick={onScrollToBottom}
          className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm transition-all duration-200 hover:scale-105 hover:bg-primary/90 sm:h-8 sm:w-8"
          title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
        >
          <svg className="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </button>
      )}
    </div>
  );
 }
--- a/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
+++ b/src/components/chat/view/subcomponents/ChatMessagesPane.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useCallback, useRef } from 'react';
 import type { Dispatch, RefObject, SetStateAction } from 'react';
 import type { ChatMessage } from '../../types/types';
-import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import { getIntrinsicMessageKey } from '../../utils/messageKeys';
 import MessageComponent from './MessageComponent';
 import ProviderSelectionEmptyState from './ProviderSelectionEmptyState';
@@ -15,8 +15,8 @@ interface ChatMessagesPaneProps {
  chatMessages: ChatMessage[];
  selectedSession: ProjectSession | null;
  currentSessionId: string | null;
-  provider: LLMProvider;
+  provider: SessionProvider;
-  setProvider: (provider: LLMProvider) => void;
+  setProvider: (provider: SessionProvider) => void;
  textareaRef: RefObject<HTMLTextAreaElement>;
  claudeModel: string;
  setClaudeModel: (model: string) => void;
--- a/src/components/chat/view/subcomponents/MessageComponent.tsx
+++ b/src/components/chat/view/subcomponents/MessageComponent.tsx
@@ -11,7 +11,6 @@ import { formatUsageLimitText } from '../../utils/chatFormatting';
 import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
 import type { Project } from '../../../../types/app';
 import { ToolRenderer, shouldHideToolResult } from '../../tools';
 import { Reasoning, ReasoningTrigger, ReasoningContent } from '../../../../shared/view/ui';
 import { Markdown } from './Markdown';
 import MessageCopyControl from './MessageCopyControl';
@@ -69,8 +68,7 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
  const shouldShowUserCopyControl = message.type === 'user' && userCopyContent.trim().length > 0;
  const shouldShowAssistantCopyControl = message.type === 'assistant' &&
    assistantCopyContent.trim().length > 0 &&
-    !isCommandOrFileEditToolResponse &&
+    !isCommandOrFileEditToolResponse;
    !message.isThinking;
  useEffect(() => {
@@ -380,30 +378,36 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
                </div>
              </div>
            ) : message.isThinking ? (
-              /* Thinking messages — Reasoning component (ai-elements pattern) */
+              /* Thinking messages - collapsible by default */
-              <Reasoning defaultOpen={false}>
+              <div className="text-sm text-gray-700 dark:text-gray-300">
-                <ReasoningTrigger />
+                <details className="group">
-                <ReasoningContent>
+                  <summary className="flex cursor-pointer items-center gap-2 font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
+                    <svg className="h-3 w-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    {message.content}
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </Markdown>
+                    </svg>
-                  <div className="mt-3 flex items-center text-[11px]">
+                    <span>{t('thinking.emoji')}</span>
-                    <MessageCopyControl content={String(message.content || '')} messageType="assistant" />
+                  </summary>
                  <div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm text-gray-600 dark:border-gray-600 dark:text-gray-400">
                    <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
                      {message.content}
                    </Markdown>
                  </div>
-                </ReasoningContent>
+                </details>
-              </Reasoning>
+              </div>
            ) : (
              <div className="text-sm text-gray-700 dark:text-gray-300">
-                {/* Reasoning accordion */}
+                {/* Thinking accordion for reasoning */}
                {showThinking && message.reasoning && (
-                  <Reasoning className="mb-3" defaultOpen={false}>
+                  <details className="mb-3">
-                    <ReasoningTrigger />
+                    <summary className="cursor-pointer font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
-                    <ReasoningContent>
+                      {t('thinking.emoji')}
                    </summary>
                    <div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm italic text-gray-600 dark:border-gray-600 dark:text-gray-400">
                      <div className="whitespace-pre-wrap">
                        {message.reasoning}
                      </div>
-                    </ReasoningContent>
+                    </div>
-                  </Reasoning>
+                  </details>
                )}
                {(() => {
--- a/src/components/chat/view/subcomponents/PermissionRequestsBanner.tsx
+++ b/src/components/chat/view/subcomponents/PermissionRequestsBanner.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
 import { ShieldAlertIcon } from 'lucide-react';
 import type { PendingPermissionRequest } from '../../types/types';
 import { buildClaudeToolPermissionEntry, formatToolInputForDisplay } from '../../utils/chatPermissions';
 import { getClaudeSettings } from '../../utils/chatStorage';
 import { getPermissionPanel, registerPermissionPanel } from '../../tools/configs/permissionPanelRegistry';
 import { AskUserQuestionPanel } from '../../tools/components/InteractiveRenderers';
 import {
  Confirmation,
  ConfirmationTitle,
  ConfirmationRequest,
  ConfirmationActions,
  ConfirmationAction,
 } from '../../../../shared/view/ui';
 registerPermissionPanel('AskUserQuestion', AskUserQuestionPanel);
@@ -30,18 +21,13 @@ export default function PermissionRequestsBanner({
  handlePermissionDecision,
  handleGrantToolPermission,
 }: PermissionRequestsBannerProps) {
-  // Filter out plan tool requests — they are handled inline by PlanDisplay
+  if (!pendingPermissionRequests.length) {
  const filteredRequests = pendingPermissionRequests.filter(
    (r) => r.toolName !== 'ExitPlanMode' && r.toolName !== 'exit_plan_mode'
  );
  if (!filteredRequests.length) {
    return null;
  }
  return (
    <div className="mb-3 space-y-2">
-      {filteredRequests.map((request) => {
+      {pendingPermissionRequests.map((request) => {
        const CustomPanel = getPermissionPanel(request.toolName);
        if (CustomPanel) {
          return (
@@ -68,62 +54,69 @@ export default function PermissionRequestsBanner({
          : [request.requestId];
        return (
-          <Confirmation key={request.requestId} approval="pending">
+          <div
-            <ConfirmationTitle className="flex items-start gap-3">
+            key={request.requestId}
-              <ShieldAlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+            className="rounded-lg border border-amber-200 bg-amber-50 p-3 shadow-sm dark:border-amber-800 dark:bg-amber-900/20"
-              <ConfirmationRequest>
+          >
-                <div>
+            <div className="flex flex-wrap items-start justify-between gap-3">
-                  <span className="font-medium text-foreground">Permission required</span>
+              <div>
-                  <span className="ml-2 text-muted-foreground">
+                <div className="text-sm font-semibold text-amber-900 dark:text-amber-100">Permission required</div>
-                    Tool: <code className="rounded bg-muted px-1.5 py-0.5 text-xs">{request.toolName}</code>
+                <div className="text-xs text-amber-800 dark:text-amber-200">
-                  </span>
+                  Tool: <span className="font-mono">{request.toolName}</span>
                </div>
-                {permissionEntry && (
+              </div>
-                  <div className="mt-1 text-xs text-muted-foreground">
+              {permissionEntry && (
-                    Allow rule: <code className="rounded bg-muted px-1 py-0.5 text-xs">{permissionEntry}</code>
+                <div className="text-xs text-amber-700 dark:text-amber-300">
-                  </div>
+                  Allow rule: <span className="font-mono">{permissionEntry}</span>
-                )}
+                </div>
-              </ConfirmationRequest>
+              )}
-            </ConfirmationTitle>
+            </div>
            {rawInput && (
              <details className="mt-2">
-                <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
+                <summary className="cursor-pointer text-xs text-amber-800 hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100">
                  View tool input
                </summary>
-                <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border bg-muted/50 p-2 text-xs text-muted-foreground">
+                <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border border-amber-200/60 bg-white/80 p-2 text-xs text-amber-900 dark:border-amber-800/60 dark:bg-gray-900/60 dark:text-amber-100">
                  {rawInput}
                </pre>
              </details>
            )}
-            <ConfirmationActions>
+            <div className="mt-3 flex flex-wrap gap-2">
-              <ConfirmationAction
+              <button
-                variant="outline"
+                type="button"
-                onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
+                onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
                className="inline-flex items-center gap-2 rounded-md bg-amber-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-amber-700"
              >
-                Deny
+                Allow once
-              </ConfirmationAction>
+              </button>
-              <ConfirmationAction
+              <button
-                variant="outline"
+                type="button"
                onClick={() => {
                  if (permissionEntry && !alreadyAllowed) {
                    handleGrantToolPermission({ entry: permissionEntry, toolName: request.toolName });
                  }
                  handlePermissionDecision(matchingRequestIds, { allow: true, rememberEntry: permissionEntry });
                }}
                className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
                  permissionEntry
                    ? 'border-amber-300 text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:text-amber-100 dark:hover:bg-amber-900/30'
                    : 'cursor-not-allowed border-gray-300 text-gray-400'
                }`}
                disabled={!permissionEntry}
              >
                {rememberLabel}
-              </ConfirmationAction>
+              </button>
-              <ConfirmationAction
+              <button
-                variant="default"
+                type="button"
-                onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
+                onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
                className="inline-flex items-center gap-2 rounded-md border border-red-300 px-3 py-1.5 text-xs font-medium text-red-700 transition-colors hover:bg-red-50 dark:border-red-800 dark:text-red-200 dark:hover:bg-red-900/30"
              >
-                Allow once
+                Deny
-              </ConfirmationAction>
+              </button>
-            </ConfirmationActions>
+            </div>
-          </Confirmation>
+          </div>
        );
      })}
    </div>
--- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
+++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx
@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React from "react";
 import { Check, ChevronDown } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
 import {
  CLAUDE_MODELS,
@@ -9,27 +8,14 @@ import {
  CODEX_MODELS,
  GEMINI_MODELS,
 } from "../../../../../shared/modelConstants";
-import type { ProjectSession, LLMProvider } from "../../../../types/app";
+import type { ProjectSession, SessionProvider } from "../../../../types/app";
 import { NextTaskBanner } from "../../../task-master";
 import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  Card,
 } from "../../../../shared/view/ui";
 type ProviderSelectionEmptyStateProps = {
  selectedSession: ProjectSession | null;
  currentSessionId: string | null;
-  provider: LLMProvider;
+  provider: SessionProvider;
-  setProvider: (next: LLMProvider) => void;
+  setProvider: (next: SessionProvider) => void;
  textareaRef: React.RefObject<HTMLTextAreaElement>;
  claudeModel: string;
  setClaudeModel: (model: string) => void;
@@ -45,28 +31,59 @@ type ProviderSelectionEmptyStateProps = {
  setInput: React.Dispatch<React.SetStateAction<string>>;
 };
-interface ProviderGroup {
+type ProviderDef = {
-  id: LLMProvider;
+  id: SessionProvider;
  name: string;
-  models: { value: string; label: string }[];
+  infoKey: string;
-}
+  accent: string;
  ring: string;
  check: string;
 };
-const PROVIDER_GROUPS: ProviderGroup[] = [
+const PROVIDERS: ProviderDef[] = [
-  { id: "claude", name: "Anthropic", models: CLAUDE_MODELS.OPTIONS },
+  {
-  { id: "cursor", name: "Cursor", models: CURSOR_MODELS.OPTIONS },
+    id: "claude",
-  { id: "codex", name: "OpenAI", models: CODEX_MODELS.OPTIONS },
+    name: "Claude Code",
-  { id: "gemini", name: "Google", models: GEMINI_MODELS.OPTIONS },
+    infoKey: "providerSelection.providerInfo.anthropic",
    accent: "border-primary",
    ring: "ring-primary/15",
    check: "bg-primary text-primary-foreground",
  },
  {
    id: "cursor",
    name: "Cursor",
    infoKey: "providerSelection.providerInfo.cursorEditor",
    accent: "border-violet-500 dark:border-violet-400",
    ring: "ring-violet-500/15",
    check: "bg-violet-500 text-white",
  },
  {
    id: "codex",
    name: "Codex",
    infoKey: "providerSelection.providerInfo.openai",
    accent: "border-emerald-600 dark:border-emerald-400",
    ring: "ring-emerald-600/15",
    check: "bg-emerald-600 dark:bg-emerald-500 text-white",
  },
  {
    id: "gemini",
    name: "Gemini",
    infoKey: "providerSelection.providerInfo.google",
    accent: "border-blue-500 dark:border-blue-400",
    ring: "ring-blue-500/15",
    check: "bg-blue-500 text-white",
  },
 ];
-function getModelConfig(p: LLMProvider) {
+function getModelConfig(p: SessionProvider) {
  if (p === "claude") return CLAUDE_MODELS;
  if (p === "codex") return CODEX_MODELS;
  if (p === "gemini") return GEMINI_MODELS;
  return CURSOR_MODELS;
 }
-function getCurrentModel(
+function getModelValue(
-  p: LLMProvider,
+  p: SessionProvider,
  c: string,
  cu: string,
  co: string,
@@ -78,13 +95,6 @@ function getCurrentModel(
  return cu;
 }
 function getProviderDisplayName(p: LLMProvider) {
  if (p === "claude") return "Claude";
  if (p === "cursor") return "Cursor";
  if (p === "codex") return "Codex";
  return "Gemini";
 }
 export default function ProviderSelectionEmptyState({
  selectedSession,
  currentSessionId,
@@ -105,12 +115,34 @@ export default function ProviderSelectionEmptyState({
  setInput,
 }: ProviderSelectionEmptyStateProps) {
  const { t } = useTranslation("chat");
  const [dialogOpen, setDialogOpen] = useState(false);
  const nextTaskPrompt = t("tasks.nextTaskPrompt", {
    defaultValue: "Start the next task",
  });
-  const currentModel = getCurrentModel(
+  const selectProvider = (next: SessionProvider) => {
    setProvider(next);
    localStorage.setItem("selected-provider", next);
    setTimeout(() => textareaRef.current?.focus(), 100);
  };
  const handleModelChange = (value: string) => {
    if (provider === "claude") {
      setClaudeModel(value);
      localStorage.setItem("claude-model", value);
    } else if (provider === "codex") {
      setCodexModel(value);
      localStorage.setItem("codex-model", value);
    } else if (provider === "gemini") {
      setGeminiModel(value);
      localStorage.setItem("gemini-model", value);
    } else {
      setCursorModel(value);
      localStorage.setItem("cursor-model", value);
    }
  };
  const modelConfig = getModelConfig(provider);
  const currentModel = getModelValue(
    provider,
    claudeModel,
    cursorModel,
@@ -118,42 +150,7 @@ export default function ProviderSelectionEmptyState({
    geminiModel,
  );
-  const currentModelLabel = useMemo(() => {
+  /* ── New session — provider picker ── */
    const config = getModelConfig(provider);
    const found = config.OPTIONS.find(
      (o: { value: string; label: string }) => o.value === currentModel,
    );
    return found?.label || currentModel;
  }, [provider, currentModel]);
  const handleModelSelect = useCallback(
    (providerId: LLMProvider, modelValue: string) => {
      // Set provider
      setProvider(providerId);
      localStorage.setItem("selected-provider", providerId);
      // Set model for the correct provider
      if (providerId === "claude") {
        setClaudeModel(modelValue);
        localStorage.setItem("claude-model", modelValue);
      } else if (providerId === "codex") {
        setCodexModel(modelValue);
        localStorage.setItem("codex-model", modelValue);
      } else if (providerId === "gemini") {
        setGeminiModel(modelValue);
        localStorage.setItem("gemini-model", modelValue);
      } else {
        setCursorModel(modelValue);
        localStorage.setItem("cursor-model", modelValue);
      }
      setDialogOpen(false);
      setTimeout(() => textareaRef.current?.focus(), 100);
    },
    [setProvider, setClaudeModel, setCursorModel, setCodexModel, setGeminiModel, textareaRef],
  );
  /* ── New session — provider + model picker ── */
  if (!selectedSession && !currentSessionId) {
    return (
      <div className="flex h-full items-center justify-center px-4">
@@ -168,100 +165,96 @@ export default function ProviderSelectionEmptyState({
            </p>
          </div>
-          {/* Model selector trigger — hero card style */}
+          {/* Provider cards — horizontal row, equal width */}
-          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <div className="mb-6 grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-2.5">
-            <DialogTrigger asChild>
+            {PROVIDERS.map((p) => {
-              <Card
+              const active = provider === p.id;
-                className="group mx-auto max-w-sm cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]"
+              return (
-                role="button"
+                <button
-                tabIndex={0}
+                  key={p.id}
-              >
+                  onClick={() => selectProvider(p.id)}
-                <div className="flex items-center gap-3 p-4">
+                  className={`
                    relative flex flex-col items-center gap-2.5 rounded-xl border-[1.5px] px-2
                    pb-4 pt-5 transition-all duration-150
                    active:scale-[0.97]
                    ${
                      active
                        ? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
                        : "border-border bg-card/60 hover:border-border/80 hover:bg-card"
                    }
                  `}
                >
                  <SessionProviderLogo
-                    provider={provider}
+                    provider={p.id}
-                    className="h-8 w-8 shrink-0"
+                    className={`h-9 w-9 transition-transform duration-150 ${active ? "scale-110" : ""}`}
                  />
-                  <div className="min-w-0 flex-1">
+                  <div className="text-center">
-                    <div className="flex items-center gap-1.5">
+                    <p className="text-[13px] font-semibold leading-none text-foreground">
-                      <span className="text-sm font-semibold text-foreground">
+                      {p.name}
-                        {getProviderDisplayName(provider)}
+                    </p>
-                      </span>
+                    <p className="mt-1 text-[10px] leading-tight text-muted-foreground">
-                      <span className="text-xs text-muted-foreground">·</span>
+                      {t(p.infoKey)}
                      <span className="truncate text-sm text-foreground">
                        {currentModelLabel}
                      </span>
                    </div>
                    <p className="mt-0.5 text-xs text-muted-foreground">
                      {t("providerSelection.clickToChange", {
                        defaultValue: "Click to change model",
                      })}
                    </p>
                  </div>
-                  <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" />
+                  {/* Check badge */}
-                </div>
+                  {active && (
-              </Card>
+                    <div
-            </DialogTrigger>
+                      className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}
            <DialogContent className="max-w-md overflow-hidden p-0">
              <DialogTitle>Model Selector</DialogTitle>
              <Command>
                <CommandInput placeholder={t("providerSelection.searchModels", { defaultValue: "Search models..." })} />
                <CommandList className="max-h-[350px]">
                  <CommandEmpty>
                    {t("providerSelection.noModelsFound", { defaultValue: "No models found." })}
                  </CommandEmpty>
                  {PROVIDER_GROUPS.map((group) => (
                    <CommandGroup
                      key={group.id}
                      heading={
                        <span className="flex items-center gap-1.5">
                          <SessionProviderLogo provider={group.id} className="h-3.5 w-3.5 shrink-0" />
                          {group.name}
                        </span>
                      }
                    >
-                      {group.models.map((model) => {
+                      <Check className="h-2.5 w-2.5" strokeWidth={3} />
-                        const isSelected =
+                    </div>
-                          provider === group.id && currentModel === model.value;
+                  )}
-                        return (
+                </button>
-                          <CommandItem
+              );
-                            key={`${group.id}-${model.value}`}
+            })}
-                            value={`${group.name} ${model.label}`}
+          </div>
                            onSelect={() => handleModelSelect(group.id, model.value)}
                          >
                            <span className="flex-1 truncate">{model.label}</span>
                            {isSelected && (
                              <Check className="ml-auto h-4 w-4 shrink-0 text-primary" />
                            )}
                          </CommandItem>
                        );
                      })}
                    </CommandGroup>
                  ))}
                </CommandList>
              </Command>
            </DialogContent>
          </Dialog>
-          {/* Ready prompt */}
+          {/* Model picker — appears after provider is chosen */}
-          <p className="mt-4 text-center text-sm text-muted-foreground/70">
+          <div
-            {
+            className={`transition-all duration-200 ${provider ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0"}`}
          >
            <div className="mb-5 flex items-center justify-center gap-2">
              <span className="text-sm text-muted-foreground">
                {t("providerSelection.selectModel")}
              </span>
              <div className="relative">
                <select
                  value={currentModel}
                  onChange={(e) => handleModelChange(e.target.value)}
                  tabIndex={-1}
                  className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
                >
                  {modelConfig.OPTIONS.map(
                    ({ value, label }: { value: string; label: string }) => (
                      <option key={value + label} value={value}>
                        {label}
                      </option>
                    ),
                  )}
                </select>
                <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
              </div>
            </div>
            <p className="text-center text-sm text-muted-foreground/70">
              {
-                claude: t("providerSelection.readyPrompt.claude", {
+                {
-                  model: claudeModel,
+                  claude: t("providerSelection.readyPrompt.claude", {
-                }),
+                    model: claudeModel,
-                cursor: t("providerSelection.readyPrompt.cursor", {
+                  }),
-                  model: cursorModel,
+                  cursor: t("providerSelection.readyPrompt.cursor", {
-                }),
+                    model: cursorModel,
-                codex: t("providerSelection.readyPrompt.codex", {
+                  }),
-                  model: codexModel,
+                  codex: t("providerSelection.readyPrompt.codex", {
-                }),
+                    model: codexModel,
-                gemini: t("providerSelection.readyPrompt.gemini", {
+                  }),
-                  model: geminiModel,
+                  gemini: t("providerSelection.readyPrompt.gemini", {
-                }),
+                    model: geminiModel,
-              }[provider]
+                  }),
-            }
+                }[provider]
-          </p>
+              }
            </p>
          </div>
          {/* Task banner */}
          {provider && tasksEnabled && isTaskMasterInstalled && (
--- a/src/components/llm-logo-provider/SessionProviderLogo.tsx
+++ b/src/components/llm-logo-provider/SessionProviderLogo.tsx
@@ -1,11 +1,11 @@
-import type { LLMProvider } from '../../types/app';
+import type { SessionProvider } from '../../types/app';
 import ClaudeLogo from './ClaudeLogo';
 import CodexLogo from './CodexLogo';
 import CursorLogo from './CursorLogo';
 import GeminiLogo from './GeminiLogo';
 type SessionProviderLogoProps = {
-  provider?: LLMProvider | string | null;
+  provider?: SessionProvider | string | null;
  className?: string;
 };
--- a/src/components/onboarding/view/Onboarding.tsx
+++ b/src/components/onboarding/view/Onboarding.tsx
@@ -1,15 +1,17 @@
 import { Check, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import { authenticatedFetch } from '../../../utils/api';
 import { useProviderAuthStatus } from '../../provider-auth/hooks/useProviderAuthStatus';
 import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
 import AgentConnectionsStep from './subcomponents/AgentConnectionsStep';
 import GitConfigurationStep from './subcomponents/GitConfigurationStep';
 import OnboardingStepProgress from './subcomponents/OnboardingStepProgress';
 import type { CliProvider, ProviderStatusMap } from './types';
 import {
  cliProviders,
  createInitialProviderStatuses,
  gitEmailPattern,
  readErrorMessageFromResponse,
  selectedProject,
 } from './utils';
 type OnboardingProps = {
@@ -22,14 +24,59 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
  const [gitEmail, setGitEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
-  const [activeLoginProvider, setActiveLoginProvider] = useState<LLMProvider | null>(null);
+  const [activeLoginProvider, setActiveLoginProvider] = useState<CliProvider | null>(null);
-  const {
+  const [providerStatuses, setProviderStatuses] = useState<ProviderStatusMap>(createInitialProviderStatuses);
    providerAuthStatus,
    checkProviderAuthStatus,
    refreshProviderAuthStatuses,
  } = useProviderAuthStatus();
-  const previousActiveLoginProviderRef = useRef<LLMProvider | null | undefined>(undefined);
+  const previousActiveLoginProviderRef = useRef<CliProvider | null | undefined>(undefined);
  const checkProviderAuthStatus = useCallback(async (provider: CliProvider) => {
    try {
      const response = await authenticatedFetch(`/api/cli/${provider}/status`);
      if (!response.ok) {
        setProviderStatuses((previous) => ({
          ...previous,
          [provider]: {
            authenticated: false,
            email: null,
            loading: false,
            error: 'Failed to check authentication status',
          },
        }));
        return;
      }
      const payload = (await response.json()) as {
        authenticated?: boolean;
        email?: string | null;
        error?: string | null;
      };
      setProviderStatuses((previous) => ({
        ...previous,
        [provider]: {
          authenticated: Boolean(payload.authenticated),
          email: payload.email ?? null,
          loading: false,
          error: payload.error ?? null,
        },
      }));
    } catch (caughtError) {
      console.error(`Error checking ${provider} auth status:`, caughtError);
      setProviderStatuses((previous) => ({
        ...previous,
        [provider]: {
          authenticated: false,
          email: null,
          loading: false,
          error: caughtError instanceof Error ? caughtError.message : 'Unknown error',
        },
      }));
    }
  }, []);
  const refreshAllProviderStatuses = useCallback(async () => {
    await Promise.all(cliProviders.map((provider) => checkProviderAuthStatus(provider)));
  }, [checkProviderAuthStatus]);
  const loadGitConfig = useCallback(async () => {
    try {
@@ -52,24 +99,23 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
  useEffect(() => {
    void loadGitConfig();
-    void refreshProviderAuthStatuses();
+    void refreshAllProviderStatuses();
-  }, [loadGitConfig, refreshProviderAuthStatuses]);
+  }, [loadGitConfig, refreshAllProviderStatuses]);
  useEffect(() => {
    const previousProvider = previousActiveLoginProviderRef.current;
    previousActiveLoginProviderRef.current = activeLoginProvider;
-    const didCloseModal = previousProvider !== undefined
+    const isInitialMount = previousProvider === undefined;
-      && previousProvider !== null
+    const didCloseModal = previousProvider !== null && activeLoginProvider === null;
      && activeLoginProvider === null;
-    // Refresh statuses after the login modal is closed.
+    // Refresh statuses once on mount and again after the login modal is closed.
-    if (didCloseModal) {
+    if (isInitialMount || didCloseModal) {
-      void refreshProviderAuthStatuses();
+      void refreshAllProviderStatuses();
    }
-  }, [activeLoginProvider, refreshProviderAuthStatuses]);
+  }, [activeLoginProvider, refreshAllProviderStatuses]);
-  const handleProviderLoginOpen = (provider: LLMProvider) => {
+  const handleProviderLoginOpen = (provider: CliProvider) => {
    setActiveLoginProvider(provider);
  };
@@ -163,7 +209,7 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
              />
            ) : (
              <AgentConnectionsStep
-                providerStatuses={providerAuthStatus}
+                providerStatuses={providerStatuses}
                onOpenProviderLogin={handleProviderLoginOpen}
              />
            )}
@@ -233,6 +279,7 @@ export default function Onboarding({ onComplete }: OnboardingProps) {
          isOpen={Boolean(activeLoginProvider)}
          onClose={() => setActiveLoginProvider(null)}
          provider={activeLoginProvider}
          project={selectedProject}
          onComplete={handleLoginComplete}
        />
      )}
--- a/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
+++ b/src/components/onboarding/view/subcomponents/AgentConnectionCard.tsx
@@ -1,10 +1,9 @@
 import { Check } from 'lucide-react';
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
-import type { LLMProvider } from '../../../../types/app';
+import type { CliProvider, ProviderAuthStatus } from '../types';
 import type { ProviderAuthStatus } from '../../../provider-auth/types';
 type AgentConnectionCardProps = {
-  provider: LLMProvider;
+  provider: CliProvider;
  title: string;
  status: ProviderAuthStatus;
  connectedClassName: string;
--- a/src/components/onboarding/view/subcomponents/AgentConnectionsStep.tsx
+++ b/src/components/onboarding/view/subcomponents/AgentConnectionsStep.tsx
@@ -1,10 +1,9 @@
-import type { LLMProvider } from '../../../../types/app';
+import type { CliProvider, ProviderStatusMap } from '../types';
 import type { ProviderAuthStatusMap } from '../../../provider-auth/types';
 import AgentConnectionCard from './AgentConnectionCard';
 type AgentConnectionsStepProps = {
-  providerStatuses: ProviderAuthStatusMap;
+  providerStatuses: ProviderStatusMap;
-  onOpenProviderLogin: (provider: LLMProvider) => void;
+  onOpenProviderLogin: (provider: CliProvider) => void;
 };
 const providerCards = [
--- a/src/components/onboarding/view/types.ts
+++ b/src/components/onboarding/view/types.ts
@@ -0,0 +1,12 @@
 import type { CliProvider } from '../../provider-auth/types';
 export type { CliProvider };
 export type ProviderAuthStatus = {
  authenticated: boolean;
  email: string | null;
  loading: boolean;
  error: string | null;
 };
 export type ProviderStatusMap = Record<CliProvider, ProviderAuthStatus>;
--- a/src/components/onboarding/view/utils.ts
+++ b/src/components/onboarding/view/utils.ts
@@ -1,5 +1,24 @@
 import { IS_PLATFORM } from '../../../constants/config';
 import type { CliProvider, ProviderStatusMap } from './types';
 export const cliProviders: CliProvider[] = ['claude', 'cursor', 'codex', 'gemini'];
 export const gitEmailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 export const selectedProject = {
  name: 'default',
  displayName: 'default',
  fullPath: IS_PLATFORM ? '/workspace' : '',
  path: IS_PLATFORM ? '/workspace' : '',
 };
 export const createInitialProviderStatuses = (): ProviderStatusMap => ({
  claude: { authenticated: false, email: null, loading: true, error: null },
  cursor: { authenticated: false, email: null, loading: true, error: null },
  codex: { authenticated: false, email: null, loading: true, error: null },
  gemini: { authenticated: false, email: null, loading: true, error: null },
 });
 export const readErrorMessageFromResponse = async (response: Response, fallback: string) => {
  try {
    const payload = (await response.json()) as { error?: string };
--- a/src/components/provider-auth/hooks/useProviderAuthStatus.ts
+++ b/src/components/provider-auth/hooks/useProviderAuthStatus.ts
@@ -1,109 +0,0 @@
 import { useCallback, useState } from 'react';
 import { authenticatedFetch } from '../../../utils/api';
 import type { LLMProvider } from '../../../types/app';
 import {
  CLI_AUTH_STATUS_ENDPOINTS,
  CLI_PROVIDERS,
  createInitialProviderAuthStatusMap,
 } from '../types';
 import type {
  ProviderAuthStatus,
  ProviderAuthStatusMap,
 } from '../types';
 type ProviderAuthStatusPayload = {
  authenticated?: boolean;
  email?: string | null;
  method?: string | null;
  error?: string | null;
 };
 const FALLBACK_STATUS_ERROR = 'Failed to check authentication status';
 const FALLBACK_UNKNOWN_ERROR = 'Unknown error';
 const toErrorMessage = (error: unknown): string => (
  error instanceof Error ? error.message : FALLBACK_UNKNOWN_ERROR
 );
 const toProviderAuthStatus = (
  payload: ProviderAuthStatusPayload,
  fallbackError: string | null = null,
 ): ProviderAuthStatus => ({
  authenticated: Boolean(payload.authenticated),
  email: payload.email ?? null,
  method: payload.method ?? null,
  error: payload.error ?? fallbackError,
  loading: false,
 });
 type UseProviderAuthStatusOptions = {
  initialLoading?: boolean;
 };
 export function useProviderAuthStatus(
  { initialLoading = true }: UseProviderAuthStatusOptions = {},
 ) {
  const [providerAuthStatus, setProviderAuthStatus] = useState<ProviderAuthStatusMap>(() => (
    createInitialProviderAuthStatusMap(initialLoading)
  ));
  const setProviderLoading = useCallback((provider: LLMProvider) => {
    setProviderAuthStatus((previous) => ({
      ...previous,
      [provider]: {
        ...previous[provider],
        loading: true,
        error: null,
      },
    }));
  }, []);
  const setProviderStatus = useCallback((provider: LLMProvider, status: ProviderAuthStatus) => {
    setProviderAuthStatus((previous) => ({
      ...previous,
      [provider]: status,
    }));
  }, []);
  const checkProviderAuthStatus = useCallback(async (provider: LLMProvider) => {
    setProviderLoading(provider);
    try {
      const response = await authenticatedFetch(CLI_AUTH_STATUS_ENDPOINTS[provider]);
      if (!response.ok) {
        setProviderStatus(provider, {
          authenticated: false,
          email: null,
          method: null,
          loading: false,
          error: FALLBACK_STATUS_ERROR,
        });
        return;
      }
      const payload = (await response.json()) as ProviderAuthStatusPayload;
      setProviderStatus(provider, toProviderAuthStatus(payload));
    } catch (caughtError) {
      console.error(`Error checking ${provider} auth status:`, caughtError);
      setProviderStatus(provider, {
        authenticated: false,
        email: null,
        method: null,
        loading: false,
        error: toErrorMessage(caughtError),
      });
    }
  }, [setProviderLoading, setProviderStatus]);
  const refreshProviderAuthStatuses = useCallback(async (providers: LLMProvider[] = CLI_PROVIDERS) => {
    await Promise.all(providers.map((provider) => checkProviderAuthStatus(provider)));
  }, [checkProviderAuthStatus]);
  return {
    providerAuthStatus,
    setProviderAuthStatus,
    checkProviderAuthStatus,
    refreshProviderAuthStatuses,
  };
 }
--- a/src/components/provider-auth/types.ts
+++ b/src/components/provider-auth/types.ts
@@ -1,27 +1 @@
-import type { LLMProvider } from '../../types/app';
+export type CliProvider = 'claude' | 'cursor' | 'codex' | 'gemini';
 export type ProviderAuthStatus = {
  authenticated: boolean;
  email: string | null;
  method: string | null;
  error: string | null;
  loading: boolean;
 };
 export type ProviderAuthStatusMap = Record<LLMProvider, ProviderAuthStatus>;
 export const CLI_PROVIDERS: LLMProvider[] = ['claude', 'cursor', 'codex', 'gemini'];
 export const CLI_AUTH_STATUS_ENDPOINTS: Record<LLMProvider, string> = {
  claude: '/api/cli/claude/status',
  cursor: '/api/cli/cursor/status',
  codex: '/api/cli/codex/status',
  gemini: '/api/cli/gemini/status',
 };
 export const createInitialProviderAuthStatusMap = (loading = true): ProviderAuthStatusMap => ({
  claude: { authenticated: false, email: null, method: null, error: null, loading },
  cursor: { authenticated: false, email: null, method: null, error: null, loading },
  codex: { authenticated: false, email: null, method: null, error: null, loading },
  gemini: { authenticated: false, email: null, method: null, error: null, loading },
 });
--- a/src/components/provider-auth/view/ProviderLoginModal.tsx
+++ b/src/components/provider-auth/view/ProviderLoginModal.tsx
@@ -1,12 +1,21 @@
 import { ExternalLink, KeyRound, X } from 'lucide-react';
 import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
-import { DEFAULT_PROJECT_FOR_EMPTY_SHELL, IS_PLATFORM } from '../../../constants/config';
+import { IS_PLATFORM } from '../../../constants/config';
-import type { LLMProvider } from '../../../types/app';
+import type { CliProvider } from '../types';
 type LoginModalProject = {
  name?: string;
  displayName?: string;
  fullPath?: string;
  path?: string;
  [key: string]: unknown;
 };
 type ProviderLoginModalProps = {
  isOpen: boolean;
  onClose: () => void;
-  provider?: LLMProvider;
+  provider?: CliProvider;
  project?: LoginModalProject | null;
  onComplete?: (exitCode: number) => void;
  customCommand?: string;
  isAuthenticated?: boolean;
@@ -17,7 +26,7 @@ const getProviderCommand = ({
  customCommand,
  isAuthenticated: _isAuthenticated,
 }: {
-  provider: LLMProvider;
+  provider: CliProvider;
  customCommand?: string;
  isAuthenticated: boolean;
 }) => {
@@ -40,17 +49,30 @@ const getProviderCommand = ({
  return 'gemini status';
 };
-const getProviderTitle = (provider: LLMProvider) => {
+const getProviderTitle = (provider: CliProvider) => {
  if (provider === 'claude') return 'Claude CLI Login';
  if (provider === 'cursor') return 'Cursor CLI Login';
  if (provider === 'codex') return 'Codex CLI Login';
  return 'Gemini CLI Configuration';
 };
 const normalizeProject = (project?: LoginModalProject | null) => {
  const normalizedName = project?.name || 'default';
  const normalizedFullPath = project?.fullPath ?? project?.path ?? (IS_PLATFORM ? '/workspace' : '');
  return {
    name: normalizedName,
    displayName: project?.displayName || normalizedName,
    fullPath: normalizedFullPath,
    path: project?.path ?? normalizedFullPath,
  };
 };
 export default function ProviderLoginModal({
  isOpen,
  onClose,
  provider = 'claude',
  project = null,
  onComplete,
  customCommand,
  isAuthenticated = false,
@@ -61,6 +83,7 @@ export default function ProviderLoginModal({
  const command = getProviderCommand({ provider, customCommand, isAuthenticated });
  const title = getProviderTitle(provider);
  const shellProject = normalizeProject(project);
  const handleComplete = (exitCode: number) => {
    onComplete?.(exitCode);
@@ -135,7 +158,7 @@ export default function ProviderLoginModal({
              </button>
            </div>
          ) : (
-            <StandaloneShell project={DEFAULT_PROJECT_FOR_EMPTY_SHELL} command={command} onComplete={handleComplete} minimal={true} />
+            <StandaloneShell project={shellProject} command={command} onComplete={handleComplete} minimal={true} />
          )}
        </div>
      </div>
--- a/src/components/settings/constants/constants.ts
+++ b/src/components/settings/constants/constants.ts
@@ -1,6 +1,7 @@
 import type {
  AgentCategory,
  AgentProvider,
  AuthStatus,
  ClaudeMcpFormState,
  CodexMcpFormState,
  CodeEditorSettingsState,
@@ -33,6 +34,13 @@ export const DEFAULT_CODE_EDITOR_SETTINGS: CodeEditorSettingsState = {
  fontSize: '14',
 };
 export const DEFAULT_AUTH_STATUS: AuthStatus = {
  authenticated: false,
  email: null,
  loading: true,
  error: null,
 };
 export const DEFAULT_MCP_TEST_RESULT: McpTestResult = {
  success: false,
  message: '',
@@ -80,3 +88,9 @@ export const DEFAULT_CURSOR_PERMISSIONS: CursorPermissionsState = {
  skipPermissions: false,
 };
 export const AUTH_STATUS_ENDPOINTS: Record<AgentProvider, string> = {
  claude: '/api/cli/claude/status',
  cursor: '/api/cli/cursor/status',
  codex: '/api/cli/codex/status',
  gemini: '/api/cli/gemini/status',
 };
--- a/src/components/settings/hooks/useSettingsController.ts
+++ b/src/components/settings/hooks/useSettingsController.ts
@@ -1,13 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { authenticatedFetch } from '../../../utils/api';
 import { useProviderAuthStatus } from '../../provider-auth/hooks/useProviderAuthStatus';
 import {
  AUTH_STATUS_ENDPOINTS,
  DEFAULT_AUTH_STATUS,
  DEFAULT_CODE_EDITOR_SETTINGS,
  DEFAULT_CURSOR_PERMISSIONS,
 } from '../constants/constants';
 import type {
  AgentProvider,
  AuthStatus,
  ClaudeMcpFormState,
  ClaudePermissionsState,
  CodeEditorSettingsState,
@@ -21,6 +23,7 @@ import type {
  NotificationPreferencesState,
  ProjectSortOrder,
  SettingsMainTab,
  SettingsProject,
 } from '../types/types';
 type ThemeContextValue = {
@@ -31,6 +34,15 @@ type ThemeContextValue = {
 type UseSettingsControllerArgs = {
  isOpen: boolean;
  initialTab: string;
  projects: SettingsProject[];
  onClose: () => void;
 };
 type StatusApiResponse = {
  authenticated?: boolean;
  email?: string | null;
  error?: string | null;
  method?: string;
 };
 type JsonResult = {
@@ -154,6 +166,20 @@ const mapCliServersToMcpServers = (servers: McpCliServer[] = []): McpServer[] =>
  }))
 );
 const getDefaultProject = (projects: SettingsProject[]): SettingsProject => {
  if (projects.length > 0) {
    return projects[0];
  }
  const cwd = typeof process !== 'undefined' && process.cwd ? process.cwd() : '';
  return {
    name: 'default',
    displayName: 'default',
    fullPath: cwd,
    path: cwd,
  };
 };
 const toResponseJson = async <T>(response: Response): Promise<T> => response.json() as Promise<T>;
 const createEmptyClaudePermissions = (): ClaudePermissionsState => ({
@@ -178,7 +204,7 @@ const createDefaultNotificationPreferences = (): NotificationPreferencesState =>
  },
 });
-export function useSettingsController({ isOpen, initialTab }: UseSettingsControllerArgs) {
+export function useSettingsController({ isOpen, initialTab, projects, onClose }: UseSettingsControllerArgs) {
  const { isDarkMode, toggleDarkMode } = useTheme() as ThemeContextValue;
  const closeTimerRef = useRef<number | null>(null);
@@ -216,11 +242,64 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [loginProvider, setLoginProvider] = useState<ActiveLoginProvider>('');
-  const {
+  const [selectedProject, setSelectedProject] = useState<SettingsProject | null>(null);
-    providerAuthStatus,
+
-    checkProviderAuthStatus,
+  const [claudeAuthStatus, setClaudeAuthStatus] = useState<AuthStatus>(DEFAULT_AUTH_STATUS);
-    refreshProviderAuthStatuses,
+  const [cursorAuthStatus, setCursorAuthStatus] = useState<AuthStatus>(DEFAULT_AUTH_STATUS);
-  } = useProviderAuthStatus();
+  const [codexAuthStatus, setCodexAuthStatus] = useState<AuthStatus>(DEFAULT_AUTH_STATUS);
  const [geminiAuthStatus, setGeminiAuthStatus] = useState<AuthStatus>(DEFAULT_AUTH_STATUS);
  const setAuthStatusByProvider = useCallback((provider: AgentProvider, status: AuthStatus) => {
    if (provider === 'claude') {
      setClaudeAuthStatus(status);
      return;
    }
    if (provider === 'cursor') {
      setCursorAuthStatus(status);
      return;
    }
    if (provider === 'gemini') {
      setGeminiAuthStatus(status);
      return;
    }
    setCodexAuthStatus(status);
  }, []);
  const checkAuthStatus = useCallback(async (provider: AgentProvider) => {
    try {
      const response = await authenticatedFetch(AUTH_STATUS_ENDPOINTS[provider]);
      if (!response.ok) {
        setAuthStatusByProvider(provider, {
          authenticated: false,
          email: null,
          loading: false,
          error: 'Failed to check authentication status',
        });
        return;
      }
      const data = await toResponseJson<StatusApiResponse>(response);
      setAuthStatusByProvider(provider, {
        authenticated: Boolean(data.authenticated),
        email: data.email || null,
        loading: false,
        error: data.error || null,
        method: data.method,
      });
    } catch (error) {
      console.error(`Error checking ${provider} auth status:`, error);
      setAuthStatusByProvider(provider, {
        authenticated: false,
        email: null,
        loading: false,
        error: getErrorMessage(error),
      });
    }
  }, [setAuthStatusByProvider]);
  const fetchCursorMcpServers = useCallback(async () => {
    try {
@@ -645,8 +724,9 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
  const openLoginForProvider = useCallback((provider: AgentProvider) => {
    setLoginProvider(provider);
    setSelectedProject(getDefaultProject(projects));
    setShowLoginModal(true);
-  }, []);
+  }, [projects]);
  const handleLoginComplete = useCallback((exitCode: number) => {
    if (exitCode !== 0 || !loginProvider) {
@@ -654,8 +734,8 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
    }
    setSaveStatus('success');
-    void checkProviderAuthStatus(loginProvider);
+    void checkAuthStatus(loginProvider);
-  }, [checkProviderAuthStatus, loginProvider]);
+  }, [checkAuthStatus, loginProvider]);
  const saveSettings = useCallback(async () => {
    setSaveStatus(null);
@@ -747,8 +827,11 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
    setActiveTab(normalizeMainTab(initialTab));
    void loadSettings();
-    void refreshProviderAuthStatuses();
+    void checkAuthStatus('claude');
-  }, [initialTab, isOpen, loadSettings, refreshProviderAuthStatuses]);
+    void checkAuthStatus('cursor');
    void checkAuthStatus('codex');
    void checkAuthStatus('gemini');
  }, [checkAuthStatus, initialTab, isOpen, loadSettings]);
  useEffect(() => {
    localStorage.setItem('codeEditorTheme', codeEditorSettings.theme);
@@ -852,13 +935,17 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl
    closeCodexMcpForm,
    submitCodexMcpForm,
    handleCodexMcpDelete,
-    providerAuthStatus,
+    claudeAuthStatus,
    cursorAuthStatus,
    codexAuthStatus,
    geminiAuthStatus,
    geminiPermissionMode,
    setGeminiPermissionMode,
    openLoginForProvider,
    showLoginModal,
    setShowLoginModal,
    loginProvider,
    selectedProject,
    handleLoginComplete,
  };
 }
--- a/src/components/settings/types/types.ts
+++ b/src/components/settings/types/types.ts
@@ -1,9 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import type { LLMProvider } from '../../../types/app';
 import type { ProviderAuthStatus } from '../../provider-auth/types';
 export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins' | 'about';
-export type AgentProvider = LLMProvider;
+export type AgentProvider = 'claude' | 'cursor' | 'codex' | 'gemini';
 export type AgentCategory = 'account' | 'permissions' | 'mcp';
 export type ProjectSortOrder = 'name' | 'date';
 export type SaveStatus = 'success' | 'error' | null;
@@ -20,7 +18,13 @@ export type SettingsProject = {
  path?: string;
 };
-export type AuthStatus = ProviderAuthStatus;
+export type AuthStatus = {
  authenticated: boolean;
  email: string | null;
  loading: boolean;
  error: string | null;
  method?: string;
 };
 export type KeyValueMap = Record<string, string>;
--- a/src/components/settings/view/Settings.tsx
+++ b/src/components/settings/view/Settings.tsx
@@ -56,17 +56,23 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
    closeCodexMcpForm,
    submitCodexMcpForm,
    handleCodexMcpDelete,
-    providerAuthStatus,
+    claudeAuthStatus,
    cursorAuthStatus,
    codexAuthStatus,
    geminiAuthStatus,
    geminiPermissionMode,
    setGeminiPermissionMode,
    openLoginForProvider,
    showLoginModal,
    setShowLoginModal,
    loginProvider,
    selectedProject,
    handleLoginComplete,
  } = useSettingsController({
    isOpen,
-    initialTab
+    initialTab,
    projects,
    onClose,
  });
  const {
@@ -99,7 +105,13 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
    return null;
  }
-  const isAuthenticated = Boolean(loginProvider && providerAuthStatus[loginProvider].authenticated);
+  const isAuthenticated = loginProvider === 'claude'
    ? claudeAuthStatus.authenticated
    : loginProvider === 'cursor'
      ? cursorAuthStatus.authenticated
      : loginProvider === 'codex'
        ? codexAuthStatus.authenticated
        : false;
  return (
    <div className="modal-backdrop fixed inset-0 z-[9999] flex items-center justify-center bg-background/80 backdrop-blur-sm md:p-4">
@@ -109,7 +121,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
          <h2 className="text-base font-semibold text-foreground">{t('title')}</h2>
          <div className="flex items-center gap-2">
            {saveStatus === 'success' && (
-              <span className="animate-in fade-in text-xs text-muted-foreground">{t('saveStatus.success')}</span>
+              <span className="text-xs text-muted-foreground animate-in fade-in">{t('saveStatus.success')}</span>
            )}
            <Button
              variant="ghost"
@@ -146,8 +158,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
              {activeTab === 'agents' && (
                <AgentsSettingsTab
-                  providerAuthStatus={providerAuthStatus}
+                  claudeAuthStatus={claudeAuthStatus}
-                  onProviderLogin={openLoginForProvider}
+                  cursorAuthStatus={cursorAuthStatus}
                  codexAuthStatus={codexAuthStatus}
                  geminiAuthStatus={geminiAuthStatus}
                  onClaudeLogin={() => openLoginForProvider('claude')}
                  onCursorLogin={() => openLoginForProvider('cursor')}
                  onCodexLogin={() => openLoginForProvider('codex')}
                  onGeminiLogin={() => openLoginForProvider('gemini')}
                  claudePermissions={claudePermissions}
                  onClaudePermissionsChange={setClaudePermissions}
                  cursorPermissions={cursorPermissions}
@@ -201,6 +219,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
        isOpen={showLoginModal}
        onClose={() => setShowLoginModal(false)}
        provider={loginProvider || 'claude'}
        project={selectedProject}
        onComplete={handleLoginComplete}
        isAuthenticated={isAuthenticated}
      />
--- a/src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx
+++ b/src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx
@@ -6,8 +6,14 @@ import AgentSelectorSection from './sections/AgentSelectorSection';
 import type { AgentContext, AgentsSettingsTabProps } from './types';
 export default function AgentsSettingsTab({
-  providerAuthStatus,
+  claudeAuthStatus,
-  onProviderLogin,
+  cursorAuthStatus,
  codexAuthStatus,
  geminiAuthStatus,
  onClaudeLogin,
  onCursorLogin,
  onCodexLogin,
  onGeminiLogin,
  claudePermissions,
  onClaudePermissionsChange,
  cursorPermissions,
@@ -35,27 +41,30 @@ export default function AgentsSettingsTab({
  const agentContextById = useMemo<Record<AgentProvider, AgentContext>>(() => ({
    claude: {
-      authStatus: providerAuthStatus.claude,
+      authStatus: claudeAuthStatus,
-      onLogin: () => onProviderLogin('claude'),
+      onLogin: onClaudeLogin,
    },
    cursor: {
-      authStatus: providerAuthStatus.cursor,
+      authStatus: cursorAuthStatus,
-      onLogin: () => onProviderLogin('cursor'),
+      onLogin: onCursorLogin,
    },
    codex: {
-      authStatus: providerAuthStatus.codex,
+      authStatus: codexAuthStatus,
-      onLogin: () => onProviderLogin('codex'),
+      onLogin: onCodexLogin,
    },
    gemini: {
-      authStatus: providerAuthStatus.gemini,
+      authStatus: geminiAuthStatus,
-      onLogin: () => onProviderLogin('gemini'),
+      onLogin: onGeminiLogin,
    },
  }), [
-    onProviderLogin,
+    claudeAuthStatus,
-    providerAuthStatus.claude,
+    codexAuthStatus,
-    providerAuthStatus.codex,
+    cursorAuthStatus,
-    providerAuthStatus.cursor,
+    geminiAuthStatus,
-    providerAuthStatus.gemini,
+    onClaudeLogin,
    onCodexLogin,
    onCursorLogin,
    onGeminiLogin,
  ]);
  return (
--- a/src/components/settings/view/tabs/agents-settings/types.ts
+++ b/src/components/settings/view/tabs/agents-settings/types.ts
@@ -17,11 +17,16 @@ export type AgentContext = {
 };
 export type AgentContextByProvider = Record<AgentProvider, AgentContext>;
 export type ProviderAuthStatusByProvider = Record<AgentProvider, AuthStatus>;
 export type AgentsSettingsTabProps = {
-  providerAuthStatus: ProviderAuthStatusByProvider;
+  claudeAuthStatus: AuthStatus;
-  onProviderLogin: (provider: AgentProvider) => void;
+  cursorAuthStatus: AuthStatus;
  codexAuthStatus: AuthStatus;
  geminiAuthStatus: AuthStatus;
  onClaudeLogin: () => void;
  onCursorLogin: () => void;
  onCodexLogin: () => void;
  onGeminiLogin: () => void;
  claudePermissions: ClaudePermissionsState;
  onClaudePermissionsChange: (value: ClaudePermissionsState) => void;
  cursorPermissions: CursorPermissionsState;
--- a/src/components/sidebar/hooks/useSidebarController.ts
+++ b/src/components/sidebar/hooks/useSidebarController.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 import type { TFunction } from 'i18next';
 import { api } from '../../../utils/api';
-import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../types/app';
 import type {
  AdditionalSessionsByProject,
  DeleteProjectConfirmation,
@@ -452,7 +452,7 @@ export function useSidebarController({
    [getProjectSessions],
  );
-  const confirmDeleteProject = useCallback(async (deleteData = false) => {
+  const confirmDeleteProject = useCallback(async () => {
    if (!deleteConfirmation) {
      return;
    }
@@ -464,7 +464,7 @@ export function useSidebarController({
    setDeletingProjects((prev) => new Set([...prev, project.name]));
    try {
-      const response = await api.deleteProject(project.name, !isEmpty, deleteData);
+      const response = await api.deleteProject(project.name, !isEmpty);
      if (response.ok) {
        onProjectDelete?.(project.name);
@@ -545,7 +545,7 @@ export function useSidebarController({
  }, [onRefresh]);
  const updateSessionSummary = useCallback(
-    async (_projectName: string, sessionId: string, summary: string, provider: LLMProvider) => {
+    async (_projectName: string, sessionId: string, summary: string, provider: SessionProvider) => {
      const trimmed = summary.trim();
      if (!trimmed) {
        setEditingSession(null);
--- a/src/components/sidebar/types/types.ts
+++ b/src/components/sidebar/types/types.ts
@@ -1,9 +1,9 @@
-import type { LoadingProgress, Project, ProjectSession, LLMProvider } from '../../../types/app';
+import type { LoadingProgress, Project, ProjectSession, SessionProvider } from '../../../types/app';
 export type ProjectSortOrder = 'name' | 'date';
 export type SessionWithProvider = ProjectSession & {
-  __provider: LLMProvider;
+  __provider: SessionProvider;
 };
 export type AdditionalSessionsByProject = Record<string, ProjectSession[]>;
@@ -18,7 +18,7 @@ export type SessionDeleteConfirmation = {
  projectName: string;
  sessionId: string;
  sessionTitle: string;
-  provider: LLMProvider;
+  provider: SessionProvider;
 };
 export type SidebarProps = {
--- a/src/components/sidebar/view/Sidebar.tsx
+++ b/src/components/sidebar/view/Sidebar.tsx
@@ -6,7 +6,7 @@ import { useUiPreferences } from '../../../hooks/useUiPreferences';
 import { useSidebarController } from '../hooks/useSidebarController';
 import { useTaskMaster } from '../../../contexts/TaskMasterContext';
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
-import type { Project, LLMProvider } from '../../../types/app';
+import type { Project, SessionProvider } from '../../../types/app';
 import type { MCPServerStatus, SidebarProps } from '../types/types';
 import SidebarCollapsed from './subcomponents/SidebarCollapsed';
 import SidebarContent from './subcomponents/SidebarContent';
@@ -177,7 +177,7 @@ function Sidebar({
      setEditingSession(null);
      setEditingSessionName('');
    },
-    onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: LLMProvider) => {
+    onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => {
      void updateSessionSummary(projectName, sessionId, summary, provider);
    },
    t,
@@ -235,7 +235,7 @@ function Sidebar({
            isSearching={isSearching}
            searchProgress={searchProgress}
            onConversationResultClick={(projectName: string, sessionId: string, provider: string, messageTimestamp?: string | null, messageSnippet?: string | null) => {
-              const resolvedProvider = (provider || 'claude') as LLMProvider;
+              const resolvedProvider = (provider || 'claude') as SessionProvider;
              const project = projects.find(p => p.name === projectName);
              const searchTarget = { __searchTargetTimestamp: messageTimestamp || null, __searchTargetSnippet: messageSnippet || null };
              const sessionObj = {
--- a/src/components/sidebar/view/subcomponents/SidebarModals.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarModals.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import { AlertTriangle, EyeOff, Trash2 } from 'lucide-react';
+import { AlertTriangle, Trash2 } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../../../../shared/view/ui';
 import Settings from '../../../settings/view/Settings';
@@ -22,7 +22,7 @@ type SidebarModalsProps = {
  onProjectCreated: () => void;
  deleteConfirmation: DeleteProjectConfirmation | null;
  onCancelDeleteProject: () => void;
-  onConfirmDeleteProject: (deleteData?: boolean) => void;
+  onConfirmDeleteProject: () => void;
  sessionDeleteConfirmation: SessionDeleteConfirmation | null;
  onCancelDeleteSession: () => void;
  onConfirmDeleteSession: () => void;
@@ -104,8 +104,8 @@ export default function SidebarModals({
            <div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
              <div className="p-6">
                <div className="flex items-start gap-4">
-                  <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900/30">
+                  <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
-                    <AlertTriangle className="h-6 w-6 text-orange-600 dark:text-orange-400" />
+                    <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <h3 className="mb-2 text-lg font-semibold text-foreground">
@@ -119,32 +119,32 @@ export default function SidebarModals({
                      ?
                    </p>
                    {deleteConfirmation.sessionCount > 0 && (
-                      <p className="mt-2 text-sm text-muted-foreground">
+                      <div className="mt-3 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
-                        {t('deleteConfirmation.sessionCount', { count: deleteConfirmation.sessionCount })}
+                        <p className="text-sm font-medium text-red-700 dark:text-red-300">
-                      </p>
+                          {t('deleteConfirmation.sessionCount', { count: deleteConfirmation.sessionCount })}
                        </p>
                        <p className="mt-1 text-xs text-red-600 dark:text-red-400">
                          {t('deleteConfirmation.allConversationsDeleted')}
                        </p>
                      </div>
                    )}
                    <p className="mt-3 text-xs text-muted-foreground">
                      {t('deleteConfirmation.cannotUndo')}
                    </p>
                  </div>
                </div>
              </div>
-              <div className="flex flex-col gap-2 border-t border-border bg-muted/30 p-4">
+              <div className="flex gap-3 border-t border-border bg-muted/30 p-4">
-                <Button
+                <Button variant="outline" className="flex-1" onClick={onCancelDeleteProject}>
-                  variant="outline"
+                  {t('actions.cancel')}
                  className="w-full justify-start"
                  onClick={() => onConfirmDeleteProject(false)}
                >
                  <EyeOff className="mr-2 h-4 w-4" />
                  {t('deleteConfirmation.removeFromSidebar')}
                </Button>
                <Button
                  variant="destructive"
-                  className="w-full justify-start bg-red-600 text-white hover:bg-red-700"
+                  className="flex-1 bg-red-600 text-white hover:bg-red-700"
-                  onClick={() => onConfirmDeleteProject(true)}
+                  onClick={onConfirmDeleteProject}
                >
                  <Trash2 className="mr-2 h-4 w-4" />
-                  {t('deleteConfirmation.deleteAllData')}
+                  {t('actions.delete')}
                </Button>
                <Button variant="ghost" className="w-full" onClick={onCancelDeleteProject}>
                  {t('actions.cancel')}
                </Button>
              </div>
            </div>
--- a/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectItem.tsx
@@ -2,7 +2,7 @@ import { Check, ChevronDown, ChevronRight, Edit3, Folder, FolderOpen, Star, Tras
 import type { TFunction } from 'i18next';
 import { Button } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
-import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type { MCPServerStatus, SessionWithProvider } from '../../types/types';
 import { getTaskIndicatorStatus } from '../../utils/utils';
 import TaskIndicator from './TaskIndicator';
@@ -38,14 +38,14 @@ type SidebarProjectItemProps = {
    projectName: string,
    sessionId: string,
    sessionTitle: string,
-    provider: LLMProvider,
+    provider: SessionProvider,
  ) => void;
  onLoadMoreSessions: (project: Project) => void;
  onNewSession: (project: Project) => void;
  onEditingSessionNameChange: (value: string) => void;
  onStartEditingSession: (sessionId: string, initialName: string) => void;
  onCancelEditingSession: () => void;
-  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: LLMProvider) => void;
+  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
  t: TFunction;
 };
--- a/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectList.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import type { TFunction } from 'i18next';
-import type { LoadingProgress, Project, ProjectSession, LLMProvider } from '../../../../types/app';
+import type { LoadingProgress, Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type {
  LoadingSessionsByProject,
  MCPServerStatus,
@@ -42,14 +42,14 @@ export type SidebarProjectListProps = {
    projectName: string,
    sessionId: string,
    sessionTitle: string,
-    provider: LLMProvider,
+    provider: SessionProvider,
  ) => void;
  onLoadMoreSessions: (project: Project) => void;
  onNewSession: (project: Project) => void;
  onEditingSessionNameChange: (value: string) => void;
  onStartEditingSession: (sessionId: string, initialName: string) => void;
  onCancelEditingSession: () => void;
-  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: LLMProvider) => void;
+  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
  t: TFunction;
 };
--- a/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarProjectSessions.tsx
@@ -1,7 +1,7 @@
 import { ChevronDown, Plus } from 'lucide-react';
 import type { TFunction } from 'i18next';
 import { Button } from '../../../../shared/view/ui';
-import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type { SessionWithProvider } from '../../types/types';
 import SidebarSessionItem from './SidebarSessionItem';
@@ -18,14 +18,14 @@ type SidebarProjectSessionsProps = {
  onEditingSessionNameChange: (value: string) => void;
  onStartEditingSession: (sessionId: string, initialName: string) => void;
  onCancelEditingSession: () => void;
-  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: LLMProvider) => void;
+  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
  onProjectSelect: (project: Project) => void;
  onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
  onDeleteSession: (
    projectName: string,
    sessionId: string,
    sessionTitle: string,
-    provider: LLMProvider,
+    provider: SessionProvider,
  ) => void;
  onLoadMoreSessions: (project: Project) => void;
  onNewSession: (project: Project) => void;
--- a/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarSessionItem.tsx
@@ -3,7 +3,7 @@ import type { TFunction } from 'i18next';
 import { Badge, Button } from '../../../../shared/view/ui';
 import { cn } from '../../../../lib/utils';
 import { formatTimeAgo } from '../../../../utils/dateUtils';
-import type { Project, ProjectSession, LLMProvider } from '../../../../types/app';
+import type { Project, ProjectSession, SessionProvider } from '../../../../types/app';
 import type { SessionWithProvider } from '../../types/types';
 import { createSessionViewModel } from '../../utils/utils';
 import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
@@ -18,14 +18,14 @@ type SidebarSessionItemProps = {
  onEditingSessionNameChange: (value: string) => void;
  onStartEditingSession: (sessionId: string, initialName: string) => void;
  onCancelEditingSession: () => void;
-  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: LLMProvider) => void;
+  onSaveEditingSession: (projectName: string, sessionId: string, summary: string, provider: SessionProvider) => void;
  onProjectSelect: (project: Project) => void;
  onSessionSelect: (session: SessionWithProvider, projectName: string) => void;
  onDeleteSession: (
    projectName: string,
    sessionId: string,
    sessionTitle: string,
-    provider: LLMProvider,
+    provider: SessionProvider,
  ) => void;
  t: TFunction;
 };
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@@ -2,16 +2,4 @@
 * Environment Flag: Is Platform
 * Indicates if the app is running in Platform mode (hosted) or OSS mode (self-hosted)
 */
-export const IS_PLATFORM = import.meta.env.VITE_IS_PLATFORM === 'true';
+export const IS_PLATFORM = import.meta.env.VITE_IS_PLATFORM === 'true';
 /**
 * For empty shell instances where no project is provided, 
 * we use a default project object to ensure the shell can still function. 
 * This prevents errors related to missing project data.
 */
 export const DEFAULT_PROJECT_FOR_EMPTY_SHELL = {
  name: 'default',
  displayName: 'default',
  fullPath: IS_PLATFORM ? '/workspace' : '',
  path: IS_PLATFORM ? '/workspace' : '',
 };
--- a/src/contexts/PermissionContext.tsx
+++ b/src/contexts/PermissionContext.tsx
@@ -1,19 +0,0 @@
 import { createContext, useContext } from 'react';
 import type { PendingPermissionRequest } from '../components/chat/types/types';
 export interface PermissionContextValue {
  pendingPermissionRequests: PendingPermissionRequest[];
  handlePermissionDecision: (
    requestIds: string | string[],
    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
  ) => void;
 }
 const PermissionContext = createContext<PermissionContextValue | null>(null);
 export function usePermission(): PermissionContextValue | null {
  return useContext(PermissionContext);
 }
 export default PermissionContext;
--- a/src/i18n/locales/de/sidebar.json
+++ b/src/i18n/locales/de/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "Projekte",
    "newProject": "Neues Projekt",
-    "deleteProject": "Projekt entfernen",
+    "deleteProject": "Projekt löschen",
    "renameProject": "Projekt umbenennen",
    "noProjects": "Keine Projekte gefunden",
    "loadingProjects": "Projekte werden geladen...",
@@ -40,7 +40,7 @@
    "createProject": "Neues Projekt erstellen",
    "refresh": "Projekte und Sitzungen aktualisieren (Strg+R)",
    "renameProject": "Projekt umbenennen (F2)",
-    "deleteProject": "Projekt aus Seitenleiste entfernen (Entf)",
+    "deleteProject": "Leeres Projekt löschen (Entf)",
    "addToFavorites": "Zu Favoriten hinzufügen",
    "removeFromFavorites": "Aus Favoriten entfernen",
    "editSessionName": "Sitzungsname manuell bearbeiten",
@@ -95,14 +95,14 @@
    "deleteSuccess": "Erfolgreich gelöscht",
    "errorOccurred": "Ein Fehler ist aufgetreten",
    "deleteSessionConfirm": "Möchtest du diese Sitzung wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
-    "deleteProjectConfirm": "Projekt aus der Seitenleiste entfernen? Deine Projektdateien, Erinnerungen und Sitzungsdaten werden nicht gelöscht.",
+    "deleteProjectConfirm": "Möchtest du dieses leere Projekt wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
    "enterProjectPath": "Bitte gib einen Projektpfad ein",
    "deleteSessionFailed": "Sitzung konnte nicht gelöscht werden. Bitte erneut versuchen.",
    "deleteSessionError": "Fehler beim Löschen der Sitzung. Bitte erneut versuchen.",
    "renameSessionFailed": "Sitzung konnte nicht umbenannt werden. Bitte erneut versuchen.",
    "renameSessionError": "Fehler beim Umbenennen der Sitzung. Bitte erneut versuchen.",
-    "deleteProjectFailed": "Projekt konnte nicht entfernt werden. Bitte erneut versuchen.",
+    "deleteProjectFailed": "Projekt konnte nicht gelöscht werden. Bitte erneut versuchen.",
-    "deleteProjectError": "Fehler beim Entfernen des Projekts. Bitte erneut versuchen.",
+    "deleteProjectError": "Fehler beim Löschen des Projekts. Bitte erneut versuchen.",
    "createProjectFailed": "Projekt konnte nicht erstellt werden. Bitte erneut versuchen.",
    "createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen."
  },
@@ -122,14 +122,12 @@
    "projectsScanned_other": "{{count}} Projekte durchsucht"
  },
  "deleteConfirmation": {
-    "deleteProject": "Projekt entfernen",
+    "deleteProject": "Projekt löschen",
    "deleteSession": "Sitzung löschen",
-    "confirmDelete": "Was möchtest du mit",
+    "confirmDelete": "Möchtest du wirklich löschen",
    "sessionCount_one": "Dieses Projekt enthält {{count}} Unterhaltung.",
    "sessionCount_other": "Dieses Projekt enthält {{count}} Unterhaltungen.",
-    "removeFromSidebar": "Nur aus der Seitenleiste entfernen",
+    "allConversationsDeleted": "Alle Unterhaltungen werden dauerhaft gelöscht.",
-    "deleteAllData": "Alle Daten dauerhaft löschen",
+    "cannotUndo": "Diese Aktion kann nicht rückgängig gemacht werden."
    "allConversationsDeleted": "Das Projekt wird aus der Seitenleiste entfernt. Deine Dateien, Erinnerungen und Sitzungsdaten bleiben erhalten.",
    "cannotUndo": "Du kannst das Projekt später erneut hinzufügen."
  }
 }
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "Projects",
    "newProject": "New Project",
-    "deleteProject": "Remove Project",
+    "deleteProject": "Delete Project",
    "renameProject": "Rename Project",
    "noProjects": "No projects found",
    "loadingProjects": "Loading projects...",
@@ -40,7 +40,7 @@
    "createProject": "Create new project",
    "refresh": "Refresh projects and sessions (Ctrl+R)",
    "renameProject": "Rename project (F2)",
-    "deleteProject": "Remove project from sidebar (Delete)",
+    "deleteProject": "Delete empty project (Delete)",
    "addToFavorites": "Add to favorites",
    "removeFromFavorites": "Remove from favorites",
    "editSessionName": "Manually edit session name",
@@ -95,14 +95,14 @@
    "deleteSuccess": "Deleted successfully",
    "errorOccurred": "An error occurred",
    "deleteSessionConfirm": "Are you sure you want to delete this session? This action cannot be undone.",
-    "deleteProjectConfirm": "Remove this project from the sidebar? Your project files, memories, and session data will not be deleted.",
+    "deleteProjectConfirm": "Are you sure you want to delete this empty project? This action cannot be undone.",
    "enterProjectPath": "Please enter a project path",
    "deleteSessionFailed": "Failed to delete session. Please try again.",
    "deleteSessionError": "Error deleting session. Please try again.",
    "renameSessionFailed": "Failed to rename session. Please try again.",
    "renameSessionError": "Error renaming session. Please try again.",
-    "deleteProjectFailed": "Failed to remove project. Please try again.",
+    "deleteProjectFailed": "Failed to delete project. Please try again.",
-    "deleteProjectError": "Error removing project. Please try again.",
+    "deleteProjectError": "Error deleting project. Please try again.",
    "createProjectFailed": "Failed to create project. Please try again.",
    "createProjectError": "Error creating project. Please try again."
  },
@@ -122,14 +122,12 @@
    "projectsScanned_other": "{{count}} projects scanned"
  },
  "deleteConfirmation": {
-    "deleteProject": "Remove Project",
+    "deleteProject": "Delete Project",
    "deleteSession": "Delete Session",
-    "confirmDelete": "What would you like to do with",
+    "confirmDelete": "Are you sure you want to delete",
    "sessionCount_one": "This project contains {{count}} conversation.",
    "sessionCount_other": "This project contains {{count}} conversations.",
-    "removeFromSidebar": "Remove from sidebar only",
+    "allConversationsDeleted": "All conversations will be permanently deleted.",
-    "deleteAllData": "Delete all data permanently",
+    "cannotUndo": "This action cannot be undone."
    "allConversationsDeleted": "The project will be removed from the sidebar. Your files, memories, and session data will be preserved.",
    "cannotUndo": "You can re-add the project later."
  }
 }
--- a/src/i18n/locales/ja/sidebar.json
+++ b/src/i18n/locales/ja/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "プロジェクト",
    "newProject": "新規プロジェクト",
-    "deleteProject": "プロジェクトを除去",
+    "deleteProject": "プロジェクトを削除",
    "renameProject": "プロジェクト名を変更",
    "noProjects": "プロジェクトが見つかりません",
    "loadingProjects": "プロジェクトを読み込んでいます...",
@@ -40,7 +40,7 @@
    "createProject": "新しいプロジェクトを作成",
    "refresh": "プロジェクトとセッションを更新 (Ctrl+R)",
    "renameProject": "プロジェクト名を変更 (F2)",
-    "deleteProject": "サイドバーからプロジェクトを除去 (Delete)",
+    "deleteProject": "空のプロジェクトを削除 (Delete)",
    "addToFavorites": "お気に入りに追加",
    "removeFromFavorites": "お気に入りから削除",
    "editSessionName": "セッション名を手動で編集",
@@ -94,14 +94,14 @@
    "deleteSuccess": "削除しました",
    "errorOccurred": "エラーが発生しました",
    "deleteSessionConfirm": "このセッションを削除してもよろしいですか？この操作は取り消せません。",
-    "deleteProjectConfirm": "サイドバーからこのプロジェクトを除去しますか？プロジェクトファイル、メモリ、セッションデータは削除されません。",
+    "deleteProjectConfirm": "この空のプロジェクトを削除してもよろしいですか？この操作は取り消せません。",
    "enterProjectPath": "プロジェクトのパスを入力してください",
    "deleteSessionFailed": "セッションの削除に失敗しました。もう一度お試しください。",
    "deleteSessionError": "セッションの削除でエラーが発生しました。もう一度お試しください。",
    "renameSessionFailed": "セッション名の変更に失敗しました。もう一度お試しください。",
    "renameSessionError": "セッション名の変更でエラーが発生しました。もう一度お試しください。",
-    "deleteProjectFailed": "プロジェクトの除去に失敗しました。もう一度お試しください。",
+    "deleteProjectFailed": "プロジェクトの削除に失敗しました。もう一度お試しください。",
-    "deleteProjectError": "プロジェクトの除去でエラーが発生しました。もう一度お試しください。",
+    "deleteProjectError": "プロジェクトの削除でエラーが発生しました。もう一度お試しください。",
    "createProjectFailed": "プロジェクトの作成に失敗しました。もう一度お試しください。",
    "createProjectError": "プロジェクトの作成でエラーが発生しました。もう一度お試しください。"
  },
@@ -109,13 +109,11 @@
    "updateAvailable": "アップデートあり"
  },
  "deleteConfirmation": {
-    "deleteProject": "プロジェクトを除去",
+    "deleteProject": "プロジェクトを削除",
    "deleteSession": "セッションを削除",
-    "confirmDelete": "このプロジェクトをどうしますか：",
+    "confirmDelete": "本当に削除しますか？",
    "sessionCount": "このプロジェクトには{{count}}件の会話があります。",
-    "removeFromSidebar": "サイドバーからのみ除去",
+    "allConversationsDeleted": "すべての会話が完全に削除されます。",
-    "deleteAllData": "すべてのデータを完全に削除",
+    "cannotUndo": "この操作は取り消せません。"
    "allConversationsDeleted": "プロジェクトはサイドバーから除去されます。ファイル、メモリ、セッションデータは保持されます。",
    "cannotUndo": "後からプロジェクトを再追加できます。"
  }
 }
--- a/src/i18n/locales/ko/sidebar.json
+++ b/src/i18n/locales/ko/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "프로젝트",
    "newProject": "새 프로젝트",
-    "deleteProject": "프로젝트 제거",
+    "deleteProject": "프로젝트 삭제",
    "renameProject": "프로젝트 이름 변경",
    "noProjects": "프로젝트가 없습니다",
    "loadingProjects": "프로젝트 로딩 중...",
@@ -40,7 +40,7 @@
    "createProject": "새 프로젝트 생성",
    "refresh": "프로젝트 및 세션 새로고침 (Ctrl+R)",
    "renameProject": "프로젝트 이름 변경 (F2)",
-    "deleteProject": "사이드바에서 프로젝트 제거 (Delete)",
+    "deleteProject": "빈 프로젝트 삭제 (Delete)",
    "addToFavorites": "즐겨찾기에 추가",
    "removeFromFavorites": "즐겨찾기에서 제거",
    "editSessionName": "세션 이름 직접 편집",
@@ -94,14 +94,14 @@
    "deleteSuccess": "삭제되었습니다",
    "errorOccurred": "오류가 발생했습니다",
    "deleteSessionConfirm": "이 세션을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
-    "deleteProjectConfirm": "사이드바에서 이 프로젝트를 제거하시겠습니까? 프로젝트 파일, 메모리 및 세션 데이터는 삭제되지 않습니다.",
+    "deleteProjectConfirm": "이 빈 프로젝트를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
    "enterProjectPath": "프로젝트 경로를 입력해주세요",
    "deleteSessionFailed": "세션 삭제 실패. 다시 시도해주세요.",
    "deleteSessionError": "세션 삭제 오류. 다시 시도해주세요.",
    "renameSessionFailed": "세션 이름 변경 실패. 다시 시도해주세요.",
    "renameSessionError": "세션 이름 변경 오류. 다시 시도해주세요.",
-    "deleteProjectFailed": "프로젝트 제거 실패. 다시 시도해주세요.",
+    "deleteProjectFailed": "프로젝트 삭제 실패. 다시 시도해주세요.",
-    "deleteProjectError": "프로젝트 제거 오류. 다시 시도해주세요.",
+    "deleteProjectError": "프로젝트 삭제 오류. 다시 시도해주세요.",
    "createProjectFailed": "프로젝트 생성 실패. 다시 시도해주세요.",
    "createProjectError": "프로젝트 생성 오류. 다시 시도해주세요."
  },
@@ -109,14 +109,12 @@
    "updateAvailable": "업데이트 가능"
  },
  "deleteConfirmation": {
-    "deleteProject": "프로젝트 제거",
+    "deleteProject": "프로젝트 삭제",
    "deleteSession": "세션 삭제",
-    "confirmDelete": "이 프로젝트를 어떻게 하시겠습니까:",
+    "confirmDelete": "정말 삭제하시겠습니까",
    "sessionCount_one": "이 프로젝트에는 {{count}}개의 대화가 있습니다.",
    "sessionCount_other": "이 프로젝트에는 {{count}}개의 대화가 있습니다.",
-    "removeFromSidebar": "사이드바에서만 제거",
+    "allConversationsDeleted": "모든 대화가 영구적으로 삭제됩니다.",
-    "deleteAllData": "모든 데이터 영구 삭제",
+    "cannotUndo": "이 작업은 취소할 수 없습니다."
    "allConversationsDeleted": "프로젝트가 사이드바에서 제거됩니다. 파일, 메모리 및 세션 데이터는 보존됩니다.",
    "cannotUndo": "나중에 프로젝트를 다시 추가할 수 있습니다."
  }
 }
--- a/src/i18n/locales/ru/sidebar.json
+++ b/src/i18n/locales/ru/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "Проекты",
    "newProject": "Новый проект",
-    "deleteProject": "Убрать проект",
+    "deleteProject": "Удалить проект",
    "renameProject": "Переименовать проект",
    "noProjects": "Проекты не найдены",
    "loadingProjects": "Загрузка проектов...",
@@ -40,7 +40,7 @@
    "createProject": "Создать новый проект",
    "refresh": "Обновить проекты и сеансы (Ctrl+R)",
    "renameProject": "Переименовать проект (F2)",
-    "deleteProject": "Убрать проект из боковой панели (Delete)",
+    "deleteProject": "Удалить пустой проект (Delete)",
    "addToFavorites": "Добавить в избранное",
    "removeFromFavorites": "Удалить из избранного",
    "editSessionName": "Вручную редактировать имя сеанса",
@@ -95,14 +95,14 @@
    "deleteSuccess": "Успешно удалено",
    "errorOccurred": "Произошла ошибка",
    "deleteSessionConfirm": "Вы уверены, что хотите удалить этот сеанс? Это действие нельзя отменить.",
-    "deleteProjectConfirm": "Убрать этот проект из боковой панели? Файлы проекта, воспоминания и данные сеансов не будут удалены.",
+    "deleteProjectConfirm": "Вы уверены, что хотите удалить этот пустой проект? Это действие нельзя отменить.",
    "enterProjectPath": "Пожалуйста, введите путь к проекту",
    "deleteSessionFailed": "Не удалось удалить сеанс. Попробуйте снова.",
    "deleteSessionError": "Ошибка при удалении сеанса. Попробуйте снова.",
    "renameSessionFailed": "Не удалось переименовать сеанс. Попробуйте снова.",
    "renameSessionError": "Ошибка при переименовании сеанса. Попробуйте снова.",
-    "deleteProjectFailed": "Не удалось убрать проект. Попробуйте снова.",
+    "deleteProjectFailed": "Не удалось удалить проект. Попробуйте снова.",
-    "deleteProjectError": "Ошибка при удалении проекта из списка. Попробуйте снова.",
+    "deleteProjectError": "Ошибка при удалении проекта. Попробуйте снова.",
    "createProjectFailed": "Не удалось создать проект. Попробуйте снова.",
    "createProjectError": "Ошибка при создании проекта. Попробуйте снова."
  },
@@ -126,16 +126,14 @@
    "projectsScanned_other": "{{count}} проектов просканировано"
  },
  "deleteConfirmation": {
-    "deleteProject": "Убрать проект",
+    "deleteProject": "Удалить проект",
    "deleteSession": "Удалить сеанс",
-    "confirmDelete": "Что вы хотите сделать с",
+    "confirmDelete": "Вы уверены, что хотите удалить",
    "sessionCount_one": "Этот проект содержит {{count}} разговор.",
    "sessionCount_few": "Этот проект содержит {{count}} разговора.",
    "sessionCount_many": "Этот проект содержит {{count}} разговоров.",
    "sessionCount_other": "Этот проект содержит {{count}} разговоров.",
-    "removeFromSidebar": "Убрать только из боковой панели",
+    "allConversationsDeleted": "Все разговоры будут удалены навсегда.",
-    "deleteAllData": "Удалить все данные навсегда",
+    "cannotUndo": "Это действие нельзя отменить."
    "allConversationsDeleted": "Проект будет убран из боковой панели. Ваши файлы, воспоминания и данные сеансов сохранятся.",
    "cannotUndo": "Вы сможете добавить проект позже."
  }
 }
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -2,7 +2,7 @@
  "projects": {
    "title": "项目",
    "newProject": "新建项目",
-    "deleteProject": "移除项目",
+    "deleteProject": "删除项目",
    "renameProject": "重命名项目",
    "noProjects": "未找到项目",
    "loadingProjects": "加载项目中...",
@@ -40,7 +40,7 @@
    "createProject": "创建新项目",
    "refresh": "刷新项目和会话 (Ctrl+R)",
    "renameProject": "重命名项目 (F2)",
-    "deleteProject": "从侧边栏移除项目 (Delete)",
+    "deleteProject": "删除空项目 (Delete)",
    "addToFavorites": "添加到收藏",
    "removeFromFavorites": "从收藏移除",
    "editSessionName": "手动编辑会话名称",
@@ -95,14 +95,14 @@
    "deleteSuccess": "删除成功",
    "errorOccurred": "发生错误",
    "deleteSessionConfirm": "确定要删除此会话吗？此操作无法撤销。",
-    "deleteProjectConfirm": "从侧边栏移除此项目？您的项目文件、记忆和会话数据不会被删除。",
+    "deleteProjectConfirm": "确定要删除此空项目吗？此操作无法撤销。",
    "enterProjectPath": "请输入项目路径",
    "deleteSessionFailed": "删除会话失败，请重试。",
    "deleteSessionError": "删除会话时出错，请重试。",
    "renameSessionFailed": "重命名会话失败，请重试。",
    "renameSessionError": "重命名会话时出错，请重试。",
-    "deleteProjectFailed": "移除项目失败，请重试。",
+    "deleteProjectFailed": "删除项目失败，请重试。",
-    "deleteProjectError": "移除项目时出错，请重试。",
+    "deleteProjectError": "删除项目时出错，请重试。",
    "createProjectFailed": "创建项目失败，请重试。",
    "createProjectError": "创建项目时出错，请重试。"
  },
@@ -122,14 +122,12 @@
    "projectsScanned_other": "{{count}} 个项目已扫描"
  },
  "deleteConfirmation": {
-    "deleteProject": "移除项目",
+    "deleteProject": "删除项目",
    "deleteSession": "删除会话",
-    "confirmDelete": "您想如何处理",
+    "confirmDelete": "您确定要删除",
    "sessionCount_one": "此项目包含 {{count}} 个对话。",
    "sessionCount_other": "此项目包含 {{count}} 个对话。",
-    "removeFromSidebar": "仅从侧边栏移除",
+    "allConversationsDeleted": "所有对话将被永久删除。",
-    "deleteAllData": "永久删除所有数据",
+    "cannotUndo": "此操作无法撤销。"
    "allConversationsDeleted": "项目将从侧边栏中移除。您的文件、记忆和会话数据将会保留。",
    "cannotUndo": "您可以稍后重新添加此项目。"
  }
 }
--- a/src/shared/view/ui/Alert.tsx
+++ b/src/shared/view/ui/Alert.tsx
@@ -1,64 +0,0 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../../lib/utils';
 const alertVariants = cva(
  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
  {
    variants: {
      variant: {
        default: 'bg-card text-card-foreground',
        destructive:
          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
 );
 type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ className, variant, ...props }, ref) => (
    <div
      ref={ref}
      role="alert"
      data-slot="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
 );
 Alert.displayName = 'Alert';
 const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="alert-title"
      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
      {...props}
    />
  )
 );
 AlertTitle.displayName = 'AlertTitle';
 const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="alert-description"
      className={cn(
        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
        className
      )}
      {...props}
    />
  )
 );
 AlertDescription.displayName = 'AlertDescription';
 export { Alert, AlertTitle, AlertDescription, alertVariants };
--- a/src/shared/view/ui/Badge.tsx
+++ b/src/shared/view/ui/Badge.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../../lib/utils';
 const badgeVariants = cva(
--- a/src/shared/view/ui/Button.tsx
+++ b/src/shared/view/ui/Button.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../../lib/utils';
 // Keep visual variants centralized so all button usages stay consistent.
 const buttonVariants = cva(
-  'inline-flex touch-manipulation items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium touch-manipulation transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
--- a/src/shared/view/ui/Card.tsx
+++ b/src/shared/view/ui/Card.tsx
@@ -1,78 +0,0 @@
 import * as React from 'react';
 import { cn } from '../../../lib/utils';
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
      {...props}
    />
  )
 );
 Card.displayName = 'Card';
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('flex flex-col space-y-1.5 p-4', className)}
      {...props}
    />
  )
 );
 CardHeader.displayName = 'CardHeader';
 const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn('font-semibold leading-none tracking-tight', className)}
      {...props}
    />
  )
 );
 CardTitle.displayName = 'CardTitle';
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p
      ref={ref}
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  )
 );
 CardDescription.displayName = 'CardDescription';
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
  )
 );
 CardContent.displayName = 'CardContent';
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
  )
 );
 CardFooter.displayName = 'CardFooter';
 /**
 * Use inside a CardHeader with `className="flex flex-row items-start justify-between"`.
 * Positions an action (button/icon) at the trailing edge of the header.
 */
 const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('ml-auto shrink-0', className)}
      {...props}
    />
  )
 );
 CardAction.displayName = 'CardAction';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction };
--- a/src/shared/view/ui/Collapsible.tsx
+++ b/src/shared/view/ui/Collapsible.tsx
@@ -1,103 +0,0 @@
 import * as React from 'react';
 import { cn } from '../../../lib/utils';
 interface CollapsibleContextValue {
  open: boolean;
  onOpenChange: (open: boolean) => void;
 }
 const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null);
 function useCollapsible() {
  const ctx = React.useContext(CollapsibleContext);
  if (!ctx) throw new Error('Collapsible components must be used within <Collapsible>');
  return ctx;
 }
 interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
 }
 const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
  ({ defaultOpen = false, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, children, ...props }, ref) => {
    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
    const isControlled = controlledOpen !== undefined;
    const open = isControlled ? controlledOpen : internalOpen;
    const onOpenChange = React.useCallback(
      (next: boolean) => {
        if (!isControlled) setInternalOpen(next);
        controlledOnOpenChange?.(next);
      },
      [isControlled, controlledOnOpenChange]
    );
    const value = React.useMemo(() => ({ open, onOpenChange }), [open, onOpenChange]);
    return (
      <CollapsibleContext.Provider value={value}>
        <div ref={ref} data-state={open ? 'open' : 'closed'} className={className} {...props}>
          {children}
        </div>
      </CollapsibleContext.Provider>
    );
  }
 );
 Collapsible.displayName = 'Collapsible';
 const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
  ({ onClick, children, className, ...props }, ref) => {
    const { open, onOpenChange } = useCollapsible();
    const handleClick = React.useCallback(
      (e: React.MouseEvent<HTMLButtonElement>) => {
        onOpenChange(!open);
        onClick?.(e);
      },
      [open, onOpenChange, onClick]
    );
    return (
      <button
        ref={ref}
        type="button"
        aria-expanded={open}
        data-state={open ? 'open' : 'closed'}
        onClick={handleClick}
        className={className}
        {...props}
      >
        {children}
      </button>
    );
  }
 );
 CollapsibleTrigger.displayName = 'CollapsibleTrigger';
 const CollapsibleContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => {
    const { open } = useCollapsible();
    return (
      <div
        ref={ref}
        data-state={open ? 'open' : 'closed'}
        className={cn(
          'grid transition-[grid-template-rows] duration-200 ease-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
          className
        )}
        {...props}
      >
        <div className="overflow-hidden">
          {children}
        </div>
      </div>
    );
  }
 );
 CollapsibleContent.displayName = 'CollapsibleContent';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Simos Mikelatos	9c85ddc807	Merge branch 'main' into fix/replace-all-spawn-with-cross-spawn	2026-04-14 23:52:44 +02:00
Haileyesus	3bbd56e8e9	fix: remove unnecessary child_process imports	2026-04-10 16:50:50 +03:00
Haileyesus	11733918e5	fix: replace child_process with cross-spawn	2026-04-10 16:37:47 +03:00
`@@ -1,2 +1,2 @@`
	`#!/usr/bin/env node`	`#!/usr/bin/env node`
	`import('@cloudcli-ai/cloudcli/dist-server/server/cli.js');`	`import('@cloudcli-ai/cloudcli/server/cli.js');`