claude-code-workflow 6.0.4 → 6.1.0

package/ccw/src/templates/dashboard-js/views/home.js

@@ -73,15 +73,19 @@ function renderSessions() {
   if (sessions.length === 0) {
     container.innerHTML = `
       <div class="empty-state" style="grid-column: 1/-1;">
-        <div class="empty-icon">📭</div>
+        <div class="empty-icon"><i data-lucide="inbox" class="w-12 h-12"></i></div>
         <div class="empty-title">No Sessions Found</div>
         <div class="empty-text">No workflow sessions match your current filter.</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
     return;
   }
 
   container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderSessionCard(session)).join('')}</div>`;
+  
+  // Initialize Lucide icons after rendering
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 function renderSessionCard(session) {
@@ -120,8 +124,8 @@ function renderSessionCard(session) {
       </div>
       <div class="session-body">
         <div class="session-meta">
-          <span class="session-meta-item">📅 ${formatDate(date)}</span>
-          <span class="session-meta-item">📋 ${taskCount} tasks</span>
+          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
+          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${taskCount} tasks</span>
         </div>
         ${taskCount > 0 ? `
           <div class="progress-container">
@@ -171,16 +175,16 @@ function renderReviewSessionCard(session, sessionKey, typeBadge, isActive, date)
       </div>
       <div class="session-body">
         <div class="session-meta">
-          <span class="session-meta-item">📅 ${formatDate(date)}</span>
-          <span class="session-meta-item">🔍 ${totalFindings} findings</span>
+          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(date)}</span>
+          <span class="session-meta-item"><i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>${totalFindings} findings</span>
         </div>
         ${totalFindings > 0 ? `
           <div class="review-findings-summary">
             <div class="findings-severity-row">
-              ${criticalCount > 0 ? `<span class="finding-count critical">🔴 ${criticalCount}</span>` : ''}
-              ${highCount > 0 ? `<span class="finding-count high">🟠 ${highCount}</span>` : ''}
-              ${mediumCount > 0 ? `<span class="finding-count medium">🟡 ${mediumCount}</span>` : ''}
-              ${lowCount > 0 ? `<span class="finding-count low">🟢 ${lowCount}</span>` : ''}
+              ${criticalCount > 0 ? `<span class="finding-count critical"><i data-lucide="alert-circle" class="w-3 h-3 inline"></i> ${criticalCount}</span>` : ''}
+              ${highCount > 0 ? `<span class="finding-count high"><i data-lucide="alert-triangle" class="w-3 h-3 inline"></i> ${highCount}</span>` : ''}
+              ${mediumCount > 0 ? `<span class="finding-count medium"><i data-lucide="info" class="w-3 h-3 inline"></i> ${mediumCount}</span>` : ''}
+              ${lowCount > 0 ? `<span class="finding-count low"><i data-lucide="check-circle" class="w-3 h-3 inline"></i> ${lowCount}</span>` : ''}
             </div>
             <div class="dimensions-info">
               ${dimensions.length} dimensions

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

@@ -41,7 +41,7 @@ async function renderHookManager() {
 
         ${projectHookCount === 0 ? `
           <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-3xl mb-3">🪝</div>
+            <div class="text-muted-foreground mb-3"><i data-lucide="webhook" class="w-10 h-10 mx-auto"></i></div>
             <p class="text-muted-foreground">No hooks configured for this project</p>
             <p class="text-sm text-muted-foreground mt-1">Create a hook to automate actions on tool usage</p>
           </div>
@@ -133,6 +133,9 @@ async function renderHookManager() {
 
   // Attach event listeners
   attachHookEventListeners();
+  
+  // Initialize Lucide icons
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 function countHooks(hooks) {
@@ -160,7 +163,7 @@ function renderHooksByEvent(hooks, scope) {
         <div class="hook-card bg-card border 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-2">
-              <span class="text-xl">${getHookEventIcon(event)}</span>
+              ${getHookEventIconLucide(event)}
               <div>
                 <h4 class="font-semibold text-foreground">${event}</h4>
                 <p class="text-xs text-muted-foreground">${getHookEventDescription(event)}</p>
@@ -173,7 +176,7 @@ function renderHooksByEvent(hooks, scope) {
                       data-index="${index}"
                       data-action="edit"
                       title="Edit hook">
-                ✏️
+                <i data-lucide="pencil" class="w-4 h-4"></i>
               </button>
               <button class="p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
                       data-scope="${scope}"
@@ -181,7 +184,7 @@ function renderHooksByEvent(hooks, scope) {
                       data-index="${index}"
                       data-action="delete"
                       title="Delete hook">
-                🗑️
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
               </button>
             </div>
           </div>
@@ -215,7 +218,7 @@ function renderQuickInstallCard(templateId, title, description, event, matcher)
     <div class="hook-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isInstalled ? 'border-success bg-success-light/30' : ''}">
       <div class="flex items-start justify-between mb-3">
         <div class="flex items-center gap-2">
-          <span class="text-xl">${isInstalled ? '✅' : '🪝'}</span>
+          ${isInstalled ? '<i data-lucide="check-circle" class="w-5 h-5 text-success"></i>' : '<i data-lucide="webhook" class="w-5 h-5"></i>'}
           <div>
             <h4 class="font-semibold text-foreground">${escapeHtml(title)}</h4>
             <p class="text-xs text-muted-foreground">${escapeHtml(description)}</p>

package/ccw/src/templates/dashboard-js/views/lite-tasks.js

@@ -14,15 +14,19 @@ function renderLiteTasks() {
   if (sessions.length === 0) {
     container.innerHTML = `
       <div class="empty-state">
-        <div class="empty-icon">⚡</div>
+        <div class="empty-icon"><i data-lucide="zap" class="w-12 h-12"></i></div>
         <div class="empty-title">No ${currentLiteType} Sessions</div>
         <div class="empty-text">No sessions found in .workflow/.${currentLiteType}/</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
     return;
   }
 
   container.innerHTML = `<div class="sessions-grid">${sessions.map(session => renderLiteTaskCard(session)).join('')}</div>`;
+  
+  // Initialize Lucide icons
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 
   // Initialize collapsible sections
   document.querySelectorAll('.collapsible-header').forEach(header => {
@@ -51,13 +55,13 @@ function renderLiteTaskCard(session) {
       <div class="session-header">
         <div class="session-title">${escapeHtml(session.id)}</div>
         <span class="session-status ${session.type}">
-          ${session.type === 'lite-plan' ? '📝 PLAN' : '🔧 FIX'}
+          ${session.type === 'lite-plan' ? '<i data-lucide="file-edit" class="w-3 h-3 inline"></i> PLAN' : '<i data-lucide="wrench" class="w-3 h-3 inline"></i> FIX'}
         </span>
       </div>
       <div class="session-body">
         <div class="session-meta">
-          <span class="session-meta-item">📅 ${formatDate(session.createdAt)}</span>
-          <span class="session-meta-item">📋 ${tasks.length} tasks</span>
+          <span class="session-meta-item"><i data-lucide="calendar" class="w-3.5 h-3.5 inline mr-1"></i>${formatDate(session.createdAt)}</span>
+          <span class="session-meta-item"><i data-lucide="list-checks" class="w-3.5 h-3.5 inline mr-1"></i>${tasks.length} tasks</span>
         </div>
       </div>
     </div>
@@ -102,7 +106,7 @@ function showLiteTaskDetailPage(sessionKey) {
           <span>Back to ${session.type === 'lite-plan' ? 'Lite Plan' : 'Lite Fix'}</span>
         </button>
         <div class="detail-title-row">
-          <h2 class="detail-session-id">${session.type === 'lite-plan' ? '📝' : '🔧'} ${escapeHtml(session.id)}</h2>
+          <h2 class="detail-session-id">${session.type === 'lite-plan' ? '<i data-lucide="file-edit" class="w-5 h-5 inline mr-2"></i>' : '<i data-lucide="wrench" class="w-5 h-5 inline mr-2"></i>'} ${escapeHtml(session.id)}</h2>
           <div class="detail-badges">
             <span class="session-type-badge ${session.type}">${session.type}</span>
           </div>
@@ -124,20 +128,20 @@ function showLiteTaskDetailPage(sessionKey) {
       <!-- Tab Navigation -->
       <div class="detail-tabs">
         <button class="detail-tab active" data-tab="tasks" onclick="switchLiteDetailTab('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="plan" onclick="switchLiteDetailTab('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">Plan</span>
         </button>
         <button class="detail-tab" data-tab="context" onclick="switchLiteDetailTab('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="switchLiteDetailTab('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>
       </div>
@@ -209,7 +213,7 @@ function renderLiteTasksTab(session, tasks, completed, inProgress, pending) {
   if (tasks.length === 0) {
     return `
       <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>
@@ -287,7 +291,7 @@ function renderLitePlanTab(session) {
   if (!plan) {
     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 Plan Data</div>
         <div class="empty-text">No plan.json found for this session.</div>
       </div>
@@ -299,7 +303,7 @@ function renderLitePlanTab(session) {
       <!-- Summary -->
       ${plan.summary ? `
         <div class="plan-section">
-          <h4 class="plan-section-title">📋 Summary</h4>
+          <h4 class="plan-section-title"><i data-lucide="clipboard-list" class="w-4 h-4 inline mr-1"></i> Summary</h4>
           <p class="plan-summary-text">${escapeHtml(plan.summary)}</p>
         </div>
       ` : ''}
@@ -307,7 +311,7 @@ function renderLitePlanTab(session) {
       <!-- Approach -->
       ${plan.approach ? `
         <div class="plan-section">
-          <h4 class="plan-section-title">🎯 Approach</h4>
+          <h4 class="plan-section-title"><i data-lucide="target" class="w-4 h-4 inline mr-1"></i> Approach</h4>
           <p class="plan-approach-text">${escapeHtml(plan.approach)}</p>
         </div>
       ` : ''}
@@ -315,7 +319,7 @@ function renderLitePlanTab(session) {
       <!-- Focus Paths -->
       ${plan.focus_paths?.length ? `
         <div class="plan-section">
-          <h4 class="plan-section-title">📁 Focus Paths</h4>
+          <h4 class="plan-section-title"><i data-lucide="folder" class="w-4 h-4 inline mr-1"></i> Focus Paths</h4>
           <div class="path-tags">
             ${plan.focus_paths.map(p => `<span class="path-tag">${escapeHtml(p)}</span>`).join('')}
           </div>
@@ -324,7 +328,7 @@ function renderLitePlanTab(session) {
 
       <!-- Metadata -->
       <div class="plan-section">
-        <h4 class="plan-section-title">ℹ️ Metadata</h4>
+        <h4 class="plan-section-title"><i data-lucide="info" class="w-4 h-4 inline mr-1"></i> Metadata</h4>
         <div class="plan-meta-grid">
           ${plan.estimated_time ? `<div class="meta-item"><span class="meta-label">Estimated Time:</span> ${escapeHtml(plan.estimated_time)}</div>` : ''}
           ${plan.complexity ? `<div class="meta-item"><span class="meta-label">Complexity:</span> ${escapeHtml(plan.complexity)}</div>` : ''}
@@ -379,11 +383,12 @@ async function loadAndRenderLiteSummaryTab(session, contentArea) {
     // Fallback
     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">No Summaries</div>
         <div class="empty-text">No summaries found in .summaries/</div>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
   } catch (err) {
     contentArea.innerHTML = `<div class="tab-error">Failed to load summaries: ${err.message}</div>`;
   }

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

@@ -26,8 +26,14 @@ async function renderMcpManager() {
 
   // Separate current project servers and available servers
   const currentProjectServerNames = Object.keys(projectServers);
-  const otherAvailableServers = Object.entries(allAvailableServers)
+
+  // Separate enterprise, user, and other project servers
+  const enterpriseServerEntries = Object.entries(mcpEnterpriseServers || {})
     .filter(([name]) => !currentProjectServerNames.includes(name));
+  const userServerEntries = Object.entries(mcpUserServers || {})
+    .filter(([name]) => !currentProjectServerNames.includes(name) && !(mcpEnterpriseServers || {})[name]);
+  const otherProjectServers = Object.entries(allAvailableServers)
+    .filter(([name, info]) => !currentProjectServerNames.includes(name) && !info.isGlobal);
 
   container.innerHTML = `
     <div class="mcp-manager">
@@ -46,7 +52,7 @@ async function renderMcpManager() {
 
         ${currentProjectServerNames.length === 0 ? `
           <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <div class="text-3xl mb-3">🔌</div>
+            <div class="text-muted-foreground mb-3"><i data-lucide="plug" class="w-10 h-10 mx-auto"></i></div>
             <p class="text-muted-foreground">No MCP servers configured for this project</p>
             <p class="text-sm text-muted-foreground mt-1">Add servers from the available list below</p>
           </div>
@@ -61,20 +67,59 @@ async function renderMcpManager() {
         `}
       </div>
 
+      <!-- Enterprise MCP Servers (Managed) -->
+      ${enterpriseServerEntries.length > 0 ? `
+        <div class="mcp-section mb-6">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+              <i data-lucide="building-2" class="w-5 h-5"></i>
+              <h3 class="text-lg font-semibold text-foreground">Enterprise MCP Servers</h3>
+              <span class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full">Managed</span>
+            </div>
+            <span class="text-sm text-muted-foreground">${enterpriseServerEntries.length} servers (read-only)</span>
+          </div>
+
+          <div class="mcp-server-grid grid gap-3">
+            ${enterpriseServerEntries.map(([serverName, serverConfig]) => {
+              return renderEnterpriseServerCard(serverName, serverConfig);
+            }).join('')}
+          </div>
+        </div>
+      ` : ''}
+
+      <!-- User MCP Servers -->
+      ${userServerEntries.length > 0 ? `
+        <div class="mcp-section mb-6">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+              <i data-lucide="user" class="w-5 h-5"></i>
+              <h3 class="text-lg font-semibold text-foreground">User MCP Servers</h3>
+            </div>
+            <span class="text-sm text-muted-foreground">${userServerEntries.length} servers from ~/.claude.json</span>
+          </div>
+
+          <div class="mcp-server-grid grid gap-3">
+            ${userServerEntries.map(([serverName, serverConfig]) => {
+              return renderGlobalServerCard(serverName, serverConfig, 'user');
+            }).join('')}
+          </div>
+        </div>
+      ` : ''}
+
       <!-- Available MCP Servers from Other Projects -->
       <div class="mcp-section">
         <div class="flex items-center justify-between mb-4">
           <h3 class="text-lg font-semibold text-foreground">Available from Other Projects</h3>
-          <span class="text-sm text-muted-foreground">${otherAvailableServers.length} servers available</span>
+          <span class="text-sm text-muted-foreground">${otherProjectServers.length} servers available</span>
         </div>
 
-        ${otherAvailableServers.length === 0 ? `
+        ${otherProjectServers.length === 0 ? `
           <div class="mcp-empty-state bg-card border border-border rounded-lg p-6 text-center">
             <p class="text-muted-foreground">No additional MCP servers found in other projects</p>
           </div>
         ` : `
           <div class="mcp-server-grid grid gap-3">
-            ${otherAvailableServers.map(([serverName, serverInfo]) => {
+            ${otherProjectServers.map(([serverName, serverInfo]) => {
               return renderAvailableServerCard(serverName, serverInfo);
             }).join('')}
           </div>
@@ -109,7 +154,7 @@ async function renderMcpManager() {
                   <tr class="border-b border-border last:border-b-0 ${isCurrentProject ? 'bg-primary/5' : 'hover:bg-hover/50'}">
                     <td class="px-4 py-3">
                       <div class="flex items-center gap-2 min-w-0">
-                        <span class="text-base shrink-0">${isCurrentProject ? '📍' : '📁'}</span>
+                        <span class="shrink-0">${isCurrentProject ? '<i data-lucide="map-pin" class="w-4 h-4 text-primary"></i>' : '<i data-lucide="folder" class="w-4 h-4"></i>'}</span>
                         <div class="min-w-0">
                           <div class="font-medium text-foreground truncate text-sm" title="${escapeHtml(path)}">
                             ${escapeHtml(path.split('\\').pop() || path)}
@@ -152,6 +197,9 @@ async function renderMcpManager() {
 
   // Attach event listeners for toggle switches
   attachMcpEventListeners();
+  
+  // Initialize Lucide icons
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 function renderMcpServerCard(serverName, serverConfig, isEnabled, isInCurrentProject) {
@@ -163,7 +211,7 @@ function renderMcpServerCard(serverName, serverConfig, isEnabled, isInCurrentPro
     <div class="mcp-server-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isEnabled ? '' : 'opacity-60'}">
       <div class="flex items-start justify-between mb-3">
         <div class="flex items-center gap-2">
-          <span class="text-xl">${isEnabled ? '🟢' : '🔴'}</span>
+          <span>${isEnabled ? '<i data-lucide="check-circle" class="w-5 h-5 text-success"></i>' : '<i data-lucide="x-circle" class="w-5 h-5 text-destructive"></i>'}</span>
           <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
         </div>
         <label class="mcp-toggle relative inline-flex items-center cursor-pointer">
@@ -216,7 +264,7 @@ function renderAvailableServerCard(serverName, serverInfo) {
     <div class="mcp-server-card mcp-server-available bg-card border border-border border-dashed rounded-lg p-4 hover:shadow-md hover:border-solid transition-all">
       <div class="flex items-start justify-between mb-3">
         <div class="flex items-center gap-2">
-          <span class="text-xl">⚪</span>
+          <span><i data-lucide="circle-dashed" class="w-5 h-5 text-muted-foreground"></i></span>
           <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
         </div>
         <button class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
@@ -240,6 +288,98 @@ function renderAvailableServerCard(serverName, serverInfo) {
   `;
 }
 
+function renderGlobalServerCard(serverName, serverConfig, source = 'user') {
+  const command = serverConfig.command || serverConfig.url || 'N/A';
+  const args = serverConfig.args || [];
+  const hasEnv = serverConfig.env && Object.keys(serverConfig.env).length > 0;
+  const serverType = serverConfig.type || 'stdio';
+
+  return `
+    <div class="mcp-server-card mcp-server-global bg-card border border-primary/30 rounded-lg p-4 hover:shadow-md transition-all">
+      <div class="flex items-start justify-between mb-3">
+        <div class="flex items-center gap-2">
+          <i data-lucide="user" class="w-5 h-5"></i>
+          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
+          <span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full">User</span>
+        </div>
+        <button class="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
+                data-server-name="${escapeHtml(serverName)}"
+                data-server-config='${JSON.stringify(serverConfig).replace(/'/g, "&#39;")}'
+                data-action="add">
+          Add to Project
+        </button>
+      </div>
+
+      <div class="mcp-server-details text-sm space-y-1">
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${serverType === 'stdio' ? 'cmd' : 'url'}</span>
+          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
+        </div>
+        ${args.length > 0 ? `
+          <div class="flex items-start gap-2 text-muted-foreground">
+            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">args</span>
+            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
+          </div>
+        ` : ''}
+        ${hasEnv ? `
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">env</span>
+            <span class="text-xs">${Object.keys(serverConfig.env).length} variables</span>
+          </div>
+        ` : ''}
+        <div class="flex items-center gap-2 text-muted-foreground mt-1">
+          <span class="text-xs italic">Available to all projects from ~/.claude.json</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderEnterpriseServerCard(serverName, serverConfig) {
+  const command = serverConfig.command || serverConfig.url || 'N/A';
+  const args = serverConfig.args || [];
+  const hasEnv = serverConfig.env && Object.keys(serverConfig.env).length > 0;
+  const serverType = serverConfig.type || 'stdio';
+
+  return `
+    <div class="mcp-server-card mcp-server-enterprise bg-card border border-warning/30 rounded-lg p-4 hover:shadow-md transition-all">
+      <div class="flex items-start justify-between mb-3">
+        <div class="flex items-center gap-2">
+          <i data-lucide="building-2" class="w-5 h-5"></i>
+          <h4 class="font-semibold text-foreground">${escapeHtml(serverName)}</h4>
+          <span class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full">Enterprise</span>
+          <i data-lucide="lock" class="w-3 h-3 text-muted-foreground"></i>
+        </div>
+        <span class="px-3 py-1 text-xs bg-muted text-muted-foreground rounded cursor-not-allowed">
+          Read-only
+        </span>
+      </div>
+
+      <div class="mcp-server-details text-sm space-y-1">
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">${serverType === 'stdio' ? 'cmd' : 'url'}</span>
+          <span class="truncate" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
+        </div>
+        ${args.length > 0 ? `
+          <div class="flex items-start gap-2 text-muted-foreground">
+            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">args</span>
+            <span class="text-xs font-mono truncate" title="${escapeHtml(args.join(' '))}">${escapeHtml(args.slice(0, 3).join(' '))}${args.length > 3 ? '...' : ''}</span>
+          </div>
+        ` : ''}
+        ${hasEnv ? `
+          <div class="flex items-center gap-2 text-muted-foreground">
+            <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">env</span>
+            <span class="text-xs">${Object.keys(serverConfig.env).length} variables</span>
+          </div>
+        ` : ''}
+        <div class="flex items-center gap-2 text-muted-foreground mt-1">
+          <span class="text-xs italic">Managed by organization (highest priority)</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 function attachMcpEventListeners() {
   // Toggle switches
   document.querySelectorAll('.mcp-server-card input[data-action="toggle"]').forEach(input => {

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

@@ -12,13 +12,14 @@ function renderProjectOverview() {
   if (!project) {
     container.innerHTML = `
       <div class="flex flex-col items-center justify-center py-16 text-center">
-        <div class="text-6xl mb-4">📋</div>
+        <div class="text-muted-foreground mb-4"><i data-lucide="clipboard-list" class="w-16 h-16"></i></div>
         <h3 class="text-xl font-semibold text-foreground mb-2">No Project Overview</h3>
         <p class="text-muted-foreground mb-4">
           Run <code class="px-2 py-1 bg-muted rounded text-sm font-mono">/workflow:init</code> to initialize project analysis
         </p>
       </div>
     `;
+    if (typeof lucide !== 'undefined') lucide.createIcons();
     return;
   }
 
@@ -40,7 +41,7 @@ function renderProjectOverview() {
     <!-- Technology Stack -->
     <div class="bg-card border border-border rounded-lg p-6 mb-6">
       <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-        <span>💻</span> Technology Stack
+        <i data-lucide="code-2" class="w-5 h-5"></i> Technology Stack
       </h3>
 
       <!-- Languages -->
@@ -91,7 +92,7 @@ function renderProjectOverview() {
     <!-- Architecture -->
     <div class="bg-card border border-border rounded-lg p-6 mb-6">
       <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-        <span>🏗️</span> Architecture
+        <i data-lucide="blocks" class="w-5 h-5"></i> Architecture
       </h3>
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
@@ -128,7 +129,7 @@ function renderProjectOverview() {
     <!-- Key Components -->
     <div class="bg-card border border-border rounded-lg p-6 mb-6">
       <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-        <span>⚙️</span> Key Components
+        <i data-lucide="component" class="w-5 h-5"></i> Key Components
       </h3>
 
       ${project.keyComponents.length > 0 ? `
@@ -162,7 +163,7 @@ function renderProjectOverview() {
     <!-- Development Index -->
     <div class="bg-card border border-border rounded-lg p-6 mb-6">
       <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-        <span>📝</span> Development History
+        <i data-lucide="git-branch" class="w-5 h-5"></i> Development History
       </h3>
 
       ${renderDevelopmentIndex(project.developmentIndex)}
@@ -171,7 +172,7 @@ function renderProjectOverview() {
     <!-- Statistics -->
     <div class="bg-card border border-border rounded-lg p-6">
       <h3 class="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
-        <span>📊</span> Statistics
+        <i data-lucide="bar-chart-3" class="w-5 h-5"></i> Statistics
       </h3>
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -190,17 +191,20 @@ function renderProjectOverview() {
       </div>
     </div>
   `;
+  
+  // Initialize Lucide icons
+  if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 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: '✨', badgeClass: 'bg-primary-light text-primary' },
-    { key: 'enhancement', label: 'Enhancements', icon: '⚡', badgeClass: 'bg-success-light text-success' },
-    { key: 'bugfix', label: 'Bug Fixes', icon: '🐛', badgeClass: 'bg-destructive/10 text-destructive' },
-    { key: 'refactor', label: 'Refactorings', icon: '🔧', badgeClass: 'bg-warning-light text-warning' },
-    { key: 'docs', label: 'Documentation', icon: '📚', 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' },
+    { 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' }
   ];
 
   const totalEntries = categories.reduce((sum, cat) => sum + (devIndex[cat.key]?.length || 0), 0);

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

@@ -113,7 +113,7 @@ function renderReviewSessionDetailPage(session) {
             <div class="summary-label">High</div>
           </div>
           <div class="summary-card">
-            <div class="summary-icon">📋</div>
+            <div class="summary-icon">🎯</div>
             <div class="summary-value">${dimensions.length}</div>
             <div class="summary-label">Dimensions</div>
           </div>
@@ -329,7 +329,7 @@ function previewReviewSessionFinding(findingId) {
 
       ${finding.file ? `
         <div class="preview-section">
-          <div class="preview-section-title">📄 Location</div>
+          <div class="preview-section-title">📍 Location</div>
           <div class="preview-location">
             <code>${escapeHtml(finding.file)}${finding.line ? ':' + finding.line : ''}</code>
           </div>
@@ -359,7 +359,7 @@ function previewReviewSessionFinding(findingId) {
 
       ${finding.root_cause ? `
         <div class="preview-section">
-          <div class="preview-section-title">🔍 Root Cause</div>
+          <div class="preview-section-title">🎯 Root Cause</div>
           <div class="preview-root-cause">${escapeHtml(finding.root_cause)}</div>
         </div>
       ` : ''}