Add tool strategy documentation with triggering mechanisms and text processing references

- Introduced auto and manual triggering mechanisms for Exa. - Added quick reference guides for sed and awk text processing. - Established a fallback strategy for handling edit failures.
2026-02-05 01:50:27 +08:00 · 2025-12-07 17:09:07 +08:00
parent 43c962b48b
commit 0a96ee16a8
10 changed files with 369 additions and 9179 deletions
--- a/.claude/workflows/mcp-tool-strategy.md
+++ b/.claude/workflows/mcp-tool-strategy.md
@@ -1,11 +0,0 @@
-# MCP Tool Strategy: Exa Usage
-
-## ⚡ Exa Triggering Mechanisms
-
-**Auto-Trigger**:
- User mentions "exa-code" or code-related queries → `mcp__exa__get_code_context_exa`
- Need current web information → `mcp__exa__web_search_exa`
-
-**Manual Trigger**:
- Complex API research → Exa Code Context
- Real-time information needs → Exa Web Search
--- a/.claude/workflows/tool-strategy.md
+++ b/.claude/workflows/tool-strategy.md
@@ -0,0 +1,71 @@
+# Tool Strategy
+
+## ⚡ Exa Triggering Mechanisms
+
+**Auto-Trigger**:
+- User mentions "exa-code" or code-related queries → `mcp__exa__get_code_context_exa`
+- Need current web information → `mcp__exa__web_search_exa`
+
+**Manual Trigger**:
+- Complex API research → Exa Code Context
+- Real-time information needs → Exa Web Search
+
+## ⚡ Bash Text Processing (sed/awk)
+
+**When to Use**: Edit tool fails 2+ times on same file
+
+### sed Quick Reference
+
+```bash
+# Replace first occurrence per line
+sed 's/old/new/' file.txt
+
+# Replace all occurrences (global)
+sed 's/old/new/g' file.txt
+
+# In-place edit (modify file directly)
+sed -i 's/old/new/g' file.txt
+
+# Delete lines matching pattern
+sed '/pattern/d' file.txt
+
+# Insert line before match
+sed '/pattern/i\new line' file.txt
+
+# Insert line after match
+sed '/pattern/a\new line' file.txt
+
+# Replace on specific line number
+sed '5s/old/new/' file.txt
+
+# Multi-line replacement (escape newlines)
+sed ':a;N;$!ba;s/old\npattern/new\ntext/g' file.txt
+```
+
+### awk Quick Reference
+
+```bash
+# Print specific column
+awk '{print $1}' file.txt
+
+# Print lines matching pattern
+awk '/pattern/' file.txt
+
+# Replace field value
+awk '{$2="new"; print}' file.txt
+
+# Conditional replacement
+awk '/pattern/{gsub(/old/,"new")}1' file.txt
+
+# Insert line after match
+awk '/pattern/{print; print "new line"; next}1' file.txt
+
+# Multi-field operations
+awk -F',' '{print $1, $3}' file.csv
+```
+
+### Fallback Strategy
+
+1. **Edit fails 2+ times** → Try sed for simple replacements
+2. **sed fails** → Try awk for complex patterns
+3. **awk fails** → Use Write to recreate file
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,7 +5,7 @@
 This document defines project-specific coding standards and development principles.
 ### CLI Tool Context Protocols
 For all CLI tool usage, command syntax, and integration guidelines:
- **MCP Tool Strategy**: @~/.claude/workflows/mcp-tool-strategy.md
+- **Tool Strategy**: @~/.claude/workflows/tool-strategy.md
 - **Intelligent Context Strategy**: @~/.claude/workflows/intelligent-tools-strategy.md
 - **Context Search Commands**: @~/.claude/workflows/context-search-strategy.md

@@ -73,6 +73,7 @@ For all CLI tool usage, command syntax, and integration guidelines:
 - Update plan documentation and progress tracking as you go
 - Learn from existing implementations
 - Stop after 3 failed attempts and reassess
+- **Edit fallback**: When Edit tool fails 2+ times on same file, try Bash sed/awk first, then Write to recreate if still failing

 ## Platform-Specific Guidelines

