Add enhanced styles for the review tab, including layout, buttons, and responsive design

Author: catlog22

ccw/src/core/dashboard-generator.js

@@ -8,10 +8,22 @@ const __dirname = dirname(__filename);
 // Bundled template paths
 const UNIFIED_TEMPLATE = join(__dirname, '../templates/dashboard.html');
 const JS_FILE = join(__dirname, '../templates/dashboard.js');
-const CSS_FILE = join(__dirname, '../templates/dashboard.css');
+const MODULE_CSS_DIR = join(__dirname, '../templates/dashboard-css');
 const WORKFLOW_TEMPLATE = join(__dirname, '../templates/workflow-dashboard.html');
 const REVIEW_TEMPLATE = join(__dirname, '../templates/review-cycle-dashboard.html');
 
+// Modular CSS files in load order
+const MODULE_CSS_FILES = [
+  '01-base.css',
+  '02-session.css',
+  '03-tasks.css',
+  '04-lite-tasks.css',
+  '05-context.css',
+  '06-cards.css',
+  '07-managers.css',
+  '08-review.css'
+];
+
 const MODULE_FILES = [
   'utils.js',
   'state.js',
@@ -63,8 +75,11 @@ export async function generateDashboard(data) {
 function generateFromUnifiedTemplate(data) {
   let html = readFileSync(UNIFIED_TEMPLATE, 'utf8');
 
-  // Read CSS file
-  let cssContent = existsSync(CSS_FILE) ? readFileSync(CSS_FILE, 'utf8') : '';
+  // Read and concatenate modular CSS files in load order
+  let cssContent = MODULE_CSS_FILES.map(file => {
+    const filePath = join(MODULE_CSS_DIR, file);
+    return existsSync(filePath) ? readFileSync(filePath, 'utf8') : '';
+  }).join('\n\n');
 
   // Read JS content
   let jsContent = '';

ccw/src/core/server.js

@@ -31,10 +31,22 @@ function getEnterpriseMcpPath() {
 const wsClients = new Set();
 
 const TEMPLATE_PATH = join(import.meta.dirname, '../templates/dashboard.html');
-const CSS_FILE = join(import.meta.dirname, '../templates/dashboard.css');
+const MODULE_CSS_DIR = join(import.meta.dirname, '../templates/dashboard-css');
 const JS_FILE = join(import.meta.dirname, '../templates/dashboard.js');
 const MODULE_JS_DIR = join(import.meta.dirname, '../templates/dashboard-js');
 
+// Modular CSS files in load order
+const MODULE_CSS_FILES = [
+  '01-base.css',
+  '02-session.css',
+  '03-tasks.css',
+  '04-lite-tasks.css',
+  '05-context.css',
+  '06-cards.css',
+  '07-managers.css',
+  '08-review.css'
+];
+
 /**
  * Handle POST request with JSON body
  */
@@ -965,8 +977,11 @@ async function updateTaskStatus(sessionPath, taskId, newStatus) {
 function generateServerDashboard(initialPath) {
   let html = readFileSync(TEMPLATE_PATH, 'utf8');
 
-  // Read CSS file
-  const cssContent = existsSync(CSS_FILE) ? readFileSync(CSS_FILE, 'utf8') : '';
+  // Read and concatenate modular CSS files in load order
+  const cssContent = MODULE_CSS_FILES.map(file => {
+    const filePath = join(MODULE_CSS_DIR, file);
+    return existsSync(filePath) ? readFileSync(filePath, 'utf8') : '';
+  }).join('\n\n');
 
   // Read and concatenate modular JS files in dependency order
   let jsContent = MODULE_FILES.map(file => {