claude-code-workflow 6.1.4 → 6.2.2

package/ccw/src/templates/dashboard-js/components/storage-manager.js

@@ -0,0 +1,478 @@
+// ==========================================
+// STORAGE MANAGER COMPONENT
+// ==========================================
+// Manages CCW centralized storage (~/.ccw/)
+
+// State
+let storageData = null;
+let storageLoading = false;
+
+/**
+ * Initialize storage manager
+ */
+async function initStorageManager() {
+  await loadStorageStats();
+}
+
+/**
+ * Load storage statistics from API
+ */
+async function loadStorageStats() {
+  if (storageLoading) return;
+  storageLoading = true;
+
+  try {
+    const res = await fetch('/api/storage/stats');
+    if (!res.ok) throw new Error('Failed to load storage stats');
+    storageData = await res.json();
+    renderStorageCard();
+  } catch (err) {
+    console.error('Failed to load storage stats:', err);
+    renderStorageCardError(err.message);
+  } finally {
+    storageLoading = false;
+  }
+}
+
+/**
+ * Render storage card in the dashboard
+ */
+function renderStorageCard() {
+  const container = document.getElementById('storageCard');
+  if (!container || !storageData) return;
+
+  const { location, totalSizeFormatted, projectCount, projects } = storageData;
+
+  // Format relative time
+  const formatTimeAgo = (isoString) => {
+    if (!isoString) return 'Never';
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return diffMins + 'm ago';
+    if (diffHours < 24) return diffHours + 'h ago';
+    if (diffDays < 30) return diffDays + 'd ago';
+    return date.toLocaleDateString();
+  };
+
+  // Build project tree (hierarchical view)
+  let projectRows = '';
+  if (projects && projects.length > 0) {
+    const tree = buildProjectTree(projects);
+    projectRows = renderProjectTree(tree, 0, formatTimeAgo);
+
+    // Initially hide all child rows (level > 0)
+    setTimeout(() => {
+      const allRows = document.querySelectorAll('.project-row');
+      allRows.forEach(row => {
+        const level = parseInt(row.getAttribute('data-level'));
+        if (level > 0) {
+          row.style.display = 'none';
+        }
+      });
+    }, 0);
+  } else {
+    projectRows = '\
+      <tr>\
+        <td colspan="5" class="py-4 text-center text-muted-foreground text-sm">No storage data yet</td>\
+      </tr>\
+    ';
+  }
+
+  container.innerHTML = '\
+    <div class="bg-card border border-border rounded-lg overflow-hidden">\
+      <div class="bg-muted/30 border-b border-border px-4 py-3 flex items-center justify-between">\
+        <div class="flex items-center gap-2">\
+          <i data-lucide="hard-drive" class="w-4 h-4 text-primary"></i>\
+          <span class="font-medium text-foreground">Storage Manager</span>\
+          <span class="text-xs px-2 py-0.5 bg-muted rounded-full text-muted-foreground">' + totalSizeFormatted + '</span>\
+        </div>\
+        <div class="flex items-center gap-2">\
+          <button onclick="loadStorageStats()" class="text-xs px-2 py-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors" title="Refresh">\
+            <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>\
+          </button>\
+          <button onclick="showStorageConfig()" class="text-xs px-2 py-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors" title="Settings">\
+            <i data-lucide="settings" class="w-3.5 h-3.5"></i>\
+          </button>\
+        </div>\
+      </div>\
+      <div class="p-4">\
+        <div class="flex items-center gap-2 mb-3 text-xs text-muted-foreground">\
+          <i data-lucide="folder" class="w-3.5 h-3.5"></i>\
+          <span class="font-mono truncate" title="' + escapeHtml(location) + '">' + escapeHtml(location) + '</span>\
+        </div>\
+        <div class="grid grid-cols-3 gap-3 mb-4">\
+          <div class="bg-muted/30 rounded-lg p-3 text-center">\
+            <div class="text-lg font-semibold text-foreground">' + projectCount + '</div>\
+            <div class="text-xs text-muted-foreground">Projects</div>\
+          </div>\
+          <div class="bg-muted/30 rounded-lg p-3 text-center">\
+            <div class="text-lg font-semibold text-foreground">' + totalSizeFormatted + '</div>\
+            <div class="text-xs text-muted-foreground">Total Size</div>\
+          </div>\
+          <div class="bg-muted/30 rounded-lg p-3 text-center">\
+            <div class="text-lg font-semibold text-foreground">' + getTotalRecords() + '</div>\
+            <div class="text-xs text-muted-foreground">Records</div>\
+          </div>\
+        </div>\
+        <div class="border border-border rounded-lg overflow-hidden">\
+          <table class="w-full text-sm">\
+            <thead class="bg-muted/50">\
+              <tr class="text-xs text-muted-foreground">\
+                <th class="py-2 px-2 text-left font-medium">Project ID</th>\
+                <th class="py-2 px-2 text-right font-medium">Size</th>\
+                <th class="py-2 px-2 text-center font-medium">History</th>\
+                <th class="py-2 px-2 text-right font-medium">Last Used</th>\
+                <th class="py-2 px-1 w-8"></th>\
+              </tr>\
+            </thead>\
+            <tbody>\
+              ' + projectRows + '\
+            </tbody>\
+          </table>\
+        </div>\
+        <div class="mt-4 flex justify-end gap-2">\
+          <button onclick="cleanAllStorageConfirm()" \
+                  class="text-xs px-3 py-1.5 bg-destructive/10 text-destructive hover:bg-destructive/20 rounded transition-colors flex items-center gap-1.5">\
+            <i data-lucide="trash" class="w-3.5 h-3.5"></i>\
+            Clean All\
+          </button>\
+        </div>\
+      </div>\
+    </div>\
+  ';
+
+  // Reinitialize Lucide icons
+  if (typeof lucide !== 'undefined') {
+    lucide.createIcons();
+  }
+}
+
+/**
+ * Get total records across all projects
+ */
+function getTotalRecords() {
+  if (!storageData || !storageData.projects) return 0;
+  return storageData.projects.reduce((sum, p) => sum + (p.historyRecords || 0), 0);
+}
+
+/**
+ * Build project tree from flat list
+ * Converts flat project list to hierarchical tree structure
+ */
+function buildProjectTree(projects) {
+  const tree = [];
+  const map = new Map();
+
+  // Sort by path depth (shallowest first)
+  const sorted = projects.slice().sort((a, b) => {
+    const depthA = (a.id.match(/\//g) || []).length;
+    const depthB = (b.id.match(/\//g) || []).length;
+    return depthA - depthB;
+  });
+
+  for (const project of sorted) {
+    const segments = project.id.split('/');
+
+    if (segments.length === 1) {
+      // Root level project
+      const node = {
+        ...project,
+        children: [],
+        isExpanded: false
+      };
+      tree.push(node);
+      map.set(project.id, node);
+    } else {
+      // Sub-project
+      const parentId = segments.slice(0, -1).join('/');
+      const parent = map.get(parentId);
+
+      if (parent) {
+        const node = {
+          ...project,
+          children: [],
+          isExpanded: false
+        };
+        parent.children.push(node);
+        map.set(project.id, node);
+      } else {
+        // Orphaned project (parent not found) - add to root
+        const node = {
+          ...project,
+          children: [],
+          isExpanded: false
+        };
+        tree.push(node);
+        map.set(project.id, node);
+      }
+    }
+  }
+
+  return tree;
+}
+
+/**
+ * Render project tree recursively
+ */
+function renderProjectTree(tree, level = 0, formatTimeAgo) {
+  if (!tree || tree.length === 0) return '';
+
+  let html = '';
+
+  for (const node of tree) {
+    const hasChildren = node.children && node.children.length > 0;
+    const indent = level * 20;
+    const projectName = node.id.split('/').pop();
+
+    const historyBadge = node.historyRecords > 0
+      ? '<span class="text-xs px-1.5 py-0.5 bg-primary/10 text-primary rounded">' + node.historyRecords + '</span>'
+      : '<span class="text-xs text-muted-foreground">-</span>';
+
+    const toggleIcon = hasChildren
+      ? '<i data-lucide="chevron-right" class="w-3 h-3 transition-transform duration-200 toggle-icon"></i>'
+      : '<span class="w-3 h-3 inline-block"></span>';
+
+    html += '\
+      <tr class="border-b border-border/50 hover:bg-muted/30 project-row" data-project-id="' + escapeHtml(node.id) + '" data-level="' + level + '">\
+        <td class="py-2 px-2 font-mono text-xs text-muted-foreground">\
+          <div class="flex items-center gap-1" style="padding-left: ' + indent + 'px">\
+            ' + (hasChildren ? '<button class="toggle-btn hover:bg-muted/50 rounded p-0.5" onclick="toggleProjectNode(\'' + escapeHtml(node.id) + '\')">' + toggleIcon + '</button>' : '<span class="w-3 h-3 inline-block"></span>') + '\
+            <span class="truncate max-w-[150px]" title="' + escapeHtml(node.id) + '">' + escapeHtml(projectName) + '</span>\
+          </div>\
+        </td>\
+        <td class="py-2 px-2 text-sm text-right">' + escapeHtml(node.totalSizeFormatted) + '</td>\
+        <td class="py-2 px-2 text-center">' + historyBadge + '</td>\
+        <td class="py-2 px-2 text-xs text-muted-foreground text-right">' + formatTimeAgo(node.lastModified) + '</td>\
+        <td class="py-2 px-1 text-right">\
+          <button onclick="cleanProjectStorage(\'' + escapeHtml(node.id) + '\')" \
+                  class="text-xs px-2 py-1 text-destructive hover:bg-destructive/10 rounded transition-colors" \
+                  title="Clean this project storage">\
+            <i data-lucide="trash-2" class="w-3 h-3"></i>\
+          </button>\
+        </td>\
+      </tr>\
+    ';
+
+    // Render children (initially hidden)
+    if (hasChildren) {
+      html += renderProjectTree(node.children, level + 1, formatTimeAgo);
+    }
+  }
+
+  return html;
+}
+
+/**
+ * Toggle project node expansion
+ */
+function toggleProjectNode(projectId) {
+  const row = document.querySelector('[data-project-id="' + projectId + '"]');
+  if (!row) return;
+
+  const icon = row.querySelector('.toggle-icon');
+  const level = parseInt(row.getAttribute('data-level'));
+
+  // Find all child rows
+  let nextRow = row.nextElementSibling;
+  const childRows = [];
+
+  while (nextRow && nextRow.classList.contains('project-row')) {
+    const nextLevel = parseInt(nextRow.getAttribute('data-level'));
+    if (nextLevel <= level) break;
+    childRows.push(nextRow);
+    nextRow = nextRow.nextElementSibling;
+  }
+
+  // Toggle visibility
+  const isExpanded = row.classList.contains('expanded');
+
+  if (isExpanded) {
+    // Collapse
+    row.classList.remove('expanded');
+    if (icon) icon.style.transform = 'rotate(0deg)';
+    childRows.forEach(child => {
+      child.style.display = 'none';
+    });
+  } else {
+    // Expand (only immediate children)
+    row.classList.add('expanded');
+    if (icon) icon.style.transform = 'rotate(90deg)';
+    childRows.forEach(child => {
+      const childLevel = parseInt(child.getAttribute('data-level'));
+      if (childLevel === level + 1) {
+        child.style.display = '';
+      }
+    });
+  }
+
+  // Reinitialize Lucide icons
+  if (typeof lucide !== 'undefined') {
+    lucide.createIcons();
+  }
+}
+
+/**
+ * Render error state for storage card
+ */
+function renderStorageCardError(message) {
+  const container = document.getElementById('storageCard');
+  if (!container) return;
+
+  container.innerHTML = '\
+    <div class="bg-card border border-border rounded-lg overflow-hidden">\
+      <div class="bg-muted/30 border-b border-border px-4 py-3 flex items-center gap-2">\
+        <i data-lucide="hard-drive" class="w-4 h-4 text-primary"></i>\
+        <span class="font-medium text-foreground">Storage Manager</span>\
+      </div>\
+      <div class="p-4 text-center">\
+        <div class="text-destructive mb-2">\
+          <i data-lucide="alert-circle" class="w-8 h-8 mx-auto"></i>\
+        </div>\
+        <p class="text-sm text-muted-foreground mb-3">' + escapeHtml(message) + '</p>\
+        <button onclick="loadStorageStats()" class="text-xs px-3 py-1.5 bg-primary/10 text-primary hover:bg-primary/20 rounded transition-colors">\
+          Retry\
+        </button>\
+      </div>\
+    </div>\
+  ';
+
+  if (typeof lucide !== 'undefined') {
+    lucide.createIcons();
+  }
+}
+
+/**
+ * Show storage configuration modal
+ */
+function showStorageConfig() {
+  const content = '\
+# Storage Configuration\n\
+\n\
+## Current Location\n\
+\n\
+```\n\
+' + (storageData?.location || '~/.ccw') + '\n\
+```\n\
+\n\
+## Change Storage Location\n\
+\n\
+Set the `CCW_DATA_DIR` environment variable to change the storage location:\n\
+\n\
+### Windows (PowerShell)\n\
+```powershell\n\
+$env:CCW_DATA_DIR = "D:\\custom\\ccw-data"\n\
+```\n\
+\n\
+### Windows (Command Prompt)\n\
+```cmd\n\
+set CCW_DATA_DIR=D:\\custom\\ccw-data\n\
+```\n\
+\n\
+### Linux/macOS\n\
+```bash\n\
+export CCW_DATA_DIR="/custom/ccw-data"\n\
+```\n\
+\n\
+### Permanent (add to shell profile)\n\
+```bash\n\
+echo \'export CCW_DATA_DIR="/custom/ccw-data"\' >> ~/.bashrc\n\
+```\n\
+\n\
+> **Note:** Existing data will NOT be migrated automatically.\n\
+> Manually copy the contents of the old directory to the new location.\n\
+\n\
+## CLI Commands\n\
+\n\
+```bash\n\
+# Show storage info\n\
+ccw cli storage\n\
+\n\
+# Clean all storage\n\
+ccw cli storage clean --force\n\
+\n\
+# Clean specific project\n\
+ccw cli storage clean --project . --force\n\
+```\n\
+';
+
+  openMarkdownModal('Storage Configuration', content, 'markdown');
+}
+
+/**
+ * Clean storage for a specific project
+ */
+async function cleanProjectStorage(projectId) {
+  const project = storageData?.projects?.find(p => p.id === projectId);
+  const sizeInfo = project ? ' (' + project.totalSizeFormatted + ')' : '';
+
+  if (!confirm('Delete storage for project ' + projectId.substring(0, 8) + '...' + sizeInfo + '?\n\nThis will remove CLI history, memory, and cache for this project.')) {
+    return;
+  }
+
+  try {
+    const res = await fetch('/api/storage/clean', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectId })
+    });
+
+    const result = await res.json();
+
+    if (result.success) {
+      addGlobalNotification('success', 'Storage Cleaned', 'Freed ' + result.freedFormatted, 'storage');
+      await loadStorageStats();
+    } else {
+      throw new Error(result.error || 'Failed to clean storage');
+    }
+  } catch (err) {
+    addGlobalNotification('error', 'Clean Failed', err.message, 'storage');
+  }
+}
+
+/**
+ * Confirm and clean all storage
+ */
+async function cleanAllStorageConfirm() {
+  const totalSize = storageData?.totalSizeFormatted || 'unknown';
+  const projectCount = storageData?.projectCount || 0;
+
+  if (!confirm('Delete ALL CCW storage?\n\nThis will remove:\n- ' + projectCount + ' projects\n- ' + totalSize + ' of data\n\nThis action cannot be undone!')) {
+    return;
+  }
+
+  // Double confirm for safety
+  if (!confirm('Are you SURE? This will delete all CLI history, memory stores, and caches.')) {
+    return;
+  }
+
+  try {
+    const res = await fetch('/api/storage/clean', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ all: true })
+    });
+
+    const result = await res.json();
+
+    if (result.success) {
+      addGlobalNotification('success', 'All Storage Cleaned', 'Cleaned ' + result.projectsCleaned + ' projects, freed ' + result.freedFormatted, 'storage');
+      await loadStorageStats();
+    } else {
+      throw new Error(result.error || 'Failed to clean storage');
+    }
+  } catch (err) {
+    addGlobalNotification('error', 'Clean Failed', err.message, 'storage');
+  }
+}
+
+/**
+ * Get storage data (for external use)
+ */
+function getStorageData() {
+  return storageData;
+}

