claude-code-workflow 6.3.18 → 6.3.19

package/ccw/src/templates/dashboard-js/views/cli-manager.js

@@ -6,9 +6,174 @@ var currentCliExecution = null;
 var cliExecutionOutput = '';
 var ccwInstallations = [];
 var ccwEndpointTools = [];
+var cliWrapperEndpoints = [];  // CLI封装 endpoints from /api/cli/settings
 var cliToolConfig = null;  // Store loaded CLI config
 var predefinedModels = {}; // Store predefined models per tool
 
+// ========== Cache Key Mapping ==========
+// 缓存键映射（旧键名 -> 新键名）
+var CLI_CACHE_KEY_MAP = {
+  toolConfig: 'cli-config',
+  toolStatus: 'cli-status',
+  installations: 'cli-installations',
+  endpointTools: 'cli-endpoint-tools',
+  litellmEndpoints: 'cli-litellm-endpoints',
+  customEndpoints: 'cli-custom-endpoints',
+  wrapperEndpoints: 'cli-wrapper-endpoints'
+};
+
+// ========== CLI Cache Bridge ==========
+
+/**
+ * 获取 CLI 缓存数据
+ * @param {string} key - 缓存键
+ * @returns {*} 缓存的数据或 null
+ */
+function getCliCachedData(key) {
+  if (!window.cacheManager) return null;
+  var newKey = CLI_CACHE_KEY_MAP[key] || key;
+  return window.cacheManager.get(newKey);
+}
+
+/**
+ * 设置 CLI 缓存数据
+ * @param {string} key - 缓存键
+ * @param {*} data - 要缓存的数据
+ * @param {number} ttl - 缓存 TTL（毫秒），默认 5 分钟
+ */
+function setCliCacheData(key, data, ttl) {
+  if (!window.cacheManager) return;
+  ttl = ttl || 300000;
+  var newKey = CLI_CACHE_KEY_MAP[key] || key;
+  window.cacheManager.set(newKey, data, ttl);
+}
+
+/**
+ * 注册 CLI 相关数据源到预加载服务
+ * 仅在数据源尚未注册时添加
+ */
+function registerCliDataSources() {
+  if (!window.preloadService) return;
+
+  var sources = [
+    { key: 'cli-installations', url: '/api/ccw/installations', priority: false, ttl: 300000 },
+    { key: 'cli-endpoint-tools', url: '/api/ccw/tools', priority: false, ttl: 300000 },
+    { key: 'cli-litellm-endpoints', url: '/api/litellm-api/config', priority: false, ttl: 300000 },
+    { key: 'cli-custom-endpoints', url: '/api/cli/endpoints', priority: false, ttl: 300000 },
+    { key: 'cli-wrapper-endpoints', url: '/api/cli/settings', priority: false, ttl: 300000 }
+  ];
+
+  sources.forEach(function(src) {
+    if (!window.preloadService.sources.has(src.key)) {
+      window.preloadService.register(src.key,
+        function() { return fetch(src.url).then(function(r) { return r.ok ? r.json() : Promise.reject(r); }); },
+        { isHighPriority: src.priority, ttl: src.ttl }
+      );
+    }
+  });
+}
+
+// ========== CSRF Token Management ==========
+var csrfToken = null;  // Store CSRF token for state-changing requests
+
+/**
+ * Fetch wrapper that handles CSRF token management
+ * Captures new token from response and includes token in requests
+ */
+async function csrfFetch(url, options) {
+  options = options || {};
+  options.headers = options.headers || {};
+
+  // Add CSRF token header for state-changing methods
+  var method = (options.method || 'GET').toUpperCase();
+
+  // Auto-initialize CSRF token for state-changing requests
+  if (['POST', 'PUT', 'PATCH', 'DELETE'].indexOf(method) !== -1) {
+    await initCsrfToken();
+  }
+
+  if (['POST', 'PUT', 'PATCH', 'DELETE'].indexOf(method) !== -1 && csrfToken) {
+    options.headers['X-CSRF-Token'] = csrfToken;
+  }
+
+  var response = await fetch(url, options);
+
+  // Capture new CSRF token from response
+  var newToken = response.headers.get('X-CSRF-Token');
+  if (newToken) {
+    csrfToken = newToken;
+  }
+
+  return response;
+}
+
+/**
+ * Initialize CSRF token by fetching from server
+ * Should be called before any state-changing requests
+ */
+async function initCsrfToken() {
+  if (csrfToken) return; // Already initialized
+
+  try {
+    var response = await fetch('/api/csrf-token');
+    if (response.ok) {
+      var data = await response.json();
+      csrfToken = data.csrfToken || response.headers.get('X-CSRF-Token');
+    }
+  } catch (err) {
+    console.warn('[CLI Manager] Failed to fetch CSRF token:', err);
+  }
+}
+
+// ========== Active Execution Sync ==========
+
+/**
+ * Sync active CLI executions from server
+ * Called when view is opened to restore running execution state
+ */
+async function syncActiveExecutions() {
+  try {
+    var response = await fetch('/api/cli/active');
+    if (!response.ok) return;
+
+    var data = await response.json();
+    if (!data.executions || data.executions.length === 0) return;
+
+    // Restore the first active execution
+    var active = data.executions[0];
+
+    // Restore execution state
+    currentCliExecution = {
+      executionId: active.id,
+      tool: active.tool,
+      mode: active.mode,
+      startTime: active.startTime
+    };
+    cliExecutionOutput = active.output || '';
+
+    // Update UI if output panel exists
+    var outputPanel = document.getElementById('cli-output-panel');
+    var outputContent = document.getElementById('cli-output-content');
+
+    if (outputPanel && outputContent) {
+      outputPanel.style.display = 'block';
+      outputContent.textContent = cliExecutionOutput;
+      outputContent.scrollTop = outputContent.scrollHeight;
+
+      // Update status indicator
+      var statusIndicator = outputPanel.querySelector('.cli-status-indicator');
+      if (statusIndicator) {
+        statusIndicator.className = 'cli-status-indicator running';
+        statusIndicator.textContent = t('cli.running') || 'Running...';
+      }
+    }
+
+    console.log('[CLI Manager] Restored active execution:', active.id);
+  } catch (err) {
+    console.warn('[CLI Manager] Failed to sync active executions:', err);
+  }
+}
+
 // ========== Navigation Helpers ==========
 
 /**
@@ -92,9 +257,50 @@ async function loadCliCustomEndpoints() {
   }
 }
 
+// ========== CLI Wrapper Endpoints (CLI封装) ==========
+async function loadCliWrapperEndpoints() {
+  try {
+    var response = await fetch('/api/cli/settings');
+    if (!response.ok) throw new Error('Failed to load CLI wrapper endpoints');
+    var data = await response.json();
+    cliWrapperEndpoints = data.endpoints || [];
+    return cliWrapperEndpoints;
+  } catch (err) {
+    console.error('Failed to load CLI wrapper endpoints:', err);
+    cliWrapperEndpoints = [];
+    return [];
+  }
+}
+
+async function toggleCliWrapperEnabled(endpointId, enabled) {
+  try {
+    await initCsrfToken();
+    var response = await csrfFetch('/api/cli/settings/' + endpointId, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: enabled })
+    });
+    if (!response.ok) throw new Error('Failed to update CLI wrapper endpoint');
+    var data = await response.json();
+    if (data.success) {
+      // Update local state
+      var idx = cliWrapperEndpoints.findIndex(function(e) { return e.id === endpointId; });
+      if (idx >= 0) {
+        cliWrapperEndpoints[idx].enabled = enabled;
+      }
+      showRefreshToast((enabled ? t('cli.enabled') || 'Enabled' : t('cli.disabled') || 'Disabled') + ': ' + endpointId, 'success');
+    }
+    return data;
+  } catch (err) {
+    showRefreshToast((t('cli.updateFailed') || 'Failed to update') + ': ' + err.message, 'error');
+    throw err;
+  }
+}
+
 async function toggleEndpointEnabled(endpointId, enabled) {
   try {
-    var response = await fetch('/api/cli/endpoints/' + endpointId, {
+    await initCsrfToken();
+    var response = await csrfFetch('/api/cli/endpoints/' + endpointId, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ enabled: enabled })
@@ -118,7 +324,8 @@ async function toggleEndpointEnabled(endpointId, enabled) {
 
 async function syncEndpointToCliTools(endpoint) {
   try {
-    var response = await fetch('/api/cli/endpoints', {
+    await initCsrfToken();
+    var response = await csrfFetch('/api/cli/endpoints', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -146,12 +353,23 @@ window.syncEndpointToCliTools = syncEndpointToCliTools;
 
 // ========== CLI Tool Configuration ==========
 async function loadCliToolConfig() {
+  // 尝试从缓存获取
+  var cached = getCliCachedData('toolConfig');
+  if (cached) {
+    cliToolConfig = cached.config || null;
+    predefinedModels = cached.predefinedModels || {};
+    return cached;
+  }
+
   try {
     var response = await fetch('/api/cli/config');
     if (!response.ok) throw new Error('Failed to load CLI config');
     var data = await response.json();
     cliToolConfig = data.config || null;
     predefinedModels = data.predefinedModels || {};
+
+    // 缓存结果
+    setCliCacheData('toolConfig', data);
     return data;
   } catch (err) {
     console.error('Failed to load CLI config:', err);
@@ -163,13 +381,18 @@ async function loadCliToolConfig() {
 
 async function updateCliToolConfig(tool, updates) {
   try {
-    var response = await fetch('/api/cli/config/' + tool, {
+    // Ensure CSRF token is initialized before making state-changing request
+    await initCsrfToken();
+
+    var response = await csrfFetch('/api/cli/config/' + tool, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(updates)
     });
-    if (!response.ok) throw new Error('Failed to update CLI config');
     var data = await response.json();
+    if (!response.ok) {
+      throw new Error(data.error || 'Failed to update CLI config');
+    }
     if (data.success && cliToolConfig && cliToolConfig.tools) {
       cliToolConfig.tools[tool] = data.config;
     }
@@ -281,6 +504,25 @@ function buildToolConfigModalContent(tool, config, models, status) {
       '</div>' +
     '</div>' +
 
+    // Tags Section - Unified input with inline tags
+    '<div class="tool-config-section">' +
+      '<h4>Tags <span class="text-muted">(optional labels)</span></h4>' +
+      '<div class="tags-unified-input" id="tagsUnifiedInput">' +
+        (config.tags || []).map(function(tag) {
+          return '<span class="tag-item tag-' + escapeHtml(tag) + '">' + escapeHtml(tag) + '<button type="button" class="tag-remove" data-tag="' + escapeHtml(tag) + '">&times;</button></span>';
+        }).join('') +
+        '<input type="text" id="tagInput" class="tag-inline-input" placeholder="输入标签按 Enter 添加" />' +
+      '</div>' +
+      '<div class="predefined-tags-row">' +
+        '<button type="button" class="predefined-tag-btn" data-tag="分析"><i data-lucide="search" class="w-3 h-3"></i> 分析</button>' +
+        '<button type="button" class="predefined-tag-btn" data-tag="编码"><i data-lucide="code" class="w-3 h-3"></i> 编码</button>' +
+        '<button type="button" class="predefined-tag-btn" data-tag="Debug"><i data-lucide="bug" class="w-3 h-3"></i> Debug</button>' +
+        '<button type="button" class="predefined-tag-btn" data-tag="重构"><i data-lucide="refresh-cw" class="w-3 h-3"></i> 重构</button>' +
+        '<button type="button" class="predefined-tag-btn" data-tag="测试"><i data-lucide="check-square" class="w-3 h-3"></i> 测试</button>' +
+        '<button type="button" class="predefined-tag-btn" data-tag="文档"><i data-lucide="file-text" class="w-3 h-3"></i> 文档</button>' +
+      '</div>' +
+    '</div>' +
+
     // Footer
     '<div class="tool-config-footer">' +
       '<button class="btn btn-outline" onclick="closeModal()">' + t('common.cancel') + '</button>' +
@@ -292,6 +534,91 @@ function buildToolConfigModalContent(tool, config, models, status) {
 }
 
 function initToolConfigModalEvents(tool, currentConfig, models) {
+  // Local tags state (copy from config)
+  var currentTags = (currentConfig.tags || []).slice();
+
+  // Helper to render tags inline with input
+  function renderTags() {
+    var container = document.getElementById('tagsUnifiedInput');
+    var input = document.getElementById('tagInput');
+    if (!container) return;
+
+    // Remove existing tag items but keep the input
+    container.querySelectorAll('.tag-item').forEach(function(el) { el.remove(); });
+
+    // Insert tags before the input
+    currentTags.forEach(function(tag) {
+      var tagEl = document.createElement('span');
+      tagEl.className = 'tag-item tag-' + escapeHtml(tag);
+      tagEl.innerHTML = escapeHtml(tag) + '<button type="button" class="tag-remove" data-tag="' + escapeHtml(tag) + '">&times;</button>';
+      container.insertBefore(tagEl, input);
+    });
+
+    // Re-attach remove handlers
+    container.querySelectorAll('.tag-remove').forEach(function(btn) {
+      btn.onclick = function(e) {
+        e.stopPropagation();
+        var tagToRemove = this.getAttribute('data-tag');
+        currentTags = currentTags.filter(function(t) { return t !== tagToRemove; });
+        renderTags();
+      };
+    });
+
+    // Update predefined tag buttons state
+    document.querySelectorAll('.predefined-tag-btn').forEach(function(btn) {
+      var tag = btn.getAttribute('data-tag');
+      if (currentTags.indexOf(tag) !== -1) {
+        btn.classList.add('selected');
+        btn.disabled = true;
+      } else {
+        btn.classList.remove('selected');
+        btn.disabled = false;
+      }
+    });
+  }
+
+  // Click on unified input container focuses the input
+  var unifiedInput = document.getElementById('tagsUnifiedInput');
+  if (unifiedInput) {
+    unifiedInput.onclick = function(e) {
+      if (e.target === this) {
+        document.getElementById('tagInput').focus();
+      }
+    };
+  }
+
+  // Tag input handler
+  var tagInput = document.getElementById('tagInput');
+  if (tagInput) {
+    tagInput.onkeydown = function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        var newTag = this.value.trim();
+        if (newTag && currentTags.indexOf(newTag) === -1) {
+          currentTags.push(newTag);
+          renderTags();
+        }
+        this.value = '';
+      }
+    };
+  }
+
+  // Predefined tag click handlers
+  document.querySelectorAll('.predefined-tag-btn').forEach(function(btn) {
+    btn.onclick = function() {
+      var tag = this.getAttribute('data-tag');
+      if (tag && currentTags.indexOf(tag) === -1) {
+        currentTags.push(tag);
+        renderTags();
+      }
+    };
+  });
+
+  // Initialize tags display
+  renderTags();
+  // Initialize lucide icons for predefined buttons
+  if (window.lucide) lucide.createIcons();
+
   // Toggle Enable/Disable
   var toggleBtn = document.getElementById('toggleEnableBtn');
   if (toggleBtn) {
@@ -377,10 +704,15 @@ function initToolConfigModalEvents(tool, currentConfig, models) {
       try {
         await updateCliToolConfig(tool, {
           primaryModel: primaryModel,
-          secondaryModel: secondaryModel
+          secondaryModel: secondaryModel,
+          tags: currentTags
         });
+        // Reload config to reflect changes
+        await loadCliToolConfig();
         showRefreshToast('Configuration saved', 'success');
         closeModal();
+        renderToolsSection();
+        if (window.lucide) lucide.createIcons();
       } catch (err) {
         showRefreshToast('Failed to save: ' + err.message, 'error');
       }
@@ -392,26 +724,50 @@ function initToolConfigModalEvents(tool, currentConfig, models) {
 }
 
 // ========== Rendering ==========
-async function renderCliManager() {
-  var container = document.getElementById('mainContent');
-  if (!container) return;
 
-  // Hide stats grid and search for CLI view
-  var statsGrid = document.getElementById('statsGrid');
-  var searchInput = document.getElementById('searchInput');
-  if (statsGrid) statsGrid.style.display = 'none';
-  if (searchInput) searchInput.parentElement.style.display = 'none';
-
-  // Load data (including CodexLens status for tools section)
-  await Promise.all([
-    loadCliToolStatus(),
-    loadCodexLensStatus(),
-    loadCcwInstallations(),
-    loadCcwEndpointTools(),
-    loadLitellmApiEndpoints(),
-    loadCliCustomEndpoints()
-  ]);
+/**
+ * 构建 CLI Manager 骨架屏
+ * @returns {string} HTML 字符串
+ */
+function buildCliManagerSkeleton() {
+  return '<div class="space-y-6">' +
+    '<div class="flex items-center justify-between mb-4">' +
+      '<h2 class="text-lg font-semibold">' + (t('title.cliTools') || 'CLI Tools & CCW') + '</h2>' +
+    '</div>' +
+    '<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">' +
+      // 左侧 Tools 区域骨架
+      '<div class="card p-4">' +
+        '<div class="animate-pulse space-y-4">' +
+          '<div class="h-4 bg-muted rounded w-1/3"></div>' +
+          '<div class="h-16 bg-muted rounded"></div>' +
+          '<div class="h-16 bg-muted rounded"></div>' +
+          '<div class="h-16 bg-muted rounded"></div>' +
+        '</div>' +
+      '</div>' +
+      // 右侧 CCW 区域骨架
+      '<div class="card p-4">' +
+        '<div class="animate-pulse space-y-4">' +
+          '<div class="h-4 bg-muted rounded w-1/3"></div>' +
+          '<div class="h-20 bg-muted rounded"></div>' +
+          '<div class="h-20 bg-muted rounded"></div>' +
+        '</div>' +
+      '</div>' +
+    '</div>' +
+    // 底部区域骨架
+    '<div class="card p-4">' +
+      '<div class="animate-pulse space-y-4">' +
+        '<div class="h-4 bg-muted rounded w-1/4"></div>' +
+        '<div class="h-12 bg-muted rounded"></div>' +
+      '</div>' +
+    '</div>' +
+  '</div>';
+}
 
