Add comprehensive tests for schema cleanup migration and search comparison

- Implement tests for migration 005 to verify removal of deprecated fields in the database schema. - Ensure that new databases are created with a clean schema. - Validate that keywords are correctly extracted from the normalized file_keywords table. - Test symbol insertion without deprecated fields and subdir operations without direct_files. - Create a detailed search comparison test to evaluate vector search vs hybrid search performance. - Add a script for reindexing projects to extract code relationships and verify GraphAnalyzer functionality. - Include a test script to check TreeSitter parser availability and relationship extraction from sample files.
2026-02-10 02:24:35 +08:00 · 2025-12-16 19:27:05 +08:00
parent 3da0ef2adb
commit df23975a0b
61 changed files with 13114 additions and 366 deletions
--- a/ccw/src/config/storage-paths.ts
+++ b/ccw/src/config/storage-paths.ts
@@ -9,6 +9,7 @@ import { homedir } from 'os';
 import { join, resolve, dirname, relative, sep } from 'path';
 import { createHash } from 'crypto';
 import { existsSync, mkdirSync, renameSync, rmSync, readdirSync } from 'fs';
+import { readdir } from 'fs/promises';

 // Environment variable override for custom storage location
 // Made dynamic to support testing environments
@@ -533,6 +534,77 @@ export function scanChildProjects(projectPath: string): ChildProjectInfo[] {
  return children;
 }