package/ccw/src/templates/dashboard-js/components/tabs-other.js

@@ -96,7 +96,7 @@ function renderImplPlanContent(implPlan) {
 // Lite Context Tab Rendering
 // ==========================================
 
-function renderLiteContextContent(context, explorations, session) {
+function renderLiteContextContent(context, explorations, session, diagnoses) {
   const plan = session.plan || {};
   let sections = [];
 
@@ -105,6 +105,11 @@ function renderLiteContextContent(context, explorations, session) {
     sections.push(renderExplorationContext(explorations));
   }
 
+  // Render diagnoses if available (from diagnosis-*.json files)
+  if (diagnoses && diagnoses.manifest) {
+    sections.push(renderDiagnosisContext(diagnoses));
+  }
+
   // If we have context from context-package.json
   if (context) {
     sections.push(`
@@ -153,7 +158,7 @@ function renderLiteContextContent(context, explorations, session) {
     <div class="tab-empty-state">
       <div class="empty-icon"><i data-lucide="package" class="w-12 h-12"></i></div>
       <div class="empty-title">No Context Data</div>
-      <div class="empty-text">No context-package.json or exploration files found for this session.</div>
+      <div class="empty-text">No context-package.json, exploration files, or diagnosis files found for this session.</div>
     </div>
   `;
 }
@@ -185,15 +190,19 @@ function renderExplorationContext(explorations) {
   `);
 
   // Render each exploration angle as collapsible section
-  const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points'];
+  const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points', 'testing'];
   const explorationTitles = {
     'architecture': '<i data-lucide="blocks" class="w-4 h-4 inline mr-1"></i>Architecture',
     'dependencies': '<i data-lucide="package" class="w-4 h-4 inline mr-1"></i>Dependencies',
     'patterns': '<i data-lucide="git-branch" class="w-4 h-4 inline mr-1"></i>Patterns',
-    'integration-points': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>Integration Points'
+    'integration-points': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>Integration Points',
+    'testing': '<i data-lucide="flask-conical" class="w-4 h-4 inline mr-1"></i>Testing'
   };
 
-  for (const angle of explorationOrder) {
+  // Collect all angles from data (in case there are exploration angles not in our predefined list)
+  const allAngles = [...new Set([...explorationOrder, ...Object.keys(data)])];
+
+  for (const angle of allAngles) {
     const expData = data[angle];
     if (!expData) {
       continue;
@@ -205,7 +214,7 @@ function renderExplorationContext(explorations) {
       <div class="exploration-section collapsible-section">
         <div class="collapsible-header">
           <span class="collapse-icon">▶</span>
-          <span class="section-label">${explorationTitles[angle] || angle}</span>
+          <span class="section-label">${explorationTitles[angle] || ('<i data-lucide="file-search" class="w-4 h-4 inline mr-1"></i>' + escapeHtml(angle.toUpperCase()))}</span>
         </div>
         <div class="collapsible-content collapsed">
           ${angleContent}
@@ -271,3 +280,145 @@ function renderExplorationAngle(angle, data) {
 
   return content.join('') || '<p>No data available</p>';
 }
+
+// ==========================================
+// Diagnosis Context Rendering
+// ==========================================
+
+function renderDiagnosisContext(diagnoses) {
+  if (!diagnoses || !diagnoses.manifest) {
+    return '';
+  }
+
+  const manifest = diagnoses.manifest;
+  const data = diagnoses.data || {};
+
+  let sections = [];
+
+  // Header with manifest info
+  sections.push(`
+    <div class="diagnosis-header">
+      <h4><i data-lucide="stethoscope" class="w-4 h-4 inline mr-1"></i> ${escapeHtml(manifest.task_description || 'Diagnosis Context')}</h4>
+      <div class="diagnosis-meta">
+        <span class="meta-item">Diagnoses: <strong>${manifest.diagnosis_count || 0}</strong></span>
+      </div>
+    </div>
+  `);
+
+  // Render each diagnosis angle as collapsible section
+  const diagnosisOrder = ['root-cause', 'api-contracts', 'dataflow', 'performance', 'security', 'error-handling'];
+  const diagnosisTitles = {
+    'root-cause': '<i data-lucide="search" class="w-4 h-4 inline mr-1"></i>Root Cause',
+    'api-contracts': '<i data-lucide="plug" class="w-4 h-4 inline mr-1"></i>API Contracts',
+    'dataflow': '<i data-lucide="git-merge" class="w-4 h-4 inline mr-1"></i>Data Flow',
+    'performance': '<i data-lucide="zap" class="w-4 h-4 inline mr-1"></i>Performance',
+    'security': '<i data-lucide="shield" class="w-4 h-4 inline mr-1"></i>Security',
+    'error-handling': '<i data-lucide="alert-circle" class="w-4 h-4 inline mr-1"></i>Error Handling'
+  };
+
+  // Collect all angles from data (in case there are diagnosis angles not in our predefined list)
+  const allAngles = [...new Set([...diagnosisOrder, ...Object.keys(data)])];
+
+  for (const angle of allAngles) {
+    const diagData = data[angle];
+    if (!diagData) {
+      continue;
+    }
+
+    const angleContent = renderDiagnosisAngle(angle, diagData);
+
+    sections.push(`
+      <div class="diagnosis-section collapsible-section">
+        <div class="collapsible-header">
+          <span class="collapse-icon">▶</span>
+          <span class="section-label">${diagnosisTitles[angle] || ('<i data-lucide="file-search" class="w-4 h-4 inline mr-1"></i>' + angle)}</span>
+        </div>
+        <div class="collapsible-content collapsed">
+          ${angleContent}
+        </div>
+      </div>
+    `);
+  }
+
+  return `<div class="diagnosis-context">${sections.join('')}</div>`;
+}
+
+function renderDiagnosisAngle(angle, data) {
+  let content = [];
+
+  // Summary/Overview
+  if (data.summary || data.overview) {
+    content.push(renderExpField('Summary', data.summary || data.overview));
+  }
+
+  // Root cause analysis
+  if (data.root_cause || data.root_cause_analysis) {
+    content.push(renderExpField('Root Cause', data.root_cause || data.root_cause_analysis));
+  }
+
+  // Issues/Findings
+  if (data.issues && Array.isArray(data.issues)) {
+    content.push(`
+      <div class="exp-field">
+        <label>Issues Found (${data.issues.length})</label>
+        <div class="issues-list">
+          ${data.issues.map(issue => {
+            if (typeof issue === 'string') {
+              return `<div class="issue-item">${escapeHtml(issue)}</div>`;
+            } else {
+              return `
+                <div class="issue-item">
+                  <div class="issue-title">${escapeHtml(issue.title || issue.description || 'Unknown')}</div>
+                  ${issue.location ? `<div class="issue-location"><code>${escapeHtml(issue.location)}</code></div>` : ''}
+                  ${issue.severity ? `<span class="severity-badge ${escapeHtml(issue.severity)}">${escapeHtml(issue.severity)}</span>` : ''}
+                </div>
+              `;
+            }
+          }).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  // Affected files
+  if (data.affected_files && Array.isArray(data.affected_files)) {
+    content.push(`
+      <div class="exp-field">
+        <label>Affected Files (${data.affected_files.length})</label>
+        <div class="path-tags">
+          ${data.affected_files.map(f => {
+            const filePath = typeof f === 'string' ? f : (f.path || f.file || '');
+            return `<span class="path-tag">${escapeHtml(filePath)}</span>`;
+          }).join('')}
+        </div>
+      </div>
+    `);
+  }
+
+  // Recommendations
+  if (data.recommendations && Array.isArray(data.recommendations)) {
+    content.push(`
+      <div class="exp-field">
+        <label>Recommendations</label>
+        <ol class="recommendations-list">
+          ${data.recommendations.map(rec => {
+            const recText = typeof rec === 'string' ? rec : (rec.description || rec.action || '');
+            return `<li>${escapeHtml(recText)}</li>`;
+          }).join('')}
+        </ol>
+      </div>
+    `);
+  }
+
+  // API Contracts (specific to api-contracts diagnosis)
+  if (data.contracts && Array.isArray(data.contracts)) {
+    content.push(renderExpField('API Contracts', data.contracts));
+  }
+
+  // Data flow (specific to dataflow diagnosis)
+  if (data.dataflow || data.data_flow) {
+    content.push(renderExpField('Data Flow', data.dataflow || data.data_flow));
+  }
+
+  return content.join('') || '<p>No diagnosis data available</p>';
+}