+/**
+ * 渲染 CLI Manager 实际内容（内部容器结构 + 各子面板）
+ * @param {HTMLElement} container - 主容器元素
+ */
+function renderCliManagerContent(container) {
   container.innerHTML = '<div class="status-manager">' +
     '<div class="status-two-column">' +
     '<div class="cli-section" id="tools-section"></div>' +
@@ -423,22 +779,89 @@ async function renderCliManager() {
     '</div>' +
     '<section id="storageCard" class="mb-6"></section>';
 
-  // Render sub-panels
+  // 渲染子面板
   renderToolsSection();
   renderCcwSection();
   renderLanguageSettingsSection();
   renderCliSettingsSection();
   renderCcwEndpointToolsSection();
 
-  // Initialize storage manager card
+  // 初始化存储管理器卡片
   if (typeof initStorageManager === 'function') {
     initStorageManager();
   }
 
-  // Initialize Lucide icons
+  // 初始化 Lucide 图标
   if (window.lucide) lucide.createIcons();
 }
 
+async function renderCliManager() {
+  var container = document.getElementById('mainContent');
+  if (!container) return;
+
+  // 隐藏统计网格和搜索框
+  var statsGrid = document.getElementById('statsGrid');
+  var searchInput = document.getElementById('searchInput');
+  if (statsGrid) statsGrid.style.display = 'none';
+  if (searchInput) searchInput.parentElement.style.display = 'none';
+
+  // 注册数据源（如果尚未注册）
+  registerCliDataSources();
+
+  // 1. 立即显示骨架屏
+  container.innerHTML = buildCliManagerSkeleton();
+  if (window.lucide) lucide.createIcons();
+
+  // 2. 尝试从缓存渲染（快速展示）
+  var cachedConfig = getCliCachedData('toolConfig');
+  var cachedStatus = getCliCachedData('toolStatus');
+  var hasCachedData = cachedConfig && cachedStatus;
+
+  if (hasCachedData) {
+    // 应用缓存数据
+    cliToolConfig = cachedConfig.config;
+    predefinedModels = cachedConfig.predefinedModels || {};
+    // 立即渲染缓存数据
+    renderCliManagerContent(container);
+    console.log('[CLI Manager] Rendered from cache');
+  }
+
+  // 3. 后台加载最新数据
+  try {
+    await Promise.all([
+      loadCliToolsConfig(),
+      loadCliToolStatus(),
+      loadCodexLensStatus(),
+      loadCcwInstallations(),
+      loadCcwEndpointTools(),
+      loadLitellmApiEndpoints(),
+      loadCliCustomEndpoints(),
+      loadCliWrapperEndpoints()
+    ]);
+
+    // 4. 用最新数据更新 UI（如果之前未渲染或数据有变化）
+    renderCliManagerContent(container);
+    console.log('[CLI Manager] Rendered with fresh data');
+  } catch (err) {
+    console.error('[CLI Manager] Failed to load data:', err);
+    // 如果没有缓存数据且加载失败，显示错误提示
+    if (!hasCachedData) {
+      container.innerHTML = '<div class="card p-4 text-center">' +
+        '<i data-lucide="alert-circle" class="w-8 h-8 text-muted-foreground mx-auto mb-2"></i>' +
+        '<p class="text-muted-foreground">' + (t('common.loadFailed') || 'Failed to load data') + '</p>' +
+        '<button class="btn btn-sm mt-2" onclick="renderCliManager()">' +
+          '<i data-lucide="refresh-cw" class="w-3 h-3 mr-1"></i>' +
+          (t('common.retry') || 'Retry') +
+        '</button>' +
+      '</div>';
+      if (window.lucide) lucide.createIcons();
+    }
+  }
+
+  // 同步活动执行
+  syncActiveExecutions();
+}
+
 // ========== Helper Functions ==========
 
 /**
@@ -502,77 +925,48 @@ function renderToolsSection() {
   var toolDescriptions = {
     gemini: t('cli.geminiDesc'),
     qwen: t('cli.qwenDesc'),
-    codex: t('cli.codexDesc')
+    codex: t('cli.codexDesc'),
+    claude: t('cli.claudeDesc') || 'Anthropic Claude Code CLI for AI-assisted development',
+    opencode: t('cli.opencodeDesc') || 'OpenCode CLI - Multi-provider AI coding assistant'
   };
 
-  var tools = ['gemini', 'qwen', 'codex'];
+  var tools = ['gemini', 'qwen', 'codex', 'claude', 'opencode'];
   var available = Object.values(cliToolStatus).filter(function(t) { return t.available; }).length;
 
   var toolsHtml = tools.map(function(tool) {
     var status = cliToolStatus[tool] || {};
     var isAvailable = status.available;
-    var isDefault = defaultCliTool === tool;
+    var toolConfig = cliToolConfig && cliToolConfig.tools ? cliToolConfig.tools[tool] : null;
+    var tags = toolConfig && toolConfig.tags ? toolConfig.tags : [];
+
+    // Build tags HTML with color classes
+    var tagsHtml = tags.length > 0
+      ? '<div class="tool-tags">' + tags.map(function(tag) {
+          return '<span class="tool-tag tag-' + escapeHtml(tag) + '">' + escapeHtml(tag) + '</span>';
+        }).join('') + '</div>'
+      : '';
 
     return '<div class="tool-item clickable ' + (isAvailable ? 'available' : 'unavailable') + '" onclick="showToolConfigModal(\'' + tool + '\')">' +
       '<div class="tool-item-left">' +
         '<span class="tool-status-dot ' + (isAvailable ? 'status-available' : 'status-unavailable') + '"></span>' +
         '<div class="tool-item-info">' +
           '<div class="tool-item-name">' + tool.charAt(0).toUpperCase() + tool.slice(1) +
-            (isDefault ? '<span class="tool-default-badge">' + t('cli.default') + '</span>' : '') +
             '<i data-lucide="settings" class="w-3 h-3 tool-config-icon"></i>' +
           '</div>' +
           '<div class="tool-item-desc">' + toolDescriptions[tool] + '</div>' +
+          tagsHtml +
         '</div>' +
       '</div>' +
       '<div class="tool-item-right">' +
         (isAvailable
           ? '<span class="tool-status-text success"><i data-lucide="check-circle" class="w-3.5 h-3.5"></i> ' + t('cli.ready') + '</span>'
           : '<span class="tool-status-text muted"><i data-lucide="circle-dashed" class="w-3.5 h-3.5"></i> ' + t('cli.notInstalled') + '</span>') +
-        (isAvailable && !isDefault
-          ? '<button class="btn-sm btn-outline" onclick="event.stopPropagation(); setDefaultCliTool(\'' + tool + '\')"><i data-lucide="star" class="w-3 h-3"></i> ' + t('cli.setDefault') + '</button>'
-          : '') +
       '</div>' +
     '</div>';
   }).join('');
 
-  // CodexLens item - simplified view with link to manager page
-  var codexLensHtml = '<div class="tool-item clickable ' + (codexLensStatus.ready ? 'available' : 'unavailable') + '" onclick="navigateToCodexLensManager()">' +
-    '<div class="tool-item-left">' +
-      '<span class="tool-status-dot ' + (codexLensStatus.ready ? 'status-available' : 'status-unavailable') + '"></span>' +
-      '<div class="tool-item-info">' +
-        '<div class="tool-item-name">CodexLens <span class="tool-type-badge">Index</span>' +
-          '<i data-lucide="external-link" class="w-3 h-3 tool-config-icon"></i></div>' +
-        '<div class="tool-item-desc">' + (codexLensStatus.ready ? t('cli.codexLensDesc') : t('cli.codexLensDescFull')) + '</div>' +
-      '</div>' +
-    '</div>' +
-    '<div class="tool-item-right">' +
-      (codexLensStatus.ready
-        ? '<span class="tool-status-text success"><i data-lucide="check-circle" class="w-3.5 h-3.5"></i> v' + (codexLensStatus.version || 'installed') + '</span>' +
-          '<button class="btn-sm btn-primary" onclick="event.stopPropagation(); navigateToCodexLensManager()"><i data-lucide="settings" class="w-3 h-3"></i> ' + t('cli.openManager') + '</button>'
-        : '<span class="tool-status-text muted"><i data-lucide="circle-dashed" class="w-3.5 h-3.5"></i> ' + t('cli.notInstalled') + '</span>' +
-          '<button class="btn-sm btn-primary" onclick="event.stopPropagation(); navigateToCodexLensManager()"><i data-lucide="settings" class="w-3 h-3"></i> ' + t('cli.openManager') + '</button>') +
-    '</div>' +
-  '</div>';
-
-  // Semantic Search item (only show if CodexLens is installed)
-  var semanticHtml = '';
-  if (codexLensStatus.ready) {
-    semanticHtml = '<div class="tool-item ' + (semanticStatus.available ? 'available' : 'unavailable') + '">' +
-      '<div class="tool-item-left">' +
-        '<span class="tool-status-dot ' + (semanticStatus.available ? 'status-available' : 'status-unavailable') + '"></span>' +
-        '<div class="tool-item-info">' +
-          '<div class="tool-item-name">Semantic Search <span class="tool-type-badge ai">AI</span></div>' +
-          '<div class="tool-item-desc">' + (semanticStatus.available ? 'AI-powered code understanding' : 'Natural language code search') + '</div>' +
-        '</div>' +
-      '</div>' +
-      '<div class="tool-item-right">' +
-        (semanticStatus.available
-          ? '<span class="tool-status-text success"><i data-lucide="sparkles" class="w-3.5 h-3.5"></i> ' + (semanticStatus.backend || 'Ready') + '</span>'
-          : '<span class="tool-status-text muted"><i data-lucide="circle-dashed" class="w-3.5 h-3.5"></i> Not Installed</span>' +
-            '<button class="btn-sm btn-primary" onclick="event.stopPropagation(); openSemanticInstallWizard()"><i data-lucide="brain" class="w-3 h-3"></i> Install</button>') +
-      '</div>' +
-    '</div>';
-  }
+  // CodexLens and Semantic Search removed from this list
+  // They are managed in the dedicated CodexLens Manager page (left menu)
 
   // API Endpoints section
   var apiEndpointsHtml = '';
@@ -619,6 +1013,45 @@ function renderToolsSection() {
     '</div>';
   }
 
+  // CLI Wrapper (CLI封装) section
+  var cliWrapperHtml = '';
+  if (cliWrapperEndpoints.length > 0) {
+    var wrapperItems = cliWrapperEndpoints.map(function(endpoint) {
+      var isEnabled = endpoint.enabled !== false;
+      var desc = endpoint.description || (t('cli.customClaudeSettings') || 'Custom Claude CLI settings');
+      // Show command hint with name for easy copying
+      var commandHint = 'ccw cli --tool ' + endpoint.name;
+
+      return '<div class="tool-item clickable ' + (isEnabled ? 'available' : 'unavailable') + '" onclick="navigateToApiSettings(\'' + endpoint.id + '\')">' +
+        '<div class="tool-item-left">' +
+          '<span class="tool-status-dot ' + (isEnabled ? 'status-available' : 'status-unavailable') + '"></span>' +
+          '<div class="tool-item-info">' +
+            '<div class="tool-item-name">' + escapeHtml(endpoint.name) + ' <span class="tool-type-badge" style="background: var(--primary); color: white;">' + (t('cli.wrapper') || 'Wrapper') + '</span></div>' +
+            '<div class="tool-item-desc">' + escapeHtml(desc) + '</div>' +
+            '<div class="tool-item-command" style="font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.25rem;">' + escapeHtml(commandHint) + '</div>' +
+          '</div>' +
+        '</div>' +
+        '<div class="tool-item-right">' +
+          '<label class="toggle-switch" onclick="event.stopPropagation()">' +
+            '<input type="checkbox" ' + (isEnabled ? 'checked' : '') + ' onchange="toggleCliWrapperEnabled(\'' + endpoint.id + '\', this.checked); renderToolsSection();">' +
+            '<span class="toggle-slider"></span>' +
+          '</label>' +
+        '</div>' +
+      '</div>';
+    }).join('');
+
+    var enabledCount = cliWrapperEndpoints.filter(function(e) { return e.enabled !== false; }).length;
+    cliWrapperHtml = '<div class="tools-subsection" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">' +
+      '<div class="section-header-left" style="margin-bottom: 0.5rem;">' +
+        '<h4 style="font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">' +
+          '<i data-lucide="package-2" class="w-4 h-4"></i> ' + (t('cli.cliWrapper') || 'CLI Wrapper') +
+        '</h4>' +
+        '<span class="section-count">' + enabledCount + '/' + cliWrapperEndpoints.length + ' ' + (t('cli.enabled') || 'enabled') + '</span>' +
+      '</div>' +
+      '<div class="tools-list">' + wrapperItems + '</div>' +
+    '</div>';
+  }
+
   container.innerHTML = '<div class="section-header">' +
       '<div class="section-header-left">' +
         '<h3><i data-lucide="terminal" class="w-4 h-4"></i> ' + t('cli.tools') + '</h3>' +
@@ -630,14 +1063,34 @@ function renderToolsSection() {
     '</div>' +
     '<div class="tools-list">' +
       toolsHtml +
-      codexLensHtml +
-      semanticHtml +
     '</div>' +
-    apiEndpointsHtml;
+    apiEndpointsHtml +
+    cliWrapperHtml;
 
   if (window.lucide) lucide.createIcons();
 }
 
+/**
+ * Navigate to API Settings page and open the CLI wrapper endpoint for editing
+ */
+function navigateToApiSettings(endpointId) {
+  // Store the endpoint ID to edit after navigation
+  window.pendingCliWrapperEdit = endpointId;
+
+  var navItem = document.querySelector('.nav-item[data-view="api-settings"]');
+  if (navItem) {
+    navItem.click();
+  } else {
+    // Fallback: try to render directly
+    if (typeof renderApiSettings === 'function') {
+      currentView = 'api-settings';
+      renderApiSettings();
+    } else {
+      showRefreshToast(t('common.error') + ': API Settings not available', 'error');
+    }
+  }
+}
+
 // ========== CCW Section (Right Column) ==========
 function renderCcwSection() {
   var container = document.getElementById('ccw-section');
@@ -713,6 +1166,8 @@ function renderCcwSection() {
 // ========== Language Settings State ==========
 var chineseResponseEnabled = false;
 var chineseResponseLoading = false;
+var codexChineseResponseEnabled = false;
+var codexChineseResponseLoading = false;
 var windowsPlatformEnabled = false;
 var windowsPlatformLoading = false;
 
@@ -722,12 +1177,14 @@ async function loadLanguageSettings() {
     var response = await fetch('/api/language/chinese-response');
     if (!response.ok) throw new Error('Failed to load language settings');
     var data = await response.json();
-    chineseResponseEnabled = data.enabled || false;
+    chineseResponseEnabled = data.claudeEnabled || data.enabled || false;
+    codexChineseResponseEnabled = data.codexEnabled || false;
     return data;
   } catch (err) {
     console.error('Failed to load language settings:', err);
     chineseResponseEnabled = false;
-    return { enabled: false, guidelinesExists: false };
+    codexChineseResponseEnabled = false;
+    return { claudeEnabled: false, codexEnabled: false, guidelinesExists: false };
   }
 }
 
@@ -745,8 +1202,13 @@ async function loadWindowsPlatformSettings() {
   }
 }
 
-async function toggleChineseResponse(enabled) {
-  if (chineseResponseLoading) return;
+async function toggleChineseResponse(enabled, target) {
+  // target: 'claude' (default) or 'codex'
+  target = target || 'claude';
+  var isCodex = target === 'codex';
+  var loadingVar = isCodex ? 'codexChineseResponseLoading' : 'chineseResponseLoading';
+
+  if (isCodex ? codexChineseResponseLoading : chineseResponseLoading) return;
 
   // Pre-check: verify CCW workflows are installed (only when enabling)
   if (enabled && typeof ccwInstallStatus !== 'undefined' && !ccwInstallStatus.installed) {
@@ -757,13 +1219,17 @@ async function toggleChineseResponse(enabled) {
     }
   }
 
-  chineseResponseLoading = true;
+  if (isCodex) {
+    codexChineseResponseLoading = true;
+  } else {
+    chineseResponseLoading = true;
+  }
 
   try {
     var response = await fetch('/api/language/chinese-response', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ enabled: enabled })
+      body: JSON.stringify({ enabled: enabled, target: target })
     });
 
     if (!response.ok) {
@@ -779,18 +1245,27 @@ async function toggleChineseResponse(enabled) {
     }
 
     var data = await response.json();
-    chineseResponseEnabled = data.enabled;
+    if (isCodex) {
+      codexChineseResponseEnabled = data.enabled;
+    } else {
+      chineseResponseEnabled = data.enabled;
+    }
 
     // Update UI
     renderLanguageSettingsSection();
 
     // Show toast
-    showRefreshToast(enabled ? t('lang.enableSuccess') : t('lang.disableSuccess'), 'success');
+    var toolName = isCodex ? 'Codex' : 'Claude';
+    showRefreshToast(toolName + ': ' + (enabled ? t('lang.enableSuccess') : t('lang.disableSuccess')), 'success');
   } catch (err) {
     console.error('Failed to toggle Chinese response:', err);
     // Error already shown in the !response.ok block
   } finally {
-    chineseResponseLoading = false;
+    if (isCodex) {
+      codexChineseResponseLoading = false;
+    } else {
+      chineseResponseLoading = false;
+    }
   }
 }
 
