diff --git a/ccw/src/core/dashboard-generator.js b/ccw/src/core/dashboard-generator.js
index fc0f3601..4665c01b 100644
--- a/ccw/src/core/dashboard-generator.js
+++ b/ccw/src/core/dashboard-generator.js
@@ -7,8 +7,8 @@ const __dirname = dirname(__filename);
 
 // Bundled template paths
 const UNIFIED_TEMPLATE = join(__dirname, '../templates/dashboard.html');
-const CSS_FILE = join(__dirname, '../templates/dashboard.css');
 const JS_FILE = join(__dirname, '../templates/dashboard.js');
+const CSS_FILE = join(__dirname, '../templates/dashboard.css');
 const WORKFLOW_TEMPLATE = join(__dirname, '../templates/workflow-dashboard.html');
 const REVIEW_TEMPLATE = join(__dirname, '../templates/review-cycle-dashboard.html');
 
@@ -41,9 +41,9 @@ export async function generateDashboard(data) {
 function generateFromUnifiedTemplate(data) {
   let html = readFileSync(UNIFIED_TEMPLATE, 'utf8');
 
-  // Read CSS and JS files
-  const cssContent = existsSync(CSS_FILE) ? readFileSync(CSS_FILE, 'utf8') : '';
+  // Read JS and CSS files
   let jsContent = existsSync(JS_FILE) ? readFileSync(JS_FILE, 'utf8') : '';
+  let cssContent = existsSync(CSS_FILE) ? readFileSync(CSS_FILE, 'utf8') : '';
 
   // Prepare complete workflow data
   const workflowData = {
@@ -71,9 +71,9 @@ function generateFromUnifiedTemplate(data) {
   jsContent = jsContent.replace(/\{\{PROJECT_PATH\}\}/g, projectPath.replace(/\\/g, '/'));
   jsContent = jsContent.replace('{{RECENT_PATHS}}', JSON.stringify(recentPaths));
 
-  // Inject CSS and JS into HTML template
-  html = html.replace('{{CSS_CONTENT}}', cssContent);
+  // Inject JS and CSS into HTML template
   html = html.replace('{{JS_CONTENT}}', jsContent);
+  html = html.replace('{{CSS_CONTENT}}', cssContent);
 
   // Also replace any remaining placeholders in HTML
   html = html.replace(/\{\{PROJECT_PATH\}\}/g, projectPath.replace(/\\/g, '/'));
diff --git a/ccw/src/core/data-aggregator.js b/ccw/src/core/data-aggregator.js
index aaa3f6e5..a3d480d1 100644
--- a/ccw/src/core/data-aggregator.js
+++ b/ccw/src/core/data-aggregator.js
@@ -102,7 +102,10 @@ async function processSession(session, isActive) {
             task_id: taskData.id || basename(taskFile, '.json'),
             title: taskData.title || 'Untitled Task',
             status: taskData.status || 'pending',
-            type: taskData.meta?.type || 'task'
+            type: taskData.meta?.type || 'task',
+            meta: taskData.meta || {},
+            context: taskData.context || {},
+            flow_control: taskData.flow_control || {}
           });
         } catch {
           // Skip invalid task files
@@ -120,11 +123,33 @@ async function processSession(session, isActive) {
       result.reviewSummary = loadReviewSummary(reviewDir);
     }
   } else {
-    // For archived, just count tasks
+    // For archived, also load tasks (same as active)
     const taskDir = join(session.path, '.task');
     if (existsSync(taskDir)) {
       const taskFiles = await safeGlob('IMPL-*.json', taskDir);
-      result.taskCount = taskFiles.length;
+      for (const taskFile of taskFiles) {
+        try {
+          const taskData = JSON.parse(readFileSync(join(taskDir, taskFile), 'utf8'));
+          result.tasks.push({
+            task_id: taskData.id || basename(taskFile, '.json'),
+            title: taskData.title || 'Untitled Task',
+            status: taskData.status || 'completed', // Archived tasks are usually completed
+            type: taskData.meta?.type || 'task'
+          });
+        } catch {
+          // Skip invalid task files
+        }
+      }
+      // Sort tasks by ID
+      result.tasks.sort((a, b) => sortTaskIds(a.task_id, b.task_id));
+      result.taskCount = result.tasks.length;
+    }
+
+    // Check for review data in archived sessions too
+    const reviewDir = join(session.path, '.review');
+    if (existsSync(reviewDir)) {
+      result.hasReview = true;
+      result.reviewSummary = loadReviewSummary(reviewDir);
     }
   }
 
diff --git a/ccw/src/templates/dashboard.css b/ccw/src/templates/dashboard.css
index 6217b7eb..5976b710 100644
--- a/ccw/src/templates/dashboard.css
+++ b/ccw/src/templates/dashboard.css
@@ -1,299 +1,41 @@
-/* CSS Variables */
-:root {
-  /* Background */
-  --bg-primary: #f8f9fa;
-  --bg-secondary: #ffffff;
-  --bg-card: #ffffff;
-  --bg-sidebar: #f1f3f5;
-  --bg-hover: #e9ecef;
+/* ===================================
+   Dashboard - Complementary Styles
+   ================================== */
 
-  /* Text */
-  --text-primary: #212529;
-  --text-secondary: #495057;
-  --text-muted: #868e96;
+/* This file contains only essential CSS that cannot be achieved
+   with Tailwind utilities. All layout, colors, and basic styling
+   are handled by Tailwind classes in dashboard.html.
 
-  /* Accent */
-  --accent-color: #228be6;
-  --accent-hover: #1c7ed6;
-  --accent-light: #e7f5ff;
+   CSS variables are defined inline in dashboard.html <style> block. */
 
-  /* Status */
-  --success-color: #40c057;
-  --success-light: #d3f9d8;
-  --warning-color: #fab005;
-  --warning-light: #fff3bf;
-  --danger-color: #fa5252;
-  --danger-light: #ffe3e3;
-  --info-color: #339af0;
-  --info-light: #d0ebff;
-
-  /* Border & Shadow */
-  --border-color: #dee2e6;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
-  --shadow: 0 2px 8px rgba(0,0,0,0.08);
-  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
-
-  /* Spacing */
-  --sidebar-width: 260px;
-  --sidebar-collapsed: 60px;
-  --header-height: 56px;
-  --footer-height: 40px;
-  --radius: 8px;
-  --radius-sm: 4px;
+/* Scrollbar styling (cannot be done in Tailwind) */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-[data-theme="dark"] {
-  --bg-primary: #1a1b1e;
-  --bg-secondary: #25262b;
-  --bg-card: #2c2e33;
-  --bg-sidebar: #25262b;
-  --bg-hover: #373a40;
-
-  --text-primary: #c1c2c5;
-  --text-secondary: #909296;
-  --text-muted: #5c5f66;
-
-  --accent-light: #1c3a5e;
-  --success-light: #1d3d2a;
-  --warning-light: #3d3520;
-  --danger-light: #3d2020;
-  --info-light: #1c3a5e;
-
-  --border-color: #373a40;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-/* Reset & Base */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
 }
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  line-height: 1.5;
-}
-
-/* App Container */
-.app-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Top Bar */
-.top-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  height: var(--header-height);
-  background: var(--bg-card);
-  border-bottom: 1px solid var(--border-color);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  box-shadow: var(--shadow-sm);
-}
-
-.top-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.menu-toggle {
-  display: none;
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  padding: 4px 8px;
-  color: var(--text-primary);
-}
-
-.logo {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--accent-color);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.logo-icon {
-  font-size: 24px;
-}
-
-/* Path Selector */
-.path-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-}
-
-.path-selector label {
-  color: var(--text-muted);
-  font-size: 13px;
-}
-
-.path-dropdown {
-  position: relative;
-}
-
-.path-current {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-primary);
-  max-width: 300px;
-}
-
-.path-current:hover {
-  background: var(--bg-hover);
-}
-
-.path-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 240px;
-}
-
-.dropdown-arrow {
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.2s;
-}
-
-.path-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  min-width: 280px;
-  display: none;
-  z-index: 200;
-}
-
-.path-menu.open {
-  display: block;
-}
-
-.menu-label {
-  padding: 8px 12px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.path-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.path-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.path-item.active {
-  background: var(--accent-light);
-  color: var(--accent-color);
-}
-
-.path-actions {
-  padding: 8px 12px;
-  border-top: 1px solid var(--border-color);
-}
-
-.path-browse {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-secondary);
-  width: 100%;
-  justify-content: center;
-}
-
-.path-browse:hover {
-  background: var(--bg-hover);
-}
-
-/* Header Actions */
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.theme-toggle {
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-}
-
-.theme-toggle:hover {
-  background: var(--bg-hover);
-}
-
-/* Main Layout */
-.main-layout {
-  display: flex;
-  flex: 1;
-}
-
-/* Sidebar */
-.sidebar {
-  width: var(--sidebar-width);
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  position: sticky;
-  top: var(--header-height);
-  height: calc(100vh - var(--header-height));
-  overflow-y: auto;
-  transition: width 0.3s ease, transform 0.3s ease;
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground));
 }
 
+/* Sidebar collapse state (JavaScript-toggled class) */
 .sidebar.collapsed {
-  width: var(--sidebar-collapsed);
+  width: 60px;
 }
 
 .sidebar.collapsed .nav-text,
 .sidebar.collapsed .nav-section-title,
-.sidebar.collapsed .badge {
+.sidebar.collapsed .badge,
+.sidebar.collapsed .toggle-text {
   display: none;
 }
 
@@ -307,3657 +49,1106 @@ body {
   padding: 10px 0;
 }
 
-.sidebar.collapsed .nav-icon {
-  margin: 0;
-}
-
-/* Sidebar Navigation */
-.sidebar-nav {
-  flex: 1;
-  padding: 12px 0;
-}
-
-.nav-section {
-  margin-bottom: 8px;
-}
-
-.nav-section-header {
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.nav-icon {
-  font-size: 16px;
-  margin-right: 8px;
-}
-
-.nav-items {
-  list-style: none;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px 10px 24px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--text-secondary);
-  transition: all 0.15s ease;
-  position: relative;
-}
-
-.nav-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.nav-item.active {
-  background: var(--accent-light);
-  color: var(--accent-color);
-  font-weight: 500;
-}
-
-.nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--accent-color);
-}
-
-.nav-item .nav-icon {
-  font-size: 14px;
-  margin-right: 10px;
-}
-
-.nav-text {
-  flex: 1;
-}
-
-.badge {
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: 600;
-  border-radius: 10px;
-  background: var(--bg-hover);
-  color: var(--text-muted);
-}
-
-.badge.success {
-  background: var(--success-light);
-  color: var(--success-color);
-}
-
-.badge.warning {
-  background: var(--warning-light);
-  color: var(--warning-color);
-}
-
-.badge.danger {
-  background: var(--danger-light);
-  color: var(--danger-color);
-}
-
-.badge.info {
-  background: var(--info-light);
-  color: var(--info-color);
-}
-
-/* Sidebar Footer */
-.sidebar-footer {
-  padding: 12px;
-  border-top: 1px solid var(--border-color);
-}
-
-.sidebar-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px;
-  background: none;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-secondary);
-  transition: all 0.15s ease;
-}
-
-.sidebar-toggle:hover {
-  background: var(--bg-hover);
-}
-
-.sidebar.collapsed .sidebar-toggle {
-  padding: 8px 4px;
-}
-
-.sidebar.collapsed .toggle-text {
-  display: none;
-}
-
-.toggle-icon {
-  transition: transform 0.3s ease;
-}
-
 .sidebar.collapsed .toggle-icon {
   transform: rotate(180deg);
 }
 