--- a/ccw/src/templates/dashboard-js/components/tabs-other.js
+++ b/ccw/src/templates/dashboard-js/components/tabs-other.js
@@ -157,22 +157,36 @@ function renderReviewContent(review) {
 // Lite Context Tab Rendering
 // ==========================================

-function renderLiteContextContent(context, session) {
+function renderLiteContextContent(context, explorations, session) {
  const plan = session.plan || {};
+  let sections = [];
+
+  // Render explorations if available (from exploration-*.json files)
+  if (explorations && explorations.manifest) {
+    sections.push(renderExplorationContext(explorations));
+  }

  // If we have context from context-package.json
  if (context) {
-    return `
-      <div class="context-tab-content">
-        <pre class="json-content">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
+    sections.push(`
+      <div class="context-package-section">
+        <div class="collapsible-section">
+          <div class="collapsible-header">
+            <span class="collapse-icon">▶</span>
+            <span class="section-label">Context Package</span>
+          </div>
+          <div class="collapsible-content collapsed">
+            <pre class="json-content">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
+          </div>
+        </div>
      </div>
-    `;
+    `);
  }

  // Fallback: show context from plan
  if (plan.focus_paths?.length || plan.summary) {
-    return `
-      <div class="context-tab-content">
+    sections.push(`
+      <div class="plan-context-section">
        ${plan.summary ? `
          <div class="context-section">
            <h4>Summary</h4>
@@ -188,18 +202,24 @@ function renderLiteContextContent(context, session) {
          </div>
        ` : ''}
      </div>
-    `;
+    `);
+  }
+
+  // If we have any sections, wrap them
+  if (sections.length > 0) {
+    return `<div class="context-tab-content">${sections.join('')}</div>`;
  }

  return `
    <div class="tab-empty-state">
      <div class="empty-icon">📦</div>
      <div class="empty-title">No Context Data</div>
-      <div class="empty-text">No context-package.json found for this session.</div>
+      <div class="empty-text">No context-package.json or exploration files found for this session.</div>
    </div>
  `;
 }

+
 // ==========================================
 // Exploration Context Rendering
 // ==========================================