@@ -848,7 +1323,7 @@ async function renderLanguageSettingsSection() {
   if (!container) return;
 
   // Load current state if not loaded
-  if (!chineseResponseEnabled && !chineseResponseLoading) {
+  if (!chineseResponseEnabled && !codexChineseResponseEnabled && !chineseResponseLoading) {
     await loadLanguageSettings();
   }
   if (!windowsPlatformEnabled && !windowsPlatformLoading) {
@@ -861,22 +1336,41 @@ async function renderLanguageSettingsSection() {
       '</div>' +
     '</div>' +
     '<div class="cli-settings-grid" style="grid-template-columns: 1fr 1fr;">' +
+      // Chinese Response - Claude
       '<div class="cli-setting-item">' +
         '<label class="cli-setting-label">' +
           '<i data-lucide="message-square-text" class="w-3 h-3"></i>' +
-          t('lang.chinese') +
+          t('lang.chinese') + ' <span class="badge badge-sm badge-primary">Claude</span>' +
         '</label>' +
         '<div class="cli-setting-control">' +
           '<label class="cli-toggle">' +
-            '<input type="checkbox"' + (chineseResponseEnabled ? ' checked' : '') + ' onchange="toggleChineseResponse(this.checked)"' + (chineseResponseLoading ? ' disabled' : '') + '>' +
+            '<input type="checkbox"' + (chineseResponseEnabled ? ' checked' : '') + ' onchange="toggleChineseResponse(this.checked, \'claude\')"' + (chineseResponseLoading ? ' disabled' : '') + '>' +
             '<span class="cli-toggle-slider"></span>' +
           '</label>' +
           '<span class="cli-setting-status ' + (chineseResponseEnabled ? 'enabled' : 'disabled') + '">' +
             (chineseResponseEnabled ? t('lang.enabled') : t('lang.disabled')) +
           '</span>' +
         '</div>' +
-        '<p class="cli-setting-desc">' + t('lang.chineseDesc') + '</p>' +
+        '<p class="cli-setting-desc">' + t('lang.chineseDescClaude') + '</p>' +
+      '</div>' +
+      // Chinese Response - Codex
+      '<div class="cli-setting-item">' +
+        '<label class="cli-setting-label">' +
+          '<i data-lucide="message-square-text" class="w-3 h-3"></i>' +
+          t('lang.chinese') + ' <span class="badge badge-sm badge-secondary">Codex</span>' +
+        '</label>' +
+        '<div class="cli-setting-control">' +
+          '<label class="cli-toggle">' +
+            '<input type="checkbox"' + (codexChineseResponseEnabled ? ' checked' : '') + ' onchange="toggleChineseResponse(this.checked, \'codex\')"' + (codexChineseResponseLoading ? ' disabled' : '') + '>' +
+            '<span class="cli-toggle-slider"></span>' +
+          '</label>' +
+          '<span class="cli-setting-status ' + (codexChineseResponseEnabled ? 'enabled' : 'disabled') + '">' +
+            (codexChineseResponseEnabled ? t('lang.enabled') : t('lang.disabled')) +
+          '</span>' +
+        '</div>' +
+        '<p class="cli-setting-desc">' + t('lang.chineseDescCodex') + '</p>' +
       '</div>' +
+      // Windows Platform
       '<div class="cli-setting-item">' +
         '<label class="cli-setting-label">' +
           '<i data-lucide="monitor" class="w-3 h-3"></i>' +