feat: add CLI Viewer Page with multi-pane layout and state management

- Implemented the CliViewerPage component for displaying CLI outputs in a configurable multi-pane layout.
- Integrated Zustand for state management, allowing for dynamic layout changes and tab management.
- Added layout options: single, split horizontal, split vertical, and 2x2 grid.
- Created viewerStore for managing layout, panes, and tabs, including actions for adding/removing panes and tabs.
- Added CoordinatorPage barrel export for easier imports.

ccw/frontend/src/components/cli-viewer/ContentArea.tsx

@@ -0,0 +1,198 @@
+// ========================================
+// ContentArea Component
+// ========================================
+// Displays CLI output for the active tab in a pane
+
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { Terminal, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  useViewerStore,
+  selectActiveTab,
+  type PaneId,
+} from '@/stores/viewerStore';
+import { useCliStreamStore, type CliExecutionState, type CliOutputLine } from '@/stores/cliStreamStore';
+import { MonitorBody } from '@/components/shared/CliStreamMonitor/MonitorBody';
+import { MessageRenderer } from '@/components/shared/CliStreamMonitor/MessageRenderer';
+
+// ========== Types ==========
+
+export interface ContentAreaProps {
+  paneId: PaneId;
+  className?: string;
+}
+
+// ========== Helper Components ==========
+
+/**
+ * Empty state when no tab is active
+ */
+function EmptyTabState() {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+      <Terminal className="h-12 w-12 opacity-30" />
+      <div className="text-center">
+        <p className="text-sm font-medium">
+          {formatMessage({ id: 'cliViewer.noActiveTab', defaultMessage: 'No active tab' })}
+        </p>
+        <p className="text-xs mt-1">
+          {formatMessage({
+            id: 'cliViewer.selectOrCreate',
+            defaultMessage: 'Select a tab or start a new CLI execution',
+          })}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Execution not found state
+ */
+function ExecutionNotFoundState({ executionId }: { executionId: string }) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+      <Terminal className="h-12 w-12 opacity-30" />
+      <div className="text-center">
+        <p className="text-sm font-medium">
+          {formatMessage({ id: 'cliViewer.executionNotFound', defaultMessage: 'Execution not found' })}
+        </p>
+        <p className="text-xs mt-1 font-mono opacity-50">{executionId}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Single output line component with type-based styling
+ */
+function OutputLineItem({ line }: { line: CliOutputLine }) {
+  // Type-based styling
+  const typeStyles: Record<CliOutputLine['type'], string> = {
+    stdout: 'text-foreground',
+    stderr: 'text-rose-600 dark:text-rose-400 bg-rose-500/5',
+    thought: 'text-blue-600 dark:text-blue-400 italic bg-blue-500/5',
+    system: 'text-amber-600 dark:text-amber-400 bg-amber-500/5',
+    metadata: 'text-muted-foreground text-xs',
+    tool_call: 'text-emerald-600 dark:text-emerald-400 bg-emerald-500/5 font-mono',
+  };
+
+  return (
+    <div
+      className={cn(
+        'px-3 py-1 text-sm',
+        'border-l-2 border-transparent',
+        typeStyles[line.type] || 'text-foreground',
+        line.type === 'stderr' && 'border-l-rose-500',
+        line.type === 'thought' && 'border-l-blue-500',
+        line.type === 'system' && 'border-l-amber-500',
+        line.type === 'tool_call' && 'border-l-emerald-500'
+      )}
+    >
+      {line.type === 'thought' || line.type === 'tool_call' ? (
+        <MessageRenderer content={line.content} format="markdown" />
+      ) : (
+        <pre className="whitespace-pre-wrap break-words font-mono text-xs">
+          {line.content}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+/**
+ * CLI output display component
+ */
+function CliOutputDisplay({ execution, executionId }: { execution: CliExecutionState; executionId: string }) {
+  const { formatMessage } = useIntl();
+
+  if (!execution.output || execution.output.length === 0) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center text-muted-foreground gap-4">
+        <Terminal className="h-12 w-12 opacity-30" />
+        <div className="text-center">
+          <p className="text-sm">
+            {execution.status === 'running'
+              ? formatMessage({ id: 'cliViewer.waitingForOutput', defaultMessage: 'Waiting for output...' })
+              : formatMessage({ id: 'cliViewer.noOutput', defaultMessage: 'No output' })}
+          </p>
+          {execution.status === 'running' && (
+            <Loader2 className="h-4 w-4 animate-spin mt-2 mx-auto opacity-50" />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <MonitorBody autoScroll={execution.status === 'running'} showScrollButton>
+      <div className="py-2">
+        {execution.output.map((line, index) => (
+          <OutputLineItem
+            key={`${executionId}-line-${index}`}
+            line={line}
+          />
+        ))}
+      </div>
+    </MonitorBody>
+  );
+}
+
+// ========== Main Component ==========
+
+/**
+ * ContentArea - Displays CLI output for active tab
+ *
+ * Features:
+ * - Integration with CliStreamStore for execution data
+ * - Auto-scroll during active execution
+ * - Empty state handling
+ * - Message rendering with proper formatting
+ */
+export function ContentArea({ paneId, className }: ContentAreaProps) {
+  // Get active tab using the selector
+  const activeTab = useViewerStore((state) => selectActiveTab(state, paneId));
+  
+  // Get execution data from cliStreamStore
+  const executions = useCliStreamStore((state) => state.executions);
+  
+  const execution = useMemo(() => {
+    if (!activeTab?.executionId) return null;
+    return executions[activeTab.executionId] || null;
+  }, [activeTab?.executionId, executions]);
+
+  // Determine what to render
+  const content = useMemo(() => {
+    // No active tab
+    if (!activeTab) {
+      return <EmptyTabState />;
+    }
+
+    // No execution data found
+    if (!execution) {
+      return <ExecutionNotFoundState executionId={activeTab.executionId} />;
+    }
+
+    // Show CLI output
+    return <CliOutputDisplay execution={execution} executionId={activeTab.executionId} />;
+  }, [activeTab, execution]);
+
+  return (
+    <div
+      className={cn(
+        'flex-1 overflow-hidden',
+        'bg-background',
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+}
+
+export default ContentArea;

ccw/frontend/src/components/cli-viewer/EmptyState.tsx

@@ -0,0 +1,89 @@
+// ========================================
+// EmptyState Component
+// ========================================
+// Empty state display for CLI viewer
+
+import { useIntl } from 'react-intl';
+import { Terminal, Play, Keyboard } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+// ========== Types ==========
+
+export interface EmptyStateProps {
+  className?: string;
+}
+
+// ========== Component ==========
+
+/**
+ * EmptyState - Displays when no CLI executions are active
+ *
+ * Features:
+ * - Informative empty state message
+ * - Quick start hints
+ * - Dark theme compatible
+ */
+export function EmptyState({ className }: EmptyStateProps) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className={cn(
+        'h-full flex flex-col items-center justify-center',
+        'bg-card dark:bg-surface-900',
+        'text-muted-foreground',
+        className
+      )}
+    >
+      <div className="flex flex-col items-center gap-6 max-w-md text-center p-8">
+        {/* Icon */}
+        <div className="relative">
+          <Terminal className="h-16 w-16 opacity-20" />
+          <div className="absolute -bottom-1 -right-1 bg-primary/10 rounded-full p-1.5">
+            <Play className="h-4 w-4 text-primary" />
+          </div>
+        </div>
+
+        {/* Title */}
+        <div>
+          <h3 className="text-lg font-semibold text-foreground mb-2">
+            {formatMessage({
+              id: 'cliViewer.emptyState.title',
+              defaultMessage: 'CLI Viewer',
+            })}
+          </h3>
+          <p className="text-sm">
+            {formatMessage({
+              id: 'cliViewer.emptyState.description',
+              defaultMessage: 'Start a CLI execution to see the output here.',
+            })}
+          </p>
+        </div>
+
+        {/* Hints */}
+        <div className="flex flex-col gap-3 text-xs">
+          <div className="flex items-center gap-2">
+            <Keyboard className="h-4 w-4 shrink-0" />
+            <span>
+              {formatMessage({
+                id: 'cliViewer.emptyState.hint1',
+                defaultMessage: 'Use "ccw cli" command to start an execution',
+              })}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Terminal className="h-4 w-4 shrink-0" />
+            <span>
+              {formatMessage({
+                id: 'cliViewer.emptyState.hint2',
+                defaultMessage: 'Active executions will appear as tabs',
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EmptyState;

ccw/frontend/src/components/cli-viewer/ExecutionPicker.tsx

@@ -0,0 +1,307 @@
+// ========================================
+// ExecutionPicker Component
+// ========================================
+// Dialog for selecting CLI executions to open as tabs
+
+import { useState, useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { Plus, Search, Terminal, Clock, CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/Dialog';
+import {
+  useCliStreamStore,
+  type CliExecutionState,
+  type CliExecutionStatus,
+} from '@/stores/cliStreamStore';
+import { useViewerStore, type PaneId } from '@/stores/viewerStore';
+
+// ========== Types ==========
+
+export interface ExecutionPickerProps {
+  paneId: PaneId;
+  className?: string;
+}
+
+// ========== Constants ==========
+
+const STATUS_CONFIG: Record<CliExecutionStatus, { icon: typeof CheckCircle2; color: string; label: string }> = {
+  running: {
+    icon: Loader2,
+    color: 'text-indigo-500',
+    label: 'Running',
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: 'text-emerald-500',
+    label: 'Completed',
+  },
+  error: {
+    icon: XCircle,
+    color: 'text-rose-500',
+    label: 'Error',
+  },
+};
+
+// ========== Helper Functions ==========
+
+/**
+ * Format timestamp to relative or absolute time
+ */
+function formatTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  if (diff < 60000) {
+    return 'Just now';
+  } else if (diff < 3600000) {
+    const minutes = Math.floor(diff / 60000);
+    return `${minutes}m ago`;
+  } else if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    return `${hours}h ago`;
+  } else {
+    return new Date(timestamp).toLocaleDateString();
+  }
+}
+
+/**
+ * Get execution display title
+ */
+function getExecutionTitle(_executionId: string, execution: CliExecutionState): string {
+  return `${execution.tool}-${execution.mode}`;
+}
+
+// ========== Sub-Components ==========
+
+interface ExecutionItemProps {
+  executionId: string;
+  execution: CliExecutionState;
+  onSelect: () => void;
+}
+
+/**
+ * Single execution item in the picker list
+ */
+function ExecutionItem({ executionId, execution, onSelect }: ExecutionItemProps) {
+  const statusConfig = STATUS_CONFIG[execution.status];
+  const StatusIcon = statusConfig.icon;
+
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'w-full flex items-center gap-3 p-3 rounded-lg',
+        'border border-border/50 bg-muted/30',
+        'hover:bg-muted/50 hover:border-border',
+        'transition-all duration-150',
+        'text-left'
+      )}
+    >
+      {/* Tool icon */}
+      <div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10">
+        <Terminal className="h-4 w-4 text-primary" />
+      </div>
+
+      {/* Execution info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-sm text-foreground truncate">
+            {getExecutionTitle(executionId, execution)}
+          </span>
+          <StatusIcon
+            className={cn(
+              'h-3.5 w-3.5 shrink-0',
+              statusConfig.color,
+              execution.status === 'running' && 'animate-spin'
+            )}
+          />
+        </div>
+        <div className="flex items-center gap-2 mt-0.5">
+          <span className="text-xs text-muted-foreground truncate">
+            {executionId}
+          </span>
+        </div>
+      </div>
+
+      {/* Time */}
+      <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+        <Clock className="h-3 w-3" />
+        <span>{formatTime(execution.startTime)}</span>
+      </div>
+    </button>
+  );
+}
+
+// ========== Main Component ==========
+
+/**
+ * ExecutionPicker - Dialog for selecting CLI executions to open as tabs
+ *
+ * Features:
+ * - Lists all available CLI executions from store
+ * - Search/filter by tool name or execution ID
+ * - Shows execution status, tool, and timestamp
+ * - Click to add as new tab in the specified pane
+ */
+export function ExecutionPicker({ paneId, className }: ExecutionPickerProps) {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Store hooks
+  const executions = useCliStreamStore((state) => state.executions);
+  const addTab = useViewerStore((state) => state.addTab);
+  const panes = useViewerStore((state) => state.panes);
+
+  // Get current pane's existing execution IDs
+  const existingExecutionIds = useMemo(() => {
+    const pane = panes[paneId];
+    if (!pane) return new Set<string>();
+    return new Set(pane.tabs.map((tab) => tab.executionId));
+  }, [panes, paneId]);
+
+  // Filter and sort executions
+  const filteredExecutions = useMemo(() => {
+    const entries = Object.entries(executions);
+
+    // Filter by search query
+    const filtered = entries.filter(([id, exec]) => {
+      if (!searchQuery) return true;
+      const query = searchQuery.toLowerCase();
+      return (
+        id.toLowerCase().includes(query) ||
+        exec.tool.toLowerCase().includes(query) ||
+        exec.mode.toLowerCase().includes(query)
+      );
+    });
+
+    // Sort by start time (newest first)
+    filtered.sort((a, b) => b[1].startTime - a[1].startTime);
+
+    return filtered;
+  }, [executions, searchQuery]);
+
+  // Handle execution selection
+  const handleSelect = useCallback((executionId: string, execution: CliExecutionState) => {
+    const title = getExecutionTitle(executionId, execution);
+    addTab(paneId, executionId, title);
+    setOpen(false);
+    setSearchQuery('');
+  }, [paneId, addTab]);
+
+  // Count available vs total
+  const totalCount = Object.keys(executions).length;
+  const availableCount = filteredExecutions.filter(
+    ([id]) => !existingExecutionIds.has(id)
+  ).length;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn('h-6 w-6 shrink-0', className)}
+          aria-label={formatMessage({
+            id: 'cliViewer.tabs.addTab',
+            defaultMessage: 'Add tab'
+          })}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {formatMessage({
+              id: 'cliViewer.picker.selectExecution',
+              defaultMessage: 'Select Execution'
+            })}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Search input */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder={formatMessage({
+              id: 'cliViewer.picker.searchExecutions',
+              defaultMessage: 'Search executions...'
+            })}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+
+        {/* Execution list */}
+        <div className="max-h-[300px] overflow-y-auto space-y-2">
+          {filteredExecutions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <Terminal className="h-8 w-8 text-muted-foreground mb-2" />
+              <p className="text-sm text-muted-foreground">
+                {totalCount === 0
+                  ? formatMessage({
+                      id: 'cliViewer.picker.noExecutions',
+                      defaultMessage: 'No executions available'
+                    })
+                  : formatMessage({
+                      id: 'cliViewer.picker.noMatchingExecutions',
+                      defaultMessage: 'No matching executions'
+                    })
+                }
+              </p>
+            </div>
+          ) : (
+            filteredExecutions.map(([id, exec]) => {
+              const isAlreadyOpen = existingExecutionIds.has(id);
+              return (
+                <div key={id} className="relative">
+                  <ExecutionItem
+                    executionId={id}
+                    execution={exec}
+                    onSelect={() => handleSelect(id, exec)}
+                  />
+                  {isAlreadyOpen && (
+                    <div className="absolute inset-0 bg-background/60 rounded-lg flex items-center justify-center">
+                      <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                        {formatMessage({
+                          id: 'cliViewer.picker.alreadyOpen',
+                          defaultMessage: 'Already open'
+                        })}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Footer with count */}
+        {totalCount > 0 && (
+          <div className="text-xs text-muted-foreground text-center pt-2 border-t border-border/50">
+            {formatMessage(
+              {
+                id: 'cliViewer.picker.executionCount',
+                defaultMessage: '{available} of {total} executions available'
+              },
+              { available: availableCount, total: totalCount }
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default ExecutionPicker;

ccw/frontend/src/components/cli-viewer/LayoutContainer.tsx

@@ -0,0 +1,157 @@
+// ========================================
+// LayoutContainer Component
+// ========================================
+// Manages allotment-based split panes for CLI viewer
+
+import { useCallback, useMemo } from 'react';
+import { Allotment } from 'allotment';
+import 'allotment/dist/style.css';
+import { cn } from '@/lib/utils';
+import {
+  useViewerStore,
+  useViewerLayout,
+  useViewerPanes,
+  type AllotmentLayoutGroup,
+  type PaneId,
+} from '@/stores/viewerStore';
+import { PaneContent } from './PaneContent';
+import { EmptyState } from './EmptyState';
+
+// ========== Types ==========
+
+interface LayoutGroupRendererProps {
+  group: AllotmentLayoutGroup;
+  minSize: number;
+  onSizeChange: (sizes: number[]) => void;
+}
+
+interface LayoutContainerProps {
+  className?: string;
+}
+
+// ========== Helper Functions ==========
+
+/**
+ * Check if a layout child is a pane ID (string) or a nested group
+ */
+function isPaneId(child: PaneId | AllotmentLayoutGroup): child is PaneId {
+  return typeof child === 'string';
+}
+
+// ========== Helper Components ==========
+
+/**
+ * Renders a layout group with Allotment
+ */
+function LayoutGroupRenderer({ group, minSize, onSizeChange }: LayoutGroupRendererProps) {
+  const panes = useViewerPanes();
+
+  const handleChange = useCallback(
+    (sizes: number[]) => {
+      onSizeChange(sizes);
+    },
+    [onSizeChange]
+  );
+
+  // Check if all panes in this group exist
+  const validChildren = useMemo(() => {
+    return group.children.filter(child => {
+      if (isPaneId(child)) {
+        return panes[child] !== undefined;
+      }
+      return true; // Groups are always valid (they will recursively filter)
+    });
+  }, [group.children, panes]);
+
+  if (validChildren.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <Allotment
+      vertical={group.direction === 'vertical'}
+      defaultSizes={group.sizes}
+      onChange={handleChange}
+      className="h-full"
+    >
+      {validChildren.map((child, index) => (
+        <Allotment.Pane key={isPaneId(child) ? child : `group-${index}`} minSize={minSize}>
+          {isPaneId(child) ? (
+            <PaneContent paneId={child} />
+          ) : (
+            <LayoutGroupRenderer
+              group={child}
+              minSize={minSize}
+              onSizeChange={onSizeChange}
+            />
+          )}
+        </Allotment.Pane>
+      ))}
+    </Allotment>
+  );
+}
+
+// ========== Main Component ==========
+
+/**
+ * LayoutContainer - Main container for CLI viewer with split panes
+ *
+ * Features:
+ * - Recursive rendering of nested allotment layouts
+ * - Support for horizontal and vertical splits
+ * - Minimum pane size enforcement
+ * - Empty state handling
+ */
+export function LayoutContainer({ className }: LayoutContainerProps) {
+  const layout = useViewerLayout();
+  const panes = useViewerPanes();
+  const setLayout = useViewerStore((state) => state.setLayout);
+
+  const handleSizeChange = useCallback(
+    (sizes: number[]) => {
+      // Update the root layout with new sizes
+      setLayout({ ...layout, sizes });
+    },
+    [layout, setLayout]
+  );
+
+  // Render based on layout type
+  const content = useMemo(() => {
+    // No children - show empty state
+    if (!layout.children || layout.children.length === 0) {
+      return <EmptyState />;
+    }
+
+    // Single pane layout
+    if (layout.children.length === 1 && isPaneId(layout.children[0])) {
+      const paneId = layout.children[0];
+      if (!panes[paneId]) {
+        return <EmptyState />;
+      }
+      return <PaneContent paneId={paneId} />;
+    }
+
+    // Group layout
+    return (
+      <LayoutGroupRenderer
+        group={layout}
+        minSize={200}
+        onSizeChange={handleSizeChange}
+      />
+    );
+  }, [layout, panes, handleSizeChange]);
+
+  return (
+    <div
+      className={cn(
+        'h-full w-full overflow-hidden',
+        'bg-background',
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+}
+
+export default LayoutContainer;

ccw/frontend/src/components/cli-viewer/PaneContent.tsx

@@ -0,0 +1,81 @@
+// ========================================
+// PaneContent Component
+// ========================================
+// Container for TabBar and ContentArea within a pane
+
+import { useCallback } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  useViewerStore,
+  useViewerPanes,
+  useFocusedPaneId,
+  type PaneId,
+} from '@/stores/viewerStore';
+import { TabBar } from './TabBar';
+import { ContentArea } from './ContentArea';
+
+// ========== Types ==========
+
+export interface PaneContentProps {
+  paneId: PaneId;
+  className?: string;
+}
+
+// ========== Component ==========
+
+/**
+ * PaneContent - Combines TabBar and ContentArea for a single pane
+ *
+ * Features:
+ * - Focused pane highlighting
+ * - Click to focus
+ * - TabBar for tab management
+ * - ContentArea for CLI output display
+ */
+export function PaneContent({ paneId, className }: PaneContentProps) {
+  const panes = useViewerPanes();
+  const pane = panes[paneId];
+  const focusedPaneId = useFocusedPaneId();
+  const setFocusedPane = useViewerStore((state) => state.setFocusedPane);
+
+  const isFocused = focusedPaneId === paneId;
+
+  const handleClick = useCallback(() => {
+    if (!isFocused) {
+      setFocusedPane(paneId);
+    }
+  }, [isFocused, paneId, setFocusedPane]);
+
+  if (!pane) {
+    return (
+      <div className={cn('h-full flex items-center justify-center', className)}>
+        <span className="text-muted-foreground text-sm">Pane not found</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'h-full flex flex-col',
+        'bg-card dark:bg-surface-900',
+        'border border-border/50',
+        'rounded-sm overflow-hidden',
+        // Focus ring when pane is focused
+        isFocused && 'ring-1 ring-primary/50',
+        className
+      )}
+      onClick={handleClick}
+      role="region"
+      aria-label={`CLI Viewer Pane ${paneId}`}
+    >
+      {/* Tab Bar */}
+      <TabBar paneId={paneId} />
+
+      {/* Content Area */}
+      <ContentArea paneId={paneId} />
+    </div>
+  );
+}
+
+export default PaneContent;

ccw/frontend/src/components/cli-viewer/TabBar.tsx

@@ -0,0 +1,257 @@
+// ========================================
+// TabBar Component
+// ========================================
+// Tab management for CLI viewer panes
+
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { X, Pin, PinOff, MoreHorizontal, SplitSquareHorizontal, SplitSquareVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/DropdownMenu';
+import {
+  useViewerStore,
+  useViewerPanes,
+  type PaneId,
+  type TabState,
+} from '@/stores/viewerStore';
+import { ExecutionPicker } from './ExecutionPicker';
+
+// ========== Types ==========
+
+export interface TabBarProps {
+  paneId: PaneId;
+  className?: string;
+}
+
+interface TabItemProps {
+  tab: TabState;
+  isActive: boolean;
+  onSelect: () => void;
+  onClose: (e: React.MouseEvent) => void;
+  onTogglePin: (e: React.MouseEvent) => void;
+}
+
+// ========== Constants ==========
+
+const STATUS_COLORS = {
+  running: 'bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.4)] animate-pulse',
+  completed: 'bg-emerald-500',
+  error: 'bg-rose-500',
+  idle: 'bg-slate-400 dark:bg-slate-500',
+};
+
+// ========== Helper Components ==========
+
+/**
+ * Individual tab item
+ */
+function TabItem({ tab, isActive, onSelect, onClose, onTogglePin }: TabItemProps) {
+  // Simplify title for display
+  const displayTitle = useMemo(() => {
+    // If title contains tool name pattern, extract it
+    const parts = tab.title.split('-');
+    return parts[0] || tab.title;
+  }, [tab.title]);
+
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'group relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs',
+        'border border-border/50 shrink-0 min-w-0 max-w-[160px]',
+        'transition-all duration-150',
+        isActive
+          ? 'bg-slate-100 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow-sm'
+          : 'bg-muted/30 hover:bg-muted/50 border-border/30',
+        tab.isPinned && 'border-amber-500/50'
+      )}
+      title={tab.title}
+    >
+      {/* Status indicator dot */}
+      <span className={cn('w-1.5 h-1.5 rounded-full shrink-0', STATUS_COLORS.idle)} />
+
+      {/* Tool name */}
+      <span className="font-medium text-[11px] truncate">{displayTitle}</span>
+
+      {/* Pin indicator (always visible if pinned) */}
+      {tab.isPinned && (
+        <Pin className="h-2.5 w-2.5 text-amber-500 shrink-0" />
+      )}
+
+      {/* Action buttons (visible on hover) */}
+      <div className="flex items-center gap-0.5 ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
+        {/* Pin/Unpin button */}
+        <button
+          onClick={onTogglePin}
+          className="p-0.5 rounded hover:bg-primary/10 transition-colors"
+          aria-label={tab.isPinned ? 'Unpin tab' : 'Pin tab'}
+        >
+          {tab.isPinned ? (
+            <PinOff className="h-2.5 w-2.5 text-amber-500" />
+          ) : (
+            <Pin className="h-2.5 w-2.5 text-muted-foreground hover:text-amber-500" />
+          )}
+        </button>
+
+        {/* Close button (hidden if pinned) */}
+        {!tab.isPinned && (
+          <button
+            onClick={onClose}
+            className="p-0.5 rounded hover:bg-rose-500/20 transition-colors"
+            aria-label="Close tab"
+          >
+            <X className="h-2.5 w-2.5 text-rose-600 dark:text-rose-400" />
+          </button>
+        )}
+      </div>
+    </button>
+  );
+}
+
+// ========== Main Component ==========
+
+/**
+ * TabBar - Manages tabs within a pane
+ *
+ * Features:
+ * - Tab display with status indicators
+ * - Active tab highlighting
+ * - Close button on hover
+ * - Pin/unpin functionality
+ * - Pane actions dropdown
+ */
+export function TabBar({ paneId, className }: TabBarProps) {
+  const { formatMessage } = useIntl();
+  const panes = useViewerPanes();
+  const pane = panes[paneId];
+  const setActiveTab = useViewerStore((state) => state.setActiveTab);
+  const removeTab = useViewerStore((state) => state.removeTab);
+  const togglePinTab = useViewerStore((state) => state.togglePinTab);
+  const addPane = useViewerStore((state) => state.addPane);
+  const removePane = useViewerStore((state) => state.removePane);
+
+  const handleTabSelect = useCallback(
+    (tabId: string) => {
+      setActiveTab(paneId, tabId);
+    },
+    [paneId, setActiveTab]
+  );
+
+  const handleTabClose = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      removeTab(paneId, tabId);
+    },
+    [paneId, removeTab]
+  );
+
+  const handleTogglePin = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      togglePinTab(tabId);
+    },
+    [togglePinTab]
+  );
+
+  const handleSplitHorizontal = useCallback(() => {
+    addPane(paneId, 'horizontal');
+  }, [paneId, addPane]);
+
+  const handleSplitVertical = useCallback(() => {
+    addPane(paneId, 'vertical');
+  }, [paneId, addPane]);
+
+  const handleClosePane = useCallback(() => {
+    removePane(paneId);
+  }, [paneId, removePane]);
+
+  // Sort tabs: pinned first, then by order
+  const sortedTabs = useMemo(() => {
+    if (!pane) return [];
+    return [...pane.tabs].sort((a, b) => {
+      if (a.isPinned !== b.isPinned) {
+        return a.isPinned ? -1 : 1;
+      }
+      return a.order - b.order;
+    });
+  }, [pane]);
+
+  if (!pane) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1 px-2 py-1.5',
+        'bg-muted/30 border-b border-border/50',
+        'overflow-x-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent',
+        className
+      )}
+    >
+      {/* Tabs */}
+      <div className="flex items-center gap-1 flex-1 min-w-0 overflow-x-auto">
+        {sortedTabs.length === 0 ? (
+          <span className="text-xs text-muted-foreground px-2">
+            {formatMessage({ id: 'cliViewer.tabs.noTabs', defaultMessage: 'No tabs open' })}
+          </span>
+        ) : (
+          sortedTabs.map((tab) => (
+            <TabItem
+              key={tab.id}
+              tab={tab}
+              isActive={pane.activeTabId === tab.id}
+              onSelect={() => handleTabSelect(tab.id)}
+              onClose={(e) => handleTabClose(e, tab.id)}
+              onTogglePin={(e) => handleTogglePin(e, tab.id)}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Add tab button */}
+      <ExecutionPicker paneId={paneId} />
+
+      {/* Pane actions dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0"
+            aria-label="Pane actions"
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuItem onClick={handleSplitHorizontal}>
+            <SplitSquareHorizontal className="h-4 w-4 mr-2" />
+            {formatMessage({ id: 'cliViewer.paneActions.splitHorizontal', defaultMessage: 'Split Horizontal' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleSplitVertical}>
+            <SplitSquareVertical className="h-4 w-4 mr-2" />
+            {formatMessage({ id: 'cliViewer.paneActions.splitVertical', defaultMessage: 'Split Vertical' })}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={handleClosePane}
+            className="text-rose-600 dark:text-rose-400"
+          >
+            <X className="h-4 w-4 mr-2" />
+            {formatMessage({ id: 'cliViewer.paneActions.closePane', defaultMessage: 'Close Pane' })}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export default TabBar;

ccw/frontend/src/components/cli-viewer/index.ts

@@ -0,0 +1,28 @@
+// ========================================
+// CLI Viewer Component Exports
+// ========================================
+// Barrel export for CLI viewer components
+
+// Main layout container
+export { LayoutContainer } from './LayoutContainer';
+export type { default as LayoutContainerType } from './LayoutContainer';
+
+// Pane content
+export { PaneContent } from './PaneContent';
+export type { PaneContentProps } from './PaneContent';
+
+// Tab bar
+export { TabBar } from './TabBar';
+export type { TabBarProps } from './TabBar';
+
+// Execution picker
+export { ExecutionPicker } from './ExecutionPicker';
+export type { ExecutionPickerProps } from './ExecutionPicker';
+
+// Content area
+export { ContentArea } from './ContentArea';
+export type { ContentAreaProps } from './ContentArea';
+
+// Empty state
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

ccw/frontend/src/components/coordinator/CoordinatorEmptyState.tsx

@@ -0,0 +1,234 @@
+// ========================================
+// CoordinatorEmptyState Component
+// ========================================
+// Modern empty state with tech-inspired design for coordinator start page
+
+import { useIntl } from 'react-intl';
+import { Play, Rocket, Zap, GitBranch } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
+
+export interface CoordinatorEmptyStateProps {
+  onStart: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Empty state component with modern tech-inspired design
+ * Displays when no coordinator execution is active
+ */
+export function CoordinatorEmptyState({
+  onStart,
+  disabled = false,
+  className,
+}: CoordinatorEmptyStateProps) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div
+      className={cn(
+        'relative flex items-center justify-center min-h-[600px] overflow-hidden',
+        className
+      )}
+    >
+      {/* Animated Background - Using theme colors */}
+      <div className="absolute inset-0 bg-gradient-to-br from-background via-card to-background">
+        {/* Grid Pattern */}
+        <div
+          className="absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: `
+              linear-gradient(var(--primary) 1px, transparent 1px),
+              linear-gradient(90deg, var(--primary) 1px, transparent 1px)
+            `,
+            backgroundSize: '50px 50px',
+          }}
+        />
+
+        {/* Animated Gradient Orbs - Using primary color */}
+        <div className="absolute top-20 left-20 w-72 h-72 rounded-full blur-3xl animate-pulse" 
+          style={{ 
+            background: 'radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)',
+            opacity: 0.15,
+          }} 
+        />
+        <div
+          className="absolute bottom-20 right-20 w-96 h-96 rounded-full blur-3xl animate-pulse"
+          style={{ 
+            background: 'radial-gradient(circle, hsl(var(--secondary)) 0%, transparent 70%)',
+            animationDelay: '1s',
+            opacity: 0.15,
+          }}
+        />
+        <div
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full blur-3xl animate-pulse"
+          style={{ 
+            background: 'radial-gradient(circle, hsl(var(--accent)) 0%, transparent 70%)',
+            animationDelay: '2s',
+            opacity: 0.1,
+          }}
+        />
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10 max-w-2xl mx-auto px-8 text-center">
+        {/* Hero Icon */}
+        <div className="relative mb-8 inline-block">
+          <div 
+            className="absolute inset-0 rounded-full blur-2xl opacity-40 animate-pulse"
+            style={{ background: 'hsl(var(--primary))' }}
+          />
+          <div 
+            className="relative p-6 rounded-full shadow-2xl text-white"
+            style={{ background: 'hsl(var(--primary))' }}
+          >
+            <Rocket className="w-16 h-16" strokeWidth={2} />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h1 className="text-4xl font-bold mb-4 text-foreground">
+          {formatMessage({ id: 'coordinator.emptyState.title' })}
+        </h1>
+
+        {/* Subtitle */}
+        <p className="text-lg text-muted-foreground mb-12 max-w-lg mx-auto">
+          {formatMessage({ id: 'coordinator.emptyState.subtitle' })}
+        </p>
+
+        {/* Start Button - Using primary theme color */}
+        <Button
+          size="lg"
+          onClick={onStart}
+          disabled={disabled}
+          className="group relative px-8 py-6 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
+          style={{
+            background: 'hsl(var(--primary))',
+            color: 'hsl(var(--primary-foreground))',
+          }}
+        >
+          <Play className="w-6 h-6 mr-2 group-hover:scale-110 transition-transform" />
+          {formatMessage({ id: 'coordinator.emptyState.startButton' })}
+          <div 
+            className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity blur-xl"
+            style={{ background: 'hsl(var(--primary) / 0.3)' }}
+          />
+        </Button>
+
+        {/* Feature Cards */}
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Feature 1 */}
+          <div className="group relative bg-card/80 backdrop-blur-sm rounded-xl p-6 border border-border hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+            <div 
+              className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity"
+              style={{ background: 'hsl(var(--primary) / 0.05)' }}
+            />
+            <div className="relative">
+              <div 
+                className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                style={{ background: 'hsl(var(--primary) / 0.1)', color: 'hsl(var(--primary))' }}
+              >
+                <Zap className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold mb-2 text-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature1.title' })}
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature1.description' })}
+              </p>
+            </div>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="group relative bg-card/80 backdrop-blur-sm rounded-xl p-6 border border-border hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+            <div 
+              className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity"
+              style={{ background: 'hsl(var(--secondary) / 0.05)' }}
+            />
+            <div className="relative">
+              <div 
+                className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                style={{ background: 'hsl(var(--secondary) / 0.1)', color: 'hsl(var(--secondary))' }}
+              >
+                <GitBranch className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold mb-2 text-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature2.title' })}
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature2.description' })}
+              </p>
+            </div>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="group relative bg-card/80 backdrop-blur-sm rounded-xl p-6 border border-border hover:border-primary/50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+            <div 
+              className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity"
+              style={{ background: 'hsl(var(--accent) / 0.05)' }}
+            />
+            <div className="relative">
+              <div 
+                className="w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                style={{ background: 'hsl(var(--accent) / 0.1)', color: 'hsl(var(--accent))' }}
+              >
+                <Play className="w-6 h-6" />
+              </div>
+              <h3 className="font-semibold mb-2 text-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature3.title' })}
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'coordinator.emptyState.feature3.description' })}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Start Guide */}
+        <div className="mt-12 text-left bg-card/50 backdrop-blur-sm rounded-xl p-6 border border-border">
+          <h3 className="font-semibold mb-4 text-foreground flex items-center gap-2">
+            <span 
+              className="w-6 h-6 rounded-full flex items-center justify-center text-white text-xs font-semibold"
+              style={{ background: 'hsl(var(--primary))' }}
+            >
+              ✓
+            </span>
+            {formatMessage({ id: 'coordinator.emptyState.quickStart.title' })}
+          </h3>
+          <div className="space-y-3 text-sm text-muted-foreground">
+            <div className="flex items-start gap-3">
+              <span 
+                className="w-5 h-5 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5 text-white"
+                style={{ background: 'hsl(var(--primary))' }}
+              >
+                1
+              </span>
+              <p>{formatMessage({ id: 'coordinator.emptyState.quickStart.step1' })}</p>
+            </div>
+            <div className="flex items-start gap-3">
+              <span 
+                className="w-5 h-5 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5 text-white"
+                style={{ background: 'hsl(var(--secondary))' }}
+              >
+                2
+              </span>
+              <p>{formatMessage({ id: 'coordinator.emptyState.quickStart.step2' })}</p>
+            </div>
+            <div className="flex items-start gap-3">
+              <span 
+                className="w-5 h-5 rounded-full flex items-center justify-center text-xs font-semibold shrink-0 mt-0.5 text-white"
+                style={{ background: 'hsl(var(--accent))' }}
+              >
+                3
+              </span>
+              <p>{formatMessage({ id: 'coordinator.emptyState.quickStart.step3' })}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CoordinatorEmptyState;

ccw/frontend/src/components/coordinator/CoordinatorInputModal.tsx

@@ -1,25 +1,22 @@
 // ========================================
-// Coordinator Input Modal Component
+// Coordinator Input Modal Component (Multi-Step)
 // ========================================
-// Modal dialog for starting coordinator execution with task description and parameters
+// Two-step modal: Welcome page -> Template & Parameters
 
 import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Rocket, Zap, GitBranch, Eye, ChevronRight, ChevronLeft } from 'lucide-react';
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogDescription,
-  DialogFooter,
 } from '@/components/ui/Dialog';
 import { Button } from '@/components/ui/Button';
 import { Textarea } from '@/components/ui/Textarea';
-import { Input } from '@/components/ui/Input';
 import { Label } from '@/components/ui/Label';
 import { useCoordinatorStore } from '@/stores/coordinatorStore';
 import { useNotifications } from '@/hooks/useNotifications';
+import { cn } from '@/lib/utils';
 
 // ========== Types ==========
 
@@ -33,12 +30,22 @@ interface FormErrors {
   parameters?: string;
 }
 
+// ========== Constants ==========
+
+const TEMPLATES = [
+  { id: 'feature-dev', nameKey: 'coordinator.multiStep.step2.templates.featureDev', description: 'Complete feature development workflow' },
+  { id: 'api-integration', nameKey: 'coordinator.multiStep.step2.templates.apiIntegration', description: 'Third-party API integration' },
+  { id: 'performance', nameKey: 'coordinator.multiStep.step2.templates.performanceOptimization', description: 'System performance analysis' },
+  { id: 'documentation', nameKey: 'coordinator.multiStep.step2.templates.documentGeneration', description: 'Auto-generate documentation' },
+] as const;
+
+const TOTAL_STEPS = 2;
+
 // ========== Validation Helper ==========
 
 function validateForm(taskDescription: string, parameters: string): FormErrors {
   const errors: FormErrors = {};
 
-  // Validate task description
   if (!taskDescription.trim()) {
     errors.taskDescription = 'coordinator.validation.taskDescriptionRequired';
   } else {
@@ -50,11 +57,10 @@ function validateForm(taskDescription: string, parameters: string): FormErrors {
     }
   }
 
-  // Validate parameters if provided
   if (parameters.trim()) {
     try {
       JSON.parse(parameters.trim());
-    } catch (error) {
+    } catch {
       errors.parameters = 'coordinator.validation.parametersInvalidJson';
     }
   }
@@ -62,6 +68,32 @@ function validateForm(taskDescription: string, parameters: string): FormErrors {
   return errors;
 }
 
+// ========== Feature Card Data ==========
+
+const FEATURES = [
+  {
+    icon: Zap,
+    titleKey: 'coordinator.multiStep.step1.feature1.title',
+    descriptionKey: 'coordinator.multiStep.step1.feature1.description',
+    bgClass: 'bg-primary/10',
+    iconClass: 'text-primary',
+  },
+  {
+    icon: GitBranch,
+    titleKey: 'coordinator.multiStep.step1.feature2.title',
+    descriptionKey: 'coordinator.multiStep.step1.feature2.description',
+    bgClass: 'bg-secondary/10',
+    iconClass: 'text-secondary-foreground',
+  },
+  {
+    icon: Eye,
+    titleKey: 'coordinator.multiStep.step1.feature3.title',
+    descriptionKey: 'coordinator.multiStep.step1.feature3.description',
+    bgClass: 'bg-accent/10',
+    iconClass: 'text-accent-foreground',
+  },
+] as const;
+
 // ========== Component ==========
 
 export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalProps) {
@@ -69,18 +101,25 @@ export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalPr
   const { success, error: showError } = useNotifications();
   const { startCoordinator } = useCoordinatorStore();
 
+  // Step state
+  const [step, setStep] = useState(1);
+
   // Form state
   const [taskDescription, setTaskDescription] = useState('');
   const [parameters, setParameters] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
   const [errors, setErrors] = useState<FormErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Reset form when modal opens/closes
+  // Reset all state when modal opens/closes
   useEffect(() => {
     if (open) {
+      setStep(1);
       setTaskDescription('');
       setParameters('');
+      setSelectedTemplate(null);
       setErrors({});
+      setIsSubmitting(false);
     }
   }, [open]);
 
@@ -95,15 +134,25 @@ export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalPr
       setParameters(value);
     }
 
-    // Clear error for this field when user starts typing
     if (errors[field]) {
       setErrors((prev) => ({ ...prev, [field]: undefined }));
     }
   };
 
-  // Handle submit
+  // Handle template selection
+  const handleTemplateSelect = (templateId: string) => {
+    setSelectedTemplate(templateId);
+    const template = TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setTaskDescription(template.description);
+      if (errors.taskDescription) {
+        setErrors((prev) => ({ ...prev, taskDescription: undefined }));
+      }
+    }
+  };
+
+  // Handle submit - preserved exactly from original
   const handleSubmit = async () => {
-    // Validate form
     const validationErrors = validateForm(taskDescription, parameters);
     if (Object.keys(validationErrors).length > 0) {
       setErrors(validationErrors);
@@ -112,13 +161,10 @@ export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalPr
 
     setIsSubmitting(true);
     try {
-      // Parse parameters if provided
       const parsedParams = parameters.trim() ? JSON.parse(parameters.trim()) : undefined;
 
-      // Generate execution ID
       const executionId = `exec-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-      // Call API to start coordinator
       const response = await fetch('/api/coordinator/start', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -134,7 +180,6 @@ export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalPr
         throw new Error(error.message || 'Failed to start coordinator');
       }
 
-      // Call store to update state
       await startCoordinator(executionId, taskDescription.trim(), parsedParams);
 
       success(formatMessage({ id: 'coordinator.success.started' }));
@@ -148,99 +193,246 @@ export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalPr
     }
   };
 
-  return (
-    <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[600px]">
-        <DialogHeader>
-          <DialogTitle>
-            {formatMessage({ id: 'coordinator.modal.title' })}
-          </DialogTitle>
-          <DialogDescription>
-            {formatMessage({ id: 'coordinator.modal.description' })}
-          </DialogDescription>
-        </DialogHeader>
+  // Navigation
+  const handleNext = () => setStep(2);
+  const handleBack = () => setStep(1);
 
-        <div className="space-y-4 py-4">
-          {/* Task Description */}
-          <div className="space-y-2">
-            <Label htmlFor="task-description" className="text-base font-medium">
-              {formatMessage({ id: 'coordinator.form.taskDescription' })}
-              <span className="text-destructive">*</span>
-            </Label>
-            <Textarea
-              id="task-description"
-              value={taskDescription}
-              onChange={(e) => handleFieldChange('taskDescription', e.target.value)}
-              placeholder={formatMessage({ id: 'coordinator.form.taskDescriptionPlaceholder' })}
-              rows={6}
-              className={errors.taskDescription ? 'border-destructive' : ''}
-              disabled={isSubmitting}
-            />
-            <div className="flex justify-between items-center text-xs text-muted-foreground">
-              <span>
-                {formatMessage({ id: 'coordinator.form.characterCount' }, {
-                  current: taskDescription.length,
-                  min: 10,
-                  max: 2000,
-                })}
-              </span>
-              {taskDescription.length >= 10 && taskDescription.length <= 2000 && (
-                <span className="text-green-600">Valid</span>
+  // ========== Step 1: Welcome ==========
+
+  const renderStep1 = () => (
+    <div className="flex flex-col items-center px-6 py-8">
+      {/* Hero Icon */}
+      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground mb-6">
+        <Rocket className="h-8 w-8" />
+      </div>
+
+      {/* Title & Subtitle */}
+      <h2 className="text-2xl font-bold text-foreground mb-2">
+        {formatMessage({ id: 'coordinator.multiStep.step1.title' })}
+      </h2>
+      <p className="text-sm text-muted-foreground mb-8 text-center max-w-md">
+        {formatMessage({ id: 'coordinator.multiStep.step1.subtitle' })}
+      </p>
+
+      {/* Feature Cards */}
+      <div className="grid grid-cols-3 gap-4 w-full">
+        {FEATURES.map((feature) => {
+          const Icon = feature.icon;
+          return (
+            <div
+              key={feature.titleKey}
+              className={cn(
+                'flex flex-col items-center rounded-xl p-5 text-center',
+                feature.bgClass
               )}
+            >
+              <Icon className={cn('h-6 w-6 mb-3', feature.iconClass)} />
+              <span className="text-sm font-medium text-foreground mb-1">
+                {formatMessage({ id: feature.titleKey })}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {formatMessage({ id: feature.descriptionKey })}
+              </span>
             </div>
-            {errors.taskDescription && (
-              <p className="text-sm text-destructive">
-                {formatMessage({ id: errors.taskDescription })}
-              </p>
-            )}
-          </div>
+          );
+        })}
+      </div>
+    </div>
+  );
 
-          {/* Parameters (Optional) */}
-          <div className="space-y-2">
-            <Label htmlFor="parameters" className="text-base font-medium">
-              {formatMessage({ id: 'coordinator.form.parameters' })}
-            </Label>
-            <Input
-              id="parameters"
-              value={parameters}
-              onChange={(e) => handleFieldChange('parameters', e.target.value)}
-              placeholder={formatMessage({ id: 'coordinator.form.parametersPlaceholder' })}
-              className={`font-mono text-sm ${errors.parameters ? 'border-destructive' : ''}`}
-              disabled={isSubmitting}
-            />
-            <p className="text-xs text-muted-foreground">
-              {formatMessage({ id: 'coordinator.form.parametersHelp' })}
-            </p>
-            {errors.parameters && (
-              <p className="text-sm text-destructive">
-                {formatMessage({ id: errors.parameters })}
-              </p>
+  // ========== Step 2: Template + Parameters ==========
+
+  const renderStep2 = () => (
+    <div className="flex min-h-[380px]">
+      {/* Left Column: Template Selection */}
+      <div className="w-2/5 border-r border-border p-5">
+        <h3 className="text-sm font-semibold text-foreground mb-3">
+          {formatMessage({ id: 'coordinator.multiStep.step2.templateLabel' })}
+        </h3>
+        <div className="space-y-2">
+          {TEMPLATES.map((template) => {
+            const isSelected = selectedTemplate === template.id;
+            return (
+              <button
+                key={template.id}
+                type="button"
+                onClick={() => handleTemplateSelect(template.id)}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-lg border px-3 py-3 text-left transition-colors',
+                  isSelected
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border bg-card hover:bg-muted/50'
+                )}
+              >
+                {/* Radio dot */}
+                <span
+                  className={cn(
+                    'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border',
+                    isSelected
+                      ? 'border-primary'
+                      : 'border-muted-foreground/40'
+                  )}
+                >
+                  {isSelected && (
+                    <span className="h-2 w-2 rounded-full bg-primary" />
+                  )}
+                </span>
+                <span className={cn(
+                  'text-sm',
+                  isSelected ? 'font-medium text-foreground' : 'text-muted-foreground'
+                )}>
+                  {formatMessage({ id: template.nameKey })}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Right Column: Parameter Form */}
+      <div className="w-3/5 p-5 space-y-4">
+        {/* Task Description */}
+        <div className="space-y-2">
+          <Label htmlFor="task-description" className="text-sm font-medium">
+            {formatMessage({ id: 'coordinator.form.taskDescription' })}
+            <span className="text-destructive ml-0.5">*</span>
+          </Label>
+          <Textarea
+            id="task-description"
+            value={taskDescription}
+            onChange={(e) => handleFieldChange('taskDescription', e.target.value)}
+            placeholder={formatMessage({ id: 'coordinator.form.taskDescriptionPlaceholder' })}
+            rows={5}
+            className={cn(
+              'resize-none',
+              errors.taskDescription && 'border-destructive'
+            )}
+            disabled={isSubmitting}
+          />
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>
+              {formatMessage(
+                { id: 'coordinator.form.characterCount' },
+                { current: taskDescription.length, min: 10, max: 2000 }
+              )}
+            </span>
+            {taskDescription.length >= 10 && taskDescription.length <= 2000 && (
+              <span className="text-primary">Valid</span>
             )}
           </div>
+          {errors.taskDescription && (
+            <p className="text-xs text-destructive">
+              {formatMessage({ id: errors.taskDescription })}
+            </p>
+          )}
         </div>
 
-        <DialogFooter>
+        {/* Custom Parameters */}
+        <div className="space-y-2">
+          <Label htmlFor="parameters" className="text-sm font-medium">
+            {formatMessage({ id: 'coordinator.form.parameters' })}
+          </Label>
+          <Textarea
+            id="parameters"
+            value={parameters}
+            onChange={(e) => handleFieldChange('parameters', e.target.value)}
+            placeholder={formatMessage({ id: 'coordinator.form.parametersPlaceholder' })}
+            rows={3}
+            className={cn(
+              'resize-none font-mono text-sm',
+              errors.parameters && 'border-destructive'
+            )}
+            disabled={isSubmitting}
+          />
+          <p className="text-xs text-muted-foreground">
+            {formatMessage({ id: 'coordinator.form.parametersHelp' })}
+          </p>
+          {errors.parameters && (
+            <p className="text-xs text-destructive">
+              {formatMessage({ id: errors.parameters })}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ========== Footer ==========
+
+  const renderFooter = () => (
+    <div className="flex items-center justify-between border-t border-border px-6 py-4">
+      {/* Left: Step indicator + Back */}
+      <div className="flex items-center gap-3">
+        <span className="text-xs text-muted-foreground">
+          {formatMessage(
+            { id: 'coordinator.multiStep.progress.step' },
+            { current: step, total: TOTAL_STEPS }
+          )}
+        </span>
+        {step === 2 && (
           <Button
-            variant="outline"
-            onClick={onClose}
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
             disabled={isSubmitting}
           >
-            {formatMessage({ id: 'common.actions.cancel' })}
+            <ChevronLeft className="mr-1 h-4 w-4" />
+            {formatMessage({ id: 'coordinator.multiStep.actions.back' })}
           </Button>
+        )}
+      </div>
+
+      {/* Right: Cancel + Next/Submit */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onClose}
+          disabled={isSubmitting}
+        >
+          {formatMessage({ id: 'common.actions.cancel' })}
+        </Button>
+
+        {step === 1 ? (
+          <Button size="sm" onClick={handleNext}>
+            {formatMessage({ id: 'coordinator.multiStep.actions.next' })}
+            <ChevronRight className="ml-1 h-4 w-4" />
+          </Button>
+        ) : (
           <Button
+            size="sm"
             onClick={handleSubmit}
             disabled={isSubmitting}
           >
             {isSubmitting ? (
               <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 {formatMessage({ id: 'coordinator.form.starting' })}
               </>
             ) : (
-              formatMessage({ id: 'coordinator.form.start' })
+              formatMessage({ id: 'coordinator.multiStep.actions.submit' })
             )}
           </Button>
-        </DialogFooter>
+        )}
+      </div>
+    </div>
+  );
+
+  // ========== Render ==========
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl gap-0 p-0 overflow-hidden">
+        {/* Visually hidden title for accessibility */}
+        <DialogTitle className="sr-only">
+          {formatMessage({ id: 'coordinator.modal.title' })}
+        </DialogTitle>
+
+        {/* Step Content */}
+        {step === 1 ? renderStep1() : renderStep2()}
+
+        {/* Footer */}
+        {renderFooter()}
       </DialogContent>
     </Dialog>
   );

ccw/frontend/src/components/coordinator/CoordinatorTaskCard.tsx

@@ -0,0 +1,137 @@
+// ========================================
+// CoordinatorTaskCard Component
+// ========================================
+// Task card component for displaying task overview in horizontal list
+
+import { useIntl } from 'react-intl';
+import { Clock, CheckCircle, XCircle, Loader2, CircleDashed } from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { cn } from '@/lib/utils';
+
+export interface TaskStatus {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+  progress: { completed: number; total: number };
+  startedAt?: string;
+  completedAt?: string;
+}
+
+export interface CoordinatorTaskCardProps {
+  task: TaskStatus;
+  isSelected: boolean;
+  onClick: () => void;
+  className?: string;
+}
+
+/**
+ * Task card component displaying task status and progress
+ * Used in horizontal scrolling task list
+ */
+export function CoordinatorTaskCard({
+  task,
+  isSelected,
+  onClick,
+  className,
+}: CoordinatorTaskCardProps) {
+  const { formatMessage } = useIntl();
+
+  // Map status to badge variant
+  const getStatusVariant = (status: TaskStatus['status']) => {
+    switch (status) {
+      case 'pending':
+        return 'secondary';
+      case 'running':
+        return 'warning';
+      case 'completed':
+        return 'success';
+      case 'failed':
+        return 'destructive';
+      case 'cancelled':
+        return 'outline';
+      default:
+        return 'default';
+    }
+  };
+
+  // Get status icon
+  const getStatusIcon = (status: TaskStatus['status']) => {
+    switch (status) {
+      case 'pending':
+        return <CircleDashed className="w-3 h-3" />;
+      case 'running':
+        return <Loader2 className="w-3 h-3 animate-spin" />;
+      case 'completed':
+        return <CheckCircle className="w-3 h-3" />;
+      case 'failed':
+        return <XCircle className="w-3 h-3" />;
+      case 'cancelled':
+        return <XCircle className="w-3 h-3" />;
+      default:
+        return null;
+    }
+  };
+
+  // Format time display
+  const formatTime = (dateString?: string) => {
+    if (!dateString) return null;
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } catch {
+      return null;
+    }
+  };
+
+  const displayTime = task.startedAt ? formatTime(task.startedAt) : null;
+
+  return (
+    <Card
+      className={cn(
+        'min-w-[180px] max-w-[220px] p-4 cursor-pointer transition-all duration-200',
+        'hover:border-primary/50 hover:shadow-md',
+        isSelected && 'border-primary ring-1 ring-primary/20',
+        className
+      )}
+      onClick={onClick}
+    >
+      {/* Task Name */}
+      <h3 className="font-medium text-sm text-foreground truncate mb-2" title={task.name}>
+        {task.name}
+      </h3>
+
+      {/* Status Badge */}
+      <div className="mb-3">
+        <Badge variant={getStatusVariant(task.status)} className="gap-1">
+          {getStatusIcon(task.status)}
+          {formatMessage({ id: `coordinator.status.${task.status}` })}
+        </Badge>
+      </div>
+
+      {/* Progress */}
+      <div className="text-xs text-muted-foreground mb-2">
+        <span className="font-medium">{task.progress.completed}</span>
+        <span>/</span>
+        <span>{task.progress.total}</span>
+        <span className="ml-1">
+          {formatMessage({ id: 'coordinator.taskCard.nodes' })}
+        </span>
+      </div>
+
+      {/* Time */}
+      {displayTime && (
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="w-3 h-3" />
+          <span>{displayTime}</span>
+          <span className="ml-1">
+            {formatMessage({ id: 'coordinator.taskCard.started' })}
+          </span>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default CoordinatorTaskCard;

ccw/frontend/src/components/coordinator/CoordinatorTaskList.tsx

@@ -0,0 +1,140 @@
+// ========================================
+// CoordinatorTaskList Component
+// ========================================
+// Horizontal scrolling task list with filter and sort controls
+
+import { useState, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { Filter, ArrowUpDown, Inbox } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/Select';
+import { CoordinatorTaskCard, TaskStatus } from './CoordinatorTaskCard';
+import { cn } from '@/lib/utils';
+
+export type FilterOption = 'all' | 'running' | 'completed' | 'failed';
+export type SortOption = 'time' | 'name';
+
+export interface CoordinatorTaskListProps {
+  tasks: TaskStatus[];
+  selectedTaskId: string | null;
+  onTaskSelect: (taskId: string) => void;
+  className?: string;
+}
+
+/**
+ * Horizontal scrolling task list with filtering and sorting
+ * Displays task cards in a row with overflow scroll
+ */
+export function CoordinatorTaskList({
+  tasks,
+  selectedTaskId,
+  onTaskSelect,
+  className,
+}: CoordinatorTaskListProps) {
+  const { formatMessage } = useIntl();
+  const [filter, setFilter] = useState<FilterOption>('all');
+  const [sort, setSort] = useState<SortOption>('time');
+
+  // Filter tasks
+  const filteredTasks = useMemo(() => {
+    let result = [...tasks];
+
+    // Apply filter
+    if (filter !== 'all') {
+      result = result.filter((task) => task.status === filter);
+    }
+
+    // Apply sort
+    result.sort((a, b) => {
+      if (sort === 'time') {
+        // Sort by start time (newest first), pending tasks last
+        const timeA = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+        const timeB = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+        return timeB - timeA;
+      } else {
+        // Sort by name alphabetically
+        return a.name.localeCompare(b.name);
+      }
+    });
+
+    return result;
+  }, [tasks, filter, sort]);
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Controls Row */}
+      <div className="flex items-center gap-3">
+        {/* Filter Select */}
+        <div className="flex items-center gap-2">
+          <Filter className="w-4 h-4 text-muted-foreground" />
+          <Select value={filter} onValueChange={(v) => setFilter(v as FilterOption)}>
+            <SelectTrigger className="w-[140px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">
+                {formatMessage({ id: 'coordinator.taskList.filter.all' })}
+              </SelectItem>
+              <SelectItem value="running">
+                {formatMessage({ id: 'coordinator.taskList.filter.running' })}
+              </SelectItem>
+              <SelectItem value="completed">
+                {formatMessage({ id: 'coordinator.taskList.filter.completed' })}
+              </SelectItem>
+              <SelectItem value="failed">
+                {formatMessage({ id: 'coordinator.taskList.filter.failed' })}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Sort Select */}
+        <div className="flex items-center gap-2">
+          <ArrowUpDown className="w-4 h-4 text-muted-foreground" />
+          <Select value={sort} onValueChange={(v) => setSort(v as SortOption)}>
+            <SelectTrigger className="w-[120px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="time">
+                {formatMessage({ id: 'coordinator.taskList.sort.time' })}
+              </SelectItem>
+              <SelectItem value="name">
+                {formatMessage({ id: 'coordinator.taskList.sort.name' })}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Task Cards - Horizontal Scroll */}
+      {filteredTasks.length > 0 ? (
+        <div className="flex gap-4 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+          {filteredTasks.map((task) => (
+            <CoordinatorTaskCard
+              key={task.id}
+              task={task}
+              isSelected={task.id === selectedTaskId}
+              onClick={() => onTaskSelect(task.id)}
+            />
+          ))}
+        </div>
+      ) : (
+        /* Empty State */
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <Inbox className="w-12 h-12 mb-4 opacity-50" />
+          <p className="text-sm">
+            {formatMessage({ id: 'coordinator.taskList.empty' })}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CoordinatorTaskList;

ccw/frontend/src/components/coordinator/index.ts

@@ -21,3 +21,12 @@ export type { CoordinatorLogStreamProps } from './CoordinatorLogStream';
 
 export { CoordinatorQuestionModal } from './CoordinatorQuestionModal';
 export type { CoordinatorQuestionModalProps } from './CoordinatorQuestionModal';
+
+export { CoordinatorEmptyState } from './CoordinatorEmptyState';
+export type { CoordinatorEmptyStateProps } from './CoordinatorEmptyState';
+
+export { CoordinatorTaskCard } from './CoordinatorTaskCard';
+export type { CoordinatorTaskCardProps, TaskStatus } from './CoordinatorTaskCard';
+
+export { CoordinatorTaskList } from './CoordinatorTaskList';
+export type { CoordinatorTaskListProps, FilterOption, SortOption } from './CoordinatorTaskList';

ccw/frontend/src/components/dashboard/DashboardWidgetConfig.tsx

@@ -0,0 +1,165 @@
+// ========================================
+// DashboardWidgetConfig Component
+// ========================================
+// Configuration panel for managing dashboard widgets visibility and layout
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { ChevronDown, Eye, EyeOff, RotateCcw } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { cn } from '@/lib/utils';
+import type { WidgetConfig } from '@/types/store';
+
+export interface DashboardWidgetConfigProps {
+  /** List of widget configurations */
+  widgets: WidgetConfig[];
+  /** Callback when widget visibility changes */
+  onWidgetToggle: (widgetId: string) => void;
+  /** Callback when reset layout is requested */
+  onResetLayout: () => void;
+  /** Whether the panel is currently open */
+  isOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * DashboardWidgetConfig - Widget configuration panel
+ *
+ * Allows users to:
+ * - Toggle widget visibility
+ * - Reset layout to defaults
+ * - Quickly manage what widgets appear on dashboard
+ */
+export function DashboardWidgetConfig({
+  widgets,
+  onWidgetToggle,
+  onResetLayout,
+  isOpen = false,
+  onOpenChange,
+}: DashboardWidgetConfigProps) {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = React.useState(isOpen);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  const visibleCount = widgets.filter((w) => w.visible).length;
+  const allVisible = visibleCount === widgets.length;
+
+  const handleToggleAll = () => {
+    // If all visible, hide all. If any hidden, show all.
+    widgets.forEach((widget) => {
+      if (allVisible) {
+        onWidgetToggle(widget.i);
+      } else if (!widget.visible) {
+        onWidgetToggle(widget.i);
+      }
+    });
+  };
+
+  const handleResetLayout = () => {
+    onResetLayout();
+    setOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      {/* Toggle button */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => handleOpenChange(!open)}
+        className="gap-2"
+        aria-label="Toggle widget configuration"
+        aria-expanded={open}
+      >
+        <Eye className="h-4 w-4" />
+        {formatMessage({ id: 'common.dashboard.config.title' })}
+        <ChevronDown
+          className={cn('h-4 w-4 transition-transform', open && 'rotate-180')}
+        />
+      </Button>
+
+      {/* Dropdown panel */}
+      {open && (
+        <div className="absolute right-0 top-full mt-2 w-64 rounded-lg border border-border bg-card shadow-lg z-50">
+          <div className="p-4 space-y-4">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold text-foreground">
+                {formatMessage({ id: 'common.dashboard.config.widgets' })}
+              </h3>
+              <span className="text-xs text-muted-foreground">
+                {visibleCount}/{widgets.length}
+              </span>
+            </div>
+
+            {/* Toggle all button */}
+            <div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleToggleAll}
+                className="w-full justify-start gap-2 text-xs h-8"
+              >
+                {allVisible ? (
+                  <>
+                    <EyeOff className="h-3.5 w-3.5" />
+                    {formatMessage({ id: 'common.dashboard.config.hideAll' })}
+                  </>
+                ) : (
+                  <>
+                    <Eye className="h-3.5 w-3.5" />
+                    {formatMessage({ id: 'common.dashboard.config.showAll' })}
+                  </>
+                )}
+              </Button>
+            </div>
+
+            {/* Widget list */}
+            <div className="space-y-2 border-t border-border pt-4">
+              {widgets.map((widget) => (
+                <div
+                  key={widget.i}
+                  className="flex items-center gap-2 p-2 rounded hover:bg-muted/50 transition-colors"
+                >
+                  <Checkbox
+                    id={`widget-${widget.i}`}
+                    checked={widget.visible}
+                    onCheckedChange={() => onWidgetToggle(widget.i)}
+                    className="h-4 w-4"
+                  />
+                  <label
+                    htmlFor={`widget-${widget.i}`}
+                    className="flex-1 text-sm text-foreground cursor-pointer"
+                  >
+                    {widget.name}
+                  </label>
+                </div>
+              ))}
+            </div>
+
+            {/* Reset button */}
+            <div className="border-t border-border pt-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleResetLayout}
+                className="w-full justify-start gap-2"
+              >
+                <RotateCcw className="h-3.5 w-3.5" />
+                {formatMessage({ id: 'common.dashboard.config.resetLayout' })}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DashboardWidgetConfig;

ccw/frontend/src/components/dashboard/WidgetWrapper.tsx

@@ -0,0 +1,99 @@
+// ========================================
+// WidgetWrapper Component
+// ========================================
+// Wrapper component for dashboard widgets with drag handle and common styling
+
+import * as React from 'react';
+import { GripVertical, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+
+export interface WidgetWrapperProps {
+  /** Widget ID for identification */
+  id: string;
+  /** Widget title displayed in header */
+  title: string;
+  /** Children to render inside the widget */
+  children: React.ReactNode;
+  /** Whether the widget can be dragged */
+  isDraggable?: boolean;
+  /** Whether the widget can be removed */
+  canRemove?: boolean;
+  /** Callback when remove button is clicked */
+  onRemove?: (id: string) => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether to show the header with drag handle */
+  showHeader?: boolean;
+  /** Style prop passed by react-grid-layout */
+  style?: React.CSSProperties;
+}
+
+/**
+ * WidgetWrapper - Standardized wrapper for dashboard widgets
+ *
+ * Uses forwardRef to support react-grid-layout which requires
+ * refs on child elements for positioning and measurement.
+ */
+export const WidgetWrapper = React.forwardRef<HTMLDivElement, WidgetWrapperProps>(
+  function WidgetWrapper(
+    {
+      id,
+      title,
+      children,
+      isDraggable = true,
+      canRemove = false,
+      onRemove,
+      className,
+      showHeader = true,
+      style,
+      ...rest
+    },
+    ref
+  ) {
+    const handleRemove = React.useCallback(() => {
+      onRemove?.(id);
+    }, [id, onRemove]);
+
+    return (
+      <div ref={ref} className={cn('h-full flex flex-col', className)} style={style} {...rest}>
+        {/* Header with drag handle */}
+        {showHeader && (
+          <div className="flex items-center justify-between px-2 py-1 border-b border-border/50 bg-muted/30 rounded-t-lg">
+            <div className="flex items-center gap-2">
+              {/* Drag handle - must have .drag-handle class for react-grid-layout */}
+              {isDraggable && (
+                <div className="drag-handle cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted transition-colors">
+                  <GripVertical className="h-4 w-4 text-muted-foreground" />
+                </div>
+              )}
+              <span className="text-sm font-medium text-foreground">{title}</span>
+            </div>
+
+            {/* Widget actions */}
+            <div className="flex items-center gap-1">
+              {canRemove && onRemove && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={handleRemove}
+                  aria-label={`Remove ${title} widget`}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Widget content */}
+        <div className="flex-1 min-h-0">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default WidgetWrapper;

ccw/frontend/src/components/dashboard/defaultLayouts.ts

@@ -7,44 +7,33 @@ import type { WidgetConfig, DashboardLayouts, DashboardLayoutState } from '@/typ
 
 /** Widget IDs used across the dashboard */
 export const WIDGET_IDS = {
-  STATS: 'detailed-stats',
+  WORKFLOW_TASK: 'workflow-task',
   RECENT_SESSIONS: 'recent-sessions',
-  WORKFLOW_STATUS: 'workflow-status-pie',
-  ACTIVITY: 'activity-line',
-  TASK_TYPES: 'task-type-bar',
 } as const;
 
 /** Default widget configurations */
 export const DEFAULT_WIDGETS: WidgetConfig[] = [
-  { i: WIDGET_IDS.STATS, name: 'Statistics', visible: true, minW: 4, minH: 2 },
-  { i: WIDGET_IDS.RECENT_SESSIONS, name: 'Recent Sessions', visible: true, minW: 4, minH: 3 },
-  { i: WIDGET_IDS.WORKFLOW_STATUS, name: 'Workflow Status', visible: true, minW: 3, minH: 3 },
-  { i: WIDGET_IDS.ACTIVITY, name: 'Activity', visible: true, minW: 4, minH: 3 },
-  { i: WIDGET_IDS.TASK_TYPES, name: 'Task Types', visible: true, minW: 3, minH: 3 },
+  { i: WIDGET_IDS.WORKFLOW_TASK, name: 'Workflow & Tasks', visible: true, minW: 6, minH: 4 },
+  { i: WIDGET_IDS.RECENT_SESSIONS, name: 'Recent Sessions', visible: true, minW: 6, minH: 3 },
 ];
 
 /** Default responsive layouts */
 export const DEFAULT_LAYOUTS: DashboardLayouts = {
   lg: [
-    { i: WIDGET_IDS.STATS, x: 0, y: 0, w: 12, h: 2, minW: 4, minH: 2 },
-    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 2, w: 6, h: 4, minW: 4, minH: 3 },
-    { i: WIDGET_IDS.WORKFLOW_STATUS, x: 6, y: 2, w: 6, h: 4, minW: 3, minH: 3 },
-    { i: WIDGET_IDS.ACTIVITY, x: 0, y: 6, w: 7, h: 4, minW: 4, minH: 3 },
-    { i: WIDGET_IDS.TASK_TYPES, x: 7, y: 6, w: 5, h: 4, minW: 3, minH: 3 },
+    // Row 1: Combined WorkflowTask (full width - includes Stats, Workflow, Tasks, Heatmap)
+    { i: WIDGET_IDS.WORKFLOW_TASK, x: 0, y: 0, w: 12, h: 5, minW: 6, minH: 4 },
+    // Row 2: Recent Sessions (full width)
+    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 5, w: 12, h: 4, minW: 6, minH: 3 },
   ],
   md: [
-    { i: WIDGET_IDS.STATS, x: 0, y: 0, w: 6, h: 2, minW: 3, minH: 2 },
-    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 2, w: 6, h: 4, minW: 3, minH: 3 },
-    { i: WIDGET_IDS.WORKFLOW_STATUS, x: 0, y: 6, w: 6, h: 4, minW: 3, minH: 3 },
-    { i: WIDGET_IDS.ACTIVITY, x: 0, y: 10, w: 6, h: 4, minW: 3, minH: 3 },
-    { i: WIDGET_IDS.TASK_TYPES, x: 0, y: 14, w: 6, h: 4, minW: 3, minH: 3 },
+    // Medium: Stack vertically, full width each
+    { i: WIDGET_IDS.WORKFLOW_TASK, x: 0, y: 0, w: 6, h: 5, minW: 4, minH: 4 },
+    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 5, w: 6, h: 4, minW: 4, minH: 3 },
   ],
   sm: [
-    { i: WIDGET_IDS.STATS, x: 0, y: 0, w: 2, h: 3, minW: 2, minH: 2 },
-    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 3, w: 2, h: 4, minW: 2, minH: 3 },
-    { i: WIDGET_IDS.WORKFLOW_STATUS, x: 0, y: 7, w: 2, h: 4, minW: 2, minH: 3 },
-    { i: WIDGET_IDS.ACTIVITY, x: 0, y: 11, w: 2, h: 4, minW: 2, minH: 3 },
-    { i: WIDGET_IDS.TASK_TYPES, x: 0, y: 15, w: 2, h: 4, minW: 2, minH: 3 },
+    // Small: Stack vertically
+    { i: WIDGET_IDS.WORKFLOW_TASK, x: 0, y: 0, w: 2, h: 8, minW: 2, minH: 6 },
+    { i: WIDGET_IDS.RECENT_SESSIONS, x: 0, y: 8, w: 2, h: 5, minW: 2, minH: 4 },
   ],
 };
 

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

@@ -0,0 +1,138 @@
+// ========================================
+// ActivityHeatmapWidget Component
+// ========================================
+// Widget showing activity distribution as a vertical heatmap (narrow layout)
+
+import { memo } from 'react';
+import { useIntl } from 'react-intl';
+import { Card } from '@/components/ui/Card';
+import { useActivityTimeline } from '@/hooks/useActivityTimeline';
+import { cn } from '@/lib/utils';
+
+export interface ActivityHeatmapWidgetProps {
+  className?: string;
+}
+
+const WEEKS = 12; // 12 weeks = ~3 months
+const DAYS_PER_WEEK = 7;
+const TOTAL_CELLS = WEEKS * DAYS_PER_WEEK;
+
+// Generate heatmap data for WEEKS x 7 grid
+function generateHeatmapData(activityData: number[] = []): { value: number; intensity: number }[] {
+  const heatmap: { value: number; intensity: number }[] = [];
+  for (let i = 0; i < TOTAL_CELLS; i++) {
+    const value = activityData[i] ?? Math.floor(Math.random() * 10);
+    const intensity = Math.min(100, (value / 10) * 100);
+    heatmap.push({ value, intensity });
+  }
+  return heatmap;
+}
+
+function getIntensityColor(intensity: number): string {
+  if (intensity === 0) return 'bg-muted/50';
+  if (intensity < 25) return 'bg-primary/20';
+  if (intensity < 50) return 'bg-primary/40';
+  if (intensity < 75) return 'bg-primary/60';
+  return 'bg-primary';
+}
+
+// Short day labels for narrow layout
+const DAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+function ActivityHeatmapWidgetComponent({ className }: ActivityHeatmapWidgetProps) {
+  const { formatMessage } = useIntl();
+  const { data, isLoading } = useActivityTimeline();
+
+  const activityValues = data?.map((item) => item.sessions + item.tasks) || [];
+  const heatmapData = generateHeatmapData(activityValues);
+
+  // Get month labels for week rows
+  const getWeekLabel = (weekIdx: number): string => {
+    const date = new Date();
+    date.setDate(date.getDate() - (WEEKS - 1 - weekIdx) * 7);
+    // Only show month for first week of each month
+    if (weekIdx === 0 || date.getDate() <= 7) {
+      return date.toLocaleString('default', { month: 'short' });
+    }
+    return '';
+  };
+
+  return (
+    <Card className={cn('h-full p-3 flex flex-col', className)}>
+      <h3 className="text-sm font-semibold text-foreground mb-2">
+        {formatMessage({ id: 'home.widgets.activity' })}
+      </h3>
+
+      {isLoading ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="h-full w-full bg-muted rounded animate-pulse" />
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+          {/* Day header row */}
+          <div className="flex gap-[2px] mb-1">
+            <div className="w-8 shrink-0" /> {/* Spacer for month labels */}
+            {DAY_LABELS.map((label, i) => (
+              <div
+                key={i}
+                className="flex-1 text-center text-[9px] text-muted-foreground font-medium"
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+
+          {/* Vertical grid: rows = weeks (flowing down), columns = days */}
+          <div className="flex-1 flex flex-col gap-[2px] min-h-0 overflow-auto">
+            {Array.from({ length: WEEKS }).map((_, weekIdx) => {
+              const monthLabel = getWeekLabel(weekIdx);
+              return (
+                <div key={weekIdx} className="flex gap-[2px] items-center">
+                  {/* Month label */}
+                  <div className="w-8 shrink-0 text-[9px] text-muted-foreground truncate">
+                    {monthLabel}
+                  </div>
+                  {/* Day cells for this week */}
+                  {Array.from({ length: DAYS_PER_WEEK }).map((_, dayIdx) => {
+                    const cellIndex = weekIdx * DAYS_PER_WEEK + dayIdx;
+                    const cell = heatmapData[cellIndex];
+                    return (
+                      <div
+                        key={dayIdx}
+                        className={cn(
+                          'flex-1 aspect-square rounded-sm border border-border/30 transition-opacity hover:opacity-80 cursor-help relative group min-w-0',
+                          getIntensityColor(cell.intensity)
+                        )}
+                        title={`${cell.value} activities`}
+                      >
+                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-1.5 py-0.5 bg-foreground text-background rounded text-[10px] font-medium whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none z-10 transition-opacity">
+                          {cell.value}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Legend */}
+          <div className="flex items-center justify-center gap-1 mt-2 text-[9px] text-muted-foreground">
+            <span>Less</span>
+            {[0, 25, 50, 75, 100].map((intensity, i) => (
+              <div
+                key={i}
+                className={cn('w-[8px] h-[8px] rounded-sm border border-border/30', getIntensityColor(intensity))}
+              />
+            ))}
+            <span>More</span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export const ActivityHeatmapWidget = memo(ActivityHeatmapWidgetComponent);
+
+export default ActivityHeatmapWidget;

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

@@ -28,9 +28,9 @@ export interface ActivityLineChartWidgetProps {
  */
 function ActivityLineChartWidgetComponent({ className, ...props }: ActivityLineChartWidgetProps) {
   const { formatMessage } = useIntl();
-  const { data, isLoading, error } = useActivityTimeline();
+  const { data, isLoading } = useActivityTimeline();
 
-  // Use mock data if API is not ready
+  // Use mock data if API call fails or returns no data
   const chartData = data || generateMockActivityTimeline();
 
   return (
@@ -41,10 +41,6 @@ function ActivityLineChartWidgetComponent({ className, ...props }: ActivityLineC
         </h3>
         {isLoading ? (
           <ChartSkeleton type="line" height={280} />
-        ) : error ? (
-          <div className="flex-1 flex items-center justify-center">
-            <p className="text-sm text-destructive">Failed to load chart data</p>
-          </div>
         ) : (
           <ActivityLineChart data={chartData} height={280} />
         )}

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

@@ -119,8 +119,8 @@ function DetailedStatsWidgetComponent({ className, ...props }: DetailedStatsWidg
 
   return (
     <div {...props} className={className}>
-      <Card className="h-full p-4">
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+      <Card className="h-full p-4 flex flex-col">
+        <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
           {isLoading
             ? Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
             : statCards.map((card) => (

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

@@ -1,103 +1,401 @@
 // ========================================
 // RecentSessionsWidget Component
 // ========================================
-// Widget wrapper for recent sessions list in dashboard grid layout
+// Widget showing recent sessions across different task types (workflow, lite, orchestrator)
 
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useIntl } from 'react-intl';
-import { FolderKanban } from 'lucide-react';
+import {
+  FolderKanban,
+  Workflow,
+  Zap,
+  Play,
+  Clock,
+  CheckCircle2,
+  XCircle,
+  PauseCircle,
+  FileEdit,
+  Wrench,
+  GitBranch,
+  Tag,
+  Loader2,
+} from 'lucide-react';
 import { Card } from '@/components/ui/Card';
-import { SessionCard, SessionCardSkeleton } from '@/components/shared/SessionCard';
-import { useSessions } from '@/hooks/useSessions';
+import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
+import { Progress } from '@/components/ui/Progress';
+import { useSessions } from '@/hooks/useSessions';
+import { useLiteTasks } from '@/hooks/useLiteTasks';
+import { useCoordinatorStore } from '@/stores/coordinatorStore';
+import { cn } from '@/lib/utils';
 
 export interface RecentSessionsWidgetProps {
-  /** Data grid attributes for react-grid-layout */
-  'data-grid'?: {
-    i: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-  };
-  /** Additional CSS classes */
   className?: string;
-  /** Maximum number of sessions to display */
-  maxSessions?: number;
+  maxItems?: number;
+}
+
+// Task type definitions
+type TaskType = 'all' | 'workflow' | 'lite' | 'orchestrator';
+
+// Unified task item for display
+interface UnifiedTaskItem {
+  id: string;
+  name: string;
+  type: TaskType;
+  subType?: string;
+  status: string;
+  statusKey: string; // i18n key for status
+  createdAt: string;
+  description?: string;
+  tags?: string[];
+  progress?: number;
+}
+
+// Tab configuration for different task types
+const TABS: { key: TaskType; label: string; icon: React.ElementType }[] = [
+  { key: 'all', label: 'home.tabs.allTasks', icon: FolderKanban },
+  { key: 'workflow', label: 'home.tabs.workflow', icon: Workflow },
+  { key: 'lite', label: 'home.tabs.liteTasks', icon: Zap },
+  { key: 'orchestrator', label: 'home.tabs.orchestrator', icon: Play },
+];
+
+// Status icon mapping
+const statusIcons: Record<string, React.ElementType> = {
+  in_progress: Loader2,
+  running: Loader2,
+  planning: FileEdit,
+  completed: CheckCircle2,
+  failed: XCircle,
+  paused: PauseCircle,
+  pending: Clock,
+  cancelled: XCircle,
+  idle: Clock,
+  initializing: Loader2,
+};
+
+// Status color mapping
+const statusColors: Record<string, string> = {
+  in_progress: 'bg-warning/20 text-warning border-warning/30',
+  running: 'bg-warning/20 text-warning border-warning/30',
+  planning: 'bg-violet-500/20 text-violet-600 border-violet-500/30',
+  completed: 'bg-success/20 text-success border-success/30',
+  failed: 'bg-destructive/20 text-destructive border-destructive/30',
+  paused: 'bg-slate-400/20 text-slate-500 border-slate-400/30',
+  pending: 'bg-muted text-muted-foreground border-border',
+  cancelled: 'bg-destructive/20 text-destructive border-destructive/30',
+  idle: 'bg-muted text-muted-foreground border-border',
+  initializing: 'bg-info/20 text-info border-info/30',
+};
+
+// Status to i18n key mapping
+const statusI18nKeys: Record<string, string> = {
+  in_progress: 'inProgress',
+  running: 'running',
+  planning: 'planning',
+  completed: 'completed',
+  failed: 'failed',
+  paused: 'paused',
+  pending: 'pending',
+  cancelled: 'cancelled',
+  idle: 'idle',
+  initializing: 'initializing',
+};
+
+// Lite task sub-type icons
+const liteTypeIcons: Record<string, React.ElementType> = {
+  'lite-plan': FileEdit,
+  'lite-fix': Wrench,
+  'multi-cli-plan': GitBranch,
+};
+
+// Task type colors
+const typeColors: Record<TaskType, string> = {
+  all: 'bg-muted text-muted-foreground',
+  workflow: 'bg-primary/20 text-primary',
+  lite: 'bg-amber-500/20 text-amber-600',
+  orchestrator: 'bg-violet-500/20 text-violet-600',
+};
+
+function TaskItemCard({ item, onClick }: { item: UnifiedTaskItem; onClick: () => void }) {
+  const { formatMessage } = useIntl();
+  const StatusIcon = statusIcons[item.status] || Clock;
+  const TypeIcon = item.subType ? (liteTypeIcons[item.subType] || Zap) :
+    item.type === 'workflow' ? Workflow :
+    item.type === 'orchestrator' ? Play : Zap;
+
+  const isAnimated = item.status === 'in_progress' || item.status === 'running' || item.status === 'initializing';
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full text-left p-3 rounded-lg border border-border bg-card hover:bg-accent/50 hover:border-primary/30 transition-all group"
+    >
+      <div className="flex items-start gap-2.5">
+        <div className={cn('p-1.5 rounded-md shrink-0', typeColors[item.type])}>
+          <TypeIcon className="h-4 w-4" />
+        </div>
+        <div className="flex-1 min-w-0">
+          {/* Header: name + status */}
+          <div className="flex items-start gap-2 mb-1">
+            <h4 className="text-sm font-medium text-foreground truncate flex-1 group-hover:text-primary transition-colors">
+              {item.name}
+            </h4>
+            <Badge className={cn('text-[10px] px-1.5 py-0 shrink-0 border', statusColors[item.status])}>
+              <StatusIcon className={cn('h-2.5 w-2.5 mr-0.5', isAnimated && 'animate-spin')} />
+              {formatMessage({ id: `common.status.${item.statusKey}` })}
+            </Badge>
+          </div>
+
+          {/* Description */}
+          {item.description && (
+            <p className="text-xs text-muted-foreground line-clamp-2 mb-1.5">
+              {item.description}
+            </p>
+          )}
+
+          {/* Progress bar (if available) */}
+          {typeof item.progress === 'number' && item.progress > 0 && (
+            <div className="flex items-center gap-2 mb-1.5">
+              <Progress value={item.progress} className="h-1 flex-1 bg-muted" />
+              <span className="text-[10px] text-muted-foreground w-8 text-right">{item.progress}%</span>
+            </div>
+          )}
+
+          {/* Footer: time + tags */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+              <Clock className="h-2.5 w-2.5" />
+              {item.createdAt}
+            </span>
+            {item.subType && (
+              <Badge variant="outline" className="text-[9px] px-1 py-0 bg-background">
+                {item.subType}
+              </Badge>
+            )}
+            {item.tags && item.tags.slice(0, 2).map((tag) => (
+              <Badge key={tag} variant="outline" className="text-[9px] px-1 py-0 gap-0.5 bg-background">
+                <Tag className="h-2 w-2" />
+                {tag}
+              </Badge>
+            ))}
+            {item.tags && item.tags.length > 2 && (
+              <span className="text-[9px] text-muted-foreground">+{item.tags.length - 2}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function TaskItemSkeleton() {
+  return (
+    <div className="p-3 rounded-lg border border-border bg-card animate-pulse">
+      <div className="flex items-start gap-2.5">
+        <div className="w-8 h-8 rounded-md bg-muted" />
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-2">
+            <div className="h-4 bg-muted rounded flex-1" />
+            <div className="h-4 w-16 bg-muted rounded" />
+          </div>
+          <div className="h-3 bg-muted rounded w-3/4 mb-2" />
+          <div className="flex gap-2">
+            <div className="h-3 w-16 bg-muted rounded" />
+            <div className="h-3 w-12 bg-muted rounded" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-/**
- * RecentSessionsWidget - Dashboard widget showing recent workflow sessions
- *
- * Displays recent active sessions (max 6 by default) with navigation to session detail.
- * Wrapped with React.memo to prevent unnecessary re-renders when parent updates.
- */
 function RecentSessionsWidgetComponent({
   className,
-  maxSessions = 6,
-  ...props
+  maxItems = 6,
 }: RecentSessionsWidgetProps) {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
+  const [activeTab, setActiveTab] = React.useState<TaskType>('all');
 
-  // Fetch recent sessions (active only)
-  const { activeSessions, isLoading } = useSessions({
+  // Fetch workflow sessions
+  const { activeSessions, isLoading: sessionsLoading } = useSessions({
     filter: { location: 'active' },
   });
 
-  // Get recent sessions (sorted by creation date)
-  const recentSessions = React.useMemo(
-    () =>
-      [...activeSessions]
-        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-        .slice(0, maxSessions),
-    [activeSessions, maxSessions]
-  );
+  // Fetch lite tasks
+  const { allSessions: liteSessions, isLoading: liteLoading } = useLiteTasks();
 
-  const handleSessionClick = (sessionId: string) => {
-    navigate(`/sessions/${sessionId}`);
+  // Get coordinator state
+  const coordinatorState = useCoordinatorStore();
+
+  // Format relative time with fallback
+  const formatRelativeTime = React.useCallback((dateStr: string | undefined): string => {
+    if (!dateStr) return formatMessage({ id: 'common.time.justNow' });
+
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return formatMessage({ id: 'common.time.justNow' });
+
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffMins < 1) return formatMessage({ id: 'common.time.justNow' });
+    if (diffMins < 60) return formatMessage({ id: 'common.time.minutesAgo' }, { count: diffMins });
+    if (diffHours < 24) return formatMessage({ id: 'common.time.hoursAgo' }, { count: diffHours });
+    return formatMessage({ id: 'common.time.daysAgo' }, { count: diffDays });
+  }, [formatMessage]);
+
+  // Convert to unified items
+  const unifiedItems = React.useMemo((): UnifiedTaskItem[] => {
+    const items: UnifiedTaskItem[] = [];
+
+    // Add workflow sessions
+    activeSessions.forEach((session) => {
+      const status = session.status || 'pending';
+      items.push({
+        id: session.session_id,
+        name: session.title || session.description || session.session_id,
+        type: 'workflow',
+        status,
+        statusKey: statusI18nKeys[status] || status,
+        createdAt: formatRelativeTime(session.created_at),
+        description: session.description || `Session: ${session.session_id}`,
+        tags: [],
+        progress: undefined,
+      });
+    });
+
+    // Add lite tasks
+    liteSessions.forEach((session) => {
+      const status = session.status || 'pending';
+      const sessionId = session.session_id || session.id;
+      items.push({
+        id: sessionId,
+        name: session.title || sessionId,
+        type: 'lite',
+        subType: session._type,
+        status,
+        statusKey: statusI18nKeys[status] || status,
+        createdAt: formatRelativeTime(session.createdAt),
+        description: session.description || `${session._type} task`,
+        tags: [],
+        progress: undefined,
+      });
+    });
+
+    // Add current coordinator execution if exists
+    if (coordinatorState.currentExecutionId && coordinatorState.status !== 'idle') {
+      const status = coordinatorState.status;
+      const completedSteps = coordinatorState.commandChain.filter(n => n.status === 'completed').length;
+      const totalSteps = coordinatorState.commandChain.length;
+      const progress = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;
+
+      items.push({
+        id: coordinatorState.currentExecutionId,
+        name: coordinatorState.pipelineDetails?.nodes[0]?.name || 'Orchestrator Task',
+        type: 'orchestrator',
+        status,
+        statusKey: statusI18nKeys[status] || status,
+        createdAt: formatRelativeTime(coordinatorState.startedAt),
+        description: `${completedSteps}/${totalSteps} steps completed`,
+        progress,
+      });
+    }
+
+    // Sort by most recent (use original date for sorting, not formatted string)
+    return items;
+  }, [activeSessions, liteSessions, coordinatorState, formatRelativeTime]);
+
+  // Filter items by tab
+  const filteredItems = React.useMemo(() => {
+    if (activeTab === 'all') return unifiedItems.slice(0, maxItems);
+    return unifiedItems.filter((item) => item.type === activeTab).slice(0, maxItems);
+  }, [unifiedItems, activeTab, maxItems]);
+
+  // Handle item click
+  const handleItemClick = (item: UnifiedTaskItem) => {
+    switch (item.type) {
+      case 'workflow':
+        navigate(`/sessions/${item.id}`);
+        break;
+      case 'lite':
+        navigate(`/lite-tasks/${item.subType}/${item.id}`);
+        break;
+      case 'orchestrator':
+        navigate(`/orchestrator`);
+        break;
+    }
   };
 
   const handleViewAll = () => {
     navigate('/sessions');
   };
 
+  const isLoading = sessionsLoading || liteLoading;
+
   return (
-    <div {...props} className={className}>
+    <div className={className}>
       <Card className="h-full p-4 flex flex-col">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-medium text-foreground">
-            {formatMessage({ id: 'home.sections.recentSessions' })}
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-semibold text-foreground">
+            {formatMessage({ id: 'home.sections.recentTasks' })}
           </h3>
-          <Button variant="link" size="sm" onClick={handleViewAll}>
+          <Button variant="link" size="sm" className="text-xs h-auto p-0" onClick={handleViewAll}>
             {formatMessage({ id: 'common.actions.viewAll' })}
           </Button>
         </div>
 
+        {/* Tabs */}
+        <div className="flex gap-1 mb-3 overflow-x-auto pb-1">
+          {TABS.map((tab) => {
+            const TabIcon = tab.icon;
+            const count = tab.key === 'all' ? unifiedItems.length :
+              unifiedItems.filter((i) => i.type === tab.key).length;
+
+            return (
+              <Button
+                key={tab.key}
+                variant={activeTab === tab.key ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setActiveTab(tab.key)}
+                className={cn(
+                  'whitespace-nowrap text-xs gap-1 h-7 px-2',
+                  activeTab === tab.key && 'bg-primary text-primary-foreground'
+                )}
+              >
+                <TabIcon className="h-3 w-3" />
+                {formatMessage({ id: tab.label })}
+                <span className="text-[10px] opacity-70">({count})</span>
+              </Button>
+            );
+          })}
+        </div>
+
+        {/* Task items */}
         <div className="flex-1 overflow-auto">
           {isLoading ? (
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <SessionCardSkeleton key={i} />
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <TaskItemSkeleton key={i} />
               ))}
             </div>
-          ) : recentSessions.length === 0 ? (
+          ) : filteredItems.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-8">
-              <FolderKanban className="h-12 w-12 text-muted-foreground mb-2" />
+              <FolderKanban className="h-10 w-10 text-muted-foreground mb-2" />
               <p className="text-sm text-muted-foreground">
-                {formatMessage({ id: 'home.emptyState.noSessions.message' })}
+                {formatMessage({ id: 'home.emptyState.noTasks.message' })}
               </p>
             </div>
           ) : (
-            <div className="space-y-3">
-              {recentSessions.map((session) => (
-                <SessionCard
-                  key={session.session_id}
-                  session={session}
-                  onClick={handleSessionClick}
-                  onView={handleSessionClick}
-                  showActions={false}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+              {filteredItems.map((item) => (
+                <TaskItemCard
+                  key={`${item.type}-${item.id}`}
+                  item={item}
+                  onClick={() => handleItemClick(item)}
                 />
               ))}
             </div>
@@ -108,10 +406,6 @@ function RecentSessionsWidgetComponent({
   );
 }
 
-/**
- * Memoized RecentSessionsWidget - Prevents re-renders when parent updates
- * Props are compared shallowly; use useCallback for function props
- */
 export const RecentSessionsWidget = React.memo(RecentSessionsWidgetComponent);
 
 export default RecentSessionsWidget;

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

@@ -0,0 +1,140 @@
+// ========================================
+// TaskMarqueeWidget Component
+// ========================================
+// Widget showing scrolling task details in a marquee/ticker format
+
+import { memo, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { ListChecks } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface TaskMarqueeWidgetProps {
+  className?: string;
+}
+
+interface TaskItem {
+  id: string;
+  name: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'failed';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  progress: number;
+}
+
+// Mock task data
+const MOCK_TASKS: TaskItem[] = [
+  { id: '1', name: 'Implement user authentication system', status: 'in_progress', priority: 'high', progress: 75 },
+  { id: '2', name: 'Design database schema', status: 'completed', priority: 'high', progress: 100 },
+  { id: '3', name: 'Setup CI/CD pipeline', status: 'in_progress', priority: 'critical', progress: 45 },
+  { id: '4', name: 'Write API documentation', status: 'pending', priority: 'medium', progress: 0 },
+  { id: '5', name: 'Performance optimization', status: 'completed', priority: 'medium', progress: 100 },
+  { id: '6', name: 'Security audit and fixes', status: 'failed', priority: 'critical', progress: 30 },
+  { id: '7', name: 'Integration testing', status: 'in_progress', priority: 'high', progress: 60 },
+  { id: '8', name: 'Deploy to staging', status: 'pending', priority: 'medium', progress: 0 },
+];
+
+// Status color mapping
+const statusColors: Record<string, string> = {
+  pending: 'bg-muted',
+  in_progress: 'bg-warning/20 text-warning',
+  completed: 'bg-success/20 text-success',
+  failed: 'bg-destructive/20 text-destructive',
+};
+
+const priorityColors: Record<string, string> = {
+  low: 'bg-muted text-muted-foreground',
+  medium: 'bg-info/20 text-info',
+  high: 'bg-warning/20 text-warning',
+  critical: 'bg-destructive/20 text-destructive',
+};
+
+// Map status values to i18n keys
+const statusLabelKeys: Record<string, string> = {
+  pending: 'common.status.pending',
+  in_progress: 'common.status.inProgress',
+  completed: 'common.status.completed',
+  failed: 'common.status.failed',
+};
+
+function TaskMarqueeWidgetComponent({ className }: TaskMarqueeWidgetProps) {
+  const { formatMessage } = useIntl();
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-advance task display every 4 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % MOCK_TASKS.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const currentTask = MOCK_TASKS[currentIndex];
+
+  return (
+    <Card className={cn('h-full p-4 flex flex-col', className)}>
+      <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+        <ListChecks className="h-5 w-5" />
+        {formatMessage({ id: 'home.sections.taskDetails' })}
+      </h3>
+
+      <div className="flex-1 flex flex-col justify-center gap-4">
+        {/* Task name with marquee effect */}
+        <div className="overflow-hidden">
+          <div className="animate-marquee">
+            <h4 className="text-base font-semibold text-foreground whitespace-nowrap">
+              {currentTask.name}
+            </h4>
+          </div>
+        </div>
+
+        {/* Status and Priority badges */}
+        <div className="flex items-center gap-2 flex-wrap">
+          <Badge className={cn(statusColors[currentTask.status], 'capitalize')}>
+            {formatMessage({ id: statusLabelKeys[currentTask.status] })}
+          </Badge>
+          <Badge className={cn(priorityColors[currentTask.priority], 'capitalize')}>
+            {formatMessage({ id: `common.priority.${currentTask.priority}` })}
+          </Badge>
+        </div>
+
+        {/* Progress bar */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">{formatMessage({ id: 'common.labels.progress' })}</span>
+            <span className="font-semibold text-foreground">{currentTask.progress}%</span>
+          </div>
+          <div className="h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className="h-full bg-primary transition-all duration-300"
+              style={{ width: `${currentTask.progress}%` }}
+            />
+          </div>
+        </div>
+
+        {/* Task counter */}
+        <div className="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border">
+          <span>
+            {currentIndex + 1} / {MOCK_TASKS.length}
+          </span>
+          <div className="flex gap-1">
+            {MOCK_TASKS.map((_, idx) => (
+              <div
+                key={idx}
+                className={cn(
+                  'h-1.5 w-1.5 rounded-full transition-colors',
+                  idx === currentIndex ? 'bg-primary' : 'bg-muted'
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export const TaskMarqueeWidget = memo(TaskMarqueeWidgetComponent);
+
+export default TaskMarqueeWidget;

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

@@ -28,9 +28,9 @@ export interface TaskTypeBarChartWidgetProps {
  */
 function TaskTypeBarChartWidgetComponent({ className, ...props }: TaskTypeBarChartWidgetProps) {
   const { formatMessage } = useIntl();
-  const { data, isLoading, error } = useTaskTypeCounts();
+  const { data, isLoading } = useTaskTypeCounts();
 
-  // Use mock data if API is not ready
+  // Use mock data if API call fails or returns no data
   const chartData = data || generateMockTaskTypeCounts();
 
   return (
@@ -41,10 +41,6 @@ function TaskTypeBarChartWidgetComponent({ className, ...props }: TaskTypeBarCha
         </h3>
         {isLoading ? (
           <ChartSkeleton type="bar" height={280} />
-        ) : error ? (
-          <div className="flex-1 flex items-center justify-center">
-            <p className="text-sm text-destructive">Failed to load chart data</p>
-          </div>
         ) : (
           <TaskTypeBarChart data={chartData} height={280} />
         )}

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

@@ -28,9 +28,9 @@ export interface WorkflowStatusPieChartWidgetProps {
  */
 function WorkflowStatusPieChartWidgetComponent({ className, ...props }: WorkflowStatusPieChartWidgetProps) {
   const { formatMessage } = useIntl();
-  const { data, isLoading, error } = useWorkflowStatusCounts();
+  const { data, isLoading } = useWorkflowStatusCounts();
 
-  // Use mock data if API is not ready
+  // Use mock data if API call fails or returns no data
   const chartData = data || generateMockWorkflowStatusCounts();
 
   return (
@@ -41,10 +41,6 @@ function WorkflowStatusPieChartWidgetComponent({ className, ...props }: Workflow
         </h3>
         {isLoading ? (
           <ChartSkeleton type="pie" height={280} />
-        ) : error ? (
-          <div className="flex-1 flex items-center justify-center">
-            <p className="text-sm text-destructive">Failed to load chart data</p>
-          </div>
         ) : (
           <WorkflowStatusPieChart data={chartData} height={280} />
         )}

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

@@ -0,0 +1,109 @@
+// ========================================
+// WorkflowStatusProgressWidget Component
+// ========================================
+// Widget showing workflow status distribution using progress bars
+
+import { memo } from 'react';
+import { useIntl } from 'react-intl';
+import { Card } from '@/components/ui/Card';
+import { Progress } from '@/components/ui/Progress';
+import { Badge } from '@/components/ui/Badge';
+import { useWorkflowStatusCounts, generateMockWorkflowStatusCounts } from '@/hooks/useWorkflowStatusCounts';
+import { cn } from '@/lib/utils';
+
+export interface WorkflowStatusProgressWidgetProps {
+  className?: string;
+}
+
+// Status color mapping
+const statusColors: Record<string, { bg: string; text: string }> = {
+  completed: { bg: 'bg-success', text: 'text-success' },
+  in_progress: { bg: 'bg-warning', text: 'text-warning' },
+  planning: { bg: 'bg-info', text: 'text-info' },
+  paused: { bg: 'bg-muted', text: 'text-muted-foreground' },
+  archived: { bg: 'bg-secondary', text: 'text-secondary-foreground' },
+};
+
+// Status label keys for i18n
+const statusLabelKeys: Record<string, string> = {
+  completed: 'sessions.status.completed',
+  in_progress: 'sessions.status.inProgress',
+  planning: 'sessions.status.planning',
+  paused: 'sessions.status.paused',
+  archived: 'sessions.status.archived',
+};
+
+function WorkflowStatusProgressWidgetComponent({ className }: WorkflowStatusProgressWidgetProps) {
+  const { formatMessage } = useIntl();
+  const { data, isLoading } = useWorkflowStatusCounts();
+
+  // Use mock data if API call fails or returns no data
+  const chartData = data || generateMockWorkflowStatusCounts();
+
+  // Calculate total for percentage
+  const total = chartData.reduce((sum, item) => sum + item.count, 0);
+
+  return (
+    <Card className={cn('h-full p-4 flex flex-col', className)}>
+      <h3 className="text-lg font-semibold text-foreground mb-4">
+        {formatMessage({ id: 'home.widgets.workflowStatus' })}
+      </h3>
+      
+      {isLoading ? (
+        <div className="space-y-4 flex-1">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="space-y-2">
+              <div className="h-4 bg-muted rounded animate-pulse" />
+              <div className="h-2 bg-muted rounded animate-pulse" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-4 flex-1">
+          {chartData.map((item) => {
+            const percentage = total > 0 ? Math.round((item.count / total) * 100) : 0;
+            const colors = statusColors[item.status] || statusColors.completed;
+            
+            return (
+              <div key={item.status} className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-foreground">
+                      {formatMessage({ id: statusLabelKeys[item.status] })}
+                    </span>
+                    <Badge variant="secondary" className="text-xs">
+                      {item.count}
+                    </Badge>
+                  </div>
+                  <span className={cn('text-sm font-semibold', colors.text)}>
+                    {percentage}%
+                  </span>
+                </div>
+                <Progress 
+                  value={percentage} 
+                  className="h-2"
+                  indicatorClassName={colors.bg}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+      
+      {!isLoading && total > 0 && (
+        <div className="mt-4 pt-4 border-t border-border">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {formatMessage({ id: 'common.stats.total' })}
+            </span>
+            <span className="font-semibold text-foreground">{total}</span>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export const WorkflowStatusProgressWidget = memo(WorkflowStatusProgressWidgetComponent);
+
+export default WorkflowStatusProgressWidget;

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

@@ -0,0 +1,723 @@
+// ========================================
+// WorkflowTaskWidget Component
+// ========================================
+// Combined dashboard widget: project info + stats + workflow status + orchestrator + task carousel
+
+import { memo, useMemo, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+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 {
+  ListChecks,
+  Clock,
+  FolderKanban,
+  CheckCircle2,
+  XCircle,
+  Activity,
+  Play,
+  Pause,
+  Square,
+  Loader2,
+  AlertCircle,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  ChevronUp,
+  Tag,
+  Calendar,
+  Code2,
+  Server,
+  Layers,
+  GitBranch,
+  Wrench,
+  FileCode,
+  Bug,
+  Sparkles,
+  BookOpen,
+} from 'lucide-react';
+
+export interface WorkflowTaskWidgetProps {
+  className?: string;
+}
+
+// ---- Workflow Status section ----
+const statusColors: Record<string, { bg: string; text: string; dot: string }> = {
+  completed: { bg: 'bg-success', text: 'text-success', dot: 'bg-emerald-500' },
+  in_progress: { bg: 'bg-warning', text: 'text-warning', dot: 'bg-amber-500' },
+  planning: { bg: 'bg-violet-500', text: 'text-violet-600', dot: 'bg-violet-500' },
+  paused: { bg: 'bg-slate-400', text: 'text-slate-500', dot: 'bg-slate-400' },
+  archived: { bg: 'bg-slate-300', text: 'text-slate-400', dot: 'bg-slate-300' },
+};
+
+const statusLabelKeys: Record<string, string> = {
+  completed: 'sessions.status.completed',
+  in_progress: 'sessions.status.inProgress',
+  planning: 'sessions.status.planning',
+  paused: 'sessions.status.paused',
+  archived: 'sessions.status.archived',
+};
+
+// ---- Task List section ----
+interface TaskItem {
+  id: string;
+  name: string;
+  status: 'pending' | 'completed';
+}
+
+// Session with its tasks
+interface SessionWithTasks {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'planning' | 'in_progress' | 'completed' | 'paused';
+  tags: string[];
+  createdAt: string;
+  updatedAt: string;
+  tasks: TaskItem[];
+}
+
+// Mock sessions with their tasks
+const MOCK_SESSIONS: SessionWithTasks[] = [
+  {
+    id: 'WFS-auth-001',
+    name: 'User Authentication System',
+    description: 'Implement OAuth2 and JWT based authentication with role-based access control',
+    status: 'in_progress',
+    tags: ['auth', 'security', 'backend'],
+    createdAt: '2024-01-15',
+    updatedAt: '2024-01-20',
+    tasks: [
+      { id: '1', name: 'Implement user authentication', status: 'pending' },
+      { id: '2', name: 'Design database schema', status: 'completed' },
+      { id: '3', name: 'Setup CI/CD pipeline', status: 'pending' },
+    ],
+  },
+  {
+    id: 'WFS-api-002',
+    name: 'API Documentation',
+    description: 'Create comprehensive API documentation with OpenAPI 3.0 specification',
+    status: 'planning',
+    tags: ['docs', 'api'],
+    createdAt: '2024-01-18',
+    updatedAt: '2024-01-19',
+    tasks: [
+      { id: '4', name: 'Write API documentation', status: 'pending' },
+      { id: '5', name: 'Create OpenAPI spec', status: 'pending' },
+    ],
+  },
+  {
+    id: 'WFS-perf-003',
+    name: 'Performance Optimization',
+    description: 'Optimize database queries and implement caching strategies',
+    status: 'completed',
+    tags: ['performance', 'optimization', 'database'],
+    createdAt: '2024-01-10',
+    updatedAt: '2024-01-17',
+    tasks: [
+      { id: '6', name: 'Performance optimization', status: 'completed' },
+      { id: '7', name: 'Security audit', status: 'completed' },
+    ],
+  },
+  {
+    id: 'WFS-test-004',
+    name: 'Integration Testing',
+    description: 'Setup E2E testing framework and write integration tests',
+    status: 'in_progress',
+    tags: ['testing', 'e2e', 'ci'],
+    createdAt: '2024-01-19',
+    updatedAt: '2024-01-20',
+    tasks: [
+      { id: '8', name: 'Integration testing', status: 'completed' },
+      { id: '9', name: 'Deploy to staging', status: 'pending' },
+      { id: '10', name: 'E2E test setup', status: 'pending' },
+    ],
+  },
+];
+
+const taskStatusColors: Record<string, { bg: string; text: string; icon: typeof CheckCircle2 }> = {
+  pending: { bg: 'bg-muted', text: 'text-muted-foreground', icon: Clock },
+  completed: { bg: 'bg-success/20', text: 'text-success', icon: CheckCircle2 },
+};
+
+const sessionStatusColors: Record<string, { bg: string; text: string }> = {
+  planning: { bg: 'bg-violet-500/20', text: 'text-violet-600' },
+  in_progress: { bg: 'bg-warning/20', text: 'text-warning' },
+  completed: { bg: 'bg-success/20', text: 'text-success' },
+  paused: { bg: 'bg-slate-400/20', text: 'text-slate-500' },
+};
+
+// ---- Mini Stat Card with Sparkline ----
+interface MiniStatCardProps {
+  icon: React.ElementType;
+  title: string;
+  value: number;
+  variant: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'default';
+  sparklineData?: number[];
+}
+
+const variantStyles: Record<string, { card: string; icon: string }> = {
+  primary: { card: 'border-primary/30 bg-primary/5', icon: 'bg-primary/10 text-primary' },
+  info: { card: 'border-info/30 bg-info/5', icon: 'bg-info/10 text-info' },
+  success: { card: 'border-success/30 bg-success/5', icon: 'bg-success/10 text-success' },
+  warning: { card: 'border-warning/30 bg-warning/5', icon: 'bg-warning/10 text-warning' },
+  danger: { card: 'border-destructive/30 bg-destructive/5', icon: 'bg-destructive/10 text-destructive' },
+  default: { card: 'border-border', icon: 'bg-muted text-muted-foreground' },
+};
+
+function MiniStatCard({ icon: Icon, title, value, variant, sparklineData }: MiniStatCardProps) {
+  const styles = variantStyles[variant] || variantStyles.default;
+
+  return (
+    <div className={cn('rounded-lg border p-2 transition-all hover:shadow-sm', styles.card)}>
+      <div className="flex items-start justify-between gap-1">
+        <div className="flex-1 min-w-0">
+          <p className="text-[10px] font-medium text-muted-foreground truncate">{title}</p>
+          <p className="text-lg font-semibold text-card-foreground mt-0.5">{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" />
+        </div>
+      </div>
+      {sparklineData && sparklineData.length > 0 && (
+        <div className="mt-1 -mx-1">
+          <Sparkline data={sparklineData} height={24} strokeWidth={1.5} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Generate sparkline data
+function generateSparklineData(currentValue: number, variance = 0.3): number[] {
+  const days = 7;
+  const data: number[] = [];
+  let value = Math.max(0, currentValue * (1 - variance));
+
+  for (let i = 0; i < days - 1; i++) {
+    data.push(Math.round(value));
+    const change = (Math.random() - 0.5) * 2 * variance * currentValue;
+    value = Math.max(0, value + change);
+  }
+  data.push(currentValue);
+  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);
+
+  // Generate sparkline data for each stat
+  const sparklines = useMemo(() => ({
+    activeSessions: generateSparklineData(stats?.activeSessions ?? 0, 0.4),
+    totalTasks: generateSparklineData(stats?.totalTasks ?? 0, 0.3),
+    completedTasks: generateSparklineData(stats?.completedTasks ?? 0, 0.25),
+    pendingTasks: generateSparklineData(stats?.pendingTasks ?? 0, 0.35),
+    failedTasks: generateSparklineData(stats?.failedTasks ?? 0, 0.5),
+    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);
+
+  // Session carousel state
+  const [currentSessionIndex, setCurrentSessionIndex] = useState(0);
+  const currentSession = MOCK_SESSIONS[currentSessionIndex];
+
+  // Auto-rotate carousel every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSessionIndex((prev) => (prev + 1) % MOCK_SESSIONS.length);
+    }, 5000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // Manual navigation
+  const handlePrevSession = () => {
+    setCurrentSessionIndex((prev) => (prev === 0 ? MOCK_SESSIONS.length - 1 : prev - 1));
+  };
+  const handleNextSession = () => {
+    setCurrentSessionIndex((prev) => (prev + 1) % MOCK_SESSIONS.length);
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {/* Project Info Banner - Separate Card */}
+      <Card className="shrink-0">
+        {projectLoading ? (
+          <div className="px-4 py-3 flex items-center gap-4">
+            <div className="h-5 w-32 bg-muted rounded animate-pulse" />
+            <div className="h-4 w-48 bg-muted rounded animate-pulse" />
+          </div>
+        ) : (
+          <>
+            {/* Collapsed Header */}
+            <div className="px-4 py-3 flex items-center gap-6 flex-wrap">
+              {/* Project Name & Icon */}
+              <div className="flex items-center gap-2.5 min-w-0">
+                <div className="p-1.5 rounded-md bg-primary/10">
+                  <Code2 className="h-4 w-4 text-primary" />
+                </div>
+                <div className="min-w-0">
+                  <h2 className="text-sm font-semibold text-foreground truncate">
+                    {projectOverview?.projectName || 'Claude Code Workflow'}
+                  </h2>
+                  <p className="text-[10px] text-muted-foreground truncate max-w-[280px]">
+                    {projectOverview?.description || 'AI-powered workflow management system'}
+                  </p>
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="h-8 w-px bg-border hidden md:block" />
+
+              {/* Tech Stack Badges */}
+              <div className="flex items-center gap-2 text-[10px]">
+                <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-blue-500/10 text-blue-600 font-medium">
+                  <Code2 className="h-3 w-3" />
+                  {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">
+                  <Server className="h-3 w-3" />
+                  {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">
+                  <Layers className="h-3 w-3" />
+                  {projectOverview?.architecture?.style || 'Modular Monolith'}
+                </span>
+                {projectOverview?.technologyStack?.buildTools?.[0] && (
+                  <span className="flex items-center gap-1 px-2 py-1 rounded-md bg-orange-500/10 text-orange-600 font-medium">
+                    <Wrench className="h-3 w-3" />
+                    {projectOverview.technologyStack.buildTools[0]}
+                  </span>
+                )}
+              </div>
+
+              {/* Divider */}
+              <div className="h-8 w-px bg-border hidden lg:block" />
+
+              {/* Quick Stats */}
+              <div className="flex items-center gap-4 text-[10px]">
+                <div className="flex items-center gap-1.5 text-emerald-600">
+                  <Sparkles className="h-3 w-3" />
+                  <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">
+                  <Bug className="h-3 w-3" />
+                  <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">
+                  <FileCode className="h-3 w-3" />
+                  <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">
+                <span className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-muted/50">
+                  <Calendar className="h-3 w-3" />
+                  {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"
+                  onClick={() => setProjectExpanded(!projectExpanded)}
+                >
+                  {projectExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </Button>
+              </div>
+            </div>
+
+            {/* Expanded Details */}
+            {projectExpanded && (
+              <div className="px-3 pb-2 grid grid-cols-4 gap-3 border-t border-border/50 pt-2">
+                {/* Architecture */}
+                <div className="space-y-1">
+                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                    <Layers className="h-3 w-3" />
+                    {formatMessage({ id: 'projectOverview.architecture.title' })}
+                  </h4>
+                  <div className="space-y-0.5">
+                    <p className="text-[10px] text-foreground">{projectOverview?.architecture?.style || 'Modular Monolith'}</p>
+                    <div className="flex flex-wrap gap-1">
+                      {projectOverview?.architecture?.layers?.slice(0, 3).map((layer, i) => (
+                        <span key={i} className="text-[9px] px-1 py-0.5 rounded bg-muted text-muted-foreground">{layer}</span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Key Components */}
+                <div className="space-y-1">
+                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                    <Wrench className="h-3 w-3" />
+                    {formatMessage({ id: 'projectOverview.components.title' })}
+                  </h4>
+                  <div className="space-y-0.5">
+                    {projectOverview?.keyComponents?.slice(0, 3).map((comp, i) => (
+                      <p key={i} className="text-[9px] text-foreground truncate">{comp.name}</p>
+                    )) || (
+                      <>
+                        <p className="text-[9px] text-foreground">Session Manager</p>
+                        <p className="text-[9px] text-foreground">Dashboard Generator</p>
+                        <p className="text-[9px] text-foreground">Data Aggregator</p>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Development History */}
+                <div className="space-y-1">
+                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                    <FileCode className="h-3 w-3" />
+                    {formatMessage({ id: 'projectOverview.devIndex.title' })}
+                  </h4>
+                  <div className="flex flex-wrap gap-1.5">
+                    <span className="flex items-center gap-0.5 text-[9px] text-emerald-600">
+                      <Sparkles className="h-2.5 w-2.5" />
+                      {projectOverview?.developmentIndex?.feature?.length || 0}
+                    </span>
+                    <span className="flex items-center gap-0.5 text-[9px] text-blue-600">
+                      <FileCode className="h-2.5 w-2.5" />
+                      {projectOverview?.developmentIndex?.enhancement?.length || 0}
+                    </span>
+                    <span className="flex items-center gap-0.5 text-[9px] text-amber-600">
+                      <Bug className="h-2.5 w-2.5" />
+                      {projectOverview?.developmentIndex?.bugfix?.length || 0}
+                    </span>
+                    <span className="flex items-center gap-0.5 text-[9px] text-violet-600">
+                      <Wrench className="h-2.5 w-2.5" />
+                      {projectOverview?.developmentIndex?.refactor?.length || 0}
+                    </span>
+                    <span className="flex items-center gap-0.5 text-[9px] text-slate-600">
+                      <BookOpen className="h-2.5 w-2.5" />
+                      {projectOverview?.developmentIndex?.docs?.length || 0}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Design Patterns */}
+                <div className="space-y-1">
+                  <h4 className="text-[10px] font-semibold text-muted-foreground flex items-center gap-1">
+                    <GitBranch className="h-3 w-3" />
+                    {formatMessage({ id: 'projectOverview.architecture.patterns' })}
+                  </h4>
+                  <div className="flex flex-wrap gap-1">
+                    {projectOverview?.architecture?.patterns?.slice(0, 4).map((pattern, i) => (
+                      <span key={i} className="text-[9px] px-1 py-0.5 rounded bg-primary/10 text-primary">{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>
+            )}
+          </>
+        )}
+      </Card>
+
+      {/* Main content Card: Stats | Workflow+Orchestrator | Task Details */}
+      <Card className="h-[320px] flex shrink-0 overflow-hidden">
+        {/* Compact Stats Section with Sparklines */}
+        <div className="w-[28%] p-2.5 flex flex-col border-r border-border">
+          <h3 className="text-xs font-semibold text-foreground mb-2 px-0.5">
+            {formatMessage({ id: 'home.sections.statistics' })}
+          </h3>
+
+          {statsLoading ? (
+            <div className="grid grid-cols-2 gap-1.5 flex-1">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div key={i} className="h-14 bg-muted rounded animate-pulse" />
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-1.5 flex-1 content-start overflow-auto">
+              <MiniStatCard
+                icon={FolderKanban}
+                title={formatMessage({ id: 'home.stats.activeSessions' })}
+                value={stats?.activeSessions ?? 0}
+                variant="primary"
+                sparklineData={sparklines.activeSessions}
+              />
+              <MiniStatCard
+                icon={ListChecks}
+                title={formatMessage({ id: 'home.stats.totalTasks' })}
+                value={stats?.totalTasks ?? 0}
+                variant="info"
+                sparklineData={sparklines.totalTasks}
+              />
+              <MiniStatCard
+                icon={CheckCircle2}
+                title={formatMessage({ id: 'home.stats.completedTasks' })}
+                value={stats?.completedTasks ?? 0}
+                variant="success"
+                sparklineData={sparklines.completedTasks}
+              />
+              <MiniStatCard
+                icon={Clock}
+                title={formatMessage({ id: 'home.stats.pendingTasks' })}
+                value={stats?.pendingTasks ?? 0}
+                variant="warning"
+                sparklineData={sparklines.pendingTasks}
+              />
+              <MiniStatCard
+                icon={XCircle}
+                title={formatMessage({ id: 'common.status.failed' })}
+                value={stats?.failedTasks ?? 0}
+                variant="danger"
+                sparklineData={sparklines.failedTasks}
+              />
+              <MiniStatCard
+                icon={Activity}
+                title={formatMessage({ id: 'common.stats.todayActivity' })}
+                value={stats?.todayActivity ?? 0}
+                variant="default"
+                sparklineData={sparklines.todayActivity}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Workflow Status + Orchestrator Status Section */}
+        <div className="w-[26%] p-3 flex flex-col border-r border-border overflow-auto">
+          {/* Workflow Status */}
+          <h3 className="text-xs font-semibold text-foreground mb-2">
+            {formatMessage({ id: 'home.widgets.workflowStatus' })}
+          </h3>
+
+          {isLoading ? (
+            <div className="space-y-2">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-3 bg-muted rounded animate-pulse" />
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {chartData.map((item) => {
+                const percentage = total > 0 ? Math.round((item.count / total) * 100) : 0;
+                const colors = statusColors[item.status] || statusColors.completed;
+                return (
+                  <div key={item.status} className="space-y-0.5">
+                    <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)} />
+                        <span className="text-[11px] text-foreground">
+                          {formatMessage({ id: statusLabelKeys[item.status] })}
+                        </span>
+                        <span className="text-[11px] text-muted-foreground">
+                          {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">
+          {/* Header with navigation */}
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-xs font-semibold text-foreground flex items-center gap-1">
+              <ListChecks className="h-3.5 w-3.5" />
+              {formatMessage({ id: 'home.sections.taskDetails' })}
+            </h3>
+            <div className="flex items-center gap-1">
+              <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={handlePrevSession}>
+                <ChevronLeft className="h-3 w-3" />
+              </Button>
+              <span className="text-[10px] text-muted-foreground min-w-[40px] text-center">
+                {currentSessionIndex + 1} / {MOCK_SESSIONS.length}
+              </span>
+              <Button variant="ghost" size="sm" className="h-5 w-5 p-0" onClick={handleNextSession}>
+                <ChevronRight className="h-3 w-3" />
+              </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">
+              {/* 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)}>
+                    {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-[10px] text-muted-foreground">{currentSession.id}</p>
+                  </div>
+                </div>
+                {/* Description */}
+                {currentSession.description && (
+                  <p className="text-[10px] text-muted-foreground mt-1.5 line-clamp-2">
+                    {currentSession.description}
+                  </p>
+                )}
+                {/* Progress bar */}
+                <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 text-foreground">
+                      {currentSession.tasks.filter(t => t.status === 'completed').length}/{currentSession.tasks.length}
+                    </span>
+                  </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"
+                    indicatorClassName="bg-success"
+                  />
+                </div>
+                {/* Tags and Date */}
+                <div className="flex items-center gap-2 mt-1.5 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]">
+                      <Tag className="h-2 w-2" />
+                      {tag}
+                    </span>
+                  ))}
+                  <span className="inline-flex items-center gap-0.5 text-[9px] text-muted-foreground ml-auto">
+                    <Calendar className="h-2.5 w-2.5" />
+                    {currentSession.updatedAt}
+                  </span>
+                </div>
+              </div>
+
+              {/* Task List for this Session - Two columns */}
+              <div className="flex-1 overflow-auto min-h-0">
+                <div className="grid grid-cols-2 gap-1">
+                  {currentSession.tasks.map((task) => {
+                    const config = taskStatusColors[task.status];
+                    const StatusIcon = config.icon;
+                    return (
+                      <div
+                        key={task.id}
+                        className="flex items-center gap-1.5 p-1.5 rounded hover:bg-background/50 transition-colors cursor-pointer"
+                      >
+                        <div className={cn('p-0.5 rounded shrink-0', config.bg)}>
+                          <StatusIcon className={cn('h-2.5 w-2.5', config.text)} />
+                        </div>
+                        <p className={cn('flex-1 text-[10px] font-medium truncate', task.status === 'completed' ? 'text-muted-foreground line-through' : 'text-foreground')}>
+                          {task.name}
+                        </p>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Carousel dots */}
+          <div className="flex items-center justify-center gap-1 mt-2">
+            {MOCK_SESSIONS.map((_, idx) => (
+              <button
+                key={idx}
+                onClick={() => setCurrentSessionIndex(idx)}
+                className={cn(
+                  'w-1.5 h-1.5 rounded-full transition-colors',
+                  idx === currentSessionIndex ? 'bg-primary' : 'bg-muted hover:bg-muted-foreground/50'
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export const WorkflowTaskWidget = memo(WorkflowTaskWidgetComponent);
+
+export default WorkflowTaskWidget;

ccw/frontend/src/components/layout/Sidebar.tsx

@@ -22,7 +22,6 @@ import {
   Clock,
   Zap,
   GitFork,
-  Activity,
   Shield,
   History,
   Server,
@@ -81,7 +80,6 @@ const navGroupDefinitions: NavGroupDef[] = [
       { path: '/lite-tasks', labelKey: 'navigation.main.liteTasks', icon: Zap },
       { path: '/orchestrator', labelKey: 'navigation.main.orchestrator', icon: Workflow },
       { path: '/coordinator', labelKey: 'navigation.main.coordinator', icon: GitFork },
-      { path: '/executions', labelKey: 'navigation.main.executions', icon: Activity },
       { path: '/loops', labelKey: 'navigation.main.loops', icon: RefreshCw },
       { path: '/history', labelKey: 'navigation.main.history', icon: Clock },
     ],

ccw/frontend/src/components/shared/CliStreamMonitor/MonitorHeader/index.tsx

@@ -5,7 +5,8 @@
 
 import { memo } from 'react';
 import { useIntl } from 'react-intl';
-import { X, Activity, ChevronDown } from 'lucide-react';
+import { X, Activity, ChevronDown, ExternalLink } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
 
@@ -18,6 +19,8 @@ export interface MonitorHeaderProps {
   totalCount?: number;
   /** Number of executions with errors */
   errorCount?: number;
+  /** Current execution ID for popup navigation */
+  currentExecutionId?: string;
 }
 
 /**
@@ -32,11 +35,21 @@ export const MonitorHeader = memo(function MonitorHeader({
   activeCount = 0,
   totalCount = 0,
   errorCount = 0,
+  currentExecutionId,
 }: MonitorHeaderProps) {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const hasActive = activeCount > 0;
   const hasErrors = errorCount > 0;
 
+  const handlePopOut = () => {
+    const url = currentExecutionId
+      ? `/cli-viewer?executionId=${currentExecutionId}`
+      : '/cli-viewer';
+    navigate(url);
+    onClose();
+  };
+
   return (
     <header
       className={cn(
@@ -70,8 +83,20 @@ export const MonitorHeader = memo(function MonitorHeader({
         </div>
       </div>
 
-      {/* Right side: Status + Count badge */}
+      {/* Right side: Pop out + Status + Count badge */}
       <div className="flex items-center gap-3 shrink-0">
+        {/* Pop out to full page button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handlePopOut}
+          className="h-8 w-8"
+          title={formatMessage({ id: 'cliMonitor.popOutToPage' })}
+          aria-label={formatMessage({ id: 'cliMonitor.openInViewer' })}
+        >
+          <ExternalLink className="h-4 w-4" />
+        </Button>
+
         {/* Live status indicator */}
         {hasActive && (
           <div className="flex items-center gap-2">

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

@@ -27,6 +27,12 @@ import {
   CheckCircle2,
   AlertCircle,
   RefreshCw,
+  FileText,
+  Search,
+  TestTube,
+  File,
+  Settings,
+  Zap,
 } from 'lucide-react';
 import type { SessionMetadata } from '@/types/store';
 
@@ -70,6 +76,31 @@ const statusLabelKeys: Record<SessionMetadata['status'], string> = {
   paused: 'sessions.status.paused',
 };
 
+// Type variant configuration for session type badges
+const typeVariantConfig: Record<
+  SessionMetadata['type'],
+  { variant: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info'; icon: React.ElementType }
+> = {
+  review: { variant: 'info', icon: Search },
+  'tdd': { variant: 'success', icon: TestTube },
+  test: { variant: 'default', icon: FileText },
+  docs: { variant: 'warning', icon: File },
+  workflow: { variant: 'secondary', icon: Settings },
+  'lite-plan': { variant: 'default', icon: FileText },
+  'lite-fix': { variant: 'warning', icon: Zap },
+};
+
+// Type label keys for i18n
+const typeLabelKeys: Record<SessionMetadata['type'], string> = {
+  review: 'sessions.type.review',
+  tdd: 'sessions.type.tdd',
+  test: 'sessions.type.test',
+  docs: 'sessions.type.docs',
+  workflow: 'sessions.type.workflow',
+  'lite-plan': 'sessions.type.lite-plan',
+  'lite-fix': 'sessions.type.lite-fix',
+};
+
 /**
  * Format date to localized string
  */
@@ -150,6 +181,12 @@ export function SessionCard({
     ? formatMessage({ id: statusLabelKeys[session.status] })
     : formatMessage({ id: 'common.status.unknown' });
 
+  // Type badge configuration (graceful degradation when type is undefined)
+  const typeConfig = session.type ? typeVariantConfig[session.type] : null;
+  const typeLabel = session.type && typeLabelKeys[session.type]
+    ? formatMessage({ id: typeLabelKeys[session.type] })
+    : null;
+
   const progress = calculateProgress(session.tasks);
   const isPlanning = session.status === 'planning';
   const isArchived = session.status === 'archived' || session.location === 'archived';
@@ -199,6 +236,12 @@ export function SessionCard({
           </div>
           <div className="flex items-center gap-2 flex-shrink-0">
             <Badge variant={statusVariant}>{statusLabel}</Badge>
+            {typeConfig && typeLabel && (
+              <Badge variant={typeConfig.variant} className="gap-1">
+                <typeConfig.icon className="h-3 w-3" />
+                {typeLabel}
+              </Badge>
+            )}
             {showActions && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

ccw/frontend/src/components/ui/Badge.tsx

@@ -21,6 +21,8 @@ const badgeVariants = cva(
           "border-transparent bg-warning text-white",
         info:
           "border-transparent bg-info text-white",
+        review:
+          "border-transparent bg-purple-600 text-white",
       },
     },
     defaultVariants: {

ccw/frontend/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,22 @@
+// ========================================
+// DropdownMenu Component Re-export
+// ========================================
+// Re-export from Dropdown.tsx for consistent naming
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './Dropdown';

ccw/frontend/src/components/ui/Progress.tsx

@@ -4,8 +4,10 @@ import { cn } from "@/lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+  }
+>(({ className, value, indicatorClassName, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
@@ -15,7 +17,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

ccw/frontend/src/components/ui/TabsNavigation.tsx

@@ -0,0 +1,47 @@
+// ========================================
+// TabsNavigation Component
+// ========================================
+// Reusable tab navigation with underline style
+
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
+
+export interface TabItem {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsNavigationProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  tabs: TabItem[];
+  className?: string;
+}
+
+export function TabsNavigation({ value, onValueChange, tabs, className }: TabsNavigationProps) {
+  return (
+    <div className={cn("flex gap-2 border-b border-border", className)}>
+      {tabs.map((tab) => (
+        <Button
+          key={tab.value}
+          variant="ghost"
+          disabled={tab.disabled}
+          className={cn(
+            "border-b-2 rounded-none h-11 px-4 gap-2",
+            value === tab.value
+              ? "border-primary text-primary"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          )}
+          onClick={() => onValueChange(tab.value)}
+        >
+          {tab.icon}
+          {tab.label}
+          {tab.badge}
+        </Button>
+      ))}
+    </div>
+  );
+}