claude-code-workflow 6.0.5 → 6.1.0

package/ccw/src/templates/dashboard-js/components/global-notifications.js

@@ -0,0 +1,219 @@
+// ==========================================
+// GLOBAL NOTIFICATION SYSTEM
+// ==========================================
+// Floating notification panel accessible from any view
+
+/**
+ * Initialize global notification panel
+ */
+function initGlobalNotifications() {
+  // Create FAB and panel if not exists
+  if (!document.getElementById('globalNotificationFab')) {
+    const fabHtml = `
+      <div class="global-notif-fab" id="globalNotificationFab" onclick="toggleGlobalNotifications()" title="Notifications">
+        <span class="fab-icon">🔔</span>
+        <span class="fab-badge" id="globalNotifBadge">0</span>
+      </div>
+      
+      <div class="global-notif-panel" id="globalNotificationPanel">
+        <div class="global-notif-header">
+          <span class="global-notif-title">🔔 Notifications</span>
+          <button class="global-notif-close" onclick="toggleGlobalNotifications()">×</button>
+        </div>
+        <div class="global-notif-actions">
+          <button class="notif-action-btn" onclick="clearGlobalNotifications()">
+            <span>🗑️</span> Clear All
+          </button>
+        </div>
+        <div class="global-notif-list" id="globalNotificationList">
+          <div class="global-notif-empty">
+            <span>No notifications</span>
+            <p>System events and task updates will appear here</p>
+          </div>
+        </div>
+      </div>
+    `;
+    
+    const container = document.createElement('div');
+    container.id = 'globalNotificationContainer';
+    container.innerHTML = fabHtml;
+    document.body.appendChild(container);
+  }
+  
+  renderGlobalNotifications();
+}
+
+/**
+ * Toggle notification panel visibility
+ */
+function toggleGlobalNotifications() {
+  isNotificationPanelVisible = !isNotificationPanelVisible;
+  const panel = document.getElementById('globalNotificationPanel');
+  const fab = document.getElementById('globalNotificationFab');
+  
+  if (panel && fab) {
+    if (isNotificationPanelVisible) {
+      panel.classList.add('show');
+      fab.classList.add('active');
+    } else {
+      panel.classList.remove('show');
+      fab.classList.remove('active');
+    }
+  }
+}
+
+/**
+ * Add a global notification
+ * @param {string} type - 'info', 'success', 'warning', 'error'
+ * @param {string} message - Main notification message
+ * @param {string} details - Optional details
+ * @param {string} source - Optional source identifier (e.g., 'explorer', 'mcp')
+ */
+function addGlobalNotification(type, message, details = null, source = null) {
+  const notification = {
+    id: Date.now(),
+    type,
+    message,
+    details,
+    source,
+    timestamp: new Date().toISOString(),
+    read: false
+  };
+  
+  globalNotificationQueue.unshift(notification);
+  
+  // Keep only last 100 notifications
+  if (globalNotificationQueue.length > 100) {
+    globalNotificationQueue = globalNotificationQueue.slice(0, 100);
+  }
+  
+  renderGlobalNotifications();
+  updateGlobalNotifBadge();
+  
+  // Show toast for important notifications
+  if (type === 'error' || type === 'success') {
+    showNotificationToast(notification);
+  }
+}
+
+/**
+ * Show a brief toast notification
+ */
+function showNotificationToast(notification) {
+  const typeIcon = {
+    'info': 'ℹ️',
+    'success': '✅',
+    'warning': '⚠️',
+    'error': '❌'
+  }[notification.type] || 'ℹ️';
+  
+  // Remove existing toast
+  const existing = document.querySelector('.notif-toast');
+  if (existing) existing.remove();
+  
+  const toast = document.createElement('div');
+  toast.className = `notif-toast type-${notification.type}`;
+  toast.innerHTML = `
+    <span class="toast-icon">${typeIcon}</span>
+    <span class="toast-message">${escapeHtml(notification.message)}</span>
+  `;
+  document.body.appendChild(toast);
+  
+  // Animate in
+  requestAnimationFrame(() => toast.classList.add('show'));
+  
+  // Auto-remove
+  setTimeout(() => {
+    toast.classList.remove('show');
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+/**
+ * Render notification list
+ */
+function renderGlobalNotifications() {
+  const listEl = document.getElementById('globalNotificationList');
+  if (!listEl) return;
+  
+  if (globalNotificationQueue.length === 0) {
+    listEl.innerHTML = `
+      <div class="global-notif-empty">
+        <span>No notifications</span>
+        <p>System events and task updates will appear here</p>
+      </div>
+    `;
+    return;
+  }
+  
+  listEl.innerHTML = globalNotificationQueue.map(notif => {
+    const typeIcon = {
+      'info': 'ℹ️',
+      'success': '✅',
+      'warning': '⚠️',
+      'error': '❌'
+    }[notif.type] || 'ℹ️';
+    
+    const time = formatNotifTime(notif.timestamp);
+    const sourceLabel = notif.source ? `<span class="notif-source">${notif.source}</span>` : '';
+    
+    return `
+      <div class="global-notif-item type-${notif.type} ${notif.read ? 'read' : ''}" data-id="${notif.id}">
+        <div class="notif-item-header">
+          <span class="notif-icon">${typeIcon}</span>
+          <span class="notif-message">${escapeHtml(notif.message)}</span>
+          ${sourceLabel}
+        </div>
+        ${notif.details ? `<div class="notif-details">${escapeHtml(notif.details)}</div>` : ''}
+        <div class="notif-meta">
+          <span class="notif-time">${time}</span>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * Format notification time
+ */
+function formatNotifTime(timestamp) {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now - date;
+  
+  if (diff < 60000) return 'Just now';
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+  return date.toLocaleDateString();
+}
+
+/**
+ * Update notification badge
+ */
+function updateGlobalNotifBadge() {
+  const badge = document.getElementById('globalNotifBadge');
+  if (badge) {
+    const unreadCount = globalNotificationQueue.filter(n => !n.read).length;
+    badge.textContent = unreadCount;
+    badge.style.display = unreadCount > 0 ? 'flex' : 'none';
+  }
+}
+
+/**
+ * Clear all notifications
+ */
+function clearGlobalNotifications() {
+  globalNotificationQueue = [];
+  renderGlobalNotifications();
+  updateGlobalNotifBadge();
+}
+
+/**
+ * Mark all as read
+ */
+function markAllNotificationsRead() {
+  globalNotificationQueue.forEach(n => n.read = true);
+  renderGlobalNotifications();
+  updateGlobalNotifBadge();
+}
+

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

@@ -271,3 +271,13 @@ function getHookEventIcon(event) {
   };
   return icons[event] || '🪝';
 }
+
+function getHookEventIconLucide(event) {
+  const icons = {
+    'PreToolUse': '<i data-lucide="clock" class="w-5 h-5"></i>',
+    'PostToolUse': '<i data-lucide="check-circle" class="w-5 h-5"></i>',
+    'Notification': '<i data-lucide="bell" class="w-5 h-5"></i>',
+    'Stop': '<i data-lucide="octagon-x" class="w-5 h-5"></i>'
+  };
+  return icons[event] || '<i data-lucide="webhook" class="w-5 h-5"></i>';
+}

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

@@ -1,11 +1,18 @@
 // MCP Manager Component
-// Manages MCP server configuration from .claude.json
+// Manages MCP server configuration from multiple sources:
+// - Enterprise: managed-mcp.json (highest priority)
+// - User: ~/.claude.json mcpServers
+// - Project: .mcp.json in project root
+// - Local: ~/.claude.json projects[path].mcpServers
 
 // ========== MCP State ==========
 let mcpConfig = null;
 let mcpAllProjects = {};
 let mcpGlobalServers = {};
+let mcpUserServers = {};
+let mcpEnterpriseServers = {};
 let mcpCurrentProjectServers = {};
+let mcpConfigSources = [];
 let mcpCreateMode = 'form'; // 'form' or 'json'
 
 // ========== Initialization ==========
@@ -33,6 +40,9 @@ async function loadMcpConfig() {
     mcpConfig = data;
     mcpAllProjects = data.projects || {};
     mcpGlobalServers = data.globalServers || {};
+    mcpUserServers = data.userServers || {};
+    mcpEnterpriseServers = data.enterpriseServers || {};
+    mcpConfigSources = data.configSources || [];
 
     // Get current project servers
     const currentPath = projectPath.replace(/\//g, '\\');

package/ccw/src/templates/dashboard-js/components/navigation.js

@@ -96,6 +96,8 @@ function initNavigation() {
         renderMcpManager();
       } else if (currentView === 'project-overview') {
         renderProjectOverview();
+      } else if (currentView === 'explorer') {
+        renderExplorer();
       }
     });
   });
@@ -112,6 +114,8 @@ function updateContentTitle() {
     titleEl.textContent = 'Project Overview';
   } else if (currentView === 'mcp-manager') {
     titleEl.textContent = 'MCP Server Management';
+  } else if (currentView === 'explorer') {
+    titleEl.textContent = 'File Explorer';
   } else if (currentView === 'liteTasks') {
     const names = { 'lite-plan': 'Lite Plan Sessions', 'lite-fix': 'Lite Fix Sessions' };
     titleEl.textContent = names[currentLiteType] || 'Lite Tasks';
@@ -157,17 +161,19 @@ async function refreshWorkspace() {
       // Reload data from server
       const data = await loadDashboardData(projectPath);
       if (data) {
-        // Update stores
-        sessionDataStore = {};
-        liteTaskDataStore = {};
+        // Clear and repopulate stores
+        Object.keys(sessionDataStore).forEach(k => delete sessionDataStore[k]);
+        Object.keys(liteTaskDataStore).forEach(k => delete liteTaskDataStore[k]);
 
         // Populate stores
         [...(data.activeSessions || []), ...(data.archivedSessions || [])].forEach(s => {
-          sessionDataStore[s.session_id] = s;
+          const sessionKey = `session-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+          sessionDataStore[sessionKey] = s;
         });
 
         [...(data.liteTasks?.litePlan || []), ...(data.liteTasks?.liteFix || [])].forEach(s => {
-          liteTaskDataStore[s.session_id] = s;
+          const sessionKey = `lite-${s.session_id}`.replace(/[^a-zA-Z0-9-]/g, '-');
+          liteTaskDataStore[sessionKey] = s;
         });
 
         // Update global data

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

@@ -12,7 +12,7 @@ function renderContextContent(context) {
   if (!context) {
     return `
       <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">No Context Data</div>
         <div class="empty-text">No context-package.json found for this session.</div>
       </div>
@@ -39,9 +39,9 @@ function renderContextContent(context) {
       <!-- Header Card -->
       <div class="ctx-header-card">
         <div class="ctx-header-content">
-          <h3 class="ctx-main-title">📦 Context Package</h3>
+          <h3 class="ctx-main-title"><i data-lucide="package" class="w-5 h-5 inline mr-2"></i>Context Package</h3>
           <button class="btn-view-modal" onclick="openMarkdownModal('context-package.json', window._currentContextJson, 'json')">
-            👁️ View JSON
+            <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View JSON
           </button>
         </div>
       </div>
@@ -50,7 +50,7 @@ function renderContextContent(context) {
       ${metadata.task_description || metadata.session_id ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">📋</span>
+            <span class="ctx-card-icon"><i data-lucide="clipboard-list" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Task Metadata</h4>
           </div>
           <div class="ctx-card-body">
@@ -90,7 +90,7 @@ function renderContextContent(context) {
       ${architecturePatterns.length > 0 ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">🏛️</span>
+            <span class="ctx-card-icon"><i data-lucide="building-2" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Architecture Patterns</h4>
             <span class="ctx-count-badge">${architecturePatterns.length}</span>
           </div>
@@ -106,7 +106,7 @@ function renderContextContent(context) {
       ${Object.keys(techStack).length > 0 ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">💻</span>
+            <span class="ctx-card-icon"><i data-lucide="code-2" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Technology Stack</h4>
           </div>
           <div class="ctx-card-body">
@@ -119,7 +119,7 @@ function renderContextContent(context) {
       ${Object.keys(codingConventions).length > 0 ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">📝</span>
+            <span class="ctx-card-icon"><i data-lucide="file-code" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Coding Conventions</h4>
           </div>
           <div class="ctx-card-body">
@@ -145,7 +145,7 @@ function renderContextContent(context) {
       ${(dependencies.internal && dependencies.internal.length > 0) || (dependencies.external && dependencies.external.length > 0) ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">🔗</span>
+            <span class="ctx-card-icon"><i data-lucide="link" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Dependencies</h4>
           </div>
           <div class="ctx-card-body">
@@ -158,7 +158,7 @@ function renderContextContent(context) {
       ${Object.keys(testContext).length > 0 ? `
         <div class="ctx-card">
           <div class="ctx-card-header">
-            <span class="ctx-card-icon">🧪</span>
+            <span class="ctx-card-icon"><i data-lucide="flask-conical" class="w-5 h-5"></i></span>
             <h4 class="ctx-card-title">Test Context</h4>
           </div>
           <div class="ctx-card-body">
@@ -314,7 +314,7 @@ function renderAssetsCards(assets) {
     sections.push(`
       <div class="ctx-assets-category">
         <div class="ctx-assets-cat-header">
-          <span class="ctx-assets-cat-icon">📄</span>
+          <span class="ctx-assets-cat-icon"><i data-lucide="file-text" class="w-4 h-4"></i></span>
           <span class="ctx-assets-cat-title">Documentation</span>
           <span class="ctx-assets-cat-count">${assets.documentation.length}</span>
         </div>
@@ -335,7 +335,7 @@ function renderAssetsCards(assets) {
     sections.push(`
       <div class="ctx-assets-category">
         <div class="ctx-assets-cat-header">
-          <span class="ctx-assets-cat-icon">💻</span>
+          <span class="ctx-assets-cat-icon"><i data-lucide="code-2" class="w-4 h-4"></i></span>
           <span class="ctx-assets-cat-title">Source Code</span>
           <span class="ctx-assets-cat-count">${assets.source_code.length}</span>
         </div>
@@ -356,7 +356,7 @@ function renderAssetsCards(assets) {
     sections.push(`
       <div class="ctx-assets-category">
         <div class="ctx-assets-cat-header">
-          <span class="ctx-assets-cat-icon">🧪</span>
+          <span class="ctx-assets-cat-icon"><i data-lucide="flask-conical" class="w-4 h-4"></i></span>
           <span class="ctx-assets-cat-title">Tests</span>
           <span class="ctx-assets-cat-count">${assets.tests.length}</span>
         </div>
@@ -657,7 +657,7 @@ function renderAssetsSection(assets) {
   if (assets.documentation && assets.documentation.length > 0) {
     sections.push(`
       <div class="asset-category">
-        <h5 class="asset-category-title">📄 Documentation</h5>
+        <h5 class="asset-category-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>Documentation</h5>
         <div class="asset-grid">
           ${assets.documentation.map(doc => `
             <div class="asset-card">
@@ -684,7 +684,7 @@ function renderAssetsSection(assets) {
   if (assets.source_code && assets.source_code.length > 0) {
     sections.push(`
       <div class="asset-category">
-        <h5 class="asset-category-title">💻 Source Code</h5>
+        <h5 class="asset-category-title"><i data-lucide="code-2" class="w-4 h-4 inline mr-1"></i>Source Code</h5>
         <div class="asset-grid">
           ${assets.source_code.map(src => `
             <div class="asset-card">
@@ -712,7 +712,7 @@ function renderAssetsSection(assets) {
   if (assets.tests && assets.tests.length > 0) {
     sections.push(`
       <div class="asset-category">
-        <h5 class="asset-category-title">🧪 Tests</h5>
+        <h5 class="asset-category-title"><i data-lucide="flask-conical" class="w-4 h-4 inline mr-1"></i>Tests</h5>
         <div class="asset-grid">
           ${assets.tests.map(test => `
             <div class="asset-card">
@@ -764,7 +764,7 @@ function renderDependenciesSection(dependencies) {
   if (dependencies.external && dependencies.external.length > 0) {
     sections.push(`
       <div class="dep-category">
-        <h5 class="dep-category-title">📦 External Dependencies</h5>
+        <h5 class="dep-category-title"><i data-lucide="package" class="w-4 h-4 inline mr-1"></i>External Dependencies</h5>
         <div class="dep-grid">
           ${dependencies.external.map(dep => `
             <div class="dep-external-card">
@@ -836,7 +836,7 @@ function renderTestContextSection(testContext) {
 
     sections.push(`
       <div class="test-category">
-        <h5 class="test-category-title">📊 Test Statistics</h5>
+        <h5 class="test-category-title"><i data-lucide="bar-chart-3" class="w-4 h-4 inline mr-1"></i>Test Statistics</h5>
         <div class="test-stats-grid">
           <div class="stat-card">
             <div class="stat-value">${totalTests}</div>
@@ -930,7 +930,7 @@ function renderConflictDetectionSection(conflictDetection) {
   if (conflictDetection.affected_modules && conflictDetection.affected_modules.length > 0) {
     sections.push(`
       <div class="conflict-category">
-        <h5 class="conflict-category-title">📦 Affected Modules</h5>
+        <h5 class="conflict-category-title"><i data-lucide="package-open" class="w-4 h-4 inline mr-1"></i>Affected Modules</h5>
         <div class="affected-modules-grid">
           ${conflictDetection.affected_modules.map(mod => `
             <span class="affected-module-tag">${escapeHtml(mod)}</span>
@@ -996,7 +996,7 @@ function renderSessionContextContent(context, explorations, conflictResolution)
 
   return `
     <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">No Context Data</div>
       <div class="empty-text">No context-package.json or exploration files found for this session.</div>
     </div>
@@ -1033,7 +1033,7 @@ function renderConflictResolutionContext(conflictResolution) {
       <div class="conflict-decisions-section collapsible-section">
         <div class="collapsible-header">
           <span class="collapse-icon">▶</span>
-          <span class="section-label">🎯 User Decisions (${decisions.length})</span>
+          <span class="section-label"><i data-lucide="target" class="w-4 h-4 inline mr-1"></i>User Decisions (${decisions.length})</span>
         </div>
         <div class="collapsible-content collapsed">
           <div class="decisions-list">

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

@@ -11,7 +11,7 @@ function renderSummaryContent(summaries) {
   if (!summaries || summaries.length === 0) {
     return `
       <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">No Summaries</div>
         <div class="empty-text">No summaries found in .summaries/</div>
       </div>
@@ -31,9 +31,9 @@ function renderSummaryContent(summaries) {
         return `
           <div class="summary-item-card">
             <div class="summary-item-header">
-              <h4 class="summary-item-title">📄 ${escapeHtml(s.name || 'Summary')}</h4>
+              <h4 class="summary-item-title"><i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>${escapeHtml(s.name || 'Summary')}</h4>
               <button class="btn-view-modal" onclick="openMarkdownModal('${escapeHtml(s.name || 'Summary')}', window._currentSummaries[${idx}].content, 'markdown');">
-                👁️ View
+                <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
               </button>
             </div>
             <div class="summary-item-preview">
@@ -54,7 +54,7 @@ function renderImplPlanContent(implPlan) {
   if (!implPlan) {
     return `
       <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">No IMPL Plan</div>
         <div class="empty-text">No IMPL_PLAN.md found for this session.</div>
       </div>
@@ -73,9 +73,9 @@ function renderImplPlanContent(implPlan) {
     <div class="impl-plan-tab-content">
       <div class="impl-plan-card">
         <div class="impl-plan-header">
-          <h3 class="impl-plan-title">📐 Implementation Plan</h3>
+          <h3 class="impl-plan-title"><i data-lucide="ruler" class="w-5 h-5 inline mr-2"></i>Implementation Plan</h3>
           <button class="btn-view-modal" onclick="openMarkdownModal('IMPL_PLAN.md', window._currentImplPlan, 'markdown')">
-            👁️ View
+            <i data-lucide="eye" class="w-4 h-4 inline mr-1"></i>View
           </button>
         </div>
         <div class="impl-plan-preview">
@@ -151,7 +151,7 @@ function renderLiteContextContent(context, explorations, session) {
 
   return `
     <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">No Context Data</div>
       <div class="empty-text">No context-package.json or exploration files found for this session.</div>
     </div>
@@ -187,10 +187,10 @@ function renderExplorationContext(explorations) {
   // Render each exploration angle as collapsible section
   const explorationOrder = ['architecture', 'dependencies', 'patterns', 'integration-points'];
   const explorationTitles = {
-    'architecture': '🏗️ Architecture',
-    'dependencies': '📦 Dependencies',
-    'patterns': '🔄 Patterns',
-    'integration-points': '🔌 Integration Points'
+    'architecture': '<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'
   };
 
   for (const angle of explorationOrder) {

package/ccw/src/templates/dashboard-js/components/theme.js

@@ -6,6 +6,7 @@ function initTheme() {
   const saved = localStorage.getItem('theme') || 'light';
   document.documentElement.setAttribute('data-theme', saved);
   updateThemeIcon(saved);
+  updateHljsTheme(saved);
 
   document.getElementById('themeToggle').addEventListener('click', () => {
     const current = document.documentElement.getAttribute('data-theme');
@@ -13,9 +14,36 @@ function initTheme() {
     document.documentElement.setAttribute('data-theme', next);
     localStorage.setItem('theme', next);
     updateThemeIcon(next);
+    updateHljsTheme(next);
   });
 }
 
 function updateThemeIcon(theme) {
-  document.getElementById('themeToggle').textContent = theme === 'light' ? '🌙' : '☀️';
+  const darkIcon = document.querySelector('.theme-icon-dark');
+  const lightIcon = document.querySelector('.theme-icon-light');
+  if (darkIcon && lightIcon) {
+    if (theme === 'light') {
+      darkIcon.classList.remove('hidden');
+      lightIcon.classList.add('hidden');
+    } else {
+      darkIcon.classList.add('hidden');
+      lightIcon.classList.remove('hidden');
+    }
+  }
+}
+
+function updateHljsTheme(theme) {
+  // Toggle highlight.js theme stylesheets
+  const darkTheme = document.getElementById('hljs-theme-dark');
+  const lightTheme = document.getElementById('hljs-theme-light');
+  
+  if (darkTheme && lightTheme) {
+    if (theme === 'dark') {
+      darkTheme.disabled = false;
+      lightTheme.disabled = true;
+    } else {
+      darkTheme.disabled = true;
+      lightTheme.disabled = false;
+    }
+  }
 }

package/ccw/src/templates/dashboard-js/main.js

@@ -2,6 +2,9 @@
 // Initializes all components and sets up global event handlers
 
 document.addEventListener('DOMContentLoaded', async () => {
+  // Initialize Lucide icons (must be first to render SVG icons)
+  try { lucide.createIcons(); } catch (e) { console.error('Lucide icons init failed:', e); }
+
   // Initialize components with error handling to prevent cascading failures
   try { initTheme(); } catch (e) { console.error('Theme init failed:', e); }
   try { initSidebar(); } catch (e) { console.error('Sidebar init failed:', e); }
@@ -12,6 +15,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   try { initCarousel(); } catch (e) { console.error('Carousel init failed:', e); }
   try { initMcpManager(); } catch (e) { console.error('MCP Manager init failed:', e); }
   try { initHookManager(); } catch (e) { console.error('Hook Manager init failed:', e); }
+  try { initGlobalNotifications(); } catch (e) { console.error('Global notifications init failed:', e); }
 
   // Initialize real-time features (WebSocket + auto-refresh)
   try { initWebSocket(); } catch (e) { console.log('WebSocket not available:', e.message); }

package/ccw/src/templates/dashboard-js/state.js

@@ -35,3 +35,8 @@ const liteTaskDataStore = {};
 // Store task JSON data in a global map instead of inline script tags
 // Key: unique task ID, Value: raw task JSON data
 const taskJsonStore = {};
+
+// ========== Global Notification Queue ==========
+// Notification queue visible from any view
+let globalNotificationQueue = [];
+let isNotificationPanelVisible = false;