-/* Content Area */
-.content {
-  flex: 1;
-  padding: 24px;
-  overflow-y: auto;
-  min-width: 0;
-}
-
-/* Stats Grid */
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.stat-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  padding: 20px;
-  text-align: center;
-  transition: all 0.2s ease;
-}
-
-.stat-card:hover {
-  box-shadow: var(--shadow);
-  transform: translateY(-2px);
-}
-
-.stat-icon {
-  font-size: 24px;
-  margin-bottom: 8px;
-}
-
-.stat-value {
-  font-size: 32px;
-  font-weight: 700;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.stat-label {
-  font-size: 13px;
-  color: var(--text-muted);
-  margin-top: 4px;
-}
-
-/* Content Header */
-.content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.content-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.search-box {
-  position: relative;
-}
-
-.search-box input {
-  padding: 8px 12px 8px 36px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 14px;
-  width: 240px;
-  transition: all 0.15s ease;
-}
-
-.search-box input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-
-.search-box::before {
-  content: '🔍';
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 14px;
-}
-
-/* Sessions Grid */
-.sessions-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  gap: 20px;
-}
-
-/* Session Card */
-.session-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-
-.session-card:hover {
-  box-shadow: var(--shadow);
-  transform: translateY(-2px);
-}
-
-.session-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.session-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.session-status {
-  padding: 4px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  border-radius: 12px;
-}
-
-.session-status.active {
-  background: var(--success-light);
-  color: var(--success-color);
-}
-
-.session-status.archived {
-  background: var(--bg-hover);
-  color: var(--text-muted);
-}
-
-.session-body {
-  padding: 16px;
-}
-
-.session-meta {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  font-size: 13px;
-  color: var(--text-muted);
-  margin-bottom: 12px;
-}
-
-.session-meta-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* Progress Bar */
-.progress-container {
-  margin-bottom: 16px;
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-}
-
-.progress-bar {
-  height: 8px;
-  background: var(--bg-hover);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-color), var(--success-color));
-  border-radius: 4px;
-  transition: width 0.3s ease;
-}
-
-/* Tasks List */
-.tasks-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.task-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  border-left: 3px solid var(--border-color);
-  transition: all 0.15s ease;
-}
-
-.task-item:hover {
-  transform: translateX(4px);
-}
-
-.task-item.completed {
-  border-left-color: var(--success-color);
-}
-
-.task-item.in_progress {
-  border-left-color: var(--warning-color);
-}
-
-.task-item.pending {
-  border-left-color: var(--text-muted);
-}
-
-.task-checkbox {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 2px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  flex-shrink: 0;
-}
-
-.task-item.completed .task-checkbox {
-  background: var(--success-color);
-  border-color: var(--success-color);
-  color: white;
-}
-
-.task-item.in_progress .task-checkbox {
-  border-color: var(--warning-color);
-  color: var(--warning-color);
-}
-
-.task-title {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
-}
-
-.task-id {
-  font-size: 11px;
-  font-family: monospace;
-  color: var(--text-muted);
-}
-
-/* Session Footer */
-.session-footer {
-  padding: 12px 16px;
-  border-top: 1px solid var(--border-color);
-  font-size: 12px;
-  color: var(--text-muted);
-  background: var(--bg-secondary);
-}
-
-/* Reviews Container */
-.reviews-container {
-  display: none;
-}
-
-.reviews-container.active {
+/* Path menu open state (JavaScript-toggled class) */
+.path-menu.open {
   display: block;
 }
 
-/* Review Dimension Card */
-.review-dimension {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  margin-bottom: 16px;
-  overflow: hidden;
-}
-
-.dimension-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  background: var(--bg-secondary);
-  cursor: pointer;
-}
-
-.dimension-title {
-  font-size: 15px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dimension-count {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-.dimension-body {
-  padding: 16px;
-}
-
-.finding-item {
-  padding: 12px;
-  border-radius: var(--radius-sm);
-  margin-bottom: 8px;
-  border-left: 3px solid;
-}
-
-.finding-item.critical {
-  background: var(--danger-light);
-  border-left-color: var(--danger-color);
-}
-
-.finding-item.high {
-  background: var(--warning-light);
-  border-left-color: var(--warning-color);
-}
-
-.finding-item.medium {
-  background: var(--info-light);
-  border-left-color: var(--info-color);
-}
-
-.finding-item.low {
-  background: var(--bg-secondary);
-  border-left-color: var(--text-muted);
-}
-
-/* Empty State */
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-muted);
-}
-
-.empty-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-}
-
-.empty-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.empty-text {
-  font-size: 14px;
-}
-
-/* Footer */
-.bottom-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  height: var(--footer-height);
-  background: var(--bg-card);
-  border-top: 1px solid var(--border-color);
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* Mobile Overlay */
-.sidebar-overlay {
-  display: none;
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 150;
-}
-
-.sidebar-overlay.open {
-  display: block;
-}
-
-/* Responsive */
+/* Mobile sidebar (responsive behavior beyond Tailwind) */
 @media (max-width: 768px) {
-  .menu-toggle {
-    display: block;
-  }
-
-  .logo-text {
-    display: none;
-  }
-
-  .path-selector label {
-    display: none;
-  }
-
-  .path-text {
-    max-width: 120px;
-  }
-
   .sidebar {
     position: fixed;
-    left: calc(-1 * var(--sidebar-width));
-    top: var(--header-height);
-    height: calc(100vh - var(--header-height));
+    left: -260px;
+    top: 56px;
+    height: calc(100vh - 56px);
     z-index: 200;
-    box-shadow: var(--shadow-lg);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
   }
 
   .sidebar.open {
     left: 0;
   }
 
-  .sessions-container {
-    grid-template-columns: 1fr;
+  .sidebar-overlay {
+    display: none;
   }
 
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .sidebar-overlay.open {
+    display: block;
   }
 
-  .search-box input {
-    width: 100%;
-  }
-
-  .content-header {
-    flex-direction: column;
-    align-items: stretch;
+  .menu-toggle-btn {
+    display: block !important;
   }
 }
 
-/* Tooltip */
-.tooltip {
-  position: relative;
+/* Task detail drawer (complex transform animation) */
+.task-detail-drawer {
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
 }
 
-.tooltip::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-  padding: 6px 10px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.15s ease;
-  box-shadow: var(--shadow);
-  z-index: 100;
+.task-detail-drawer.open {
+  transform: translateX(0);
 }
 
-.sidebar.collapsed .tooltip:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Path Modal */
-.path-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.path-modal {
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  width: 90%;
-  max-width: 480px;
-  overflow: hidden;
-}
-
-.path-modal-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.path-modal-header h3 {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.path-modal-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-light);
-  border-radius: var(--radius);
-  color: var(--accent-color);
-}
-
-.path-modal-icon svg {
-  width: 20px;
-  height: 20px;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill: none;
-}
-
-.path-modal-body {
-  padding: 24px;
-}
-
-.path-modal-body p {
-  color: var(--text-secondary);
-  font-size: 14px;
-  margin: 0 0 16px 0;
-}
-
-.selected-folder {
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  margin-bottom: 16px;
-  font-size: 14px;
-}
-
-.path-modal-note {
-  font-size: 13px !important;
-  color: var(--text-muted) !important;
-}
-
-.path-modal-command {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  margin-bottom: 16px;
-}
-
-.path-modal-command code {
-  flex: 1;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-  font-size: 13px;
-  color: var(--text-primary);
-  word-break: break-all;
-}
-
-.path-placeholder {
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-.copy-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.15s ease;
-}
-
-.copy-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.copy-btn svg {
-  width: 14px;
-  height: 14px;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.path-input-group {
-  margin-top: 16px;
-}
-
-.path-input-group label {
+.drawer-overlay.active {
   display: block;
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
 }
 
-.path-input-group input {
-  flex: 1;
-  padding: 10px 12px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 14px;
-  width: calc(100% - 70px);
-  margin-right: 8px;
+/* ===================================
+   Session Cards (used by dashboard.js)
+   =================================== */
+
+.sessions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1rem;
 }
 
-.path-input-group input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px var(--accent-light);
-}
-
-.path-go-btn {
-  padding: 10px 20px;
-  background: var(--accent-color);
-  color: white;
-  border: none;
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  font-weight: 500;
+.session-card {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  padding: 1rem;
   cursor: pointer;
-  transition: background 0.15s ease;
-}
-
-.path-go-btn:hover {
-  background: var(--accent-hover);
-}
-
-.path-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 24px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-}
-
-.path-modal-close {
-  padding: 8px 20px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font-size: 14px;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.path-modal-close:hover {
-  background: var(--bg-hover);
-}
-
-/* SVG Icons */
-.icon-svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-  stroke-width: 2;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  flex-shrink: 0;
-}
-
-/* Lite Task Cards */
-.lite-task-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.lite-task-card .card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-}
-
-.lite-task-card .session-id-badge {
-  font-family: monospace;
-  font-size: 12px;
-  padding: 4px 8px;
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-radius: var(--radius-sm);
-  font-weight: 600;
-}
-
-.lite-task-card .type-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.lite-task-card .type-badge.lite-plan {
-  background: var(--info-light);
-  color: var(--info-color);
-}
-
-.lite-task-card .type-badge.lite-fix {
-  background: var(--warning-light);
-  color: var(--warning-color);
-}
-
-.lite-task-card .card-meta {
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.lite-task-card .progress-bar {
-  flex: 1;
-  height: 6px;
-  background: var(--bg-hover);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.lite-task-card .progress-fill {
-  height: 100%;
-  background: var(--success-color);
-  border-radius: 3px;
-  transition: width 0.3s ease;
-}
-
-.lite-task-card .tasks-container {
-  padding: 16px;
-}
-
-/* Task Detail */
-.task-detail {
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.task-detail-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
-  flex-wrap: wrap;
-}
-
-.task-id-badge {
-  font-family: monospace;
-  font-size: 12px;
-  padding: 4px 10px;
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-radius: var(--radius-sm);
-  font-weight: 600;
-}
-
-.task-detail-header .task-title {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.task-status-badge {
-  font-size: 11px;
-  padding: 3px 10px;
-  border-radius: 10px;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-.task-status-badge.pending {
-  background: var(--bg-hover);
-  color: var(--text-muted);
-}
-
-.task-status-badge.active,
-.task-status-badge.in_progress {
-  background: var(--info-light);
-  color: var(--info-color);
-}
-
-.task-status-badge.completed {
-  background: var(--success-light);
-  color: var(--success-color);
-}
-
-.task-status-badge.blocked {
-  background: var(--danger-light);
-  color: var(--danger-color);
-}
-
-.task-header-actions {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-}
-
-.btn-view-json {
-  padding: 4px 10px;
-  font-size: 11px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.btn-view-json:hover {
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-}
-
-/* Collapsible Sections */
-.collapsible-section {
-  border-top: 1px solid var(--border-color);
-}
-
-.collapsible-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  cursor: pointer;
-  background: var(--bg-card);
-  transition: background 0.15s ease;
-  user-select: none;
-}
-
-.collapsible-header:hover {
-  background: var(--bg-hover);
-}
-
-.collapse-icon {
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.2s ease;
-  width: 12px;
-}
-
-.collapsible-header.expanded .collapse-icon {
-  transform: rotate(90deg);
-}
-
-.section-label {
-  font-family: monospace;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.section-preview {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-left: auto;
-}
-
-.collapsible-content {
-  padding: 16px;
-  background: var(--bg-secondary);
-  max-height: 800px;
-  overflow-y: auto;
-  transition: max-height 0.3s ease, padding 0.3s ease;
-}
-
-.collapsible-content.collapsed {
-  max-height: 0;
-  padding: 0 16px;
-  overflow: hidden;
-}
-
-/* JSON Preview */
-.json-preview {
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  padding: 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-  margin: 0;
-}
-
-/* Context Fields */
-.context-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.context-field {
-  padding: 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-}
-
-.context-field label {
-  display: block;
-  font-family: monospace;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--accent-color);
-  margin-bottom: 8px;
-}
-
-.context-field ul {
-  list-style: disc;
-  padding-left: 20px;
-  margin: 0;
-}
-
-.context-field li {
-  font-size: 13px;
-  color: var(--text-secondary);
-  padding: 4px 0;
-}
-
-.path-tag {
-  display: inline-block;
-  font-family: monospace;
-  font-size: 11px;
-  padding: 2px 8px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  margin: 2px 4px 2px 0;
-}
-
-/* Flowchart Container */
-.flowchart-container {
-  min-height: 100px;
-  padding: 16px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  overflow-x: auto;
-}
-
-.flowchart-svg {
-  display: block;
-  margin: 0 auto;
-}
-
-.flowchart-node rect {
-  stroke: var(--border-color);
-  stroke-width: 1.5;
-}
-
-.flowchart-node text {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: 12px;
-}
-
-.flowchart-node circle {
-  stroke: var(--border-color);
-  stroke-width: 1.5;
-}
-
-.flowchart-fallback {
-  text-align: center;
-  padding: 32px;
-  color: var(--text-muted);
-  font-size: 14px;
-}
-
-/* Empty State for Lite Tasks */
-.empty-state .empty-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.empty-state h3 {
-  font-size: 18px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.empty-state p {
-  font-size: 14px;
-}
-
-/* JSON Modal */
-.json-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
   transition: all 0.2s ease;
 }
 
-.json-modal-overlay.active {
-  opacity: 1;
-  visibility: visible;
+.session-card:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+  transform: translateY(-2px);
 }
 
-.json-modal {
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  width: 90%;
-  max-width: 900px;
-  max-height: 85vh;
+.session-header {
   display: flex;
-  flex-direction: column;
-  transform: scale(0.95);
-  transition: transform 0.2s ease;
-}
-
-.json-modal-overlay.active .json-modal {
-  transform: scale(1);
-}
-
-.json-modal-header {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.json-modal-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.json-modal-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px;
-  line-height: 1;
-}
-
-.json-modal-close:hover {
-  color: var(--text-primary);
-}
-
-.json-modal-body {
-  flex: 1;
-  overflow: auto;
-  padding: 20px;
-}
-
-.json-modal-content {
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-}
-
-.json-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 12px 20px;
-  border-top: 1px solid var(--border-color);
-}
-
-.btn-copy-json {
-  padding: 8px 16px;
-  font-size: 13px;
-  background: var(--accent-color);
-  border: none;
-  border-radius: var(--radius-sm);
-  color: white;
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-
-.btn-copy-json:hover {
-  background: var(--accent-hover);
-}
-
-/* Enhanced JSON Value Rendering */
-.json-value {
-  padding: 8px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  margin-bottom: 8px;
-}
-
-.json-value-string {
-  color: var(--success-color);
-}
-
-.json-value-number {
-  color: var(--accent-color);
-}
-
-.json-value-boolean {
-  color: var(--warning-color);
-}
-
-.json-value-null {
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-.json-key {
-  color: var(--accent-color);
-  font-weight: 600;
-}
-
-/* Dynamic Field Groups */
-.field-group {
-  margin-bottom: 12px;
-}
-
-.field-group-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.field-row {
-  display: flex;
   align-items: flex-start;
-  padding: 6px 0;
-  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0.75rem;
 }
 
-.field-row:last-child {
-  border-bottom: none;
-}
-
-.field-label {
-  min-width: 120px;
-  font-family: monospace;
-  font-size: 12px;
+.session-title {
   font-weight: 600;
-  color: var(--accent-color);
-  padding-right: 12px;
-}
-
-.field-value {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-secondary);
+  font-size: 0.9rem;
+  color: hsl(var(--foreground));
   word-break: break-word;
 }
 
-.field-value.array-value {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.array-item {
-  display: inline-block;
-  padding: 2px 8px;
-  background: var(--bg-hover);
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-}
-
-.array-item.path-item {
-  font-family: monospace;
-  background: var(--accent-light);
-  color: var(--accent-color);
-}
-
-.depends-badge {
-  background: var(--warning-light);
-  color: var(--warning-color);
-  font-family: monospace;
-  font-weight: 600;
-}
-
-/* All Fields Section */
-.all-fields-section {
-  margin-top: 8px;
-}
-
-.all-fields-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-muted);
-  transition: all 0.15s ease;
-}
-
-.all-fields-toggle:hover {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-
-.all-fields-content {
-  margin-top: 8px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-}
-
-/* Modification Points */
-.mod-points {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.mod-point {
-  padding: 10px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  border-left: 3px solid var(--accent-color);
-}
-
-.mod-target {
-  display: inline-block;
-  margin-left: 8px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.mod-change {
-  margin-top: 8px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-/* Nested Array Objects */
-.nested-array {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.array-object {
-  padding: 10px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-}
-
-.array-object-header {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-/* Array Value Display */
-.array-value {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-/* Task List in Session Card */
-.tasks-detail-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* Session Card Enhancements */
-.session-card .progress-container {
-  margin: 12px 0;
-}
-
-.session-card .progress-header {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-}
-
-.session-card .progress-bar {
-  height: 6px;
-  background: var(--bg-hover);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.session-card .progress-fill {
-  height: 100%;
-  background: var(--success-color);
-  border-radius: 3px;
-  transition: width 0.3s ease;
-}
-
-/* Session Card Improvements */
-.session-card {
-  cursor: pointer;
-}
-
 .session-badges {
   display: flex;
-  gap: 6px;
-  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 
-.session-type-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  font-size: 10px;
+.session-status {
+  font-size: 0.65rem;
   font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  border-radius: 9999px;
   text-transform: uppercase;
 }
 
+.session-status.active {
+  background: hsl(var(--success-light));
+  color: hsl(var(--success));
+}
+
+.session-status.archived {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.session-type-badge {
+  font-size: 0.65rem;
+  font-weight: 500;
+  padding: 0.2rem 0.5rem;
+  border-radius: 9999px;
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
 .session-type-badge.review {
-  background: var(--accent-light);
-  color: var(--accent-color);
+  background: hsl(var(--warning-light));
+  color: hsl(var(--warning));
 }
 
 .session-type-badge.test {
-  background: var(--warning-light);
-  color: var(--warning-color);
+  background: hsl(220 80% 90%);
+  color: hsl(220 80% 40%);
 }
 
-.session-type-badge.docs {
-  background: var(--success-light);
-  color: var(--success-color);
+.session-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-.session-type-badge.tdd {
-  background: var(--info-light, #e0f2fe);
-  color: var(--info-color, #0284c7);
+.session-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
 }
 
-.session-type-badge.workflow {
-  background: var(--bg-hover);
-  color: var(--text-muted);
+.session-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.progress-label {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
 }
 
 .progress-bar-wrapper {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.75rem;
 }
 
-.progress-bar-wrapper .progress-bar {
+.progress-bar {
   flex: 1;
+  height: 6px;
+  background: hsl(var(--muted));
+  border-radius: 3px;
+  overflow: hidden;
 }
 
-.progress-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  min-width: 50px;
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--success)));
+  border-radius: 3px;
+  transition: width 0.3s ease;
 }
 
 .progress-text {
-  font-size: 11px;
-  color: var(--text-muted);
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
   white-space: nowrap;
 }
 
-/* Session Detail Modal */
-.session-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.session-modal-overlay.active {
-  opacity: 1;
-}
-
-.session-modal {
-  background: var(--bg-card);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  width: 90%;
-  max-width: 700px;
-  max-height: 85vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  transform: scale(0.95);
-  transition: transform 0.2s ease;
-}
-
-.session-modal-overlay.active .session-modal {
-  transform: scale(1);
-}
-
-.session-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-}
-
-.session-modal-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-}
-
-.session-id-badge {
-  font-family: monospace;
-  font-size: 13px;
-  padding: 4px 10px;
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-radius: var(--radius-sm);
-}
-
-.session-modal-close {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  font-size: 24px;
-  cursor: pointer;
-  color: var(--text-muted);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.session-modal-close:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.session-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.session-info-section,
-.tasks-section,
-.review-section {
-  margin-bottom: 24px;
-}
-
-.session-info-section h4,
-.tasks-section h4,
-.review-section h4 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.info-item label {
-  font-size: 11px;
-  color: var(--text-muted);
-  text-transform: uppercase;
-}
-
-.info-item span {
-  font-size: 13px;
-  color: var(--text-primary);
-}
-
-.task-stats {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.task-stat {
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-}
-
-.task-stat.completed {
-  background: var(--success-light);
-  color: var(--success-color);
-}
-
-.task-stat.in-progress {
-  background: var(--warning-light);
-  color: var(--warning-color);
-}
-
-.task-stat.pending {
-  background: var(--bg-hover);
-  color: var(--text-muted);
-}
-
-.tasks-list-modal {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.task-item-modal {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  border-left: 3px solid var(--text-muted);
-}
-
-.task-item-modal.completed {
-  border-left-color: var(--success-color);
-}
-
-.task-item-modal.in_progress {
-  border-left-color: var(--warning-color);
-}
-
-.task-status-icon {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-}
-
-.task-item-modal.completed .task-status-icon {
-  color: var(--success-color);
-}
-
-.task-item-modal.in_progress .task-status-icon {
-  color: var(--warning-color);
-}
-
-.task-id-badge {
-  font-family: monospace;
-  font-size: 11px;
-  padding: 2px 6px;
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-radius: var(--radius-sm);
-}
-
-.task-title-modal {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
-}
-
-.no-tasks {
-  padding: 24px;
+/* Empty state */
+.empty-state {
   text-align: center;
-  color: var(--text-muted);
-  font-style: italic;
+  padding: 3rem;
+  color: hsl(var(--muted-foreground));
 }
 
-.review-info {
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+/* Session detail page */
+.session-detail-header {
+  margin-bottom: 1.5rem;
+}
+
+.session-detail-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin-bottom: 0.5rem;
+}
+
+.session-detail-meta {
   display: flex;
-  gap: 16px;
-  font-size: 13px;
-  color: var(--text-secondary);
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
 }
 
-.session-modal-footer {
+.task-list {
   display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-secondary);
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.btn-view-raw {
-  padding: 8px 16px;
-  border: 1px solid var(--border-color);
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
+.task-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
   cursor: pointer;
-  font-size: 13px;
+  transition: all 0.15s ease;
 }
 
-.btn-view-raw:hover {
-  background: var(--bg-hover);
+.task-item:hover {
+  background: hsl(var(--hover));
 }
 
-.btn-close-modal {
-  padding: 8px 16px;
-  border: none;
-  background: var(--accent-color);
+.task-item.completed {
+  border-left: 3px solid hsl(var(--success));
+  opacity: 0.8;
+}
+
+.task-item.in_progress {
+  border-left: 3px solid hsl(var(--warning));
+}
+
+.task-item.pending {
+  border-left: 3px solid hsl(var(--muted-foreground));
+}
+
+.task-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  border: 2px solid hsl(var(--border));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.task-item.completed .task-checkbox {
+  background: hsl(var(--success));
+  border-color: hsl(var(--success));
   color: white;
-  border-radius: var(--radius-sm);
+}
+
+.task-item.completed .task-checkbox::after {
+  content: '✓';
+}
+
+.task-item.in_progress .task-checkbox {
+  border-color: hsl(var(--warning));
+  color: hsl(var(--warning));
+}
+
+.task-item.in_progress .task-checkbox::after {
+  content: '⟳';
+}
+
+.task-title {
+  flex: 1;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+.task-id {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Back button */
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--muted));
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
   cursor: pointer;
-  font-size: 13px;
+  transition: background 0.15s;
+  margin-bottom: 1rem;
 }
 
-.btn-close-modal:hover {
-  background: var(--accent-hover);
+.back-button:hover {
+  background: hsl(var(--hover));
 }
 
-/* Sessions Grid Wrapper */
-.sessions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  gap: 20px;
+/* ===================================
+   Path Dropdown Menu
+   =================================== */
+
+.path-menu {
+  min-width: 320px;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
-/* Session Detail Page */
+.path-menu .path-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background 0.15s;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.path-menu .path-item:hover {
+  background: hsl(var(--hover));
+}
+
+.path-menu .path-item:last-child {
+  border-bottom: none;
+}
+
+.path-menu .path-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.path-menu .path-text {
+  flex: 1;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+
+/* ===================================
+   Session Detail Page
+   =================================== */
+
 .session-detail-page {
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  border: 1px solid var(--border-color);
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
 .detail-header {
-  padding: 20px;
-  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .btn-back {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: transparent;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: 13px;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--muted));
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
   cursor: pointer;
-  transition: all 0.15s ease;
-  margin-bottom: 12px;
+  transition: background 0.15s;
+  width: fit-content;
 }
 
 .btn-back:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  background: hsl(var(--hover));
 }
 
 .back-icon {
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .detail-title-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 1rem;
   flex-wrap: wrap;
-  gap: 12px;
 }
 
 .detail-session-id {
-  font-size: 20px;
+  font-size: 1.5rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: hsl(var(--foreground));
   margin: 0;
-  font-family: monospace;
+  word-break: break-word;
 }
 
 .detail-badges {
   display: flex;
-  gap: 8px;
-  align-items: center;
+  gap: 0.5rem;
 }
 
-/* Detail Info Bar */
 .detail-info-bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
-  padding: 16px 20px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  gap: 1.5rem;
+  padding: 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
 }
 
-.detail-info-bar .info-item {
+.info-item {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
 }
 
-.detail-info-bar .info-label {
-  font-size: 12px;
-  color: var(--text-muted);
+.info-label {
+  color: hsl(var(--muted-foreground));
+}
+
+.info-value {
+  color: hsl(var(--foreground));
   font-weight: 500;
 }
 
-.detail-info-bar .info-value {
-  font-size: 13px;
-  color: var(--text-primary);
-}
-
 /* Detail Tabs */
 .detail-tabs {
   display: flex;
-  gap: 4px;
-  padding: 12px 20px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  gap: 0.25rem;
+  border-bottom: 1px solid hsl(var(--border));
   overflow-x: auto;
 }
 
 .detail-tab {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 10px 16px;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  font-size: 13px;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.15s;
   white-space: nowrap;
 }
 
 .detail-tab:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  color: hsl(var(--foreground));
+  background: hsl(var(--hover));
 }
 
 .detail-tab.active {
-  background: var(--accent-light);
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-  font-weight: 500;
+  color: hsl(var(--primary));
+  border-bottom-color: hsl(var(--primary));
 }
 
 .tab-icon {
-  font-size: 14px;
+  font-size: 1rem;
 }
 
 .tab-count {
-  padding: 2px 6px;
-  background: var(--bg-hover);
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  background: hsl(var(--muted));
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
 .detail-tab.active .tab-count {
-  background: rgba(255, 255, 255, 0.2);
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
 }
 
-/* Tab Content Area */
 .detail-tab-content {
-  padding: 20px;
   min-height: 300px;
 }
 
+/* Task Stats */
+.task-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.task-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.task-stat.completed { border-left: 3px solid hsl(var(--success)); }
+.task-stat.in-progress { border-left: 3px solid hsl(var(--warning)); }
+.task-stat.pending { border-left: 3px solid hsl(var(--muted-foreground)); }
+
+.stat-count {
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.stat-label {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Tab Loading */
 .tab-loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px;
-  color: var(--text-muted);
-  font-size: 14px;
+  padding: 3rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
 }
 
-.tab-error {
-  padding: 20px;
-  background: var(--danger-light);
-  color: var(--danger-color);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
+/* Context/Summary Content */
+.context-content,
+.summary-content,
+.impl-plan-content,
+.review-content {
+  padding: 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
 }
 
-.tab-empty-state {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--text-muted);
+.context-section,
+.summary-section {
+  margin-bottom: 1.5rem;
 }
 
-.tab-empty-state .empty-icon {
-  font-size: 36px;
-  margin-bottom: 12px;
-  opacity: 0.5;
+.context-section:last-child,
+.summary-section:last-child {
+  margin-bottom: 0;
 }
 
-.tab-empty-state .empty-title {
-  font-size: 16px;
+.section-title {
+  font-size: 1rem;
   font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
+  color: hsl(var(--foreground));
+  margin-bottom: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.tab-empty-state .empty-text {
-  font-size: 13px;
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
-/* Tasks Tab Content */
+.file-item {
+  padding: 0.5rem 0.75rem;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: hsl(var(--foreground));
+}
+
+/* Code blocks */
+pre, code {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+}
+
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+code {
+  padding: 0.125rem 0.25rem;
+  font-size: 0.85em;
+}
+
+/* Review Findings */
+.findings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.finding-item {
+  padding: 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  border-left: 3px solid hsl(var(--border));
+}
+
+.finding-item.critical { border-left-color: hsl(0 70% 50%); }
+.finding-item.high { border-left-color: hsl(25 90% 55%); }
+.finding-item.medium { border-left-color: hsl(45 90% 50%); }
+.finding-item.low { border-left-color: hsl(var(--success)); }
+
+.finding-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.finding-title {
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.severity-badge {
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.severity-badge.critical { background: hsl(0 70% 90%); color: hsl(0 70% 40%); }
+.severity-badge.high { background: hsl(25 90% 90%); color: hsl(25 90% 35%); }
+.severity-badge.medium { background: hsl(45 90% 90%); color: hsl(45 90% 30%); }
+.severity-badge.low { background: hsl(var(--success-light)); color: hsl(var(--success)); }
+
+.finding-description {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
+}
+
+.finding-location {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ===================================
+   Tasks Tab Content
+   =================================== */
+
 .tasks-tab-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .task-stats-bar {
   display: flex;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
+.task-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  border-left: 3px solid hsl(var(--border));
+}
+
+.task-stat.completed {
+  border-left-color: hsl(var(--success));
+  color: hsl(var(--success));
+}
+
+.task-stat.in-progress {
+  border-left-color: hsl(var(--warning));
+  color: hsl(var(--warning));
+}
+
+.task-stat.pending {
+  border-left-color: hsl(var(--muted-foreground));
+  color: hsl(var(--muted-foreground));
+}
+
+.tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Task Item */
 .detail-task-item {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  border-left: 3px solid var(--text-muted);
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 0.875rem 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  border-left: 3px solid hsl(var(--muted-foreground));
+  transition: all 0.15s ease;
+}
+
+.detail-task-item:hover {
+  background: hsl(var(--hover));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
 }
 
 .detail-task-item.completed {
-  border-left-color: var(--success-color);
+  border-left-color: hsl(var(--success));
 }
 
 .detail-task-item.in_progress {
-  border-left-color: var(--warning-color);
+  border-left-color: hsl(var(--warning));
 }
 
-.detail-task-item .task-item-header {
+.detail-task-item.pending {
+  border-left-color: hsl(var(--muted-foreground));
+}
+
+.task-item-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
+  gap: 0.75rem;
 }
 
-.detail-task-item .task-status-icon {
-  font-size: 14px;
-  width: 20px;
+.task-status-icon {
+  font-size: 1rem;
+  width: 1.5rem;
   text-align: center;
+  flex-shrink: 0;
 }
 
 .detail-task-item.completed .task-status-icon {
-  color: var(--success-color);
+  color: hsl(var(--success));
 }
 
 .detail-task-item.in_progress .task-status-icon {
-  color: var(--warning-color);
+  color: hsl(var(--warning));
 }
 
-.detail-task-item .task-title {
+.task-id-badge {
+  padding: 0.125rem 0.5rem;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-family: monospace;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  flex-shrink: 0;
+}
+
+.task-item-header .task-title {
   flex: 1;
-  font-size: 13px;
-  color: var(--text-primary);
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
 }
 
-/* Context Tab Content */
-.context-tab-content {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.json-content {
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  padding: 16px;
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-/* Summary Tab Content */
-.summary-tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.summary-item {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.summary-header {
-  padding: 12px 16px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  background: var(--bg-hover);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.summary-content {
-  padding: 16px;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-}
-
-/* IMPL Plan Tab Content */
-.impl-plan-tab-content {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.markdown-content {
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.7;
-  padding: 16px;
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-/* Review Tab Content */
-.review-tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.review-dimension-section {
-  background: var(--bg-secondary);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-
-.review-dimension-section .dimension-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  background: var(--bg-hover);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.dimension-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  text-transform: capitalize;
-}
-
-.dimension-findings {
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.finding-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 6px;
-}
-
-.finding-severity {
-  padding: 2px 8px;
-  font-size: 10px;
+.task-status-badge {
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
-  border-radius: 10px;
+  flex-shrink: 0;
 }
 
-.finding-severity.critical {
-  background: var(--danger-light);
-  color: var(--danger-color);
+.task-status-badge.completed {
+  background: hsl(var(--success-light));
+  color: hsl(var(--success));
 }
 
-.finding-severity.high {
-  background: var(--warning-light);
-  color: var(--warning-color);
+.task-status-badge.in_progress {
+  background: hsl(var(--warning-light));
+  color: hsl(var(--warning));
 }
 
-.finding-severity.medium {
-  background: var(--info-light);
-  color: var(--info-color);
+.task-status-badge.pending {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
 }
 
-.finding-severity.low {
-  background: var(--bg-hover);
-  color: var(--text-muted);
-}
-
-.finding-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.finding-description {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  margin: 0;
-}
-
-.finding-file {
-  font-size: 12px;
-  font-family: monospace;
-  color: var(--text-muted);
-  margin-top: 6px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .sessions-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-title-row {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .detail-info-bar {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .detail-tabs {
-    padding: 8px 12px;
-  }
-
-  .detail-tab {
-    padding: 8px 12px;
-  }
-
-  .tab-text {
-    display: none;
-  }
-
-  .task-stats-bar {
-    flex-wrap: wrap;
-  }
-}
-
-/* Full Task Detail View */
+/* Full Task Item (expanded view) */
 .detail-task-item-full {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  border-left: 3px solid hsl(var(--muted-foreground));
   overflow: hidden;
 }
 
 .detail-task-item-full.completed {
-  border-left: 3px solid var(--success-color);
+  border-left-color: hsl(var(--success));
 }
 
 .detail-task-item-full.in_progress {
-  border-left: 3px solid var(--warning-color);
-}
-
-.detail-task-item-full.pending {
-  border-left: 3px solid var(--text-muted);
+  border-left-color: hsl(var(--warning));
 }
 
 .task-item-header-full {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 14px 16px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  gap: 0.75rem;
+  padding: 1rem;
+  background: hsl(var(--card));
+  transition: background 0.15s;
 }
 
-/* Implementation Steps */
-.impl-steps {
-  padding-left: 20px;
-  margin: 0;
+.task-item-header-full:hover {
+  background: hsl(var(--hover));
 }
 
-.impl-steps li {
-  padding: 6px 0;
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-/* Collapsible Summary Items */
-.summary-item-collapsible {
-  background: var(--bg-card);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius);
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.summary-collapsible-header {
+/* Empty State */
+.tab-empty-state {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.15s ease;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
 }
 
-.summary-collapsible-header:hover {
-  background: var(--bg-hover);
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
 }
 
-.summary-collapsible-header.expanded {
-  border-bottom: 1px solid var(--border-color);
-}
-
-.summary-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.summary-preview {
-  flex: 1;
-  font-size: 12px;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 400px;
-}
-
-.summary-collapsible-content {
-  max-height: 600px;
-  overflow-y: auto;
-  transition: max-height 0.3s ease, padding 0.3s ease;
-}
-
-.summary-collapsible-content.collapsed {
-  max-height: 0;
-  overflow: hidden;
-}
-
-.summary-content-pre {
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  padding: 16px;
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-  background: var(--bg-card);
-}
-
-/* ==========================================
-   REVIEW SESSION DETAIL PAGE STYLES
-   ========================================== */
-
-.session-type-review .review-progress-section,
-.session-type-fix .fix-progress-section {
-  background: var(--bg-card);
-  border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 24px;
-  border: 1px solid var(--border-color);
-  box-shadow: var(--shadow);
-}
-
-.review-progress-header,
-.fix-progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.review-progress-header h3,
-.fix-progress-header h3 {
+.empty-title {
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--text-primary);
+  color: hsl(var(--foreground));
+  margin-bottom: 0.5rem;
+}
+
+.empty-text {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Tab Error */
+.tab-error {
+  padding: 2rem;
+  text-align: center;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
+  border-radius: 0.5rem;
+}
+
+/* Collapsible Sections */
+.collapsible-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.phase-badge {
-  display: inline-block;
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.phase-badge.planning,
-.phase-badge.in-progress {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--accent-color);
-}
-
-.phase-badge.execution {
-  background: rgba(139, 92, 246, 0.15);
-  color: #8b5cf6;
-  animation: pulse 2s infinite;
-}
-
-.phase-badge.completion,
-.phase-badge.completed {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--success-color);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-/* Summary Cards Grid */
-.review-summary-grid,
-.fix-summary-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.summary-card {
-  background: var(--bg-secondary);
-  border-radius: 10px;
-  padding: 20px;
-  text-align: center;
-  border: 2px solid var(--border-color);
-  transition: all 0.2s ease;
-}
-
-.summary-card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow);
-}
-
-.summary-card.critical {
-  border-color: var(--danger-color);
-}
-
-.summary-card.critical .summary-value {
-  color: var(--danger-color);
-}
-
-.summary-card.high {
-  border-color: var(--warning-color);
-}
-
-.summary-card.high .summary-value {
-  color: var(--warning-color);
-}
-
-.summary-card.fixed {
-  border-color: var(--success-color);
-}
-
-.summary-card.fixed .summary-value {
-  color: var(--success-color);
-}
-
-.summary-card.failed {
-  border-color: var(--danger-color);
-}
-
-.summary-card.failed .summary-value {
-  color: var(--danger-color);
-}
-
-.summary-card.pending {
-  border-color: var(--warning-color);
-}
-
-.summary-card.pending .summary-value {
-  color: var(--warning-color);
-}
-
-.summary-icon {
-  font-size: 2rem;
-  margin-bottom: 8px;
-}
-
-.summary-value {
-  font-size: 2rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.summary-label {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-/* Dimension Timeline */
-.dimension-timeline {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-  padding: 8px 4px;
-  margin-bottom: 16px;
-}
-
-.dimension-item {
-  flex: 0 0 auto;
-  min-width: 120px;
-  padding: 14px;
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 2px solid var(--border-color);
-  text-align: center;
-  transition: all 0.2s ease;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted));
   cursor: pointer;
+  transition: background 0.15s;
 }
 
-.dimension-item:hover {
-  border-color: var(--accent-color);
+.collapsible-header:hover {
+  background: hsl(var(--hover));
 }
 
-.dimension-item.completed {
-  border-color: var(--success-color);
-  background: rgba(34, 197, 94, 0.05);
+.collapsible-icon {
+  transition: transform 0.2s;
 }
 
-.dimension-item.in-progress {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
+.collapsible-header.open .collapsible-icon {
+  transform: rotate(90deg);
 }
 
-.dimension-number {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-}
-
-.dimension-name {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.dimension-stats {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-/* Stage Timeline */
-.stage-timeline {
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-  padding: 8px 4px;
-  margin-top: 20px;
-}
-
-.stage-item {
-  flex: 0 0 auto;
-  min-width: 140px;
-  padding: 14px;
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 2px solid var(--border-color);
-  text-align: center;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.stage-item::after {
-  content: '→';
-  position: absolute;
-  right: -20px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-secondary);
-  font-size: 1.2rem;
-}
-
-.stage-item:last-child::after {
+.collapsible-content {
+  padding: 1rem;
   display: none;
 }
 
-.stage-item.completed {
-  border-color: var(--success-color);
-  background: rgba(34, 197, 94, 0.05);
+.collapsible-content.open {
+  display: block;
 }
 
-.stage-item.in-progress {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
-  transform: scale(1.02);
-}
-
-.stage-number {
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.stage-mode {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-}
-
-.stage-groups {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-}
-
-/* Fix Progress Bar */
-.fix-progress-bar {
-  height: 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: 12px;
-}
-
-.fix-progress-bar-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--success-color), #22c55e);
-  border-radius: 6px;
-  transition: width 0.5s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.fix-progress-bar-fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-.progress-text {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  margin-bottom: 20px;
-}
-
-.progress-text strong {
-  color: var(--text-primary);
-}
-
-/* Findings Section */
-.review-findings-section,
-.fix-tasks-section {
-  background: var(--bg-card);
-  border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 24px;
-  border: 1px solid var(--border-color);
-}
-
-.findings-header,
-.tasks-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.findings-header h3,
-.tasks-header h3 {
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.findings-filters,
-.task-filters {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.filter-btn {
-  padding: 6px 14px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.filter-btn:hover {
-  border-color: var(--accent-color);
-  color: var(--text-primary);
-}
-
-.filter-btn.active {
-  background: var(--accent-color);
-  color: white;
-  border-color: var(--accent-color);
-}
-
-/* Findings Grid */
-.findings-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dimension-findings-group {
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.dimension-group-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.dimension-badge {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--accent-color);
-  text-transform: capitalize;
-}
-
-.dimension-count {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.findings-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 12px;
-  padding: 16px;
-}
-
-.finding-card {
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  padding: 14px;
-  border-left: 4px solid var(--border-color);
-  transition: all 0.2s ease;
-}
-
-.finding-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
-}
-
-.finding-card.severity-critical {
-  border-left-color: var(--danger-color);
-}
-
-.finding-card.severity-high {
-  border-left-color: var(--warning-color);
-}
-
-.finding-card.severity-medium {
-  border-left-color: var(--accent-color);
-}
-
-.finding-card.severity-low {
-  border-left-color: var(--success-color);
-}
-
-.finding-card-header {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.severity-badge {
-  padding: 3px 8px;
-  border-radius: 10px;
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.severity-badge.critical {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--danger-color);
-}
-
-.severity-badge.high {
-  background: rgba(245, 158, 11, 0.15);
-  color: var(--warning-color);
-}
-
-.severity-badge.medium {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--accent-color);
-}
-
-.severity-badge.low {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--success-color);
-}
-
-.fix-status-badge {
-  padding: 3px 8px;
-  border-radius: 10px;
-  font-size: 0.65rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.fix-status-badge.status-fixed {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--success-color);
-}
-
-.fix-status-badge.status-failed {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--danger-color);
-}
-
-.fix-status-badge.status-in-progress {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--accent-color);
-}
-
-.finding-card-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 6px;
-}
-
-.finding-card-desc {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-.finding-card-file {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-family: 'SF Mono', Monaco, monospace;
-  padding: 4px 8px;
-  background: var(--bg-card);
-  border-radius: 4px;
-  display: inline-block;
-}
-
-/* Fix Tasks Grid */
-.fix-tasks-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 16px;
-}
-
-.fix-task-card {
-  background: var(--bg-secondary);
-  border-radius: 10px;
-  padding: 16px;
-  border: 2px solid var(--border-color);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.fix-task-card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow);
-}
-
-.fix-task-card.status-pending {
-  border-left: 4px solid var(--warning-color);
-}
-
-.fix-task-card.status-in_progress {
-  border-left: 4px solid var(--accent-color);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
-}
-
-.fix-task-card.status-fixed,
-.fix-task-card.status-completed {
-  border-left: 4px solid var(--success-color);
-  opacity: 0.9;
-}
-
-.fix-task-card.status-failed {
-  border-left: 4px solid var(--danger-color);
-}
-
-.task-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.task-id-badge {
-  font-size: 0.7rem;
-  font-family: 'SF Mono', Monaco, monospace;
-  color: var(--text-secondary);
-  background: var(--bg-card);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.task-status-badge {
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.task-status-badge.pending {
-  background: rgba(245, 158, 11, 0.15);
-  color: var(--warning-color);
-}
-
-.task-status-badge.in_progress {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--accent-color);
-}
-
-.task-status-badge.fixed,
-.task-status-badge.completed {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--success-color);
-}
-
-.task-status-badge.failed {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--danger-color);
-}
-
-.task-card-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-.task-finding {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.task-file {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-family: 'SF Mono', Monaco, monospace;
-  padding: 4px 8px;
-  background: var(--bg-card);
-  border-radius: 4px;
-  display: inline-block;
-  margin-bottom: 10px;
-}
-
-.task-card-meta {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-.task-dimension {
-  padding: 2px 8px;
-  background: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
-  border-radius: 8px;
-  font-weight: 500;
-}
-
-.task-attempts {
-  color: var(--warning-color);
-  font-weight: 600;
-}
-
-.task-commit {
-  font-family: 'SF Mono', Monaco, monospace;
-}
-
-/* =====================================================
-   Task Detail Drawer - Half Screen (50vw) Slide-out Panel
-   ===================================================== */
-
-.task-detail-drawer {
-  position: fixed;
-  right: -52vw;
-  top: 0;
-  width: 50vw;
-  min-width: 600px;
-  max-width: 900px;
-  height: 100vh;
-  background: var(--bg-card);
-  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
-  transition: right 0.3s ease;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.task-detail-drawer.open {
-  right: 0;
-}
+/* ===================================
+   Task Drawer (Sidebar Panel)
+   =================================== */
 
 .drawer-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease;
-  z-index: 999;
+  display: none;
 }
 
 .drawer-overlay.active {
-  opacity: 1;
-  visibility: visible;
+  display: block;
 }
 
-/* Drawer Header */
-.drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-  flex-shrink: 0;
-}
-
-.drawer-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.drawer-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-}
-
-.drawer-close:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-/* Drawer Content */
-.drawer-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-}
-
-/* Drawer Task Header */
 .drawer-task-header {
   display: flex;
-  gap: 12px;
   align-items: center;
-  padding: 16px 20px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-color);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
 }
 
-.task-id-badge {
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.85rem;
-  padding: 4px 10px;
-  background: rgba(139, 92, 246, 0.15);
-  color: #8b5cf6;
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-.drawer-task-header .task-status-badge {
-  font-size: 0.8rem;
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-/* Drawer Tabs */
 .drawer-tabs {
   display: flex;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-card);
-  padding: 0 20px;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  overflow-x: auto;
 }
 
 .drawer-tab {
-  padding: 12px 16px;
+  padding: 0.625rem 1rem;
   background: none;
   border: none;
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  cursor: pointer;
   border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: all 0.2s ease;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
 }
 
 .drawer-tab:hover {
-  color: var(--text-primary);
-  background: var(--bg-secondary);
+  color: hsl(var(--foreground));
+  background: hsl(var(--hover));
 }
 
 .drawer-tab.active {
-  color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
-  font-weight: 500;
+  color: hsl(var(--primary));
+  border-bottom-color: hsl(var(--primary));
 }
 
-/* Drawer Tab Content */
 .drawer-tab-content {
-  padding: 0;
+  flex: 1;
+  overflow-y: auto;
 }
 
 .drawer-panel {
   display: none;
-  padding: 20px;
 }
 
 .drawer-panel.active {
   display: block;
 }
 
-/* Pre-Analysis Section */
-.pre-analysis-section {
-  margin-bottom: 24px;
+.drawer-section {
+  margin-bottom: 1.5rem;
 }
 
-.pre-analysis-section h4,
-.impl-steps-section h4,
-.target-files-section h4,
-.test-commands-section h4 {
-  font-size: 0.95rem;
+.drawer-section-title {
+  font-size: 0.875rem;
   font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 12px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color);
+  color: hsl(var(--foreground));
+  margin: 0 0 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-/* Step Items */
+.empty-section {
+  padding: 1rem;
+  text-align: center;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+  background: hsl(var(--muted));
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+}
+
+/* Steps List */
 .steps-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.5rem;
 }
 
 .step-item {
   display: flex;
-  gap: 12px;
-  padding: 12px;
-  background: var(--bg-secondary);
-  border-left: 3px solid var(--accent-color);
-  border-radius: 0 8px 8px 0;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
 }
 
-.step-badge {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  border-radius: 50%;
-  background: var(--accent-color);
-  color: white;
+.step-number {
+  width: 1.5rem;
+  height: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: 50%;
   font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
 }
 
 .step-content {
   flex: 1;
-  min-width: 0;
-}
-
-.step-name {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  margin-bottom: 4px;
-}
-
-.step-action {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
   line-height: 1.5;
 }
 
-.step-commands {
+.step-description {
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+  margin-top: 0.25rem;
+}
+
+/* Files List */
+.files-list {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-top: 8px;
+  gap: 0.375rem;
 }
 
-.step-commands code {
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.75rem;
-  padding: 4px 8px;
-  background: var(--bg-tertiary);
-  border-radius: 4px;
-  color: var(--text-primary);
-  display: block;
-  word-break: break-all;
-}
-
-.step-output {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  margin-top: 6px;
-}
-
-.step-output code {
-  background: var(--bg-tertiary);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.75rem;
-}
-
-/* Implementation Steps (Enhanced Grid Layout) */
-.impl-steps-section {
-  margin-bottom: 24px;
-}
-
-.impl-steps-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.impl-step-item {
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  border: 1px solid var(--border-color);
-  overflow: hidden;
-}
-
-.impl-step-item:hover {
-  border-color: var(--accent-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.impl-step-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: var(--bg-tertiary);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.impl-step-number {
-  padding: 4px 10px;
-  background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
-  color: white;
-  font-weight: 600;
-  font-size: 0.8rem;
-  border-radius: 6px;
-  white-space: nowrap;
-}
-
-.impl-step-title {
-  font-weight: 600;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  flex: 1;
-}
-
-.impl-step-desc {
-  padding: 10px 16px;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  border-bottom: 1px solid var(--border-color);
-}
-
-/* Three-column grid for Modifications and Logic Flow */
-.impl-step-columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1px;
-  background: var(--border-color);
-}
-
-.impl-step-mods,
-.impl-step-flow {
-  padding: 12px 16px;
-  background: var(--bg-card);
-}
-
-.impl-step-mods strong,
-.impl-step-flow strong {
-  display: block;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.impl-step-mods ul,
-.impl-step-flow ol {
-  margin: 0;
-  padding-left: 18px;
-  font-size: 0.85rem;
-  line-height: 1.6;
-}
-
-.impl-step-mods li,
-.impl-step-flow li {
-  margin-bottom: 4px;
-  color: var(--text-primary);
-}
-
-.impl-step-mods code {
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.75rem;
-  padding: 2px 6px;
-  background: var(--bg-tertiary);
-  border-radius: 3px;
-  color: var(--accent-color);
-}
-
-.impl-step-deps {
-  padding: 10px 16px;
-  background: var(--bg-card);
-  border-top: 1px solid var(--border-color);
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.dep-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  background: rgba(249, 115, 22, 0.1);
-  color: var(--warning-color);
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-left: 4px;
-}
-
-.drawer-section {
-  margin-bottom: 20px;
-}
-
-.drawer-section-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0 0 12px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.empty-section {
-  padding: 20px;
-  text-align: center;
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  border-radius: 8px;
-}
-
-.target-files-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.target-files-list li {
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  margin-bottom: 6px;
-}
-
-.target-files-list li code {
-  font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.8rem;
-  color: var(--text-primary);
-}
-
-/* File Links with VS Code integration */
 .file-item {
-  padding: 0;
-  margin-bottom: 6px;
-}
-
-.file-link {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  text-decoration: none;
-  color: inherit;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-}
-
-.file-link:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--accent-color);
-  transform: translateX(4px);
-}
-
-.file-link .file-icon {
-  font-size: 1rem;
-  opacity: 0.7;
-}
-
-.file-link code {
-  flex: 1;
-  font-family: 'SF Mono', Monaco, monospace;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  font-family: monospace;
   font-size: 0.8rem;
-  color: var(--accent-color);
-  word-break: break-all;
+  color: hsl(var(--foreground));
 }
 
-.file-link .file-action {
-  font-size: 0.8rem;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  color: var(--accent-color);
+.file-icon {
+  font-size: 0.875rem;
+  flex-shrink: 0;
 }
 
-.file-link:hover .file-action {
-  opacity: 1;
+/* Test Commands */
+.test-commands {
+  margin-top: 1rem;
 }
 
-/* Target Files Section */
-.target-files-section {
-  margin-bottom: 24px;
-}
-
-.file-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.file-list li {
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  margin-bottom: 6px;
-  font-size: 0.85rem;
-}
-
-.file-list li code {
-  font-family: 'SF Mono', Monaco, monospace;
-  color: var(--text-primary);
-}
-
-/* Test Commands Section */
-.test-commands-section {
-  margin-bottom: 24px;
-}
-
-.test-commands-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.test-command {
+.command-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  font-family: 'SF Mono', Monaco, monospace;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: hsl(220 13% 18%);
+  color: hsl(142 71% 60%);
+  border-radius: 0.25rem;
+  font-family: monospace;
   font-size: 0.8rem;
-  color: var(--text-primary);
-}
-
-.test-command-icon {
-  color: var(--success-color);
+  margin-bottom: 0.375rem;
 }
 
 /* Flowchart Container */
 .flowchart-container {
-  min-height: 400px;
-  padding: 20px 10px;
-  overflow-y: auto;
-  background: var(--bg-secondary);
-  border-radius: 8px;
+  min-height: 300px;
+  background: hsl(var(--muted));
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow: auto;
 }
 
 .flowchart-container svg {
-  width: 100%;
-  display: block;
+  max-width: 100%;
 }
 
-/* Flowchart Node Styles */
-.flowchart-node {
-  cursor: pointer;
-}
-
-.flowchart-node rect {
-  transition: all 0.2s ease;
-}
-
-.flowchart-node:hover rect {
-  filter: brightness(1.05);
-  stroke-width: 3px;
-}
-
-.flowchart-node text {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* Flowchart Arrow Marker */
-.flowchart-arrow {
-  fill: var(--border-color);
-}
-
-/* Raw JSON View */
+/* JSON View */
 .json-view {
-  background: var(--bg-secondary);
-  border-radius: 8px;
-  padding: 16px;
-  font-family: 'SF Mono', Monaco, monospace;
+  background: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
   font-size: 0.75rem;
   line-height: 1.6;
-  color: var(--text-primary);
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 600px;
+  color: hsl(var(--foreground));
+  max-height: 500px;
   overflow-y: auto;
 }
-
-/* Empty State in Drawer */
-.drawer-empty-state {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--text-secondary);
-}
-
-.drawer-empty-state .empty-icon {
-  font-size: 2rem;
-  margin-bottom: 10px;
-}
-
-/* Responsive Drawer */
-@media (max-width: 1200px) {
-  .task-detail-drawer {
-    width: 60vw;
-    right: -62vw;
-    min-width: 500px;
-  }
-}
-
-@media (max-width: 768px) {
-  .task-detail-drawer {
-    width: 100%;
-    right: -100%;
-    min-width: unset;
-    max-width: unset;
-  }
-
-  .drawer-tabs {
-    overflow-x: auto;
-    padding: 0 12px;
-  }
-
-  .drawer-tab {
-    padding: 10px 12px;
-    font-size: 0.85rem;
-    white-space: nowrap;
-  }
-
-  .drawer-panel {
-    padding: 16px;
-  }
-}
diff --git a/ccw/src/templates/dashboard.css.backup b/ccw/src/templates/dashboard.css.backup
new file mode 100644
index 00000000..6217b7eb
--- /dev/null
+++ b/ccw/src/templates/dashboard.css.backup
@@ -0,0 +1,3963 @@
+/* CSS Variables */
+:root {
+  /* Background */
+  --bg-primary: #f8f9fa;
+  --bg-secondary: #ffffff;
+  --bg-card: #ffffff;
+  --bg-sidebar: #f1f3f5;
+  --bg-hover: #e9ecef;
+
+  /* Text */
+  --text-primary: #212529;
+  --text-secondary: #495057;
+  --text-muted: #868e96;
+
+  /* Accent */
+  --accent-color: #228be6;
+  --accent-hover: #1c7ed6;
+  --accent-light: #e7f5ff;
+
+  /* Status */
+  --success-color: #40c057;
+  --success-light: #d3f9d8;
+  --warning-color: #fab005;
+  --warning-light: #fff3bf;
+  --danger-color: #fa5252;
+  --danger-light: #ffe3e3;
+  --info-color: #339af0;
+  --info-light: #d0ebff;
+
+  /* Border & Shadow */
+  --border-color: #dee2e6;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow: 0 2px 8px rgba(0,0,0,0.08);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
+
+  /* Spacing */
+  --sidebar-width: 260px;
+  --sidebar-collapsed: 60px;
+  --header-height: 56px;
+  --footer-height: 40px;
+  --radius: 8px;
+  --radius-sm: 4px;
+}
+
+[data-theme="dark"] {
+  --bg-primary: #1a1b1e;
+  --bg-secondary: #25262b;
+  --bg-card: #2c2e33;
+  --bg-sidebar: #25262b;
+  --bg-hover: #373a40;
+
+  --text-primary: #c1c2c5;
+  --text-secondary: #909296;
+  --text-muted: #5c5f66;
+
+  --accent-light: #1c3a5e;
+  --success-light: #1d3d2a;
+  --warning-light: #3d3520;
+  --danger-light: #3d2020;
+  --info-light: #1c3a5e;
+
+  --border-color: #373a40;
+}
+
+/* Reset & Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+/* App Container */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Top Bar */
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: var(--header-height);
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: var(--shadow-sm);
+}
+
+.top-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 4px 8px;
+  color: var(--text-primary);
+}
+
+.logo {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--accent-color);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  font-size: 24px;
+}
+
+/* Path Selector */
+.path-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.path-selector label {
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.path-dropdown {
+  position: relative;
+}
+
+.path-current {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-primary);
+  max-width: 300px;
+}
+
+.path-current:hover {
+  background: var(--bg-hover);
+}
+
+.path-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240px;
+}
+
+.dropdown-arrow {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.2s;
+}
+
+.path-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  min-width: 280px;
+  display: none;
+  z-index: 200;
+}
+
+.path-menu.open {
+  display: block;
+}
+
+.menu-label {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.path-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.path-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.path-item.active {
+  background: var(--accent-light);
+  color: var(--accent-color);
+}
+
+.path-actions {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border-color);
+}
+
+.path-browse {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  width: 100%;
+  justify-content: center;
+}
+
+.path-browse:hover {
+  background: var(--bg-hover);
+}
+
+/* Header Actions */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.theme-toggle {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+.theme-toggle:hover {
+  background: var(--bg-hover);
+}
+
+/* Main Layout */
+.main-layout {
+  display: flex;
+  flex: 1;
+}
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  transition: width 0.3s ease, transform 0.3s ease;
+}
+
+.sidebar.collapsed {
+  width: var(--sidebar-collapsed);
+}
+
+.sidebar.collapsed .nav-text,
+.sidebar.collapsed .nav-section-title,
+.sidebar.collapsed .badge {
+  display: none;
+}
+
+.sidebar.collapsed .nav-section-header {
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.sidebar.collapsed .nav-item {
+  justify-content: center;
+  padding: 10px 0;
+}
+
+.sidebar.collapsed .nav-icon {
+  margin: 0;
+}
+
+/* Sidebar Navigation */
+.sidebar-nav {
+  flex: 1;
+  padding: 12px 0;
+}
+
+.nav-section {
+  margin-bottom: 8px;
+}
+
+.nav-section-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.nav-icon {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.nav-items {
+  list-style: none;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px 10px 24px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-secondary);
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.nav-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: var(--accent-light);
+  color: var(--accent-color);
+  font-weight: 500;
+}
+
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--accent-color);
+}
+
+.nav-item .nav-icon {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.nav-text {
+  flex: 1;
+}
+
+.badge {
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 10px;
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.badge.success {
+  background: var(--success-light);
+  color: var(--success-color);
+}
+
+.badge.warning {
+  background: var(--warning-light);
+  color: var(--warning-color);
+}
+
+.badge.danger {
+  background: var(--danger-light);
+  color: var(--danger-color);
+}
+
+.badge.info {
+  background: var(--info-light);
+  color: var(--info-color);
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 12px;
+  border-top: 1px solid var(--border-color);
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: all 0.15s ease;
+}
+
+.sidebar-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.sidebar.collapsed .sidebar-toggle {
+  padding: 8px 4px;
+}
+
+.sidebar.collapsed .toggle-text {
+  display: none;
+}
+
+.toggle-icon {
+  transition: transform 0.3s ease;
+}
+
+.sidebar.collapsed .toggle-icon {
+  transform: rotate(180deg);
+}
+
+/* Content Area */
+.content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 20px;
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+/* Content Header */
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.content-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-box input {
+  padding: 8px 12px 8px 36px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 14px;
+  width: 240px;
+  transition: all 0.15s ease;
+}
+
+.search-box input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.search-box::before {
+  content: '🔍';
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+}
+
+/* Sessions Grid */
+.sessions-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 20px;
+}
+
+/* Session Card */
+.session-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.session-card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+
+.session-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.session-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.session-status {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 12px;
+}
+
+.session-status.active {
+  background: var(--success-light);
+  color: var(--success-color);
+}
+
+.session-status.archived {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.session-body {
+  padding: 16px;
+}
+
+.session-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.session-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Progress Bar */
+.progress-container {
+  margin-bottom: 16px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.progress-bar {
+  height: 8px;
+  background: var(--bg-hover);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* Tasks List */
+.tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--border-color);
+  transition: all 0.15s ease;
+}
+
+.task-item:hover {
+  transform: translateX(4px);
+}
+
+.task-item.completed {
+  border-left-color: var(--success-color);
+}
+
+.task-item.in_progress {
+  border-left-color: var(--warning-color);
+}
+
+.task-item.pending {
+  border-left-color: var(--text-muted);
+}
+
+.task-checkbox {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.task-item.completed .task-checkbox {
+  background: var(--success-color);
+  border-color: var(--success-color);
+  color: white;
+}
+
+.task-item.in_progress .task-checkbox {
+  border-color: var(--warning-color);
+  color: var(--warning-color);
+}
+
+.task-title {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.task-id {
+  font-size: 11px;
+  font-family: monospace;
+  color: var(--text-muted);
+}
+
+/* Session Footer */
+.session-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-color);
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+}
+
+/* Reviews Container */
+.reviews-container {
+  display: none;
+}
+
+.reviews-container.active {
+  display: block;
+}
+
+/* Review Dimension Card */
+.review-dimension {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.dimension-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: var(--bg-secondary);
+  cursor: pointer;
+}
+
+.dimension-title {
+  font-size: 15px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dimension-count {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.dimension-body {
+  padding: 16px;
+}
+
+.finding-item {
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 8px;
+  border-left: 3px solid;
+}
+
+.finding-item.critical {
+  background: var(--danger-light);
+  border-left-color: var(--danger-color);
+}
+
+.finding-item.high {
+  background: var(--warning-light);
+  border-left-color: var(--warning-color);
+}
+
+.finding-item.medium {
+  background: var(--info-light);
+  border-left-color: var(--info-color);
+}
+
+.finding-item.low {
+  background: var(--bg-secondary);
+  border-left-color: var(--text-muted);
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.empty-text {
+  font-size: 14px;
+}
+
+/* Footer */
+.bottom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: var(--footer-height);
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-color);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Mobile Overlay */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 150;
+}
+
+.sidebar-overlay.open {
+  display: block;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: block;
+  }
+
+  .logo-text {
+    display: none;
+  }
+
+  .path-selector label {
+    display: none;
+  }
+
+  .path-text {
+    max-width: 120px;
+  }
+
+  .sidebar {
+    position: fixed;
+    left: calc(-1 * var(--sidebar-width));
+    top: var(--header-height);
+    height: calc(100vh - var(--header-height));
+    z-index: 200;
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar.open {
+    left: 0;
+  }
+
+  .sessions-container {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .search-box input {
+    width: 100%;
+  }
+
+  .content-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+  padding: 6px 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease;
+  box-shadow: var(--shadow);
+  z-index: 100;
+}
+
+.sidebar.collapsed .tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Path Modal */
+.path-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.path-modal {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  width: 90%;
+  max-width: 480px;
+  overflow: hidden;
+}
+
+.path-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.path-modal-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.path-modal-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-light);
+  border-radius: var(--radius);
+  color: var(--accent-color);
+}
+
+.path-modal-icon svg {
+  width: 20px;
+  height: 20px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
+
+.path-modal-body {
+  padding: 24px;
+}
+
+.path-modal-body p {
+  color: var(--text-secondary);
+  font-size: 14px;
+  margin: 0 0 16px 0;
+}
+
+.selected-folder {
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.path-modal-note {
+  font-size: 13px !important;
+  color: var(--text-muted) !important;
+}
+
+.path-modal-command {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+}
+
+.path-modal-command code {
+  flex: 1;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 13px;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.path-placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.copy-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+
+.copy-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.copy-btn svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.path-input-group {
+  margin-top: 16px;
+}
+
+.path-input-group label {
+  display: block;
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.path-input-group input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 14px;
+  width: calc(100% - 70px);
+  margin-right: 8px;
+}
+
+.path-input-group input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+
+.path-go-btn {
+  padding: 10px 20px;
+  background: var(--accent-color);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.path-go-btn:hover {
+  background: var(--accent-hover);
+}
+
+.path-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.path-modal-close {
+  padding: 8px 20px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.path-modal-close:hover {
+  background: var(--bg-hover);
+}
+
+/* SVG Icons */
+.icon-svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+/* Lite Task Cards */
+.lite-task-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.lite-task-card .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.lite-task-card .session-id-badge {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+
+.lite-task-card .type-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.lite-task-card .type-badge.lite-plan {
+  background: var(--info-light);
+  color: var(--info-color);
+}
+
+.lite-task-card .type-badge.lite-fix {
+  background: var(--warning-light);
+  color: var(--warning-color);
+}
+
+.lite-task-card .card-meta {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.lite-task-card .progress-bar {
+  flex: 1;
+  height: 6px;
+  background: var(--bg-hover);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.lite-task-card .progress-fill {
+  height: 100%;
+  background: var(--success-color);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.lite-task-card .tasks-container {
+  padding: 16px;
+}
+
+/* Task Detail */
+.task-detail {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.task-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-wrap: wrap;
+}
+
+.task-id-badge {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 4px 10px;
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+
+.task-detail-header .task-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.task-status-badge {
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.task-status-badge.pending {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.task-status-badge.active,
+.task-status-badge.in_progress {
+  background: var(--info-light);
+  color: var(--info-color);
+}
+
+.task-status-badge.completed {
+  background: var(--success-light);
+  color: var(--success-color);
+}
+
+.task-status-badge.blocked {
+  background: var(--danger-light);
+  color: var(--danger-color);
+}
+
+.task-header-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+
+.btn-view-json {
+  padding: 4px 10px;
+  font-size: 11px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-view-json:hover {
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-color: var(--accent-color);
+}
+
+/* Collapsible Sections */
+.collapsible-section {
+  border-top: 1px solid var(--border-color);
+}
+
+.collapsible-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  background: var(--bg-card);
+  transition: background 0.15s ease;
+  user-select: none;
+}
+
+.collapsible-header:hover {
+  background: var(--bg-hover);
+}
+
+.collapse-icon {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+  width: 12px;
+}
+
+.collapsible-header.expanded .collapse-icon {
+  transform: rotate(90deg);
+}
+
+.section-label {
+  font-family: monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.section-preview {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.collapsible-content {
+  padding: 16px;
+  background: var(--bg-secondary);
+  max-height: 800px;
+  overflow-y: auto;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+.collapsible-content.collapsed {
+  max-height: 0;
+  padding: 0 16px;
+  overflow: hidden;
+}
+
+/* JSON Preview */
+.json-preview {
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Context Fields */
+.context-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.context-field {
+  padding: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+
+.context-field label {
+  display: block;
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-color);
+  margin-bottom: 8px;
+}
+
+.context-field ul {
+  list-style: disc;
+  padding-left: 20px;
+  margin: 0;
+}
+
+.context-field li {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: 4px 0;
+}
+
+.path-tag {
+  display: inline-block;
+  font-family: monospace;
+  font-size: 11px;
+  padding: 2px 8px;
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  margin: 2px 4px 2px 0;
+}
+
+/* Flowchart Container */
+.flowchart-container {
+  min-height: 100px;
+  padding: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+}
+
+.flowchart-svg {
+  display: block;
+  margin: 0 auto;
+}
+
+.flowchart-node rect {
+  stroke: var(--border-color);
+  stroke-width: 1.5;
+}
+
+.flowchart-node text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+}
+
+.flowchart-node circle {
+  stroke: var(--border-color);
+  stroke-width: 1.5;
+}
+
+.flowchart-fallback {
+  text-align: center;
+  padding: 32px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+/* Empty State for Lite Tasks */
+.empty-state .empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  font-size: 18px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.empty-state p {
+  font-size: 14px;
+}
+
+/* JSON Modal */
+.json-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease;
+}
+
+.json-modal-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.json-modal {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  width: 90%;
+  max-width: 900px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: transform 0.2s ease;
+}
+
+.json-modal-overlay.active .json-modal {
+  transform: scale(1);
+}
+
+.json-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.json-modal-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.json-modal-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  line-height: 1;
+}
+
+.json-modal-close:hover {
+  color: var(--text-primary);
+}
+
+.json-modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+}
+
+.json-modal-content {
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+}
+
+.json-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn-copy-json {
+  padding: 8px 16px;
+  font-size: 13px;
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: white;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.btn-copy-json:hover {
+  background: var(--accent-hover);
+}
+
+/* Enhanced JSON Value Rendering */
+.json-value {
+  padding: 8px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  margin-bottom: 8px;
+}
+
+.json-value-string {
+  color: var(--success-color);
+}
+
+.json-value-number {
+  color: var(--accent-color);
+}
+
+.json-value-boolean {
+  color: var(--warning-color);
+}
+
+.json-value-null {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.json-key {
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+/* Dynamic Field Groups */
+.field-group {
+  margin-bottom: 12px;
+}
+
+.field-group-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.field-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.field-row:last-child {
+  border-bottom: none;
+}
+
+.field-label {
+  min-width: 120px;
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-color);
+  padding-right: 12px;
+}
+
+.field-value {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-secondary);
+  word-break: break-word;
+}
+
+.field-value.array-value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.array-item {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--bg-hover);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+}
+
+.array-item.path-item {
+  font-family: monospace;
+  background: var(--accent-light);
+  color: var(--accent-color);
+}
+
+.depends-badge {
+  background: var(--warning-light);
+  color: var(--warning-color);
+  font-family: monospace;
+  font-weight: 600;
+}
+
+/* All Fields Section */
+.all-fields-section {
+  margin-top: 8px;
+}
+
+.all-fields-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: all 0.15s ease;
+}
+
+.all-fields-toggle:hover {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+}
+
+.all-fields-content {
+  margin-top: 8px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+}
+
+/* Modification Points */
+.mod-points {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mod-point {
+  padding: 10px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--accent-color);
+}
+
+.mod-target {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.mod-change {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+/* Nested Array Objects */
+.nested-array {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.array-object {
+  padding: 10px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+}
+
+.array-object-header {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Array Value Display */
+.array-value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+/* Task List in Session Card */
+.tasks-detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Session Card Enhancements */
+.session-card .progress-container {
+  margin: 12px 0;
+}
+
+.session-card .progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.session-card .progress-bar {
+  height: 6px;
+  background: var(--bg-hover);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.session-card .progress-fill {
+  height: 100%;
+  background: var(--success-color);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+/* Session Card Improvements */
+.session-card {
+  cursor: pointer;
+}
+
+.session-badges {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.session-type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.session-type-badge.review {
+  background: var(--accent-light);
+  color: var(--accent-color);
+}
+
+.session-type-badge.test {
+  background: var(--warning-light);
+  color: var(--warning-color);
+}
+
+.session-type-badge.docs {
+  background: var(--success-light);
+  color: var(--success-color);
+}
+
+.session-type-badge.tdd {
+  background: var(--info-light, #e0f2fe);
+  color: var(--info-color, #0284c7);
+}
+
+.session-type-badge.workflow {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.progress-bar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.progress-bar-wrapper .progress-bar {
+  flex: 1;
+}
+
+.progress-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  min-width: 50px;
+}
+
+.progress-text {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+/* Session Detail Modal */
+.session-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.session-modal-overlay.active {
+  opacity: 1;
+}
+
+.session-modal {
+  background: var(--bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  width: 90%;
+  max-width: 700px;
+  max-height: 85vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: transform 0.2s ease;
+}
+
+.session-modal-overlay.active .session-modal {
+  transform: scale(1);
+}
+
+.session-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.session-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+}
+
+.session-id-badge {
+  font-family: monospace;
+  font-size: 13px;
+  padding: 4px 10px;
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-radius: var(--radius-sm);
+}
+
+.session-modal-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.session-modal-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.session-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.session-info-section,
+.tasks-section,
+.review-section {
+  margin-bottom: 24px;
+}
+
+.session-info-section h4,
+.tasks-section h4,
+.review-section h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-item label {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.info-item span {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.task-stats {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.task-stat {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+}
+
+.task-stat.completed {
+  background: var(--success-light);
+  color: var(--success-color);
+}
+
+.task-stat.in-progress {
+  background: var(--warning-light);
+  color: var(--warning-color);
+}
+
+.task-stat.pending {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.tasks-list-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.task-item-modal {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--text-muted);
+}
+
+.task-item-modal.completed {
+  border-left-color: var(--success-color);
+}
+
+.task-item-modal.in_progress {
+  border-left-color: var(--warning-color);
+}
+
+.task-status-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.task-item-modal.completed .task-status-icon {
+  color: var(--success-color);
+}
+
+.task-item-modal.in_progress .task-status-icon {
+  color: var(--warning-color);
+}
+
+.task-id-badge {
+  font-family: monospace;
+  font-size: 11px;
+  padding: 2px 6px;
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-radius: var(--radius-sm);
+}
+
+.task-title-modal {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.no-tasks {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.review-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.session-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.btn-view-raw {
+  padding: 8px 16px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-view-raw:hover {
+  background: var(--bg-hover);
+}
+
+.btn-close-modal {
+  padding: 8px 16px;
+  border: none;
+  background: var(--accent-color);
+  color: white;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-close-modal:hover {
+  background: var(--accent-hover);
+}
+
+/* Sessions Grid Wrapper */
+.sessions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 20px;
+}
+
+/* Session Detail Page */
+.session-detail-page {
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+}
+
+.detail-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-bottom: 12px;
+}
+
+.btn-back:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.back-icon {
+  font-size: 16px;
+}
+
+.detail-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.detail-session-id {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  font-family: monospace;
+}
+
+.detail-badges {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Detail Info Bar */
+.detail-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  padding: 16px 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.detail-info-bar .info-item {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+.detail-info-bar .info-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.detail-info-bar .info-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+/* Detail Tabs */
+.detail-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 12px 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
+}
+
+.detail-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.detail-tab:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.detail-tab.active {
+  background: var(--accent-light);
+  color: var(--accent-color);
+  border-color: var(--accent-color);
+  font-weight: 500;
+}
+
+.tab-icon {
+  font-size: 14px;
+}
+
+.tab-count {
+  padding: 2px 6px;
+  background: var(--bg-hover);
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.detail-tab.active .tab-count {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Tab Content Area */
+.detail-tab-content {
+  padding: 20px;
+  min-height: 300px;
+}
+
+.tab-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.tab-error {
+  padding: 20px;
+  background: var(--danger-light);
+  color: var(--danger-color);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+}
+
+.tab-empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-muted);
+}
+
+.tab-empty-state .empty-icon {
+  font-size: 36px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.tab-empty-state .empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.tab-empty-state .empty-text {
+  font-size: 13px;
+}
+
+/* Tasks Tab Content */
+.tasks-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.task-stats-bar {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.detail-task-item {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--text-muted);
+  overflow: hidden;
+}
+
+.detail-task-item.completed {
+  border-left-color: var(--success-color);
+}
+
+.detail-task-item.in_progress {
+  border-left-color: var(--warning-color);
+}
+
+.detail-task-item .task-item-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+}
+
+.detail-task-item .task-status-icon {
+  font-size: 14px;
+  width: 20px;
+  text-align: center;
+}
+
+.detail-task-item.completed .task-status-icon {
+  color: var(--success-color);
+}
+
+.detail-task-item.in_progress .task-status-icon {
+  color: var(--warning-color);
+}
+
+.detail-task-item .task-title {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+/* Context Tab Content */
+.context-tab-content {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.json-content {
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 16px;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+/* Summary Tab Content */
+.summary-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.summary-item {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.summary-header {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  background: var(--bg-hover);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.summary-content {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+}
+
+/* IMPL Plan Tab Content */
+.impl-plan-tab-content {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.markdown-content {
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.7;
+  padding: 16px;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+/* Review Tab Content */
+.review-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.review-dimension-section {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.review-dimension-section .dimension-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: var(--bg-hover);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.dimension-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: capitalize;
+}
+
+.dimension-findings {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.finding-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.finding-severity {
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 10px;
+}
+
+.finding-severity.critical {
+  background: var(--danger-light);
+  color: var(--danger-color);
+}
+
+.finding-severity.high {
+  background: var(--warning-light);
+  color: var(--warning-color);
+}
+
+.finding-severity.medium {
+  background: var(--info-light);
+  color: var(--info-color);
+}
+
+.finding-severity.low {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+}
+
+.finding-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.finding-description {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.finding-file {
+  font-size: 12px;
+  font-family: monospace;
+  color: var(--text-muted);
+  margin-top: 6px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .sessions-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-title-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .detail-info-bar {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .detail-tabs {
+    padding: 8px 12px;
+  }
+
+  .detail-tab {
+    padding: 8px 12px;
+  }
+
+  .tab-text {
+    display: none;
+  }
+
+  .task-stats-bar {
+    flex-wrap: wrap;
+  }
+}
+
+/* Full Task Detail View */
+.detail-task-item-full {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.detail-task-item-full.completed {
+  border-left: 3px solid var(--success-color);
+}
+
+.detail-task-item-full.in_progress {
+  border-left: 3px solid var(--warning-color);
+}
+
+.detail-task-item-full.pending {
+  border-left: 3px solid var(--text-muted);
+}
+
+.task-item-header-full {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Implementation Steps */
+.impl-steps {
+  padding-left: 20px;
+  margin: 0;
+}
+
+.impl-steps li {
+  padding: 6px 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Collapsible Summary Items */
+.summary-item-collapsible {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.summary-collapsible-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s ease;
+}
+
+.summary-collapsible-header:hover {
+  background: var(--bg-hover);
+}
+
+.summary-collapsible-header.expanded {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.summary-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.summary-preview {
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 400px;
+}
+
+.summary-collapsible-content {
+  max-height: 600px;
+  overflow-y: auto;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+.summary-collapsible-content.collapsed {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.summary-content-pre {
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 16px;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+  background: var(--bg-card);
+}
+
+/* ==========================================
+   REVIEW SESSION DETAIL PAGE STYLES
+   ========================================== */
+
+.session-type-review .review-progress-section,
+.session-type-fix .fix-progress-section {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+}
+
+.review-progress-header,
+.fix-progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.review-progress-header h3,
+.fix-progress-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.phase-badge {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.phase-badge.planning,
+.phase-badge.in-progress {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--accent-color);
+}
+
+.phase-badge.execution {
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+  animation: pulse 2s infinite;
+}
+
+.phase-badge.completion,
+.phase-badge.completed {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--success-color);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+/* Summary Cards Grid */
+.review-summary-grid,
+.fix-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.summary-card {
+  background: var(--bg-secondary);
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  border: 2px solid var(--border-color);
+  transition: all 0.2s ease;
+}
+
+.summary-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow);
+}
+
+.summary-card.critical {
+  border-color: var(--danger-color);
+}
+
+.summary-card.critical .summary-value {
+  color: var(--danger-color);
+}
+
+.summary-card.high {
+  border-color: var(--warning-color);
+}
+
+.summary-card.high .summary-value {
+  color: var(--warning-color);
+}
+
+.summary-card.fixed {
+  border-color: var(--success-color);
+}
+
+.summary-card.fixed .summary-value {
+  color: var(--success-color);
+}
+
+.summary-card.failed {
+  border-color: var(--danger-color);
+}
+
+.summary-card.failed .summary-value {
+  color: var(--danger-color);
+}
+
+.summary-card.pending {
+  border-color: var(--warning-color);
+}
+
+.summary-card.pending .summary-value {
+  color: var(--warning-color);
+}
+
+.summary-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+}
+
+.summary-value {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.summary-label {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* Dimension Timeline */
+.dimension-timeline {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding: 8px 4px;
+  margin-bottom: 16px;
+}
+
+.dimension-item {
+  flex: 0 0 auto;
+  min-width: 120px;
+  padding: 14px;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 2px solid var(--border-color);
+  text-align: center;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.dimension-item:hover {
+  border-color: var(--accent-color);
+}
+
+.dimension-item.completed {
+  border-color: var(--success-color);
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.dimension-item.in-progress {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
+}
+
+.dimension-number {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.dimension-name {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dimension-stats {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+/* Stage Timeline */
+.stage-timeline {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding: 8px 4px;
+  margin-top: 20px;
+}
+
+.stage-item {
+  flex: 0 0 auto;
+  min-width: 140px;
+  padding: 14px;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 2px solid var(--border-color);
+  text-align: center;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.stage-item::after {
+  content: '→';
+  position: absolute;
+  right: -20px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  font-size: 1.2rem;
+}
+
+.stage-item:last-child::after {
+  display: none;
+}
+
+.stage-item.completed {
+  border-color: var(--success-color);
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.stage-item.in-progress {
+  border-color: var(--accent-color);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
+  transform: scale(1.02);
+}
+
+.stage-number {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.stage-mode {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+
+.stage-groups {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+}
+
+/* Fix Progress Bar */
+.fix-progress-bar {
+  height: 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+
+.fix-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--success-color), #22c55e);
+  border-radius: 6px;
+  transition: width 0.5s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.fix-progress-bar-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.progress-text {
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 20px;
+}
+
+.progress-text strong {
+  color: var(--text-primary);
+}
+
+/* Findings Section */
+.review-findings-section,
+.fix-tasks-section {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border-color);
+}
+
+.findings-header,
+.tasks-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.findings-header h3,
+.tasks-header h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.findings-filters,
+.task-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 6px 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.filter-btn:hover {
+  border-color: var(--accent-color);
+  color: var(--text-primary);
+}
+
+.filter-btn.active {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+}
+
+/* Findings Grid */
+.findings-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dimension-findings-group {
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.dimension-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.dimension-badge {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--accent-color);
+  text-transform: capitalize;
+}
+
+.dimension-count {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.findings-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 12px;
+  padding: 16px;
+}
+
+.finding-card {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 14px;
+  border-left: 4px solid var(--border-color);
+  transition: all 0.2s ease;
+}
+
+.finding-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
+}
+
+.finding-card.severity-critical {
+  border-left-color: var(--danger-color);
+}
+
+.finding-card.severity-high {
+  border-left-color: var(--warning-color);
+}
+
+.finding-card.severity-medium {
+  border-left-color: var(--accent-color);
+}
+
+.finding-card.severity-low {
+  border-left-color: var(--success-color);
+}
+
+.finding-card-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.severity-badge {
+  padding: 3px 8px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.severity-badge.critical {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger-color);
+}
+
+.severity-badge.high {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--warning-color);
+}
+
+.severity-badge.medium {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--accent-color);
+}
+
+.severity-badge.low {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--success-color);
+}
+
+.fix-status-badge {
+  padding: 3px 8px;
+  border-radius: 10px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.fix-status-badge.status-fixed {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--success-color);
+}
+
+.fix-status-badge.status-failed {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger-color);
+}
+
+.fix-status-badge.status-in-progress {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--accent-color);
+}
+
+.finding-card-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.finding-card-desc {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.finding-card-file {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: 'SF Mono', Monaco, monospace;
+  padding: 4px 8px;
+  background: var(--bg-card);
+  border-radius: 4px;
+  display: inline-block;
+}
+
+/* Fix Tasks Grid */
+.fix-tasks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.fix-task-card {
+  background: var(--bg-secondary);
+  border-radius: 10px;
+  padding: 16px;
+  border: 2px solid var(--border-color);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.fix-task-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow);
+}
+
+.fix-task-card.status-pending {
+  border-left: 4px solid var(--warning-color);
+}
+
+.fix-task-card.status-in_progress {
+  border-left: 4px solid var(--accent-color);
+  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
+}
+
+.fix-task-card.status-fixed,
+.fix-task-card.status-completed {
+  border-left: 4px solid var(--success-color);
+  opacity: 0.9;
+}
+
+.fix-task-card.status-failed {
+  border-left: 4px solid var(--danger-color);
+}
+
+.task-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.task-id-badge {
+  font-size: 0.7rem;
+  font-family: 'SF Mono', Monaco, monospace;
+  color: var(--text-secondary);
+  background: var(--bg-card);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.task-status-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.task-status-badge.pending {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--warning-color);
+}
+
+.task-status-badge.in_progress {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--accent-color);
+}
+
+.task-status-badge.fixed,
+.task-status-badge.completed {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--success-color);
+}
+
+.task-status-badge.failed {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger-color);
+}
+
+.task-card-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.task-finding {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.task-file {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: 'SF Mono', Monaco, monospace;
+  padding: 4px 8px;
+  background: var(--bg-card);
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+.task-card-meta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.task-dimension {
+  padding: 2px 8px;
+  background: rgba(139, 92, 246, 0.1);
+  color: #8b5cf6;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.task-attempts {
+  color: var(--warning-color);
+  font-weight: 600;
+}
+
+.task-commit {
+  font-family: 'SF Mono', Monaco, monospace;
+}
+
+/* =====================================================
+   Task Detail Drawer - Half Screen (50vw) Slide-out Panel
+   ===================================================== */
+
+.task-detail-drawer {
+  position: fixed;
+  right: -52vw;
+  top: 0;
+  width: 50vw;
+  min-width: 600px;
+  max-width: 900px;
+  height: 100vh;
+  background: var(--bg-card);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  transition: right 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.task-detail-drawer.open {
+  right: 0;
+}
+
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease;
+  z-index: 999;
+}
+
+.drawer-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Drawer Header */
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.drawer-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.drawer-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.drawer-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+/* Drawer Content */
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* Drawer Task Header */
+.drawer-task-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.task-id-badge {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.85rem;
+  padding: 4px 10px;
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.drawer-task-header .task-status-badge {
+  font-size: 0.8rem;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+/* Drawer Tabs */
+.drawer-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-card);
+  padding: 0 20px;
+}
+
+.drawer-tab {
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all 0.2s ease;
+}
+
+.drawer-tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+.drawer-tab.active {
+  color: var(--accent-color);
+  border-bottom-color: var(--accent-color);
+  font-weight: 500;
+}
+
+/* Drawer Tab Content */
+.drawer-tab-content {
+  padding: 0;
+}
+
+.drawer-panel {
+  display: none;
+  padding: 20px;
+}
+
+.drawer-panel.active {
+  display: block;
+}
+
+/* Pre-Analysis Section */
+.pre-analysis-section {
+  margin-bottom: 24px;
+}
+
+.pre-analysis-section h4,
+.impl-steps-section h4,
+.target-files-section h4,
+.test-commands-section h4 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Step Items */
+.steps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.step-item {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border-left: 3px solid var(--accent-color);
+  border-radius: 0 8px 8px 0;
+}
+
+.step-badge {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+}
+
+.step-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.step-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  margin-bottom: 4px;
+}
+
+.step-action {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  line-height: 1.5;
+}
+
+.step-commands {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.step-commands code {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  color: var(--text-primary);
+  display: block;
+  word-break: break-all;
+}
+
+.step-output {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-top: 6px;
+}
+
+.step-output code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.75rem;
+}
+
+/* Implementation Steps (Enhanced Grid Layout) */
+.impl-steps-section {
+  margin-bottom: 24px;
+}
+
+.impl-steps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.impl-step-item {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+}
+
+.impl-step-item:hover {
+  border-color: var(--accent-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.impl-step-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.impl-step-number {
+  padding: 4px 10px;
+  background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
+  color: white;
+  font-weight: 600;
+  font-size: 0.8rem;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+.impl-step-title {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  flex: 1;
+}
+
+.impl-step-desc {
+  padding: 10px 16px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Three-column grid for Modifications and Logic Flow */
+.impl-step-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--border-color);
+}
+
+.impl-step-mods,
+.impl-step-flow {
+  padding: 12px 16px;
+  background: var(--bg-card);
+}
+
+.impl-step-mods strong,
+.impl-step-flow strong {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.impl-step-mods ul,
+.impl-step-flow ol {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.impl-step-mods li,
+.impl-step-flow li {
+  margin-bottom: 4px;
+  color: var(--text-primary);
+}
+
+.impl-step-mods code {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  color: var(--accent-color);
+}
+
+.impl-step-deps {
+  padding: 10px 16px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-color);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.dep-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  background: rgba(249, 115, 22, 0.1);
+  color: var(--warning-color);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 4px;
+}
+
+.drawer-section {
+  margin-bottom: 20px;
+}
+
+.drawer-section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.empty-section {
+  padding: 20px;
+  text-align: center;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border-radius: 8px;
+}
+
+.target-files-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.target-files-list li {
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  margin-bottom: 6px;
+}
+
+.target-files-list li code {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+}
+
+/* File Links with VS Code integration */
+.file-item {
+  padding: 0;
+  margin-bottom: 6px;
+}
+
+.file-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.file-link:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--accent-color);
+  transform: translateX(4px);
+}
+
+.file-link .file-icon {
+  font-size: 1rem;
+  opacity: 0.7;
+}
+
+.file-link code {
+  flex: 1;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.8rem;
+  color: var(--accent-color);
+  word-break: break-all;
+}
+
+.file-link .file-action {
+  font-size: 0.8rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: var(--accent-color);
+}
+
+.file-link:hover .file-action {
+  opacity: 1;
+}
+
+/* Target Files Section */
+.target-files-section {
+  margin-bottom: 24px;
+}
+
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.file-list li {
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  margin-bottom: 6px;
+  font-size: 0.85rem;
+}
+
+.file-list li code {
+  font-family: 'SF Mono', Monaco, monospace;
+  color: var(--text-primary);
+}
+
+/* Test Commands Section */
+.test-commands-section {
+  margin-bottom: 24px;
+}
+
+.test-commands-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.test-command {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+}
+
+.test-command-icon {
+  color: var(--success-color);
+}
+
+/* Flowchart Container */
+.flowchart-container {
+  min-height: 400px;
+  padding: 20px 10px;
+  overflow-y: auto;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+}
+
+.flowchart-container svg {
+  width: 100%;
+  display: block;
+}
+
+/* Flowchart Node Styles */
+.flowchart-node {
+  cursor: pointer;
+}
+
+.flowchart-node rect {
+  transition: all 0.2s ease;
+}
+
+.flowchart-node:hover rect {
+  filter: brightness(1.05);
+  stroke-width: 3px;
+}
+
+.flowchart-node text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Flowchart Arrow Marker */
+.flowchart-arrow {
+  fill: var(--border-color);
+}
+
+/* Raw JSON View */
+.json-view {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 16px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+/* Empty State in Drawer */
+.drawer-empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-secondary);
+}
+
+.drawer-empty-state .empty-icon {
+  font-size: 2rem;
+  margin-bottom: 10px;
+}
+
+/* Responsive Drawer */
+@media (max-width: 1200px) {
+  .task-detail-drawer {
+    width: 60vw;
+    right: -62vw;
+    min-width: 500px;
+  }
+}
+
+@media (max-width: 768px) {
+  .task-detail-drawer {
+    width: 100%;
+    right: -100%;
+    min-width: unset;
+    max-width: unset;
+  }
+
+  .drawer-tabs {
+    overflow-x: auto;
+    padding: 0 12px;
+  }
+
+  .drawer-tab {
+    padding: 10px 12px;
+    font-size: 0.85rem;
+    white-space: nowrap;
+  }
+
+  .drawer-panel {
+    padding: 16px;
+  }
+}
diff --git a/ccw/src/templates/dashboard.html b/ccw/src/templates/dashboard.html
index 81d1da65..edcc3d62 100644
--- a/ccw/src/templates/dashboard.html
+++ b/ccw/src/templates/dashboard.html
@@ -4,37 +4,219 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CCW Dashboard</title>
+  <!-- Google Fonts: Inter -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Tailwind CSS CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: ['class', '[data-theme="dark"]'],
+      safelist: [
+        // Background colors
+        'bg-card', 'bg-background', 'bg-hover', 'bg-accent', 'bg-muted', 'bg-primary', 'bg-success', 'bg-warning',
+        'bg-success-light', 'bg-warning-light', 'bg-sidebar-background', 'bg-destructive',
+        // 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',
+        // 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',
+        // Layout
+        'rounded', 'rounded-lg', 'rounded-md', 'rounded-full', 'shadow', 'shadow-sm', 'shadow-md', 'shadow-lg',
+        'p-2', 'p-3', 'p-4', 'p-5', 'px-3', 'px-4', 'px-5', 'py-2', 'py-3', 'py-4',
+        'm-2', 'mb-2', 'mb-3', 'mb-4', 'mt-2', 'mt-3', 'mt-4', 'mx-2', 'my-2',
+        'gap-2', 'gap-3', 'gap-4', 'space-y-2', 'space-y-3',
+        // Flex & Grid
+        'flex', 'flex-1', 'flex-col', 'flex-wrap', 'items-center', 'items-start', 'justify-between', 'justify-center',
+        'grid', 'grid-cols-1', 'grid-cols-2', 'grid-cols-3',
+        // Sizing
+        'w-full', 'w-5', 'w-8', 'h-2', 'h-5', 'h-8', 'min-w-0', 'max-w-full',
+        // Text
+        'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
+        'font-medium', 'font-semibold', 'font-bold', 'font-mono', 'truncate', 'uppercase',
+        // States & Transitions
+        'hover:shadow-md', 'hover:bg-hover', 'hover:-translate-y-1', 'hover:text-foreground',
+        'transition-all', 'duration-200', 'duration-300', 'cursor-pointer',
+        // Opacity & visibility
+        'opacity-50', 'opacity-80', 'hidden', 'block', 'inline', 'inline-flex',
+        // Position
+        'relative', 'absolute', 'fixed', 'sticky', 'top-0', 'right-0', 'left-0', 'bottom-0',
+        'z-10', 'z-40', 'z-50', 'overflow-hidden', 'overflow-y-auto',
+      ],
+      theme: {
+        extend: {
+          colors: {
+            background: 'hsl(var(--background))',
+            foreground: 'hsl(var(--foreground))',
+            card: 'hsl(var(--card))',
+            'card-foreground': 'hsl(var(--card-foreground))',
+            border: 'hsl(var(--border))',
+            input: 'hsl(var(--input))',
+            ring: 'hsl(var(--ring))',
+            primary: 'hsl(var(--primary))',
+            'primary-foreground': 'hsl(var(--primary-foreground))',
+            secondary: 'hsl(var(--secondary))',
+            'secondary-foreground': 'hsl(var(--secondary-foreground))',
+            accent: 'hsl(var(--accent))',
+            'accent-foreground': 'hsl(var(--accent-foreground))',
+            destructive: 'hsl(var(--destructive))',
+            'destructive-foreground': 'hsl(var(--destructive-foreground))',
+            muted: 'hsl(var(--muted))',
+            'muted-foreground': 'hsl(var(--muted-foreground))',
+            'sidebar-background': 'hsl(var(--sidebar-background))',
+            'sidebar-foreground': 'hsl(var(--sidebar-foreground))',
+            hover: 'hsl(var(--hover))',
+            success: 'hsl(var(--success))',
+            'success-light': 'hsl(var(--success-light))',
+            warning: 'hsl(var(--warning))',
+            'warning-light': 'hsl(var(--warning-light))',
+          },
+          fontFamily: {
+            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+            mono: ['Consolas', 'Monaco', 'Courier New', 'monospace'],
+          },
+          boxShadow: {
+            'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+            'DEFAULT': '0 2px 8px rgb(0 0 0 / 0.08)',
+            'md': '0 4px 12px rgb(0 0 0 / 0.1)',
+            'lg': '0 8px 24px rgb(0 0 0 / 0.12)',
+          },
+        },
+      },
+    }
+  </script>
   <style>
-{{CSS_CONTENT}}
+    /* CSS Custom Properties - Light Mode */
+    :root {
+      --background: 0 0% 98%;
+      --foreground: 0 0% 13%;
+      --card: 0 0% 100%;
+      --card-foreground: 0 0% 13%;
+      --border: 0 0% 90%;
+      --input: 0 0% 90%;
+      --ring: 220 65% 50%;
+      --primary: 220 65% 50%;
+      --primary-foreground: 0 0% 100%;
+      --secondary: 220 60% 65%;
+      --secondary-foreground: 0 0% 100%;
+      --accent: 220 40% 95%;
+      --accent-foreground: 0 0% 13%;
+      --destructive: 8 75% 55%;
+      --destructive-foreground: 0 0% 100%;
+      --muted: 0 0% 96%;
+      --muted-foreground: 0 0% 45%;
+      --sidebar-background: 0 0% 97%;
+      --sidebar-foreground: 0 0% 13%;
+      --hover: 0 0% 93%;
+      --success: 142 71% 45%;
+      --success-light: 142 76% 90%;
+      --warning: 38 92% 50%;
+      --warning-light: 48 96% 89%;
+    }
+
+    /* Dark Mode */
+    [data-theme="dark"] {
+      --background: 220 13% 10%;
+      --foreground: 0 0% 90%;
+      --card: 220 13% 14%;
+      --card-foreground: 0 0% 90%;
+      --border: 220 13% 20%;
+      --input: 220 13% 20%;
+      --ring: 220 65% 55%;
+      --primary: 220 65% 55%;
+      --primary-foreground: 0 0% 100%;
+      --secondary: 220 60% 60%;
+      --secondary-foreground: 0 0% 100%;
+      --accent: 220 30% 20%;
+      --accent-foreground: 0 0% 90%;
+      --destructive: 8 70% 50%;
+      --destructive-foreground: 0 0% 100%;
+      --muted: 220 13% 18%;
+      --muted-foreground: 0 0% 55%;
+      --sidebar-background: 220 13% 12%;
+      --sidebar-foreground: 0 0% 90%;
+      --hover: 220 13% 22%;
+      --success: 142 71% 40%;
+      --success-light: 142 50% 20%;
+      --warning: 38 85% 45%;
+      --warning-light: 40 50% 20%;
+    }
+
+    /* Scrollbar styling */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
+
+    /* Sidebar collapse state */
+    .sidebar.collapsed { width: 60px; }
+    .sidebar.collapsed .nav-text,
+    .sidebar.collapsed .nav-section-title,
+    .sidebar.collapsed .badge,
+    .sidebar.collapsed .toggle-text { display: none; }
+    .sidebar.collapsed .nav-section-header { justify-content: center; padding: 12px 0; }
+    .sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
+    .sidebar.collapsed .toggle-icon { transform: rotate(180deg); }
+
+    /* Path menu open state */
+    .path-menu.open { display: block; }
+
+    /* Mobile sidebar */
+    @media (max-width: 768px) {
+      .sidebar {
+        position: fixed;
+        left: -260px;
+        top: 56px;
+        height: calc(100vh - 56px);
+        z-index: 200;
+        box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
+      }
+      .sidebar.open { left: 0; }
+      .sidebar-overlay.open { display: block; }
+      .menu-toggle-btn { display: block !important; }
+    }
+
+    /* Task drawer */
+    .task-detail-drawer {
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+    }
+    .task-detail-drawer.open { transform: translateX(0); }
+    .drawer-overlay.active { display: block; }
+
+    /* Injected from dashboard.css */
+    {{CSS_CONTENT}}
   </style>
 </head>
-<body>
-  <div class="app-container">
+<body class="font-sans bg-background text-foreground leading-normal">
+  <div class="flex flex-col min-h-screen">
     <!-- Top Bar -->
-    <header class="top-bar">
-      <div class="top-bar-left">
-        <button class="menu-toggle" id="menuToggle">☰</button>
-        <div class="logo">
-          <span class="logo-icon">⚡</span>
-          <span class="logo-text">Claude Code Workflow</span>
+    <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>
+        <div class="flex items-center gap-2 text-lg font-semibold text-primary">
+          <span class="text-2xl">⚡</span>
+          <span class="hidden sm:inline">Claude Code Workflow</span>
         </div>
       </div>
 
       <!-- Path Selector -->
-      <div class="path-selector">
-        <label>Project:</label>
-        <div class="path-dropdown">
-          <button class="path-current" id="pathButton">
-            <span class="path-text" id="currentPath">{{PROJECT_PATH}}</span>
-            <span class="dropdown-arrow">▼</span>
+      <div class="flex items-center gap-2 relative">
+        <label class="hidden sm:inline text-sm text-muted-foreground">Project:</label>
+        <div class="relative">
+          <button class="flex items-center gap-2 px-3 py-1.5 bg-background border border-border rounded text-sm text-foreground hover:bg-hover max-w-[300px]" id="pathButton">
+            <span class="truncate max-w-[240px]" id="currentPath">{{PROJECT_PATH}}</span>
+            <span class="text-xs text-muted-foreground">▼</span>
           </button>
-          <div class="path-menu" id="pathMenu">
-            <div class="menu-label">Recent Projects</div>
-            <div id="recentPaths">
+          <div class="path-menu hidden absolute top-full left-0 mt-1 bg-card border border-border rounded-lg shadow-lg min-w-[280px] z-50" id="pathMenu">
+            <div class="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide">Recent Projects</div>
+            <div id="recentPaths" class="border-t border-border">
               <!-- Dynamic recent paths -->
             </div>
-            <div class="path-actions">
-              <button class="path-browse" id="browsePath">
+            <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...
               </button>
             </div>
@@ -43,106 +225,107 @@
       </div>
 
       <!-- Header Actions -->
-      <div class="header-actions">
-        <button class="theme-toggle" id="themeToggle" title="Toggle theme">🌙</button>
+      <div class="flex items-center gap-3">
+        <button class="p-2 text-xl hover:bg-hover rounded" id="themeToggle" title="Toggle theme">🌙</button>
       </div>
     </header>
 
     <!-- Sidebar Overlay (mobile) -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+    <div class="sidebar-overlay fixed inset-0 bg-black/50 z-40" id="sidebarOverlay"></div>
 
     <!-- Main Layout -->
-    <div class="main-layout">
+    <div class="flex flex-1">
       <!-- Sidebar -->
-      <aside class="sidebar" id="sidebar">
-        <nav class="sidebar-nav">
+      <aside class="sidebar w-64 bg-sidebar-background border-r border-border flex flex-col sticky top-14 h-[calc(100vh-56px)] overflow-y-auto transition-all duration-300" id="sidebar">
+        <nav class="flex-1 py-3">
           <!-- Sessions Section -->
-          <div class="nav-section">
-            <div class="nav-section-header">
-              <span class="nav-icon">📁</span>
+          <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>
               <span class="nav-section-title">Sessions</span>
             </div>
-            <ul class="nav-items">
-              <li class="nav-item active tooltip" data-filter="all" data-tooltip="All Sessions">
-                <span class="nav-icon">📋</span>
-                <span class="nav-text">All</span>
-                <span class="badge" id="badgeAll">0</span>
+            <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 bg-accent text-primary font-medium" data-filter="all" data-tooltip="All Sessions">
+                <span>📋</span>
+                <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 tooltip" data-filter="active" data-tooltip="Active Sessions">
-                <span class="nav-icon">🟢</span>
-                <span class="nav-text">Active</span>
-                <span class="badge success" id="badgeActive">0</span>
+              <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>
+                <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 tooltip" data-filter="archived" data-tooltip="Archived Sessions">
-                <span class="nav-icon">📦</span>
-                <span class="nav-text">Archived</span>
-                <span class="badge" id="badgeArchived">0</span>
+              <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>
+                <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>
               </li>
             </ul>
           </div>
 
           <!-- Lite Tasks Section -->
-          <div class="nav-section" id="liteTasksNav">
-            <div class="nav-section-header">
-              <span class="nav-icon">⚡</span>
+          <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>
               <span class="nav-section-title">Lite Tasks</span>
             </div>
-            <ul class="nav-items">
-              <li class="nav-item tooltip" data-lite="lite-plan" data-tooltip="Lite Plan Sessions">
-                <span class="nav-icon">📝</span>
-                <span class="nav-text">lite-plan</span>
-                <span class="badge" id="badgeLitePlan">0</span>
+            <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>
+                <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>
               </li>
-              <li class="nav-item tooltip" data-lite="lite-fix" data-tooltip="Lite Fix Sessions">
-                <span class="nav-icon">🔧</span>
-                <span class="nav-text">lite-fix</span>
-                <span class="badge" id="badgeLiteFix">0</span>
+              <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>
+                <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>
               </li>
             </ul>
           </div>
-
         </nav>
 
         <!-- Sidebar Footer -->
-        <div class="sidebar-footer">
-          <button class="sidebar-toggle" id="sidebarToggle">
-            <span class="toggle-icon">◀</span>
+        <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>
             <span class="toggle-text">Collapse</span>
           </button>
         </div>
       </aside>
 
       <!-- Content Area -->
-      <main class="content">
+      <main class="flex-1 p-6 overflow-y-auto min-w-0">
         <!-- Stats Grid -->
-        <section class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-icon">📊</div>
-            <div class="stat-value" id="statTotalSessions">0</div>
-            <div class="stat-label">Total Sessions</div>
+        <section class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4 mb-6">
+          <div class="bg-card border border-border rounded-lg p-5 text-center hover:shadow-md transition-all duration-200">
+            <div class="text-2xl mb-2">📊</div>
+            <div class="text-3xl font-bold text-foreground" id="statTotalSessions">0</div>
+            <div class="text-sm text-muted-foreground mt-1">Total Sessions</div>
           </div>
-          <div class="stat-card">
-            <div class="stat-icon">🟢</div>
-            <div class="stat-value" id="statActiveSessions">0</div>
-            <div class="stat-label">Active Sessions</div>
+          <div class="bg-card border border-border rounded-lg p-5 text-center hover:shadow-md transition-all duration-200">
+            <div class="text-2xl mb-2">🟢</div>
+            <div class="text-3xl font-bold text-foreground" id="statActiveSessions">0</div>
+            <div class="text-sm text-muted-foreground mt-1">Active Sessions</div>
           </div>
-          <div class="stat-card">
-            <div class="stat-icon">📋</div>
-            <div class="stat-value" id="statTotalTasks">0</div>
-            <div class="stat-label">Total Tasks</div>
+          <div class="bg-card border border-border rounded-lg p-5 text-center hover:shadow-md transition-all duration-200">
+            <div class="text-2xl mb-2">📋</div>
+            <div class="text-3xl font-bold text-foreground" id="statTotalTasks">0</div>
+            <div class="text-sm text-muted-foreground mt-1">Total Tasks</div>
           </div>
-          <div class="stat-card">
-            <div class="stat-icon">✅</div>
-            <div class="stat-value" id="statCompletedTasks">0</div>
-            <div class="stat-label">Completed Tasks</div>
+          <div class="bg-card border border-border rounded-lg p-5 text-center hover:shadow-md transition-all duration-200">
+            <div class="text-2xl mb-2">✅</div>
+            <div class="text-3xl font-bold text-foreground" id="statCompletedTasks">0</div>
+            <div class="text-sm text-muted-foreground mt-1">Completed Tasks</div>
           </div>
         </section>
 
         <!-- Content Header -->
-        <div class="content-header">
-          <h2 class="content-title" id="contentTitle">All Sessions</h2>
-          <div class="search-box">
-            <input type="text" placeholder="Search..." id="searchInput">
+        <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>
+            <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>
         </div>
 
@@ -154,22 +337,22 @@
     </div>
 
     <!-- Footer -->
-    <footer class="bottom-bar">
+    <footer class="flex items-center justify-between px-5 h-10 bg-card border-t border-border text-xs text-muted-foreground">
       <div>Generated: <span id="generatedAt">-</span></div>
       <div>CCW Dashboard v1.0</div>
     </footer>
 
     <!-- Task Detail Drawer -->
-    <div class="task-detail-drawer" id="taskDetailDrawer">
-      <div class="drawer-header">
-        <h3 class="drawer-title" id="drawerTaskTitle">Task Details</h3>
-        <button class="drawer-close" onclick="closeTaskDrawer()">&times;</button>
+    <div class="task-detail-drawer fixed top-0 right-0 w-[400px] max-w-full h-full bg-card border-l border-border shadow-lg z-50 flex flex-col" id="taskDetailDrawer">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-border">
+        <h3 class="text-lg font-semibold text-foreground" id="drawerTaskTitle">Task Details</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="closeTaskDrawer()">&times;</button>
       </div>
-      <div class="drawer-content" id="drawerContent">
+      <div class="flex-1 overflow-y-auto p-5" id="drawerContent">
         <!-- Dynamic content -->
       </div>
     </div>
-    <div class="drawer-overlay" id="drawerOverlay" onclick="closeTaskDrawer()"></div>
+    <div class="drawer-overlay fixed inset-0 bg-black/50 z-40" id="drawerOverlay" onclick="closeTaskDrawer()"></div>
   </div>
 
   <!-- D3.js for Flowchart -->
diff --git a/ccw/src/templates/dashboard.html.backup b/ccw/src/templates/dashboard.html.backup
new file mode 100644
index 00000000..81d1da65
--- /dev/null
+++ b/ccw/src/templates/dashboard.html.backup
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CCW Dashboard</title>
+  <style>
+{{CSS_CONTENT}}
+  </style>
+</head>
+<body>
+  <div class="app-container">
+    <!-- Top Bar -->
+    <header class="top-bar">
+      <div class="top-bar-left">
+        <button class="menu-toggle" id="menuToggle">☰</button>
+        <div class="logo">
+          <span class="logo-icon">⚡</span>
+          <span class="logo-text">Claude Code Workflow</span>
+        </div>
+      </div>
+
+      <!-- Path Selector -->
+      <div class="path-selector">
+        <label>Project:</label>
+        <div class="path-dropdown">
+          <button class="path-current" id="pathButton">
+            <span class="path-text" id="currentPath">{{PROJECT_PATH}}</span>
+            <span class="dropdown-arrow">▼</span>
+          </button>
+          <div class="path-menu" id="pathMenu">
+            <div class="menu-label">Recent Projects</div>
+            <div id="recentPaths">
+              <!-- Dynamic recent paths -->
+            </div>
+            <div class="path-actions">
+              <button class="path-browse" id="browsePath">
+                📂 Browse...
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Header Actions -->
+      <div class="header-actions">
+        <button class="theme-toggle" id="themeToggle" title="Toggle theme">🌙</button>
+      </div>
+    </header>
+
+    <!-- Sidebar Overlay (mobile) -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+    <!-- Main Layout -->
+    <div class="main-layout">
+      <!-- Sidebar -->
+      <aside class="sidebar" id="sidebar">
+        <nav class="sidebar-nav">
+          <!-- Sessions Section -->
+          <div class="nav-section">
+            <div class="nav-section-header">
+              <span class="nav-icon">📁</span>
+              <span class="nav-section-title">Sessions</span>
+            </div>
+            <ul class="nav-items">
+              <li class="nav-item active tooltip" data-filter="all" data-tooltip="All Sessions">
+                <span class="nav-icon">📋</span>
+                <span class="nav-text">All</span>
+                <span class="badge" id="badgeAll">0</span>
+              </li>
+              <li class="nav-item tooltip" data-filter="active" data-tooltip="Active Sessions">
+                <span class="nav-icon">🟢</span>
+                <span class="nav-text">Active</span>
+                <span class="badge success" id="badgeActive">0</span>
+              </li>
+              <li class="nav-item tooltip" data-filter="archived" data-tooltip="Archived Sessions">
+                <span class="nav-icon">📦</span>
+                <span class="nav-text">Archived</span>
+                <span class="badge" id="badgeArchived">0</span>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Lite Tasks Section -->
+          <div class="nav-section" id="liteTasksNav">
+            <div class="nav-section-header">
+              <span class="nav-icon">⚡</span>
+              <span class="nav-section-title">Lite Tasks</span>
+            </div>
+            <ul class="nav-items">
+              <li class="nav-item tooltip" data-lite="lite-plan" data-tooltip="Lite Plan Sessions">
+                <span class="nav-icon">📝</span>
+                <span class="nav-text">lite-plan</span>
+                <span class="badge" id="badgeLitePlan">0</span>
+              </li>
+              <li class="nav-item tooltip" data-lite="lite-fix" data-tooltip="Lite Fix Sessions">
+                <span class="nav-icon">🔧</span>
+                <span class="nav-text">lite-fix</span>
+                <span class="badge" id="badgeLiteFix">0</span>
+              </li>
+            </ul>
+          </div>
+
+        </nav>
+
+        <!-- Sidebar Footer -->
+        <div class="sidebar-footer">
+          <button class="sidebar-toggle" id="sidebarToggle">
+            <span class="toggle-icon">◀</span>
+            <span class="toggle-text">Collapse</span>
+          </button>
+        </div>
+      </aside>
+
+      <!-- Content Area -->
+      <main class="content">
+        <!-- Stats Grid -->
+        <section class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-icon">📊</div>
+            <div class="stat-value" id="statTotalSessions">0</div>
+            <div class="stat-label">Total Sessions</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">🟢</div>
+            <div class="stat-value" id="statActiveSessions">0</div>
+            <div class="stat-label">Active Sessions</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">📋</div>
+            <div class="stat-value" id="statTotalTasks">0</div>
+            <div class="stat-label">Total Tasks</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-icon">✅</div>
+            <div class="stat-value" id="statCompletedTasks">0</div>
+            <div class="stat-label">Completed Tasks</div>
+          </div>
+        </section>
+
+        <!-- Content Header -->
+        <div class="content-header">
+          <h2 class="content-title" id="contentTitle">All Sessions</h2>
+          <div class="search-box">
+            <input type="text" placeholder="Search..." id="searchInput">
+          </div>
+        </div>
+
+        <!-- Main Content Container -->
+        <section class="main-content" id="mainContent">
+          <!-- Dynamic content: sessions grid or session detail page -->
+        </section>
+      </main>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bottom-bar">
+      <div>Generated: <span id="generatedAt">-</span></div>
+      <div>CCW Dashboard v1.0</div>
+    </footer>
+
+    <!-- Task Detail Drawer -->
+    <div class="task-detail-drawer" id="taskDetailDrawer">
+      <div class="drawer-header">
+        <h3 class="drawer-title" id="drawerTaskTitle">Task Details</h3>
+        <button class="drawer-close" onclick="closeTaskDrawer()">&times;</button>
+      </div>
+      <div class="drawer-content" id="drawerContent">
+        <!-- Dynamic content -->
+      </div>
+    </div>
+    <div class="drawer-overlay" id="drawerOverlay" onclick="closeTaskDrawer()"></div>
+  </div>
+
+  <!-- D3.js for Flowchart -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+
+  <script>
+{{JS_CONTENT}}
+  </script>
+</body>
+</html>
diff --git a/ccw/src/templates/dashboard_tailwind.html b/ccw/src/templates/dashboard_tailwind.html
new file mode 100644
index 00000000..4a2a60a6
--- /dev/null
+++ b/ccw/src/templates/dashboard_tailwind.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CCW Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: ['class', '[data-theme="dark"]'],
+      theme: {
+        extend: {
+          colors: {
+            background: 'hsl(var(--color-background))',
+            foreground: 'hsl(var(--color-foreground))',
+            card: 'hsl(var(--color-card))',
+            border: 'hsl(var(--color-border))',
+          },
+        },
+      },
+    }
+  </script>
+  <style>:root{--color-background:0 0% 100%;--color-foreground:0 0% 25%;}</style>
+</head>
+<body>
+  <div class="flex flex-col min-h-screen bg-background text-foreground">
+    <header class="flex items-center justify-between px-5 h-14 bg-card border-b border-border sticky top-0 z-50">
+      <div class="flex items-center gap-2">
+        <span class="text-xl">⚡</span>
+        <span class="font-semibold">Claude Code Workflow</span>
+      </div>
+    </header>
+    <main class="flex-1 p-6">
+      <h1>Dashboard</h1>
+    </main>
+  </div>
+  <script>{{JS_CONTENT}}</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ccw/src/templates/dashboard_test.html b/ccw/src/templates/dashboard_test.html
new file mode 100644
index 00000000..e894f6fa
--- /dev/null
+++ b/ccw/src/templates/dashboard_test.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CCW Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: ['class', '[data-theme="dark"]'],
+      theme: {
+        extend: {
+          colors: {
+            background: 'hsl(var(--color-background))',
+            foreground: 'hsl(var(--color-foreground))',
+            card: 'hsl(var(--color-card))',
+            border: 'hsl(var(--color-border))',
+            input: 'hsl(var(--color-input))',
+            ring: 'hsl(var(--color-ring))',
+            primary: 'hsl(var(--color-interactive-primary-default))',
+            accent: 'hsl(var(--color-interactive-accent-default))',
+            muted: 'hsl(var(--color-muted))',
+          },
+          fontFamily: {
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+          },
+        },
+      },
+    }
+  </script>
+  <style>:root{--color-background:0 0% 100%;--color-foreground:0 0% 25%;--color-card:0 0% 100%;--color-border:0 0% 90%;--color-input:0 0% 90%;--color-ring:220 65% 50%;--color-interactive-primary-default:220 65% 50%;--color-interactive-accent-default:220 40% 95%;--color-muted:0 0% 97%;--color-muted-foreground:0 0% 50%;--color-sidebar-background:0 0% 97.5%;}[data-theme="dark"]{--color-background:0 0% 10%;--color-foreground:0 0% 90%;--color-card:0 0% 15%;--color-border:0 0% 25%;}</style>
+</head>
+<body>Test</body>
+</html>
\ No newline at end of file
diff --git a/ccw/src/templates/review-cycle-dashboard.html b/ccw/src/templates/review-cycle-dashboard.html
index b308a748..ed765a8c 100644
--- a/ccw/src/templates/review-cycle-dashboard.html
+++ b/ccw/src/templates/review-cycle-dashboard.html
@@ -1,1466 +1,579 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Code Review Dashboard - {{SESSION_ID}}</title>
+    <!-- Google Fonts: Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: ['class', '[data-theme="dark"]'],
+            safelist: [
+                'bg-card', 'bg-background', 'bg-hover', 'bg-accent', 'bg-muted', 'bg-primary', 'bg-success', 'bg-warning',
+                'bg-success-light', 'bg-warning-light', 'bg-red-100', 'bg-orange-100', 'bg-blue-100', 'bg-gray-100',
+                'text-foreground', 'text-muted-foreground', 'text-primary', 'text-success', 'text-warning',
+                'text-red-700', 'text-orange-700', 'text-blue-700', 'text-gray-700', 'text-primary-foreground',
+                'border', 'border-border', 'border-l-4', 'rounded', 'rounded-lg', 'rounded-full',
+                'shadow', 'shadow-sm', 'shadow-md', 'p-2', 'p-3', 'p-4', 'p-5', 'px-3', 'px-4', 'py-2',
+                'mb-2', 'mb-4', 'mt-4', 'gap-2', 'gap-4', 'space-y-2', 'space-y-4',
+                'flex', 'flex-1', 'flex-col', 'flex-wrap', 'items-center', 'justify-between', 'justify-center',
+                'grid', 'w-full', 'text-xs', 'text-sm', 'text-lg', 'text-xl', 'text-2xl',
+                'font-medium', 'font-semibold', 'font-bold', 'font-mono', 'truncate',
+                'hover:shadow-md', 'hover:bg-hover', 'transition-all', 'duration-200', 'cursor-pointer',
+                'hidden', 'block', 'relative', 'fixed', 'z-50', 'overflow-hidden', 'min-h-screen', 'max-w-6xl', 'mx-auto',
+            ],
+            theme: {
+                extend: {
+                    colors: {
+                        background: 'hsl(var(--background))',
+                        foreground: 'hsl(var(--foreground))',
+                        card: 'hsl(var(--card))',
+                        'card-foreground': 'hsl(var(--card-foreground))',
+                        border: 'hsl(var(--border))',
+                        input: 'hsl(var(--input))',
+                        ring: 'hsl(var(--ring))',
+                        primary: 'hsl(var(--primary))',
+                        'primary-foreground': 'hsl(var(--primary-foreground))',
+                        secondary: 'hsl(var(--secondary))',
+                        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+                        accent: 'hsl(var(--accent))',
+                        'accent-foreground': 'hsl(var(--accent-foreground))',
+                        destructive: 'hsl(var(--destructive))',
+                        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+                        muted: 'hsl(var(--muted))',
+                        'muted-foreground': 'hsl(var(--muted-foreground))',
+                        hover: 'hsl(var(--hover))',
+                        success: 'hsl(var(--success))',
+                        'success-light': 'hsl(var(--success-light))',
+                        warning: 'hsl(var(--warning))',
+                        'warning-light': 'hsl(var(--warning-light))',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+                        mono: ['Consolas', 'Monaco', 'Courier New', 'monospace'],
+                    },
+                    boxShadow: {
+                        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                        'DEFAULT': '0 2px 8px rgb(0 0 0 / 0.08)',
+                        'md': '0 4px 12px rgb(0 0 0 / 0.1)',
+                        'lg': '0 8px 24px rgb(0 0 0 / 0.12)',
+                    },
+                },
+            },
+        }
+    </script>
     <style>
+        /* CSS Custom Properties - Light Mode */
         :root {
-            --bg-primary: #f5f7fa;
-            --bg-secondary: #ffffff;
-            --bg-card: #ffffff;
-            --text-primary: #1a202c;
-            --text-secondary: #718096;
-            --border-color: #e2e8f0;
-            --accent-color: #4299e1;
-            --success-color: #48bb78;
-            --warning-color: #ed8936;
-            --danger-color: #f56565;
-            --critical-color: #c53030;
-            --high-color: #f56565;
-            --medium-color: #ed8936;
-            --low-color: #48bb78;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --background: 0 0% 98%;
+            --foreground: 0 0% 13%;
+            --card: 0 0% 100%;
+            --card-foreground: 0 0% 13%;
+            --border: 0 0% 90%;
+            --input: 0 0% 90%;
+            --ring: 220 65% 50%;
+            --primary: 220 65% 50%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 220 60% 65%;
+            --secondary-foreground: 0 0% 100%;
+            --accent: 220 40% 95%;
+            --accent-foreground: 0 0% 13%;
+            --destructive: 8 75% 55%;
+            --destructive-foreground: 0 0% 100%;
+            --muted: 0 0% 96%;
+            --muted-foreground: 0 0% 45%;
+            --hover: 0 0% 93%;
+            --success: 142 71% 45%;
+            --success-light: 142 76% 90%;
+            --warning: 38 92% 50%;
+            --warning-light: 48 96% 89%;
         }
 
+        /* Dark Mode */
         [data-theme="dark"] {
-            --bg-primary: #1a202c;
-            --bg-secondary: #2d3748;
-            --bg-card: #2d3748;
-            --text-primary: #f7fafc;
-            --text-secondary: #a0aec0;
-            --border-color: #4a5568;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+            --background: 220 13% 10%;
+            --foreground: 0 0% 90%;
+            --card: 220 13% 14%;
+            --card-foreground: 0 0% 90%;
+            --border: 220 13% 20%;
+            --input: 220 13% 20%;
+            --ring: 220 65% 55%;
+            --primary: 220 65% 55%;
+            --primary-foreground: 0 0% 100%;
+            --secondary: 220 60% 60%;
+            --secondary-foreground: 0 0% 100%;
+            --accent: 220 30% 20%;
+            --accent-foreground: 0 0% 90%;
+            --destructive: 8 70% 50%;
+            --destructive-foreground: 0 0% 100%;
+            --muted: 220 13% 18%;
+            --muted-foreground: 0 0% 55%;
+            --hover: 220 13% 22%;
+            --success: 142 71% 40%;
+            --success-light: 142 50% 20%;
+            --warning: 38 85% 45%;
+            --warning-light: 40 50% 20%;
         }
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            transition: background-color 0.3s, color 0.3s;
-        }
-
-        .container {
-            max-width: 1600px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-
-        header {
-            background-color: var(--bg-secondary);
-            box-shadow: var(--shadow);
-            padding: 20px;
-            margin-bottom: 30px;
-            border-radius: 8px;
-        }
-
-        h1 {
-            font-size: 2rem;
-            margin-bottom: 10px;
-            color: var(--accent-color);
-        }
-
-        .header-meta {
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 15px;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-        }
-
-        .header-controls {
-            display: flex;
-            gap: 15px;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 15px;
-        }
-
-        .search-box {
-            flex: 1;
-            min-width: 250px;
-            position: relative;
-        }
-
-        .search-box input {
-            width: 100%;
-            padding: 10px 15px;
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 0.95rem;
-        }
-
-        .btn {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            font-weight: 500;
-            transition: all 0.2s;
-            background-color: var(--bg-card);
-            color: var(--text-primary);
-            border: 1px solid var(--border-color);
-        }
-
-        .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow);
-        }
-
-        .btn.active {
-            background-color: var(--accent-color);
-            color: white;
-            border-color: var(--accent-color);
-        }
-
-        .export-btn-fix {
-            background-color: var(--success-color);
-            color: white;
-            border-color: var(--success-color);
-        }
-
-        .export-btn-fix:hover {
-            background-color: #38a169;
-        }
-
-        .export-btn-fix:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        /* Selection Controls */
-        .selection-controls {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            font-size: 0.9rem;
-        }
-
-        .selection-counter {
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        .selection-btn {
-            padding: 6px 12px;
-            font-size: 0.85rem;
-        }
-
-        /* Checkbox Styles */
-        .finding-checkbox {
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            accent-color: var(--accent-color);
-        }
-
-        /* Fix Status Badges */
-        .fix-status-badge {
-            display: inline-block;
-            padding: 4px 10px;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            margin-top: 8px;
-        }
-
-        .fix-status-badge.status-pending {
-            background-color: transparent;
-            color: var(--text-secondary);
-            border: 1px solid var(--border-color);
-        }
-
-        .fix-status-badge.status-in-progress {
-            background-color: var(--accent-color);
-            color: white;
-            animation: pulse 2s infinite;
-        }
-
-        .fix-status-badge.status-fixed {
-            background-color: var(--success-color);
-            color: white;
-        }
-
-        .fix-status-badge.status-failed {
-            background-color: var(--danger-color);
-            color: white;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-
-        /* Fix Progress Section */
-        .fix-progress-section {
-            background-color: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            margin-bottom: 20px;
-            display: none; /* Hidden by default */
-        }
-
-        .fix-progress-section.active {
-            display: block;
-        }
-
-        .fix-progress-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-
-        .fix-progress-bar {
-            height: 8px;
-            background-color: var(--bg-primary);
-            border-radius: 4px;
-            overflow: hidden;
-            margin-bottom: 15px;
-        }
-
-        .fix-progress-bar-fill {
-            height: 100%;
-            background-color: var(--success-color);
-            transition: width 0.3s;
-        }
-
-        .active-agents-list {
-            margin-top: 15px;
-            border-top: 1px solid var(--border-color);
-            padding-top: 15px;
-        }
-
-        .active-agent-item {
-            padding: 10px;
-            background-color: var(--bg-primary);
-            border-radius: 6px;
-            margin-bottom: 8px;
-            font-size: 0.9rem;
-        }
-
-        .active-agent-item .agent-task {
-            color: var(--text-primary);
-            font-size: 0.9rem;
-            margin-top: 4px;
-        }
-
-        .active-agent-item .agent-file {
-            color: var(--text-secondary);
-            font-size: 0.85rem;
-            margin-top: 4px;
-        }
-
-        .agent-status-badge {
-            display: inline-block;
-            padding: 2px 8px;
-            margin-left: 8px;
-            font-size: 0.75rem;
-            background-color: var(--accent-color);
-            color: white;
-            border-radius: 10px;
-            font-weight: 500;
-        }
-
-        .group-active-items {
-            margin-top: 8px;
-            padding: 6px 8px;
-            background-color: rgba(59, 130, 246, 0.1);
-            border-left: 3px solid var(--accent-color);
-            border-radius: 4px;
-            font-size: 0.85rem;
-            color: var(--text-primary);
-            word-wrap: break-word;
-        }
-
-        /* Flow Control Steps */
-        .flow-control-container {
-            margin-top: 12px;
-            padding: 10px;
-            background-color: rgba(139, 92, 246, 0.05);
-            border-radius: 6px;
-            border: 1px solid rgba(139, 92, 246, 0.2);
-        }
-
-        .flow-control-header {
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            margin-bottom: 8px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .flow-steps {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .flow-step {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 0.85rem;
-            transition: all 0.2s;
-        }
-
-        .flow-step-completed {
-            background-color: rgba(34, 197, 94, 0.1);
-            color: #22c55e;
-        }
-
-        .flow-step-in-progress {
-            background-color: rgba(59, 130, 246, 0.1);
-            color: var(--accent-color);
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        .flow-step-failed {
-            background-color: rgba(239, 68, 68, 0.1);
-            color: #ef4444;
-        }
-
-        .flow-step-pending {
-            background-color: rgba(156, 163, 175, 0.1);
-            color: var(--text-secondary);
-        }
-
-        .flow-step-icon {
-            font-size: 1rem;
-        }
-
-        .flow-step-name {
-            font-weight: 500;
-        }
+        /* Scrollbar styling */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
 
+        /* Animations */
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.6; }
         }
 
-        .collapse-btn {
-            padding: 6px 12px;
-            font-size: 0.85rem;
-            cursor: pointer;
-        }
-
-        /* History Timeline */
-        .history-drawer {
-            position: fixed;
-            right: -600px;
-            top: 0;
-            width: 600px;
-            height: 100vh;
-            background-color: var(--bg-secondary);
-            box-shadow: var(--shadow-lg);
-            transition: right 0.3s;
-            z-index: 1001;
-            overflow-y: auto;
-        }
-
-        .history-drawer.active {
-            right: 0;
-        }
-
-        .history-timeline {
-            padding: 20px;
-        }
-
-        .history-item {
-            padding: 15px;
-            background-color: var(--bg-card);
-            border-radius: 6px;
-            margin-bottom: 15px;
-            border-left: 4px solid var(--accent-color);
-        }
-
-        .history-item.status-fixed {
-            border-left-color: var(--success-color);
-        }
-
-        .history-item.status-failed {
-            border-left-color: var(--danger-color);
-        }
-
-        .history-item-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .history-item-title {
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .history-item-timestamp {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-        }
-
-        .history-item-meta {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-top: 8px;
-        }
-
-        .history-item-tests {
-            margin-top: 10px;
-            padding: 10px;
-            background-color: var(--bg-primary);
-            border-radius: 4px;
-            font-size: 0.85rem;
-        }
-
-        /* Stage Timeline */
-        .stage-timeline {
-            display: flex;
-            gap: 10px;
-            margin: 20px 0;
-            padding: 15px;
-            background-color: var(--bg-secondary);
-            border-radius: 8px;
-            overflow-x: auto;
-        }
-
-        .stage-item {
-            flex: 1;
-            min-width: 150px;
-            padding: 12px;
-            background-color: var(--bg-card);
-            border-radius: 6px;
-            border: 2px solid var(--border-color);
-            text-align: center;
-            transition: all 0.3s ease;
-        }
-
-        .stage-item.pending {
-            opacity: 0.6;
-            border-color: var(--border-color);
-        }
-
-        .stage-item.in-progress {
-            border-color: var(--accent-color);
-            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
-        }
-
-        .stage-item.completed {
-            border-color: var(--success-color);
-            background-color: rgba(34, 197, 94, 0.05);
-        }
-
-        .stage-number {
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            margin-bottom: 5px;
-        }
-
-        .stage-mode {
-            font-size: 0.9rem;
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-
-        .stage-groups {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-        }
-
-        /* Active Groups List */
-        .active-groups-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 15px;
-            margin: 20px 0;
-        }
-
-        .active-group-card {
-            background-color: var(--bg-card);
-            border-radius: 8px;
-            padding: 15px;
-            border-left: 4px solid var(--accent-color);
-        }
-
-        .group-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .group-id {
-            font-weight: 600;
-            font-size: 0.95rem;
-        }
-
-        .group-status {
-            font-size: 0.75rem;
-            padding: 4px 8px;
-            border-radius: 12px;
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .group-name {
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-            margin-bottom: 8px;
-        }
-
-        .group-findings {
-            font-size: 0.85rem;
-            color: var(--text-primary);
-        }
-
-        /* Severity Summary Cards */
-        .severity-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-
-        .severity-card {
-            background-color: var(--bg-card);
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            transition: transform 0.2s;
-            text-align: center;
-            cursor: pointer;
-        }
-
-        .severity-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-lg);
-        }
-
-        .severity-icon {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-        }
-
-        .severity-value {
-            font-size: 2.5rem;
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-
-        .severity-card.critical .severity-value { color: var(--critical-color); }
-        .severity-card.high .severity-value { color: var(--high-color); }
-        .severity-card.medium .severity-value { color: var(--medium-color); }
-        .severity-card.low .severity-value { color: var(--low-color); }
-
-        .severity-label {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            font-weight: 500;
-            text-transform: uppercase;
-        }
-
-        /* Dimension Summary Table */
-        .dimension-summary-section {
-            background-color: var(--bg-card);
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            margin-bottom: 30px;
-        }
-
-        .dimension-summary-header {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .dimension-summary-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        .dimension-summary-table th {
-            text-align: left;
-            padding: 12px 16px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .dimension-summary-table th:not(:first-child) {
-            text-align: center;
-        }
-
-        .dimension-summary-table td {
-            padding: 16px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .dimension-summary-table td:not(:first-child) {
-            text-align: center;
-        }
-
-        .dimension-summary-table tr:last-child td {
-            border-bottom: none;
-        }
-
-        .dimension-summary-table tr:hover {
-            background-color: var(--bg-primary);
-        }
-
-        .dimension-name {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: 500;
-        }
-
-        .dimension-icon {
-            width: 28px;
-            height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 6px;
-            font-size: 0.9rem;
-        }
-
-        .dimension-icon.security { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; }
-        .dimension-icon.architecture { background-color: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
-        .dimension-icon.quality { background-color: rgba(34, 197, 94, 0.15); color: #22c55e; }
-        .dimension-icon.action-items { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; }
-        .dimension-icon.performance { background-color: rgba(234, 179, 8, 0.15); color: #eab308; }
-        .dimension-icon.maintainability { background-color: rgba(236, 72, 153, 0.15); color: #ec4899; }
-        .dimension-icon.best-practices { background-color: rgba(249, 115, 22, 0.15); color: #f97316; }
-
-        .count-badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 28px;
-            height: 28px;
-            padding: 0 8px;
-            border-radius: 14px;
-            font-size: 0.85rem;
-            font-weight: 600;
-        }
-
-        .count-badge.critical { background-color: rgba(197, 48, 48, 0.2); color: var(--critical-color); }
-        .count-badge.high { background-color: rgba(245, 101, 101, 0.2); color: var(--high-color); }
-        .count-badge.medium { background-color: rgba(237, 137, 54, 0.2); color: var(--medium-color); }
-        .count-badge.low { background-color: rgba(72, 187, 120, 0.2); color: var(--low-color); }
-        .count-badge.total { background-color: var(--bg-primary); color: var(--text-primary); font-weight: 700; }
-
-        .count-badge.zero {
-            background-color: transparent;
-            color: var(--text-secondary);
-            opacity: 0.5;
-        }
-
-        .status-indicator {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-        }
-
-        .status-indicator.reviewed {
-            background-color: var(--success-color);
-            color: white;
-        }
-
-        .status-indicator.pending {
-            background-color: var(--border-color);
-            color: var(--text-secondary);
-        }
-
-        .status-indicator.in-progress {
-            background-color: var(--accent-color);
-            color: white;
-            animation: pulse 2s infinite;
-        }
-
-        /* Progress Indicator */
-        .progress-section {
-            background-color: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            margin-bottom: 30px;
-        }
-
-        .progress-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-
-        .phase-badge {
-            padding: 6px 12px;
-            border-radius: 12px;
-            font-size: 0.85rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
-        .phase-parallel { background-color: #c6f6d5; color: #22543d; }
-        .phase-aggregate { background-color: #feebc8; color: #7c2d12; }
-        .phase-iterate { background-color: #bee3f8; color: #2c5282; }
-        .phase-complete { background-color: #d9f99d; color: #365314; }
-
-        [data-theme="dark"] .phase-parallel { background-color: #22543d; color: #c6f6d5; }
-        [data-theme="dark"] .phase-aggregate { background-color: #7c2d12; color: #feebc8; }
-        [data-theme="dark"] .phase-iterate { background-color: #2c5282; color: #bee3f8; }
-        [data-theme="dark"] .phase-complete { background-color: #365314; color: #d9f99d; }
-
-        .progress-bar {
-            width: 100%;
-            height: 12px;
-            background-color: var(--bg-primary);
-            border-radius: 6px;
-            overflow: hidden;
-            margin: 10px 0;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
-            transition: width 0.5s ease;
-        }
-
-        /* Dimension Tabs */
-        .dimension-tabs {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-bottom: 20px;
-            border-bottom: 2px solid var(--border-color);
-            padding-bottom: 10px;
-        }
-
-        .tab {
-            padding: 10px 20px;
-            border: none;
-            background: none;
-            cursor: pointer;
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: var(--text-secondary);
-            border-bottom: 3px solid transparent;
-            transition: all 0.2s;
-        }
-
-        .tab:hover {
-            color: var(--text-primary);
-            background-color: var(--bg-primary);
-            border-radius: 6px 6px 0 0;
-        }
-
-        .tab.active {
-            color: var(--accent-color);
-            border-bottom-color: var(--accent-color);
-        }
-
-        /* Findings List */
-        .findings-container {
-            background-color: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-        }
-
-        .findings-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .findings-list {
-            display: grid;
-            gap: 15px;
-        }
-
-        .finding-item {
-            background-color: var(--bg-primary);
-            padding: 20px;
-            border-radius: 8px;
-            border-left: 4px solid var(--border-color);
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .finding-item:hover {
-            transform: translateX(4px);
-            box-shadow: var(--shadow);
-        }
-
-        .finding-item.critical { border-left-color: var(--critical-color); }
-        .finding-item.high { border-left-color: var(--high-color); }
-        .finding-item.medium { border-left-color: var(--medium-color); }
-        .finding-item.low { border-left-color: var(--low-color); }
-
-        .finding-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            margin-bottom: 10px;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
-
-        .finding-badges {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-
-        .severity-badge {
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
-        .severity-badge.critical { background-color: var(--critical-color); color: white; }
-        .severity-badge.high { background-color: var(--high-color); color: white; }
-        .severity-badge.medium { background-color: var(--medium-color); color: white; }
-        .severity-badge.low { background-color: var(--low-color); color: white; }
-
-        .dimension-badge {
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .finding-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .finding-file {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            font-family: monospace;
-            margin-bottom: 10px;
-        }
-
-        .finding-description {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            line-height: 1.6;
-        }
-
-        /* Detail Drawer */
-        .drawer {
-            position: fixed;
-            top: 0;
-            right: -600px;
-            width: 600px;
-            height: 100vh;
-            background-color: var(--bg-secondary);
-            box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
-            transition: right 0.3s ease;
-            z-index: 1000;
-            overflow-y: auto;
-        }
-
-        .drawer.open {
-            right: 0;
-        }
-
-        .drawer-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            display: none;
-            z-index: 999;
-        }
-
-        .drawer-overlay.show {
-            display: block;
-        }
-
-        .drawer-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px;
-            border-bottom: 1px solid var(--border-color);
-            position: sticky;
-            top: 0;
-            background-color: var(--bg-secondary);
-            z-index: 10;
-        }
-
-        .drawer-title {
-            font-size: 1.3rem;
-            font-weight: 600;
-            flex: 1;
-        }
-
-        .close-btn {
-            background: none;
-            border: none;
-            font-size: 2rem;
-            cursor: pointer;
-            color: var(--text-secondary);
-            padding: 0;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            transition: all 0.2s;
-        }
-
-        .close-btn:hover {
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-        }
-
-        .drawer-content {
-            padding: 20px;
-        }
-
-        .drawer-section {
-            margin-bottom: 30px;
-        }
-
-        .drawer-section-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 15px;
-            color: var(--accent-color);
-        }
-
-        .code-snippet {
-            background-color: var(--bg-primary);
-            padding: 15px;
-            border-radius: 6px;
-            border-left: 3px solid var(--accent-color);
-            font-family: 'Courier New', monospace;
-            font-size: 0.85rem;
-            overflow-x: auto;
-            white-space: pre;
-            line-height: 1.5;
-        }
-
-        .recommendation-box {
-            background-color: var(--success-color);
-            background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
-            padding: 15px;
-            border-radius: 6px;
-            color: white;
-            margin-top: 10px;
-        }
-
-        .metadata-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-top: 15px;
-        }
-
-        .metadata-item {
-            background-color: var(--bg-primary);
-            padding: 12px;
-            border-radius: 6px;
-        }
-
-        .metadata-label {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-
-        .metadata-value {
-            font-size: 0.95rem;
-            color: var(--text-primary);
-        }
-
-        .reference-list {
-            list-style: none;
-            padding: 0;
-        }
-
-        .reference-list li {
-            padding: 8px 0;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .reference-list li:last-child {
-            border-bottom: none;
-        }
-
-        .reference-list a {
-            color: var(--accent-color);
-            text-decoration: none;
-        }
-
-        .reference-list a:hover {
-            text-decoration: underline;
-        }
-
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: var(--text-secondary);
-        }
-
-        .empty-state-icon {
-            font-size: 4rem;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-
-        /* Theme Toggle */
-        .theme-toggle {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background-color: var(--accent-color);
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 1.5rem;
-            box-shadow: var(--shadow-lg);
-            transition: all 0.3s;
-            z-index: 900;
-        }
-
-        .theme-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        /* Export Button */
-        .export-btn {
-            background-color: var(--success-color);
-            color: white;
-            border-color: var(--success-color);
-        }
-
-        .export-btn:hover {
-            background-color: #38a169;
-        }
-
-        /* Loading Indicator */
-        .loading-indicator {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: white;
-            animation: spin 1s ease-in-out infinite;
-        }
-
         @keyframes spin {
             to { transform: rotate(360deg); }
         }
 
-        /* Filter controls */
-        .filter-section {
-            background-color: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            margin-bottom: 20px;
+        .pulse { animation: pulse 2s ease-in-out infinite; }
+        .spin { animation: spin 1s linear infinite; }
+
+        /* History drawer */
+        .history-drawer {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+        }
+        .history-drawer.active {
+            transform: translateX(0);
         }
 
-        .filter-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
+        /* Detail drawer */
+        .drawer {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
         }
-
-        .filter-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .filter-controls {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            align-items: center;
-        }
-
-        .filter-group {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-
-        .filter-label {
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: var(--text-secondary);
-        }
-
-        .filter-checkbox-group {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-
-        .filter-checkbox-item {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            padding: 6px 12px;
-            border-radius: 6px;
-            background-color: var(--bg-primary);
-            cursor: pointer;
-            transition: all 0.2s;
-            border: 2px solid transparent;
-        }
-
-        .filter-checkbox-item:hover {
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .filter-checkbox-item.active {
-            background-color: var(--accent-color);
-            color: white;
-            border-color: var(--accent-color);
-        }
-
-        .filter-checkbox-item input[type="checkbox"] {
-            cursor: pointer;
-        }
-
-        .sort-order-btn {
-            padding: 8px 12px;
-            min-width: 100px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 5px;
-        }
-
-        .sort-order-btn .icon {
-            font-size: 1.2rem;
-        }
-
-        /* Responsive */
-        @media (max-width: 1024px) {
-            .drawer {
-                width: 100%;
-                right: -100%;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .severity-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            h1 {
-                font-size: 1.5rem;
-            }
-
-            .header-controls {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .search-box {
-                width: 100%;
-            }
-
-            .dimension-tabs {
-                overflow-x: auto;
-                flex-wrap: nowrap;
-            }
+        .drawer.open {
+            transform: translateX(0);
         }
     </style>
+
+        /* JavaScript-generated element styles */
+
+        /* Finding items */
+        .finding-item {
+            padding: 1rem;
+            background-color: hsl(var(--card));
+            border-left: 4px solid;
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .finding-item:hover {
+            box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
+        }
+        .finding-item.critical { border-left-color: #ef4444; background-color: #fef2f2; }
+        .finding-item.high { border-left-color: #f97316; background-color: #fff7ed; }
+        .finding-item.medium { border-left-color: #3b82f6; background-color: #eff6ff; }
+        .finding-item.low { border-left-color: #6b7280; background-color: #f9fafb; }
+        [data-theme="dark"] .finding-item.critical { background-color: rgba(127, 29, 29, 0.1); }
+        [data-theme="dark"] .finding-item.high { background-color: rgba(154, 52, 18, 0.1); }
+        [data-theme="dark"] .finding-item.medium { background-color: rgba(30, 58, 138, 0.1); }
+        [data-theme="dark"] .finding-item.low { background-color: rgba(55, 65, 81, 0.1); }
+
+        /* Severity badges */
+        .severity-badge {
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+            border-radius: 0.25rem;
+            text-transform: uppercase;
+        }
+        .severity-badge.critical { background-color: #fee2e2; color: #b91c1c; }
+        .severity-badge.high { background-color: #ffedd5; color: #c2410c; }
+        .severity-badge.medium { background-color: #dbeafe; color: #1e40af; }
+        .severity-badge.low { background-color: #f3f4f6; color: #374151; }
+        [data-theme="dark"] .severity-badge.critical { background-color: rgba(127, 29, 29, 0.3); color: #fca5a5; }
+        [data-theme="dark"] .severity-badge.high { background-color: rgba(154, 52, 18, 0.3); color: #fb923c; }
+        [data-theme="dark"] .severity-badge.medium { background-color: rgba(30, 58, 138, 0.3); color: #60a5fa; }
+        [data-theme="dark"] .severity-badge.low { background-color: rgba(55, 65, 81, 0.5); color: #9ca3af; }
+
+        /* Dimension badge */
+        .dimension-badge {
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+            border-radius: 0.25rem;
+            background-color: hsl(var(--muted));
+            color: hsl(var(--muted-foreground));
+        }
+
+        /* Finding details */
+        .finding-title { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }
+        .finding-file { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; }
+        .finding-description { font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.6; }
+        .finding-badges { display: flex; gap: 0.5rem; }
+        .finding-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; }
+        .finding-checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: hsl(var(--primary)); }
+
+        /* Drawer sections */
+        .drawer-section { margin-bottom: 1.5rem; }
+        .drawer-section:last-child { margin-bottom: 0; }
+        .drawer-section-title { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
+
+        /* Other dynamically generated elements */
+        .code-snippet { padding: 0.75rem; background-color: hsl(var(--muted)); border-radius: 0.375rem; font-size: 0.875rem; font-family: Consolas, Monaco, 'Courier New', monospace; overflow-x: auto; }
+        .recommendation-box { padding: 1rem; background-color: hsl(var(--success-light)); border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.6; }
+        .metadata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
+        .metadata-item { display: flex; flex-direction: column; gap: 0.25rem; }
+        .metadata-label { font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.05em; }
+        .metadata-value { font-size: 0.875rem; color: hsl(var(--foreground)); }
+        .reference-list { list-style: disc; padding-left: 1.25rem; }
+        .reference-list li { font-size: 0.875rem; color: hsl(var(--foreground)); margin-bottom: 0.25rem; }
+        .reference-list a { color: hsl(var(--primary)); text-decoration: none; }
+        .reference-list a:hover { text-decoration: underline; }
+
+        /* Fix status badges */
+        .fix-status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; }
+        .fix-status-badge.status-pending { background-color: transparent; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); }
+        .fix-status-badge.status-in-progress { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+        .fix-status-badge.status-fixed { background-color: hsl(var(--success)); color: white; }
+        .fix-status-badge.status-failed { background-color: hsl(var(--destructive)); color: white; }
+
+        /* Dimension table */
+        .dimension-name { display: flex; align-items: center; gap: 0.5rem; }
+        .dimension-icon { font-size: 1.125rem; }
+        .count-badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 0.25rem; }
+        .count-badge.critical { background-color: #fee2e2; color: #b91c1c; }
+        .count-badge.high { background-color: #ffedd5; color: #c2410c; }
+        .count-badge.medium { background-color: #dbeafe; color: #1e40af; }
+        .count-badge.low { background-color: #f3f4f6; color: #374151; }
+        .count-badge.total { background-color: rgba(59, 130, 246, 0.1); color: hsl(var(--primary)); font-weight: 700; }
+        .count-badge.zero { opacity: 0.5; }
+        [data-theme="dark"] .count-badge.critical { background-color: rgba(127, 29, 29, 0.3); color: #fca5a5; }
+        [data-theme="dark"] .count-badge.high { background-color: rgba(154, 52, 18, 0.3); color: #fb923c; }
+        [data-theme="dark"] .count-badge.medium { background-color: rgba(30, 58, 138, 0.3); color: #60a5fa; }
+        [data-theme="dark"] .count-badge.low { background-color: rgba(55, 65, 81, 0.5); color: #9ca3af; }
+        .status-indicator { display: inline-flex; align-items: center; justify-center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; font-size: 0.875rem; }
+        .status-indicator.reviewed { background-color: rgba(34, 197, 94, 0.2); color: hsl(var(--success)); }
+        .status-indicator.pending { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
+
+        /* Active group/agent cards */
+        .active-group-card { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; }
+        .group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
+        .group-id { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); }
+        .group-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px; background-color: rgba(59, 130, 246, 0.1); color: hsl(var(--primary)); font-weight: 500; }
+        .group-findings { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+        .group-active-items { margin-top: 0.5rem; padding: 0.5rem; background-color: rgba(59, 130, 246, 0.1); border-left: 4px solid hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.875rem; color: hsl(var(--foreground)); }
+        .active-agent-item { padding: 0.75rem; background-color: hsl(var(--muted)); border-radius: 0.5rem; margin-bottom: 0.5rem; }
+        .agent-status { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); }
+        .agent-status-badge { display: inline-block; padding: 0.125rem 0.5rem; margin-left: 0.5rem; font-size: 0.75rem; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 9999px; font-weight: 500; }
+        .agent-task { font-size: 0.875rem; color: hsl(var(--foreground)); margin-top: 0.25rem; }
+        .agent-file { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }
+
+        /* Flow control & stages */
+        .flow-control-container { margin-top: 0.75rem; padding: 0.625rem; background-color: rgba(139, 92, 246, 0.05); border-radius: 0.5rem; border: 1px solid rgba(139, 92, 246, 0.2); }
+        .flow-control-header { font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
+        .flow-steps { display: flex; flex-direction: column; gap: 0.375rem; }
+        .flow-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: 0.25rem; font-size: 0.875rem; transition: all 0.2s; }
+        .flow-step-completed { background-color: rgba(34, 197, 94, 0.1); color: #22c55e; }
+        .flow-step-in-progress { background-color: rgba(59, 130, 246, 0.1); color: hsl(var(--primary)); }
+        .flow-step-failed { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }
+        .flow-step-pending { background-color: rgba(156, 163, 175, 0.1); color: hsl(var(--muted-foreground)); }
+        .flow-step-icon { font-size: 1rem; }
+        .flow-step-name { font-weight: 500; }
+        .stage-item { flex: 1; min-width: 150px; padding: 0.75rem; background-color: hsl(var(--card)); border-radius: 0.375rem; border: 2px solid; text-align: center; transition: all 0.3s; }
+        .stage-item.pending { opacity: 0.6; border-color: hsl(var(--border)); }
+        .stage-item.in-progress { border-color: hsl(var(--primary)); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
+        .stage-item.completed { border-color: hsl(var(--success)); background-color: rgba(34, 197, 94, 0.05); }
+        .stage-number { font-size: 0.875rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: 0.25rem; }
+        .stage-mode { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
+        .stage-groups { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+
+        /* Phase & status badges */
+        .phase-badge { padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; text-transform: uppercase; }
+        .phase-badge.phase-planning { background-color: hsl(var(--warning)); color: white; }
+        .phase-badge.phase-execution { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+        .phase-badge.phase-completion { background-color: hsl(var(--success)); color: white; }
+        .phase-badge.phase-parallel { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
+        .phase-badge.phase-iterate { background-color: hsl(var(--warning)); color: white; }
+        .phase-badge.phase-aggregate { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
+        .phase-badge.phase-complete { background-color: hsl(var(--success)); color: white; }
+
+        /* History items */
+        .history-item { padding: 1rem; background-color: hsl(var(--muted)); border-radius: 0.5rem; margin-bottom: 1rem; border-left: 4px solid hsl(var(--primary)); }
+        .history-item.status-fixed { border-left-color: hsl(var(--success)); }
+        .history-item.status-failed { border-left-color: hsl(var(--destructive)); }
+        .history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
+        .history-status { font-weight: 600; color: hsl(var(--foreground)); }
+        .history-time { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
+        .history-details { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
+
+        /* Empty state */
+        .empty-state { text-center: center; padding: 3rem 0; }
+        .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; }
+
+        /* Tab active state */
+        .tab { padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; white-space: nowrap; transition: all 0.2s; border: 1px solid hsl(var(--border)); background-color: hsl(var(--card)); cursor: pointer; }
+        .tab:hover { background-color: hsl(var(--hover)); }
+        .tab.active { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
+
+        /* Drawer overlay states */
+        #drawerOverlay.show, #historyDrawerOverlay.active { display: block !important; }
 </head>
-<body>
-    <div class="container">
-        <header>
-            <h1>🔍 Code Review Dashboard</h1>
-            <div class="header-meta">
-                <span>📋 Session: <strong id="sessionId">Loading...</strong></span>
-                <span>🆔 Review ID: <strong id="reviewId">Loading...</strong></span>
-                <span>🕒 Last Updated: <strong id="lastUpdate">Loading...</strong></span>
+<body class="font-sans bg-background text-foreground leading-normal">
+    <div class="max-w-[1600px] mx-auto p-5">
+        <!-- Header -->
+        <header class="bg-card shadow rounded-lg p-5 mb-8">
+            <div class="flex items-center justify-between mb-4">
+                <h1 class="text-3xl font-bold text-primary flex items-center gap-2">
+                    <span>🔍</span>
+                    <span>Code Review Dashboard</span>
+                </h1>
+                <button class="p-2 text-xl hover:bg-hover rounded transition-colors" id="themeToggle" title="Toggle theme">🌙</button>
             </div>
 
-            <div class="header-controls">
-                <div class="search-box">
-                    <input type="text" id="searchInput" placeholder="🔍 Search findings..." />
+            <div class="flex gap-5 flex-wrap items-center text-sm text-muted-foreground mb-4">
+                <span>📋 Session: <strong class="text-foreground" id="sessionId">Loading...</strong></span>
+                <span>🆔 Review ID: <strong class="text-foreground" id="reviewId">Loading...</strong></span>
+                <span>🕒 Last Updated: <strong class="text-foreground" id="lastUpdate">Loading...</strong></span>
+            </div>
+
+            <div class="flex gap-4 flex-wrap items-center">
+                <div class="flex-1 min-w-[250px] relative">
+                    <input type="text" id="searchInput" placeholder="🔍 Search findings..."
+                        class="w-full px-4 py-2.5 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>
 
-                <div class="selection-controls">
-                    <span class="selection-counter" id="selectionCounter">0 findings selected</span>
-                    <button class="btn selection-btn" onclick="selectAll()">Select All</button>
-                    <button class="btn selection-btn" onclick="deselectAll()">Deselect All</button>
+                <div class="flex gap-2.5 items-center">
+                    <span class="text-sm text-muted-foreground font-medium" id="selectionCounter">0 findings selected</span>
+                    <button class="px-3 py-1.5 text-xs border border-border rounded-lg bg-card text-foreground hover:bg-hover transition-all" onclick="selectAll()">Select All</button>
+                    <button class="px-3 py-1.5 text-xs border border-border rounded-lg bg-card text-foreground hover:bg-hover transition-all" onclick="deselectAll()">Deselect All</button>
                 </div>
 
-                <button class="btn export-btn" onclick="exportToMarkdown()">📥 Export Report</button>
-                <button class="btn export-btn-fix" id="exportFixBtn" onclick="exportSelectedFindings()" disabled>🔧 Export Selected for Fixing</button>
+                <button class="px-5 py-2.5 border border-border rounded-lg bg-card text-foreground font-medium text-sm hover:bg-hover hover:shadow transition-all" onclick="exportToMarkdown()">📥 Export Report</button>
+                <button class="px-5 py-2.5 rounded-lg bg-success text-white font-medium text-sm hover:bg-success/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed" id="exportFixBtn" onclick="exportSelectedFindings()" disabled>🔧 Export Selected for Fixing</button>
             </div>
         </header>
 
         <!-- Fix Progress Section -->
-        <div class="fix-progress-section" id="fixProgressSection">
-            <div class="fix-progress-header">
-                <h3>Fix Progress</h3>
-                <span class="phase-badge" id="fixPhaseBadge">PLANNING</span>
-                <div style="display: flex; gap: 10px;">
-                    <button class="btn collapse-btn" onclick="toggleFixProgress()">Collapse</button>
-                    <button class="btn collapse-btn" onclick="openHistoryDrawer()">📜 View Fix History</button>
+        <div class="hidden bg-card rounded-lg shadow p-5 mb-5" id="fixProgressSection">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold text-foreground">Fix Progress</h3>
+                <div class="flex items-center gap-2.5">
+                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-primary text-primary-foreground uppercase" id="fixPhaseBadge">PLANNING</span>
+                    <button class="px-3 py-1.5 text-xs border border-border rounded-lg bg-card text-foreground hover:bg-hover transition-all" onclick="toggleFixProgress()">Collapse</button>
+                    <button class="px-3 py-1.5 text-xs border border-border rounded-lg bg-card text-foreground hover:bg-hover transition-all" onclick="openHistoryDrawer()">📜 View Fix History</button>
                 </div>
             </div>
 
             <!-- Planning Phase Indicator -->
-            <div id="planningPhase" style="display: none; text-align: center; padding: 20px;">
-                <div style="font-size: 2rem; margin-bottom: 10px;">🤖</div>
-                <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 5px;">Planning Fixes</div>
-                <div style="color: var(--text-secondary);">AI is analyzing findings and generating fix plan...</div>
+            <div id="planningPhase" class="hidden text-center py-5">
+                <div class="text-4xl mb-2.5">🤖</div>
+                <div class="text-lg font-semibold mb-1.5">Planning Fixes</div>
+                <div class="text-muted-foreground">AI is analyzing findings and generating fix plan...</div>
             </div>
 
-            <!-- Stage Timeline (visible in planning after plan generation) -->
-            <div class="stage-timeline" id="stageTimeline" style="display: none;">
+            <!-- Stage Timeline -->
+            <div id="stageTimeline" class="hidden flex gap-2.5 my-5 p-4 bg-muted rounded-lg overflow-x-auto">
                 <!-- Stages populated by JavaScript -->
             </div>
 
             <!-- Execution Phase UI -->
-            <div id="executionPhase" style="display: none;">
+            <div id="executionPhase" class="hidden">
                 <!-- Progress Bar -->
-                <div class="fix-progress-bar">
-                    <div class="fix-progress-bar-fill" id="fixProgressFill" style="width: 0%"></div>
+                <div class="h-2 bg-muted rounded overflow-hidden mb-4">
+                    <div class="h-full bg-success transition-all duration-300" id="fixProgressFill" style="width: 0%"></div>
                 </div>
-                <div style="text-align: center; font-size: 0.9rem; color: var(--text-secondary); margin-top: 10px;">
+                <div class="text-center text-sm text-muted-foreground mt-2.5">
                     <span id="fixProgressText">No active fix session</span>
                 </div>
 
                 <!-- Active Groups -->
-                <div class="active-groups-list" id="activeGroupsList">
+                <div id="activeGroupsList" class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 my-5">
                     <!-- Active groups populated by JavaScript -->
                 </div>
 
                 <!-- Active Agents -->
-                <div class="active-agents-list" id="activeAgentsList">
+                <div id="activeAgentsList" class="mt-4 border-t border-border pt-4">
                     <!-- Active agents populated by JavaScript -->
                 </div>
             </div>
         </div>
 
         <!-- Progress Section -->
-        <div class="progress-section">
-            <div class="progress-header">
-                <h3>Review Progress</h3>
-                <span class="phase-badge" id="phaseBadge">LOADING</span>
+        <div class="bg-card rounded-lg shadow p-5 mb-5">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold text-foreground">Review Progress</h3>
+                <span class="px-3 py-1 text-xs font-semibold rounded-full bg-primary text-primary-foreground uppercase" id="phaseBadge">LOADING</span>
             </div>
-            <div class="progress-bar">
-                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
+
+            <div class="h-2 bg-muted rounded overflow-hidden mb-4">
+                <div class="h-full bg-primary transition-all duration-300" id="progressFill" style="width: 0%"></div>
             </div>
-            <div style="text-align: center; font-size: 0.9rem; color: var(--text-secondary); margin-top: 10px;">
+
+            <div class="text-center text-sm text-muted-foreground">
                 <span id="progressText">Initializing...</span>
             </div>
         </div>
 
         <!-- Severity Summary Cards -->
-        <div class="severity-grid">
-            <div class="severity-card critical" data-severity="critical" onclick="filterBySeverity('critical')">
-                <div class="severity-icon">🔴</div>
-                <div class="severity-value" id="criticalCount">0</div>
-                <div class="severity-label">Critical</div>
+        <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 mb-5">
+            <div class="text-center p-5 bg-red-100 dark:bg-red-900/20 rounded-lg cursor-pointer hover:shadow-md transition-all" onclick="filterBySeverity('critical')">
+                <div class="text-3xl mb-2">🔴</div>
+                <div class="text-3xl font-bold text-red-700 dark:text-red-400" id="criticalCount">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Critical</div>
             </div>
-            <div class="severity-card high" data-severity="high" onclick="filterBySeverity('high')">
-                <div class="severity-icon">🟠</div>
-                <div class="severity-value" id="highCount">0</div>
-                <div class="severity-label">High</div>
+            <div class="text-center p-5 bg-orange-100 dark:bg-orange-900/20 rounded-lg cursor-pointer hover:shadow-md transition-all" onclick="filterBySeverity('high')">
+                <div class="text-3xl mb-2">🟠</div>
+                <div class="text-3xl font-bold text-orange-700 dark:text-orange-400" id="highCount">0</div>
+                <div class="text-sm text-muted-foreground mt-1">High</div>
             </div>
-            <div class="severity-card medium" data-severity="medium" onclick="filterBySeverity('medium')">
-                <div class="severity-icon">🟡</div>
-                <div class="severity-value" id="mediumCount">0</div>
-                <div class="severity-label">Medium</div>
+            <div class="text-center p-5 bg-blue-100 dark:bg-blue-900/20 rounded-lg cursor-pointer hover:shadow-md transition-all" onclick="filterBySeverity('medium')">
+                <div class="text-3xl mb-2">🟡</div>
+                <div class="text-3xl font-bold text-blue-700 dark:text-blue-400" id="mediumCount">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Medium</div>
             </div>
-            <div class="severity-card low" data-severity="low" onclick="filterBySeverity('low')">
-                <div class="severity-icon">🟢</div>
-                <div class="severity-value" id="lowCount">0</div>
-                <div class="severity-label">Low</div>
+            <div class="text-center p-5 bg-gray-100 dark:bg-gray-800/50 rounded-lg cursor-pointer hover:shadow-md transition-all" onclick="filterBySeverity('low')">
+                <div class="text-3xl mb-2">🟢</div>
+                <div class="text-3xl font-bold text-gray-700 dark:text-gray-400" id="lowCount">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Low</div>
             </div>
         </div>
 
         <!-- Dimension Summary Table -->
-        <div class="dimension-summary-section">
-            <div class="dimension-summary-header">Findings by Dimension</div>
-            <table class="dimension-summary-table">
-                <thead>
-                    <tr>
-                        <th>Dimension</th>
-                        <th>Critical</th>
-                        <th>High</th>
-                        <th>Medium</th>
-                        <th>Low</th>
-                        <th>Total</th>
-                        <th>Status</th>
-                    </tr>
-                </thead>
-                <tbody id="dimensionSummaryBody">
-                    <!-- Populated by JavaScript -->
-                </tbody>
-            </table>
+        <div class="bg-card rounded-lg shadow p-5 mb-5">
+            <div class="text-lg font-semibold text-foreground mb-4">Findings by Dimension</div>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="border-b border-border">
+                            <th class="text-left py-3 px-4 text-sm font-semibold text-foreground">Dimension</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">Critical</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">High</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">Medium</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">Low</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">Total</th>
+                            <th class="text-center py-3 px-4 text-sm font-semibold text-foreground">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody id="dimensionSummaryBody">
+                        <!-- Populated by JavaScript -->
+                    </tbody>
+                </table>
+            </div>
         </div>
 
         <!-- Dimension Tabs -->
-        <div class="dimension-tabs" id="dimensionTabs">
-            <button class="tab active" data-dimension="all" onclick="filterByDimension('all')">All Findings</button>
-            <button class="tab" data-dimension="security" onclick="filterByDimension('security')">Security</button>
-            <button class="tab" data-dimension="architecture" onclick="filterByDimension('architecture')">Architecture</button>
-            <button class="tab" data-dimension="quality" onclick="filterByDimension('quality')">Quality</button>
-            <button class="tab" data-dimension="action-items" onclick="filterByDimension('action-items')">Action Items</button>
-            <button class="tab" data-dimension="performance" onclick="filterByDimension('performance')">Performance</button>
-            <button class="tab" data-dimension="maintainability" onclick="filterByDimension('maintainability')">Maintainability</button>
-            <button class="tab" data-dimension="best-practices" onclick="filterByDimension('best-practices')">Best Practices</button>
+        <div class="flex gap-2 mb-5 overflow-x-auto pb-2">
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border bg-primary text-primary-foreground" data-dimension="all" onclick="filterByDimension('all')">All Findings</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="security" onclick="filterByDimension('security')">Security</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="architecture" onclick="filterByDimension('architecture')">Architecture</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="quality" onclick="filterByDimension('quality')">Quality</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="action-items" onclick="filterByDimension('action-items')">Action Items</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="performance" onclick="filterByDimension('performance')">Performance</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="maintainability" onclick="filterByDimension('maintainability')">Maintainability</button>
+            <button class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all border border-border hover:bg-hover" data-dimension="best-practices" onclick="filterByDimension('best-practices')">Best Practices</button>
         </div>
 
         <!-- Advanced Filters -->
-        <div class="filter-section">
-            <div class="filter-header">
-                <div class="filter-title">🎯 Advanced Filters & Sort</div>
-                <button class="btn" onclick="resetFilters()">Reset All Filters</button>
+        <div class="bg-card rounded-lg shadow p-5 mb-5">
+            <div class="flex justify-between items-center mb-4">
+                <div class="text-lg font-semibold text-foreground">🎯 Advanced Filters & Sort</div>
+                <button class="px-4 py-2 border border-border rounded-lg text-sm font-medium hover:bg-hover transition-all" onclick="resetFilters()">Reset All Filters</button>
             </div>
-            <div class="filter-controls">
+
+            <div class="space-y-4">
                 <!-- Severity Filter -->
-                <div class="filter-group">
-                    <span class="filter-label">Severity:</span>
-                    <div class="filter-checkbox-group">
-                        <label class="filter-checkbox-item" id="filter-critical">
-                            <input type="checkbox" value="critical" onchange="toggleSeverityFilter('critical')">
+                <div class="flex gap-2.5 flex-wrap items-center">
+                    <span class="text-sm font-medium text-muted-foreground min-w-[80px]">Severity:</span>
+                    <div class="flex gap-2.5 flex-wrap">
+                        <label class="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-muted cursor-pointer transition-all hover:bg-primary hover:text-white border-2 border-transparent has-[:checked]:bg-primary has-[:checked]:text-white" id="filter-critical">
+                            <input type="checkbox" value="critical" onchange="toggleSeverityFilter('critical')" class="cursor-pointer">
                             <span>🔴 Critical</span>
                         </label>
-                        <label class="filter-checkbox-item" id="filter-high">
-                            <input type="checkbox" value="high" onchange="toggleSeverityFilter('high')">
+                        <label class="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-muted cursor-pointer transition-all hover:bg-primary hover:text-white border-2 border-transparent has-[:checked]:bg-primary has-[:checked]:text-white" id="filter-high">
+                            <input type="checkbox" value="high" onchange="toggleSeverityFilter('high')" class="cursor-pointer">
                             <span>🟠 High</span>
                         </label>
-                        <label class="filter-checkbox-item" id="filter-medium">
-                            <input type="checkbox" value="medium" onchange="toggleSeverityFilter('medium')">
+                        <label class="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-muted cursor-pointer transition-all hover:bg-primary hover:text-white border-2 border-transparent has-[:checked]:bg-primary has-[:checked]:text-white" id="filter-medium">
+                            <input type="checkbox" value="medium" onchange="toggleSeverityFilter('medium')" class="cursor-pointer">
                             <span>🟡 Medium</span>
                         </label>
-                        <label class="filter-checkbox-item" id="filter-low">
-                            <input type="checkbox" value="low" onchange="toggleSeverityFilter('low')">
+                        <label class="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-muted cursor-pointer transition-all hover:bg-primary hover:text-white border-2 border-transparent has-[:checked]:bg-primary has-[:checked]:text-white" id="filter-low">
+                            <input type="checkbox" value="low" onchange="toggleSeverityFilter('low')" class="cursor-pointer">
                             <span>🟢 Low</span>
                         </label>
                     </div>
                 </div>
 
                 <!-- Sort Controls -->
-                <div class="filter-group">
-                    <span class="filter-label">Sort:</span>
-                    <select id="sortSelect" class="btn" onchange="sortFindings()">
+                <div class="flex gap-2.5 flex-wrap items-center">
+                    <span class="text-sm font-medium text-muted-foreground min-w-[80px]">Sort:</span>
+                    <select id="sortSelect" class="px-4 py-2 border border-border rounded-lg text-sm bg-card hover:bg-hover transition-all cursor-pointer" onchange="sortFindings()">
                         <option value="severity">By Severity</option>
                         <option value="dimension">By Dimension</option>
                         <option value="file">By File</option>
                         <option value="title">By Title</option>
                     </select>
-                    <button class="btn sort-order-btn" id="sortOrderBtn" onclick="toggleSortOrder()">
-                        <span class="icon" id="sortOrderIcon">↓</span>
+                    <button class="flex items-center gap-2 px-4 py-2 border border-border rounded-lg text-sm hover:bg-hover transition-all min-w-[140px] justify-center" id="sortOrderBtn" onclick="toggleSortOrder()">
+                        <span class="text-lg" id="sortOrderIcon">↓</span>
                         <span id="sortOrderText">Descending</span>
                     </button>
                 </div>
 
                 <!-- Selection Actions -->
-                <div class="filter-group">
-                    <span class="filter-label">Select:</span>
-                    <button class="btn selection-btn" onclick="selectAllVisible()">Select Visible</button>
-                    <button class="btn selection-btn" onclick="selectBySeverity('critical')">Critical Only</button>
-                    <button class="btn selection-btn" onclick="deselectAll()">Clear</button>
+                <div class="flex gap-2.5 flex-wrap items-center">
+                    <span class="text-sm font-medium text-muted-foreground min-w-[80px]">Select:</span>
+                    <button class="px-3 py-2 border border-border rounded-lg text-sm hover:bg-hover transition-all" onclick="selectAllVisible()">Select Visible</button>
+                    <button class="px-3 py-2 border border-border rounded-lg text-sm hover:bg-hover transition-all" onclick="selectBySeverity('critical')">Critical Only</button>
+                    <button class="px-3 py-2 border border-border rounded-lg text-sm hover:bg-hover transition-all" onclick="deselectAll()">Clear</button>
                 </div>
             </div>
         </div>
 
         <!-- Findings Container -->
-        <div class="findings-container">
-            <div class="findings-header">
-                <h3>Findings <span id="findingsCount">(0)</span></h3>
+        <div class="bg-card rounded-lg shadow p-5">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-foreground">Findings <span id="findingsCount">(0)</span></h3>
             </div>
-            <div class="findings-list" id="findingsList">
-                <div class="empty-state">
-                    <div class="empty-state-icon">⏳</div>
-                    <p>Loading findings...</p>
+            <div id="findingsList" class="space-y-3">
+                <div class="text-center py-12">
+                    <div class="text-6xl mb-4">⏳</div>
+                    <p class="text-lg text-muted-foreground">Loading findings...</p>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Detail Drawer -->
-    <div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
-    <div class="drawer" id="findingDrawer">
-        <div class="drawer-header">
-            <div class="drawer-title" id="drawerTitle">Finding Details</div>
-            <button class="close-btn" onclick="closeDrawer()">×</button>
+    <div class="fixed inset-0 bg-black/50 z-40 hidden" id="drawerOverlay" onclick="closeDrawer()"></div>
+    <div class="drawer fixed top-0 right-0 w-[600px] max-w-full h-screen bg-card shadow-lg z-50 flex flex-col" id="findingDrawer">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-border">
+            <h3 class="text-lg font-semibold text-foreground" id="drawerTitle">Finding Details</h3>
+            <button class="w-8 h-8 flex items-center justify-center text-xl text-muted-foreground hover:text-foreground hover:bg-hover rounded transition-colors" onclick="closeDrawer()">&times;</button>
         </div>
-        <div class="drawer-content" id="drawerContent">
+        <div class="flex-1 overflow-y-auto p-5" id="drawerContent">
             <!-- Content populated by JavaScript -->
         </div>
     </div>
 
     <!-- History Timeline Drawer -->
-    <div class="drawer-overlay" id="historyDrawerOverlay" onclick="closeHistoryDrawer()"></div>
-    <div class="history-drawer" id="historyDrawer">
-        <div class="drawer-header">
-            <div class="drawer-title">📜 Fix History</div>
-            <button class="close-btn" onclick="closeHistoryDrawer()">×</button>
+    <div class="fixed inset-0 bg-black/50 z-40 hidden" id="historyDrawerOverlay" onclick="closeHistoryDrawer()"></div>
+    <div class="history-drawer fixed top-0 right-0 w-[600px] max-w-full h-screen bg-card shadow-lg z-50 overflow-y-auto" id="historyDrawer">
+        <div class="sticky top-0 bg-card border-b border-border p-5 flex justify-between items-center z-10">
+            <h3 class="text-xl font-semibold text-foreground">📜 Fix History</h3>
+            <button class="w-8 h-8 flex items-center justify-center text-xl text-muted-foreground hover:text-foreground hover:bg-hover rounded transition-colors" onclick="closeHistoryDrawer()">&times;</button>
         </div>
-        <div class="history-timeline" id="historyTimeline">
+        <div class="p-5" id="historyTimeline">
             <!-- History items populated by JavaScript -->
         </div>
     </div>
 
-    <button class="theme-toggle" id="themeToggle">🌙</button>
-
     <script>
+
         // State
         let allFindings = [];
         let filteredFindings = [];
@@ -2811,6 +1924,7 @@
 
             document.getElementById('themeToggle').addEventListener('click', toggleTheme);
         });
+    
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/ccw/src/templates/review-cycle-dashboard.html.backup b/ccw/src/templates/review-cycle-dashboard.html.backup
new file mode 100644
index 00000000..b308a748
--- /dev/null
+++ b/ccw/src/templates/review-cycle-dashboard.html.backup
@@ -0,0 +1,2816 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Review Dashboard - {{SESSION_ID}}</title>
+    <style>
+        :root {
+            --bg-primary: #f5f7fa;
+            --bg-secondary: #ffffff;
+            --bg-card: #ffffff;
+            --text-primary: #1a202c;
+            --text-secondary: #718096;
+            --border-color: #e2e8f0;
+            --accent-color: #4299e1;
+            --success-color: #48bb78;
+            --warning-color: #ed8936;
+            --danger-color: #f56565;
+            --critical-color: #c53030;
+            --high-color: #f56565;
+            --medium-color: #ed8936;
+            --low-color: #48bb78;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        [data-theme="dark"] {
+            --bg-primary: #1a202c;
+            --bg-secondary: #2d3748;
+            --bg-card: #2d3748;
+            --text-primary: #f7fafc;
+            --text-secondary: #a0aec0;
+            --border-color: #4a5568;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .container {
+            max-width: 1600px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            background-color: var(--bg-secondary);
+            box-shadow: var(--shadow);
+            padding: 20px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: var(--accent-color);
+        }
+
+        .header-meta {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-top: 15px;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 250px;
+            position: relative;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            background-color: var(--bg-card);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow);
+        }
+
+        .btn.active {
+            background-color: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        .export-btn-fix {
+            background-color: var(--success-color);
+            color: white;
+            border-color: var(--success-color);
+        }
+
+        .export-btn-fix:hover {
+            background-color: #38a169;
+        }
+
+        .export-btn-fix:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        /* Selection Controls */
+        .selection-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            font-size: 0.9rem;
+        }
+
+        .selection-counter {
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+
+        .selection-btn {
+            padding: 6px 12px;
+            font-size: 0.85rem;
+        }
+
+        /* Checkbox Styles */
+        .finding-checkbox {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            accent-color: var(--accent-color);
+        }
+
+        /* Fix Status Badges */
+        .fix-status-badge {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            margin-top: 8px;
+        }
+
+        .fix-status-badge.status-pending {
+            background-color: transparent;
+            color: var(--text-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .fix-status-badge.status-in-progress {
+            background-color: var(--accent-color);
+            color: white;
+            animation: pulse 2s infinite;
+        }
+
+        .fix-status-badge.status-fixed {
+            background-color: var(--success-color);
+            color: white;
+        }
+
+        .fix-status-badge.status-failed {
+            background-color: var(--danger-color);
+            color: white;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        /* Fix Progress Section */
+        .fix-progress-section {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            margin-bottom: 20px;
+            display: none; /* Hidden by default */
+        }
+
+        .fix-progress-section.active {
+            display: block;
+        }
+
+        .fix-progress-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .fix-progress-bar {
+            height: 8px;
+            background-color: var(--bg-primary);
+            border-radius: 4px;
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+
+        .fix-progress-bar-fill {
+            height: 100%;
+            background-color: var(--success-color);
+            transition: width 0.3s;
+        }
+
+        .active-agents-list {
+            margin-top: 15px;
+            border-top: 1px solid var(--border-color);
+            padding-top: 15px;
+        }
+
+        .active-agent-item {
+            padding: 10px;
+            background-color: var(--bg-primary);
+            border-radius: 6px;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+        }
+
+        .active-agent-item .agent-task {
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            margin-top: 4px;
+        }
+
+        .active-agent-item .agent-file {
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            margin-top: 4px;
+        }
+
+        .agent-status-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            margin-left: 8px;
+            font-size: 0.75rem;
+            background-color: var(--accent-color);
+            color: white;
+            border-radius: 10px;
+            font-weight: 500;
+        }
+
+        .group-active-items {
+            margin-top: 8px;
+            padding: 6px 8px;
+            background-color: rgba(59, 130, 246, 0.1);
+            border-left: 3px solid var(--accent-color);
+            border-radius: 4px;
+            font-size: 0.85rem;
+            color: var(--text-primary);
+            word-wrap: break-word;
+        }
+
+        /* Flow Control Steps */
+        .flow-control-container {
+            margin-top: 12px;
+            padding: 10px;
+            background-color: rgba(139, 92, 246, 0.05);
+            border-radius: 6px;
+            border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+
+        .flow-control-header {
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .flow-steps {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .flow-step {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 10px;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            transition: all 0.2s;
+        }
+
+        .flow-step-completed {
+            background-color: rgba(34, 197, 94, 0.1);
+            color: #22c55e;
+        }
+
+        .flow-step-in-progress {
+            background-color: rgba(59, 130, 246, 0.1);
+            color: var(--accent-color);
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        .flow-step-failed {
+            background-color: rgba(239, 68, 68, 0.1);
+            color: #ef4444;
+        }
+
+        .flow-step-pending {
+            background-color: rgba(156, 163, 175, 0.1);
+            color: var(--text-secondary);
+        }
+
+        .flow-step-icon {
+            font-size: 1rem;
+        }
+
+        .flow-step-name {
+            font-weight: 500;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+
+        .collapse-btn {
+            padding: 6px 12px;
+            font-size: 0.85rem;
+            cursor: pointer;
+        }
+
+        /* History Timeline */
+        .history-drawer {
+            position: fixed;
+            right: -600px;
+            top: 0;
+            width: 600px;
+            height: 100vh;
+            background-color: var(--bg-secondary);
+            box-shadow: var(--shadow-lg);
+            transition: right 0.3s;
+            z-index: 1001;
+            overflow-y: auto;
+        }
+
+        .history-drawer.active {
+            right: 0;
+        }
+
+        .history-timeline {
+            padding: 20px;
+        }
+
+        .history-item {
+            padding: 15px;
+            background-color: var(--bg-card);
+            border-radius: 6px;
+            margin-bottom: 15px;
+            border-left: 4px solid var(--accent-color);
+        }
+
+        .history-item.status-fixed {
+            border-left-color: var(--success-color);
+        }
+
+        .history-item.status-failed {
+            border-left-color: var(--danger-color);
+        }
+
+        .history-item-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .history-item-title {
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .history-item-timestamp {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+
+        .history-item-meta {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-top: 8px;
+        }
+
+        .history-item-tests {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: var(--bg-primary);
+            border-radius: 4px;
+            font-size: 0.85rem;
+        }
+
+        /* Stage Timeline */
+        .stage-timeline {
+            display: flex;
+            gap: 10px;
+            margin: 20px 0;
+            padding: 15px;
+            background-color: var(--bg-secondary);
+            border-radius: 8px;
+            overflow-x: auto;
+        }
+
+        .stage-item {
+            flex: 1;
+            min-width: 150px;
+            padding: 12px;
+            background-color: var(--bg-card);
+            border-radius: 6px;
+            border: 2px solid var(--border-color);
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .stage-item.pending {
+            opacity: 0.6;
+            border-color: var(--border-color);
+        }
+
+        .stage-item.in-progress {
+            border-color: var(--accent-color);
+            box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
+        }
+
+        .stage-item.completed {
+            border-color: var(--success-color);
+            background-color: rgba(34, 197, 94, 0.05);
+        }
+
+        .stage-number {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            margin-bottom: 5px;
+        }
+
+        .stage-mode {
+            font-size: 0.9rem;
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+
+        .stage-groups {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        /* Active Groups List */
+        .active-groups-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+
+        .active-group-card {
+            background-color: var(--bg-card);
+            border-radius: 8px;
+            padding: 15px;
+            border-left: 4px solid var(--accent-color);
+        }
+
+        .group-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .group-id {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .group-status {
+            font-size: 0.75rem;
+            padding: 4px 8px;
+            border-radius: 12px;
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .group-name {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+        }
+
+        .group-findings {
+            font-size: 0.85rem;
+            color: var(--text-primary);
+        }
+
+        /* Severity Summary Cards */
+        .severity-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .severity-card {
+            background-color: var(--bg-card);
+            padding: 25px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            transition: transform 0.2s;
+            text-align: center;
+            cursor: pointer;
+        }
+
+        .severity-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .severity-icon {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+
+        .severity-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+
+        .severity-card.critical .severity-value { color: var(--critical-color); }
+        .severity-card.high .severity-value { color: var(--high-color); }
+        .severity-card.medium .severity-value { color: var(--medium-color); }
+        .severity-card.low .severity-value { color: var(--low-color); }
+
+        .severity-label {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-transform: uppercase;
+        }
+
+        /* Dimension Summary Table */
+        .dimension-summary-section {
+            background-color: var(--bg-card);
+            padding: 25px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            margin-bottom: 30px;
+        }
+
+        .dimension-summary-header {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .dimension-summary-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .dimension-summary-table th {
+            text-align: left;
+            padding: 12px 16px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .dimension-summary-table th:not(:first-child) {
+            text-align: center;
+        }
+
+        .dimension-summary-table td {
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .dimension-summary-table td:not(:first-child) {
+            text-align: center;
+        }
+
+        .dimension-summary-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .dimension-summary-table tr:hover {
+            background-color: var(--bg-primary);
+        }
+
+        .dimension-name {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 500;
+        }
+
+        .dimension-icon {
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+            font-size: 0.9rem;
+        }
+
+        .dimension-icon.security { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; }
+        .dimension-icon.architecture { background-color: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
+        .dimension-icon.quality { background-color: rgba(34, 197, 94, 0.15); color: #22c55e; }
+        .dimension-icon.action-items { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+        .dimension-icon.performance { background-color: rgba(234, 179, 8, 0.15); color: #eab308; }
+        .dimension-icon.maintainability { background-color: rgba(236, 72, 153, 0.15); color: #ec4899; }
+        .dimension-icon.best-practices { background-color: rgba(249, 115, 22, 0.15); color: #f97316; }
+
+        .count-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 28px;
+            height: 28px;
+            padding: 0 8px;
+            border-radius: 14px;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+
+        .count-badge.critical { background-color: rgba(197, 48, 48, 0.2); color: var(--critical-color); }
+        .count-badge.high { background-color: rgba(245, 101, 101, 0.2); color: var(--high-color); }
+        .count-badge.medium { background-color: rgba(237, 137, 54, 0.2); color: var(--medium-color); }
+        .count-badge.low { background-color: rgba(72, 187, 120, 0.2); color: var(--low-color); }
+        .count-badge.total { background-color: var(--bg-primary); color: var(--text-primary); font-weight: 700; }
+
+        .count-badge.zero {
+            background-color: transparent;
+            color: var(--text-secondary);
+            opacity: 0.5;
+        }
+
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+        }
+
+        .status-indicator.reviewed {
+            background-color: var(--success-color);
+            color: white;
+        }
+
+        .status-indicator.pending {
+            background-color: var(--border-color);
+            color: var(--text-secondary);
+        }
+
+        .status-indicator.in-progress {
+            background-color: var(--accent-color);
+            color: white;
+            animation: pulse 2s infinite;
+        }
+
+        /* Progress Indicator */
+        .progress-section {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            margin-bottom: 30px;
+        }
+
+        .progress-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .phase-badge {
+            padding: 6px 12px;
+            border-radius: 12px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .phase-parallel { background-color: #c6f6d5; color: #22543d; }
+        .phase-aggregate { background-color: #feebc8; color: #7c2d12; }
+        .phase-iterate { background-color: #bee3f8; color: #2c5282; }
+        .phase-complete { background-color: #d9f99d; color: #365314; }
+
+        [data-theme="dark"] .phase-parallel { background-color: #22543d; color: #c6f6d5; }
+        [data-theme="dark"] .phase-aggregate { background-color: #7c2d12; color: #feebc8; }
+        [data-theme="dark"] .phase-iterate { background-color: #2c5282; color: #bee3f8; }
+        [data-theme="dark"] .phase-complete { background-color: #365314; color: #d9f99d; }
+
+        .progress-bar {
+            width: 100%;
+            height: 12px;
+            background-color: var(--bg-primary);
+            border-radius: 6px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+            transition: width 0.5s ease;
+        }
+
+        /* Dimension Tabs */
+        .dimension-tabs {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 10px;
+        }
+
+        .tab {
+            padding: 10px 20px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+            border-bottom: 3px solid transparent;
+            transition: all 0.2s;
+        }
+
+        .tab:hover {
+            color: var(--text-primary);
+            background-color: var(--bg-primary);
+            border-radius: 6px 6px 0 0;
+        }
+
+        .tab.active {
+            color: var(--accent-color);
+            border-bottom-color: var(--accent-color);
+        }
+
+        /* Findings List */
+        .findings-container {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+        }
+
+        .findings-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .findings-list {
+            display: grid;
+            gap: 15px;
+        }
+
+        .finding-item {
+            background-color: var(--bg-primary);
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 4px solid var(--border-color);
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .finding-item:hover {
+            transform: translateX(4px);
+            box-shadow: var(--shadow);
+        }
+
+        .finding-item.critical { border-left-color: var(--critical-color); }
+        .finding-item.high { border-left-color: var(--high-color); }
+        .finding-item.medium { border-left-color: var(--medium-color); }
+        .finding-item.low { border-left-color: var(--low-color); }
+
+        .finding-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 10px;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .finding-badges {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        .severity-badge {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .severity-badge.critical { background-color: var(--critical-color); color: white; }
+        .severity-badge.high { background-color: var(--high-color); color: white; }
+        .severity-badge.medium { background-color: var(--medium-color); color: white; }
+        .severity-badge.low { background-color: var(--low-color); color: white; }
+
+        .dimension-badge {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .finding-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .finding-file {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            font-family: monospace;
+            margin-bottom: 10px;
+        }
+
+        .finding-description {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+
+        /* Detail Drawer */
+        .drawer {
+            position: fixed;
+            top: 0;
+            right: -600px;
+            width: 600px;
+            height: 100vh;
+            background-color: var(--bg-secondary);
+            box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
+            transition: right 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+        }
+
+        .drawer.open {
+            right: 0;
+        }
+
+        .drawer-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: none;
+            z-index: 999;
+        }
+
+        .drawer-overlay.show {
+            display: block;
+        }
+
+        .drawer-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            border-bottom: 1px solid var(--border-color);
+            position: sticky;
+            top: 0;
+            background-color: var(--bg-secondary);
+            z-index: 10;
+        }
+
+        .drawer-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            flex: 1;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 2rem;
+            cursor: pointer;
+            color: var(--text-secondary);
+            padding: 0;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.2s;
+        }
+
+        .close-btn:hover {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+
+        .drawer-content {
+            padding: 20px;
+        }
+
+        .drawer-section {
+            margin-bottom: 30px;
+        }
+
+        .drawer-section-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--accent-color);
+        }
+
+        .code-snippet {
+            background-color: var(--bg-primary);
+            padding: 15px;
+            border-radius: 6px;
+            border-left: 3px solid var(--accent-color);
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            overflow-x: auto;
+            white-space: pre;
+            line-height: 1.5;
+        }
+
+        .recommendation-box {
+            background-color: var(--success-color);
+            background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+            padding: 15px;
+            border-radius: 6px;
+            color: white;
+            margin-top: 10px;
+        }
+
+        .metadata-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+
+        .metadata-item {
+            background-color: var(--bg-primary);
+            padding: 12px;
+            border-radius: 6px;
+        }
+
+        .metadata-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            font-weight: 600;
+            margin-bottom: 5px;
+        }
+
+        .metadata-value {
+            font-size: 0.95rem;
+            color: var(--text-primary);
+        }
+
+        .reference-list {
+            list-style: none;
+            padding: 0;
+        }
+
+        .reference-list li {
+            padding: 8px 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .reference-list li:last-child {
+            border-bottom: none;
+        }
+
+        .reference-list a {
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+
+        .reference-list a:hover {
+            text-decoration: underline;
+        }
+
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        /* Theme Toggle */
+        .theme-toggle {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            box-shadow: var(--shadow-lg);
+            transition: all 0.3s;
+            z-index: 900;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        /* Export Button */
+        .export-btn {
+            background-color: var(--success-color);
+            color: white;
+            border-color: var(--success-color);
+        }
+
+        .export-btn:hover {
+            background-color: #38a169;
+        }
+
+        /* Loading Indicator */
+        .loading-indicator {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Filter controls */
+        .filter-section {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            margin-bottom: 20px;
+        }
+
+        .filter-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .filter-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .filter-controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .filter-group {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .filter-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-secondary);
+        }
+
+        .filter-checkbox-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .filter-checkbox-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            padding: 6px 12px;
+            border-radius: 6px;
+            background-color: var(--bg-primary);
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 2px solid transparent;
+        }
+
+        .filter-checkbox-item:hover {
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .filter-checkbox-item.active {
+            background-color: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        .filter-checkbox-item input[type="checkbox"] {
+            cursor: pointer;
+        }
+
+        .sort-order-btn {
+            padding: 8px 12px;
+            min-width: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 5px;
+        }
+
+        .sort-order-btn .icon {
+            font-size: 1.2rem;
+        }
+
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .drawer {
+                width: 100%;
+                right: -100%;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .severity-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .header-controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .search-box {
+                width: 100%;
+            }
+
+            .dimension-tabs {
+                overflow-x: auto;
+                flex-wrap: nowrap;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🔍 Code Review Dashboard</h1>
+            <div class="header-meta">
+                <span>📋 Session: <strong id="sessionId">Loading...</strong></span>
+                <span>🆔 Review ID: <strong id="reviewId">Loading...</strong></span>
+                <span>🕒 Last Updated: <strong id="lastUpdate">Loading...</strong></span>
+            </div>
+
+            <div class="header-controls">
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="🔍 Search findings..." />
+                </div>
+
+                <div class="selection-controls">
+                    <span class="selection-counter" id="selectionCounter">0 findings selected</span>
+                    <button class="btn selection-btn" onclick="selectAll()">Select All</button>
+                    <button class="btn selection-btn" onclick="deselectAll()">Deselect All</button>
+                </div>
+
+                <button class="btn export-btn" onclick="exportToMarkdown()">📥 Export Report</button>
+                <button class="btn export-btn-fix" id="exportFixBtn" onclick="exportSelectedFindings()" disabled>🔧 Export Selected for Fixing</button>
+            </div>
+        </header>
+
+        <!-- Fix Progress Section -->
+        <div class="fix-progress-section" id="fixProgressSection">
+            <div class="fix-progress-header">
+                <h3>Fix Progress</h3>
+                <span class="phase-badge" id="fixPhaseBadge">PLANNING</span>
+                <div style="display: flex; gap: 10px;">
+                    <button class="btn collapse-btn" onclick="toggleFixProgress()">Collapse</button>
+                    <button class="btn collapse-btn" onclick="openHistoryDrawer()">📜 View Fix History</button>
+                </div>
+            </div>
+
+            <!-- Planning Phase Indicator -->
+            <div id="planningPhase" style="display: none; text-align: center; padding: 20px;">
+                <div style="font-size: 2rem; margin-bottom: 10px;">🤖</div>
+                <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 5px;">Planning Fixes</div>
+                <div style="color: var(--text-secondary);">AI is analyzing findings and generating fix plan...</div>
+            </div>
+
+            <!-- Stage Timeline (visible in planning after plan generation) -->
+            <div class="stage-timeline" id="stageTimeline" style="display: none;">
+                <!-- Stages populated by JavaScript -->
+            </div>
+
+            <!-- Execution Phase UI -->
+            <div id="executionPhase" style="display: none;">
+                <!-- Progress Bar -->
+                <div class="fix-progress-bar">
+                    <div class="fix-progress-bar-fill" id="fixProgressFill" style="width: 0%"></div>
+                </div>
+                <div style="text-align: center; font-size: 0.9rem; color: var(--text-secondary); margin-top: 10px;">
+                    <span id="fixProgressText">No active fix session</span>
+                </div>
+
+                <!-- Active Groups -->
+                <div class="active-groups-list" id="activeGroupsList">
+                    <!-- Active groups populated by JavaScript -->
+                </div>
+
+                <!-- Active Agents -->
+                <div class="active-agents-list" id="activeAgentsList">
+                    <!-- Active agents populated by JavaScript -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Progress Section -->
+        <div class="progress-section">
+            <div class="progress-header">
+                <h3>Review Progress</h3>
+                <span class="phase-badge" id="phaseBadge">LOADING</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
+            </div>
+            <div style="text-align: center; font-size: 0.9rem; color: var(--text-secondary); margin-top: 10px;">
+                <span id="progressText">Initializing...</span>
+            </div>
+        </div>
+
+        <!-- Severity Summary Cards -->
+        <div class="severity-grid">
+            <div class="severity-card critical" data-severity="critical" onclick="filterBySeverity('critical')">
+                <div class="severity-icon">🔴</div>
+                <div class="severity-value" id="criticalCount">0</div>
+                <div class="severity-label">Critical</div>
+            </div>
+            <div class="severity-card high" data-severity="high" onclick="filterBySeverity('high')">
+                <div class="severity-icon">🟠</div>
+                <div class="severity-value" id="highCount">0</div>
+                <div class="severity-label">High</div>
+            </div>
+            <div class="severity-card medium" data-severity="medium" onclick="filterBySeverity('medium')">
+                <div class="severity-icon">🟡</div>
+                <div class="severity-value" id="mediumCount">0</div>
+                <div class="severity-label">Medium</div>
+            </div>
+            <div class="severity-card low" data-severity="low" onclick="filterBySeverity('low')">
+                <div class="severity-icon">🟢</div>
+                <div class="severity-value" id="lowCount">0</div>
+                <div class="severity-label">Low</div>
+            </div>
+        </div>
+
+        <!-- Dimension Summary Table -->
+        <div class="dimension-summary-section">
+            <div class="dimension-summary-header">Findings by Dimension</div>
+            <table class="dimension-summary-table">
+                <thead>
+                    <tr>
+                        <th>Dimension</th>
+                        <th>Critical</th>
+                        <th>High</th>
+                        <th>Medium</th>
+                        <th>Low</th>
+                        <th>Total</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody id="dimensionSummaryBody">
+                    <!-- Populated by JavaScript -->
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Dimension Tabs -->
+        <div class="dimension-tabs" id="dimensionTabs">
+            <button class="tab active" data-dimension="all" onclick="filterByDimension('all')">All Findings</button>
+            <button class="tab" data-dimension="security" onclick="filterByDimension('security')">Security</button>
+            <button class="tab" data-dimension="architecture" onclick="filterByDimension('architecture')">Architecture</button>
+            <button class="tab" data-dimension="quality" onclick="filterByDimension('quality')">Quality</button>
+            <button class="tab" data-dimension="action-items" onclick="filterByDimension('action-items')">Action Items</button>
+            <button class="tab" data-dimension="performance" onclick="filterByDimension('performance')">Performance</button>
+            <button class="tab" data-dimension="maintainability" onclick="filterByDimension('maintainability')">Maintainability</button>
+            <button class="tab" data-dimension="best-practices" onclick="filterByDimension('best-practices')">Best Practices</button>
+        </div>
+
+        <!-- Advanced Filters -->
+        <div class="filter-section">
+            <div class="filter-header">
+                <div class="filter-title">🎯 Advanced Filters & Sort</div>
+                <button class="btn" onclick="resetFilters()">Reset All Filters</button>
+            </div>
+            <div class="filter-controls">
+                <!-- Severity Filter -->
+                <div class="filter-group">
+                    <span class="filter-label">Severity:</span>
+                    <div class="filter-checkbox-group">
+                        <label class="filter-checkbox-item" id="filter-critical">
+                            <input type="checkbox" value="critical" onchange="toggleSeverityFilter('critical')">
+                            <span>🔴 Critical</span>
+                        </label>
+                        <label class="filter-checkbox-item" id="filter-high">
+                            <input type="checkbox" value="high" onchange="toggleSeverityFilter('high')">
+                            <span>🟠 High</span>
+                        </label>
+                        <label class="filter-checkbox-item" id="filter-medium">
+                            <input type="checkbox" value="medium" onchange="toggleSeverityFilter('medium')">
+                            <span>🟡 Medium</span>
+                        </label>
+                        <label class="filter-checkbox-item" id="filter-low">
+                            <input type="checkbox" value="low" onchange="toggleSeverityFilter('low')">
+                            <span>🟢 Low</span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Sort Controls -->
+                <div class="filter-group">
+                    <span class="filter-label">Sort:</span>
+                    <select id="sortSelect" class="btn" onchange="sortFindings()">
+                        <option value="severity">By Severity</option>
+                        <option value="dimension">By Dimension</option>
+                        <option value="file">By File</option>
+                        <option value="title">By Title</option>
+                    </select>
+                    <button class="btn sort-order-btn" id="sortOrderBtn" onclick="toggleSortOrder()">
+                        <span class="icon" id="sortOrderIcon">↓</span>
+                        <span id="sortOrderText">Descending</span>
+                    </button>
+                </div>
+
+                <!-- Selection Actions -->
+                <div class="filter-group">
+                    <span class="filter-label">Select:</span>
+                    <button class="btn selection-btn" onclick="selectAllVisible()">Select Visible</button>
+                    <button class="btn selection-btn" onclick="selectBySeverity('critical')">Critical Only</button>
+                    <button class="btn selection-btn" onclick="deselectAll()">Clear</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Findings Container -->
+        <div class="findings-container">
+            <div class="findings-header">
+                <h3>Findings <span id="findingsCount">(0)</span></h3>
+            </div>
+            <div class="findings-list" id="findingsList">
+                <div class="empty-state">
+                    <div class="empty-state-icon">⏳</div>
+                    <p>Loading findings...</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Detail Drawer -->
+    <div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>
+    <div class="drawer" id="findingDrawer">
+        <div class="drawer-header">
+            <div class="drawer-title" id="drawerTitle">Finding Details</div>
+            <button class="close-btn" onclick="closeDrawer()">×</button>
+        </div>
+        <div class="drawer-content" id="drawerContent">
+            <!-- Content populated by JavaScript -->
+        </div>
+    </div>
+
+    <!-- History Timeline Drawer -->
+    <div class="drawer-overlay" id="historyDrawerOverlay" onclick="closeHistoryDrawer()"></div>
+    <div class="history-drawer" id="historyDrawer">
+        <div class="drawer-header">
+            <div class="drawer-title">📜 Fix History</div>
+            <button class="close-btn" onclick="closeHistoryDrawer()">×</button>
+        </div>
+        <div class="history-timeline" id="historyTimeline">
+            <!-- History items populated by JavaScript -->
+        </div>
+    </div>
+
+    <button class="theme-toggle" id="themeToggle">🌙</button>
+
+    <script>
+        // State
+        let allFindings = [];
+        let filteredFindings = [];
+        let currentFilters = {
+            dimension: 'all',
+            severities: new Set(), // ✨ NEW: Multiple severity selection
+            search: ''
+        };
+        let sortConfig = {
+            field: 'severity',
+            order: 'desc' // ✨ NEW: 'asc' or 'desc'
+        };
+        let pollingInterval = null;
+        let reviewState = null;
+
+        // Fix-related state
+        let selectedFindings = new Set();
+        let fixSession = null;
+        let fixProgressInterval = null;
+        let fixProgressCollapsed = false;
+
+        // Selection management
+        function toggleFindingSelection(findingId, event) {
+            event.stopPropagation(); // Prevent triggering showFindingDetail
+
+            if (selectedFindings.has(findingId)) {
+                selectedFindings.delete(findingId);
+            } else {
+                selectedFindings.add(findingId);
+            }
+
+            updateSelectionUI();
+        }
+
+        function selectAll() {
+            allFindings.forEach(finding => {
+                selectedFindings.add(finding.id);
+            });
+            updateSelectionUI();
+        }
+
+        // ✨ NEW: Select only currently visible findings
+        function selectAllVisible() {
+            filteredFindings.forEach(finding => {
+                selectedFindings.add(finding.id);
+            });
+            updateSelectionUI();
+        }
+
+        // ✨ NEW: Select findings by severity
+        function selectBySeverity(severity) {
+            allFindings.forEach(finding => {
+                if (finding.severity.toLowerCase() === severity) {
+                    selectedFindings.add(finding.id);
+                }
+            });
+            updateSelectionUI();
+        }
+
+        function deselectAll() {
+            selectedFindings.clear();
+            updateSelectionUI();
+        }
+
+        // ✨ NEW: Toggle severity filter
+        function toggleSeverityFilter(severity) {
+            if (currentFilters.severities.has(severity)) {
+                currentFilters.severities.delete(severity);
+                document.getElementById(`filter-${severity}`).classList.remove('active');
+            } else {
+                currentFilters.severities.add(severity);
+                document.getElementById(`filter-${severity}`).classList.add('active');
+            }
+            applyFilters();
+        }
+
+        // ✨ NEW: Toggle sort order
+        function toggleSortOrder() {
+            sortConfig.order = sortConfig.order === 'asc' ? 'desc' : 'asc';
+
+            // Update UI
+            const icon = document.getElementById('sortOrderIcon');
+            const text = document.getElementById('sortOrderText');
+
+            if (sortConfig.order === 'asc') {
+                icon.textContent = '↑';
+                text.textContent = 'Ascending';
+            } else {
+                icon.textContent = '↓';
+                text.textContent = 'Descending';
+            }
+
+            sortFindings();
+        }
+
+        // ✨ NEW: Reset all filters
+        function resetFilters() {
+            // Reset severity filters
+            currentFilters.severities.clear();
+            document.querySelectorAll('.filter-checkbox-item').forEach(item => {
+                item.classList.remove('active');
+                const checkbox = item.querySelector('input[type="checkbox"]');
+                if (checkbox) checkbox.checked = false;
+            });
+
+            // Reset dimension filter
+            currentFilters.dimension = 'all';
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.toggle('active', tab.dataset.dimension === 'all');
+            });
+
+            // Reset search
+            currentFilters.search = '';
+            document.getElementById('searchInput').value = '';
+
+            // Reset sort
+            sortConfig.field = 'severity';
+            sortConfig.order = 'desc';
+            document.getElementById('sortSelect').value = 'severity';
+            document.getElementById('sortOrderIcon').textContent = '↓';
+            document.getElementById('sortOrderText').textContent = 'Descending';
+
+            applyFilters();
+        }
+
+        function updateSelectionUI() {
+            // Update counter
+            const counter = document.getElementById('selectionCounter');
+            counter.textContent = `${selectedFindings.size} finding${selectedFindings.size !== 1 ? 's' : ''} selected`;
+
+            // Update export button state
+            const exportBtn = document.getElementById('exportFixBtn');
+            exportBtn.disabled = selectedFindings.size === 0;
+
+            // Update checkbox states
+            document.querySelectorAll('.finding-checkbox').forEach(checkbox => {
+                checkbox.checked = selectedFindings.has(checkbox.dataset.findingId);
+            });
+        }
+
+        // Export selected findings for fixing
+        async function exportSelectedFindings() {
+            if (selectedFindings.size === 0) {
+                alert('Please select at least one finding to export');
+                return;
+            }
+
+            // Gather selected findings
+            const selectedFindingsData = allFindings.filter(f => selectedFindings.has(f.id));
+
+            // Create export data structure
+            const exportData = {
+                export_id: `${Date.now()}`,
+                export_timestamp: new Date().toISOString(),
+                review_id: reviewState?.review_id || 'unknown',
+                session_id: reviewState?.session_id || 'unknown',
+                findings_count: selectedFindingsData.length,
+                findings: selectedFindingsData.map(f => ({
+                    id: f.id,
+                    title: f.title,
+                    description: f.description,
+                    severity: f.severity,
+                    dimension: f.dimension,
+                    category: f.category || 'uncategorized',
+                    file: f.file,
+                    line: f.line,
+                    code_context: f.code_context || null,
+                    recommendations: f.recommendations || [],
+                    root_cause: f.root_cause || null
+                }))
+            };
+
+            // Convert to JSON and download
+            const jsonStr = JSON.stringify(exportData, null, 2);
+            const blob = new Blob([jsonStr], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            const filename = `fix-export-${exportData.export_id}.json`;
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+
+            // ✨ Show export path and usage instructions with session directory recommendation
+            const reviewDir = window.location.pathname.replace('/dashboard.html', '').replace('/.review/dashboard.html', '/.review');
+            // Extract absolute path from file:// URL
+            const absolutePath = decodeURIComponent(window.location.pathname).replace(/^\/([A-Z]:)/, '$1');
+            const sessionDir = absolutePath.replace('/.review/dashboard.html', '');
+            const reviewSessionDir = `${sessionDir}/.review`;
+
+            const notification = `
+✅ Exported ${selectedFindingsData.length} finding${selectedFindingsData.length !== 1 ? 's' : ''} for automated fixing!
+
+📁 File: ${filename}
+📂 Browser download: Your Downloads folder
+
+📋 Recommended Location:
+   ${reviewSessionDir}/
+
+🔄 Move to session directory (recommended):
+   # On Windows:
+   move "%USERPROFILE%\\Downloads\\${filename}" "${reviewSessionDir.replace(/\//g, '\\')}\\${filename}"
+
+   # On Mac/Linux:
+   mv ~/Downloads/${filename} ${reviewSessionDir}/${filename}
+
+🔧 Usage (after moving file):
+   /workflow:review-fix ${reviewSessionDir}/${filename}
+
+   Or directly from Downloads:
+   /workflow:review-fix ~/Downloads/${filename}
+
+📋 Review Session: ${exportData.session_id}
+📊 Findings by Severity:
+   • Critical: ${selectedFindingsData.filter(f => f.severity === 'critical').length}
+   • High: ${selectedFindingsData.filter(f => f.severity === 'high').length}
+   • Medium: ${selectedFindingsData.filter(f => f.severity === 'medium').length}
+   • Low: ${selectedFindingsData.filter(f => f.severity === 'low').length}
+
+💡 The automated fix workflow will:
+   1. Group findings by file and relationship
+   2. Execute fixes in parallel where safe
+   3. Run tests after each fix
+   4. Track progress in this dashboard
+            `.trim();
+
+            alert(notification);
+        }
+
+        // Fix progress tracking
+        function detectFixSession() {
+            // Check if there's an active fix session in the review directory
+            fetch('./fixes/active-fix-session.json')
+                .then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    }
+                    throw new Error('No active fix session');
+                })
+                .then(data => {
+                    fixSession = data;
+                    startFixProgressPolling(data.fix_session_id);
+                })
+                .catch(() => {
+                    // No active fix session, hide progress section
+                    document.getElementById('fixProgressSection').classList.remove('active');
+                });
+        }
+
+        function startFixProgressPolling(fixSessionId) {
+            // Show progress section
+            document.getElementById('fixProgressSection').classList.add('active');
+
+            // Initial load
+            loadFixProgress(fixSessionId);
+
+            // Start polling every 3 seconds
+            if (fixProgressInterval) {
+                clearInterval(fixProgressInterval);
+            }
+            fixProgressInterval = setInterval(() => {
+                loadFixProgress(fixSessionId);
+            }, 3000);
+        }
+
+        async function loadFixProgress(fixSessionId) {
+            try {
+                // Step 1: Load fix plan to get progress file list
+                const planResponse = await fetch(`./fixes/${fixSessionId}/fix-plan.json`);
+                if (!planResponse.ok) throw new Error('Fix plan not found');
+                const fixPlan = await planResponse.json();
+
+                // Step 2: Load all progress files in parallel
+                const progressFiles = fixPlan.groups.map(g => g.progress_file);
+                const progressPromises = progressFiles.map(file =>
+                    fetch(`./fixes/${fixSessionId}/${file}`)
+                        .then(r => r.ok ? r.json() : null)
+                        .catch(() => null)
+                );
+                const progressDataArray = await Promise.all(progressPromises);
+
+                // Step 3: Aggregate data from all progress files
+                const progressData = aggregateProgressData(fixPlan, progressDataArray.filter(d => d !== null));
+
+                updateFixStatus(progressData);
+
+                // If complete, stop polling and update history
+                if (progressData.status === 'completed' || progressData.status === 'failed') {
+                    clearInterval(fixProgressInterval);
+                    fixProgressInterval = null;
+
+                    // Reload fix history
+                    await loadFixHistory();
+
+                    // Mark findings as fixed
+                    if (progressData.status === 'completed') {
+                        progressData.fixes.forEach(fix => {
+                            if (fix.status === 'fixed') {
+                                markFindingAsFixed(fix.finding_id);
+                            }
+                        });
+                    }
+                }
+            } catch (error) {
+                console.error('Error loading fix progress:', error);
+            }
+        }
+
+        function aggregateProgressData(fixPlan, progressDataArray) {
+            // Aggregate all findings from progress files
+            const allFindings = [];
+            const activeAgents = [];
+            let hasAnyInProgress = false;
+            let hasAnyFailed = false;
+            let allCompleted = true;
+
+            progressDataArray.forEach(progressFile => {
+                // Collect all findings with group_id
+                if (progressFile.findings) {
+                    progressFile.findings.forEach(finding => {
+                        allFindings.push({
+                            finding_id: finding.finding_id,
+                            finding_title: finding.finding_title,
+                            status: finding.status,
+                            group_id: progressFile.group_id,
+                            completion_time: finding.completion_time
+                        });
+                    });
+                }
+
+                // Collect active agents
+                if (progressFile.assigned_agent && progressFile.status === 'in-progress') {
+                    const currentFinding = progressFile.current_finding;
+                    activeAgents.push({
+                        agent_id: progressFile.assigned_agent,
+                        group_id: progressFile.group_id,
+                        current_task: currentFinding ? currentFinding.finding_title : 'Working...',
+                        finding_id: currentFinding ? currentFinding.finding_id : null,
+                        finding_title: currentFinding ? currentFinding.finding_title : null,
+                        file: currentFinding ? currentFinding.file : null,
+                        status: progressFile.phase || 'analyzing',
+                        started_at: progressFile.started_at
+                    });
+                }
+
+                // Track statuses
+                if (progressFile.status === 'in-progress') hasAnyInProgress = true;
+                if (progressFile.status === 'failed') hasAnyFailed = true;
+                if (progressFile.status !== 'completed' && progressFile.status !== 'failed') {
+                    allCompleted = false;
+                }
+            });
+
+            // Calculate completion metrics
+            const totalFindings = allFindings.length;
+            const completedCount = allFindings.filter(f => f.status === 'fixed' || f.status === 'failed').length;
+            const percentComplete = totalFindings > 0 ? (completedCount / totalFindings) * 100 : 0;
+
+            // Determine overall status
+            let overallStatus = 'pending';
+            if (allCompleted) {
+                overallStatus = hasAnyFailed ? 'failed' : 'completed';
+            } else if (hasAnyInProgress) {
+                overallStatus = 'in_progress';
+            }
+
+            // Determine phase
+            let phase = 'planning';
+            if (hasAnyInProgress || allCompleted) {
+                phase = allCompleted ? 'completion' : 'execution';
+            }
+
+            // Build stages from fix plan and update with current progress
+            const stages = fixPlan.timeline.stages.map(stage => {
+                // Check if all groups in this stage are completed
+                const groupStatuses = stage.groups.map(groupId => {
+                    const progressFile = progressDataArray.find(p => p.group_id === groupId);
+                    return progressFile ? progressFile.status : 'pending';
+                });
+
+                let stageStatus = 'pending';
+                if (groupStatuses.every(s => s === 'completed' || s === 'failed')) {
+                    stageStatus = 'completed';
+                } else if (groupStatuses.some(s => s === 'in-progress')) {
+                    stageStatus = 'in-progress';
+                }
+
+                return {
+                    stage: stage.stage,
+                    status: stageStatus,
+                    groups: stage.groups,
+                    execution_mode: stage.execution_mode
+                };
+            });
+
+            // Get earliest start time
+            const startTimes = progressDataArray
+                .map(p => p.started_at)
+                .filter(t => t)
+                .map(t => new Date(t).getTime());
+            const startTime = startTimes.length > 0 ? new Date(Math.min(...startTimes)).toISOString() : null;
+
+            // Find current stage
+            const currentStageObj = stages.find(s => s.status === 'in-progress') || stages.find(s => s.status === 'pending');
+            const currentStage = currentStageObj ? currentStageObj.stage : stages.length;
+
+            return {
+                fix_session_id: fixPlan.fix_session_id,
+                review_id: fixPlan.review_id,
+                status: overallStatus,
+                phase: phase,
+                start_time: startTime,
+                total_findings: totalFindings,
+                current_stage: currentStage,
+                total_stages: fixPlan.timeline.stages.length,
+                percent_complete: percentComplete,
+                fixes: allFindings,
+                active_agents: activeAgents,
+                stages: stages
+            };
+        }
+
+        function updateFixStatus(progressData) {
+            const fixPhaseBadge = document.getElementById('fixPhaseBadge');
+            const planningPhase = document.getElementById('planningPhase');
+            const executionPhase = document.getElementById('executionPhase');
+            const stageTimeline = document.getElementById('stageTimeline');
+
+            // Update phase badge
+            const phase = progressData.phase || 'planning';
+            fixPhaseBadge.textContent = phase.toUpperCase();
+            fixPhaseBadge.className = `phase-badge phase-${phase}`;
+
+            // Update stage timeline (show if stages exist, regardless of phase)
+            updateStageTimeline(progressData);
+
+            // Show appropriate phase UI
+            if (phase === 'planning') {
+                planningPhase.style.display = 'block';
+                executionPhase.style.display = 'none';
+            } else if (phase === 'execution' || phase === 'completion') {
+                planningPhase.style.display = 'none';
+                executionPhase.style.display = 'block';
+
+                // Update progress bar
+                const progressFill = document.getElementById('fixProgressFill');
+                const progressText = document.getElementById('fixProgressText');
+                const percentComplete = progressData.percent_complete || 0;
+                progressFill.style.width = `${percentComplete}%`;
+
+                const completedCount = progressData.fixes?.filter(f => f.status === 'fixed' || f.status === 'failed').length || 0;
+                const totalCount = progressData.total_findings || 0;
+                const currentStage = progressData.current_stage || 1;
+                const totalStages = progressData.total_stages || 1;
+
+                // Format start time
+                let startTimeText = '';
+                if (progressData.start_time) {
+                    const startTime = new Date(progressData.start_time);
+                    const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1000 / 60); // minutes
+                    startTimeText = ` • Started ${startTime.toLocaleTimeString()} (${elapsed}m ago)`;
+                }
+
+                progressText.textContent = `Stage ${currentStage}/${totalStages}: ${completedCount}/${totalCount} findings completed (${percentComplete.toFixed(1)}%)${startTimeText}`;
+
+                // Update active groups
+                updateActiveGroups(progressData);
+
+                // Update active agents
+                updateActiveAgents(progressData);
+            }
+        }
+
+        function updateStageTimeline(progressData) {
+            const stageTimeline = document.getElementById('stageTimeline');
+            const stages = progressData.stages || [];
+
+            if (stages.length === 0) {
+                stageTimeline.style.display = 'none';
+                stageTimeline.innerHTML = '';
+                return;
+            }
+
+            // Show timeline when stages are available
+            stageTimeline.style.display = 'flex';
+            stageTimeline.innerHTML = stages.map(stage => `
+                <div class="stage-item ${stage.status}">
+                    <div class="stage-number">Stage ${stage.stage}</div>
+                    <div class="stage-mode">${stage.execution_mode === 'parallel' ? '⚡ Parallel' : '➡️ Serial'}</div>
+                    <div class="stage-groups">${stage.groups.length} group${stage.groups.length !== 1 ? 's' : ''}</div>
+                </div>
+            `).join('');
+        }
+
+        function updateActiveGroups(progressData) {
+            const activeGroupsList = document.getElementById('activeGroupsList');
+            const stages = progressData.stages || [];
+            const activeStage = stages.find(s => s.status === 'in-progress');
+
+            if (!activeStage) {
+                activeGroupsList.innerHTML = '';
+                return;
+            }
+
+            // Get fixes for groups in active stage
+            const groupFixes = {};
+            progressData.fixes?.forEach(fix => {
+                if (fix.group_id && activeStage.groups.includes(fix.group_id)) {
+                    if (!groupFixes[fix.group_id]) {
+                        groupFixes[fix.group_id] = [];
+                    }
+                    groupFixes[fix.group_id].push(fix);
+                }
+            });
+
+            const groupCards = activeStage.groups.map(groupId => {
+                const fixes = groupFixes[groupId] || [];
+                const inProgressCount = fixes.filter(f => f.status === 'in-progress').length;
+                const completedCount = fixes.filter(f => f.status === 'fixed' || f.status === 'failed').length;
+
+                // Get in-progress finding titles
+                const inProgressFindings = fixes
+                    .filter(f => f.status === 'in-progress')
+                    .map(f => f.finding_title)
+                    .filter(title => title);
+
+                const inProgressText = inProgressFindings.length > 0
+                    ? `<div class="group-active-items">🔧 ${inProgressFindings.join(', ')}</div>`
+                    : '';
+
+                return `
+                    <div class="active-group-card">
+                        <div class="group-header">
+                            <div class="group-id">${groupId}</div>
+                            <div class="group-status">${inProgressCount > 0 ? 'In Progress' : 'Pending'}</div>
+                        </div>
+                        <div class="group-findings">${completedCount}/${fixes.length} findings completed</div>
+                        ${inProgressText}
+                    </div>
+                `;
+            }).join('');
+
+            activeGroupsList.innerHTML = groupCards || '';
+        }
+
+        function getAgentStatusIcon(status) {
+            const icons = {
+                'analyzing': '🔍',
+                'fixing': '🔧',
+                'testing': '🧪',
+                'committing': '💾'
+            };
+            return icons[status] || '⚡';
+        }
+
+        function updateActiveAgents(progressData) {
+            const activeAgentsList = document.getElementById('activeAgentsList');
+
+            if (!progressData.active_agents || progressData.active_agents.length === 0) {
+                activeAgentsList.innerHTML = '';
+                return;
+            }
+
+            activeAgentsList.innerHTML = '<h4 style="margin-bottom: 10px;">Active Agents:</h4>' +
+                progressData.active_agents.map(agent => {
+                    const statusIcon = getAgentStatusIcon(agent.status);
+                    const statusText = agent.status ? agent.status.charAt(0).toUpperCase() + agent.status.slice(1) : '';
+                    const findingTitle = agent.finding_title || agent.finding_id || '';
+
+                    // Render flow control steps if available
+                    const flowControlHtml = agent.flow_control && agent.flow_control.steps && agent.flow_control.steps.length > 0
+                        ? `<div class="agent-flow-control">${renderFlowControlSteps(agent.flow_control)}</div>`
+                        : '';
+
+                    return `
+                        <div class="active-agent-item">
+                            <div class="agent-status">
+                                ${statusIcon} ${agent.agent_id} (${agent.group_id || 'unknown'})
+                                ${statusText ? `<span class="agent-status-badge">${statusText}</span>` : ''}
+                            </div>
+                            <div class="agent-task">${agent.current_task || findingTitle || 'Initializing...'}</div>
+                            ${agent.file ? `<div class="agent-file">📄 ${agent.file}</div>` : ''}
+                            ${flowControlHtml}
+                        </div>
+                    `;
+                }).join('');
+        }
+
+        function renderFlowControlSteps(flowControl) {
+            if (!flowControl || !flowControl.implementation_approach || flowControl.implementation_approach.length === 0) {
+                return '';
+            }
+
+            const stepsHtml = flowControl.implementation_approach.map(step => {
+                let stepIcon = '';
+                let stepClass = '';
+
+                if (step.status === 'completed') {
+                    stepIcon = '✅';
+                    stepClass = 'flow-step-completed';
+                } else if (step.status === 'in-progress') {
+                    stepIcon = '⏳';
+                    stepClass = 'flow-step-in-progress';
+                } else if (step.status === 'failed') {
+                    stepIcon = '❌';
+                    stepClass = 'flow-step-failed';
+                } else {
+                    stepIcon = '⏸';
+                    stepClass = 'flow-step-pending';
+                }
+
+                // Format step name: "analyze_context" -> "Analyze Context"
+                const stepName = step.action || step.step.split('_').map(word =>
+                    word.charAt(0).toUpperCase() + word.slice(1)
+                ).join(' ');
+
+                return `
+                    <div class="flow-step ${stepClass}">
+                        <span class="flow-step-icon">${stepIcon}</span>
+                        <span class="flow-step-name">${stepName}</span>
+                    </div>
+                `;
+            }).join('');
+
+            return `
+                <div class="flow-control-container">
+                    <div class="flow-control-header">Progress Steps:</div>
+                    <div class="flow-steps">${stepsHtml}</div>
+                </div>
+            `;
+        }
+
+        function markFindingAsFixed(findingId) {
+            const finding = allFindings.find(f => f.id === findingId);
+            if (finding) {
+                finding.fix_status = 'fixed';
+                renderFindings(); // Re-render to show fix badge
+            }
+        }
+
+        function toggleFixProgress() {
+            fixProgressCollapsed = !fixProgressCollapsed;
+            const section = document.getElementById('fixProgressSection');
+            section.classList.toggle('collapsed', fixProgressCollapsed);
+        }
+
+        // History drawer functions
+        function openHistoryDrawer() {
+            document.getElementById('historyDrawer').classList.add('active');
+            document.getElementById('historyDrawerOverlay').classList.add('active');
+            loadFixHistory();
+        }
+
+        function closeHistoryDrawer() {
+            document.getElementById('historyDrawer').classList.remove('active');
+            document.getElementById('historyDrawerOverlay').classList.remove('active');
+        }
+
+        async function loadFixHistory() {
+            try {
+                const response = await fetch('./fixes/fix-history.json');
+                if (!response.ok) throw new Error('Fix history not found');
+
+                const historyData = await response.json();
+                renderFixHistory(historyData);
+            } catch (error) {
+                console.error('Error loading fix history:', error);
+                document.getElementById('historyTimeline').innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-state-icon">📜</div>
+                        <p>No fix history available</p>
+                    </div>
+                `;
+            }
+        }
+
+        function renderFixHistory(historyData) {
+            const timeline = document.getElementById('historyTimeline');
+
+            if (!historyData.sessions || historyData.sessions.length === 0) {
+                timeline.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-state-icon">📜</div>
+                        <p>No fix sessions yet</p>
+                    </div>
+                `;
+                return;
+            }
+
+            timeline.innerHTML = historyData.sessions.map(session => {
+                const timestamp = new Date(session.timestamp).toLocaleString();
+                const statusEmoji = session.status === 'completed' ? '✅' :
+                                   session.status === 'failed' ? '❌' : '⏳';
+
+                return `
+                    <div class="history-item">
+                        <div class="history-header">
+                            <span class="history-status">${statusEmoji} ${session.status}</span>
+                            <span class="history-time">${timestamp}</span>
+                        </div>
+                        <div class="history-details">
+                            <div><strong>Session:</strong> ${session.fix_session_id}</div>
+                            <div><strong>Findings:</strong> ${session.findings_count} issues</div>
+                            <div><strong>Fixed:</strong> ${session.fixed_count || 0} issues</div>
+                            <div><strong>Failed:</strong> ${session.failed_count || 0} issues</div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Theme management
+        function initTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeIcon(savedTheme);
+        }
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeIcon(newTheme);
+        }
+
+        function updateThemeIcon(theme) {
+            document.getElementById('themeToggle').textContent = theme === 'dark' ? '☀️' : '🌙';
+        }
+
+        // Polling mechanism
+        function startPolling() {
+            loadProgress();
+            pollingInterval = setInterval(() => {
+                loadProgress();
+            }, 5000); // Poll every 5 seconds
+        }
+
+        function stopPolling() {
+            if (pollingInterval) {
+                clearInterval(pollingInterval);
+                pollingInterval = null;
+            }
+        }
+
+        // Load progress from review-progress.json
+        async function loadProgress() {
+            try {
+                const response = await fetch('./review-progress.json');
+                if (!response.ok) throw new Error('Progress file not found');
+
+                const progress = await response.json();
+
+                // ✨ NEW: Load available dimensions incrementally and get actual count
+                const loadedCount = await loadAvailableDimensions();
+
+                // ✨ NEW: Update progress UI with actual file count
+                updateProgressUI(progress, loadedCount);
+
+                // If complete, stop polling
+                if (progress.phase === 'complete') {
+                    stopPolling();
+                }
+            } catch (error) {
+                console.error('Error loading progress:', error);
+            }
+        }
+
+        // ✨ NEW: Load all available dimension files (even if review not complete)
+        async function loadAvailableDimensions() {
+            try {
+                // Load review state to get expected dimensions
+                const stateResponse = await fetch('./review-state.json');
+                if (!stateResponse.ok) return;
+
+                reviewState = await stateResponse.json();
+                document.getElementById('sessionId').textContent = reviewState.session_id;
+
+                // Try to load all expected dimensions
+                const allDimensions = reviewState.metadata?.dimensions ||
+                                     Object.keys(dimensionConfig);
+
+                const dimensionPromises = allDimensions.map(dim =>
+                    fetch(`./dimensions/${dim}.json`)
+                        .then(r => {
+                            if (r.ok) return r.json();
+                            return null; // Dimension not ready yet
+                        })
+                        .catch(err => {
+                            // Silently skip dimensions that don't exist yet
+                            return null;
+                        })
+                );
+
+                const dimensions = await Promise.all(dimensionPromises);
+
+                // Aggregate findings from completed dimensions
+                allFindings = [];
+                const loadedDimensions = [];
+                const severityCounts = { critical: 0, high: 0, medium: 0, low: 0 };
+
+                dimensions.forEach(dim => {
+                    if (dim) {
+                        // Handle both array and object formats
+                        const dimData = Array.isArray(dim) ? dim[0] : dim;
+
+                        if (dimData && dimData.findings) {
+                            loadedDimensions.push(dimData.dimension);
+
+                            // Aggregate findings
+                            allFindings.push(...dimData.findings.map(f => ({
+                                ...f,
+                                dimension: dimData.dimension
+                            })));
+
+                            // Aggregate severity counts
+                            if (dimData.summary) {
+                                severityCounts.critical += dimData.summary.critical || 0;
+                                severityCounts.high += dimData.summary.high || 0;
+                                severityCounts.medium += dimData.summary.medium || 0;
+                                severityCounts.low += dimData.summary.low || 0;
+                            }
+                        }
+                    }
+                });
+
+                // Update severity counts with real data
+                if (loadedDimensions.length > 0) {
+                    updateSeverityCounts(severityCounts);
+                    updateDimensionSummary();
+                    renderFindings();
+                }
+
+                // ✨ NEW: Return loaded count for progress calculation
+                return {
+                    loaded: loadedDimensions.length,
+                    total: allDimensions.length,
+                    findings: allFindings.length
+                };
+            } catch (error) {
+                console.error('Error loading available dimensions:', error);
+                return { loaded: 0, total: 7, findings: 0 };
+            }
+        }
+
+        // Update progress UI
+        function updateProgressUI(progress, loadedCount) {
+            document.getElementById('reviewId').textContent = progress.review_id || 'N/A';
+            document.getElementById('lastUpdate').textContent = new Date(progress.last_update).toLocaleString();
+
+            const phaseBadge = document.getElementById('phaseBadge');
+            phaseBadge.textContent = progress.phase.toUpperCase();
+            phaseBadge.className = `phase-badge phase-${progress.phase}`;
+
+            let percentComplete = 0;
+            let progressText = '';
+
+            // ✨ NEW: Calculate progress based on actual loaded dimension files
+            if (loadedCount && loadedCount.total > 0) {
+                percentComplete = Math.round((loadedCount.loaded / loadedCount.total) * 100);
+
+                if (progress.phase === 'parallel' || progress.phase === 'aggregate') {
+                    progressText = `Parallel Review: ${loadedCount.loaded}/${loadedCount.total} dimensions completed`;
+                    if (loadedCount.findings > 0) {
+                        progressText += ` • ${loadedCount.findings} finding${loadedCount.findings !== 1 ? 's' : ''} discovered`;
+                    }
+                } else if (progress.phase === 'iterate' && progress.progress.deep_dive) {
+                    percentComplete = progress.progress.deep_dive.percent_complete;
+                    progressText = `Deep-Dive: ${progress.progress.deep_dive.analyzed}/${progress.progress.deep_dive.total_findings} findings analyzed`;
+                } else if (progress.phase === 'complete') {
+                    percentComplete = 100;
+                    progressText = `Review Complete • ${loadedCount.findings} total finding${loadedCount.findings !== 1 ? 's' : ''}`;
+                }
+            } else {
+                // Fallback to original logic if loadedCount not available
+                if (progress.progress.parallel_review) {
+                    percentComplete = progress.progress.parallel_review.percent_complete;
+                    progressText = `Parallel Review: ${progress.progress.parallel_review.completed}/${progress.progress.parallel_review.total_dimensions} dimensions`;
+                }
+
+                if (progress.progress.deep_dive) {
+                    percentComplete = progress.progress.deep_dive.percent_complete;
+                    progressText = `Deep-Dive: ${progress.progress.deep_dive.analyzed}/${progress.progress.deep_dive.total_findings} findings`;
+                }
+
+                if (progress.phase === 'complete') {
+                    percentComplete = 100;
+                    progressText = 'Review Complete';
+                }
+            }
+
+            document.getElementById('progressFill').style.width = `${percentComplete}%`;
+            document.getElementById('progressText').textContent = progressText;
+        }
+
+        // Load final results (now delegates to loadAvailableDimensions)
+        async function loadFinalResults() {
+            // ✨ NEW: This function now just ensures one final load
+            // since loadAvailableDimensions() handles all the heavy lifting
+            await loadAvailableDimensions();
+        }
+
+        // Update severity counts
+        function updateSeverityCounts(distribution) {
+            document.getElementById('criticalCount').textContent = distribution.critical || 0;
+            document.getElementById('highCount').textContent = distribution.high || 0;
+            document.getElementById('mediumCount').textContent = distribution.medium || 0;
+            document.getElementById('lowCount').textContent = distribution.low || 0;
+        }
+
+        // Dimension summary table configuration
+        const dimensionConfig = {
+            'security': { icon: '🔒', label: 'Security' },
+            'architecture': { icon: '🏛', label: 'Architecture' },
+            'quality': { icon: '✅', label: 'Quality' },
+            'action-items': { icon: '📋', label: 'Action-Items' },
+            'performance': { icon: '⚡', label: 'Performance' },
+            'maintainability': { icon: '🔧', label: 'Maintainability' },
+            'best-practices': { icon: '📚', label: 'Best-Practices' }
+        };
+
+        // Update dimension summary table
+        function updateDimensionSummary() {
+            const tbody = document.getElementById('dimensionSummaryBody');
+            if (!tbody) return;
+
+            // Get all dimension names from config
+            const dimensions = Object.keys(dimensionConfig);
+
+            // Calculate counts per dimension
+            const dimensionStats = {};
+            dimensions.forEach(dim => {
+                dimensionStats[dim] = { critical: 0, high: 0, medium: 0, low: 0, total: 0, reviewed: false };
+            });
+
+            // Aggregate findings by dimension
+            allFindings.forEach(finding => {
+                const dim = finding.dimension;
+                if (dimensionStats[dim]) {
+                    const severity = finding.severity.toLowerCase();
+                    if (dimensionStats[dim][severity] !== undefined) {
+                        dimensionStats[dim][severity]++;
+                    }
+                    dimensionStats[dim].total++;
+                    // ✨ NEW: Mark as reviewed if we have findings from this dimension
+                    dimensionStats[dim].reviewed = true;
+                }
+            });
+
+            // Also check reviewed status from reviewState (backward compatibility)
+            if (reviewState && reviewState.dimensions_reviewed) {
+                reviewState.dimensions_reviewed.forEach(dim => {
+                    if (dimensionStats[dim]) {
+                        dimensionStats[dim].reviewed = true;
+                    }
+                });
+            }
+
+            // Generate table rows
+            const rows = dimensions.map(dim => {
+                const config = dimensionConfig[dim];
+                const stats = dimensionStats[dim];
+                const hasFindings = stats.total > 0;
+
+                // Create count badge with appropriate styling
+                const createCountBadge = (count, severity) => {
+                    const zeroClass = count === 0 ? ' zero' : '';
+                    return `<span class="count-badge ${severity}${zeroClass}">${count}</span>`;
+                };
+
+                // ✨ NEW: Enhanced status indicator with 3 states
+                let statusClass, statusIcon, statusTooltip;
+                if (stats.reviewed && hasFindings) {
+                    statusClass = 'reviewed';
+                    statusIcon = '✓';
+                    statusTooltip = 'Completed';
+                } else if (stats.reviewed && !hasFindings) {
+                    statusClass = 'reviewed';
+                    statusIcon = '✓';
+                    statusTooltip = 'Completed (no findings)';
+                } else {
+                    statusClass = 'pending';
+                    statusIcon = '⏳';
+                    statusTooltip = 'Processing...';
+                }
+
+                return `
+                    <tr onclick="filterByDimension('${dim}')" style="cursor: pointer;">
+                        <td>
+                            <div class="dimension-name">
+                                <div class="dimension-icon ${dim}">${config.icon}</div>
+                                <span>${config.label}</span>
+                            </div>
+                        </td>
+                        <td>${createCountBadge(stats.critical, 'critical')}</td>
+                        <td>${createCountBadge(stats.high, 'high')}</td>
+                        <td>${createCountBadge(stats.medium, 'medium')}</td>
+                        <td>${createCountBadge(stats.low, 'low')}</td>
+                        <td><span class="count-badge total">${stats.total}</span></td>
+                        <td><span class="status-indicator ${statusClass}" title="${statusTooltip}">${statusIcon}</span></td>
+                    </tr>
+                `;
+            }).join('');
+
+            tbody.innerHTML = rows;
+        }
+
+        // Filter functions
+        function filterByDimension(dimension) {
+            currentFilters.dimension = dimension;
+
+            // Update tab UI
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.toggle('active', tab.dataset.dimension === dimension);
+            });
+
+            applyFilters();
+        }
+
+        function setupSearch() {
+            const searchInput = document.getElementById('searchInput');
+            searchInput.addEventListener('input', (e) => {
+                currentFilters.search = e.target.value.toLowerCase();
+                applyFilters();
+            });
+        }
+
+        function applyFilters() {
+            filteredFindings = allFindings.filter(finding => {
+                // Dimension filter
+                if (currentFilters.dimension !== 'all' && finding.dimension !== currentFilters.dimension) {
+                    return false;
+                }
+
+                // ✨ NEW: Multi-select severity filter
+                if (currentFilters.severities.size > 0) {
+                    if (!currentFilters.severities.has(finding.severity.toLowerCase())) {
+                        return false;
+                    }
+                }
+
+                // Search filter
+                if (currentFilters.search) {
+                    const searchText = `${finding.title} ${finding.description} ${finding.file} ${finding.category || ''}`.toLowerCase();
+                    if (!searchText.includes(currentFilters.search)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+
+            // Auto-sort after filtering
+            sortFindings();
+        }
+
+        // ✨ UPDATED: Sort findings with order support
+        function sortFindings() {
+            const sortBy = document.getElementById('sortSelect').value;
+            sortConfig.field = sortBy;
+
+            const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+
+            filteredFindings.sort((a, b) => {
+                let comparison = 0;
+
+                if (sortBy === 'severity') {
+                    comparison = severityOrder[a.severity.toLowerCase()] - severityOrder[b.severity.toLowerCase()];
+                } else if (sortBy === 'dimension') {
+                    comparison = a.dimension.localeCompare(b.dimension);
+                } else if (sortBy === 'file') {
+                    comparison = a.file.localeCompare(b.file);
+                } else if (sortBy === 'title') {
+                    comparison = a.title.localeCompare(b.title);
+                }
+
+                // ✨ NEW: Apply sort order (asc/desc)
+                return sortConfig.order === 'asc' ? comparison : -comparison;
+            });
+
+            renderFindings();
+        }
+
+        // Render findings list
+        function renderFindings() {
+            const container = document.getElementById('findingsList');
+            document.getElementById('findingsCount').textContent = `(${filteredFindings.length})`;
+
+            if (filteredFindings.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state">
+                        <div class="empty-state-icon">✨</div>
+                        <p>No findings match your filters</p>
+                    </div>
+                `;
+                return;
+            }
+
+            container.innerHTML = filteredFindings.map(finding => {
+                // Determine fix status badge
+                const fixStatusBadge = finding.fix_status ?
+                    `<span class="fix-status-badge status-${finding.fix_status}">
+                        ${finding.fix_status === 'pending' ? '⏳ Pending' :
+                          finding.fix_status === 'in-progress' ? '⚡ In Progress' :
+                          finding.fix_status === 'fixed' ? '✅ Fixed' :
+                          finding.fix_status === 'failed' ? '❌ Failed' : ''}
+                    </span>` : '';
+
+                return `
+                    <div class="finding-item ${finding.severity}" onclick='showFindingDetail(${JSON.stringify(finding).replace(/'/g, "\\'")})'  style="display: flex; gap: 12px;">
+                        <input type="checkbox"
+                               class="finding-checkbox"
+                               data-finding-id="${finding.id}"
+                               onclick='toggleFindingSelection("${finding.id}", event)'
+                               ${selectedFindings.has(finding.id) ? 'checked' : ''}>
+                        <div style="flex: 1;">
+                            <div class="finding-header">
+                                <div class="finding-title">${finding.title}</div>
+                                <div class="finding-badges">
+                                    <span class="severity-badge ${finding.severity}">${finding.severity}</span>
+                                    <span class="dimension-badge">${finding.dimension}</span>
+                                </div>
+                            </div>
+                            <div class="finding-file">📄 ${finding.file}:${finding.line}</div>
+                            <div class="finding-description">${finding.description.substring(0, 200)}${finding.description.length > 200 ? '...' : ''}</div>
+                            ${fixStatusBadge}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Show finding detail in drawer
+        function showFindingDetail(finding) {
+            const drawer = document.getElementById('findingDrawer');
+            const overlay = document.getElementById('drawerOverlay');
+            const content = document.getElementById('drawerContent');
+
+            document.getElementById('drawerTitle').textContent = finding.title;
+
+            content.innerHTML = `
+                <div class="drawer-section">
+                    <div style="display: flex; gap: 10px; margin-bottom: 15px;">
+                        <span class="severity-badge ${finding.severity}">${finding.severity}</span>
+                        <span class="dimension-badge">${finding.dimension}</span>
+                    </div>
+                </div>
+
+                <div class="drawer-section">
+                    <div class="drawer-section-title">📄 Location</div>
+                    <div class="metadata-grid">
+                        <div class="metadata-item">
+                            <div class="metadata-label">File</div>
+                            <div class="metadata-value" style="font-family: monospace; font-size: 0.85rem;">${finding.file}</div>
+                        </div>
+                        <div class="metadata-item">
+                            <div class="metadata-label">Line</div>
+                            <div class="metadata-value">${finding.line}</div>
+                        </div>
+                        ${finding.category ? `
+                        <div class="metadata-item">
+                            <div class="metadata-label">Category</div>
+                            <div class="metadata-value">${finding.category}</div>
+                        </div>
+                        ` : ''}
+                    </div>
+                </div>
+
+                <div class="drawer-section">
+                    <div class="drawer-section-title">📝 Description</div>
+                    <p style="line-height: 1.8;">${finding.description}</p>
+                </div>
+
+                ${finding.snippet ? `
+                <div class="drawer-section">
+                    <div class="drawer-section-title">💻 Code Snippet</div>
+                    <div class="code-snippet">${escapeHtml(finding.snippet)}</div>
+                </div>
+                ` : ''}
+
+                <div class="drawer-section">
+                    <div class="drawer-section-title">✅ Recommendation</div>
+                    <div class="recommendation-box">
+                        ${finding.recommendation}
+                    </div>
+                </div>
+
+                ${finding.impact ? `
+                <div class="drawer-section">
+                    <div class="drawer-section-title">⚠️ Impact</div>
+                    <p style="line-height: 1.8;">${finding.impact}</p>
+                </div>
+                ` : ''}
+
+                ${finding.references && finding.references.length > 0 ? `
+                <div class="drawer-section">
+                    <div class="drawer-section-title">🔗 References</div>
+                    <ul class="reference-list">
+                        ${finding.references.map(ref => {
+                            const isUrl = ref.startsWith('http');
+                            return `<li>${isUrl ? `<a href="${ref}" target="_blank">${ref}</a>` : ref}</li>`;
+                        }).join('')}
+                    </ul>
+                </div>
+                ` : ''}
+
+                ${finding.metadata ? `
+                <div class="drawer-section">
+                    <div class="drawer-section-title">ℹ️ Metadata</div>
+                    <div class="metadata-grid">
+                        ${finding.metadata.cwe_id ? `
+                        <div class="metadata-item">
+                            <div class="metadata-label">CWE ID</div>
+                            <div class="metadata-value">${finding.metadata.cwe_id}</div>
+                        </div>
+                        ` : ''}
+                        ${finding.metadata.owasp_category ? `
+                        <div class="metadata-item">
+                            <div class="metadata-label">OWASP Category</div>
+                            <div class="metadata-value">${finding.metadata.owasp_category}</div>
+                        </div>
+                        ` : ''}
+                        ${finding.metadata.pattern_type ? `
+                        <div class="metadata-item">
+                            <div class="metadata-label">Pattern Type</div>
+                            <div class="metadata-value">${finding.metadata.pattern_type}</div>
+                        </div>
+                        ` : ''}
+                        ${finding.metadata.complexity_score ? `
+                        <div class="metadata-item">
+                            <div class="metadata-label">Complexity Score</div>
+                            <div class="metadata-value">${finding.metadata.complexity_score}</div>
+                        </div>
+                        ` : ''}
+                    </div>
+                </div>
+                ` : ''}
+            `;
+
+            drawer.classList.add('open');
+            overlay.classList.add('show');
+        }
+
+        function closeDrawer() {
+            document.getElementById('findingDrawer').classList.remove('open');
+            document.getElementById('drawerOverlay').classList.remove('show');
+        }
+
+        function escapeHtml(text) {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#039;'
+            };
+            return text.replace(/[&<>"']/g, m => map[m]);
+        }
+
+        // Export to Markdown
+        function exportToMarkdown() {
+            if (!reviewState) {
+                alert('Review data not yet loaded. Please wait.');
+                return;
+            }
+
+            let markdown = `# Code Review Report\n\n`;
+            markdown += `**Session**: ${reviewState.session_id}\n`;
+            markdown += `**Review ID**: ${reviewState.review_id}\n`;
+            markdown += `**Date**: ${new Date().toLocaleDateString()}\n`;
+            markdown += `**Dimensions**: ${reviewState.dimensions_reviewed.join(', ')}\n\n`;
+
+            markdown += `## Summary\n\n`;
+            markdown += `- **Total Findings**: ${allFindings.length}\n`;
+            markdown += `- **Critical**: ${reviewState.severity_distribution.critical}\n`;
+            markdown += `- **High**: ${reviewState.severity_distribution.high}\n`;
+            markdown += `- **Medium**: ${reviewState.severity_distribution.medium}\n`;
+            markdown += `- **Low**: ${reviewState.severity_distribution.low}\n\n`;
+
+            // Group by dimension
+            reviewState.dimensions_reviewed.forEach(dim => {
+                const dimFindings = allFindings.filter(f => f.dimension === dim);
+                if (dimFindings.length === 0) return;
+
+                markdown += `## ${dim.charAt(0).toUpperCase() + dim.slice(1)} (${dimFindings.length} findings)\n\n`;
+
+                dimFindings.forEach(finding => {
+                    markdown += `### ${finding.title}\n\n`;
+                    markdown += `**Severity**: ${finding.severity}  \n`;
+                    markdown += `**File**: \`${finding.file}:${finding.line}\`  \n`;
+                    markdown += `**Category**: ${finding.category || 'N/A'}  \n\n`;
+                    markdown += `${finding.description}\n\n`;
+                    markdown += `**Recommendation**: ${finding.recommendation}\n\n`;
+                    if (finding.impact) {
+                        markdown += `**Impact**: ${finding.impact}\n\n`;
+                    }
+                    markdown += `---\n\n`;
+                });
+            });
+
+            // Download
+            const blob = new Blob([markdown], { type: 'text/markdown' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            const filename = `review-report-${reviewState.review_id}.md`;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+
+            // ✨ Show export path notification with session directory recommendation
+            const reviewDir = window.location.pathname.replace('/dashboard.html', '').replace('/.review/dashboard.html', '/.review');
+            // Extract absolute path from file:// URL
+            const absolutePath = decodeURIComponent(window.location.pathname).replace(/^\/([A-Z]:)/, '$1');
+            const sessionDir = absolutePath.replace('/.review/dashboard.html', '');
+            const reportsDir = `${sessionDir}/.review/reports`;
+
+            const notification = `
+✅ Report exported successfully!
+
+📁 File: ${filename}
+📂 Browser download: Your Downloads folder
+
+📋 Recommended Location:
+   ${reportsDir}/
+
+🔄 Move to session directory:
+   # On Windows:
+   move "%USERPROFILE%\\Downloads\\${filename}" "${reportsDir.replace(/\//g, '\\')}\\${filename}"
+
+   # On Mac/Linux:
+   mv ~/Downloads/${filename} ${reportsDir}/${filename}
+
+💡 All review files in:
+   ${reportsDir}/
+            `.trim();
+
+            alert(notification);
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            initTheme();
+            setupSearch();
+            startPolling();
+            detectFixSession(); // Check for active fix sessions
+
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+        });
+    </script>
+</body>
+</html>
diff --git a/ccw/src/templates/tailwind-base.css b/ccw/src/templates/tailwind-base.css
new file mode 100644
index 00000000..1b3fcdc1
--- /dev/null
+++ b/ccw/src/templates/tailwind-base.css
@@ -0,0 +1,212 @@
+/* Tailwind Base Styles with Design Tokens */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* CSS Custom Properties - Light Mode (Default) */
+  :root {
+    /* Base Colors */
+    --color-background: 0 0% 100%; /* oklch(1 0 0) -> white */
+    --color-foreground: 0 0% 25%; /* oklch(0.25 0 0) -> dark gray */
+    --color-card: 0 0% 100%; /* oklch(1 0 0) -> white */
+    --color-card-foreground: 0 0% 25%; /* oklch(0.25 0 0) -> dark gray */
+    --color-border: 0 0% 90%; /* oklch(0.9 0 0) -> light gray */
+    --color-input: 0 0% 90%; /* oklch(0.9 0 0) -> light gray */
+    --color-ring: 220 65% 50%; /* oklch(0.5 0.15 250) -> primary blue */
+
+    /* Interactive Colors - Primary */
+    --color-interactive-primary-default: 220 65% 50%; /* oklch(0.5 0.15 250) -> #4066bf */
+    --color-interactive-primary-hover: 220 65% 55%; /* oklch(0.55 0.15 250) -> lighter blue */
+    --color-interactive-primary-active: 220 65% 45%; /* oklch(0.45 0.15 250) -> darker blue */
+    --color-interactive-primary-disabled: 220 30% 70%; /* oklch(0.7 0.05 250) -> muted blue */
+    --color-interactive-primary-foreground: 0 0% 100%; /* oklch(1 0 0) -> white */
+
+    /* Interactive Colors - Secondary */
+    --color-interactive-secondary-default: 220 60% 65%; /* oklch(0.65 0.12 250) -> #6b8ccc */
+    --color-interactive-secondary-hover: 220 60% 70%; /* oklch(0.7 0.12 250) -> lighter */
+    --color-interactive-secondary-active: 220 60% 60%; /* oklch(0.6 0.12 250) -> darker */
+    --color-interactive-secondary-disabled: 220 30% 80%; /* oklch(0.8 0.05 250) -> muted */
+    --color-interactive-secondary-foreground: 0 0% 100%; /* oklch(1 0 0) -> white */
+
+    /* Interactive Colors - Accent */
+    --color-interactive-accent-default: 220 40% 95%; /* oklch(0.95 0.02 250) -> #eef3fa */
+    --color-interactive-accent-hover: 220 45% 92%; /* oklch(0.92 0.03 250) -> slightly darker */
+    --color-interactive-accent-active: 220 35% 97%; /* oklch(0.97 0.02 250) -> slightly lighter */
+    --color-interactive-accent-foreground: 0 0% 25%; /* oklch(0.25 0 0) -> dark gray */
+
+    /* Interactive Colors - Destructive */
+    --color-interactive-destructive-default: 8 75% 55%; /* oklch(0.55 0.22 25) -> #d93025 */
+    --color-interactive-destructive-hover: 8 75% 60%; /* oklch(0.6 0.22 25) -> lighter red */
+    --color-interactive-destructive-foreground: 0 0% 100%; /* oklch(1 0 0) -> white */
+
+    /* Semantic Colors */
+    --color-muted: 0 0% 97%; /* oklch(0.97 0 0) -> very light gray */
+    --color-muted-foreground: 0 0% 50%; /* oklch(0.5 0 0) -> medium gray */
+
+    /* Sidebar Colors */
+    --color-sidebar-background: 0 0% 97.5%; /* oklch(0.975 0 0) -> #f8f8f8 */
+    --color-sidebar-foreground: 0 0% 25%; /* oklch(0.25 0 0) -> dark gray */
+    --color-sidebar-primary: 220 65% 50%; /* oklch(0.5 0.15 250) -> primary blue */
+    --color-sidebar-primary-foreground: 0 0% 100%; /* oklch(1 0 0) -> white */
+    --color-sidebar-accent: 220 40% 95%; /* oklch(0.95 0.02 250) -> light blue */
+    --color-sidebar-accent-foreground: 0 0% 25%; /* oklch(0.25 0 0) -> dark gray */
+    --color-sidebar-border: 0 0% 90%; /* oklch(0.9 0 0) -> light gray */
+
+    /* Typography */
+    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
+
+    --font-size-xs: 0.75rem; /* 12px */
+    --font-size-sm: 0.875rem; /* 14px */
+    --font-size-base: 1rem; /* 16px */
+    --font-size-lg: 1.125rem; /* 18px */
+    --font-size-xl: 1.25rem; /* 20px */
+    --font-size-2xl: 1.5rem; /* 24px */
+    --font-size-3xl: 1.875rem; /* 30px */
+    --font-size-4xl: 2.25rem; /* 36px */
+
+    --line-height-tight: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.75;
+
+    --letter-spacing-tight: -0.025em;
+    --letter-spacing-normal: 0;
+    --letter-spacing-wide: 0.025em;
+
+    /* Spacing */
+    --spacing-0: 0;
+    --spacing-1: 0.25rem; /* 4px */
+    --spacing-2: 0.5rem; /* 8px */
+    --spacing-3: 0.75rem; /* 12px */
+    --spacing-4: 1rem; /* 16px */
+    --spacing-6: 1.5rem; /* 24px */
+    --spacing-8: 2rem; /* 32px */
+    --spacing-12: 3rem; /* 48px */
+    --spacing-16: 4rem; /* 64px */
+
+    /* Effects */
+    --opacity-disabled: 0.5;
+    --opacity-hover: 0.8;
+    --opacity-active: 1;
+
+    /* Shadows */
+    --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+    /* Border Radius */
+    --border-radius-sm: calc(0.375rem - 4px); /* 2px */
+    --border-radius-md: calc(0.375rem - 2px); /* 4px */
+    --border-radius-lg: 0.375rem; /* 6px */
+    --border-radius-xl: calc(0.375rem + 4px); /* 10px */
+    --border-radius-default: 0.375rem; /* 6px */
+
+    /* Animations */
+    --duration-instant: 0ms;
+    --duration-fast: 150ms;
+    --duration-normal: 200ms;
+    --duration-medium: 300ms;
+    --duration-slow: 500ms;
+
+    --easing-linear: linear;
+    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  /* Dark Mode Theme */
+  [data-theme="dark"] {
+    /* Base Colors - Dark Mode */
+    --color-background: 0 0% 10%; /* Dark background */
+    --color-foreground: 0 0% 90%; /* Light text */
+    --color-card: 0 0% 15%; /* Dark card background */
+    --color-card-foreground: 0 0% 90%; /* Light card text */
+    --color-border: 0 0% 25%; /* Dark border */
+    --color-input: 0 0% 25%; /* Dark input border */
+    --color-ring: 220 65% 60%; /* Brighter ring for dark mode */
+
+    /* Interactive Colors - Primary (Dark Mode) */
+    --color-interactive-primary-default: 220 70% 60%; /* Brighter blue for dark mode */
+    --color-interactive-primary-hover: 220 70% 65%; /* Even brighter on hover */
+    --color-interactive-primary-active: 220 70% 55%; /* Slightly darker on active */
+    --color-interactive-primary-disabled: 220 30% 40%; /* Muted blue for dark mode */
+    --color-interactive-primary-foreground: 0 0% 100%; /* White text */
+
+    /* Interactive Colors - Secondary (Dark Mode) */
+    --color-interactive-secondary-default: 220 60% 70%; /* Brighter secondary */
+    --color-interactive-secondary-hover: 220 60% 75%; /* Brighter on hover */
+    --color-interactive-secondary-active: 220 60% 65%; /* Slightly darker on active */
+    --color-interactive-secondary-disabled: 220 30% 50%; /* Muted */
+    --color-interactive-secondary-foreground: 0 0% 100%; /* White text */
+
+    /* Interactive Colors - Accent (Dark Mode) */
+    --color-interactive-accent-default: 220 30% 25%; /* Dark accent */
+    --color-interactive-accent-hover: 220 35% 30%; /* Slightly lighter on hover */
+    --color-interactive-accent-active: 220 25% 20%; /* Darker on active */
+    --color-interactive-accent-foreground: 0 0% 90%; /* Light text */
+
+    /* Interactive Colors - Destructive (Dark Mode) */
+    --color-interactive-destructive-default: 8 75% 60%; /* Brighter red for visibility */
+    --color-interactive-destructive-hover: 8 75% 65%; /* Even brighter on hover */
+    --color-interactive-destructive-foreground: 0 0% 100%; /* White text */
+
+    /* Semantic Colors (Dark Mode) */
+    --color-muted: 0 0% 20%; /* Dark muted background */
+    --color-muted-foreground: 0 0% 60%; /* Lighter muted text */
+
+    /* Sidebar Colors (Dark Mode) */
+    --color-sidebar-background: 0 0% 12%; /* Slightly lighter than background */
+    --color-sidebar-foreground: 0 0% 90%; /* Light text */
+    --color-sidebar-primary: 220 70% 60%; /* Brighter blue */
+    --color-sidebar-primary-foreground: 0 0% 100%; /* White text */
+    --color-sidebar-accent: 220 30% 25%; /* Dark accent */
+    --color-sidebar-accent-foreground: 0 0% 90%; /* Light text */
+    --color-sidebar-border: 0 0% 25%; /* Dark border */
+  }
+
+  /* Base typography */
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans leading-normal;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Focus styles */
+  *:focus-visible {
+    outline: 2px solid hsl(var(--color-ring));
+    outline-offset: 2px;
+  }
+}
+
+@layer utilities {
+  /* Custom utility classes */
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .transition-default {
+    transition: all var(--duration-normal) var(--easing-ease-out);
+  }
+
+  .transition-fast {
+    transition: all var(--duration-fast) var(--easing-ease-out);
+  }
+
+  .transition-medium {
+    transition: all var(--duration-medium) var(--easing-ease-in-out);
+  }
+
+  .transition-slow {
+    transition: all var(--duration-slow) var(--easing-ease-in-out);
+  }
+}
diff --git a/ccw/src/templates/workflow-dashboard.html b/ccw/src/templates/workflow-dashboard.html
index 96744194..4d19d886 100644
--- a/ccw/src/templates/workflow-dashboard.html
+++ b/ccw/src/templates/workflow-dashboard.html
@@ -1,472 +1,193 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Workflow Dashboard - Task Board</title>
+    <!-- Google Fonts: Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: ['class', '[data-theme="dark"]'],
+            safelist: [
+                'bg-card', 'bg-background', 'bg-hover', 'bg-accent', 'bg-muted', 'bg-primary', 'bg-success', 'bg-warning',
+                'bg-success-light', 'bg-warning-light', 'text-foreground', 'text-muted-foreground', 'text-primary',
+                'text-success', 'text-warning', 'text-primary-foreground', 'border', 'border-border', 'border-primary',
+                'border-l-success', 'border-l-warning', 'border-l-muted-foreground', 'rounded', 'rounded-lg', 'rounded-full',
+                'shadow', 'shadow-sm', 'shadow-md', 'p-2', 'p-3', 'p-4', 'p-5', 'px-3', 'px-4', 'py-2', 'py-3',
+                'mb-2', 'mb-3', 'mb-4', 'mt-2', 'mt-4', 'mx-auto', 'gap-2', 'gap-3', 'gap-4', 'space-y-2',
+                'flex', 'flex-1', 'flex-col', 'flex-wrap', 'items-center', 'items-start', 'justify-between', 'justify-center',
+                'grid', 'w-full', 'w-5', 'h-2', 'h-5', 'text-xs', 'text-sm', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
+                'font-medium', 'font-semibold', 'font-bold', 'font-mono', 'truncate', 'uppercase',
+                'hover:shadow-md', 'hover:bg-hover', 'hover:-translate-y-1', 'hover:text-foreground', 'hover:opacity-90',
+                'hover:scale-110', 'transition-all', 'duration-200', 'duration-300', 'cursor-pointer',
+                'opacity-50', 'hidden', 'block', 'relative', 'absolute', 'fixed', 'z-50', 'overflow-hidden',
+                'col-span-full', 'text-center', 'min-h-screen', 'max-w-7xl',
+            ],
+            theme: {
+                extend: {
+                    colors: {
+                        background: 'hsl(var(--background))',
+                        foreground: 'hsl(var(--foreground))',
+                        card: 'hsl(var(--card))',
+                        'card-foreground': 'hsl(var(--card-foreground))',
+                        border: 'hsl(var(--border))',
+                        primary: 'hsl(var(--primary))',
+                        'primary-foreground': 'hsl(var(--primary-foreground))',
+                        accent: 'hsl(var(--accent))',
+                        'accent-foreground': 'hsl(var(--accent-foreground))',
+                        muted: 'hsl(var(--muted))',
+                        'muted-foreground': 'hsl(var(--muted-foreground))',
+                        hover: 'hsl(var(--hover))',
+                        success: 'hsl(var(--success))',
+                        'success-light': 'hsl(var(--success-light))',
+                        warning: 'hsl(var(--warning))',
+                        'warning-light': 'hsl(var(--warning-light))',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+                    },
+                },
+            },
+        }
+    </script>
     <style>
+        /* CSS Custom Properties - Light Mode */
         :root {
-            --bg-primary: #f5f7fa;
-            --bg-secondary: #ffffff;
-            --bg-card: #ffffff;
-            --text-primary: #1a202c;
-            --text-secondary: #718096;
-            --border-color: #e2e8f0;
-            --accent-color: #4299e1;
-            --success-color: #48bb78;
-            --warning-color: #ed8936;
-            --danger-color: #f56565;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --background: 0 0% 98%;
+            --foreground: 0 0% 13%;
+            --card: 0 0% 100%;
+            --card-foreground: 0 0% 13%;
+            --border: 0 0% 90%;
+            --primary: 220 65% 50%;
+            --primary-foreground: 0 0% 100%;
+            --accent: 220 40% 95%;
+            --accent-foreground: 0 0% 13%;
+            --muted: 0 0% 96%;
+            --muted-foreground: 0 0% 45%;
+            --hover: 0 0% 93%;
+            --success: 142 71% 45%;
+            --success-light: 142 76% 90%;
+            --warning: 38 92% 50%;
+            --warning-light: 48 96% 89%;
         }
 
+        /* Dark Mode */
         [data-theme="dark"] {
-            --bg-primary: #1a202c;
-            --bg-secondary: #2d3748;
-            --bg-card: #2d3748;
-            --text-primary: #f7fafc;
-            --text-secondary: #a0aec0;
-            --border-color: #4a5568;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            transition: background-color 0.3s, color 0.3s;
-        }
-
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-
-        header {
-            background-color: var(--bg-secondary);
-            box-shadow: var(--shadow);
-            padding: 20px;
-            margin-bottom: 30px;
-            border-radius: 8px;
-        }
-
-        h1 {
-            font-size: 2rem;
-            margin-bottom: 10px;
-            color: var(--accent-color);
-        }
-
-        .header-controls {
-            display: flex;
-            gap: 15px;
-            flex-wrap: wrap;
-            align-items: center;
-            margin-top: 15px;
-        }
-
-        .search-box {
-            flex: 1;
-            min-width: 250px;
-            position: relative;
-        }
-
-        .search-box input {
-            width: 100%;
-            padding: 10px 15px;
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-            font-size: 0.95rem;
-        }
-
-        .filter-group {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-
-        .btn {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            font-weight: 500;
-            transition: all 0.2s;
-            background-color: var(--bg-card);
-            color: var(--text-primary);
-            border: 1px solid var(--border-color);
-        }
-
-        .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--shadow);
-        }
-
-        .btn.active {
-            background-color: var(--accent-color);
-            color: white;
-            border-color: var(--accent-color);
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-
-        .stat-card {
-            background-color: var(--bg-card);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            transition: transform 0.2s;
-        }
-
-        .stat-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-lg);
-        }
-
-        .stat-value {
-            font-size: 2rem;
-            font-weight: bold;
-            color: var(--accent-color);
-        }
-
-        .stat-label {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            margin-top: 5px;
-        }
-
-        .section {
-            margin-bottom: 40px;
-        }
-
-        .section-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .section-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-        }
-
-        .sessions-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: 20px;
-        }
-
-        .session-card {
-            background-color: var(--bg-card);
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-            padding: 20px;
-            transition: all 0.3s;
-        }
-
-        .session-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-lg);
-        }
-
-        .session-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: start;
-            margin-bottom: 15px;
-        }
-
-        .session-title {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 5px;
-        }
-
-        .session-status {
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
-        .status-active {
-            background-color: #c6f6d5;
-            color: #22543d;
-        }
-
-        .status-archived {
-            background-color: #e2e8f0;
-            color: #4a5568;
-        }
-
-        [data-theme="dark"] .status-active {
-            background-color: #22543d;
-            color: #c6f6d5;
-        }
-
-        [data-theme="dark"] .status-archived {
-            background-color: #4a5568;
-            color: #e2e8f0;
-        }
-
-        .session-meta {
-            display: flex;
-            gap: 15px;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 15px;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 8px;
-            background-color: var(--bg-primary);
-            border-radius: 4px;
-            overflow: hidden;
-            margin: 15px 0;
+            --background: 220 13% 10%;
+            --foreground: 0 0% 90%;
+            --card: 220 13% 14%;
+            --card-foreground: 0 0% 90%;
+            --border: 220 13% 20%;
+            --primary: 220 65% 55%;
+            --primary-foreground: 0 0% 100%;
+            --accent: 220 30% 20%;
+            --accent-foreground: 0 0% 90%;
+            --muted: 220 13% 18%;
+            --muted-foreground: 0 0% 55%;
+            --hover: 220 13% 22%;
+            --success: 142 71% 40%;
+            --success-light: 142 50% 20%;
+            --warning: 38 85% 45%;
+            --warning-light: 40 50% 20%;
         }
 
+        /* Progress bar gradient */
         .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
-            transition: width 0.3s;
+            background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--success)));
         }
 
-        .tasks-list {
-            margin-top: 15px;
-        }
-
-        .task-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-bottom: 8px;
-            background-color: var(--bg-primary);
-            border-radius: 6px;
-            border-left: 3px solid var(--border-color);
-            transition: all 0.2s;
-        }
-
-        .task-item:hover {
-            transform: translateX(4px);
-        }
-
-        .task-item.completed {
-            border-left-color: var(--success-color);
-            opacity: 0.8;
-        }
-
-        .task-item.in_progress {
-            border-left-color: var(--warning-color);
-        }
-
-        .task-item.pending {
-            border-left-color: var(--text-secondary);
-        }
-
-        .task-checkbox {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            border: 2px solid var(--border-color);
-            margin-right: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .task-item.completed .task-checkbox {
-            background-color: var(--success-color);
-            border-color: var(--success-color);
-        }
-
-        .task-item.completed .task-checkbox::after {
-            content: '✓';
-            color: white;
-            font-size: 0.8rem;
-            font-weight: bold;
-        }
-
-        .task-item.in_progress .task-checkbox {
-            border-color: var(--warning-color);
-            background-color: var(--warning-color);
-        }
-
-        .task-item.in_progress .task-checkbox::after {
-            content: '⟳';
-            color: white;
-            font-size: 0.9rem;
-        }
-
-        .task-title {
-            flex: 1;
-            font-size: 0.9rem;
-        }
-
-        .task-id {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            font-family: monospace;
-            margin-left: 10px;
-        }
-
-        .empty-state {
-            text-align: center;
-            padding: 60px 20px;
-            color: var(--text-secondary);
-        }
-
-        .empty-state-icon {
-            font-size: 4rem;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-
-        .theme-toggle {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background-color: var(--accent-color);
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 1.5rem;
-            box-shadow: var(--shadow-lg);
-            transition: all 0.3s;
-            z-index: 1000;
-        }
-
-        .theme-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        @media (max-width: 768px) {
-            .sessions-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .stats-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            h1 {
-                font-size: 1.5rem;
-            }
-
-            .header-controls {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .search-box {
-                width: 100%;
-            }
-        }
-
-        .badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            margin-left: 8px;
-        }
-
-        .badge-count {
-            background-color: var(--accent-color);
-            color: white;
-        }
-
-        .session-footer {
-            margin-top: 15px;
-            padding-top: 15px;
-            border-top: 1px solid var(--border-color);
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-        }
+        /* Task checkbox pseudo-elements */
+        .task-checkbox.completed::after { content: '✓'; }
+        .task-checkbox.in_progress::after { content: '⟳'; }
     </style>
 </head>
-<body>
-    <div class="container">
-        <header>
-            <h1>🚀 Workflow Dashboard</h1>
-            <p style="color: var(--text-secondary);">Task Board - Active and Archived Sessions</p>
+<body class="font-sans bg-background text-foreground leading-normal min-h-screen">
+    <div class="max-w-7xl mx-auto px-5 py-5">
+        <!-- Header -->
+        <header class="bg-card shadow rounded-lg p-5 mb-7 border border-border">
+            <h1 class="text-2xl font-bold text-primary mb-2">🚀 Workflow Dashboard</h1>
+            <p class="text-muted-foreground">Task Board - Active and Archived Sessions</p>
 
-            <div class="header-controls">
-                <div class="search-box">
-                    <input type="text" id="searchInput" placeholder="🔍 Search tasks or sessions..." />
+            <div class="flex flex-wrap gap-4 items-center mt-4">
+                <!-- Search Box -->
+                <div class="flex-1 min-w-[250px] relative">
+                    <input type="text" id="searchInput" placeholder="🔍 Search tasks or sessions..."
+                        class="w-full px-4 py-2.5 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>
 
-                <div class="filter-group">
-                    <button class="btn active" data-filter="all">All</button>
-                    <button class="btn" data-filter="active">Active</button>
-                    <button class="btn" data-filter="archived">Archived</button>
+                <!-- Filter Buttons -->
+                <div class="flex gap-2 flex-wrap">
+                    <button class="btn px-5 py-2.5 border border-border rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:opacity-90 transition-all" data-filter="all">All</button>
+                    <button class="btn px-5 py-2.5 border border-border rounded-lg text-sm font-medium bg-card text-foreground hover:bg-hover transition-all" data-filter="active">Active</button>
+                    <button class="btn px-5 py-2.5 border border-border rounded-lg text-sm font-medium bg-card text-foreground hover:bg-hover transition-all" data-filter="archived">Archived</button>
                 </div>
             </div>
         </header>
 
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="stat-value" id="totalSessions">0</div>
-                <div class="stat-label">Total Sessions</div>
+        <!-- Stats Grid -->
+        <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-5 mb-7">
+            <div class="bg-card p-5 rounded-lg border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                <div class="text-3xl font-bold text-primary" id="totalSessions">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Total Sessions</div>
             </div>
-            <div class="stat-card">
-                <div class="stat-value" id="activeSessions">0</div>
-                <div class="stat-label">Active Sessions</div>
+            <div class="bg-card p-5 rounded-lg border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                <div class="text-3xl font-bold text-primary" id="activeSessionsCount">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Active Sessions</div>
             </div>
-            <div class="stat-card">
-                <div class="stat-value" id="totalTasks">0</div>
-                <div class="stat-label">Total Tasks</div>
+            <div class="bg-card p-5 rounded-lg border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                <div class="text-3xl font-bold text-primary" id="totalTasks">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Total Tasks</div>
             </div>
-            <div class="stat-card">
-                <div class="stat-value" id="completedTasks">0</div>
-                <div class="stat-label">Completed Tasks</div>
+            <div class="bg-card p-5 rounded-lg border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
+                <div class="text-3xl font-bold text-primary" id="completedTasks">0</div>
+                <div class="text-sm text-muted-foreground mt-1">Completed Tasks</div>
             </div>
         </div>
 
-        <div class="section" id="activeSectionContainer">
-            <div class="section-header">
-                <h2 class="section-title">📋 Active Sessions</h2>
+        <!-- Active Sessions Section -->
+        <div class="mb-10" id="activeSectionContainer">
+            <div class="flex justify-between items-center mb-5">
+                <h2 class="text-xl font-semibold text-foreground">📋 Active Sessions</h2>
             </div>
-            <div class="sessions-grid" id="activeSessions"></div>
+            <div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-5" id="activeSessionsGrid"></div>
         </div>
 
-        <div class="section" id="archivedSectionContainer">
-            <div class="section-header">
-                <h2 class="section-title">📦 Archived Sessions</h2>
+        <!-- Archived Sessions Section -->
+        <div class="mb-10" id="archivedSectionContainer">
+            <div class="flex justify-between items-center mb-5">
+                <h2 class="text-xl font-semibold text-foreground">📦 Archived Sessions</h2>
             </div>
-            <div class="sessions-grid" id="archivedSessions"></div>
+            <div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] gap-5" id="archivedSessionsGrid"></div>
         </div>
     </div>
 
-    <button class="theme-toggle" id="themeToggle">🌙</button>
+    <!-- Theme Toggle Button -->
+    <button class="fixed bottom-7 right-7 w-14 h-14 rounded-full bg-primary text-primary-foreground text-2xl shadow-lg hover:scale-110 transition-all duration-200 z-50" id="themeToggle">🌙</button>
+
+    <!-- Workflow data injected by dashboard-generator -->
+    <script id="workflow-data" type="application/json">{{WORKFLOW_DATA}}</script>
 
     <script>
-        // Workflow data will be injected here
-        const workflowData = {{WORKFLOW_DATA}};
+        // Parse workflow data from JSON script tag, with fallback for direct file access
+        let workflowData;
+        try {
+            const dataScript = document.getElementById('workflow-data');
+            const rawData = dataScript ? dataScript.textContent.trim() : '';
+            // Check if placeholder was replaced (doesn't start with '{{')
+            if (rawData && !rawData.startsWith('{{')) {
+                workflowData = JSON.parse(rawData);
+            } else {
+                throw new Error('Data not injected');
+            }
+        } catch (e) {
+            console.warn('Workflow data not injected, using empty defaults');
+            workflowData = { activeSessions: [], archivedSessions: [] };
+        }
 
         // Theme management
         function initTheme() {
@@ -507,15 +228,15 @@
             });
 
             document.getElementById('totalSessions').textContent = stats.totalSessions;
-            document.getElementById('activeSessions').textContent = stats.activeSessions;
+            document.getElementById('activeSessionsCount').textContent = stats.activeSessions;
             document.getElementById('totalTasks').textContent = stats.totalTasks;
             document.getElementById('completedTasks').textContent = stats.completedTasks;
         }
 
-        // Render session card
+        // Render session card with Tailwind classes
         function createSessionCard(session, isActive) {
             const card = document.createElement('div');
-            card.className = 'session-card';
+            card.className = 'bg-card rounded-lg border border-border shadow-sm p-5 transition-all duration-300 hover:-translate-y-1 hover:shadow-md';
             card.dataset.sessionType = isActive ? 'active' : 'archived';
 
             const completedTasks = isActive
@@ -527,49 +248,61 @@
             let tasksHtml = '';
             if (isActive && session.tasks.length > 0) {
                 tasksHtml = `
-                    <div class="tasks-list">
-                        ${session.tasks.map(task => `
-                            <div class="task-item ${task.status}">
-                                <div class="task-checkbox"></div>
-                                <div class="task-title">${task.title || 'Untitled Task'}</div>
-                                <span class="task-id">${task.task_id || ''}</span>
-                            </div>
-                        `).join('')}
+                    <div class="mt-4 space-y-2">
+                        ${session.tasks.map(task => {
+                            const statusClasses = {
+                                completed: 'border-l-success bg-success-light/30',
+                                in_progress: 'border-l-warning bg-warning-light/30',
+                                pending: 'border-l-muted-foreground bg-muted/30'
+                            };
+                            const checkboxClasses = {
+                                completed: 'bg-success border-success text-white',
+                                in_progress: 'border-warning text-warning',
+                                pending: 'border-border'
+                            };
+                            return `
+                                <div class="flex items-center gap-3 p-2.5 rounded border-l-[3px] ${statusClasses[task.status] || statusClasses.pending}">
+                                    <div class="task-checkbox w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-bold flex-shrink-0 ${checkboxClasses[task.status] || checkboxClasses.pending} ${task.status}"></div>
+                                    <div class="flex-1 text-sm text-foreground">${task.title || 'Untitled Task'}</div>
+                                    <span class="text-xs font-mono text-muted-foreground">${task.task_id || ''}</span>
+                                </div>
+                            `;
+                        }).join('')}
                     </div>
                 `;
             }
 
+            const statusBadgeClass = isActive
+                ? 'bg-success-light text-success'
+                : 'bg-hover text-muted-foreground';
+
             card.innerHTML = `
-                <div class="session-header">
+                <div class="flex justify-between items-start mb-4">
                     <div>
-                        <h3 class="session-title">${session.session_id || 'Unknown Session'}</h3>
-                        <div style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px;">
-                            ${session.project || ''}
-                        </div>
+                        <h3 class="text-lg font-semibold text-foreground">${session.session_id || 'Unknown Session'}</h3>
+                        <div class="text-sm text-muted-foreground mt-1">${session.project || ''}</div>
                     </div>
-                    <span class="session-status ${isActive ? 'status-active' : 'status-archived'}">
+                    <span class="px-3 py-1 text-xs font-semibold uppercase rounded-full ${statusBadgeClass}">
                         ${isActive ? 'Active' : 'Archived'}
                     </span>
                 </div>
 
-                <div class="session-meta">
+                <div class="flex gap-4 text-sm text-muted-foreground mb-3">
                     <span>📅 ${session.created_at || session.archived_at || 'N/A'}</span>
                     <span>📊 ${completedTasks}/${totalTasks} tasks</span>
                 </div>
 
                 ${totalTasks > 0 ? `
-                    <div class="progress-bar">
-                        <div class="progress-fill" style="width: ${progress}%"></div>
-                    </div>
-                    <div style="text-align: center; font-size: 0.85rem; color: var(--text-secondary);">
-                        ${Math.round(progress)}% Complete
+                    <div class="h-2 bg-hover rounded overflow-hidden my-4">
+                        <div class="progress-fill h-full rounded transition-all duration-300" style="width: ${progress}%"></div>
                     </div>
+                    <div class="text-center text-sm text-muted-foreground">${Math.round(progress)}% Complete</div>
                 ` : ''}
 
                 ${tasksHtml}
 
                 ${!isActive && session.archive_path ? `
-                    <div class="session-footer">
+                    <div class="mt-4 pt-4 border-t border-border text-sm text-muted-foreground">
                         📁 Archive: ${session.archive_path}
                     </div>
                 ` : ''}
@@ -580,8 +313,8 @@
 
         // Render all sessions
         function renderSessions(filter = 'all') {
-            const activeContainer = document.getElementById('activeSessions');
-            const archivedContainer = document.getElementById('archivedSessions');
+            const activeContainer = document.getElementById('activeSessionsGrid');
+            const archivedContainer = document.getElementById('archivedSessionsGrid');
 
             activeContainer.innerHTML = '';
             archivedContainer.innerHTML = '';
@@ -589,8 +322,8 @@
             if (filter === 'all' || filter === 'active') {
                 if (workflowData.activeSessions.length === 0) {
                     activeContainer.innerHTML = `
-                        <div class="empty-state">
-                            <div class="empty-state-icon">📭</div>
+                        <div class="text-center py-16 text-muted-foreground col-span-full">
+                            <div class="text-5xl mb-4 opacity-50">📭</div>
                             <p>No active sessions</p>
                         </div>
                     `;
@@ -604,8 +337,8 @@
             if (filter === 'all' || filter === 'archived') {
                 if (workflowData.archivedSessions.length === 0) {
                     archivedContainer.innerHTML = `
-                        <div class="empty-state">
-                            <div class="empty-state-icon">📦</div>
+                        <div class="text-center py-16 text-muted-foreground col-span-full">
+                            <div class="text-5xl mb-4 opacity-50">📦</div>
                             <p>No archived sessions</p>
                         </div>
                     `;
@@ -628,7 +361,7 @@
             const searchInput = document.getElementById('searchInput');
             searchInput.addEventListener('input', (e) => {
                 const query = e.target.value.toLowerCase();
-                const cards = document.querySelectorAll('.session-card');
+                const cards = document.querySelectorAll('[data-session-type]');
 
                 cards.forEach(card => {
                     const text = card.textContent.toLowerCase();
@@ -642,8 +375,12 @@
             const filterButtons = document.querySelectorAll('[data-filter]');
             filterButtons.forEach(btn => {
                 btn.addEventListener('click', () => {
-                    filterButtons.forEach(b => b.classList.remove('active'));
-                    btn.classList.add('active');
+                    filterButtons.forEach(b => {
+                        b.classList.remove('bg-primary', 'text-primary-foreground');
+                        b.classList.add('bg-card', 'text-foreground');
+                    });
+                    btn.classList.remove('bg-card', 'text-foreground');
+                    btn.classList.add('bg-primary', 'text-primary-foreground');
                     renderSessions(btn.dataset.filter);
                 });
             });
@@ -661,4 +398,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/ccw/src/templates/workflow-dashboard.html.backup b/ccw/src/templates/workflow-dashboard.html.backup
new file mode 100644
index 00000000..96744194
--- /dev/null
+++ b/ccw/src/templates/workflow-dashboard.html.backup
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Workflow Dashboard - Task Board</title>
+    <style>
+        :root {
+            --bg-primary: #f5f7fa;
+            --bg-secondary: #ffffff;
+            --bg-card: #ffffff;
+            --text-primary: #1a202c;
+            --text-secondary: #718096;
+            --border-color: #e2e8f0;
+            --accent-color: #4299e1;
+            --success-color: #48bb78;
+            --warning-color: #ed8936;
+            --danger-color: #f56565;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        [data-theme="dark"] {
+            --bg-primary: #1a202c;
+            --bg-secondary: #2d3748;
+            --bg-card: #2d3748;
+            --text-primary: #f7fafc;
+            --text-secondary: #a0aec0;
+            --border-color: #4a5568;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            background-color: var(--bg-secondary);
+            box-shadow: var(--shadow);
+            padding: 20px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: var(--accent-color);
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-top: 15px;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 250px;
+            position: relative;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .filter-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            background-color: var(--bg-card);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow);
+        }
+
+        .btn.active {
+            background-color: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .stat-card {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            transition: transform 0.2s;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: var(--accent-color);
+        }
+
+        .stat-label {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .section {
+            margin-bottom: 40px;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .sessions-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 20px;
+        }
+
+        .session-card {
+            background-color: var(--bg-card);
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            padding: 20px;
+            transition: all 0.3s;
+        }
+
+        .session-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .session-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 15px;
+        }
+
+        .session-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 5px;
+        }
+
+        .session-status {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .status-active {
+            background-color: #c6f6d5;
+            color: #22543d;
+        }
+
+        .status-archived {
+            background-color: #e2e8f0;
+            color: #4a5568;
+        }
+
+        [data-theme="dark"] .status-active {
+            background-color: #22543d;
+            color: #c6f6d5;
+        }
+
+        [data-theme="dark"] .status-archived {
+            background-color: #4a5568;
+            color: #e2e8f0;
+        }
+
+        .session-meta {
+            display: flex;
+            gap: 15px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background-color: var(--bg-primary);
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 15px 0;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+            transition: width 0.3s;
+        }
+
+        .tasks-list {
+            margin-top: 15px;
+        }
+
+        .task-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 8px;
+            background-color: var(--bg-primary);
+            border-radius: 6px;
+            border-left: 3px solid var(--border-color);
+            transition: all 0.2s;
+        }
+
+        .task-item:hover {
+            transform: translateX(4px);
+        }
+
+        .task-item.completed {
+            border-left-color: var(--success-color);
+            opacity: 0.8;
+        }
+
+        .task-item.in_progress {
+            border-left-color: var(--warning-color);
+        }
+
+        .task-item.pending {
+            border-left-color: var(--text-secondary);
+        }
+
+        .task-checkbox {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 2px solid var(--border-color);
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .task-item.completed .task-checkbox {
+            background-color: var(--success-color);
+            border-color: var(--success-color);
+        }
+
+        .task-item.completed .task-checkbox::after {
+            content: '✓';
+            color: white;
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+
+        .task-item.in_progress .task-checkbox {
+            border-color: var(--warning-color);
+            background-color: var(--warning-color);
+        }
+
+        .task-item.in_progress .task-checkbox::after {
+            content: '⟳';
+            color: white;
+            font-size: 0.9rem;
+        }
+
+        .task-title {
+            flex: 1;
+            font-size: 0.9rem;
+        }
+
+        .task-id {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            font-family: monospace;
+            margin-left: 10px;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        .theme-toggle {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            box-shadow: var(--shadow-lg);
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        @media (max-width: 768px) {
+            .sessions-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .header-controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .search-box {
+                width: 100%;
+            }
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            margin-left: 8px;
+        }
+
+        .badge-count {
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .session-footer {
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid var(--border-color);
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🚀 Workflow Dashboard</h1>
+            <p style="color: var(--text-secondary);">Task Board - Active and Archived Sessions</p>
+
+            <div class="header-controls">
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="🔍 Search tasks or sessions..." />
+                </div>
+
+                <div class="filter-group">
+                    <button class="btn active" data-filter="all">All</button>
+                    <button class="btn" data-filter="active">Active</button>
+                    <button class="btn" data-filter="archived">Archived</button>
+                </div>
+            </div>
+        </header>
+
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-value" id="totalSessions">0</div>
+                <div class="stat-label">Total Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="activeSessions">0</div>
+                <div class="stat-label">Active Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="totalTasks">0</div>
+                <div class="stat-label">Total Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="completedTasks">0</div>
+                <div class="stat-label">Completed Tasks</div>
+            </div>
+        </div>
+
+        <div class="section" id="activeSectionContainer">
+            <div class="section-header">
+                <h2 class="section-title">📋 Active Sessions</h2>
+            </div>
+            <div class="sessions-grid" id="activeSessions"></div>
+        </div>
+
+        <div class="section" id="archivedSectionContainer">
+            <div class="section-header">
+                <h2 class="section-title">📦 Archived Sessions</h2>
+            </div>
+            <div class="sessions-grid" id="archivedSessions"></div>
+        </div>
+    </div>
+
+    <button class="theme-toggle" id="themeToggle">🌙</button>
+
+    <script>
+        // Workflow data will be injected here
+        const workflowData = {{WORKFLOW_DATA}};
+
+        // Theme management
+        function initTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeIcon(savedTheme);
+        }
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeIcon(newTheme);
+        }
+
+        function updateThemeIcon(theme) {
+            document.getElementById('themeToggle').textContent = theme === 'dark' ? '☀️' : '🌙';
+        }
+
+        // Statistics calculation
+        function updateStatistics() {
+            const stats = {
+                totalSessions: workflowData.activeSessions.length + workflowData.archivedSessions.length,
+                activeSessions: workflowData.activeSessions.length,
+                totalTasks: 0,
+                completedTasks: 0
+            };
+
+            workflowData.activeSessions.forEach(session => {
+                stats.totalTasks += session.tasks.length;
+                stats.completedTasks += session.tasks.filter(t => t.status === 'completed').length;
+            });
+
+            workflowData.archivedSessions.forEach(session => {
+                stats.totalTasks += session.taskCount || 0;
+                stats.completedTasks += session.taskCount || 0;
+            });
+
+            document.getElementById('totalSessions').textContent = stats.totalSessions;
+            document.getElementById('activeSessions').textContent = stats.activeSessions;
+            document.getElementById('totalTasks').textContent = stats.totalTasks;
+            document.getElementById('completedTasks').textContent = stats.completedTasks;
+        }
+
+        // Render session card
+        function createSessionCard(session, isActive) {
+            const card = document.createElement('div');
+            card.className = 'session-card';
+            card.dataset.sessionType = isActive ? 'active' : 'archived';
+
+            const completedTasks = isActive
+                ? session.tasks.filter(t => t.status === 'completed').length
+                : (session.taskCount || 0);
+            const totalTasks = isActive ? session.tasks.length : (session.taskCount || 0);
+            const progress = totalTasks > 0 ? (completedTasks / totalTasks * 100) : 0;
+
+            let tasksHtml = '';
+            if (isActive && session.tasks.length > 0) {
+                tasksHtml = `
+                    <div class="tasks-list">
+                        ${session.tasks.map(task => `
+                            <div class="task-item ${task.status}">
+                                <div class="task-checkbox"></div>
+                                <div class="task-title">${task.title || 'Untitled Task'}</div>
+                                <span class="task-id">${task.task_id || ''}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+            }
+
+            card.innerHTML = `
+                <div class="session-header">
+                    <div>
+                        <h3 class="session-title">${session.session_id || 'Unknown Session'}</h3>
+                        <div style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px;">
+                            ${session.project || ''}
+                        </div>
+                    </div>
+                    <span class="session-status ${isActive ? 'status-active' : 'status-archived'}">
+                        ${isActive ? 'Active' : 'Archived'}
+                    </span>
+                </div>
+
+                <div class="session-meta">
+                    <span>📅 ${session.created_at || session.archived_at || 'N/A'}</span>
+                    <span>📊 ${completedTasks}/${totalTasks} tasks</span>
+                </div>
+
+                ${totalTasks > 0 ? `
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${progress}%"></div>
+                    </div>
+                    <div style="text-align: center; font-size: 0.85rem; color: var(--text-secondary);">
+                        ${Math.round(progress)}% Complete
+                    </div>
+                ` : ''}
+
+                ${tasksHtml}
+
+                ${!isActive && session.archive_path ? `
+                    <div class="session-footer">
+                        📁 Archive: ${session.archive_path}
+                    </div>
+                ` : ''}
+            `;
+
+            return card;
+        }
+
+        // Render all sessions
+        function renderSessions(filter = 'all') {
+            const activeContainer = document.getElementById('activeSessions');
+            const archivedContainer = document.getElementById('archivedSessions');
+
+            activeContainer.innerHTML = '';
+            archivedContainer.innerHTML = '';
+
+            if (filter === 'all' || filter === 'active') {
+                if (workflowData.activeSessions.length === 0) {
+                    activeContainer.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📭</div>
+                            <p>No active sessions</p>
+                        </div>
+                    `;
+                } else {
+                    workflowData.activeSessions.forEach(session => {
+                        activeContainer.appendChild(createSessionCard(session, true));
+                    });
+                }
+            }
+
+            if (filter === 'all' || filter === 'archived') {
+                if (workflowData.archivedSessions.length === 0) {
+                    archivedContainer.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📦</div>
+                            <p>No archived sessions</p>
+                        </div>
+                    `;
+                } else {
+                    workflowData.archivedSessions.forEach(session => {
+                        archivedContainer.appendChild(createSessionCard(session, false));
+                    });
+                }
+            }
+
+            // Show/hide sections
+            document.getElementById('activeSectionContainer').style.display =
+                (filter === 'all' || filter === 'active') ? 'block' : 'none';
+            document.getElementById('archivedSectionContainer').style.display =
+                (filter === 'all' || filter === 'archived') ? 'block' : 'none';
+        }
+
+        // Search functionality
+        function setupSearch() {
+            const searchInput = document.getElementById('searchInput');
+            searchInput.addEventListener('input', (e) => {
+                const query = e.target.value.toLowerCase();
+                const cards = document.querySelectorAll('.session-card');
+
+                cards.forEach(card => {
+                    const text = card.textContent.toLowerCase();
+                    card.style.display = text.includes(query) ? 'block' : 'none';
+                });
+            });
+        }
+
+        // Filter functionality
+        function setupFilters() {
+            const filterButtons = document.querySelectorAll('[data-filter]');
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    filterButtons.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    renderSessions(btn.dataset.filter);
+                });
+            });
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            initTheme();
+            updateStatistics();
+            renderSessions();
+            setupSearch();
+            setupFilters();
+
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ccw/tailwind.config.js b/ccw/tailwind.config.js
new file mode 100644
index 00000000..48a3cf33
--- /dev/null
+++ b/ccw/tailwind.config.js
@@ -0,0 +1,156 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/templates/**/*.html",
+    "./src/**/*.py",
+    "./static/**/*.js",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Base colors
+        background: "hsl(var(--color-background))",
+        foreground: "hsl(var(--color-foreground))",
+        card: {
+          DEFAULT: "hsl(var(--color-card))",
+          foreground: "hsl(var(--color-card-foreground))",
+        },
+        border: "hsl(var(--color-border))",
+        input: "hsl(var(--color-input))",
+        ring: "hsl(var(--color-ring))",
+
+        // Interactive colors
+        primary: {
+          DEFAULT: "hsl(var(--color-interactive-primary-default))",
+          hover: "hsl(var(--color-interactive-primary-hover))",
+          active: "hsl(var(--color-interactive-primary-active))",
+          disabled: "hsl(var(--color-interactive-primary-disabled))",
+          foreground: "hsl(var(--color-interactive-primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--color-interactive-secondary-default))",
+          hover: "hsl(var(--color-interactive-secondary-hover))",
+          active: "hsl(var(--color-interactive-secondary-active))",
+          disabled: "hsl(var(--color-interactive-secondary-disabled))",
+          foreground: "hsl(var(--color-interactive-secondary-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--color-interactive-accent-default))",
+          hover: "hsl(var(--color-interactive-accent-hover))",
+          active: "hsl(var(--color-interactive-accent-active))",
+          foreground: "hsl(var(--color-interactive-accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--color-interactive-destructive-default))",
+          hover: "hsl(var(--color-interactive-destructive-hover))",
+          foreground: "hsl(var(--color-interactive-destructive-foreground))",
+        },
+
+        // Semantic colors
+        muted: {
+          DEFAULT: "hsl(var(--color-muted))",
+          foreground: "hsl(var(--color-muted-foreground))",
+        },
+
+        // Sidebar colors
+        sidebar: {
+          background: "hsl(var(--color-sidebar-background))",
+          foreground: "hsl(var(--color-sidebar-foreground))",
+          primary: "hsl(var(--color-sidebar-primary))",
+          "primary-foreground": "hsl(var(--color-sidebar-primary-foreground))",
+          accent: "hsl(var(--color-sidebar-accent))",
+          "accent-foreground": "hsl(var(--color-sidebar-accent-foreground))",
+          border: "hsl(var(--color-sidebar-border))",
+        },
+      },
+
+      fontFamily: {
+        sans: ["var(--font-sans)", "Inter", "system-ui", "-apple-system", "sans-serif"],
+        mono: ["var(--font-mono)", "Consolas", "Monaco", "Courier New", "monospace"],
+      },
+
+      fontSize: {
+        xs: "var(--font-size-xs)",
+        sm: "var(--font-size-sm)",
+        base: "var(--font-size-base)",
+        lg: "var(--font-size-lg)",
+        xl: "var(--font-size-xl)",
+        "2xl": "var(--font-size-2xl)",
+        "3xl": "var(--font-size-3xl)",
+        "4xl": "var(--font-size-4xl)",
+      },
+
+      lineHeight: {
+        tight: "var(--line-height-tight)",
+        normal: "var(--line-height-normal)",
+        relaxed: "var(--line-height-relaxed)",
+      },
+
+      letterSpacing: {
+        tight: "var(--letter-spacing-tight)",
+        normal: "var(--letter-spacing-normal)",
+        wide: "var(--letter-spacing-wide)",
+      },
+
+      spacing: {
+        0: "var(--spacing-0)",
+        1: "var(--spacing-1)",
+        2: "var(--spacing-2)",
+        3: "var(--spacing-3)",
+        4: "var(--spacing-4)",
+        6: "var(--spacing-6)",
+        8: "var(--spacing-8)",
+        12: "var(--spacing-12)",
+        16: "var(--spacing-16)",
+      },
+
+      borderRadius: {
+        sm: "var(--border-radius-sm)",
+        md: "var(--border-radius-md)",
+        lg: "var(--border-radius-lg)",
+        xl: "var(--border-radius-xl)",
+        DEFAULT: "var(--border-radius-default)",
+      },
+
+      boxShadow: {
+        "2xs": "var(--shadow-2xs)",
+        xs: "var(--shadow-xs)",
+        sm: "var(--shadow-sm)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        xl: "var(--shadow-xl)",
+      },
+
+      opacity: {
+        disabled: "var(--opacity-disabled)",
+        hover: "var(--opacity-hover)",
+        active: "var(--opacity-active)",
+      },
+
+      transitionDuration: {
+        instant: "var(--duration-instant)",
+        fast: "var(--duration-fast)",
+        normal: "var(--duration-normal)",
+        medium: "var(--duration-medium)",
+        slow: "var(--duration-slow)",
+      },
+
+      transitionTimingFunction: {
+        linear: "var(--easing-linear)",
+        "ease-in": "var(--easing-ease-in)",
+        "ease-out": "var(--easing-ease-out)",
+        "ease-in-out": "var(--easing-ease-in-out)",
+        spring: "var(--easing-spring)",
+      },
+
+      animation: {
+        // Add custom animations here if needed
+      },
+
+      keyframes: {
+        // Add custom keyframes here if needed
+      },
+    },
+  },
+  plugins: [],
+}