claude-code-workflow 6.3.18 → 6.3.20

package/ccw/src/templates/dashboard-js/views/core-memory.js

@@ -1,6 +1,56 @@
 // Core Memory View
 // Manages strategic context entries with knowledge graph and evolution tracking
 
+/**
+ * Parse JSON streaming content and extract readable text
+ * Handles Gemini/Qwen format: {"type":"message","content":"...","delta":true}
+ */
+function parseJsonStreamContent(content) {
+  if (!content || typeof content !== 'string') return content;
+
+  // Check if content looks like JSON streaming (multiple JSON objects)
+  if (!content.includes('{"type":')) return content;
+
+  const lines = content.split('\n');
+  const extractedParts = [];
+  let hasJsonLines = false;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+
+    // Try to parse as JSON
+    if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+      try {
+        const obj = JSON.parse(trimmed);
+        // Extract content from message type
+        if (obj.type === 'message' && obj.content) {
+          extractedParts.push(obj.content);
+          hasJsonLines = true;
+        }
+        // Skip init/result/error types (metadata)
+        else if (obj.type === 'init' || obj.type === 'result' || obj.type === 'error') {
+          hasJsonLines = true;
+          continue;
+        }
+      } catch (e) {
+        // Not valid JSON, keep as plain text
+        extractedParts.push(trimmed);
+      }
+    } else {
+      // Plain text line
+      extractedParts.push(trimmed);
+    }
+  }
+
+  // If we found JSON lines, return extracted content
+  if (hasJsonLines && extractedParts.length > 0) {
+    return extractedParts.join('');
+  }
+
+  return content;
+}
+
 // Notification function
 function showNotification(message, type = 'info') {
   // Create notification container if it doesn't exist
@@ -228,15 +278,31 @@ function renderMemoryCard(memory) {
   const updatedDate = memory.updated_at ? new Date(memory.updated_at).toLocaleString() : createdDate;
   const isArchived = memory.archived || false;
 
-  const metadata = memory.metadata || {};
+  // Parse metadata - it may be double-encoded JSON string from the backend
+  let metadata = {};
+  if (memory.metadata) {
+    try {
+      let parsed = typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata;
+      // Handle double-encoded JSON (string within string)
+      if (typeof parsed === 'string') {
+        parsed = JSON.parse(parsed);
+      }
+      metadata = parsed;
+      console.log('[DEBUG] Memory', memory.id, 'metadata parsed:', metadata, 'favorite:', metadata.favorite);
+    } catch (e) {
+      console.warn('Failed to parse memory metadata:', e);
+    }
+  }
   const tags = metadata.tags || [];
   const priority = metadata.priority || 'medium';
+  const isFavorite = metadata.favorite === true;
+  console.log('[DEBUG] Memory', memory.id, 'isFavorite:', isFavorite);
 
   return `
     <div class="memory-card ${isArchived ? 'archived' : ''}" data-memory-id="${memory.id}" onclick="viewMemoryDetail('${memory.id}')">
       <div class="memory-card-header">
         <div class="memory-id">
-          ${metadata.favorite ? '<i data-lucide="star"></i>' : ''}
+          ${isFavorite ? '<i data-lucide="star" class="favorite-star"></i>' : ''}
           <span>${memory.id}</span>
           ${isArchived ? `<span class="badge badge-archived">${t('common.archived')}</span>` : ''}
           ${priority !== 'medium' ? `<span class="badge badge-priority-${priority}">${priority}</span>` : ''}
@@ -245,7 +311,7 @@ function renderMemoryCard(memory) {
           <button class="icon-btn" onclick="editMemory('${memory.id}')" title="${t('common.edit')}">
             <i data-lucide="edit"></i>
           </button>
-          <button class="icon-btn ${metadata.favorite ? 'favorite-active' : ''}" onclick="toggleFavorite('${memory.id}')" title="${t('coreMemory.toggleFavorite') || 'Toggle Favorite'}">
+          <button class="icon-btn ${isFavorite ? 'favorite-active' : ''}" onclick="toggleFavorite('${memory.id}')" title="${t('coreMemory.toggleFavorite') || 'Toggle Favorite'}">
             <i data-lucide="star"></i>
           </button>
           ${!isArchived
@@ -312,7 +378,8 @@ function renderMemoryCard(memory) {
 // API Functions
 async function fetchCoreMemories(archived = false) {
   try {
-    const response = await fetch(`/api/core-memory/memories?path=${encodeURIComponent(projectPath)}&archived=${archived}`);
+    // Add timestamp to prevent browser caching
+    const response = await fetch(`/api/core-memory/memories?path=${encodeURIComponent(projectPath)}&archived=${archived}&_t=${Date.now()}`);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     const data = await response.json();
     return data.memories || [];
@@ -325,7 +392,8 @@ async function fetchCoreMemories(archived = false) {
 
 async function fetchMemoryById(memoryId) {
   try {
-    const response = await fetch(`/api/core-memory/memories/${memoryId}?path=${encodeURIComponent(projectPath)}`);
+    // Add timestamp to prevent browser caching
+    const response = await fetch(`/api/core-memory/memories/${memoryId}?path=${encodeURIComponent(projectPath)}&_t=${Date.now()}`);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
     const data = await response.json();
     return data.memory || null;
@@ -356,7 +424,9 @@ async function editMemory(memoryId) {
   document.getElementById('memoryModalTitle').textContent = t('coreMemory.edit');
   document.getElementById('memoryContent').value = memory.content || '';
   document.getElementById('memorySummary').value = memory.summary || '';
-  document.getElementById('memoryMetadata').value = memory.metadata ? JSON.stringify(memory.metadata, null, 2) : '';
+  document.getElementById('memoryMetadata').value = memory.metadata 
+    ? (typeof memory.metadata === 'string' ? memory.metadata : JSON.stringify(memory.metadata, null, 2)) 
+    : '';
   modal.dataset.editId = memoryId;
   modal.style.display = 'flex';
   lucide.createIcons();
@@ -507,34 +577,48 @@ async function viewMemoryDetail(memoryId) {
   const modal = document.getElementById('memoryDetailModal');
   document.getElementById('memoryDetailTitle').textContent = memory.id;
 
+  // Parse content and summary in case they contain JSON streaming format
+  const parsedContent = parseJsonStreamContent(memory.content);
+  const parsedSummary = parseJsonStreamContent(memory.summary);
+
   const body = document.getElementById('memoryDetailBody');
   body.innerHTML = `
     <div class="memory-detail-content">
-      ${memory.summary
+      ${parsedSummary
         ? `<div class="detail-section">
              <h3>${t('coreMemory.summary')}</h3>
-             <div class="detail-text">${escapeHtml(memory.summary)}</div>
+             <div class="detail-text">${escapeHtml(parsedSummary)}</div>
            </div>`
         : ''
       }
 
       <div class="detail-section">
         <h3>${t('coreMemory.content')}</h3>
-        <pre class="detail-code">${escapeHtml(memory.content)}</pre>
+        <pre class="detail-code">${escapeHtml(parsedContent)}</pre>
       </div>
 
-      ${memory.metadata && Object.keys(memory.metadata).length > 0
-        ? `<div class="detail-section">
+      ${(() => {
+        if (!memory.metadata) return '';
+        try {
+          let metadataObj = typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata;
+          // Handle double-encoded JSON
+          if (typeof metadataObj === 'string') {
+            metadataObj = JSON.parse(metadataObj);
+          }
+          if (Object.keys(metadataObj).length === 0) return '';
+          return `<div class="detail-section">
              <h3>${t('coreMemory.metadata')}</h3>
-             <pre class="detail-code">${escapeHtml(JSON.stringify(memory.metadata, null, 2))}</pre>
-           </div>`
-        : ''
-      }
+             <pre class="detail-code">${escapeHtml(JSON.stringify(metadataObj, null, 2))}</pre>
+           </div>`;
+        } catch (e) {
+          return '';
+        }
+      })()}
 
       ${memory.raw_output
         ? `<div class="detail-section">
              <h3>${t('coreMemory.rawOutput')}</h3>
-             <pre class="detail-code">${escapeHtml(memory.raw_output)}</pre>
+             <pre class="detail-code">${escapeHtml(parseJsonStreamContent(memory.raw_output))}</pre>
            </div>`
         : ''
       }
@@ -644,7 +728,19 @@ function showClustersView() {
 // Favorites Functions
 async function refreshFavorites() {
   const allMemories = await fetchCoreMemories(false);
-  const favorites = allMemories.filter(m => m.metadata && m.metadata.favorite);
+  const favorites = allMemories.filter(m => {
+    if (!m.metadata) return false;
+    try {
+      let parsed = typeof m.metadata === 'string' ? JSON.parse(m.metadata) : m.metadata;
+      // Handle double-encoded JSON
+      if (typeof parsed === 'string') {
+        parsed = JSON.parse(parsed);
+      }
+      return parsed.favorite === true;
+    } catch (e) {
+      return false;
+    }
+  });
 
   const countEl = document.getElementById('totalFavoritesCount');
   const gridEl = document.getElementById('favoritesGridContent');
@@ -670,7 +766,7 @@ async function refreshFavorites() {
 async function showMemoryRelations(memoryId) {
   try {
     // Fetch all clusters
-    const response = await fetch(`/api/core-memory/clusters?path=${encodeURIComponent(projectPath)}`);
+    const response = await fetch(`/api/core-memory/clusters?path=${encodeURIComponent(projectPath)}&_t=${Date.now()}`);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
     const result = await response.json();
@@ -679,7 +775,7 @@ async function showMemoryRelations(memoryId) {
     // Find clusters containing this memory
     const relatedClusters = [];
     for (const cluster of clusters) {
-      const detailRes = await fetch(`/api/core-memory/clusters/${cluster.id}?path=${encodeURIComponent(projectPath)}`);
+      const detailRes = await fetch(`/api/core-memory/clusters/${cluster.id}?path=${encodeURIComponent(projectPath)}&_t=${Date.now()}`);
       if (detailRes.ok) {
         const detail = await detailRes.json();
         const members = detail.members || [];
@@ -749,7 +845,20 @@ async function toggleFavorite(memoryId) {
     const memory = await fetchMemoryById(memoryId);
     if (!memory) return;
 
-    const metadata = memory.metadata || {};
+    // Parse metadata - it may be double-encoded JSON string from the backend
+    let metadata = {};
+    if (memory.metadata) {
+      try {
+        let parsed = typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata;
+        // Handle double-encoded JSON
+        if (typeof parsed === 'string') {
+          parsed = JSON.parse(parsed);
+        }
+        metadata = parsed;
+      } catch (e) {
+        console.warn('Failed to parse memory metadata:', e);
+      }
+    }
     metadata.favorite = !metadata.favorite;
 
     const response = await fetch('/api/core-memory/memories', {

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

@@ -87,7 +87,7 @@ async function renderHookManager() {
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           ${renderWizardCard('memory-update')}
-          ${renderWizardCard('memory-setup')}
+          ${renderWizardCard('danger-protection')}
           ${renderWizardCard('skill-context')}
         </div>
       </div>
@@ -216,10 +216,12 @@ function renderWizardCard(wizardId) {
   // Get translated wizard name and description
   const wizardName = wizardId === 'memory-update' ? t('hook.wizard.memoryUpdate') :
                      wizardId === 'memory-setup' ? t('hook.wizard.memorySetup') :
-                     wizardId === 'skill-context' ? t('hook.wizard.skillContext') : wizard.name;
+                     wizardId === 'skill-context' ? t('hook.wizard.skillContext') :
+                     wizardId === 'danger-protection' ? t('hook.wizard.dangerProtection') : wizard.name;
   const wizardDesc = wizardId === 'memory-update' ? t('hook.wizard.memoryUpdateDesc') :
                      wizardId === 'memory-setup' ? t('hook.wizard.memorySetupDesc') :
-                     wizardId === 'skill-context' ? t('hook.wizard.skillContextDesc') : wizard.description;
+                     wizardId === 'skill-context' ? t('hook.wizard.skillContextDesc') :
+                     wizardId === 'danger-protection' ? t('hook.wizard.dangerProtectionDesc') : wizard.description;
 
   // Translate options
   const getOptionName = (wizardId, optId) => {
@@ -237,6 +239,12 @@ function renderWizardCard(wizardId) {
       if (optId === 'keyword') return t('hook.wizard.keywordMatching');
       if (optId === 'auto') return t('hook.wizard.autoDetection');
     }
+    if (wizardId === 'danger-protection') {
+      if (optId === 'bash-confirm') return t('hook.wizard.dangerBashConfirm');
+      if (optId === 'file-protection') return t('hook.wizard.dangerFileProtection');
+      if (optId === 'git-destructive') return t('hook.wizard.dangerGitDestructive');
+      if (optId === 'network-confirm') return t('hook.wizard.dangerNetworkConfirm');
+    }
     return wizard.options.find(o => o.id === optId)?.name || '';
   };
 
@@ -255,6 +263,12 @@ function renderWizardCard(wizardId) {
       if (optId === 'keyword') return t('hook.wizard.keywordMatchingDesc');
       if (optId === 'auto') return t('hook.wizard.autoDetectionDesc');
     }
+    if (wizardId === 'danger-protection') {
+      if (optId === 'bash-confirm') return t('hook.wizard.dangerBashConfirmDesc');
+      if (optId === 'file-protection') return t('hook.wizard.dangerFileProtectionDesc');
+      if (optId === 'git-destructive') return t('hook.wizard.dangerGitDestructiveDesc');
+      if (optId === 'network-confirm') return t('hook.wizard.dangerNetworkConfirmDesc');
+    }
     return wizard.options.find(o => o.id === optId)?.description || '';
   };
 

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

@@ -549,6 +549,69 @@ async function renderMcpManager() {
         </div>
       </div>
 
+      <!-- Recommended MCP Servers -->
+      <div class="mcp-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
+              <i data-lucide="sparkles" class="w-5 h-5 text-amber-500"></i>
+              <h3 class="text-lg font-semibold text-foreground">${t('mcp.recommended')}</h3>
+            </div>
+            <span class="text-xs px-2 py-0.5 bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 rounded-full">
+              ${t('mcp.quickSetup')}
+            </span>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          ${getRecommendedMcpServers().map(mcp => {
+            const installStatus = isRecommendedMcpInstalled(mcp.id);
+            const mcpName = t(mcp.nameKey);
+            const mcpDesc = t(mcp.descKey);
+            return `
+              <div class="recommended-mcp-card bg-card border ${installStatus.installed ? 'border-success/50' : 'border-border'} rounded-lg p-4 hover:shadow-md transition-all">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 ${installStatus.installed ? 'bg-success/10' : 'bg-primary/10'} rounded-lg flex items-center justify-center">
+                      <i data-lucide="${mcp.icon}" class="w-5 h-5 ${installStatus.installed ? 'text-success' : 'text-primary'}"></i>
+                    </div>
+                    <div>
+                      <h4 class="font-semibold text-foreground">${escapeHtml(mcpName)}</h4>
+                      <span class="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">${mcp.category}</span>
+                    </div>
+                  </div>
+                  ${installStatus.installed ? `
+                    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-success/10 text-success">
+                      <i data-lucide="check" class="w-3 h-3"></i>
+                      ${installStatus.scope}
+                    </span>
+                  ` : ''}
+                </div>
+                <p class="text-sm text-muted-foreground mb-4 line-clamp-2">${escapeHtml(mcpDesc)}</p>
+                <div class="flex items-center justify-between">
+                  ${mcp.fields.length > 0 ? `
+                    <span class="text-xs text-muted-foreground flex items-center gap-1">
+                      <i data-lucide="key" class="w-3 h-3"></i>
+                      ${mcp.fields.length} ${t('mcp.configRequired')}
+                    </span>
+                  ` : `
+                    <span class="text-xs text-success flex items-center gap-1">
+                      <i data-lucide="zap" class="w-3 h-3"></i>
+                      ${t('mcp.noConfigNeeded')}
+                    </span>
+                  `}
+                  <button class="px-3 py-1.5 text-sm ${installStatus.installed ? 'bg-muted text-muted-foreground' : 'bg-primary text-primary-foreground'} rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
+                          onclick="openRecommendedMcpWizard('${mcp.id}')">
+                    <i data-lucide="${installStatus.installed ? 'settings' : 'download'}" class="w-3.5 h-3.5"></i>
+                    ${installStatus.installed ? t('mcp.reconfigure') : t('mcp.install')}
+                  </button>
+                </div>
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+
       <!-- Project Available MCP Servers -->
       <div class="mcp-section mb-6">
         <div class="flex items-center justify-between mb-4">

package/ccw/src/templates/dashboard-js/views/project-overview.js

@@ -180,16 +180,16 @@ function renderProjectOverview() {
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="text-center p-4 bg-background rounded-lg">
-          <div class="text-3xl font-bold text-primary mb-1">${project.statistics.total_features || 0}</div>
+          <div class="text-3xl font-bold text-primary mb-1">${calculateTotalFeatures(project.developmentIndex)}</div>
           <div class="text-sm text-muted-foreground">Total Features</div>
         </div>
         <div class="text-center p-4 bg-background rounded-lg">
-          <div class="text-3xl font-bold text-success mb-1">${project.statistics.total_sessions || 0}</div>
+          <div class="text-3xl font-bold text-success mb-1">${workflowData.statistics?.totalSessions || 0}</div>
           <div class="text-sm text-muted-foreground">Total Sessions</div>
         </div>
         <div class="text-center p-4 bg-background rounded-lg">
           <div class="text-sm text-muted-foreground mb-1">Last Updated</div>
-          <div class="text-sm font-medium text-foreground">${formatDate(project.statistics.last_updated)}</div>
+          <div class="text-sm font-medium text-foreground">${formatDate(getLastUpdatedDate(project.developmentIndex))}</div>
         </div>
       </div>
     </div>
@@ -203,55 +203,171 @@ function renderDevelopmentIndex(devIndex) {
   if (!devIndex) return '<p class="text-muted-foreground text-sm">No development history available</p>';
 
   const categories = [
-    { key: 'feature', label: 'Features', icon: '<i data-lucide="sparkles" class="w-4 h-4 inline"></i>', badgeClass: 'bg-primary-light text-primary' },
-    { key: 'enhancement', label: 'Enhancements', icon: '<i data-lucide="zap" class="w-4 h-4 inline"></i>', badgeClass: 'bg-success-light text-success' },
-    { key: 'bugfix', label: 'Bug Fixes', icon: '<i data-lucide="bug" class="w-4 h-4 inline"></i>', badgeClass: 'bg-destructive/10 text-destructive' },
-    { key: 'refactor', label: 'Refactorings', icon: '<i data-lucide="wrench" class="w-4 h-4 inline"></i>', badgeClass: 'bg-warning-light text-warning' },
-    { key: 'docs', label: 'Documentation', icon: '<i data-lucide="book-open" class="w-4 h-4 inline"></i>', badgeClass: 'bg-muted text-muted-foreground' }
+    { key: 'feature', label: 'Features', icon: '<i data-lucide="sparkles" class="w-4 h-4 inline"></i>', badgeClass: 'bg-primary-light text-primary', color: 'primary' },
+    { key: 'enhancement', label: 'Enhancements', icon: '<i data-lucide="zap" class="w-4 h-4 inline"></i>', badgeClass: 'bg-success-light text-success', color: 'success' },
+    { key: 'bugfix', label: 'Bug Fixes', icon: '<i data-lucide="bug" class="w-4 h-4 inline"></i>', badgeClass: 'bg-destructive/10 text-destructive', color: 'destructive' },
+    { key: 'refactor', label: 'Refactorings', icon: '<i data-lucide="wrench" class="w-4 h-4 inline"></i>', badgeClass: 'bg-warning-light text-warning', color: 'warning' },
+    { key: 'docs', label: 'Documentation', icon: '<i data-lucide="book-open" class="w-4 h-4 inline"></i>', badgeClass: 'bg-muted text-muted-foreground', color: 'muted' }
   ];
 
-  const totalEntries = categories.reduce((sum, cat) => sum + (devIndex[cat.key]?.length || 0), 0);
+  // Calculate totals from developmentIndex (dynamic calculation)
+  const totals = categories.reduce((acc, cat) => {
+    acc[cat.key] = (devIndex[cat.key] || []).length;
+    return acc;
+  }, {});
+  const totalEntries = Object.values(totals).reduce((sum, count) => sum + count, 0);
 
   if (totalEntries === 0) {
     return '<p class="text-muted-foreground text-sm">No development history entries</p>';
   }
 
+  // Collect all entries with type info for timeline view
+  const allEntries = [];
+  categories.forEach(cat => {
+    (devIndex[cat.key] || []).forEach(entry => {
+      allEntries.push({
+        ...entry,
+        type: cat.key,
+        typeLabel: cat.label,
+        typeIcon: cat.icon,
+        typeBadgeClass: cat.badgeClass,
+        typeColor: cat.color,
+        // Support both 'archivedAt' and 'date' field names
+        sortDate: entry.archivedAt || entry.date || entry.implemented_at || ''
+      });
+    });
+  });
+
+  // Sort by date descending (newest first)
+  allEntries.sort((a, b) => {
+    const dateA = new Date(a.sortDate || 0).getTime();
+    const dateB = new Date(b.sortDate || 0).getTime();
+    return dateB - dateA;
+  });
+
   return `
-    <div class="space-y-4">
-      ${categories.map(cat => {
-        const entries = devIndex[cat.key] || [];
-        if (entries.length === 0) return '';
-
-        return `
-          <div>
-            <h4 class="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
-              <span>${cat.icon}</span>
-              <span>${cat.label}</span>
-              <span class="text-xs px-2 py-0.5 ${cat.badgeClass} rounded-full">${entries.length}</span>
-            </h4>
-            <div class="space-y-2">
-              ${entries.slice(0, 5).map(entry => `
-                <div class="p-3 bg-background border border-border rounded-lg hover:shadow-sm transition-shadow">
-                  <div class="flex items-start justify-between mb-1">
-                    <h5 class="font-medium text-foreground text-sm">${escapeHtml(entry.title)}</h5>
-                    <span class="text-xs text-muted-foreground">${formatDate(entry.date)}</span>
-                  </div>
-                  ${entry.description ? `<p class="text-sm text-muted-foreground mb-1">${escapeHtml(entry.description)}</p>` : ''}
-                  <div class="flex items-center gap-2 text-xs">
-                    ${entry.sub_feature ? `<span class="px-2 py-0.5 bg-muted rounded">${escapeHtml(entry.sub_feature)}</span>` : ''}
-                    ${entry.status ? `<span class="px-2 py-0.5 ${entry.status === 'completed' ? 'bg-success-light text-success' : 'bg-warning-light text-warning'} rounded">${escapeHtml(entry.status)}</span>` : ''}
-                  </div>
+    <!-- View Toggle & Stats Summary -->
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-2">
+        ${categories.map(cat => {
+          const count = totals[cat.key];
+          if (count === 0) return '';
+          return `<span class="text-xs px-2 py-1 ${cat.badgeClass} rounded-full flex items-center gap-1">${cat.icon} ${count}</span>`;
+        }).join('')}
+      </div>
+      <div class="flex items-center gap-2">
+        <button id="viewCategoryBtn" onclick="toggleDevIndexView('category')" class="px-3 py-1.5 text-xs rounded-lg border border-border bg-background hover:bg-muted transition-colors dev-view-btn active">
+          <i data-lucide="layout-grid" class="w-3.5 h-3.5 inline mr-1"></i>Categories
+        </button>
+        <button id="viewTimelineBtn" onclick="toggleDevIndexView('timeline')" class="px-3 py-1.5 text-xs rounded-lg border border-border bg-background hover:bg-muted transition-colors dev-view-btn">
+          <i data-lucide="git-commit-horizontal" class="w-3.5 h-3.5 inline mr-1"></i>Timeline
+        </button>
+      </div>
+    </div>
+
+    <!-- Category View (default) -->
+    <div id="devIndexCategoryView" class="dev-index-view">
+      <div class="space-y-4">
+        ${categories.map(cat => {
+          const entries = devIndex[cat.key] || [];
+          if (entries.length === 0) return '';
+
+          return `
+            <div>
+              <h4 class="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
+                <span>${cat.icon}</span>
+                <span>${cat.label}</span>
+                <span class="text-xs px-2 py-0.5 ${cat.badgeClass} rounded-full">${entries.length}</span>
+              </h4>
+              <div class="space-y-2">
+                ${entries.slice(0, 5).map(entry => renderDevIndexEntry(entry, cat)).join('')}
+                ${entries.length > 5 ? `<div class="text-sm text-muted-foreground text-center py-2">... and ${entries.length - 5} more</div>` : ''}
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+    </div>
+
+    <!-- Timeline View -->
+    <div id="devIndexTimelineView" class="dev-index-view hidden">
+      <div class="dev-timeline">
+        ${allEntries.slice(0, 20).map((entry, index) => `
+          <div class="dev-timeline-item">
+            <div class="dev-timeline-marker">
+              <div class="dev-timeline-dot bg-${entry.typeColor}" title="${entry.typeLabel}">
+                ${entry.typeIcon}
+              </div>
+              ${index < Math.min(allEntries.length, 20) - 1 ? '<div class="dev-timeline-line"></div>' : ''}
+            </div>
+            <div class="dev-timeline-content">
+              <div class="flex items-start justify-between gap-2 mb-1">
+                <div class="flex items-center gap-2">
+                  <span class="text-xs px-2 py-0.5 ${entry.typeBadgeClass} rounded">${entry.typeLabel}</span>
+                  <h5 class="font-medium text-foreground text-sm">${escapeHtml(entry.title)}</h5>
                 </div>
-              `).join('')}
-              ${entries.length > 5 ? `<div class="text-sm text-muted-foreground text-center py-2">... and ${entries.length - 5} more</div>` : ''}
+                <span class="text-xs text-muted-foreground whitespace-nowrap">${formatDate(entry.sortDate)}</span>
+              </div>
+              ${entry.description ? `<p class="text-sm text-muted-foreground mb-1">${escapeHtml(entry.description)}</p>` : ''}
+              <div class="flex items-center gap-2 text-xs">
+                ${entry.sessionId ? `<span class="px-2 py-0.5 bg-muted rounded font-mono">${escapeHtml(entry.sessionId)}</span>` : ''}
+                ${entry.sub_feature ? `<span class="px-2 py-0.5 bg-muted rounded">${escapeHtml(entry.sub_feature)}</span>` : ''}
+                ${entry.tags && entry.tags.length > 0 ? entry.tags.slice(0, 3).map(tag => `<span class="px-2 py-0.5 bg-accent rounded">${escapeHtml(tag)}</span>`).join('') : ''}
+              </div>
             </div>
           </div>
-        `;
-      }).join('')}
+        `).join('')}
+        ${allEntries.length > 20 ? `<div class="text-sm text-muted-foreground text-center py-4">... and ${allEntries.length - 20} more entries</div>` : ''}
+      </div>
     </div>
   `;
 }
 
+// Helper function to render a single development index entry
+function renderDevIndexEntry(entry, cat) {
+  // Support both 'archivedAt' and 'date' field names
+  const entryDate = entry.archivedAt || entry.date || entry.implemented_at || '';
+
+  return `
+    <div class="p-3 bg-background border border-border rounded-lg hover:shadow-sm transition-shadow">
+      <div class="flex items-start justify-between mb-1">
+        <h5 class="font-medium text-foreground text-sm">${escapeHtml(entry.title)}</h5>
+        <span class="text-xs text-muted-foreground">${formatDate(entryDate)}</span>
+      </div>
+      ${entry.description ? `<p class="text-sm text-muted-foreground mb-1">${escapeHtml(entry.description)}</p>` : ''}
+      <div class="flex items-center gap-2 text-xs flex-wrap">
+        ${entry.sessionId ? `<span class="px-2 py-0.5 bg-primary-light text-primary rounded font-mono">${escapeHtml(entry.sessionId)}</span>` : ''}
+        ${entry.sub_feature ? `<span class="px-2 py-0.5 bg-muted rounded">${escapeHtml(entry.sub_feature)}</span>` : ''}
+        ${entry.status ? `<span class="px-2 py-0.5 ${entry.status === 'completed' ? 'bg-success-light text-success' : 'bg-warning-light text-warning'} rounded">${escapeHtml(entry.status)}</span>` : ''}
+        ${entry.tags && entry.tags.length > 0 ? entry.tags.slice(0, 2).map(tag => `<span class="px-2 py-0.5 bg-accent rounded">${escapeHtml(tag)}</span>`).join('') : ''}
+      </div>
+    </div>
+  `;
+}
+
+// Toggle between category and timeline views
+function toggleDevIndexView(view) {
+  const categoryView = document.getElementById('devIndexCategoryView');
+  const timelineView = document.getElementById('devIndexTimelineView');
+  const categoryBtn = document.getElementById('viewCategoryBtn');
+  const timelineBtn = document.getElementById('viewTimelineBtn');
+
+  if (view === 'timeline') {
+    categoryView.classList.add('hidden');
+    timelineView.classList.remove('hidden');
+    categoryBtn.classList.remove('active');
+    timelineBtn.classList.add('active');
+  } else {
+    categoryView.classList.remove('hidden');
+    timelineView.classList.add('hidden');
+    categoryBtn.classList.add('active');
+    timelineBtn.classList.remove('active');
+  }
+
+  // Reinitialize icons for the newly visible view
+  if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
 function renderProjectGuidelines(guidelines) {
   if (!guidelines) {
     return `
@@ -401,3 +517,32 @@ function renderLearnings(learnings) {
     </div>
   `;
 }
+
+// Calculate total features from developmentIndex (dynamic calculation)
+function calculateTotalFeatures(devIndex) {
+  if (!devIndex) return 0;
+  const categories = ['feature', 'enhancement', 'bugfix', 'refactor', 'docs'];
+  return categories.reduce((sum, cat) => sum + (devIndex[cat]?.length || 0), 0);
+}
+
+// Get the most recent date from developmentIndex entries
+function getLastUpdatedDate(devIndex) {
+  if (!devIndex) return null;
+
+  const categories = ['feature', 'enhancement', 'bugfix', 'refactor', 'docs'];
+  let latestDate = null;
+
+  categories.forEach(cat => {
+    (devIndex[cat] || []).forEach(entry => {
+      const entryDate = entry.archivedAt || entry.date || entry.implemented_at;
+      if (entryDate) {
+        const date = new Date(entryDate);
+        if (!latestDate || date > latestDate) {
+          latestDate = date;
+        }
+      }
+    });
+  });
+
+  return latestDate ? latestDate.toISOString() : null;
+}