feat(cli): Add CLI Manager with status and history components

- Implemented CLI History Component to display execution history with filtering and search capabilities.
- Created CLI Status Component to show availability of CLI tools and allow setting a default tool.
- Enhanced notifications to handle CLI execution events.
- Integrated CLI Manager view to combine status and history panels for better user experience.
- Developed CLI Executor Tool for unified execution of external CLI tools (Gemini, Qwen, Codex) with streaming output.
- Added functionality to save and retrieve CLI execution history.
- Updated dashboard HTML to include navigation for CLI tools management.

ccw/src/templates/dashboard-js/components/cli-status.js

@@ -0,0 +1,101 @@
+// CLI Status Component
+// Displays CLI tool availability status and allows setting default tool
+
+// ========== CLI State ==========
+let cliToolStatus = { gemini: {}, qwen: {}, codex: {} };
+let defaultCliTool = 'gemini';
+
+// ========== Initialization ==========
+function initCliStatus() {
+  // Load CLI status on init
+  loadCliToolStatus();
+}
+
+// ========== Data Loading ==========
+async function loadCliToolStatus() {
+  try {
+    const response = await fetch('/api/cli/status');
+    if (!response.ok) throw new Error('Failed to load CLI status');
+    const data = await response.json();
+    cliToolStatus = data;
+
+    // Update badge
+    updateCliBadge();
+
+    return data;
+  } catch (err) {
+    console.error('Failed to load CLI status:', err);
+    return null;
+  }
+}
+
+// ========== Badge Update ==========
+function updateCliBadge() {
+  const badge = document.getElementById('badgeCliTools');
+  if (badge) {
+    const available = Object.values(cliToolStatus).filter(t => t.available).length;
+    const total = Object.keys(cliToolStatus).length;
+    badge.textContent = `${available}/${total}`;
+    badge.classList.toggle('text-success', available === total);
+    badge.classList.toggle('text-warning', available > 0 && available < total);
+    badge.classList.toggle('text-destructive', available === 0);
+  }
+}
+
+// ========== Rendering ==========
+function renderCliStatus() {
+  const container = document.getElementById('cli-status-panel');
+  if (!container) return;
+
+  const tools = ['gemini', 'qwen', 'codex'];
+
+  const toolsHtml = tools.map(tool => {
+    const status = cliToolStatus[tool] || {};
+    const isAvailable = status.available;
+    const isDefault = defaultCliTool === tool;
+
+    return `
+      <div class="cli-tool-card ${isAvailable ? 'available' : 'unavailable'}">
+        <div class="cli-tool-header">
+          <span class="cli-tool-status ${isAvailable ? 'status-available' : 'status-unavailable'}"></span>
+          <span class="cli-tool-name">${tool.charAt(0).toUpperCase() + tool.slice(1)}</span>
+          ${isDefault ? '<span class="cli-tool-badge">Default</span>' : ''}
+        </div>
+        <div class="cli-tool-info">
+          ${isAvailable
+            ? `<span class="text-success">Ready</span>`
+            : `<span class="text-muted-foreground">Not Installed</span>`
+          }
+        </div>
+        ${isAvailable && !isDefault
+          ? `<button class="btn-sm btn-outline" onclick="setDefaultCliTool('${tool}')">Set Default</button>`
+          : ''
+        }
+      </div>
+    `;
+  }).join('');
+
+  container.innerHTML = `
+    <div class="cli-status-header">
+      <h3>CLI Tools</h3>
+      <button class="btn-icon" onclick="loadCliToolStatus()" title="Refresh">
+        <i data-lucide="refresh-cw"></i>
+      </button>
+    </div>
+    <div class="cli-tools-grid">
+      ${toolsHtml}
+    </div>
+  `;
+
+  // Initialize Lucide icons
+  if (window.lucide) {
+    lucide.createIcons();
+  }
+}
+
+// ========== Actions ==========
+function setDefaultCliTool(tool) {
+  defaultCliTool = tool;
+  renderCliStatus();
+  showRefreshToast(`Default CLI tool set to ${tool}`, 'success');
+}