+/**
+ * Asynchronously scan for child projects in hierarchical storage structure
+ * Non-blocking version using fs.promises for better performance
+ * @param projectPath - Parent project path
+ * @returns Promise resolving to array of child project information
+ */
+export async function scanChildProjectsAsync(projectPath: string): Promise<ChildProjectInfo[]> {
+  const absolutePath = resolve(projectPath);
+  const parentId = getProjectId(absolutePath);
+  const parentStorageDir = join(getCCWHome(), 'projects', parentId);
+
+  // If parent storage doesn't exist, no children
+  if (!existsSync(parentStorageDir)) {
+    return [];
+  }
+
+  const children: ChildProjectInfo[] = [];
+
+  /**
+   * Recursively scan directory for project data directories (async)
+   */
+  async function scanDirectoryAsync(dir: string, relativePath: string): Promise<void> {
+    if (!existsSync(dir)) return;
+
+    try {
+      const entries = await readdir(dir, { withFileTypes: true });
+
+      // Process directories in parallel for better performance
+      const promises = entries
+        .filter(entry => entry.isDirectory())
+        .map(async (entry) => {
+          const fullPath = join(dir, entry.name);
+          const currentRelPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+
+          // Check if this directory contains project data
+          const dataMarkers = ['cli-history', 'memory', 'cache', 'config'];
+          const hasData = dataMarkers.some(marker => existsSync(join(fullPath, marker)));
+
+          if (hasData) {
+            // This is a child project
+            const childProjectPath = join(absolutePath, currentRelPath.replace(/\//g, sep));
+            const childId = getProjectId(childProjectPath);
+
+            children.push({
+              projectPath: childProjectPath,
+              relativePath: currentRelPath,
+              projectId: childId,
+              paths: getProjectPaths(childProjectPath)
+            });
+          }
+
+          // Continue scanning subdirectories (skip data directories)
+          if (!dataMarkers.includes(entry.name)) {
+            await scanDirectoryAsync(fullPath, currentRelPath);
+          }
+        });
+
+      await Promise.all(promises);
+    } catch (error) {
+      // Ignore read errors
+      if (process.env.DEBUG) {
+        console.error(`[scanChildProjectsAsync] Failed to scan ${dir}:`, error);
+      }
+    }
+  }
+
+  await scanDirectoryAsync(parentStorageDir, '');
+
+  return children;
+}
+
 /**
 * Legacy storage paths (for backward compatibility detection)
 */
--- a/ccw/src/core/dashboard-generator.ts
+++ b/ccw/src/core/dashboard-generator.ts
@@ -24,7 +24,13 @@ const MODULE_CSS_FILES = [
  '07-managers.css',
  '08-review.css',
  '09-explorer.css',
-  '10-cli.css'
+  '10-cli.css',
+  '11-memory.css',
+  '11-prompt-history.css',
+  '12-skills-rules.css',
+  '13-claude-manager.css',
+  '14-graph-explorer.css',
+  '15-mcp-manager.css'
 ];

 const MODULE_FILES = [
@@ -57,6 +63,7 @@ const MODULE_FILES = [
  'views/lite-tasks.js',
  'views/fix-session.js',
  'views/cli-manager.js',
+  'views/codexlens-manager.js',
  'views/explorer.js',
  'views/mcp-manager.js',
  'views/hook-manager.js',
--- a/ccw/src/core/history-importer.ts
+++ b/ccw/src/core/history-importer.ts
@@ -104,45 +104,45 @@ export class HistoryImporter {

  /**
   * Initialize database schema for conversation history
+   * NOTE: Schema aligned with MemoryStore for seamless importing
   */
  private initSchema(): void {
    this.db.exec(`
-      -- Conversations table
+      -- Conversations table (aligned with MemoryStore schema)
      CREATE TABLE IF NOT EXISTS conversations (
        id TEXT PRIMARY KEY,
-        session_id TEXT NOT NULL,
-        project_path TEXT,
+        source TEXT DEFAULT 'ccw',
+        external_id TEXT,
+        project_name TEXT,
+        git_branch TEXT,
        created_at TEXT NOT NULL,
        updated_at TEXT NOT NULL,
-        message_count INTEGER DEFAULT 0,
-        total_tokens INTEGER DEFAULT 0,
-        metadata TEXT
+        quality_score INTEGER,
+        turn_count INTEGER DEFAULT 0,
+        prompt_preview TEXT
      );

-      -- Messages table
+      -- Messages table (aligned with MemoryStore schema)
      CREATE TABLE IF NOT EXISTS messages (
-        id TEXT PRIMARY KEY,
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
        conversation_id TEXT NOT NULL,
-        parent_id TEXT,
-        role TEXT NOT NULL,
-        content TEXT NOT NULL,
+        role TEXT NOT NULL CHECK(role IN ('user', 'assistant', 'system')),
+        content_text TEXT,
+        content_json TEXT,
        timestamp TEXT NOT NULL,
-        model TEXT,
-        input_tokens INTEGER DEFAULT 0,
-        output_tokens INTEGER DEFAULT 0,
-        cwd TEXT,
-        git_branch TEXT,
+        token_count INTEGER,
        FOREIGN KEY (conversation_id) REFERENCES conversations(id) ON DELETE CASCADE
      );

-      -- Tool calls table
+      -- Tool calls table (aligned with MemoryStore schema)
      CREATE TABLE IF NOT EXISTS tool_calls (
-        id TEXT PRIMARY KEY,
-        message_id TEXT NOT NULL,
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        message_id INTEGER NOT NULL,
        tool_name TEXT NOT NULL,
-        tool_input TEXT,
-        tool_result TEXT,
-        timestamp TEXT NOT NULL,
+        tool_args TEXT,
+        tool_output TEXT,
+        status TEXT,
+        duration_ms INTEGER,
        FOREIGN KEY (message_id) REFERENCES messages(id) ON DELETE CASCADE
      );

@@ -160,13 +160,11 @@ export class HistoryImporter {
        created_at TEXT NOT NULL
      );

-      -- Indexes
-      CREATE INDEX IF NOT EXISTS idx_conversations_session ON conversations(session_id);
-      CREATE INDEX IF NOT EXISTS idx_conversations_project ON conversations(project_path);
+      -- Indexes (aligned with MemoryStore)
+      CREATE INDEX IF NOT EXISTS idx_conversations_created ON conversations(created_at DESC);
+      CREATE INDEX IF NOT EXISTS idx_conversations_updated ON conversations(updated_at DESC);
      CREATE INDEX IF NOT EXISTS idx_messages_conversation ON messages(conversation_id);
-      CREATE INDEX IF NOT EXISTS idx_messages_timestamp ON messages(timestamp DESC);
      CREATE INDEX IF NOT EXISTS idx_tool_calls_message ON tool_calls(message_id);
-      CREATE INDEX IF NOT EXISTS idx_tool_calls_name ON tool_calls(tool_name);
    `);
  }

@@ -332,17 +330,17 @@ export class HistoryImporter {
    const result: ImportResult = { imported: 0, skipped: 0, errors: 0 };

    const upsertConversation = this.db.prepare(`
-      INSERT INTO conversations (id, session_id, project_path, created_at, updated_at, message_count, metadata)
-      VALUES (@id, @session_id, @project_path, @created_at, @updated_at, 1, @metadata)
+      INSERT INTO conversations (id, source, external_id, project_name, created_at, updated_at, turn_count, prompt_preview)
+      VALUES (@id, @source, @external_id, @project_name, @created_at, @updated_at, 1, @prompt_preview)
      ON CONFLICT(id) DO UPDATE SET
        updated_at = @updated_at,
-        message_count = message_count + 1
+        turn_count = turn_count + 1,
+        prompt_preview = @prompt_preview
    `);

    const upsertMessage = this.db.prepare(`
-      INSERT INTO messages (id, conversation_id, role, content, timestamp, cwd)
-      VALUES (@id, @conversation_id, 'user', @content, @timestamp, @cwd)
-      ON CONFLICT(id) DO NOTHING
+      INSERT INTO messages (conversation_id, role, content_text, timestamp)
+      VALUES (@conversation_id, 'user', @content_text, @timestamp)
    `);

    const insertHash = this.db.prepare(`
@@ -354,7 +352,6 @@ export class HistoryImporter {
      for (const entry of entries) {
        try {
          const timestamp = new Date(entry.timestamp).toISOString();
-          const messageId = `${entry.sessionId}-${entry.timestamp}`;
          const hash = this.generateHash(entry.sessionId, timestamp, entry.display);

          // Check if hash exists
@@ -364,29 +361,28 @@ export class HistoryImporter {
            continue;
          }

-          // Insert conversation
+          // Insert conversation (using MemoryStore-compatible fields)
          upsertConversation.run({
            id: entry.sessionId,
-            session_id: entry.sessionId,
-            project_path: entry.project,
+            source: 'global_history',
+            external_id: entry.sessionId,
+            project_name: entry.project,
            created_at: timestamp,
            updated_at: timestamp,
-            metadata: JSON.stringify({ source: 'global_history' })
+            prompt_preview: entry.display.substring(0, 100)
          });

-          // Insert message
-          upsertMessage.run({
-            id: messageId,
+          // Insert message (using MemoryStore-compatible fields)
+          const insertResult = upsertMessage.run({
            conversation_id: entry.sessionId,
-            content: entry.display,
-            timestamp,
-            cwd: entry.project
+            content_text: entry.display,
+            timestamp
          });

-          // Insert hash
+          // Insert hash (using actual message ID from insert)
          insertHash.run({
            hash,
-            message_id: messageId,
+            message_id: String(insertResult.lastInsertRowid),
            created_at: timestamp
          });

@@ -413,24 +409,22 @@ export class HistoryImporter {
    const result: ImportResult = { imported: 0, skipped: 0, errors: 0 };

    const upsertConversation = this.db.prepare(`
-      INSERT INTO conversations (id, session_id, project_path, created_at, updated_at, message_count, total_tokens, metadata)
-      VALUES (@id, @session_id, @project_path, @created_at, @updated_at, @message_count, @total_tokens, @metadata)
+      INSERT INTO conversations (id, source, external_id, project_name, git_branch, created_at, updated_at, turn_count, prompt_preview)
+      VALUES (@id, @source, @external_id, @project_name, @git_branch, @created_at, @updated_at, @turn_count, @prompt_preview)
      ON CONFLICT(id) DO UPDATE SET
        updated_at = @updated_at,
-        message_count = @message_count,
-        total_tokens = @total_tokens
+        turn_count = @turn_count,
+        prompt_preview = @prompt_preview
    `);

    const upsertMessage = this.db.prepare(`
-      INSERT INTO messages (id, conversation_id, parent_id, role, content, timestamp, model, input_tokens, output_tokens, cwd, git_branch)
-      VALUES (@id, @conversation_id, @parent_id, @role, @content, @timestamp, @model, @input_tokens, @output_tokens, @cwd, @git_branch)
-      ON CONFLICT(id) DO NOTHING
+      INSERT INTO messages (conversation_id, role, content_text, content_json, timestamp, token_count)
+      VALUES (@conversation_id, @role, @content_text, @content_json, @timestamp, @token_count)
    `);

    const insertToolCall = this.db.prepare(`
-      INSERT INTO tool_calls (id, message_id, tool_name, tool_input, tool_result, timestamp)
-      VALUES (@id, @message_id, @tool_name, @tool_input, @tool_result, @timestamp)
-      ON CONFLICT(id) DO NOTHING
+      INSERT INTO tool_calls (message_id, tool_name, tool_args, tool_output, status)
+      VALUES (@message_id, @tool_name, @tool_args, @tool_output, @status)
    `);

    const insertHash = this.db.prepare(`
@@ -439,27 +433,29 @@ export class HistoryImporter {
    `);

    const transaction = this.db.transaction(() => {
-      let totalTokens = 0;
      const firstMessage = messages[0];
      const lastMessage = messages[messages.length - 1];
+      const promptPreview = firstMessage?.message
+        ? this.extractTextContent(firstMessage.message.content).substring(0, 100)
+        : '';

      // Insert conversation FIRST (before messages, for foreign key constraint)
      upsertConversation.run({
        id: sessionId,
-        session_id: sessionId,
-        project_path: metadata.cwd || null,
+        source: 'session_file',
+        external_id: sessionId,
+        project_name: metadata.cwd || null,
+        git_branch: metadata.gitBranch || null,
        created_at: firstMessage.timestamp,
        updated_at: lastMessage.timestamp,
-        message_count: 0,
-        total_tokens: 0,
-        metadata: JSON.stringify({ ...metadata, source: 'session_file' })
+        turn_count: 0,
+        prompt_preview: promptPreview
      });

      for (const msg of messages) {
        if (!msg.message) continue;

        try {
-          const messageId = msg.uuid || `${sessionId}-${msg.timestamp}`;
          const content = this.extractTextContent(msg.message.content);
          const hash = this.generateHash(sessionId, msg.timestamp, content);

@@ -470,43 +466,44 @@ export class HistoryImporter {
            continue;
          }

-          // Calculate tokens
+          // Calculate total tokens
          const inputTokens = msg.message.usage?.input_tokens || 0;
          const outputTokens = msg.message.usage?.output_tokens || 0;
-          totalTokens += inputTokens + outputTokens;
+          const totalTokens = inputTokens + outputTokens;

-          // Insert message
-          upsertMessage.run({
-            id: messageId,
+          // Store content as JSON if complex, otherwise as text
+          const contentJson = typeof msg.message.content === 'object'
+            ? JSON.stringify(msg.message.content)
+            : null;
+
+          // Insert message (using MemoryStore-compatible fields)
+          const insertResult = upsertMessage.run({
            conversation_id: sessionId,
-            parent_id: msg.parentUuid || null,
            role: msg.message.role,
-            content,
+            content_text: content,
+            content_json: contentJson,
            timestamp: msg.timestamp,
-            model: msg.message.model || null,
-            input_tokens: inputTokens,
-            output_tokens: outputTokens,
-            cwd: msg.cwd || metadata.cwd || null,
-            git_branch: msg.gitBranch || metadata.gitBranch || null
+            token_count: totalTokens
          });

+          const messageId = insertResult.lastInsertRowid as number;
+
          // Extract and insert tool calls
          const toolCalls = this.extractToolCalls(msg.message.content);
          for (const tool of toolCalls) {
            insertToolCall.run({
-              id: tool.id || `${messageId}-${tool.name}`,
              message_id: messageId,
              tool_name: tool.name,
-              tool_input: JSON.stringify(tool.input),
-              tool_result: tool.result || null,
-              timestamp: msg.timestamp
+              tool_args: JSON.stringify(tool.input),
+              tool_output: tool.result || null,
+              status: 'success'
            });
          }

-          // Insert hash
+          // Insert hash (using actual message ID from insert)
          insertHash.run({
            hash,
-            message_id: messageId,
+            message_id: String(messageId),
            created_at: msg.timestamp
          });

@@ -520,13 +517,14 @@ export class HistoryImporter {
      // Update conversation with final counts
      upsertConversation.run({
        id: sessionId,
-        session_id: sessionId,
-        project_path: metadata.cwd || null,
+        source: 'session_file',
+        external_id: sessionId,
+        project_name: metadata.cwd || null,
+        git_branch: metadata.gitBranch || null,
        created_at: firstMessage.timestamp,
        updated_at: lastMessage.timestamp,
-        message_count: result.imported,
-        total_tokens: totalTokens,
-        metadata: JSON.stringify({ ...metadata, source: 'session_file' })
+        turn_count: result.imported,
+        prompt_preview: promptPreview
      });
    });

--- a/ccw/src/core/memory-store.ts
+++ b/ccw/src/core/memory-store.ts
@@ -90,6 +90,8 @@ export interface ToolCall {
  id?: number;
  message_id: number;
  tool_name: string;
+  // NOTE: Naming inconsistency - using tool_args/tool_output vs tool_input/tool_result in HistoryImporter
+  // Kept for backward compatibility with existing databases
  tool_args?: string;
  tool_output?: string;
  status?: string;
@@ -114,8 +116,10 @@ export interface EntityWithAssociations extends Entity {
 export class MemoryStore {
  private db: Database.Database;
  private dbPath: string;
+  private projectPath: string;

  constructor(projectPath: string) {
+    this.projectPath = projectPath;
    // Use centralized storage path
    const paths = StoragePaths.project(projectPath);
    const memoryDir = paths.memory;
@@ -315,6 +319,22 @@ export class MemoryStore {
        `);
        console.log('[Memory Store] Migration complete: relative_path column added');
      }
+
+      // Add missing timestamp index for messages table (for time-based queries)
+      try {
+        const indexExists = this.db.prepare(`
+          SELECT name FROM sqlite_master
+          WHERE type='index' AND name='idx_messages_timestamp'
+        `).get();
+
+        if (!indexExists) {
+          console.log('[Memory Store] Adding missing timestamp index to messages table...');
+          this.db.exec(`CREATE INDEX IF NOT EXISTS idx_messages_timestamp ON messages(timestamp DESC);`);
+          console.log('[Memory Store] Migration complete: messages timestamp index added');
+        }
+      } catch (indexErr) {
+        console.warn('[Memory Store] Messages timestamp index creation warning:', (indexErr as Error).message);
+      }
    } catch (err) {
      console.error('[Memory Store] Migration error:', (err as Error).message);
      // Don't throw - allow the store to continue working with existing schema
@@ -597,13 +617,15 @@ export class MemoryStore {
   */
  saveConversation(conversation: Conversation): void {
    const stmt = this.db.prepare(`
-      INSERT INTO conversations (id, source, external_id, project_name, git_branch, created_at, updated_at, quality_score, turn_count, prompt_preview)
-      VALUES (@id, @source, @external_id, @project_name, @git_branch, @created_at, @updated_at, @quality_score, @turn_count, @prompt_preview)
+      INSERT INTO conversations (id, source, external_id, project_name, git_branch, created_at, updated_at, quality_score, turn_count, prompt_preview, project_root, relative_path)
+      VALUES (@id, @source, @external_id, @project_name, @git_branch, @created_at, @updated_at, @quality_score, @turn_count, @prompt_preview, @project_root, @relative_path)
      ON CONFLICT(id) DO UPDATE SET
        updated_at = @updated_at,
        quality_score = @quality_score,
        turn_count = @turn_count,
-        prompt_preview = @prompt_preview
+        prompt_preview = @prompt_preview,
+        project_root = @project_root,
+        relative_path = @relative_path
    `);

    stmt.run({
@@ -616,7 +638,9 @@ export class MemoryStore {
      updated_at: conversation.updated_at,
      quality_score: conversation.quality_score || null,
      turn_count: conversation.turn_count,
-      prompt_preview: conversation.prompt_preview || null
+      prompt_preview: conversation.prompt_preview || null,
+      project_root: this.projectPath,
+      relative_path: null  // For future hierarchical tracking
    });
  }

@@ -737,15 +761,15 @@ export function getMemoryStore(projectPath: string): MemoryStore {
 * @param projectPath - Parent project path
 * @returns Aggregated statistics from all projects
 */
-export function getAggregatedStats(projectPath: string): {
+export async function getAggregatedStats(projectPath: string): Promise<{
  entities: number;
  prompts: number;
  conversations: number;
  total: number;
  projects: Array<{ path: string; stats: { entities: number; prompts: number; conversations: number } }>;
-} {
-  const { scanChildProjects } = require('../config/storage-paths.js');
-  const childProjects = scanChildProjects(projectPath);
+}> {
+  const { scanChildProjectsAsync } = await import('../config/storage-paths.js');
+  const childProjects = await scanChildProjectsAsync(projectPath);

  const projectStats: Array<{ path: string; stats: { entities: number; prompts: number; conversations: number } }> = [];
  let totalEntities = 0;
@@ -813,12 +837,12 @@ export function getAggregatedStats(projectPath: string): {
 * @param options - Query options
 * @returns Combined entities from all projects with source information
 */
-export function getAggregatedEntities(
+export async function getAggregatedEntities(
  projectPath: string,
  options: { type?: string; limit?: number; offset?: number } = {}
-): Array<HotEntity & { sourceProject?: string }> {
-  const { scanChildProjects } = require('../config/storage-paths.js');
-  const childProjects = scanChildProjects(projectPath);
+): Promise<Array<HotEntity & { sourceProject?: string }>> {
+  const { scanChildProjectsAsync } = await import('../config/storage-paths.js');
+  const childProjects = await scanChildProjectsAsync(projectPath);

  const limit = options.limit || 50;
  const offset = options.offset || 0;
@@ -892,12 +916,12 @@ export function getAggregatedEntities(
 * @param limit - Maximum number of prompts to return
 * @returns Combined prompts from all projects with source information
 */
-export function getAggregatedPrompts(
+export async function getAggregatedPrompts(
  projectPath: string,
  limit: number = 50
-): Array<PromptHistory & { sourceProject?: string }> {
-  const { scanChildProjects } = require('../config/storage-paths.js');
-  const childProjects = scanChildProjects(projectPath);
+): Promise<Array<PromptHistory & { sourceProject?: string }>> {
+  const { scanChildProjectsAsync } = await import('../config/storage-paths.js');
+  const childProjects = await scanChildProjectsAsync(projectPath);

  const allPrompts: Array<PromptHistory & { sourceProject?: string }> = [];

--- a/ccw/src/core/routes/cli-routes.ts
+++ b/ccw/src/core/routes/cli-routes.ts
@@ -212,7 +212,7 @@ export async function handleCliRoutes(ctx: RouteContext): Promise<boolean> {
    const status = url.searchParams.get('status') || null;
    const category = url.searchParams.get('category') as 'user' | 'internal' | 'insight' | null;
    const search = url.searchParams.get('search') || null;
-    const recursive = url.searchParams.get('recursive') === 'true';
+    const recursive = url.searchParams.get('recursive') !== 'false';

    getExecutionHistoryAsync(projectPath, { limit, tool, status, category, search, recursive })
      .then(history => {
--- a/ccw/src/core/routes/codexlens-routes.ts
+++ b/ccw/src/core/routes/codexlens-routes.ts
@@ -23,6 +23,37 @@ export interface RouteContext {
  broadcastToClients: (data: unknown) => void;
 }

+/**
+ * Strip ANSI color codes from string
+ * Rich library adds color codes even with --json flag
+ */
+function stripAnsiCodes(str: string): string {
+  // ANSI escape code pattern: \x1b[...m or \x1b]...
+  return str.replace(/\x1b\[[0-9;]*m/g, '')
+            .replace(/\x1b\][0-9;]*\x07/g, '')
+            .replace(/\x1b\][^\x07]*\x07/g, '');
+}
+
+/**
+ * Extract JSON from CLI output that may contain logging messages
+ * CodexLens CLI outputs logs like "INFO ..." before the JSON
+ * Also strips ANSI color codes that Rich library adds
+ */
+function extractJSON(output: string): any {
+  // Strip ANSI color codes first
+  const cleanOutput = stripAnsiCodes(output);
+
+  // Find the first { or [ character (start of JSON)
+  const jsonStart = cleanOutput.search(/[{\[]/);
+  if (jsonStart === -1) {
+    throw new Error('No JSON found in output');
+  }
+
+  // Extract everything from the first { or [ onwards
+  const jsonString = cleanOutput.substring(jsonStart);
+  return JSON.parse(jsonString);
+}
+
 /**
 * Handle CodexLens routes
 * @returns true if route was handled, false otherwise
@@ -83,23 +114,45 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    return true;
  }

-  // API: CodexLens Config - GET (Get current configuration)
+  // API: CodexLens Config - GET (Get current configuration with index count)
  if (pathname === '/api/codexlens/config' && req.method === 'GET') {
    try {
-      const result = await executeCodexLens(['config-show', '--json']);
-      if (result.success) {
+      // Fetch both config and status to merge index_count
+      const [configResult, statusResult] = await Promise.all([
+        executeCodexLens(['config', '--json']),
+        executeCodexLens(['status', '--json'])
+      ]);
+
+      let responseData = { index_dir: '~/.codexlens/indexes', index_count: 0 };
+
+      // Parse config (extract JSON from output that may contain log messages)
+      if (configResult.success) {
        try {
-          const config = JSON.parse(result.output);
-          res.writeHead(200, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify(config));
-        } catch {
-          res.writeHead(200, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ index_dir: '~/.codexlens/indexes', index_count: 0 }));
+          const config = extractJSON(configResult.output);
+          if (config.success && config.result) {
+            responseData.index_dir = config.result.index_root || responseData.index_dir;
+          }
+        } catch (e) {
+          console.error('[CodexLens] Failed to parse config:', e.message);
+          console.error('[CodexLens] Config output:', configResult.output.substring(0, 200));
        }
-      } else {
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ index_dir: '~/.codexlens/indexes', index_count: 0 }));
      }
+
+      // Parse status to get index_count (projects_count)
+      if (statusResult.success) {
+        try {
+          const status = extractJSON(statusResult.output);
+          if (status.success && status.result) {
+            responseData.index_count = status.result.projects_count || 0;
+          }
+        } catch (e) {
+          console.error('[CodexLens] Failed to parse status:', e.message);
+          console.error('[CodexLens] Status output:', statusResult.output.substring(0, 200));
+        }
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(responseData));
    } catch (err) {
      res.writeHead(500, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify({ error: err.message }));
@@ -168,7 +221,7 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
        const result = await executeCodexLens(['init', targetPath, '--json'], { cwd: targetPath });
        if (result.success) {
          try {
-            const parsed = JSON.parse(result.output);
+            const parsed = extractJSON(result.output);
            return { success: true, result: parsed };
          } catch {
            return { success: true, output: result.output };
@@ -237,7 +290,7 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
        const result = await executeCodexLens(args, { cwd: targetPath, timeout: timeoutMs + 30000 });
        if (result.success) {
          try {
-            const parsed = JSON.parse(result.output);
+            const parsed = extractJSON(result.output);
            return { success: true, result: parsed };
          } catch {
            return { success: true, output: result.output };
@@ -253,10 +306,11 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
  }


-  // API: CodexLens Search (FTS5 text search)
+  // API: CodexLens Search (FTS5 text search with mode support)
  if (pathname === '/api/codexlens/search') {
    const query = url.searchParams.get('query') || '';
    const limit = parseInt(url.searchParams.get('limit') || '20', 10);
+    const mode = url.searchParams.get('mode') || 'exact';  // exact, fuzzy, hybrid, vector
    const projectPath = url.searchParams.get('path') || initialPath;

    if (!query) {
@@ -266,13 +320,13 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    }

    try {
-      const args = ['search', query, '--path', projectPath, '--limit', limit.toString(), '--json'];
+      const args = ['search', query, '--path', projectPath, '--limit', limit.toString(), '--mode', mode, '--json'];

      const result = await executeCodexLens(args, { cwd: projectPath });

      if (result.success) {
        try {
-          const parsed = JSON.parse(result.output);
+          const parsed = extractJSON(result.output);
          res.writeHead(200, { 'Content-Type': 'application/json' });
          res.end(JSON.stringify({ success: true, ...parsed.result }));
        } catch {
@@ -290,10 +344,11 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    return true;
  }

-  // API: CodexLens Search Files Only (return file paths only)
+  // API: CodexLens Search Files Only (return file paths only, with mode support)
  if (pathname === '/api/codexlens/search_files') {
    const query = url.searchParams.get('query') || '';
    const limit = parseInt(url.searchParams.get('limit') || '20', 10);
+    const mode = url.searchParams.get('mode') || 'exact';  // exact, fuzzy, hybrid, vector
    const projectPath = url.searchParams.get('path') || initialPath;

    if (!query) {
@@ -303,13 +358,13 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    }

    try {
-      const args = ['search', query, '--path', projectPath, '--limit', limit.toString(), '--files-only', '--json'];
+      const args = ['search', query, '--path', projectPath, '--limit', limit.toString(), '--mode', mode, '--files-only', '--json'];

      const result = await executeCodexLens(args, { cwd: projectPath });

      if (result.success) {
        try {
-          const parsed = JSON.parse(result.output);
+          const parsed = extractJSON(result.output);
          res.writeHead(200, { 'Content-Type': 'application/json' });
          res.end(JSON.stringify({ success: true, ...parsed.result }));
        } catch {
@@ -327,6 +382,51 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    return true;
  }

+  // API: CodexLens Symbol Search (search for symbols by name)
+  if (pathname === '/api/codexlens/symbol') {
+    const query = url.searchParams.get('query') || '';
+    const file = url.searchParams.get('file');
+    const limit = parseInt(url.searchParams.get('limit') || '20', 10);
+    const projectPath = url.searchParams.get('path') || initialPath;
+
+    if (!query && !file) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Either query or file parameter is required' }));
+      return true;
+    }
+
+    try {
+      let args;
+      if (file) {
+        // Get symbols from a specific file
+        args = ['symbol', '--file', file, '--json'];
+      } else {
+        // Search for symbols by name
+        args = ['symbol', query, '--path', projectPath, '--limit', limit.toString(), '--json'];
+      }
+
+      const result = await executeCodexLens(args, { cwd: projectPath });
+
+      if (result.success) {
+        try {
+          const parsed = extractJSON(result.output);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: true, ...parsed.result }));
+        } catch {
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: true, symbols: [], output: result.output }));
+        }
+      } else {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: result.error }));
+      }
+    } catch (err) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: err.message }));
+    }
+    return true;
+  }
+

  // API: CodexLens Semantic Search Install (fastembed, ONNX-based, ~200MB)
  if (pathname === '/api/codexlens/semantic/install' && req.method === 'POST') {
@@ -350,5 +450,117 @@ export async function handleCodexLensRoutes(ctx: RouteContext): Promise<boolean>
    return true;
  }

+  // API: CodexLens Model List (list available embedding models)
+  if (pathname === '/api/codexlens/models' && req.method === 'GET') {
+    try {
+      const result = await executeCodexLens(['model-list', '--json']);
+      if (result.success) {
+        try {
+          const parsed = extractJSON(result.output);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify(parsed));
+        } catch {
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: true, result: { models: [] }, output: result.output }));
+        }
+      } else {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: result.error }));
+      }
+    } catch (err) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: err.message }));
+    }
+    return true;
+  }
+
+  // API: CodexLens Model Download (download embedding model by profile)
+  if (pathname === '/api/codexlens/models/download' && req.method === 'POST') {
+    handlePostRequest(req, res, async (body) => {
+      const { profile } = body;
+
+      if (!profile) {
+        return { success: false, error: 'profile is required', status: 400 };
+      }
+
+      try {
+        const result = await executeCodexLens(['model-download', profile, '--json'], { timeout: 600000 }); // 10 min for download
+        if (result.success) {
+          try {
+            const parsed = extractJSON(result.output);
+            return { success: true, ...parsed };
+          } catch {
+            return { success: true, output: result.output };
+          }
+        } else {
+          return { success: false, error: result.error, status: 500 };
+        }
+      } catch (err) {
+        return { success: false, error: err.message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // API: CodexLens Model Delete (delete embedding model by profile)
+  if (pathname === '/api/codexlens/models/delete' && req.method === 'POST') {
+    handlePostRequest(req, res, async (body) => {
+      const { profile } = body;
+
+      if (!profile) {
+        return { success: false, error: 'profile is required', status: 400 };
+      }
+
+      try {
+        const result = await executeCodexLens(['model-delete', profile, '--json']);
+        if (result.success) {
+          try {
+            const parsed = extractJSON(result.output);
+            return { success: true, ...parsed };
+          } catch {
+            return { success: true, output: result.output };
+          }
+        } else {
+          return { success: false, error: result.error, status: 500 };
+        }
+      } catch (err) {
+        return { success: false, error: err.message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // API: CodexLens Model Info (get model info by profile)
+  if (pathname === '/api/codexlens/models/info' && req.method === 'GET') {
+    const profile = url.searchParams.get('profile');
+
+    if (!profile) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'profile parameter is required' }));
+      return true;
+    }
+
+    try {
+      const result = await executeCodexLens(['model-info', profile, '--json']);
+      if (result.success) {
+        try {
+          const parsed = extractJSON(result.output);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify(parsed));
+        } catch {
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ success: false, error: 'Failed to parse response' }));
+        }
+      } else {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: result.error }));
+      }
+    } catch (err) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: err.message }));
+    }
+    return true;
+  }
+
  return false;
 }
--- a/ccw/src/core/routes/graph-routes.md
+++ b/ccw/src/core/routes/graph-routes.md
@@ -20,9 +20,7 @@ Query all symbols from the CodexLens SQLite database and return them as graph no
      "name": "functionName",
      "type": "FUNCTION",
      "file": "src/file.ts",
-      "line": 10,
-      "docstring": "function_type",
-      "tokenCount": 45
+      "line": 10
    }
  ]
 }
@@ -98,7 +96,7 @@ Maps source code paths to CodexLens index database paths following the storage s
 ### Database Schema
 Queries two main tables:
 1. **symbols** - Code symbol definitions
-   - `id`, `file_id`, `name`, `kind`, `start_line`, `end_line`, `token_count`, `symbol_type`
+   - `id`, `file_id`, `name`, `kind`, `start_line`, `end_line`
 2. **code_relationships** - Inter-symbol dependencies
   - `id`, `source_symbol_id`, `target_qualified_name`, `relationship_type`, `source_line`, `target_file`

--- a/ccw/src/core/routes/graph-routes.ts
+++ b/ccw/src/core/routes/graph-routes.ts
@@ -5,7 +5,7 @@
 import type { IncomingMessage, ServerResponse } from 'http';
 import { homedir } from 'os';
 import { join, resolve, normalize } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, readdirSync } from 'fs';
 import Database from 'better-sqlite3';

 export interface RouteContext {
@@ -63,8 +63,6 @@ interface GraphNode {
  type: string;
  file: string;
  line: number;
-  docstring?: string;
-  tokenCount?: number;
 }

 interface GraphEdge {
@@ -108,6 +106,36 @@ function validateProjectPath(projectPath: string, initialPath: string): string |
  return normalized;
 }

+/**
+ * Find all _index.db files recursively in a directory
+ * @param dir Directory to search
+ * @returns Array of absolute paths to _index.db files
+ */
+function findAllIndexDbs(dir: string): string[] {
+  const dbs: string[] = [];
+
+  function traverse(currentDir: string): void {
+    const dbPath = join(currentDir, '_index.db');
+    if (existsSync(dbPath)) {
+      dbs.push(dbPath);
+    }
+
+    try {
+      const entries = readdirSync(currentDir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          traverse(join(currentDir, entry.name));
+        }
+      }
+    } catch {
+      // Silently skip directories we can't read
+    }
+  }
+
+  traverse(dir);
+  return dbs;
+}
+
 /**
 * Map codex-lens symbol kinds to graph node types
 */
@@ -138,93 +166,117 @@ function mapRelationType(relType: string): string {
 }

 /**
- * Query symbols from codex-lens database
+ * Query symbols from all codex-lens databases (hierarchical structure)
 */
 async function querySymbols(projectPath: string): Promise<GraphNode[]> {
  const mapper = new PathMapper();
-  const dbPath = mapper.sourceToIndexDb(projectPath);
+  const rootDbPath = mapper.sourceToIndexDb(projectPath);
+  const indexRoot = rootDbPath.replace(/[\\/]_index\.db$/, '');

-  if (!existsSync(dbPath)) {
+  if (!existsSync(indexRoot)) {
    return [];
  }

-  try {
-    const db = Database(dbPath, { readonly: true });
+  // Find all _index.db files recursively
+  const dbPaths = findAllIndexDbs(indexRoot);

-    const rows = db.prepare(`
-      SELECT
-        s.id,
-        s.name,
-        s.kind,
-        s.start_line,
-        s.token_count,
-        s.symbol_type,
-        f.path as file
-      FROM symbols s
-      JOIN files f ON s.file_id = f.id
-      ORDER BY f.path, s.start_line
-    `).all();
-
-    db.close();
-
-    return rows.map((row: any) => ({
-      id: `${row.file}:${row.name}:${row.start_line}`,
-      name: row.name,
-      type: mapSymbolKind(row.kind),
-      file: row.file,
-      line: row.start_line,
-      docstring: row.symbol_type || undefined,
-      tokenCount: row.token_count || undefined,
-    }));
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    console.error(`[Graph] Failed to query symbols: ${message}`);
+  if (dbPaths.length === 0) {
    return [];
  }
+
+  const allNodes: GraphNode[] = [];
+
+  for (const dbPath of dbPaths) {
+    try {
+      const db = Database(dbPath, { readonly: true });
+
+      const rows = db.prepare(`
+        SELECT
+          s.id,
+          s.name,
+          s.kind,
+          s.start_line,
+          f.full_path as file
+        FROM symbols s
+        JOIN files f ON s.file_id = f.id
+        ORDER BY f.full_path, s.start_line
+      `).all();
+
+      db.close();
+
+      allNodes.push(...rows.map((row: any) => ({
+        id: `${row.file}:${row.name}:${row.start_line}`,
+        name: row.name,
+        type: mapSymbolKind(row.kind),
+        file: row.file,
+        line: row.start_line,
+      })));
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(`[Graph] Failed to query symbols from ${dbPath}: ${message}`);
+      // Continue with other databases even if one fails
+    }
+  }
+
+  return allNodes;
 }

 /**
- * Query code relationships from codex-lens database
+ * Query code relationships from all codex-lens databases (hierarchical structure)
 */
 async function queryRelationships(projectPath: string): Promise<GraphEdge[]> {
  const mapper = new PathMapper();
-  const dbPath = mapper.sourceToIndexDb(projectPath);
+  const rootDbPath = mapper.sourceToIndexDb(projectPath);
+  const indexRoot = rootDbPath.replace(/[\\/]_index\.db$/, '');

-  if (!existsSync(dbPath)) {
+  if (!existsSync(indexRoot)) {
    return [];
  }

-  try {
-    const db = Database(dbPath, { readonly: true });
+  // Find all _index.db files recursively
+  const dbPaths = findAllIndexDbs(indexRoot);

-    const rows = db.prepare(`
-      SELECT
-        s.name as source_name,
-        s.start_line as source_line,
-        f.path as source_file,
-        r.target_qualified_name,
-        r.relationship_type,
-        r.target_file
-      FROM code_relationships r
-      JOIN symbols s ON r.source_symbol_id = s.id
-      JOIN files f ON s.file_id = f.id
-      ORDER BY f.path, s.start_line
-    `).all();
-
-    db.close();
-
-    return rows.map((row: any) => ({
-      source: `${row.source_file}:${row.source_name}:${row.source_line}`,
-      target: row.target_qualified_name,
-      type: mapRelationType(row.relationship_type),
-      sourceLine: row.source_line,
-      sourceFile: row.source_file,
-    }));
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    console.error(`[Graph] Failed to query relationships: ${message}`);
+  if (dbPaths.length === 0) {
    return [];
  }
+
+  const allEdges: GraphEdge[] = [];
+
+  for (const dbPath of dbPaths) {
+    try {
+      const db = Database(dbPath, { readonly: true });
+
+      const rows = db.prepare(`
+        SELECT
+          s.name as source_name,
+          s.start_line as source_line,
+          f.full_path as source_file,
+          r.target_qualified_name,
+          r.relationship_type,
+          r.target_file
+        FROM code_relationships r
+        JOIN symbols s ON r.source_symbol_id = s.id
+        JOIN files f ON s.file_id = f.id
+        ORDER BY f.full_path, s.start_line
+      `).all();
+
+      db.close();
+
+      allEdges.push(...rows.map((row: any) => ({
+        source: `${row.source_file}:${row.source_name}:${row.source_line}`,
+        target: row.target_qualified_name,
+        type: mapRelationType(row.relationship_type),
+        sourceLine: row.source_line,
+        sourceFile: row.source_file,
+      })));
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(`[Graph] Failed to query relationships from ${dbPath}: ${message}`);
+      // Continue with other databases even if one fails
+    }
+  }
+
+  return allEdges;
 }

 /**
@@ -292,7 +344,7 @@ async function analyzeImpact(projectPath: string, symbolId: string): Promise<Imp
    const rows = db.prepare(`
      SELECT DISTINCT
        s.name as dependent_name,
-        f.path as dependent_file,
+        f.full_path as dependent_file,
        s.start_line as dependent_line
      FROM code_relationships r
      JOIN symbols s ON r.source_symbol_id = s.id
@@ -330,6 +382,8 @@ export async function handleGraphRoutes(ctx: RouteContext): Promise<boolean> {
  if (pathname === '/api/graph/nodes') {
    const rawPath = url.searchParams.get('path') || initialPath;
    const projectPath = validateProjectPath(rawPath, initialPath);
+    const limitStr = url.searchParams.get('limit') || '1000';
+    const limit = Math.min(parseInt(limitStr, 10) || 1000, 5000); // Max 5000 nodes

    if (!projectPath) {
      res.writeHead(400, { 'Content-Type': 'application/json' });
@@ -338,9 +392,15 @@ export async function handleGraphRoutes(ctx: RouteContext): Promise<boolean> {
    }

    try {
-      const nodes = await querySymbols(projectPath);
+      const allNodes = await querySymbols(projectPath);
+      const nodes = allNodes.slice(0, limit);
      res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ nodes }));
+      res.end(JSON.stringify({
+        nodes,
+        total: allNodes.length,
+        limit,
+        hasMore: allNodes.length > limit
+      }));
    } catch (err) {
      console.error(`[Graph] Error fetching nodes:`, err);
      res.writeHead(500, { 'Content-Type': 'application/json' });
@@ -353,6 +413,8 @@ export async function handleGraphRoutes(ctx: RouteContext): Promise<boolean> {
  if (pathname === '/api/graph/edges') {
    const rawPath = url.searchParams.get('path') || initialPath;
    const projectPath = validateProjectPath(rawPath, initialPath);
+    const limitStr = url.searchParams.get('limit') || '2000';
+    const limit = Math.min(parseInt(limitStr, 10) || 2000, 10000); // Max 10000 edges

    if (!projectPath) {
      res.writeHead(400, { 'Content-Type': 'application/json' });
@@ -361,9 +423,15 @@ export async function handleGraphRoutes(ctx: RouteContext): Promise<boolean> {
    }

    try {
-      const edges = await queryRelationships(projectPath);
+      const allEdges = await queryRelationships(projectPath);
+      const edges = allEdges.slice(0, limit);
      res.writeHead(200, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ edges }));
+      res.end(JSON.stringify({
+        edges,
+        total: allEdges.length,
+        limit,
+        hasMore: allEdges.length > limit
+      }));
    } catch (err) {
      console.error(`[Graph] Error fetching edges:`, err);
      res.writeHead(500, { 'Content-Type': 'application/json' });
--- a/ccw/src/core/routes/memory-routes.ts
+++ b/ccw/src/core/routes/memory-routes.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import http from 'http';
 import { URL } from 'url';
 import { readFileSync, writeFileSync, existsSync, mkdirSync, statSync, unlinkSync } from 'fs';
@@ -222,7 +221,7 @@ export async function handleMemoryRoutes(ctx: RouteContext): Promise<boolean> {
    const projectPath = url.searchParams.get('path') || initialPath;
    const limit = parseInt(url.searchParams.get('limit') || '50', 10);
    const search = url.searchParams.get('search') || null;
-    const recursive = url.searchParams.get('recursive') === 'true';
+    const recursive = url.searchParams.get('recursive') !== 'false';

    try {
      let prompts;
@@ -230,7 +229,7 @@ export async function handleMemoryRoutes(ctx: RouteContext): Promise<boolean> {
      // Recursive mode: aggregate prompts from parent and child projects
      if (recursive && !search) {
        const { getAggregatedPrompts } = await import('../memory-store.js');
-        prompts = getAggregatedPrompts(projectPath, limit);
+        prompts = await getAggregatedPrompts(projectPath, limit);
      } else {
        // Non-recursive mode or search mode: query only current project
        const memoryStore = getMemoryStore(projectPath);
@@ -390,11 +389,11 @@ Return ONLY valid JSON in this exact format (no markdown, no code blocks, just p
          mode: 'analysis',
          timeout: 120000,
          cd: projectPath,
-          category: 'insights'
+          category: 'insight'
        });

        // Try to parse JSON from response
-        let insights = { patterns: [], suggestions: [] };
+        let insights: { patterns: any[]; suggestions: any[] } = { patterns: [], suggestions: [] };
        if (result.stdout) {
          let outputText = result.stdout;

@@ -515,13 +514,13 @@ Return ONLY valid JSON in this exact format (no markdown, no code blocks, just p
    const projectPath = url.searchParams.get('path') || initialPath;
    const filter = url.searchParams.get('filter') || 'all'; // today, week, all
    const limit = parseInt(url.searchParams.get('limit') || '10', 10);
-    const recursive = url.searchParams.get('recursive') === 'true';
+    const recursive = url.searchParams.get('recursive') !== 'false';

    try {
      // If requesting aggregated stats, use the aggregated function
      if (url.searchParams.has('aggregated') || recursive) {
        const { getAggregatedStats } = await import('../memory-store.js');
-        const aggregatedStats = getAggregatedStats(projectPath);
+        const aggregatedStats = await getAggregatedStats(projectPath);

        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({
--- a/ccw/src/core/routes/status-routes.ts
+++ b/ccw/src/core/routes/status-routes.ts
@@ -0,0 +1,57 @@
+// @ts-nocheck
+/**
+ * Status Routes Module
+ * Aggregated status endpoint for faster dashboard loading
+ */
+import type { IncomingMessage, ServerResponse } from 'http';
+import { getCliToolsStatus } from '../../tools/cli-executor.js';
+import { checkVenvStatus, checkSemanticStatus } from '../../tools/codex-lens.js';
+
+export interface RouteContext {
+  pathname: string;
+  url: URL;
+  req: IncomingMessage;
+  res: ServerResponse;
+  initialPath: string;
+  handlePostRequest: (req: IncomingMessage, res: ServerResponse, handler: (body: unknown) => Promise<any>) => void;
+  broadcastToClients: (data: unknown) => void;
+}
+
+/**
+ * Handle status routes
+ * @returns true if route was handled, false otherwise
+ */
+export async function handleStatusRoutes(ctx: RouteContext): Promise<boolean> {
+  const { pathname, res } = ctx;
+
+  // API: Aggregated Status (all statuses in one call)
+  if (pathname === '/api/status/all') {
+    try {
+      // Execute all status checks in parallel
+      const [cliStatus, codexLensStatus, semanticStatus] = await Promise.all([
+        getCliToolsStatus(),
+        checkVenvStatus(),
+        // Always check semantic status (will return available: false if CodexLens not ready)
+        checkSemanticStatus().catch(() => ({ available: false, backend: null }))
+      ]);
+
+      const response = {
+        cli: cliStatus,
+        codexLens: codexLensStatus,
+        semantic: semanticStatus,
+        timestamp: new Date().toISOString()
+      };
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify(response));
+      return true;
+    } catch (error) {
+      console.error('[Status Routes] Error fetching aggregated status:', error);
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  return false;
+}
--- a/ccw/src/core/server.ts
+++ b/ccw/src/core/server.ts
@@ -6,6 +6,7 @@ import { join } from 'path';
 import { resolvePath, getRecentPaths, normalizePathForDisplay } from '../utils/path-resolver.js';

 // Import route handlers
+import { handleStatusRoutes } from './routes/status-routes.js';
 import { handleCliRoutes } from './routes/cli-routes.js';
 import { handleMemoryRoutes } from './routes/memory-routes.js';
 import { handleMcpRoutes } from './routes/mcp-routes.js';
@@ -243,6 +244,11 @@ export async function startServer(options: ServerOptions = {}): Promise<http.Ser
      // Try each route handler in order
      // Order matters: more specific routes should come before general ones

+      // Status routes (/api/status/*) - Aggregated endpoint for faster loading
+      if (pathname.startsWith('/api/status/')) {
+        if (await handleStatusRoutes(routeContext)) return;
+      }
+
      // CLI routes (/api/cli/*)
      if (pathname.startsWith('/api/cli/')) {
        if (await handleCliRoutes(routeContext)) return;
--- a/ccw/src/templates/dashboard-css/15-mcp-manager.css
+++ b/ccw/src/templates/dashboard-css/15-mcp-manager.css
@@ -0,0 +1,375 @@
+/* ==========================================
+   MCP MANAGER - ORANGE THEME ENHANCEMENTS
+   ========================================== */
+
+/* MCP CLI Mode Toggle - Orange for Codex */
+.mcp-cli-toggle .cli-mode-btn {
+  position: relative;
+  overflow: hidden;
+}
+
+.mcp-cli-toggle .cli-mode-btn::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+  transform: translateX(-100%);
+  transition: transform 0.6s;
+}
+
+.mcp-cli-toggle .cli-mode-btn:hover::before {
+  transform: translateX(100%);
+}
+
+/* CCW Tools Card - Enhanced Orange Gradient */
+.ccw-tools-card {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.ccw-tools-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(249, 115, 22, 0.1) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.ccw-tools-card:hover::before {
+  opacity: 1;
+}
+
+.ccw-tools-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
+}
+
+/* Orange-themed buttons and badges */
+.bg-orange-500 {
+  background-color: #f97316;
+}
+
+.text-orange-500 {
+  color: #f97316;
+}
+
+.text-orange-600 {
+  color: #ea580c;
+}
+
+.text-orange-700 {
+  color: #c2410c;
+}
+
+.text-orange-800 {
+  color: #9a3412;
+}
+
+.bg-orange-50 {
+  background-color: #fff7ed;
+}
+
+.bg-orange-100 {
+  background-color: #ffedd5;
+}
+
+.border-orange-200 {
+  border-color: #fed7aa;
+}
+
+.border-orange-500\/20 {
+  border-color: rgba(249, 115, 22, 0.2);
+}
+
+.border-orange-500\/30 {
+  border-color: rgba(249, 115, 22, 0.3);
+}
+
+.border-orange-800 {
+  border-color: #9a3412;
+}
+
+/* Dark mode orange colors */
+.dark .bg-orange-50 {
+  background-color: rgba(249, 115, 22, 0.05);
+}
+
+.dark .bg-orange-100 {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+.dark .bg-orange-900\/30 {
+  background-color: rgba(124, 45, 18, 0.3);
+}
+
+.dark .text-orange-200 {
+  color: #fed7aa;
+}
+
+.dark .text-orange-300 {
+  color: #fdba74;
+}
+
+.dark .text-orange-400 {
+  color: #fb923c;
+}
+
+.dark .border-orange-800 {
+  border-color: #9a3412;
+}
+
+.dark .border-orange-950\/30 {
+  background-color: rgba(67, 20, 7, 0.3);
+}
+
+/* Codex MCP Server Cards - Orange Borders */
+.mcp-server-card[data-cli-type="codex"] {
+  border-left: 3px solid #f97316;
+  transition: all 0.3s ease;
+}
+
+.mcp-server-card[data-cli-type="codex"]:hover {
+  border-left-width: 4px;
+  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15);
+}
+
+/* Toggle switches - Orange for Codex */
+.mcp-toggle input:checked + div.peer-checked\:bg-orange-500 {
+  background: #f97316;
+}
+
+/* Installation buttons - Enhanced Orange */
+.bg-orange-500:hover {
+  background-color: #ea580c;
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
+}
+
+/* Info panels - Orange accent */
+.bg-orange-50.dark\:bg-orange-950\/30 {
+  border-left: 3px solid #f97316;
+}
+
+/* Codex section headers */
+.text-orange-500 svg {
+  filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3));
+}
+
+/* Animated pulse for available/install states */
+.border-orange-500\/30 {
+  animation: orangePulse 2s ease-in-out infinite;
+}
+
+@keyframes orangePulse {
+  0%, 100% {
+    border-color: rgba(249, 115, 22, 0.3);
+    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
+  }
+  50% {
+    border-color: rgba(249, 115, 22, 0.6);
+    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
+  }
+}
+
+/* Server badges with orange accents */
+.text-xs.px-2.py-0\.5.bg-orange-100 {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Codex server list enhancements */
+.mcp-section h3.text-orange-500 {
+  background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 700;
+}
+
+/* Install button hover effects */
+.bg-orange-500.rounded-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+.bg-orange-500.rounded-lg::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.3s, height 0.3s;
+}
+
+.bg-orange-500.rounded-lg:active::after {
+  width: 200px;
+  height: 200px;
+}
+
+/* MCP Server Grid - Enhanced spacing for orange theme */
+.mcp-server-grid {
+  gap: 1.25rem;
+}
+
+/* Available servers - Dashed border with orange hints */
+.mcp-server-available {
+  border-style: dashed;
+  border-width: 2px;
+  border-color: hsl(var(--border));
+  transition: all 0.3s ease;
+}
+
+.mcp-server-available:hover {
+  border-style: solid;
+  border-color: #f97316;
+  transform: translateY(-2px);
+}
+
+/* Status indicators with orange */
+.inline-flex.items-center.gap-1.bg-orange-500\/20 {
+  animation: availablePulse 2s ease-in-out infinite;
+}
+
+@keyframes availablePulse {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Section dividers with orange accents */
+.mcp-section {
+  border-bottom: 1px solid hsl(var(--border));
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+  position: relative;
+}
+
+.mcp-section::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, #f97316 0%, transparent 100%);
+}
+
+/* Empty state icons with orange */
+.mcp-empty-state i {
+  color: #f97316;
+  opacity: 0.3;
+}
+
+/* Enhanced focus states for orange buttons */
+.bg-orange-500:focus-visible {
+  outline: 2px solid #f97316;
+  outline-offset: 2px;
+}
+
+/* Tooltip styles for orange theme */
+[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: #1f2937;
+  color: #fff;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* Orange-themed success badges */
+.bg-success-light .inline-flex.items-center.gap-1 {
+  background: linear-gradient(135deg, hsl(var(--success-light)) 0%, rgba(249, 115, 22, 0.1) 100%);
+}
+
+/* Config file status badges */
+.inline-flex.items-center.gap-1\.5.bg-success\/10 {
+  border-left: 2px solid hsl(var(--success));
+}
+
+.inline-flex.items-center.gap-1\.5.bg-muted {
+  border-left: 2px solid #f97316;
+}
+
+/* Responsive adjustments for orange theme */
+@media (max-width: 768px) {
+  .ccw-tools-card {
+    padding: 1rem;
+  }
+
+  .mcp-server-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+/* Loading states with orange */
+@keyframes orangeGlow {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
+  }
+}
+
+.loading-orange {
+  animation: orangeGlow 1.5s ease-in-out infinite;
+}
+
+/* Button group for install options */
+.flex.gap-2 button.bg-primary,
+.flex.gap-2 button.bg-success {
+  transition: all 0.2s ease;
+}
+
+.flex.gap-2 button.bg-primary:hover,
+.flex.gap-2 button.bg-success:hover {
+  transform: scale(1.05);
+}
+
+/* Enhanced card shadows for depth */
+.mcp-server-card {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mcp-server-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Orange accent for project server headers */
+.mcp-section .flex.items-center.gap-3 button {
+  position: relative;
+  overflow: hidden;
+}
+
+.mcp-section .flex.items-center.gap-3 button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transform: translateX(-100%);
+  transition: transform 0.5s;
+}
+
+.mcp-section .flex.items-center.gap-3 button:hover::before {
+  transform: translateX(100%);
+}
--- a/ccw/src/templates/dashboard-js/components/cli-status.js
+++ b/ccw/src/templates/dashboard-js/components/cli-status.js
@@ -15,6 +15,9 @@ let smartContextMaxFiles = parseInt(localStorage.getItem('ccw-smart-context-max-
 // Native Resume settings
 let nativeResumeEnabled = localStorage.getItem('ccw-native-resume') !== 'false'; // default true

+// Recursive Query settings (for hierarchical storage aggregation)
+let recursiveQueryEnabled = localStorage.getItem('ccw-recursive-query') !== 'false'; // default true
+
 // LLM Enhancement settings for Semantic Search
 let llmEnhancementSettings = {
  enabled: localStorage.getItem('ccw-llm-enhancement-enabled') === 'true',
@@ -26,12 +29,51 @@ let llmEnhancementSettings = {

 // ========== Initialization ==========
 function initCliStatus() {
-  // Load CLI status on init
-  loadCliToolStatus();
-  loadCodexLensStatus();
+  // Load all statuses in one call using aggregated endpoint
+  loadAllStatuses();
 }

 // ========== Data Loading ==========
+/**
+ * Load all statuses using aggregated endpoint (single API call)
+ */
+async function loadAllStatuses() {
+  try {
+    const response = await fetch('/api/status/all');
+    if (!response.ok) throw new Error('Failed to load status');
+    const data = await response.json();
+
+    // Update all status data
+    cliToolStatus = data.cli || { gemini: {}, qwen: {}, codex: {}, claude: {} };
+    codexLensStatus = data.codexLens || { ready: false };
+    semanticStatus = data.semantic || { available: false };
+
+    // Update badges
+    updateCliBadge();
+    updateCodexLensBadge();
+
+    return data;
+  } catch (err) {
+    console.error('Failed to load aggregated status:', err);
+    // Fallback to individual calls if aggregated endpoint fails
+    return await loadAllStatusesFallback();
+  }
+}
+
+/**
+ * Fallback: Load statuses individually if aggregated endpoint fails
+ */
+async function loadAllStatusesFallback() {
+  console.warn('[CLI Status] Using fallback individual API calls');
+  await Promise.all([
+    loadCliToolStatus(),
+    loadCodexLensStatus()
+  ]);
+}
+
+/**
+ * Legacy: Load CLI tool status individually
+ */
 async function loadCliToolStatus() {
  try {
    const response = await fetch('/api/cli/status');
@@ -49,6 +91,9 @@ async function loadCliToolStatus() {
  }
 }

+/**
+ * Legacy: Load CodexLens status individually
+ */
 async function loadCodexLensStatus() {
  try {
    const response = await fetch('/api/codexlens/status');
@@ -71,6 +116,9 @@ async function loadCodexLensStatus() {
  }
 }

+/**
+ * Legacy: Load semantic status individually
+ */
 async function loadSemanticStatus() {
  try {
    const response = await fetch('/api/codexlens/semantic/status');
@@ -223,7 +271,7 @@ function renderCliStatus() {
          <div class="flex items-center justify-between w-full mt-1">
            <div class="flex items-center gap-1 text-xs text-muted-foreground">
              <i data-lucide="hard-drive" class="w-3 h-3"></i>
-              <span>~500MB</span>
+              <span>~130MB</span>
            </div>
            <button class="btn-sm btn-outline flex items-center gap-1" onclick="event.stopPropagation(); openSemanticSettingsModal()">
              <i data-lucide="settings" class="w-3 h-3"></i>
@@ -377,8 +425,14 @@ function setNativeResumeEnabled(enabled) {
  showRefreshToast(`Native Resume ${enabled ? 'enabled' : 'disabled'}`, 'success');
 }

+function setRecursiveQueryEnabled(enabled) {
+  recursiveQueryEnabled = enabled;
+  localStorage.setItem('ccw-recursive-query', enabled.toString());
+  showRefreshToast(`Recursive Query ${enabled ? 'enabled' : 'disabled'}`, 'success');
+}
+
 async function refreshAllCliStatus() {
-  await Promise.all([loadCliToolStatus(), loadCodexLensStatus()]);
+  await loadAllStatuses();
  renderCliStatus();
 }

@@ -779,6 +833,9 @@ async function initCodexLensIndex() {
      } else {
        showRefreshToast(`Index created: ${files} files, ${dirs} directories`, 'success');
        console.log('[CodexLens] Index created successfully');
+
+        // Reload CodexLens status and refresh the view
+        loadCodexLensStatus().then(() => renderCliStatus());
      }
    } else {
      showRefreshToast(`Init failed: ${result.error}`, 'error');
@@ -820,19 +877,15 @@ function openSemanticInstallWizard() {
                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
                <span><strong>bge-small-en-v1.5</strong> - Embedding model (~130MB)</span>
              </li>
-              <li class="flex items-start gap-2">
-                <i data-lucide="check" class="w-4 h-4 text-success mt-0.5"></i>
-                <span><strong>PyTorch</strong> - Deep learning backend (~300MB)</span>
-              </li>
            </ul>
          </div>

-          <div class="bg-warning/10 border border-warning/20 rounded-lg p-3">
+          <div class="bg-primary/10 border border-primary/20 rounded-lg p-3">
            <div class="flex items-start gap-2">
-              <i data-lucide="alert-triangle" class="w-4 h-4 text-warning mt-0.5"></i>
+              <i data-lucide="info" class="w-4 h-4 text-primary mt-0.5"></i>
              <div class="text-sm">
-                <p class="font-medium text-warning">Large Download</p>
-                <p class="text-muted-foreground">Total size: ~500MB. First-time model loading may take a few minutes.</p>
+                <p class="font-medium text-primary">Download Size</p>
+                <p class="text-muted-foreground">Total size: ~130MB. First-time model loading may take a few minutes.</p>
              </div>
            </div>
          </div>
@@ -887,11 +940,10 @@ async function startSemanticInstall() {

  // Simulate progress stages
  const stages = [
-    { progress: 10, text: 'Installing numpy...' },
-    { progress: 30, text: 'Installing sentence-transformers...' },
-    { progress: 50, text: 'Installing PyTorch dependencies...' },
-    { progress: 70, text: 'Downloading embedding model...' },
-    { progress: 90, text: 'Finalizing installation...' }
+    { progress: 20, text: 'Installing sentence-transformers...' },
+    { progress: 50, text: 'Downloading embedding model...' },
+    { progress: 80, text: 'Setting up model cache...' },
+    { progress: 95, text: 'Finalizing installation...' }
  ];

  let currentStage = 0;
--- a/ccw/src/templates/dashboard-js/components/hook-manager.js
+++ b/ccw/src/templates/dashboard-js/components/hook-manager.js
@@ -235,6 +235,35 @@ async function loadHookConfig() {
  }
 }

+async function loadAvailableSkills() {
+  try {
+    const response = await fetch('/api/skills?path=' + encodeURIComponent(projectPath));
+    if (!response.ok) throw new Error('Failed to load skills');
+    const data = await response.json();
+
+    // Combine project and user skills
+    const projectSkills = (data.projectSkills || []).map(s => ({
+      name: s.name,
+      path: s.path,
+      scope: 'project'
+    }));
+    const userSkills = (data.userSkills || []).map(s => ({
+      name: s.name,
+      path: s.path,
+      scope: 'user'
+    }));
+
+    // Store in window for access by wizard
+    window.availableSkills = [...projectSkills, ...userSkills];
+
+    return window.availableSkills;
+  } catch (err) {
+    console.error('Failed to load available skills:', err);
+    window.availableSkills = [];
+    return [];
+  }
+}
+
 /**
 * Convert internal hook format to Claude Code format
 * Internal: { command, args, matcher, timeout }
@@ -510,7 +539,7 @@ function getHookEventIconLucide(event) {
 let currentWizardTemplate = null;
 let wizardConfig = {};

-function openHookWizardModal(wizardId) {
+async function openHookWizardModal(wizardId) {
  const wizard = WIZARD_TEMPLATES[wizardId];
  if (!wizard) {
    showRefreshToast('Wizard template not found', 'error');
@@ -530,6 +559,11 @@ function openHookWizardModal(wizardId) {
    wizardConfig.selectedOptions = [];
  }

+  // Ensure available skills are loaded for SKILL context wizard
+  if (wizardId === 'skill-context' && typeof window.availableSkills === 'undefined') {
+    await loadAvailableSkills();
+  }
+
  const modal = document.getElementById('hookWizardModal');
  if (modal) {
    renderWizardModalContent();
@@ -792,9 +826,19 @@ function renderSkillContextConfig() {
  const availableSkills = window.availableSkills || [];

  if (selectedOption === 'auto') {
-    const skillBadges = availableSkills.map(function(s) {
-      return '<span class="px-1.5 py-0.5 bg-emerald-500/10 text-emerald-500 rounded text-xs">' + escapeHtml(s.name) + '</span>';
-    }).join(' ');
+    let skillBadges = '';
+    if (typeof window.availableSkills === 'undefined') {
+      // Still loading
+      skillBadges = '<span class="px-1.5 py-0.5 bg-muted text-muted-foreground rounded text-xs">' + t('common.loading') + '...</span>';
+    } else if (availableSkills.length === 0) {
+      // No skills found
+      skillBadges = '<span class="px-1.5 py-0.5 bg-warning/10 text-warning rounded text-xs">' + t('hook.wizard.noSkillsFound') + '</span>';
+    } else {
+      // Skills found
+      skillBadges = availableSkills.map(function(s) {
+        return '<span class="px-1.5 py-0.5 bg-emerald-500/10 text-emerald-500 rounded text-xs">' + escapeHtml(s.name) + '</span>';
+      }).join(' ');
+    }
    return '<div class="bg-muted/30 rounded-lg p-4 text-sm text-muted-foreground">' +
      '<div class="flex items-center gap-2 mb-2">' +
        '<i data-lucide="info" class="w-4 h-4"></i>' +
@@ -814,10 +858,15 @@ function renderSkillContextConfig() {
    '</div>';
  } else {
    configListHtml = skillConfigs.map(function(config, idx) {
-      var skillOptions = availableSkills.map(function(s) {
-        var selected = config.skill === s.id ? 'selected' : '';
-        return '<option value="' + s.id + '" ' + selected + '>' + escapeHtml(s.name) + '</option>';
-      }).join('');
+      var skillOptions = '';
+      if (availableSkills.length === 0) {
+        skillOptions = '<option value="" disabled>' + t('hook.wizard.noSkillsFound') + '</option>';
+      } else {
+        skillOptions = availableSkills.map(function(s) {
+          var selected = config.skill === s.name ? 'selected' : '';
+          return '<option value="' + escapeHtml(s.name) + '" ' + selected + '>' + escapeHtml(s.name) + '</option>';
+        }).join('');
+      }
      return '<div class="border border-border rounded-lg p-3 bg-card">' +
        '<div class="flex items-center justify-between mb-2">' +
          '<select onchange="updateSkillConfig(' + idx + ', \'skill\', this.value)" ' +
--- a/ccw/src/templates/dashboard-js/components/mcp-manager.js
+++ b/ccw/src/templates/dashboard-js/components/mcp-manager.js
@@ -1113,6 +1113,10 @@ async function installCcwToolsMcpToCodex() {

    await addCodexMcpServer('ccw-tools', ccwToolsConfig);

+    // Reload MCP configuration and refresh the view
+    await loadMcpConfig();
+    renderMcpManager();
+
    const resultLabel = isUpdate ? 'updated in' : 'installed to';
    showRefreshToast(`CCW Tools ${resultLabel} Codex (${selectedTools.length} tools)`, 'success');
  } catch (err) {
--- a/ccw/src/templates/dashboard-js/components/navigation.js
+++ b/ccw/src/templates/dashboard-js/components/navigation.js
@@ -293,8 +293,9 @@ function showRefreshToast(message, type) {
  toast.textContent = message;
  document.body.appendChild(toast);

+  // Increase display time to 3.5 seconds for better visibility
  setTimeout(() => {
    toast.classList.add('fade-out');
    setTimeout(() => toast.remove(), 300);
-  }, 2000);
+  }, 3500);
 }
--- a/ccw/src/templates/dashboard-js/i18n.js
+++ b/ccw/src/templates/dashboard-js/i18n.js
@@ -233,6 +233,10 @@ const i18n = {
    'codexlens.textSearch': 'Text Search',
    'codexlens.fileSearch': 'File Search',
    'codexlens.symbolSearch': 'Symbol Search',
+    'codexlens.exactMode': 'Exact',
+    'codexlens.fuzzyMode': 'Fuzzy (Trigram)',
+    'codexlens.hybridMode': 'Hybrid (RRF)',
+    'codexlens.vectorMode': 'Vector (Semantic)',
    'codexlens.searchPlaceholder': 'Enter search query (e.g., function name, file path, code snippet)',
    'codexlens.runSearch': 'Run Search',
    'codexlens.results': 'Results',
@@ -250,6 +254,27 @@ const i18n = {
    'codexlens.cleanFailed': 'Failed to clean indexes',
    'codexlens.loadingConfig': 'Loading configuration...',

+    // Model Management
+    'codexlens.semanticDeps': 'Semantic Dependencies',
+    'codexlens.checkingDeps': 'Checking dependencies...',
+    'codexlens.semanticInstalled': 'Semantic dependencies installed',
+    'codexlens.semanticNotInstalled': 'Semantic dependencies not installed',
+    'codexlens.installDeps': 'Install Dependencies',
+    'codexlens.installingDeps': 'Installing dependencies...',
+    'codexlens.depsInstalled': 'Dependencies installed successfully',
+    'codexlens.depsInstallFailed': 'Failed to install dependencies',
+    'codexlens.modelManagement': 'Model Management',
+    'codexlens.loadingModels': 'Loading models...',
+    'codexlens.downloadModel': 'Download',
+    'codexlens.deleteModel': 'Delete',
+    'codexlens.downloading': 'Downloading...',
+    'codexlens.deleting': 'Deleting...',
+    'codexlens.modelDownloaded': 'Model downloaded',
+    'codexlens.modelDownloadFailed': 'Model download failed',
+    'codexlens.modelDeleted': 'Model deleted',
+    'codexlens.modelDeleteFailed': 'Model deletion failed',
+    'codexlens.deleteModelConfirm': 'Are you sure you want to delete model',
+
    // Semantic Search Configuration
    'semantic.settings': 'Semantic Search Settings',
    'semantic.configDesc': 'Configure LLM enhancement for semantic indexing',
@@ -291,6 +316,8 @@ const i18n = {
    'cli.smartContextDesc': 'Auto-analyze prompt and add relevant file paths',
    'cli.nativeResume': 'Native Resume',
    'cli.nativeResumeDesc': 'Use native tool resume (gemini -r, qwen --resume, codex resume)',
+    'cli.recursiveQuery': 'Recursive Query',
+    'cli.recursiveQueryDesc': 'Aggregate CLI history and memory data from parent and child projects',
    'cli.maxContextFiles': 'Max Context Files',
    'cli.maxContextFilesDesc': 'Maximum files to include in smart context',
    
@@ -459,6 +486,48 @@ const i18n = {
    'mcp.claudeJsonDesc': 'Save in root .claude.json projects section (shared config)',
    'mcp.mcpJsonDesc': 'Save in project .mcp.json file (recommended for version control)',

+    // New MCP Manager UI
+    'mcp.title': 'MCP Server Management',
+    'mcp.subtitle': 'Manage MCP servers for Claude, Codex, and project-level configurations',
+    'mcp.createNew': 'Create New',
+    'mcp.createFirst': 'Create Your First Server',
+    'mcp.noServers': 'No MCP Servers Configured',
+    'mcp.noServersDesc': 'Get started by creating a new MCP server or installing from templates',
+    'mcp.totalServers': 'Total Servers',
+    'mcp.enabled': 'Enabled',
+    'mcp.viewServer': 'View Server',
+    'mcp.editServer': 'Edit Server',
+    'mcp.createServer': 'Create Server',
+    'mcp.updateServer': 'Update Server',
+    'mcp.close': 'Close',
+    'mcp.cancel': 'Cancel',
+    'mcp.update': 'Update',
+    'mcp.install': 'Install',
+    'mcp.save': 'Save',
+    'mcp.delete': 'Delete',
+    'mcp.optional': 'Optional',
+    'mcp.description': 'Description',
+    'mcp.category': 'Category',
+    'mcp.installTo': 'Install To',
+    'mcp.cwd': 'Working Directory',
+    'mcp.httpHeaders': 'HTTP Headers',
+    'mcp.error': 'Error',
+    'mcp.success': 'Success',
+    'mcp.nameRequired': 'Server name is required',
+    'mcp.commandRequired': 'Command is required',
+    'mcp.urlRequired': 'URL is required',
+    'mcp.invalidArgsJson': 'Invalid JSON format for arguments',
+    'mcp.invalidEnvJson': 'Invalid JSON format for environment variables',
+    'mcp.invalidHeadersJson': 'Invalid JSON format for HTTP headers',
+    'mcp.serverInstalled': 'Server installed successfully',
+    'mcp.serverEnabled': 'Server enabled successfully',
+    'mcp.serverDisabled': 'Server disabled successfully',
+    'mcp.serverDeleted': 'Server deleted successfully',
+    'mcp.backToManager': 'Back to Manager',
+    'mcp.noTemplates': 'No Templates Available',
+    'mcp.noTemplatesDesc': 'Create templates from existing servers or add new ones',
+    'mcp.templatesDesc': 'Browse and install pre-configured MCP server templates',
+
    // MCP Templates
    'mcp.templates': 'MCP Templates',
    'mcp.savedTemplates': 'saved templates',
@@ -500,6 +569,7 @@ const i18n = {
    'mcp.codex.removeConfirm': 'Remove Codex MCP server "{name}"?',
    'mcp.codex.copyToClaude': 'Copy to Claude',
    'mcp.codex.copyToCodex': 'Copy to Codex',
+    'mcp.codex.install': 'Install to Codex',
    'mcp.codex.copyFromClaude': 'Copy Claude Servers to Codex',
    'mcp.codex.alreadyAdded': 'Already in Codex',
    'mcp.codex.scopeCodex': 'Codex - Global (~/.codex/config.toml)',
@@ -510,6 +580,7 @@ const i18n = {
    'mcp.claude.copyFromCodex': 'Copy Codex Servers to Claude',
    'mcp.claude.alreadyAdded': 'Already in Claude',
    'mcp.claude.copyToClaude': 'Copy to Claude Global',
+    'mcp.claude.copyToCodex': 'Copy to Codex',

    // MCP Edit Modal
    'mcp.editModal.title': 'Edit MCP Server',
@@ -1292,6 +1363,10 @@ const i18n = {
    'codexlens.textSearch': '文本搜索',
    'codexlens.fileSearch': '文件搜索',
    'codexlens.symbolSearch': '符号搜索',
+    'codexlens.exactMode': '精确模式',
+    'codexlens.fuzzyMode': '模糊模式 (Trigram)',
+    'codexlens.hybridMode': '混合模式 (RRF)',
+    'codexlens.vectorMode': '向量模式 (语义搜索)',
    'codexlens.searchPlaceholder': '输入搜索查询（例如：函数名、文件路径、代码片段）',
    'codexlens.runSearch': '运行搜索',
    'codexlens.results': '结果',
@@ -1309,6 +1384,27 @@ const i18n = {
    'codexlens.cleanFailed': '清理索引失败',
    'codexlens.loadingConfig': '加载配置中...',

+    // 模型管理
+    'codexlens.semanticDeps': '语义搜索依赖',
+    'codexlens.checkingDeps': '检查依赖中...',
+    'codexlens.semanticInstalled': '语义搜索依赖已安装',
+    'codexlens.semanticNotInstalled': '语义搜索依赖未安装',
+    'codexlens.installDeps': '安装依赖',
+    'codexlens.installingDeps': '安装依赖中...',
+    'codexlens.depsInstalled': '依赖安装成功',
+    'codexlens.depsInstallFailed': '依赖安装失败',
+    'codexlens.modelManagement': '模型管理',
+    'codexlens.loadingModels': '加载模型中...',
+    'codexlens.downloadModel': '下载',
+    'codexlens.deleteModel': '删除',
+    'codexlens.downloading': '下载中...',
+    'codexlens.deleting': '删除中...',
+    'codexlens.modelDownloaded': '模型已下载',
+    'codexlens.modelDownloadFailed': '模型下载失败',
+    'codexlens.modelDeleted': '模型已删除',
+    'codexlens.modelDeleteFailed': '模型删除失败',
+    'codexlens.deleteModelConfirm': '确定要删除模型',
+
    // Semantic Search 配置
    'semantic.settings': '语义搜索设置',
    'semantic.configDesc': '配置语义索引的 LLM 增强功能',
@@ -1350,6 +1446,8 @@ const i18n = {
    'cli.smartContextDesc': '自动分析提示词并添加相关文件路径',
    'cli.nativeResume': '原生恢复',
    'cli.nativeResumeDesc': '使用工具原生恢复命令 (gemini -r, qwen --resume, codex resume)',
+    'cli.recursiveQuery': '递归查询',
+    'cli.recursiveQueryDesc': '聚合显示父项目和子项目的 CLI 历史与内存数据',
    'cli.maxContextFiles': '最大上下文文件数',
    'cli.maxContextFilesDesc': '智能上下文包含的最大文件数',
    
@@ -1515,6 +1613,48 @@ const i18n = {
    'mcp.claudeJsonDesc': '保存在根目录 .claude.json projects 字段下（共享配置）',
    'mcp.mcpJsonDesc': '保存在项目 .mcp.json 文件中（推荐用于版本控制）',

+    // New MCP Manager UI
+    'mcp.title': 'MCP 服务器管理',
+    'mcp.subtitle': '管理 Claude、Codex 和项目级别的 MCP 服务器配置',
+    'mcp.createNew': '创建新服务器',
+    'mcp.createFirst': '创建第一个服务器',
+    'mcp.noServers': '未配置 MCP 服务器',
+    'mcp.noServersDesc': '开始创建新的 MCP 服务器或从模板安装',
+    'mcp.totalServers': '总服务器数',
+    'mcp.enabled': '已启用',
+    'mcp.viewServer': '查看服务器',
+    'mcp.editServer': '编辑服务器',
+    'mcp.createServer': '创建服务器',
+    'mcp.updateServer': '更新服务器',
+    'mcp.close': '关闭',
+    'mcp.cancel': '取消',
+    'mcp.update': '更新',
+    'mcp.install': '安装',
+    'mcp.save': '保存',
+    'mcp.delete': '删除',
+    'mcp.optional': '可选',
+    'mcp.description': '描述',
+    'mcp.category': '分类',
+    'mcp.installTo': '安装到',
+    'mcp.cwd': '工作目录',
+    'mcp.httpHeaders': 'HTTP 头',
+    'mcp.error': '错误',
+    'mcp.success': '成功',
+    'mcp.nameRequired': '服务器名称为必填项',
+    'mcp.commandRequired': '命令为必填项',
+    'mcp.urlRequired': 'URL 为必填项',
+    'mcp.invalidArgsJson': '参数 JSON 格式无效',
+    'mcp.invalidEnvJson': '环境变量 JSON 格式无效',
+    'mcp.invalidHeadersJson': 'HTTP 头 JSON 格式无效',
+    'mcp.serverInstalled': '服务器安装成功',
+    'mcp.serverEnabled': '服务器启用成功',
+    'mcp.serverDisabled': '服务器禁用成功',
+    'mcp.serverDeleted': '服务器删除成功',
+    'mcp.backToManager': '返回管理器',
+    'mcp.noTemplates': '无可用模板',
+    'mcp.noTemplatesDesc': '从现有服务器创建模板或添加新模板',
+    'mcp.templatesDesc': '浏览并安装预配置的 MCP 服务器模板',
+
    // MCP CLI Mode
    'mcp.cliMode': 'CLI 模式',
    'mcp.claudeMode': 'Claude 模式',
@@ -1537,6 +1677,7 @@ const i18n = {
    'mcp.codex.removeConfirm': '移除 Codex MCP 服务器 "{name}"？',
    'mcp.codex.copyToClaude': '复制到 Claude',
    'mcp.codex.copyToCodex': '复制到 Codex',
+    'mcp.codex.install': '安装到 Codex',
    'mcp.codex.copyFromClaude': '从 Claude 复制服务器到 Codex',
    'mcp.codex.alreadyAdded': '已在 Codex 中',
    'mcp.codex.scopeCodex': 'Codex - 全局 (~/.codex/config.toml)',
@@ -1547,6 +1688,7 @@ const i18n = {
    'mcp.claude.copyFromCodex': '从 Codex 复制服务器到 Claude',
    'mcp.claude.alreadyAdded': '已在 Claude 中',
    'mcp.claude.copyToClaude': '复制到 Claude 全局',
+    'mcp.claude.copyToCodex': '复制到 Codex',

    // MCP Edit Modal
    'mcp.editModal.title': '编辑 MCP 服务器',
--- a/ccw/src/templates/dashboard-js/views/cli-manager.js
+++ b/ccw/src/templates/dashboard-js/views/cli-manager.js
@@ -567,6 +567,19 @@ function renderCliSettingsSection() {
        '</div>' +
        '<p class="cli-setting-desc">' + t('cli.nativeResumeDesc') + '</p>' +
      '</div>' +
+      '<div class="cli-setting-item">' +
+        '<label class="cli-setting-label">' +
+          '<i data-lucide="git-branch" class="w-3 h-3"></i>' +
+          t('cli.recursiveQuery') +
+        '</label>' +
+        '<div class="cli-setting-control">' +
+          '<label class="cli-toggle">' +
+            '<input type="checkbox"' + (recursiveQueryEnabled ? ' checked' : '') + ' onchange="setRecursiveQueryEnabled(this.checked)">' +
+            '<span class="cli-toggle-slider"></span>' +
+          '</label>' +
+        '</div>' +
+        '<p class="cli-setting-desc">' + t('cli.recursiveQueryDesc') + '</p>' +
+      '</div>' +
      '<div class="cli-setting-item' + (!smartContextEnabled ? ' disabled' : '') + '">' +
        '<label class="cli-setting-label">' +
          '<i data-lucide="files" class="w-3 h-3"></i>' +
@@ -1614,6 +1627,26 @@ function buildCodexLensConfigContent(config) {
      '</div>' +
    '</div>' +

+    // Semantic Dependencies Section
+    (isInstalled
+      ? '<div class="tool-config-section">' +
+          '<h4>' + t('codexlens.semanticDeps') + '</h4>' +
+          '<div id="semanticDepsStatus" class="space-y-2">' +
+            '<div class="text-sm text-muted-foreground">' + t('codexlens.checkingDeps') + '</div>' +
+          '</div>' +
+        '</div>'
+      : '') +
+
+    // Model Management Section
+    (isInstalled
+      ? '<div class="tool-config-section">' +
+          '<h4>' + t('codexlens.modelManagement') + '</h4>' +
+          '<div id="modelListContainer" class="space-y-2">' +
+            '<div class="text-sm text-muted-foreground">' + t('codexlens.loadingModels') + '</div>' +
+          '</div>' +
+        '</div>'
+      : '') +
+
    // Test Search Section
    (isInstalled
      ? '<div class="tool-config-section">' +
@@ -1625,6 +1658,12 @@ function buildCodexLensConfigContent(config) {
                '<option value="search_files">' + t('codexlens.fileSearch') + '</option>' +
                '<option value="symbol">' + t('codexlens.symbolSearch') + '</option>' +
              '</select>' +
+              '<select id="searchModeSelect" class="tool-config-select flex-1">' +
+                '<option value="exact">' + t('codexlens.exactMode') + '</option>' +
+                '<option value="fuzzy">' + t('codexlens.fuzzyMode') + '</option>' +
+                '<option value="hybrid">' + t('codexlens.hybridMode') + '</option>' +
+                '<option value="vector">' + t('codexlens.vectorMode') + '</option>' +
+              '</select>' +
            '</div>' +
            '<div>' +
              '<input type="text" id="searchQueryInput" class="tool-config-input w-full" ' +
@@ -1717,6 +1756,7 @@ function initCodexLensConfigEvents(currentConfig) {
  if (runSearchBtn) {
    runSearchBtn.onclick = async function() {
      var searchType = document.getElementById('searchTypeSelect').value;
+      var searchMode = document.getElementById('searchModeSelect').value;
      var query = document.getElementById('searchQueryInput').value.trim();
      var resultsDiv = document.getElementById('searchResults');
      var resultCount = document.getElementById('searchResultCount');
@@ -1734,6 +1774,10 @@ function initCodexLensConfigEvents(currentConfig) {
      try {
        var endpoint = '/api/codexlens/' + searchType;
        var params = new URLSearchParams({ query: query, limit: '20' });
+        // Add mode parameter for search and search_files (not for symbol search)
+        if (searchType === 'search' || searchType === 'search_files') {
+          params.append('mode', searchMode);
+        }

        var response = await fetch(endpoint + '?' + params.toString());
        var result = await response.json();
@@ -1766,6 +1810,211 @@ function initCodexLensConfigEvents(currentConfig) {
      }
    };
  }
+
+  // Load semantic dependencies status
+  loadSemanticDepsStatus();
+
+  // Load model list
+  loadModelList();
+}
+
+// Load semantic dependencies status
+async function loadSemanticDepsStatus() {
+  var container = document.getElementById('semanticDepsStatus');
+  if (!container) return;
+
+  try {
+    var response = await fetch('/api/codexlens/semantic/status');
+    var result = await response.json();
+
+    if (result.available) {
+      container.innerHTML =
+        '<div class="flex items-center gap-2 text-sm">' +
+          '<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>' +
+          '<span>' + t('codexlens.semanticInstalled') + '</span>' +
+          '<span class="text-muted-foreground">(' + (result.backend || 'fastembed') + ')</span>' +
+        '</div>';
+    } else {
+      container.innerHTML =
+        '<div class="space-y-2">' +
+          '<div class="flex items-center gap-2 text-sm text-muted-foreground">' +
+            '<i data-lucide="alert-circle" class="w-4 h-4"></i>' +
+            '<span>' + t('codexlens.semanticNotInstalled') + '</span>' +
+          '</div>' +
+          '<button class="btn-sm btn-outline" onclick="installSemanticDeps()">' +
+            '<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.installDeps') +
+          '</button>' +
+        '</div>';
+    }
+    if (window.lucide) lucide.createIcons();
+  } catch (err) {
+    container.innerHTML =
+      '<div class="text-sm text-error">' + t('common.error') + ': ' + err.message + '</div>';
+  }
+}
+
+// Install semantic dependencies
+async function installSemanticDeps() {
+  var container = document.getElementById('semanticDepsStatus');
+  if (!container) return;
+
+  container.innerHTML =
+    '<div class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.installingDeps') + '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/semantic/install', { method: 'POST' });
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.depsInstalled'), 'success');
+      await loadSemanticDepsStatus();
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.depsInstallFailed') + ': ' + result.error, 'error');
+      await loadSemanticDepsStatus();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    await loadSemanticDepsStatus();
+  }
+}
+
+// Load model list
+async function loadModelList() {
+  var container = document.getElementById('modelListContainer');
+  if (!container) return;
+
+  try {
+    var response = await fetch('/api/codexlens/models');
+    var result = await response.json();
+
+    if (!result.success || !result.result || !result.result.models) {
+      container.innerHTML =
+        '<div class="text-sm text-muted-foreground">' + t('codexlens.semanticNotInstalled') + '</div>';
+      return;
+    }
+
+    var models = result.result.models;
+    var html = '<div class="space-y-2">';
+
+    models.forEach(function(model) {
+      var statusIcon = model.installed
+        ? '<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>'
+        : '<i data-lucide="circle" class="w-4 h-4 text-muted"></i>';
+
+      var sizeText = model.installed
+        ? model.actual_size_mb.toFixed(1) + ' MB'
+        : '~' + model.estimated_size_mb + ' MB';
+
+      var actionBtn = model.installed
+        ? '<button class="btn-sm btn-outline btn-danger" onclick="deleteModel(\'' + model.profile + '\')">' +
+            '<i data-lucide="trash-2" class="w-3 h-3"></i> ' + t('codexlens.deleteModel') +
+          '</button>'
+        : '<button class="btn-sm btn-outline" onclick="downloadModel(\'' + model.profile + '\')">' +
+            '<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.downloadModel') +
+          '</button>';
+
+      html +=
+        '<div class="border rounded-lg p-3 space-y-2" id="model-' + model.profile + '">' +
+          '<div class="flex items-start justify-between">' +
+            '<div class="flex-1">' +
+              '<div class="flex items-center gap-2 mb-1">' +
+                statusIcon +
+                '<span class="font-medium">' + model.profile + '</span>' +
+                '<span class="text-xs text-muted-foreground">(' + model.dimensions + ' dims)</span>' +
+              '</div>' +
+              '<div class="text-xs text-muted-foreground mb-1">' + model.model_name + '</div>' +
+              '<div class="text-xs text-muted-foreground">' + model.use_case + '</div>' +
+            '</div>' +
+            '<div class="text-right">' +
+              '<div class="text-xs text-muted-foreground mb-2">' + sizeText + '</div>' +
+              actionBtn +
+            '</div>' +
+          '</div>' +
+        '</div>';
+    });
+
+    html += '</div>';
+    container.innerHTML = html;
+    if (window.lucide) lucide.createIcons();
+  } catch (err) {
+    container.innerHTML =
+      '<div class="text-sm text-error">' + t('common.error') + ': ' + err.message + '</div>';
+  }
+}
+
+// Download model
+async function downloadModel(profile) {
+  var modelCard = document.getElementById('model-' + profile);
+  if (!modelCard) return;
+
+  var originalHTML = modelCard.innerHTML;
+  modelCard.innerHTML =
+    '<div class="flex items-center justify-center p-3">' +
+      '<span class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.downloading') + '</span>' +
+    '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/models/download', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ profile: profile })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.modelDownloaded') + ': ' + profile, 'success');
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.modelDownloadFailed') + ': ' + result.error, 'error');
+      modelCard.innerHTML = originalHTML;
+      if (window.lucide) lucide.createIcons();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    modelCard.innerHTML = originalHTML;
+    if (window.lucide) lucide.createIcons();
+  }
+}
+
+// Delete model
+async function deleteModel(profile) {
+  if (!confirm(t('codexlens.deleteModelConfirm') + ' ' + profile + '?')) {
+    return;
+  }
+
+  var modelCard = document.getElementById('model-' + profile);
+  if (!modelCard) return;
+
+  var originalHTML = modelCard.innerHTML;
+  modelCard.innerHTML =
+    '<div class="flex items-center justify-center p-3">' +
+      '<span class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.deleting') + '</span>' +
+    '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/models/delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ profile: profile })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.modelDeleted') + ': ' + profile, 'success');
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.modelDeleteFailed') + ': ' + result.error, 'error');
+      modelCard.innerHTML = originalHTML;
+      if (window.lucide) lucide.createIcons();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    modelCard.innerHTML = originalHTML;
+    if (window.lucide) lucide.createIcons();
+  }
 }

 async function cleanCodexLensIndexes() {
--- a/ccw/src/templates/dashboard-js/views/codexlens-manager.js
+++ b/ccw/src/templates/dashboard-js/views/codexlens-manager.js
@@ -0,0 +1,596 @@
+// CodexLens Manager - Configuration, Model Management, and Semantic Dependencies
+// Extracted from cli-manager.js for better maintainability
+
+// ============================================================
+// CODEXLENS CONFIGURATION MODAL
+// ============================================================
+
+/**
+ * Show CodexLens configuration modal
+ */
+async function showCodexLensConfigModal() {
+  try {
+    showRefreshToast(t('codexlens.loadingConfig'), 'info');
+
+    // Fetch current config
+    const response = await fetch('/api/codexlens/config');
+    const config = await response.json();
+
+    const modalHtml = buildCodexLensConfigContent(config);
+
+    // Create and show modal
+    const modalContainer = document.createElement('div');
+    modalContainer.innerHTML = modalHtml;
+    document.body.appendChild(modalContainer);
+
+    // Initialize icons
+    if (window.lucide) lucide.createIcons();
+
+    // Initialize event handlers
+    initCodexLensConfigEvents(config);
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+  }
+}
+
+/**
+ * Build CodexLens configuration modal content
+ */
+function buildCodexLensConfigContent(config) {
+  const indexDir = config.index_dir || '~/.codexlens/indexes';
+  const indexCount = config.index_count || 0;
+  const isInstalled = window.cliToolsStatus?.codexlens?.installed || false;
+
+  return '<div class="modal-backdrop" id="codexlensConfigModal">' +
+    '<div class="modal-container">' +
+    '<div class="modal-header">' +
+      '<div class="flex items-center gap-3">' +
+        '<div class="modal-icon">' +
+          '<i data-lucide="database" class="w-5 h-5"></i>' +
+        '</div>' +
+        '<div>' +
+          '<h2 class="text-lg font-bold">' + t('codexlens.config') + '</h2>' +
+          '<p class="text-xs text-muted-foreground">' + t('codexlens.whereIndexesStored') + '</p>' +
+        '</div>' +
+      '</div>' +
+      '<button onclick="closeModal()" class="text-muted-foreground hover:text-foreground">' +
+        '<i data-lucide="x" class="w-5 h-5"></i>' +
+      '</button>' +
+    '</div>' +
+
+    '<div class="modal-body">' +
+      // Status Section
+      '<div class="tool-config-section">' +
+        '<h4>' + t('codexlens.status') + '</h4>' +
+        '<div class="flex items-center gap-4 text-sm">' +
+          '<div class="flex items-center gap-2">' +
+            '<span class="text-muted-foreground">' + t('codexlens.currentWorkspace') + ':</span>' +
+            '<span class="font-medium">' + (isInstalled ? t('codexlens.installed') : t('codexlens.notInstalled')) + '</span>' +
+          '</div>' +
+          '<div class="flex items-center gap-2">' +
+            '<span class="text-muted-foreground">' + t('codexlens.indexes') + ':</span>' +
+            '<span class="font-medium">' + indexCount + '</span>' +
+          '</div>' +
+        '</div>' +
+      '</div>' +
+
+      // Index Storage Path Section
+      '<div class="tool-config-section">' +
+        '<h4>' + t('codexlens.indexStoragePath') + '</h4>' +
+        '<div class="space-y-3">' +
+          '<div>' +
+            '<label class="block text-sm font-medium mb-1.5">' + t('codexlens.currentPath') + '</label>' +
+            '<div class="text-sm text-muted-foreground bg-muted/30 rounded-lg px-3 py-2 font-mono">' +
+              indexDir +
+            '</div>' +
+          '</div>' +
+          '<div>' +
+            '<label class="block text-sm font-medium mb-1.5">' + t('codexlens.newStoragePath') + '</label>' +
+            '<input type="text" id="indexDirInput" value="' + indexDir + '" ' +
+                   'placeholder="' + t('codexlens.pathPlaceholder') + '" ' +
+                   'class="tool-config-input w-full" />' +
+            '<p class="text-xs text-muted-foreground mt-1">' + t('codexlens.pathInfo') + '</p>' +
+          '</div>' +
+          '<div class="flex items-start gap-2 bg-warning/10 border border-warning/30 rounded-lg p-3">' +
+            '<i data-lucide="alert-triangle" class="w-4 h-4 text-warning mt-0.5"></i>' +
+            '<div class="text-sm">' +
+              '<p class="font-medium text-warning">' + t('codexlens.migrationRequired') + '</p>' +
+              '<p class="text-muted-foreground mt-1">' + t('codexlens.migrationWarning') + '</p>' +
+            '</div>' +
+          '</div>' +
+        '</div>' +
+      '</div>' +
+
+      // Actions Section
+      '<div class="tool-config-section">' +
+        '<h4>' + t('codexlens.actions') + '</h4>' +
+        '<div class="tool-config-actions">' +
+          (isInstalled
+            ? '<button class="btn-sm btn-outline" onclick="initCodexLensIndex()">' +
+                '<i data-lucide="database" class="w-3 h-3"></i> ' + t('codexlens.initializeIndex') +
+              '</button>' +
+              '<button class="btn-sm btn-outline" onclick="cleanCodexLensIndexes()">' +
+                '<i data-lucide="trash" class="w-3 h-3"></i> ' + t('codexlens.cleanAllIndexes') +
+              '</button>' +
+              '<button class="btn-sm btn-outline btn-danger" onclick="uninstallCodexLens()">' +
+                '<i data-lucide="trash-2" class="w-3 h-3"></i> ' + t('cli.uninstall') +
+              '</button>'
+            : '<button class="btn-sm btn-primary" onclick="installCodexLens()">' +
+                '<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.installCodexLens') +
+              '</button>') +
+        '</div>' +
+      '</div>' +
+
+      // Semantic Dependencies Section
+      (isInstalled
+        ? '<div class="tool-config-section">' +
+            '<h4>' + t('codexlens.semanticDeps') + '</h4>' +
+            '<div id="semanticDepsStatus" class="space-y-2">' +
+              '<div class="text-sm text-muted-foreground">' + t('codexlens.checkingDeps') + '</div>' +
+            '</div>' +
+          '</div>'
+        : '') +
+
+      // Model Management Section
+      (isInstalled
+        ? '<div class="tool-config-section">' +
+            '<h4>' + t('codexlens.modelManagement') + '</h4>' +
+            '<div id="modelListContainer" class="space-y-2">' +
+              '<div class="text-sm text-muted-foreground">' + t('codexlens.loadingModels') + '</div>' +
+            '</div>' +
+          '</div>'
+        : '') +
+
+      // Test Search Section
+      (isInstalled
+        ? '<div class="tool-config-section">' +
+            '<h4>' + t('codexlens.testSearch') + ' <span class="text-muted">(' + t('codexlens.testFunctionality') + ')</span></h4>' +
+            '<div class="space-y-3">' +
+              '<div class="flex gap-2">' +
+                '<select id="searchTypeSelect" class="tool-config-select flex-1">' +
+                  '<option value="search">' + t('codexlens.textSearch') + '</option>' +
+                  '<option value="search_files">' + t('codexlens.fileSearch') + '</option>' +
+                  '<option value="symbol">' + t('codexlens.symbolSearch') + '</option>' +
+                '</select>' +
+                '<select id="searchModeSelect" class="tool-config-select flex-1">' +
+                  '<option value="exact">' + t('codexlens.exactMode') + '</option>' +
+                  '<option value="fuzzy">' + t('codexlens.fuzzyMode') + '</option>' +
+                  '<option value="hybrid">' + t('codexlens.hybridMode') + '</option>' +
+                  '<option value="vector">' + t('codexlens.vectorMode') + '</option>' +
+                '</select>' +
+              '</div>' +
+              '<div>' +
+                '<input type="text" id="searchQueryInput" class="tool-config-input w-full" ' +
+                  'placeholder="' + t('codexlens.searchPlaceholder') + '" />' +
+              '</div>' +
+              '<div>' +
+                '<button class="btn-sm btn-primary w-full" id="runSearchBtn">' +
+                  '<i data-lucide="search" class="w-3 h-3"></i> ' + t('codexlens.runSearch') +
+                '</button>' +
+              '</div>' +
+              '<div id="searchResults" class="hidden">' +
+                '<div class="bg-muted/30 rounded-lg p-3 max-h-64 overflow-y-auto">' +
+                  '<div class="flex items-center justify-between mb-2">' +
+                    '<p class="text-sm font-medium">' + t('codexlens.results') + ':</p>' +
+                    '<span id="searchResultCount" class="text-xs text-muted-foreground"></span>' +
+                  '</div>' +
+                  '<pre id="searchResultContent" class="text-xs font-mono whitespace-pre-wrap break-all"></pre>' +
+                '</div>' +
+              '</div>' +
+            '</div>' +
+          '</div>'
+        : '') +
+    '</div>' +
+
+    // Footer
+    '<div class="tool-config-footer">' +
+      '<button class="btn btn-outline" onclick="closeModal()">' + t('common.cancel') + '</button>' +
+      '<button class="btn btn-primary" id="saveCodexLensConfigBtn">' +
+        '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig') +
+      '</button>' +
+    '</div>' +
+  '</div>';
+}
+
+/**
+ * Initialize CodexLens config modal event handlers
+ */
+function initCodexLensConfigEvents(currentConfig) {
+  // Save button
+  var saveBtn = document.getElementById('saveCodexLensConfigBtn');
+  if (saveBtn) {
+    saveBtn.onclick = async function() {
+      var indexDirInput = document.getElementById('indexDirInput');
+      var newIndexDir = indexDirInput ? indexDirInput.value.trim() : '';
+
+      if (!newIndexDir) {
+        showRefreshToast(t('codexlens.pathEmpty'), 'error');
+        return;
+      }
+
+      if (newIndexDir === currentConfig.index_dir) {
+        closeModal();
+        return;
+      }
+
+      saveBtn.disabled = true;
+      saveBtn.innerHTML = '<span class="animate-pulse">' + t('common.saving') + '</span>';
+
+      try {
+        var response = await fetch('/api/codexlens/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ index_dir: newIndexDir })
+        });
+
+        var result = await response.json();
+
+        if (result.success) {
+          showRefreshToast(t('codexlens.configSaved'), 'success');
+          closeModal();
+
+          // Refresh CodexLens status
+          if (typeof loadCodexLensStatus === 'function') {
+            await loadCodexLensStatus();
+            renderToolsSection();
+            if (window.lucide) lucide.createIcons();
+          }
+        } else {
+          showRefreshToast(t('common.saveFailed') + ': ' + result.error, 'error');
+          saveBtn.disabled = false;
+          saveBtn.innerHTML = '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig');
+          if (window.lucide) lucide.createIcons();
+        }
+      } catch (err) {
+        showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+        saveBtn.disabled = false;
+        saveBtn.innerHTML = '<i data-lucide="save" class="w-3.5 h-3.5"></i> ' + t('codexlens.saveConfig');
+        if (window.lucide) lucide.createIcons();
+      }
+    };
+  }
+
+  // Test Search Button
+  var runSearchBtn = document.getElementById('runSearchBtn');
+  if (runSearchBtn) {
+    runSearchBtn.onclick = async function() {
+      var searchType = document.getElementById('searchTypeSelect').value;
+      var searchMode = document.getElementById('searchModeSelect').value;
+      var query = document.getElementById('searchQueryInput').value.trim();
+      var resultsDiv = document.getElementById('searchResults');
+      var resultCount = document.getElementById('searchResultCount');
+      var resultContent = document.getElementById('searchResultContent');
+
+      if (!query) {
+        showRefreshToast(t('codexlens.enterQuery'), 'warning');
+        return;
+      }
+
+      runSearchBtn.disabled = true;
+      runSearchBtn.innerHTML = '<span class="animate-pulse">' + t('codexlens.searching') + '</span>';
+      resultsDiv.classList.add('hidden');
+
+      try {
+        var endpoint = '/api/codexlens/' + searchType;
+        var params = new URLSearchParams({ query: query, limit: '20' });
+        // Add mode parameter for search and search_files (not for symbol search)
+        if (searchType === 'search' || searchType === 'search_files') {
+          params.append('mode', searchMode);
+        }
+
+        var response = await fetch(endpoint + '?' + params.toString());
+        var result = await response.json();
+
+        console.log('[CodexLens Test] Search result:', result);
+
+        if (result.success) {
+          var results = result.results || result.files || [];
+          resultCount.textContent = results.length + ' ' + t('codexlens.resultsCount');
+          resultContent.textContent = JSON.stringify(results, null, 2);
+          resultsDiv.classList.remove('hidden');
+          showRefreshToast(t('codexlens.searchCompleted') + ': ' + results.length + ' ' + t('codexlens.resultsCount'), 'success');
+        } else {
+          resultContent.textContent = t('common.error') + ': ' + (result.error || t('common.unknownError'));
+          resultsDiv.classList.remove('hidden');
+          showRefreshToast(t('codexlens.searchFailed') + ': ' + result.error, 'error');
+        }
+
+        runSearchBtn.disabled = false;
+        runSearchBtn.innerHTML = '<i data-lucide="search" class="w-3 h-3"></i> ' + t('codexlens.runSearch');
+        if (window.lucide) lucide.createIcons();
+      } catch (err) {
+        console.error('[CodexLens Test] Error:', err);
+        resultContent.textContent = t('common.exception') + ': ' + err.message;
+        resultsDiv.classList.remove('hidden');
+        showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+        runSearchBtn.disabled = false;
+        runSearchBtn.innerHTML = '<i data-lucide="search" class="w-3 h-3"></i> ' + t('codexlens.runSearch');
+        if (window.lucide) lucide.createIcons();
+      }
+    };
+  }
+
+  // Load semantic dependencies status
+  loadSemanticDepsStatus();
+
+  // Load model list
+  loadModelList();
+}
+
+// ============================================================
+// SEMANTIC DEPENDENCIES MANAGEMENT
+// ============================================================
+
+/**
+ * Load semantic dependencies status
+ */
+async function loadSemanticDepsStatus() {
+  var container = document.getElementById('semanticDepsStatus');
+  if (!container) return;
+
+  try {
+    var response = await fetch('/api/codexlens/semantic/status');
+    var result = await response.json();
+
+    if (result.available) {
+      container.innerHTML =
+        '<div class="flex items-center gap-2 text-sm">' +
+          '<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>' +
+          '<span>' + t('codexlens.semanticInstalled') + '</span>' +
+          '<span class="text-muted-foreground">(' + (result.backend || 'fastembed') + ')</span>' +
+        '</div>';
+    } else {
+      container.innerHTML =
+        '<div class="space-y-2">' +
+          '<div class="flex items-center gap-2 text-sm text-muted-foreground">' +
+            '<i data-lucide="alert-circle" class="w-4 h-4"></i>' +
+            '<span>' + t('codexlens.semanticNotInstalled') + '</span>' +
+          '</div>' +
+          '<button class="btn-sm btn-outline" onclick="installSemanticDeps()">' +
+            '<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.installDeps') +
+          '</button>' +
+        '</div>';
+    }
+    if (window.lucide) lucide.createIcons();
+  } catch (err) {
+    container.innerHTML =
+      '<div class="text-sm text-error">' + t('common.error') + ': ' + err.message + '</div>';
+  }
+}
+
+/**
+ * Install semantic dependencies
+ */
+async function installSemanticDeps() {
+  var container = document.getElementById('semanticDepsStatus');
+  if (!container) return;
+
+  container.innerHTML =
+    '<div class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.installingDeps') + '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/semantic/install', { method: 'POST' });
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.depsInstalled'), 'success');
+      await loadSemanticDepsStatus();
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.depsInstallFailed') + ': ' + result.error, 'error');
+      await loadSemanticDepsStatus();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    await loadSemanticDepsStatus();
+  }
+}
+
+// ============================================================
+// MODEL MANAGEMENT
+// ============================================================
+
+/**
+ * Load model list
+ */
+async function loadModelList() {
+  var container = document.getElementById('modelListContainer');
+  if (!container) return;
+
+  try {
+    var response = await fetch('/api/codexlens/models');
+    var result = await response.json();
+
+    if (!result.success || !result.result || !result.result.models) {
+      container.innerHTML =
+        '<div class="text-sm text-muted-foreground">' + t('codexlens.semanticNotInstalled') + '</div>';
+      return;
+    }
+
+    var models = result.result.models;
+    var html = '<div class="space-y-2">';
+
+    models.forEach(function(model) {
+      var statusIcon = model.installed
+        ? '<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>'
+        : '<i data-lucide="circle" class="w-4 h-4 text-muted"></i>';
+
+      var sizeText = model.installed
+        ? model.actual_size_mb.toFixed(1) + ' MB'
+        : '~' + model.estimated_size_mb + ' MB';
+
+      var actionBtn = model.installed
+        ? '<button class="btn-sm btn-outline btn-danger" onclick="deleteModel(\'' + model.profile + '\')">' +
+            '<i data-lucide="trash-2" class="w-3 h-3"></i> ' + t('codexlens.deleteModel') +
+          '</button>'
+        : '<button class="btn-sm btn-outline" onclick="downloadModel(\'' + model.profile + '\')">' +
+            '<i data-lucide="download" class="w-3 h-3"></i> ' + t('codexlens.downloadModel') +
+          '</button>';
+
+      html +=
+        '<div class="border rounded-lg p-3 space-y-2" id="model-' + model.profile + '">' +
+          '<div class="flex items-start justify-between">' +
+            '<div class="flex-1">' +
+              '<div class="flex items-center gap-2 mb-1">' +
+                statusIcon +
+                '<span class="font-medium">' + model.profile + '</span>' +
+                '<span class="text-xs text-muted-foreground">(' + model.dimensions + ' dims)</span>' +
+              '</div>' +
+              '<div class="text-xs text-muted-foreground mb-1">' + model.model_name + '</div>' +
+              '<div class="text-xs text-muted-foreground">' + model.use_case + '</div>' +
+            '</div>' +
+            '<div class="text-right">' +
+              '<div class="text-xs text-muted-foreground mb-2">' + sizeText + '</div>' +
+              actionBtn +
+            '</div>' +
+          '</div>' +
+        '</div>';
+    });
+
+    html += '</div>';
+    container.innerHTML = html;
+    if (window.lucide) lucide.createIcons();
+  } catch (err) {
+    container.innerHTML =
+      '<div class="text-sm text-error">' + t('common.error') + ': ' + err.message + '</div>';
+  }
+}
+
+/**
+ * Download model
+ */
+async function downloadModel(profile) {
+  var modelCard = document.getElementById('model-' + profile);
+  if (!modelCard) return;
+
+  var originalHTML = modelCard.innerHTML;
+  modelCard.innerHTML =
+    '<div class="flex items-center justify-center p-3">' +
+      '<span class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.downloading') + '</span>' +
+    '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/models/download', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ profile: profile })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.modelDownloaded') + ': ' + profile, 'success');
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.modelDownloadFailed') + ': ' + result.error, 'error');
+      modelCard.innerHTML = originalHTML;
+      if (window.lucide) lucide.createIcons();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    modelCard.innerHTML = originalHTML;
+    if (window.lucide) lucide.createIcons();
+  }
+}
+
+/**
+ * Delete model
+ */
+async function deleteModel(profile) {
+  if (!confirm(t('codexlens.deleteModelConfirm') + ' ' + profile + '?')) {
+    return;
+  }
+
+  var modelCard = document.getElementById('model-' + profile);
+  if (!modelCard) return;
+
+  var originalHTML = modelCard.innerHTML;
+  modelCard.innerHTML =
+    '<div class="flex items-center justify-center p-3">' +
+      '<span class="text-sm text-muted-foreground animate-pulse">' + t('codexlens.deleting') + '</span>' +
+    '</div>';
+
+  try {
+    var response = await fetch('/api/codexlens/models/delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ profile: profile })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.modelDeleted') + ': ' + profile, 'success');
+      await loadModelList();
+    } else {
+      showRefreshToast(t('codexlens.modelDeleteFailed') + ': ' + result.error, 'error');
+      modelCard.innerHTML = originalHTML;
+      if (window.lucide) lucide.createIcons();
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+    modelCard.innerHTML = originalHTML;
+    if (window.lucide) lucide.createIcons();
+  }
+}
+
+// ============================================================
+// CODEXLENS ACTIONS
+// ============================================================
+
+/**
+ * Initialize CodexLens index
+ */
+function initCodexLensIndex() {
+  openCliInstallWizard('codexlens');
+}
+
+/**
+ * Install CodexLens
+ */
+function installCodexLens() {
+  openCliInstallWizard('codexlens');
+}
+
+/**
+ * Uninstall CodexLens
+ */
+function uninstallCodexLens() {
+  openCliUninstallWizard('codexlens');
+}
+
+/**
+ * Clean all CodexLens indexes
+ */
+async function cleanCodexLensIndexes() {
+  if (!confirm(t('codexlens.cleanConfirm'))) {
+    return;
+  }
+
+  try {
+    showRefreshToast(t('codexlens.cleaning'), 'info');
+
+    var response = await fetch('/api/codexlens/clean', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ all: true })
+    });
+
+    var result = await response.json();
+
+    if (result.success) {
+      showRefreshToast(t('codexlens.cleanSuccess'), 'success');
+
+      // Refresh status
+      if (typeof loadCodexLensStatus === 'function') {
+        await loadCodexLensStatus();
+        renderToolsSection();
+        if (window.lucide) lucide.createIcons();
+      }
+    } else {
+      showRefreshToast(t('codexlens.cleanFailed') + ': ' + result.error, 'error');
+    }
+  } catch (err) {
+    showRefreshToast(t('common.error') + ': ' + err.message, 'error');
+  }
+}
--- a/ccw/src/templates/dashboard-js/views/hook-manager.js
+++ b/ccw/src/templates/dashboard-js/views/hook-manager.js
@@ -11,8 +11,11 @@ async function renderHookManager() {
  if (statsGrid) statsGrid.style.display = 'none';
  if (searchInput) searchInput.parentElement.style.display = 'none';

-  // Always reload hook config to get latest data
-  await loadHookConfig();
+  // Always reload hook config and available skills to get latest data
+  await Promise.all([
+    loadHookConfig(),
+    loadAvailableSkills()
+  ]);

  const globalHooks = hookConfig.global?.hooks || {};
  const projectHooks = hookConfig.project?.hooks || {};
--- a/ccw/src/templates/dashboard-js/views/mcp-manager.js
+++ b/ccw/src/templates/dashboard-js/views/mcp-manager.js
@@ -139,6 +139,27 @@ async function renderMcpManager() {
  const codexConfigExists = codexMcpConfig?.exists || false;
  const codexConfigPath = codexMcpConfig?.configPath || '~/.codex/config.toml';

+  // Collect cross-CLI servers (servers from other CLI not yet in current CLI)
+  const crossCliServers = [];
+  if (currentCliMode === 'claude') {
+    // In Claude mode, show Codex servers that aren't in Claude
+    for (const [name, config] of Object.entries(codexMcpServers || {})) {
+      const existsInClaude = currentProjectServerNames.includes(name) || globalServerNames.includes(name);
+      if (!existsInClaude) {
+        crossCliServers.push({ name, config, fromCli: 'codex' });
+      }
+    }
+  } else {
+    // In Codex mode, show Claude servers that aren't in Codex
+    const allClaudeServers = { ...mcpUserServers, ...projectServers };
+    for (const [name, config] of Object.entries(allClaudeServers)) {
+      const existsInCodex = codexMcpServers && codexMcpServers[name];
+      if (!existsInCodex) {
+        crossCliServers.push({ name, config, fromCli: 'claude' });
+      }
+    }
+  }
+
  container.innerHTML = `
    <div class="mcp-manager">
      <!-- CLI Mode Toggle -->
@@ -321,7 +342,7 @@ async function renderMcpManager() {
      ` : ''}

      <!-- Available MCP Servers from Other Projects (Codex mode) -->
-      <div class="mcp-section">
+      <div class="mcp-section mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-foreground">${t('mcp.availableOther')}</h3>
          <span class="text-sm text-muted-foreground">${otherProjectServers.length} ${t('mcp.serversAvailable')}</span>
@@ -339,14 +360,30 @@ async function renderMcpManager() {
          </div>
        `}
      </div>
+
+      <!-- Cross-CLI Servers: Available from Claude (Codex mode) -->
+      ${crossCliServers.length > 0 ? `
+      <div class="mcp-section">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="circle" class="w-5 h-5 text-blue-500"></i>
+            ${t('mcp.codex.copyFromClaude')}
+          </h3>
+          <span class="text-sm text-muted-foreground">${crossCliServers.length} ${t('mcp.serversAvailable')}</span>
+        </div>
+        <div class="mcp-server-grid grid gap-3">
+          ${crossCliServers.map(server => renderCrossCliServerCard(server, false)).join('')}
+        </div>
+      </div>
+      ` : ''}
      ` : `
      <!-- CCW Tools MCP Server Card -->
      <div class="mcp-section mb-6">
-        <div class="ccw-tools-card bg-gradient-to-br from-primary/10 to-primary/5 border-2 ${isCcwToolsInstalled ? 'border-success' : 'border-primary/30'} rounded-lg p-6 hover:shadow-lg transition-all">
+        <div class="ccw-tools-card bg-gradient-to-br from-orange-500/10 to-orange-500/5 border-2 ${isCcwToolsInstalled ? 'border-success' : 'border-orange-500/30'} rounded-lg p-6 hover:shadow-lg transition-all">
          <div class="flex items-start justify-between gap-4">
            <div class="flex items-start gap-4 flex-1">
-              <div class="shrink-0 w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
-                <i data-lucide="wrench" class="w-6 h-6 text-primary-foreground"></i>
+              <div class="shrink-0 w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center">
+                <i data-lucide="wrench" class="w-6 h-6 text-white"></i>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-2">
@@ -357,7 +394,7 @@ async function renderMcpManager() {
                      ${enabledTools.length} tools
                    </span>
                  ` : `
-                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-primary/20 text-primary">
+                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-orange-500/20 text-orange-600 dark:text-orange-400">
                      <i data-lucide="package" class="w-3 h-3"></i>
                      Available
                    </span>
@@ -375,15 +412,15 @@ async function renderMcpManager() {
                  `).join('')}
                </div>
                <div class="flex items-center gap-3 text-xs">
-                  <button class="text-primary hover:underline" onclick="selectCcwTools('core')">Core only</button>
-                  <button class="text-primary hover:underline" onclick="selectCcwTools('all')">All</button>
+                  <button class="text-orange-500 hover:underline" onclick="selectCcwTools('core')">Core only</button>
+                  <button class="text-orange-500 hover:underline" onclick="selectCcwTools('all')">All</button>
                  <button class="text-muted-foreground hover:underline" onclick="selectCcwTools('none')">None</button>
                </div>
              </div>
            </div>
            <div class="shrink-0 flex gap-2">
              ${isCcwToolsInstalled ? `
-                <button class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
+                <button class="px-4 py-2 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
                        onclick="updateCcwToolsMcp('workspace')"
                        title="${t('mcp.updateInWorkspace')}">
                  <i data-lucide="folder" class="w-4 h-4"></i>
@@ -396,7 +433,7 @@ async function renderMcpManager() {
                  ${t('mcp.updateInGlobal')}
                </button>
              ` : `
-                <button class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
+                <button class="px-4 py-2 text-sm bg-orange-500 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
                        onclick="installCcwToolsMcp('workspace')"
                        title="${t('mcp.installToWorkspace')}">
                  <i data-lucide="folder" class="w-4 h-4"></i>
@@ -485,7 +522,7 @@ async function renderMcpManager() {
      </div>

      <!-- Available MCP Servers from Other Projects -->
-      <div class="mcp-section">
+      <div class="mcp-section mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-foreground">${t('mcp.availableOther')}</h3>
          <span class="text-sm text-muted-foreground">${otherProjectServers.length} ${t('mcp.serversAvailable')}</span>
@@ -504,6 +541,22 @@ async function renderMcpManager() {
        `}
      </div>

+      <!-- Cross-CLI Servers: Available from Codex (Claude mode) -->
+      ${crossCliServers.length > 0 ? `
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="circle-dashed" class="w-5 h-5 text-orange-500"></i>
+            ${t('mcp.claude.copyFromCodex')}
+          </h3>
+          <span class="text-sm text-muted-foreground">${crossCliServers.length} ${t('mcp.serversAvailable')}</span>
+        </div>
+        <div class="mcp-server-grid grid gap-3">
+          ${crossCliServers.map(server => renderCrossCliServerCard(server, true)).join('')}
+        </div>
+      </div>
+      ` : ''}
+
      <!-- MCP Templates Section -->
      ${mcpTemplates.length > 0 ? `
      <div class="mcp-section mt-6">
@@ -1010,6 +1063,15 @@ function renderAvailableServerCardForCodex(serverName, serverInfo) {
          ${sourceProjectName ? `<span class="text-xs text-muted-foreground/70">• ${t('mcp.from')} ${escapeHtml(sourceProjectName)}</span>` : ''}
        </div>
      </div>
+
+      <div class="mt-3 pt-3 border-t border-border flex items-center gap-2">
+        <button class="text-xs text-orange-500 hover:text-orange-600 transition-colors flex items-center gap-1"
+                onclick="copyClaudeServerToCodex('${escapeHtml(originalName)}', ${JSON.stringify(serverConfig).replace(/'/g, "&#39;")})"
+                title="${t('mcp.codex.copyToCodex')}">
+          <i data-lucide="download" class="w-3 h-3"></i>
+          ${t('mcp.codex.install')}
+        </button>
+      </div>
    </div>
  `;
 }
@@ -1098,6 +1160,104 @@ function renderCodexServerCard(serverName, serverConfig) {
  `;
 }

+// Render card for cross-CLI servers (servers from other CLI not in current CLI)
+function renderCrossCliServerCard(server, isClaude) {
+  const { name, config, fromCli } = server;
+  const isStdio = !!config.command;
+  const isHttp = !!config.url;
+  const command = config.command || config.url || 'N/A';
+  const args = config.args || [];
+
+  // Icon and color based on source CLI
+  const icon = fromCli === 'codex' ? 'circle-dashed' : 'circle';
+  const iconColor = fromCli === 'codex' ? 'orange' : 'blue';
+  const sourceBadgeColor = fromCli === 'codex' ? 'orange' : 'primary';
+  const targetCli = isClaude ? 'project' : 'codex';
+  const buttonText = isClaude ? t('mcp.codex.copyToClaude') : t('mcp.claude.copyToCodex');
+  const typeBadge = isHttp
+    ? `<span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">HTTP</span>`
+    : `<span class="text-xs px-2 py-0.5 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-full">STDIO</span>`;
+
+  return `
+    <div class="mcp-server-card bg-card border border-dashed border-${iconColor}-200 dark:border-${iconColor}-800 rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
+      <div class="flex items-start justify-between mb-3">
+        <div class="flex items-start gap-3">
+          <div class="shrink-0">
+            <i data-lucide="${icon}" class="w-5 h-5 text-${iconColor}-500"></i>
+          </div>
+          <div>
+            <div class="flex items-center gap-2 flex-wrap mb-1">
+              <h4 class="font-semibold text-foreground">${escapeHtml(name)}</h4>
+              <span class="text-xs px-2 py-0.5 bg-${sourceBadgeColor}/10 text-${sourceBadgeColor} rounded-full">
+                ${fromCli === 'codex' ? 'Codex' : 'Claude'}
+              </span>
+              ${typeBadge}
+            </div>
+            <div class="text-sm space-y-1 text-muted-foreground">
+              <div class="flex items-center gap-2">
+                <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${isHttp ? t('mcp.url') : t('mcp.cmd')}</span>
+                <span class="truncate text-xs" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
+              </div>
+              ${args.length > 0 ? `
+                <div class="flex items-start gap-2">
+                  <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">${t('mcp.args')}</span>
+                  <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
+                </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-3 pt-3 border-t border-border">
+        <button class="w-full px-3 py-2 text-sm font-medium bg-${iconColor}-500 hover:bg-${iconColor}-600 text-white rounded-lg transition-colors flex items-center justify-center gap-1.5"
+                onclick="copyCrossCliServer('${escapeHtml(name)}', ${JSON.stringify(config).replace(/'/g, "&#39;")}, '${fromCli}', '${targetCli}')">
+          <i data-lucide="copy" class="w-4 h-4"></i>
+          ${buttonText}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+// Copy server from one CLI to another
+async function copyCrossCliServer(name, config, fromCli, targetCli) {
+  try {
+    let endpoint, body;
+
+    if (targetCli === 'codex') {
+      // Copy from Claude to Codex
+      endpoint = '/api/codex-mcp-add';
+      body = { serverName: name, serverConfig: config };
+    } else if (targetCli === 'project') {
+      // Copy from Codex to Claude project
+      endpoint = '/api/mcp-copy-server';
+      body = { projectPath, serverName: name, serverConfig: config, configType: 'mcp' };
+    } else if (targetCli === 'global') {
+      // Copy to Claude global
+      endpoint = '/api/mcp-add-global-server';
+      body = { serverName: name, serverConfig: config };
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+    if (data.success) {
+      const targetName = targetCli === 'codex' ? 'Codex' : 'Claude';
+      showToast(t('mcp.success'), `${t('mcp.serverInstalled')} (${targetName})`, 'success');
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error, 'error');
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
 // ========================================
 // Codex MCP Create Modal
 // ========================================
--- a/ccw/src/templates/dashboard-js/views/mcp-manager.js.backup
+++ b/ccw/src/templates/dashboard-js/views/mcp-manager.js.backup
--- a/ccw/src/templates/dashboard-js/views/mcp-manager.js.new
+++ b/ccw/src/templates/dashboard-js/views/mcp-manager.js.new
@@ -0,0 +1,928 @@
+// MCP Manager View - Redesigned with Sectioned Layout
+// Comprehensive MCP management for Claude and Codex with clear section separation
+
+// ============================================================
+// CONSTANTS & CONFIGURATION
+// ============================================================
+
+const CCW_MCP_TOOLS = [
+  { name: 'write_file', desc: 'Write/create files', core: true },
+  { name: 'edit_file', desc: 'Edit/replace content', core: true },
+  { name: 'codex_lens', desc: 'Code index & search', core: true },
+  { name: 'smart_search', desc: 'Quick regex/NL search', core: true },
+  { name: 'session_manager', desc: 'Workflow sessions', core: false },
+  { name: 'generate_module_docs', desc: 'Generate docs', core: false },
+  { name: 'update_module_claude', desc: 'Update CLAUDE.md', core: false },
+  { name: 'cli_executor', desc: 'Gemini/Qwen/Codex CLI', core: false },
+];
+
+const MCP_CATEGORIES = [
+  'Development Tools',
+  'Data & APIs',
+  'Files & Storage',
+  'AI & ML',
+  'DevOps',
+  'Custom'
+];
+
+// Get currently enabled tools from installed config (Claude)
+function getCcwEnabledTools() {
+  const currentPath = projectPath;
+  const projectData = mcpAllProjects[currentPath] || {};
+  const ccwConfig = projectData.mcpServers?.['ccw-tools'];
+  if (ccwConfig?.env?.CCW_ENABLED_TOOLS) {
+    const val = ccwConfig.env.CCW_ENABLED_TOOLS;
+    if (val.toLowerCase() === 'all') return CCW_MCP_TOOLS.map(t => t.name);
+    return val.split(',').map(t => t.trim());
+  }
+  return CCW_MCP_TOOLS.filter(t => t.core).map(t => t.name);
+}
+
+// Get currently enabled tools from Codex config
+function getCcwEnabledToolsCodex() {
+  const ccwConfig = codexMcpServers?.['ccw-tools'];
+  if (ccwConfig?.env?.CCW_ENABLED_TOOLS) {
+    const val = ccwConfig.env.CCW_ENABLED_TOOLS;
+    if (val.toLowerCase() === 'all') return CCW_MCP_TOOLS.map(t => t.name);
+    return val.split(',').map(t => t.trim());
+  }
+  return CCW_MCP_TOOLS.filter(t => t.core).map(t => t.name);
+}
+
+// ============================================================
+// MODAL DIALOG COMPONENT
+// ============================================================
+
+function showMcpEditorModal(options = {}) {
+  const {
+    mode = 'create',
+    serverName = '',
+    serverConfig = {},
+    template = null,
+    cliMode = currentCliMode, // 'claude' or 'codex'
+    installTargets = cliMode === 'codex' ? ['codex'] : ['project', 'global']
+  } = options;
+
+  const isView = mode === 'view';
+  const isEdit = mode === 'edit';
+  const title = isView ? t('mcp.viewServer') : isEdit ? t('mcp.editServer') : t('mcp.createServer');
+
+  const initialName = serverName || template?.name || '';
+  const initialDesc = template?.description || '';
+  const initialCategory = template?.category || 'Development Tools';
+  const initialConfig = serverConfig || template?.serverConfig || {
+    command: '',
+    args: [],
+    env: {},
+    url: '',
+    cwd: ''
+  };
+
+  const modalHtml = `
+    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" id="mcpEditorModal" style="backdrop-filter: blur(4px);">
+      <div class="bg-card border border-border rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+        <div class="flex items-center justify-between px-6 py-4 border-b border-border bg-gradient-to-r from-primary/5 to-transparent">
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <i data-lucide="${isView ? 'eye' : isEdit ? 'edit-3' : 'plus-circle'}" class="w-5 h-5 text-primary"></i>
+            </div>
+            <div>
+              <h2 class="text-lg font-bold text-foreground">${title}</h2>
+              <p class="text-xs text-muted-foreground">${cliMode === 'codex' ? 'Codex MCP Server' : 'Claude MCP Server'}</p>
+            </div>
+          </div>
+          <button onclick="closeMcpEditorModal()" class="text-muted-foreground hover:text-foreground transition-colors">
+            <i data-lucide="x" class="w-5 h-5"></i>
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto px-6 py-4">
+          <div class="space-y-4 mb-6">
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.serverName')}</label>
+              <input type="text" id="mcpModalName" value="${initialName}" ${isView ? 'disabled' : ''}
+                     placeholder="my-mcp-server"
+                     class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed" />
+            </div>
+
+            ${!isView && cliMode !== 'codex' ? `
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.description')} (${t('mcp.optional')})</label>
+              <input type="text" id="mcpModalDesc" value="${initialDesc}" placeholder="Brief description"
+                     class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50" />
+            </div>
+            ` : ''}
+          </div>
+
+          <div class="mb-4">
+            <div class="flex items-center gap-2 border-b border-border">
+              <button class="px-4 py-2 text-sm font-medium border-b-2 border-primary text-primary"
+                      onclick="switchMcpServerType('stdio')" id="mcpTypeStdio" ${isView ? 'disabled' : ''}>
+                <i data-lucide="terminal" class="w-4 h-4 inline mr-1.5"></i>
+                STDIO (Command)
+              </button>
+              <button class="px-4 py-2 text-sm font-medium border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+                      onclick="switchMcpServerType('http')" id="mcpTypeHttp" ${isView ? 'disabled' : ''}>
+                <i data-lucide="globe" class="w-4 h-4 inline mr-1.5"></i>
+                HTTP (URL)
+              </button>
+            </div>
+          </div>
+
+          <div id="mcpStdioConfig" class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.command')}</label>
+              <input type="text" id="mcpModalCommand" value="${initialConfig.command || ''}" ${isView ? 'disabled' : ''}
+                     placeholder="node" class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.args')} (${t('mcp.optional')})</label>
+              <textarea id="mcpModalArgs" ${isView ? 'disabled' : ''} rows="3" placeholder='["/path/to/server.js"]'
+                        class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm">${JSON.stringify(initialConfig.args || [], null, 2)}</textarea>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.env')} (${t('mcp.optional')})</label>
+              <textarea id="mcpModalEnv" ${isView ? 'disabled' : ''} rows="4" placeholder='{"API_KEY": "your-key"}'
+                        class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm">${JSON.stringify(initialConfig.env || {}, null, 2)}</textarea>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.cwd')} (${t('mcp.optional')})</label>
+              <input type="text" id="mcpModalCwd" value="${initialConfig.cwd || ''}" ${isView ? 'disabled' : ''}
+                     placeholder="/path/to/working/directory" class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm" />
+            </div>
+          </div>
+
+          <div id="mcpHttpConfig" class="space-y-4 hidden">
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.url')}</label>
+              <input type="text" id="mcpModalUrl" value="${initialConfig.url || ''}" ${isView ? 'disabled' : ''}
+                     placeholder="https://api.example.com/mcp" class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-foreground mb-1.5">${t('mcp.httpHeaders')} (${t('mcp.optional')})</label>
+              <textarea id="mcpModalHttpHeaders" ${isView ? 'disabled' : ''} rows="4" placeholder='{"Authorization": "Bearer token"}'
+                        class="w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm">${JSON.stringify(initialConfig.http_headers || initialConfig.httpHeaders || {}, null, 2)}</textarea>
+            </div>
+          </div>
+
+          ${!isView && cliMode !== 'codex' ? `
+          <div class="mt-6 pt-6 border-t border-border">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="checkbox" id="mcpModalSaveTemplate" class="w-4 h-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/50" />
+              <span class="text-sm font-medium text-foreground">${t('mcp.saveAsTemplate')}</span>
+            </label>
+          </div>
+          ` : ''}
+        </div>
+
+        <div class="flex items-center justify-between px-6 py-4 border-t border-border bg-muted/30">
+          ${!isView ? `
+          <div class="flex items-center gap-2">
+            <span class="text-sm font-medium text-foreground">${t('mcp.installTo')}:</span>
+            <select id="mcpModalTarget" class="px-3 py-1.5 bg-background border border-border rounded-lg text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50">
+              ${installTargets.map(target => {
+                const labels = {
+                  project: 'Project (.mcp.json)',
+                  global: 'Global (~/.claude.json)',
+                  codex: 'Codex (~/.codex/config.toml)'
+                };
+                return `<option value="${target}">${labels[target]}</option>`;
+              }).join('')}
+            </select>
+          </div>
+          ` : '<div></div>'}
+
+          <div class="flex items-center gap-2">
+            <button onclick="closeMcpEditorModal()" class="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+              ${isView ? t('mcp.close') : t('mcp.cancel')}
+            </button>
+            ${!isView ? `
+            <button onclick="saveMcpFromModal('${cliMode}')" class="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
+              <i data-lucide="save" class="w-4 h-4"></i>
+              ${isEdit ? t('mcp.update') : t('mcp.install')}
+            </button>
+            ` : ''}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const existingModal = document.getElementById('mcpEditorModal');
+  if (existingModal) existingModal.remove();
+  document.body.insertAdjacentHTML('beforeend', modalHtml);
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+  if (initialConfig.url) switchMcpServerType('http');
+}
+
+function switchMcpServerType(type) {
+  const stdioConfig = document.getElementById('mcpStdioConfig');
+  const httpConfig = document.getElementById('mcpHttpConfig');
+  const stdioBtn = document.getElementById('mcpTypeStdio');
+  const httpBtn = document.getElementById('mcpTypeHttp');
+
+  if (type === 'stdio') {
+    stdioConfig.classList.remove('hidden');
+    httpConfig.classList.add('hidden');
+    stdioBtn.classList.add('border-primary', 'text-primary');
+    stdioBtn.classList.remove('border-transparent', 'text-muted-foreground');
+    httpBtn.classList.remove('border-primary', 'text-primary');
+    httpBtn.classList.add('border-transparent', 'text-muted-foreground');
+  } else {
+    stdioConfig.classList.add('hidden');
+    httpConfig.classList.remove('hidden');
+    httpBtn.classList.add('border-primary', 'text-primary');
+    httpBtn.classList.remove('border-transparent', 'text-muted-foreground');
+    stdioBtn.classList.remove('border-primary', 'text-primary');
+    stdioBtn.classList.add('border-transparent', 'text-muted-foreground');
+  }
+}
+
+function closeMcpEditorModal() {
+  const modal = document.getElementById('mcpEditorModal');
+  if (modal) modal.remove();
+}
+
+async function saveMcpFromModal(cliMode) {
+  const name = document.getElementById('mcpModalName').value.trim();
+  const desc = document.getElementById('mcpModalDesc')?.value.trim() || '';
+  const target = document.getElementById('mcpModalTarget')?.value || (cliMode === 'codex' ? 'codex' : 'project');
+  const saveAsTemplate = document.getElementById('mcpModalSaveTemplate')?.checked || false;
+
+  if (!name) {
+    showToast(t('mcp.error'), t('mcp.nameRequired'), 'error');
+    return;
+  }
+
+  const isStdio = !document.getElementById('mcpStdioConfig').classList.contains('hidden');
+  let serverConfig = {};
+
+  if (isStdio) {
+    const command = document.getElementById('mcpModalCommand').value.trim();
+    if (!command) {
+      showToast(t('mcp.error'), t('mcp.commandRequired'), 'error');
+      return;
+    }
+    serverConfig.command = command;
+
+    const argsText = document.getElementById('mcpModalArgs').value.trim();
+    if (argsText) {
+      try {
+        serverConfig.args = JSON.parse(argsText);
+        if (!Array.isArray(serverConfig.args)) throw new Error('Args must be an array');
+      } catch (e) {
+        showToast(t('mcp.error'), t('mcp.invalidArgsJson'), 'error');
+        return;
+      }
+    }
+
+    const envText = document.getElementById('mcpModalEnv').value.trim();
+    if (envText) {
+      try {
+        serverConfig.env = JSON.parse(envText);
+        if (typeof serverConfig.env !== 'object' || Array.isArray(serverConfig.env)) throw new Error('Env must be an object');
+      } catch (e) {
+        showToast(t('mcp.error'), t('mcp.invalidEnvJson'), 'error');
+        return;
+      }
+    }
+
+    const cwd = document.getElementById('mcpModalCwd').value.trim();
+    if (cwd) serverConfig.cwd = cwd;
+  } else {
+    const url = document.getElementById('mcpModalUrl').value.trim();
+    if (!url) {
+      showToast(t('mcp.error'), t('mcp.urlRequired'), 'error');
+      return;
+    }
+    serverConfig.url = url;
+
+    const headersText = document.getElementById('mcpModalHttpHeaders').value.trim();
+    if (headersText) {
+      try {
+        const headers = JSON.parse(headersText);
+        if (typeof headers !== 'object' || Array.isArray(headers)) throw new Error('Headers must be an object');
+        serverConfig.http_headers = headers;
+      } catch (e) {
+        showToast(t('mcp.error'), t('mcp.invalidHeadersJson'), 'error');
+        return;
+      }
+    }
+  }
+
+  if (saveAsTemplate && cliMode !== 'codex') {
+    try {
+      await fetch('/api/mcp-templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, description: desc, serverConfig, category: 'Custom' })
+      });
+    } catch (error) {
+      console.error('Error saving template:', error);
+    }
+  }
+
+  try {
+    let endpoint = '';
+    let body = {};
+
+    if (cliMode === 'codex') {
+      endpoint = '/api/codex-mcp-add';
+      body = { serverName: name, serverConfig };
+    } else {
+      if (target === 'global') {
+        endpoint = '/api/mcp-add-global-server';
+        body = { serverName: name, serverConfig };
+      } else {
+        endpoint = '/api/mcp-copy-server';
+        body = { projectPath, serverName: name, serverConfig, configType: 'mcp' };
+      }
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+
+    if (data.success || data.serverName) {
+      showToast(t('mcp.success'), t('mcp.serverInstalled'), 'success');
+      closeMcpEditorModal();
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error || 'Installation failed', 'error');
+    }
+  } catch (error) {
+    console.error('Error installing MCP server:', error);
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+// ============================================================
+// MAIN RENDER FUNCTION
+// ============================================================
+
+async function renderMcpManager() {
+  const container = document.getElementById('mainContent');
+  if (!container) return;
+
+  const statsGrid = document.getElementById('statsGrid');
+  const searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+
+  if (!mcpConfig) await loadMcpConfig();
+  await loadMcpTemplates();
+
+  const currentPath = projectPath;
+  const projectData = mcpAllProjects[currentPath] || {};
+  const projectServers = projectData.mcpServers || {};
+  const disabledServers = projectData.disabledMcpServers || [];
+  const codexServers = codexMcpServers || {};
+  const isClaude = currentCliMode === 'claude';
+
+  // Section 1: Project Available (Enterprise + Global + Project-specific)
+  const projectAvailable = [];
+
+  if (isClaude) {
+    // Enterprise servers
+    for (const [name, config] of Object.entries(mcpEnterpriseServers || {})) {
+      projectAvailable.push({ name, config, source: 'enterprise', enabled: true, canRemove: false, canToggle: false });
+    }
+    // Global servers
+    for (const [name, config] of Object.entries(mcpUserServers || {})) {
+      if (!mcpEnterpriseServers?.[name]) {
+        projectAvailable.push({ name, config, source: 'global', enabled: !disabledServers.includes(name), canRemove: false, canToggle: true });
+      }
+    }
+    // Project servers
+    for (const [name, config] of Object.entries(projectServers)) {
+      if (!mcpEnterpriseServers?.[name] && !mcpUserServers?.[name]) {
+        projectAvailable.push({ name, config, source: 'project', enabled: !disabledServers.includes(name), canRemove: true, canToggle: true });
+      }
+    }
+  } else {
+    // Codex servers
+    for (const [name, config] of Object.entries(codexServers)) {
+      projectAvailable.push({ name, config, source: 'codex', enabled: config.enabled !== false, canRemove: true, canToggle: true });
+    }
+  }
+
+  // Section 2: Global Management (for Claude only)
+  const globalManagement = isClaude ? Object.entries(mcpUserServers || {}) : [];
+
+  // Section 3: Other Projects (for Claude only)
+  const allAvailableServers = isClaude ? getAllAvailableMcpServers() : {};
+  const currentProjectServerNames = Object.keys(projectServers);
+  const otherProjects = isClaude ? Object.entries(allAvailableServers).filter(([name, info]) => !currentProjectServerNames.includes(name) && !info.isGlobal) : [];
+
+  // Section 4: Cross-CLI servers (Available from other CLI)
+  const crossCliServers = [];
+  if (isClaude) {
+    // Show Codex servers when in Claude mode
+    for (const [name, config] of Object.entries(codexServers)) {
+      // Check if already exists in Claude (project or global)
+      const existsInClaude = currentProjectServerNames.includes(name) || mcpUserServers?.[name];
+      if (!existsInClaude) {
+        crossCliServers.push({ name, config, fromCli: 'codex' });
+      }
+    }
+  } else {
+    // Show Claude servers when in Codex mode
+    // Collect all Claude servers (global + project)
+    const allClaudeServers = { ...mcpUserServers, ...projectServers };
+    for (const [name, config] of Object.entries(allClaudeServers)) {
+      // Check if already exists in Codex
+      const existsInCodex = codexServers[name];
+      if (!existsInCodex) {
+        crossCliServers.push({ name, config, fromCli: 'claude' });
+      }
+    }
+  }
+
+  container.innerHTML = `
+    <div class="mcp-manager">
+      <!-- CLI Mode Toggle -->
+      <div class="mcp-cli-toggle mb-6">
+        <div class="flex items-center justify-between bg-card border border-border rounded-lg p-4">
+          <div class="flex items-center gap-3">
+            <span class="text-sm font-medium text-foreground">${t('mcp.cliMode')}</span>
+            <div class="flex items-center bg-muted rounded-lg p-1">
+              <button class="cli-mode-btn px-4 py-2 text-sm font-medium rounded-md transition-all ${isClaude ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
+                      onclick="setCliMode('claude')">
+                <i data-lucide="bot" class="w-4 h-4 inline mr-1.5"></i>
+                Claude
+              </button>
+              <button class="cli-mode-btn px-4 py-2 text-sm font-medium rounded-md transition-all ${!isClaude ? 'shadow-sm' : 'text-muted-foreground hover:text-foreground'}"
+                      onclick="setCliMode('codex')"
+                      style="${!isClaude ? 'background-color: #f97316; color: white;' : ''}">
+                <i data-lucide="code-2" class="w-4 h-4 inline mr-1.5"></i>
+                Codex
+              </button>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <button onclick="renderMcpTemplates()" class="px-4 py-2 text-sm font-medium bg-muted hover:bg-muted/80 text-foreground rounded-lg transition-colors flex items-center gap-2">
+              <i data-lucide="bookmark" class="w-4 h-4"></i>
+              ${t('mcp.templates')}
+            </button>
+            <button onclick="showMcpEditorModal({ mode: 'create', cliMode: '${currentCliMode}' })"
+                    class="px-4 py-2 text-sm font-medium ${isClaude ? 'bg-primary hover:bg-primary/90 text-primary-foreground' : 'bg-orange-500 hover:bg-orange-600 text-white'} rounded-lg transition-colors flex items-center gap-2">
+              <i data-lucide="plus-circle" class="w-4 h-4"></i>
+              ${t('mcp.newServer')}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Section 1: Current Project Available -->
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="folder-check" class="w-5 h-5"></i>
+            ${isClaude ? t('mcp.projectAvailable') : 'Codex Global MCP Servers'}
+            <span class="text-sm text-muted-foreground font-normal">(${projectAvailable.length})</span>
+          </h2>
+        </div>
+        <div class="space-y-3">
+          ${projectAvailable.length === 0 ? `
+            <div class="bg-card border border-dashed border-border rounded-lg p-8 text-center">
+              <i data-lucide="inbox" class="w-12 h-12 text-muted-foreground mx-auto mb-3"></i>
+              <p class="text-sm text-muted-foreground">${isClaude ? t('mcp.noMcpServers') : 'No Codex MCP servers configured'}</p>
+            </div>
+          ` : projectAvailable.map(server => renderMcpServerCard(server, isClaude ? 'claude' : 'codex')).join('')}
+        </div>
+      </div>
+
+      ${isClaude ? `
+      <!-- Section 2: Global Management -->
+      ${globalManagement.length > 0 ? `
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="globe" class="w-5 h-5"></i>
+            ${t('mcp.user')}
+            <span class="text-sm text-muted-foreground font-normal">(${globalManagement.length})</span>
+          </h2>
+        </div>
+        <div class="space-y-3">
+          ${globalManagement.map(([name, config]) => renderMcpServerCard({ name, config, source: 'global-manage', enabled: true, canRemove: true, canToggle: false }, 'claude')).join('')}
+        </div>
+      </div>
+      ` : ''}
+
+      <!-- Section 3: Other Projects -->
+      ${otherProjects.length > 0 ? `
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            <i data-lucide="folder-open" class="w-5 h-5"></i>
+            ${t('mcp.availableOther')}
+            <span class="text-sm text-muted-foreground font-normal">(${otherProjects.length})</span>
+          </h2>
+        </div>
+        <div class="space-y-3">
+          ${otherProjects.map(([name, info]) => renderMcpServerCardAvailable(name, info)).join('')}
+        </div>
+      </div>
+      ` : ''}
+
+      <!-- Section 4: Cross-CLI Servers -->
+      ${crossCliServers.length > 0 ? `
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-foreground flex items-center gap-2">
+            ${isClaude ? `
+              <i data-lucide="circle-dashed" class="w-5 h-5 text-orange-500"></i>
+              ${t('mcp.claude.copyFromCodex')}
+            ` : `
+              <i data-lucide="circle" class="w-5 h-5 text-blue-500"></i>
+              ${t('mcp.codex.copyFromClaude')}
+            `}
+            <span class="text-sm text-muted-foreground font-normal">(${crossCliServers.length})</span>
+          </h2>
+        </div>
+        <div class="space-y-3">
+          ${crossCliServers.map(server => renderCrossCliServerCard(server, isClaude)).join('')}
+        </div>
+      </div>
+      ` : ''}
+      ` : ''}
+    </div>
+  `;
+
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function renderMcpServerCard(server, cliMode) {
+  const { name, config, source, enabled, canRemove, canToggle } = server;
+
+  const sourceInfo = {
+    enterprise: { icon: 'shield', color: 'purple', label: 'Enterprise' },
+    global: { icon: 'globe', color: 'green', label: 'Global' },
+    'global-manage': { icon: 'globe', color: 'green', label: 'Global' },
+    project: { icon: 'folder', color: 'blue', label: 'Project' },
+    codex: { icon: 'code-2', color: 'orange', label: 'Codex' }
+  };
+
+  const info = sourceInfo[source] || sourceInfo.project;
+  const isStdio = !!config.command;
+  const isHttp = !!config.url;
+
+  return `
+    <div class="bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${!enabled ? 'opacity-60' : ''}">
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex items-start gap-3 flex-1 min-w-0">
+          <div class="shrink-0 w-10 h-10 rounded-lg bg-${info.color}-500/10 flex items-center justify-center">
+            <i data-lucide="${info.icon}" class="w-5 h-5 text-${info.color}-500"></i>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <h3 class="font-semibold text-foreground truncate">${name}</h3>
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-${info.color}-500/10 text-${info.color}-600 dark:text-${info.color}-400">
+                ${info.label}
+              </span>
+              ${enabled ? `
+                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-success/10 text-success">
+                  <i data-lucide="check" class="w-3 h-3"></i>
+                  Enabled
+                </span>
+              ` : `
+                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-muted text-muted-foreground">
+                  <i data-lucide="x" class="w-3 h-3"></i>
+                  Disabled
+                </span>
+              `}
+            </div>
+            <div class="text-sm text-muted-foreground space-y-1">
+              ${isStdio ? `
+                <div class="flex items-center gap-2">
+                  <i data-lucide="terminal" class="w-3 h-3"></i>
+                  <code class="text-xs">${config.command} ${(config.args || []).slice(0, 2).join(' ')}</code>
+                </div>
+              ` : ''}
+              ${isHttp ? `
+                <div class="flex items-center gap-2">
+                  <i data-lucide="globe" class="w-3 h-3"></i>
+                  <code class="text-xs truncate">${config.url}</code>
+                </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          ${canToggle ? `
+            <button onclick="toggleMcpServer('${name}', '${cliMode}', ${!enabled})" class="p-2 rounded-lg hover:bg-muted transition-colors" title="${enabled ? 'Disable' : 'Enable'}">
+              <i data-lucide="${enabled ? 'toggle-right' : 'toggle-left'}" class="w-4 h-4 text-${enabled ? 'success' : 'muted-foreground'}"></i>
+            </button>
+          ` : ''}
+          <button onclick="showMcpEditorModal({ mode: 'view', serverName: '${name}', serverConfig: ${JSON.stringify(config).replace(/"/g, '&quot;')}, cliMode: '${cliMode}' })" class="p-2 rounded-lg hover:bg-muted transition-colors">
+            <i data-lucide="eye" class="w-4 h-4 text-foreground"></i>
+          </button>
+          ${canRemove && source !== 'global-manage' ? `
+            <button onclick="showMcpEditorModal({ mode: 'edit', serverName: '${name}', serverConfig: ${JSON.stringify(config).replace(/"/g, '&quot;')}, cliMode: '${cliMode}' })" class="p-2 rounded-lg hover:bg-muted transition-colors">
+              <i data-lucide="edit-3" class="w-4 h-4 text-foreground"></i>
+            </button>
+          ` : ''}
+          ${canRemove ? `
+            <button onclick="deleteMcpServer('${name}', '${source}', '${cliMode}')" class="p-2 rounded-lg hover:bg-destructive/10 transition-colors">
+              <i data-lucide="trash-2" class="w-4 h-4 text-destructive"></i>
+            </button>
+          ` : ''}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderMcpServerCardAvailable(name, info) {
+  return `
+    <div class="bg-card border border-dashed border-border rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex items-start gap-3 flex-1">
+          <div class="shrink-0 w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
+            <i data-lucide="folder" class="w-5 h-5 text-muted-foreground"></i>
+          </div>
+          <div class="flex-1">
+            <div class="flex items-center gap-2 mb-1">
+              <h3 class="font-semibold text-foreground">${name}</h3>
+              <span class="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">${t('mcp.available')}</span>
+            </div>
+            <p class="text-xs text-muted-foreground">${t('mcp.from')} ${info.projectName || info.source}</p>
+          </div>
+        </div>
+        <button onclick="installServerFromOther('${name}', ${JSON.stringify(info.config).replace(/"/g, '&quot;')})" class="px-3 py-1.5 text-sm font-medium bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg transition-colors">
+          ${t('mcp.addToProject')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function renderCrossCliServerCard(server, isClaude) {
+  const { name, config, fromCli } = server;
+  const isStdio = !!config.command;
+  const isHttp = !!config.url;
+
+  // Use solid circle for Claude, dashed circle for Codex
+  const icon = fromCli === 'codex' ? 'circle-dashed' : 'circle';
+  const iconColor = fromCli === 'codex' ? 'orange' : 'blue';
+  const targetCli = isClaude ? 'project' : 'codex';
+  const buttonText = isClaude ? t('mcp.codex.copyToClaude') : t('mcp.claude.copyToCodex');
+
+  return `
+    <div class="bg-card border border-dashed border-${iconColor}-200 dark:border-${iconColor}-800 rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex items-start gap-3 flex-1 min-w-0">
+          <div class="shrink-0 w-10 h-10 rounded-full bg-${iconColor}-50 dark:bg-${iconColor}-950/30 flex items-center justify-center">
+            <i data-lucide="${icon}" class="w-5 h-5 text-${iconColor}-500"></i>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <h3 class="font-semibold text-foreground truncate">${name}</h3>
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-${iconColor}-50 dark:bg-${iconColor}-950/30 text-${iconColor}-600 dark:text-${iconColor}-400">
+                <i data-lucide="${icon}" class="w-3 h-3"></i>
+                ${fromCli === 'codex' ? 'Codex' : 'Claude'}
+              </span>
+            </div>
+            <div class="text-sm text-muted-foreground space-y-1">
+              ${isStdio ? `
+                <div class="flex items-center gap-2">
+                  <i data-lucide="terminal" class="w-3 h-3"></i>
+                  <code class="text-xs truncate">${config.command} ${(config.args || []).slice(0, 2).join(' ')}</code>
+                </div>
+              ` : ''}
+              ${isHttp ? `
+                <div class="flex items-center gap-2">
+                  <i data-lucide="globe" class="w-3 h-3"></i>
+                  <code class="text-xs truncate">${config.url}</code>
+                </div>
+              ` : ''}
+            </div>
+          </div>
+        </div>
+        <button onclick="copyCrossCliServer('${name}', ${JSON.stringify(config).replace(/"/g, '&quot;')}, '${fromCli}', '${targetCli}')" class="px-3 py-1.5 text-sm font-medium bg-${iconColor}-500 hover:bg-${iconColor}-600 text-white rounded-lg transition-colors flex items-center gap-1.5">
+          <i data-lucide="copy" class="w-3.5 h-3.5"></i>
+          ${buttonText}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+async function copyCrossCliServer(name, config, fromCli, targetCli) {
+  try {
+    let endpoint, body;
+
+    if (targetCli === 'codex') {
+      // Copy from Claude to Codex
+      endpoint = '/api/codex-mcp-add';
+      body = { serverName: name, serverConfig: config };
+    } else if (targetCli === 'project') {
+      // Copy from Codex to Claude project
+      endpoint = '/api/mcp-copy-server';
+      body = { projectPath, serverName: name, serverConfig: config, configType: 'mcp' };
+    } else if (targetCli === 'global') {
+      // Copy to Claude global
+      endpoint = '/api/mcp-add-global-server';
+      body = { serverName: name, serverConfig: config };
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+    if (data.success) {
+      const targetName = targetCli === 'codex' ? 'Codex' : 'Claude';
+      showToast(t('mcp.success'), `${t('mcp.serverInstalled')} (${targetName})`, 'success');
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error, 'error');
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+async function installServerFromOther(name, config) {
+  try {
+    const res = await fetch('/api/mcp-copy-server', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectPath, serverName: name, serverConfig: config, configType: 'mcp' })
+    });
+    const data = await res.json();
+    if (data.success) {
+      showToast(t('mcp.success'), t('mcp.serverInstalled'), 'success');
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error, 'error');
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+async function toggleMcpServer(serverName, cliMode, enable) {
+  try {
+    let endpoint = cliMode === 'codex' ? '/api/codex-mcp-toggle' : '/api/mcp-toggle';
+    let body = cliMode === 'codex' ? { serverName, enabled: enable } : { projectPath, serverName, enable };
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+    if (data.success || data.serverName) {
+      showToast(t('mcp.success'), enable ? t('mcp.serverEnabled') : t('mcp.serverDisabled'), 'success');
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error, 'error');
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+async function deleteMcpServer(serverName, source, cliMode) {
+  if (!confirm(`Are you sure you want to delete "${serverName}"?`)) return;
+
+  try {
+    let endpoint = '';
+    let body = {};
+
+    if (cliMode === 'codex') {
+      endpoint = '/api/codex-mcp-remove';
+      body = { serverName };
+    } else if (source === 'global-manage') {
+      endpoint = '/api/mcp-remove-global-server';
+      body = { serverName };
+    } else if (source === 'project') {
+      endpoint = '/api/mcp-remove-server';
+      body = { projectPath, serverName };
+    } else {
+      endpoint = '/api/mcp-remove-global-server';
+      body = { serverName };
+    }
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+
+    const data = await res.json();
+    if (data.success || data.removed) {
+      showToast(t('mcp.success'), t('mcp.serverDeleted'), 'success');
+      await loadMcpConfig();
+      renderMcpManager();
+    } else {
+      showToast(t('mcp.error'), data.error, 'error');
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+async function renderMcpTemplates() {
+  const container = document.getElementById('mainContent');
+  if (!container) return;
+
+  if (!mcpTemplates || mcpTemplates.length === 0) await loadMcpTemplates();
+  const categories = [...new Set(mcpTemplates.map(t => t.category || 'Custom'))];
+
+  container.innerHTML = `
+    <div class="mcp-templates-view">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <button onclick="renderMcpManager()" class="text-sm text-primary hover:underline flex items-center gap-1 mb-2">
+            <i data-lucide="arrow-left" class="w-4 h-4"></i>
+            ${t('mcp.backToManager')}
+          </button>
+          <h1 class="text-2xl font-bold text-foreground">${t('mcp.templates')}</h1>
+        </div>
+      </div>
+      <div class="space-y-6">
+        ${categories.map(category => {
+          const templates = mcpTemplates.filter(t => (t.category || 'Custom') === category);
+          return `
+            <div>
+              <h2 class="text-lg font-semibold text-foreground mb-3">${category} (${templates.length})</h2>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                ${templates.map(template => `
+                  <div class="bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all">
+                    <h3 class="font-semibold text-foreground mb-2">${template.name}</h3>
+                    <p class="text-sm text-muted-foreground mb-4">${template.description || 'No description'}</p>
+                    <div class="flex gap-2">
+                      <button onclick="showMcpEditorModal({ mode: 'create', template: ${JSON.stringify(template).replace(/"/g, '&quot;')} })" class="flex-1 px-3 py-2 text-sm bg-primary hover:bg-primary/90 text-primary-foreground rounded-lg">Install</button>
+                      <button onclick="deleteTemplate('${template.name}')" class="px-3 py-2 text-sm bg-destructive/10 hover:bg-destructive/20 text-destructive rounded-lg">Delete</button>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    </div>
+  `;
+
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+async function deleteTemplate(name) {
+  if (!confirm(`Delete template "${name}"?`)) return;
+  try {
+    const res = await fetch(`/api/mcp-templates/${encodeURIComponent(name)}`, { method: 'DELETE' });
+    const data = await res.json();
+    if (data.success) {
+      showToast(t('mcp.success'), t('mcp.templateDeleted'), 'success');
+      await loadMcpTemplates();
+      renderMcpTemplates();
+    }
+  } catch (error) {
+    showToast(t('mcp.error'), error.message, 'error');
+  }
+}
+
+function showToast(title, message, type = 'info') {
+  console.log(`[${type.toUpperCase()}] ${title}: ${message}`);
+  if (typeof window.showNotification === 'function') {
+    window.showNotification(title, message, type);
+  } else {
+    alert(`${title}\n${message}`);
+  }
+}
+
+async function loadMcpTemplates() {
+  try {
+    const res = await fetch('/api/mcp-templates');
+    const data = await res.json();
+    if (data.success) mcpTemplates = data.templates || [];
+  } catch (error) {
+    console.error('Error loading MCP templates:', error);
+    mcpTemplates = [];
+  }
+}
+
+window.renderMcpManager = renderMcpManager;
+window.renderMcpTemplates = renderMcpTemplates;
+window.showMcpEditorModal = showMcpEditorModal;
+window.closeMcpEditorModal = closeMcpEditorModal;
+window.saveMcpFromModal = saveMcpFromModal;
+window.switchMcpServerType = switchMcpServerType;
+window.toggleMcpServer = toggleMcpServer;
+window.deleteMcpServer = deleteMcpServer;
+window.deleteTemplate = deleteTemplate;
+window.installServerFromOther = installServerFromOther;
--- a/ccw/src/tools/cli-executor.ts
+++ b/ccw/src/tools/cli-executor.ts
@@ -1130,8 +1130,8 @@ export async function getExecutionHistoryAsync(baseDir: string, options: {

  // Recursive mode: aggregate data from parent and all child projects
  if (recursive) {
-    const { scanChildProjects } = await import('../config/storage-paths.js');
-    const childProjects = scanChildProjects(baseDir);
+    const { scanChildProjectsAsync } = await import('../config/storage-paths.js');
+    const childProjects = await scanChildProjectsAsync(baseDir);

    let allExecutions: (HistoryIndex['executions'][0] & { sourceDir?: string })[] = [];
    let totalCount = 0;
--- a/ccw/src/tools/cli-history-store.ts
+++ b/ccw/src/tools/cli-history-store.ts
@@ -17,6 +17,8 @@ export interface ConversationTurn {
  duration_ms: number;
  status: 'success' | 'error' | 'timeout';
  exit_code: number | null;
+  // NOTE: Naming inconsistency - using prompt/stdout vs tool_args/tool_output in MemoryStore
+  // This reflects CLI-specific semantics (prompt -> execution -> output)
  output: {
    stdout: string;
    stderr: string;
@@ -96,8 +98,11 @@ export interface ReviewRecord {
 export class CliHistoryStore {
  private db: Database.Database;
  private dbPath: string;
+  private projectPath: string;

  constructor(baseDir: string) {
+    this.projectPath = baseDir;
+
    // Use centralized storage path
    const paths = StoragePaths.project(baseDir);
    const historyDir = paths.cliHistory;
@@ -294,6 +299,22 @@ export class CliHistoryStore {
        `);
        console.log('[CLI History] Migration complete: relative_path column added');
      }
+
+      // Add missing timestamp index for turns table (for time-based queries)
+      try {
+        const indexExists = this.db.prepare(`
+          SELECT name FROM sqlite_master
+          WHERE type='index' AND name='idx_turns_timestamp'
+        `).get();
+
+        if (!indexExists) {
+          console.log('[CLI History] Adding missing timestamp index to turns table...');
+          this.db.exec(`CREATE INDEX IF NOT EXISTS idx_turns_timestamp ON turns(timestamp DESC);`);
+          console.log('[CLI History] Migration complete: turns timestamp index added');
+        }
+      } catch (indexErr) {
+        console.warn('[CLI History] Turns timestamp index creation warning:', (indexErr as Error).message);
+      }
    } catch (err) {
      console.error('[CLI History] Migration error:', (err as Error).message);
      // Don't throw - allow the store to continue working with existing schema
@@ -387,14 +408,16 @@ export class CliHistoryStore {
      : '';

    const upsertConversation = this.db.prepare(`
-      INSERT INTO conversations (id, created_at, updated_at, tool, model, mode, category, total_duration_ms, turn_count, latest_status, prompt_preview, parent_execution_id)
-      VALUES (@id, @created_at, @updated_at, @tool, @model, @mode, @category, @total_duration_ms, @turn_count, @latest_status, @prompt_preview, @parent_execution_id)
+      INSERT INTO conversations (id, created_at, updated_at, tool, model, mode, category, total_duration_ms, turn_count, latest_status, prompt_preview, parent_execution_id, project_root, relative_path)
+      VALUES (@id, @created_at, @updated_at, @tool, @model, @mode, @category, @total_duration_ms, @turn_count, @latest_status, @prompt_preview, @parent_execution_id, @project_root, @relative_path)
      ON CONFLICT(id) DO UPDATE SET
        updated_at = @updated_at,
        total_duration_ms = @total_duration_ms,
        turn_count = @turn_count,
        latest_status = @latest_status,
-        prompt_preview = @prompt_preview
+        prompt_preview = @prompt_preview,
+        project_root = @project_root,
+        relative_path = @relative_path
    `);

    const upsertTurn = this.db.prepare(`
@@ -424,7 +447,9 @@ export class CliHistoryStore {
        turn_count: conversation.turn_count,
        latest_status: conversation.latest_status,
        prompt_preview: promptPreview,
-        parent_execution_id: conversation.parent_execution_id || null
+        parent_execution_id: conversation.parent_execution_id || null,
+        project_root: this.projectPath,
+        relative_path: null  // For future hierarchical tracking
      });

      for (const turn of conversation.turns) {