feat: add Accordion component for UI and Zustand store for coordinator management

- Implemented Accordion component using Radix UI for collapsible sections. - Created Zustand store to manage coordinator execution state, command chains, logs, and interactive questions. - Added validation tests for CLI settings type definitions, ensuring type safety and correct behavior of helper functions.
2026-02-12 02:37:45 +08:00 · 2026-02-03 10:02:40 +08:00
parent bcb4af3ba0
commit 5483a72e9f
82 changed files with 6156 additions and 7605 deletions
--- a/ccw/frontend/src/components/api-settings/CliSettingsList.tsx
+++ b/ccw/frontend/src/components/api-settings/CliSettingsList.tsx
@@ -119,7 +119,7 @@ function CliSettingsCard({
            )}
            {cliSettings.settings.includeCoAuthoredBy !== undefined && (
              <span>
-                Co-authored: {cliSettings.settings.includeCoAuthoredBy ? 'Yes' : 'No'}
+                {formatMessage({ id: 'apiSettings.cliSettings.coAuthoredBy' })}: {formatMessage({ id: cliSettings.settings.includeCoAuthoredBy ? 'common.yes' : 'common.no' })}
              </span>
            )}
          </div>
--- a/ccw/frontend/src/components/api-settings/CliSettingsModal.tsx
+++ b/ccw/frontend/src/components/api-settings/CliSettingsModal.tsx
@@ -5,7 +5,7 @@

 import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
-import { Check, Eye, EyeOff } from 'lucide-react';
+import { Check, Eye, EyeOff, X, Plus } from 'lucide-react';
 import {
  Dialog,
  DialogContent,
@@ -59,12 +59,21 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
  const [providerId, setProviderId] = useState('');
  const [model, setModel] = useState('sonnet');
  const [includeCoAuthoredBy, setIncludeCoAuthoredBy] = useState(false);
+  const [settingsFile, setSettingsFile] = useState('');

  // Direct mode state
  const [authToken, setAuthToken] = useState('');
  const [baseUrl, setBaseUrl] = useState('');
  const [showToken, setShowToken] = useState(false);

+  // Available models state
+  const [availableModels, setAvailableModels] = useState<string[]>([]);
+  const [modelInput, setModelInput] = useState('');
+
+  // Tags state
+  const [tags, setTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState('');
+
  // Validation errors
  const [errors, setErrors] = useState<Record<string, string>>({});

@@ -76,6 +85,9 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
      setEnabled(cliSettings.enabled);
      setModel(cliSettings.settings.model || 'sonnet');
      setIncludeCoAuthoredBy(cliSettings.settings.includeCoAuthoredBy || false);
+      setSettingsFile(cliSettings.settings.settingsFile || '');
+      setAvailableModels(cliSettings.settings.availableModels || []);
+      setTags(cliSettings.settings.tags || []);

      // Determine mode based on settings
      const hasCustomBaseUrl = Boolean(
@@ -104,8 +116,13 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
      setProviderId('');
      setModel('sonnet');
      setIncludeCoAuthoredBy(false);
+      setSettingsFile('');
      setAuthToken('');
      setBaseUrl('');
+      setAvailableModels([]);
+      setModelInput('');
+      setTags([]);
+      setTagInput('');
      setErrors({});
    }
  }, [cliSettings, open, providers]);
@@ -183,6 +200,9 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
          env,
          model,
          includeCoAuthoredBy,
+          settingsFile: settingsFile.trim() || undefined,
+          availableModels,
+          tags,
        },
      };

@@ -198,6 +218,37 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
    }
  };

+  // Handle add model
+  const handleAddModel = () => {
+    const newModel = modelInput.trim();
+    if (newModel && !availableModels.includes(newModel)) {
+      setAvailableModels([...availableModels, newModel]);
+      setModelInput('');
+    }
+  };
+
+  // Handle remove model
+  const handleRemoveModel = (modelToRemove: string) => {
+    setAvailableModels(availableModels.filter((m) => m !== modelToRemove));
+  };
+
+  // Handle add tag
+  const handleAddTag = () => {
+    const newTag = tagInput.trim();
+    if (newTag && !tags.includes(newTag)) {
+      setTags([...tags, newTag]);
+      setTagInput('');
+    }
+  };
+
+  // Handle remove tag
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter((t) => t !== tagToRemove));
+  };
+
+  // Predefined tags
+  const predefinedTags = ['分析', 'Debug', 'implementation', 'refactoring', 'testing'];
+
  // Get selected provider info
  const selectedProvider = providers.find((p) => p.id === providerId);

@@ -387,15 +438,154 @@ export function CliSettingsModal({ open, onClose, cliSettings }: CliSettingsModa
          </Tabs>

          {/* Additional Settings (both modes) */}
-          <div className="flex items-center gap-2">
-            <Switch
-              id="coAuthored"
-              checked={includeCoAuthoredBy}
-              onCheckedChange={setIncludeCoAuthoredBy}
-            />
-            <Label htmlFor="coAuthored" className="cursor-pointer">
-              {formatMessage({ id: 'apiSettings.cliSettings.includeCoAuthoredBy' })}
-            </Label>
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Switch
+                id="coAuthored"
+                checked={includeCoAuthoredBy}
+                onCheckedChange={setIncludeCoAuthoredBy}
+              />
+              <Label htmlFor="coAuthored" className="cursor-pointer">
+                {formatMessage({ id: 'apiSettings.cliSettings.includeCoAuthoredBy' })}
+              </Label>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="settingsFile">
+                {formatMessage({ id: 'apiSettings.cliSettings.settingsFile' })}
+              </Label>
+              <Input
+                id="settingsFile"
+                value={settingsFile}
+                onChange={(e) => setSettingsFile(e.target.value)}
+                placeholder={formatMessage({ id: 'apiSettings.cliSettings.settingsFilePlaceholder' })}
+              />
+              <p className="text-xs text-muted-foreground">
+                {formatMessage({ id: 'apiSettings.cliSettings.settingsFileHint' })}
+              </p>
+            </div>
+
+            {/* Available Models Section */}
+            <div className="space-y-2">
+              <Label htmlFor="availableModels">
+                {formatMessage({ id: 'apiSettings.cliSettings.availableModels' })}
+              </Label>
+              <div className="flex flex-wrap gap-2 p-3 bg-muted/30 rounded-lg min-h-[60px]">
+                {availableModels.map((model) => (
+                  <span
+                    key={model}
+                    className="inline-flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm"
+                  >
+                    {model}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveModel(model)}
+                      className="hover:text-destructive transition-colors"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))}
+                <div className="flex gap-2 flex-1">
+                  <Input
+                    id="availableModels"
+                    value={modelInput}
+                    onChange={(e) => setModelInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleAddModel();
+                      }
+                    }}
+                    placeholder={formatMessage({ id: 'apiSettings.cliSettings.availableModelsPlaceholder' })}
+                    className="flex-1 min-w-[120px]"
+                  />
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={handleAddModel}
+                    variant="outline"
+                  >
+                    <Check className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {formatMessage({ id: 'apiSettings.cliSettings.availableModelsHint' })}
+              </p>
+            </div>
+
+            {/* Tags Section */}
+            <div className="space-y-2">
+              <Label htmlFor="tags">
+                {formatMessage({ id: 'apiSettings.cliSettings.tags' })}
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                {formatMessage({ id: 'apiSettings.cliSettings.tagsDescription' })}
+              </p>
+              <div className="flex flex-wrap gap-2 p-3 bg-muted/30 rounded-lg min-h-[60px]">
+                {tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm"
+                  >
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(tag)}
+                      className="hover:text-destructive transition-colors"
+                      aria-label={formatMessage({ id: 'apiSettings.cliSettings.removeTag' })}
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </span>
+                ))}
+                <div className="flex gap-2 flex-1">
+                  <Input
+                    id="tags"
+                    value={tagInput}
+                    onChange={(e) => setTagInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleAddTag();
+                      }
+                    }}
+                    placeholder={formatMessage({ id: 'apiSettings.cliSettings.tagInputPlaceholder' })}
+                    className="flex-1 min-w-[120px]"
+                  />
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={handleAddTag}
+                    variant="outline"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              {/* Predefined Tags */}
+              <div className="flex flex-wrap gap-1">
+                <span className="text-xs text-muted-foreground">
+                  {formatMessage({ id: 'apiSettings.cliSettings.predefinedTags' })}:
+                </span>
+                {predefinedTags.map((predefinedTag) => (
+                  <button
+                    key={predefinedTag}
+                    type="button"
+                    onClick={() => {
+                      if (!tags.includes(predefinedTag)) {
+                        setTags([...tags, predefinedTag]);
+                      }
+                    }}
+                    disabled={tags.includes(predefinedTag)}
+                    className="text-xs px-2 py-0.5 rounded border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    {predefinedTag}
+                  </button>
+                ))}
+              </div>
+            </div>
          </div>
        </div>

