feat: Enhance Project Overview and Review Session pages with improved UI and functionality

- Updated ProjectOverviewPage to enhance the guidelines section with better spacing, larger icons, and improved button styles.
- Refactored ReviewSessionPage to unify filter controls, improve selection actions, and enhance the findings list with a new layout.
- Added dimension tabs and severity filters to the SessionsPage for better navigation and filtering.
- Improved SessionDetailPage to utilize a mapping for status labels, enhancing internationalization support.
- Refactored TaskListTab to remove unused priority configuration code.
- Updated store types to better reflect session metadata structure.
- Added a temporary JSON file for future use.

Author: catlog22

ccw/frontend/src/components/dashboard/widgets/WorkflowTaskWidget.tsx

@@ -76,18 +76,18 @@ const statusLabelKeys: Record<SessionMetadata['status'], string> = {
   paused: 'sessions.status.paused',
 };
 
-// Type variant configuration for session type badges
+// Type variant configuration for session type badges (unique colors for each type)
 const typeVariantConfig: Record<
   SessionMetadata['type'],
-  { variant: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info'; icon: React.ElementType }
+  { variant: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'review'; icon: React.ElementType }
 > = {
-  review: { variant: 'info', icon: Search },
-  'tdd': { variant: 'success', icon: TestTube },
-  test: { variant: 'default', icon: FileText },
-  docs: { variant: 'warning', icon: File },
-  workflow: { variant: 'secondary', icon: Settings },
-  'lite-plan': { variant: 'default', icon: FileText },
-  'lite-fix': { variant: 'warning', icon: Zap },
+  review: { variant: 'review', icon: Search },       // Purple
+  'tdd': { variant: 'success', icon: TestTube },    // Green
+  test: { variant: 'info', icon: FileText },        // Blue
+  docs: { variant: 'warning', icon: File },         // Orange/Yellow
+  workflow: { variant: 'default', icon: Settings }, // Primary (blue-violet)
+  'lite-plan': { variant: 'secondary', icon: FileText }, // Gray/Neutral
+  'lite-fix': { variant: 'destructive', icon: Zap },    // Red
 };
 
 // Type label keys for i18n
@@ -149,6 +149,43 @@ function calculateProgress(tasks: SessionMetadata['tasks']): TaskStatusBreakdown
   return { total, completed, failed, pending, inProgress, percentage };
 }
 
+/**
+ * Severity breakdown for review sessions
+ */
+interface SeverityBreakdown {
+  total: number;
+  critical: number;
+  high: number;
+  medium: number;
+  low: number;
+}
+
+/**
+ * Calculate severity breakdown from review dimensions
+ */
+function calculateSeverityBreakdown(review: SessionMetadata['review']): SeverityBreakdown {
+  if (!review?.dimensions || review.dimensions.length === 0) {
+    return { total: 0, critical: 0, high: 0, medium: 0, low: 0 };
+  }
+
+  let critical = 0, high = 0, medium = 0, low = 0;
+
+  review.dimensions.forEach(dim => {
+    if (dim.findings) {
+      dim.findings.forEach(finding => {
+        const severity = finding.severity?.toLowerCase();
+        if (severity === 'critical') critical++;
+        else if (severity === 'high') high++;
+        else if (severity === 'medium') medium++;
+        else if (severity === 'low') low++;
+      });
+    }
+  });
+
+  const total = critical + high + medium + low;
+  return { total, critical, high, medium, low };
+}
+
 /**
  * SessionCard component for displaying session information
  *
@@ -188,6 +225,7 @@ export function SessionCard({
     : null;
 
   const progress = calculateProgress(session.tasks);
+  const severity = calculateSeverityBreakdown(session.review);
   const isPlanning = session.status === 'planning';
   const isArchived = session.status === 'archived' || session.location === 'archived';
 
@@ -227,21 +265,24 @@ export function SessionCard({
       onClick={handleCardClick}
     >
       <CardContent className="p-4">
-        {/* Header - Session ID as title */}
+        {/* Header - Type badge + Session ID as title */}
         <div className="flex items-start justify-between gap-2 mb-2">
           <div className="flex-1 min-w-0">
-            <h3 className="font-bold text-card-foreground text-sm tracking-wide uppercase truncate">
-              {session.session_id}
-            </h3>
+            <div className="flex items-center gap-2 mb-1">
+              {/* Type badge BEFORE title */}
+              {typeConfig && typeLabel && (
+                <Badge variant={typeConfig.variant} className="gap-1 flex-shrink-0">
+                  <typeConfig.icon className="h-3 w-3" />
+                  {typeLabel}
+                </Badge>
+              )}
+              <h3 className="font-bold text-card-foreground text-sm tracking-wide uppercase truncate">
+                {session.session_id}
+              </h3>
+            </div>
           </div>
           <div className="flex items-center gap-2 flex-shrink-0">
             <Badge variant={statusVariant}>{statusLabel}</Badge>