@@ -228,24 +248,28 @@ function renderExplorationContext(explorations) {
  // Render each exploration angle as collapsible section
  const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points'];
  const explorationTitles = {
-    'architecture': 'Architecture',
-    'dependencies': 'Dependencies',
-    'patterns': 'Patterns',
-    'integration-points': 'Integration Points'
+    'architecture': '🏗️ Architecture',
+    'dependencies': '📦 Dependencies',
+    'patterns': '🔄 Patterns',
+    'integration-points': '🔌 Integration Points'
  };

  for (const angle of explorationOrder) {
    const expData = data[angle];
-    if (!expData) continue;
+    if (!expData) {
+      continue;
+    }
+
+    const angleContent = renderExplorationAngle(angle, expData);

    sections.push(`
      <div class="exploration-section collapsible-section">
-        <div class="collapsible-header" onclick="toggleSection(this)">
+        <div class="collapsible-header">
          <span class="collapse-icon">▶</span>
          <span class="section-label">${explorationTitles[angle] || angle}</span>
        </div>
        <div class="collapsible-content collapsed">
-          ${renderExplorationAngle(angle, expData)}
+          ${angleContent}
        </div>
      </div>
    `);
@@ -276,8 +300,8 @@ function renderExplorationAngle(angle, data) {
          ${data.relevant_files.slice(0, 10).map(f => `
            <div class="file-item-exp">
              <div class="file-path"><code>${escapeHtml(f.path || '')}</code></div>
-              <div class="file-relevance">Relevance: ${(f.relevance * 100).toFixed(0)}%</div>
-              ${f.rationale ? `<div class="file-rationale">${escapeHtml(f.rationale.substring(0, 200))}...</div>` : ''}
+              <div class="file-relevance">Relevance: ${f.relevance ? (f.relevance * 100).toFixed(0) : 0}%</div>
+              ${f.rationale ? `<div class="file-rationale">${escapeHtml((f.rationale || "").substring(0, 200))}...</div>` : ''}
            </div>
          `).join('')}
          ${data.relevant_files.length > 10 ? `<div class="more-files">... and ${data.relevant_files.length - 10} more files</div>` : ''}
@@ -349,5 +373,6 @@ function renderExplorationAngle(angle, data) {
    `);
  }

-  return content.join('') || '<p>No data available</p>';
+  const result = content.join('') || '<p>No data available</p>';
+  return result;
 }
--- a/ccw/src/templates/dashboard-js/utils.js
+++ b/ccw/src/templates/dashboard-js/utils.js
@@ -132,3 +132,22 @@ function toggleSection(header) {
    }
  }
 }
+
+/**
+ * Initialize collapsible sections within a container
+ * @param {HTMLElement} container - Container element to search within
+ */
+function initCollapsibleSections(container) {
+  setTimeout(() => {
+    const headers = container.querySelectorAll('.collapsible-header');
+    headers.forEach(header => {
+      if (!header._clickBound) {
+        header._clickBound = true;
+        header.addEventListener('click', function(e) {
+          e.stopPropagation();
+          toggleSection(this);
+        });
+      }
+    });
+  }, 100);
+}
--- a/ccw/src/templates/dashboard-js/views/lite-tasks.js
+++ b/ccw/src/templates/dashboard-js/views/lite-tasks.js
@@ -347,17 +347,14 @@ async function loadAndRenderLiteContextTab(session, contentArea) {
        const data = await response.json();
        contentArea.innerHTML = renderLiteContextContent(data.context, data.explorations, session);
        
-        // Re-initialize collapsible sections for explorations
-        setTimeout(() => {
-          document.querySelectorAll('.collapsible-header').forEach(header => {
-            header.addEventListener('click', () => toggleSection(header));
-          });
-        }, 50);
+        // Re-initialize collapsible sections for explorations (scoped to contentArea)
+        initCollapsibleSections(contentArea);
        return;
      }
    }
    // Fallback: show plan context if available
    contentArea.innerHTML = renderLiteContextContent(null, null, session);
+    initCollapsibleSections(contentArea);
  } catch (err) {
    contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
  }
--- a/ccw/src/templates/dashboard-js/views/mcp-manager.js
+++ b/ccw/src/templates/dashboard-js/views/mcp-manager.js
@@ -81,36 +81,70 @@ async function renderMcpManager() {
        `}
      </div>

-      <!-- All Projects Overview -->
+      <!-- All Projects MCP Overview Table -->
      <div class="mcp-section mt-6">
        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">All Projects</h3>
+          <h3 class="text-lg font-semibold text-foreground">All Projects MCP Overview</h3>
          <span class="text-sm text-muted-foreground">${Object.keys(mcpAllProjects).length} projects</span>
        </div>

-        <div class="mcp-projects-list bg-card border border-border rounded-lg overflow-hidden">
-          ${Object.entries(mcpAllProjects).map(([path, config]) => {
-            const servers = config.mcpServers || {};
-            const serverCount = Object.keys(servers).length;
-            const isCurrentProject = path === currentPath;
-            return `
-              <div class="mcp-project-item flex items-center justify-between px-4 py-3 border-b border-border last:border-b-0 hover:bg-hover cursor-pointer ${isCurrentProject ? 'bg-primary-light' : ''}"
-                   onclick="switchToProject('${escapeHtml(path)}')"
-                   data-project-path="${escapeHtml(path)}">
-                <div class="flex items-center gap-3 min-w-0">
-                  <span class="text-lg">${isCurrentProject ? '📍' : '📁'}</span>
-                  <div class="min-w-0">
-                    <div class="font-medium text-foreground truncate" title="${escapeHtml(path)}">${escapeHtml(path.split('\\').pop() || path)}</div>
-                    <div class="text-xs text-muted-foreground truncate">${escapeHtml(path)}</div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2 shrink-0">
-                  <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full ${serverCount > 0 ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">${serverCount} MCP</span>
-                  ${isCurrentProject ? '<span class="text-xs text-primary font-medium">Current</span>' : ''}
-                </div>
-              </div>
-            `;
-          }).join('')}
+        <div class="mcp-projects-table bg-card border border-border rounded-lg overflow-hidden">
+          <table class="w-full">
+            <thead class="bg-muted/50">
+              <tr>
+                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">Project</th>
+                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">MCP Servers</th>
+                <th class="text-center px-4 py-3 text-sm font-semibold text-foreground border-b border-border w-24">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${Object.entries(mcpAllProjects).map(([path, config]) => {
+                const servers = config.mcpServers || {};
+                const projectDisabled = config.disabledMcpServers || [];
+                const serverNames = Object.keys(servers);
+                const isCurrentProject = path === currentPath;
+                const enabledCount = serverNames.filter(s => !projectDisabled.includes(s)).length;
+
+                return `
+                  <tr class="border-b border-border last:border-b-0 ${isCurrentProject ? 'bg-primary/5' : 'hover:bg-hover/50'}">
+                    <td class="px-4 py-3">
+                      <div class="flex items-center gap-2 min-w-0">
+                        <span class="text-base shrink-0">${isCurrentProject ? '📍' : '📁'}</span>
+                        <div class="min-w-0">
+                          <div class="font-medium text-foreground truncate text-sm" title="${escapeHtml(path)}">
+                            ${escapeHtml(path.split('\\').pop() || path)}
+                            ${isCurrentProject ? '<span class="ml-2 text-xs text-primary font-medium">(Current)</span>' : ''}
+                          </div>
+                          <div class="text-xs text-muted-foreground truncate">${escapeHtml(path)}</div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-4 py-3">
+                      <div class="flex flex-wrap gap-1.5">
+                        ${serverNames.length === 0
+                          ? '<span class="text-xs text-muted-foreground italic">No MCP servers</span>'
+                          : serverNames.map(serverName => {
+                              const isEnabled = !projectDisabled.includes(serverName);
+                              return `
+                                <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full ${isEnabled ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">
+                                  <span class="w-1.5 h-1.5 rounded-full ${isEnabled ? 'bg-success' : 'bg-muted-foreground'}"></span>
+                                  ${escapeHtml(serverName)}
+                                </span>
+                              `;
+                            }).join('')
+                        }
+                      </div>
+                    </td>
+                    <td class="px-4 py-3 text-center">
+                      <span class="inline-flex items-center px-2 py-1 text-xs font-semibold rounded-full ${serverNames.length > 0 ? 'bg-success-light text-success' : 'bg-hover text-muted-foreground'}">
+                        ${enabledCount}/${serverNames.length}
+                      </span>
+                    </td>
+                  </tr>
+                `;
+              }).join('')}
+            </tbody>
+          </table>
        </div>
      </div>
    </div>
@@ -235,8 +269,3 @@ function attachMcpEventListeners() {
    });
  });
 }
