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.

.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

.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

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
 

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 `
+    sections.push(`
-      <div class="context-tab-content">
+      <div class="context-package-section">
-        <pre class="json-content">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
+        <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 `
+    sections.push(`
-      <div class="context-tab-content">
+      <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',
+    'architecture': '🏗️ Architecture',
-    'dependencies': 'Dependencies',
+    'dependencies': '📦 Dependencies',
-    'patterns': 'Patterns',
+    'patterns': '🔄 Patterns',
-    'integration-points': 'Integration Points'
+    '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>
+              <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>` : ''}
+              ${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;
 }

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);
+}

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
+        // Re-initialize collapsible sections for explorations (scoped to contentArea)
-        setTimeout(() => {
+        initCollapsibleSections(contentArea);
-          document.querySelectorAll('.collapsible-header').forEach(header => {
-            header.addEventListener('click', () => toggleSection(header));
-          });
-        }, 50);
         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>`;
   }

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">
+        <div class="mcp-projects-table bg-card border border-border rounded-lg overflow-hidden">
-          ${Object.entries(mcpAllProjects).map(([path, config]) => {
+          <table class="w-full">
-            const servers = config.mcpServers || {};
+            <thead class="bg-muted/50">
-            const serverCount = Object.keys(servers).length;
+              <tr>
-            const isCurrentProject = path === currentPath;
+                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">Project</th>
-            return `
+                <th class="text-left px-4 py-3 text-sm font-semibold text-foreground border-b border-border">MCP Servers</th>
-              <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' : ''}"
+                <th class="text-center px-4 py-3 text-sm font-semibold text-foreground border-b border-border w-24">Status</th>
-                   onclick="switchToProject('${escapeHtml(path)}')"
+              </tr>
-                   data-project-path="${escapeHtml(path)}">
+            </thead>
-                <div class="flex items-center gap-3 min-w-0">
+            <tbody>
-                  <span class="text-lg">${isCurrentProject ? '📍' : '📁'}</span>
+              ${Object.entries(mcpAllProjects).map(([path, config]) => {
-                  <div class="min-w-0">
+                const servers = config.mcpServers || {};
-                    <div class="font-medium text-foreground truncate" title="${escapeHtml(path)}">${escapeHtml(path.split('\\').pop() || path)}</div>
+                const projectDisabled = config.disabledMcpServers || [];
-                    <div class="text-xs text-muted-foreground truncate">${escapeHtml(path)}</div>
+                const serverNames = Object.keys(servers);
-                  </div>
+                const isCurrentProject = path === currentPath;
-                </div>
+                const enabledCount = serverNames.filter(s => !projectDisabled.includes(s)).length;
-                <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>
+                return `
-                  ${isCurrentProject ? '<span class="text-xs text-primary font-medium">Current</span>' : ''}
+                  <tr class="border-b border-border last:border-b-0 ${isCurrentProject ? 'bg-primary/5' : 'hover:bg-hover/50'}">
-                </div>
+                    <td class="px-4 py-3">
-              </div>
+                      <div class="flex items-center gap-2 min-w-0">
-            `;
+                        <span class="text-base shrink-0">${isCurrentProject ? '📍' : '📁'}</span>
-          }).join('')}
+                        <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, '\\'));
-}

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;
+  padding: 16px;
-  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  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-size: 15px;
-  font-weight: 500;
+  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;
+  display: inline-flex;
-  font-size: 11px;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
   font-weight: 600;
-  text-transform: uppercase;
+  color: var(--primary, #3b82f6);
-  color: var(--text-secondary, #6b7280);
+  margin-bottom: 10px;
-  margin-bottom: 6px;
+  padding: 4px 10px;
-  letter-spacing: 0.5px;
+  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;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 8px;
+  gap: 12px;
 }
 
+/* File Item Card */
 .file-item-exp {
-  padding: 8px 10px;
+  padding: 12px 14px;
   background: var(--bg-secondary, #f9fafb);
-  border-radius: 4px;
+  border-radius: 8px;
-  border-left: 3px solid var(--primary, #3b82f6);
+  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);
+  font-weight: 600;
-  margin-top: 4px;
+  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);
+  color: var(--text-secondary, #6b7280);
-  margin-top: 4px;
+  line-height: 1.5;
-  line-height: 1.4;
+  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;

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>