-            {typeConfig && typeLabel && (
-              <Badge variant={typeConfig.variant} className="gap-1">
-                <typeConfig.icon className="h-3 w-3" />
-                {typeLabel}
-              </Badge>
-            )}
             {showActions && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -291,21 +332,46 @@ export function SessionCard({
           </p>
         )}
 
-        {/* Meta info - enriched */}
+        {/* Meta info - different based on session type */}
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground">
           <span className="flex items-center gap-1">
             <Calendar className="h-3.5 w-3.5" />
             {formatDate(session.created_at)}
           </span>
-          <span className="flex items-center gap-1">
-            <ListChecks className="h-3.5 w-3.5" />
-            {progress.total} {formatMessage({ id: 'sessions.card.tasks' })}
-          </span>
-          {progress.total > 0 && (
-            <span className="flex items-center gap-1">
-              <CheckCircle2 className="h-3.5 w-3.5 text-success" />
-              {progress.completed} {formatMessage({ id: 'sessions.card.completed' })}
-            </span>
+
+          {/* Review sessions: Show findings and dimensions */}
+          {session.type === 'review' ? (
+            <>
+              {session.review?.dimensions && session.review.dimensions.length > 0 && (
+                <span className="flex items-center gap-1">
+                  <Search className="h-3.5 w-3.5" />
+                  {session.review.dimensions.length} {formatMessage({ id: 'sessions.card.dimensions' })}
+                </span>
+              )}
+              {session.review?.findings !== undefined && (
+                <span className="flex items-center gap-1">
+                  <FileText className="h-3.5 w-3.5" />
+                  {typeof session.review.findings === 'number'
+                    ? session.review.findings
+                    : session.review.dimensions?.reduce((sum, dim) => sum + (dim.findings?.length || 0), 0) || 0
+                  } {formatMessage({ id: 'sessions.card.findings' })}
+                </span>
+              )}
+            </>
+          ) : (
+            <>
+              {/* Workflow/other sessions: Show tasks */}
+              <span className="flex items-center gap-1">
+                <ListChecks className="h-3.5 w-3.5" />
+                {progress.total} {formatMessage({ id: 'sessions.card.tasks' })}
+              </span>
+              {progress.total > 0 && (
+                <span className="flex items-center gap-1">
+                  <CheckCircle2 className="h-3.5 w-3.5 text-success" />
+                  {progress.completed} {formatMessage({ id: 'sessions.card.completed' })}
+                </span>
+              )}
+            </>
           )}
           {session.updated_at && session.updated_at !== session.created_at && (
             <span className="flex items-center gap-1">
@@ -315,15 +381,9 @@ export function SessionCard({
           )}
         </div>
 
-        {/* Task status badges */}
-        {progress.total > 0 && (
+        {/* Task status badges - only for non-review sessions */}
+        {session.type !== 'review' && progress.total > 0 && (
           <div className="flex flex-wrap items-center gap-1.5 mt-2">
-            {progress.pending > 0 && (
-              <Badge variant="warning" className="gap-1 px-1.5 py-0 text-[10px]">
-                <Clock className="h-3 w-3" />
-                {progress.pending} {formatMessage({ id: 'sessions.taskStatus.pending' })}
-              </Badge>
-            )}
             {progress.inProgress > 0 && (
               <Badge variant="info" className="gap-1 px-1.5 py-0 text-[10px]">
                 <RefreshCw className="h-3 w-3" />
@@ -345,8 +405,38 @@ export function SessionCard({
           </div>
         )}
 
-        {/* Progress bar (only show if not planning and has tasks) */}
-        {progress.total > 0 && !isPlanning && (
+        {/* Severity badges - only for review sessions */}
+        {session.type === 'review' && severity.total > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 mt-2">
+            {severity.critical > 0 && (
+              <Badge variant="destructive" className="gap-1 px-1.5 py-0 text-[10px]">
+                <AlertCircle className="h-3 w-3" />
+                {severity.critical} Critical
+              </Badge>
+            )}
+            {severity.high > 0 && (
+              <Badge variant="warning" className="gap-1 px-1.5 py-0 text-[10px]">
+                <AlertCircle className="h-3 w-3" />
+                {severity.high} High
+              </Badge>
+            )}
+            {severity.medium > 0 && (
+              <Badge variant="info" className="gap-1 px-1.5 py-0 text-[10px]">
+                <Search className="h-3 w-3" />
+                {severity.medium} Medium
+              </Badge>
+            )}
+            {severity.low > 0 && (
+              <Badge variant="secondary" className="gap-1 px-1.5 py-0 text-[10px]">
+                <FileText className="h-3 w-3" />
+                {severity.low} Low
+              </Badge>
+            )}
+          </div>
+        )}
+
+        {/* Progress bar (only show for non-review sessions with tasks) */}
+        {session.type !== 'review' && progress.total > 0 && !isPlanning && (
           <div className="mt-3">
             <div className="flex items-center justify-between text-xs mb-1">
               <span className="text-muted-foreground">{formatMessage({ id: 'sessions.card.progress' })}</span>

ccw/frontend/src/components/shared/SessionCard.tsx

@@ -248,10 +248,54 @@ function transformBackendSession(
   }
 
   // Preserve type field from backend, or infer from session_id pattern
-  // Multi-level type detection: backend.type > infer from name
-  const sessionType = (backendSession.type as SessionMetadata['type']) ||
+  // Multi-level type detection: backend.type > hasReview (for review sessions) > infer from name
+  let sessionType = (backendSession.type as SessionMetadata['type']) ||
     inferTypeFromName(backendSession.session_id);
 
+  // Transform backend review data to frontend format
+  // Backend has: hasReview, reviewSummary, reviewDimensions (separate fields)
+  // Frontend expects: review object with dimensions, findings count, etc.
+  const backendData = backendSession as unknown as {
+    hasReview?: boolean;
+    reviewSummary?: {
+      phase?: string;
+      severityDistribution?: Record<string, number>;
+      criticalFiles?: string[];
+      status?: string;
+    };
+    reviewDimensions?: Array<{
+      name: string;
+      findings?: Array<{ severity?: string }>;
+      summary?: unknown;
+      status?: string;
+    }>;
+  };
+
+  let review: SessionMetadata['review'] | undefined;
+  if (backendData.hasReview) {
+    // If session has review data but type is not 'review', auto-fix the type
+    if (sessionType !== 'review') {
+      sessionType = 'review';
+    }
+
+    // Build review object from backend data
+    const dimensions = backendData.reviewDimensions || [];
+    const totalFindings = dimensions.reduce(
+      (sum, dim) => sum + (dim.findings?.length || 0), 0
+    );
+
+    review = {
+      dimensions: dimensions.map(dim => ({
+        name: dim.name,
+        findings: dim.findings || []
+      })),
+      dimensions_count: dimensions.length,
+      findings: totalFindings,
+      iterations: undefined,
+      fixes: undefined
+    };
+  }
+
   return {
     session_id: backendSession.session_id,
     type: sessionType,
@@ -265,8 +309,8 @@ function transformBackendSession(
     // Preserve additional fields if they exist
     has_plan: (backendSession as unknown as { has_plan?: boolean }).has_plan,
     plan_updated_at: (backendSession as unknown as { plan_updated_at?: string }).plan_updated_at,
-    has_review: (backendSession as unknown as { has_review?: boolean }).has_review,
-    review: (backendSession as unknown as { review?: SessionMetadata['review'] }).review,
+    has_review: backendData.hasReview,
+    review,
     summaries: (backendSession as unknown as { summaries?: SessionMetadata['summaries'] }).summaries,
     tasks: (backendSession as unknown as { tasks?: TaskData[] }).tasks,
   };
@@ -1904,14 +1948,47 @@ export interface ReviewSession {
 
 export interface ReviewSessionsResponse {
   reviewSessions?: ReviewSession[];
+  reviewData?: {
+    sessions?: Array<{
+      session_id: string;
+      dimensions: Array<{ name: string; findings?: Array<ReviewFinding> }>;
+      findings?: Array<ReviewFinding & { dimension: string }>;
+      progress?: unknown;
+    }>;
+  };
 }
 
 /**
  * Fetch all review sessions
  */
 export async function fetchReviewSessions(): Promise<ReviewSession[]> {
   const data = await fetchApi<ReviewSessionsResponse>('/api/data');
-  return data.reviewSessions || [];
+
+  // If reviewSessions field exists (legacy format), use it
+  if (data.reviewSessions && data.reviewSessions.length > 0) {
+    return data.reviewSessions;
+  }
+
+  // Otherwise, transform reviewData.sessions into ReviewSession format
+  if (data.reviewData?.sessions) {
+    return data.reviewData.sessions.map(session => ({
+      session_id: session.session_id,
+      title: session.session_id,
+      description: '',
+      type: 'review' as const,
+      phase: 'in-progress',
+      reviewDimensions: session.dimensions.map(dim => ({
+        name: dim.name,
+        findings: dim.findings || []
+      })),
+      _isActive: true,
+      created_at: undefined,
+      updated_at: undefined,
+      status: 'active'
+    }));
+  }
+
+  return [];
 }
 
 /**