-
-function switchToProject(path) {
-  // Use existing path selection mechanism
-  selectPath(path.replace(/\\\\/g, '\\'));
-}
--- a/ccw/src/templates/dashboard.css
+++ b/ccw/src/templates/dashboard.css
@@ -59,6 +59,22 @@ body {
  padding: 10px 0;
 }

+/* Nav item active state */
+.nav-item.active {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--primary));
+  font-weight: 500;
+}
+
+.nav-item.active .nav-icon {
+  color: hsl(var(--primary));
+}
+
+.nav-item.active .nav-count {
+  background-color: hsl(var(--primary));
+  color: white;
+}
+
 .sidebar.collapsed .toggle-icon {
  transform: rotate(180deg);
 }
@@ -3540,27 +3556,49 @@ ol.step-commands code {

 .exploration-header {
  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  padding: 16px;
+  background: linear-gradient(135deg, var(--primary-bg, #eff6ff) 0%, var(--bg-secondary, #f9fafb) 100%);
+  border-radius: 12px;
+  border: 1px solid var(--border-color, #e5e7eb);
 }

 .exploration-header h4 {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
  color: var(--text-primary, #111827);
-  margin: 0 0 8px 0;
+  margin: 0 0 12px 0;
  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.exploration-header h4::before {
+  content: '🔍';
+  font-size: 16px;
 }

 .exploration-meta {
  display: flex;
-  gap: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
 }

+.exploration-meta .meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  background: var(--bg-primary, #fff);
+  border-radius: 16px;
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
 .exploration-meta .meta-item strong {
-  color: var(--text-primary, #111827);
+  color: var(--primary, #3b82f6);
+  font-weight: 600;
 }

 .exploration-section {
@@ -3584,6 +3622,7 @@ ol.step-commands code {
 }

 .exploration-section .collapsible-content {
+  display: block;
  padding: 12px;
  background: var(--bg-primary, #fff);
 }
@@ -3592,8 +3631,14 @@ ol.step-commands code {
  display: none;
 }

+/* Exploration Field Cards */
 .exp-field {
  margin-bottom: 16px;
+  padding: 14px;
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }

 .exp-field:last-child {
@@ -3601,51 +3646,82 @@ ol.step-commands code {
 }

 .exp-field label {
-  display: block;
-  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--text-secondary, #6b7280);
-  margin-bottom: 6px;
-  letter-spacing: 0.5px;
+  color: var(--primary, #3b82f6);
+  margin-bottom: 10px;
+  padding: 4px 10px;
+  background: var(--primary-bg, #eff6ff);
+  border-radius: 4px;
 }

 .exp-field p {
  font-size: 13px;
-  line-height: 1.6;
+  line-height: 1.7;
  color: var(--text-primary, #374151);
  margin: 0;
+  white-space: pre-wrap;
 }

+/* Relevant Files Grid */
 .relevant-files-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
 }

+/* File Item Card */
 .file-item-exp {
-  padding: 8px 10px;
+  padding: 12px 14px;
  background: var(--bg-secondary, #f9fafb);
-  border-radius: 4px;
-  border-left: 3px solid var(--primary, #3b82f6);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #e5e7eb);
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.file-item-exp:hover {
+  border-color: var(--primary, #3b82f6);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+}
+
+.file-item-exp .file-path {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.file-item-exp .file-path::before {
+  content: '📄';
+  font-size: 12px;
 }

 .file-item-exp .file-path code {
  font-size: 12px;
+  font-weight: 500;
  color: var(--text-primary, #111827);
+  word-break: break-all;
 }

 .file-item-exp .file-relevance {
+  display: inline-block;
  font-size: 11px;
-  color: var(--text-secondary, #6b7280);
-  margin-top: 4px;
+  font-weight: 600;
+  color: var(--success, #10b981);
+  background: var(--success-bg, #ecfdf5);
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-bottom: 6px;
 }

 .file-item-exp .file-rationale {
  font-size: 12px;
-  color: var(--text-tertiary, #9ca3af);
-  margin-top: 4px;
-  line-height: 1.4;
+  color: var(--text-secondary, #6b7280);
+  line-height: 1.5;
+  margin: 0;
 }

 .more-files {
@@ -3696,6 +3772,49 @@ ol.step-commands code {
  color: var(--text-success, #065f46);
 }

+
+/* Context Package Section in Lite Tasks */
+.context-package-section {
+  margin-top: 16px;
+}
+
+.context-package-section .collapsible-section {
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.context-package-section .collapsible-header {
+  padding: 10px 12px;
+  background: var(--bg-secondary, #f9fafb);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.context-package-section .collapsible-header:hover {
+  background: var(--bg-hover, #f3f4f6);
+}
+
+.context-package-section .collapsible-content {
+  display: block;
+  padding: 12px;
+  background: var(--bg-primary, #fff);
+}
+
+.context-package-section .collapsible-content.collapsed {
+  display: none;
+}
+
+/* Plan Context Section in Lite Tasks */
+.plan-context-section {
+  margin-top: 16px;
+  padding: 16px;
+  background: var(--bg-secondary, #f9fafb);
+  border-radius: 6px;
+}
+
 /* Plan drawer styles for lite tasks */
 .mod-point-item {
  padding: 8px 10px;
@@ -5779,6 +5898,32 @@ code.ctx-meta-chip-value {
  font-family: var(--font-mono);
 }

+/* MCP Projects Table */
+.mcp-projects-table {
+  overflow-x: auto;
+}
+
+.mcp-projects-table table {
+  border-collapse: collapse;
+  min-width: 100%;
+}
+
+.mcp-projects-table th {
+  white-space: nowrap;
+}
+
+.mcp-projects-table td {
+  vertical-align: middle;
+}
+
+.mcp-projects-table tr:hover {
+  background-color: hsl(var(--hover));
+}
+
+.mcp-projects-table .bg-primary-light\/30 {
+  background-color: hsl(var(--primary) / 0.08);
+}
+
 /* MCP Create Modal */
 .mcp-modal {
  animation: fadeIn 0.15s ease-out;
--- a/ccw/src/templates/dashboard.html
+++ b/ccw/src/templates/dashboard.html
@@ -273,7 +273,7 @@
              <span class="nav-section-title">Sessions</span>
            </div>
            <ul class="space-y-0.5">
-              <li class="nav-item flex items-center gap-2 mx-2 px-3 py-2.5 text-sm text-muted-foreground hover:bg-hover hover:text-foreground rounded cursor-pointer transition-colors active bg-accent text-primary font-medium" data-filter="all" data-tooltip="All Sessions">
+              <li class="nav-item flex items-center gap-2 mx-2 px-3 py-2.5 text-sm text-muted-foreground hover:bg-hover hover:text-foreground rounded cursor-pointer transition-colors active" data-filter="all" data-tooltip="All Sessions">
                <span>📋</span>
                <span class="nav-text flex-1">All</span>
                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeAll">0</span>
--- a/ccw/test-dashboard.html
+++ b/ccw/test-dashboard.html