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.

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

@@ -5,13 +5,13 @@
 
 import { memo, useMemo, useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 import { Card } from '@/components/ui/Card';
 import { Progress } from '@/components/ui/Progress';
 import { Button } from '@/components/ui/Button';
 import { Sparkline } from '@/components/charts/Sparkline';
 import { useWorkflowStatusCounts, generateMockWorkflowStatusCounts } from '@/hooks/useWorkflowStatusCounts';
 import { useDashboardStats } from '@/hooks/useDashboardStats';
-import { useCoordinatorStore } from '@/stores/coordinatorStore';
 import { useProjectOverview } from '@/hooks/useProjectOverview';
 import { cn } from '@/lib/utils';
 import {
@@ -21,11 +21,6 @@ import {
   CheckCircle2,
   XCircle,
   Activity,
-  Play,
-  Pause,
-  Square,
-  Loader2,
-  AlertCircle,
   ChevronLeft,
   ChevronRight,
   ChevronDown,
@@ -40,7 +35,8 @@ import {
   FileCode,
   Bug,
   Sparkles,
-  BookOpen,
+  BarChart3,
+  PieChart as PieChartIcon,
 } from 'lucide-react';
 
 export interface WorkflowTaskWidgetProps {
@@ -175,19 +171,19 @@ function MiniStatCard({ icon: Icon, title, value, variant, sparklineData }: Mini
   const styles = variantStyles[variant] || variantStyles.default;
 
   return (
-    <div className={cn('rounded-lg border p-2 transition-all hover:shadow-sm', styles.card)}>
+    <div className={cn('rounded-lg border p-3 transition-all hover:shadow-sm h-full flex flex-col', styles.card)}>
-      <div className="flex items-start justify-between gap-1">
+      <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
-          <p className="text-[10px] font-medium text-muted-foreground truncate">{title}</p>
+          <p className="text-xs font-medium text-muted-foreground truncate">{title}</p>
-          <p className="text-lg font-semibold text-card-foreground mt-0.5">{value.toLocaleString()}</p>
+          <p className="text-xl font-bold text-card-foreground mt-1">{value.toLocaleString()}</p>
         </div>
         <div className={cn('flex h-7 w-7 items-center justify-center rounded-md shrink-0', styles.icon)}>
-          <Icon className="h-3.5 w-3.5" />
+          <Icon className="h-4 w-4" />
         </div>
       </div>
       {sparklineData && sparklineData.length > 0 && (
-        <div className="mt-1 -mx-1">
+        <div className="mt-auto pt-2 -mx-1">
-          <Sparkline data={sparklineData} height={24} strokeWidth={1.5} />
+          <Sparkline data={sparklineData} height={28} strokeWidth={1.5} />
         </div>
       )}
     </div>
@@ -209,28 +205,12 @@ function generateSparklineData(currentValue: number, variance = 0.3): number[] {
   return data;
 }
 
-// Orchestrator status icons and colors
-const orchestratorStatusConfig: Record<string, { icon: typeof Play; color: string; bg: string }> = {
-  idle: { icon: Square, color: 'text-muted-foreground', bg: 'bg-muted' },
-  initializing: { icon: Loader2, color: 'text-info', bg: 'bg-info/20' },
-  running: { icon: Play, color: 'text-success', bg: 'bg-success/20' },
-  paused: { icon: Pause, color: 'text-warning', bg: 'bg-warning/20' },
-  completed: { icon: CheckCircle2, color: 'text-success', bg: 'bg-success/20' },
-  failed: { icon: XCircle, color: 'text-destructive', bg: 'bg-destructive/20' },
-  cancelled: { icon: AlertCircle, color: 'text-muted-foreground', bg: 'bg-muted' },
-};
-
 function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
   const { formatMessage } = useIntl();
   const { data, isLoading } = useWorkflowStatusCounts();
   const { stats, isLoading: statsLoading } = useDashboardStats({ refetchInterval: 60000 });
   const { projectOverview, isLoading: projectLoading } = useProjectOverview();
 
-  // Get coordinator state
-  const coordinatorState = useCoordinatorStore();
-  const orchestratorConfig = orchestratorStatusConfig[coordinatorState.status] || orchestratorStatusConfig.idle;
-  const OrchestratorIcon = orchestratorConfig.icon;
-
   const chartData = data || generateMockWorkflowStatusCounts();
   const total = chartData.reduce((sum, item) => sum + item.count, 0);
 
@@ -244,11 +224,6 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
     todayActivity: generateSparklineData(stats?.todayActivity ?? 0, 0.6),
   }), [stats]);
 
-  // Calculate orchestrator progress
-  const orchestratorProgress = coordinatorState.commandChain.length > 0
-    ? Math.round((coordinatorState.commandChain.filter(n => n.status === 'completed').length / coordinatorState.commandChain.length) * 100)
-    : 0;
-
   // Project info expanded state
   const [projectExpanded, setProjectExpanded] = useState(false);
 
@@ -284,79 +259,79 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
         ) : (
           <>
             {/* Collapsed Header */}
-            <div className="px-4 py-3 flex items-center gap-6 flex-wrap">
+            <div className="px-5 py-4 flex items-center gap-6 flex-wrap">
               {/* Project Name & Icon */}
-              <div className="flex items-center gap-2.5 min-w-0">
+              <div className="flex items-center gap-3 min-w-0">
-                <div className="p-1.5 rounded-md bg-primary/10">
+                <div className="p-2 rounded-md bg-primary/10">
-                  <Code2 className="h-4 w-4 text-primary" />
+                  <Code2 className="h-5 w-5 text-primary" />
                 </div>
                 <div className="min-w-0">
-                  <h2 className="text-sm font-semibold text-foreground truncate">
+                  <h2 className="text-base font-semibold text-foreground truncate">
                     {projectOverview?.projectName || 'Claude Code Workflow'}
                   </h2>
-                  <p className="text-[10px] text-muted-foreground truncate max-w-[280px]">
+                  <p className="text-xs text-muted-foreground truncate max-w-[300px]">
                     {projectOverview?.description || 'AI-powered workflow management system'}
                   </p>
                 </div>
               </div>
 
               {/* Divider */}
-              <div className="h-8 w-px bg-border hidden md:block" />
+              <div className="h-10 w-px bg-border hidden md:block" />
 
               {/* Tech Stack Badges */}
-              <div className="flex items-center gap-2 text-[10px]">
+              <div className="flex items-center gap-2.5 text-xs">
-                <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-blue-500/10 text-blue-600 font-medium">
+                <span className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-blue-500/10 text-blue-600 font-medium">
-                  <Code2 className="h-3 w-3" />
+                  <Code2 className="h-3.5 w-3.5" />
                   {projectOverview?.technologyStack?.languages?.[0]?.name || 'TypeScript'}
                 </span>
-                <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-green-500/10 text-green-600 font-medium">
+                <span className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-green-500/10 text-green-600 font-medium">
-                  <Server className="h-3 w-3" />
+                  <Server className="h-3.5 w-3.5" />
                   {projectOverview?.technologyStack?.frameworks?.[0] || 'Node.js'}
                 </span>
-                <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-violet-500/10 text-violet-600 font-medium">
+                <span className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-violet-500/10 text-violet-600 font-medium">
-                  <Layers className="h-3 w-3" />
+                  <Layers className="h-3.5 w-3.5" />
                   {projectOverview?.architecture?.style || 'Modular Monolith'}
                 </span>
-                {projectOverview?.technologyStack?.buildTools?.[0] && (
+                {projectOverview?.technologyStack?.build_tools?.[0] && (
-                  <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-orange-500/10 text-orange-600 font-medium">
+                  <span className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-orange-500/10 text-orange-600 font-medium">
-                    <Wrench className="h-3 w-3" />
+                    <Wrench className="h-3.5 w-3.5" />
-                    {projectOverview.technologyStack.buildTools[0]}
+                    {projectOverview.technologyStack.build_tools[0]}
                   </span>
                 )}
               </div>
 
               {/* Divider */}
-              <div className="h-8 w-px bg-border hidden lg:block" />
+              <div className="h-10 w-px bg-border hidden lg:block" />
 
               {/* Quick Stats */}
-              <div className="flex items-center gap-4 text-[10px]">
+              <div className="flex items-center gap-5 text-xs">
-                <div className="flex items-center gap-1.5 text-emerald-600">
+                <div className="flex items-center gap-2 text-emerald-600">
-                  <Sparkles className="h-3 w-3" />
+                  <Sparkles className="h-3.5 w-3.5" />
                   <span className="font-semibold">{projectOverview?.developmentIndex?.feature?.length || 0}</span>
                   <span className="text-muted-foreground">{formatMessage({ id: 'projectOverview.devIndex.category.features' })}</span>
                 </div>
-                <div className="flex items-center gap-1.5 text-amber-600">
+                <div className="flex items-center gap-2 text-amber-600">
-                  <Bug className="h-3 w-3" />
+                  <Bug className="h-3.5 w-3.5" />
                   <span className="font-semibold">{projectOverview?.developmentIndex?.bugfix?.length || 0}</span>
                   <span className="text-muted-foreground">{formatMessage({ id: 'projectOverview.devIndex.category.bugfixes' })}</span>
                 </div>
-                <div className="flex items-center gap-1.5 text-blue-600">
+                <div className="flex items-center gap-2 text-blue-600">
-                  <FileCode className="h-3 w-3" />
+                  <FileCode className="h-3.5 w-3.5" />
                   <span className="font-semibold">{projectOverview?.developmentIndex?.enhancement?.length || 0}</span>
                   <span className="text-muted-foreground">{formatMessage({ id: 'projectOverview.devIndex.category.enhancements' })}</span>
                 </div>
               </div>
 
               {/* Date + Expand Button */}
-              <div className="flex items-center gap-3 text-[10px] text-muted-foreground ml-auto">
+              <div className="flex items-center gap-3 text-xs text-muted-foreground ml-auto">
-                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted/50">
+                <span className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-muted/50">
-                  <Calendar className="h-3 w-3" />
+                  <Calendar className="h-3.5 w-3.5" />
                   {projectOverview?.initializedAt ? new Date(projectOverview.initializedAt).toLocaleDateString() : new Date().toLocaleDateString()}
                 </span>
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-6 w-6 p-0 hover:bg-muted"
+                  className="h-7 w-7 p-0 hover:bg-muted"
                   onClick={() => setProjectExpanded(!projectExpanded)}
                 >
                   {projectExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
@@ -366,88 +341,102 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
 
             {/* Expanded Details */}
             {projectExpanded && (
-              <div className="px-3 pb-2 grid grid-cols-4 gap-3 border-t border-border/50 pt-2">
+              <div className="px-5 pb-4 grid grid-cols-4 gap-6 border-t border-border/50 pt-4">
                 {/* Architecture */}
-                <div className="space-y-1">
+                <div className="space-y-2">
-                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                  <h4 className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-                    <Layers className="h-3 w-3" />
+                    <Layers className="h-4 w-4 text-primary" />
                     {formatMessage({ id: 'projectOverview.architecture.title' })}
                   </h4>
-                  <div className="space-y-0.5">
+                  <div className="space-y-2">
-                    <p className="text-[10px] text-foreground">{projectOverview?.architecture?.style || 'Modular Monolith'}</p>
+                    <div className="flex items-center gap-2">
-                    <div className="flex flex-wrap gap-1">
+                      <span className="text-sm font-medium text-foreground">{projectOverview?.architecture?.style || 'Modular Monolith'}</span>
-                      {projectOverview?.architecture?.layers?.slice(0, 3).map((layer, i) => (
+                    </div>
-                        <span key={i} className="text-[9px] px-1 py-0.5 rounded bg-muted text-muted-foreground">{layer}</span>
+                    <p className="text-xs text-muted-foreground">
+                      {formatMessage({ id: 'projectOverview.architecture.layers' })}:
+                    </p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {(projectOverview?.architecture?.layers || ['CLI Tools', 'Core Services', 'Dashboard UI', 'Data Layer']).slice(0, 5).map((layer, i) => (
+                        <span key={i} className="text-xs px-2 py-1 rounded-md bg-muted text-muted-foreground font-medium">{layer}</span>
                       ))}
                     </div>
                   </div>
                 </div>
 
                 {/* Key Components */}
-                <div className="space-y-1">
+                <div className="space-y-2">
-                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                  <h4 className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-                    <Wrench className="h-3 w-3" />
+                    <Wrench className="h-4 w-4 text-orange-500" />
                     {formatMessage({ id: 'projectOverview.components.title' })}
                   </h4>
-                  <div className="space-y-0.5">
+                  <div className="space-y-1.5">
-                    {projectOverview?.keyComponents?.slice(0, 3).map((comp, i) => (
+                    {(projectOverview?.keyComponents || [
-                      <p key={i} className="text-[9px] text-foreground truncate">{comp.name}</p>
+                      { name: 'Session Manager', description: 'Workflow session lifecycle' },
-                    )) || (
+                      { name: 'Dashboard Generator', description: 'Dynamic widget rendering' },
-                      <>
+                      { name: 'Data Aggregator', description: 'Stats and metrics collection' },
-                        <p className="text-[9px] text-foreground">Session Manager</p>
+                      { name: 'Task Scheduler', description: 'Async task orchestration' },
-                        <p className="text-[9px] text-foreground">Dashboard Generator</p>
+                    ]).slice(0, 4).map((comp, i) => (
-                        <p className="text-[9px] text-foreground">Data Aggregator</p>
+                      <div key={i} className="flex items-start gap-2">
-                      </>
+                        <div className="w-1.5 h-1.5 rounded-full bg-orange-500 mt-1.5 shrink-0" />
+                        <div className="min-w-0">
+                          <p className="text-xs font-medium text-foreground truncate">{comp.name}</p>
+                          {comp.description && (
+                            <p className="text-[11px] text-muted-foreground truncate">{comp.description}</p>
                           )}
                         </div>
                       </div>
+                    ))}
+                  </div>
+                </div>
 
                 {/* Development History */}
-                <div className="space-y-1">
+                <div className="space-y-2">
-                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                  <h4 className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-                    <FileCode className="h-3 w-3" />
+                    <FileCode className="h-4 w-4 text-blue-500" />
                     {formatMessage({ id: 'projectOverview.devIndex.title' })}
                   </h4>
-                  <div className="flex flex-wrap gap-1.5">
+                  <div className="grid grid-cols-2 gap-2">
-                    <span className="flex items-center gap-0.5 text-[9px] text-emerald-600">
+                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-emerald-500/10">
-                      <Sparkles className="h-2.5 w-2.5" />
+                      <Sparkles className="h-3.5 w-3.5 text-emerald-600" />
-                      {projectOverview?.developmentIndex?.feature?.length || 0}
+                      <div>
-                    </span>
+                        <p className="text-sm font-semibold text-emerald-600">{projectOverview?.developmentIndex?.feature?.length || 10}</p>
-                    <span className="flex items-center gap-0.5 text-[9px] text-blue-600">
+                        <p className="text-[10px] text-emerald-600/80">{formatMessage({ id: 'projectOverview.devIndex.category.features' })}</p>
-                      <FileCode className="h-2.5 w-2.5" />
+                      </div>
-                      {projectOverview?.developmentIndex?.enhancement?.length || 0}
+                    </div>
-                    </span>
+                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-blue-500/10">
-                    <span className="flex items-center gap-0.5 text-[9px] text-amber-600">
+                      <FileCode className="h-3.5 w-3.5 text-blue-600" />
-                      <Bug className="h-2.5 w-2.5" />
+                      <div>
-                      {projectOverview?.developmentIndex?.bugfix?.length || 0}
+                        <p className="text-sm font-semibold text-blue-600">{projectOverview?.developmentIndex?.enhancement?.length || 5}</p>
-                    </span>
+                        <p className="text-[10px] text-blue-600/80">{formatMessage({ id: 'projectOverview.devIndex.category.enhancements' })}</p>
-                    <span className="flex items-center gap-0.5 text-[9px] text-violet-600">
+                      </div>
-                      <Wrench className="h-2.5 w-2.5" />
+                    </div>
-                      {projectOverview?.developmentIndex?.refactor?.length || 0}
+                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-amber-500/10">
-                    </span>
+                      <Bug className="h-3.5 w-3.5 text-amber-600" />
-                    <span className="flex items-center gap-0.5 text-[9px] text-slate-600">
+                      <div>
-                      <BookOpen className="h-2.5 w-2.5" />
+                        <p className="text-sm font-semibold text-amber-600">{projectOverview?.developmentIndex?.bugfix?.length || 3}</p>
-                      {projectOverview?.developmentIndex?.docs?.length || 0}
+                        <p className="text-[10px] text-amber-600/80">{formatMessage({ id: 'projectOverview.devIndex.category.bugfixes' })}</p>
-                    </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md bg-violet-500/10">
+                      <Wrench className="h-3.5 w-3.5 text-violet-600" />
+                      <div>
+                        <p className="text-sm font-semibold text-violet-600">{projectOverview?.developmentIndex?.refactor?.length || 2}</p>
+                        <p className="text-[10px] text-violet-600/80">{formatMessage({ id: 'projectOverview.devIndex.category.refactorings' })}</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
                 {/* Design Patterns */}
-                <div className="space-y-1">
+                <div className="space-y-2">
-                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                  <h4 className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-                    <GitBranch className="h-3 w-3" />
+                    <GitBranch className="h-4 w-4 text-violet-500" />
                     {formatMessage({ id: 'projectOverview.architecture.patterns' })}
                   </h4>
-                  <div className="flex flex-wrap gap-1">
+                  <div className="flex flex-wrap gap-1.5">
-                    {projectOverview?.architecture?.patterns?.slice(0, 4).map((pattern, i) => (
+                    {(projectOverview?.architecture?.patterns || ['Factory', 'Strategy', 'Observer', 'Singleton', 'Decorator']).slice(0, 6).map((pattern, i) => (
-                      <span key={i} className="text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary">{pattern}</span>
+                      <span key={i} className="text-xs px-2.5 py-1 rounded-md bg-primary/10 text-primary font-medium">{pattern}</span>
-                    )) || (
+                    ))}
-                      <>
-                        <span className="text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary">Factory</span>
-                        <span className="text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary">Strategy</span>
-                        <span className="text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary">Observer</span>
-                      </>
-                    )}
                   </div>
                 </div>
               </div>
@@ -457,21 +446,22 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
       </Card>
 
       {/* Main content Card: Stats | Workflow+Orchestrator | Task Details */}
-      <Card className="h-[320px] flex shrink-0 overflow-hidden">
+      <Card className="h-[400px] flex shrink-0 overflow-hidden">
         {/* Compact Stats Section with Sparklines */}
-        <div className="w-[28%] p-2.5 flex flex-col border-r border-border">
+        <div className="w-[28%] p-3 flex flex-col border-r border-border">
-          <h3 className="text-xs font-semibold text-foreground mb-2 px-0.5">
+          <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-1.5">
+            <BarChart3 className="h-4 w-4" />
             {formatMessage({ id: 'home.sections.statistics' })}
           </h3>
 
           {statsLoading ? (
-            <div className="grid grid-cols-2 gap-1.5 flex-1">
+            <div className="grid grid-cols-2 grid-rows-3 gap-2.5 flex-1">
               {[1, 2, 3, 4, 5, 6].map((i) => (
-                <div key={i} className="h-14 bg-muted rounded animate-pulse" />
+                <div key={i} className="bg-muted rounded animate-pulse" />
               ))}
             </div>
           ) : (
-            <div className="grid grid-cols-2 gap-1.5 flex-1 content-start overflow-auto">
+            <div className="grid grid-cols-2 grid-rows-3 gap-2.5 flex-1">
               <MiniStatCard
                 icon={FolderKanban}
                 title={formatMessage({ id: 'home.stats.activeSessions' })}
@@ -518,134 +508,117 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
           )}
         </div>
 
-        {/* Workflow Status + Orchestrator Status Section */}
+        {/* Workflow Status Section - Pie Chart */}
-        <div className="w-[26%] p-3 flex flex-col border-r border-border overflow-auto">
+        <div className="w-[22%] p-3 flex flex-col border-r border-border">
-          {/* Workflow Status */}
+          <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-1.5">
-          <h3 className="text-xs font-semibold text-foreground mb-2">
+            <PieChartIcon className="h-4 w-4" />
             {formatMessage({ id: 'home.widgets.workflowStatus' })}
           </h3>
 
           {isLoading ? (
-            <div className="space-y-2">
+            <div className="flex-1 flex items-center justify-center">
-              {[1, 2, 3].map((i) => (
+              <div className="w-24 h-24 rounded-full bg-muted animate-pulse" />
-                <div key={i} className="h-3 bg-muted rounded animate-pulse" />
-              ))}
             </div>
           ) : (
-            <div className="space-y-2">
+            <div className="flex-1 flex flex-col">
+              {/* Mini Donut Chart */}
+              <div className="flex-1 min-h-0">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={chartData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius="55%"
+                      outerRadius="85%"
+                      paddingAngle={2}
+                      dataKey="count"
+                    >
                       {chartData.map((item) => {
-                const percentage = total > 0 ? Math.round((item.count / total) * 100) : 0;
                         const colors = statusColors[item.status] || statusColors.completed;
+                        const fillColor = colors.dot.replace('bg-', '');
+                        const colorMap: Record<string, string> = {
+                          'emerald-500': '#10b981',
+                          'amber-500': '#f59e0b',
+                          'violet-500': '#8b5cf6',
+                          'slate-400': '#94a3b8',
+                          'slate-300': '#cbd5e1',
+                        };
                         return (
-                  <div key={item.status} className="space-y-0.5">
+                          <Cell key={item.status} fill={colorMap[fillColor] || '#94a3b8'} />
-                    <div className="flex items-center justify-between">
+                        );
-                      <div className="flex items-center gap-1">
+                      })}
-                        <div className={cn('w-1.5 h-1.5 rounded-full', colors.dot)} />
+                    </Pie>
-                        <span className="text-[11px] text-foreground">
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+
+              {/* Compact Legend */}
+              <div className="grid grid-cols-2 gap-x-3 gap-y-1.5 mt-3">
+                {chartData.map((item) => {
+                  const colors = statusColors[item.status] || statusColors.completed;
+                  const percentage = total > 0 ? Math.round((item.count / total) * 100) : 0;
+                  return (
+                    <div key={item.status} className="flex items-center gap-1.5 min-w-0">
+                      <div className={cn('w-2.5 h-2.5 rounded-full shrink-0', colors.dot)} />
+                      <span className="text-xs text-muted-foreground truncate">
                         {formatMessage({ id: statusLabelKeys[item.status] })}
                       </span>
-                        <span className="text-[11px] text-muted-foreground">
+                      <span className="text-xs font-medium text-foreground ml-auto">
-                          {item.count}
-                        </span>
-                      </div>
-                      <span className={cn('text-[11px] font-medium', colors.text)}>
                         {percentage}%
                       </span>
                     </div>
-                    <Progress
-                      value={percentage}
-                      className="h-1 bg-muted"
-                      indicatorClassName={colors.bg}
-                    />
-                  </div>
                   );
                 })}
               </div>
-          )}
-
-          {/* Orchestrator Status Section */}
-          <div className="mt-3 pt-3 border-t border-border">
-            <h3 className="text-xs font-semibold text-foreground mb-2">
-              {formatMessage({ id: 'navigation.main.orchestrator' })}
-            </h3>
-
-            <div className={cn('rounded-lg p-2', orchestratorConfig.bg)}>
-              <div className="flex items-center gap-2">
-                <OrchestratorIcon className={cn('h-4 w-4', orchestratorConfig.color, coordinatorState.status === 'running' && 'animate-pulse')} />
-                <div className="flex-1 min-w-0">
-                  <p className={cn('text-[11px] font-medium', orchestratorConfig.color)}>
-                    {formatMessage({ id: `common.status.${coordinatorState.status}` })}
-                  </p>
-                  {coordinatorState.currentExecutionId && (
-                    <p className="text-[10px] text-muted-foreground truncate">
-                      {coordinatorState.pipelineDetails?.nodes[0]?.name || coordinatorState.currentExecutionId}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {coordinatorState.status !== 'idle' && coordinatorState.commandChain.length > 0 && (
-                <div className="mt-2 space-y-1">
-                  <div className="flex items-center justify-between text-[10px]">
-                    <span className="text-muted-foreground">
-                      {formatMessage({ id: 'common.labels.progress' })}
-                    </span>
-                    <span className="font-medium">{orchestratorProgress}%</span>
-                  </div>
-                  <Progress value={orchestratorProgress} className="h-1 bg-muted/50" />
-                  <p className="text-[10px] text-muted-foreground">
-                    {coordinatorState.commandChain.filter(n => n.status === 'completed').length}/{coordinatorState.commandChain.length} {formatMessage({ id: 'coordinator.steps' })}
-                  </p>
             </div>
           )}
         </div>
-          </div>
-        </div>
 
         {/* Task Details Section: Session Carousel with Task List */}
-        <div className="w-[46%] p-3 flex flex-col">
+        <div className="flex-1 p-4 flex flex-col">
           {/* Header with navigation */}
-          <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center justify-between mb-3">
-            <h3 className="text-xs font-semibold text-foreground flex items-center gap-1">
+            <h3 className="text-sm font-semibold text-foreground flex items-center gap-1.5">
-              <ListChecks className="h-3.5 w-3.5" />
+              <ListChecks className="h-4 w-4" />
               {formatMessage({ id: 'home.sections.taskDetails' })}
             </h3>
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1.5">
-              <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={handlePrevSession}>
+              <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handlePrevSession}>
-                <ChevronLeft className="h-3 w-3" />
+                <ChevronLeft className="h-4 w-4" />
               </Button>
-              <span className="text-[10px] text-muted-foreground min-w-[40px] text-center">
+              <span className="text-xs text-muted-foreground min-w-[45px] text-center">
                 {currentSessionIndex + 1} / {MOCK_SESSIONS.length}
               </span>
-              <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={handleNextSession}>
+              <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleNextSession}>
-                <ChevronRight className="h-3 w-3" />
+                <ChevronRight className="h-4 w-4" />
               </Button>
             </div>
           </div>
 
           {/* Session Card (Carousel Item) */}
           {currentSession && (
-            <div className="flex-1 flex flex-col min-h-0 rounded-lg border border-border bg-accent/20 p-2.5 overflow-hidden">
+            <div className="flex-1 flex flex-col min-h-0 rounded-lg border border-border bg-accent/20 p-3 overflow-hidden">
               {/* Session Header */}
               <div className="mb-2 pb-2 border-b border-border shrink-0">
                 <div className="flex items-start gap-2">
-                  <div className={cn('px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0', sessionStatusColors[currentSession.status].bg, sessionStatusColors[currentSession.status].text)}>
+                  <div className={cn('px-2 py-1 rounded text-xs font-medium shrink-0', sessionStatusColors[currentSession.status].bg, sessionStatusColors[currentSession.status].text)}>
                     {formatMessage({ id: `common.status.${currentSession.status === 'in_progress' ? 'inProgress' : currentSession.status}` })}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <p className="text-[11px] font-medium text-foreground truncate">{currentSession.name}</p>
+                    <p className="text-sm font-medium text-foreground truncate">{currentSession.name}</p>
-                    <p className="text-[10px] text-muted-foreground">{currentSession.id}</p>
+                    <p className="text-xs text-muted-foreground">{currentSession.id}</p>
                   </div>
                 </div>
                 {/* Description */}
                 {currentSession.description && (
-                  <p className="text-[10px] text-muted-foreground mt-1.5 line-clamp-2">
+                  <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
                     {currentSession.description}
                   </p>
                 )}
                 {/* Progress bar */}
-                <div className="mt-2 space-y-1">
+                <div className="mt-2.5 space-y-1">
-                  <div className="flex items-center justify-between text-[10px]">
+                  <div className="flex items-center justify-between text-xs">
                     <span className="text-muted-foreground">
                       {formatMessage({ id: 'common.labels.progress' })}
                     </span>
@@ -655,20 +628,20 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
                   </div>
                   <Progress
                     value={currentSession.tasks.length > 0 ? (currentSession.tasks.filter(t => t.status === 'completed').length / currentSession.tasks.length) * 100 : 0}
-                    className="h-1 bg-muted"
+                    className="h-1.5 bg-muted"
                     indicatorClassName="bg-success"
                   />
                 </div>
                 {/* Tags and Date */}
-                <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+                <div className="flex items-center gap-2 mt-2 flex-wrap">
                   {currentSession.tags.map((tag) => (
-                    <span key={tag} className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[9px]">
+                    <span key={tag} className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-primary/10 text-primary text-[10px]">
-                      <Tag className="h-2 w-2" />
+                      <Tag className="h-2.5 w-2.5" />
                       {tag}
                     </span>
                   ))}
-                  <span className="inline-flex items-center gap-0.5 text-[9px] text-muted-foreground ml-auto">
+                  <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground ml-auto">
-                    <Calendar className="h-2.5 w-2.5" />
+                    <Calendar className="h-3 w-3" />
                     {currentSession.updatedAt}
                   </span>
                 </div>
@@ -676,19 +649,23 @@ function WorkflowTaskWidgetComponent({ className }: WorkflowTaskWidgetProps) {
 
               {/* Task List for this Session - Two columns */}
               <div className="flex-1 overflow-auto min-h-0">
-                <div className="grid grid-cols-2 gap-1">
+                <div className="grid grid-cols-2 gap-2 w-full">
-                  {currentSession.tasks.map((task) => {
+                  {currentSession.tasks.map((task, index) => {
                     const config = taskStatusColors[task.status];
                     const StatusIcon = config.icon;
+                    const isLastOdd = currentSession.tasks.length % 2 === 1 && index === currentSession.tasks.length - 1;
                     return (
                       <div
                         key={task.id}
-                        className="flex items-center gap-1.5 p-1.5 rounded hover:bg-background/50 transition-colors cursor-pointer"
+                        className={cn(
+                          'flex items-center gap-2 p-2 rounded hover:bg-background/50 transition-colors cursor-pointer',
+                          isLastOdd && 'col-span-2'
+                        )}
                       >
-                        <div className={cn('p-0.5 rounded shrink-0', config.bg)}>
+                        <div className={cn('p-1 rounded shrink-0', config.bg)}>
-                          <StatusIcon className={cn('h-2.5 w-2.5', config.text)} />
+                          <StatusIcon className={cn('h-3 w-3', config.text)} />
                         </div>
-                        <p className={cn('flex-1 text-[10px] font-medium truncate', task.status === 'completed' ? 'text-muted-foreground line-through' : 'text-foreground')}>
+                        <p className={cn('flex-1 text-xs font-medium truncate', task.status === 'completed' ? 'text-muted-foreground line-through' : 'text-foreground')}>
                           {task.name}
                         </p>
                       </div>

ccw/frontend/src/components/shared/SessionCard.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 },
+  review: { variant: 'review', icon: Search },       // Purple
-  'tdd': { variant: 'success', icon: TestTube },
+  'tdd': { variant: 'success', icon: TestTube },    // Green
-  test: { variant: 'default', icon: FileText },
+  test: { variant: 'info', icon: FileText },        // Blue
-  docs: { variant: 'warning', icon: File },
+  docs: { variant: 'warning', icon: File },         // Orange/Yellow
-  workflow: { variant: 'secondary', icon: Settings },
+  workflow: { variant: 'default', icon: Settings }, // Primary (blue-violet)
-  'lite-plan': { variant: 'default', icon: FileText },
+  'lite-plan': { variant: 'secondary', icon: FileText }, // Gray/Neutral
-  'lite-fix': { variant: 'warning', icon: Zap },
+  '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">
+            <div className="flex items-center gap-2 mb-1">
-              {session.session_id}
+              {/* Type badge BEFORE title */}
-            </h3>
-          </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">
+                <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>
             {showActions && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -291,12 +332,35 @@ 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>
+
+          {/* 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' })}
@@ -307,6 +371,8 @@ export function SessionCard({
                   {progress.completed} {formatMessage({ id: 'sessions.card.completed' })}
                 </span>
               )}
+            </>
+          )}
           {session.updated_at && session.updated_at !== session.created_at && (
             <span className="flex items-center gap-1">
               <Clock className="h-3.5 w-3.5" />
@@ -315,15 +381,9 @@ export function SessionCard({
           )}
         </div>
 
-        {/* Task status badges */}
+        {/* Task status badges - only for non-review sessions */}
-        {progress.total > 0 && (
+        {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) */}
+        {/* Severity badges - only for review sessions */}
-        {progress.total > 0 && !isPlanning && (
+        {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/lib/api.ts

@@ -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
+  // Multi-level type detection: backend.type > hasReview (for review sessions) > infer from name
-  const sessionType = (backendSession.type as SessionMetadata['type']) ||
+  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,
+    has_review: backendData.hasReview,
-    review: (backendSession as unknown as { review?: SessionMetadata['review'] }).review,
+    review,
     summaries: (backendSession as unknown as { summaries?: SessionMetadata['summaries'] }).summaries,
     tasks: (backendSession as unknown as { tasks?: TaskData[] }).tasks,
   };
@@ -1904,6 +1948,14 @@ 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;
+    }>;
+  };
 }
 
 /**
@@ -1911,7 +1963,32 @@ export interface ReviewSessionsResponse {
  */
 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 [];
 }
 
 /**

ccw/frontend/src/locales/en/common.json

@@ -61,6 +61,7 @@
     "inProgress": "In Progress",
     "running": "Running",
     "initializing": "Initializing",
+    "initialized": "Initialized",
     "planning": "Planning",
     "completed": "Completed",
     "failed": "Failed",
@@ -264,6 +265,71 @@
       "expandAria": "Expand sidebar"
     }
   },
+  "liteTasks": {
+    "title": "Lite Tasks",
+    "type": {
+      "plan": "Lite Plan",
+      "fix": "Lite Fix",
+      "multiCli": "Multi-CLI Plan"
+    },
+    "quickCards": {
+      "tasks": "Tasks",
+      "context": "Context"
+    },
+    "multiCli": {
+      "discussion": "Discussion",
+      "discussionRounds": "Discussion Rounds",
+      "discussionDescription": "Multi-CLI collaborative planning with iterative analysis and cross-verification",
+      "summary": "Summary",
+      "goal": "Goal",
+      "solution": "Solution",
+      "implementation": "Implementation",
+      "feasibility": "Feasibility",
+      "risk": "Risk",
+      "planSummary": "Plan Summary"
+    },
+    "createdAt": "Created",
+    "rounds": "rounds",
+    "tasksCount": "tasks",
+    "untitled": "Untitled Task",
+    "discussionTopic": "Discussion Topic",
+    "contextPanel": {
+      "loading": "Loading context data...",
+      "error": "Failed to load context",
+      "empty": "No context data available",
+      "explorations": "Explorations",
+      "explorationsCount": "{count} explorations",
+      "diagnoses": "Diagnoses",
+      "diagnosesCount": "{count} diagnoses",
+      "contextPackage": "Context Package",
+      "focusPaths": "Focus Paths",
+      "summary": "Summary",
+      "taskDescription": "Task Description",
+      "complexity": "Complexity"
+    },
+    "status": {
+      "completed": "Completed",
+      "inProgress": "In Progress",
+      "blocked": "Blocked",
+      "pending": "Pending"
+    },
+    "subtitle": "{count} sessions",
+    "empty": {
+      "title": "No {type} sessions",
+      "message": "No sessions found for this type"
+    },
+    "noResults": {
+      "title": "No results",
+      "message": "No sessions match your search"
+    },
+    "searchPlaceholder": "Search sessions...",
+    "sortBy": "Sort by",
+    "sort": {
+      "date": "Date",
+      "name": "Name",
+      "tasks": "Tasks"
+    }
+  },
   "askQuestion": {
     "defaultTitle": "Questions",
     "description": "Please answer the following questions",

ccw/frontend/src/locales/en/project-overview.json

@@ -17,7 +17,8 @@
     "title": "Architecture",
     "style": "Style",
     "layers": "Layers",
-    "patterns": "Patterns"
+    "patterns": "Patterns",
+    "principles": "Principles"
   },
   "components": {
     "title": "Key Components",

ccw/frontend/src/locales/en/review-session.json

@@ -5,7 +5,13 @@
     "critical": "Critical",
     "high": "High",
     "medium": "Medium",
+    "low": "Low",
+    "short": {
+      "critical": "Crit",
+      "high": "High",
+      "medium": "Med",
       "low": "Low"
+    }
   },
   "stats": {
     "total": "Total",
@@ -22,6 +28,7 @@
   },
   "filters": {
     "severity": "Severity",
+    "dimension": "Dimension",
     "sort": "Sort",
     "reset": "Reset"
   },
@@ -35,6 +42,8 @@
   },
   "selection": {
     "count": "{count} selected",
+    "countSelected": "{count} selected",
+    "total": "{count} total",
     "selectAll": "Select All",
     "clearAll": "Clear All",
     "clear": "Clear",
@@ -46,6 +55,23 @@
   "rootCause": "Root Cause",
   "impact": "Impact",
   "recommendations": "Recommendations",
+  "findingsList": {
+    "count": "{count} findings"
+  },
+  "preview": {
+    "empty": "Click on a finding to preview details",
+    "emptyTitle": "Select a Finding",
+    "emptyTipSeverity": "Filter by severity",
+    "emptyTipFile": "Group by file",
+    "location": "Location",
+    "description": "Description",
+    "codeContext": "Code Context",
+    "recommendations": "Recommendations",
+    "rootCause": "Root Cause",
+    "impact": "Impact",
+    "selected": "Selected",
+    "selectForFix": "Select"
+  },
   "fixProgress": {
     "title": "Fix Progress",
     "phase": {

ccw/frontend/src/locales/zh/common.json

@@ -65,6 +65,7 @@
     "inProgress": "进行中",
     "running": "运行中",
     "initializing": "初始化中",
+    "initialized": "已初始化",
     "planning": "规划中",
     "completed": "已完成",
     "failed": "失败",
@@ -258,6 +259,71 @@
       "expandAria": "展开侧边栏"
     }
   },
+  "liteTasks": {
+    "title": "轻量任务",
+    "type": {
+      "plan": "轻量规划",
+      "fix": "轻量修复",
+      "multiCli": "多CLI规划"
+    },
+    "quickCards": {
+      "tasks": "任务",
+      "context": "上下文"
+    },
+    "multiCli": {
+      "discussion": "讨论",
+      "discussionRounds": "讨论轮次",
+      "discussionDescription": "多CLI协作规划，迭代分析与交叉验证",
+      "summary": "摘要",
+      "goal": "目标",
+      "solution": "解决方案",
+      "implementation": "实现方式",
+      "feasibility": "可行性",
+      "risk": "风险",
+      "planSummary": "规划摘要"
+    },
+    "createdAt": "创建时间",
+    "rounds": "轮",
+    "tasksCount": "个任务",
+    "untitled": "未命名任务",
+    "discussionTopic": "讨论主题",
+    "contextPanel": {
+      "loading": "加载上下文数据中...",
+      "error": "加载上下文失败",
+      "empty": "无可用上下文数据",
+      "explorations": "探索",
+      "explorationsCount": "{count} 个探索",
+      "diagnoses": "诊断",
+      "diagnosesCount": "{count} 个诊断",
+      "contextPackage": "上下文包",
+      "focusPaths": "关注路径",
+      "summary": "摘要",
+      "taskDescription": "任务描述",
+      "complexity": "复杂度"
+    },
+    "status": {
+      "completed": "已完成",
+      "inProgress": "进行中",
+      "blocked": "已阻塞",
+      "pending": "待处理"
+    },
+    "subtitle": "{count} 个会话",
+    "empty": {
+      "title": "无 {type} 会话",
+      "message": "未找到该类型的会话"
+    },
+    "noResults": {
+      "title": "无结果",
+      "message": "没有符合搜索条件的会话"
+    },
+    "searchPlaceholder": "搜索会话...",
+    "sortBy": "排序方式",
+    "sort": {
+      "date": "日期",
+      "name": "名称",
+      "tasks": "任务"
+    }
+  },
   "askQuestion": {
     "defaultTitle": "问题",
     "description": "请回答以下问题",

ccw/frontend/src/locales/zh/project-overview.json

@@ -17,7 +17,8 @@
     "title": "架构",
     "style": "架构风格",
     "layers": "分层",
-    "patterns": "设计模式"
+    "patterns": "设计模式",
+    "principles": "设计原则"
   },
   "components": {
     "title": "核心组件",

ccw/frontend/src/locales/zh/review-session.json

@@ -2,15 +2,36 @@
   "title": "审查会话",
   "type": "审查",
   "severity": {
+    "critical": "严重",
+    "high": "高",
+    "medium": "中",
+    "low": "低",
+    "short": {
       "critical": "严重",
       "high": "高",
       "medium": "中",
       "low": "低"
+    }
   },
   "stats": {
     "total": "总发现",
     "dimensions": "维度"
   },
+  "progress": {
+    "title": "审查进度",
+    "totalFindings": "总发现",
+    "critical": "严重",
+    "high": "高"
+  },
+  "dimensionTabs": {
+    "all": "全部"
+  },
+  "filters": {
+    "severity": "严重程度",
+    "dimension": "维度",
+    "sort": "排序",
+    "reset": "重置"
+  },
   "search": {
     "placeholder": "搜索发现..."
   },
@@ -21,18 +42,59 @@
   },
   "selection": {
     "count": "已选择 {count} 项",
+    "countSelected": "已选 {count} 项",
+    "total": "共 {count} 项",
     "selectAll": "全选",
     "clearAll": "清除全部",
-    "clear": "清除"
+    "clear": "清除",
+    "selectVisible": "可见",
+    "selectCritical": "严重"
   },
   "export": "导出修复 JSON",
   "codeContext": "代码上下文",
   "rootCause": "根本原因",
   "impact": "影响",
   "recommendations": "建议",
+  "findingsList": {
+    "count": "{count} 条发现"
+  },
+  "preview": {
+    "empty": "点击发现以预览详情",
+    "emptyTitle": "选择一个发现",
+    "emptyTipSeverity": "按严重程度筛选",
+    "emptyTipFile": "按文件分组",
+    "location": "位置",
+    "description": "描述",
+    "codeContext": "代码上下文",
+    "recommendations": "建议",
+    "rootCause": "根本原因",
+    "impact": "影响",
+    "selected": "已选择",
+    "selectForFix": "选择"
+  },
+  "fixProgress": {
+    "title": "修复进度",
+    "phase": {
+      "planning": "规划",
+      "execution": "执行",
+      "completion": "完成"
+    },
+    "stats": {
+      "total": "总数",
+      "fixed": "已修复",
+      "failed": "失败",
+      "pending": "待处理"
+    },
+    "activeAgents": "活跃代理",
+    "activeAgentsPlural": "活跃代理",
+    "stage": "阶段",
+    "complete": "完成 {percent}%",
+    "working": "工作中..."
+  },
   "empty": {
     "title": "未找到发现",
-    "message": "尝试调整筛选条件或搜索查询。"
+    "message": "尝试调整筛选条件或搜索查询。",
+    "noFixProgress": "无修复进度数据"
   },
   "notFound": {
     "title": "未找到审查会话",

ccw/frontend/src/pages/LiteTaskDetailPage.tsx

@@ -428,49 +428,34 @@ export function LiteTaskDetailPage() {
                   </div>
 
                   {/* Right: Meta Information */}
-                  <div className="flex flex-col items-end gap-2 text-xs text-muted-foreground flex-shrink-0">
+                  <div className="flex items-center gap-2 flex-shrink-0">
-                    {/* Row 1: Status Badge */}
+                    {/* Dependencies - show task IDs */}
-                    <Badge
-                      variant={task.status === 'completed' ? 'success' : task.status === 'in_progress' ? 'warning' : task.status === 'blocked' ? 'destructive' : 'secondary'}
-                      className="w-fit"
-                    >
-                      {task.status}
-                    </Badge>
-
-                    {/* Row 2: Metadata */}
-                    <div className="flex items-center gap-3 flex-wrap justify-end">
-                      {/* Dependencies Count */}
                     {task.context?.depends_on && task.context.depends_on.length > 0 && (
-                        <span className="flex items-center gap-1 px-2 py-0.5 rounded bg-muted/50">
+                      <div className="flex items-center gap-1">
-                          <span className="font-mono font-semibold text-foreground">{task.context.depends_on.length}</span>
+                        <span className="text-xs text-muted-foreground">→</span>
-                          <span>dep{task.context.depends_on.length > 1 ? 's' : ''}</span>
+                        {task.context.depends_on.map((depId, idx) => (
-                        </span>
+                          <Badge key={idx} variant="outline" className="h-6 px-2 py-0.5 text-xs font-mono border-primary/30 text-primary">
+                            {depId}
+                          </Badge>
+                        ))}
+                      </div>
                     )}
 
                     {/* Target Files Count */}
                     {task.flow_control?.target_files && task.flow_control.target_files.length > 0 && (
-                        <span className="flex items-center gap-1 px-2 py-0.5 rounded bg-muted/50">
+                      <Badge variant="secondary" className="h-5 px-1.5 py-0 text-[10px] gap-0.5">
-                          <span className="font-mono font-semibold text-foreground">{task.flow_control.target_files.length}</span>
+                        <span className="font-semibold">{task.flow_control.target_files.length}</span>
                         <span>file{task.flow_control.target_files.length > 1 ? 's' : ''}</span>
-                        </span>
+                      </Badge>
                     )}
 
-                      {/* Focus Paths Count */}
+                    {/* Implementation Steps Count */}
-                      {task.context?.focus_paths && task.context.focus_paths.length > 0 && (
+                    {task.flow_control?.implementation_approach && task.flow_control.implementation_approach.length > 0 && (
-                        <span className="flex items-center gap-1 px-2 py-0.5 rounded bg-muted/50">
+                      <Badge variant="secondary" className="h-5 px-1.5 py-0 text-[10px] gap-0.5">
-                          <span className="font-mono font-semibold text-foreground">{task.context.focus_paths.length}</span>
+                        <span className="font-semibold">{task.flow_control.implementation_approach.length}</span>
-                          <span>focus</span>
+                        <span>step{task.flow_control.implementation_approach.length > 1 ? 's' : ''}</span>
-                        </span>
+                      </Badge>
                     )}
-
-                      {/* Acceptance Criteria Count */}
-                      {task.context?.acceptance && task.context.acceptance.length > 0 && (
-                        <span className="flex items-center gap-1 px-2 py-0.5 rounded bg-muted/50">
-                          <span className="font-mono font-semibold text-foreground">{task.context.acceptance.length}</span>
-                          <span>criteria</span>
-                        </span>
-                      )}
-                    </div>
                   </div>
                 </div>
               </CardHeader>

ccw/frontend/src/pages/LiteTasksPage.tsx

@@ -33,6 +33,8 @@ import {
   CheckCircle2,
   Clock,
   AlertCircle,
+  Target,
+  FileCode,
 } from 'lucide-react';
 import { useLiteTasks } from '@/hooks/useLiteTasks';
 import { Button } from '@/components/ui/Button';
@@ -146,26 +148,37 @@ function ExpandedSessionPanel({
               }}
             >
               <CardContent className="p-3">
-                <div className="flex items-center gap-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
                     <Badge className="text-xs font-mono shrink-0 bg-primary/10 text-primary border-primary/20">
                       {task.task_id || `#${index + 1}`}
                     </Badge>
                     <h4 className="text-sm font-medium text-foreground flex-1 line-clamp-1">
                       {task.title || formatMessage({ id: 'liteTasks.untitled' })}
                     </h4>
-                  {task.status && (
+                  </div>
-                    <Badge
+                  {/* Right: Meta info */}
-                      variant={
+                  <div className="flex items-center gap-2 flex-shrink-0">
-                        task.status === 'completed' ? 'success' :
+                    {/* Dependencies - show task IDs */}
-                        task.status === 'in_progress' ? 'warning' :
+                    {task.context?.depends_on && task.context.depends_on.length > 0 && (
-                        task.status === 'blocked' ? 'destructive' : 'secondary'
+                      <div className="flex items-center gap-1">
-                      }
+                        <span className="text-xs text-muted-foreground">→</span>
-                      className="text-[10px]"
+                        {task.context.depends_on.map((depId, idx) => (
-                    >
+                          <Badge key={idx} variant="outline" className="h-5 px-2 py-0.5 text-xs font-mono border-primary/30 text-primary">
-                      {task.status}
+                            {depId}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                    {/* Target Files Count */}
+                    {task.flow_control?.target_files && task.flow_control.target_files.length > 0 && (
+                      <Badge variant="secondary" className="h-4 px-1.5 py-0 text-[10px] gap-0.5">
+                        <span className="font-semibold">{task.flow_control.target_files.length}</span>
+                        <span>file{task.flow_control.target_files.length > 1 ? 's' : ''}</span>
                       </Badge>
                     )}
                   </div>
+                </div>
                 {task.description && (
                   <p className="text-xs text-muted-foreground mt-1.5 pl-[calc(1.5rem+0.75rem)] line-clamp-2">
                     {task.description}
@@ -392,6 +405,407 @@ function ContextSection({
   );
 }
 
+type MultiCliExpandedTab = 'tasks' | 'discussion' | 'context' | 'summary';
+
+/**
+ * ExpandedMultiCliPanel - Multi-tab panel shown when a multi-cli session is expanded
+ */
+function ExpandedMultiCliPanel({
+  session,
+  onTaskClick,
+}: {
+  session: LiteTaskSession;
+  onTaskClick: (task: LiteTask) => void;
+}) {
+  const { formatMessage } = useIntl();
+  const [activeTab, setActiveTab] = React.useState<MultiCliExpandedTab>('tasks');
+  const [contextData, setContextData] = React.useState<LiteSessionContext | null>(null);
+  const [contextLoading, setContextLoading] = React.useState(false);
+  const [contextError, setContextError] = React.useState<string | null>(null);
+
+  const tasks = session.tasks || [];
+  const taskCount = tasks.length;
+  const synthesis = session.latestSynthesis || {};
+  const plan = session.plan || {};
+  const roundCount = session.roundCount || (session.metadata?.roundId as number) || 1;
+
+  // Get i18n text helper
+  const getI18nTextLocal = (text: string | { en?: string; zh?: string } | undefined): string => {
+    if (!text) return '';
+    if (typeof text === 'string') return text;
+    return text.en || text.zh || '';
+  };
+
+  // Build implementation chain from task dependencies
+  const buildImplementationChain = (): string => {
+    if (tasks.length === 0) return '';
+
+    // Find tasks with no dependencies (starting tasks)
+    const taskDeps: Record<string, string[]> = {};
+    const taskIds = new Set<string>();
+
+    tasks.forEach(t => {
+      const id = t.task_id || t.id;
+      taskIds.add(id);
+      taskDeps[id] = t.context?.depends_on || [];
+    });
+
+    // Find starting tasks (no deps or deps not in task list)
+    const startingTasks = tasks.filter(t => {
+      const deps = t.context?.depends_on || [];
+      return deps.length === 0 || deps.every(d => !taskIds.has(d));
+    }).map(t => t.task_id || t.id);
+
+    // Group parallel tasks
+    const parallelStart = startingTasks.length > 1
+      ? `(${startingTasks.join(' | ')})`
+      : startingTasks[0] || '';
+
+    // Find subsequent tasks in order
+    const processed = new Set(startingTasks);
+    const chain: string[] = [parallelStart];
+
+    let iterations = 0;
+    while (processed.size < tasks.length && iterations < 20) {
+      iterations++;
+      const nextBatch: string[] = [];
+
+      tasks.forEach(t => {
+        const id = t.task_id || t.id;
+        if (processed.has(id)) return;
+
+        const deps = t.context?.depends_on || [];
+        if (deps.every(d => processed.has(d) || !taskIds.has(d))) {
+          nextBatch.push(id);
+        }
+      });
+
+      if (nextBatch.length === 0) break;
+
+      nextBatch.forEach(id => processed.add(id));
+      if (nextBatch.length > 1) {
+        chain.push(`(${nextBatch.join(' | ')})`);
+      } else {
+        chain.push(nextBatch[0]);
+      }
+    }
+
+    return chain.filter(Boolean).join(' → ');
+  };
+
+  // Load context data lazily
+  React.useEffect(() => {
+    if (activeTab !== 'context') return;
+    if (contextData || contextLoading) return;
+    if (!session.path) {
+      setContextError('No session path available');
+      return;
+    }
+
+    setContextLoading(true);
+    fetchLiteSessionContext(session.path)
+      .then((data) => {
+        setContextData(data);
+        setContextError(null);
+      })
+      .catch((err) => {
+        setContextError(err.message || 'Failed to load context');
+      })
+      .finally(() => {
+        setContextLoading(false);
+      });
+  }, [activeTab, session.path, contextData, contextLoading]);
+
+  const implementationChain = buildImplementationChain();
+  const goal = getI18nTextLocal(plan.goal as string | { en?: string; zh?: string }) ||
+               getI18nTextLocal(synthesis.title as string | { en?: string; zh?: string }) || '';
+  const solution = getI18nTextLocal(plan.solution as string | { en?: string; zh?: string }) || '';
+  const feasibility = (plan.feasibility as number) || 0;
+  const effort = (plan.effort as string) || '';
+  const risk = (plan.risk as string) || '';
+
+  return (
+    <div className="mt-2 ml-6 pb-2">
+      {/* Session Info Header */}
+      <div className="flex items-center gap-4 text-xs text-muted-foreground mb-3 pb-2 border-b border-border/50">
+        {session.createdAt && (
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3.5 w-3.5" />
+            {formatMessage({ id: 'liteTasks.createdAt' })}: {new Date(session.createdAt).toLocaleDateString()}
+          </span>
+        )}
+        <span className="flex items-center gap-1">
+          <ListChecks className="h-3.5 w-3.5" />
+          {formatMessage({ id: 'liteTasks.quickCards.tasks' })}: {taskCount} {formatMessage({ id: 'liteTasks.tasksCount' })}
+        </span>
+      </div>
+
+      {/* Tab Buttons */}
+      <div className="flex flex-wrap gap-2 mb-3">
+        <button
+          onClick={(e) => { e.stopPropagation(); setActiveTab('tasks'); }}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+            activeTab === 'tasks'
+              ? 'bg-primary/10 text-primary border-primary/30'
+              : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted'
+          }`}
+        >
+          <ListChecks className="h-3.5 w-3.5" />
+          {formatMessage({ id: 'liteTasks.quickCards.tasks' })}
+          <Badge variant="secondary" className="ml-1 text-[10px] px-1.5 py-0">
+            {taskCount}
+          </Badge>
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); setActiveTab('discussion'); }}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+            activeTab === 'discussion'
+              ? 'bg-primary/10 text-primary border-primary/30'
+              : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted'
+          }`}
+        >
+          <MessagesSquare className="h-3.5 w-3.5" />
+          {formatMessage({ id: 'liteTasks.multiCli.discussion' })}
+          <Badge variant="secondary" className="ml-1 text-[10px] px-1.5 py-0">
+            {roundCount}
+          </Badge>
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); setActiveTab('context'); }}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+            activeTab === 'context'
+              ? 'bg-primary/10 text-primary border-primary/30'
+              : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted'
+          }`}
+        >
+          <Package className="h-3.5 w-3.5" />
+          {formatMessage({ id: 'liteTasks.quickCards.context' })}
+        </button>
+        <button
+          onClick={(e) => { e.stopPropagation(); setActiveTab('summary'); }}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+            activeTab === 'summary'
+              ? 'bg-primary/10 text-primary border-primary/30'
+              : 'bg-muted/50 text-muted-foreground border-border hover:bg-muted'
+          }`}
+        >
+          <FileText className="h-3.5 w-3.5" />
+          {formatMessage({ id: 'liteTasks.multiCli.summary' })}
+        </button>
+      </div>
+
+      {/* Tasks Tab */}
+      {activeTab === 'tasks' && (
+        <div className="space-y-3">
+          {/* Goal/Solution/Implementation Header */}
+          {(goal || solution || implementationChain) && (
+            <Card className="border-border bg-muted/30">
+              <CardContent className="p-3 space-y-2">
+                {goal && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">{formatMessage({ id: 'liteTasks.multiCli.goal' })}:</span>
+                    <span className="ml-2 text-foreground">{goal}</span>
+                  </div>
+                )}
+                {solution && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">{formatMessage({ id: 'liteTasks.multiCli.solution' })}:</span>
+                    <span className="ml-2 text-foreground">{solution}</span>
+                  </div>
+                )}
+                {implementationChain && (
+                  <div className="text-sm">
+                    <span className="text-muted-foreground">{formatMessage({ id: 'liteTasks.multiCli.implementation' })}:</span>
+                    <code className="ml-2 px-2 py-0.5 rounded bg-background border border-border text-xs font-mono">
+                      {implementationChain}
+                    </code>
+                  </div>
+                )}
+                {(feasibility > 0 || effort || risk) && (
+                  <div className="flex items-center gap-2 pt-1">
+                    {feasibility > 0 && (
+                      <Badge variant="success" className="text-[10px]">{feasibility}%</Badge>
+                    )}
+                    {effort && (
+                      <Badge variant="warning" className="text-[10px]">{effort}</Badge>
+                    )}
+                    {risk && (
+                      <Badge variant={risk === 'high' ? 'destructive' : risk === 'medium' ? 'warning' : 'success'} className="text-[10px]">
+                        {risk} {formatMessage({ id: 'liteTasks.multiCli.risk' })}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Task List */}
+          {tasks.map((task, index) => {
+            const filesCount = task.flow_control?.target_files?.length || 0;
+            const stepsCount = task.flow_control?.implementation_approach?.length || 0;
+            const criteriaCount = task.context?.acceptance?.length || 0;
+            const depsCount = task.context?.depends_on?.length || 0;
+
+            return (
+              <Card
+                key={task.id || index}
+                className="cursor-pointer hover:shadow-sm hover:border-primary/50 transition-all border-border border-l-4 border-l-primary/50"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTaskClick(task);
+                }}
+              >
+                <CardContent className="p-3">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start gap-3 flex-1 min-w-0">
+                      <Badge className="text-xs font-mono shrink-0 bg-primary/10 text-primary border-primary/20">
+                        {task.task_id || `T${index + 1}`}
+                      </Badge>
+                      <div className="flex-1 min-w-0">
+                        <h4 className="text-sm font-medium text-foreground line-clamp-1">
+                          {task.title || formatMessage({ id: 'liteTasks.untitled' })}
+                        </h4>
+                        {/* Meta badges */}
+                        <div className="flex flex-wrap items-center gap-1.5 mt-1.5">
+                          {task.meta?.type && (
+                            <Badge variant="info" className="text-[10px] px-1.5 py-0">{task.meta.type}</Badge>
+                          )}
+                          {filesCount > 0 && (
+                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0 gap-0.5">
+                              <FileCode className="h-2.5 w-2.5" />
+                              {filesCount} files
+                            </Badge>
+                          )}
+                          {stepsCount > 0 && (
+                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                              {stepsCount} steps
+                            </Badge>
+                          )}
+                          {criteriaCount > 0 && (
+                            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                              {criteriaCount} criteria
+                            </Badge>
+                          )}
+                          {depsCount > 0 && (
+                            <Badge variant="outline" className="text-[10px] px-1.5 py-0 border-primary/30 text-primary">
+                              {depsCount} deps
+                            </Badge>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Discussion Tab */}
+      {activeTab === 'discussion' && (
+        <div className="space-y-3">
+          <Card className="border-border">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-3">
+                <MessagesSquare className="h-5 w-5 text-primary" />
+                <h4 className="font-medium text-foreground">
+                  {formatMessage({ id: 'liteTasks.multiCli.discussionRounds' })}
+                </h4>
+                <Badge variant="secondary" className="text-xs">{roundCount} {formatMessage({ id: 'liteTasks.rounds' })}</Badge>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'liteTasks.multiCli.discussionDescription' })}
+              </p>
+              {goal && (
+                <div className="mt-3 p-3 bg-muted/50 rounded-lg">
+                  <p className="text-sm text-foreground">{goal}</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Context Tab */}
+      {activeTab === 'context' && (
+        <div className="space-y-3">
+          {contextLoading && (
+            <div className="flex items-center justify-center py-8 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin mr-2" />
+              <span className="text-sm">{formatMessage({ id: 'liteTasks.contextPanel.loading' })}</span>
+            </div>
+          )}
+          {contextError && !contextLoading && (
+            <div className="flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive text-sm">
+              <XCircle className="h-4 w-4 flex-shrink-0" />
+              {formatMessage({ id: 'liteTasks.contextPanel.error' })}: {contextError}
+            </div>
+          )}
+          {!contextLoading && !contextError && contextData && (
+            <ContextContent contextData={contextData} session={session} />
+          )}
+          {!contextLoading && !contextError && !contextData && !session.path && (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <Package className="h-8 w-8 text-muted-foreground mb-2" />
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'liteTasks.contextPanel.empty' })}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Summary Tab */}
+      {activeTab === 'summary' && (
+        <div className="space-y-3">
+          <Card className="border-border">
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 mb-3">
+                <Target className="h-5 w-5 text-primary" />
+                <h4 className="font-medium text-foreground">
+                  {formatMessage({ id: 'liteTasks.multiCli.planSummary' })}
+                </h4>
+              </div>
+              {goal && (
+                <div className="mb-3">
+                  <p className="text-xs text-muted-foreground mb-1">{formatMessage({ id: 'liteTasks.multiCli.goal' })}</p>
+                  <p className="text-sm text-foreground">{goal}</p>
+                </div>
+              )}
+              {solution && (
+                <div className="mb-3">
+                  <p className="text-xs text-muted-foreground mb-1">{formatMessage({ id: 'liteTasks.multiCli.solution' })}</p>
+                  <p className="text-sm text-foreground">{solution}</p>
+                </div>
+              )}
+              {implementationChain && (
+                <div className="mb-3">
+                  <p className="text-xs text-muted-foreground mb-1">{formatMessage({ id: 'liteTasks.multiCli.implementation' })}</p>
+                  <code className="block px-3 py-2 rounded bg-muted border border-border text-xs font-mono">
+                    {implementationChain}
+                  </code>
+                </div>
+              )}
+              <div className="flex items-center gap-2 pt-2 border-t border-border/50">
+                <span className="text-xs text-muted-foreground">{formatMessage({ id: 'liteTasks.quickCards.tasks' })}:</span>
+                <Badge variant="secondary" className="text-xs">{taskCount}</Badge>
+                {feasibility > 0 && (
+                  <>
+                    <span className="text-xs text-muted-foreground ml-2">{formatMessage({ id: 'liteTasks.multiCli.feasibility' })}:</span>
+                    <Badge variant="success" className="text-xs">{feasibility}%</Badge>
+                  </>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
+
 /**
  * LiteTasksPage component - Display lite-plan and lite-fix sessions with expandable tasks
  */
@@ -486,18 +900,15 @@ export function LiteTasksPage() {
     const taskCount = session.tasks?.length || 0;
     const isExpanded = expandedSessionId === session.id;
 
-    // Calculate task status distribution
+    // Calculate task status distribution (no useMemo - this is a render function, not a component)
-    const taskStats = React.useMemo(() => {
     const tasks = session.tasks || [];
-      return {
+    const taskStats = {
       completed: tasks.filter((t) => t.status === 'completed').length,
       inProgress: tasks.filter((t) => t.status === 'in_progress').length,
       blocked: tasks.filter((t) => t.status === 'blocked').length,
-        pending: tasks.filter((t) => !t.status || t.status === 'pending').length,
     };
-    }, [session.tasks]);
 
-    const firstTask = session.tasks?.[0];
+    const firstTask = tasks[0];
 
     return (
       <div key={session.id}>
@@ -552,12 +963,6 @@ export function LiteTasksPage() {
                   {taskStats.blocked} {formatMessage({ id: 'liteTasks.status.blocked' })}
                 </Badge>
               )}
-              {taskStats.pending > 0 && (
-                <Badge variant="secondary" className="gap-1 text-xs">
-                  <Activity className="h-3 w-3" />
-                  {taskStats.pending} {formatMessage({ id: 'liteTasks.status.pending' })}
-                </Badge>
-              )}
             </div>
 
             {/* Date and task count */}
@@ -600,29 +1005,28 @@ export function LiteTasksPage() {
     const status = latestSynthesis.status || session.status || 'analyzing';
     const createdAt = (metadata.timestamp as string) || session.createdAt || '';
 
-    // Calculate task status distribution
+    // Calculate task status distribution (no useMemo - this is a render function, not a component)
-    const taskStats = React.useMemo(() => {
     const tasks = session.tasks || [];
-      return {
+    const taskStats = {
       completed: tasks.filter((t) => t.status === 'completed').length,
       inProgress: tasks.filter((t) => t.status === 'in_progress').length,
       blocked: tasks.filter((t) => t.status === 'blocked').length,
-        pending: tasks.filter((t) => !t.status || t.status === 'pending').length,
       total: tasks.length,
     };
-    }, [session.tasks]);
+
+    const isExpanded = expandedSessionId === session.id;
 
     return (
+      <div key={session.id}>
         <Card
-        key={session.id}
           className="cursor-pointer hover:shadow-md transition-shadow"
-        onClick={() => setExpandedSessionId(expandedSessionId === session.id ? null : session.id)}
+          onClick={() => setExpandedSessionId(isExpanded ? null : session.id)}
         >
           <CardContent className="p-4">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-3 flex-1 min-w-0">
                 <div className="flex-shrink-0">
-                {expandedSessionId === session.id ? (
+                  {isExpanded ? (
                     <ChevronDown className="h-5 w-5 text-muted-foreground" />
                   ) : (
                     <ChevronRight className="h-5 w-5 text-muted-foreground" />
@@ -663,12 +1067,6 @@ export function LiteTasksPage() {
                     {taskStats.blocked} {formatMessage({ id: 'liteTasks.status.blocked' })}
                   </Badge>
                 )}
-              {taskStats.pending > 0 && (
-                <Badge variant="secondary" className="gap-1 text-xs">
-                  <Activity className="h-3 w-3" />
-                  {taskStats.pending} {formatMessage({ id: 'liteTasks.status.pending' })}
-                </Badge>
-              )}
               </div>
             )}
 
@@ -690,6 +1088,15 @@ export function LiteTasksPage() {
             </div>
           </CardContent>
         </Card>
+
+        {/* Expanded multi-cli panel with tabs */}
+        {isExpanded && (
+          <ExpandedMultiCliPanel
+            session={session}
+            onTaskClick={setSelectedTask}
+          />
+        )}
+      </div>
     );
   };
 

ccw/frontend/src/pages/ProjectOverviewPage.tsx

@@ -649,26 +649,26 @@ export function ProjectOverviewPage() {
       {/* Guidelines */}
       {guidelines && (
         <Card>
-          <CardContent className="p-4">
+          <CardContent className="p-6">
-            <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-sm font-semibold text-foreground flex items-center gap-1.5">
+              <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
-                <ScrollText className="w-4 h-4" />
+                <ScrollText className="w-5 h-5" />
                 {formatMessage({ id: 'projectOverview.guidelines.title' })}
               </h3>
-              <div className="flex gap-1.5">
+              <div className="flex gap-2">
                 {!isEditMode ? (
-                  <Button variant="outline" size="sm" className="h-7 text-xs px-2" onClick={handleEditStart}>
+                  <Button variant="outline" size="sm" onClick={handleEditStart}>
-                    <Edit className="w-3 h-3 mr-1" />
+                    <Edit className="w-4 h-4 mr-1" />
                     {formatMessage({ id: 'projectOverview.guidelines.edit' })}
                   </Button>
                 ) : (
                   <>
-                    <Button variant="outline" size="sm" className="h-7 text-xs px-2" onClick={handleEditCancel} disabled={isUpdating}>
+                    <Button variant="outline" size="sm" onClick={handleEditCancel} disabled={isUpdating}>
-                      <X className="w-3 h-3 mr-1" />
+                      <X className="w-4 h-4 mr-1" />
                       {formatMessage({ id: 'projectOverview.guidelines.cancel' })}
                     </Button>
-                    <Button variant="default" size="sm" className="h-7 text-xs px-2" onClick={handleSave} disabled={isUpdating}>
+                    <Button variant="default" size="sm" onClick={handleSave} disabled={isUpdating}>
-                      <Save className="w-3 h-3 mr-1" />
+                      <Save className="w-4 h-4 mr-1" />
                       {isUpdating ? formatMessage({ id: 'projectOverview.guidelines.saving' }) : formatMessage({ id: 'projectOverview.guidelines.save' })}
                     </Button>
                   </>
@@ -676,17 +676,17 @@ export function ProjectOverviewPage() {
               </div>
             </div>
 
-            <div className="space-y-4">
+            <div className="space-y-6">
               {!isEditMode ? (
                 <>
                   {/* Read-only Mode - Conventions */}
                   {guidelines.conventions && (
                     <div>
-                      <h4 className="text-xs font-semibold text-foreground mb-2 flex items-center gap-1.5">
+                      <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
-                        <BookMarked className="w-3.5 h-3.5" />
+                        <BookMarked className="w-4 h-4" />
                         <span>{formatMessage({ id: 'projectOverview.guidelines.conventions' })}</span>
                       </h4>
-                      <div className="space-y-1.5">
+                      <div className="space-y-2">
                         {Object.entries(guidelines.conventions).map(([key, items]) => {
                           const itemList = Array.isArray(items) ? items : [];
                           if (itemList.length === 0) return null;
@@ -695,12 +695,12 @@ export function ProjectOverviewPage() {
                               {itemList.map((item: string, i: number) => (
                                 <div
                                   key={i}
-                                  className="flex items-start gap-2 p-2 bg-background border border-border rounded"
+                                  className="flex items-start gap-3 p-3 bg-background border border-border rounded-lg"
                                 >
-                                  <span className="text-[10px] px-1.5 py-0.5 bg-muted text-muted-foreground rounded">
+                                  <span className="text-xs px-2 py-0.5 bg-muted text-muted-foreground rounded">
                                     {key}
                                   </span>
-                                  <span className="text-xs text-foreground">{item}</span>
+                                  <span className="text-sm text-foreground">{item}</span>
                                 </div>
                               ))}
                             </div>
@@ -713,11 +713,11 @@ export function ProjectOverviewPage() {
                   {/* Read-only Mode - Constraints */}
                   {guidelines.constraints && (
                     <div>
-                      <h4 className="text-xs font-semibold text-foreground mb-2 flex items-center gap-1.5">
+                      <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center gap-2">
-                        <ShieldAlert className="w-3.5 h-3.5" />
+                        <ShieldAlert className="w-4 h-4" />
                         <span>{formatMessage({ id: 'projectOverview.guidelines.constraints' })}</span>
                       </h4>
-                      <div className="space-y-1.5">
+                      <div className="space-y-2">
                         {Object.entries(guidelines.constraints).map(([key, items]) => {
                           const itemList = Array.isArray(items) ? items : [];
                           if (itemList.length === 0) return null;
@@ -726,12 +726,12 @@ export function ProjectOverviewPage() {
                               {itemList.map((item: string, i: number) => (
                                 <div
                                   key={i}
-                                  className="flex items-start gap-2 p-2 bg-background border border-border rounded"
+                                  className="flex items-start gap-3 p-3 bg-background border border-border rounded-lg"
                                 >
-                                  <span className="text-[10px] px-1.5 py-0.5 bg-muted text-muted-foreground rounded">
+                                  <span className="text-xs px-2 py-0.5 bg-muted text-muted-foreground rounded">
                                     {key}
                                   </span>
-                                  <span className="text-xs text-foreground">{item}</span>
+                                  <span className="text-sm text-foreground">{item}</span>
                                 </div>
                               ))}
                             </div>

ccw/frontend/src/pages/ReviewSessionPage.tsx

@@ -328,13 +328,9 @@ export function ReviewSessionPage() {
     });
   };
 
-  const toggleSelectAll = () => {
+  const selectAllFindings = () => {
     const validIds = filteredFindings.map(f => f.id).filter((id): id is string => id !== undefined);
-    if (selectedFindings.size === validIds.length) {
-      setSelectedFindings(new Set());
-    } else {
     setSelectedFindings(new Set(validIds));
-    }
   };
 
   const selectVisibleFindings = () => {
@@ -343,16 +339,20 @@ export function ReviewSessionPage() {
   };
 
   const selectBySeverity = (severity: FindingWithSelection['severity']) => {
-    const criticalIds = flattenedFindings
+    const severityIds = flattenedFindings
       .filter(f => f.severity === severity && f.id !== undefined)
       .map(f => f.id!);
     setSelectedFindings(prev => {
       const next = new Set(prev);
-      criticalIds.forEach(id => next.add(id));
+      severityIds.forEach(id => next.add(id));
       return next;
     });
   };
 
+  const clearSelection = () => {
+    setSelectedFindings(new Set());
+  };
+
   const toggleExpandFinding = (findingId: string) => {
     setExpandedFindings(prev => {
       const next = new Set(prev);
@@ -600,49 +600,19 @@ export function ReviewSessionPage() {
       {/* Fix Progress Carousel */}
       {sessionId && <FixProgressCarousel sessionId={sessionId} />}
 
-      {/* Filters and Controls */}
+      {/* Unified Filter Card with Dimension Tabs */}
       <Card>
         <CardContent className="p-4 space-y-4">
-          {/* Checkbox-style Severity Filters */}
+          {/* Top Bar: Search + Sort + Reset */}
-          <div className="space-y-3">
+          <div className="flex flex-wrap gap-3 items-center">
-            <div className="text-sm font-medium">{formatMessage({ id: 'reviewSession.filters.severity' })}</div>
+            <div className="relative flex-1 min-w-[180px] max-w-md">
-            <div className="flex flex-wrap gap-2">
-              {(['critical', 'high', 'medium', 'low'] as const).map(severity => {
-                const isEnabled = severityFilter.has(severity);
-                return (
-                  <label
-                    key={severity}
-                    className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full border cursor-pointer transition-colors ${
-                      isEnabled
-                        ? 'bg-primary text-primary-foreground border-primary'
-                        : 'bg-background border-border hover:bg-muted'
-                    }`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={isEnabled}
-                      onChange={() => toggleSeverity(severity)}
-                      className="sr-only"
-                    />
-                    <span className="text-sm font-medium">
-                      {formatMessage({ id: `reviewSession.severity.${severity}` })}
-                    </span>
-                  </label>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Search and Sort */}
-          <div className="flex flex-wrap gap-3">
-            <div className="relative flex-1 min-w-[200px]">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <input
                 type="text"
                 placeholder={formatMessage({ id: 'reviewSession.search.placeholder' })}
                 value={searchQuery}
                 onChange={e => setSearchQuery(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                className="w-full pl-10 pr-4 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
               />
             </div>
             <select
@@ -658,72 +628,40 @@ export function ReviewSessionPage() {
               variant="outline"
               size="sm"
               onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
+              className="w-9 p-0"
             >
               {sortOrder === 'asc' ? '↑' : '↓'}
             </Button>
-            <Button variant="outline" size="sm" onClick={resetFilters}>
+            <Button variant="ghost" size="sm" onClick={resetFilters} className="text-muted-foreground hover:text-foreground">
-              {formatMessage({ id: 'reviewSession.filters.reset' })}
+              ✕ {formatMessage({ id: 'reviewSession.filters.reset' })}
             </Button>
           </div>
 
-          {/* Selection Controls */}
+          {/* Middle Row: Dimension Tabs + Severity Filters */}
-          <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-col sm:flex-row gap-4">
-            <div className="flex items-center gap-2">
+            {/* Dimension Tabs - Horizontal Scrollable */}
-              <span className="text-sm text-muted-foreground">
+            <div className="flex-1">
-                {formatMessage({ id: 'reviewSession.selection.count' }, { count: selectedFindings.size })}
+              <div className="text-xs font-medium text-muted-foreground mb-2">
-              </span>
+                {formatMessage({ id: 'reviewSession.filters.dimension' })}
-              <Button variant="outline" size="sm" onClick={toggleSelectAll}>
-                {selectedFindings.size === filteredFindings.length
-                  ? formatMessage({ id: 'reviewSession.selection.clearAll' })
-                  : formatMessage({ id: 'reviewSession.selection.selectAll' })}
-              </Button>
-              <Button variant="outline" size="sm" onClick={selectVisibleFindings}>
-                {formatMessage({ id: 'reviewSession.selection.selectVisible' })}
-              </Button>
-              <Button variant="outline" size="sm" onClick={() => selectBySeverity('critical')}>
-                {formatMessage({ id: 'reviewSession.selection.selectCritical' })}
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setSelectedFindings(new Set())}
-              >
-                {formatMessage({ id: 'reviewSession.selection.clear' })}
-              </Button>
               </div>
-            <Button
+              <div className="flex gap-1.5 overflow-x-auto pb-1 scrollbar-thin">
-              variant="default"
-              size="sm"
-              onClick={exportSelectedAsJson}
-              disabled={selectedFindings.size === 0}
-              className="gap-2"
-            >
-              <Download className="h-4 w-4" />
-              🔧 {formatMessage({ id: 'reviewSession.export' })}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Dimension Tabs */}
-      <div className="flex flex-wrap gap-2">
                 <button
-          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  className={`px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap transition-colors ${
                     dimensionFilter === 'all'
-              ? 'bg-primary text-primary-foreground'
+                      ? 'bg-primary text-primary-foreground shadow-sm'
-              : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                      : 'bg-muted/50 text-muted-foreground hover:bg-muted'
                   }`}
                   onClick={() => setDimensionFilter('all')}
                 >
-          {formatMessage({ id: 'reviewSession.dimensionTabs.all' })} ({dimensionCounts.all || 0})
+                  All ({dimensionCounts.all || 0})
                 </button>
                 {dimensions.map(dim => (
                   <button
                     key={dim.name}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    className={`px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap transition-colors ${
                       dimensionFilter === dim.name
-                ? 'bg-primary text-primary-foreground'
+                        ? 'bg-primary text-primary-foreground shadow-sm'
-                : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                        : 'bg-muted/50 text-muted-foreground hover:bg-muted'
                     }`}
                     onClick={() => setDimensionFilter(dim.name)}
                   >
@@ -731,8 +669,87 @@ export function ReviewSessionPage() {
                   </button>
                 ))}
               </div>
+            </div>
 
-      {/* Findings List */}
+            {/* Severity Filters - Compact Pills */}
+            <div className="sm:w-auto">
+              <div className="text-xs font-medium text-muted-foreground mb-2">
+                {formatMessage({ id: 'reviewSession.filters.severity' })}
+              </div>
+              <div className="flex gap-1.5 flex-wrap">
+                {(['critical', 'high', 'medium', 'low'] as const).map(severity => {
+                  const isEnabled = severityFilter.has(severity);
+                  const colors = {
+                    critical: isEnabled ? 'bg-red-500 text-white border-red-500' : 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800',
+                    high: isEnabled ? 'bg-orange-500 text-white border-orange-500' : 'bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 border-orange-200 dark:border-orange-800',
+                    medium: isEnabled ? 'bg-blue-500 text-white border-blue-500' : 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800',
+                    low: isEnabled ? 'bg-gray-500 text-white border-gray-500' : 'bg-gray-50 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800',
+                  };
+                  return (
+                    <label
+                      key={severity}
+                      className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md border text-xs font-medium cursor-pointer transition-all ${
+                        colors[severity]
+                      } ${isEnabled ? 'shadow-sm' : 'hover:opacity-80'}`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isEnabled}
+                        onChange={() => toggleSeverity(severity)}
+                        className="sr-only"
+                      />
+                      <span>{formatMessage({ id: `reviewSession.severity.short.${severity}` })}</span>
+                      <span className="opacity-70">({flattenedFindings.filter(f => f.severity === severity).length})</span>
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Bar: Selection Actions + Export */}
+          <div className="flex flex-wrap items-center justify-between gap-3 pt-3 border-t border-border">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-md">
+                {selectedFindings.size > 0
+                  ? formatMessage({ id: 'reviewSession.selection.countSelected' }, { count: selectedFindings.size })
+                  : formatMessage({ id: 'reviewSession.selection.total' }, { count: filteredFindings.length })
+                }
+              </span>
+              {selectedFindings.size > 0 && (
+                <>
+                  <Button variant="outline" size="sm" onClick={clearSelection} className="h-8 text-xs">
+                    {formatMessage({ id: 'reviewSession.selection.clear' })}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => selectBySeverity('critical')} className="h-8 text-xs">
+                    🔥 {formatMessage({ id: 'reviewSession.selection.selectCritical' })}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={selectVisibleFindings} className="h-8 text-xs">
+                    {formatMessage({ id: 'reviewSession.selection.selectVisible' })}
+                  </Button>
+                </>
+              )}
+              {selectedFindings.size === 0 && (
+                <Button variant="outline" size="sm" onClick={selectAllFindings} className="h-8 text-xs">
+                  {formatMessage({ id: 'reviewSession.selection.selectAll' })}
+                </Button>
+              )}
+            </div>
+            <Button
+              variant={selectedFindings.size > 0 ? 'default' : 'outline'}
+              size="sm"
+              onClick={exportSelectedAsJson}
+              disabled={selectedFindings.size === 0}
+              className="h-8 gap-1.5 text-xs"
+            >
+              <Download className="h-3.5 w-3.5" />
+              🔧 {formatMessage({ id: 'reviewSession.export' })}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Split Panel: Findings List + Preview */}
       {filteredFindings.length === 0 ? (
         <Card>
           <CardContent className="p-12 text-center">
@@ -746,70 +763,220 @@ export function ReviewSessionPage() {
           </CardContent>
         </Card>
       ) : (
-        <div className="space-y-3">
+        <div className="grid grid-cols-1 md:grid-cols-[minmax(0,45fr)_minmax(0,55fr)] gap-4">
+          {/* Left Panel: Findings List */}
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-sm font-medium">
+                  {formatMessage({ id: 'reviewSession.findingsList.count' }, { count: filteredFindings.length })}
+                </span>
+              </div>
+              <div className="space-y-2 max-h-[600px] overflow-y-auto">
                 {filteredFindings.filter(f => f.id !== undefined).map(finding => {
                   const findingId = finding.id!;
-            const isExpanded = expandedFindings.has(findingId);
                   const isSelected = selectedFindings.has(findingId);
+                  const isPreviewing = selectedFindingId === findingId;
                   const badge = getSeverityBadge(finding.severity);
                   const BadgeIcon = badge.icon;
 
                   return (
-              <Card key={findingId} className={isSelected ? 'ring-2 ring-primary' : ''}>
+                    <div
-                <CardContent className="p-4">
+                      key={findingId}
-                  <div className="flex items-start gap-3">
+                      className={`p-3 rounded-lg border cursor-pointer transition-colors ${
+                        isPreviewing
+                          ? 'bg-primary/10 border-primary'
+                          : 'bg-background border-border hover:bg-muted'
+                      }`}
+                      onClick={() => handleFindingClick(findingId)}
+                    >
+                      <div className="flex items-start gap-2">
                         {/* Checkbox */}
                         <input
                           type="checkbox"
                           checked={isSelected}
-                      onChange={() => toggleSelectFinding(findingId)}
+                          onChange={(e) => {
-                      className="mt-1"
+                            e.stopPropagation();
+                            toggleSelectFinding(findingId);
+                          }}
+                          className="mt-0.5 flex-shrink-0"
                         />
 
+                        {/* Compact Finding Content */}
                         <div className="flex-1 min-w-0">
-                      {/* Header */}
+                          <div className="flex items-center gap-1.5 mb-1 flex-wrap">
-                      <div
+                            <Badge variant={badge.variant} className="gap-1 text-xs">
-                        className="flex items-start justify-between gap-3 cursor-pointer"
+                              <BadgeIcon className="h-2.5 w-2.5" />
-                        onClick={() => toggleExpandFinding(findingId)}
+                              {badge.label}
+                            </Badge>
+                            <span className="text-xs text-muted-foreground">
+                              {finding.dimension}
+                            </span>
+                          </div>
+                          <p className="text-sm font-medium text-foreground truncate">
+                            {finding.title}
+                          </p>
+                          {finding.file && (
+                            <p className="text-xs text-muted-foreground font-mono truncate mt-0.5">
+                              {finding.file}:{finding.line || '?'}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Right Panel: Enhanced Preview */}
+          <Card className="sticky top-4 self-start">
+            <CardContent className="p-0 h-full min-h-[500px]">
+              {!selectedFindingId ? (
+                // Enhanced Empty State
+                <div className="flex flex-col items-center justify-center h-full min-h-[400px] p-8 text-center bg-gradient-to-br from-muted/30 to-muted/10">
+                  <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-4">
+                    <Search className="h-10 w-10 text-muted-foreground" />
+                  </div>
+                  <h3 className="text-base font-semibold text-foreground mb-2">
+                    {formatMessage({ id: 'reviewSession.preview.emptyTitle' })}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-4 max-w-[250px]">
+                    {formatMessage({ id: 'reviewSession.preview.empty' })}
+                  </p>
+                  <div className="flex flex-wrap gap-2 justify-center">
+                    <div className="flex items-center gap-1.5 px-3 py-1.5 bg-background rounded-lg border text-xs">
+                      <span className="w-2 h-2 rounded-full bg-destructive"></span>
+                      {formatMessage({ id: 'reviewSession.preview.emptyTipSeverity' })}
+                    </div>
+                    <div className="flex items-center gap-1.5 px-3 py-1.5 bg-background rounded-lg border text-xs">
+                      <span>📁</span>
+                      {formatMessage({ id: 'reviewSession.preview.emptyTipFile' })}
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                // Preview Content
+                (() => {
+                  const finding = flattenedFindings.find(f => f.id === selectedFindingId);
+                  if (!finding) return null;
+
+                  const badge = getSeverityBadge(finding.severity);
+                  const BadgeIcon = badge.icon;
+                  const isSelected = selectedFindings.has(selectedFindingId);
+
+                  // Find adjacent findings for navigation
+                  const findingIndex = filteredFindings.findIndex(f => f.id === selectedFindingId);
+                  const prevFinding = findingIndex > 0 ? filteredFindings[findingIndex - 1] : null;
+                  const nextFinding = findingIndex < filteredFindings.length - 1 ? filteredFindings[findingIndex + 1] : null;
+
+                  return (
+                    <div className="flex flex-col h-full">
+                      {/* Sticky Header */}
+                      <div className="sticky top-0 z-10 bg-background border-b border-border p-4 space-y-3">
+                        {/* Navigation + Badges Row */}
+                        <div className="flex items-center justify-between gap-2">
+                          {/* Navigation Buttons */}
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => prevFinding && handleFindingClick(prevFinding.id!)}
+                              disabled={!prevFinding}
+                              className="h-8 w-8 p-0"
                             >
-                        <div className="flex-1 min-w-0">
+                              <ChevronRight className="h-4 w-4 rotate-180" />
-                          <div className="flex items-center gap-2 mb-1 flex-wrap">
+                            </Button>
-                            <Badge variant={badge.variant} className="gap-1">
+                            <span className="text-xs text-muted-foreground px-2">
+                              {findingIndex + 1} / {filteredFindings.length}
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => nextFinding && handleFindingClick(nextFinding.id!)}
+                              disabled={!nextFinding}
+                              className="h-8 w-8 p-0"
+                            >
+                              <ChevronRight className="h-4 w-4" />
+                            </Button>
+                          </div>
+
+                          {/* Badges */}
+                          <div className="flex items-center gap-1.5 flex-wrap">
+                            <Badge variant={badge.variant} className="gap-1 text-xs">
                               <BadgeIcon className="h-3 w-3" />
                               {badge.label}
                             </Badge>
                             <Badge variant="outline" className="text-xs">
                               {finding.dimension}
                             </Badge>
-                            {finding.file && (
-                              <span className="text-xs text-muted-foreground font-mono">
-                                {finding.file}:{finding.line || '?'}
-                              </span>
-                            )}
                           </div>
-                          <h4 className="font-medium text-foreground text-sm">{finding.title}</h4>
+
-                          {finding.description && (
+                          {/* Select Button */}
-                            <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                          <Button
-                              {finding.description}
+                            variant={isSelected ? 'default' : 'outline'}
-                            </p>
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleSelectFinding(selectedFindingId);
+                            }}
+                            className="h-8 text-xs"
+                          >
+                            {isSelected ? (
+                              <>
+                                <CheckCircle className="h-3.5 w-3.5 mr-1" />
+                                {formatMessage({ id: 'reviewSession.preview.selected' })}
+                              </>
+                            ) : (
+                              <>
+                                <span className="mr-1">⊕</span>
+                                {formatMessage({ id: 'reviewSession.preview.selectForFix' })}
+                              </>
                             )}
-                        </div>
-                        <Button variant="ghost" size="sm" className="flex-shrink-0">
-                          {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                           </Button>
                         </div>
 
-                      {/* Expanded Content */}
+                        {/* Title */}
-                      {isExpanded && (
+                        <h3 className="text-base font-semibold text-foreground line-clamp-2">
-                        <div className="mt-4 pt-4 border-t border-border space-y-3">
+                          {finding.title}
+                        </h3>
+
+                        {/* Quick Info Bar */}
+                        <div className="flex items-center gap-3 text-xs">
+                          {finding.file && (
+                            <div className="flex items-center gap-1 text-muted-foreground flex-1 min-w-0">
+                              <span className="flex-shrink-0">📁</span>
+                              <code className="truncate">{finding.file}:{finding.line || '?'}</code>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Scrollable Content */}
+                      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                        {/* Description */}
+                        {finding.description && (
+                          <div className="bg-muted/30 rounded-lg p-3">
+                            <div className="text-xs font-semibold text-foreground mb-1.5 flex items-center gap-1.5">
+                              <span>📝</span>
+                              {formatMessage({ id: 'reviewSession.preview.description' })}
+                            </div>
+                            <p className="text-sm text-foreground leading-relaxed">
+                              {finding.description}
+                            </p>
+                          </div>
+                        )}
+
                         {/* Code Context */}
                         {finding.code_context && (
                           <div>
-                              <h5 className="text-xs font-semibold text-foreground mb-1">
+                            <div className="text-xs font-semibold text-foreground mb-1.5 flex items-center gap-1.5">
-                                {formatMessage({ id: 'reviewSession.codeContext' })}
+                              <span>💻</span>
-                              </h5>
+                              {formatMessage({ id: 'reviewSession.preview.codeContext' })}
-                              <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+                            </div>
-                                <code>{finding.code_context}</code>
+                            <pre className="text-xs bg-muted p-3 rounded-lg overflow-x-auto border border-border">
+                              <code className="text-foreground">{finding.code_context}</code>
                             </pre>
                           </div>
                         )}
@@ -817,47 +984,53 @@ export function ReviewSessionPage() {
                         {/* Root Cause */}
                         {finding.root_cause && (
                           <div>
-                              <h5 className="text-xs font-semibold text-foreground mb-1">
+                            <div className="text-xs font-semibold text-foreground mb-1.5 flex items-center gap-1.5">
-                                {formatMessage({ id: 'reviewSession.rootCause' })}
+                              <span>🎯</span>
-                              </h5>
+                              {formatMessage({ id: 'reviewSession.preview.rootCause' })}
-                              <p className="text-xs text-muted-foreground">{finding.root_cause}</p>
+                            </div>
+                            <p className="text-sm text-foreground bg-muted/30 rounded-lg p-3 leading-relaxed">
+                              {finding.root_cause}
+                            </p>
                           </div>
                         )}
 
                         {/* Impact */}
                         {finding.impact && (
                           <div>
-                              <h5 className="text-xs font-semibold text-foreground mb-1">
+                            <div className="text-xs font-semibold text-foreground mb-1.5 flex items-center gap-1.5">
-                                {formatMessage({ id: 'reviewSession.impact' })}
+                              <span>⚠️</span>
-                              </h5>
+                              {formatMessage({ id: 'reviewSession.preview.impact' })}
-                              <p className="text-xs text-muted-foreground">{finding.impact}</p>
+                            </div>
+                            <p className="text-sm text-foreground bg-orange-50 dark:bg-orange-900/20 rounded-lg p-3 leading-relaxed border border-orange-200 dark:border-orange-800">
+                              {finding.impact}
+                            </p>
                           </div>
                         )}
 
                         {/* Recommendations */}
                         {finding.recommendations && finding.recommendations.length > 0 && (
                           <div>
-                              <h5 className="text-xs font-semibold text-foreground mb-1">
+                            <div className="text-xs font-semibold text-foreground mb-1.5 flex items-center gap-1.5">
-                                {formatMessage({ id: 'reviewSession.recommendations' })}
+                              <span>✅</span>
-                              </h5>
+                              {formatMessage({ id: 'reviewSession.preview.recommendations' })}
-                              <ul className="space-y-1">
+                            </div>
+                            <ul className="space-y-2">
                               {finding.recommendations.map((rec, idx) => (
-                                  <li key={idx} className="text-xs text-muted-foreground flex items-start gap-2">
+                                <li key={idx} className="text-sm text-foreground flex items-start gap-2 bg-green-50 dark:bg-green-900/20 rounded-lg p-3 border border-green-200 dark:border-green-800">
-                                    <span className="text-primary">•</span>
+                                  <span className="text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5">✓</span>
-                                    <span>{rec}</span>
+                                  <span className="leading-relaxed">{rec}</span>
                                 </li>
                               ))}
                             </ul>
                           </div>
                         )}
                       </div>
+                    </div>
+                  );
+                })()
               )}
-                    </div>
-                  </div>
             </CardContent>
           </Card>
-            );
-          })}
         </div>
       )}
     </div>

ccw/frontend/src/pages/SessionDetailPage.tsx

@@ -28,10 +28,19 @@ import { TaskDrawer } from '@/components/shared/TaskDrawer';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { TabsNavigation, type TabItem } from '@/components/ui/TabsNavigation';
-import type { TaskData } from '@/types/store';
+import type { TaskData, SessionMetadata } from '@/types/store';
 
 type TabValue = 'tasks' | 'context' | 'summary' | 'impl-plan' | 'conflict' | 'review';
 
+// Status label keys for i18n (maps snake_case status to camelCase translation keys)
+const statusLabelKeys: Record<SessionMetadata['status'], string> = {
+  planning: 'sessions.status.planning',
+  in_progress: 'sessions.status.inProgress',
+  completed: 'sessions.status.completed',
+  archived: 'sessions.status.archived',
+  paused: 'sessions.status.paused',
+};
+
 /**
  * SessionDetailPage component - Main session detail page with tabs
  */
@@ -159,7 +168,7 @@ export function SessionDetailPage() {
           </div>
         </div>
         <Badge variant={session.status === 'completed' ? 'success' : 'secondary'}>
-          {formatMessage({ id: `sessions.status.${session.status}` })}
+          {formatMessage({ id: statusLabelKeys[session.status] })}
         </Badge>
       </div>
 

ccw/frontend/src/pages/SessionsPage.tsx

@@ -46,6 +46,15 @@ import type { SessionMetadata } from '@/types/store';
 
 type LocationFilter = 'all' | 'active' | 'archived';
 
+// Status label keys for i18n (maps snake_case status to camelCase translation keys)
+const statusLabelKeys: Record<SessionMetadata['status'], string> = {
+  planning: 'sessions.status.planning',
+  in_progress: 'sessions.status.inProgress',
+  completed: 'sessions.status.completed',
+  archived: 'sessions.status.archived',
+  paused: 'sessions.status.paused',
+};
+
 /**
  * SessionsPage component - Sessions list with CRUD operations
  */
@@ -88,8 +97,13 @@ export function SessionsPage() {
   const isMutating = isArchiving || isDeleting;
 
   // Handlers
-  const handleSessionClick = (sessionId: string) => {
+  const handleSessionClick = (sessionId: string, sessionType?: SessionMetadata['type']) => {
+    // Route review sessions to the dedicated review page
+    if (sessionType === 'review') {
+      navigate(`/sessions/${sessionId}/review`);
+    } else {
       navigate(`/sessions/${sessionId}`);
+    }
   };
 
   const handleArchive = async (sessionId: string) => {
@@ -225,7 +239,7 @@ export function SessionsPage() {
                 onClick={() => toggleStatusFilter(status)}
                 className="justify-between"
               >
-                <span>{formatMessage({ id: `sessions.status.${status}` })}</span>
+                <span>{formatMessage({ id: statusLabelKeys[status] })}</span>
                 {statusFilter.includes(status) && (
                   <span className="text-primary">&#10003;</span>
                 )}
@@ -254,7 +268,7 @@ export function SessionsPage() {
               className="cursor-pointer"
               onClick={() => toggleStatusFilter(status)}
             >
-              {formatMessage({ id: `sessions.status.${status}` })}
+              {formatMessage({ id: statusLabelKeys[status] })}
               <X className="ml-1 h-3 w-3" />
             </Badge>
           ))}
@@ -304,8 +318,8 @@ export function SessionsPage() {
             <SessionCard
               key={session.session_id}
               session={session}
-              onClick={handleSessionClick}
+              onClick={(sessionId) => handleSessionClick(sessionId, session.type)}
-              onView={handleSessionClick}
+              onView={(sessionId) => handleSessionClick(sessionId, session.type)}
               onArchive={handleArchive}
               onDelete={handleDeleteClick}
               actionsDisabled={isMutating}

ccw/frontend/src/pages/session-detail/TaskListTab.tsx

@@ -9,7 +9,6 @@ import {
   ListChecks,
   Code,
   GitBranch,
-  Zap,
   Calendar,
   FileCode,
   Layers,
@@ -198,15 +197,6 @@ export function TaskListTab({ session, onTaskClick }: TaskListTabProps) {
             // Cast to extended type to access all possible fields
             const extTask = task as unknown as ExtendedTask;
 
-            // Priority config
-            const priorityConfig: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'warning' | 'info' }> = {
-              critical: { label: formatMessage({ id: 'sessionDetail.tasks.priority.critical' }), variant: 'destructive' },
-              high: { label: formatMessage({ id: 'sessionDetail.tasks.priority.high' }), variant: 'warning' },
-              medium: { label: formatMessage({ id: 'sessionDetail.tasks.priority.medium' }), variant: 'info' },
-              low: { label: formatMessage({ id: 'sessionDetail.tasks.priority.low' }), variant: 'secondary' },
-            };
-            const priority = extTask.priority ? priorityConfig[extTask.priority] : null;
-
             // Get depends_on from either root level or context
             const dependsOn = extTask.depends_on || extTask.context?.depends_on || [];
             const dependsCount = dependsOn.length;

ccw/frontend/src/types/store.ts

@@ -182,9 +182,11 @@ export interface SessionMetadata {
   plan_updated_at?: string;
   has_review?: boolean;
   review?: {
-    dimensions: string[];
+    dimensions: Array<{ name: string; findings?: Array<{ severity?: string }> }>;
-    iterations: string[];
+    dimensions_count?: number;
-    fixes: string[];
+    findings?: number;
+    iterations?: string[];
+    fixes?: string[];
   };
   summaries?: Array<{ task_id: string; content: unknown }>;
   tasks?: TaskData[];