--- a/ccw/frontend/src/components/coordinator/CoordinatorInputModal.test.tsx
+++ b/ccw/frontend/src/components/coordinator/CoordinatorInputModal.test.tsx
@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { CoordinatorInputModal } from './CoordinatorInputModal';
+
+// Mock zustand stores
+vi.mock('@/stores/coordinatorStore', () => ({
+  useCoordinatorStore: () => ({
+    startCoordinator: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useNotifications', () => ({
+  useNotifications: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+// Mock fetch
+global.fetch = vi.fn();
+
+const mockMessages = {
+  'coordinator.modal.title': 'Start Coordinator',
+  'coordinator.modal.description': 'Describe the task',
+  'coordinator.form.taskDescription': 'Task Description',
+  'coordinator.form.taskDescriptionPlaceholder': 'Enter task description',
+  'coordinator.form.parameters': 'Parameters',
+  'coordinator.form.parametersPlaceholder': '{"key": "value"}',
+  'coordinator.form.parametersHelp': 'Optional JSON parameters',
+  'coordinator.form.characterCount': '{current} / {max} characters (min: {min})',
+  'coordinator.form.start': 'Start',
+  'coordinator.form.starting': 'Starting...',
+  'coordinator.validation.taskDescriptionRequired': 'Task description is required',
+  'coordinator.validation.taskDescriptionTooShort': 'Too short',
+  'coordinator.validation.taskDescriptionTooLong': 'Too long',
+  'coordinator.validation.parametersInvalidJson': 'Invalid JSON',
+  'common.actions.cancel': 'Cancel',
+};
+
+const renderWithIntl = (ui: React.ReactElement) => {
+  return render(
+    <IntlProvider locale="en" messages={mockMessages}>
+      {ui}
+    </IntlProvider>
+  );
+};
+
+describe('CoordinatorInputModal', () => {
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render when open', () => {
+    renderWithIntl(<CoordinatorInputModal open={true} onClose={mockOnClose} />);
+
+    expect(screen.getByText('Start Coordinator')).toBeInTheDocument();
+    expect(screen.getByText('Describe the task')).toBeInTheDocument();
+  });
+
+  it('should not render when closed', () => {
+    renderWithIntl(<CoordinatorInputModal open={false} onClose={mockOnClose} />);
+
+    expect(screen.queryByText('Start Coordinator')).not.toBeInTheDocument();
+  });
+
+  it('should show validation error for empty task description', async () => {
+    renderWithIntl(<CoordinatorInputModal open={true} onClose={mockOnClose} />);
+
+    const startButton = screen.getByText('Start');
+    fireEvent.click(startButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Task description is required')).toBeInTheDocument();
+    });
+  });
+
+  it('should show validation error for short task description', async () => {
+    renderWithIntl(<CoordinatorInputModal open={true} onClose={mockOnClose} />);
+
+    const textarea = screen.getByPlaceholderText('Enter task description');
+    fireEvent.change(textarea, { target: { value: 'Short' } });
+
+    const startButton = screen.getByText('Start');
+    fireEvent.click(startButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Too short')).toBeInTheDocument();
+    });
+  });
+
+  it('should show validation error for invalid JSON parameters', async () => {
+    renderWithIntl(<CoordinatorInputModal open={true} onClose={mockOnClose} />);
+
+    const textarea = screen.getByPlaceholderText('Enter task description');
+    fireEvent.change(textarea, { target: { value: 'Valid task description here' } });
+
+    const paramsInput = screen.getByPlaceholderText('{"key": "value"}');
+    fireEvent.change(paramsInput, { target: { value: 'invalid json' } });
+
+    const startButton = screen.getByText('Start');
+    fireEvent.click(startButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Invalid JSON')).toBeInTheDocument();
+    });
+  });
+
+  it('should submit with valid task description', async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true }),
+    });
+    global.fetch = mockFetch;
+
+    renderWithIntl(<CoordinatorInputModal open={true} onClose={mockOnClose} />);
+
+    const textarea = screen.getByPlaceholderText('Enter task description');
+    fireEvent.change(textarea, { target: { value: 'Valid task description with more than 10 characters' } });
+
+    const startButton = screen.getByText('Start');
+    fireEvent.click(startButton);
+
+    await waitFor(() => {
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/api/coordinator/start',
+        expect.objectContaining({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        })
+      );
+    });
+  });
+});
--- a/ccw/frontend/src/components/coordinator/CoordinatorInputModal.tsx
+++ b/ccw/frontend/src/components/coordinator/CoordinatorInputModal.tsx
@@ -0,0 +1,249 @@
+// ========================================
+// Coordinator Input Modal Component
+// ========================================
+// Modal dialog for starting coordinator execution with task description and parameters
+
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Loader2 } 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';
+
+// ========== Types ==========
+
+export interface CoordinatorInputModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface FormErrors {
+  taskDescription?: string;
+  parameters?: string;
+}
+
+// ========== Validation Helper ==========
+
+function validateForm(taskDescription: string, parameters: string): FormErrors {
+  const errors: FormErrors = {};
+
+  // Validate task description
+  if (!taskDescription.trim()) {
+    errors.taskDescription = 'coordinator.validation.taskDescriptionRequired';
+  } else {
+    const length = taskDescription.trim().length;
+    if (length < 10) {
+      errors.taskDescription = 'coordinator.validation.taskDescriptionTooShort';
+    } else if (length > 2000) {
+      errors.taskDescription = 'coordinator.validation.taskDescriptionTooLong';
+    }
+  }
+
+  // Validate parameters if provided
+  if (parameters.trim()) {
+    try {
+      JSON.parse(parameters.trim());
+    } catch (error) {
+      errors.parameters = 'coordinator.validation.parametersInvalidJson';
+    }
+  }
+
+  return errors;
+}
+
+// ========== Component ==========
+
+export function CoordinatorInputModal({ open, onClose }: CoordinatorInputModalProps) {
+  const { formatMessage } = useIntl();
+  const { success, error: showError } = useNotifications();
+  const { startCoordinator } = useCoordinatorStore();
+
+  // Form state
+  const [taskDescription, setTaskDescription] = useState('');
+  const [parameters, setParameters] = useState('');
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Reset form when modal opens/closes
+  useEffect(() => {
+    if (open) {
+      setTaskDescription('');
+      setParameters('');
+      setErrors({});
+    }
+  }, [open]);
+
+  // Handle field change
+  const handleFieldChange = (
+    field: 'taskDescription' | 'parameters',
+    value: string
+  ) => {
+    if (field === 'taskDescription') {
+      setTaskDescription(value);
+    } else {
+      setParameters(value);
+    }
+
+    // Clear error for this field when user starts typing
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  // Handle submit
+  const handleSubmit = async () => {
+    // Validate form
+    const validationErrors = validateForm(taskDescription, parameters);
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    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' },
+        body: JSON.stringify({
+          executionId,
+          taskDescription: taskDescription.trim(),
+          parameters: parsedParams,
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ message: 'Unknown error' }));
+        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' }));
+      onClose();
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      showError('Error', errorMessage);
+      console.error('Failed to start coordinator:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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>
+
+        <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>
+              )}
+            </div>
+            {errors.taskDescription && (
+              <p className="text-sm text-destructive">
+                {formatMessage({ id: errors.taskDescription })}
+              </p>
+            )}
+          </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>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={isSubmitting}
+          >
+            {formatMessage({ id: 'common.actions.cancel' })}
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                {formatMessage({ id: 'coordinator.form.starting' })}
+              </>
+            ) : (
+              formatMessage({ id: 'coordinator.form.start' })
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default CoordinatorInputModal;
--- a/ccw/frontend/src/components/coordinator/CoordinatorLogStream.tsx
+++ b/ccw/frontend/src/components/coordinator/CoordinatorLogStream.tsx
@@ -0,0 +1,196 @@
+// ========================================
+// Coordinator Log Stream Component
+// ========================================
+// Real-time log display with level filtering and auto-scroll
+
+import { useEffect, useRef, useState, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { FileText } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
+import { Label } from '@/components/ui/Label';
+import { useCoordinatorStore, type LogLevel, type CoordinatorLog } from '@/stores/coordinatorStore';
+import { cn } from '@/lib/utils';
+
+// ========== Types ==========
+
+export interface CoordinatorLogStreamProps {
+  maxHeight?: number;
+  autoScroll?: boolean;
+  showFilter?: boolean;
+}
+
+type LogLevelFilter = LogLevel | 'all';
+
+// ========== Component ==========
+
+export function CoordinatorLogStream({
+  maxHeight = 400,
+  autoScroll = true,
+  showFilter = true,
+}: CoordinatorLogStreamProps) {
+  const { formatMessage } = useIntl();
+  const { logs } = useCoordinatorStore();
+  const [levelFilter, setLevelFilter] = useState<LogLevelFilter>('all');
+  const logContainerRef = useRef<HTMLPreElement>(null);
+
+  // Filter logs by level
+  const filteredLogs = useMemo(() => {
+    if (levelFilter === 'all') {
+      return logs;
+    }
+    return logs.filter((log) => log.level === levelFilter);
+  }, [logs, levelFilter]);
+
+  // Auto-scroll to latest log
+  useEffect(() => {
+    if (autoScroll && logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  // Get log level color
+  const getLogLevelColor = (level: LogLevel): string => {
+    switch (level) {
+      case 'error':
+        return 'text-red-600';
+      case 'warn':
+        return 'text-yellow-600';
+      case 'success':
+        return 'text-green-600';
+      case 'debug':
+        return 'text-blue-600';
+      case 'info':
+      default:
+        return 'text-gray-600';
+    }
+  };
+
+  // Get log level background color
+  const getLogLevelBgColor = (level: LogLevel): string => {
+    switch (level) {
+      case 'error':
+        return 'bg-red-50';
+      case 'warn':
+        return 'bg-yellow-50';
+      case 'success':
+        return 'bg-green-50';
+      case 'debug':
+        return 'bg-blue-50';
+      case 'info':
+      default:
+        return 'bg-gray-50';
+    }
+  };
+
+  // Format log entry
+  const formatLogEntry = (log: CoordinatorLog): string => {
+    const timestamp = new Date(log.timestamp).toLocaleTimeString();
+    const levelLabel = `[${log.level.toUpperCase()}]`;
+    const source = log.source ? `[${log.source}]` : '';
+    return `${timestamp} ${levelLabel} ${source} ${log.message}`;
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            <CardTitle className="text-base">
+              {formatMessage({ id: 'coordinator.logs' })}
+            </CardTitle>
+            <span className="text-xs text-muted-foreground">
+              ({filteredLogs.length} {formatMessage({ id: 'coordinator.entries' })})
+            </span>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Level Filter */}
+        {showFilter && (
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">
+              {formatMessage({ id: 'coordinator.logLevel' })}
+            </Label>
+            <RadioGroup
+              value={levelFilter}
+              onValueChange={(value) => setLevelFilter(value as LogLevelFilter)}
+              className="flex flex-wrap gap-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="all" id="level-all" />
+                <Label htmlFor="level-all" className="cursor-pointer">
+                  {formatMessage({ id: 'coordinator.level.all' })}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="info" id="level-info" />
+                <Label htmlFor="level-info" className="cursor-pointer text-gray-600">
+                  {formatMessage({ id: 'coordinator.level.info' })}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="warn" id="level-warn" />
+                <Label htmlFor="level-warn" className="cursor-pointer text-yellow-600">
+                  {formatMessage({ id: 'coordinator.level.warn' })}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="error" id="level-error" />
+                <Label htmlFor="level-error" className="cursor-pointer text-red-600">
+                  {formatMessage({ id: 'coordinator.level.error' })}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="debug" id="level-debug" />
+                <Label htmlFor="level-debug" className="cursor-pointer text-blue-600">
+                  {formatMessage({ id: 'coordinator.level.debug' })}
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+        )}
+
+        {/* Log Display */}
+        <div className="space-y-2">
+          {filteredLogs.length === 0 ? (
+            <div className="flex items-center justify-center p-8 text-muted-foreground text-sm">
+              {formatMessage({ id: 'coordinator.noLogs' })}
+            </div>
+          ) : (
+            <pre
+              ref={logContainerRef}
+              className={cn(
+                'w-full p-3 bg-muted rounded-lg text-xs overflow-y-auto whitespace-pre-wrap break-words font-mono'
+              )}
+              style={{ maxHeight: `${maxHeight}px` }}
+            >
+              {filteredLogs.map((log) => (
+                <div
+                  key={log.id}
+                  className={cn(
+                    'py-1 px-2 mb-1 rounded',
+                    getLogLevelBgColor(log.level)
+                  )}
+                >
+                  <span className={getLogLevelColor(log.level)}>
+                    {formatLogEntry(log)}
+                  </span>
+                </div>
+              ))}
+            </pre>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default CoordinatorLogStream;
--- a/ccw/frontend/src/components/coordinator/CoordinatorQuestionModal.tsx
+++ b/ccw/frontend/src/components/coordinator/CoordinatorQuestionModal.tsx
@@ -0,0 +1,289 @@
+// ========================================
+// Coordinator Question Modal Component
+// ========================================
+// Interactive question dialog for coordinator execution
+
+import { useState, useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { Loader2, AlertCircle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/Dialog';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Label } from '@/components/ui/Label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup';
+import { useCoordinatorStore, type CoordinatorQuestion } from '@/stores/coordinatorStore';
+
+// ========== Types ==========
+
+export interface CoordinatorQuestionModalProps {
+  question: CoordinatorQuestion | null;
+  onSubmit?: (questionId: string, answer: string | string[]) => void;
+}
+
+// ========== Component ==========
+
+export function CoordinatorQuestionModal({
+  question,
+  onSubmit,
+}: CoordinatorQuestionModalProps) {
+  const { formatMessage } = useIntl();
+  const { submitAnswer } = useCoordinatorStore();
+  const [answer, setAnswer] = useState<string | string[]>('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Reset state when question changes
+  useEffect(() => {
+    if (question) {
+      setAnswer(question.type === 'multi' ? [] : '');
+      setError(null);
+      // Auto-focus on input when modal opens
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [question]);
+
+  // Validate answer
+  const validateAnswer = (): boolean => {
+    if (!question) return false;
+
+    if (question.required) {
+      if (question.type === 'multi') {
+        if (!Array.isArray(answer) || answer.length === 0) {
+          setError(formatMessage({ id: 'coordinator.validation.answerRequired' }));
+          return false;
+        }
+      } else {
+        if (!answer || (typeof answer === 'string' && !answer.trim())) {
+          setError(formatMessage({ id: 'coordinator.validation.answerRequired' }));
+          return false;
+        }
+      }
+    }
+
+    return true;
+  };
+
+  // Handle submit
+  const handleSubmit = async () => {
+    if (!question) return;
+
+    if (!validateAnswer()) return;
+
+    setIsSubmitting(true);
+    try {
+      const finalAnswer = typeof answer === 'string' ? answer.trim() : answer;
+
+      // Call store action
+      await submitAnswer(question.id, finalAnswer);
+
+      // Call optional callback
+      onSubmit?.(question.id, finalAnswer);
+
+      setError(null);
+    } catch (error) {
+      console.error('Failed to submit answer:', error);
+      setError(
+        error instanceof Error
+          ? error.message
+          : formatMessage({ id: 'coordinator.error.submitFailed' })
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle Enter key
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey && question?.type === 'text') {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  // Handle multi-select change
+  const handleMultiSelectChange = (option: string, checked: boolean) => {
+    if (!Array.isArray(answer)) {
+      setAnswer([]);
+      return;
+    }
+
+    if (checked) {
+      setAnswer([...answer, option]);
+    } else {
+      setAnswer(answer.filter((a) => a !== option));
+    }
+    setError(null);
+  };
+
+  if (!question) {
+    return null;
+  }
+
+  return (
+    <Dialog open={!!question} onOpenChange={() => {/* Prevent manual close */}}>
+      <DialogContent
+        className="sm:max-w-[500px]"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>{question.title}</DialogTitle>
+          {question.description && (
+            <DialogDescription>{question.description}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Text Input */}
+          {question.type === 'text' && (
+            <div className="space-y-2">
+              <Label htmlFor="text-answer">
+                {formatMessage({ id: 'coordinator.question.answer' })}
+                {question.required && <span className="text-destructive">*</span>}
+              </Label>
+              <Input
+                id="text-answer"
+                ref={inputRef}
+                value={typeof answer === 'string' ? answer : ''}
+                onChange={(e) => {
+                  setAnswer(e.target.value);
+                  setError(null);
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder={formatMessage({ id: 'coordinator.question.textPlaceholder' })}
+                disabled={isSubmitting}
+              />
+            </div>
+          )}
+
+          {/* Single Select (RadioGroup) */}
+          {question.type === 'single' && question.options && (
+            <div className="space-y-2">
+              <Label>
+                {formatMessage({ id: 'coordinator.question.selectOne' })}
+                {question.required && <span className="text-destructive">*</span>}
+              </Label>
+              <RadioGroup
+                value={typeof answer === 'string' ? answer : ''}
+                onValueChange={(value) => {
+                  setAnswer(value);
+                  setError(null);
+                }}
+                disabled={isSubmitting}
+              >
+                {question.options.map((option) => (
+                  <div key={option} className="flex items-center space-x-2">
+                    <RadioGroupItem value={option} id={`option-${option}`} />
+                    <Label htmlFor={`option-${option}`} className="cursor-pointer">
+                      {option}
+                    </Label>
+                  </div>
+                ))}
+              </RadioGroup>
+            </div>
+          )}
+
+          {/* Multi Select (Checkboxes) */}
+          {question.type === 'multi' && question.options && (
+            <div className="space-y-2">
+              <Label>
+                {formatMessage({ id: 'coordinator.question.selectMultiple' })}
+                {question.required && <span className="text-destructive">*</span>}
+              </Label>
+              <div className="space-y-2">
+                {question.options.map((option) => {
+                  const isChecked = Array.isArray(answer) && answer.includes(option);
+                  return (
+                    <div key={option} className="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        id={`multi-${option}`}
+                        checked={isChecked}
+                        onChange={(e) => handleMultiSelectChange(option, e.target.checked)}
+                        disabled={isSubmitting}
+                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                      />
+                      <Label htmlFor={`multi-${option}`} className="cursor-pointer">
+                        {option}
+                      </Label>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Yes/No Buttons */}
+          {question.type === 'yes_no' && (
+            <div className="space-y-2">
+              <Label>
+                {formatMessage({ id: 'coordinator.question.confirm' })}
+                {question.required && <span className="text-destructive">*</span>}
+              </Label>
+              <div className="flex gap-2">
+                <Button
+                  variant={answer === 'yes' ? 'default' : 'outline'}
+                  onClick={() => {
+                    setAnswer('yes');
+                    setError(null);
+                  }}
+                  disabled={isSubmitting}
+                  className="flex-1"
+                >
+                  {formatMessage({ id: 'coordinator.question.yes' })}
+                </Button>
+                <Button
+                  variant={answer === 'no' ? 'default' : 'outline'}
+                  onClick={() => {
+                    setAnswer('no');
+                    setError(null);
+                  }}
+                  disabled={isSubmitting}
+                  className="flex-1"
+                >
+                  {formatMessage({ id: 'coordinator.question.no' })}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Error Display */}
+          {error && (
+            <div className="flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">
+              <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                {formatMessage({ id: 'coordinator.question.submitting' })}
+              </>
+            ) : (
+              formatMessage({ id: 'coordinator.question.submit' })
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default CoordinatorQuestionModal;
--- a/ccw/frontend/src/components/coordinator/CoordinatorTimeline.tsx
+++ b/ccw/frontend/src/components/coordinator/CoordinatorTimeline.tsx
@@ -0,0 +1,116 @@
+// ========================================
+// CoordinatorTimeline Component
+// ========================================
+// Main horizontal timeline container for coordinator pipeline visualization
+
+import { useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { useCoordinatorStore, selectCommandChain, selectCurrentNode } from '@/stores/coordinatorStore';
+import { TimelineNode } from './TimelineNode';
+import { NodeConnector } from './NodeConnector';
+
+export interface CoordinatorTimelineProps {
+  className?: string;
+  autoScroll?: boolean;
+  onNodeClick?: (nodeId: string) => void;
+}
+
+/**
+ * Horizontal scrolling timeline displaying the coordinator command chain
+ * with connectors between nodes
+ */
+export function CoordinatorTimeline({
+  className,
+  autoScroll = true,
+  onNodeClick,
+}: CoordinatorTimelineProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Store selectors
+  const commandChain = useCoordinatorStore(selectCommandChain);
+  const currentNode = useCoordinatorStore(selectCurrentNode);
+
+  // Auto-scroll to the current/latest node
+  useEffect(() => {
+    if (!autoScroll || !scrollContainerRef.current) return;
+
+    // Find the active or latest node
+    const activeNodeIndex = commandChain.findIndex(
+      (node) => node.status === 'running' || node.id === currentNode?.id
+    );
+
+    // If no active node, scroll to the end
+    if (activeNodeIndex === -1) {
+      scrollContainerRef.current.scrollTo({
+        left: scrollContainerRef.current.scrollWidth,
+        behavior: 'smooth',
+      });
+      return;
+    }
+
+    // Scroll the active node into view
+    const nodeElements = scrollContainerRef.current.querySelectorAll('[data-node-id]');
+    const activeElement = nodeElements[activeNodeIndex] as HTMLElement;
+
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      });
+    }
+  }, [commandChain, currentNode?.id, autoScroll]);
+
+  // Handle node click
+  const handleNodeClick = (nodeId: string) => {
+    if (onNodeClick) {
+      onNodeClick(nodeId);
+    }
+  };
+
+  // Render empty state
+  if (commandChain.length === 0) {
+    return (
+      <div className={cn('flex items-center justify-center p-8 text-muted-foreground', className)}>
+        <div className="text-center">
+          <p className="text-sm">No pipeline nodes to display</p>
+          <p className="text-xs mt-1">Start a coordinator execution to see the pipeline</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className={cn(
+        'flex items-center gap-0 p-4 overflow-x-auto overflow-y-hidden',
+        'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent',
+        className
+      )}
+      role="region"
+      aria-label="Coordinator pipeline timeline"
+    >
+      {commandChain.map((node, index) => (
+        <div key={node.id} className="flex items-center" data-node-id={node.id}>
+          {/* Timeline node */}
+          <TimelineNode
+            node={node}
+            isActive={currentNode?.id === node.id}
+            onClick={() => handleNodeClick(node.id)}
+          />
+
+          {/* Connector to next node (if not last) */}
+          {index < commandChain.length - 1 && (
+            <NodeConnector
+              status={commandChain[index + 1].status}
+              className="mx-2"
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default CoordinatorTimeline;
--- a/ccw/frontend/src/components/coordinator/NodeConnector.tsx
+++ b/ccw/frontend/src/components/coordinator/NodeConnector.tsx
@@ -0,0 +1,49 @@
+// ========================================
+// NodeConnector Component
+// ========================================
+// Visual connector line between pipeline nodes with status-based styling
+
+import { cn } from '@/lib/utils';
+import type { NodeExecutionStatus } from '@/stores/coordinatorStore';
+
+export interface NodeConnectorProps {
+  status: NodeExecutionStatus;
+  className?: string;
+}
+
+/**
+ * Connector line between timeline nodes
+ * Changes color based on the status of the connected node
+ */
+export function NodeConnector({ status, className }: NodeConnectorProps) {
+  // Determine connector color and animation based on status
+  const getConnectorStyle = () => {
+    switch (status) {
+      case 'completed':
+        return 'bg-gradient-to-r from-green-500 to-green-400';
+      case 'failed':
+        return 'bg-gradient-to-r from-red-500 to-red-400';
+      case 'running':
+        return 'bg-gradient-to-r from-blue-500 to-blue-400 animate-pulse';
+      case 'pending':
+        return 'bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-600';
+      case 'skipped':
+        return 'bg-gradient-to-r from-yellow-400 to-yellow-300';
+      default:
+        return 'bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-600';
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-16 h-1 shrink-0 transition-all duration-300',
+        getConnectorStyle(),
+        className
+      )}
+      aria-hidden="true"
+    />
+  );
+}
+
+export default NodeConnector;
--- a/ccw/frontend/src/components/coordinator/NodeDetailsPanel.tsx
+++ b/ccw/frontend/src/components/coordinator/NodeDetailsPanel.tsx
@@ -0,0 +1,254 @@
+// ========================================
+// Node Details Panel Component
+// ========================================
+// Expandable panel showing node logs, error information, and retry/skip actions
+
+import { useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Loader2, RotateCcw, SkipForward, ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { useCoordinatorStore, type CommandNode } from '@/stores/coordinatorStore';
+import { cn } from '@/lib/utils';
+
+// ========== Types ==========
+
+export interface NodeDetailsPanelProps {
+  node: CommandNode;
+  isExpanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+}
+
+// ========== Component ==========
+
+export function NodeDetailsPanel({
+  node,
+  isExpanded = true,
+  onToggle,
+}: NodeDetailsPanelProps) {
+  const { formatMessage } = useIntl();
+  const { retryNode, skipNode, logs } = useCoordinatorStore();
+  const [expanded, setExpanded] = useState(isExpanded);
+  const [isLoading, setIsLoading] = useState(false);
+  const logScrollRef = useRef<HTMLPreElement>(null);
+
+  // Filter logs for this node
+  const nodeLogs = logs.filter((log) => log.nodeId === node.id);
+
+  // Auto-scroll to latest log
+  useEffect(() => {
+    if (expanded && logScrollRef.current) {
+      logScrollRef.current.scrollTop = logScrollRef.current.scrollHeight;
+    }
+  }, [expanded, nodeLogs]);
+
+  // Handle expand/collapse
+  const handleToggle = () => {
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
+    onToggle?.(newExpanded);
+  };
+
+  // Handle retry
+  const handleRetry = async () => {
+    setIsLoading(true);
+    try {
+      await retryNode(node.id);
+    } catch (error) {
+      console.error('Failed to retry node:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle skip
+  const handleSkip = async () => {
+    setIsLoading(true);
+    try {
+      await skipNode(node.id);
+    } catch (error) {
+      console.error('Failed to skip node:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Get status color
+  const getStatusColor = (status: string): string => {
+    switch (status) {
+      case 'completed':
+        return 'text-green-600';
+      case 'failed':
+        return 'text-red-600';
+      case 'running':
+        return 'text-blue-600';
+      case 'skipped':
+        return 'text-yellow-600';
+      default:
+        return 'text-gray-600';
+    }
+  };
+
+  // Get status label
+  const getStatusLabel = (status: string): string => {
+    const labels: Record<string, string> = {
+      pending: 'coordinator.status.pending',
+      running: 'coordinator.status.running',
+      completed: 'coordinator.status.completed',
+      failed: 'coordinator.status.failed',
+      skipped: 'coordinator.status.skipped',
+    };
+    return labels[status] || status;
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="cursor-pointer" onClick={handleToggle}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 flex-1">
+            <button
+              className="inline-flex items-center justify-center"
+              onClick={handleToggle}
+              aria-expanded={expanded}
+            >
+              {expanded ? (
+                <ChevronUp className="w-4 h-4" />
+              ) : (
+                <ChevronDown className="w-4 h-4" />
+              )}
+            </button>
+            <CardTitle className="text-lg">
+              {node.name}
+            </CardTitle>
+            <span className={cn('text-sm font-medium', getStatusColor(node.status))}>
+              {formatMessage({ id: getStatusLabel(node.status) })}
+            </span>
+          </div>
+        </div>
+        {node.description && (
+          <p className="text-sm text-muted-foreground mt-2">{node.description}</p>
+        )}
+      </CardHeader>
+
+      {expanded && (
+        <CardContent className="space-y-4">
+          {/* Logs Section */}
+          {nodeLogs.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold">
+                {formatMessage({ id: 'coordinator.logs' })}
+              </h4>
+              <pre
+                ref={logScrollRef}
+                className="w-full p-3 bg-muted rounded-lg text-xs overflow-y-auto max-h-[200px] whitespace-pre-wrap break-words font-mono"
+              >
+                {nodeLogs
+                  .map((log) => {
+                    const timestamp = new Date(log.timestamp).toLocaleTimeString();
+                    const levelLabel = `[${log.level.toUpperCase()}]`;
+                    return `${timestamp} ${levelLabel} ${log.message}`;
+                  })
+                  .join('\n')}
+              </pre>
+            </div>
+          )}
+
+          {/* Error Information */}
+          {node.error && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold text-red-600">
+                {formatMessage({ id: 'coordinator.error' })}
+              </h4>
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-xs text-red-800">
+                {node.error}
+              </div>
+            </div>
+          )}
+
+          {/* Output Section */}
+          {node.output && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-semibold">
+                {formatMessage({ id: 'coordinator.output' })}
+              </h4>
+              <pre className="w-full p-3 bg-muted rounded-lg text-xs overflow-y-auto max-h-[150px] whitespace-pre-wrap break-words font-mono">
+                {node.output}
+              </pre>
+            </div>
+          )}
+
+          {/* Node Information */}
+          <div className="grid grid-cols-2 gap-2 text-xs">
+            {node.startedAt && (
+              <div>
+                <span className="font-semibold text-muted-foreground">
+                  {formatMessage({ id: 'coordinator.startedAt' })}:
+                </span>
+                <p>{new Date(node.startedAt).toLocaleString()}</p>
+              </div>
+            )}
+            {node.completedAt && (
+              <div>
+                <span className="font-semibold text-muted-foreground">
+                  {formatMessage({ id: 'coordinator.completedAt' })}:
+                </span>
+                <p>{new Date(node.completedAt).toLocaleString()}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          {node.status === 'failed' && (
+            <div className="flex gap-2 pt-4 border-t">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleRetry}
+                disabled={isLoading}
+                className="flex-1"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-3 h-3 mr-2 animate-spin" />
+                    {formatMessage({ id: 'coordinator.retrying' })}
+                  </>
+                ) : (
+                  <>
+                    <RotateCcw className="w-3 h-3 mr-2" />
+                    {formatMessage({ id: 'coordinator.retry' })}
+                  </>
+                )}
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleSkip}
+                disabled={isLoading}
+                className="flex-1"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-3 h-3 mr-2 animate-spin" />
+                    {formatMessage({ id: 'coordinator.skipping' })}
+                  </>
+                ) : (
+                  <>
+                    <SkipForward className="w-3 h-3 mr-2" />
+                    {formatMessage({ id: 'coordinator.skip' })}
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+export default NodeDetailsPanel;
--- a/ccw/frontend/src/components/coordinator/README.md
+++ b/ccw/frontend/src/components/coordinator/README.md
@@ -0,0 +1,279 @@
+# Coordinator Components
+
+## CoordinatorInputModal
+
+Modal dialog for starting coordinator execution with task description and optional JSON parameters.
+
+### Usage
+
+```tsx
+import { CoordinatorInputModal } from '@/components/coordinator';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>
+        Start Coordinator
+      </Button>
+
+      <CoordinatorInputModal
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </>
+  );
+}
+```
+
+### Features
+
+- **Task Description**: Required text area (10-2000 characters)
+- **Parameters**: Optional JSON input
+- **Validation**: Real-time validation for description length and JSON format
+- **Loading State**: Displays loading indicator during submission
+- **Error Handling**: Shows appropriate error messages
+- **Internationalization**: Full i18n support (English/Chinese)
+- **Notifications**: Success/error toasts via useNotifications hook
+
+### API Integration
+
+The component integrates with:
+- **POST /api/coordinator/start**: Starts coordinator execution
+- **coordinatorStore**: Updates Zustand store state
+- **notificationStore**: Shows success/error notifications
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `open` | `boolean` | Yes | Controls modal visibility |
+| `onClose` | `() => void` | Yes | Callback when modal closes |
+
+### Validation Rules
+
+- **Task Description**:
+  - Minimum length: 10 characters
+  - Maximum length: 2000 characters
+  - Required field
+
+- **Parameters**:
+  - Optional field
+  - Must be valid JSON if provided
+
+### Example Payload
+
+```json
+{
+  "executionId": "exec-1738477200000-abc123def",
+  "taskDescription": "Implement user authentication with JWT tokens",
+  "parameters": {
+    "timeout": 3600,
+    "priority": "high"
+  }
+}
+```
+
+---
+
+## Pipeline Timeline View Components
+
+Horizontal scrolling timeline visualization for coordinator command pipeline execution.
+
+### CoordinatorTimeline
+
+Main timeline container that displays the command chain with auto-scrolling to active nodes.
+
+#### Usage
+
+```tsx
+import { CoordinatorTimeline } from '@/components/coordinator';
+
+function MyComponent() {
+  const handleNodeClick = (nodeId: string) => {
+    console.log('Node clicked:', nodeId);
+  };
+
+  return (
+    <CoordinatorTimeline
+      autoScroll={true}
+      onNodeClick={handleNodeClick}
+    />
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `className` | `string` | No | - | Additional CSS classes |
+| `autoScroll` | `boolean` | No | `true` | Auto-scroll to active/latest node |
+| `onNodeClick` | `(nodeId: string) => void` | No | - | Callback when node is clicked |
+
+#### Features
+
+- **Horizontal Scrolling**: Smooth horizontal scroll with mouse wheel
+- **Auto-scroll**: Automatically scrolls to the active or latest node
+- **Empty State**: Shows helpful message when no nodes are present
+- **Store Integration**: Uses `useCoordinatorStore` for state management
+
+---
+
+### TimelineNode
+
+Individual node card displaying node status, timing, and expandable details.
+
+#### Usage
+
+```tsx
+import { TimelineNode } from '@/components/coordinator';
+import type { CommandNode } from '@/stores/coordinatorStore';
+
+function MyComponent({ node }: { node: CommandNode }) {
+  return (
+    <TimelineNode
+      node={node}
+      isActive={true}
+      onClick={() => console.log('Clicked:', node.id)}
+    />
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `node` | `CommandNode` | Yes | Node data from coordinator store |
+| `isActive` | `boolean` | No | Whether this node is currently active |
+| `onClick` | `() => void` | No | Callback when node is clicked |
+| `className` | `string` | No | Additional CSS classes |
+
+#### Features
+
+- **Status Indicators**:
+  - `completed`: Green checkmark icon
+  - `failed`: Red X icon
+  - `running`: Blue spinning loader
+  - `pending`: Gray clock icon
+  - `skipped`: Yellow X icon
+
+- **Status Badges**:
+  - Success (green)
+  - Failed (red)
+  - Running (blue)
+  - Pending (gray outline)
+  - Skipped (yellow)
+
+- **Expandable Details**:
+  - Error messages (red background)
+  - Output text (scrollable pre)
+  - Result JSON (formatted and scrollable)
+
+- **Timing Information**:
+  - Start time
+  - Completion time
+  - Duration calculation
+
+- **Animations**:
+  - Hover scale effect (scale-105)
+  - Smooth transitions (300ms)
+  - Active ring (ring-2 ring-primary)
+
+---
+
+### NodeConnector
+
+Visual connector line between timeline nodes with status-based styling.
+
+#### Usage
+
+```tsx
+import { NodeConnector } from '@/components/coordinator';
+
+function MyComponent() {
+  return (
+    <div className="flex items-center">
+      <TimelineNode node={node1} />
+      <NodeConnector status="completed" />
+      <TimelineNode node={node2} />
+    </div>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `status` | `NodeExecutionStatus` | Yes | Status of the connected node |
+| `className` | `string` | No | Additional CSS classes |
+
+#### Status Colors
+
+| Status | Color | Animation |
+|--------|-------|-----------|
+| `completed` | Green gradient | None |
+| `failed` | Red gradient | None |
+| `running` | Blue gradient | Pulse animation |
+| `pending` | Gray gradient | None |
+| `skipped` | Yellow gradient | None |
+
+---
+
+## Complete Example
+
+```tsx
+import { useState } from 'react';
+import {
+  CoordinatorInputModal,
+  CoordinatorTimeline,
+} from '@/components/coordinator';
+import { Button } from '@/components/ui/Button';
+
+function CoordinatorDashboard() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleNodeClick = (nodeId: string) => {
+    console.log('Node clicked:', nodeId);
+    // Show node details panel, etc.
+  };
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Header */}
+      <header className="border-b border-border p-4">
+        <Button onClick={() => setIsModalOpen(true)}>
+          New Execution
+        </Button>
+      </header>
+
+      {/* Timeline */}
+      <div className="flex-1 overflow-hidden">
+        <CoordinatorTimeline
+          autoScroll={true}
+          onNodeClick={handleNodeClick}
+        />
+      </div>
+
+      {/* Input Modal */}
+      <CoordinatorInputModal
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </div>
+  );
+}
+```
+
+## Design Principles
+
+- **Responsive**: Works on mobile and desktop
+- **Dark Mode**: Full dark mode support via Tailwind CSS
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **Performance**: Smooth 60fps animations
+- **Mobile-first**: Touch-friendly interactions
+
--- a/ccw/frontend/src/components/coordinator/TimelineNode.tsx
+++ b/ccw/frontend/src/components/coordinator/TimelineNode.tsx
@@ -0,0 +1,213 @@
+// ========================================
+// TimelineNode Component
+// ========================================
+// Individual node card in the coordinator pipeline timeline
+
+import { useState } from 'react';
+import { CheckCircle, XCircle, Loader2, ChevronDown, ChevronUp, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import type { CommandNode } from '@/stores/coordinatorStore';
+
+export interface TimelineNodeProps {
+  node: CommandNode;
+  isActive?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+/**
+ * Individual timeline node card with status indicator and expandable details
+ */
+export function TimelineNode({ node, isActive = false, onClick, className }: TimelineNodeProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Get status icon
+  const getStatusIcon = () => {
+    const iconClassName = 'h-5 w-5 shrink-0';
+    switch (node.status) {
+      case 'completed':
+        return <CheckCircle className={cn(iconClassName, 'text-green-500')} />;
+      case 'failed':
+        return <XCircle className={cn(iconClassName, 'text-red-500')} />;
+      case 'running':
+        return <Loader2 className={cn(iconClassName, 'text-blue-500 animate-spin')} />;
+      case 'skipped':
+        return <XCircle className={cn(iconClassName, 'text-yellow-500')} />;
+      case 'pending':
+      default:
+        return <Clock className={cn(iconClassName, 'text-gray-400')} />;
+    }
+  };
+
+  // Get status badge variant
+  const getStatusBadge = () => {
+    switch (node.status) {
+      case 'completed':
+        return <Badge variant="success">Success</Badge>;
+      case 'failed':
+        return <Badge variant="destructive">Failed</Badge>;
+      case 'running':
+        return <Badge variant="info">Running</Badge>;
+      case 'skipped':
+        return <Badge variant="warning">Skipped</Badge>;
+      case 'pending':
+      default:
+        return <Badge variant="outline">Pending</Badge>;
+    }
+  };
+
+  // Format timestamp
+  const formatTime = (timestamp?: string) => {
+    if (!timestamp) return 'N/A';
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  // Calculate duration
+  const getDuration = () => {
+    if (!node.startedAt || !node.completedAt) return null;
+    const start = new Date(node.startedAt).getTime();
+    const end = new Date(node.completedAt).getTime();
+    const durationMs = end - start;
+
+    if (durationMs < 1000) return `${durationMs}ms`;
+    const seconds = Math.floor(durationMs / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+
+  const handleToggleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
+
+  const hasDetails = Boolean(node.output || node.error || node.result);
+
+  return (
+    <Card
+      className={cn(
+        'w-64 shrink-0 cursor-pointer transition-all duration-300',
+        'hover:shadow-lg hover:scale-105',
+        isActive && 'ring-2 ring-primary',
+        isExpanded && 'w-80',
+        className
+      )}
+      onClick={onClick}
+    >
+      <CardHeader className="p-4 pb-2">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            {getStatusIcon()}
+            <div className="flex-1 min-w-0">
+              <h4 className="text-sm font-semibold text-foreground truncate" title={node.name}>
+                {node.name}
+              </h4>
+              {node.description && (
+                <p className="text-xs text-muted-foreground truncate mt-0.5" title={node.description}>
+                  {node.description}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="shrink-0">
+            {getStatusBadge()}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-4 pt-0">
+        {/* Timing information */}
+        {(node.startedAt || node.completedAt) && (
+          <div className="text-xs text-muted-foreground space-y-0.5 mb-2">
+            {node.startedAt && (
+              <div>Started: {formatTime(node.startedAt)}</div>
+            )}
+            {node.completedAt && (
+              <div>Completed: {formatTime(node.completedAt)}</div>
+            )}
+            {getDuration() && (
+              <div className="font-medium">Duration: {getDuration()}</div>
+            )}
+          </div>
+        )}
+
+        {/* Expand/collapse toggle for details */}
+        {hasDetails && (
+          <>
+            <button
+              onClick={handleToggleExpand}
+              className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors w-full"
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="h-3 w-3" />
+                  Hide details
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-3 w-3" />
+                  Show details
+                </>
+              )}
+            </button>
+
+            {/* Expanded details panel */}
+            {isExpanded && (
+              <div className="mt-2 space-y-2">
+                {/* Error message */}
+                {node.error && (
+                  <div className="p-2 rounded-md bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800">
+                    <div className="text-xs font-semibold text-red-700 dark:text-red-400 mb-1">
+                      Error:
+                    </div>
+                    <div className="text-xs text-red-600 dark:text-red-300 break-words">
+                      {node.error}
+                    </div>
+                  </div>
+                )}
+
+                {/* Output */}
+                {Boolean(node.output) && (
+                  <div className="p-2 rounded-md bg-muted/50 border border-border">
+                    <div className="text-xs font-semibold text-foreground mb-1">
+                      Output:
+                    </div>
+                    <pre className="text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-32 overflow-y-auto">
+                      {String(node.output)}
+                    </pre>
+                  </div>
+                )}
+
+                {/* Result */}
+                {Boolean(node.result) && (
+                  <div className="p-2 rounded-md bg-muted/50 border border-border">
+                    <div className="text-xs font-semibold text-foreground mb-1">
+                      Result:
+                    </div>
+                    <pre className="text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-32 overflow-y-auto">
+                      {typeof node.result === 'object' && node.result !== null
+                        ? JSON.stringify(node.result, null, 2)
+                        : String(node.result)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Command information */}
+        {node.command && !isExpanded && (
+          <div className="mt-2 text-xs text-muted-foreground truncate" title={node.command}>
+            <span className="font-mono">{node.command}</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default TimelineNode;
--- a/ccw/frontend/src/components/coordinator/index.ts
+++ b/ccw/frontend/src/components/coordinator/index.ts
@@ -0,0 +1,23 @@
+// Coordinator components
+export { CoordinatorInputModal } from './CoordinatorInputModal';
+export type { CoordinatorInputModalProps } from './CoordinatorInputModal';
+
+// Timeline visualization components
+export { CoordinatorTimeline } from './CoordinatorTimeline';
+export type { CoordinatorTimelineProps } from './CoordinatorTimeline';
+
+export { TimelineNode } from './TimelineNode';
+export type { TimelineNodeProps } from './TimelineNode';
+
+export { NodeConnector } from './NodeConnector';
+export type { NodeConnectorProps } from './NodeConnector';
+
+// Node interaction components
+export { NodeDetailsPanel } from './NodeDetailsPanel';
+export type { NodeDetailsPanelProps } from './NodeDetailsPanel';
+
+export { CoordinatorLogStream } from './CoordinatorLogStream';
+export type { CoordinatorLogStreamProps } from './CoordinatorLogStream';
+
+export { CoordinatorQuestionModal } from './CoordinatorQuestionModal';
+export type { CoordinatorQuestionModalProps } from './CoordinatorQuestionModal';
--- a/ccw/frontend/src/components/layout/Header.tsx
+++ b/ccw/frontend/src/components/layout/Header.tsx
@@ -121,7 +121,7 @@ export function Header({
        >
          <Bell className="w-5 h-5" />
          {unreadCount > 0 && (
-            <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] text-destructive-foreground flex items-center justify-center font-medium">
+            <span className="absolute -top-1 -right-1 min-h-4 min-w-4 px-1 rounded-full bg-destructive text-[10px] text-destructive-foreground flex items-center justify-center font-medium">
              {unreadCount > 9 ? '9+' : unreadCount}
            </span>
          )}
--- a/ccw/frontend/src/components/layout/Sidebar.tsx
+++ b/ccw/frontend/src/components/layout/Sidebar.tsx
@@ -1,10 +1,9 @@
 // ========================================
 // Sidebar Component
 // ========================================
-// Collapsible navigation sidebar with route links
+// Collapsible navigation sidebar with 6-group accordion structure

-import { useState, useCallback, useMemo } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import {
  Home,
@@ -12,8 +11,6 @@ import {
  Workflow,
  RefreshCw,
  AlertCircle,
-  ListTodo,
-  Search,
  Sparkles,
  Terminal,
  Brain,
@@ -28,9 +25,15 @@ import {
  Shield,
  History,
  Server,
+  Layers,
+  Wrench,
+  Cog,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
+import { Accordion } from '@/components/ui/Accordion';
+import { NavGroup, type NavItem } from '@/components/shared/NavGroup';
+import { useAppStore } from '@/stores/appStore';

 export interface SidebarProps {
  /** Whether sidebar is collapsed */
@@ -43,34 +46,82 @@ export interface SidebarProps {
  onMobileClose?: () => void;
 }

-interface NavItem {
-  path: string;
-  label: string;
-  icon: React.ElementType;
-  badge?: number | string;
-  badgeVariant?: 'default' | 'success' | 'warning' | 'info';
+// Navigation group definitions
+interface NavGroupDef {
+  id: string;
+  titleKey: string;
+  icon?: React.ElementType;
+  items: Array<{
+    path: string;
+    labelKey: string;
+    icon: React.ElementType;
+    badge?: number | string;
+    badgeVariant?: 'default' | 'success' | 'warning' | 'info';
+  }>;
 }

-// Navigation item definitions (without labels for i18n)
-const navItemDefinitions: Omit<NavItem, 'label'>[] = [
-  { path: '/', icon: Home },
-  { path: '/sessions', icon: FolderKanban },
-  { path: '/lite-tasks', icon: Zap },
-  { path: '/project', icon: LayoutDashboard },
-  { path: '/history', icon: Clock },
-  { path: '/orchestrator', icon: Workflow },
-  { path: '/loops', icon: RefreshCw },
-  { path: '/issues', icon: AlertCircle },
-  { path: '/skills', icon: Sparkles },
-  { path: '/commands', icon: Terminal },
-  { path: '/memory', icon: Brain },
-  { path: '/prompts', icon: History },
-  { path: '/hooks', icon: GitFork },
-  { path: '/settings', icon: Settings },
-  { path: '/settings/rules', icon: Shield },
-  { path: '/settings/codexlens', icon: Sparkles },
-  { path: '/api-settings', icon: Server },
-  { path: '/help', icon: HelpCircle },
+// Define the 6 navigation groups with their items
+const navGroupDefinitions: NavGroupDef[] = [
+  {
+    id: 'overview',
+    titleKey: 'navigation.groups.overview',
+    icon: Layers,
+    items: [
+      { path: '/', labelKey: 'navigation.main.home', icon: Home },
+      { path: '/project', labelKey: 'navigation.main.project', icon: LayoutDashboard },
+    ],
+  },
+  {
+    id: 'workflow',
+    titleKey: 'navigation.groups.workflow',
+    icon: Workflow,
+    items: [
+      { path: '/sessions', labelKey: 'navigation.main.sessions', icon: FolderKanban },
+      { path: '/lite-tasks', labelKey: 'navigation.main.liteTasks', icon: Zap },
+      { path: '/orchestrator', labelKey: 'navigation.main.orchestrator', icon: Workflow },
+      { path: '/loops', labelKey: 'navigation.main.loops', icon: RefreshCw },
+      { path: '/history', labelKey: 'navigation.main.history', icon: Clock },
+    ],
+  },
+  {
+    id: 'knowledge',
+    titleKey: 'navigation.groups.knowledge',
+    icon: Brain,
+    items: [
+      { path: '/memory', labelKey: 'navigation.main.memory', icon: Brain },
+      { path: '/prompts', labelKey: 'navigation.main.prompts', icon: History },
+      { path: '/skills', labelKey: 'navigation.main.skills', icon: Sparkles },
+      { path: '/commands', labelKey: 'navigation.main.commands', icon: Terminal },
+    ],
+  },
+  {
+    id: 'issues',
+    titleKey: 'navigation.groups.issues',
+    icon: AlertCircle,
+    items: [
+      { path: '/issues', labelKey: 'navigation.main.issues', icon: AlertCircle },
+    ],
+  },
+  {
+    id: 'tools',
+    titleKey: 'navigation.groups.tools',
+    icon: Wrench,
+    items: [
+      { path: '/hooks', labelKey: 'navigation.main.hooks', icon: GitFork },
+    ],
+  },
+  {
+    id: 'configuration',
+    titleKey: 'navigation.groups.configuration',
+    icon: Cog,
+    items: [
+      { path: '/settings', labelKey: 'navigation.main.settings', icon: Settings },
+      { path: '/settings/rules', labelKey: 'navigation.main.rules', icon: Shield },
+      { path: '/settings/codexlens', labelKey: 'navigation.main.codexlens', icon: Sparkles },
+      { path: '/api-settings', labelKey: 'navigation.main.apiSettings', icon: Server },
+      { path: '/help', labelKey: 'navigation.main.help', icon: HelpCircle },
+    ],
+  },
 ];

 export function Sidebar({
@@ -80,18 +131,17 @@ export function Sidebar({
  onMobileClose,
 }: SidebarProps) {
  const { formatMessage } = useIntl();
-  const location = useLocation();
-  const [internalCollapsed, setInternalCollapsed] = useState(collapsed);
+  const { sidebarCollapsed, expandedNavGroups, setExpandedNavGroups } = useAppStore();

-  const isCollapsed = onCollapsedChange ? collapsed : internalCollapsed;
+  const isCollapsed = onCollapsedChange ? collapsed : sidebarCollapsed;

  const handleToggleCollapse = useCallback(() => {
    if (onCollapsedChange) {
      onCollapsedChange(!collapsed);
    } else {
-      setInternalCollapsed(!internalCollapsed);
+      useAppStore.getState().setSidebarCollapsed(!sidebarCollapsed);
    }
-  }, [collapsed, internalCollapsed, onCollapsedChange]);
+  }, [collapsed, sidebarCollapsed, onCollapsedChange]);

  const handleNavClick = useCallback(() => {
    // Close mobile sidebar when navigating
@@ -100,31 +150,18 @@ export function Sidebar({
    }
  }, [onMobileClose]);

-  // Build nav items with translated labels
-  const navItems = useMemo(() => {
-    const keyMap: Record<string, string> = {
-      '/': 'main.home',
-      '/sessions': 'main.sessions',
-      '/lite-tasks': 'main.liteTasks',
-      '/project': 'main.project',
-      '/history': 'main.history',
-      '/orchestrator': 'main.orchestrator',
-      '/loops': 'main.loops',
-      '/issues': 'main.issues',
-      '/skills': 'main.skills',
-      '/commands': 'main.commands',
-      '/memory': 'main.memory',
-      '/prompts': 'main.prompts',
-      '/hooks': 'main.hooks',
-      '/settings': 'main.settings',
-      '/settings/rules': 'main.rules',
-      '/settings/codexlens': 'main.codexlens',
-      '/api-settings': 'main.apiSettings',
-      '/help': 'main.help',
-    };
-    return navItemDefinitions.map((item) => ({
-      ...item,
-      label: formatMessage({ id: `navigation.${keyMap[item.path]}` }),
+  const handleAccordionChange = useCallback((value: string[]) => {
+    setExpandedNavGroups(value);
+  }, [setExpandedNavGroups]);
+
+  // Build nav groups with translated labels
+  const navGroups = useMemo(() => {
+    return navGroupDefinitions.map((group) => ({
+      ...group,
+      items: group.items.map((item) => ({
+        ...item,
+        label: formatMessage({ id: item.labelKey }),
+      })) as NavItem[],
    }));
  }, [formatMessage]);

@@ -153,57 +190,42 @@ export function Sidebar({
        aria-label={formatMessage({ id: 'navigation.header.brand' })}
      >
        <nav className="flex-1 py-3 overflow-y-auto">
-          <ul className="space-y-1 px-2">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              // Parse item path to extract base path and query params
-              const [basePath, searchParams] = item.path.split('?');
-              const isActive = location.pathname === basePath ||
-                (basePath !== '/' && location.pathname.startsWith(basePath));
-              // For query param items, also check if search matches
-              const isQueryParamActive = searchParams &&
-                location.search.includes(searchParams);
-
-              return (
-                <li key={item.path}>
-                  <NavLink
-                    to={item.path}
-                    onClick={handleNavClick}
-                    className={cn(
-                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors',
-                      'hover:bg-hover hover:text-foreground',
-                      (isActive && !searchParams) || isQueryParamActive
-                        ? 'bg-primary/10 text-primary font-medium'
-                        : 'text-muted-foreground',
-                      isCollapsed && 'justify-center px-2'
-                    )}
-                    title={isCollapsed ? item.label : undefined}
-                  >
-                    <Icon className="w-5 h-5 flex-shrink-0" />
-                    {!isCollapsed && (
-                      <>
-                        <span className="flex-1">{item.label}</span>
-                        {item.badge !== undefined && (
-                          <span
-                            className={cn(
-                              'px-2 py-0.5 text-xs font-semibold rounded-full',
-                              item.badgeVariant === 'success' && 'bg-success-light text-success',
-                              item.badgeVariant === 'warning' && 'bg-warning-light text-warning',
-                              item.badgeVariant === 'info' && 'bg-info-light text-info',
-                              (!item.badgeVariant || item.badgeVariant === 'default') &&
-                                'bg-muted text-muted-foreground'
-                            )}
-                          >
-                            {item.badge}
-                          </span>
-                        )}
-                      </>
-                    )}
-                  </NavLink>
-                </li>
-              );
-            })}
-          </ul>
+          {isCollapsed ? (
+            // Collapsed view: render flat list of icons
+            <div className="space-y-4 px-2">
+              {navGroups.map((group) => (
+                <NavGroup
+                  key={group.id}
+                  groupId={group.id}
+                  titleKey={group.titleKey}
+                  icon={group.icon}
+                  items={group.items}
+                  collapsed={true}
+                  onNavClick={handleNavClick}
+                />
+              ))}
+            </div>
+          ) : (
+            // Expanded view: render accordion groups
+            <Accordion
+              type="multiple"
+              value={expandedNavGroups}
+              onValueChange={handleAccordionChange}
+              className="space-y-1 px-2"
+            >
+              {navGroups.map((group) => (
+                <NavGroup
+                  key={group.id}
+                  groupId={group.id}
+                  titleKey={group.titleKey}
+                  icon={group.icon}
+                  items={group.items}
+                  collapsed={false}
+                  onNavClick={handleNavClick}
+                />
+              ))}
+            </Accordion>
+          )}
        </nav>

        {/* Sidebar footer - collapse toggle */}
--- a/ccw/frontend/src/components/notification/NotificationPanel.tsx
+++ b/ccw/frontend/src/components/notification/NotificationPanel.tsx
@@ -481,11 +481,15 @@ function NotificationItem({ notification, onDelete, onToggleRead }: Notification
    <div
      className={cn(
        'p-3 border-b border-border hover:bg-muted/50 transition-colors',
-        'border-l-4',
+        'border-l-4 relative',
        getTypeBorder(notification.type),
        isRead && 'opacity-70'
      )}
    >
+      {/* Unread dot indicator */}
+      {!isRead && (
+        <span className="absolute top-2 right-2 h-2 w-2 rounded-full bg-destructive" />
+      )}
      <div className="flex gap-3">
        {/* Icon */}
        <div className="mt-0.5">{getNotificationIcon(notification.type)}</div>
@@ -512,6 +516,23 @@ function NotificationItem({ notification, onDelete, onToggleRead }: Notification
                    {notification.source}
                  </Badge>
                )}
+                {/* Read/Unread status badge */}
+                {!isRead && (
+                  <Badge
+                    variant="destructive"
+                    className="h-5 px-1.5 text-[10px] font-medium shrink-0"
+                  >
+                    {formatMessage({ id: 'notifications.unread' }) || '未读'}
+                  </Badge>
+                )}
+                {isRead && (
+                  <Badge
+                    variant="outline"
+                    className="h-5 px-1.5 text-[10px] font-medium shrink-0 opacity-60"
+                  >
+                    {formatMessage({ id: 'notifications.read' }) || '已读'}
+                  </Badge>
+                )}
              </div>

              {/* Timestamp row: absolute + relative */}
--- a/ccw/frontend/src/components/shared/BatchOperationToolbar.tsx
+++ b/ccw/frontend/src/components/shared/BatchOperationToolbar.tsx
@@ -0,0 +1,91 @@
+// ========================================
+// BatchOperationToolbar Component
+// ========================================
+// Toolbar for batch operations on prompts
+
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { Trash2, X } from 'lucide-react';
+
+export interface BatchOperationToolbarProps {
+  /** Number of selected items */
+  selectedCount: number;
+  /** Whether all items are selected */
+  allSelected: boolean;
+  /** Called when select all is toggled */
+  onSelectAll: (selected: boolean) => void;
+  /** Called when clear selection is triggered */
+  onClearSelection: () => void;
+  /** Called when batch delete is triggered */
+  onDelete: () => void;
+  /** Whether delete operation is in progress */
+  isDeleting?: boolean;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * BatchOperationToolbar component for bulk actions
+ */
+export function BatchOperationToolbar({
+  selectedCount,
+  allSelected,
+  onSelectAll,
+  onClearSelection,
+  onDelete,
+  isDeleting = false,
+  className,
+}: BatchOperationToolbarProps) {
+  const { formatMessage } = useIntl();
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-4 p-3 bg-primary/10 rounded-lg border border-primary/20',
+        className
+      )}
+    >
+      {/* Selection info and select all */}
+      <div className="flex items-center gap-3">
+        <Checkbox
+          checked={allSelected}
+          onCheckedChange={(checked) => onSelectAll(checked === true)}
+          aria-label={formatMessage({ id: 'prompts.batch.selectAll' })}
+        />
+        <span className="text-sm font-medium text-foreground">
+          {formatMessage({ id: 'prompts.batch.selected' }, { count: selectedCount })}
+        </span>
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClearSelection}
+          disabled={isDeleting}
+        >
+          <X className="h-4 w-4 mr-1" />
+          {formatMessage({ id: 'prompts.batch.clearSelection' })}
+        </Button>
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={onDelete}
+          disabled={isDeleting}
+        >
+          <Trash2 className="h-4 w-4 mr-1" />
+          {formatMessage({ id: 'prompts.batch.deleteSelected' })}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default BatchOperationToolbar;
--- a/ccw/frontend/src/components/shared/InsightDetailPanel.tsx
+++ b/ccw/frontend/src/components/shared/InsightDetailPanel.tsx
@@ -0,0 +1,387 @@
+// ========================================
+// InsightDetailPanel Component
+// ========================================
+// Display detailed view of a single insight with patterns, suggestions, and metadata
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import {
+  X,
+  Sparkles,
+  Bot,
+  Code2,
+  Cpu,
+  Trash2,
+  AlertTriangle,
+  Lightbulb,
+  Clock,
+  FileText,
+} from 'lucide-react';
+import type { InsightHistory, Pattern, Suggestion } from '@/lib/api';
+import { Button } from '@/components/ui/Button';
+
+export interface InsightDetailPanelProps {
+  /** Insight to display (null = panel hidden) */
+  insight: InsightHistory | null;
+  /** Called when close button clicked */
+  onClose: () => void;
+  /** Called when delete button clicked */
+  onDelete?: (insightId: string) => void;
+  /** Is delete operation in progress */
+  isDeleting?: boolean;
+  /** Optional className */
+  className?: string;
+}
+
+// Tool icon mapping
+const toolConfig = {
+  gemini: {
+    icon: Sparkles,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    label: 'Gemini',
+  },
+  qwen: {
+    icon: Bot,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    label: 'Qwen',
+  },
+  codex: {
+    icon: Code2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    label: 'Codex',
+  },
+  default: {
+    icon: Cpu,
+    color: 'text-gray-500',
+    bgColor: 'bg-gray-500/10',
+    label: 'CLI',
+  },
+};
+
+// Severity configuration
+const severityConfig = {
+  error: {
+    badge: 'bg-red-500/10 text-red-500 border-red-500/20',
+    border: 'border-l-red-500',
+    dot: 'bg-red-500',
+  },
+  warning: {
+    badge: 'bg-yellow-500/10 text-yellow-600 border-yellow-500/20',
+    border: 'border-l-yellow-500',
+    dot: 'bg-yellow-500',
+  },
+  info: {
+    badge: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+    border: 'border-l-blue-500',
+    dot: 'bg-blue-500',
+  },
+  default: {
+    badge: 'bg-gray-500/10 text-gray-500 border-gray-500/20',
+    border: 'border-l-gray-500',
+    dot: 'bg-gray-500',
+  },
+};
+
+// Suggestion type configuration
+const suggestionTypeConfig = {
+  refactor: {
+    badge: 'bg-purple-500/10 text-purple-500 border-purple-500/20',
+    icon: 'refactor',
+  },
+  optimize: {
+    badge: 'bg-green-500/10 text-green-500 border-green-500/20',
+    icon: 'optimize',
+  },
+  fix: {
+    badge: 'bg-red-500/10 text-red-500 border-red-500/20',
+    icon: 'fix',
+  },
+  document: {
+    badge: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
+    icon: 'document',
+  },
+};
+
+/**
+ * Format timestamp to relative time
+ */
+function formatRelativeTime(timestamp: string, locale: string): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (locale === 'zh') {
+    if (diffMins < 1) return '刚刚';
+    if (diffMins < 60) return `${diffMins}分钟前`;
+    if (diffHours < 24) return `${diffHours}小时前`;
+    return `${diffDays}天前`;
+  }
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
+
+/**
+ * PatternItem component for displaying a single pattern
+ */
+function PatternItem({ pattern, locale }: { pattern: Pattern; locale: string }) {
+  const { formatMessage } = useIntl();
+  const severity = pattern.severity ?? 'info';
+  const config = severityConfig[severity] ?? severityConfig.default;
+
+  return (
+    <div
+      className={cn(
+        'p-3 rounded-md border bg-card',
+        'border-l-4',
+        config.border
+      )}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <span
+          className={cn(
+            'px-2 py-0.5 text-xs font-medium rounded border',
+            config.badge
+          )}
+        >
+          {pattern.name?.split(' ')[0] || 'Pattern'}
+        </span>
+        <span
+          className={cn(
+            'px-2 py-0.5 text-xs font-medium rounded border uppercase',
+            config.badge
+          )}
+        >
+          {severity}
+        </span>
+      </div>
+      <p className="text-sm text-foreground mb-2">{pattern.description}</p>
+      {pattern.example && (
+        <div className="mt-2 p-2 bg-muted rounded text-xs font-mono overflow-x-auto">
+          <code className="text-muted-foreground">{pattern.example}</code>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * SuggestionItem component for displaying a single suggestion
+ */
+function SuggestionItem({ suggestion, locale }: { suggestion: Suggestion; locale: string }) {
+  const { formatMessage } = useIntl();
+  const config = suggestionTypeConfig[suggestion.type] ?? suggestionTypeConfig.refactor;
+  const typeLabel = formatMessage({ id: `prompts.suggestions.types.${suggestion.type}` });
+
+  return (
+    <div className="p-3 rounded-md border border-border bg-card">
+      <div className="flex items-center gap-2 mb-2">
+        <span
+          className={cn(
+            'px-2 py-0.5 text-xs font-medium rounded border',
+            config.badge
+          )}
+        >
+          {typeLabel}
+        </span>
+        {suggestion.effort && (
+          <span className="text-xs text-muted-foreground">
+            {formatMessage({ id: 'prompts.suggestions.effort' })}: {suggestion.effort}
+          </span>
+        )}
+      </div>
+      <h4 className="text-sm font-medium text-foreground mb-1">{suggestion.title}</h4>
+      <p className="text-sm text-muted-foreground mb-2">{suggestion.description}</p>
+      {suggestion.code && (
+        <div className="mt-2 p-2 bg-muted rounded text-xs font-mono overflow-x-auto">
+          <code className="text-muted-foreground">{suggestion.code}</code>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * InsightDetailPanel component - Display full insight details
+ */
+export function InsightDetailPanel({
+  insight,
+  onClose,
+  onDelete,
+  isDeleting = false,
+  className,
+}: InsightDetailPanelProps) {
+  const { formatMessage } = useIntl();
+  const locale = useIntl().locale;
+
+  // Don't render if no insight
+  if (!insight) {
+    return null;
+  }
+
+  const config = toolConfig[insight.tool as keyof typeof toolConfig] ?? toolConfig.default;
+  const ToolIcon = config.icon;
+  const timeAgo = formatRelativeTime(insight.created_at, locale);
+  const patternCount = insight.patterns?.length ?? 0;
+  const suggestionCount = insight.suggestions?.length ?? 0;
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-y-0 right-0 w-full max-w-md bg-background border-l border-border shadow-lg',
+        'flex flex-col',
+        'animate-in slide-in-from-right',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border">
+        <div className="flex items-center gap-2">
+          <ToolIcon className={cn('h-5 w-5', config.color)} />
+          <h2 className="text-lg font-semibold text-card-foreground">
+            {formatMessage({ id: 'prompts.insightDetail.title' })}
+          </h2>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 rounded-md hover:bg-accent transition-colors"
+          aria-label={formatMessage({ id: 'common.actions.close' })}
+        >
+          <X className="h-5 w-5 text-muted-foreground" />
+        </button>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {/* Metadata */}
+        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+          <div className={cn('flex items-center gap-1.5', config.color)}>
+            <ToolIcon className="h-3.5 w-3.5" />
+            <span className="font-medium">{config.label}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Clock className="h-3.5 w-3.5" />
+            <span>{timeAgo}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <FileText className="h-3.5 w-3.5" />
+            <span>
+              {insight.prompt_count} {formatMessage({ id: 'prompts.insightDetail.promptsAnalyzed' })}
+            </span>
+          </div>
+        </div>
+
+        {/* Patterns */}
+        {insight.patterns && insight.patterns.length > 0 && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-4 w-4 text-muted-foreground" />
+              <h3 className="text-sm font-semibold text-card-foreground">
+                {formatMessage({ id: 'prompts.insightDetail.patterns' })} ({patternCount})
+              </h3>
+            </div>
+            <div className="space-y-2">
+              {insight.patterns.map((pattern) => (
+                <PatternItem key={pattern.id} pattern={pattern} locale={locale} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Suggestions */}
+        {insight.suggestions && insight.suggestions.length > 0 && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Lightbulb className="h-4 w-4 text-muted-foreground" />
+              <h3 className="text-sm font-semibold text-card-foreground">
+                {formatMessage({ id: 'prompts.insightDetail.suggestions' })} ({suggestionCount})
+              </h3>
+            </div>
+            <div className="space-y-2">
+              {insight.suggestions.map((suggestion) => (
+                <SuggestionItem key={suggestion.id} suggestion={suggestion} locale={locale} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {(!insight.patterns || insight.patterns.length === 0) &&
+         (!insight.suggestions || insight.suggestions.length === 0) && (
+          <div className="text-center py-8 text-muted-foreground text-sm">
+            {formatMessage({ id: 'prompts.insightDetail.noContent' })}
+          </div>
+        )}
+      </div>
+
+      {/* Footer actions */}
+      {onDelete && (
+        <div className="p-4 border-t border-border">
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => onDelete(insight.id)}
+            disabled={isDeleting}
+            className="w-full"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            {isDeleting
+              ? formatMessage({ id: 'prompts.insightDetail.deleting' })
+              : formatMessage({ id: 'common.actions.delete' })
+            }
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * InsightDetailPanelOverlay - Full screen overlay with panel
+ */
+export interface InsightDetailPanelOverlayProps extends InsightDetailPanelProps {
+  /** Show overlay backdrop */
+  showOverlay?: boolean;
+}
+
+export function InsightDetailPanelOverlay({
+  insight,
+  onClose,
+  onDelete,
+  isDeleting = false,
+  showOverlay = true,
+  className,
+}: InsightDetailPanelOverlayProps) {
+  if (!insight) {
+    return null;
+  }
+
+  return (
+    <>
+      {showOverlay && (
+        <div
+          className="fixed inset-0 bg-black/60 z-40 animate-in fade-in"
+          onClick={onClose}
+        />
+      )}
+      <InsightDetailPanel
+        insight={insight}
+        onClose={onClose}
+        onDelete={onDelete}
+        isDeleting={isDeleting}
+        className={cn('z-50', className)}
+      />
+    </>
+  );
+}
+
+export default InsightDetailPanel;
--- a/ccw/frontend/src/components/shared/InsightsHistoryList.tsx
+++ b/ccw/frontend/src/components/shared/InsightsHistoryList.tsx
@@ -0,0 +1,248 @@
+// ========================================
+// InsightsHistoryList Component
+// ========================================
+// Display past insight analysis results with tool icon, timestamp, pattern count, and suggestion count
+
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import {
+  Sparkles,
+  Bot,
+  Code2,
+  Cpu,
+  Brain,
+  Loader2,
+} from 'lucide-react';
+import type { InsightHistory } from '@/lib/api';
+
+export interface InsightsHistoryListProps {
+  /** Array of historical insights */
+  insights?: InsightHistory[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Called when an insight card is clicked */
+  onInsightSelect?: (insightId: string) => void;
+  /** Optional className */
+  className?: string;
+}
+
+// Tool icon mapping
+const toolConfig = {
+  gemini: {
+    icon: Sparkles,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    label: 'Gemini',
+  },
+  qwen: {
+    icon: Bot,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    label: 'Qwen',
+  },
+  codex: {
+    icon: Code2,
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    label: 'Codex',
+  },
+  default: {
+    icon: Cpu,
+    color: 'text-gray-500',
+    bgColor: 'bg-gray-500/10',
+    label: 'CLI',
+  },
+};
+
+/**
+ * Format timestamp to relative time (e.g., "2h ago")
+ */
+function formatTimeAgo(timestamp: string, locale: string): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  const isZh = locale === 'zh';
+
+  if (minutes < 1) return isZh ? '刚刚' : 'Just now';
+  if (minutes < 60) return isZh ? `${minutes} 分钟前` : `${minutes}m ago`;
+  if (hours < 24) return isZh ? `${hours} 小时前` : `${hours}h ago`;
+  if (days < 7) return isZh ? `${days} 天前` : `${days}d ago`;
+  return date.toLocaleDateString();
+}
+
+/**
+ * Get severity level from patterns
+ * Pattern severity: 'error' | 'warning' | 'info'
+ */
+function getSeverityLevel(patterns: InsightHistory['patterns']): 'low' | 'medium' | 'high' {
+  if (!patterns || patterns.length === 0) return 'low';
+  const hasHigh = patterns.some(p => p.severity === 'error');
+  const hasMedium = patterns.some(p => p.severity === 'warning');
+  return hasHigh ? 'high' : hasMedium ? 'medium' : 'low';
+}
+
+/**
+ * Severity color mapping
+ */
+const severityConfig = {
+  low: {
+    border: 'border-l-4 border-l-green-500',
+  },
+  medium: {
+    border: 'border-l-4 border-l-yellow-500',
+  },
+  high: {
+    border: 'border-l-4 border-l-red-500',
+  },
+};
+
+/**
+ * InsightHistoryCard component for displaying a single insight history entry
+ */
+function InsightHistoryCard({
+  insight,
+  locale,
+  onClick,
+}: {
+  insight: InsightHistory;
+  locale: string;
+  onClick: () => void;
+}) {
+  const { formatMessage } = useIntl();
+  const severity = getSeverityLevel(insight.patterns);
+  const config = toolConfig[insight.tool as keyof typeof toolConfig] ?? toolConfig.default;
+  const ToolIcon = config.icon;
+  const timeAgo = formatTimeAgo(insight.created_at, locale);
+  const patternCount = insight.patterns?.length ?? 0;
+  const suggestionCount = insight.suggestions?.length ?? 0;
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'p-3 rounded-lg border border-border bg-card hover:bg-muted/50 cursor-pointer transition-colors',
+        'border-l-4',
+        severityConfig[severity].border
+      )}
+    >
+      {/* Header: Tool and timestamp */}
+      <div className="flex items-center justify-between mb-2">
+        <div className={cn('flex items-center gap-1.5', config.color)}>
+          <ToolIcon className="h-3.5 w-3.5" />
+          <span className="text-xs font-medium">{config.label}</span>
+        </div>
+        <div className="text-xs text-muted-foreground">{timeAgo}</div>
+      </div>
+
+      {/* Stats: Patterns, Suggestions, Prompts */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-baseline gap-1">
+          <span className="text-sm font-semibold text-foreground">{patternCount}</span>
+          <span className="text-xs text-muted-foreground">
+            {formatMessage({ id: 'prompts.insightsHistory.patterns' })}
+          </span>
+        </div>
+        <div className="flex items-baseline gap-1">
+          <span className="text-sm font-semibold text-foreground">{suggestionCount}</span>
+          <span className="text-xs text-muted-foreground">
+            {formatMessage({ id: 'prompts.insightsHistory.suggestions' })}
+          </span>
+        </div>
+        <div className="flex items-baseline gap-1">
+          <span className="text-sm font-semibold text-foreground">{insight.prompt_count}</span>
+          <span className="text-xs text-muted-foreground">
+            {formatMessage({ id: 'prompts.insightsHistory.prompts' })}
+          </span>
+        </div>
+      </div>
+
+      {/* Pattern preview (if available) */}
+      {insight.patterns && insight.patterns.length > 0 && (
+        <div className="mt-2 pt-2 border-t border-border/50">
+          <div
+            className={cn(
+              'flex items-start gap-1.5 text-xs',
+              insight.patterns[0].severity === 'error'
+                ? 'text-red-500'
+                : insight.patterns[0].severity === 'warning'
+                  ? 'text-yellow-600'
+                  : 'text-blue-500'
+            )}
+          >
+            <span className="font-medium uppercase">
+              {insight.patterns[0].name?.split(' ')[0] || 'Pattern'}
+            </span>
+            <span className="text-muted-foreground truncate flex-1">
+              {insight.patterns[0].description?.slice(0, 50)}
+              {insight.patterns[0].description && insight.patterns[0].description.length > 50 ? '...' : ''}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * InsightsHistoryList component - Display past insight analysis results
+ */
+export function InsightsHistoryList({
+  insights = [],
+  isLoading = false,
+  onInsightSelect,
+  className,
+}: InsightsHistoryListProps) {
+  const { formatMessage } = useIntl();
+  const locale = useIntl().locale;
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className={cn('rounded-lg border border-border bg-card p-4', className)}>
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground mr-2" />
+          <span className="text-sm text-muted-foreground">
+            {formatMessage({ id: 'prompts.insightsHistory.loading' })}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (insights.length === 0) {
+    return (
+      <div className={cn('rounded-lg border border-border bg-card p-4', className)}>
+        <div className="flex flex-col items-center justify-center py-8 px-4 text-center">
+          <Brain className="h-10 w-10 text-muted-foreground/50 mb-3" />
+          <h3 className="text-sm font-medium text-foreground mb-1">
+            {formatMessage({ id: 'prompts.insightsHistory.empty.title' })}
+          </h3>
+          <p className="text-xs text-muted-foreground max-w-xs">
+            {formatMessage({ id: 'prompts.insightsHistory.empty.message' })}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // List of insights
+  return (
+    <div className={cn('space-y-2', className)}>
+      {insights.map((insight) => (
+        <InsightHistoryCard
+          key={insight.id}
+          insight={insight}
+          locale={locale}
+          onClick={() => onInsightSelect?.(insight.id)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default InsightsHistoryList;
--- a/ccw/frontend/src/components/shared/NavGroup.tsx
+++ b/ccw/frontend/src/components/shared/NavGroup.tsx
@@ -0,0 +1,143 @@
+// ========================================
+// NavGroup Component
+// ========================================
+// Collapsible navigation group using Radix Accordion
+
+import { NavLink, useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import {
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '@/components/ui/Accordion';
+
+export interface NavItem {
+  path: string;
+  label: string;
+  icon: React.ElementType;
+  badge?: number | string;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'info';
+}
+
+export interface NavGroupProps {
+  /** Unique identifier for the group */
+  groupId: string;
+  /** Title i18n key */
+  titleKey: string;
+  /** Optional icon for group header */
+  icon?: React.ElementType;
+  /** Navigation items in this group */
+  items: NavItem[];
+  /** Whether sidebar is collapsed */
+  collapsed?: boolean;
+  /** Callback when nav item is clicked */
+  onNavClick?: () => void;
+}
+
+export function NavGroup({
+  groupId,
+  titleKey,
+  icon: Icon,
+  items,
+  collapsed = false,
+  onNavClick,
+}: NavGroupProps) {
+  const { formatMessage } = useIntl();
+  const location = useLocation();
+  const title = formatMessage({ id: titleKey });
+
+  // If collapsed, render items without accordion
+  if (collapsed) {
+    return (
+      <div className="space-y-1">
+        {items.map((item) => {
+          const ItemIcon = item.icon;
+          const [basePath] = item.path.split('?');
+          const isActive =
+            location.pathname === basePath ||
+            (basePath !== '/' && location.pathname.startsWith(basePath));
+
+          return (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              onClick={onNavClick}
+              className={cn(
+                'flex items-center justify-center gap-3 px-2 py-2.5 rounded-md text-sm transition-colors',
+                'hover:bg-hover hover:text-foreground',
+                isActive
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-muted-foreground'
+              )}
+              title={item.label}
+            >
+              <ItemIcon className="w-5 h-5 flex-shrink-0" />
+            </NavLink>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <AccordionItem value={groupId} className="border-none">
+      <AccordionTrigger className="px-3 py-2 hover:no-underline hover:bg-hover/50 rounded-md text-muted-foreground hover:text-foreground">
+        <div className="flex items-center gap-2 text-sm font-semibold">
+          {Icon && <Icon className="w-4 h-4" />}
+          <span>{title}</span>
+        </div>
+      </AccordionTrigger>
+      <AccordionContent className="pb-1">
+        <ul className="space-y-1">
+          {items.map((item) => {
+            const ItemIcon = item.icon;
+            const [basePath, searchParams] = item.path.split('?');
+            const isActive =
+              location.pathname === basePath ||
+              (basePath !== '/' && location.pathname.startsWith(basePath));
+            const isQueryParamActive =
+              searchParams && location.search.includes(searchParams);
+
+            return (
+              <li key={item.path}>
+                <NavLink
+                  to={item.path}
+                  onClick={onNavClick}
+                  className={cn(
+                    'flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors pl-6',
+                    'hover:bg-hover hover:text-foreground',
+                    (isActive && !searchParams) || isQueryParamActive
+                      ? 'bg-primary/10 text-primary font-medium'
+                      : 'text-muted-foreground'
+                  )}
+                >
+                  <ItemIcon className="w-4 h-4 flex-shrink-0" />
+                  <span className="flex-1">{item.label}</span>
+                  {item.badge !== undefined && (
+                    <span
+                      className={cn(
+                        'px-2 py-0.5 text-xs font-semibold rounded-full',
+                        item.badgeVariant === 'success' &&
+                          'bg-success-light text-success',
+                        item.badgeVariant === 'warning' &&
+                          'bg-warning-light text-warning',
+                        item.badgeVariant === 'info' && 'bg-info-light text-info',
+                        (!item.badgeVariant || item.badgeVariant === 'default') &&
+                          'bg-muted text-muted-foreground'
+                      )}
+                    >
+                      {item.badge}
+                    </span>
+                  )}
+                </NavLink>
+              </li>
+            );
+          })}
+        </ul>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+export default NavGroup;
--- a/ccw/frontend/src/components/shared/PromptCard.tsx
+++ b/ccw/frontend/src/components/shared/PromptCard.tsx
@@ -9,6 +9,8 @@ import { cn } from '@/lib/utils';
 import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { QualityBadge } from '@/components/shared/QualityBadge';
 import {
  Copy,
  Trash2,
@@ -31,6 +33,12 @@ export interface PromptCardProps {
  actionsDisabled?: boolean;
  /** Default expanded state */
  defaultExpanded?: boolean;
+  /** Selection state for batch operations */
+  selected?: boolean;
+  /** Called when selection state changes */
+  onSelectChange?: (id: string, selected: boolean) => void;
+  /** Whether selection mode is active */
+  selectionMode?: boolean;
 }

 /**
@@ -66,6 +74,9 @@ export function PromptCard({
  className,
  actionsDisabled = false,
  defaultExpanded = false,
+  selected = false,
+  onSelectChange,
+  selectionMode = false,
 }: PromptCardProps) {
  const { formatMessage } = useIntl();
  const [expanded, setExpanded] = React.useState(defaultExpanded);
@@ -91,12 +102,44 @@ export function PromptCard({
    setExpanded((prev) => !prev);
  };

+  const handleSelectionChange = (checked: boolean) => {
+    onSelectChange?.(prompt.id, checked);
+  };
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (selectionMode && (e.target as HTMLElement).closest('.prompt-card-checkbox')) {
+      return;
+    }
+    if (selectionMode) {
+      handleSelectionChange(!selected);
+    }
+  };
+
  return (
-    <Card className={cn('transition-all duration-200', className)}>
+    <Card
+      className={cn(
+        'transition-all duration-200',
+        selected && 'ring-2 ring-primary',
+        selectionMode && 'cursor-pointer',
+        className
+      )}
+      onClick={handleCardClick}
+    >
      <CardHeader className="p-4">
        <div className="flex items-start justify-between gap-3">
+          {/* Checkbox for selection mode */}
+          {selectionMode && (
+            <div className="prompt-card-checkbox">
+              <Checkbox
+                checked={selected}
+                onCheckedChange={handleSelectionChange}
+                className="mt-1"
+              />
+            </div>
+          )}
+
          {/* Title and metadata */}
-          <div className="flex-1 min-w-0">
+          <div className={cn('flex-1 min-w-0', !selectionMode && 'ml-0')}>
            <div className="flex items-center gap-2 mb-2">
              <h3 className="text-sm font-medium text-foreground truncate">
                {prompt.title || formatMessage({ id: 'prompts.card.untitled' })}
@@ -106,6 +149,7 @@ export function PromptCard({
                  {prompt.category}
                </Badge>
              )}
+              <QualityBadge qualityScore={prompt.quality_score} className="text-xs" />
            </div>

            {/* Metadata */}
--- a/ccw/frontend/src/components/shared/PromptStats.tsx
+++ b/ccw/frontend/src/components/shared/PromptStats.tsx
@@ -6,7 +6,13 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import { StatCard, StatCardSkeleton } from '@/components/shared/StatCard';
-import { MessageSquare, FileType, Hash } from 'lucide-react';
+import { MessageSquare, FileType, Hash, Star } from 'lucide-react';
+
+export interface QualityDistribution {
+  high: number;
+  medium: number;
+  low: number;
+}

 export interface PromptStatsProps {
  /** Total number of prompts */
@@ -15,6 +21,10 @@ export interface PromptStatsProps {
  avgLength: number;
  /** Most common intent/category */
  topIntent: string | null;
+  /** Average quality score (0-100) */
+  avgQualityScore?: number;
+  /** Quality distribution */
+  qualityDistribution?: QualityDistribution;
  /** Loading state */
  isLoading?: boolean;
 }
@@ -22,15 +32,18 @@ export interface PromptStatsProps {
 /**
 * PromptStats component - displays prompt history statistics
 *
- * Shows three key metrics:
+ * Shows four key metrics:
 * - Total prompts: overall count of stored prompts
 * - Average length: mean character count across all prompts
 * - Top intent: most frequently used category
+ * - Quality: average quality score with distribution
 */
 export function PromptStats({
  totalCount,
  avgLength,
  topIntent,
+  avgQualityScore,
+  qualityDistribution,
  isLoading = false,
 }: PromptStatsProps) {
  const { formatMessage } = useIntl();
@@ -44,7 +57,7 @@ export function PromptStats({
  };

  return (
-    <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
+    <div className="grid gap-4 grid-cols-1 md:grid-cols-4">
      <StatCard
        title={formatMessage({ id: 'prompts.stats.totalCount' })}
        value={totalCount}
@@ -69,6 +82,17 @@ export function PromptStats({
        isLoading={isLoading}
        description={formatMessage({ id: 'prompts.stats.topIntentDesc' })}
      />
+      <StatCard
+        title={formatMessage({ id: 'prompts.stats.avgQuality' })}
+        value={avgQualityScore !== undefined ? Math.round(avgQualityScore) : 'N/A'}
+        icon={Star}
+        variant="warning"
+        isLoading={isLoading}
+        description={qualityDistribution
+          ? `${formatMessage({ id: 'prompts.quality.high' })}: ${qualityDistribution.high} | ${formatMessage({ id: 'prompts.quality.medium' })}: ${qualityDistribution.medium} | ${formatMessage({ id: 'prompts.quality.low' })}: ${qualityDistribution.low}`
+          : formatMessage({ id: 'prompts.stats.avgQualityDesc' })
+        }
+      />
    </div>
  );
 }
@@ -78,7 +102,8 @@ export function PromptStats({
 */
 export function PromptStatsSkeleton() {
  return (
-    <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
+    <div className="grid gap-4 grid-cols-1 md:grid-cols-4">
+      <StatCardSkeleton />
      <StatCardSkeleton />
      <StatCardSkeleton />
      <StatCardSkeleton />
--- a/ccw/frontend/src/components/shared/QualityBadge.tsx
+++ b/ccw/frontend/src/components/shared/QualityBadge.tsx
@@ -0,0 +1,88 @@
+// ========================================
+// QualityBadge Component
+// ========================================
+// Badge component for displaying prompt quality score
+
+import { useIntl } from 'react-intl';
+import { Badge } from '@/components/ui/Badge';
+import type { Prompt } from '@/types/store';
+
+export interface QualityBadgeProps {
+  /** Quality score (0-100) */
+  qualityScore?: number;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * Get quality level from score
+ */
+function getQualityLevel(score?: number): 'high' | 'medium' | 'low' | 'none' {
+  if (score === undefined || score === null) return 'none';
+  if (score >= 80) return 'high';
+  if (score >= 60) return 'medium';
+  return 'low';
+}
+
+/**
+ * Get badge variant for quality level
+ */
+function getBadgeVariant(level: 'high' | 'medium' | 'low' | 'none'): 'success' | 'warning' | 'secondary' | 'outline' {
+  switch (level) {
+    case 'high':
+      return 'success';
+    case 'medium':
+      return 'warning';
+    case 'low':
+      return 'secondary';
+    default:
+      return 'outline';
+  }
+}
+
+/**
+ * QualityBadge component - displays prompt quality score with color coding
+ *
+ * Quality levels:
+ * - High (>=80): Green badge
+ * - Medium (>=60): Yellow badge
+ * - Low (<60): Gray badge
+ * - No score: Outline badge
+ */
+export function QualityBadge({ qualityScore, className }: QualityBadgeProps) {
+  const { formatMessage } = useIntl();
+  const level = getQualityLevel(qualityScore);
+  const variant = getBadgeVariant(level);
+
+  const labelKey = `prompts.quality.${level}`;
+  const label = formatMessage({ id: labelKey });
+
+  if (level === 'none') {
+    return null;
+  }
+
+  return (
+    <Badge variant={variant} className={className}>
+      {qualityScore !== undefined && `${qualityScore} `}
+      {label}
+    </Badge>
+  );
+}
+
+/**
+ * Hook to get quality badge data for a prompt
+ */
+export function useQualityBadge(prompt: Prompt) {
+  const qualityScore = prompt.quality_score;
+  const level = getQualityLevel(qualityScore);
+  const variant = getBadgeVariant(level);
+
+  return {
+    qualityScore,
+    level,
+    variant,
+    hasQuality: qualityScore !== undefined && qualityScore !== null,
+  };
+}
+
+export default QualityBadge;
--- a/ccw/frontend/src/components/ui/Accordion.tsx
+++ b/ccw/frontend/src/components/ui/Accordion.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-border/50", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-2 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-2 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };