claude-code-workflow 6.0.4 → 6.1.0

package/ccw/src/templates/dashboard-js/views/session-detail.js

@@ -81,26 +81,26 @@ function showSessionDetailPage(sessionKey) {
       <!-- Tab Navigation -->
       <div class="detail-tabs">
         <button class="detail-tab active" data-tab="tasks" onclick="switchDetailTab('tasks')">
-          <span class="tab-icon">📋</span>
+          <span class="tab-icon"><i data-lucide="list-checks" class="w-4 h-4"></i></span>
           <span class="tab-text">Tasks</span>
           <span class="tab-count">${tasks.length}</span>
         </button>
         <button class="detail-tab" data-tab="context" onclick="switchDetailTab('context')">
-          <span class="tab-icon">📦</span>
+          <span class="tab-icon"><i data-lucide="package" class="w-4 h-4"></i></span>
           <span class="tab-text">Context</span>
         </button>
         <button class="detail-tab" data-tab="summary" onclick="switchDetailTab('summary')">
-          <span class="tab-icon">📝</span>
+          <span class="tab-icon"><i data-lucide="file-text" class="w-4 h-4"></i></span>
           <span class="tab-text">Summary</span>
         </button>
         <button class="detail-tab" data-tab="impl-plan" onclick="switchDetailTab('impl-plan')">
-          <span class="tab-icon">📐</span>
+          <span class="tab-icon"><i data-lucide="ruler" class="w-4 h-4"></i></span>
           <span class="tab-text">IMPL Plan</span>
         </button>
-<button class="detail-tab" data-tab="conflict" onclick="switchDetailTab('conflict')">          <span class="tab-icon">⚖️</span>          <span class="tab-text">Conflict</span>        </button>
+<button class="detail-tab" data-tab="conflict" onclick="switchDetailTab('conflict')">          <span class="tab-icon"><i data-lucide="scale" class="w-4 h-4"></i></span>          <span class="tab-text">Conflict</span>        </button>
         ${session.hasReview ? `
           <button class="detail-tab" data-tab="review" onclick="switchDetailTab('review')">
-            <span class="tab-icon">🔍</span>
+            <span class="tab-icon"><i data-lucide="search" class="w-4 h-4"></i></span>
             <span class="tab-text">Review</span>
           </button>
         ` : ''}
@@ -112,6 +112,9 @@ function showSessionDetailPage(sessionKey) {
       </div>
     </div>
   `;
+  
+  // Initialize Lucide icons
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 function goBackToSessions() {
@@ -175,21 +178,21 @@ function renderTasksTab(session, tasks, completed, inProgress, pending) {
       <!-- Combined Stats & Actions Bar -->
       <div class="task-toolbar">
         <div class="task-stats-bar">
-          <span class="task-stat completed">✓ ${completed} completed</span>
-          <span class="task-stat in-progress">⟳ ${inProgress} in progress</span>
-          <span class="task-stat pending">○ ${pending} pending</span>
+          <span class="task-stat completed"><i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>${completed} completed</span>
+          <span class="task-stat in-progress"><i data-lucide="loader-2" class="w-4 h-4 inline mr-1"></i>${inProgress} in progress</span>
+          <span class="task-stat pending"><i data-lucide="circle" class="w-4 h-4 inline mr-1"></i>${pending} pending</span>
         </div>
         <div class="toolbar-divider"></div>
         <div class="task-bulk-actions">
           <span class="bulk-label">Quick Actions:</span>
           <button class="bulk-action-btn" onclick="bulkSetAllStatus('pending')" title="Set all tasks to pending">
-            <span class="bulk-icon">○</span> All Pending
+            <span class="bulk-icon"><i data-lucide="circle" class="w-4 h-4"></i></span> All Pending
           </button>
           <button class="bulk-action-btn" onclick="bulkSetAllStatus('in_progress')" title="Set all tasks to in progress">
-            <span class="bulk-icon">⟳</span> All In Progress
+            <span class="bulk-icon"><i data-lucide="loader-2" class="w-4 h-4"></i></span> All In Progress
           </button>
           <button class="bulk-action-btn completed" onclick="bulkSetAllStatus('completed')" title="Set all tasks to completed">
-            <span class="bulk-icon">✓</span> All Completed
+            <span class="bulk-icon"><i data-lucide="check-circle" class="w-4 h-4"></i></span> All Completed
           </button>
         </div>
       </div>
@@ -199,7 +202,7 @@ function renderTasksTab(session, tasks, completed, inProgress, pending) {
           <div class="tab-loading">Loading task details...</div>
         ` : (tasks.length === 0 ? `
           <div class="tab-empty-state">
-            <div class="empty-icon">📋</div>
+            <div class="empty-icon"><i data-lucide="clipboard-list" class="w-12 h-12"></i></div>
             <div class="empty-title">No Tasks</div>
             <div class="empty-text">This session has no tasks defined.</div>
           </div>
@@ -227,11 +230,12 @@ async function loadFullTaskDetails() {
       } else {
         tasksContainer.innerHTML = `
           <div class="tab-empty-state">
-            <div class="empty-icon">📋</div>
+            <div class="empty-icon"><i data-lucide="clipboard-list" class="w-12 h-12"></i></div>
             <div class="empty-title">No Task Files</div>
             <div class="empty-text">No IMPL-*.json files found in .task/</div>
           </div>
         `;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
       }
     }
   } catch (err) {
@@ -267,9 +271,9 @@ function renderDetailTaskItem(task) {
 
 function formatStatusLabel(status) {
   const labels = {
-    'pending': '○ Pending',
-    'in_progress': '⟳ In Progress',
-    'completed': '✓ Completed'
+    'pending': '<i data-lucide="circle" class="w-3 h-3 inline mr-1"></i>Pending',
+    'in_progress': '<i data-lucide="loader-2" class="w-3 h-3 inline mr-1"></i>In Progress',
+    'completed': '<i data-lucide="check-circle" class="w-3 h-3 inline mr-1"></i>Completed'
   };
   return labels[status] || status;
 }
@@ -429,11 +433,12 @@ async function loadAndRenderContextTab(session, contentArea) {
     // Fallback: show placeholder
     contentArea.innerHTML = `
       <div class="tab-empty-state">
-        <div class="empty-icon">📦</div>
+        <div class="empty-icon"><i data-lucide="package" class="w-12 h-12"></i></div>
         <div class="empty-title">Context Data</div>
         <div class="empty-text">Context data will be loaded from context-package.json</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load context: ${err.message}</div>`;
   }
@@ -453,11 +458,12 @@ async function loadAndRenderSummaryTab(session, contentArea) {
     }
     contentArea.innerHTML = `
       <div class="tab-empty-state">
-        <div class="empty-icon">📝</div>
+        <div class="empty-icon"><i data-lucide="file-text" class="w-12 h-12"></i></div>
         <div class="empty-title">Summaries</div>
         <div class="empty-text">Session summaries will be loaded from .summaries/</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load summaries: ${err.message}</div>`;
   }
@@ -477,11 +483,12 @@ async function loadAndRenderImplPlanTab(session, contentArea) {
     }
     contentArea.innerHTML = `
       <div class="tab-empty-state">
-        <div class="empty-icon">📐</div>
+        <div class="empty-icon"><i data-lucide="ruler" class="w-12 h-12"></i></div>
         <div class="empty-title">IMPL Plan</div>
         <div class="empty-text">IMPL plan will be loaded from IMPL_PLAN.md</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load IMPL plan: ${err.message}</div>`;
   }
@@ -501,11 +508,12 @@ async function loadAndRenderReviewTab(session, contentArea) {
     }
     contentArea.innerHTML = `
       <div class="tab-empty-state">
-        <div class="empty-icon">🔍</div>
+        <div class="empty-icon"><i data-lucide="search" class="w-12 h-12"></i></div>
         <div class="empty-title">Review Data</div>
         <div class="empty-text">Review data will be loaded from review files</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load review: ${err.message}</div>`;
   }
@@ -574,7 +582,7 @@ async function updateSingleTaskStatus(taskId, newStatus) {
       // Update UI
       updateTaskItemUI(taskId, newStatus);
       updateTaskStatsBar();
-      showToast(`Task ${taskId} → ${formatStatusLabel(newStatus)}`, 'success');
+      showToast(`Task ${taskId} status updated`, 'success');
     } else {
       showToast(result.error || 'Failed to update status', 'error');
       // Revert select
@@ -616,7 +624,7 @@ async function bulkSetAllStatus(newStatus) {
       // Update all task UIs
       taskIds.forEach(id => updateTaskItemUI(id, newStatus));
       updateTaskStatsBar();
-      showToast(`All ${taskIds.length} tasks → ${formatStatusLabel(newStatus)}`, 'success');
+      showToast(`All ${taskIds.length} tasks updated`, 'success');
     } else {
       showToast(result.error || 'Failed to bulk update', 'error');
     }
@@ -656,7 +664,7 @@ async function bulkSetPendingToInProgress() {
     if (result.success) {
       pendingTaskIds.forEach(id => updateTaskItemUI(id, 'in_progress'));
       updateTaskStatsBar();
-      showToast(`${pendingTaskIds.length} tasks: Pending → In Progress`, 'success');
+      showToast(`${pendingTaskIds.length} tasks moved to In Progress`, 'success');
     } else {
       showToast(result.error || 'Failed to update', 'error');
     }
@@ -696,7 +704,7 @@ async function bulkSetInProgressToCompleted() {
     if (result.success) {
       inProgressTaskIds.forEach(id => updateTaskItemUI(id, 'completed'));
       updateTaskStatsBar();
-      showToast(`${inProgressTaskIds.length} tasks: In Progress → Completed`, 'success');
+      showToast(`${inProgressTaskIds.length} tasks completed`, 'success');
     } else {
       showToast(result.error || 'Failed to update', 'error');
     }
@@ -735,10 +743,12 @@ function updateTaskStatsBar() {
   const statsBar = document.querySelector('.task-stats-bar');
   if (statsBar) {
     statsBar.innerHTML = `
-      <span class="task-stat completed">✓ ${completed} completed</span>
-      <span class="task-stat in-progress">⟳ ${inProgress} in progress</span>
-      <span class="task-stat pending">○ ${pending} pending</span>
+      <span class="task-stat completed"><i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>${completed} completed</span>
+      <span class="task-stat in-progress"><i data-lucide="loader-2" class="w-4 h-4 inline mr-1"></i>${inProgress} in progress</span>
+      <span class="task-stat pending"><i data-lucide="circle" class="w-4 h-4 inline mr-1"></i>${pending} pending</span>
     `;
+    // Reinitialize Lucide icons
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   }
 }
 

package/ccw/src/templates/dashboard.html

@@ -18,9 +18,11 @@
         'bg-card', 'bg-background', 'bg-hover', 'bg-accent', 'bg-muted', 'bg-primary', 'bg-success', 'bg-warning',
         'bg-success-light', 'bg-warning-light', 'bg-primary-light', 'bg-sidebar-background', 'bg-destructive',
         'bg-destructive/5', 'bg-destructive/10', 'bg-warning/5',
+        'bg-info', 'bg-info-light', 'bg-indigo', 'bg-indigo-light', 'bg-orange', 'bg-orange-light',
         // Text colors
         'text-foreground', 'text-muted-foreground', 'text-primary', 'text-card-foreground', 'text-success', 'text-warning',
         'text-primary-foreground', 'text-accent-foreground', 'text-sidebar-foreground', 'text-destructive',
+        'text-info', 'text-indigo', 'text-orange',
         // Border colors
         'border', 'border-border', 'border-primary', 'border-success', 'border-warning', 'border-muted',
         'border-l-success', 'border-l-warning', 'border-l-muted-foreground', 'border-l-primary',
@@ -74,6 +76,12 @@
             'success-light': 'hsl(var(--success-light))',
             warning: 'hsl(var(--warning))',
             'warning-light': 'hsl(var(--warning-light))',
+            info: 'hsl(var(--info))',
+            'info-light': 'hsl(var(--info-light))',
+            indigo: 'hsl(var(--indigo))',
+            'indigo-light': 'hsl(var(--indigo-light))',
+            orange: 'hsl(var(--orange))',
+            'orange-light': 'hsl(var(--orange-light))',
           },
           fontFamily: {
             sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
@@ -117,6 +125,12 @@
       --success-light: 142 76% 90%;
       --warning: 38 92% 50%;
       --warning-light: 48 96% 89%;
+      --info: 210 80% 55%;
+      --info-light: 210 80% 92%;
+      --indigo: 239 65% 60%;
+      --indigo-light: 239 65% 92%;
+      --orange: 25 90% 55%;
+      --orange-light: 25 90% 92%;
     }
 
     /* Dark Mode */
@@ -146,6 +160,12 @@
       --success-light: 142 50% 20%;
       --warning: 38 85% 45%;
       --warning-light: 40 50% 20%;
+      --info: 210 75% 50%;
+      --info-light: 210 50% 20%;
+      --indigo: 239 60% 55%;
+      --indigo-light: 239 40% 20%;
+      --orange: 25 85% 50%;
+      --orange-light: 25 50% 20%;
     }
 
     /* Scrollbar styling */
@@ -190,7 +210,35 @@
     .task-detail-drawer.open { transform: translateX(0); }
     .drawer-overlay.active { display: block; }
 
-    /* Injected from dashboard.css */
+    /* Unified Icon System */
+    .nav-icon {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      stroke-width: 2;
+    }
+    .nav-section-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      stroke-width: 2;
+      opacity: 0.8;
+    }
+    .sidebar.collapsed .nav-icon {
+      width: 20px;
+      height: 20px;
+    }
+    
+    /* Icon Animations */
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    .animate-spin {
+      animation: spin 1s linear infinite;
+    }
+
+    /* Injected from dashboard-css/*.css modules */
     {{CSS_CONTENT}}
   </style>
 </head>
@@ -199,9 +247,11 @@
     <!-- Top Bar -->
     <header class="flex items-center justify-between px-5 h-14 bg-card border-b border-border sticky top-0 z-50 shadow-sm">
       <div class="flex items-center gap-4">
-        <button class="hidden md:hidden p-2 text-foreground hover:bg-hover rounded menu-toggle-btn" id="menuToggle">☰</button>
+        <button class="hidden md:hidden p-2 text-foreground hover:bg-hover rounded menu-toggle-btn" id="menuToggle">
+          <i data-lucide="menu" class="w-5 h-5"></i>
+        </button>
         <div class="flex items-center gap-2 text-lg font-semibold text-primary">
-          <span class="text-2xl">⚡</span>
+          <i data-lucide="workflow" class="w-6 h-6"></i>
           <span class="hidden sm:inline">Claude Code Workflow</span>
         </div>
       </div>
@@ -223,7 +273,8 @@
               </div>
               <div class="p-2 border-t border-border">
                 <button class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-background border border-border rounded text-sm text-muted-foreground hover:bg-hover" id="browsePath">
-                  📂 Browse...
+                  <i data-lucide="folder-open" class="w-4 h-4"></i>
+                  <span>Browse...</span>
                 </button>
               </div>
             </div>
@@ -240,7 +291,10 @@
         </div>
 
         <!-- Theme Toggle -->
-        <button class="p-2 text-xl hover:bg-hover rounded" id="themeToggle" title="Toggle theme">🌙</button>
+        <button class="p-2 hover:bg-hover rounded flex items-center justify-center" id="themeToggle" title="Toggle theme">
+          <i data-lucide="moon" class="w-5 h-5 theme-icon-dark"></i>
+          <i data-lucide="sun" class="w-5 h-5 theme-icon-light hidden"></i>
+        </button>
       </div>
     </header>
 
@@ -255,38 +309,42 @@
           <!-- Project Overview Section -->
           <div class="mb-2" id="projectOverviewNav">
             <div class="flex items-center px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              <span class="mr-2">🏗️</span>
+              <i data-lucide="layout-dashboard" class="nav-section-icon mr-2"></i>
               <span class="nav-section-title">Project</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" data-view="project-overview" data-tooltip="Project Overview">
-                <span>📊</span>
+                <i data-lucide="bar-chart-3" class="nav-icon"></i>
                 <span class="nav-text flex-1">Overview</span>
               </li>
+              <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" data-view="explorer" data-tooltip="File Explorer">
+                <i data-lucide="folder-tree" class="nav-icon"></i>
+                <span class="nav-text flex-1">Explorer</span>
+              </li>
             </ul>
           </div>
 
           <!-- Sessions Section -->
           <div class="mb-2">
             <div class="flex items-center px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              <span class="mr-2">📁</span>
+              <i data-lucide="history" class="nav-section-icon mr-2"></i>
               <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" data-filter="all" data-tooltip="All Sessions">
-                <span>📋</span>
+                <i data-lucide="list" class="nav-icon"></i>
                 <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>
               </li>
               <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" data-filter="active" data-tooltip="Active Sessions">
-                <span>🟢</span>
+                <i data-lucide="play-circle" class="nav-icon text-success"></i>
                 <span class="nav-text flex-1">Active</span>
                 <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-success-light text-success" id="badgeActive">0</span>
               </li>
               <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" data-filter="archived" data-tooltip="Archived Sessions">
-                <span>📦</span>
+                <i data-lucide="archive" class="nav-icon text-info"></i>
                 <span class="nav-text flex-1">Archived</span>
-                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeArchived">0</span>
+                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-info-light text-info" id="badgeArchived">0</span>
               </li>
             </ul>
           </div>
@@ -294,19 +352,19 @@
           <!-- Lite Tasks Section -->
           <div class="mb-2" id="liteTasksNav">
             <div class="flex items-center px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              <span class="mr-2">⚡</span>
+              <i data-lucide="zap" class="nav-section-icon mr-2"></i>
               <span class="nav-section-title">Lite Tasks</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" data-lite="lite-plan" data-tooltip="Lite Plan Sessions">
-                <span>📝</span>
+                <i data-lucide="file-edit" class="nav-icon text-indigo"></i>
                 <span class="nav-text flex-1">Lite Plan</span>
-                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeLitePlan">0</span>
+                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-indigo-light text-indigo" id="badgeLitePlan">0</span>
               </li>
               <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" data-lite="lite-fix" data-tooltip="Lite Fix Sessions">
-                <span>🔧</span>
+                <i data-lucide="wrench" class="nav-icon text-orange"></i>
                 <span class="nav-text flex-1">Lite Fix</span>
-                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeLiteFix">0</span>
+                <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-orange-light text-orange" id="badgeLiteFix">0</span>
               </li>
             </ul>
           </div>
@@ -314,12 +372,12 @@
           <!-- MCP Servers Section -->
           <div class="mb-2" id="mcpServersNav">
             <div class="flex items-center px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              <span class="mr-2">🔌</span>
+              <i data-lucide="plug" class="nav-section-icon mr-2"></i>
               <span class="nav-section-title">MCP Servers</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" data-view="mcp-manager" data-tooltip="MCP Server Management">
-                <span>⚙️</span>
+                <i data-lucide="settings" class="nav-icon"></i>
                 <span class="nav-text flex-1">Manage</span>
                 <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeMcpServers">0</span>
               </li>
@@ -329,12 +387,12 @@
           <!-- Hooks Section -->
           <div class="mb-2" id="hooksNav">
             <div class="flex items-center px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              <span class="mr-2">🪝</span>
+              <i data-lucide="webhook" class="nav-section-icon mr-2"></i>
               <span class="nav-section-title">Hooks</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" data-view="hook-manager" data-tooltip="Hook Management">
-                <span>⚙️</span>
+                <i data-lucide="cable" class="nav-icon"></i>
                 <span class="nav-text flex-1">Manage</span>
                 <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-hover text-muted-foreground" id="badgeHooks">0</span>
               </li>
@@ -345,7 +403,7 @@
         <!-- Sidebar Footer -->
         <div class="p-3 border-t border-border">
           <button class="flex items-center justify-center gap-2 w-full px-3 py-2 border border-border rounded text-sm text-muted-foreground hover:bg-hover transition-colors" id="sidebarToggle">
-            <span class="toggle-icon transition-transform duration-300">◀</span>
+            <i data-lucide="panel-left-close" class="toggle-icon w-4 h-4 transition-transform duration-300"></i>
             <span class="toggle-text">Collapse</span>
           </button>
         </div>
@@ -358,22 +416,22 @@
           <!-- Left: 4 Metrics Grid -->
           <div class="stats-metrics grid grid-cols-2 gap-3 shrink-0">
             <div class="bg-card border border-border rounded-lg p-4 text-center hover:shadow-md transition-all duration-200 min-w-[140px]">
-              <div class="text-xl mb-1">📊</div>
+              <div class="flex justify-center mb-1 text-primary"><i data-lucide="layers" class="w-5 h-5"></i></div>
               <div class="text-2xl font-bold text-foreground" id="statTotalSessions">0</div>
               <div class="text-xs text-muted-foreground mt-1">Total Sessions</div>
             </div>
             <div class="bg-card border border-border rounded-lg p-4 text-center hover:shadow-md transition-all duration-200 min-w-[140px]">
-              <div class="text-xl mb-1">🟢</div>
+              <div class="flex justify-center mb-1 text-success"><i data-lucide="activity" class="w-5 h-5"></i></div>
               <div class="text-2xl font-bold text-foreground" id="statActiveSessions">0</div>
               <div class="text-xs text-muted-foreground mt-1">Active Sessions</div>
             </div>
             <div class="bg-card border border-border rounded-lg p-4 text-center hover:shadow-md transition-all duration-200 min-w-[140px]">
-              <div class="text-xl mb-1">📋</div>
+              <div class="flex justify-center mb-1 text-primary"><i data-lucide="clipboard-list" class="w-5 h-5"></i></div>
               <div class="text-2xl font-bold text-foreground" id="statTotalTasks">0</div>
               <div class="text-xs text-muted-foreground mt-1">Total Tasks</div>
             </div>
             <div class="bg-card border border-border rounded-lg p-4 text-center hover:shadow-md transition-all duration-200 min-w-[140px]">
-              <div class="text-xl mb-1">✅</div>
+              <div class="flex justify-center mb-1 text-success"><i data-lucide="check-circle-2" class="w-5 h-5"></i></div>
               <div class="text-2xl font-bold text-foreground" id="statCompletedTasks">0</div>
               <div class="text-xs text-muted-foreground mt-1">Completed Tasks</div>
             </div>
@@ -386,7 +444,7 @@
               <!-- Dynamic carousel slides -->
               <div class="carousel-empty flex items-center justify-center h-full text-muted-foreground">
                 <div class="text-center">
-                  <div class="text-3xl mb-2">🎯</div>
+                  <div class="flex justify-center mb-2"><i data-lucide="target" class="w-8 h-8"></i></div>
                   <p class="text-sm">No active sessions</p>
                 </div>
               </div>
@@ -421,7 +479,7 @@
         <div class="flex items-center justify-between flex-wrap gap-3 mb-5">
           <h2 class="text-xl font-semibold text-foreground" id="contentTitle">All Sessions</h2>
           <div class="relative">
-            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm">🔍</span>
+            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"></i>
             <input type="text" placeholder="Search..." id="searchInput"
               class="pl-9 pr-4 py-2 w-60 border border-border rounded-lg bg-background text-foreground text-sm focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
           </div>
@@ -618,10 +676,53 @@
     </div>
   </div>
 
+  <!-- Update CLAUDE.md Modal -->
+  <div id="updateClaudeMdModal" class="claude-md-modal hidden fixed inset-0 z-[100] flex items-center justify-center">
+    <div class="claude-md-modal-backdrop absolute inset-0 bg-black/60" onclick="closeUpdateClaudeMdModal()"></div>
+    <div class="claude-md-modal-content relative bg-card border border-border rounded-lg shadow-2xl w-[90vw] max-w-md flex flex-col">
+      <div class="claude-md-modal-header flex items-center justify-between px-4 py-3 border-b border-border">
+        <h3 class="text-lg font-semibold text-foreground">Update CLAUDE.md</h3>
+        <button class="w-8 h-8 flex items-center justify-center text-xl text-muted-foreground hover:text-foreground hover:bg-hover rounded" onclick="closeUpdateClaudeMdModal()">&times;</button>
+      </div>
+      <div class="claude-md-modal-body p-4 space-y-4">
+        <div class="claude-md-form-group">
+          <label>Target Directory</label>
+          <div class="claude-md-target-path" id="claudeMdTargetPath">-</div>
+        </div>
+        <div class="claude-md-form-group">
+          <label for="claudeMdTool">CLI Tool</label>
+          <select id="claudeMdTool">
+            <option value="gemini">Gemini (gemini-2.5-flash)</option>
+            <option value="qwen">Qwen (coder-model)</option>
+            <option value="codex">Codex (gpt5-codex)</option>
+          </select>
+        </div>
+        <div class="claude-md-form-group">
+          <label for="claudeMdStrategy">Strategy</label>
+          <select id="claudeMdStrategy">
+            <option value="single-layer">Single Layer - Current dir + child CLAUDE.md refs</option>
+            <option value="multi-layer">Multi Layer - Generate CLAUDE.md in all subdirs</option>
+          </select>
+        </div>
+        <div class="claude-md-status" id="claudeMdStatus"></div>
+      </div>
+      <div class="claude-md-modal-footer flex justify-end gap-2 px-4 py-3 border-t border-border">
+        <button class="px-4 py-2 text-sm bg-muted text-foreground rounded-lg hover:bg-hover transition-colors" onclick="closeUpdateClaudeMdModal()">Cancel</button>
+        <button class="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity" id="claudeMdExecuteBtn" onclick="executeUpdateClaudeMd()">Execute</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
   <!-- D3.js for Flowchart -->
   <script src="https://d3js.org/d3.v7.min.js"></script>
   <!-- Marked.js for Markdown rendering -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <!-- Highlight.js for Syntax Highlighting -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark.min.css" id="hljs-theme-dark">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css" id="hljs-theme-light" disabled>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
 
   <script>
 {{JS_CONTENT}}