diff --git a/.claude/commands/workflow/test-fix-gen.md b/.claude/commands/workflow/test-fix-gen.md
index c24dc4f7..33c7e207 100644
--- a/.claude/commands/workflow/test-fix-gen.md
+++ b/.claude/commands/workflow/test-fix-gen.md
@@ -7,69 +7,40 @@ allowed-tools: SlashCommand(*), TodoWrite(*), Read(*), Bash(*)
 
 # Workflow Test-Fix Generation Command (/workflow:test-fix-gen)
 
-## Overview
+## Quick Reference
 
-### What It Does
+### Command Scope
 
-This command creates an independent test-fix workflow session for existing code. It orchestrates a 5-phase process to analyze implementation, generate test requirements, and create executable test generation and fix tasks.
+| Aspect | Description |
+|--------|-------------|
+| **Purpose** | Generate test-fix workflow session with task JSON files |
+| **Output** | IMPL-001.json, IMPL-001.3-validation.json, IMPL-001.5-review.json, IMPL-002.json |
+| **Does NOT** | Execute tests, apply fixes, handle test failures |
+| **Next Step** | Must call `/workflow:test-cycle-execute` after this command |
 
-**CRITICAL - Command Scope**:
-- **This command ONLY generates task JSON files** (IMPL-001.json, IMPL-002.json)
-- **Does NOT execute tests or apply fixes** - all execution happens in separate orchestrator
-- **Must call `/workflow:test-cycle-execute`** after this command to actually run tests and fixes
-- **Test failure handling happens in test-cycle-execute**, not here
+### Task Pipeline
 
-### Dual-Mode Support
-
-**Automatic mode detection** based on input pattern:
-
-| Mode | Input Pattern | Context Source | Use Case |
-|------|--------------|----------------|----------|
-| **Session Mode** | `WFS-xxx` | Source session summaries | Test validation for completed workflow |
-| **Prompt Mode** | Text or file path | Direct codebase analysis | Test generation from description |
-
-**Detection Logic**:
-```bash
-if [[ "$input" == WFS-* ]]; then
-  MODE="session"  # Use test-context-gather
-else
-  MODE="prompt"   # Use context-gather
-fi
 ```
-
-### Core Principles
-
-- **Dual Input Support**: Accepts session ID (WFS-xxx) or feature description/file path
-- **Session Isolation**: Creates independent `WFS-test-[slug]` session
-- **Context-First**: Gathers implementation context via appropriate method
-- **Format Reuse**: Creates standard `IMPL-*.json` tasks with `meta.type: "test-fix"`
-- **Semantic CLI Selection**: CLI tool usage determined from user's task description
-- **Automatic Detection**: Input pattern determines execution mode
+IMPL-001 (Test Generation) → IMPL-001.3 (Code Validation) → IMPL-001.5 (Test Quality) → IMPL-002 (Test Execution)
+     @code-developer              @test-fix-agent              @test-fix-agent            @test-fix-agent
+```
 
 ### Coordinator Role
 
 This command is a **pure planning coordinator**:
-- Does NOT analyze code directly
-- Does NOT generate tests or documentation
-- Does NOT execute tests or apply fixes
-- Does NOT handle test failures or iterations
 - ONLY coordinates slash commands to generate task JSON files
-- Parses outputs to pass data between phases
-- Creates independent test workflow session
-- **All execution delegated to `/workflow:test-cycle-execute`**
+- Does NOT analyze code, generate tests, execute tests, or apply fixes
+- All execution delegated to `/workflow:test-cycle-execute`
 
-**Task Attachment Model**:
-- SlashCommand execute **expands workflow** by attaching sub-tasks to current TodoWrite
-- When executing a sub-command (e.g., `/workflow:tools:test-context-gather`), its internal tasks are attached to the orchestrator's TodoWrite
-- Orchestrator **executes these attached tasks** sequentially
-- After completion, attached tasks are **collapsed** back to high-level phase summary
-- This is **task expansion**, not external delegation
+### Core Principles
 
-**Auto-Continue Mechanism**:
-- TodoList tracks current phase status and dynamically manages task attachment/collapse
-- When each phase finishes executing, automatically execute next pending phase
-- All phases run autonomously without user interaction
-- **⚠️ CONTINUOUS EXECUTION** - Do not stop until all phases complete
+| Principle | Description |
+|-----------|-------------|
+| **Session Isolation** | Creates independent `WFS-test-[slug]` session |
+| **Context-First** | Gathers implementation context via appropriate method |
+| **Format Reuse** | Creates standard `IMPL-*.json` tasks with `meta.type: "test-fix"` |
+| **Semantic CLI Selection** | CLI tool usage determined from user's task description |
+| **Automatic Detection** | Input pattern determines execution mode |
 
 ---
 
@@ -78,245 +49,156 @@ This command is a **pure planning coordinator**:
 ### Command Syntax
 
 ```bash
-# Basic syntax
 /workflow:test-fix-gen <INPUT>
 
-# Input
-<INPUT>            # Session ID, description, or file path
+# INPUT can be:
+# - Session ID: WFS-user-auth-v2
+# - Description: "Test the user authentication API"
+# - File path: ./docs/api-requirements.md
 ```
 
-**Note**: CLI tool usage is determined semantically from the task description. To request CLI execution, include it in your description (e.g., "use Codex for automated fixes").
+### Mode Detection
 
-### Usage Examples
+**Automatic mode detection** based on input pattern:
 
-#### Session Mode
 ```bash
-# Test validation for completed implementation
+if [[ "$input" == WFS-* ]]; then
+  MODE="session"  # Use test-context-gather
+else
+  MODE="prompt"   # Use context-gather
+fi
+```
+
+| Mode | Input Pattern | Context Source | Use Case |
+|------|--------------|----------------|----------|
+| **Session** | `WFS-xxx` | Source session summaries | Test validation for completed workflow |
+| **Prompt** | Text or file path | Direct codebase analysis | Ad-hoc test generation |
+
+### Examples
+
+```bash
+# Session Mode - test validation for completed implementation
 /workflow:test-fix-gen WFS-user-auth-v2
 
-# With semantic CLI request
-/workflow:test-fix-gen WFS-api-endpoints  # Add "use Codex" in description for automated fixes
-```
-
-#### Prompt Mode - Text Description
-```bash
-# Generate tests from feature description
+# Prompt Mode - text description
 /workflow:test-fix-gen "Test the user authentication API endpoints in src/auth/api.ts"
 
-# With CLI execution (semantic)
-/workflow:test-fix-gen "Test user registration and login flows, use Codex for automated fixes"
-```
-
-#### Prompt Mode - File Reference
-```bash
-# Generate tests from requirements file
+# Prompt Mode - file reference
 /workflow:test-fix-gen ./docs/api-requirements.md
+
+# With CLI tool preference (semantic detection)
+/workflow:test-fix-gen "Test user registration, use Codex for automated fixes"
 ```
 
-### Mode Comparison
-
-| Aspect | Session Mode | Prompt Mode |
-|--------|-------------|-------------|
-| **Phase 1** | Create `WFS-test-[source]` with `source_session_id` | Create `WFS-test-[slug]` without `source_session_id` |
-| **Phase 2** | `/workflow:tools:test-context-gather` | `/workflow:tools:context-gather` |
-| **Phase 3-5** | Identical | Identical |
-| **Context** | Source session summaries + artifacts | Direct codebase analysis |
-
 ---
 
-## Execution Flow
+## Execution Phases
 
-### Core Execution Rules
+### Execution Rules
 
-1. **Start Immediately**: First action is TodoWrite, second is execute Phase 1 session creation
+1. **Start Immediately**: First action is TodoWrite, second is Phase 1 execution
 2. **No Preliminary Analysis**: Do not read files before Phase 1
 3. **Parse Every Output**: Extract required data from each phase for next phase
 4. **Sequential Execution**: Each phase depends on previous phase's output
 5. **Complete All Phases**: Do not return until Phase 5 completes
-6. **Track Progress**: Update TodoWrite dynamically with task attachment/collapse pattern
-7. **Automatic Detection**: Mode auto-detected from input pattern
-8. **Semantic CLI Detection**: CLI tool usage determined from user's task description for Phase 4
-9. **Task Attachment Model**: SlashCommand execute **attaches** sub-tasks to current workflow. Orchestrator **executes** these attached tasks itself, then **collapses** them after completion
-10. **⚠️ CRITICAL: DO NOT STOP**: Continuous multi-phase workflow. After executing all attached tasks, immediately collapse them and execute next phase
+6. **⚠️ CONTINUOUS EXECUTION**: Do not stop between phases
 
-### 5-Phase Execution
-
-#### Phase 1: Create Test Session
-
-**Step 1.0: Load Source Session Intent (Session Mode Only)** - Preserve user's original task description for semantic CLI selection
+### Phase 1: Create Test Session
 
+**Execute**:
 ```javascript
-// Session Mode: Read source session metadata to get original task description
+// Session Mode - preserve original task description
 Read(".workflow/active/[sourceSessionId]/workflow-session.json")
-// OR if context-package exists:
-Read(".workflow/active/[sourceSessionId]/.process/context-package.json")
+SlashCommand("/workflow:session:start --type test --new \"Test validation for [sourceSessionId]: [originalTaskDescription]\"")
 
-// Extract: metadata.task_description or project/description field
-// This preserves user's CLI tool preferences (e.g., "use Codex for fixes")
+// Prompt Mode - use user's description directly
+SlashCommand("/workflow:session:start --type test --new \"Test generation for: [description]\"")
 ```
 
-**Step 1.1: Execute** - Create test workflow session with preserved intent
-
-```javascript
-// Session Mode - Include original task description to enable semantic CLI selection
-SlashCommand(command="/workflow:session:start --type test --new \"Test validation for [sourceSessionId]: [originalTaskDescription]\"")
-
-// Prompt Mode - User's description already contains their intent
-SlashCommand(command="/workflow:session:start --type test --new \"Test generation for: [description]\"")
-```
-
-**Input**: User argument (session ID, description, or file path)
-
-**Expected Behavior**:
-- Creates new session: `WFS-test-[slug]`
-- Writes `workflow-session.json` metadata with `type: "test"`
-  - **Session Mode**: Additionally includes `source_session_id: "[sourceId]"`, description with original user intent
-  - **Prompt Mode**: Uses user's description (already contains intent)
-- Returns new session ID
-
-**Parse Output**:
-- Extract: `testSessionId` (pattern: `WFS-test-[slug]`)
+**Output**: `testSessionId` (pattern: `WFS-test-[slug]`)
 
 **Validation**:
-- **Session Mode**: Source session exists with completed IMPL tasks
-- **Both Modes**: New test session directory created with metadata
-
-**TodoWrite**: Mark phase 1 completed, phase 2 in_progress
+- Session Mode: Source session exists with completed IMPL tasks
+- Both Modes: New test session directory created with metadata
 
 ---
 
-#### Phase 2: Gather Test Context
-
-**Step 2.1: Execute** - Gather test context via appropriate method
+### Phase 2: Gather Test Context
 
+**Execute**:
 ```javascript
 // Session Mode
-SlashCommand(command="/workflow:tools:test-context-gather --session [testSessionId]")
+SlashCommand("/workflow:tools:test-context-gather --session [testSessionId]")
 
 // Prompt Mode
-SlashCommand(command="/workflow:tools:context-gather --session [testSessionId] \"[task_description]\"")
+SlashCommand("/workflow:tools:context-gather --session [testSessionId] \"[task_description]\"")
 ```
 
-**Input**: `testSessionId` from Phase 1
-
 **Expected Behavior**:
-- **Session Mode**:
-  - Load source session implementation context and summaries
-  - Analyze test coverage using MCP tools
-  - Identify files requiring tests
-- **Prompt Mode**:
-  - Analyze codebase based on description
-  - Identify relevant files and dependencies
-- Detect test framework and conventions
-- Generate context package JSON
+- **Session Mode**: Load source session summaries, analyze test coverage
+- **Prompt Mode**: Analyze codebase from description
+- Both: Detect test framework, generate context package
 
-**Parse Output**:
-- Extract: `contextPath` (pattern: `.workflow/[testSessionId]/.process/[test-]context-package.json`)
-
-**Validation**:
-- Context package created with coverage analysis
-- Test framework detected
-- Test conventions documented
-
-**TodoWrite**: Mark phase 2 completed, phase 3 in_progress
+**Output**: `contextPath` (pattern: `.workflow/[testSessionId]/.process/[test-]context-package.json`)
 
 ---
 
-#### Phase 3: Test Generation Analysis
-
-**Step 3.1: Execute** - Generate test requirements using Gemini
+### Phase 3: Test Generation Analysis
 
+**Execute**:
 ```javascript
-SlashCommand(command="/workflow:tools:test-concept-enhanced --session [testSessionId] --context [contextPath]")
+SlashCommand("/workflow:tools:test-concept-enhanced --session [testSessionId] --context [contextPath]")
 ```
 
-**Input**:
-- `testSessionId` from Phase 1
-- `contextPath` from Phase 2
-
 **Expected Behavior**:
-- Use Gemini to analyze coverage gaps and implementation
-- Study existing test patterns and conventions
-- Generate **multi-layered test requirements** (L0: Static Analysis, L1: Unit, L2: Integration, L3: E2E)
-- Design test generation strategy with quality assurance criteria
-- Generate `TEST_ANALYSIS_RESULTS.md` with structured test layers
+- Use Gemini to analyze coverage gaps
+- Generate **multi-layered test requirements**:
+  - L0: Static Analysis (linting, type checking, anti-pattern detection)
+  - L1: Unit Tests (happy path, negative path, edge cases: null/undefined/empty)
+  - L2: Integration Tests (component interactions, failure scenarios: timeout/unavailable)
+  - L3: E2E Tests (user journeys, if applicable)
+- Generate `TEST_ANALYSIS_RESULTS.md`
 
-**Enhanced Test Requirements**:
-For each targeted file/function, Gemini MUST generate:
-1. **L0: Static Analysis Requirements**:
-   - Linting rules to enforce (ESLint, Prettier)
-   - Type checking requirements (TypeScript)
-   - Anti-pattern detection rules
-2. **L1: Unit Test Requirements**:
-   - Happy path scenarios (valid inputs → expected outputs)
-   - Negative path scenarios (invalid inputs → error handling)
-   - Edge cases (null, undefined, 0, empty strings/arrays)
-3. **L2: Integration Test Requirements**:
-   - Successful component interactions
-   - Failure handling scenarios (service unavailable, timeout)
-4. **L3: E2E Test Requirements** (if applicable):
-   - Key user journeys from start to finish
+**Output**: `.workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md`
 
-**Parse Output**:
-- Verify `.workflow/[testSessionId]/.process/TEST_ANALYSIS_RESULTS.md` created
-
-**Validation**:
-- TEST_ANALYSIS_RESULTS.md exists with complete sections:
-  - Coverage Assessment
-  - Test Framework & Conventions
-  - **Multi-Layered Test Plan** (NEW):
-    - L0: Static Analysis Plan
-    - L1: Unit Test Plan
-    - L2: Integration Test Plan
-    - L3: E2E Test Plan (if applicable)
-  - Test Requirements by File (with layer annotations)
-  - Test Generation Strategy
-  - Implementation Targets
-  - Quality Assurance Criteria (NEW):
-    - Minimum coverage thresholds
-    - Required test types per function
-    - Acceptance criteria for test quality
-  - Success Criteria
-
-**TodoWrite**: Mark phase 3 completed, phase 4 in_progress
+**Validation** - TEST_ANALYSIS_RESULTS.md must include:
+- Coverage Assessment
+- Test Framework & Conventions
+- Multi-Layered Test Plan (L0-L3)
+- Test Requirements by File (with layer annotations)
+- Test Generation Strategy
+- Implementation Targets
+- Quality Assurance Criteria:
+  - Minimum coverage thresholds
+  - Required test types per function
+  - Acceptance criteria for test quality
+- Success Criteria
 
 ---
 
-#### Phase 4: Generate Test Tasks
-
-**Step 4.1: Execute** - Generate test task JSONs
+### Phase 4: Generate Test Tasks
 
+**Execute**:
 ```javascript
-SlashCommand(command="/workflow:tools:test-task-generate --session [testSessionId]")
+SlashCommand("/workflow:tools:test-task-generate --session [testSessionId]")
 ```
 
-**Input**:
-- `testSessionId` from Phase 1
-
-**Note**: CLI tool usage is determined semantically from user's task description.
-
 **Expected Behavior**:
-- Parse TEST_ANALYSIS_RESULTS.md from Phase 3 (multi-layered test plan)
-- Generate **minimum 3 task JSON files** (expandable based on complexity):
-  - **IMPL-001.json**: Test Understanding & Generation (`@code-developer`)
-  - **IMPL-001.5-review.json**: Test Quality Gate (`@test-fix-agent`) ← **NEW**
-  - **IMPL-002.json**: Test Execution & Fix Cycle (`@test-fix-agent`)
-  - **IMPL-003+**: Additional tasks if needed for complex projects
-- Generate `IMPL_PLAN.md` with multi-layered test strategy
-- Generate `TODO_LIST.md` with task checklist
+- Parse TEST_ANALYSIS_RESULTS.md
+- Generate **minimum 4 task JSON files**:
+  - IMPL-001.json (Test Generation)
+  - IMPL-001.3-validation.json (Code Validation Gate)
+  - IMPL-001.5-review.json (Test Quality Gate)
+  - IMPL-002.json (Test Execution & Fix)
+- Generate IMPL_PLAN.md and TODO_LIST.md
 
-**Parse Output**:
-- Verify `.workflow/[testSessionId]/.task/IMPL-001.json` exists
-- Verify `.workflow/[testSessionId]/.task/IMPL-001.5-review.json` exists ← **NEW**
-- Verify `.workflow/[testSessionId]/.task/IMPL-002.json` exists
-- Verify additional `.task/IMPL-*.json` if applicable
+**Output Validation**:
+- Verify all `.task/IMPL-*.json` files exist
 - Verify `IMPL_PLAN.md` and `TODO_LIST.md` created
 
-**TodoWrite**: Mark phase 4 completed, phase 5 in_progress
-
 ---
 
-#### Phase 5: Return Summary
+### Phase 5: Return Summary
 
 **Return to User**:
 ```
@@ -328,47 +210,195 @@ Test Session: [testSessionId]
 
 Tasks Created:
 - IMPL-001: Test Understanding & Generation (@code-developer)
-- IMPL-001.5: Test Quality Gate - Static Analysis & Coverage (@test-fix-agent) ← NEW
+- IMPL-001.3: Code Validation Gate - AI Error Detection (@test-fix-agent)
+- IMPL-001.5: Test Quality Gate - Static Analysis & Coverage (@test-fix-agent)
 - IMPL-002: Test Execution & Fix Cycle (@test-fix-agent)
-[- IMPL-003+: Additional tasks if applicable]
 
-Test Strategy: Multi-Layered (L0: Static, L1: Unit, L2: Integration, L3: E2E)
-Test Framework: [detected framework]
-Test Files to Generate: [count]
 Quality Thresholds:
+- Code Validation: Zero compilation/import/variable errors
 - Minimum Coverage: 80%
 - Static Analysis: Zero critical issues
-Max Fix Iterations: 5
-Fix Mode: [Manual|Codex Automated]
+- Max Fix Iterations: 5
 
 Review artifacts:
 - Test plan: .workflow/[testSessionId]/IMPL_PLAN.md
 - Task list: .workflow/[testSessionId]/TODO_LIST.md
+- Validation config: ~/.claude/workflows/test-quality-config.json
 
 CRITICAL - Next Steps:
-1. Review IMPL_PLAN.md (now includes multi-layered test strategy)
+1. Review IMPL_PLAN.md
 2. **MUST execute: /workflow:test-cycle-execute**
-   - This command only generated task JSON files
-   - Test execution and fix iterations happen in test-cycle-execute
-   - Do NOT attempt to run tests or fixes in main workflow
-3. IMPL-001.5 will validate test quality before fix cycle begins
 ```
 
-**TodoWrite**: Mark phase 5 completed
-
-**BOUNDARY NOTE**:
-- Command completes here - only task JSON files generated
-- All test execution, failure detection, CLI analysis, fix generation happens in `/workflow:test-cycle-execute`
-- This command does NOT handle test failures or apply fixes
-
 ---
 
+## Task Specifications
+
+Generates minimum 4 tasks (expandable for complex projects):
+
+### IMPL-001: Test Understanding & Generation
+
+| Field | Value |
+|-------|-------|
+| **Agent** | `@code-developer` |
+| **Type** | `test-gen` |
+| **Depends On** | None |
+
+**Purpose**: Understand source implementation and generate test files following multi-layered test strategy
+
+**Execution Flow**:
+1. **Understand**: Load TEST_ANALYSIS_RESULTS.md, analyze requirements (L0-L3)
+2. **Generate**: Create test files (unit, integration, E2E as applicable)
+3. **Verify**: Check test completeness, meaningful assertions, no anti-patterns
+
+---
+
+### IMPL-001.3: Code Validation Gate
+
+| Field | Value |
+|-------|-------|
+| **Agent** | `@test-fix-agent` |
+| **Type** | `code-validation` |
+| **Depends On** | `["IMPL-001"]` |
+| **Config** | `~/.claude/workflows/test-quality-config.json` |
+
+**Purpose**: Validate AI-generated code for common errors before test execution
+
+**Validation Phases**:
+| Phase | Checks |
+|-------|--------|
+| L0.1 Compilation | `tsc --noEmit` - syntax errors, module resolution |
+| L0.2 Imports | Unresolved/hallucinated packages, circular deps, duplicates |
+| L0.3 Variables | Redeclaration, scope conflicts, undefined/unused vars |
+| L0.4 Types | Type mismatches, missing definitions, `any` abuse |
+| L0.5 AI-Specific | Placeholder code, mock in production, naming inconsistency |
+
+**Gate Decision**:
+| Decision | Condition | Action |
+|----------|-----------|--------|
+| **PASS** | critical=0, error≤3, warning≤10 | Proceed to IMPL-001.5 |
+| **SOFT_FAIL** | Fixable issues | Auto-fix and retry (max 2) |
+| **HARD_FAIL** | critical>0 OR max retries | Block with report |
+
+**Acceptance Criteria**:
+- Zero compilation errors
+- All imports resolvable
+- No variable redeclarations
+- No undefined variable usage
+
+**Output**: `.process/code-validation-report.md`, `.process/code-validation-report.json`
+
+---
+
+### IMPL-001.5: Test Quality Gate
+
+| Field | Value |
+|-------|-------|
+| **Agent** | `@test-fix-agent` |
+| **Type** | `test-quality-review` |
+| **Depends On** | `["IMPL-001", "IMPL-001.3"]` |
+| **Config** | `~/.claude/workflows/test-quality-config.json` |
+
+**Purpose**: Validate test quality before entering fix cycle
+
+**Execution Flow**:
+1. **Static Analysis**: Lint test files, check anti-patterns (empty tests, missing assertions)
+2. **Coverage Analysis**: Calculate coverage percentage, identify gaps
+3. **Quality Metrics**: Verify thresholds, negative test coverage
+4. **Gate Decision**: PASS (proceed) or FAIL (loop back to IMPL-001)
+
+**Acceptance Criteria**:
+- Coverage ≥ 80%
+- Zero critical anti-patterns
+- All targeted functions have unit tests
+- Each public API has error handling test
+
+**Failure Handling**:
+If quality gate fails:
+1. Generate detailed feedback report (`.process/test-quality-report.md`)
+2. Update IMPL-001 task with specific improvement requirements
+3. Trigger IMPL-001 re-execution with enhanced context
+4. Maximum 2 quality gate retries before escalating to user
+
+**Output**: `.process/test-quality-report.md`
+
+---
+
+### IMPL-002: Test Execution & Fix Cycle
+
+| Field | Value |
+|-------|-------|
+| **Agent** | `@test-fix-agent` |
+| **Type** | `test-fix` |
+| **Depends On** | `["IMPL-001", "IMPL-001.3", "IMPL-001.5"]` |
+
+**Purpose**: Execute tests and trigger orchestrator-managed fix cycles
+
+**Note**: The agent executes tests and reports results. The `test-cycle-execute` orchestrator manages all fix iterations.
+
+**Cycle Pattern** (orchestrator-managed):
+```
+test → gemini_diagnose → fix (agent or CLI) → retest
+```
+
+**Tools Configuration** (orchestrator-controlled):
+- Gemini for analysis with bug-fix template → surgical fix suggestions
+- Agent fix application (default) OR CLI if `command` field present in implementation_approach
+
+**Exit Conditions**:
+- Success: All tests pass
+- Failure: Max iterations reached (5)
+
+---
+
+### IMPL-003+: Additional Tasks (Optional)
+
+**Scenarios**:
+- Large projects requiring per-module test generation
+- Separate integration vs unit test tasks
+- Specialized test types (performance, security)
+
+---
+
+## Output Artifacts
+
+### Directory Structure
+
+```
+.workflow/active/WFS-test-[session]/
+├── workflow-session.json              # Session metadata
+├── IMPL_PLAN.md                       # Test generation and execution strategy
+├── TODO_LIST.md                       # Task checklist
+├── .task/
+│   ├── IMPL-001.json                  # Test understanding & generation
+│   ├── IMPL-001.3-validation.json     # Code validation gate
+│   ├── IMPL-001.5-review.json         # Test quality gate
+│   ├── IMPL-002.json                  # Test execution & fix cycle
+│   └── IMPL-*.json                    # Additional tasks (if applicable)
+└── .process/
+    ├── [test-]context-package.json    # Context and coverage analysis
+    ├── TEST_ANALYSIS_RESULTS.md       # Test requirements and strategy
+    ├── code-validation-report.md      # Code validation findings
+    ├── code-validation-report.json    # Machine-readable findings
+    └── test-quality-report.md         # Test quality gate findings
+```
+
+### Session Metadata
+
+**File**: `workflow-session.json`
+
+| Mode | Fields |
+|------|--------|
+| **Session** | `type: "test"`, `source_session_id: "[sourceId]"` |
+| **Prompt** | `type: "test"` (no source_session_id) |
+
+---
+
+## Orchestration Patterns
+
 ### TodoWrite Pattern
 
-**Core Concept**: Dynamic task attachment and collapse for test-fix-gen workflow with dual-mode support (Session Mode and Prompt Mode).
-
-#### Initial TodoWrite Structure
-
+**Initial Structure**:
 ```json
 [
   {"content": "Phase 1: Create Test Session", "status": "in_progress", "activeForm": "Creating test session"},
@@ -379,269 +409,33 @@ CRITICAL - Next Steps:
 ]
 ```
 
-#### Key Principles
+### Task Attachment Model
 
-1. **Task Attachment** (when SlashCommand executed):
-   - Sub-command's internal tasks are **attached** to orchestrator's TodoWrite
-   - Example - Phase 2 with sub-tasks:
-   ```json
-   [
-     {"content": "Phase 1: Create Test Session", "status": "completed", "activeForm": "Creating test session"},
-     {"content": "Phase 2: Gather Test Context", "status": "in_progress", "activeForm": "Gathering test context"},
-     {"content": "  → Load context and analyze coverage", "status": "in_progress", "activeForm": "Loading context"},
-     {"content": "  → Detect test framework and conventions", "status": "pending", "activeForm": "Detecting framework"},
-     {"content": "  → Generate context package", "status": "pending", "activeForm": "Generating context"},
-     {"content": "Phase 3: Test Generation Analysis", "status": "pending", "activeForm": "Analyzing test generation"},
-     {"content": "Phase 4: Generate Test Tasks", "status": "pending", "activeForm": "Generating test tasks"},
-     {"content": "Phase 5: Return Summary", "status": "pending", "activeForm": "Completing"}
-   ]
-   ```
+SlashCommand execution follows **attach → execute → collapse** pattern:
 
-2. **Task Collapse** (after sub-tasks complete):
-   - Remove detailed sub-tasks from TodoWrite
-   - **Collapse** to high-level phase summary
-   - Example - Phase 2 completed:
-   ```json
-   [
-     {"content": "Phase 1: Create Test Session", "status": "completed", "activeForm": "Creating test session"},
-     {"content": "Phase 2: Gather Test Context", "status": "completed", "activeForm": "Gathering test context"},
-     {"content": "Phase 3: Test Generation Analysis", "status": "in_progress", "activeForm": "Analyzing test generation"},
-     {"content": "Phase 4: Generate Test Tasks", "status": "pending", "activeForm": "Generating test tasks"},
-     {"content": "Phase 5: Return Summary", "status": "pending", "activeForm": "Completing"}
-   ]
-   ```
+1. **Attach**: Sub-command's tasks are attached to orchestrator's TodoWrite
+2. **Execute**: Orchestrator executes attached tasks sequentially
+3. **Collapse**: After completion, sub-tasks collapse to phase summary
 
-3. **Continuous Execution**:
-   - After collapse, automatically proceed to next pending phase
-   - No user intervention required between phases
-   - TodoWrite dynamically reflects current execution state
-
-**Lifecycle Summary**: Initial pending tasks → Phase executed (tasks ATTACHED with mode-specific context gathering) → Sub-tasks executed sequentially → Phase completed (tasks COLLAPSED to summary) → Next phase begins → Repeat until all phases complete.
-
-#### Test-Fix-Gen Specific Features
-
-- **Dual-Mode Support**: Automatic mode detection based on input pattern
-  - **Session Mode**: Input pattern `WFS-*` → uses `test-context-gather` for cross-session context
-  - **Prompt Mode**: Text or file path → uses `context-gather` for direct codebase analysis
-- **Phase 2**: Mode-specific context gathering (session summaries vs codebase analysis)
-- **Phase 3**: Multi-layered test requirements analysis (L0: Static, L1: Unit, L2: Integration, L3: E2E)
-- **Phase 4**: Multi-task generation with quality gate (IMPL-001, IMPL-001.5-review, IMPL-002)
-- **Fix Mode Configuration**: CLI tool usage determined semantically from user's task description
-
-
----
-
-## Task Specifications
-
-Generates minimum 3 tasks (expandable for complex projects):
-
-### IMPL-001: Test Understanding & Generation
-
-**Agent**: `@code-developer`
-
-**Purpose**: Understand source implementation and generate test files following multi-layered test strategy
-
-**Task Configuration**:
-- Task ID: `IMPL-001`
-- `meta.type: "test-gen"`
-- `meta.agent: "@code-developer"`
-- `context.requirements`: Understand source implementation and generate tests across all layers (L0-L3)
-- `flow_control.target_files`: Test files to create from TEST_ANALYSIS_RESULTS.md section 5
-
-**Execution Flow**:
-1. **Understand Phase**:
-   - Load TEST_ANALYSIS_RESULTS.md and test context
-   - Understand source code implementation patterns
-   - Analyze multi-layered test requirements (L0: Static, L1: Unit, L2: Integration, L3: E2E)
-   - Identify test scenarios, edge cases, and error paths
-2. **Generation Phase**:
-   - Generate L1 unit test files following existing patterns
-   - Generate L2 integration test files (if applicable)
-   - Generate L3 E2E test files (if applicable)
-   - Ensure test coverage aligns with multi-layered requirements
-   - Include both positive and negative test cases
-3. **Verification Phase**:
-   - Verify test completeness and correctness
-   - Ensure each test has meaningful assertions
-   - Check for test anti-patterns (tests without assertions, overly broad mocks)
-
-### IMPL-001.5: Test Quality Gate ← **NEW**
-
-**Agent**: `@test-fix-agent`
-
-**Purpose**: Validate test quality before entering fix cycle - prevent "hollow tests" from becoming the source of truth
-
-**Task Configuration**:
-- Task ID: `IMPL-001.5-review`
-- `meta.type: "test-quality-review"`
-- `meta.agent: "@test-fix-agent"`
-- `context.depends_on: ["IMPL-001"]`
-- `context.requirements`: Validate generated tests meet quality standards
-- `context.quality_config`: Load from `.claude/workflows/test-quality-config.json`
-
-**Execution Flow**:
-1. **L0: Static Analysis**:
-   - Run linting on test files (ESLint, Prettier)
-   - Check for test anti-patterns:
-     - Tests without assertions (`expect()` missing)
-     - Empty test bodies (`it('should...', () => {})`)
-     - Disabled tests without justification (`it.skip`, `xit`)
-   - Verify TypeScript type safety (if applicable)
-2. **Coverage Analysis**:
-   - Run coverage analysis on generated tests
-   - Calculate coverage percentage for target source files
-   - Identify uncovered branches and edge cases
-3. **Test Quality Metrics**:
-   - Verify minimum coverage threshold met (default: 80%)
-   - Verify all critical functions have negative test cases
-   - Verify integration tests cover key component interactions
-4. **Quality Gate Decision**:
-   - **PASS**: Coverage ≥ 80%, zero critical anti-patterns → Proceed to IMPL-002
-   - **FAIL**: Coverage < 80% OR critical anti-patterns found → Loop back to IMPL-001 with feedback
-
-**Acceptance Criteria**:
-- Static analysis: Zero critical issues
-- Test coverage: ≥ 80% for target files
-- Test completeness: All targeted functions have unit tests
-- Negative test coverage: Each public API has at least one error handling test
-- Integration coverage: Key component interactions have integration tests (if applicable)
-
-**Failure Handling**:
-If quality gate fails:
-1. Generate detailed feedback report (`.process/test-quality-report.md`)
-2. Update IMPL-001 task with specific improvement requirements
-3. Trigger IMPL-001 re-execution with enhanced context
-4. Maximum 2 quality gate retries before escalating to user
-
-### IMPL-002: Test Execution & Fix Cycle
-
-**Agent**: `@test-fix-agent`
-
-**Purpose**: Execute initial tests and trigger orchestrator-managed fix cycles
-
-**Note**: This task executes tests and reports results. The test-cycle-execute orchestrator manages all fix iterations, CLI analysis, and fix task generation.
-
-**Task Configuration**:
-- Task ID: `IMPL-002`
-- `meta.type: "test-fix"`
-- `meta.agent: "@test-fix-agent"`
-- `context.depends_on: ["IMPL-001"]`
-- `context.requirements`: Execute and fix tests
-
-**Test-Fix Cycle Specification**:
-**Note**: This specification describes what test-cycle-execute orchestrator will do. The agent only executes single tasks.
-- **Cycle Pattern** (orchestrator-managed): test → gemini_diagnose → fix (agent or CLI) → retest
-- **Tools Configuration** (orchestrator-controlled):
-  - Gemini for analysis with bug-fix template → surgical fix suggestions
-  - Agent fix application (default) OR CLI if `command` field present in implementation_approach
-- **Exit Conditions** (orchestrator-enforced):
-  - Success: All tests pass
-  - Failure: Max iterations reached (5)
-
-**Execution Flow**:
-1. **Phase 1**: Initial test execution
-2. **Phase 2**: Iterative Gemini diagnosis + manual/Codex fixes
-3. **Phase 3**: Final validation and certification
-
-### IMPL-003+: Additional Tasks (Optional)
-
-**Scenarios for Multiple Tasks**:
-- Large projects requiring per-module test generation
-- Separate integration vs unit test tasks
-- Specialized test types (performance, security, etc.)
-
-**Agent**: `@code-developer` or specialized agents based on requirements
-
----
-
-## Artifacts & Output
-
-### Output Files Structure
-
-Created in `.workflow/active/WFS-test-[session]/`:
-
-```
-WFS-test-[session]/
-├── workflow-session.json          # Session metadata
-├── IMPL_PLAN.md                   # Test generation and execution strategy
-├── TODO_LIST.md                   # Task checklist
-├── .task/
-│   ├── IMPL-001.json              # Test understanding & generation
-│   ├── IMPL-002.json              # Test execution & fix cycle
-│   └── IMPL-*.json                # Additional tasks (if applicable)
-└── .process/
-    ├── [test-]context-package.json # Context and coverage analysis
-    └── TEST_ANALYSIS_RESULTS.md    # Test requirements and strategy
+**Example - Phase 2 Expanded**:
+```json
+[
+  {"content": "Phase 1: Create Test Session", "status": "completed"},
+  {"content": "Phase 2: Gather Test Context", "status": "in_progress"},
+  {"content": "  → Load context and analyze coverage", "status": "in_progress"},
+  {"content": "  → Detect test framework and conventions", "status": "pending"},
+  {"content": "  → Generate context package", "status": "pending"},
+  {"content": "Phase 3: Test Generation Analysis", "status": "pending"},
+  ...
+]
 ```
 
-### Session Metadata
+### Auto-Continue Mechanism
 
-**File**: `workflow-session.json`
-
-**Session Mode** includes:
-- `type: "test"` (set by session:start --type test)
-- `source_session_id: "[sourceSessionId]"` (enables automatic cross-session context)
-
-**Prompt Mode** includes:
-- `type: "test"` (set by session:start --type test)
-- No `source_session_id` field
-
-### Execution Flow Diagram
-
-```
-Test-Fix-Gen Workflow Orchestrator (Dual-Mode Support)
-│
-├─ Phase 1: Create Test Session
-│  ├─ Session Mode: /workflow:session:start --new (with source_session_id)
-│  └─ Prompt Mode: /workflow:session:start --new (without source_session_id)
-│     └─ Returns: testSessionId (WFS-test-[slug])
-│
-├─ Phase 2: Gather Context                                   ← ATTACHED (3 tasks)
-│  ├─ Session Mode: /workflow:tools:test-context-gather
-│  │  └─ Load source session summaries + analyze coverage
-│  └─ Prompt Mode: /workflow:tools:context-gather
-│     └─ Analyze codebase from description
-│     ├─ Phase 2.1: Load context and analyze coverage
-│     ├─ Phase 2.2: Detect test framework and conventions
-│     └─ Phase 2.3: Generate context package
-│     └─ Returns: [test-]context-package.json                ← COLLAPSED
-│
-├─ Phase 3: Test Generation Analysis                         ← ATTACHED (3 tasks)
-│  └─ /workflow:tools:test-concept-enhanced
-│     ├─ Phase 3.1: Analyze coverage gaps with Gemini
-│     ├─ Phase 3.2: Study existing test patterns
-│     └─ Phase 3.3: Generate test generation strategy
-│     └─ Returns: TEST_ANALYSIS_RESULTS.md                   ← COLLAPSED
-│
-├─ Phase 4: Generate Test Tasks                              ← ATTACHED (3 tasks)
-│  └─ /workflow:tools:test-task-generate
-│     ├─ Phase 4.1: Parse TEST_ANALYSIS_RESULTS.md
-│     ├─ Phase 4.2: Generate task JSONs (IMPL-001, IMPL-002)
-│     └─ Phase 4.3: Generate IMPL_PLAN.md and TODO_LIST.md
-│     └─ Returns: Task JSONs and plans                       ← COLLAPSED
-│
-└─ Phase 5: Return Summary
-   └─ Command ends, control returns to user
-
-Artifacts Created:
-├── .workflow/active/WFS-test-[session]/
-│   ├── workflow-session.json
-│   ├── IMPL_PLAN.md
-│   ├── TODO_LIST.md
-│   ├── .task/
-│   │   ├── IMPL-001.json (test understanding & generation)
-│   │   ├── IMPL-002.json (test execution & fix cycle)
-│   │   └── IMPL-003.json (optional: test review & certification)
-│   └── .process/
-│       ├── [test-]context-package.json
-│       └── TEST_ANALYSIS_RESULTS.md
-
-Key Points:
-• ← ATTACHED: SlashCommand attaches sub-tasks to orchestrator TodoWrite
-• ← COLLAPSED: Sub-tasks executed and collapsed to phase summary
-• Dual-Mode: Session Mode and Prompt Mode share same attachment pattern
-• Command Boundary: Execution delegated to /workflow:test-cycle-execute
-```
+- TodoList tracks current phase status
+- When phase completes, automatically execute next pending phase
+- All phases run autonomously without user interaction
+- **⚠️ Do not stop until all phases complete**
 
 ---
 
@@ -651,49 +445,50 @@ Key Points:
 
 | Phase | Error Condition | Action |
 |-------|----------------|--------|
-| 1 | Source session not found (session mode) | Return error with source session ID |
-| 1 | No completed IMPL tasks (session mode) | Return error, source incomplete |
+| 1 | Source session not found | Return error with session ID |
+| 1 | No completed IMPL tasks | Return error, source incomplete |
 | 2 | Context gathering failed | Return error, check source artifacts |
 | 3 | Gemini analysis failed | Return error, check context package |
-| 4 | Task generation failed | Retry once, then return error with details |
+| 4 | Task generation failed | Retry once, then return error |
 
 ### Best Practices
 
-1. **Before Running**:
-   - Ensure implementation is complete (session mode: check summaries exist)
-   - Commit all implementation changes
-   - Review source code quality
+**Before Running**:
+- Ensure implementation is complete (session mode: check summaries exist)
+- Commit all implementation changes
 
-2. **After Running**:
-   - Review generated `IMPL_PLAN.md` before execution
-   - Check `TEST_ANALYSIS_RESULTS.md` for completeness
-   - Verify task dependencies in `TODO_LIST.md`
+**After Running**:
+- Review `IMPL_PLAN.md` before execution
+- Check `TEST_ANALYSIS_RESULTS.md` for completeness
+- Verify task dependencies in `TODO_LIST.md`
 
-3. **During Execution**:
-   - Monitor iteration logs in `.process/fix-iteration-*`
-   - Track progress with `/workflow:status`
-   - Review Gemini diagnostic outputs
+**During Execution** (in test-cycle-execute):
+- Monitor iteration logs in `.process/fix-iteration-*`
+- Track progress with `/workflow:status`
+- Review Gemini diagnostic outputs
 
-4. **Mode Selection**:
-   - Use **Session Mode** for completed workflow validation
-   - Use **Prompt Mode** for ad-hoc test generation
-   - Include "use Codex" in description for autonomous fix application
+**Mode Selection**:
+- **Session Mode**: For completed workflow validation
+- **Prompt Mode**: For ad-hoc test generation
+- Include "use Codex" in description for autonomous fix application
 
-## Related Commands
+### Related Commands
 
-**Prerequisite Commands**:
-- `/workflow:plan` or `/workflow:execute` - Complete implementation session (for Session Mode)
-- None for Prompt Mode (ad-hoc test generation)
+**Prerequisites**:
+- `/workflow:plan` or `/workflow:execute` - Complete implementation (Session Mode)
+- None for Prompt Mode
 
-**Called by This Command** (5 phases):
-- `/workflow:session:start` - Phase 1: Create independent test workflow session
-- `/workflow:tools:test-context-gather` - Phase 2 (Session Mode): Gather source session context
-- `/workflow:tools:context-gather` - Phase 2 (Prompt Mode): Analyze codebase directly
-- `/workflow:tools:test-concept-enhanced` - Phase 3: Generate test requirements using Gemini
-- `/workflow:tools:test-task-generate` - Phase 4: Generate test task JSONs (CLI tool usage determined semantically)
+**Called by This Command**:
+- `/workflow:session:start` - Phase 1
+- `/workflow:tools:test-context-gather` - Phase 2 (Session Mode)
+- `/workflow:tools:context-gather` - Phase 2 (Prompt Mode)
+- `/workflow:tools:test-concept-enhanced` - Phase 3
+- `/workflow:tools:test-task-generate` - Phase 4
+
+**Validation Commands** (invoked during test-cycle-execute):
+- `/workflow:tools:code-validation-gate` - IMPL-001.3
 
 **Follow-up Commands**:
-- `/workflow:status` - Review generated test tasks
-- `/workflow:test-cycle-execute` - Execute test generation and iterative fix cycles
-- `/workflow:execute` - Standard execution of generated test tasks
-
+- `/workflow:status` - Review generated tasks
+- `/workflow:test-cycle-execute` - Execute test workflow
+- `/workflow:execute` - Standard task execution
diff --git a/.claude/commands/workflow/tools/code-validation-gate.md b/.claude/commands/workflow/tools/code-validation-gate.md
new file mode 100644
index 00000000..7a7a21a7
--- /dev/null
+++ b/.claude/commands/workflow/tools/code-validation-gate.md
@@ -0,0 +1,391 @@
+---
+name: code-validation-gate
+description: Validate AI-generated code for common errors (imports, variables, types) before test execution
+argument-hint: "--session WFS-test-session-id [--fix] [--strict]"
+examples:
+  - /workflow:tools:code-validation-gate --session WFS-test-auth
+  - /workflow:tools:code-validation-gate --session WFS-test-auth --fix
+  - /workflow:tools:code-validation-gate --session WFS-test-auth --strict
+---
+
+# Code Validation Gate Command
+
+## Overview
+
+Pre-test validation gate that checks AI-generated code for common errors before test execution. This prevents wasted test cycles on code with fundamental issues like import errors, variable conflicts, and type mismatches.
+
+## Core Philosophy
+
+- **Fail Fast**: Catch fundamental errors before expensive test execution
+- **AI-Aware**: Specifically targets common AI code generation mistakes
+- **Auto-Remediation**: Attempt safe fixes before failing
+- **Clear Feedback**: Provide actionable fix suggestions for manual intervention
+
+## Target Error Categories
+
+### L0.1: Compilation Errors
+- TypeScript compilation failures
+- Syntax errors
+- Module resolution failures
+
+### L0.2: Import Errors
+- Unresolved module imports (hallucinated packages)
+- Circular dependencies
+- Duplicate imports
+- Unused imports
+
+### L0.3: Variable Errors
+- Variable redeclaration
+- Scope conflicts (shadowing)
+- Undefined variable usage
+- Unused variables
+
+### L0.4: Type Errors (TypeScript)
+- Type mismatches
+- Missing type definitions
+- Excessive `any` usage
+- Implicit `any` types
+
+### L0.5: AI-Specific Patterns
+- Placeholder code (`// TODO: implement`)
+- Hallucinated package imports
+- Mock code in production files
+- Inconsistent naming patterns
+
+## Execution Process
+
+```
+Input Parsing:
+   ├─ Parse flags: --session (required), --fix, --strict
+   └─ Load test-quality-config.json
+
+Phase 1: Context Loading
+   ├─ Load session metadata
+   ├─ Identify target files (from IMPL-001 output or context-package)
+   └─ Detect project configuration (tsconfig, eslint, etc.)
+
+Phase 2: Validation Execution
+   ├─ L0.1: Run TypeScript compilation check
+   ├─ L0.2: Run import validation
+   ├─ L0.3: Run variable validation
+   ├─ L0.4: Run type validation
+   └─ L0.5: Run AI-specific checks
+
+Phase 3: Result Analysis
+   ├─ Aggregate all findings by severity
+   ├─ Calculate pass/fail status
+   └─ Generate fix suggestions
+
+Phase 4: Auto-Fix (if --fix enabled)
+   ├─ Apply safe auto-fixes (imports, formatting)
+   ├─ Re-run validation
+   └─ Report remaining issues
+
+Phase 5: Gate Decision
+   ├─ PASS: Proceed to IMPL-001.5
+   ├─ SOFT_FAIL: Auto-fix applied, needs re-validation
+   └─ HARD_FAIL: Block with detailed report
+```
+
+## Execution Lifecycle
+
+### Phase 1: Context Loading
+
+**Load session and identify validation targets.**
+
+```javascript
+// Load session metadata
+Read(".workflow/active/{session_id}/workflow-session.json")
+
+// Load context package for target files
+Read(".workflow/active/{session_id}/.process/context-package.json")
+// OR
+Read(".workflow/active/{session_id}/.process/test-context-package.json")
+
+// Identify files to validate:
+// 1. Source files from context.implementation_files
+// 2. Test files from IMPL-001 output (if exists)
+// 3. All modified files since session start
+```
+
+**Target File Discovery**:
+- Source files: `context.focus_paths` from context-package
+- Generated tests: `.workflow/active/{session_id}/.task/IMPL-001-output/`
+- All TypeScript/JavaScript in target directories
+
+### Phase 2: Validation Execution
+
+**Execute validation checks in order of dependency.**
+
+#### L0.1: TypeScript Compilation
+
+```bash
+# Primary check - catches most fundamental errors
+npx tsc --noEmit --skipLibCheck --project tsconfig.json 2>&1
+
+# Parse output for errors
+# Critical: Any compilation error blocks further validation
+```
+
+**Error Patterns**:
+```
+error TS2307: Cannot find module 'xxx'
+error TS2451: Cannot redeclare block-scoped variable 'xxx'
+error TS2322: Type 'xxx' is not assignable to type 'yyy'
+```
+
+#### L0.2: Import Validation
+
+```bash
+# Check for circular dependencies
+npx madge --circular --extensions ts,tsx,js,jsx {target_dirs}
+
+# ESLint import rules
+npx eslint --rule 'import/no-duplicates: error' --rule 'import/no-unresolved: error' {files}
+```
+
+**Hallucinated Package Check**:
+```javascript
+// Extract all imports from files
+// Verify each package exists in package.json or node_modules
+// Flag any unresolvable imports as "hallucinated"
+```
+
+#### L0.3: Variable Validation
+
+```bash
+# ESLint variable rules
+npx eslint --rule 'no-shadow: error' --rule 'no-undef: error' --rule 'no-redeclare: error' {files}
+```
+
+#### L0.4: Type Validation
+
+```bash
+# TypeScript strict checks
+npx tsc --noEmit --strict {files}
+
+# Check for any abuse
+npx eslint --rule '@typescript-eslint/no-explicit-any: warn' {files}
+```
+
+#### L0.5: AI-Specific Checks
+
+```bash
+# Check for placeholder code
+grep -rn "// TODO: implement\|// Add your code here\|throw new Error.*Not implemented" {files}
+
+# Check for mock code in production files
+grep -rn "jest\.mock\|sinon\.\|vi\.mock" {source_files_only}
+```
+
+### Phase 3: Result Analysis
+
+**Aggregate and categorize findings.**
+
+```javascript
+const findings = {
+  critical: [],   // Blocks all progress
+  error: [],      // Blocks with threshold
+  warning: []     // Advisory only
+};
+
+// Apply thresholds from config
+const config = loadConfig("test-quality-config.json");
+const thresholds = config.code_validation.severity_thresholds;
+
+// Gate decision
+if (findings.critical.length > thresholds.critical) {
+  decision = "HARD_FAIL";
+} else if (findings.error.length > thresholds.error) {
+  decision = "SOFT_FAIL";  // Try auto-fix
+} else {
+  decision = "PASS";
+}
+```
+
+### Phase 4: Auto-Fix (Optional)
+
+**Apply safe automatic fixes when --fix flag provided.**
+
+```bash
+# Safe fixes only
+npx eslint --fix --rule 'import/no-duplicates: error' --rule 'unused-imports/no-unused-imports: error' {files}
+
+# Re-run validation after fixes
+# Report what was fixed vs what remains
+```
+
+**Safe Fix Categories**:
+- Remove unused imports
+- Remove duplicate imports
+- Fix import ordering
+- Remove unused variables (with caution)
+- Formatting fixes
+
+**Unsafe (Manual Only)**:
+- Missing imports (need to determine correct package)
+- Type errors (need to understand intent)
+- Variable shadowing (need to understand scope intent)
+
+### Phase 5: Gate Decision
+
+**Determine next action based on results.**
+
+| Decision | Condition | Action |
+|----------|-----------|--------|
+| **PASS** | critical=0, error<=3, warning<=10 | Proceed to IMPL-001.5 |
+| **SOFT_FAIL** | critical=0, error>3 OR fixable issues | Auto-fix and retry (max 2) |
+| **HARD_FAIL** | critical>0 OR max retries exceeded | Block with report |
+
+## Output Artifacts
+
+### Validation Report
+
+**File**: `.workflow/active/{session_id}/.process/code-validation-report.md`
+
+```markdown
+# Code Validation Report
+
+**Session**: {session_id}
+**Timestamp**: {timestamp}
+**Status**: PASS | SOFT_FAIL | HARD_FAIL
+
+## Summary
+- Files Validated: {count}
+- Critical Issues: {count}
+- Errors: {count}
+- Warnings: {count}
+
+## Critical Issues (Must Fix)
+### Import Errors
+- `src/auth/service.ts:5` - Cannot find module 'non-existent-package'
+  - **Suggestion**: Check if package exists, may be hallucinated by AI
+
+### Variable Conflicts
+- `src/utils/helper.ts:12` - Cannot redeclare block-scoped variable 'config'
+  - **Suggestion**: Rename one of the variables or merge declarations
+
+## Errors (Should Fix)
+...
+
+## Warnings (Consider Fixing)
+...
+
+## Auto-Fix Applied
+- Removed 3 unused imports in `src/auth/service.ts`
+- Fixed import ordering in `src/utils/index.ts`
+
+## Remaining Issues Requiring Manual Fix
+...
+
+## Next Steps
+- [ ] Fix critical issues before proceeding
+- [ ] Review error suggestions
+- [ ] Re-run validation: `/workflow:tools:code-validation-gate --session {session_id}`
+```
+
+### JSON Report (Machine-Readable)
+
+**File**: `.workflow/active/{session_id}/.process/code-validation-report.json`
+
+```json
+{
+  "session_id": "WFS-test-xxx",
+  "timestamp": "2025-01-30T10:00:00Z",
+  "status": "HARD_FAIL",
+  "summary": {
+    "files_validated": 15,
+    "critical": 2,
+    "error": 5,
+    "warning": 8
+  },
+  "findings": {
+    "critical": [
+      {
+        "category": "import",
+        "file": "src/auth/service.ts",
+        "line": 5,
+        "message": "Cannot find module 'non-existent-package'",
+        "suggestion": "Check if package exists in package.json",
+        "auto_fixable": false
+      }
+    ],
+    "error": [...],
+    "warning": [...]
+  },
+  "auto_fixes_applied": [...],
+  "gate_decision": "HARD_FAIL",
+  "retry_count": 0,
+  "max_retries": 2
+}
+```
+
+## Command Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--session` | Test session ID (required) | - |
+| `--fix` | Enable auto-fix for safe issues | false |
+| `--strict` | Use strict thresholds (0 errors allowed) | false |
+| `--files` | Specific files to validate (comma-separated) | All target files |
+| `--skip-types` | Skip TypeScript type checks | false |
+
+## Integration
+
+### Command Chain
+
+- **Called By**: `/workflow:test-fix-gen` (after IMPL-001)
+- **Requires**: IMPL-001 output OR context-package.json
+- **Followed By**: IMPL-001.5 (Test Quality Gate) on PASS
+
+### Task JSON Integration
+
+When used in test-fix workflow, generates task:
+
+```json
+{
+  "id": "IMPL-001.3-validation",
+  "meta": {
+    "type": "code-validation",
+    "agent": "@test-fix-agent"
+  },
+  "context": {
+    "depends_on": ["IMPL-001"],
+    "requirements": "Validate generated code for AI common errors"
+  },
+  "flow_control": {
+    "validation_config": "~/.claude/workflows/test-quality-config.json",
+    "max_retries": 2,
+    "auto_fix_enabled": true
+  },
+  "acceptance_criteria": [
+    "Zero critical issues",
+    "Maximum 3 error issues",
+    "All imports resolvable",
+    "No variable redeclarations"
+  ]
+}
+```
+
+## Error Handling
+
+| Error | Resolution |
+|-------|------------|
+| tsconfig.json not found | Use default compiler options |
+| ESLint not installed | Skip ESLint checks, use tsc only |
+| madge not installed | Skip circular dependency check |
+| No files to validate | Return PASS (nothing to check) |
+
+## Best Practices
+
+1. **Run Early**: Execute validation immediately after code generation
+2. **Use --fix First**: Let auto-fix resolve trivial issues
+3. **Review Suggestions**: AI fix suggestions may need human judgment
+4. **Don't Skip Critical**: Never proceed with critical errors
+5. **Track Patterns**: Common failures indicate prompt improvement opportunities
+
+## Related Commands
+
+- `/workflow:test-fix-gen` - Parent workflow that invokes this command
+- `/workflow:tools:test-quality-gate` - Next phase (IMPL-001.5) for test quality
+- `/workflow:test-cycle-execute` - Execute tests after validation passes
diff --git a/.claude/commands/workflow/tools/test-task-generate.md b/.claude/commands/workflow/tools/test-task-generate.md
index 15d54409..ddf4c8e0 100644
--- a/.claude/commands/workflow/tools/test-task-generate.md
+++ b/.claude/commands/workflow/tools/test-task-generate.md
@@ -143,7 +143,7 @@ Determine CLI tool usage per-step based on user's task description:
 (Detailed specifications in your agent definition)
 
 ### Task Structure Requirements
-- Minimum 2 tasks: IMPL-001 (test generation) + IMPL-002 (test execution & fix)
+- Minimum 4 tasks: IMPL-001 (test generation) + IMPL-001.3 (code validation) + IMPL-001.5 (test quality) + IMPL-002 (test execution & fix)
 - Expandable for complex projects: Add IMPL-003+ (per-module, integration, E2E tests)
 
 Task Configuration:
@@ -154,9 +154,29 @@ Task Configuration:
     - flow_control: Test generation strategy from TEST_ANALYSIS_RESULTS.md
     - CLI execution: Add `command` field when user requests (determined semantically)
 
+  IMPL-001.3 (Code Validation Gate) ← NEW:
+    - meta.type: "code-validation"
+    - meta.agent: "@test-fix-agent"
+    - context.depends_on: ["IMPL-001"]
+    - context.validation_config: "~/.claude/workflows/test-quality-config.json"
+    - flow_control.validation_phases: ["compilation", "imports", "variables", "types", "ai_specific"]
+    - flow_control.auto_fix_enabled: true
+    - flow_control.max_retries: 2
+    - flow_control.severity_thresholds: { critical: 0, error: 3, warning: 10 }
+    - acceptance_criteria: Zero compilation errors, all imports resolvable, no variable redeclarations
+
+  IMPL-001.5 (Test Quality Gate):
+    - meta.type: "test-quality-review"
+    - meta.agent: "@test-fix-agent"
+    - context.depends_on: ["IMPL-001", "IMPL-001.3"]
+    - context.quality_config: "~/.claude/workflows/test-quality-config.json"
+    - flow_control: Static analysis, coverage analysis, anti-pattern detection
+    - acceptance_criteria: Coverage ≥ 80%, zero critical anti-patterns
+
   IMPL-002+ (Test Execution & Fix):
     - meta.type: "test-fix"
     - meta.agent: "@test-fix-agent"
+    - context.depends_on: ["IMPL-001", "IMPL-001.3", "IMPL-001.5"]
     - flow_control: Test-fix cycle with iteration limits and diagnosis configuration
     - CLI execution: Add `command` field when user requests (determined semantically)
 
@@ -190,10 +210,17 @@ PRIMARY requirements source - extract and map to task JSONs:
   - Implementation targets → context.files_to_test (absolute paths)
 
 ## EXPECTED DELIVERABLES
-1. Test Task JSON Files (.task/IMPL-*.json)
+1. Test Task JSON Files (.task/IMPL-*.json) - Minimum 4 required:
+   - IMPL-001.json: Test generation task
+   - IMPL-001.3-validation.json: Code validation gate (AI error detection) ← NEW
+   - IMPL-001.5-review.json: Test quality gate
+   - IMPL-002.json: Test execution & fix cycle
+
+   Each task includes:
    - 6-field schema with quantified requirements from TEST_ANALYSIS_RESULTS.md
    - Test-specific metadata: type, agent, test_framework, coverage_target
    - flow_control includes: reusable_test_tools, test_commands (from project config)
+   - Validation config reference for IMPL-001.3: ~/.claude/workflows/test-quality-config.json
    - CLI execution via `command` field when user requests (determined semantically)
    - Artifact references from test-context-package.json
    - Absolute paths in context.files_to_test
@@ -211,7 +238,7 @@ PRIMARY requirements source - extract and map to task JSONs:
 
 ## QUALITY STANDARDS
 Hard Constraints:
-  - Task count: minimum 2, maximum 18
+  - Task count: minimum 4, maximum 18 (IMPL-001, IMPL-001.3, IMPL-001.5, IMPL-002 required)
   - All requirements quantified from TEST_ANALYSIS_RESULTS.md
   - Test framework matches existing project framework
   - flow_control includes reusable_test_tools and test_commands from project
@@ -249,7 +276,11 @@ CLI tool usage is determined semantically from user's task description:
 - Default: Agent execution (no `command` field)
 
 ### Output
-- Test task JSON files in `.task/` directory (minimum 2)
-- IMPL_PLAN.md with test strategy and fix cycle specification
+- Test task JSON files in `.task/` directory (minimum 4):
+  - IMPL-001.json (test generation)
+  - IMPL-001.3-validation.json (code validation gate)
+  - IMPL-001.5-review.json (test quality gate)
+  - IMPL-002.json (test execution & fix)
+- IMPL_PLAN.md with test strategy, validation gates, and fix cycle specification
 - TODO_LIST.md with test phase indicators
 - Session ready for test execution
diff --git a/.claude/workflows/test-quality-config.json b/.claude/workflows/test-quality-config.json
new file mode 100644
index 00000000..f0c1c104
--- /dev/null
+++ b/.claude/workflows/test-quality-config.json
@@ -0,0 +1,251 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "version": "1.0.0",
+  "description": "Test quality and code validation configuration for AI-generated code",
+
+  "code_validation": {
+    "description": "Pre-test validation for AI-generated code common errors",
+    "enabled": true,
+    "phases": {
+      "L0_compilation": {
+        "description": "TypeScript/JavaScript compilation check",
+        "enabled": true,
+        "commands": {
+          "typescript": "npx tsc --noEmit --skipLibCheck",
+          "javascript": "node --check"
+        },
+        "critical": true,
+        "failure_blocks_tests": true
+      },
+      "L0_imports": {
+        "description": "Import statement validation",
+        "enabled": true,
+        "checks": [
+          {
+            "id": "unresolved_imports",
+            "description": "Check for unresolved module imports",
+            "pattern": "Cannot find module|Module not found|Unable to resolve",
+            "severity": "critical"
+          },
+          {
+            "id": "circular_imports",
+            "description": "Check for circular dependencies",
+            "tool": "madge",
+            "command": "npx madge --circular --extensions ts,tsx,js,jsx",
+            "severity": "warning"
+          },
+          {
+            "id": "duplicate_imports",
+            "description": "Check for duplicate imports",
+            "eslint_rule": "import/no-duplicates",
+            "severity": "error"
+          },
+          {
+            "id": "unused_imports",
+            "description": "Check for unused imports",
+            "eslint_rule": "unused-imports/no-unused-imports",
+            "severity": "warning"
+          }
+        ]
+      },
+      "L0_variables": {
+        "description": "Variable declaration validation",
+        "enabled": true,
+        "checks": [
+          {
+            "id": "redeclaration",
+            "description": "Check for variable redeclaration",
+            "pattern": "Cannot redeclare|Duplicate identifier|has already been declared",
+            "severity": "critical"
+          },
+          {
+            "id": "scope_conflict",
+            "description": "Check for scope conflicts",
+            "eslint_rule": "no-shadow",
+            "severity": "error"
+          },
+          {
+            "id": "undefined_vars",
+            "description": "Check for undefined variables",
+            "eslint_rule": "no-undef",
+            "severity": "critical"
+          },
+          {
+            "id": "unused_vars",
+            "description": "Check for unused variables",
+            "eslint_rule": "@typescript-eslint/no-unused-vars",
+            "severity": "warning"
+          }
+        ]
+      },
+      "L0_types": {
+        "description": "TypeScript type validation",
+        "enabled": true,
+        "checks": [
+          {
+            "id": "type_mismatch",
+            "description": "Check for type mismatches",
+            "pattern": "Type .* is not assignable to type",
+            "severity": "critical"
+          },
+          {
+            "id": "missing_types",
+            "description": "Check for missing type definitions",
+            "pattern": "Could not find a declaration file",
+            "severity": "warning"
+          },
+          {
+            "id": "any_abuse",
+            "description": "Check for excessive any type usage",
+            "eslint_rule": "@typescript-eslint/no-explicit-any",
+            "severity": "warning",
+            "max_occurrences": 5
+          },
+          {
+            "id": "implicit_any",
+            "description": "Check for implicit any",
+            "pattern": "implicitly has an 'any' type",
+            "severity": "error"
+          }
+        ]
+      }
+    },
+    "severity_thresholds": {
+      "critical": 0,
+      "error": 3,
+      "warning": 10
+    },
+    "max_retries": 2,
+    "auto_fix": {
+      "enabled": true,
+      "safe_fixes_only": true,
+      "fixable_categories": ["imports", "formatting", "unused_vars"]
+    }
+  },
+
+  "test_quality": {
+    "description": "Test file quality validation (IMPL-001.5)",
+    "enabled": true,
+    "coverage": {
+      "minimum_threshold": 80,
+      "branch_threshold": 70,
+      "function_threshold": 80,
+      "line_threshold": 80
+    },
+    "anti_patterns": {
+      "empty_test_body": {
+        "pattern": "it\\(['\"].*['\"],\\s*\\(\\)\\s*=>\\s*\\{\\s*\\}\\)",
+        "severity": "critical",
+        "description": "Test with empty body"
+      },
+      "missing_assertion": {
+        "pattern": "it\\(['\"].*['\"],.*\\{[^}]*\\}\\)(?![\\s\\S]*expect)",
+        "severity": "critical",
+        "description": "Test without expect() assertion"
+      },
+      "skipped_without_reason": {
+        "pattern": "(it|describe)\\.skip\\(['\"][^'\"]*['\"](?!.*\\/\\/ )",
+        "severity": "error",
+        "description": "Skipped test without comment explaining why"
+      },
+      "todo_test": {
+        "pattern": "(it|test)\\.todo\\(",
+        "severity": "warning",
+        "description": "TODO test placeholder"
+      },
+      "only_test": {
+        "pattern": "(it|describe)\\.only\\(",
+        "severity": "critical",
+        "description": "Focused test (will skip other tests)"
+      }
+    },
+    "required_test_types": {
+      "unit": {
+        "min_per_function": 1,
+        "must_include": ["happy_path"]
+      },
+      "negative": {
+        "min_per_public_api": 1,
+        "description": "Error handling tests for public APIs"
+      },
+      "edge_case": {
+        "required_scenarios": ["null", "undefined", "empty_string", "empty_array", "boundary_values"]
+      }
+    }
+  },
+
+  "ai_specific_checks": {
+    "description": "Checks specifically for AI-generated code patterns",
+    "enabled": true,
+    "checks": [
+      {
+        "id": "hallucinated_imports",
+        "description": "Check for imports of non-existent packages",
+        "validation": "npm_package_exists",
+        "severity": "critical"
+      },
+      {
+        "id": "inconsistent_naming",
+        "description": "Check for naming inconsistencies within file",
+        "pattern": "function (\\w+).*\\1(?!\\()",
+        "severity": "warning"
+      },
+      {
+        "id": "placeholder_code",
+        "description": "Check for AI placeholder comments",
+        "patterns": [
+          "// TODO: implement",
+          "// Add your code here",
+          "// Implementation pending",
+          "throw new Error\\(['\"]Not implemented['\"]\\)"
+        ],
+        "severity": "error"
+      },
+      {
+        "id": "mock_in_production",
+        "description": "Check for mock/stub code in production files",
+        "patterns": [
+          "jest\\.mock\\(",
+          "sinon\\.",
+          "vi\\.mock\\("
+        ],
+        "exclude_paths": ["**/*.test.*", "**/*.spec.*", "**/test/**", "**/__tests__/**"],
+        "severity": "critical"
+      }
+    ]
+  },
+
+  "validation_commands": {
+    "typescript_check": {
+      "command": "npx tsc --noEmit --skipLibCheck",
+      "timeout": 60000,
+      "parse_errors": true
+    },
+    "eslint_check": {
+      "command": "npx eslint --format json",
+      "timeout": 60000,
+      "auto_fix_command": "npx eslint --fix"
+    },
+    "circular_deps_check": {
+      "command": "npx madge --circular --extensions ts,tsx,js,jsx",
+      "timeout": 30000
+    },
+    "package_validation": {
+      "command": "npm ls --json",
+      "timeout": 30000
+    }
+  },
+
+  "gate_decisions": {
+    "pass_criteria": {
+      "critical_issues": 0,
+      "error_issues": "<=3",
+      "warning_issues": "<=10"
+    },
+    "actions": {
+      "pass": "Proceed to IMPL-001.5 (Test Quality Gate)",
+      "soft_fail": "Auto-fix and retry (max 2 attempts)",
+      "hard_fail": "Block and report to user with fix suggestions"
+    }
+  }
+}
diff --git a/ccw/frontend/index.html b/ccw/frontend/index.html
new file mode 100644
index 00000000..49a9fe02
--- /dev/null
+++ b/ccw/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CCW Dashboard</title>
+  </head>
+  <body class="font-sans bg-background text-foreground antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/ccw/frontend/package-lock.json b/ccw/frontend/package-lock.json
new file mode 100644
index 00000000..fc197c43
--- /dev/null
+++ b/ccw/frontend/package-lock.json
@@ -0,0 +1,4100 @@
+{
+  "name": "ccw-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ccw-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.0",
+        "@radix-ui/react-dropdown-menu": "^2.1.0",
+        "@radix-ui/react-select": "^2.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toast": "^1.2.0",
+        "@radix-ui/react-tooltip": "^1.1.0",
+        "@tanstack/react-query": "^5.60.0",
+        "@xyflow/react": "^12.3.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
+        "lucide-react": "^0.460.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.28.0",
+        "tailwind-merge": "^2.5.0",
+        "zod": "^3.23.8",
+        "zustand": "^5.0.0"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.0",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.40",
+        "tailwindcss": "^3.4.0",
+        "tailwindcss-animate": "^1.0.7",
+        "typescript": "^5.6.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
+      "integrity": "sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.6.tgz",
+      "integrity": "sha512-2lfu57JtzctfIrcGMz992hyLlByuzgIk58+hhGCxjKZ3rWI82NnVLjXcaTqkI2NvlcvOskZaiZ5kjUALo3Lpxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
+      "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.6.tgz",
+      "integrity": "sha512-lOoVRwADj8hjf7al89tvQ2a1lf53Z+7tiXMgpZJL3maQPDxh0DgLMN62B2MKUOFcoodBHLMbDM6WAbKgNy5Suw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
+      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.6.tgz",
+      "integrity": "sha512-fgWX62k02qtjqdSNTAGxmKYY/7FSL9WAS1o2Hu5+I5m9T0yxZzr4cnrfXQ/MX0rIifthCSs6FKTlzYbJcPtMNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/generator": "^7.28.6",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.6",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
+      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
+      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.4",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
+      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.0.tgz",
+      "integrity": "sha512-tPgXB6cDTndIe1ah7u6amCI1T0SsnlOuKgg10Xh3uizJk4e5M1JGaUMk7J4ciuAUcFpbOiNhm2XIjP9ON0dUqA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.0.tgz",
+      "integrity": "sha512-sa4LyseLLXr1onr97StkU1Nb7fWcg6niokTwEVNOO7awaKaoRObQ54+V/hrF/BP1noMEaaAW6Fg2d/CfLiq3Mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.0.tgz",
+      "integrity": "sha512-/NNIj9A7yLjKdmkx5dC2XQ9DmjIECpGpwHoGmA5E1AhU0fuICSqSWScPhN1yLCkEdkCwJIDu2xIeLPs60MNIVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.0.tgz",
+      "integrity": "sha512-xoh8abqgPrPYPr7pTYipqnUi1V3em56JzE/HgDgitTqZBZ3yKCWI+7KUkceM6tNweyUKYru1UMi7FC060RyKwA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.0.tgz",
+      "integrity": "sha512-PCkMh7fNahWSbA0OTUQ2OpYHpjZZr0hPr8lId8twD7a7SeWrvT3xJVyza+dQwXSSq4yEQTMoXgNOfMCsn8584g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.0.tgz",
+      "integrity": "sha512-1j3stGx+qbhXql4OCDZhnK7b01s6rBKNybfsX+TNrEe9JNq4DLi1yGiR1xW+nL+FNVvI4D02PUnl6gJ/2y6WJA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.0.tgz",
+      "integrity": "sha512-eyrr5W08Ms9uM0mLcKfM/Uzx7hjhz2bcjv8P2uynfj0yU8GGPdz8iYrBPhiLOZqahoAMB8ZiolRZPbbU2MAi6Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.0.tgz",
+      "integrity": "sha512-Xds90ITXJCNyX9pDhqf85MKWUI4lqjiPAipJ8OLp8xqI2Ehk+TCVhF9rvOoN8xTbcafow3QOThkNnrM33uCFQA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.0.tgz",
+      "integrity": "sha512-Xws2KA4CLvZmXjy46SQaXSejuKPhwVdaNinldoYfqruZBaJHqVo6hnRa8SDo9z7PBW5x84SH64+izmldCgbezw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.0.tgz",
+      "integrity": "sha512-hrKXKbX5FdaRJj7lTMusmvKbhMJSGWJ+w++4KmjiDhpTgNlhYobMvKfDoIWecy4O60K6yA4SnztGuNTQF+Lplw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.0.tgz",
+      "integrity": "sha512-6A+nccfSDGKsPm00d3xKcrsBcbqzCTAukjwWK6rbuAnB2bHaL3r9720HBVZ/no7+FhZLz/U3GwwZZEh6tOSI8Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.0.tgz",
+      "integrity": "sha512-4P1VyYUe6XAJtQH1Hh99THxr0GKMMwIXsRNOceLrJnaHTDgk1FTcTimDgneRJPvB3LqDQxUmroBclQ1S0cIJwQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.0.tgz",
+      "integrity": "sha512-8Vv6pLuIZCMcgXre6c3nOPhE0gjz1+nZP6T+hwWjr7sVH8k0jRkH+XnfjjOTglyMBdSKBPPz54/y1gToSKwrSQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.0.tgz",
+      "integrity": "sha512-r1te1M0Sm2TBVD/RxBPC6RZVwNqUTwJTA7w+C/IW5v9Ssu6xmxWEi+iJQlpBhtUiT1raJ5b48pI8tBvEjEFnFA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.0.tgz",
+      "integrity": "sha512-say0uMU/RaPm3CDQLxUUTF2oNWL8ysvHkAjcCzV2znxBr23kFfaxocS9qJm+NdkRhF8wtdEEAJuYcLPhSPbjuQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.0.tgz",
+      "integrity": "sha512-/MU7/HizQGsnBREtRpcSbSV1zfkoxSTR7wLsRmBPQ8FwUj5sykrP1MyJTvsxP5KBq9SyE6kH8UQQQwa0ASeoQQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.0.tgz",
+      "integrity": "sha512-Q9eh+gUGILIHEaJf66aF6a414jQbDnn29zeu0eX3dHMuysnhTvsUvZTCAyZ6tJhUjnvzBKE4FtuaYxutxRZpOg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.0.tgz",
+      "integrity": "sha512-OR5p5yG5OKSxHReWmwvM0P+VTPMwoBS45PXTMYaskKQqybkS3Kmugq1W+YbNWArF8/s7jQScgzXUhArzEQ7x0A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.0.tgz",
+      "integrity": "sha512-XeatKzo4lHDsVEbm1XDHZlhYZZSQYym6dg2X/Ko0kSFgio+KXLsxwJQprnR48GvdIKDOpqWqssC3iBCjoMcMpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.0.tgz",
+      "integrity": "sha512-Lu71y78F5qOfYmubYLHPcJm74GZLU6UJ4THkf/a1K7Tz2ycwC2VUbsqbJAXaR6Bx70SRdlVrt2+n5l7F0agTUw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.0.tgz",
+      "integrity": "sha512-v5xwKDWcu7qhAEcsUubiav7r+48Uk/ENWdr82MBZZRIm7zThSxCIVDfb3ZeRRq9yqk+oIzMdDo6fCcA5DHfMyA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.0.tgz",
+      "integrity": "sha512-XnaaaSMGSI6Wk8F4KK3QP7GfuuhjGchElsVerCplUuxRIzdvZ7hRBpLR0omCmw+kI2RFJB80nenhOoGXlJ5TfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.0.tgz",
+      "integrity": "sha512-3K1lP+3BXY4t4VihLw5MEg6IZD3ojSYzqzBG571W3kNQe4G4CcFpSUQVgurYgib5d+YaCjeFow8QivWp8vuSvA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.0.tgz",
+      "integrity": "sha512-MDk610P/vJGc5L5ImE4k5s+GZT3en0KoK1MKPXCRgzmksAMk79j4h3k1IerxTNqwDLxsGxStEZVBqG0gIqZqoA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.0.tgz",
+      "integrity": "sha512-Zv7v6q6aV+VslnpwzqKAmrk5JdVkLUzok2208ZXGipjb+msxBr/fJPZyeEXiFgH7k62Ak0SLIfxQRZQvTuf7rQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz",
+      "integrity": "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.27",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.0.tgz",
+      "integrity": "sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.74",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.74.tgz",
+      "integrity": "sha512-7v7B/PkiVrkdZzSbL+inGAo6tkR/WQHHG0/jhSvLQToCsfa8YubOGmBYd1s08tpKpihdHDZFwzQZeR69QSBb4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.282",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.282.tgz",
+      "integrity": "sha512-FCPkJtpst28UmFzd903iU7PdeVTfY0KAeJy+Lk0GLZRwgwYHn/irRcaCbQQOmr5Vytc/7rcavsYLvTM8RiHYhQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.460.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz",
+      "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.57.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.0.tgz",
+      "integrity": "sha512-e5lPJi/aui4TO1LpAXIRLySmwXSE8k3b9zoGfd42p67wzxog4WHjiZF3M2uheQih4DGyc25QEV4yRBbpueNiUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.57.0",
+        "@rollup/rollup-android-arm64": "4.57.0",
+        "@rollup/rollup-darwin-arm64": "4.57.0",
+        "@rollup/rollup-darwin-x64": "4.57.0",
+        "@rollup/rollup-freebsd-arm64": "4.57.0",
+        "@rollup/rollup-freebsd-x64": "4.57.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.0",
+        "@rollup/rollup-linux-arm64-musl": "4.57.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.0",
+        "@rollup/rollup-linux-loong64-musl": "4.57.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.0",
+        "@rollup/rollup-linux-x64-gnu": "4.57.0",
+        "@rollup/rollup-linux-x64-musl": "4.57.0",
+        "@rollup/rollup-openbsd-x64": "4.57.0",
+        "@rollup/rollup-openharmony-arm64": "4.57.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.0",
+        "@rollup/rollup-win32-x64-gnu": "4.57.0",
+        "@rollup/rollup-win32-x64-msvc": "4.57.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
+      "integrity": "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/ccw/frontend/package.json b/ccw/frontend/package.json
new file mode 100644
index 00000000..61805b72
--- /dev/null
+++ b/ccw/frontend/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "ccw-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "zustand": "^5.0.0",
+    "@tanstack/react-query": "^5.60.0",
+    "@xyflow/react": "^12.3.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-toast": "^1.2.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.460.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}
diff --git a/ccw/frontend/postcss.config.js b/ccw/frontend/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/ccw/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/ccw/frontend/src/App.tsx b/ccw/frontend/src/App.tsx
new file mode 100644
index 00000000..fb6d08ae
--- /dev/null
+++ b/ccw/frontend/src/App.tsx
@@ -0,0 +1,17 @@
+// ========================================
+// App Component
+// ========================================
+// Root application component with Router provider
+
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+/**
+ * Root App component
+ * Provides routing and global providers
+ */
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;
diff --git a/ccw/frontend/src/components/layout/AppShell.tsx b/ccw/frontend/src/components/layout/AppShell.tsx
new file mode 100644
index 00000000..3df8aed1
--- /dev/null
+++ b/ccw/frontend/src/components/layout/AppShell.tsx
@@ -0,0 +1,111 @@
+// ========================================
+// AppShell Component
+// ========================================
+// Root layout component combining Header, Sidebar, and MainContent
+
+import { useState, useCallback, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import { Header } from './Header';
+import { Sidebar } from './Sidebar';
+import { MainContent } from './MainContent';
+
+export interface AppShellProps {
+  /** Initial sidebar collapsed state */
+  defaultCollapsed?: boolean;
+  /** Current project path to display in header */
+  projectPath?: string;
+  /** Callback for refresh action */
+  onRefresh?: () => void;
+  /** Whether refresh is in progress */
+  isRefreshing?: boolean;
+  /** Children to render in main content area */
+  children?: React.ReactNode;
+}
+
+// Local storage key for sidebar state
+const SIDEBAR_COLLAPSED_KEY = 'ccw-sidebar-collapsed';
+
+export function AppShell({
+  defaultCollapsed = false,
+  projectPath = '',
+  onRefresh,
+  isRefreshing = false,
+  children,
+}: AppShellProps) {
+  // Sidebar collapse state (persisted)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+      return stored ? JSON.parse(stored) : defaultCollapsed;
+    }
+    return defaultCollapsed;
+  });
+
+  // Mobile sidebar open state
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  // Persist sidebar state
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, JSON.stringify(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
+  // Close mobile sidebar on route change or resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setMobileOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleMenuClick = useCallback(() => {
+    setMobileOpen((prev) => !prev);
+  }, []);
+
+  const handleMobileClose = useCallback(() => {
+    setMobileOpen(false);
+  }, []);
+
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    setSidebarCollapsed(collapsed);
+  }, []);
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Header - fixed at top */}
+      <Header
+        onMenuClick={handleMenuClick}
+        projectPath={projectPath}
+        onRefresh={onRefresh}
+        isRefreshing={isRefreshing}
+      />
+
+      {/* Main layout - sidebar + content */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <Sidebar
+          collapsed={sidebarCollapsed}
+          onCollapsedChange={handleCollapsedChange}
+          mobileOpen={mobileOpen}
+          onMobileClose={handleMobileClose}
+        />
+
+        {/* Main content area */}
+        <MainContent
+          className={cn(
+            'transition-all duration-300',
+            // Adjust padding on mobile when sidebar is hidden
+            'md:ml-0'
+          )}
+        >
+          {children}
+        </MainContent>
+      </div>
+    </div>
+  );
+}
+
+export default AppShell;
diff --git a/ccw/frontend/src/components/layout/Header.tsx b/ccw/frontend/src/components/layout/Header.tsx
new file mode 100644
index 00000000..dbb21678
--- /dev/null
+++ b/ccw/frontend/src/components/layout/Header.tsx
@@ -0,0 +1,164 @@
+// ========================================
+// Header Component
+// ========================================
+// Top navigation bar with theme toggle and user menu
+
+import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Workflow,
+  Menu,
+  Moon,
+  Sun,
+  RefreshCw,
+  Settings,
+  User,
+  LogOut,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { useTheme } from '@/hooks';
+
+export interface HeaderProps {
+  /** Callback to toggle mobile sidebar */
+  onMenuClick?: () => void;
+  /** Current project path */
+  projectPath?: string;
+  /** Callback for refresh action */
+  onRefresh?: () => void;
+  /** Whether refresh is in progress */
+  isRefreshing?: boolean;
+}
+
+export function Header({
+  onMenuClick,
+  projectPath = '',
+  onRefresh,
+  isRefreshing = false,
+}: HeaderProps) {
+  const { isDark, toggleTheme } = useTheme();
+
+  const handleRefresh = useCallback(() => {
+    if (onRefresh && !isRefreshing) {
+      onRefresh();
+    }
+  }, [onRefresh, isRefreshing]);
+
+  // Get display path (truncate if too long)
+  const displayPath = projectPath.length > 40
+    ? '...' + projectPath.slice(-37)
+    : projectPath || 'No project selected';
+
+  return (
+    <header
+      className="flex items-center justify-between px-4 md:px-5 h-14 bg-card border-b border-border sticky top-0 z-50 shadow-sm"
+      role="banner"
+    >
+      {/* Left side - Menu button (mobile) and Logo */}
+      <div className="flex items-center gap-3">
+        {/* Mobile menu toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          onClick={onMenuClick}
+          aria-label="Toggle navigation menu"
+        >
+          <Menu className="w-5 h-5" />
+        </Button>
+
+        {/* Logo / Brand */}
+        <Link
+          to="/"
+          className="flex items-center gap-2 text-lg font-semibold text-primary hover:opacity-80 transition-opacity"
+        >
+          <Workflow className="w-6 h-6" />
+          <span className="hidden sm:inline">Claude Code Workflow</span>
+          <span className="sm:hidden">CCW</span>
+        </Link>
+      </div>
+
+      {/* Right side - Actions */}
+      <div className="flex items-center gap-2">
+        {/* Project path indicator */}
+        {projectPath && (
+          <div className="hidden lg:flex items-center gap-2 px-3 py-1.5 bg-muted rounded-md text-sm text-muted-foreground max-w-[300px]">
+            <span className="truncate" title={projectPath}>
+              {displayPath}
+            </span>
+          </div>
+        )}
+
+        {/* Refresh button */}
+        {onRefresh && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            aria-label="Refresh workspace"
+            title="Refresh workspace"
+          >
+            <RefreshCw
+              className={cn('w-5 h-5', isRefreshing && 'animate-spin')}
+            />
+          </Button>
+        )}
+
+        {/* Theme toggle */}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={toggleTheme}
+          aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+          title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {isDark ? (
+            <Sun className="w-5 h-5" />
+          ) : (
+            <Moon className="w-5 h-5" />
+          )}
+        </Button>
+
+        {/* User menu dropdown - simplified version */}
+        <div className="relative group">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-full"
+            aria-label="User menu"
+            title="User menu"
+          >
+            <User className="w-5 h-5" />
+          </Button>
+
+          {/* Dropdown menu */}
+          <div className="absolute right-0 top-full mt-1 w-48 bg-card border border-border rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+            <div className="py-1">
+              <Link
+                to="/settings"
+                className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-hover transition-colors"
+              >
+                <Settings className="w-4 h-4" />
+                <span>Settings</span>
+              </Link>
+              <hr className="my-1 border-border" />
+              <button
+                className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:bg-hover hover:text-foreground transition-colors w-full text-left"
+                onClick={() => {
+                  // Placeholder for logout action
+                  console.log('Logout clicked');
+                }}
+              >
+                <LogOut className="w-4 h-4" />
+                <span>Exit Dashboard</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/ccw/frontend/src/components/layout/MainContent.tsx b/ccw/frontend/src/components/layout/MainContent.tsx
new file mode 100644
index 00000000..05d288d0
--- /dev/null
+++ b/ccw/frontend/src/components/layout/MainContent.tsx
@@ -0,0 +1,31 @@
+// ========================================
+// MainContent Component
+// ========================================
+// Main content area with scrollable container and Outlet for routes
+
+import { Outlet } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+
+export interface MainContentProps {
+  /** Additional class names */
+  className?: string;
+  /** Children to render instead of Outlet */
+  children?: React.ReactNode;
+}
+
+export function MainContent({ className, children }: MainContentProps) {
+  return (
+    <main
+      className={cn(
+        'flex-1 overflow-y-auto min-w-0',
+        'p-4 md:p-6',
+        className
+      )}
+      role="main"
+    >
+      {children ?? <Outlet />}
+    </main>
+  );
+}
+
+export default MainContent;
diff --git a/ccw/frontend/src/components/layout/Sidebar.tsx b/ccw/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 00000000..5631b0d3
--- /dev/null
+++ b/ccw/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,184 @@
+// ========================================
+// Sidebar Component
+// ========================================
+// Collapsible navigation sidebar with route links
+
+import { useState, useCallback } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import {
+  Home,
+  FolderKanban,
+  Workflow,
+  RefreshCw,
+  AlertCircle,
+  Sparkles,
+  Terminal,
+  Brain,
+  Settings,
+  HelpCircle,
+  PanelLeftClose,
+  PanelLeftOpen,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+
+export interface SidebarProps {
+  /** Whether sidebar is collapsed */
+  collapsed?: boolean;
+  /** Callback when collapse state changes */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Whether sidebar is open on mobile */
+  mobileOpen?: boolean;
+  /** Callback to close mobile sidebar */
+  onMobileClose?: () => void;
+}
+
+interface NavItem {
+  path: string;
+  label: string;
+  icon: React.ElementType;
+  badge?: number | string;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'info';
+}
+
+const navItems: NavItem[] = [
+  { path: '/', label: 'Home', icon: Home },
+  { path: '/sessions', label: 'Sessions', icon: FolderKanban },
+  { path: '/orchestrator', label: 'Orchestrator', icon: Workflow },
+  { path: '/loops', label: 'Loop Monitor', icon: RefreshCw },
+  { path: '/issues', label: 'Issues', icon: AlertCircle },
+  { path: '/skills', label: 'Skills', icon: Sparkles },
+  { path: '/commands', label: 'Commands', icon: Terminal },
+  { path: '/memory', label: 'Memory', icon: Brain },
+  { path: '/settings', label: 'Settings', icon: Settings },
+  { path: '/help', label: 'Help', icon: HelpCircle },
+];
+
+export function Sidebar({
+  collapsed = false,
+  onCollapsedChange,
+  mobileOpen = false,
+  onMobileClose,
+}: SidebarProps) {
+  const location = useLocation();
+  const [internalCollapsed, setInternalCollapsed] = useState(collapsed);
+
+  const isCollapsed = onCollapsedChange ? collapsed : internalCollapsed;
+
+  const handleToggleCollapse = useCallback(() => {
+    if (onCollapsedChange) {
+      onCollapsedChange(!collapsed);
+    } else {
+      setInternalCollapsed(!internalCollapsed);
+    }
+  }, [collapsed, internalCollapsed, onCollapsedChange]);
+
+  const handleNavClick = useCallback(() => {
+    // Close mobile sidebar when navigating
+    if (onMobileClose) {
+      onMobileClose();
+    }
+  }, [onMobileClose]);
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={onMobileClose}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          'bg-sidebar-background border-r border-border flex flex-col transition-all duration-300',
+          // Desktop styles
+          'hidden md:flex sticky top-14 h-[calc(100vh-56px)]',
+          isCollapsed ? 'w-16' : 'w-64',
+          // Mobile styles
+          'md:translate-x-0',
+          mobileOpen && 'fixed left-0 top-14 flex translate-x-0 z-50 h-[calc(100vh-56px)] w-64 shadow-lg'
+        )}
+        role="navigation"
+        aria-label="Main navigation"
+      >
+        <nav className="flex-1 py-3 overflow-y-auto">
+          <ul className="space-y-1 px-2">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = location.pathname === item.path ||
+                (item.path !== '/' && location.pathname.startsWith(item.path));
+
+              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
+                        ? '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>
+        </nav>
+
+        {/* Sidebar footer - collapse toggle */}
+        <div className="p-3 border-t border-border hidden md:block">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleToggleCollapse}
+            className={cn(
+              'w-full flex items-center gap-2 text-muted-foreground hover:text-foreground',
+              isCollapsed && 'justify-center'
+            )}
+            aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {isCollapsed ? (
+              <PanelLeftOpen className="w-4 h-4" />
+            ) : (
+              <>
+                <PanelLeftClose className="w-4 h-4" />
+                <span>Collapse</span>
+              </>
+            )}
+          </Button>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+export default Sidebar;
diff --git a/ccw/frontend/src/components/layout/index.ts b/ccw/frontend/src/components/layout/index.ts
new file mode 100644
index 00000000..9f816291
--- /dev/null
+++ b/ccw/frontend/src/components/layout/index.ts
@@ -0,0 +1,16 @@
+// ========================================
+// Layout Components Barrel Export
+// ========================================
+// Re-export all layout components for convenient imports
+
+export { AppShell } from './AppShell';
+export type { AppShellProps } from './AppShell';
+
+export { Header } from './Header';
+export type { HeaderProps } from './Header';
+
+export { Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar';
+
+export { MainContent } from './MainContent';
+export type { MainContentProps } from './MainContent';
diff --git a/ccw/frontend/src/components/shared/IssueCard.tsx b/ccw/frontend/src/components/shared/IssueCard.tsx
new file mode 100644
index 00000000..cfd4c005
--- /dev/null
+++ b/ccw/frontend/src/components/shared/IssueCard.tsx
@@ -0,0 +1,238 @@
+// ========================================
+// IssueCard Component
+// ========================================
+// Card component for displaying issues with actions
+
+import { useState } from 'react';
+import {
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  MoreVertical,
+  Edit,
+  Trash2,
+  ExternalLink,
+  CheckCircle,
+  Clock,
+  XCircle,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import type { Issue } from '@/lib/api';
+
+// ========== Types ==========
+
+export interface IssueCardProps {
+  issue: Issue;
+  onEdit?: (issue: Issue) => void;
+  onDelete?: (issue: Issue) => void;
+  onClick?: (issue: Issue) => void;
+  onStatusChange?: (issue: Issue, status: Issue['status']) => void;
+  className?: string;
+  compact?: boolean;
+  showActions?: boolean;
+  draggableProps?: Record<string, unknown>;
+  dragHandleProps?: Record<string, unknown>;
+  innerRef?: React.Ref<HTMLDivElement>;
+}
+
+// ========== Priority Helpers ==========
+
+const priorityConfig: Record<Issue['priority'], { icon: React.ElementType; color: string; label: string }> = {
+  critical: { icon: AlertCircle, color: 'destructive', label: 'Critical' },
+  high: { icon: AlertTriangle, color: 'warning', label: 'High' },
+  medium: { icon: Info, color: 'info', label: 'Medium' },
+  low: { icon: Info, color: 'secondary', label: 'Low' },
+};
+
+const statusConfig: Record<Issue['status'], { icon: React.ElementType; color: string; label: string }> = {
+  open: { icon: AlertCircle, color: 'info', label: 'Open' },
+  in_progress: { icon: Clock, color: 'warning', label: 'In Progress' },
+  resolved: { icon: CheckCircle, color: 'success', label: 'Resolved' },
+  closed: { icon: XCircle, color: 'muted', label: 'Closed' },
+  completed: { icon: CheckCircle, color: 'success', label: 'Completed' },
+};
+
+// ========== Priority Badge ==========
+
+export function PriorityBadge({ priority }: { priority: Issue['priority'] }) {
+  const config = priorityConfig[priority];
+  const Icon = config.icon;
+
+  return (
+    <Badge variant={config.color as 'default' | 'secondary' | 'destructive' | 'outline'} className="gap-1">
+      <Icon className="w-3 h-3" />
+      {config.label}
+    </Badge>
+  );
+}
+
+// ========== Status Badge ==========
+
+export function StatusBadge({ status }: { status: Issue['status'] }) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <Badge variant="outline" className="gap-1">
+      <Icon className="w-3 h-3" />
+      {config.label}
+    </Badge>
+  );
+}
+
+// ========== Main IssueCard Component ==========
+
+export function IssueCard({
+  issue,
+  onEdit,
+  onDelete,
+  onClick,
+  onStatusChange,
+  className,
+  compact = false,
+  showActions = true,
+  draggableProps,
+  dragHandleProps,
+  innerRef,
+}: IssueCardProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleClick = () => {
+    if (!isMenuOpen) {
+      onClick?.(issue);
+    }
+  };
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(false);
+    onEdit?.(issue);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(false);
+    onDelete?.(issue);
+  };
+
+  if (compact) {
+    return (
+      <div
+        ref={innerRef}
+        {...draggableProps}
+        {...dragHandleProps}
+        onClick={handleClick}
+        className={cn(
+          'p-3 bg-card border border-border rounded-lg cursor-pointer',
+          'hover:shadow-md hover:border-primary/50 transition-all',
+          className
+        )}
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-foreground truncate">{issue.title}</p>
+            <p className="text-xs text-muted-foreground mt-0.5">#{issue.id}</p>
+          </div>
+          <PriorityBadge priority={issue.priority} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Card
+      ref={innerRef}
+      {...draggableProps}
+      onClick={handleClick}
+      className={cn(
+        'p-4 cursor-pointer hover:shadow-md hover:border-primary/50 transition-all',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0" {...dragHandleProps}>
+          <h3 className="text-sm font-medium text-foreground line-clamp-2">
+            {issue.title}
+          </h3>
+          <p className="text-xs text-muted-foreground mt-1">#{issue.id}</p>
+        </div>
+        {showActions && (
+          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownContent align="end">
+              <DropdownItem onClick={handleEdit}>
+                <Edit className="w-4 h-4 mr-2" />
+                Edit
+              </DropdownItem>
+              <DropdownItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
+                <Clock className="w-4 h-4 mr-2" />
+                Start Progress
+              </DropdownItem>
+              <DropdownItem onClick={() => onStatusChange?.(issue, 'resolved')}>
+                <CheckCircle className="w-4 h-4 mr-2" />
+                Mark Resolved
+              </DropdownItem>
+              <DropdownItem onClick={handleDelete} className="text-destructive">
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </DropdownItem>
+            </DropdownContent>
+          </Dropdown>
+        )}
+      </div>
+
+      {/* Context Preview */}
+      {issue.context && (
+        <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+          {issue.context}
+        </p>
+      )}
+
+      {/* Labels */}
+      {issue.labels && issue.labels.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-2">
+          {issue.labels.slice(0, 3).map((label) => (
+            <Badge key={label} variant="outline" className="text-xs">
+              {label}
+            </Badge>
+          ))}
+          {issue.labels.length > 3 && (
+            <Badge variant="outline" className="text-xs">
+              +{issue.labels.length - 3}
+            </Badge>
+          )}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+        <PriorityBadge priority={issue.priority} />
+        <StatusBadge status={issue.status} />
+      </div>
+
+      {/* Solutions Count */}
+      {issue.solutions && issue.solutions.length > 0 && (
+        <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
+          <ExternalLink className="w-3 h-3" />
+          {issue.solutions.length} solution{issue.solutions.length !== 1 ? 's' : ''}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default IssueCard;
diff --git a/ccw/frontend/src/components/shared/KanbanBoard.tsx b/ccw/frontend/src/components/shared/KanbanBoard.tsx
new file mode 100644
index 00000000..986713d3
--- /dev/null
+++ b/ccw/frontend/src/components/shared/KanbanBoard.tsx
@@ -0,0 +1,265 @@
+// ========================================
+// KanbanBoard Component
+// ========================================
+// Drag-and-drop kanban board for loops and tasks
+
+import { useState, useCallback } from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type DropResult,
+  type DraggableProvided,
+  type DroppableProvided,
+} from '@hello-pangea/dnd';
+import { cn } from '@/lib/utils';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+// ========== Types ==========
+
+export interface KanbanItem {
+  id: string;
+  title?: string;
+  status: string;
+  [key: string]: unknown;
+}
+
+export interface KanbanColumn<T extends KanbanItem = KanbanItem> {
+  id: string;
+  title: string;
+  items: T[];
+  color?: string;
+  icon?: React.ReactNode;
+}
+
+export interface KanbanBoardProps<T extends KanbanItem = KanbanItem> {
+  columns: KanbanColumn<T>[];
+  onDragEnd?: (result: DropResult, sourceColumn: string, destColumn: string) => void;
+  onItemClick?: (item: T) => void;
+  renderItem?: (item: T, provided: DraggableProvided) => React.ReactNode;
+  className?: string;
+  columnClassName?: string;
+  itemClassName?: string;
+  emptyColumnMessage?: string;
+  isLoading?: boolean;
+}
+
+// ========== Default Item Renderer ==========
+
+function DefaultItemRenderer<T extends KanbanItem>({
+  item,
+  provided,
+  onClick,
+  className,
+}: {
+  item: T;
+  provided: DraggableProvided;
+  onClick?: () => void;
+  className?: string;
+}) {
+  return (
+    <div
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      onClick={onClick}
+      className={cn(
+        'p-3 bg-card border border-border rounded-lg shadow-sm cursor-pointer',
+        'hover:shadow-md hover:border-primary/50 transition-all',
+        'focus:outline-none focus:ring-2 focus:ring-primary/50',
+        className
+      )}
+    >
+      <p className="text-sm font-medium text-foreground truncate">
+        {item.title || item.id}
+      </p>
+    </div>
+  );
+}
+
+// ========== Column Component ==========
+
+function KanbanColumnComponent<T extends KanbanItem>({
+  column,
+  onItemClick,
+  renderItem,
+  itemClassName,
+  emptyMessage,
+}: {
+  column: KanbanColumn<T>;
+  onItemClick?: (item: T) => void;
+  renderItem?: (item: T, provided: DraggableProvided) => React.ReactNode;
+  itemClassName?: string;
+  emptyMessage?: string;
+}) {
+  return (
+    <Droppable droppableId={column.id}>
+      {(provided: DroppableProvided, snapshot) => (
+        <div
+          ref={provided.innerRef}
+          {...provided.droppableProps}
+          className={cn(
+            'min-h-[200px] p-2 space-y-2 rounded-lg transition-colors',
+            snapshot.isDraggingOver && 'bg-primary/5'
+          )}
+        >
+          {column.items.length === 0 ? (
+            <p className="text-center text-sm text-muted-foreground py-8">
+              {emptyMessage || 'No items'}
+            </p>
+          ) : (
+            column.items.map((item, index) => (
+              <Draggable key={item.id} draggableId={item.id} index={index}>
+                {(dragProvided: DraggableProvided) =>
+                  renderItem ? (
+                    renderItem(item, dragProvided)
+                  ) : (
+                    <DefaultItemRenderer
+                      item={item}
+                      provided={dragProvided}
+                      onClick={() => onItemClick?.(item)}
+                      className={itemClassName}
+                    />
+                  )
+                }
+              </Draggable>
+            ))
+          )}
+          {provided.placeholder}
+        </div>
+      )}
+    </Droppable>
+  );
+}
+
+// ========== Main Kanban Board Component ==========
+
+export function KanbanBoard<T extends KanbanItem = KanbanItem>({
+  columns,
+  onDragEnd,
+  onItemClick,
+  renderItem,
+  className,
+  columnClassName,
+  itemClassName,
+  emptyColumnMessage,
+  isLoading = false,
+}: KanbanBoardProps<T>) {
+  const handleDragEnd = useCallback(
+    (result: DropResult) => {
+      if (!result.destination) return;
+
+      const { source, destination } = result;
+      if (
+        source.droppableId === destination.droppableId &&
+        source.index === destination.index
+      ) {
+        return;
+      }
+
+      onDragEnd?.(result, source.droppableId, destination.droppableId);
+    },
+    [onDragEnd]
+  );
+
+  if (isLoading) {
+    return (
+      <div className={cn('grid gap-4', className)} style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))` }}>
+        {columns.map((column) => (
+          <Card key={column.id} className={cn('p-4', columnClassName)}>
+            <div className="h-6 w-24 bg-muted animate-pulse rounded mb-4" />
+            <div className="space-y-2">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-16 bg-muted animate-pulse rounded" />
+              ))}
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <div
+        className={cn('grid gap-4', className)}
+        style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))` }}
+      >
+        {columns.map((column) => (
+          <Card key={column.id} className={cn('p-4', columnClassName)}>
+            {/* Column Header */}
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                {column.icon}
+                <h3 className="font-medium text-foreground">{column.title}</h3>
+              </div>
+              <Badge
+                variant="secondary"
+                className={cn(column.color && `bg-${column.color}/10 text-${column.color}`)}
+              >
+                {column.items.length}
+              </Badge>
+            </div>
+
+            {/* Column Content */}
+            <KanbanColumnComponent
+              column={column}
+              onItemClick={onItemClick}
+              renderItem={renderItem}
+              itemClassName={itemClassName}
+              emptyMessage={emptyColumnMessage}
+            />
+          </Card>
+        ))}
+      </div>
+    </DragDropContext>
+  );
+}
+
+// ========== Loop-specific Kanban ==========
+
+export interface LoopKanbanItem extends KanbanItem {
+  status: 'created' | 'running' | 'paused' | 'completed' | 'failed';
+  currentStep?: number;
+  totalSteps?: number;
+  prompt?: string;
+  tool?: string;
+}
+
+export function useLoopKanbanColumns(loopsByStatus: Record<string, LoopKanbanItem[]>): KanbanColumn<LoopKanbanItem>[] {
+  return [
+    {
+      id: 'created',
+      title: 'Pending',
+      items: loopsByStatus.created || [],
+      color: 'muted',
+    },
+    {
+      id: 'running',
+      title: 'Running',
+      items: loopsByStatus.running || [],
+      color: 'primary',
+    },
+    {
+      id: 'paused',
+      title: 'Paused',
+      items: loopsByStatus.paused || [],
+      color: 'warning',
+    },
+    {
+      id: 'completed',
+      title: 'Completed',
+      items: loopsByStatus.completed || [],
+      color: 'success',
+    },
+    {
+      id: 'failed',
+      title: 'Failed',
+      items: loopsByStatus.failed || [],
+      color: 'destructive',
+    },
+  ];
+}
+
+export default KanbanBoard;
diff --git a/ccw/frontend/src/components/shared/SessionCard.tsx b/ccw/frontend/src/components/shared/SessionCard.tsx
new file mode 100644
index 00000000..1851e30e
--- /dev/null
+++ b/ccw/frontend/src/components/shared/SessionCard.tsx
@@ -0,0 +1,287 @@
+// ========================================
+// SessionCard Component
+// ========================================
+// Session card with status badge and action menu
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '@/components/ui/Dropdown';
+import {
+  Calendar,
+  ListChecks,
+  MoreVertical,
+  Eye,
+  Archive,
+  Trash2,
+  Play,
+  Pause,
+} from 'lucide-react';
+import type { SessionMetadata } from '@/types/store';
+
+export interface SessionCardProps {
+  /** Session data */
+  session: SessionMetadata;
+  /** Called when view action is triggered */
+  onView?: (sessionId: string) => void;
+  /** Called when archive action is triggered */
+  onArchive?: (sessionId: string) => void;
+  /** Called when delete action is triggered */
+  onDelete?: (sessionId: string) => void;
+  /** Called when card is clicked */
+  onClick?: (sessionId: string) => void;
+  /** Optional className */
+  className?: string;
+  /** Show actions dropdown */
+  showActions?: boolean;
+  /** Disabled state for actions */
+  actionsDisabled?: boolean;
+}
+
+// Status badge configuration
+const statusConfig: Record<
+  SessionMetadata['status'],
+  { label: string; variant: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' }
+> = {
+  planning: { label: 'Planning', variant: 'info' },
+  in_progress: { label: 'In Progress', variant: 'warning' },
+  completed: { label: 'Completed', variant: 'success' },
+  archived: { label: 'Archived', variant: 'secondary' },
+  paused: { label: 'Paused', variant: 'default' },
+};
+
+/**
+ * Format date to localized string
+ */
+function formatDate(dateString: string | undefined): string {
+  if (!dateString) return 'Unknown';
+
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  } catch {
+    return 'Invalid date';
+  }
+}
+
+/**
+ * Calculate progress percentage from tasks
+ */
+function calculateProgress(tasks: SessionMetadata['tasks']): {
+  completed: number;
+  total: number;
+  percentage: number;
+} {
+  if (!tasks || tasks.length === 0) {
+    return { completed: 0, total: 0, percentage: 0 };
+  }
+
+  const completed = tasks.filter((t) => t.status === 'completed').length;
+  const total = tasks.length;
+  const percentage = Math.round((completed / total) * 100);
+
+  return { completed, total, percentage };
+}
+
+/**
+ * SessionCard component for displaying session information
+ *
+ * @example
+ * ```tsx
+ * <SessionCard
+ *   session={session}
+ *   onView={(id) => navigate(`/sessions/${id}`)}
+ *   onArchive={(id) => archiveSession(id)}
+ *   onDelete={(id) => deleteSession(id)}
+ * />
+ * ```
+ */
+export function SessionCard({
+  session,
+  onView,
+  onArchive,
+  onDelete,
+  onClick,
+  className,
+  showActions = true,
+  actionsDisabled = false,
+}: SessionCardProps) {
+  const { label: statusLabel, variant: statusVariant } = statusConfig[session.status] || {
+    label: 'Unknown',
+    variant: 'default' as const,
+  };
+
+  const progress = calculateProgress(session.tasks);
+  const isPlanning = session.status === 'planning';
+  const isArchived = session.status === 'archived' || session.location === 'archived';
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    // Don't trigger if clicking on dropdown
+    if ((e.target as HTMLElement).closest('[data-radix-popper-content-wrapper]')) {
+      return;
+    }
+    onClick?.(session.session_id);
+  };
+
+  const handleAction = (
+    e: React.MouseEvent,
+    action: 'view' | 'archive' | 'delete'
+  ) => {
+    e.stopPropagation();
+    switch (action) {
+      case 'view':
+        onView?.(session.session_id);
+        break;
+      case 'archive':
+        onArchive?.(session.session_id);
+        break;
+      case 'delete':
+        onDelete?.(session.session_id);
+        break;
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        'group cursor-pointer transition-all duration-200 hover:shadow-md hover:border-primary/30',
+        isPlanning && 'border-info/30 bg-info/5',
+        className
+      )}
+      onClick={handleCardClick}
+    >
+      <CardContent className="p-4">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <h3 className="font-medium text-card-foreground truncate">
+              {session.title || session.session_id}
+            </h3>
+            {session.title && session.title !== session.session_id && (
+              <p className="text-xs text-muted-foreground truncate mt-0.5">
+                {session.session_id}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Badge variant={statusVariant}>{statusLabel}</Badge>
+            {showActions && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={(e) => e.stopPropagation()}
+                    disabled={actionsDisabled}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                    <span className="sr-only">Actions</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={(e) => handleAction(e, 'view')}>
+                    <Eye className="mr-2 h-4 w-4" />
+                    View Details
+                  </DropdownMenuItem>
+                  {!isArchived && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={(e) => handleAction(e, 'archive')}>
+                        <Archive className="mr-2 h-4 w-4" />
+                        Archive
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={(e) => handleAction(e, 'delete')}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+
+        {/* Meta info */}
+        <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3.5 w-3.5" />
+            {formatDate(session.created_at)}
+          </span>
+          <span className="flex items-center gap-1">
+            <ListChecks className="h-3.5 w-3.5" />
+            {progress.total} tasks
+          </span>
+        </div>
+
+        {/* Progress bar (only show if not planning and has tasks) */}
+        {progress.total > 0 && !isPlanning && (
+          <div className="mt-3">
+            <div className="flex items-center justify-between text-xs mb-1">
+              <span className="text-muted-foreground">Progress</span>
+              <span className="text-card-foreground font-medium">
+                {progress.completed}/{progress.total} ({progress.percentage}%)
+              </span>
+            </div>
+            <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+              <div
+                className="h-full bg-primary transition-all duration-300"
+                style={{ width: `${progress.percentage}%` }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Description (if exists) */}
+        {session.description && (
+          <p className="mt-2 text-xs text-muted-foreground line-clamp-2">
+            {session.description}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Skeleton loader for SessionCard
+ */
+export function SessionCardSkeleton({ className }: { className?: string }) {
+  return (
+    <Card className={cn('animate-pulse', className)}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="h-5 w-32 rounded bg-muted" />
+            <div className="mt-1 h-3 w-24 rounded bg-muted" />
+          </div>
+          <div className="h-5 w-16 rounded-full bg-muted" />
+        </div>
+        <div className="mt-3 flex gap-4">
+          <div className="h-4 w-20 rounded bg-muted" />
+          <div className="h-4 w-16 rounded bg-muted" />
+        </div>
+        <div className="mt-3">
+          <div className="h-1.5 w-full rounded-full bg-muted" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ccw/frontend/src/components/shared/SkillCard.tsx b/ccw/frontend/src/components/shared/SkillCard.tsx
new file mode 100644
index 00000000..a72c605b
--- /dev/null
+++ b/ccw/frontend/src/components/shared/SkillCard.tsx
@@ -0,0 +1,257 @@
+// ========================================
+// SkillCard Component
+// ========================================
+// Card component for displaying skills with enable/disable toggle
+
+import { useState } from 'react';
+import {
+  Sparkles,
+  MoreVertical,
+  Info,
+  Settings,
+  Power,
+  PowerOff,
+  Tag,
+  User,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import type { Skill } from '@/lib/api';
+
+// ========== Types ==========
+
+export interface SkillCardProps {
+  skill: Skill;
+  onToggle?: (skill: Skill, enabled: boolean) => void;
+  onClick?: (skill: Skill) => void;
+  onConfigure?: (skill: Skill) => void;
+  className?: string;
+  compact?: boolean;
+  showActions?: boolean;
+  isToggling?: boolean;
+}
+
+// ========== Source Badge ==========
+
+const sourceConfig: Record<NonNullable<Skill['source']>, { color: string; label: string }> = {
+  builtin: { color: 'default', label: 'Built-in' },
+  custom: { color: 'secondary', label: 'Custom' },
+  community: { color: 'outline', label: 'Community' },
+};
+
+export function SourceBadge({ source }: { source?: Skill['source'] }) {
+  const config = sourceConfig[source ?? 'builtin'];
+  return (
+    <Badge variant={config.color as 'default' | 'secondary' | 'destructive' | 'outline'}>
+      {config.label}
+    </Badge>
+  );
+}
+
+// ========== Main SkillCard Component ==========
+
+export function SkillCard({
+  skill,
+  onToggle,
+  onClick,
+  onConfigure,
+  className,
+  compact = false,
+  showActions = true,
+  isToggling = false,
+}: SkillCardProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleClick = () => {
+    if (!isMenuOpen) {
+      onClick?.(skill);
+    }
+  };
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onToggle?.(skill, !skill.enabled);
+  };
+
+  const handleConfigure = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsMenuOpen(false);
+    onConfigure?.(skill);
+  };
+
+  if (compact) {
+    return (
+      <div
+        onClick={handleClick}
+        className={cn(
+          'p-3 bg-card border border-border rounded-lg cursor-pointer',
+          'hover:shadow-md hover:border-primary/50 transition-all',
+          !skill.enabled && 'opacity-60',
+          className
+        )}
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Sparkles className={cn('w-4 h-4 flex-shrink-0', skill.enabled ? 'text-primary' : 'text-muted-foreground')} />
+            <span className="text-sm font-medium text-foreground truncate">{skill.name}</span>
+          </div>
+          <Button
+            variant={skill.enabled ? 'default' : 'outline'}
+            size="sm"
+            className="h-7 px-2"
+            onClick={handleToggle}
+            disabled={isToggling}
+          >
+            {skill.enabled ? (
+              <>
+                <Power className="w-3 h-3 mr-1" />
+                On
+              </>
+            ) : (
+              <>
+                <PowerOff className="w-3 h-3 mr-1" />
+                Off
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Card
+      onClick={handleClick}
+      className={cn(
+        'p-4 cursor-pointer hover:shadow-md hover:border-primary/50 transition-all',
+        !skill.enabled && 'opacity-75',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-start gap-3 min-w-0">
+          <div className={cn(
+            'p-2 rounded-lg flex-shrink-0',
+            skill.enabled ? 'bg-primary/10' : 'bg-muted'
+          )}>
+            <Sparkles className={cn('w-5 h-5', skill.enabled ? 'text-primary' : 'text-muted-foreground')} />
+          </div>
+          <div className="min-w-0">
+            <h3 className="text-sm font-medium text-foreground">{skill.name}</h3>
+            {skill.version && (
+              <p className="text-xs text-muted-foreground">v{skill.version}</p>
+            )}
+          </div>
+        </div>
+        {showActions && (
+          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownContent align="end">
+              <DropdownItem onClick={() => onClick?.(skill)}>
+                <Info className="w-4 h-4 mr-2" />
+                View Details
+              </DropdownItem>
+              <DropdownItem onClick={handleConfigure}>
+                <Settings className="w-4 h-4 mr-2" />
+                Configure
+              </DropdownItem>
+              <DropdownItem onClick={handleToggle}>
+                {skill.enabled ? (
+                  <>
+                    <PowerOff className="w-4 h-4 mr-2" />
+                    Disable
+                  </>
+                ) : (
+                  <>
+                    <Power className="w-4 h-4 mr-2" />
+                    Enable
+                  </>
+                )}
+              </DropdownItem>
+            </DropdownContent>
+          </Dropdown>
+        )}
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground mt-3 line-clamp-2">
+        {skill.description}
+      </p>
+
+      {/* Triggers */}
+      {skill.triggers && skill.triggers.length > 0 && (
+        <div className="mt-3">
+          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
+            <Tag className="w-3 h-3" />
+            Triggers
+          </div>
+          <div className="flex flex-wrap gap-1">
+            {skill.triggers.slice(0, 4).map((trigger) => (
+              <Badge key={trigger} variant="outline" className="text-xs">
+                {trigger}
+              </Badge>
+            ))}
+            {skill.triggers.length > 4 && (
+              <Badge variant="outline" className="text-xs">
+                +{skill.triggers.length - 4}
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between mt-4 pt-3 border-t border-border">
+        <div className="flex items-center gap-2">
+          <SourceBadge source={skill.source} />
+          {skill.category && (
+            <Badge variant="outline" className="text-xs">
+              {skill.category}
+            </Badge>
+          )}
+        </div>
+        <Button
+          variant={skill.enabled ? 'default' : 'outline'}
+          size="sm"
+          onClick={handleToggle}
+          disabled={isToggling}
+        >
+          {skill.enabled ? (
+            <>
+              <Power className="w-4 h-4 mr-1" />
+              Enabled
+            </>
+          ) : (
+            <>
+              <PowerOff className="w-4 h-4 mr-1" />
+              Disabled
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Author */}
+      {skill.author && (
+        <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
+          <User className="w-3 h-3" />
+          {skill.author}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export default SkillCard;
diff --git a/ccw/frontend/src/components/shared/StatCard.tsx b/ccw/frontend/src/components/shared/StatCard.tsx
new file mode 100644
index 00000000..3ec762b1
--- /dev/null
+++ b/ccw/frontend/src/components/shared/StatCard.tsx
@@ -0,0 +1,161 @@
+// ========================================
+// StatCard Component
+// ========================================
+// Reusable stat card for dashboard metrics
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Card, CardContent } from '@/components/ui/Card';
+import { TrendingUp, TrendingDown, Minus, type LucideIcon } from 'lucide-react';
+
+const statCardVariants = cva(
+  'transition-all duration-200 hover:shadow-md',
+  {
+    variants: {
+      variant: {
+        default: 'border-border',
+        primary: 'border-primary/30 bg-primary/5',
+        success: 'border-success/30 bg-success/5',
+        warning: 'border-warning/30 bg-warning/5',
+        danger: 'border-destructive/30 bg-destructive/5',
+        info: 'border-info/30 bg-info/5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const iconContainerVariants = cva(
+  'flex h-10 w-10 items-center justify-center rounded-lg',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted text-muted-foreground',
+        primary: 'bg-primary/10 text-primary',
+        success: 'bg-success/10 text-success',
+        warning: 'bg-warning/10 text-warning',
+        danger: 'bg-destructive/10 text-destructive',
+        info: 'bg-info/10 text-info',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface StatCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statCardVariants> {
+  /** Card title */
+  title: string;
+  /** Stat value to display */
+  value: number | string;
+  /** Optional icon component */
+  icon?: LucideIcon;
+  /** Optional trend direction */
+  trend?: 'up' | 'down' | 'neutral';
+  /** Optional trend value (e.g., "+12%") */
+  trendValue?: string;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Optional description */
+  description?: string;
+}
+
+/**
+ * StatCard component for displaying dashboard metrics
+ *
+ * @example
+ * ```tsx
+ * <StatCard
+ *   title="Total Sessions"
+ *   value={42}
+ *   icon={FolderIcon}
+ *   variant="primary"
+ *   trend="up"
+ *   trendValue="+5"
+ * />
+ * ```
+ */
+export function StatCard({
+  className,
+  variant,
+  title,
+  value,
+  icon: Icon,
+  trend,
+  trendValue,
+  isLoading = false,
+  description,
+  ...props
+}: StatCardProps) {
+  const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;
+  const trendColor =
+    trend === 'up'
+      ? 'text-success'
+      : trend === 'down'
+        ? 'text-destructive'
+        : 'text-muted-foreground';
+
+  return (
+    <Card className={cn(statCardVariants({ variant }), className)} {...props}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-muted-foreground truncate">
+              {title}
+            </p>
+            <div className="mt-2 flex items-baseline gap-2">
+              {isLoading ? (
+                <div className="h-8 w-16 animate-pulse rounded bg-muted" />
+              ) : (
+                <p className="text-2xl font-semibold text-card-foreground">
+                  {typeof value === 'number' ? value.toLocaleString() : value}
+                </p>
+              )}
+              {trend && trendValue && !isLoading && (
+                <span className={cn('flex items-center text-xs font-medium', trendColor)}>
+                  <TrendIcon className="mr-0.5 h-3 w-3" />
+                  {trendValue}
+                </span>
+              )}
+            </div>
+            {description && (
+              <p className="mt-1 text-xs text-muted-foreground truncate">
+                {description}
+              </p>
+            )}
+          </div>
+          {Icon && (
+            <div className={cn(iconContainerVariants({ variant }))}>
+              <Icon className="h-5 w-5" />
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Skeleton loader for StatCard
+ */
+export function StatCardSkeleton({ className }: { className?: string }) {
+  return (
+    <Card className={cn('animate-pulse', className)}>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <div className="h-4 w-20 rounded bg-muted" />
+            <div className="mt-3 h-8 w-16 rounded bg-muted" />
+          </div>
+          <div className="h-10 w-10 rounded-lg bg-muted" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/ccw/frontend/src/components/ui/Badge.tsx b/ccw/frontend/src/components/ui/Badge.tsx
new file mode 100644
index 00000000..e74d67d4
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Badge.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline:
+          "text-foreground",
+        success:
+          "border-transparent bg-success text-white",
+        warning:
+          "border-transparent bg-warning text-white",
+        info:
+          "border-transparent bg-info text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/ccw/frontend/src/components/ui/Button.tsx b/ccw/frontend/src/components/ui/Button.tsx
new file mode 100644
index 00000000..274ce73a
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground",
+        link:
+          "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/ccw/frontend/src/components/ui/Card.tsx b/ccw/frontend/src/components/ui/Card.tsx
new file mode 100644
index 00000000..532612cf
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Card.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/ccw/frontend/src/components/ui/Dialog.tsx b/ccw/frontend/src/components/ui/Dialog.tsx
new file mode 100644
index 00000000..d0b130da
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Dialog.tsx
@@ -0,0 +1,119 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-card-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/ccw/frontend/src/components/ui/Dropdown.tsx b/ccw/frontend/src/components/ui/Dropdown.tsx
new file mode 100644
index 00000000..4fcd1c07
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Dropdown.tsx
@@ -0,0 +1,197 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/ccw/frontend/src/components/ui/Input.tsx b/ccw/frontend/src/components/ui/Input.tsx
new file mode 100644
index 00000000..0c2fcd29
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, error, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          error && "border-destructive focus-visible:ring-destructive",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/ccw/frontend/src/components/ui/Select.tsx b/ccw/frontend/src/components/ui/Select.tsx
new file mode 100644
index 00000000..32d07c6e
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Select.tsx
@@ -0,0 +1,156 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-card-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/ccw/frontend/src/components/ui/Tabs.tsx b/ccw/frontend/src/components/ui/Tabs.tsx
new file mode 100644
index 00000000..cc2b747b
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Tabs.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/ccw/frontend/src/components/ui/Toast.tsx b/ccw/frontend/src/components/ui/Toast.tsx
new file mode 100644
index 00000000..e4aa43a8
--- /dev/null
+++ b/ccw/frontend/src/components/ui/Toast.tsx
@@ -0,0 +1,128 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-card text-card-foreground",
+        success: "border-success bg-success text-white",
+        warning: "border-warning bg-warning text-white",
+        error: "border-destructive bg-destructive text-destructive-foreground",
+        info: "border-info bg-info text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.success]:border-white/20 group-[.success]:hover:bg-white/20 group-[.warning]:border-white/20 group-[.warning]:hover:bg-white/20 group-[.error]:border-white/20 group-[.error]:hover:bg-white/20",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.success]:text-white/50 group-[.success]:hover:text-white group-[.warning]:text-white/50 group-[.warning]:hover:text-white group-[.error]:text-white/50 group-[.error]:hover:text-white",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/ccw/frontend/src/components/ui/index.ts b/ccw/frontend/src/components/ui/index.ts
new file mode 100644
index 00000000..28c7354e
--- /dev/null
+++ b/ccw/frontend/src/components/ui/index.ts
@@ -0,0 +1,87 @@
+// UI Component Library - Barrel Export
+// All components follow shadcn/ui patterns with Radix UI primitives and Tailwind CSS
+
+// Button
+export { Button, buttonVariants } from "./Button";
+export type { ButtonProps } from "./Button";
+
+// Input
+export { Input } from "./Input";
+export type { InputProps } from "./Input";
+
+// Select (Radix)
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from "./Select";
+
+// Dialog (Radix)
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./Dialog";
+
+// Dropdown (Radix)
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./Dropdown";
+
+// Tabs (Radix)
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
+
+// Card
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./Card";
+
+// Badge
+export { Badge, badgeVariants } from "./Badge";
+export type { BadgeProps } from "./Badge";
+
+// Toast (Radix)
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+} from "./Toast";
diff --git a/ccw/frontend/src/hooks/index.ts b/ccw/frontend/src/hooks/index.ts
new file mode 100644
index 00000000..4dbeb077
--- /dev/null
+++ b/ccw/frontend/src/hooks/index.ts
@@ -0,0 +1,121 @@
+// ========================================
+// Hooks Barrel Export
+// ========================================
+// Re-export all custom hooks for convenient imports
+
+export { useTheme } from './useTheme';
+export type { UseThemeReturn } from './useTheme';
+
+export { useSession } from './useSession';
+export type { UseSessionReturn } from './useSession';
+
+export { useConfig } from './useConfig';
+export type { UseConfigReturn } from './useConfig';
+
+export { useNotifications } from './useNotifications';
+export type { UseNotificationsReturn, ToastOptions } from './useNotifications';
+
+export { useDashboardStats, usePrefetchDashboardStats, dashboardStatsKeys } from './useDashboardStats';
+export type { UseDashboardStatsOptions, UseDashboardStatsReturn } from './useDashboardStats';
+
+export {
+  useSessions,
+  useCreateSession,
+  useUpdateSession,
+  useArchiveSession,
+  useDeleteSession,
+  useSessionMutations,
+  usePrefetchSessions,
+  sessionsKeys,
+} from './useSessions';
+export type {
+  SessionsFilter,
+  UseSessionsOptions,
+  UseSessionsReturn,
+  UseCreateSessionReturn,
+  UseUpdateSessionReturn,
+  UseArchiveSessionReturn,
+  UseDeleteSessionReturn,
+} from './useSessions';
+
+// ========== Loops ==========
+export {
+  useLoops,
+  useLoop,
+  useCreateLoop,
+  useUpdateLoopStatus,
+  useDeleteLoop,
+  useLoopMutations,
+  loopsKeys,
+} from './useLoops';
+export type {
+  LoopsFilter,
+  UseLoopsOptions,
+  UseLoopsReturn,
+  UseCreateLoopReturn,
+  UseUpdateLoopStatusReturn,
+  UseDeleteLoopReturn,
+} from './useLoops';
+
+// ========== Issues ==========
+export {
+  useIssues,
+  useIssueQueue,
+  useCreateIssue,
+  useUpdateIssue,
+  useDeleteIssue,
+  useIssueMutations,
+  issuesKeys,
+} from './useIssues';
+export type {
+  IssuesFilter,
+  UseIssuesOptions,
+  UseIssuesReturn,
+  UseCreateIssueReturn,
+  UseUpdateIssueReturn,
+  UseDeleteIssueReturn,
+} from './useIssues';
+
+// ========== Skills ==========
+export {
+  useSkills,
+  useToggleSkill,
+  useSkillMutations,
+  skillsKeys,
+} from './useSkills';
+export type {
+  SkillsFilter,
+  UseSkillsOptions,
+  UseSkillsReturn,
+  UseToggleSkillReturn,
+} from './useSkills';
+
+// ========== Commands ==========
+export {
+  useCommands,
+  useCommandSearch,
+  commandsKeys,
+} from './useCommands';
+export type {
+  CommandsFilter,
+  UseCommandsOptions,
+  UseCommandsReturn,
+} from './useCommands';
+
+// ========== Memory ==========
+export {
+  useMemory,
+  useCreateMemory,
+  useUpdateMemory,
+  useDeleteMemory,
+  useMemoryMutations,
+  memoryKeys,
+} from './useMemory';
+export type {
+  MemoryFilter,
+  UseMemoryOptions,
+  UseMemoryReturn,
+  UseCreateMemoryReturn,
+  UseUpdateMemoryReturn,
+  UseDeleteMemoryReturn,
+} from './useMemory';
diff --git a/ccw/frontend/src/hooks/useCommands.ts b/ccw/frontend/src/hooks/useCommands.ts
new file mode 100644
index 00000000..3fe82ca2
--- /dev/null
+++ b/ccw/frontend/src/hooks/useCommands.ts
@@ -0,0 +1,128 @@
+// ========================================
+// useCommands Hook
+// ========================================
+// TanStack Query hooks for commands management
+
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchCommands,
+  type Command,
+} from '../lib/api';
+
+// Query key factory
+export const commandsKeys = {
+  all: ['commands'] as const,
+  lists: () => [...commandsKeys.all, 'list'] as const,
+  list: (filters?: CommandsFilter) => [...commandsKeys.lists(), filters] as const,
+};
+
+// Default stale time: 10 minutes (commands are static)
+const STALE_TIME = 10 * 60 * 1000;
+
+export interface CommandsFilter {
+  search?: string;
+  category?: string;
+  source?: Command['source'];
+}
+
+export interface UseCommandsOptions {
+  filter?: CommandsFilter;
+  staleTime?: number;
+  enabled?: boolean;
+}
+
+export interface UseCommandsReturn {
+  commands: Command[];
+  categories: string[];
+  commandsByCategory: Record<string, Command[]>;
+  totalCount: number;
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and filtering commands
+ */
+export function useCommands(options: UseCommandsOptions = {}): UseCommandsReturn {
+  const { filter, staleTime = STALE_TIME, enabled = true } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: commandsKeys.list(filter),
+    queryFn: fetchCommands,
+    staleTime,
+    enabled,
+    retry: 2,
+  });
+
+  const allCommands = query.data?.commands ?? [];
+
+  // Apply filters
+  const filteredCommands = (() => {
+    let commands = allCommands;
+
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      commands = commands.filter(
+        (c) =>
+          c.name.toLowerCase().includes(searchLower) ||
+          c.description.toLowerCase().includes(searchLower) ||
+          c.aliases?.some((a) => a.toLowerCase().includes(searchLower))
+      );
+    }
+
+    if (filter?.category) {
+      commands = commands.filter((c) => c.category === filter.category);
+    }
+
+    if (filter?.source) {
+      commands = commands.filter((c) => c.source === filter.source);
+    }
+
+    return commands;
+  })();
+
+  // Group by category
+  const commandsByCategory: Record<string, Command[]> = {};
+  const categories = new Set<string>();
+
+  for (const command of allCommands) {
+    const category = command.category || 'Uncategorized';
+    categories.add(category);
+    if (!commandsByCategory[category]) {
+      commandsByCategory[category] = [];
+    }
+    commandsByCategory[category].push(command);
+  }
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: commandsKeys.all });
+  };
+
+  return {
+    commands: filteredCommands,
+    categories: Array.from(categories).sort(),
+    commandsByCategory,
+    totalCount: allCommands.length,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch,
+    invalidate,
+  };
+}
+
+/**
+ * Hook to search commands by name or alias
+ */
+export function useCommandSearch(searchTerm: string) {
+  const { commands } = useCommands({ filter: { search: searchTerm } });
+  return commands;
+}
diff --git a/ccw/frontend/src/hooks/useConfig.ts b/ccw/frontend/src/hooks/useConfig.ts
new file mode 100644
index 00000000..9eedf7e4
--- /dev/null
+++ b/ccw/frontend/src/hooks/useConfig.ts
@@ -0,0 +1,143 @@
+// ========================================
+// useConfig Hook
+// ========================================
+// Convenient hook for configuration management
+
+import { useCallback } from 'react';
+import {
+  useConfigStore,
+  selectCliTools,
+  selectDefaultCliTool,
+  selectApiEndpoints,
+  selectUserPreferences,
+  selectFeatureFlags,
+  getFirstEnabledCliTool,
+} from '../stores/configStore';
+import type { CliToolConfig, ApiEndpoints, UserPreferences, ConfigState } from '../types/store';
+
+export interface UseConfigReturn {
+  /** CLI tools configuration */
+  cliTools: Record<string, CliToolConfig>;
+  /** Default CLI tool ID */
+  defaultCliTool: string;
+  /** First enabled CLI tool (fallback) */
+  firstEnabledTool: string;
+  /** API endpoints */
+  apiEndpoints: ApiEndpoints;
+  /** User preferences */
+  userPreferences: UserPreferences;
+  /** Feature flags */
+  featureFlags: Record<string, boolean>;
+  /** Update CLI tool config */
+  updateCliTool: (toolId: string, updates: Partial<CliToolConfig>) => void;
+  /** Set default CLI tool */
+  setDefaultCliTool: (toolId: string) => void;
+  /** Update user preferences */
+  setUserPreferences: (prefs: Partial<UserPreferences>) => void;
+  /** Reset user preferences to defaults */
+  resetUserPreferences: () => void;
+  /** Set a feature flag */
+  setFeatureFlag: (flag: string, enabled: boolean) => void;
+  /** Check if a feature is enabled */
+  isFeatureEnabled: (flag: string) => boolean;
+  /** Load full config */
+  loadConfig: (config: Partial<ConfigState>) => void;
+}
+
+/**
+ * Hook for managing configuration state
+ * @returns Config state and actions
+ *
+ * @example
+ * ```tsx
+ * const { cliTools, defaultCliTool, userPreferences, setUserPreferences } = useConfig();
+ *
+ * return (
+ *   <SettingsPanel
+ *     preferences={userPreferences}
+ *     onUpdate={setUserPreferences}
+ *   />
+ * );
+ * ```
+ */
+export function useConfig(): UseConfigReturn {
+  const cliTools = useConfigStore(selectCliTools);
+  const defaultCliTool = useConfigStore(selectDefaultCliTool);
+  const apiEndpoints = useConfigStore(selectApiEndpoints);
+  const userPreferences = useConfigStore(selectUserPreferences);
+  const featureFlags = useConfigStore(selectFeatureFlags);
+
+  // Actions
+  const updateCliToolAction = useConfigStore((state) => state.updateCliTool);
+  const setDefaultCliToolAction = useConfigStore((state) => state.setDefaultCliTool);
+  const setUserPreferencesAction = useConfigStore((state) => state.setUserPreferences);
+  const resetUserPreferencesAction = useConfigStore((state) => state.resetUserPreferences);
+  const setFeatureFlagAction = useConfigStore((state) => state.setFeatureFlag);
+  const loadConfigAction = useConfigStore((state) => state.loadConfig);
+
+  // Computed values
+  const firstEnabledTool = getFirstEnabledCliTool(cliTools);
+
+  // Callbacks
+  const updateCliTool = useCallback(
+    (toolId: string, updates: Partial<CliToolConfig>) => {
+      updateCliToolAction(toolId, updates);
+    },
+    [updateCliToolAction]
+  );
+
+  const setDefaultCliTool = useCallback(
+    (toolId: string) => {
+      setDefaultCliToolAction(toolId);
+    },
+    [setDefaultCliToolAction]
+  );
+
+  const setUserPreferences = useCallback(
+    (prefs: Partial<UserPreferences>) => {
+      setUserPreferencesAction(prefs);
+    },
+    [setUserPreferencesAction]
+  );
+
+  const resetUserPreferences = useCallback(() => {
+    resetUserPreferencesAction();
+  }, [resetUserPreferencesAction]);
+
+  const setFeatureFlag = useCallback(
+    (flag: string, enabled: boolean) => {
+      setFeatureFlagAction(flag, enabled);
+    },
+    [setFeatureFlagAction]
+  );
+
+  const isFeatureEnabled = useCallback(
+    (flag: string): boolean => {
+      return featureFlags[flag] ?? false;
+    },
+    [featureFlags]
+  );
+
+  const loadConfig = useCallback(
+    (config: Partial<ConfigState>) => {
+      loadConfigAction(config);
+    },
+    [loadConfigAction]
+  );
+
+  return {
+    cliTools,
+    defaultCliTool,
+    firstEnabledTool,
+    apiEndpoints,
+    userPreferences,
+    featureFlags,
+    updateCliTool,
+    setDefaultCliTool,
+    setUserPreferences,
+    resetUserPreferences,
+    setFeatureFlag,
+    isFeatureEnabled,
+    loadConfig,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useDashboardStats.ts b/ccw/frontend/src/hooks/useDashboardStats.ts
new file mode 100644
index 00000000..f3ef5367
--- /dev/null
+++ b/ccw/frontend/src/hooks/useDashboardStats.ts
@@ -0,0 +1,111 @@
+// ========================================
+// useDashboardStats Hook
+// ========================================
+// TanStack Query hook for dashboard statistics
+
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { fetchDashboardStats, type DashboardStats } from '../lib/api';
+
+// Query key factory
+export const dashboardStatsKeys = {
+  all: ['dashboardStats'] as const,
+  detail: () => [...dashboardStatsKeys.all, 'detail'] as const,
+};
+
+// Default stale time: 30 seconds
+const STALE_TIME = 30 * 1000;
+
+export interface UseDashboardStatsOptions {
+  /** Override default stale time (ms) */
+  staleTime?: number;
+  /** Enable/disable the query */
+  enabled?: boolean;
+  /** Refetch interval (ms), 0 to disable */
+  refetchInterval?: number;
+}
+
+export interface UseDashboardStatsReturn {
+  /** Dashboard statistics data */
+  stats: DashboardStats | undefined;
+  /** Loading state for initial fetch */
+  isLoading: boolean;
+  /** Fetching state (initial or refetch) */
+  isFetching: boolean;
+  /** Error object if query failed */
+  error: Error | null;
+  /** Whether data is stale */
+  isStale: boolean;
+  /** Manually refetch data */
+  refetch: () => Promise<void>;
+  /** Invalidate and refetch stats */
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and managing dashboard statistics
+ *
+ * @example
+ * ```tsx
+ * const { stats, isLoading, error } = useDashboardStats();
+ *
+ * if (isLoading) return <LoadingSpinner />;
+ * if (error) return <ErrorMessage error={error} />;
+ *
+ * return (
+ *   <StatsGrid>
+ *     <StatCard title="Sessions" value={stats.totalSessions} />
+ *     <StatCard title="Tasks" value={stats.totalTasks} />
+ *   </StatsGrid>
+ * );
+ * ```
+ */
+export function useDashboardStats(
+  options: UseDashboardStatsOptions = {}
+): UseDashboardStatsReturn {
+  const { staleTime = STALE_TIME, enabled = true, refetchInterval = 0 } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: dashboardStatsKeys.detail(),
+    queryFn: fetchDashboardStats,
+    staleTime,
+    enabled,
+    refetchInterval: refetchInterval > 0 ? refetchInterval : false,
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: dashboardStatsKeys.all });
+  };
+
+  return {
+    stats: query.data,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    isStale: query.isStale,
+    refetch,
+    invalidate,
+  };
+}
+
+/**
+ * Hook to prefetch dashboard stats
+ * Use this to prefetch data before navigating to home page
+ */
+export function usePrefetchDashboardStats() {
+  const queryClient = useQueryClient();
+
+  return () => {
+    queryClient.prefetchQuery({
+      queryKey: dashboardStatsKeys.detail(),
+      queryFn: fetchDashboardStats,
+      staleTime: STALE_TIME,
+    });
+  };
+}
diff --git a/ccw/frontend/src/hooks/useFlows.ts b/ccw/frontend/src/hooks/useFlows.ts
new file mode 100644
index 00000000..ff46556c
--- /dev/null
+++ b/ccw/frontend/src/hooks/useFlows.ts
@@ -0,0 +1,295 @@
+// ========================================
+// useFlows Hook
+// ========================================
+// TanStack Query hooks for flow API operations
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { Flow } from '../types/flow';
+
+// API base URL
+const API_BASE = '/api/orchestrator';
+
+// Query keys
+export const flowKeys = {
+  all: ['flows'] as const,
+  lists: () => [...flowKeys.all, 'list'] as const,
+  list: (filters?: Record<string, unknown>) => [...flowKeys.lists(), filters] as const,
+  details: () => [...flowKeys.all, 'detail'] as const,
+  detail: (id: string) => [...flowKeys.details(), id] as const,
+};
+
+// API response types
+interface FlowsListResponse {
+  flows: Flow[];
+  total: number;
+}
+
+interface ExecutionStartResponse {
+  execId: string;
+  flowId: string;
+  status: 'running';
+  startedAt: string;
+}
+
+interface ExecutionControlResponse {
+  execId: string;
+  status: 'paused' | 'running' | 'stopped';
+  message: string;
+}
+
+// ========== Fetch Functions ==========
+
+async function fetchFlows(): Promise<FlowsListResponse> {
+  const response = await fetch(`${API_BASE}/flows`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch flows: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function fetchFlow(id: string): Promise<Flow> {
+  const response = await fetch(`${API_BASE}/flows/${id}`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch flow: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function createFlow(flow: Omit<Flow, 'id' | 'created_at' | 'updated_at'>): Promise<Flow> {
+  const response = await fetch(`${API_BASE}/flows`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(flow),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to create flow: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function updateFlow(id: string, flow: Partial<Flow>): Promise<Flow> {
+  const response = await fetch(`${API_BASE}/flows/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(flow),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to update flow: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function deleteFlow(id: string): Promise<void> {
+  const response = await fetch(`${API_BASE}/flows/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to delete flow: ${response.statusText}`);
+  }
+}
+
+async function duplicateFlow(id: string): Promise<Flow> {
+  const response = await fetch(`${API_BASE}/flows/${id}/duplicate`, {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to duplicate flow: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+// ========== Execution Functions ==========
+
+async function executeFlow(flowId: string): Promise<ExecutionStartResponse> {
+  const response = await fetch(`${API_BASE}/flows/${flowId}/execute`, {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to execute flow: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function pauseExecution(execId: string): Promise<ExecutionControlResponse> {
+  const response = await fetch(`${API_BASE}/executions/${execId}/pause`, {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to pause execution: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function resumeExecution(execId: string): Promise<ExecutionControlResponse> {
+  const response = await fetch(`${API_BASE}/executions/${execId}/resume`, {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to resume execution: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function stopExecution(execId: string): Promise<ExecutionControlResponse> {
+  const response = await fetch(`${API_BASE}/executions/${execId}/stop`, {
+    method: 'POST',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to stop execution: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+// ========== Query Hooks ==========
+
+/**
+ * Fetch all flows
+ */
+export function useFlows() {
+  return useQuery({
+    queryKey: flowKeys.lists(),
+    queryFn: fetchFlows,
+    staleTime: 30000, // 30 seconds
+  });
+}
+
+/**
+ * Fetch a single flow by ID
+ */
+export function useFlow(id: string | null) {
+  return useQuery({
+    queryKey: flowKeys.detail(id ?? ''),
+    queryFn: () => fetchFlow(id!),
+    enabled: !!id,
+    staleTime: 30000,
+  });
+}
+
+// ========== Mutation Hooks ==========
+
+/**
+ * Create a new flow
+ */
+export function useCreateFlow() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createFlow,
+    onSuccess: (newFlow) => {
+      // Optimistically add to list
+      queryClient.setQueryData<FlowsListResponse>(flowKeys.lists(), (old) => {
+        if (!old) return { flows: [newFlow], total: 1 };
+        return {
+          flows: [...old.flows, newFlow],
+          total: old.total + 1,
+        };
+      });
+      // Invalidate to refetch
+      queryClient.invalidateQueries({ queryKey: flowKeys.lists() });
+    },
+  });
+}
+
+/**
+ * Update an existing flow
+ */
+export function useUpdateFlow() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, flow }: { id: string; flow: Partial<Flow> }) => updateFlow(id, flow),
+    onSuccess: (updatedFlow) => {
+      // Update in cache
+      queryClient.setQueryData<Flow>(flowKeys.detail(updatedFlow.id), updatedFlow);
+      queryClient.setQueryData<FlowsListResponse>(flowKeys.lists(), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          flows: old.flows.map((f) => (f.id === updatedFlow.id ? updatedFlow : f)),
+        };
+      });
+    },
+  });
+}
+
+/**
+ * Delete a flow
+ */
+export function useDeleteFlow() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteFlow,
+    onSuccess: (_, deletedId) => {
+      // Remove from cache
+      queryClient.removeQueries({ queryKey: flowKeys.detail(deletedId) });
+      queryClient.setQueryData<FlowsListResponse>(flowKeys.lists(), (old) => {
+        if (!old) return old;
+        return {
+          flows: old.flows.filter((f) => f.id !== deletedId),
+          total: old.total - 1,
+        };
+      });
+    },
+  });
+}
+
+/**
+ * Duplicate a flow
+ */
+export function useDuplicateFlow() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: duplicateFlow,
+    onSuccess: (newFlow) => {
+      // Add to list
+      queryClient.setQueryData<FlowsListResponse>(flowKeys.lists(), (old) => {
+        if (!old) return { flows: [newFlow], total: 1 };
+        return {
+          flows: [...old.flows, newFlow],
+          total: old.total + 1,
+        };
+      });
+      queryClient.invalidateQueries({ queryKey: flowKeys.lists() });
+    },
+  });
+}
+
+// ========== Execution Mutation Hooks ==========
+
+/**
+ * Execute a flow
+ */
+export function useExecuteFlow() {
+  return useMutation({
+    mutationFn: executeFlow,
+  });
+}
+
+/**
+ * Pause execution
+ */
+export function usePauseExecution() {
+  return useMutation({
+    mutationFn: pauseExecution,
+  });
+}
+
+/**
+ * Resume execution
+ */
+export function useResumeExecution() {
+  return useMutation({
+    mutationFn: resumeExecution,
+  });
+}
+
+/**
+ * Stop execution
+ */
+export function useStopExecution() {
+  return useMutation({
+    mutationFn: stopExecution,
+  });
+}
diff --git a/ccw/frontend/src/hooks/useIssues.ts b/ccw/frontend/src/hooks/useIssues.ts
new file mode 100644
index 00000000..5c4e065c
--- /dev/null
+++ b/ccw/frontend/src/hooks/useIssues.ts
@@ -0,0 +1,297 @@
+// ========================================
+// useIssues Hook
+// ========================================
+// TanStack Query hooks for issues with queue management
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchIssues,
+  fetchIssueHistory,
+  fetchIssueQueue,
+  createIssue,
+  updateIssue,
+  deleteIssue,
+  type Issue,
+  type IssuesResponse,
+  type IssueQueue,
+} from '../lib/api';
+
+// Query key factory
+export const issuesKeys = {
+  all: ['issues'] as const,
+  lists: () => [...issuesKeys.all, 'list'] as const,
+  list: (filters?: IssuesFilter) => [...issuesKeys.lists(), filters] as const,
+  history: () => [...issuesKeys.all, 'history'] as const,
+  queue: () => [...issuesKeys.all, 'queue'] as const,
+  details: () => [...issuesKeys.all, 'detail'] as const,
+  detail: (id: string) => [...issuesKeys.details(), id] as const,
+};
+
+// Default stale time: 30 seconds
+const STALE_TIME = 30 * 1000;
+
+export interface IssuesFilter {
+  status?: Issue['status'][];
+  priority?: Issue['priority'][];
+  search?: string;
+  includeHistory?: boolean;
+}
+
+export interface UseIssuesOptions {
+  filter?: IssuesFilter;
+  projectPath?: string;
+  staleTime?: number;
+  enabled?: boolean;
+  refetchInterval?: number;
+}
+
+export interface UseIssuesReturn {
+  issues: Issue[];
+  historyIssues: Issue[];
+  allIssues: Issue[];
+  issuesByStatus: Record<Issue['status'], Issue[]>;
+  issuesByPriority: Record<Issue['priority'], Issue[]>;
+  openCount: number;
+  criticalCount: number;
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and filtering issues
+ */
+export function useIssues(options: UseIssuesOptions = {}): UseIssuesReturn {
+  const { filter, projectPath, staleTime = STALE_TIME, enabled = true, refetchInterval = 0 } = options;
+  const queryClient = useQueryClient();
+
+  const issuesQuery = useQuery({
+    queryKey: issuesKeys.list(filter),
+    queryFn: () => fetchIssues(projectPath),
+    staleTime,
+    enabled,
+    refetchInterval: refetchInterval > 0 ? refetchInterval : false,
+    retry: 2,
+  });
+
+  const historyQuery = useQuery({
+    queryKey: issuesKeys.history(),
+    queryFn: () => fetchIssueHistory(projectPath),
+    staleTime,
+    enabled: enabled && (filter?.includeHistory ?? false),
+    retry: 2,
+  });
+
+  const allIssues = issuesQuery.data?.issues ?? [];
+  const historyIssues = historyQuery.data?.issues ?? [];
+
+  // Apply filters
+  const filteredIssues = (() => {
+    let issues = [...allIssues];
+
+    if (filter?.includeHistory) {
+      issues = [...issues, ...historyIssues];
+    }
+
+    if (filter?.status && filter.status.length > 0) {
+      issues = issues.filter((i) => filter.status!.includes(i.status));
+    }
+
+    if (filter?.priority && filter.priority.length > 0) {
+      issues = issues.filter((i) => filter.priority!.includes(i.priority));
+    }
+
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      issues = issues.filter(
+        (i) =>
+          i.id.toLowerCase().includes(searchLower) ||
+          i.title.toLowerCase().includes(searchLower) ||
+          i.context?.toLowerCase().includes(searchLower)
+      );
+    }
+
+    return issues;
+  })();
+
+  // Group by status
+  const issuesByStatus: Record<Issue['status'], Issue[]> = {
+    open: [],
+    in_progress: [],
+    resolved: [],
+    closed: [],
+    completed: [],
+  };
+
+  for (const issue of allIssues) {
+    issuesByStatus[issue.status].push(issue);
+  }
+
+  // Group by priority
+  const issuesByPriority: Record<Issue['priority'], Issue[]> = {
+    low: [],
+    medium: [],
+    high: [],
+    critical: [],
+  };
+
+  for (const issue of allIssues) {
+    issuesByPriority[issue.priority].push(issue);
+  }
+
+  const refetch = async () => {
+    await Promise.all([issuesQuery.refetch(), historyQuery.refetch()]);
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: issuesKeys.all });
+  };
+
+  return {
+    issues: filteredIssues,
+    historyIssues,
+    allIssues,
+    issuesByStatus,
+    issuesByPriority,
+    openCount: issuesByStatus.open.length + issuesByStatus.in_progress.length,
+    criticalCount: issuesByPriority.critical.length,
+    isLoading: issuesQuery.isLoading,
+    isFetching: issuesQuery.isFetching || historyQuery.isFetching,
+    error: issuesQuery.error || historyQuery.error,
+    refetch,
+    invalidate,
+  };
+}
+
+/**
+ * Hook for fetching issue queue
+ */
+export function useIssueQueue(projectPath?: string) {
+  return useQuery({
+    queryKey: issuesKeys.queue(),
+    queryFn: () => fetchIssueQueue(projectPath),
+    staleTime: STALE_TIME,
+    retry: 2,
+  });
+}
+
+// ========== Mutations ==========
+
+export interface UseCreateIssueReturn {
+  createIssue: (input: { title: string; context?: string; priority?: Issue['priority'] }) => Promise<Issue>;
+  isCreating: boolean;
+  error: Error | null;
+}
+
+export function useCreateIssue(): UseCreateIssueReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: createIssue,
+    onSuccess: (newIssue) => {
+      queryClient.setQueryData<IssuesResponse>(issuesKeys.list(), (old) => {
+        if (!old) return { issues: [newIssue] };
+        return {
+          issues: [newIssue, ...old.issues],
+        };
+      });
+    },
+  });
+
+  return {
+    createIssue: mutation.mutateAsync,
+    isCreating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseUpdateIssueReturn {
+  updateIssue: (issueId: string, input: Partial<Issue>) => Promise<Issue>;
+  isUpdating: boolean;
+  error: Error | null;
+}
+
+export function useUpdateIssue(): UseUpdateIssueReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ issueId, input }: { issueId: string; input: Partial<Issue> }) =>
+      updateIssue(issueId, input),
+    onSuccess: (updatedIssue) => {
+      queryClient.setQueryData<IssuesResponse>(issuesKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          issues: old.issues.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
+        };
+      });
+    },
+  });
+
+  return {
+    updateIssue: (issueId, input) => mutation.mutateAsync({ issueId, input }),
+    isUpdating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseDeleteIssueReturn {
+  deleteIssue: (issueId: string) => Promise<void>;
+  isDeleting: boolean;
+  error: Error | null;
+}
+
+export function useDeleteIssue(): UseDeleteIssueReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: deleteIssue,
+    onMutate: async (issueId) => {
+      await queryClient.cancelQueries({ queryKey: issuesKeys.all });
+      const previousIssues = queryClient.getQueryData<IssuesResponse>(issuesKeys.list());
+
+      queryClient.setQueryData<IssuesResponse>(issuesKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          issues: old.issues.filter((i) => i.id !== issueId),
+        };
+      });
+
+      return { previousIssues };
+    },
+    onError: (_error, _issueId, context) => {
+      if (context?.previousIssues) {
+        queryClient.setQueryData(issuesKeys.list(), context.previousIssues);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: issuesKeys.all });
+    },
+  });
+
+  return {
+    deleteIssue: mutation.mutateAsync,
+    isDeleting: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+/**
+ * Combined hook for all issue mutations
+ */
+export function useIssueMutations() {
+  const create = useCreateIssue();
+  const update = useUpdateIssue();
+  const remove = useDeleteIssue();
+
+  return {
+    createIssue: create.createIssue,
+    updateIssue: update.updateIssue,
+    deleteIssue: remove.deleteIssue,
+    isCreating: create.isCreating,
+    isUpdating: update.isUpdating,
+    isDeleting: remove.isDeleting,
+    isMutating: create.isCreating || update.isUpdating || remove.isDeleting,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useLoops.ts b/ccw/frontend/src/hooks/useLoops.ts
new file mode 100644
index 00000000..518a639f
--- /dev/null
+++ b/ccw/frontend/src/hooks/useLoops.ts
@@ -0,0 +1,262 @@
+// ========================================
+// useLoops Hook
+// ========================================
+// TanStack Query hooks for loops with real-time updates
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchLoops,
+  fetchLoop,
+  createLoop,
+  updateLoopStatus,
+  deleteLoop,
+  type Loop,
+  type LoopsResponse,
+} from '../lib/api';
+
+// Query key factory
+export const loopsKeys = {
+  all: ['loops'] as const,
+  lists: () => [...loopsKeys.all, 'list'] as const,
+  list: (filters?: LoopsFilter) => [...loopsKeys.lists(), filters] as const,
+  details: () => [...loopsKeys.all, 'detail'] as const,
+  detail: (id: string) => [...loopsKeys.details(), id] as const,
+};
+
+// Default stale time: 10 seconds (loops update frequently)
+const STALE_TIME = 10 * 1000;
+
+export interface LoopsFilter {
+  status?: Loop['status'][];
+  search?: string;
+}
+
+export interface UseLoopsOptions {
+  filter?: LoopsFilter;
+  staleTime?: number;
+  enabled?: boolean;
+  refetchInterval?: number;
+}
+
+export interface UseLoopsReturn {
+  loops: Loop[];
+  loopsByStatus: Record<Loop['status'], Loop[]>;
+  runningCount: number;
+  completedCount: number;
+  failedCount: number;
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and filtering loops
+ */
+export function useLoops(options: UseLoopsOptions = {}): UseLoopsReturn {
+  const { filter, staleTime = STALE_TIME, enabled = true, refetchInterval = 0 } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: loopsKeys.list(filter),
+    queryFn: fetchLoops,
+    staleTime,
+    enabled,
+    refetchInterval: refetchInterval > 0 ? refetchInterval : false,
+    retry: 2,
+  });
+
+  const allLoops = query.data?.loops ?? [];
+
+  // Apply filters
+  const filteredLoops = (() => {
+    let loops = allLoops;
+
+    if (filter?.status && filter.status.length > 0) {
+      loops = loops.filter((l) => filter.status!.includes(l.status));
+    }
+
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      loops = loops.filter(
+        (l) =>
+          l.id.toLowerCase().includes(searchLower) ||
+          l.name?.toLowerCase().includes(searchLower) ||
+          l.prompt?.toLowerCase().includes(searchLower)
+      );
+    }
+
+    return loops;
+  })();
+
+  // Group by status for Kanban
+  const loopsByStatus: Record<Loop['status'], Loop[]> = {
+    created: [],
+    running: [],
+    paused: [],
+    completed: [],
+    failed: [],
+  };
+
+  for (const loop of allLoops) {
+    loopsByStatus[loop.status].push(loop);
+  }
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: loopsKeys.all });
+  };
+
+  return {
+    loops: filteredLoops,
+    loopsByStatus,
+    runningCount: loopsByStatus.running.length,
+    completedCount: loopsByStatus.completed.length,
+    failedCount: loopsByStatus.failed.length,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch,
+    invalidate,
+  };
+}
+
+/**
+ * Hook for fetching a single loop
+ */
+export function useLoop(loopId: string, options: { enabled?: boolean } = {}) {
+  return useQuery({
+    queryKey: loopsKeys.detail(loopId),
+    queryFn: () => fetchLoop(loopId),
+    enabled: options.enabled ?? !!loopId,
+    staleTime: STALE_TIME,
+  });
+}
+
+// ========== Mutations ==========
+
+export interface UseCreateLoopReturn {
+  createLoop: (input: { prompt: string; tool?: string; mode?: string }) => Promise<Loop>;
+  isCreating: boolean;
+  error: Error | null;
+}
+
+export function useCreateLoop(): UseCreateLoopReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: createLoop,
+    onSuccess: (newLoop) => {
+      queryClient.setQueryData<LoopsResponse>(loopsKeys.list(), (old) => {
+        if (!old) return { loops: [newLoop], total: 1 };
+        return {
+          loops: [newLoop, ...old.loops],
+          total: old.total + 1,
+        };
+      });
+    },
+  });
+
+  return {
+    createLoop: mutation.mutateAsync,
+    isCreating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseUpdateLoopStatusReturn {
+  updateStatus: (loopId: string, action: 'pause' | 'resume' | 'stop') => Promise<Loop>;
+  isUpdating: boolean;
+  error: Error | null;
+}
+
+export function useUpdateLoopStatus(): UseUpdateLoopStatusReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ loopId, action }: { loopId: string; action: 'pause' | 'resume' | 'stop' }) =>
+      updateLoopStatus(loopId, action),
+    onSuccess: (updatedLoop) => {
+      queryClient.setQueryData<LoopsResponse>(loopsKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          loops: old.loops.map((l) => (l.id === updatedLoop.id ? updatedLoop : l)),
+        };
+      });
+      queryClient.setQueryData(loopsKeys.detail(updatedLoop.id), updatedLoop);
+    },
+  });
+
+  return {
+    updateStatus: (loopId, action) => mutation.mutateAsync({ loopId, action }),
+    isUpdating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseDeleteLoopReturn {
+  deleteLoop: (loopId: string) => Promise<void>;
+  isDeleting: boolean;
+  error: Error | null;
+}
+
+export function useDeleteLoop(): UseDeleteLoopReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: deleteLoop,
+    onMutate: async (loopId) => {
+      await queryClient.cancelQueries({ queryKey: loopsKeys.all });
+      const previousLoops = queryClient.getQueryData<LoopsResponse>(loopsKeys.list());
+
+      queryClient.setQueryData<LoopsResponse>(loopsKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          loops: old.loops.filter((l) => l.id !== loopId),
+          total: old.total - 1,
+        };
+      });
+
+      return { previousLoops };
+    },
+    onError: (_error, _loopId, context) => {
+      if (context?.previousLoops) {
+        queryClient.setQueryData(loopsKeys.list(), context.previousLoops);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: loopsKeys.all });
+    },
+  });
+
+  return {
+    deleteLoop: mutation.mutateAsync,
+    isDeleting: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+/**
+ * Combined hook for all loop mutations
+ */
+export function useLoopMutations() {
+  const create = useCreateLoop();
+  const update = useUpdateLoopStatus();
+  const remove = useDeleteLoop();
+
+  return {
+    createLoop: create.createLoop,
+    updateStatus: update.updateStatus,
+    deleteLoop: remove.deleteLoop,
+    isCreating: create.isCreating,
+    isUpdating: update.isUpdating,
+    isDeleting: remove.isDeleting,
+    isMutating: create.isCreating || update.isUpdating || remove.isDeleting,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useMemory.ts b/ccw/frontend/src/hooks/useMemory.ts
new file mode 100644
index 00000000..144dd226
--- /dev/null
+++ b/ccw/frontend/src/hooks/useMemory.ts
@@ -0,0 +1,244 @@
+// ========================================
+// useMemory Hook
+// ========================================
+// TanStack Query hooks for core memory management
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchMemories,
+  createMemory,
+  updateMemory,
+  deleteMemory,
+  type CoreMemory,
+  type MemoryResponse,
+} from '../lib/api';
+
+// Query key factory
+export const memoryKeys = {
+  all: ['memory'] as const,
+  lists: () => [...memoryKeys.all, 'list'] as const,
+  list: (filters?: MemoryFilter) => [...memoryKeys.lists(), filters] as const,
+  details: () => [...memoryKeys.all, 'detail'] as const,
+  detail: (id: string) => [...memoryKeys.details(), id] as const,
+};
+
+// Default stale time: 1 minute
+const STALE_TIME = 60 * 1000;
+
+export interface MemoryFilter {
+  search?: string;
+  tags?: string[];
+}
+
+export interface UseMemoryOptions {
+  filter?: MemoryFilter;
+  staleTime?: number;
+  enabled?: boolean;
+}
+
+export interface UseMemoryReturn {
+  memories: CoreMemory[];
+  totalSize: number;
+  claudeMdCount: number;
+  allTags: string[];
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and filtering memories
+ */
+export function useMemory(options: UseMemoryOptions = {}): UseMemoryReturn {
+  const { filter, staleTime = STALE_TIME, enabled = true } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: memoryKeys.list(filter),
+    queryFn: fetchMemories,
+    staleTime,
+    enabled,
+    retry: 2,
+  });
+
+  const allMemories = query.data?.memories ?? [];
+  const totalSize = query.data?.totalSize ?? 0;
+  const claudeMdCount = query.data?.claudeMdCount ?? 0;
+
+  // Apply filters
+  const filteredMemories = (() => {
+    let memories = allMemories;
+
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      memories = memories.filter(
+        (m) =>
+          m.content.toLowerCase().includes(searchLower) ||
+          m.source?.toLowerCase().includes(searchLower) ||
+          m.tags?.some((t) => t.toLowerCase().includes(searchLower))
+      );
+    }
+
+    if (filter?.tags && filter.tags.length > 0) {
+      memories = memories.filter((m) =>
+        filter.tags!.some((tag) => m.tags?.includes(tag))
+      );
+    }
+
+    return memories;
+  })();
+
+  // Collect all unique tags
+  const allTags = Array.from(
+    new Set(allMemories.flatMap((m) => m.tags ?? []))
+  ).sort();
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: memoryKeys.all });
+  };
+
+  return {
+    memories: filteredMemories,
+    totalSize,
+    claudeMdCount,
+    allTags,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch,
+    invalidate,
+  };
+}
+
+// ========== Mutations ==========
+
+export interface UseCreateMemoryReturn {
+  createMemory: (input: { content: string; tags?: string[] }) => Promise<CoreMemory>;
+  isCreating: boolean;
+  error: Error | null;
+}
+
+export function useCreateMemory(): UseCreateMemoryReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: createMemory,
+    onSuccess: (newMemory) => {
+      queryClient.setQueryData<MemoryResponse>(memoryKeys.list(), (old) => {
+        if (!old) return { memories: [newMemory], totalSize: 0, claudeMdCount: 0 };
+        return {
+          ...old,
+          memories: [newMemory, ...old.memories],
+          totalSize: old.totalSize + (newMemory.size ?? 0),
+        };
+      });
+    },
+  });
+
+  return {
+    createMemory: mutation.mutateAsync,
+    isCreating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseUpdateMemoryReturn {
+  updateMemory: (memoryId: string, input: Partial<CoreMemory>) => Promise<CoreMemory>;
+  isUpdating: boolean;
+  error: Error | null;
+}
+
+export function useUpdateMemory(): UseUpdateMemoryReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ memoryId, input }: { memoryId: string; input: Partial<CoreMemory> }) =>
+      updateMemory(memoryId, input),
+    onSuccess: (updatedMemory) => {
+      queryClient.setQueryData<MemoryResponse>(memoryKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          memories: old.memories.map((m) =>
+            m.id === updatedMemory.id ? updatedMemory : m
+          ),
+        };
+      });
+    },
+  });
+
+  return {
+    updateMemory: (memoryId, input) => mutation.mutateAsync({ memoryId, input }),
+    isUpdating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseDeleteMemoryReturn {
+  deleteMemory: (memoryId: string) => Promise<void>;
+  isDeleting: boolean;
+  error: Error | null;
+}
+
+export function useDeleteMemory(): UseDeleteMemoryReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: deleteMemory,
+    onMutate: async (memoryId) => {
+      await queryClient.cancelQueries({ queryKey: memoryKeys.all });
+      const previousMemories = queryClient.getQueryData<MemoryResponse>(memoryKeys.list());
+
+      queryClient.setQueryData<MemoryResponse>(memoryKeys.list(), (old) => {
+        if (!old) return old;
+        const removedMemory = old.memories.find((m) => m.id === memoryId);
+        return {
+          ...old,
+          memories: old.memories.filter((m) => m.id !== memoryId),
+          totalSize: old.totalSize - (removedMemory?.size ?? 0),
+        };
+      });
+
+      return { previousMemories };
+    },
+    onError: (_error, _memoryId, context) => {
+      if (context?.previousMemories) {
+        queryClient.setQueryData(memoryKeys.list(), context.previousMemories);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: memoryKeys.all });
+    },
+  });
+
+  return {
+    deleteMemory: mutation.mutateAsync,
+    isDeleting: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+/**
+ * Combined hook for all memory mutations
+ */
+export function useMemoryMutations() {
+  const create = useCreateMemory();
+  const update = useUpdateMemory();
+  const remove = useDeleteMemory();
+
+  return {
+    createMemory: create.createMemory,
+    updateMemory: update.updateMemory,
+    deleteMemory: remove.deleteMemory,
+    isCreating: create.isCreating,
+    isUpdating: update.isUpdating,
+    isDeleting: remove.isDeleting,
+    isMutating: create.isCreating || update.isUpdating || remove.isDeleting,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useNotifications.ts b/ccw/frontend/src/hooks/useNotifications.ts
new file mode 100644
index 00000000..909f7626
--- /dev/null
+++ b/ccw/frontend/src/hooks/useNotifications.ts
@@ -0,0 +1,232 @@
+// ========================================
+// useNotifications Hook
+// ========================================
+// Convenient hook for notification and toast management
+
+import { useCallback } from 'react';
+import {
+  useNotificationStore,
+  selectToasts,
+  selectWsStatus,
+  selectWsLastMessage,
+  selectIsPanelVisible,
+  selectPersistentNotifications,
+} from '../stores/notificationStore';
+import type { Toast, ToastType, WebSocketStatus, WebSocketMessage } from '../types/store';
+
+export interface UseNotificationsReturn {
+  /** Current toast queue */
+  toasts: Toast[];
+  /** WebSocket connection status */
+  wsStatus: WebSocketStatus;
+  /** Last WebSocket message received */
+  wsLastMessage: WebSocketMessage | null;
+  /** Whether WebSocket is connected */
+  isWsConnected: boolean;
+  /** Whether notification panel is visible */
+  isPanelVisible: boolean;
+  /** Persistent notifications (stored in localStorage) */
+  persistentNotifications: Toast[];
+  /** Add a toast notification */
+  addToast: (type: ToastType, title: string, message?: string, options?: ToastOptions) => string;
+  /** Show info toast */
+  info: (title: string, message?: string) => string;
+  /** Show success toast */
+  success: (title: string, message?: string) => string;
+  /** Show warning toast */
+  warning: (title: string, message?: string) => string;
+  /** Show error toast (persistent by default) */
+  error: (title: string, message?: string) => string;
+  /** Remove a toast */
+  removeToast: (id: string) => void;
+  /** Clear all toasts */
+  clearAllToasts: () => void;
+  /** Set WebSocket status */
+  setWsStatus: (status: WebSocketStatus) => void;
+  /** Set last WebSocket message */
+  setWsLastMessage: (message: WebSocketMessage | null) => void;
+  /** Toggle notification panel */
+  togglePanel: () => void;
+  /** Set panel visibility */
+  setPanelVisible: (visible: boolean) => void;
+  /** Add persistent notification */
+  addPersistentNotification: (type: ToastType, title: string, message?: string) => void;
+  /** Remove persistent notification */
+  removePersistentNotification: (id: string) => void;
+  /** Clear all persistent notifications */
+  clearPersistentNotifications: () => void;
+}
+
+export interface ToastOptions {
+  /** Duration in ms (0 = persistent) */
+  duration?: number;
+  /** Whether toast can be dismissed */
+  dismissible?: boolean;
+  /** Action button */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+/**
+ * Hook for managing notifications and toasts
+ * @returns Notification state and actions
+ *
+ * @example
+ * ```tsx
+ * const { toasts, info, success, error, removeToast } = useNotifications();
+ *
+ * const handleSave = async () => {
+ *   try {
+ *     await save();
+ *     success('Saved', 'Your changes have been saved');
+ *   } catch (e) {
+ *     error('Error', 'Failed to save changes');
+ *   }
+ * };
+ * ```
+ */
+export function useNotifications(): UseNotificationsReturn {
+  const toasts = useNotificationStore(selectToasts);
+  const wsStatus = useNotificationStore(selectWsStatus);
+  const wsLastMessage = useNotificationStore(selectWsLastMessage);
+  const isPanelVisible = useNotificationStore(selectIsPanelVisible);
+  const persistentNotifications = useNotificationStore(selectPersistentNotifications);
+
+  // Actions
+  const addToastAction = useNotificationStore((state) => state.addToast);
+  const removeToastAction = useNotificationStore((state) => state.removeToast);
+  const clearAllToastsAction = useNotificationStore((state) => state.clearAllToasts);
+  const setWsStatusAction = useNotificationStore((state) => state.setWsStatus);
+  const setWsLastMessageAction = useNotificationStore((state) => state.setWsLastMessage);
+  const togglePanelAction = useNotificationStore((state) => state.togglePanel);
+  const setPanelVisibleAction = useNotificationStore((state) => state.setPanelVisible);
+  const addPersistentAction = useNotificationStore((state) => state.addPersistentNotification);
+  const removePersistentAction = useNotificationStore((state) => state.removePersistentNotification);
+  const clearPersistentAction = useNotificationStore((state) => state.clearPersistentNotifications);
+
+  // Computed
+  const isWsConnected = wsStatus === 'connected';
+
+  // Callbacks
+  const addToast = useCallback(
+    (type: ToastType, title: string, message?: string, options?: ToastOptions): string => {
+      return addToastAction({
+        type,
+        title,
+        message,
+        duration: options?.duration,
+        dismissible: options?.dismissible,
+        action: options?.action,
+      });
+    },
+    [addToastAction]
+  );
+
+  const info = useCallback(
+    (title: string, message?: string): string => {
+      return addToast('info', title, message);
+    },
+    [addToast]
+  );
+
+  const success = useCallback(
+    (title: string, message?: string): string => {
+      return addToast('success', title, message);
+    },
+    [addToast]
+  );
+
+  const warning = useCallback(
+    (title: string, message?: string): string => {
+      return addToast('warning', title, message);
+    },
+    [addToast]
+  );
+
+  const error = useCallback(
+    (title: string, message?: string): string => {
+      // Error toasts are persistent by default
+      return addToast('error', title, message, { duration: 0 });
+    },
+    [addToast]
+  );
+
+  const removeToast = useCallback(
+    (id: string) => {
+      removeToastAction(id);
+    },
+    [removeToastAction]
+  );
+
+  const clearAllToasts = useCallback(() => {
+    clearAllToastsAction();
+  }, [clearAllToastsAction]);
+
+  const setWsStatus = useCallback(
+    (status: WebSocketStatus) => {
+      setWsStatusAction(status);
+    },
+    [setWsStatusAction]
+  );
+
+  const setWsLastMessage = useCallback(
+    (message: WebSocketMessage | null) => {
+      setWsLastMessageAction(message);
+    },
+    [setWsLastMessageAction]
+  );
+
+  const togglePanel = useCallback(() => {
+    togglePanelAction();
+  }, [togglePanelAction]);
+
+  const setPanelVisible = useCallback(
+    (visible: boolean) => {
+      setPanelVisibleAction(visible);
+    },
+    [setPanelVisibleAction]
+  );
+
+  const addPersistentNotification = useCallback(
+    (type: ToastType, title: string, message?: string) => {
+      addPersistentAction({ type, title, message });
+    },
+    [addPersistentAction]
+  );
+
+  const removePersistentNotification = useCallback(
+    (id: string) => {
+      removePersistentAction(id);
+    },
+    [removePersistentAction]
+  );
+
+  const clearPersistentNotifications = useCallback(() => {
+    clearPersistentAction();
+  }, [clearPersistentAction]);
+
+  return {
+    toasts,
+    wsStatus,
+    wsLastMessage,
+    isWsConnected,
+    isPanelVisible,
+    persistentNotifications,
+    addToast,
+    info,
+    success,
+    warning,
+    error,
+    removeToast,
+    clearAllToasts,
+    setWsStatus,
+    setWsLastMessage,
+    togglePanel,
+    setPanelVisible,
+    addPersistentNotification,
+    removePersistentNotification,
+    clearPersistentNotifications,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useSession.ts b/ccw/frontend/src/hooks/useSession.ts
new file mode 100644
index 00000000..7d86b56a
--- /dev/null
+++ b/ccw/frontend/src/hooks/useSession.ts
@@ -0,0 +1,155 @@
+// ========================================
+// useSession Hook
+// ========================================
+// Convenient hook for session management
+
+import { useCallback, useMemo } from 'react';
+import { useWorkflowStore, selectActiveSessionId } from '../stores/workflowStore';
+import type { SessionMetadata, TaskData } from '../types/store';
+
+export interface UseSessionReturn {
+  /** Currently active session ID */
+  activeSessionId: string | null;
+  /** Currently active session data */
+  activeSession: SessionMetadata | null;
+  /** All active sessions */
+  activeSessions: SessionMetadata[];
+  /** All archived sessions */
+  archivedSessions: SessionMetadata[];
+  /** Filtered sessions based on current filters */
+  filteredSessions: SessionMetadata[];
+  /** Set the active session */
+  setActiveSession: (sessionId: string | null) => void;
+  /** Add a new session */
+  addSession: (session: SessionMetadata) => void;
+  /** Update a session */
+  updateSession: (sessionId: string, updates: Partial<SessionMetadata>) => void;
+  /** Archive a session */
+  archiveSession: (sessionId: string) => void;
+  /** Remove a session */
+  removeSession: (sessionId: string) => void;
+  /** Add a task to a session */
+  addTask: (sessionId: string, task: TaskData) => void;
+  /** Update a task */
+  updateTask: (sessionId: string, taskId: string, updates: Partial<TaskData>) => void;
+  /** Get session by key */
+  getSessionByKey: (key: string) => SessionMetadata | undefined;
+}
+
+/**
+ * Hook for managing session state
+ * @returns Session state and actions
+ *
+ * @example
+ * ```tsx
+ * const { activeSession, activeSessions, setActiveSession } = useSession();
+ *
+ * return (
+ *   <SessionList
+ *     sessions={activeSessions}
+ *     onSelect={(id) => setActiveSession(id)}
+ *   />
+ * );
+ * ```
+ */
+export function useSession(): UseSessionReturn {
+  const activeSessionId = useWorkflowStore(selectActiveSessionId);
+  const workflowData = useWorkflowStore((state) => state.workflowData);
+  const sessionDataStore = useWorkflowStore((state) => state.sessionDataStore);
+
+  // Actions
+  const setActiveSessionId = useWorkflowStore((state) => state.setActiveSessionId);
+  const addSessionAction = useWorkflowStore((state) => state.addSession);
+  const updateSessionAction = useWorkflowStore((state) => state.updateSession);
+  const archiveSessionAction = useWorkflowStore((state) => state.archiveSession);
+  const removeSessionAction = useWorkflowStore((state) => state.removeSession);
+  const addTaskAction = useWorkflowStore((state) => state.addTask);
+  const updateTaskAction = useWorkflowStore((state) => state.updateTask);
+  const getFilteredSessionsAction = useWorkflowStore((state) => state.getFilteredSessions);
+  const getSessionByKeyAction = useWorkflowStore((state) => state.getSessionByKey);
+
+  // Memoized active session
+  const activeSession = useMemo(() => {
+    if (!activeSessionId) return null;
+    const key = `session-${activeSessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+    return sessionDataStore[key] || null;
+  }, [activeSessionId, sessionDataStore]);
+
+  // Memoized filtered sessions
+  const filteredSessions = useMemo(() => {
+    return getFilteredSessionsAction();
+  }, [getFilteredSessionsAction, workflowData]);
+
+  // Callbacks
+  const setActiveSession = useCallback(
+    (sessionId: string | null) => {
+      setActiveSessionId(sessionId);
+    },
+    [setActiveSessionId]
+  );
+
+  const addSession = useCallback(
+    (session: SessionMetadata) => {
+      addSessionAction(session);
+    },
+    [addSessionAction]
+  );
+
+  const updateSession = useCallback(
+    (sessionId: string, updates: Partial<SessionMetadata>) => {
+      updateSessionAction(sessionId, updates);
+    },
+    [updateSessionAction]
+  );
+
+  const archiveSession = useCallback(
+    (sessionId: string) => {
+      archiveSessionAction(sessionId);
+    },
+    [archiveSessionAction]
+  );
+
+  const removeSession = useCallback(
+    (sessionId: string) => {
+      removeSessionAction(sessionId);
+    },
+    [removeSessionAction]
+  );
+
+  const addTask = useCallback(
+    (sessionId: string, task: TaskData) => {
+      addTaskAction(sessionId, task);
+    },
+    [addTaskAction]
+  );
+
+  const updateTask = useCallback(
+    (sessionId: string, taskId: string, updates: Partial<TaskData>) => {
+      updateTaskAction(sessionId, taskId, updates);
+    },
+    [updateTaskAction]
+  );
+
+  const getSessionByKey = useCallback(
+    (key: string) => {
+      return getSessionByKeyAction(key);
+    },
+    [getSessionByKeyAction]
+  );
+
+  return {
+    activeSessionId,
+    activeSession,
+    activeSessions: workflowData.activeSessions,
+    archivedSessions: workflowData.archivedSessions,
+    filteredSessions,
+    setActiveSession,
+    addSession,
+    updateSession,
+    archiveSession,
+    removeSession,
+    addTask,
+    updateTask,
+    getSessionByKey,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useSessions.ts b/ccw/frontend/src/hooks/useSessions.ts
new file mode 100644
index 00000000..b3e01034
--- /dev/null
+++ b/ccw/frontend/src/hooks/useSessions.ts
@@ -0,0 +1,373 @@
+// ========================================
+// useSessions Hook
+// ========================================
+// TanStack Query hooks for sessions with optimistic updates
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchSessions,
+  createSession,
+  updateSession,
+  archiveSession,
+  deleteSession,
+  type SessionsResponse,
+  type CreateSessionInput,
+  type UpdateSessionInput,
+} from '../lib/api';
+import type { SessionMetadata } from '../types/store';
+import { dashboardStatsKeys } from './useDashboardStats';
+
+// Query key factory
+export const sessionsKeys = {
+  all: ['sessions'] as const,
+  lists: () => [...sessionsKeys.all, 'list'] as const,
+  list: (filters?: SessionsFilter) => [...sessionsKeys.lists(), filters] as const,
+  details: () => [...sessionsKeys.all, 'detail'] as const,
+  detail: (id: string) => [...sessionsKeys.details(), id] as const,
+};
+
+// Default stale time: 30 seconds
+const STALE_TIME = 30 * 1000;
+
+export interface SessionsFilter {
+  status?: SessionMetadata['status'][];
+  search?: string;
+  location?: 'active' | 'archived' | 'all';
+}
+
+export interface UseSessionsOptions {
+  /** Filter options */
+  filter?: SessionsFilter;
+  /** Override default stale time (ms) */
+  staleTime?: number;
+  /** Enable/disable the query */
+  enabled?: boolean;
+  /** Refetch interval (ms), 0 to disable */
+  refetchInterval?: number;
+}
+
+export interface UseSessionsReturn {
+  /** All sessions data */
+  sessions: SessionsResponse | undefined;
+  /** Active sessions */
+  activeSessions: SessionMetadata[];
+  /** Archived sessions */
+  archivedSessions: SessionMetadata[];
+  /** Filtered sessions based on filter options */
+  filteredSessions: SessionMetadata[];
+  /** Loading state for initial fetch */
+  isLoading: boolean;
+  /** Fetching state (initial or refetch) */
+  isFetching: boolean;
+  /** Error object if query failed */
+  error: Error | null;
+  /** Manually refetch data */
+  refetch: () => Promise<void>;
+  /** Invalidate and refetch sessions */
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching sessions data
+ *
+ * @example
+ * ```tsx
+ * const { activeSessions, isLoading } = useSessions({
+ *   filter: { location: 'active' }
+ * });
+ * ```
+ */
+export function useSessions(options: UseSessionsOptions = {}): UseSessionsReturn {
+  const { filter, staleTime = STALE_TIME, enabled = true, refetchInterval = 0 } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: sessionsKeys.list(filter),
+    queryFn: fetchSessions,
+    staleTime,
+    enabled,
+    refetchInterval: refetchInterval > 0 ? refetchInterval : false,
+    retry: 2,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+
+  const activeSessions = query.data?.activeSessions ?? [];
+  const archivedSessions = query.data?.archivedSessions ?? [];
+
+  // Apply client-side filtering
+  const filteredSessions = (() => {
+    let sessions: SessionMetadata[] = [];
+
+    if (!filter?.location || filter.location === 'all') {
+      sessions = [...activeSessions, ...archivedSessions];
+    } else if (filter.location === 'active') {
+      sessions = activeSessions;
+    } else {
+      sessions = archivedSessions;
+    }
+
+    // Apply status filter
+    if (filter?.status && filter.status.length > 0) {
+      sessions = sessions.filter((s) => filter.status!.includes(s.status));
+    }
+
+    // Apply search filter
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      sessions = sessions.filter(
+        (s) =>
+          s.session_id.toLowerCase().includes(searchLower) ||
+          s.title?.toLowerCase().includes(searchLower) ||
+          s.description?.toLowerCase().includes(searchLower)
+      );
+    }
+
+    return sessions;
+  })();
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: sessionsKeys.all });
+  };
+
+  return {
+    sessions: query.data,
+    activeSessions,
+    archivedSessions,
+    filteredSessions,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch,
+    invalidate,
+  };
+}
+
+// ========== Mutations ==========
+
+export interface UseCreateSessionReturn {
+  createSession: (input: CreateSessionInput) => Promise<SessionMetadata>;
+  isCreating: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for creating a new session
+ */
+export function useCreateSession(): UseCreateSessionReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: createSession,
+    onSuccess: (newSession) => {
+      // Update sessions cache
+      queryClient.setQueryData<SessionsResponse>(sessionsKeys.list(), (old) => {
+        if (!old) return { activeSessions: [newSession], archivedSessions: [] };
+        return {
+          ...old,
+          activeSessions: [newSession, ...old.activeSessions],
+        };
+      });
+      // Invalidate dashboard stats
+      queryClient.invalidateQueries({ queryKey: dashboardStatsKeys.all });
+    },
+  });
+
+  return {
+    createSession: mutation.mutateAsync,
+    isCreating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseUpdateSessionReturn {
+  updateSession: (sessionId: string, input: UpdateSessionInput) => Promise<SessionMetadata>;
+  isUpdating: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for updating a session
+ */
+export function useUpdateSession(): UseUpdateSessionReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ sessionId, input }: { sessionId: string; input: UpdateSessionInput }) =>
+      updateSession(sessionId, input),
+    onSuccess: (updatedSession) => {
+      // Update sessions cache
+      queryClient.setQueryData<SessionsResponse>(sessionsKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          activeSessions: old.activeSessions.map((s) =>
+            s.session_id === updatedSession.session_id ? updatedSession : s
+          ),
+          archivedSessions: old.archivedSessions.map((s) =>
+            s.session_id === updatedSession.session_id ? updatedSession : s
+          ),
+        };
+      });
+    },
+  });
+
+  return {
+    updateSession: (sessionId, input) => mutation.mutateAsync({ sessionId, input }),
+    isUpdating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseArchiveSessionReturn {
+  archiveSession: (sessionId: string) => Promise<SessionMetadata>;
+  isArchiving: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for archiving a session with optimistic update
+ */
+export function useArchiveSession(): UseArchiveSessionReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: archiveSession,
+    onMutate: async (sessionId) => {
+      // Cancel outgoing refetches
+      await queryClient.cancelQueries({ queryKey: sessionsKeys.all });
+
+      // Snapshot previous value
+      const previousSessions = queryClient.getQueryData<SessionsResponse>(sessionsKeys.list());
+
+      // Optimistically update
+      queryClient.setQueryData<SessionsResponse>(sessionsKeys.list(), (old) => {
+        if (!old) return old;
+        const session = old.activeSessions.find((s) => s.session_id === sessionId);
+        if (!session) return old;
+
+        const archivedSession: SessionMetadata = {
+          ...session,
+          status: 'archived',
+          location: 'archived',
+          updated_at: new Date().toISOString(),
+        };
+
+        return {
+          activeSessions: old.activeSessions.filter((s) => s.session_id !== sessionId),
+          archivedSessions: [archivedSession, ...old.archivedSessions],
+        };
+      });
+
+      return { previousSessions };
+    },
+    onError: (_error, _sessionId, context) => {
+      // Rollback on error
+      if (context?.previousSessions) {
+        queryClient.setQueryData(sessionsKeys.list(), context.previousSessions);
+      }
+    },
+    onSettled: () => {
+      // Invalidate to ensure sync with server
+      queryClient.invalidateQueries({ queryKey: sessionsKeys.all });
+      queryClient.invalidateQueries({ queryKey: dashboardStatsKeys.all });
+    },
+  });
+
+  return {
+    archiveSession: mutation.mutateAsync,
+    isArchiving: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export interface UseDeleteSessionReturn {
+  deleteSession: (sessionId: string) => Promise<void>;
+  isDeleting: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook for deleting a session with optimistic update
+ */
+export function useDeleteSession(): UseDeleteSessionReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: deleteSession,
+    onMutate: async (sessionId) => {
+      // Cancel outgoing refetches
+      await queryClient.cancelQueries({ queryKey: sessionsKeys.all });
+
+      // Snapshot previous value
+      const previousSessions = queryClient.getQueryData<SessionsResponse>(sessionsKeys.list());
+
+      // Optimistically remove
+      queryClient.setQueryData<SessionsResponse>(sessionsKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          activeSessions: old.activeSessions.filter((s) => s.session_id !== sessionId),
+          archivedSessions: old.archivedSessions.filter((s) => s.session_id !== sessionId),
+        };
+      });
+
+      return { previousSessions };
+    },
+    onError: (_error, _sessionId, context) => {
+      // Rollback on error
+      if (context?.previousSessions) {
+        queryClient.setQueryData(sessionsKeys.list(), context.previousSessions);
+      }
+    },
+    onSettled: () => {
+      // Invalidate to ensure sync with server
+      queryClient.invalidateQueries({ queryKey: sessionsKeys.all });
+      queryClient.invalidateQueries({ queryKey: dashboardStatsKeys.all });
+    },
+  });
+
+  return {
+    deleteSession: mutation.mutateAsync,
+    isDeleting: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+/**
+ * Combined hook for all session mutations
+ */
+export function useSessionMutations() {
+  const create = useCreateSession();
+  const update = useUpdateSession();
+  const archive = useArchiveSession();
+  const remove = useDeleteSession();
+
+  return {
+    createSession: create.createSession,
+    updateSession: update.updateSession,
+    archiveSession: archive.archiveSession,
+    deleteSession: remove.deleteSession,
+    isCreating: create.isCreating,
+    isUpdating: update.isUpdating,
+    isArchiving: archive.isArchiving,
+    isDeleting: remove.isDeleting,
+    isMutating: create.isCreating || update.isUpdating || archive.isArchiving || remove.isDeleting,
+  };
+}
+
+/**
+ * Hook to prefetch sessions data
+ */
+export function usePrefetchSessions() {
+  const queryClient = useQueryClient();
+
+  return (filter?: SessionsFilter) => {
+    queryClient.prefetchQuery({
+      queryKey: sessionsKeys.list(filter),
+      queryFn: fetchSessions,
+      staleTime: STALE_TIME,
+    });
+  };
+}
diff --git a/ccw/frontend/src/hooks/useSkills.ts b/ccw/frontend/src/hooks/useSkills.ts
new file mode 100644
index 00000000..a66bcfe0
--- /dev/null
+++ b/ccw/frontend/src/hooks/useSkills.ts
@@ -0,0 +1,193 @@
+// ========================================
+// useSkills Hook
+// ========================================
+// TanStack Query hooks for skills management
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchSkills,
+  toggleSkill,
+  type Skill,
+  type SkillsResponse,
+} from '../lib/api';
+
+// Query key factory
+export const skillsKeys = {
+  all: ['skills'] as const,
+  lists: () => [...skillsKeys.all, 'list'] as const,
+  list: (filters?: SkillsFilter) => [...skillsKeys.lists(), filters] as const,
+};
+
+// Default stale time: 5 minutes (skills don't change frequently)
+const STALE_TIME = 5 * 60 * 1000;
+
+export interface SkillsFilter {
+  search?: string;
+  category?: string;
+  source?: Skill['source'];
+  enabledOnly?: boolean;
+}
+
+export interface UseSkillsOptions {
+  filter?: SkillsFilter;
+  staleTime?: number;
+  enabled?: boolean;
+}
+
+export interface UseSkillsReturn {
+  skills: Skill[];
+  enabledSkills: Skill[];
+  categories: string[];
+  skillsByCategory: Record<string, Skill[]>;
+  totalCount: number;
+  enabledCount: number;
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  invalidate: () => Promise<void>;
+}
+
+/**
+ * Hook for fetching and filtering skills
+ */
+export function useSkills(options: UseSkillsOptions = {}): UseSkillsReturn {
+  const { filter, staleTime = STALE_TIME, enabled = true } = options;
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: skillsKeys.list(filter),
+    queryFn: fetchSkills,
+    staleTime,
+    enabled,
+    retry: 2,
+  });
+
+  const allSkills = query.data?.skills ?? [];
+
+  // Apply filters
+  const filteredSkills = (() => {
+    let skills = allSkills;
+
+    if (filter?.search) {
+      const searchLower = filter.search.toLowerCase();
+      skills = skills.filter(
+        (s) =>
+          s.name.toLowerCase().includes(searchLower) ||
+          s.description.toLowerCase().includes(searchLower) ||
+          s.triggers.some((t) => t.toLowerCase().includes(searchLower))
+      );
+    }
+
+    if (filter?.category) {
+      skills = skills.filter((s) => s.category === filter.category);
+    }
+
+    if (filter?.source) {
+      skills = skills.filter((s) => s.source === filter.source);
+    }
+
+    if (filter?.enabledOnly) {
+      skills = skills.filter((s) => s.enabled);
+    }
+
+    return skills;
+  })();
+
+  // Group by category
+  const skillsByCategory: Record<string, Skill[]> = {};
+  const categories = new Set<string>();
+
+  for (const skill of allSkills) {
+    const category = skill.category || 'Uncategorized';
+    categories.add(category);
+    if (!skillsByCategory[category]) {
+      skillsByCategory[category] = [];
+    }
+    skillsByCategory[category].push(skill);
+  }
+
+  const enabledSkills = allSkills.filter((s) => s.enabled);
+
+  const refetch = async () => {
+    await query.refetch();
+  };
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: skillsKeys.all });
+  };
+
+  return {
+    skills: filteredSkills,
+    enabledSkills,
+    categories: Array.from(categories).sort(),
+    skillsByCategory,
+    totalCount: allSkills.length,
+    enabledCount: enabledSkills.length,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    error: query.error,
+    refetch,
+    invalidate,
+  };
+}
+
+// ========== Mutations ==========
+
+export interface UseToggleSkillReturn {
+  toggleSkill: (skillName: string, enabled: boolean) => Promise<Skill>;
+  isToggling: boolean;
+  error: Error | null;
+}
+
+export function useToggleSkill(): UseToggleSkillReturn {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ skillName, enabled }: { skillName: string; enabled: boolean }) =>
+      toggleSkill(skillName, enabled),
+    onMutate: async ({ skillName, enabled }) => {
+      await queryClient.cancelQueries({ queryKey: skillsKeys.all });
+      const previousSkills = queryClient.getQueryData<SkillsResponse>(skillsKeys.list());
+
+      // Optimistic update
+      queryClient.setQueryData<SkillsResponse>(skillsKeys.list(), (old) => {
+        if (!old) return old;
+        return {
+          skills: old.skills.map((s) =>
+            s.name === skillName ? { ...s, enabled } : s
+          ),
+        };
+      });
+
+      return { previousSkills };
+    },
+    onError: (_error, _vars, context) => {
+      if (context?.previousSkills) {
+        queryClient.setQueryData(skillsKeys.list(), context.previousSkills);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: skillsKeys.all });
+    },
+  });
+
+  return {
+    toggleSkill: (skillName, enabled) => mutation.mutateAsync({ skillName, enabled }),
+    isToggling: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+/**
+ * Combined hook for all skill mutations
+ */
+export function useSkillMutations() {
+  const toggle = useToggleSkill();
+
+  return {
+    toggleSkill: toggle.toggleSkill,
+    isToggling: toggle.isToggling,
+    isMutating: toggle.isToggling,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useTemplates.ts b/ccw/frontend/src/hooks/useTemplates.ts
new file mode 100644
index 00000000..f35859cf
--- /dev/null
+++ b/ccw/frontend/src/hooks/useTemplates.ts
@@ -0,0 +1,184 @@
+// ========================================
+// useTemplates Hook
+// ========================================
+// TanStack Query hooks for template API operations
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { FlowTemplate, TemplateInstallRequest, TemplateExportRequest } from '../types/execution';
+import type { Flow } from '../types/flow';
+
+// API base URL
+const API_BASE = '/api/orchestrator';
+
+// Query keys
+export const templateKeys = {
+  all: ['templates'] as const,
+  lists: () => [...templateKeys.all, 'list'] as const,
+  list: (filters?: Record<string, unknown>) => [...templateKeys.lists(), filters] as const,
+  details: () => [...templateKeys.all, 'detail'] as const,
+  detail: (id: string) => [...templateKeys.details(), id] as const,
+  categories: () => [...templateKeys.all, 'categories'] as const,
+};
+
+// API response types
+interface TemplatesListResponse {
+  templates: FlowTemplate[];
+  total: number;
+  categories: string[];
+}
+
+interface TemplateDetailResponse extends FlowTemplate {
+  flow: Flow;
+}
+
+interface InstallTemplateResponse {
+  flow: Flow;
+  message: string;
+}
+
+interface ExportTemplateResponse {
+  template: FlowTemplate;
+  message: string;
+}
+
+// ========== Fetch Functions ==========
+
+async function fetchTemplates(category?: string): Promise<TemplatesListResponse> {
+  const url = category
+    ? `${API_BASE}/templates?category=${encodeURIComponent(category)}`
+    : `${API_BASE}/templates`;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch templates: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function fetchTemplate(id: string): Promise<TemplateDetailResponse> {
+  const response = await fetch(`${API_BASE}/templates/${id}`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch template: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function installTemplate(request: TemplateInstallRequest): Promise<InstallTemplateResponse> {
+  const response = await fetch(`${API_BASE}/templates/install`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to install template: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function exportTemplate(request: TemplateExportRequest): Promise<ExportTemplateResponse> {
+  const response = await fetch(`${API_BASE}/templates/export`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to export template: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+async function deleteTemplate(id: string): Promise<void> {
+  const response = await fetch(`${API_BASE}/templates/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to delete template: ${response.statusText}`);
+  }
+}
+
+// ========== Query Hooks ==========
+
+/**
+ * Fetch all templates
+ */
+export function useTemplates(category?: string) {
+  return useQuery({
+    queryKey: templateKeys.list({ category }),
+    queryFn: () => fetchTemplates(category),
+    staleTime: 60000, // 1 minute
+  });
+}
+
+/**
+ * Fetch a single template by ID
+ */
+export function useTemplate(id: string | null) {
+  return useQuery({
+    queryKey: templateKeys.detail(id ?? ''),
+    queryFn: () => fetchTemplate(id!),
+    enabled: !!id,
+    staleTime: 60000,
+  });
+}
+
+// ========== Mutation Hooks ==========
+
+/**
+ * Install a template as a new flow
+ */
+export function useInstallTemplate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: installTemplate,
+    onSuccess: () => {
+      // Invalidate flows list to show the new flow
+      queryClient.invalidateQueries({ queryKey: ['flows'] });
+    },
+  });
+}
+
+/**
+ * Export a flow as a template
+ */
+export function useExportTemplate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: exportTemplate,
+    onSuccess: (result) => {
+      // Add to templates list
+      queryClient.setQueryData<TemplatesListResponse>(templateKeys.lists(), (old) => {
+        if (!old) return { templates: [result.template], total: 1, categories: [] };
+        return {
+          ...old,
+          templates: [...old.templates, result.template],
+          total: old.total + 1,
+        };
+      });
+      queryClient.invalidateQueries({ queryKey: templateKeys.lists() });
+    },
+  });
+}
+
+/**
+ * Delete a template
+ */
+export function useDeleteTemplate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteTemplate,
+    onSuccess: (_, deletedId) => {
+      // Remove from cache
+      queryClient.removeQueries({ queryKey: templateKeys.detail(deletedId) });
+      queryClient.setQueryData<TemplatesListResponse>(templateKeys.lists(), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          templates: old.templates.filter((t) => t.id !== deletedId),
+          total: old.total - 1,
+        };
+      });
+    },
+  });
+}
diff --git a/ccw/frontend/src/hooks/useTheme.ts b/ccw/frontend/src/hooks/useTheme.ts
new file mode 100644
index 00000000..70d448a0
--- /dev/null
+++ b/ccw/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,62 @@
+// ========================================
+// useTheme Hook
+// ========================================
+// Convenient hook for theme management
+
+import { useCallback } from 'react';
+import { useAppStore, selectTheme, selectResolvedTheme } from '../stores/appStore';
+import type { Theme } from '../types/store';
+
+export interface UseThemeReturn {
+  /** Current theme preference ('light', 'dark', 'system') */
+  theme: Theme;
+  /** Resolved theme based on preference and system settings */
+  resolvedTheme: 'light' | 'dark';
+  /** Whether the resolved theme is dark */
+  isDark: boolean;
+  /** Set theme preference */
+  setTheme: (theme: Theme) => void;
+  /** Toggle between light and dark (ignores system) */
+  toggleTheme: () => void;
+}
+
+/**
+ * Hook for managing theme state
+ * @returns Theme state and actions
+ *
+ * @example
+ * ```tsx
+ * const { theme, isDark, setTheme, toggleTheme } = useTheme();
+ *
+ * return (
+ *   <button onClick={toggleTheme}>
+ *     {isDark ? 'Switch to Light' : 'Switch to Dark'}
+ *   </button>
+ * );
+ * ```
+ */
+export function useTheme(): UseThemeReturn {
+  const theme = useAppStore(selectTheme);
+  const resolvedTheme = useAppStore(selectResolvedTheme);
+  const setThemeAction = useAppStore((state) => state.setTheme);
+  const toggleThemeAction = useAppStore((state) => state.toggleTheme);
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      setThemeAction(newTheme);
+    },
+    [setThemeAction]
+  );
+
+  const toggleTheme = useCallback(() => {
+    toggleThemeAction();
+  }, [toggleThemeAction]);
+
+  return {
+    theme,
+    resolvedTheme,
+    isDark: resolvedTheme === 'dark',
+    setTheme,
+    toggleTheme,
+  };
+}
diff --git a/ccw/frontend/src/hooks/useWebSocket.ts b/ccw/frontend/src/hooks/useWebSocket.ts
new file mode 100644
index 00000000..6aecd810
--- /dev/null
+++ b/ccw/frontend/src/hooks/useWebSocket.ts
@@ -0,0 +1,254 @@
+// ========================================
+// useWebSocket Hook
+// ========================================
+// Typed WebSocket connection management with auto-reconnect
+
+import { useEffect, useRef, useCallback } from 'react';
+import { useNotificationStore } from '@/stores';
+import { useExecutionStore } from '@/stores/executionStore';
+import { useFlowStore } from '@/stores';
+import {
+  OrchestratorMessageSchema,
+  type OrchestratorWebSocketMessage,
+  type ExecutionLog,
+} from '../types/execution';
+
+// Constants
+const RECONNECT_DELAY_BASE = 1000; // 1 second
+const RECONNECT_DELAY_MAX = 30000; // 30 seconds
+const RECONNECT_DELAY_MULTIPLIER = 1.5;
+
+interface UseWebSocketOptions {
+  enabled?: boolean;
+  onMessage?: (message: OrchestratorWebSocketMessage) => void;
+}
+
+interface UseWebSocketReturn {
+  isConnected: boolean;
+  send: (message: unknown) => void;
+  reconnect: () => void;
+}
+
+export function useWebSocket(options: UseWebSocketOptions = {}): UseWebSocketReturn {
+  const { enabled = true, onMessage } = options;
+
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const reconnectDelayRef = useRef(RECONNECT_DELAY_BASE);
+
+  // Notification store for connection status
+  const setWsStatus = useNotificationStore((state) => state.setWsStatus);
+  const setWsLastMessage = useNotificationStore((state) => state.setWsLastMessage);
+  const incrementReconnectAttempts = useNotificationStore((state) => state.incrementReconnectAttempts);
+  const resetReconnectAttempts = useNotificationStore((state) => state.resetReconnectAttempts);
+
+  // Execution store for state updates
+  const setExecutionStatus = useExecutionStore((state) => state.setExecutionStatus);
+  const setNodeStarted = useExecutionStore((state) => state.setNodeStarted);
+  const setNodeCompleted = useExecutionStore((state) => state.setNodeCompleted);
+  const setNodeFailed = useExecutionStore((state) => state.setNodeFailed);
+  const addLog = useExecutionStore((state) => state.addLog);
+  const completeExecution = useExecutionStore((state) => state.completeExecution);
+  const currentExecution = useExecutionStore((state) => state.currentExecution);
+
+  // Flow store for node status updates on canvas
+  const updateNode = useFlowStore((state) => state.updateNode);
+
+  // Handle incoming WebSocket messages
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        // Store last message for debugging
+        setWsLastMessage(data);
+
+        // Check if this is an orchestrator message
+        if (!data.type?.startsWith('ORCHESTRATOR_')) {
+          return;
+        }
+
+        // Validate message with zod schema
+        const parsed = OrchestratorMessageSchema.safeParse(data);
+        if (!parsed.success) {
+          console.warn('[WebSocket] Invalid orchestrator message:', parsed.error.issues);
+          return;
+        }
+
+        // Cast validated data to our TypeScript interface
+        const message = parsed.data as OrchestratorWebSocketMessage;
+
+        // Only process messages for current execution
+        if (currentExecution && message.execId !== currentExecution.execId) {
+          return;
+        }
+
+        // Dispatch to execution store based on message type
+        switch (message.type) {
+          case 'ORCHESTRATOR_STATE_UPDATE':
+            setExecutionStatus(message.status, message.currentNodeId);
+            // Check for completion
+            if (message.status === 'completed' || message.status === 'failed') {
+              completeExecution(message.status);
+            }
+            break;
+
+          case 'ORCHESTRATOR_NODE_STARTED':
+            setNodeStarted(message.nodeId);
+            // Update canvas node status
+            updateNode(message.nodeId, { executionStatus: 'running' });
+            break;
+
+          case 'ORCHESTRATOR_NODE_COMPLETED':
+            setNodeCompleted(message.nodeId, message.result);
+            // Update canvas node status
+            updateNode(message.nodeId, {
+              executionStatus: 'completed',
+              executionResult: message.result,
+            });
+            break;
+
+          case 'ORCHESTRATOR_NODE_FAILED':
+            setNodeFailed(message.nodeId, message.error);
+            // Update canvas node status
+            updateNode(message.nodeId, {
+              executionStatus: 'failed',
+              executionError: message.error,
+            });
+            break;
+
+          case 'ORCHESTRATOR_LOG':
+            addLog(message.log as ExecutionLog);
+            break;
+        }
+
+        // Call custom message handler if provided
+        onMessage?.(message);
+      } catch (error) {
+        console.error('[WebSocket] Failed to parse message:', error);
+      }
+    },
+    [
+      currentExecution,
+      setWsLastMessage,
+      setExecutionStatus,
+      setNodeStarted,
+      setNodeCompleted,
+      setNodeFailed,
+      addLog,
+      completeExecution,
+      updateNode,
+      onMessage,
+    ]
+  );
+
+  // Connect to WebSocket
+  const connect = useCallback(() => {
+    if (!enabled) return;
+
+    // Construct WebSocket URL
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}/ws`;
+
+    try {
+      setWsStatus('connecting');
+
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        console.log('[WebSocket] Connected');
+        setWsStatus('connected');
+        resetReconnectAttempts();
+        reconnectDelayRef.current = RECONNECT_DELAY_BASE;
+      };
+
+      ws.onmessage = handleMessage;
+
+      ws.onclose = () => {
+        console.log('[WebSocket] Disconnected');
+        setWsStatus('disconnected');
+        wsRef.current = null;
+        scheduleReconnect();
+      };
+
+      ws.onerror = (error) => {
+        console.error('[WebSocket] Error:', error);
+        setWsStatus('error');
+      };
+    } catch (error) {
+      console.error('[WebSocket] Failed to connect:', error);
+      setWsStatus('error');
+      scheduleReconnect();
+    }
+  }, [enabled, handleMessage, setWsStatus, resetReconnectAttempts]);
+
+  // Schedule reconnection with exponential backoff
+  const scheduleReconnect = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+    }
+
+    const delay = reconnectDelayRef.current;
+    console.log(`[WebSocket] Reconnecting in ${delay}ms...`);
+
+    setWsStatus('reconnecting');
+    incrementReconnectAttempts();
+
+    reconnectTimeoutRef.current = setTimeout(() => {
+      connect();
+    }, delay);
+
+    // Increase delay for next attempt (exponential backoff)
+    reconnectDelayRef.current = Math.min(
+      reconnectDelayRef.current * RECONNECT_DELAY_MULTIPLIER,
+      RECONNECT_DELAY_MAX
+    );
+  }, [connect, setWsStatus, incrementReconnectAttempts]);
+
+  // Send message through WebSocket
+  const send = useCallback((message: unknown) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify(message));
+    } else {
+      console.warn('[WebSocket] Cannot send message: not connected');
+    }
+  }, []);
+
+  // Manual reconnect
+  const reconnect = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.close();
+    }
+    reconnectDelayRef.current = RECONNECT_DELAY_BASE;
+    connect();
+  }, [connect]);
+
+  // Check connection status
+  const isConnected = wsRef.current?.readyState === WebSocket.OPEN;
+
+  // Connect on mount, cleanup on unmount
+  useEffect(() => {
+    if (enabled) {
+      connect();
+    }
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [enabled, connect]);
+
+  return {
+    isConnected,
+    send,
+    reconnect,
+  };
+}
+
+export default useWebSocket;
diff --git a/ccw/frontend/src/index.css b/ccw/frontend/src/index.css
new file mode 100644
index 00000000..ad2c3d1b
--- /dev/null
+++ b/ccw/frontend/src/index.css
@@ -0,0 +1,117 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* CSS Custom Properties - Light Mode */
+:root {
+  --background: 0 0% 98%;
+  --foreground: 0 0% 13%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 13%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 220 65% 50%;
+  --primary: 220 65% 50%;
+  --primary-foreground: 0 0% 100%;
+  --primary-light: 220 65% 95%;
+  --secondary: 220 60% 65%;
+  --secondary-foreground: 0 0% 100%;
+  --accent: 220 40% 95%;
+  --accent-foreground: 0 0% 13%;
+  --destructive: 8 75% 55%;
+  --destructive-foreground: 0 0% 100%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 45%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 13%;
+  --hover: 0 0% 93%;
+  --success: 142 71% 45%;
+  --success-light: 142 76% 90%;
+  --warning: 38 92% 50%;
+  --warning-light: 48 96% 89%;
+  --info: 210 80% 55%;
+  --info-light: 210 80% 92%;
+  --indigo: 239 65% 60%;
+  --indigo-light: 239 65% 92%;
+  --orange: 25 90% 55%;
+  --orange-light: 25 90% 92%;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  --background: 220 13% 10%;
+  --foreground: 0 0% 90%;
+  --card: 220 13% 14%;
+  --card-foreground: 0 0% 90%;
+  --border: 220 13% 20%;
+  --input: 220 13% 20%;
+  --ring: 220 65% 55%;
+  --primary: 220 65% 55%;
+  --primary-foreground: 0 0% 100%;
+  --primary-light: 220 50% 25%;
+  --secondary: 220 60% 60%;
+  --secondary-foreground: 0 0% 100%;
+  --accent: 220 30% 20%;
+  --accent-foreground: 0 0% 90%;
+  --destructive: 8 70% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --muted: 220 13% 18%;
+  --muted-foreground: 0 0% 55%;
+  --sidebar-background: 220 13% 12%;
+  --sidebar-foreground: 0 0% 90%;
+  --hover: 220 13% 22%;
+  --success: 142 71% 40%;
+  --success-light: 142 50% 20%;
+  --warning: 38 85% 45%;
+  --warning-light: 40 50% 20%;
+  --info: 210 75% 50%;
+  --info-light: 210 50% 20%;
+  --indigo: 239 60% 55%;
+  --indigo-light: 239 40% 20%;
+  --orange: 25 85% 50%;
+  --orange-light: 25 50% 20%;
+}
+
+/* Base styles */
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground));
+}
+
+/* Animations */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
diff --git a/ccw/frontend/src/lib/api.ts b/ccw/frontend/src/lib/api.ts
new file mode 100644
index 00000000..16c75ec3
--- /dev/null
+++ b/ccw/frontend/src/lib/api.ts
@@ -0,0 +1,604 @@
+// ========================================
+// API Client
+// ========================================
+// Typed fetch functions for API communication with CSRF token handling
+
+import type { SessionMetadata, TaskData } from '../types/store';
+
+// ========== Types ==========
+
+export interface DashboardStats {
+  totalSessions: number;
+  activeSessions: number;
+  archivedSessions: number;
+  totalTasks: number;
+  completedTasks: number;
+  pendingTasks: number;
+  failedTasks: number;
+  todayActivity: number;
+}
+
+export interface SessionsResponse {
+  activeSessions: SessionMetadata[];
+  archivedSessions: SessionMetadata[];
+}
+
+export interface CreateSessionInput {
+  session_id: string;
+  title?: string;
+  description?: string;
+  type?: 'workflow' | 'review' | 'lite-plan' | 'lite-fix';
+}
+
+export interface UpdateSessionInput {
+  title?: string;
+  description?: string;
+  status?: SessionMetadata['status'];
+}
+
+export interface ApiError {
+  message: string;
+  status: number;
+  code?: string;
+}
+
+// ========== CSRF Token Handling ==========
+
+/**
+ * Get CSRF token from cookie
+ */
+function getCsrfToken(): string | null {
+  const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+// ========== Base Fetch Wrapper ==========
+
+/**
+ * Base fetch wrapper with CSRF token and error handling
+ */
+async function fetchApi<T>(
+  url: string,
+  options: RequestInit = {}
+): Promise<T> {
+  const headers = new Headers(options.headers);
+
+  // Add CSRF token for mutating requests
+  if (options.method && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(options.method)) {
+    const csrfToken = getCsrfToken();
+    if (csrfToken) {
+      headers.set('X-CSRF-Token', csrfToken);
+    }
+  }
+
+  // Set content type for JSON requests
+  if (options.body && typeof options.body === 'string') {
+    headers.set('Content-Type', 'application/json');
+  }
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+    credentials: 'same-origin',
+  });
+
+  if (!response.ok) {
+    const error: ApiError = {
+      message: response.statusText || 'Request failed',
+      status: response.status,
+    };
+
+    try {
+      const body = await response.json();
+      if (body.message) error.message = body.message;
+      if (body.code) error.code = body.code;
+    } catch {
+      // Ignore JSON parse errors
+    }
+
+    throw error;
+  }
+
+  // Handle no-content responses
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return response.json();
+}
+
+// ========== Dashboard API ==========
+
+/**
+ * Fetch dashboard statistics
+ */
+export async function fetchDashboardStats(): Promise<DashboardStats> {
+  const data = await fetchApi<{ statistics?: DashboardStats }>('/api/data');
+
+  // Extract statistics from response, with defaults
+  return {
+    totalSessions: data.statistics?.totalSessions ?? 0,
+    activeSessions: data.statistics?.activeSessions ?? 0,
+    archivedSessions: data.statistics?.archivedSessions ?? 0,
+    totalTasks: data.statistics?.totalTasks ?? 0,
+    completedTasks: data.statistics?.completedTasks ?? 0,
+    pendingTasks: data.statistics?.pendingTasks ?? 0,
+    failedTasks: data.statistics?.failedTasks ?? 0,
+    todayActivity: data.statistics?.todayActivity ?? 0,
+  };
+}
+
+// ========== Sessions API ==========
+
+/**
+ * Fetch all sessions (active and archived)
+ */
+export async function fetchSessions(): Promise<SessionsResponse> {
+  const data = await fetchApi<{
+    activeSessions?: SessionMetadata[];
+    archivedSessions?: SessionMetadata[];
+  }>('/api/data');
+
+  return {
+    activeSessions: data.activeSessions ?? [],
+    archivedSessions: data.archivedSessions ?? [],
+  };
+}
+
+/**
+ * Fetch a single session by ID
+ */
+export async function fetchSession(sessionId: string): Promise<SessionMetadata> {
+  return fetchApi<SessionMetadata>(`/api/sessions/${encodeURIComponent(sessionId)}`);
+}
+
+/**
+ * Create a new session
+ */
+export async function createSession(input: CreateSessionInput): Promise<SessionMetadata> {
+  return fetchApi<SessionMetadata>('/api/sessions', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Update a session
+ */
+export async function updateSession(
+  sessionId: string,
+  input: UpdateSessionInput
+): Promise<SessionMetadata> {
+  return fetchApi<SessionMetadata>(`/api/sessions/${encodeURIComponent(sessionId)}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Archive a session
+ */
+export async function archiveSession(sessionId: string): Promise<SessionMetadata> {
+  return fetchApi<SessionMetadata>(`/api/sessions/${encodeURIComponent(sessionId)}/archive`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Delete a session
+ */
+export async function deleteSession(sessionId: string): Promise<void> {
+  return fetchApi<void>(`/api/sessions/${encodeURIComponent(sessionId)}`, {
+    method: 'DELETE',
+  });
+}
+
+// ========== Tasks API ==========
+
+/**
+ * Fetch tasks for a session
+ */
+export async function fetchSessionTasks(sessionId: string): Promise<TaskData[]> {
+  return fetchApi<TaskData[]>(`/api/sessions/${encodeURIComponent(sessionId)}/tasks`);
+}
+
+/**
+ * Update a task status
+ */
+export async function updateTask(
+  sessionId: string,
+  taskId: string,
+  updates: Partial<TaskData>
+): Promise<TaskData> {
+  return fetchApi<TaskData>(
+    `/api/sessions/${encodeURIComponent(sessionId)}/tasks/${encodeURIComponent(taskId)}`,
+    {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }
+  );
+}
+
+// ========== Path Management API ==========
+
+/**
+ * Fetch recent paths
+ */
+export async function fetchRecentPaths(): Promise<string[]> {
+  const data = await fetchApi<{ paths?: string[] }>('/api/recent-paths');
+  return data.paths ?? [];
+}
+
+/**
+ * Remove a recent path
+ */
+export async function removeRecentPath(path: string): Promise<string[]> {
+  const data = await fetchApi<{ paths: string[] }>('/api/remove-recent-path', {
+    method: 'POST',
+    body: JSON.stringify({ path }),
+  });
+  return data.paths;
+}
+
+/**
+ * Switch to a different project path and load its data
+ */
+export async function loadDashboardData(path: string): Promise<{
+  activeSessions: SessionMetadata[];
+  archivedSessions: SessionMetadata[];
+  statistics: DashboardStats;
+  projectPath: string;
+  recentPaths: string[];
+}> {
+  return fetchApi(`/api/data?path=${encodeURIComponent(path)}`);
+}
+
+// ========== Loops API ==========
+
+export interface Loop {
+  id: string;
+  name?: string;
+  status: 'created' | 'running' | 'paused' | 'completed' | 'failed';
+  currentStep: number;
+  totalSteps: number;
+  createdAt: string;
+  updatedAt?: string;
+  startedAt?: string;
+  completedAt?: string;
+  prompt?: string;
+  tool?: string;
+  error?: string;
+  context?: {
+    workingDir?: string;
+    mode?: string;
+  };
+}
+
+export interface LoopsResponse {
+  loops: Loop[];
+  total: number;
+}
+
+/**
+ * Fetch all loops
+ */
+export async function fetchLoops(): Promise<LoopsResponse> {
+  const data = await fetchApi<{ loops?: Loop[] }>('/api/loops');
+  return {
+    loops: data.loops ?? [],
+    total: data.loops?.length ?? 0,
+  };
+}
+
+/**
+ * Fetch a single loop by ID
+ */
+export async function fetchLoop(loopId: string): Promise<Loop> {
+  return fetchApi<Loop>(`/api/loops/${encodeURIComponent(loopId)}`);
+}
+
+/**
+ * Create a new loop
+ */
+export async function createLoop(input: {
+  prompt: string;
+  tool?: string;
+  mode?: string;
+}): Promise<Loop> {
+  return fetchApi<Loop>('/api/loops', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Update a loop's status (pause, resume, stop)
+ */
+export async function updateLoopStatus(
+  loopId: string,
+  action: 'pause' | 'resume' | 'stop'
+): Promise<Loop> {
+  return fetchApi<Loop>(`/api/loops/${encodeURIComponent(loopId)}/${action}`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Delete a loop
+ */
+export async function deleteLoop(loopId: string): Promise<void> {
+  return fetchApi<void>(`/api/loops/${encodeURIComponent(loopId)}`, {
+    method: 'DELETE',
+  });
+}
+
+// ========== Issues API ==========
+
+export interface IssueSolution {
+  id: string;
+  description: string;
+  approach?: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'rejected';
+  estimatedEffort?: string;
+}
+
+export interface Issue {
+  id: string;
+  title: string;
+  context?: string;
+  status: 'open' | 'in_progress' | 'resolved' | 'closed' | 'completed';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  createdAt: string;
+  updatedAt?: string;
+  solutions?: IssueSolution[];
+  labels?: string[];
+  assignee?: string;
+}
+
+export interface IssueQueue {
+  tasks: string[];
+  solutions: string[];
+  conflicts: string[];
+  execution_groups: string[];
+  grouped_items: Record<string, string[]>;
+}
+
+export interface IssuesResponse {
+  issues: Issue[];
+}
+
+/**
+ * Fetch all issues
+ */
+export async function fetchIssues(projectPath?: string): Promise<IssuesResponse> {
+  const url = projectPath
+    ? `/api/issues?path=${encodeURIComponent(projectPath)}`
+    : '/api/issues';
+  const data = await fetchApi<{ issues?: Issue[] }>(url);
+  return {
+    issues: data.issues ?? [],
+  };
+}
+
+/**
+ * Fetch issue history
+ */
+export async function fetchIssueHistory(projectPath?: string): Promise<IssuesResponse> {
+  const url = projectPath
+    ? `/api/issues/history?path=${encodeURIComponent(projectPath)}`
+    : '/api/issues/history';
+  const data = await fetchApi<{ issues?: Issue[] }>(url);
+  return {
+    issues: data.issues ?? [],
+  };
+}
+
+/**
+ * Fetch issue queue
+ */
+export async function fetchIssueQueue(projectPath?: string): Promise<IssueQueue> {
+  const url = projectPath
+    ? `/api/queue?path=${encodeURIComponent(projectPath)}`
+    : '/api/queue';
+  return fetchApi<IssueQueue>(url);
+}
+
+/**
+ * Create a new issue
+ */
+export async function createIssue(input: {
+  title: string;
+  context?: string;
+  priority?: Issue['priority'];
+}): Promise<Issue> {
+  return fetchApi<Issue>('/api/issues', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Update an issue
+ */
+export async function updateIssue(
+  issueId: string,
+  input: Partial<Issue>
+): Promise<Issue> {
+  return fetchApi<Issue>(`/api/issues/${encodeURIComponent(issueId)}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Delete an issue
+ */
+export async function deleteIssue(issueId: string): Promise<void> {
+  return fetchApi<void>(`/api/issues/${encodeURIComponent(issueId)}`, {
+    method: 'DELETE',
+  });
+}
+
+// ========== Skills API ==========
+
+export interface Skill {
+  name: string;
+  description: string;
+  enabled: boolean;
+  triggers: string[];
+  category?: string;
+  source?: 'builtin' | 'custom' | 'community';
+  version?: string;
+  author?: string;
+}
+
+export interface SkillsResponse {
+  skills: Skill[];
+}
+
+/**
+ * Fetch all skills
+ */
+export async function fetchSkills(): Promise<SkillsResponse> {
+  const data = await fetchApi<{ skills?: Skill[] }>('/api/skills');
+  return {
+    skills: data.skills ?? [],
+  };
+}
+
+/**
+ * Toggle skill enabled status
+ */
+export async function toggleSkill(skillName: string, enabled: boolean): Promise<Skill> {
+  return fetchApi<Skill>(`/api/skills/${encodeURIComponent(skillName)}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ enabled }),
+  });
+}
+
+// ========== Commands API ==========
+
+export interface Command {
+  name: string;
+  description: string;
+  usage?: string;
+  examples?: string[];
+  category?: string;
+  aliases?: string[];
+  source?: 'builtin' | 'custom';
+}
+
+export interface CommandsResponse {
+  commands: Command[];
+}
+
+/**
+ * Fetch all commands
+ */
+export async function fetchCommands(): Promise<CommandsResponse> {
+  const data = await fetchApi<{ commands?: Command[] }>('/api/commands');
+  return {
+    commands: data.commands ?? [],
+  };
+}
+
+// ========== Memory API ==========
+
+export interface CoreMemory {
+  id: string;
+  content: string;
+  createdAt: string;
+  updatedAt?: string;
+  source?: string;
+  tags?: string[];
+  size?: number;
+}
+
+export interface MemoryResponse {
+  memories: CoreMemory[];
+  totalSize: number;
+  claudeMdCount: number;
+}
+
+/**
+ * Fetch all memories
+ */
+export async function fetchMemories(): Promise<MemoryResponse> {
+  const data = await fetchApi<{
+    memories?: CoreMemory[];
+    totalSize?: number;
+    claudeMdCount?: number;
+  }>('/api/memory');
+  return {
+    memories: data.memories ?? [],
+    totalSize: data.totalSize ?? 0,
+    claudeMdCount: data.claudeMdCount ?? 0,
+  };
+}
+
+/**
+ * Create a new memory entry
+ */
+export async function createMemory(input: {
+  content: string;
+  tags?: string[];
+}): Promise<CoreMemory> {
+  return fetchApi<CoreMemory>('/api/memory', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Update a memory entry
+ */
+export async function updateMemory(
+  memoryId: string,
+  input: Partial<CoreMemory>
+): Promise<CoreMemory> {
+  return fetchApi<CoreMemory>(`/api/memory/${encodeURIComponent(memoryId)}`, {
+    method: 'PATCH',
+    body: JSON.stringify(input),
+  });
+}
+
+/**
+ * Delete a memory entry
+ */
+export async function deleteMemory(memoryId: string): Promise<void> {
+  return fetchApi<void>(`/api/memory/${encodeURIComponent(memoryId)}`, {
+    method: 'DELETE',
+  });
+}
+
+// ========== CLI Tools Config API ==========
+
+export interface CliToolsConfigResponse {
+  version: string;
+  tools: Record<string, {
+    enabled: boolean;
+    primaryModel: string;
+    secondaryModel: string;
+    tags: string[];
+    type: string;
+  }>;
+}
+
+/**
+ * Fetch CLI tools configuration
+ */
+export async function fetchCliToolsConfig(): Promise<CliToolsConfigResponse> {
+  return fetchApi<CliToolsConfigResponse>('/api/cli/tools-config');
+}
+
+/**
+ * Update CLI tools configuration
+ */
+export async function updateCliToolsConfig(
+  config: Partial<CliToolsConfigResponse>
+): Promise<CliToolsConfigResponse> {
+  return fetchApi<CliToolsConfigResponse>('/api/cli/tools-config', {
+    method: 'PUT',
+    body: JSON.stringify(config),
+  });
+}
diff --git a/ccw/frontend/src/lib/utils.ts b/ccw/frontend/src/lib/utils.ts
new file mode 100644
index 00000000..e569adb9
--- /dev/null
+++ b/ccw/frontend/src/lib/utils.ts
@@ -0,0 +1,17 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges class names using clsx and tailwind-merge.
+ * This utility combines Tailwind CSS classes intelligently,
+ * handling conflicts and deduplication.
+ *
+ * @example
+ * cn("px-2 py-1", "px-4") // => "py-1 px-4"
+ * cn("bg-primary", condition && "bg-secondary") // conditional classes
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+export type { ClassValue };
diff --git a/ccw/frontend/src/main.tsx b/ccw/frontend/src/main.tsx
new file mode 100644
index 00000000..6f4ac9bc
--- /dev/null
+++ b/ccw/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/ccw/frontend/src/pages/CommandsManagerPage.tsx b/ccw/frontend/src/pages/CommandsManagerPage.tsx
new file mode 100644
index 00000000..d8124437
--- /dev/null
+++ b/ccw/frontend/src/pages/CommandsManagerPage.tsx
@@ -0,0 +1,351 @@
+// ========================================
+// Commands Manager Page
+// ========================================
+// Manage custom slash commands with search/filter
+
+import { useState, useMemo } from 'react';
+import {
+  Terminal,
+  Search,
+  Plus,
+  Filter,
+  RefreshCw,
+  Copy,
+  Play,
+  ChevronDown,
+  ChevronUp,
+  Code,
+  BookOpen,
+  Tag,
+} from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
+import { useCommands } from '@/hooks';
+import type { Command } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+// ========== Command Card Component ==========
+
+interface CommandCardProps {
+  command: Command;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onCopy: (text: string) => void;
+}
+
+function CommandCard({ command, isExpanded, onToggleExpand, onCopy }: CommandCardProps) {
+  return (
+    <Card className="overflow-hidden">
+      {/* Header */}
+      <div
+        className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={onToggleExpand}
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-start gap-3">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Terminal className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <code className="text-sm font-mono font-medium text-foreground">
+                  /{command.name}
+                </code>
+                {command.source && (
+                  <Badge variant={command.source === 'builtin' ? 'default' : 'secondary'} className="text-xs">
+                    {command.source}
+                  </Badge>
+                )}
+              </div>
+              <p className="text-sm text-muted-foreground mt-1">
+                {command.description}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCopy(`/${command.name}`);
+              }}
+            >
+              <Copy className="w-4 h-4" />
+            </Button>
+            {isExpanded ? (
+              <ChevronUp className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-muted-foreground" />
+            )}
+          </div>
+        </div>
+
+        {/* Category and Aliases */}
+        <div className="flex flex-wrap gap-2 mt-3">
+          {command.category && (
+            <Badge variant="outline" className="text-xs">
+              <Tag className="w-3 h-3 mr-1" />
+              {command.category}
+            </Badge>
+          )}
+          {command.aliases?.map((alias) => (
+            <Badge key={alias} variant="secondary" className="text-xs font-mono">
+              /{alias}
+            </Badge>
+          ))}
+        </div>
+      </div>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t border-border p-4 space-y-4 bg-muted/30">
+          {/* Usage */}
+          {command.usage && (
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
+                <Code className="w-4 h-4" />
+                Usage
+              </div>
+              <div className="p-3 bg-background rounded-md font-mono text-sm overflow-x-auto">
+                <code>{command.usage}</code>
+              </div>
+            </div>
+          )}
+
+          {/* Examples */}
+          {command.examples && command.examples.length > 0 && (
+            <div>
+              <div className="flex items-center gap-2 text-sm font-medium text-foreground mb-2">
+                <BookOpen className="w-4 h-4" />
+                Examples
+              </div>
+              <div className="space-y-2">
+                {command.examples.map((example, idx) => (
+                  <div
+                    key={idx}
+                    className="p-3 bg-background rounded-md font-mono text-sm flex items-center justify-between gap-2 group"
+                  >
+                    <code className="overflow-x-auto flex-1">{example}</code>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={() => onCopy(example)}
+                    >
+                      <Copy className="w-3 h-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function CommandsManagerPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string>('all');
+  const [sourceFilter, setSourceFilter] = useState<string>('all');
+  const [expandedCommands, setExpandedCommands] = useState<Set<string>>(new Set());
+
+  const {
+    commands,
+    categories,
+    commandsByCategory,
+    totalCount,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useCommands({
+    filter: {
+      search: searchQuery || undefined,
+      category: categoryFilter !== 'all' ? categoryFilter : undefined,
+      source: sourceFilter !== 'all' ? sourceFilter as Command['source'] : undefined,
+    },
+  });
+
+  const toggleExpand = (commandName: string) => {
+    setExpandedCommands((prev) => {
+      const next = new Set(prev);
+      if (next.has(commandName)) {
+        next.delete(commandName);
+      } else {
+        next.add(commandName);
+      }
+      return next;
+    });
+  };
+
+  const expandAll = () => {
+    setExpandedCommands(new Set(commands.map((c) => c.name)));
+  };
+
+  const collapseAll = () => {
+    setExpandedCommands(new Set());
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      // TODO: Show toast notification
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // Count by source
+  const builtinCount = useMemo(
+    () => commands.filter((c) => c.source === 'builtin').length,
+    [commands]
+  );
+  const customCount = useMemo(
+    () => commands.filter((c) => c.source === 'custom').length,
+    [commands]
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+            <Terminal className="w-6 h-6 text-primary" />
+            Commands Manager
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Manage custom slash commands for Claude Code
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button>
+            <Plus className="w-4 h-4 mr-2" />
+            New Command
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Terminal className="w-5 h-5 text-primary" />
+            <span className="text-2xl font-bold">{totalCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Total Commands</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Code className="w-5 h-5 text-info" />
+            <span className="text-2xl font-bold">{builtinCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Built-in</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Plus className="w-5 h-5 text-success" />
+            <span className="text-2xl font-bold">{customCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Custom</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Tag className="w-5 h-5 text-warning" />
+            <span className="text-2xl font-bold">{categories.length}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Categories</p>
+        </Card>
+      </div>
+
+      {/* Filters and Search */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search commands by name, description, or alias..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex gap-2">
+          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Category" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Categories</SelectItem>
+              {categories.map((cat) => (
+                <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={sourceFilter} onValueChange={setSourceFilter}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Source" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Sources</SelectItem>
+              <SelectItem value="builtin">Built-in</SelectItem>
+              <SelectItem value="custom">Custom</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Expand/Collapse All */}
+      <div className="flex justify-end gap-2">
+        <Button variant="ghost" size="sm" onClick={expandAll}>
+          Expand All
+        </Button>
+        <Button variant="ghost" size="sm" onClick={collapseAll}>
+          Collapse All
+        </Button>
+      </div>
+
+      {/* Commands List */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="h-24 bg-muted animate-pulse rounded-lg" />
+          ))}
+        </div>
+      ) : commands.length === 0 ? (
+        <Card className="p-8 text-center">
+          <Terminal className="w-12 h-12 mx-auto text-muted-foreground/50" />
+          <h3 className="mt-4 text-lg font-medium text-foreground">No commands found</h3>
+          <p className="mt-2 text-muted-foreground">
+            Try adjusting your search or filters.
+          </p>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {commands.map((command) => (
+            <CommandCard
+              key={command.name}
+              command={command}
+              isExpanded={expandedCommands.has(command.name)}
+              onToggleExpand={() => toggleExpand(command.name)}
+              onCopy={copyToClipboard}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CommandsManagerPage;
diff --git a/ccw/frontend/src/pages/HelpPage.tsx b/ccw/frontend/src/pages/HelpPage.tsx
new file mode 100644
index 00000000..b498d74a
--- /dev/null
+++ b/ccw/frontend/src/pages/HelpPage.tsx
@@ -0,0 +1,207 @@
+// ========================================
+// Help Page
+// ========================================
+// Help documentation and guides
+
+import {
+  HelpCircle,
+  Book,
+  Video,
+  MessageCircle,
+  ExternalLink,
+  Workflow,
+  FolderKanban,
+  Terminal,
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+
+interface HelpSection {
+  title: string;
+  description: string;
+  icon: React.ElementType;
+  link?: string;
+  isExternal?: boolean;
+}
+
+const helpSections: HelpSection[] = [
+  {
+    title: 'Getting Started',
+    description: 'Learn the basics of CCW Dashboard and workflow management',
+    icon: Book,
+    link: '#getting-started',
+  },
+  {
+    title: 'Orchestrator Guide',
+    description: 'Master the visual workflow editor with drag-drop flows',
+    icon: Workflow,
+    link: '/orchestrator',
+  },
+  {
+    title: 'Sessions Management',
+    description: 'Understanding workflow sessions and task tracking',
+    icon: FolderKanban,
+    link: '/sessions',
+  },
+  {
+    title: 'CLI Integration',
+    description: 'Using CCW commands and CLI tool integration',
+    icon: Terminal,
+    link: '#cli-integration',
+  },
+];
+
+export function HelpPage() {
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          <HelpCircle className="w-6 h-6 text-primary" />
+          Help & Documentation
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Learn how to use CCW Dashboard and get the most out of your workflows
+        </p>
+      </div>
+
+      {/* Quick Links */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {helpSections.map((section) => {
+          const Icon = section.icon;
+          const content = (
+            <Card className="p-4 h-full hover:shadow-md hover:border-primary/50 transition-all cursor-pointer group">
+              <div className="flex items-start gap-3">
+                <div className="p-2 rounded-lg bg-primary/10 text-primary">
+                  <Icon className="w-5 h-5" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-medium text-foreground group-hover:text-primary transition-colors">
+                    {section.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {section.description}
+                  </p>
+                </div>
+                {section.isExternal && (
+                  <ExternalLink className="w-4 h-4 text-muted-foreground" />
+                )}
+              </div>
+            </Card>
+          );
+
+          if (section.link?.startsWith('/')) {
+            return (
+              <Link key={section.title} to={section.link}>
+                {content}
+              </Link>
+            );
+          }
+
+          return (
+            <a key={section.title} href={section.link}>
+              {content}
+            </a>
+          );
+        })}
+      </div>
+
+      {/* Getting Started Section */}
+      <Card className="p-6" id="getting-started">
+        <h2 className="text-xl font-semibold text-foreground mb-4">
+          Getting Started with CCW
+        </h2>
+        <div className="prose prose-sm max-w-none text-muted-foreground">
+          <p>
+            CCW (Claude Code Workflow) Dashboard is your central hub for managing
+            AI-powered development workflows. Here are the key concepts:
+          </p>
+          <ul className="mt-4 space-y-2">
+            <li>
+              <strong className="text-foreground">Sessions</strong> - Track the
+              progress of multi-step development tasks
+            </li>
+            <li>
+              <strong className="text-foreground">Orchestrator</strong> - Visual
+              workflow builder for creating automation flows
+            </li>
+            <li>
+              <strong className="text-foreground">Loops</strong> - Monitor
+              iterative development cycles in real-time
+            </li>
+            <li>
+              <strong className="text-foreground">Skills</strong> - Extend Claude
+              Code with custom capabilities
+            </li>
+            <li>
+              <strong className="text-foreground">Memory</strong> - Store context
+              and knowledge for better AI assistance
+            </li>
+          </ul>
+        </div>
+      </Card>
+
+      {/* CLI Integration Section */}
+      <Card className="p-6" id="cli-integration">
+        <h2 className="text-xl font-semibold text-foreground mb-4">
+          CLI Integration
+        </h2>
+        <div className="prose prose-sm max-w-none text-muted-foreground">
+          <p>
+            CCW integrates with multiple CLI tools for AI-assisted development:
+          </p>
+          <ul className="mt-4 space-y-2">
+            <li>
+              <code className="bg-muted px-1.5 py-0.5 rounded text-foreground">
+                ccw cli -p "prompt" --tool gemini
+              </code>
+              - Execute with Gemini
+            </li>
+            <li>
+              <code className="bg-muted px-1.5 py-0.5 rounded text-foreground">
+                ccw cli -p "prompt" --tool qwen
+              </code>
+              - Execute with Qwen
+            </li>
+            <li>
+              <code className="bg-muted px-1.5 py-0.5 rounded text-foreground">
+                ccw cli -p "prompt" --tool codex
+              </code>
+              - Execute with Codex
+            </li>
+          </ul>
+        </div>
+      </Card>
+
+      {/* Support Section */}
+      <Card className="p-6 bg-primary/5 border-primary/20">
+        <div className="flex items-start gap-4">
+          <div className="p-3 rounded-lg bg-primary/10">
+            <MessageCircle className="w-6 h-6 text-primary" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-foreground">
+              Need more help?
+            </h3>
+            <p className="text-muted-foreground mt-1 mb-4">
+              Check the project documentation or reach out for support.
+            </p>
+            <div className="flex gap-3">
+              <Button variant="outline" size="sm">
+                <Book className="w-4 h-4 mr-2" />
+                Documentation
+              </Button>
+              <Button variant="outline" size="sm">
+                <Video className="w-4 h-4 mr-2" />
+                Tutorials
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default HelpPage;
diff --git a/ccw/frontend/src/pages/HomePage.tsx b/ccw/frontend/src/pages/HomePage.tsx
new file mode 100644
index 00000000..c5419cc9
--- /dev/null
+++ b/ccw/frontend/src/pages/HomePage.tsx
@@ -0,0 +1,226 @@
+// ========================================
+// HomePage Component
+// ========================================
+// Dashboard home page with stat cards and recent sessions
+
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  FolderKanban,
+  ListChecks,
+  CheckCircle2,
+  Clock,
+  XCircle,
+  Activity,
+  RefreshCw,
+  AlertCircle,
+} from 'lucide-react';
+import { useDashboardStats } from '@/hooks/useDashboardStats';
+import { useSessions } from '@/hooks/useSessions';
+import { StatCard, StatCardSkeleton } from '@/components/shared/StatCard';
+import { SessionCard, SessionCardSkeleton } from '@/components/shared/SessionCard';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
+
+// Stat card configuration
+const statCards = [
+  {
+    key: 'activeSessions',
+    title: 'Active Sessions',
+    icon: FolderKanban,
+    variant: 'primary' as const,
+    getValue: (stats: { activeSessions: number }) => stats.activeSessions,
+  },
+  {
+    key: 'totalTasks',
+    title: 'Total Tasks',
+    icon: ListChecks,
+    variant: 'info' as const,
+    getValue: (stats: { totalTasks: number }) => stats.totalTasks,
+  },
+  {
+    key: 'completedTasks',
+    title: 'Completed',
+    icon: CheckCircle2,
+    variant: 'success' as const,
+    getValue: (stats: { completedTasks: number }) => stats.completedTasks,
+  },
+  {
+    key: 'pendingTasks',
+    title: 'Pending',
+    icon: Clock,
+    variant: 'warning' as const,
+    getValue: (stats: { pendingTasks: number }) => stats.pendingTasks,
+  },
+  {
+    key: 'failedTasks',
+    title: 'Failed',
+    icon: XCircle,
+    variant: 'danger' as const,
+    getValue: (stats: { failedTasks: number }) => stats.failedTasks,
+  },
+  {
+    key: 'todayActivity',
+    title: "Today's Activity",
+    icon: Activity,
+    variant: 'default' as const,
+    getValue: (stats: { todayActivity: number }) => stats.todayActivity,
+  },
+];
+
+/**
+ * HomePage component - Dashboard overview with statistics and recent sessions
+ */
+export function HomePage() {
+  const navigate = useNavigate();
+
+  // Fetch dashboard stats
+  const {
+    stats,
+    isLoading: statsLoading,
+    isFetching: statsFetching,
+    error: statsError,
+    refetch: refetchStats,
+  } = useDashboardStats({
+    refetchInterval: 60000, // Refetch every minute
+  });
+
+  // Fetch recent sessions (active only, limited)
+  const {
+    activeSessions,
+    isLoading: sessionsLoading,
+    isFetching: sessionsFetching,
+    error: sessionsError,
+    refetch: refetchSessions,
+  } = useSessions({
+    filter: { location: 'active' },
+  });
+
+  // Get recent sessions (max 6)
+  const recentSessions = React.useMemo(
+    () =>
+      [...activeSessions]
+        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+        .slice(0, 6),
+    [activeSessions]
+  );
+
+  const handleRefresh = async () => {
+    await Promise.all([refetchStats(), refetchSessions()]);
+  };
+
+  const handleSessionClick = (sessionId: string) => {
+    navigate(`/sessions/${sessionId}`);
+  };
+
+  const handleViewAllSessions = () => {
+    navigate('/sessions');
+  };
+
+  const isLoading = statsLoading || sessionsLoading;
+  const isFetching = statsFetching || sessionsFetching;
+  const hasError = statsError || sessionsError;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Dashboard</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Overview of your workflow sessions and tasks
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleRefresh}
+          disabled={isFetching}
+        >
+          <RefreshCw className={cn('h-4 w-4 mr-2', isFetching && 'animate-spin')} />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Error alert */}
+      {hasError && (
+        <div className="flex items-center gap-2 p-4 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive">
+          <AlertCircle className="h-5 w-5 flex-shrink-0" />
+          <div className="flex-1">
+            <p className="text-sm font-medium">Failed to load dashboard data</p>
+            <p className="text-xs mt-0.5">
+              {(statsError || sessionsError)?.message || 'An unexpected error occurred'}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRefresh}>
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      <section>
+        <h2 className="text-lg font-medium text-foreground mb-4">Statistics</h2>
+        <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
+          {isLoading
+            ? // Loading skeletons
+              Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
+            : // Actual stat cards
+              statCards.map((card) => (
+                <StatCard
+                  key={card.key}
+                  title={card.title}
+                  value={stats ? card.getValue(stats as any) : 0}
+                  icon={card.icon}
+                  variant={card.variant}
+                  isLoading={isFetching && !stats}
+                />
+              ))}
+        </div>
+      </section>
+
+      {/* Recent Sessions */}
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium text-foreground">Recent Sessions</h2>
+          <Button variant="link" size="sm" onClick={handleViewAllSessions}>
+            View All
+          </Button>
+        </div>
+
+        {sessionsLoading ? (
+          // Loading skeletons
+          <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <SessionCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : recentSessions.length === 0 ? (
+          // Empty state
+          <div className="flex flex-col items-center justify-center py-12 px-4 border border-dashed border-border rounded-lg">
+            <FolderKanban className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium text-foreground mb-1">No sessions yet</h3>
+            <p className="text-sm text-muted-foreground text-center max-w-sm">
+              Start a new workflow session to track your development tasks and progress.
+            </p>
+          </div>
+        ) : (
+          // Session cards grid
+          <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            {recentSessions.map((session) => (
+              <SessionCard
+                key={session.session_id}
+                session={session}
+                onClick={handleSessionClick}
+                onView={handleSessionClick}
+                showActions={false}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default HomePage;
diff --git a/ccw/frontend/src/pages/IssueManagerPage.tsx b/ccw/frontend/src/pages/IssueManagerPage.tsx
new file mode 100644
index 00000000..2a489047
--- /dev/null
+++ b/ccw/frontend/src/pages/IssueManagerPage.tsx
@@ -0,0 +1,401 @@
+// ========================================
+// Issue Manager Page
+// ========================================
+// Track and manage project issues with drag-drop queue
+
+import { useState, useMemo } from 'react';
+import {
+  AlertCircle,
+  Plus,
+  Filter,
+  Search,
+  RefreshCw,
+  Loader2,
+  Github,
+  ListFilter,
+  CheckCircle,
+  Clock,
+  AlertTriangle,
+} from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
+import { IssueCard } from '@/components/shared/IssueCard';
+import { useIssues, useIssueMutations } from '@/hooks';
+import type { Issue } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+// ========== Types ==========
+
+type ViewMode = 'issues' | 'queue';
+type StatusFilter = 'all' | Issue['status'];
+type PriorityFilter = 'all' | Issue['priority'];
+
+// ========== New Issue Dialog ==========
+
+interface NewIssueDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: { title: string; context?: string; priority?: Issue['priority'] }) => void;
+  isCreating: boolean;
+}
+
+function NewIssueDialog({ open, onOpenChange, onSubmit, isCreating }: NewIssueDialogProps) {
+  const [title, setTitle] = useState('');
+  const [context, setContext] = useState('');
+  const [priority, setPriority] = useState<Issue['priority']>('medium');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (title.trim()) {
+      onSubmit({ title: title.trim(), context: context.trim() || undefined, priority });
+      setTitle('');
+      setContext('');
+      setPriority('medium');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Issue</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <div>
+            <label className="text-sm font-medium text-foreground">Title</label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Issue title..."
+              className="mt-1"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-foreground">Context (optional)</label>
+            <textarea
+              value={context}
+              onChange={(e) => setContext(e.target.value)}
+              placeholder="Describe the issue..."
+              className="mt-1 w-full min-h-[100px] p-3 bg-background border border-input rounded-md text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-foreground">Priority</label>
+            <Select value={priority} onValueChange={(v) => setPriority(v as Issue['priority'])}>
+              <SelectTrigger className="mt-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="low">Low</SelectItem>
+                <SelectItem value="medium">Medium</SelectItem>
+                <SelectItem value="high">High</SelectItem>
+                <SelectItem value="critical">Critical</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isCreating || !title.trim()}>
+              {isCreating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Create Issue
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ========== Issue List Component ==========
+
+interface IssueListProps {
+  issues: Issue[];
+  isLoading: boolean;
+  onIssueClick: (issue: Issue) => void;
+  onIssueEdit: (issue: Issue) => void;
+  onIssueDelete: (issue: Issue) => void;
+  onStatusChange: (issue: Issue, status: Issue['status']) => void;
+}
+
+function IssueList({
+  issues,
+  isLoading,
+  onIssueClick,
+  onIssueEdit,
+  onIssueDelete,
+  onStatusChange,
+}: IssueListProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (issues.length === 0) {
+    return (
+      <Card className="p-8 text-center">
+        <AlertCircle className="w-12 h-12 mx-auto text-muted-foreground/50" />
+        <h3 className="mt-4 text-lg font-medium text-foreground">No issues found</h3>
+        <p className="mt-2 text-muted-foreground">
+          Create a new issue or adjust your filters.
+        </p>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+      {issues.map((issue) => (
+        <IssueCard
+          key={issue.id}
+          issue={issue}
+          onClick={onIssueClick}
+          onEdit={onIssueEdit}
+          onDelete={onIssueDelete}
+          onStatusChange={onStatusChange}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function IssueManagerPage() {
+  const [viewMode, setViewMode] = useState<ViewMode>('issues');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
+  const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(null);
+
+  const {
+    issues,
+    issuesByStatus,
+    issuesByPriority,
+    openCount,
+    criticalCount,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useIssues({
+    filter: {
+      search: searchQuery || undefined,
+      status: statusFilter !== 'all' ? [statusFilter] : undefined,
+      priority: priorityFilter !== 'all' ? [priorityFilter] : undefined,
+    },
+  });
+
+  const { createIssue, updateIssue, deleteIssue, isCreating, isUpdating } = useIssueMutations();
+
+  // Filter counts
+  const statusCounts = useMemo(() => ({
+    all: issues.length,
+    open: issuesByStatus.open?.length || 0,
+    in_progress: issuesByStatus.in_progress?.length || 0,
+    resolved: issuesByStatus.resolved?.length || 0,
+    closed: issuesByStatus.closed?.length || 0,
+    completed: issuesByStatus.completed?.length || 0,
+  }), [issues, issuesByStatus]);
+
+  const handleCreateIssue = async (data: { title: string; context?: string; priority?: Issue['priority'] }) => {
+    await createIssue(data);
+    setIsNewIssueOpen(false);
+  };
+
+  const handleEditIssue = (issue: Issue) => {
+    setSelectedIssue(issue);
+    // TODO: Open edit dialog
+  };
+
+  const handleDeleteIssue = async (issue: Issue) => {
+    if (confirm(`Delete issue "${issue.title}"?`)) {
+      await deleteIssue(issue.id);
+    }
+  };
+
+  const handleStatusChange = async (issue: Issue, status: Issue['status']) => {
+    await updateIssue(issue.id, { status });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+            <AlertCircle className="w-6 h-6 text-primary" />
+            Issue Manager
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Track and manage project issues and bugs
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button variant="outline">
+            <Github className="w-4 h-4 mr-2" />
+            Pull from GitHub
+          </Button>
+          <Button onClick={() => setIsNewIssueOpen(true)}>
+            <Plus className="w-4 h-4 mr-2" />
+            New Issue
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="w-5 h-5 text-info" />
+            <span className="text-2xl font-bold">{openCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Open Issues</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Clock className="w-5 h-5 text-warning" />
+            <span className="text-2xl font-bold">{issuesByStatus.in_progress?.length || 0}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">In Progress</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-destructive" />
+            <span className="text-2xl font-bold">{criticalCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Critical</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <CheckCircle className="w-5 h-5 text-success" />
+            <span className="text-2xl font-bold">{issuesByStatus.resolved?.length || 0}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Resolved</p>
+        </Card>
+      </div>
+
+      {/* Filters and Search */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search issues..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex gap-2">
+          <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="open">Open</SelectItem>
+              <SelectItem value="in_progress">In Progress</SelectItem>
+              <SelectItem value="resolved">Resolved</SelectItem>
+              <SelectItem value="closed">Closed</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={priorityFilter} onValueChange={(v) => setPriorityFilter(v as PriorityFilter)}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Priority" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Priority</SelectItem>
+              <SelectItem value="critical">Critical</SelectItem>
+              <SelectItem value="high">High</SelectItem>
+              <SelectItem value="medium">Medium</SelectItem>
+              <SelectItem value="low">Low</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Quick Filters */}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant={statusFilter === 'all' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setStatusFilter('all')}
+        >
+          All ({statusCounts.all})
+        </Button>
+        <Button
+          variant={statusFilter === 'open' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setStatusFilter('open')}
+        >
+          <Badge variant="info" className="mr-2">{statusCounts.open}</Badge>
+          Open
+        </Button>
+        <Button
+          variant={statusFilter === 'in_progress' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setStatusFilter('in_progress')}
+        >
+          <Badge variant="warning" className="mr-2">{statusCounts.in_progress}</Badge>
+          In Progress
+        </Button>
+        <Button
+          variant={priorityFilter === 'critical' ? 'destructive' : 'outline'}
+          size="sm"
+          onClick={() => {
+            setPriorityFilter(priorityFilter === 'critical' ? 'all' : 'critical');
+            setStatusFilter('all');
+          }}
+        >
+          <Badge variant="destructive" className="mr-2">{criticalCount}</Badge>
+          Critical
+        </Button>
+      </div>
+
+      {/* Issue List */}
+      <IssueList
+        issues={issues}
+        isLoading={isLoading}
+        onIssueClick={setSelectedIssue}
+        onIssueEdit={handleEditIssue}
+        onIssueDelete={handleDeleteIssue}
+        onStatusChange={handleStatusChange}
+      />
+
+      {/* New Issue Dialog */}
+      <NewIssueDialog
+        open={isNewIssueOpen}
+        onOpenChange={setIsNewIssueOpen}
+        onSubmit={handleCreateIssue}
+        isCreating={isCreating}
+      />
+    </div>
+  );
+}
+
+export default IssueManagerPage;
diff --git a/ccw/frontend/src/pages/LoopMonitorPage.tsx b/ccw/frontend/src/pages/LoopMonitorPage.tsx
new file mode 100644
index 00000000..f8c8237b
--- /dev/null
+++ b/ccw/frontend/src/pages/LoopMonitorPage.tsx
@@ -0,0 +1,438 @@
+// ========================================
+// Loop Monitor Page
+// ========================================
+// Monitor running development loops with Kanban board
+
+import { useState, useCallback } from 'react';
+import {
+  RefreshCw,
+  Play,
+  Pause,
+  StopCircle,
+  Plus,
+  Search,
+  Filter,
+  Clock,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Loader2,
+} from 'lucide-react';
+import type { DropResult, DraggableProvided } from '@hello-pangea/dnd';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Input } from '@/components/ui/Input';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/Dialog';
+import { KanbanBoard, useLoopKanbanColumns, type LoopKanbanItem } from '@/components/shared/KanbanBoard';
+import { useLoops, useLoopMutations } from '@/hooks';
+import type { Loop } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+// ========== Loop Card Component ==========
+
+interface LoopCardProps {
+  loop: Loop;
+  provided: DraggableProvided;
+  onPause?: (loop: Loop) => void;
+  onResume?: (loop: Loop) => void;
+  onStop?: (loop: Loop) => void;
+  onClick?: (loop: Loop) => void;
+}
+
+function LoopCard({ loop, provided, onPause, onResume, onStop, onClick }: LoopCardProps) {
+  const statusIcons: Record<Loop['status'], React.ReactNode> = {
+    created: <Clock className="w-4 h-4 text-muted-foreground" />,
+    running: <Loader2 className="w-4 h-4 text-primary animate-spin" />,
+    paused: <Pause className="w-4 h-4 text-warning" />,
+    completed: <CheckCircle className="w-4 h-4 text-success" />,
+    failed: <XCircle className="w-4 h-4 text-destructive" />,
+  };
+
+  const progress = loop.totalSteps > 0
+    ? Math.round((loop.currentStep / loop.totalSteps) * 100)
+    : 0;
+
+  return (
+    <div
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      onClick={() => onClick?.(loop)}
+      className={cn(
+        'p-3 bg-card border border-border rounded-lg cursor-pointer',
+        'hover:shadow-md hover:border-primary/50 transition-all',
+        'focus:outline-none focus:ring-2 focus:ring-primary/50'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          {statusIcons[loop.status]}
+          <span className="text-sm font-medium text-foreground truncate">
+            {loop.name || loop.id}
+          </span>
+        </div>
+        {loop.tool && (
+          <Badge variant="outline" className="text-xs flex-shrink-0">
+            {loop.tool}
+          </Badge>
+        )}
+      </div>
+
+      {/* Prompt Preview */}
+      {loop.prompt && (
+        <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
+          {loop.prompt}
+        </p>
+      )}
+
+      {/* Progress Bar */}
+      {loop.status === 'running' && loop.totalSteps > 0 && (
+        <div className="mt-3">
+          <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
+            <span>Step {loop.currentStep}/{loop.totalSteps}</span>
+            <span>{progress}%</span>
+          </div>
+          <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+            <div
+              className="h-full bg-primary transition-all duration-300"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Actions */}
+      {(loop.status === 'running' || loop.status === 'paused') && (
+        <div className="flex items-center gap-1 mt-3 pt-2 border-t border-border">
+          {loop.status === 'running' ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={(e) => { e.stopPropagation(); onPause?.(loop); }}
+            >
+              <Pause className="w-3 h-3 mr-1" />
+              Pause
+            </Button>
+          ) : (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={(e) => { e.stopPropagation(); onResume?.(loop); }}
+            >
+              <Play className="w-3 h-3 mr-1" />
+              Resume
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 text-xs text-destructive hover:text-destructive"
+            onClick={(e) => { e.stopPropagation(); onStop?.(loop); }}
+          >
+            <StopCircle className="w-3 h-3 mr-1" />
+            Stop
+          </Button>
+        </div>
+      )}
+
+      {/* Error Message */}
+      {loop.status === 'failed' && loop.error && (
+        <div className="mt-2 p-2 bg-destructive/10 rounded text-xs text-destructive">
+          {loop.error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ========== New Loop Dialog ==========
+
+interface NewLoopDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: { prompt: string; tool?: string; mode?: string }) => void;
+  isCreating: boolean;
+}
+
+function NewLoopDialog({ open, onOpenChange, onSubmit, isCreating }: NewLoopDialogProps) {
+  const [prompt, setPrompt] = useState('');
+  const [tool, setTool] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (prompt.trim()) {
+      onSubmit({ prompt: prompt.trim(), tool: tool || undefined });
+      setPrompt('');
+      setTool('');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Start New Loop</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <div>
+            <label className="text-sm font-medium text-foreground">Prompt</label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="Enter your development loop prompt..."
+              className="mt-1 w-full min-h-[100px] p-3 bg-background border border-input rounded-md text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-foreground">CLI Tool (optional)</label>
+            <Input
+              value={tool}
+              onChange={(e) => setTool(e.target.value)}
+              placeholder="e.g., gemini, qwen, codex"
+              className="mt-1"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isCreating || !prompt.trim()}>
+              {isCreating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Play className="w-4 h-4 mr-2" />
+                  Start Loop
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function LoopMonitorPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isNewLoopOpen, setIsNewLoopOpen] = useState(false);
+  const [selectedLoop, setSelectedLoop] = useState<Loop | null>(null);
+
+  const {
+    loops,
+    loopsByStatus,
+    runningCount,
+    completedCount,
+    failedCount,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useLoops({
+    filter: searchQuery ? { search: searchQuery } : undefined,
+    refetchInterval: 5000, // Refresh every 5 seconds for real-time updates
+  });
+
+  const { createLoop, updateStatus, isCreating, isUpdating } = useLoopMutations();
+
+  // Kanban columns
+  const columns = useLoopKanbanColumns(loopsByStatus as unknown as Record<string, LoopKanbanItem[]>);
+
+  // Handle drag and drop status change
+  const handleDragEnd = useCallback(
+    async (result: DropResult, _source: string, destination: string) => {
+      const loopId = result.draggableId;
+      const newStatus = destination as Loop['status'];
+
+      // Only allow certain transitions
+      const allowedTransitions: Record<Loop['status'], Loop['status'][]> = {
+        created: ['running'],
+        running: ['paused', 'completed', 'failed'],
+        paused: ['running', 'completed'],
+        completed: [],
+        failed: ['created'], // Retry
+      };
+
+      const loop = loops.find((l) => l.id === loopId);
+      if (!loop) return;
+
+      if (!allowedTransitions[loop.status]?.includes(newStatus)) {
+        return; // Invalid transition
+      }
+
+      // Map status to action
+      const actionMap: Record<Loop['status'], 'pause' | 'resume' | 'stop' | null> = {
+        paused: 'pause',
+        running: 'resume',
+        completed: 'stop',
+        failed: 'stop',
+        created: null,
+      };
+
+      const action = actionMap[newStatus];
+      if (action) {
+        await updateStatus(loopId, action);
+      }
+    },
+    [loops, updateStatus]
+  );
+
+  const handlePause = async (loop: Loop) => {
+    await updateStatus(loop.id, 'pause');
+  };
+
+  const handleResume = async (loop: Loop) => {
+    await updateStatus(loop.id, 'resume');
+  };
+
+  const handleStop = async (loop: Loop) => {
+    await updateStatus(loop.id, 'stop');
+  };
+
+  const handleCreateLoop = async (data: { prompt: string; tool?: string; mode?: string }) => {
+    await createLoop(data);
+    setIsNewLoopOpen(false);
+  };
+
+  // Custom item renderer for loops
+  const renderLoopItem = useCallback(
+    (item: LoopKanbanItem, provided: DraggableProvided) => (
+      <LoopCard
+        loop={item as unknown as Loop}
+        provided={provided}
+        onPause={handlePause}
+        onResume={handleResume}
+        onStop={handleStop}
+        onClick={setSelectedLoop}
+      />
+    ),
+    []
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+            <RefreshCw className="w-6 h-6 text-primary" />
+            Loop Monitor
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Monitor and control running development loops
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button onClick={() => setIsNewLoopOpen(true)}>
+            <Plus className="w-4 h-4 mr-2" />
+            New Loop
+          </Button>
+        </div>
+      </div>
+
+      {/* Status Overview */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Loader2 className="w-5 h-5 text-primary" />
+            <span className="text-2xl font-bold">{runningCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Running</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Pause className="w-5 h-5 text-warning" />
+            <span className="text-2xl font-bold">{loopsByStatus.paused?.length || 0}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Paused</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <CheckCircle className="w-5 h-5 text-success" />
+            <span className="text-2xl font-bold">{completedCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Completed</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <XCircle className="w-5 h-5 text-destructive" />
+            <span className="text-2xl font-bold">{failedCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Failed</p>
+        </Card>
+      </div>
+
+      {/* Search */}
+      <div className="relative max-w-md">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          placeholder="Search loops..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {/* Kanban Board */}
+      {isLoading ? (
+        <div className="grid grid-cols-5 gap-4">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Card key={i} className="p-4">
+              <div className="h-6 w-20 bg-muted animate-pulse rounded mb-4" />
+              <div className="space-y-2">
+                {[1, 2].map((j) => (
+                  <div key={j} className="h-24 bg-muted animate-pulse rounded" />
+                ))}
+              </div>
+            </Card>
+          ))}
+        </div>
+      ) : loops.length === 0 && !searchQuery ? (
+        <Card className="p-8 text-center">
+          <RefreshCw className="w-12 h-12 mx-auto text-muted-foreground/50" />
+          <h3 className="mt-4 text-lg font-medium text-foreground">
+            No active loops
+          </h3>
+          <p className="mt-2 text-muted-foreground">
+            Start a new development loop to begin monitoring progress.
+          </p>
+          <Button className="mt-4" onClick={() => setIsNewLoopOpen(true)}>
+            <Play className="w-4 h-4 mr-2" />
+            Start New Loop
+          </Button>
+        </Card>
+      ) : (
+        <KanbanBoard
+          columns={columns}
+          onDragEnd={handleDragEnd}
+          renderItem={renderLoopItem}
+          emptyColumnMessage="No loops"
+          className="min-h-[400px]"
+        />
+      )}
+
+      {/* New Loop Dialog */}
+      <NewLoopDialog
+        open={isNewLoopOpen}
+        onOpenChange={setIsNewLoopOpen}
+        onSubmit={handleCreateLoop}
+        isCreating={isCreating}
+      />
+    </div>
+  );
+}
+
+export default LoopMonitorPage;
diff --git a/ccw/frontend/src/pages/MemoryPage.tsx b/ccw/frontend/src/pages/MemoryPage.tsx
new file mode 100644
index 00000000..e80c122c
--- /dev/null
+++ b/ccw/frontend/src/pages/MemoryPage.tsx
@@ -0,0 +1,480 @@
+// ========================================
+// Memory Page
+// ========================================
+// View and manage core memory and context with CRUD operations
+
+import { useState } from 'react';
+import {
+  Brain,
+  Search,
+  Plus,
+  Database,
+  FileText,
+  RefreshCw,
+  Trash2,
+  Edit,
+  Eye,
+  Tag,
+  Loader2,
+  Copy,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
+import { useMemory, useMemoryMutations } from '@/hooks';
+import type { CoreMemory } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+// ========== Memory Card Component ==========
+
+interface MemoryCardProps {
+  memory: CoreMemory;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEdit: (memory: CoreMemory) => void;
+  onDelete: (memory: CoreMemory) => void;
+  onCopy: (content: string) => void;
+}
+
+function MemoryCard({ memory, isExpanded, onToggleExpand, onEdit, onDelete, onCopy }: MemoryCardProps) {
+  const formattedDate = new Date(memory.createdAt).toLocaleDateString();
+  const formattedSize = memory.size
+    ? memory.size < 1024
+      ? `${memory.size} B`
+      : `${(memory.size / 1024).toFixed(1)} KB`
+    : 'Unknown';
+
+  return (
+    <Card className="overflow-hidden">
+      {/* Header */}
+      <div
+        className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={onToggleExpand}
+      >
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-start gap-3">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Brain className="w-5 h-5 text-primary" />
+            </div>
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-foreground">
+                  {memory.id}
+                </span>
+                {memory.source && (
+                  <Badge variant="outline" className="text-xs">
+                    {memory.source}
+                  </Badge>
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                {formattedDate} - {formattedSize}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCopy(memory.content);
+              }}
+            >
+              <Copy className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdit(memory);
+              }}
+            >
+              <Edit className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(memory);
+              }}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            {isExpanded ? (
+              <ChevronUp className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-muted-foreground" />
+            )}
+          </div>
+        </div>
+
+        {/* Preview */}
+        {!isExpanded && (
+          <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+            {memory.content}
+          </p>
+        )}
+
+        {/* Tags */}
+        {memory.tags && memory.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {memory.tags.slice(0, 5).map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                <Tag className="w-3 h-3 mr-1" />
+                {tag}
+              </Badge>
+            ))}
+            {memory.tags.length > 5 && (
+              <Badge variant="secondary" className="text-xs">
+                +{memory.tags.length - 5}
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t border-border p-4 bg-muted/30">
+          <pre className="text-sm text-foreground whitespace-pre-wrap font-mono bg-background p-4 rounded-lg overflow-x-auto max-h-96">
+            {memory.content}
+          </pre>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// ========== New Memory Dialog ==========
+
+interface NewMemoryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: { content: string; tags?: string[] }) => void;
+  isCreating: boolean;
+  editingMemory?: CoreMemory | null;
+}
+
+function NewMemoryDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  isCreating,
+  editingMemory,
+}: NewMemoryDialogProps) {
+  const [content, setContent] = useState(editingMemory?.content || '');
+  const [tagsInput, setTagsInput] = useState(editingMemory?.tags?.join(', ') || '');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (content.trim()) {
+      const tags = tagsInput
+        .split(',')
+        .map((t) => t.trim())
+        .filter(Boolean);
+      onSubmit({ content: content.trim(), tags: tags.length > 0 ? tags : undefined });
+      setContent('');
+      setTagsInput('');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            {editingMemory ? 'Edit Memory' : 'Add New Memory'}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <div>
+            <label className="text-sm font-medium text-foreground">Content</label>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Enter memory content..."
+              className="mt-1 w-full min-h-[200px] p-3 bg-background border border-input rounded-md text-sm font-mono resize-none focus:outline-none focus:ring-2 focus:ring-primary"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-foreground">Tags (comma-separated)</label>
+            <Input
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="e.g., project, config, api"
+              className="mt-1"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isCreating || !content.trim()}>
+              {isCreating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {editingMemory ? 'Updating...' : 'Creating...'}
+                </>
+              ) : (
+                <>
+                  <Plus className="w-4 h-4 mr-2" />
+                  {editingMemory ? 'Update Memory' : 'Add Memory'}
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function MemoryPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [isNewMemoryOpen, setIsNewMemoryOpen] = useState(false);
+  const [editingMemory, setEditingMemory] = useState<CoreMemory | null>(null);
+  const [expandedMemories, setExpandedMemories] = useState<Set<string>>(new Set());
+
+  const {
+    memories,
+    totalSize,
+    claudeMdCount,
+    allTags,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useMemory({
+    filter: {
+      search: searchQuery || undefined,
+      tags: selectedTags.length > 0 ? selectedTags : undefined,
+    },
+  });
+
+  const { createMemory, updateMemory, deleteMemory, isCreating, isUpdating, isDeleting } =
+    useMemoryMutations();
+
+  const toggleExpand = (memoryId: string) => {
+    setExpandedMemories((prev) => {
+      const next = new Set(prev);
+      if (next.has(memoryId)) {
+        next.delete(memoryId);
+      } else {
+        next.add(memoryId);
+      }
+      return next;
+    });
+  };
+
+  const handleCreateMemory = async (data: { content: string; tags?: string[] }) => {
+    if (editingMemory) {
+      await updateMemory(editingMemory.id, data);
+      setEditingMemory(null);
+    } else {
+      await createMemory(data);
+    }
+    setIsNewMemoryOpen(false);
+  };
+
+  const handleEdit = (memory: CoreMemory) => {
+    setEditingMemory(memory);
+    setIsNewMemoryOpen(true);
+  };
+
+  const handleDelete = async (memory: CoreMemory) => {
+    if (confirm(`Delete memory "${memory.id}"?`)) {
+      await deleteMemory(memory.id);
+    }
+  };
+
+  const copyToClipboard = async (content: string) => {
+    try {
+      await navigator.clipboard.writeText(content);
+      // TODO: Show toast notification
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+  };
+
+  const formattedTotalSize = totalSize < 1024
+    ? `${totalSize} B`
+    : totalSize < 1024 * 1024
+      ? `${(totalSize / 1024).toFixed(1)} KB`
+      : `${(totalSize / (1024 * 1024)).toFixed(1)} MB`;
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+            <Brain className="w-6 h-6 text-primary" />
+            Memory
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Manage core memory, context, and knowledge base
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button onClick={() => { setEditingMemory(null); setIsNewMemoryOpen(true); }}>
+            <Plus className="w-4 h-4 mr-2" />
+            Add Memory
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Database className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-foreground">{memories.length}</div>
+              <p className="text-sm text-muted-foreground">Core Memories</p>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-info/10">
+              <FileText className="w-5 h-5 text-info" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-foreground">{claudeMdCount}</div>
+              <p className="text-sm text-muted-foreground">CLAUDE.md Files</p>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-success/10">
+              <Brain className="w-5 h-5 text-success" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-foreground">{formattedTotalSize}</div>
+              <p className="text-sm text-muted-foreground">Total Size</p>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search memories..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+
+        {/* Tags Filter */}
+        {allTags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            <span className="text-sm text-muted-foreground py-1">Tags:</span>
+            {allTags.map((tag) => (
+              <Button
+                key={tag}
+                variant={selectedTags.includes(tag) ? 'default' : 'outline'}
+                size="sm"
+                className="h-7"
+                onClick={() => toggleTag(tag)}
+              >
+                <Tag className="w-3 h-3 mr-1" />
+                {tag}
+              </Button>
+            ))}
+            {selectedTags.length > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7"
+                onClick={() => setSelectedTags([])}
+              >
+                Clear
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Memory List */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
+          ))}
+        </div>
+      ) : memories.length === 0 ? (
+        <Card className="p-8 text-center">
+          <Brain className="w-12 h-12 mx-auto text-muted-foreground/50" />
+          <h3 className="mt-4 text-lg font-medium text-foreground">
+            No memories stored
+          </h3>
+          <p className="mt-2 text-muted-foreground">
+            Add context and knowledge to help Claude understand your project better.
+          </p>
+          <Button className="mt-4" onClick={() => { setEditingMemory(null); setIsNewMemoryOpen(true); }}>
+            <Plus className="w-4 h-4 mr-2" />
+            Add First Memory
+          </Button>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {memories.map((memory) => (
+            <MemoryCard
+              key={memory.id}
+              memory={memory}
+              isExpanded={expandedMemories.has(memory.id)}
+              onToggleExpand={() => toggleExpand(memory.id)}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              onCopy={copyToClipboard}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* New/Edit Memory Dialog */}
+      <NewMemoryDialog
+        open={isNewMemoryOpen}
+        onOpenChange={(open) => {
+          setIsNewMemoryOpen(open);
+          if (!open) setEditingMemory(null);
+        }}
+        onSubmit={handleCreateMemory}
+        isCreating={isCreating || isUpdating}
+        editingMemory={editingMemory}
+      />
+    </div>
+  );
+}
+
+export default MemoryPage;
diff --git a/ccw/frontend/src/pages/SessionsPage.tsx b/ccw/frontend/src/pages/SessionsPage.tsx
new file mode 100644
index 00000000..250ad38d
--- /dev/null
+++ b/ccw/frontend/src/pages/SessionsPage.tsx
@@ -0,0 +1,450 @@
+// ========================================
+// SessionsPage Component
+// ========================================
+// Sessions list page with CRUD operations
+
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Plus,
+  RefreshCw,
+  Search,
+  Filter,
+  AlertCircle,
+  FolderKanban,
+  X,
+} from 'lucide-react';
+import {
+  useSessions,
+  useCreateSession,
+  useArchiveSession,
+  useDeleteSession,
+  type SessionsFilter,
+} from '@/hooks/useSessions';
+import { SessionCard, SessionCardSkeleton } from '@/components/shared/SessionCard';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/Dialog';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from '@/components/ui/Dropdown';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/Tabs';
+import { cn } from '@/lib/utils';
+import type { SessionMetadata } from '@/types/store';
+
+type LocationFilter = 'all' | 'active' | 'archived';
+
+/**
+ * SessionsPage component - Sessions list with CRUD operations
+ */
+export function SessionsPage() {
+  const navigate = useNavigate();
+
+  // Filter state
+  const [locationFilter, setLocationFilter] = React.useState<LocationFilter>('active');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [statusFilter, setStatusFilter] = React.useState<SessionMetadata['status'][]>([]);
+
+  // Dialog state
+  const [createDialogOpen, setCreateDialogOpen] = React.useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [sessionToDelete, setSessionToDelete] = React.useState<string | null>(null);
+
+  // Create session form state
+  const [newSessionId, setNewSessionId] = React.useState('');
+  const [newSessionTitle, setNewSessionTitle] = React.useState('');
+  const [newSessionDescription, setNewSessionDescription] = React.useState('');
+
+  // Build filter object
+  const filter: SessionsFilter = React.useMemo(
+    () => ({
+      location: locationFilter,
+      search: searchQuery,
+      status: statusFilter.length > 0 ? statusFilter : undefined,
+    }),
+    [locationFilter, searchQuery, statusFilter]
+  );
+
+  // Fetch sessions with filter
+  const {
+    filteredSessions,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useSessions({ filter });
+
+  // Mutations
+  const { createSession, isCreating } = useCreateSession();
+  const { archiveSession, isArchiving } = useArchiveSession();
+  const { deleteSession, isDeleting } = useDeleteSession();
+
+  const isMutating = isCreating || isArchiving || isDeleting;
+
+  // Handlers
+  const handleSessionClick = (sessionId: string) => {
+    navigate(`/sessions/${sessionId}`);
+  };
+
+  const handleCreateSession = async () => {
+    if (!newSessionId.trim()) return;
+
+    try {
+      await createSession({
+        session_id: newSessionId.trim(),
+        title: newSessionTitle.trim() || undefined,
+        description: newSessionDescription.trim() || undefined,
+      });
+      setCreateDialogOpen(false);
+      resetCreateForm();
+    } catch (err) {
+      console.error('Failed to create session:', err);
+    }
+  };
+
+  const resetCreateForm = () => {
+    setNewSessionId('');
+    setNewSessionTitle('');
+    setNewSessionDescription('');
+  };
+
+  const handleArchive = async (sessionId: string) => {
+    try {
+      await archiveSession(sessionId);
+    } catch (err) {
+      console.error('Failed to archive session:', err);
+    }
+  };
+
+  const handleDeleteClick = (sessionId: string) => {
+    setSessionToDelete(sessionId);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!sessionToDelete) return;
+
+    try {
+      await deleteSession(sessionToDelete);
+      setDeleteDialogOpen(false);
+      setSessionToDelete(null);
+    } catch (err) {
+      console.error('Failed to delete session:', err);
+    }
+  };
+
+  const handleClearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const toggleStatusFilter = (status: SessionMetadata['status']) => {
+    setStatusFilter((prev) =>
+      prev.includes(status) ? prev.filter((s) => s !== status) : [...prev, status]
+    );
+  };
+
+  const clearFilters = () => {
+    setStatusFilter([]);
+    setSearchQuery('');
+  };
+
+  const hasActiveFilters = statusFilter.length > 0 || searchQuery.length > 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-foreground">Sessions</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Manage your workflow sessions
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => refetch()}
+            disabled={isFetching}
+          >
+            <RefreshCw className={cn('h-4 w-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button size="sm" onClick={() => setCreateDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Session
+          </Button>
+        </div>
+      </div>
+
+      {/* Error alert */}
+      {error && (
+        <div className="flex items-center gap-2 p-4 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive">
+          <AlertCircle className="h-5 w-5 flex-shrink-0" />
+          <div className="flex-1">
+            <p className="text-sm font-medium">Failed to load sessions</p>
+            <p className="text-xs mt-0.5">{error.message}</p>
+          </div>
+          <Button variant="outline" size="sm" onClick={() => refetch()}>
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        {/* Location tabs */}
+        <Tabs value={locationFilter} onValueChange={(v) => setLocationFilter(v as LocationFilter)}>
+          <TabsList>
+            <TabsTrigger value="active">Active</TabsTrigger>
+            <TabsTrigger value="archived">Archived</TabsTrigger>
+            <TabsTrigger value="all">All</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {/* Search input */}
+        <div className="flex-1 max-w-sm relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search sessions..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 pr-9"
+          />
+          {searchQuery && (
+            <button
+              onClick={handleClearSearch}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        {/* Status filter dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2">
+              <Filter className="h-4 w-4" />
+              Filter
+              {statusFilter.length > 0 && (
+                <Badge variant="secondary" className="ml-1 h-5 min-w-5 px-1">
+                  {statusFilter.length}
+                </Badge>
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>Status</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {(['planning', 'in_progress', 'completed', 'paused'] as const).map((status) => (
+              <DropdownMenuItem
+                key={status}
+                onClick={() => toggleStatusFilter(status)}
+                className="justify-between"
+              >
+                <span className="capitalize">{status.replace('_', ' ')}</span>
+                {statusFilter.includes(status) && (
+                  <span className="text-primary">&#10003;</span>
+                )}
+              </DropdownMenuItem>
+            ))}
+            {hasActiveFilters && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={clearFilters} className="text-destructive">
+                  Clear filters
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Active filters display */}
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm text-muted-foreground">Filters:</span>
+          {statusFilter.map((status) => (
+            <Badge
+              key={status}
+              variant="secondary"
+              className="cursor-pointer"
+              onClick={() => toggleStatusFilter(status)}
+            >
+              {status.replace('_', ' ')}
+              <X className="ml-1 h-3 w-3" />
+            </Badge>
+          ))}
+          {searchQuery && (
+            <Badge
+              variant="secondary"
+              className="cursor-pointer"
+              onClick={handleClearSearch}
+            >
+              Search: {searchQuery}
+              <X className="ml-1 h-3 w-3" />
+            </Badge>
+          )}
+          <Button variant="ghost" size="sm" onClick={clearFilters} className="h-6 text-xs">
+            Clear all
+          </Button>
+        </div>
+      )}
+
+      {/* Sessions grid */}
+      {isLoading ? (
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 9 }).map((_, i) => (
+            <SessionCardSkeleton key={i} />
+          ))}
+        </div>
+      ) : filteredSessions.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 px-4 border border-dashed border-border rounded-lg">
+          <FolderKanban className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-medium text-foreground mb-1">
+            {hasActiveFilters ? 'No sessions match your filters' : 'No sessions found'}
+          </h3>
+          <p className="text-sm text-muted-foreground text-center max-w-sm mb-4">
+            {hasActiveFilters
+              ? 'Try adjusting your filters or search query.'
+              : 'Create a new session to get started with your workflow.'}
+          </p>
+          {hasActiveFilters ? (
+            <Button variant="outline" onClick={clearFilters}>
+              Clear filters
+            </Button>
+          ) : (
+            <Button onClick={() => setCreateDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              New Session
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {filteredSessions.map((session) => (
+            <SessionCard
+              key={session.session_id}
+              session={session}
+              onClick={handleSessionClick}
+              onView={handleSessionClick}
+              onArchive={handleArchive}
+              onDelete={handleDeleteClick}
+              actionsDisabled={isMutating}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Create Session Dialog */}
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Session</DialogTitle>
+            <DialogDescription>
+              Create a new workflow session to track your development tasks.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label htmlFor="sessionId" className="text-sm font-medium">
+                Session ID <span className="text-destructive">*</span>
+              </label>
+              <Input
+                id="sessionId"
+                placeholder="e.g., WFS-feature-auth"
+                value={newSessionId}
+                onChange={(e) => setNewSessionId(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="sessionTitle" className="text-sm font-medium">
+                Title (optional)
+              </label>
+              <Input
+                id="sessionTitle"
+                placeholder="e.g., Authentication System"
+                value={newSessionTitle}
+                onChange={(e) => setNewSessionTitle(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="sessionDescription" className="text-sm font-medium">
+                Description (optional)
+              </label>
+              <Input
+                id="sessionDescription"
+                placeholder="Brief description of the session"
+                value={newSessionDescription}
+                onChange={(e) => setNewSessionDescription(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setCreateDialogOpen(false);
+                resetCreateForm();
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreateSession}
+              disabled={!newSessionId.trim() || isCreating}
+            >
+              {isCreating ? 'Creating...' : 'Create Session'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Session</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this session? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setSessionToDelete(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default SessionsPage;
diff --git a/ccw/frontend/src/pages/SettingsPage.tsx b/ccw/frontend/src/pages/SettingsPage.tsx
new file mode 100644
index 00000000..61d01223
--- /dev/null
+++ b/ccw/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,440 @@
+// ========================================
+// Settings Page
+// ========================================
+// Application settings and configuration with CLI tools management
+
+import { useState, useEffect } from 'react';
+import {
+  Settings,
+  Moon,
+  Sun,
+  Globe,
+  Bell,
+  Shield,
+  Cpu,
+  RefreshCw,
+  Save,
+  RotateCcw,
+  Check,
+  X,
+  Loader2,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { useTheme, useConfig } from '@/hooks';
+import { useConfigStore, selectCliTools, selectDefaultCliTool, selectUserPreferences } from '@/stores/configStore';
+import type { CliToolConfig, UserPreferences } from '@/types/store';
+import { cn } from '@/lib/utils';
+
+// ========== CLI Tool Card Component ==========
+
+interface CliToolCardProps {
+  toolId: string;
+  config: CliToolConfig;
+  isDefault: boolean;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onToggleEnabled: () => void;
+  onSetDefault: () => void;
+  onUpdateModel: (field: 'primaryModel' | 'secondaryModel', value: string) => void;
+}
+
+function CliToolCard({
+  toolId,
+  config,
+  isDefault,
+  isExpanded,
+  onToggleExpand,
+  onToggleEnabled,
+  onSetDefault,
+  onUpdateModel,
+}: CliToolCardProps) {
+  return (
+    <Card className={cn('overflow-hidden', !config.enabled && 'opacity-60')}>
+      {/* Header */}
+      <div
+        className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={onToggleExpand}
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-3">
+            <div className={cn(
+              'p-2 rounded-lg',
+              config.enabled ? 'bg-primary/10' : 'bg-muted'
+            )}>
+              <Cpu className={cn(
+                'w-5 h-5',
+                config.enabled ? 'text-primary' : 'text-muted-foreground'
+              )} />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-foreground capitalize">
+                  {toolId}
+                </span>
+                {isDefault && (
+                  <Badge variant="default" className="text-xs">Default</Badge>
+                )}
+                <Badge variant="outline" className="text-xs">{config.type}</Badge>
+              </div>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {config.primaryModel}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant={config.enabled ? 'default' : 'outline'}
+              size="sm"
+              className="h-8"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleEnabled();
+              }}
+            >
+              {config.enabled ? (
+                <>
+                  <Check className="w-4 h-4 mr-1" />
+                  Enabled
+                </>
+              ) : (
+                <>
+                  <X className="w-4 h-4 mr-1" />
+                  Disabled
+                </>
+              )}
+            </Button>
+            {isExpanded ? (
+              <ChevronUp className="w-5 h-5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-muted-foreground" />
+            )}
+          </div>
+        </div>
+
+        {/* Tags */}
+        {config.tags && config.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-2">
+            {config.tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t border-border p-4 space-y-4 bg-muted/30">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div>
+              <label className="text-sm font-medium text-foreground">Primary Model</label>
+              <Input
+                value={config.primaryModel}
+                onChange={(e) => onUpdateModel('primaryModel', e.target.value)}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium text-foreground">Secondary Model</label>
+              <Input
+                value={config.secondaryModel}
+                onChange={(e) => onUpdateModel('secondaryModel', e.target.value)}
+                className="mt-1"
+              />
+            </div>
+          </div>
+          {!isDefault && config.enabled && (
+            <Button variant="outline" size="sm" onClick={onSetDefault}>
+              Set as Default
+            </Button>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function SettingsPage() {
+  const { theme, setTheme } = useTheme();
+  const cliTools = useConfigStore(selectCliTools);
+  const defaultCliTool = useConfigStore(selectDefaultCliTool);
+  const userPreferences = useConfigStore(selectUserPreferences);
+  const { updateCliTool, setDefaultCliTool, setUserPreferences, resetUserPreferences } = useConfigStore();
+
+  const [expandedTools, setExpandedTools] = useState<Set<string>>(new Set());
+  const [isSaving, setIsSaving] = useState(false);
+
+  const toggleToolExpand = (toolId: string) => {
+    setExpandedTools((prev) => {
+      const next = new Set(prev);
+      if (next.has(toolId)) {
+        next.delete(toolId);
+      } else {
+        next.add(toolId);
+      }
+      return next;
+    });
+  };
+
+  const handleToggleToolEnabled = (toolId: string) => {
+    updateCliTool(toolId, { enabled: !cliTools[toolId].enabled });
+  };
+
+  const handleSetDefaultTool = (toolId: string) => {
+    setDefaultCliTool(toolId);
+  };
+
+  const handleUpdateModel = (toolId: string, field: 'primaryModel' | 'secondaryModel', value: string) => {
+    updateCliTool(toolId, { [field]: value });
+  };
+
+  const handlePreferenceChange = (key: keyof UserPreferences, value: unknown) => {
+    setUserPreferences({ [key]: value });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          <Settings className="w-6 h-6 text-primary" />
+          Settings
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Configure your dashboard preferences and CLI tools
+        </p>
+      </div>
+
+      {/* Appearance Settings */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <Moon className="w-5 h-5" />
+          Appearance
+        </h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Theme</p>
+              <p className="text-sm text-muted-foreground">
+                Choose your preferred color theme
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant={theme === 'light' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('light')}
+              >
+                <Sun className="w-4 h-4 mr-2" />
+                Light
+              </Button>
+              <Button
+                variant={theme === 'dark' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('dark')}
+              >
+                <Moon className="w-4 h-4 mr-2" />
+                Dark
+              </Button>
+              <Button
+                variant={theme === 'system' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setTheme('system')}
+              >
+                System
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Compact View</p>
+              <p className="text-sm text-muted-foreground">
+                Use a more compact layout for lists
+              </p>
+            </div>
+            <Button
+              variant={userPreferences.compactView ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handlePreferenceChange('compactView', !userPreferences.compactView)}
+            >
+              {userPreferences.compactView ? 'On' : 'Off'}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* CLI Tools Configuration */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <Cpu className="w-5 h-5" />
+          CLI Tools
+        </h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Configure available CLI tools and their models. Default tool: <strong className="text-foreground">{defaultCliTool}</strong>
+        </p>
+        <div className="space-y-3">
+          {Object.entries(cliTools).map(([toolId, config]) => (
+            <CliToolCard
+              key={toolId}
+              toolId={toolId}
+              config={config}
+              isDefault={toolId === defaultCliTool}
+              isExpanded={expandedTools.has(toolId)}
+              onToggleExpand={() => toggleToolExpand(toolId)}
+              onToggleEnabled={() => handleToggleToolEnabled(toolId)}
+              onSetDefault={() => handleSetDefaultTool(toolId)}
+              onUpdateModel={(field, value) => handleUpdateModel(toolId, field, value)}
+            />
+          ))}
+        </div>
+      </Card>
+
+      {/* Data Refresh Settings */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <RefreshCw className="w-5 h-5" />
+          Data Refresh
+        </h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Auto Refresh</p>
+              <p className="text-sm text-muted-foreground">
+                Automatically refresh data periodically
+              </p>
+            </div>
+            <Button
+              variant={userPreferences.autoRefresh ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handlePreferenceChange('autoRefresh', !userPreferences.autoRefresh)}
+            >
+              {userPreferences.autoRefresh ? 'Enabled' : 'Disabled'}
+            </Button>
+          </div>
+
+          {userPreferences.autoRefresh && (
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-foreground">Refresh Interval</p>
+                <p className="text-sm text-muted-foreground">
+                  How often to refresh data
+                </p>
+              </div>
+              <div className="flex gap-2">
+                {[15000, 30000, 60000, 120000].map((interval) => (
+                  <Button
+                    key={interval}
+                    variant={userPreferences.refreshInterval === interval ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => handlePreferenceChange('refreshInterval', interval)}
+                  >
+                    {interval / 1000}s
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Notifications */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <Bell className="w-5 h-5" />
+          Notifications
+        </h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Enable Notifications</p>
+              <p className="text-sm text-muted-foreground">
+                Show notifications for workflow events
+              </p>
+            </div>
+            <Button
+              variant={userPreferences.notificationsEnabled ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handlePreferenceChange('notificationsEnabled', !userPreferences.notificationsEnabled)}
+            >
+              {userPreferences.notificationsEnabled ? 'Enabled' : 'Disabled'}
+            </Button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Sound Effects</p>
+              <p className="text-sm text-muted-foreground">
+                Play sound for notifications
+              </p>
+            </div>
+            <Button
+              variant={userPreferences.soundEnabled ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handlePreferenceChange('soundEnabled', !userPreferences.soundEnabled)}
+            >
+              {userPreferences.soundEnabled ? 'On' : 'Off'}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Display Settings */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <Settings className="w-5 h-5" />
+          Display Settings
+        </h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-foreground">Show Completed Tasks</p>
+              <p className="text-sm text-muted-foreground">
+                Display completed tasks in task lists
+              </p>
+            </div>
+            <Button
+              variant={userPreferences.showCompletedTasks ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handlePreferenceChange('showCompletedTasks', !userPreferences.showCompletedTasks)}
+            >
+              {userPreferences.showCompletedTasks ? 'Show' : 'Hide'}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Reset Settings */}
+      <Card className="p-6 border-destructive/50">
+        <h2 className="text-lg font-semibold text-foreground flex items-center gap-2 mb-4">
+          <RotateCcw className="w-5 h-5" />
+          Reset Settings
+        </h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Reset all user preferences to their default values. This cannot be undone.
+        </p>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            if (confirm('Reset all settings to defaults?')) {
+              resetUserPreferences();
+            }
+          }}
+        >
+          <RotateCcw className="w-4 h-4 mr-2" />
+          Reset to Defaults
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+export default SettingsPage;
diff --git a/ccw/frontend/src/pages/SkillsManagerPage.tsx b/ccw/frontend/src/pages/SkillsManagerPage.tsx
new file mode 100644
index 00000000..bd57d71f
--- /dev/null
+++ b/ccw/frontend/src/pages/SkillsManagerPage.tsx
@@ -0,0 +1,279 @@
+// ========================================
+// Skills Manager Page
+// ========================================
+// Browse and manage skills library with search/filter
+
+import { useState, useMemo } from 'react';
+import {
+  Sparkles,
+  Search,
+  Plus,
+  Filter,
+  RefreshCw,
+  Power,
+  PowerOff,
+  Tag,
+  Loader2,
+} from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
+import { SkillCard } from '@/components/shared/SkillCard';
+import { useSkills, useSkillMutations } from '@/hooks';
+import type { Skill } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+// ========== Skill Grid Component ==========
+
+interface SkillGridProps {
+  skills: Skill[];
+  isLoading: boolean;
+  onToggle: (skill: Skill, enabled: boolean) => void;
+  onClick: (skill: Skill) => void;
+  isToggling: boolean;
+  compact?: boolean;
+}
+
+function SkillGrid({ skills, isLoading, onToggle, onClick, isToggling, compact }: SkillGridProps) {
+  if (isLoading) {
+    return (
+      <div className={cn(
+        'grid gap-4',
+        compact ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'
+      )}>
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <div key={i} className="h-48 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (skills.length === 0) {
+    return (
+      <Card className="p-8 text-center">
+        <Sparkles className="w-12 h-12 mx-auto text-muted-foreground/50" />
+        <h3 className="mt-4 text-lg font-medium text-foreground">No skills found</h3>
+        <p className="mt-2 text-muted-foreground">
+          Try adjusting your search or filters.
+        </p>
+      </Card>
+    );
+  }
+
+  return (
+    <div className={cn(
+      'grid gap-4',
+      compact ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'
+    )}>
+      {skills.map((skill) => (
+        <SkillCard
+          key={skill.name}
+          skill={skill}
+          onToggle={onToggle}
+          onClick={onClick}
+          isToggling={isToggling}
+          compact={compact}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ========== Main Page Component ==========
+
+export function SkillsManagerPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<string>('all');
+  const [sourceFilter, setSourceFilter] = useState<string>('all');
+  const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
+  const [viewMode, setViewMode] = useState<'grid' | 'compact'>('grid');
+  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
+
+  const {
+    skills,
+    enabledSkills,
+    categories,
+    skillsByCategory,
+    totalCount,
+    enabledCount,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useSkills({
+    filter: {
+      search: searchQuery || undefined,
+      category: categoryFilter !== 'all' ? categoryFilter : undefined,
+      source: sourceFilter !== 'all' ? sourceFilter as Skill['source'] : undefined,
+      enabledOnly: enabledFilter === 'enabled',
+    },
+  });
+
+  const { toggleSkill, isToggling } = useSkillMutations();
+
+  // Filter skills based on enabled filter
+  const filteredSkills = useMemo(() => {
+    if (enabledFilter === 'disabled') {
+      return skills.filter((s) => !s.enabled);
+    }
+    return skills;
+  }, [skills, enabledFilter]);
+
+  const handleToggle = async (skill: Skill, enabled: boolean) => {
+    await toggleSkill(skill.name, enabled);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+            <Sparkles className="w-6 h-6 text-primary" />
+            Skills Manager
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            Browse, install, and manage Claude Code skills
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
+            <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
+            Refresh
+          </Button>
+          <Button>
+            <Plus className="w-4 h-4 mr-2" />
+            Install Skill
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-5 h-5 text-primary" />
+            <span className="text-2xl font-bold">{totalCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Total Skills</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Power className="w-5 h-5 text-success" />
+            <span className="text-2xl font-bold">{enabledCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Enabled</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <PowerOff className="w-5 h-5 text-muted-foreground" />
+            <span className="text-2xl font-bold">{totalCount - enabledCount}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Disabled</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2">
+            <Tag className="w-5 h-5 text-info" />
+            <span className="text-2xl font-bold">{categories.length}</span>
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">Categories</p>
+        </Card>
+      </div>
+
+      {/* Filters and Search */}
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search skills by name, description, or trigger..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="flex gap-2">
+          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Category" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Categories</SelectItem>
+              {categories.map((cat) => (
+                <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={sourceFilter} onValueChange={setSourceFilter}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Source" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Sources</SelectItem>
+              <SelectItem value="builtin">Built-in</SelectItem>
+              <SelectItem value="custom">Custom</SelectItem>
+              <SelectItem value="community">Community</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={enabledFilter} onValueChange={(v) => setEnabledFilter(v as 'all' | 'enabled' | 'disabled')}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="enabled">Enabled Only</SelectItem>
+              <SelectItem value="disabled">Disabled Only</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Quick Filters */}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant={enabledFilter === 'all' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setEnabledFilter('all')}
+        >
+          All ({totalCount})
+        </Button>
+        <Button
+          variant={enabledFilter === 'enabled' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setEnabledFilter('enabled')}
+        >
+          <Power className="w-4 h-4 mr-1" />
+          Enabled ({enabledCount})
+        </Button>
+        <Button
+          variant={enabledFilter === 'disabled' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setEnabledFilter('disabled')}
+        >
+          <PowerOff className="w-4 h-4 mr-1" />
+          Disabled ({totalCount - enabledCount})
+        </Button>
+        <div className="flex-1" />
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setViewMode(viewMode === 'grid' ? 'compact' : 'grid')}
+        >
+          {viewMode === 'grid' ? 'Compact View' : 'Grid View'}
+        </Button>
+      </div>
+
+      {/* Skills Grid */}
+      <SkillGrid
+        skills={filteredSkills}
+        isLoading={isLoading}
+        onToggle={handleToggle}
+        onClick={setSelectedSkill}
+        isToggling={isToggling}
+        compact={viewMode === 'compact'}
+      />
+    </div>
+  );
+}
+
+export default SkillsManagerPage;
diff --git a/ccw/frontend/src/pages/index.ts b/ccw/frontend/src/pages/index.ts
new file mode 100644
index 00000000..60da04d5
--- /dev/null
+++ b/ccw/frontend/src/pages/index.ts
@@ -0,0 +1,15 @@
+// ========================================
+// Pages Barrel Export
+// ========================================
+// Re-export all page components for convenient imports
+
+export { HomePage } from './HomePage';
+export { SessionsPage } from './SessionsPage';
+export { OrchestratorPage } from './orchestrator';
+export { LoopMonitorPage } from './LoopMonitorPage';
+export { IssueManagerPage } from './IssueManagerPage';
+export { SkillsManagerPage } from './SkillsManagerPage';
+export { CommandsManagerPage } from './CommandsManagerPage';
+export { MemoryPage } from './MemoryPage';
+export { SettingsPage } from './SettingsPage';
+export { HelpPage } from './HelpPage';
diff --git a/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx b/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
new file mode 100644
index 00000000..4648f0d5
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
@@ -0,0 +1,462 @@
+// ========================================
+// Execution Monitor
+// ========================================
+// Real-time execution monitoring panel with logs and controls
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import {
+  Play,
+  Pause,
+  Square,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Terminal,
+  ArrowDownToLine,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { useExecutionStore } from '@/stores/executionStore';
+import {
+  useExecuteFlow,
+  usePauseExecution,
+  useResumeExecution,
+  useStopExecution,
+} from '@/hooks/useFlows';
+import { useFlowStore } from '@/stores';
+import type { ExecutionStatus, LogLevel } from '@/types/execution';
+
+// ========== Helper Functions ==========
+
+function formatElapsedTime(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (hours > 0) {
+    return `${hours}:${String(minutes % 60).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+  }
+  return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
+}
+
+function getStatusBadgeVariant(status: ExecutionStatus): 'default' | 'secondary' | 'destructive' | 'success' | 'warning' {
+  switch (status) {
+    case 'running':
+      return 'default';
+    case 'paused':
+      return 'warning';
+    case 'completed':
+      return 'success';
+    case 'failed':
+      return 'destructive';
+    default:
+      return 'secondary';
+  }
+}
+
+function getStatusIcon(status: ExecutionStatus) {
+  switch (status) {
+    case 'running':
+      return <Loader2 className="h-3 w-3 animate-spin" />;
+    case 'paused':
+      return <Pause className="h-3 w-3" />;
+    case 'completed':
+      return <CheckCircle2 className="h-3 w-3" />;
+    case 'failed':
+      return <AlertCircle className="h-3 w-3" />;
+    default:
+      return <Clock className="h-3 w-3" />;
+  }
+}
+
+function getLogLevelColor(level: LogLevel): string {
+  switch (level) {
+    case 'error':
+      return 'text-red-500';
+    case 'warn':
+      return 'text-yellow-500';
+    case 'info':
+      return 'text-blue-500';
+    case 'debug':
+      return 'text-gray-400';
+    default:
+      return 'text-foreground';
+  }
+}
+
+// ========== Component ==========
+
+interface ExecutionMonitorProps {
+  className?: string;
+}
+
+export function ExecutionMonitor({ className }: ExecutionMonitorProps) {
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  const [isUserScrolling, setIsUserScrolling] = useState(false);
+
+  // Execution store state
+  const currentExecution = useExecutionStore((state) => state.currentExecution);
+  const logs = useExecutionStore((state) => state.logs);
+  const nodeStates = useExecutionStore((state) => state.nodeStates);
+  const isMonitorExpanded = useExecutionStore((state) => state.isMonitorExpanded);
+  const autoScrollLogs = useExecutionStore((state) => state.autoScrollLogs);
+  const setMonitorExpanded = useExecutionStore((state) => state.setMonitorExpanded);
+  const setAutoScrollLogs = useExecutionStore((state) => state.setAutoScrollLogs);
+  const startExecution = useExecutionStore((state) => state.startExecution);
+
+  // Local state for elapsed time (calculated from startedAt)
+  const [elapsedMs, setElapsedMs] = useState(0);
+
+  // Flow store state
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const nodes = useFlowStore((state) => state.nodes);
+
+  // Mutations
+  const executeFlow = useExecuteFlow();
+  const pauseExecution = usePauseExecution();
+  const resumeExecution = useResumeExecution();
+  const stopExecution = useStopExecution();
+
+  // Update elapsed time every second while running (calculated from startedAt)
+  useEffect(() => {
+    if (currentExecution?.status === 'running' && currentExecution.startedAt) {
+      const calculateElapsed = () => {
+        const startTime = new Date(currentExecution.startedAt).getTime();
+        setElapsedMs(Date.now() - startTime);
+      };
+
+      // Calculate immediately
+      calculateElapsed();
+
+      // Update every second
+      const interval = setInterval(calculateElapsed, 1000);
+      return () => clearInterval(interval);
+    } else if (currentExecution?.completedAt) {
+      // Use final elapsed time from store when completed
+      setElapsedMs(currentExecution.elapsedMs);
+    } else if (!currentExecution) {
+      setElapsedMs(0);
+    }
+  }, [currentExecution?.status, currentExecution?.startedAt, currentExecution?.completedAt, currentExecution?.elapsedMs]);
+
+  // Auto-scroll logs
+  useEffect(() => {
+    if (autoScrollLogs && !isUserScrolling && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, autoScrollLogs, isUserScrolling]);
+
+  // Handle scroll to detect user scrolling
+  const handleScroll = useCallback(() => {
+    if (!logsContainerRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+
+    setIsUserScrolling(!isAtBottom);
+  }, []);
+
+  // Scroll to bottom handler
+  const scrollToBottom = useCallback(() => {
+    logsEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    setIsUserScrolling(false);
+  }, []);
+
+  // Handle execute
+  const handleExecute = useCallback(async () => {
+    if (!currentFlow) return;
+
+    try {
+      const result = await executeFlow.mutateAsync(currentFlow.id);
+      startExecution(result.execId, currentFlow.id);
+    } catch (error) {
+      console.error('Failed to execute flow:', error);
+    }
+  }, [currentFlow, executeFlow, startExecution]);
+
+  // Handle pause
+  const handlePause = useCallback(async () => {
+    if (!currentExecution) return;
+    try {
+      await pauseExecution.mutateAsync(currentExecution.execId);
+    } catch (error) {
+      console.error('Failed to pause execution:', error);
+    }
+  }, [currentExecution, pauseExecution]);
+
+  // Handle resume
+  const handleResume = useCallback(async () => {
+    if (!currentExecution) return;
+    try {
+      await resumeExecution.mutateAsync(currentExecution.execId);
+    } catch (error) {
+      console.error('Failed to resume execution:', error);
+    }
+  }, [currentExecution, resumeExecution]);
+
+  // Handle stop
+  const handleStop = useCallback(async () => {
+    if (!currentExecution) return;
+    try {
+      await stopExecution.mutateAsync(currentExecution.execId);
+    } catch (error) {
+      console.error('Failed to stop execution:', error);
+    }
+  }, [currentExecution, stopExecution]);
+
+  // Calculate node progress
+  const completedNodes = Object.values(nodeStates).filter(
+    (state) => state.status === 'completed'
+  ).length;
+  const totalNodes = nodes.length;
+  const progressPercent = totalNodes > 0 ? (completedNodes / totalNodes) * 100 : 0;
+
+  const isExecuting = currentExecution?.status === 'running';
+  const isPaused = currentExecution?.status === 'paused';
+  const canExecute = currentFlow && !isExecuting && !isPaused;
+
+  return (
+    <div
+      className={cn(
+        'border-t border-border bg-card transition-all duration-300',
+        isMonitorExpanded ? 'h-64' : 'h-12',
+        className
+      )}
+    >
+      {/* Header */}
+      <div
+        className="flex items-center justify-between px-4 h-12 border-b border-border cursor-pointer"
+        onClick={() => setMonitorExpanded(!isMonitorExpanded)}
+      >
+        <div className="flex items-center gap-3">
+          <Terminal className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Execution Monitor</span>
+
+          {currentExecution && (
+            <>
+              <Badge variant={getStatusBadgeVariant(currentExecution.status)}>
+                <span className="flex items-center gap-1">
+                  {getStatusIcon(currentExecution.status)}
+                  {currentExecution.status}
+                </span>
+              </Badge>
+
+              <span className="text-sm text-muted-foreground flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {formatElapsedTime(elapsedMs)}
+              </span>
+
+              {totalNodes > 0 && (
+                <span className="text-sm text-muted-foreground">
+                  {completedNodes}/{totalNodes} nodes
+                </span>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Control buttons */}
+          {canExecute && (
+            <Button
+              size="sm"
+              variant="default"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleExecute();
+              }}
+              disabled={executeFlow.isPending}
+            >
+              <Play className="h-4 w-4 mr-1" />
+              Execute
+            </Button>
+          )}
+
+          {isExecuting && (
+            <>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePause();
+                }}
+                disabled={pauseExecution.isPending}
+              >
+                <Pause className="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleStop();
+                }}
+                disabled={stopExecution.isPending}
+              >
+                <Square className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+
+          {isPaused && (
+            <>
+              <Button
+                size="sm"
+                variant="default"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleResume();
+                }}
+                disabled={resumeExecution.isPending}
+              >
+                <Play className="h-4 w-4 mr-1" />
+                Resume
+              </Button>
+              <Button
+                size="sm"
+                variant="destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleStop();
+                }}
+                disabled={stopExecution.isPending}
+              >
+                <Square className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+
+          {/* Expand/collapse button */}
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation();
+              setMonitorExpanded(!isMonitorExpanded);
+            }}
+          >
+            {isMonitorExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronUp className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isMonitorExpanded && (
+        <div className="flex h-[calc(100%-3rem)]">
+          {/* Progress bar */}
+          {currentExecution && (
+            <div className="absolute top-12 left-0 right-0 h-1 bg-muted">
+              <div
+                className="h-full bg-primary transition-all duration-300"
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+          )}
+
+          {/* Logs panel */}
+          <div className="flex-1 flex flex-col relative">
+            {/* Logs container */}
+            <div
+              ref={logsContainerRef}
+              className="flex-1 overflow-y-auto p-3 font-mono text-xs"
+              onScroll={handleScroll}
+            >
+              {logs.length === 0 ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  {currentExecution
+                    ? 'Waiting for logs...'
+                    : 'Select a flow and click Execute to start'}
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {logs.map((log, index) => (
+                    <div key={index} className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">
+                        {new Date(log.timestamp).toLocaleTimeString()}
+                      </span>
+                      <span
+                        className={cn(
+                          'uppercase w-12 shrink-0',
+                          getLogLevelColor(log.level)
+                        )}
+                      >
+                        [{log.level}]
+                      </span>
+                      {log.nodeId && (
+                        <span className="text-purple-500 shrink-0">
+                          [{log.nodeId}]
+                        </span>
+                      )}
+                      <span className="text-foreground break-all">
+                        {log.message}
+                      </span>
+                    </div>
+                  ))}
+                  <div ref={logsEndRef} />
+                </div>
+              )}
+            </div>
+
+            {/* Scroll to bottom button */}
+            {isUserScrolling && logs.length > 0 && (
+              <Button
+                size="sm"
+                variant="secondary"
+                className="absolute bottom-3 right-3"
+                onClick={scrollToBottom}
+              >
+                <ArrowDownToLine className="h-4 w-4 mr-1" />
+                Scroll to bottom
+              </Button>
+            )}
+          </div>
+
+          {/* Node states panel (collapsed by default) */}
+          {currentExecution && Object.keys(nodeStates).length > 0 && (
+            <div className="w-48 border-l border-border p-2 overflow-y-auto">
+              <div className="text-xs font-medium text-muted-foreground mb-2">
+                Node Status
+              </div>
+              <div className="space-y-1">
+                {Object.entries(nodeStates).map(([nodeId, state]) => (
+                  <div
+                    key={nodeId}
+                    className="flex items-center gap-2 text-xs p-1 rounded hover:bg-muted"
+                  >
+                    {state.status === 'running' && (
+                      <Loader2 className="h-3 w-3 animate-spin text-blue-500" />
+                    )}
+                    {state.status === 'completed' && (
+                      <CheckCircle2 className="h-3 w-3 text-green-500" />
+                    )}
+                    {state.status === 'failed' && (
+                      <AlertCircle className="h-3 w-3 text-red-500" />
+                    )}
+                    {state.status === 'pending' && (
+                      <Clock className="h-3 w-3 text-gray-400" />
+                    )}
+                    <span className="truncate" title={nodeId}>
+                      {nodeId.slice(0, 20)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ExecutionMonitor;
diff --git a/ccw/frontend/src/pages/orchestrator/FlowCanvas.tsx b/ccw/frontend/src/pages/orchestrator/FlowCanvas.tsx
new file mode 100644
index 00000000..0c8b884d
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/FlowCanvas.tsx
@@ -0,0 +1,199 @@
+// ========================================
+// Flow Canvas Component
+// ========================================
+// React Flow canvas with minimap, controls, and background
+
+import { useCallback, useRef, DragEvent } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
+  Background,
+  BackgroundVariant,
+  Connection,
+  NodeChange,
+  EdgeChange,
+  applyNodeChanges,
+  applyEdgeChanges,
+  Node,
+  Edge,
+  ReactFlowProvider,
+  useReactFlow,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { useFlowStore } from '@/stores';
+import type { FlowNodeType, FlowNode, FlowEdge } from '@/types/flow';
+import { NODE_TYPE_CONFIGS } from '@/types/flow';
+
+// Custom node types (enhanced with execution status in IMPL-A8)
+import { nodeTypes } from './nodes';
+
+interface FlowCanvasProps {
+  className?: string;
+}
+
+function FlowCanvasInner({ className }: FlowCanvasProps) {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const { screenToFlowPosition } = useReactFlow();
+
+  // Get state and actions from store
+  const nodes = useFlowStore((state) => state.nodes);
+  const edges = useFlowStore((state) => state.edges);
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const setEdges = useFlowStore((state) => state.setEdges);
+  const addNode = useFlowStore((state) => state.addNode);
+  const setSelectedNodeId = useFlowStore((state) => state.setSelectedNodeId);
+  const setSelectedEdgeId = useFlowStore((state) => state.setSelectedEdgeId);
+  const markModified = useFlowStore((state) => state.markModified);
+
+  // Handle node changes (position, selection, etc.)
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      const updatedNodes = applyNodeChanges(changes, nodes as Node[]);
+      setNodes(updatedNodes as FlowNode[]);
+    },
+    [nodes, setNodes]
+  );
+
+  // Handle edge changes
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const updatedEdges = applyEdgeChanges(changes, edges as Edge[]);
+      setEdges(updatedEdges as FlowEdge[]);
+    },
+    [edges, setEdges]
+  );
+
+  // Handle new edge connections
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      if (connection.source && connection.target) {
+        const newEdge: FlowEdge = {
+          id: `edge-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          source: connection.source,
+          target: connection.target,
+          sourceHandle: connection.sourceHandle ?? undefined,
+          targetHandle: connection.targetHandle ?? undefined,
+        };
+        setEdges([...edges, newEdge]);
+        markModified();
+      }
+    },
+    [edges, setEdges, markModified]
+  );
+
+  // Handle node selection
+  const onNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      setSelectedNodeId(node.id);
+    },
+    [setSelectedNodeId]
+  );
+
+  // Handle edge selection
+  const onEdgeClick = useCallback(
+    (_event: React.MouseEvent, edge: Edge) => {
+      setSelectedEdgeId(edge.id);
+    },
+    [setSelectedEdgeId]
+  );
+
+  // Handle canvas click (deselect)
+  const onPaneClick = useCallback(() => {
+    setSelectedNodeId(null);
+    setSelectedEdgeId(null);
+  }, [setSelectedNodeId, setSelectedEdgeId]);
+
+  // Handle drag over for node palette drop
+  const onDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  // Handle drop from node palette
+  const onDrop = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const nodeType = event.dataTransfer.getData('application/reactflow-node-type') as FlowNodeType;
+      if (!nodeType || !NODE_TYPE_CONFIGS[nodeType]) {
+        return;
+      }
+
+      // Get drop position in flow coordinates
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      // Add node at drop position
+      addNode(nodeType, position);
+    },
+    [screenToFlowPosition, addNode]
+  );
+
+  return (
+    <div ref={reactFlowWrapper} className={`w-full h-full ${className || ''}`}>
+      <ReactFlow
+        nodes={nodes as Node[]}
+        edges={edges as Edge[]}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        onEdgeClick={onEdgeClick}
+        onPaneClick={onPaneClick}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        nodeTypes={nodeTypes}
+        fitView
+        snapToGrid
+        snapGrid={[15, 15]}
+        deleteKeyCode={['Backspace', 'Delete']}
+        className="bg-background"
+      >
+        <Controls
+          className="bg-card border border-border rounded-md shadow-sm"
+          showZoom={true}
+          showFitView={true}
+          showInteractive={true}
+        />
+        <MiniMap
+          className="bg-card border border-border rounded-md shadow-sm"
+          nodeColor={(node) => {
+            switch (node.type) {
+              case 'slash-command':
+                return '#3b82f6'; // blue-500
+              case 'file-operation':
+                return '#22c55e'; // green-500
+              case 'conditional':
+                return '#f59e0b'; // amber-500
+              case 'parallel':
+                return '#a855f7'; // purple-500
+              default:
+                return '#6b7280'; // gray-500
+            }
+          }}
+          maskColor="rgba(0, 0, 0, 0.1)"
+        />
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          className="bg-muted/20"
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function FlowCanvas(props: FlowCanvasProps) {
+  return (
+    <ReactFlowProvider>
+      <FlowCanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}
+
+export default FlowCanvas;
diff --git a/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx b/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
new file mode 100644
index 00000000..4f63b462
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
@@ -0,0 +1,308 @@
+// ========================================
+// Flow Toolbar Component
+// ========================================
+// Toolbar for flow operations: New, Save, Load, Export
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+  Plus,
+  Save,
+  FolderOpen,
+  Download,
+  Play,
+  Trash2,
+  Copy,
+  Workflow,
+  Loader2,
+  ChevronDown,
+  Library,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useFlowStore, toast } from '@/stores';
+import type { Flow } from '@/types/flow';
+
+interface FlowToolbarProps {
+  className?: string;
+  onOpenTemplateLibrary?: () => void;
+}
+
+export function FlowToolbar({ className, onOpenTemplateLibrary }: FlowToolbarProps) {
+  const [isFlowListOpen, setIsFlowListOpen] = useState(false);
+  const [flowName, setFlowName] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Flow store
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const isModified = useFlowStore((state) => state.isModified);
+  const flows = useFlowStore((state) => state.flows);
+  const isLoadingFlows = useFlowStore((state) => state.isLoadingFlows);
+  const createFlow = useFlowStore((state) => state.createFlow);
+  const saveFlow = useFlowStore((state) => state.saveFlow);
+  const loadFlow = useFlowStore((state) => state.loadFlow);
+  const deleteFlow = useFlowStore((state) => state.deleteFlow);
+  const duplicateFlow = useFlowStore((state) => state.duplicateFlow);
+  const fetchFlows = useFlowStore((state) => state.fetchFlows);
+
+  // Load flows on mount
+  useEffect(() => {
+    fetchFlows();
+  }, [fetchFlows]);
+
+  // Sync flow name with current flow
+  useEffect(() => {
+    setFlowName(currentFlow?.name || '');
+  }, [currentFlow?.name]);
+
+  // Handle new flow
+  const handleNew = useCallback(() => {
+    const newFlow = createFlow('Untitled Flow', 'A new workflow');
+    setFlowName(newFlow.name);
+    toast.success('Flow Created', 'New flow created successfully');
+  }, [createFlow]);
+
+  // Handle save
+  const handleSave = useCallback(async () => {
+    if (!currentFlow) {
+      toast.error('No Flow', 'Create a flow first before saving');
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      // Update flow name if changed
+      if (flowName && flowName !== currentFlow.name) {
+        useFlowStore.setState((state) => ({
+          currentFlow: state.currentFlow
+            ? { ...state.currentFlow, name: flowName }
+            : null,
+        }));
+      }
+
+      const saved = await saveFlow();
+      if (saved) {
+        toast.success('Flow Saved', `"${flowName || currentFlow.name}" saved successfully`);
+      } else {
+        toast.error('Save Failed', 'Could not save the flow');
+      }
+    } catch (err) {
+      toast.error('Save Error', 'An error occurred while saving');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [currentFlow, flowName, saveFlow]);
+
+  // Handle load
+  const handleLoad = useCallback(
+    async (flow: Flow) => {
+      const loaded = await loadFlow(flow.id);
+      if (loaded) {
+        setIsFlowListOpen(false);
+        toast.success('Flow Loaded', `"${flow.name}" loaded successfully`);
+      } else {
+        toast.error('Load Failed', 'Could not load the flow');
+      }
+    },
+    [loadFlow]
+  );
+
+  // Handle delete
+  const handleDelete = useCallback(
+    async (flow: Flow, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!confirm(`Delete "${flow.name}"? This cannot be undone.`)) return;
+
+      const deleted = await deleteFlow(flow.id);
+      if (deleted) {
+        toast.success('Flow Deleted', `"${flow.name}" deleted successfully`);
+      } else {
+        toast.error('Delete Failed', 'Could not delete the flow');
+      }
+    },
+    [deleteFlow]
+  );
+
+  // Handle duplicate
+  const handleDuplicate = useCallback(
+    async (flow: Flow, e: React.MouseEvent) => {
+      e.stopPropagation();
+      const duplicated = await duplicateFlow(flow.id);
+      if (duplicated) {
+        toast.success('Flow Duplicated', `"${duplicated.name}" created`);
+      } else {
+        toast.error('Duplicate Failed', 'Could not duplicate the flow');
+      }
+    },
+    [duplicateFlow]
+  );
+
+  // Handle export
+  const handleExport = useCallback(() => {
+    if (!currentFlow) {
+      toast.error('No Flow', 'Create or load a flow first');
+      return;
+    }
+
+    const nodes = useFlowStore.getState().nodes;
+    const edges = useFlowStore.getState().edges;
+    const exportData = {
+      ...currentFlow,
+      nodes,
+      edges,
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${currentFlow.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    toast.success('Flow Exported', 'Flow exported as JSON file');
+  }, [currentFlow]);
+
+  return (
+    <div className={cn('flex items-center gap-3 p-3 bg-card border-b border-border', className)}>
+      {/* Flow Icon and Name */}
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <Workflow className="w-5 h-5 text-primary flex-shrink-0" />
+        <Input
+          value={flowName}
+          onChange={(e) => setFlowName(e.target.value)}
+          placeholder="Flow name"
+          className="max-w-[200px] h-8 text-sm"
+        />
+        {isModified && (
+          <span className="text-xs text-amber-500 flex-shrink-0">Unsaved changes</span>
+        )}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="sm" onClick={handleNew}>
+          <Plus className="w-4 h-4 mr-1" />
+          New
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleSave}
+          disabled={isSaving || !currentFlow}
+        >
+          {isSaving ? (
+            <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+          ) : (
+            <Save className="w-4 h-4 mr-1" />
+          )}
+          Save
+        </Button>
+
+        {/* Flow List Dropdown */}
+        <div className="relative">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setIsFlowListOpen(!isFlowListOpen)}
+          >
+            <FolderOpen className="w-4 h-4 mr-1" />
+            Load
+            <ChevronDown className="w-3 h-3 ml-1" />
+          </Button>
+
+          {isFlowListOpen && (
+            <>
+              {/* Backdrop */}
+              <div
+                className="fixed inset-0 z-40"
+                onClick={() => setIsFlowListOpen(false)}
+              />
+
+              {/* Dropdown */}
+              <div className="absolute top-full right-0 mt-1 w-72 bg-card border border-border rounded-lg shadow-lg z-50 overflow-hidden">
+                <div className="px-3 py-2 border-b border-border bg-muted/50">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Saved Flows ({flows.length})
+                  </span>
+                </div>
+
+                <div className="max-h-64 overflow-y-auto">
+                  {isLoadingFlows ? (
+                    <div className="p-4 text-center text-muted-foreground">
+                      <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />
+                      Loading...
+                    </div>
+                  ) : flows.length === 0 ? (
+                    <div className="p-4 text-center text-muted-foreground">
+                      No saved flows
+                    </div>
+                  ) : (
+                    flows.map((flow) => (
+                      <div
+                        key={flow.id}
+                        onClick={() => handleLoad(flow)}
+                        className={cn(
+                          'flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors',
+                          currentFlow?.id === flow.id && 'bg-primary/10'
+                        )}
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="text-sm font-medium text-foreground truncate">
+                            {flow.name}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {new Date(flow.updated_at).toLocaleDateString()}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-1 ml-2">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                            onClick={(e) => handleDuplicate(flow, e)}
+                            title="Duplicate"
+                          >
+                            <Copy className="w-3 h-3" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-destructive hover:text-destructive"
+                            onClick={(e) => handleDelete(flow, e)}
+                            title="Delete"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        <Button variant="outline" size="sm" onClick={handleExport} disabled={!currentFlow}>
+          <Download className="w-4 h-4 mr-1" />
+          Export
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={onOpenTemplateLibrary}>
+          <Library className="w-4 h-4 mr-1" />
+          Templates
+        </Button>
+
+        <div className="w-px h-6 bg-border" />
+      </div>
+    </div>
+  );
+}
+
+export default FlowToolbar;
diff --git a/ccw/frontend/src/pages/orchestrator/NodePalette.tsx b/ccw/frontend/src/pages/orchestrator/NodePalette.tsx
new file mode 100644
index 00000000..81f9754b
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/NodePalette.tsx
@@ -0,0 +1,154 @@
+// ========================================
+// Node Palette Component
+// ========================================
+// Draggable node palette for creating new nodes
+
+import { DragEvent, useState } from 'react';
+import { Terminal, FileText, GitBranch, GitMerge, ChevronDown, ChevronRight, GripVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { useFlowStore } from '@/stores';
+import type { FlowNodeType } from '@/types/flow';
+import { NODE_TYPE_CONFIGS } from '@/types/flow';
+
+// Icon mapping for node types
+const nodeIcons: Record<FlowNodeType, React.FC<{ className?: string }>> = {
+  'slash-command': Terminal,
+  'file-operation': FileText,
+  conditional: GitBranch,
+  parallel: GitMerge,
+};
+
+// Color mapping for node types
+const nodeColors: Record<FlowNodeType, string> = {
+  'slash-command': 'bg-blue-500 hover:bg-blue-600',
+  'file-operation': 'bg-green-500 hover:bg-green-600',
+  conditional: 'bg-amber-500 hover:bg-amber-600',
+  parallel: 'bg-purple-500 hover:bg-purple-600',
+};
+
+const nodeBorderColors: Record<FlowNodeType, string> = {
+  'slash-command': 'border-blue-500',
+  'file-operation': 'border-green-500',
+  conditional: 'border-amber-500',
+  parallel: 'border-purple-500',
+};
+
+interface NodePaletteProps {
+  className?: string;
+}
+
+interface NodeTypeCardProps {
+  type: FlowNodeType;
+}
+
+function NodeTypeCard({ type }: NodeTypeCardProps) {
+  const config = NODE_TYPE_CONFIGS[type];
+  const Icon = nodeIcons[type];
+
+  // Handle drag start
+  const onDragStart = (event: DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('application/reactflow-node-type', type);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div
+      draggable
+      onDragStart={onDragStart}
+      className={cn(
+        'group flex items-center gap-3 p-3 rounded-lg border-2 bg-card cursor-grab transition-all',
+        'hover:shadow-md hover:scale-[1.02] active:cursor-grabbing active:scale-[0.98]',
+        nodeBorderColors[type]
+      )}
+    >
+      <div className={cn('p-2 rounded-md text-white', nodeColors[type])}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-foreground">{config.label}</div>
+        <div className="text-xs text-muted-foreground truncate">{config.description}</div>
+      </div>
+      <GripVertical className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+    </div>
+  );
+}
+
+export function NodePalette({ className }: NodePaletteProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const isPaletteOpen = useFlowStore((state) => state.isPaletteOpen);
+  const setIsPaletteOpen = useFlowStore((state) => state.setIsPaletteOpen);
+
+  if (!isPaletteOpen) {
+    return (
+      <div className={cn('w-10 bg-card border-r border-border flex flex-col items-center py-4', className)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsPaletteOpen(true)}
+          title="Open node palette"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('w-64 bg-card border-r border-border flex flex-col', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h3 className="font-semibold text-foreground">Node Palette</h3>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={() => setIsPaletteOpen(false)}
+          title="Collapse palette"
+        >
+          <ChevronDown className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Instructions */}
+      <div className="px-4 py-2 text-xs text-muted-foreground bg-muted/50 border-b border-border">
+        Drag nodes onto the canvas to add them to your workflow
+      </div>
+
+      {/* Node Type Categories */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Execution Nodes */}
+        <div>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="flex items-center gap-2 w-full text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2"
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <ChevronRight className="w-3 h-3" />
+            )}
+            Node Types
+          </button>
+
+          {isExpanded && (
+            <div className="space-y-2">
+              {(Object.keys(NODE_TYPE_CONFIGS) as FlowNodeType[]).map((type) => (
+                <NodeTypeCard key={type} type={type} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="px-4 py-3 border-t border-border bg-muted/30">
+        <div className="text-xs text-muted-foreground">
+          <span className="font-medium">Tip:</span> Connect nodes by dragging from output to input handles
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NodePalette;
diff --git a/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx b/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
new file mode 100644
index 00000000..d9e9afca
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
@@ -0,0 +1,70 @@
+// ========================================
+// Orchestrator Page
+// ========================================
+// Visual workflow editor with React Flow, drag-drop node palette, and property panel
+
+import { useEffect, useState, useCallback } from 'react';
+import { useFlowStore } from '@/stores';
+import { FlowCanvas } from './FlowCanvas';
+import { NodePalette } from './NodePalette';
+import { PropertyPanel } from './PropertyPanel';
+import { FlowToolbar } from './FlowToolbar';
+import { ExecutionMonitor } from './ExecutionMonitor';
+import { TemplateLibrary } from './TemplateLibrary';
+import { useWebSocket } from '@/hooks/useWebSocket';
+
+export function OrchestratorPage() {
+  const fetchFlows = useFlowStore((state) => state.fetchFlows);
+  const [isTemplateLibraryOpen, setIsTemplateLibraryOpen] = useState(false);
+
+  // Initialize WebSocket connection for real-time updates
+  const { isConnected, reconnect } = useWebSocket({
+    enabled: true,
+    onMessage: (message) => {
+      // Additional message handling can be added here if needed
+      console.log('[Orchestrator] WebSocket message:', message.type);
+    },
+  });
+
+  // Load flows on mount
+  useEffect(() => {
+    fetchFlows();
+  }, [fetchFlows]);
+
+  // Handle open template library
+  const handleOpenTemplateLibrary = useCallback(() => {
+    setIsTemplateLibraryOpen(true);
+  }, []);
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <FlowToolbar onOpenTemplateLibrary={handleOpenTemplateLibrary} />
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Node Palette (Left) */}
+        <NodePalette />
+
+        {/* Flow Canvas (Center) */}
+        <div className="flex-1 relative">
+          <FlowCanvas className="absolute inset-0" />
+        </div>
+
+        {/* Property Panel (Right) */}
+        <PropertyPanel />
+      </div>
+
+      {/* Execution Monitor (Bottom) */}
+      <ExecutionMonitor />
+
+      {/* Template Library Dialog */}
+      <TemplateLibrary
+        open={isTemplateLibraryOpen}
+        onOpenChange={setIsTemplateLibraryOpen}
+      />
+    </div>
+  );
+}
+
+export default OrchestratorPage;
diff --git a/ccw/frontend/src/pages/orchestrator/PropertyPanel.tsx b/ccw/frontend/src/pages/orchestrator/PropertyPanel.tsx
new file mode 100644
index 00000000..23d67740
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/PropertyPanel.tsx
@@ -0,0 +1,472 @@
+// ========================================
+// Property Panel Component
+// ========================================
+// Dynamic property editor for selected nodes
+
+import { useCallback } from 'react';
+import { Settings, X, Terminal, FileText, GitBranch, GitMerge, Trash2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { useFlowStore } from '@/stores';
+import type {
+  FlowNodeType,
+  SlashCommandNodeData,
+  FileOperationNodeData,
+  ConditionalNodeData,
+  ParallelNodeData,
+  NodeData,
+} from '@/types/flow';
+
+interface PropertyPanelProps {
+  className?: string;
+}
+
+// Icon mapping for node types
+const nodeIcons: Record<FlowNodeType, React.FC<{ className?: string }>> = {
+  'slash-command': Terminal,
+  'file-operation': FileText,
+  conditional: GitBranch,
+  parallel: GitMerge,
+};
+
+// Slash Command Property Editor
+function SlashCommandProperties({
+  data,
+  onChange,
+}: {
+  data: SlashCommandNodeData;
+  onChange: (updates: Partial<SlashCommandNodeData>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Label</label>
+        <Input
+          value={data.label || ''}
+          onChange={(e) => onChange({ label: e.target.value })}
+          placeholder="Node label"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Command</label>
+        <Input
+          value={data.command || ''}
+          onChange={(e) => onChange({ command: e.target.value })}
+          placeholder="/command-name"
+          className="font-mono"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Arguments</label>
+        <Input
+          value={data.args || ''}
+          onChange={(e) => onChange({ args: e.target.value })}
+          placeholder="Command arguments"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Execution Mode</label>
+        <select
+          value={data.execution?.mode || 'analysis'}
+          onChange={(e) =>
+            onChange({
+              execution: { ...data.execution, mode: e.target.value as 'analysis' | 'write' },
+            })
+          }
+          className="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground text-sm"
+        >
+          <option value="analysis">Analysis (Read-only)</option>
+          <option value="write">Write (Modify files)</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">On Error</label>
+        <select
+          value={data.onError || 'stop'}
+          onChange={(e) => onChange({ onError: e.target.value as 'continue' | 'stop' | 'retry' })}
+          className="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground text-sm"
+        >
+          <option value="stop">Stop execution</option>
+          <option value="continue">Continue</option>
+          <option value="retry">Retry</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Timeout (ms)</label>
+        <Input
+          type="number"
+          value={data.execution?.timeout || ''}
+          onChange={(e) =>
+            onChange({
+              execution: {
+                ...data.execution,
+                mode: data.execution?.mode || 'analysis',
+                timeout: e.target.value ? parseInt(e.target.value) : undefined,
+              },
+            })
+          }
+          placeholder="60000"
+        />
+      </div>
+    </div>
+  );
+}
+
+// File Operation Property Editor
+function FileOperationProperties({
+  data,
+  onChange,
+}: {
+  data: FileOperationNodeData;
+  onChange: (updates: Partial<FileOperationNodeData>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Label</label>
+        <Input
+          value={data.label || ''}
+          onChange={(e) => onChange({ label: e.target.value })}
+          placeholder="Node label"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Operation</label>
+        <select
+          value={data.operation || 'read'}
+          onChange={(e) =>
+            onChange({
+              operation: e.target.value as FileOperationNodeData['operation'],
+            })
+          }
+          className="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground text-sm"
+        >
+          <option value="read">Read</option>
+          <option value="write">Write</option>
+          <option value="append">Append</option>
+          <option value="delete">Delete</option>
+          <option value="copy">Copy</option>
+          <option value="move">Move</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Path</label>
+        <Input
+          value={data.path || ''}
+          onChange={(e) => onChange({ path: e.target.value })}
+          placeholder="/path/to/file"
+          className="font-mono"
+        />
+      </div>
+
+      {(data.operation === 'write' || data.operation === 'append') && (
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1">Content</label>
+          <textarea
+            value={data.content || ''}
+            onChange={(e) => onChange({ content: e.target.value })}
+            placeholder="File content..."
+            className="w-full h-24 px-3 py-2 rounded-md border border-border bg-background text-foreground text-sm resize-none font-mono"
+          />
+        </div>
+      )}
+
+      {(data.operation === 'copy' || data.operation === 'move') && (
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1">Destination Path</label>
+          <Input
+            value={data.destinationPath || ''}
+            onChange={(e) => onChange({ destinationPath: e.target.value })}
+            placeholder="/path/to/destination"
+            className="font-mono"
+          />
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Output Variable</label>
+        <Input
+          value={data.outputVariable || ''}
+          onChange={(e) => onChange({ outputVariable: e.target.value })}
+          placeholder="variableName"
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="addToContext"
+          checked={data.addToContext || false}
+          onChange={(e) => onChange({ addToContext: e.target.checked })}
+          className="rounded border-border"
+        />
+        <label htmlFor="addToContext" className="text-sm text-foreground">
+          Add to context
+        </label>
+      </div>
+    </div>
+  );
+}
+
+// Conditional Property Editor
+function ConditionalProperties({
+  data,
+  onChange,
+}: {
+  data: ConditionalNodeData;
+  onChange: (updates: Partial<ConditionalNodeData>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Label</label>
+        <Input
+          value={data.label || ''}
+          onChange={(e) => onChange({ label: e.target.value })}
+          placeholder="Node label"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Condition</label>
+        <textarea
+          value={data.condition || ''}
+          onChange={(e) => onChange({ condition: e.target.value })}
+          placeholder="e.g., result.success === true"
+          className="w-full h-20 px-3 py-2 rounded-md border border-border bg-background text-foreground text-sm resize-none font-mono"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1">True Label</label>
+          <Input
+            value={data.trueLabel || ''}
+            onChange={(e) => onChange({ trueLabel: e.target.value })}
+            placeholder="True"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1">False Label</label>
+          <Input
+            value={data.falseLabel || ''}
+            onChange={(e) => onChange({ falseLabel: e.target.value })}
+            placeholder="False"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Parallel Property Editor
+function ParallelProperties({
+  data,
+  onChange,
+}: {
+  data: ParallelNodeData;
+  onChange: (updates: Partial<ParallelNodeData>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Label</label>
+        <Input
+          value={data.label || ''}
+          onChange={(e) => onChange({ label: e.target.value })}
+          placeholder="Node label"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Join Mode</label>
+        <select
+          value={data.joinMode || 'all'}
+          onChange={(e) =>
+            onChange({ joinMode: e.target.value as ParallelNodeData['joinMode'] })
+          }
+          className="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground text-sm"
+        >
+          <option value="all">Wait for all branches</option>
+          <option value="any">Complete when any branch finishes</option>
+          <option value="none">No synchronization</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-foreground mb-1">Timeout (ms)</label>
+        <Input
+          type="number"
+          value={data.timeout || ''}
+          onChange={(e) =>
+            onChange({ timeout: e.target.value ? parseInt(e.target.value) : undefined })
+          }
+          placeholder="30000"
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="failFast"
+          checked={data.failFast || false}
+          onChange={(e) => onChange({ failFast: e.target.checked })}
+          className="rounded border-border"
+        />
+        <label htmlFor="failFast" className="text-sm text-foreground">
+          Fail fast (stop all branches on first error)
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export function PropertyPanel({ className }: PropertyPanelProps) {
+  const selectedNodeId = useFlowStore((state) => state.selectedNodeId);
+  const nodes = useFlowStore((state) => state.nodes);
+  const updateNode = useFlowStore((state) => state.updateNode);
+  const removeNode = useFlowStore((state) => state.removeNode);
+  const isPropertyPanelOpen = useFlowStore((state) => state.isPropertyPanelOpen);
+  const setIsPropertyPanelOpen = useFlowStore((state) => state.setIsPropertyPanelOpen);
+
+  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+
+  const handleChange = useCallback(
+    (updates: Partial<NodeData>) => {
+      if (selectedNodeId) {
+        updateNode(selectedNodeId, updates);
+      }
+    },
+    [selectedNodeId, updateNode]
+  );
+
+  const handleDelete = useCallback(() => {
+    if (selectedNodeId) {
+      removeNode(selectedNodeId);
+    }
+  }, [selectedNodeId, removeNode]);
+
+  if (!isPropertyPanelOpen) {
+    return (
+      <div className={cn('w-10 bg-card border-l border-border flex flex-col items-center py-4', className)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsPropertyPanelOpen(true)}
+          title="Open properties panel"
+        >
+          <Settings className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  if (!selectedNode) {
+    return (
+      <div className={cn('w-72 bg-card border-l border-border flex flex-col', className)}>
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <h3 className="font-semibold text-foreground">Properties</h3>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setIsPropertyPanelOpen(false)}
+            title="Close panel"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Empty State */}
+        <div className="flex-1 flex items-center justify-center p-4">
+          <div className="text-center text-muted-foreground">
+            <Settings className="w-12 h-12 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">Select a node to edit its properties</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const nodeType = selectedNode.type as FlowNodeType;
+  const Icon = nodeIcons[nodeType];
+
+  return (
+    <div className={cn('w-72 bg-card border-l border-border flex flex-col', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="w-4 h-4 text-primary" />}
+          <h3 className="font-semibold text-foreground">Properties</h3>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={() => setIsPropertyPanelOpen(false)}
+          title="Close panel"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Node Type Badge */}
+      <div className="px-4 py-2 border-b border-border bg-muted/30">
+        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+          {nodeType.replace('-', ' ')}
+        </span>
+      </div>
+
+      {/* Properties Form */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {nodeType === 'slash-command' && (
+          <SlashCommandProperties
+            data={selectedNode.data as SlashCommandNodeData}
+            onChange={handleChange}
+          />
+        )}
+        {nodeType === 'file-operation' && (
+          <FileOperationProperties
+            data={selectedNode.data as FileOperationNodeData}
+            onChange={handleChange}
+          />
+        )}
+        {nodeType === 'conditional' && (
+          <ConditionalProperties
+            data={selectedNode.data as ConditionalNodeData}
+            onChange={handleChange}
+          />
+        )}
+        {nodeType === 'parallel' && (
+          <ParallelProperties
+            data={selectedNode.data as ParallelNodeData}
+            onChange={handleChange}
+          />
+        )}
+      </div>
+
+      {/* Delete Button */}
+      <div className="px-4 py-3 border-t border-border">
+        <Button
+          variant="destructive"
+          className="w-full"
+          onClick={handleDelete}
+        >
+          <Trash2 className="w-4 h-4 mr-2" />
+          Delete Node
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default PropertyPanel;
diff --git a/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx b/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
new file mode 100644
index 00000000..92f7e1d3
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
@@ -0,0 +1,567 @@
+// ========================================
+// Template Library
+// ========================================
+// Template browser with import/export functionality
+
+import { useState, useCallback, useMemo } from 'react';
+import {
+  Library,
+  Search,
+  Download,
+  Upload,
+  Grid,
+  List,
+  Tag,
+  Calendar,
+  FileText,
+  GitBranch,
+  Loader2,
+  Trash2,
+  ExternalLink,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/Dialog';
+import { useTemplates, useInstallTemplate, useExportTemplate, useDeleteTemplate } from '@/hooks/useTemplates';
+import { useFlowStore } from '@/stores';
+import type { FlowTemplate } from '@/types/execution';
+
+// ========== Helper Functions ==========
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+// ========== Template Card Component ==========
+
+interface TemplateCardProps {
+  template: FlowTemplate;
+  viewMode: 'grid' | 'list';
+  onInstall: (template: FlowTemplate) => void;
+  onDelete: (template: FlowTemplate) => void;
+  isInstalling: boolean;
+  isDeleting: boolean;
+}
+
+function TemplateCard({
+  template,
+  viewMode,
+  onInstall,
+  onDelete,
+  isInstalling,
+  isDeleting,
+}: TemplateCardProps) {
+  const isGrid = viewMode === 'grid';
+
+  return (
+    <Card
+      className={cn(
+        'hover:border-primary/50 transition-colors',
+        isGrid ? '' : 'flex items-center'
+      )}
+    >
+      {isGrid ? (
+        <>
+          {/* Grid view */}
+          <CardHeader className="pb-2">
+            <div className="flex items-start justify-between">
+              <CardTitle className="text-base truncate" title={template.name}>
+                {template.name}
+              </CardTitle>
+              {template.category && (
+                <Badge variant="secondary" className="text-xs shrink-0">
+                  {template.category}
+                </Badge>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {template.description && (
+              <p className="text-sm text-muted-foreground line-clamp-2">
+                {template.description}
+              </p>
+            )}
+
+            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <GitBranch className="h-3 w-3" />
+                {template.nodeCount} nodes
+              </span>
+              <span className="flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                {formatDate(template.updated_at)}
+              </span>
+            </div>
+
+            {template.tags && template.tags.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {template.tags.slice(0, 3).map((tag) => (
+                  <Badge key={tag} variant="outline" className="text-xs">
+                    <Tag className="h-2 w-2 mr-1" />
+                    {tag}
+                  </Badge>
+                ))}
+                {template.tags.length > 3 && (
+                  <span className="text-xs text-muted-foreground">
+                    +{template.tags.length - 3}
+                  </span>
+                )}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 pt-2">
+              <Button
+                size="sm"
+                variant="default"
+                className="flex-1"
+                onClick={() => onInstall(template)}
+                disabled={isInstalling}
+              >
+                {isInstalling ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-1" />
+                ) : (
+                  <Download className="h-4 w-4 mr-1" />
+                )}
+                Import
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onDelete(template)}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </>
+      ) : (
+        <>
+          {/* List view */}
+          <div className="flex-1 flex items-center gap-4 p-4">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="font-medium truncate">{template.name}</span>
+                {template.category && (
+                  <Badge variant="secondary" className="text-xs shrink-0">
+                    {template.category}
+                  </Badge>
+                )}
+              </div>
+              {template.description && (
+                <p className="text-sm text-muted-foreground truncate">
+                  {template.description}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-4 text-xs text-muted-foreground shrink-0">
+              <span className="flex items-center gap-1">
+                <GitBranch className="h-3 w-3" />
+                {template.nodeCount}
+              </span>
+              <span className="flex items-center gap-1">
+                <Calendar className="h-3 w-3" />
+                {formatDate(template.updated_at)}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              <Button
+                size="sm"
+                variant="default"
+                onClick={() => onInstall(template)}
+                disabled={isInstalling}
+              >
+                {isInstalling ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Download className="h-4 w-4" />
+                )}
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onDelete(template)}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+}
+
+// ========== Export Dialog Component ==========
+
+interface ExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onExport: (name: string, description: string, category: string, tags: string[]) => void;
+  isExporting: boolean;
+  flowName: string;
+}
+
+function ExportDialog({
+  open,
+  onOpenChange,
+  onExport,
+  isExporting,
+  flowName,
+}: ExportDialogProps) {
+  const [name, setName] = useState(flowName);
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState('');
+  const [tagsInput, setTagsInput] = useState('');
+
+  const handleExport = useCallback(() => {
+    const tags = tagsInput
+      .split(',')
+      .map((t) => t.trim())
+      .filter(Boolean);
+    onExport(name, description, category, tags);
+  }, [name, description, category, tagsInput, onExport]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Export as Template</DialogTitle>
+          <DialogDescription>
+            Save this flow as a reusable template in your library.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Name</label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Template name"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Description</label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Brief description of this template"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Category</label>
+            <Input
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              placeholder="e.g., Development, Testing, Deployment"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Tags (comma-separated)</label>
+            <Input
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="e.g., react, testing, ci/cd"
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleExport} disabled={!name.trim() || isExporting}>
+            {isExporting ? (
+              <Loader2 className="h-4 w-4 animate-spin mr-1" />
+            ) : (
+              <Upload className="h-4 w-4 mr-1" />
+            )}
+            Export
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ========== Main Component ==========
+
+interface TemplateLibraryProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function TemplateLibrary({ open, onOpenChange }: TemplateLibraryProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [exportDialogOpen, setExportDialogOpen] = useState(false);
+  const [installingId, setInstallingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  // Flow store
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
+
+  // Query hooks
+  const { data, isLoading, error } = useTemplates(selectedCategory ?? undefined);
+
+  // Mutation hooks
+  const installTemplate = useInstallTemplate();
+  const exportTemplate = useExportTemplate();
+  const deleteTemplate = useDeleteTemplate();
+
+  // Filter templates by search query
+  const filteredTemplates = useMemo(() => {
+    if (!data?.templates) return [];
+    if (!searchQuery.trim()) return data.templates;
+
+    const query = searchQuery.toLowerCase();
+    return data.templates.filter(
+      (t) =>
+        t.name.toLowerCase().includes(query) ||
+        t.description?.toLowerCase().includes(query) ||
+        t.tags?.some((tag) => tag.toLowerCase().includes(query))
+    );
+  }, [data?.templates, searchQuery]);
+
+  // Handle install
+  const handleInstall = useCallback(
+    async (template: FlowTemplate) => {
+      setInstallingId(template.id);
+      try {
+        const result = await installTemplate.mutateAsync({
+          templateId: template.id,
+        });
+        // Set the installed flow as current
+        setCurrentFlow(result.flow);
+        onOpenChange(false);
+      } catch (error) {
+        console.error('Failed to install template:', error);
+      } finally {
+        setInstallingId(null);
+      }
+    },
+    [installTemplate, setCurrentFlow, onOpenChange]
+  );
+
+  // Handle export
+  const handleExport = useCallback(
+    async (name: string, description: string, category: string, tags: string[]) => {
+      if (!currentFlow) return;
+
+      try {
+        await exportTemplate.mutateAsync({
+          flowId: currentFlow.id,
+          name,
+          description,
+          category,
+          tags,
+        });
+        setExportDialogOpen(false);
+      } catch (error) {
+        console.error('Failed to export template:', error);
+      }
+    },
+    [currentFlow, exportTemplate]
+  );
+
+  // Handle delete
+  const handleDelete = useCallback(
+    async (template: FlowTemplate) => {
+      setDeletingId(template.id);
+      try {
+        await deleteTemplate.mutateAsync(template.id);
+      } catch (error) {
+        console.error('Failed to delete template:', error);
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [deleteTemplate]
+  );
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Library className="h-5 w-5" />
+              Template Library
+            </DialogTitle>
+            <DialogDescription>
+              Browse and import workflow templates, or export your current flow as a template.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* Toolbar */}
+          <div className="flex items-center gap-4 py-2">
+            {/* Search */}
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search templates..."
+                className="pl-9"
+              />
+            </div>
+
+            {/* Category filter */}
+            {data?.categories && data.categories.length > 0 && (
+              <div className="flex items-center gap-2">
+                <Button
+                  variant={selectedCategory === null ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setSelectedCategory(null)}
+                >
+                  All
+                </Button>
+                {data.categories.slice(0, 4).map((cat) => (
+                  <Button
+                    key={cat}
+                    variant={selectedCategory === cat ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedCategory(cat)}
+                  >
+                    {cat}
+                  </Button>
+                ))}
+              </div>
+            )}
+
+            {/* View mode toggle */}
+            <div className="flex items-center border border-border rounded-md">
+              <Button
+                variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="rounded-r-none"
+                onClick={() => setViewMode('grid')}
+              >
+                <Grid className="h-4 w-4" />
+              </Button>
+              <Button
+                variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+                size="sm"
+                className="rounded-l-none"
+                onClick={() => setViewMode('list')}
+              >
+                <List className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* Export button */}
+            {currentFlow && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setExportDialogOpen(true)}
+              >
+                <Upload className="h-4 w-4 mr-1" />
+                Export Current
+              </Button>
+            )}
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto min-h-0">
+            {isLoading ? (
+              <div className="flex items-center justify-center h-48">
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+                <FileText className="h-12 w-12 mb-2" />
+                <p>Failed to load templates</p>
+                <p className="text-sm">{(error as Error).message}</p>
+              </div>
+            ) : filteredTemplates.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+                <Library className="h-12 w-12 mb-2" />
+                <p>No templates found</p>
+                {searchQuery && (
+                  <p className="text-sm">Try a different search query</p>
+                )}
+              </div>
+            ) : (
+              <div
+                className={cn(
+                  viewMode === 'grid'
+                    ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'
+                    : 'space-y-2'
+                )}
+              >
+                {filteredTemplates.map((template) => (
+                  <TemplateCard
+                    key={template.id}
+                    template={template}
+                    viewMode={viewMode}
+                    onInstall={handleInstall}
+                    onDelete={handleDelete}
+                    isInstalling={installingId === template.id}
+                    isDeleting={deletingId === template.id}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <DialogFooter className="border-t border-border pt-4">
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm text-muted-foreground">
+                {filteredTemplates.length} template{filteredTemplates.length !== 1 ? 's' : ''}
+              </span>
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Export Dialog */}
+      {currentFlow && (
+        <ExportDialog
+          open={exportDialogOpen}
+          onOpenChange={setExportDialogOpen}
+          onExport={handleExport}
+          isExporting={exportTemplate.isPending}
+          flowName={currentFlow.name}
+        />
+      )}
+    </>
+  );
+}
+
+export default TemplateLibrary;
diff --git a/ccw/frontend/src/pages/orchestrator/index.ts b/ccw/frontend/src/pages/orchestrator/index.ts
new file mode 100644
index 00000000..69dafed3
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/index.ts
@@ -0,0 +1,15 @@
+// ========================================
+// Orchestrator Page Barrel Export
+// ========================================
+
+export { OrchestratorPage } from './OrchestratorPage';
+export { FlowCanvas } from './FlowCanvas';
+export { NodePalette } from './NodePalette';
+export { PropertyPanel } from './PropertyPanel';
+export { FlowToolbar } from './FlowToolbar';
+
+// Node components
+export { SlashCommandNode } from './nodes/SlashCommandNode';
+export { FileOperationNode } from './nodes/FileOperationNode';
+export { ConditionalNode } from './nodes/ConditionalNode';
+export { ParallelNode } from './nodes/ParallelNode';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/ConditionalNode.tsx b/ccw/frontend/src/pages/orchestrator/nodes/ConditionalNode.tsx
new file mode 100644
index 00000000..25861afe
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/ConditionalNode.tsx
@@ -0,0 +1,118 @@
+// ========================================
+// Conditional Node Component
+// ========================================
+// Custom node for conditional branching with true/false outputs
+
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { GitBranch, Check, X } from 'lucide-react';
+import type { ConditionalNodeData } from '@/types/flow';
+import { NodeWrapper } from './NodeWrapper';
+
+interface ConditionalNodeProps {
+  data: ConditionalNodeData;
+  selected?: boolean;
+}
+
+export const ConditionalNode = memo(({ data, selected }: ConditionalNodeProps) => {
+  // Truncate condition for display
+  const displayCondition = data.condition
+    ? data.condition.length > 30
+      ? data.condition.slice(0, 27) + '...'
+      : data.condition
+    : 'No condition';
+
+  return (
+    <NodeWrapper
+      status={data.executionStatus}
+      selected={selected}
+      accentColor="amber"
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-amber-500 !border-2 !border-background"
+      />
+
+      {/* Node Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-amber-500 text-white rounded-t-md">
+        <GitBranch className="w-4 h-4 shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {data.label || 'Condition'}
+        </span>
+      </div>
+
+      {/* Node Content */}
+      <div className="px-3 py-2 space-y-2">
+        {/* Condition expression */}
+        <div
+          className="font-mono text-xs bg-muted px-2 py-1 rounded text-foreground/90 truncate"
+          title={data.condition}
+        >
+          {displayCondition}
+        </div>
+
+        {/* Branch labels */}
+        <div className="flex justify-between items-center pt-1">
+          <div className="flex items-center gap-1">
+            <Check className="w-3 h-3 text-green-500" />
+            <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+              {data.trueLabel || 'True'}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <X className="w-3 h-3 text-red-500" />
+            <span className="text-xs text-red-600 dark:text-red-400 font-medium">
+              {data.falseLabel || 'False'}
+            </span>
+          </div>
+        </div>
+
+        {/* Execution result indicator */}
+        {data.executionStatus === 'completed' && data.executionResult !== undefined && (
+          <div className="text-[10px] text-muted-foreground text-center">
+            Result:{' '}
+            <span
+              className={
+                data.executionResult
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-red-600 dark:text-red-400'
+              }
+            >
+              {data.executionResult ? 'true' : 'false'}
+            </span>
+          </div>
+        )}
+
+        {/* Execution error message */}
+        {data.executionStatus === 'failed' && data.executionError && (
+          <div
+            className="text-[10px] text-destructive truncate"
+            title={data.executionError}
+          >
+            {data.executionError}
+          </div>
+        )}
+      </div>
+
+      {/* Output Handles (True and False) */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="true"
+        className="!w-3 !h-3 !bg-green-500 !border-2 !border-background"
+        style={{ left: '30%' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="false"
+        className="!w-3 !h-3 !bg-red-500 !border-2 !border-background"
+        style={{ left: '70%' }}
+      />
+    </NodeWrapper>
+  );
+});
+
+ConditionalNode.displayName = 'ConditionalNode';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/FileOperationNode.tsx b/ccw/frontend/src/pages/orchestrator/nodes/FileOperationNode.tsx
new file mode 100644
index 00000000..5acdd0e0
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/FileOperationNode.tsx
@@ -0,0 +1,145 @@
+// ========================================
+// File Operation Node Component
+// ========================================
+// Custom node for file read/write operations
+
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import {
+  FileText,
+  FileInput,
+  FileOutput,
+  FilePlus,
+  FileX,
+  Copy,
+  Move,
+} from 'lucide-react';
+import type { FileOperationNodeData } from '@/types/flow';
+import { NodeWrapper } from './NodeWrapper';
+import { cn } from '@/lib/utils';
+
+interface FileOperationNodeProps {
+  data: FileOperationNodeData;
+  selected?: boolean;
+}
+
+// Operation icons and colors
+const OPERATION_CONFIG: Record<
+  string,
+  { icon: React.ElementType; label: string; color: string }
+> = {
+  read: { icon: FileInput, label: 'Read', color: 'text-blue-500' },
+  write: { icon: FileOutput, label: 'Write', color: 'text-amber-500' },
+  append: { icon: FilePlus, label: 'Append', color: 'text-green-500' },
+  delete: { icon: FileX, label: 'Delete', color: 'text-red-500' },
+  copy: { icon: Copy, label: 'Copy', color: 'text-purple-500' },
+  move: { icon: Move, label: 'Move', color: 'text-indigo-500' },
+};
+
+export const FileOperationNode = memo(({ data, selected }: FileOperationNodeProps) => {
+  const operation = data.operation || 'read';
+  const config = OPERATION_CONFIG[operation] || OPERATION_CONFIG.read;
+  const IconComponent = config.icon;
+
+  // Truncate path for display
+  const displayPath = data.path
+    ? data.path.length > 25
+      ? '...' + data.path.slice(-22)
+      : data.path
+    : '';
+
+  return (
+    <NodeWrapper
+      status={data.executionStatus}
+      selected={selected}
+      accentColor="green"
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-green-500 !border-2 !border-background"
+      />
+
+      {/* Node Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-green-500 text-white rounded-t-md">
+        <FileText className="w-4 h-4 shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {data.label || 'File Operation'}
+        </span>
+      </div>
+
+      {/* Node Content */}
+      <div className="px-3 py-2 space-y-1.5">
+        {/* Operation type with icon */}
+        <div className="flex items-center gap-1.5">
+          <IconComponent className={cn('w-3.5 h-3.5', config.color)} />
+          <span className="text-xs font-medium text-foreground">
+            {config.label}
+          </span>
+        </div>
+
+        {/* File path */}
+        {data.path && (
+          <div
+            className="text-xs text-muted-foreground font-mono truncate max-w-[160px]"
+            title={data.path}
+          >
+            {displayPath}
+          </div>
+        )}
+
+        {/* Badges row */}
+        <div className="flex items-center gap-1 flex-wrap">
+          {/* Add to context badge */}
+          {data.addToContext && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+              + context
+            </span>
+          )}
+
+          {/* Output variable badge */}
+          {data.outputVariable && (
+            <span
+              className="text-[10px] px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 truncate max-w-[80px]"
+              title={data.outputVariable}
+            >
+              ${data.outputVariable}
+            </span>
+          )}
+        </div>
+
+        {/* Destination path for copy/move */}
+        {(operation === 'copy' || operation === 'move') && data.destinationPath && (
+          <div className="text-[10px] text-muted-foreground">
+            To:{' '}
+            <span className="font-mono text-foreground/70" title={data.destinationPath}>
+              {data.destinationPath.length > 20
+                ? '...' + data.destinationPath.slice(-17)
+                : data.destinationPath}
+            </span>
+          </div>
+        )}
+
+        {/* Execution error message */}
+        {data.executionStatus === 'failed' && data.executionError && (
+          <div
+            className="text-[10px] text-destructive truncate max-w-[160px]"
+            title={data.executionError}
+          >
+            {data.executionError}
+          </div>
+        )}
+      </div>
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!w-3 !h-3 !bg-green-500 !border-2 !border-background"
+      />
+    </NodeWrapper>
+  );
+});
+
+FileOperationNode.displayName = 'FileOperationNode';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/NodeWrapper.tsx b/ccw/frontend/src/pages/orchestrator/nodes/NodeWrapper.tsx
new file mode 100644
index 00000000..c1e592be
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/NodeWrapper.tsx
@@ -0,0 +1,81 @@
+// ========================================
+// Node Wrapper Component
+// ========================================
+// Shared wrapper for all custom nodes with execution status styling
+
+import { ReactNode } from 'react';
+import {
+  Circle,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import type { ExecutionStatus } from '@/types/flow';
+import { cn } from '@/lib/utils';
+
+interface NodeWrapperProps {
+  children: ReactNode;
+  status?: ExecutionStatus;
+  selected?: boolean;
+  accentColor: 'blue' | 'green' | 'amber' | 'purple';
+  className?: string;
+}
+
+// Status styling configuration
+const STATUS_STYLES: Record<ExecutionStatus, string> = {
+  pending: 'border-muted bg-card',
+  running: 'border-primary bg-primary/10 animate-pulse',
+  completed: 'border-green-500 bg-green-500/10',
+  failed: 'border-destructive bg-destructive/10',
+};
+
+// Selection ring styles per accent color
+const SELECTION_STYLES: Record<string, string> = {
+  blue: 'ring-2 ring-blue-500/20 border-blue-500',
+  green: 'ring-2 ring-green-500/20 border-green-500',
+  amber: 'ring-2 ring-amber-500/20 border-amber-500',
+  purple: 'ring-2 ring-purple-500/20 border-purple-500',
+};
+
+// Status icons
+function StatusIcon({ status }: { status: ExecutionStatus }) {
+  switch (status) {
+    case 'pending':
+      return <Circle className="w-3 h-3 text-muted-foreground" />;
+    case 'running':
+      return <Loader2 className="w-3 h-3 text-primary animate-spin" />;
+    case 'completed':
+      return <CheckCircle2 className="w-3 h-3 text-green-500" />;
+    case 'failed':
+      return <XCircle className="w-3 h-3 text-destructive" />;
+  }
+}
+
+export function NodeWrapper({
+  children,
+  status = 'pending',
+  selected = false,
+  accentColor,
+  className,
+}: NodeWrapperProps) {
+  return (
+    <div
+      className={cn(
+        'relative min-w-[180px] rounded-lg border-2 shadow-md transition-all',
+        STATUS_STYLES[status],
+        selected && SELECTION_STYLES[accentColor],
+        className
+      )}
+    >
+      {/* Status indicator */}
+      <div className="absolute -top-2 -right-2 z-10 bg-background rounded-full p-0.5 shadow-sm border border-border">
+        <StatusIcon status={status} />
+      </div>
+
+      {/* Node content (includes handles, header, body) */}
+      {children}
+    </div>
+  );
+}
+
+NodeWrapper.displayName = 'NodeWrapper';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/ParallelNode.tsx b/ccw/frontend/src/pages/orchestrator/nodes/ParallelNode.tsx
new file mode 100644
index 00000000..f551ba1c
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/ParallelNode.tsx
@@ -0,0 +1,129 @@
+// ========================================
+// Parallel Node Component
+// ========================================
+// Custom node for parallel execution with multiple branch outputs
+
+import { memo, useMemo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { GitMerge, Layers, Timer, AlertTriangle } from 'lucide-react';
+import type { ParallelNodeData } from '@/types/flow';
+import { NodeWrapper } from './NodeWrapper';
+import { cn } from '@/lib/utils';
+
+interface ParallelNodeProps {
+  data: ParallelNodeData;
+  selected?: boolean;
+}
+
+// Join mode configuration
+const JOIN_MODE_CONFIG: Record<string, { label: string; color: string }> = {
+  all: { label: 'Wait All', color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' },
+  any: { label: 'Wait Any', color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' },
+  none: { label: 'Fire & Forget', color: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400' },
+};
+
+export const ParallelNode = memo(({ data, selected }: ParallelNodeProps) => {
+  const joinMode = data.joinMode || 'all';
+  const branchCount = Math.max(2, Math.min(data.branchCount || 2, 5)); // Clamp between 2-5
+  const joinConfig = JOIN_MODE_CONFIG[joinMode] || JOIN_MODE_CONFIG.all;
+
+  // Calculate branch handle positions
+  const branchPositions = useMemo(() => {
+    const positions: number[] = [];
+    const step = 100 / (branchCount + 1);
+    for (let i = 1; i <= branchCount; i++) {
+      positions.push(step * i);
+    }
+    return positions;
+  }, [branchCount]);
+
+  return (
+    <NodeWrapper
+      status={data.executionStatus}
+      selected={selected}
+      accentColor="purple"
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-purple-500 !border-2 !border-background"
+      />
+
+      {/* Node Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-purple-500 text-white rounded-t-md">
+        <GitMerge className="w-4 h-4 shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {data.label || 'Parallel'}
+        </span>
+        {/* Branch count indicator */}
+        <span className="text-[10px] bg-white/20 px-1.5 py-0.5 rounded">
+          {branchCount}x
+        </span>
+      </div>
+
+      {/* Node Content */}
+      <div className="px-3 py-2 space-y-2">
+        {/* Join mode badge */}
+        <div className="flex items-center gap-1.5">
+          <Layers className="w-3.5 h-3.5 text-muted-foreground" />
+          <span className={cn('text-[10px] font-medium px-1.5 py-0.5 rounded', joinConfig.color)}>
+            {joinConfig.label}
+          </span>
+        </div>
+
+        {/* Additional settings row */}
+        <div className="flex items-center gap-2 flex-wrap">
+          {/* Timeout indicator */}
+          {data.timeout && (
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
+              <Timer className="w-3 h-3" />
+              <span>{data.timeout}ms</span>
+            </div>
+          )}
+
+          {/* Fail fast indicator */}
+          {data.failFast && (
+            <div className="flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400">
+              <AlertTriangle className="w-3 h-3" />
+              <span>Fail Fast</span>
+            </div>
+          )}
+        </div>
+
+        {/* Branch labels */}
+        <div className="flex justify-between text-[10px] text-muted-foreground pt-1">
+          {branchPositions.map((_, index) => (
+            <span key={index} className="text-purple-600 dark:text-purple-400">
+              B{index + 1}
+            </span>
+          ))}
+        </div>
+
+        {/* Execution error message */}
+        {data.executionStatus === 'failed' && data.executionError && (
+          <div
+            className="text-[10px] text-destructive truncate"
+            title={data.executionError}
+          >
+            {data.executionError}
+          </div>
+        )}
+      </div>
+
+      {/* Dynamic Branch Output Handles */}
+      {branchPositions.map((position, index) => (
+        <Handle
+          key={`branch-${index + 1}`}
+          type="source"
+          position={Position.Bottom}
+          id={`branch-${index + 1}`}
+          className="!w-3 !h-3 !bg-purple-500 !border-2 !border-background"
+          style={{ left: `${position}%` }}
+        />
+      ))}
+    </NodeWrapper>
+  );
+});
+
+ParallelNode.displayName = 'ParallelNode';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/SlashCommandNode.tsx b/ccw/frontend/src/pages/orchestrator/nodes/SlashCommandNode.tsx
new file mode 100644
index 00000000..74c4a189
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/SlashCommandNode.tsx
@@ -0,0 +1,100 @@
+// ========================================
+// Slash Command Node Component
+// ========================================
+// Custom node for executing CCW slash commands
+
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { Terminal } from 'lucide-react';
+import type { SlashCommandNodeData } from '@/types/flow';
+import { NodeWrapper } from './NodeWrapper';
+import { cn } from '@/lib/utils';
+
+interface SlashCommandNodeProps {
+  data: SlashCommandNodeData;
+  selected?: boolean;
+}
+
+// Mode badge styling
+const MODE_STYLES = {
+  analysis: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  write: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
+};
+
+export const SlashCommandNode = memo(({ data, selected }: SlashCommandNodeProps) => {
+  const executionMode = data.execution?.mode || 'analysis';
+
+  return (
+    <NodeWrapper
+      status={data.executionStatus}
+      selected={selected}
+      accentColor="blue"
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-blue-500 !border-2 !border-background"
+      />
+
+      {/* Node Header */}
+      <div className="flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-t-md">
+        <Terminal className="w-4 h-4 shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {data.label || 'Command'}
+        </span>
+        {/* Execution mode badge */}
+        <span
+          className={cn(
+            'text-[10px] font-medium px-1.5 py-0.5 rounded',
+            MODE_STYLES[executionMode]
+          )}
+        >
+          {executionMode}
+        </span>
+      </div>
+
+      {/* Node Content */}
+      <div className="px-3 py-2 space-y-1.5">
+        {/* Command name */}
+        {data.command && (
+          <div className="flex items-center gap-1">
+            <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded text-foreground">
+              /{data.command}
+            </span>
+          </div>
+        )}
+
+        {/* Arguments (truncated) */}
+        {data.args && (
+          <div className="text-xs text-muted-foreground truncate max-w-[160px]">
+            <span className="text-foreground/70 font-mono">{data.args}</span>
+          </div>
+        )}
+
+        {/* Error handling indicator */}
+        {data.onError && data.onError !== 'stop' && (
+          <div className="text-[10px] text-muted-foreground">
+            On error: <span className="text-foreground">{data.onError}</span>
+          </div>
+        )}
+
+        {/* Execution error message */}
+        {data.executionStatus === 'failed' && data.executionError && (
+          <div className="text-[10px] text-destructive truncate max-w-[160px]" title={data.executionError}>
+            {data.executionError}
+          </div>
+        )}
+      </div>
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!w-3 !h-3 !bg-blue-500 !border-2 !border-background"
+      />
+    </NodeWrapper>
+  );
+});
+
+SlashCommandNode.displayName = 'SlashCommandNode';
diff --git a/ccw/frontend/src/pages/orchestrator/nodes/index.ts b/ccw/frontend/src/pages/orchestrator/nodes/index.ts
new file mode 100644
index 00000000..7819eb07
--- /dev/null
+++ b/ccw/frontend/src/pages/orchestrator/nodes/index.ts
@@ -0,0 +1,26 @@
+// ========================================
+// Node Components Barrel Export
+// ========================================
+
+// Shared wrapper component
+export { NodeWrapper } from './NodeWrapper';
+
+// Custom node components
+export { SlashCommandNode } from './SlashCommandNode';
+export { FileOperationNode } from './FileOperationNode';
+export { ConditionalNode } from './ConditionalNode';
+export { ParallelNode } from './ParallelNode';
+
+// Node types map for React Flow registration
+import { SlashCommandNode } from './SlashCommandNode';
+import { FileOperationNode } from './FileOperationNode';
+import { ConditionalNode } from './ConditionalNode';
+import { ParallelNode } from './ParallelNode';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const nodeTypes: Record<string, any> = {
+  'slash-command': SlashCommandNode,
+  'file-operation': FileOperationNode,
+  conditional: ConditionalNode,
+  parallel: ParallelNode,
+};
diff --git a/ccw/frontend/src/router.tsx b/ccw/frontend/src/router.tsx
new file mode 100644
index 00000000..a0707a2e
--- /dev/null
+++ b/ccw/frontend/src/router.tsx
@@ -0,0 +1,95 @@
+// ========================================
+// Router Configuration
+// ========================================
+// React Router v6 configuration with all dashboard routes
+
+import { createBrowserRouter, RouteObject } from 'react-router-dom';
+import { AppShell } from '@/components/layout';
+import {
+  HomePage,
+  SessionsPage,
+  OrchestratorPage,
+  LoopMonitorPage,
+  IssueManagerPage,
+  SkillsManagerPage,
+  CommandsManagerPage,
+  MemoryPage,
+  SettingsPage,
+  HelpPage,
+} from '@/pages';
+
+/**
+ * Route configuration for the dashboard
+ * All routes are wrapped in AppShell layout
+ */
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppShell />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'sessions',
+        element: <SessionsPage />,
+      },
+      {
+        path: 'orchestrator',
+        element: <OrchestratorPage />,
+      },
+      {
+        path: 'loops',
+        element: <LoopMonitorPage />,
+      },
+      {
+        path: 'issues',
+        element: <IssueManagerPage />,
+      },
+      {
+        path: 'skills',
+        element: <SkillsManagerPage />,
+      },
+      {
+        path: 'commands',
+        element: <CommandsManagerPage />,
+      },
+      {
+        path: 'memory',
+        element: <MemoryPage />,
+      },
+      {
+        path: 'settings',
+        element: <SettingsPage />,
+      },
+      {
+        path: 'help',
+        element: <HelpPage />,
+      },
+    ],
+  },
+];
+
+/**
+ * Create the browser router instance
+ */
+export const router = createBrowserRouter(routes);
+
+/**
+ * Export route paths for type-safe navigation
+ */
+export const ROUTES = {
+  HOME: '/',
+  SESSIONS: '/sessions',
+  ORCHESTRATOR: '/orchestrator',
+  LOOPS: '/loops',
+  ISSUES: '/issues',
+  SKILLS: '/skills',
+  COMMANDS: '/commands',
+  MEMORY: '/memory',
+  SETTINGS: '/settings',
+  HELP: '/help',
+} as const;
+
+export type RoutePath = (typeof ROUTES)[keyof typeof ROUTES];
diff --git a/ccw/frontend/src/stores/appStore.ts b/ccw/frontend/src/stores/appStore.ts
new file mode 100644
index 00000000..2736c804
--- /dev/null
+++ b/ccw/frontend/src/stores/appStore.ts
@@ -0,0 +1,164 @@
+// ========================================
+// App Store
+// ========================================
+// Manages UI state: theme, sidebar, view, loading, error
+
+import { create } from 'zustand';
+import { persist, devtools } from 'zustand/middleware';
+import type { AppStore, Theme, ViewMode, SessionFilter, LiteTaskType } from '../types/store';
+
+// Helper to resolve system theme
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+// Helper to resolve theme based on preference
+const resolveTheme = (theme: Theme): 'light' | 'dark' => {
+  if (theme === 'system') {
+    return getSystemTheme();
+  }
+  return theme;
+};
+
+// Initial state
+const initialState = {
+  // Theme
+  theme: 'system' as Theme,
+  resolvedTheme: 'light' as 'light' | 'dark',
+
+  // Sidebar
+  sidebarOpen: true,
+  sidebarCollapsed: false,
+
+  // View state
+  currentView: 'sessions' as ViewMode,
+  currentFilter: 'all' as SessionFilter,
+  currentLiteType: null as LiteTaskType,
+  currentSessionDetailKey: null as string | null,
+
+  // Loading and error states
+  isLoading: false,
+  loadingMessage: null as string | null,
+  error: null as string | null,
+};
+
+export const useAppStore = create<AppStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+
+        // ========== Theme Actions ==========
+
+        setTheme: (theme: Theme) => {
+          const resolved = resolveTheme(theme);
+          set({ theme, resolvedTheme: resolved }, false, 'setTheme');
+
+          // Apply theme to document
+          if (typeof document !== 'undefined') {
+            document.documentElement.classList.remove('light', 'dark');
+            document.documentElement.classList.add(resolved);
+            document.documentElement.setAttribute('data-theme', resolved);
+          }
+        },
+
+        toggleTheme: () => {
+          const { theme } = get();
+          const newTheme: Theme = theme === 'dark' ? 'light' : theme === 'light' ? 'dark' : 'dark';
+          get().setTheme(newTheme);
+        },
+
+        // ========== Sidebar Actions ==========
+
+        setSidebarOpen: (open: boolean) => {
+          set({ sidebarOpen: open }, false, 'setSidebarOpen');
+        },
+
+        toggleSidebar: () => {
+          set((state) => ({ sidebarOpen: !state.sidebarOpen }), false, 'toggleSidebar');
+        },
+
+        setSidebarCollapsed: (collapsed: boolean) => {
+          set({ sidebarCollapsed: collapsed }, false, 'setSidebarCollapsed');
+        },
+
+        // ========== View Actions ==========
+
+        setCurrentView: (view: ViewMode) => {
+          set({ currentView: view }, false, 'setCurrentView');
+        },
+
+        setCurrentFilter: (filter: SessionFilter) => {
+          set({ currentFilter: filter }, false, 'setCurrentFilter');
+        },
+
+        setCurrentLiteType: (type: LiteTaskType) => {
+          set({ currentLiteType: type }, false, 'setCurrentLiteType');
+        },
+
+        setCurrentSessionDetailKey: (key: string | null) => {
+          set({ currentSessionDetailKey: key }, false, 'setCurrentSessionDetailKey');
+        },
+
+        // ========== Loading/Error Actions ==========
+
+        setLoading: (loading: boolean, message: string | null = null) => {
+          set({ isLoading: loading, loadingMessage: message }, false, 'setLoading');
+        },
+
+        setError: (error: string | null) => {
+          set({ error }, false, 'setError');
+        },
+
+        clearError: () => {
+          set({ error: null }, false, 'clearError');
+        },
+      }),
+      {
+        name: 'ccw-app-store',
+        // Only persist theme preference
+        partialize: (state) => ({
+          theme: state.theme,
+          sidebarCollapsed: state.sidebarCollapsed,
+        }),
+        onRehydrateStorage: () => (state) => {
+          // Apply theme on rehydration
+          if (state) {
+            const resolved = resolveTheme(state.theme);
+            state.resolvedTheme = resolved;
+            if (typeof document !== 'undefined') {
+              document.documentElement.classList.remove('light', 'dark');
+              document.documentElement.classList.add(resolved);
+              document.documentElement.setAttribute('data-theme', resolved);
+            }
+          }
+        },
+      }
+    ),
+    { name: 'AppStore' }
+  )
+);
+
+// Setup system theme listener
+if (typeof window !== 'undefined') {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQuery.addEventListener('change', () => {
+    const state = useAppStore.getState();
+    if (state.theme === 'system') {
+      const resolved = getSystemTheme();
+      useAppStore.setState({ resolvedTheme: resolved });
+      document.documentElement.classList.remove('light', 'dark');
+      document.documentElement.classList.add(resolved);
+      document.documentElement.setAttribute('data-theme', resolved);
+    }
+  });
+}
+
+// Selectors for common access patterns
+export const selectTheme = (state: AppStore) => state.theme;
+export const selectResolvedTheme = (state: AppStore) => state.resolvedTheme;
+export const selectSidebarOpen = (state: AppStore) => state.sidebarOpen;
+export const selectCurrentView = (state: AppStore) => state.currentView;
+export const selectIsLoading = (state: AppStore) => state.isLoading;
+export const selectError = (state: AppStore) => state.error;
diff --git a/ccw/frontend/src/stores/configStore.ts b/ccw/frontend/src/stores/configStore.ts
new file mode 100644
index 00000000..f323f9a9
--- /dev/null
+++ b/ccw/frontend/src/stores/configStore.ts
@@ -0,0 +1,223 @@
+// ========================================
+// Config Store
+// ========================================
+// Manages CLI tools, API endpoints, and user preferences with persistence
+
+import { create } from 'zustand';
+import { persist, devtools } from 'zustand/middleware';
+import type {
+  ConfigStore,
+  ConfigState,
+  CliToolConfig,
+  ApiEndpoints,
+  UserPreferences,
+} from '../types/store';
+
+// Default CLI tools configuration
+const defaultCliTools: Record<string, CliToolConfig> = {
+  gemini: {
+    enabled: true,
+    primaryModel: 'gemini-2.5-pro',
+    secondaryModel: 'gemini-2.5-flash',
+    tags: ['analysis', 'debug'],
+    type: 'builtin',
+  },
+  qwen: {
+    enabled: true,
+    primaryModel: 'coder-model',
+    secondaryModel: 'coder-model',
+    tags: [],
+    type: 'builtin',
+  },
+  codex: {
+    enabled: true,
+    primaryModel: 'gpt-5.2',
+    secondaryModel: 'gpt-5.2',
+    tags: [],
+    type: 'builtin',
+  },
+  claude: {
+    enabled: true,
+    primaryModel: 'sonnet',
+    secondaryModel: 'haiku',
+    tags: [],
+    type: 'builtin',
+  },
+};
+
+// Default API endpoints
+const defaultApiEndpoints: ApiEndpoints = {
+  base: '/api',
+  sessions: '/api/sessions',
+  tasks: '/api/tasks',
+  loops: '/api/loops',
+  issues: '/api/issues',
+  orchestrator: '/api/orchestrator',
+};
+
+// Default user preferences
+const defaultUserPreferences: UserPreferences = {
+  autoRefresh: true,
+  refreshInterval: 30000, // 30 seconds
+  notificationsEnabled: true,
+  soundEnabled: false,
+  compactView: false,
+  showCompletedTasks: true,
+  defaultSessionFilter: 'all',
+  defaultSortField: 'created_at',
+  defaultSortDirection: 'desc',
+};
+
+// Initial state
+const initialState: ConfigState = {
+  cliTools: defaultCliTools,
+  defaultCliTool: 'gemini',
+  apiEndpoints: defaultApiEndpoints,
+  userPreferences: defaultUserPreferences,
+  featureFlags: {
+    orchestratorEnabled: true,
+    darkModeEnabled: true,
+    notificationsEnabled: true,
+    experimentalFeatures: false,
+  },
+};
+
+export const useConfigStore = create<ConfigStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+
+        // ========== CLI Tools Actions ==========
+
+        setCliTools: (tools: Record<string, CliToolConfig>) => {
+          set({ cliTools: tools }, false, 'setCliTools');
+        },
+
+        updateCliTool: (toolId: string, updates: Partial<CliToolConfig>) => {
+          set(
+            (state) => ({
+              cliTools: {
+                ...state.cliTools,
+                [toolId]: {
+                  ...state.cliTools[toolId],
+                  ...updates,
+                },
+              },
+            }),
+            false,
+            'updateCliTool'
+          );
+        },
+
+        setDefaultCliTool: (toolId: string) => {
+          const { cliTools } = get();
+          if (cliTools[toolId]?.enabled) {
+            set({ defaultCliTool: toolId }, false, 'setDefaultCliTool');
+          }
+        },
+
+        // ========== API Endpoints Actions ==========
+
+        setApiEndpoints: (endpoints: Partial<ApiEndpoints>) => {
+          set(
+            (state) => ({
+              apiEndpoints: {
+                ...state.apiEndpoints,
+                ...endpoints,
+              },
+            }),
+            false,
+            'setApiEndpoints'
+          );
+        },
+
+        // ========== User Preferences Actions ==========
+
+        setUserPreferences: (prefs: Partial<UserPreferences>) => {
+          set(
+            (state) => ({
+              userPreferences: {
+                ...state.userPreferences,
+                ...prefs,
+              },
+            }),
+            false,
+            'setUserPreferences'
+          );
+        },
+
+        resetUserPreferences: () => {
+          set({ userPreferences: defaultUserPreferences }, false, 'resetUserPreferences');
+        },
+
+        // ========== Feature Flags Actions ==========
+
+        setFeatureFlag: (flag: string, enabled: boolean) => {
+          set(
+            (state) => ({
+              featureFlags: {
+                ...state.featureFlags,
+                [flag]: enabled,
+              },
+            }),
+            false,
+            'setFeatureFlag'
+          );
+        },
+
+        // ========== Bulk Config Actions ==========
+
+        loadConfig: (config: Partial<ConfigState>) => {
+          set(
+            (state) => ({
+              ...state,
+              ...config,
+              // Deep merge nested objects
+              cliTools: config.cliTools || state.cliTools,
+              apiEndpoints: {
+                ...state.apiEndpoints,
+                ...(config.apiEndpoints || {}),
+              },
+              userPreferences: {
+                ...state.userPreferences,
+                ...(config.userPreferences || {}),
+              },
+              featureFlags: {
+                ...state.featureFlags,
+                ...(config.featureFlags || {}),
+              },
+            }),
+            false,
+            'loadConfig'
+          );
+        },
+      }),
+      {
+        name: 'ccw-config-store',
+        // Persist all config state
+        partialize: (state) => ({
+          cliTools: state.cliTools,
+          defaultCliTool: state.defaultCliTool,
+          userPreferences: state.userPreferences,
+          featureFlags: state.featureFlags,
+        }),
+      }
+    ),
+    { name: 'ConfigStore' }
+  )
+);
+
+// Selectors for common access patterns
+export const selectCliTools = (state: ConfigStore) => state.cliTools;
+export const selectDefaultCliTool = (state: ConfigStore) => state.defaultCliTool;
+export const selectApiEndpoints = (state: ConfigStore) => state.apiEndpoints;
+export const selectUserPreferences = (state: ConfigStore) => state.userPreferences;
+export const selectFeatureFlags = (state: ConfigStore) => state.featureFlags;
+
+// Helper to get first enabled CLI tool
+export const getFirstEnabledCliTool = (cliTools: Record<string, CliToolConfig>): string => {
+  const entries = Object.entries(cliTools);
+  const enabled = entries.find(([, config]) => config.enabled);
+  return enabled ? enabled[0] : 'gemini';
+};
diff --git a/ccw/frontend/src/stores/executionStore.ts b/ccw/frontend/src/stores/executionStore.ts
new file mode 100644
index 00000000..4db3c1bc
--- /dev/null
+++ b/ccw/frontend/src/stores/executionStore.ts
@@ -0,0 +1,227 @@
+// ========================================
+// Execution Store
+// ========================================
+// Zustand store for Orchestrator execution state management
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type {
+  ExecutionStore,
+  ExecutionState,
+  ExecutionStatus,
+  NodeExecutionState,
+  ExecutionLog,
+} from '../types/execution';
+
+// Constants
+const MAX_LOGS = 500;
+
+// Initial state
+const initialState = {
+  // Current execution
+  currentExecution: null as ExecutionState | null,
+
+  // Node execution states
+  nodeStates: {} as Record<string, NodeExecutionState>,
+
+  // Execution logs
+  logs: [] as ExecutionLog[],
+  maxLogs: MAX_LOGS,
+
+  // UI state
+  isMonitorExpanded: true,
+  autoScrollLogs: true,
+};
+
+export const useExecutionStore = create<ExecutionStore>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      // ========== Execution Lifecycle ==========
+
+      startExecution: (execId: string, flowId: string) => {
+        const now = new Date().toISOString();
+        set(
+          {
+            currentExecution: {
+              execId,
+              flowId,
+              status: 'running',
+              startedAt: now,
+              elapsedMs: 0,
+            },
+            nodeStates: {},
+            logs: [],
+          },
+          false,
+          'startExecution'
+        );
+      },
+
+      setExecutionStatus: (status: ExecutionStatus, currentNodeId?: string) => {
+        set(
+          (state) => {
+            if (!state.currentExecution) return state;
+            return {
+              currentExecution: {
+                ...state.currentExecution,
+                status,
+                currentNodeId: currentNodeId ?? state.currentExecution.currentNodeId,
+              },
+            };
+          },
+          false,
+          'setExecutionStatus'
+        );
+      },
+
+      completeExecution: (status: 'completed' | 'failed') => {
+        const now = new Date().toISOString();
+        set(
+          (state) => {
+            if (!state.currentExecution) return state;
+            const startTime = new Date(state.currentExecution.startedAt).getTime();
+            const elapsedMs = Date.now() - startTime;
+            return {
+              currentExecution: {
+                ...state.currentExecution,
+                status,
+                completedAt: now,
+                elapsedMs,
+                currentNodeId: undefined,
+              },
+            };
+          },
+          false,
+          'completeExecution'
+        );
+      },
+
+      clearExecution: () => {
+        set(
+          {
+            currentExecution: null,
+            nodeStates: {},
+            logs: [],
+          },
+          false,
+          'clearExecution'
+        );
+      },
+
+      // ========== Node State Updates ==========
+
+      setNodeStarted: (nodeId: string) => {
+        const now = new Date().toISOString();
+        set(
+          (state) => ({
+            nodeStates: {
+              ...state.nodeStates,
+              [nodeId]: {
+                nodeId,
+                status: 'running',
+                startedAt: now,
+              },
+            },
+          }),
+          false,
+          'setNodeStarted'
+        );
+      },
+
+      setNodeCompleted: (nodeId: string, result?: unknown) => {
+        const now = new Date().toISOString();
+        set(
+          (state) => ({
+            nodeStates: {
+              ...state.nodeStates,
+              [nodeId]: {
+                ...state.nodeStates[nodeId],
+                nodeId,
+                status: 'completed',
+                completedAt: now,
+                result,
+              },
+            },
+          }),
+          false,
+          'setNodeCompleted'
+        );
+      },
+
+      setNodeFailed: (nodeId: string, error: string) => {
+        const now = new Date().toISOString();
+        set(
+          (state) => ({
+            nodeStates: {
+              ...state.nodeStates,
+              [nodeId]: {
+                ...state.nodeStates[nodeId],
+                nodeId,
+                status: 'failed',
+                completedAt: now,
+                error,
+              },
+            },
+          }),
+          false,
+          'setNodeFailed'
+        );
+      },
+
+      clearNodeStates: () => {
+        set({ nodeStates: {} }, false, 'clearNodeStates');
+      },
+
+      // ========== Logs ==========
+
+      addLog: (log: ExecutionLog) => {
+        set(
+          (state) => {
+            const newLogs = [...state.logs, log];
+            // Trim logs if exceeding max
+            if (newLogs.length > state.maxLogs) {
+              return { logs: newLogs.slice(-state.maxLogs) };
+            }
+            return { logs: newLogs };
+          },
+          false,
+          'addLog'
+        );
+      },
+
+      clearLogs: () => {
+        set({ logs: [] }, false, 'clearLogs');
+      },
+
+      // ========== UI State ==========
+
+      setMonitorExpanded: (expanded: boolean) => {
+        set({ isMonitorExpanded: expanded }, false, 'setMonitorExpanded');
+      },
+
+      setAutoScrollLogs: (autoScroll: boolean) => {
+        set({ autoScrollLogs: autoScroll }, false, 'setAutoScrollLogs');
+      },
+    }),
+    { name: 'ExecutionStore' }
+  )
+);
+
+// Selectors for common access patterns
+export const selectCurrentExecution = (state: ExecutionStore) => state.currentExecution;
+export const selectNodeStates = (state: ExecutionStore) => state.nodeStates;
+export const selectLogs = (state: ExecutionStore) => state.logs;
+export const selectIsMonitorExpanded = (state: ExecutionStore) => state.isMonitorExpanded;
+export const selectAutoScrollLogs = (state: ExecutionStore) => state.autoScrollLogs;
+
+// Helper to check if execution is active
+export const selectIsExecuting = (state: ExecutionStore) => {
+  return state.currentExecution?.status === 'running';
+};
+
+// Helper to get node status
+export const selectNodeStatus = (nodeId: string) => (state: ExecutionStore) => {
+  return state.nodeStates[nodeId]?.status ?? 'pending';
+};
diff --git a/ccw/frontend/src/stores/flowStore.ts b/ccw/frontend/src/stores/flowStore.ts
new file mode 100644
index 00000000..f53464d7
--- /dev/null
+++ b/ccw/frontend/src/stores/flowStore.ts
@@ -0,0 +1,435 @@
+// ========================================
+// Flow Store
+// ========================================
+// Zustand store for Orchestrator flow editor state management
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type {
+  FlowStore,
+  Flow,
+  FlowNode,
+  FlowEdge,
+  FlowNodeType,
+  NodeData,
+  FlowEdgeData,
+} from '../types/flow';
+import { NODE_TYPE_CONFIGS as nodeConfigs } from '../types/flow';
+
+// Helper to generate unique IDs
+const generateId = (prefix: string): string => {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+};
+
+// API base URL
+const API_BASE = '/api/orchestrator';
+
+// Initial state
+const initialState = {
+  // Current flow
+  currentFlow: null as Flow | null,
+  isModified: false,
+
+  // Nodes and edges
+  nodes: [] as FlowNode[],
+  edges: [] as FlowEdge[],
+
+  // Selection state
+  selectedNodeId: null as string | null,
+  selectedEdgeId: null as string | null,
+
+  // Flow list
+  flows: [] as Flow[],
+  isLoadingFlows: false,
+
+  // UI state
+  isPaletteOpen: true,
+  isPropertyPanelOpen: true,
+};
+
+export const useFlowStore = create<FlowStore>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      // ========== Flow CRUD ==========
+
+      setCurrentFlow: (flow: Flow | null) => {
+        set(
+          {
+            currentFlow: flow,
+            nodes: flow?.nodes ?? [],
+            edges: flow?.edges ?? [],
+            isModified: false,
+            selectedNodeId: null,
+            selectedEdgeId: null,
+          },
+          false,
+          'setCurrentFlow'
+        );
+      },
+
+      createFlow: (name: string, description?: string): Flow => {
+        const flow: Flow = {
+          id: generateId('flow'),
+          name,
+          description,
+          version: 1,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          nodes: [],
+          edges: [],
+          variables: {},
+          metadata: { source: 'custom' },
+        };
+
+        set(
+          {
+            currentFlow: flow,
+            nodes: [],
+            edges: [],
+            isModified: true,
+            selectedNodeId: null,
+            selectedEdgeId: null,
+          },
+          false,
+          'createFlow'
+        );
+
+        return flow;
+      },
+
+      saveFlow: async (): Promise<boolean> => {
+        const { currentFlow, nodes, edges } = get();
+        if (!currentFlow) return false;
+
+        try {
+          const flowToSave: Flow = {
+            ...currentFlow,
+            nodes,
+            edges,
+            updated_at: new Date().toISOString(),
+          };
+
+          const isNew = !get().flows.some((f) => f.id === currentFlow.id);
+          const method = isNew ? 'POST' : 'PUT';
+          const url = isNew
+            ? `${API_BASE}/flows`
+            : `${API_BASE}/flows/${currentFlow.id}`;
+
+          const response = await fetch(url, {
+            method,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(flowToSave),
+          });
+
+          if (!response.ok) {
+            throw new Error(`Failed to save flow: ${response.statusText}`);
+          }
+
+          const savedFlow = await response.json();
+
+          set(
+            (state) => ({
+              currentFlow: savedFlow,
+              isModified: false,
+              flows: isNew
+                ? [...state.flows, savedFlow]
+                : state.flows.map((f) => (f.id === savedFlow.id ? savedFlow : f)),
+            }),
+            false,
+            'saveFlow'
+          );
+
+          return true;
+        } catch (error) {
+          console.error('Error saving flow:', error);
+          return false;
+        }
+      },
+
+      loadFlow: async (id: string): Promise<boolean> => {
+        try {
+          const response = await fetch(`${API_BASE}/flows/${id}`);
+          if (!response.ok) {
+            throw new Error(`Failed to load flow: ${response.statusText}`);
+          }
+
+          const flow: Flow = await response.json();
+
+          set(
+            {
+              currentFlow: flow,
+              nodes: flow.nodes,
+              edges: flow.edges,
+              isModified: false,
+              selectedNodeId: null,
+              selectedEdgeId: null,
+            },
+            false,
+            'loadFlow'
+          );
+
+          return true;
+        } catch (error) {
+          console.error('Error loading flow:', error);
+          return false;
+        }
+      },
+
+      deleteFlow: async (id: string): Promise<boolean> => {
+        try {
+          const response = await fetch(`${API_BASE}/flows/${id}`, {
+            method: 'DELETE',
+          });
+
+          if (!response.ok) {
+            throw new Error(`Failed to delete flow: ${response.statusText}`);
+          }
+
+          set(
+            (state) => ({
+              flows: state.flows.filter((f) => f.id !== id),
+              currentFlow: state.currentFlow?.id === id ? null : state.currentFlow,
+              nodes: state.currentFlow?.id === id ? [] : state.nodes,
+              edges: state.currentFlow?.id === id ? [] : state.edges,
+            }),
+            false,
+            'deleteFlow'
+          );
+
+          return true;
+        } catch (error) {
+          console.error('Error deleting flow:', error);
+          return false;
+        }
+      },
+
+      duplicateFlow: async (id: string): Promise<Flow | null> => {
+        try {
+          const response = await fetch(`${API_BASE}/flows/${id}/duplicate`, {
+            method: 'POST',
+          });
+
+          if (!response.ok) {
+            throw new Error(`Failed to duplicate flow: ${response.statusText}`);
+          }
+
+          const duplicatedFlow: Flow = await response.json();
+
+          set(
+            (state) => ({
+              flows: [...state.flows, duplicatedFlow],
+            }),
+            false,
+            'duplicateFlow'
+          );
+
+          return duplicatedFlow;
+        } catch (error) {
+          console.error('Error duplicating flow:', error);
+          return null;
+        }
+      },
+
+      // ========== Node Operations ==========
+
+      addNode: (type: FlowNodeType, position: { x: number; y: number }): string => {
+        const config = nodeConfigs[type];
+        const id = generateId('node');
+
+        const newNode: FlowNode = {
+          id,
+          type,
+          position,
+          data: { ...config.defaultData },
+        };
+
+        set(
+          (state) => ({
+            nodes: [...state.nodes, newNode],
+            isModified: true,
+            selectedNodeId: id,
+          }),
+          false,
+          'addNode'
+        );
+
+        return id;
+      },
+
+      updateNode: (id: string, data: Partial<NodeData>) => {
+        set(
+          (state) => ({
+            nodes: state.nodes.map((node) =>
+              node.id === id
+                ? { ...node, data: { ...node.data, ...data } as NodeData }
+                : node
+            ),
+            isModified: true,
+          }),
+          false,
+          'updateNode'
+        );
+      },
+
+      removeNode: (id: string) => {
+        set(
+          (state) => ({
+            nodes: state.nodes.filter((node) => node.id !== id),
+            edges: state.edges.filter(
+              (edge) => edge.source !== id && edge.target !== id
+            ),
+            isModified: true,
+            selectedNodeId: state.selectedNodeId === id ? null : state.selectedNodeId,
+          }),
+          false,
+          'removeNode'
+        );
+      },
+
+      setNodes: (nodes: FlowNode[]) => {
+        set({ nodes, isModified: true }, false, 'setNodes');
+      },
+
+      // ========== Edge Operations ==========
+
+      addEdge: (
+        source: string,
+        target: string,
+        sourceHandle?: string,
+        targetHandle?: string
+      ): string => {
+        const id = generateId('edge');
+
+        const newEdge: FlowEdge = {
+          id,
+          source,
+          target,
+          sourceHandle,
+          targetHandle,
+        };
+
+        set(
+          (state) => ({
+            edges: [...state.edges, newEdge],
+            isModified: true,
+          }),
+          false,
+          'addEdge'
+        );
+
+        return id;
+      },
+
+      updateEdge: (id: string, data: Partial<FlowEdgeData>) => {
+        set(
+          (state) => ({
+            edges: state.edges.map((edge) =>
+              edge.id === id ? { ...edge, data: { ...edge.data, ...data } } : edge
+            ),
+            isModified: true,
+          }),
+          false,
+          'updateEdge'
+        );
+      },
+
+      removeEdge: (id: string) => {
+        set(
+          (state) => ({
+            edges: state.edges.filter((edge) => edge.id !== id),
+            isModified: true,
+            selectedEdgeId: state.selectedEdgeId === id ? null : state.selectedEdgeId,
+          }),
+          false,
+          'removeEdge'
+        );
+      },
+
+      setEdges: (edges: FlowEdge[]) => {
+        set({ edges, isModified: true }, false, 'setEdges');
+      },
+
+      // ========== Selection ==========
+
+      setSelectedNodeId: (id: string | null) => {
+        set({ selectedNodeId: id, selectedEdgeId: null }, false, 'setSelectedNodeId');
+      },
+
+      setSelectedEdgeId: (id: string | null) => {
+        set({ selectedEdgeId: id, selectedNodeId: null }, false, 'setSelectedEdgeId');
+      },
+
+      // ========== Flow List ==========
+
+      fetchFlows: async (): Promise<void> => {
+        set({ isLoadingFlows: true }, false, 'fetchFlows/start');
+
+        try {
+          const response = await fetch(`${API_BASE}/flows`);
+          if (!response.ok) {
+            throw new Error(`Failed to fetch flows: ${response.statusText}`);
+          }
+
+          const data = await response.json();
+          const flows: Flow[] = data.flows || [];
+
+          set({ flows, isLoadingFlows: false }, false, 'fetchFlows/success');
+        } catch (error) {
+          console.error('Error fetching flows:', error);
+          set({ isLoadingFlows: false }, false, 'fetchFlows/error');
+        }
+      },
+
+      // ========== UI State ==========
+
+      setIsPaletteOpen: (open: boolean) => {
+        set({ isPaletteOpen: open }, false, 'setIsPaletteOpen');
+      },
+
+      setIsPropertyPanelOpen: (open: boolean) => {
+        set({ isPropertyPanelOpen: open }, false, 'setIsPropertyPanelOpen');
+      },
+
+      // ========== Utility ==========
+
+      resetFlow: () => {
+        set(
+          {
+            currentFlow: null,
+            nodes: [],
+            edges: [],
+            isModified: false,
+            selectedNodeId: null,
+            selectedEdgeId: null,
+          },
+          false,
+          'resetFlow'
+        );
+      },
+
+      getSelectedNode: (): FlowNode | undefined => {
+        const { nodes, selectedNodeId } = get();
+        return nodes.find((node) => node.id === selectedNodeId);
+      },
+
+      markModified: () => {
+        set({ isModified: true }, false, 'markModified');
+      },
+    }),
+    { name: 'FlowStore' }
+  )
+);
+
+// Selectors for common access patterns
+export const selectCurrentFlow = (state: FlowStore) => state.currentFlow;
+export const selectNodes = (state: FlowStore) => state.nodes;
+export const selectEdges = (state: FlowStore) => state.edges;
+export const selectSelectedNodeId = (state: FlowStore) => state.selectedNodeId;
+export const selectSelectedEdgeId = (state: FlowStore) => state.selectedEdgeId;
+export const selectFlows = (state: FlowStore) => state.flows;
+export const selectIsModified = (state: FlowStore) => state.isModified;
+export const selectIsLoadingFlows = (state: FlowStore) => state.isLoadingFlows;
+export const selectIsPaletteOpen = (state: FlowStore) => state.isPaletteOpen;
+export const selectIsPropertyPanelOpen = (state: FlowStore) => state.isPropertyPanelOpen;
diff --git a/ccw/frontend/src/stores/index.ts b/ccw/frontend/src/stores/index.ts
new file mode 100644
index 00000000..2a46d87f
--- /dev/null
+++ b/ccw/frontend/src/stores/index.ts
@@ -0,0 +1,154 @@
+// ========================================
+// Stores Barrel Export
+// ========================================
+// Re-export all stores for convenient imports
+
+// App Store
+export {
+  useAppStore,
+  selectTheme,
+  selectResolvedTheme,
+  selectSidebarOpen,
+  selectCurrentView,
+  selectIsLoading,
+  selectError,
+} from './appStore';
+
+// Workflow Store
+export {
+  useWorkflowStore,
+  selectWorkflowData,
+  selectActiveSessions,
+  selectArchivedSessions,
+  selectActiveSessionId,
+  selectProjectPath,
+  selectFilters,
+  selectSorting,
+} from './workflowStore';
+
+// Config Store
+export {
+  useConfigStore,
+  selectCliTools,
+  selectDefaultCliTool,
+  selectApiEndpoints,
+  selectUserPreferences,
+  selectFeatureFlags,
+  getFirstEnabledCliTool,
+} from './configStore';
+
+// Notification Store
+export {
+  useNotificationStore,
+  selectToasts,
+  selectWsStatus,
+  selectWsLastMessage,
+  selectIsPanelVisible,
+  selectPersistentNotifications,
+  toast,
+} from './notificationStore';
+
+// Flow Store
+export {
+  useFlowStore,
+  selectCurrentFlow,
+  selectNodes,
+  selectEdges,
+  selectSelectedNodeId,
+  selectSelectedEdgeId,
+  selectFlows,
+  selectIsModified,
+  selectIsLoadingFlows,
+  selectIsPaletteOpen,
+  selectIsPropertyPanelOpen,
+} from './flowStore';
+
+// Execution Store
+export {
+  useExecutionStore,
+  selectCurrentExecution,
+  selectNodeStates,
+  selectLogs,
+  selectIsMonitorExpanded,
+  selectAutoScrollLogs,
+  selectIsExecuting,
+  selectNodeStatus,
+} from './executionStore';
+
+// Re-export types for convenience
+export type {
+  // App Store Types
+  AppStore,
+  AppState,
+  AppActions,
+  Theme,
+  ViewMode,
+  SessionFilter,
+  LiteTaskType,
+
+  // Workflow Store Types
+  WorkflowStore,
+  WorkflowState,
+  WorkflowActions,
+  WorkflowData,
+  WorkflowFilters,
+  WorkflowSorting,
+  SessionMetadata,
+  TaskData,
+  LiteTaskSession,
+
+  // Config Store Types
+  ConfigStore,
+  ConfigState,
+  ConfigActions,
+  CliToolConfig,
+  ApiEndpoints,
+  UserPreferences,
+
+  // Notification Store Types
+  NotificationStore,
+  NotificationState,
+  NotificationActions,
+  Toast,
+  ToastType,
+  WebSocketStatus,
+  WebSocketMessage,
+} from '../types/store';
+
+// Execution Types
+export type {
+  ExecutionStatus,
+  NodeExecutionStatus,
+  LogLevel,
+  ExecutionLog,
+  NodeExecutionState,
+  ExecutionState,
+  OrchestratorWebSocketMessage,
+  ExecutionStore,
+  ExecutionStoreState,
+  ExecutionStoreActions,
+  FlowTemplate,
+  TemplateInstallRequest,
+  TemplateExportRequest,
+} from '../types/execution';
+
+// Flow Types
+export type {
+  FlowNodeType,
+  SlashCommandNodeData,
+  FileOperationNodeData,
+  ConditionalNodeData,
+  ParallelNodeData,
+  NodeData,
+  FlowNode,
+  FlowEdge,
+  FlowEdgeData,
+  Flow,
+  FlowMetadata,
+  FlowState,
+  FlowActions,
+  FlowStore,
+  NodeTypeConfig,
+} from '../types/flow';
+
+export { NODE_TYPE_CONFIGS } from '../types/flow';
diff --git a/ccw/frontend/src/stores/notificationStore.ts b/ccw/frontend/src/stores/notificationStore.ts
new file mode 100644
index 00000000..edc422f2
--- /dev/null
+++ b/ccw/frontend/src/stores/notificationStore.ts
@@ -0,0 +1,257 @@
+// ========================================
+// Notification Store
+// ========================================
+// Manages toasts, WebSocket connection status, and persistent notifications
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type {
+  NotificationStore,
+  NotificationState,
+  Toast,
+  WebSocketStatus,
+  WebSocketMessage,
+} from '../types/store';
+
+// Constants
+const NOTIFICATION_STORAGE_KEY = 'ccw_notifications';
+const NOTIFICATION_MAX_STORED = 100;
+const NOTIFICATION_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+
+// Helper to generate unique ID
+const generateId = (): string => {
+  return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+// Helper to load notifications from localStorage
+const loadFromStorage = (): Toast[] => {
+  if (typeof window === 'undefined') return [];
+
+  try {
+    const stored = localStorage.getItem(NOTIFICATION_STORAGE_KEY);
+    if (stored) {
+      const parsed: Toast[] = JSON.parse(stored);
+      // Filter out notifications older than max age
+      const cutoffTime = Date.now() - NOTIFICATION_MAX_AGE_MS;
+      return parsed.filter((n) => new Date(n.timestamp).getTime() > cutoffTime);
+    }
+  } catch (e) {
+    console.error('[NotificationStore] Failed to load from storage:', e);
+  }
+  return [];
+};
+
+// Helper to save notifications to localStorage
+const saveToStorage = (notifications: Toast[]): void => {
+  if (typeof window === 'undefined') return;
+
+  try {
+    // Keep only the last N notifications
+    const toSave = notifications.slice(0, NOTIFICATION_MAX_STORED);
+    localStorage.setItem(NOTIFICATION_STORAGE_KEY, JSON.stringify(toSave));
+  } catch (e) {
+    console.error('[NotificationStore] Failed to save to storage:', e);
+  }
+};
+
+// Initial state
+const initialState: NotificationState = {
+  // Toast queue (ephemeral, UI-only)
+  toasts: [],
+  maxToasts: 5,
+
+  // WebSocket status
+  wsStatus: 'disconnected',
+  wsLastMessage: null,
+  wsReconnectAttempts: 0,
+
+  // Notification panel
+  isPanelVisible: false,
+
+  // Persistent notifications (stored in localStorage)
+  persistentNotifications: [],
+};
+
+export const useNotificationStore = create<NotificationStore>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      // ========== Toast Actions ==========
+
+      addToast: (toast: Omit<Toast, 'id' | 'timestamp'>): string => {
+        const id = generateId();
+        const newToast: Toast = {
+          ...toast,
+          id,
+          timestamp: new Date().toISOString(),
+          dismissible: toast.dismissible ?? true,
+          duration: toast.duration ?? 5000, // Default 5 seconds
+        };
+
+        set(
+          (state) => {
+            const { maxToasts } = state;
+            // Add new toast at the end, remove oldest if over limit
+            let newToasts = [...state.toasts, newToast];
+            if (newToasts.length > maxToasts) {
+              newToasts = newToasts.slice(-maxToasts);
+            }
+            return { toasts: newToasts };
+          },
+          false,
+          'addToast'
+        );
+
+        // Auto-remove after duration (if not persistent)
+        if (newToast.duration && newToast.duration > 0) {
+          setTimeout(() => {
+            get().removeToast(id);
+          }, newToast.duration);
+        }
+
+        return id;
+      },
+
+      removeToast: (id: string) => {
+        set(
+          (state) => ({
+            toasts: state.toasts.filter((t) => t.id !== id),
+          }),
+          false,
+          'removeToast'
+        );
+      },
+
+      clearAllToasts: () => {
+        set({ toasts: [] }, false, 'clearAllToasts');
+      },
+
+      // ========== WebSocket Status Actions ==========
+
+      setWsStatus: (status: WebSocketStatus) => {
+        set({ wsStatus: status }, false, 'setWsStatus');
+      },
+
+      setWsLastMessage: (message: WebSocketMessage | null) => {
+        set({ wsLastMessage: message }, false, 'setWsLastMessage');
+      },
+
+      incrementReconnectAttempts: () => {
+        set(
+          (state) => ({
+            wsReconnectAttempts: state.wsReconnectAttempts + 1,
+          }),
+          false,
+          'incrementReconnectAttempts'
+        );
+      },
+
+      resetReconnectAttempts: () => {
+        set({ wsReconnectAttempts: 0 }, false, 'resetReconnectAttempts');
+      },
+
+      // ========== Notification Panel Actions ==========
+
+      togglePanel: () => {
+        set(
+          (state) => ({
+            isPanelVisible: !state.isPanelVisible,
+          }),
+          false,
+          'togglePanel'
+        );
+      },
+
+      setPanelVisible: (visible: boolean) => {
+        set({ isPanelVisible: visible }, false, 'setPanelVisible');
+      },
+
+      // ========== Persistent Notification Actions ==========
+
+      addPersistentNotification: (notification: Omit<Toast, 'id' | 'timestamp'>) => {
+        const id = generateId();
+        const newNotification: Toast = {
+          ...notification,
+          id,
+          timestamp: new Date().toISOString(),
+          dismissible: notification.dismissible ?? true,
+        };
+
+        set(
+          (state) => ({
+            persistentNotifications: [newNotification, ...state.persistentNotifications],
+          }),
+          false,
+          'addPersistentNotification'
+        );
+
+        // Also save to localStorage
+        const state = get();
+        saveToStorage(state.persistentNotifications);
+      },
+
+      removePersistentNotification: (id: string) => {
+        set(
+          (state) => ({
+            persistentNotifications: state.persistentNotifications.filter((n) => n.id !== id),
+          }),
+          false,
+          'removePersistentNotification'
+        );
+
+        // Also save to localStorage
+        const state = get();
+        saveToStorage(state.persistentNotifications);
+      },
+
+      clearPersistentNotifications: () => {
+        set({ persistentNotifications: [] }, false, 'clearPersistentNotifications');
+
+        // Also clear localStorage
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem(NOTIFICATION_STORAGE_KEY);
+        }
+      },
+
+      loadPersistentNotifications: () => {
+        const loaded = loadFromStorage();
+        set({ persistentNotifications: loaded }, false, 'loadPersistentNotifications');
+      },
+
+      savePersistentNotifications: () => {
+        const state = get();
+        saveToStorage(state.persistentNotifications);
+      },
+    }),
+    { name: 'NotificationStore' }
+  )
+);
+
+// Initialize persistent notifications on store creation
+if (typeof window !== 'undefined') {
+  const loaded = loadFromStorage();
+  if (loaded.length > 0) {
+    useNotificationStore.setState({ persistentNotifications: loaded });
+  }
+}
+
+// Selectors for common access patterns
+export const selectToasts = (state: NotificationStore) => state.toasts;
+export const selectWsStatus = (state: NotificationStore) => state.wsStatus;
+export const selectWsLastMessage = (state: NotificationStore) => state.wsLastMessage;
+export const selectIsPanelVisible = (state: NotificationStore) => state.isPanelVisible;
+export const selectPersistentNotifications = (state: NotificationStore) =>
+  state.persistentNotifications;
+
+// Helper to create toast shortcuts
+export const toast = {
+  info: (title: string, message?: string) =>
+    useNotificationStore.getState().addToast({ type: 'info', title, message }),
+  success: (title: string, message?: string) =>
+    useNotificationStore.getState().addToast({ type: 'success', title, message }),
+  warning: (title: string, message?: string) =>
+    useNotificationStore.getState().addToast({ type: 'warning', title, message }),
+  error: (title: string, message?: string) =>
+    useNotificationStore.getState().addToast({ type: 'error', title, message, duration: 0 }),
+};
diff --git a/ccw/frontend/src/stores/workflowStore.ts b/ccw/frontend/src/stores/workflowStore.ts
new file mode 100644
index 00000000..c2110d77
--- /dev/null
+++ b/ccw/frontend/src/stores/workflowStore.ts
@@ -0,0 +1,477 @@
+// ========================================
+// Workflow Store
+// ========================================
+// Manages workflow sessions, tasks, and related data
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import type {
+  WorkflowStore,
+  WorkflowState,
+  SessionMetadata,
+  TaskData,
+  LiteTaskSession,
+  WorkflowFilters,
+  WorkflowSorting,
+} from '../types/store';
+
+// Helper to generate session key from ID
+const sessionKey = (sessionId: string): string => {
+  return `session-${sessionId}`.replace(/[^a-zA-Z0-9-]/g, '-');
+};
+
+// Default filters
+const defaultFilters: WorkflowFilters = {
+  status: null,
+  search: '',
+  dateRange: { start: null, end: null },
+};
+
+// Default sorting
+const defaultSorting: WorkflowSorting = {
+  field: 'created_at',
+  direction: 'desc',
+};
+
+// Initial state
+const initialState: WorkflowState = {
+  // Core data
+  workflowData: {
+    activeSessions: [],
+    archivedSessions: [],
+  },
+  projectPath: '',
+  recentPaths: [],
+  serverPlatform: 'win32',
+
+  // Data stores
+  sessionDataStore: {},
+  liteTaskDataStore: {},
+  taskJsonStore: {},
+
+  // Active session
+  activeSessionId: null,
+
+  // Filters and sorting
+  filters: defaultFilters,
+  sorting: defaultSorting,
+};
+
+export const useWorkflowStore = create<WorkflowStore>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      // ========== Session Actions ==========
+
+      setSessions: (active: SessionMetadata[], archived: SessionMetadata[]) => {
+        const sessionDataStore: Record<string, SessionMetadata> = {};
+
+        // Build sessionDataStore from both arrays
+        [...active, ...archived].forEach((session) => {
+          const key = sessionKey(session.session_id);
+          sessionDataStore[key] = session;
+        });
+
+        set(
+          {
+            workflowData: {
+              activeSessions: active,
+              archivedSessions: archived,
+            },
+            sessionDataStore,
+          },
+          false,
+          'setSessions'
+        );
+      },
+
+      addSession: (session: SessionMetadata) => {
+        const key = sessionKey(session.session_id);
+
+        set(
+          (state) => ({
+            workflowData: {
+              ...state.workflowData,
+              activeSessions: [...state.workflowData.activeSessions, session],
+            },
+            sessionDataStore: {
+              ...state.sessionDataStore,
+              [key]: session,
+            },
+          }),
+          false,
+          'addSession'
+        );
+      },
+
+      updateSession: (sessionId: string, updates: Partial<SessionMetadata>) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const session = state.sessionDataStore[key];
+            if (!session) return state;
+
+            const updatedSession = { ...session, ...updates, updated_at: new Date().toISOString() };
+
+            // Update in the appropriate array
+            const isActive = session.location === 'active';
+            const targetArray = isActive ? 'activeSessions' : 'archivedSessions';
+
+            return {
+              sessionDataStore: {
+                ...state.sessionDataStore,
+                [key]: updatedSession,
+              },
+              workflowData: {
+                ...state.workflowData,
+                [targetArray]: state.workflowData[targetArray].map((s) =>
+                  s.session_id === sessionId ? updatedSession : s
+                ),
+              },
+            };
+          },
+          false,
+          'updateSession'
+        );
+      },
+
+      removeSession: (sessionId: string) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const { [key]: removed, ...remainingStore } = state.sessionDataStore;
+
+            return {
+              sessionDataStore: remainingStore,
+              workflowData: {
+                activeSessions: state.workflowData.activeSessions.filter(
+                  (s) => s.session_id !== sessionId
+                ),
+                archivedSessions: state.workflowData.archivedSessions.filter(
+                  (s) => s.session_id !== sessionId
+                ),
+              },
+            };
+          },
+          false,
+          'removeSession'
+        );
+      },
+
+      archiveSession: (sessionId: string) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const session = state.sessionDataStore[key];
+            if (!session || session.location === 'archived') return state;
+
+            const archivedSession: SessionMetadata = {
+              ...session,
+              location: 'archived',
+              status: 'archived',
+              updated_at: new Date().toISOString(),
+            };
+
+            return {
+              sessionDataStore: {
+                ...state.sessionDataStore,
+                [key]: archivedSession,
+              },
+              workflowData: {
+                activeSessions: state.workflowData.activeSessions.filter(
+                  (s) => s.session_id !== sessionId
+                ),
+                archivedSessions: [...state.workflowData.archivedSessions, archivedSession],
+              },
+            };
+          },
+          false,
+          'archiveSession'
+        );
+      },
+
+      // ========== Task Actions ==========
+
+      addTask: (sessionId: string, task: TaskData) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const session = state.sessionDataStore[key];
+            if (!session) return state;
+
+            // Check for duplicate
+            const existingTask = session.tasks?.find((t) => t.task_id === task.task_id);
+            if (existingTask) return state;
+
+            const updatedSession: SessionMetadata = {
+              ...session,
+              tasks: [...(session.tasks || []), task],
+              updated_at: new Date().toISOString(),
+            };
+
+            return {
+              sessionDataStore: {
+                ...state.sessionDataStore,
+                [key]: updatedSession,
+              },
+            };
+          },
+          false,
+          'addTask'
+        );
+      },
+
+      updateTask: (sessionId: string, taskId: string, updates: Partial<TaskData>) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const session = state.sessionDataStore[key];
+            if (!session?.tasks) return state;
+
+            const updatedTasks = session.tasks.map((task) =>
+              task.task_id === taskId
+                ? { ...task, ...updates, updated_at: new Date().toISOString() }
+                : task
+            );
+
+            const updatedSession: SessionMetadata = {
+              ...session,
+              tasks: updatedTasks,
+              updated_at: new Date().toISOString(),
+            };
+
+            return {
+              sessionDataStore: {
+                ...state.sessionDataStore,
+                [key]: updatedSession,
+              },
+            };
+          },
+          false,
+          'updateTask'
+        );
+      },
+
+      removeTask: (sessionId: string, taskId: string) => {
+        const key = sessionKey(sessionId);
+
+        set(
+          (state) => {
+            const session = state.sessionDataStore[key];
+            if (!session?.tasks) return state;
+
+            const updatedSession: SessionMetadata = {
+              ...session,
+              tasks: session.tasks.filter((t) => t.task_id !== taskId),
+              updated_at: new Date().toISOString(),
+            };
+
+            return {
+              sessionDataStore: {
+                ...state.sessionDataStore,
+                [key]: updatedSession,
+              },
+            };
+          },
+          false,
+          'removeTask'
+        );
+      },
+
+      // ========== Lite Task Actions ==========
+
+      setLiteTaskSession: (key: string, session: LiteTaskSession) => {
+        set(
+          (state) => ({
+            liteTaskDataStore: {
+              ...state.liteTaskDataStore,
+              [key]: session,
+            },
+          }),
+          false,
+          'setLiteTaskSession'
+        );
+      },
+
+      removeLiteTaskSession: (key: string) => {
+        set(
+          (state) => {
+            const { [key]: removed, ...remaining } = state.liteTaskDataStore;
+            return { liteTaskDataStore: remaining };
+          },
+          false,
+          'removeLiteTaskSession'
+        );
+      },
+
+      // ========== Task JSON Store ==========
+
+      setTaskJson: (key: string, data: unknown) => {
+        set(
+          (state) => ({
+            taskJsonStore: {
+              ...state.taskJsonStore,
+              [key]: data,
+            },
+          }),
+          false,
+          'setTaskJson'
+        );
+      },
+
+      removeTaskJson: (key: string) => {
+        set(
+          (state) => {
+            const { [key]: removed, ...remaining } = state.taskJsonStore;
+            return { taskJsonStore: remaining };
+          },
+          false,
+          'removeTaskJson'
+        );
+      },
+
+      // ========== Active Session ==========
+
+      setActiveSessionId: (sessionId: string | null) => {
+        set({ activeSessionId: sessionId }, false, 'setActiveSessionId');
+      },
+
+      // ========== Project Path ==========
+
+      setProjectPath: (path: string) => {
+        set({ projectPath: path }, false, 'setProjectPath');
+      },
+
+      addRecentPath: (path: string) => {
+        set(
+          (state) => {
+            // Remove if exists, add to front
+            const filtered = state.recentPaths.filter((p) => p !== path);
+            const updated = [path, ...filtered].slice(0, 10); // Keep max 10
+            return { recentPaths: updated };
+          },
+          false,
+          'addRecentPath'
+        );
+      },
+
+      setServerPlatform: (platform: 'win32' | 'darwin' | 'linux') => {
+        set({ serverPlatform: platform }, false, 'setServerPlatform');
+      },
+
+      // ========== Filters and Sorting ==========
+
+      setFilters: (filters: Partial<WorkflowFilters>) => {
+        set(
+          (state) => ({
+            filters: { ...state.filters, ...filters },
+          }),
+          false,
+          'setFilters'
+        );
+      },
+
+      setSorting: (sorting: Partial<WorkflowSorting>) => {
+        set(
+          (state) => ({
+            sorting: { ...state.sorting, ...sorting },
+          }),
+          false,
+          'setSorting'
+        );
+      },
+
+      resetFilters: () => {
+        set({ filters: defaultFilters, sorting: defaultSorting }, false, 'resetFilters');
+      },
+
+      // ========== Computed Selectors ==========
+
+      getActiveSession: () => {
+        const { activeSessionId, sessionDataStore } = get();
+        if (!activeSessionId) return null;
+        const key = sessionKey(activeSessionId);
+        return sessionDataStore[key] || null;
+      },
+
+      getFilteredSessions: () => {
+        const { workflowData, filters, sorting } = get();
+
+        // Combine active and archived based on filter
+        let sessions = [...workflowData.activeSessions, ...workflowData.archivedSessions];
+
+        // Apply status filter
+        if (filters.status && filters.status.length > 0) {
+          sessions = sessions.filter((s) => filters.status!.includes(s.status));
+        }
+
+        // Apply search filter
+        if (filters.search) {
+          const searchLower = filters.search.toLowerCase();
+          sessions = sessions.filter(
+            (s) =>
+              s.session_id.toLowerCase().includes(searchLower) ||
+              s.title?.toLowerCase().includes(searchLower) ||
+              s.description?.toLowerCase().includes(searchLower)
+          );
+        }
+
+        // Apply date range filter
+        if (filters.dateRange.start || filters.dateRange.end) {
+          sessions = sessions.filter((s) => {
+            const createdAt = new Date(s.created_at);
+            if (filters.dateRange.start && createdAt < filters.dateRange.start) return false;
+            if (filters.dateRange.end && createdAt > filters.dateRange.end) return false;
+            return true;
+          });
+        }
+
+        // Apply sorting
+        sessions.sort((a, b) => {
+          let comparison = 0;
+
+          switch (sorting.field) {
+            case 'created_at':
+              comparison = new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+              break;
+            case 'updated_at':
+              comparison =
+                new Date(a.updated_at || a.created_at).getTime() -
+                new Date(b.updated_at || b.created_at).getTime();
+              break;
+            case 'title':
+              comparison = (a.title || a.session_id).localeCompare(b.title || b.session_id);
+              break;
+            case 'status':
+              comparison = a.status.localeCompare(b.status);
+              break;
+          }
+
+          return sorting.direction === 'desc' ? -comparison : comparison;
+        });
+
+        return sessions;
+      },
+
+      getSessionByKey: (key: string) => {
+        return get().sessionDataStore[key];
+      },
+    }),
+    { name: 'WorkflowStore' }
+  )
+);
+
+// Selectors for common access patterns
+export const selectWorkflowData = (state: WorkflowStore) => state.workflowData;
+export const selectActiveSessions = (state: WorkflowStore) => state.workflowData.activeSessions;
+export const selectArchivedSessions = (state: WorkflowStore) => state.workflowData.archivedSessions;
+export const selectActiveSessionId = (state: WorkflowStore) => state.activeSessionId;
+export const selectProjectPath = (state: WorkflowStore) => state.projectPath;
+export const selectFilters = (state: WorkflowStore) => state.filters;
+export const selectSorting = (state: WorkflowStore) => state.sorting;
diff --git a/ccw/frontend/src/types/execution.ts b/ccw/frontend/src/types/execution.ts
new file mode 100644
index 00000000..38206423
--- /dev/null
+++ b/ccw/frontend/src/types/execution.ts
@@ -0,0 +1,214 @@
+// ========================================
+// Execution Types
+// ========================================
+// TypeScript interfaces for Orchestrator execution monitoring
+
+import { z } from 'zod';
+
+// ========== Execution Status ==========
+
+export type ExecutionStatus = 'pending' | 'running' | 'paused' | 'completed' | 'failed';
+
+export type NodeExecutionStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+// ========== Log Types ==========
+
+export type LogLevel = 'info' | 'warn' | 'error' | 'debug';
+
+export interface ExecutionLog {
+  timestamp: string;
+  level: LogLevel;
+  nodeId?: string;
+  message: string;
+}
+
+// ========== Node Execution State ==========
+
+export interface NodeExecutionState {
+  nodeId: string;
+  status: NodeExecutionStatus;
+  startedAt?: string;
+  completedAt?: string;
+  result?: unknown;
+  error?: string;
+}
+
+// ========== Execution State ==========
+
+export interface ExecutionState {
+  execId: string;
+  flowId: string;
+  status: ExecutionStatus;
+  currentNodeId?: string;
+  startedAt: string;
+  completedAt?: string;
+  elapsedMs: number;
+}
+
+// ========== WebSocket Message Types ==========
+
+// Server-side message type definitions (matching websocket.ts)
+export interface OrchestratorStateUpdateMessage {
+  type: 'ORCHESTRATOR_STATE_UPDATE';
+  execId: string;
+  status: ExecutionStatus;
+  currentNodeId?: string;
+  timestamp: string;
+}
+
+export interface OrchestratorNodeStartedMessage {
+  type: 'ORCHESTRATOR_NODE_STARTED';
+  execId: string;
+  nodeId: string;
+  timestamp: string;
+}
+
+export interface OrchestratorNodeCompletedMessage {
+  type: 'ORCHESTRATOR_NODE_COMPLETED';
+  execId: string;
+  nodeId: string;
+  result?: unknown;
+  timestamp: string;
+}
+
+export interface OrchestratorNodeFailedMessage {
+  type: 'ORCHESTRATOR_NODE_FAILED';
+  execId: string;
+  nodeId: string;
+  error: string;
+  timestamp: string;
+}
+
+export interface OrchestratorLogMessage {
+  type: 'ORCHESTRATOR_LOG';
+  execId: string;
+  log: ExecutionLog;
+  timestamp: string;
+}
+
+// Union type for all orchestrator WebSocket messages
+export type OrchestratorWebSocketMessage =
+  | OrchestratorStateUpdateMessage
+  | OrchestratorNodeStartedMessage
+  | OrchestratorNodeCompletedMessage
+  | OrchestratorNodeFailedMessage
+  | OrchestratorLogMessage;
+
+// ========== Zod Schemas for WebSocket Validation ==========
+
+const ExecutionStatusSchema = z.enum(['pending', 'running', 'paused', 'completed', 'failed']);
+
+const ExecutionLogSchema = z.object({
+  timestamp: z.string(),
+  level: z.enum(['info', 'warn', 'error', 'debug']),
+  nodeId: z.string().optional(),
+  message: z.string(),
+});
+
+export const OrchestratorMessageSchema = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('ORCHESTRATOR_STATE_UPDATE'),
+    execId: z.string(),
+    status: ExecutionStatusSchema,
+    currentNodeId: z.string().optional(),
+    timestamp: z.string(),
+  }),
+  z.object({
+    type: z.literal('ORCHESTRATOR_NODE_STARTED'),
+    execId: z.string(),
+    nodeId: z.string(),
+    timestamp: z.string(),
+  }),
+  z.object({
+    type: z.literal('ORCHESTRATOR_NODE_COMPLETED'),
+    execId: z.string(),
+    nodeId: z.string(),
+    result: z.unknown().optional(),
+    timestamp: z.string(),
+  }),
+  z.object({
+    type: z.literal('ORCHESTRATOR_NODE_FAILED'),
+    execId: z.string(),
+    nodeId: z.string(),
+    error: z.string(),
+    timestamp: z.string(),
+  }),
+  z.object({
+    type: z.literal('ORCHESTRATOR_LOG'),
+    execId: z.string(),
+    log: ExecutionLogSchema,
+    timestamp: z.string(),
+  }),
+]);
+
+// ========== Execution Store Types ==========
+
+export interface ExecutionStoreState {
+  // Current execution
+  currentExecution: ExecutionState | null;
+
+  // Node execution states
+  nodeStates: Record<string, NodeExecutionState>;
+
+  // Execution logs
+  logs: ExecutionLog[];
+  maxLogs: number;
+
+  // UI state
+  isMonitorExpanded: boolean;
+  autoScrollLogs: boolean;
+}
+
+export interface ExecutionStoreActions {
+  // Execution lifecycle
+  startExecution: (execId: string, flowId: string) => void;
+  setExecutionStatus: (status: ExecutionStatus, currentNodeId?: string) => void;
+  completeExecution: (status: 'completed' | 'failed') => void;
+  clearExecution: () => void;
+
+  // Node state updates
+  setNodeStarted: (nodeId: string) => void;
+  setNodeCompleted: (nodeId: string, result?: unknown) => void;
+  setNodeFailed: (nodeId: string, error: string) => void;
+  clearNodeStates: () => void;
+
+  // Logs
+  addLog: (log: ExecutionLog) => void;
+  clearLogs: () => void;
+
+  // UI state
+  setMonitorExpanded: (expanded: boolean) => void;
+  setAutoScrollLogs: (autoScroll: boolean) => void;
+}
+
+export type ExecutionStore = ExecutionStoreState & ExecutionStoreActions;
+
+// ========== Template Types ==========
+
+export interface FlowTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  category?: string;
+  tags?: string[];
+  preview?: string; // Base64 preview image or ASCII art
+  author?: string;
+  version: string;
+  created_at: string;
+  updated_at: string;
+  nodeCount: number;
+  edgeCount: number;
+}
+
+export interface TemplateInstallRequest {
+  templateId: string;
+  name?: string; // Optional custom name for the installed flow
+}
+
+export interface TemplateExportRequest {
+  flowId: string;
+  name: string;
+  description?: string;
+  category?: string;
+  tags?: string[];
+}
diff --git a/ccw/frontend/src/types/flow.ts b/ccw/frontend/src/types/flow.ts
new file mode 100644
index 00000000..74c84b1d
--- /dev/null
+++ b/ccw/frontend/src/types/flow.ts
@@ -0,0 +1,240 @@
+// ========================================
+// Flow Types
+// ========================================
+// TypeScript interfaces for Orchestrator flow editor
+
+import type { Node, Edge } from '@xyflow/react';
+
+// ========== Node Types ==========
+
+export type FlowNodeType = 'slash-command' | 'file-operation' | 'conditional' | 'parallel';
+
+// Execution status for nodes during workflow execution
+export type ExecutionStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+// Base interface for all node data - must have index signature for React Flow compatibility
+interface BaseNodeData {
+  label: string;
+  executionStatus?: ExecutionStatus;
+  executionError?: string;
+  executionResult?: unknown;
+  [key: string]: unknown;
+}
+
+// Slash Command Node Data
+export interface SlashCommandNodeData extends BaseNodeData {
+  command: string;
+  args?: string;
+  execution: {
+    mode: 'analysis' | 'write';
+    timeout?: number;
+  };
+  contextHint?: string;
+  onError?: 'continue' | 'stop' | 'retry';
+}
+
+// File Operation Node Data
+export interface FileOperationNodeData extends BaseNodeData {
+  operation: 'read' | 'write' | 'append' | 'delete' | 'copy' | 'move';
+  path: string;
+  content?: string;
+  destinationPath?: string;
+  encoding?: 'utf8' | 'ascii' | 'base64';
+  outputVariable?: string;
+  addToContext?: boolean;
+}
+
+// Conditional Node Data
+export interface ConditionalNodeData extends BaseNodeData {
+  condition: string;
+  trueLabel?: string;
+  falseLabel?: string;
+}
+
+// Parallel Node Data
+export interface ParallelNodeData extends BaseNodeData {
+  joinMode: 'all' | 'any' | 'none';
+  branchCount?: number; // Number of parallel branches (default: 2)
+  timeout?: number;
+  failFast?: boolean;
+}
+
+// Union type for all node data
+export type NodeData =
+  | SlashCommandNodeData
+  | FileOperationNodeData
+  | ConditionalNodeData
+  | ParallelNodeData;
+
+// Extended Node type for React Flow
+export type FlowNode = Node<NodeData, FlowNodeType>;
+
+// ========== Edge Types ==========
+
+export interface FlowEdgeData {
+  label?: string;
+  condition?: string;
+  [key: string]: unknown;
+}
+
+export type FlowEdge = Edge<FlowEdgeData>;
+
+// ========== Flow Definition ==========
+
+export interface FlowMetadata {
+  source?: 'template' | 'custom' | 'imported';
+  templateId?: string;
+  tags?: string[];
+  category?: string;
+}
+
+export interface Flow {
+  id: string;
+  name: string;
+  description?: string;
+  version: number;
+  created_at: string;
+  updated_at: string;
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+  variables: Record<string, unknown>;
+  metadata: FlowMetadata;
+}
+
+// ========== Flow Store Types ==========
+
+export interface FlowState {
+  // Current flow
+  currentFlow: Flow | null;
+  isModified: boolean;
+
+  // Nodes and edges (React Flow state)
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+
+  // Selection state
+  selectedNodeId: string | null;
+  selectedEdgeId: string | null;
+
+  // Flow list
+  flows: Flow[];
+  isLoadingFlows: boolean;
+
+  // UI state
+  isPaletteOpen: boolean;
+  isPropertyPanelOpen: boolean;
+}
+
+export interface FlowActions {
+  // Flow CRUD
+  setCurrentFlow: (flow: Flow | null) => void;
+  createFlow: (name: string, description?: string) => Flow;
+  saveFlow: () => Promise<boolean>;
+  loadFlow: (id: string) => Promise<boolean>;
+  deleteFlow: (id: string) => Promise<boolean>;
+  duplicateFlow: (id: string) => Promise<Flow | null>;
+
+  // Node operations
+  addNode: (type: FlowNodeType, position: { x: number; y: number }) => string;
+  updateNode: (id: string, data: Partial<NodeData>) => void;
+  removeNode: (id: string) => void;
+  setNodes: (nodes: FlowNode[]) => void;
+
+  // Edge operations
+  addEdge: (source: string, target: string, sourceHandle?: string, targetHandle?: string) => string;
+  updateEdge: (id: string, data: Partial<FlowEdgeData>) => void;
+  removeEdge: (id: string) => void;
+  setEdges: (edges: FlowEdge[]) => void;
+
+  // Selection
+  setSelectedNodeId: (id: string | null) => void;
+  setSelectedEdgeId: (id: string | null) => void;
+
+  // Flow list
+  fetchFlows: () => Promise<void>;
+
+  // UI state
+  setIsPaletteOpen: (open: boolean) => void;
+  setIsPropertyPanelOpen: (open: boolean) => void;
+
+  // Utility
+  resetFlow: () => void;
+  getSelectedNode: () => FlowNode | undefined;
+  markModified: () => void;
+}
+
+export type FlowStore = FlowState & FlowActions;
+
+// ========== Node Type Configuration ==========
+
+export interface NodeTypeConfig {
+  type: FlowNodeType;
+  label: string;
+  description: string;
+  icon: string;
+  color: string;
+  defaultData: NodeData;
+  handles: {
+    inputs: number;
+    outputs: number;
+  };
+}
+
+export const NODE_TYPE_CONFIGS: Record<FlowNodeType, NodeTypeConfig> = {
+  'slash-command': {
+    type: 'slash-command',
+    label: 'Slash Command',
+    description: 'Execute CCW slash commands',
+    icon: 'Terminal',
+    color: 'bg-blue-500',
+    defaultData: {
+      label: 'New Command',
+      command: '',
+      args: '',
+      execution: { mode: 'analysis' },
+      onError: 'stop',
+    } as SlashCommandNodeData,
+    handles: { inputs: 1, outputs: 1 },
+  },
+  'file-operation': {
+    type: 'file-operation',
+    label: 'File Operation',
+    description: 'Read/write/delete files',
+    icon: 'FileText',
+    color: 'bg-green-500',
+    defaultData: {
+      label: 'File Operation',
+      operation: 'read',
+      path: '',
+      addToContext: false,
+    } as FileOperationNodeData,
+    handles: { inputs: 1, outputs: 1 },
+  },
+  conditional: {
+    type: 'conditional',
+    label: 'Conditional',
+    description: 'Branch based on condition',
+    icon: 'GitBranch',
+    color: 'bg-amber-500',
+    defaultData: {
+      label: 'Condition',
+      condition: '',
+      trueLabel: 'True',
+      falseLabel: 'False',
+    } as ConditionalNodeData,
+    handles: { inputs: 1, outputs: 2 },
+  },
+  parallel: {
+    type: 'parallel',
+    label: 'Parallel',
+    description: 'Execute branches in parallel',
+    icon: 'GitMerge',
+    color: 'bg-purple-500',
+    defaultData: {
+      label: 'Parallel',
+      joinMode: 'all',
+      failFast: false,
+    } as ParallelNodeData,
+    handles: { inputs: 1, outputs: 2 },
+  },
+};
diff --git a/ccw/frontend/src/types/store.ts b/ccw/frontend/src/types/store.ts
new file mode 100644
index 00000000..ebead4e0
--- /dev/null
+++ b/ccw/frontend/src/types/store.ts
@@ -0,0 +1,316 @@
+// ========================================
+// Store Types
+// ========================================
+// TypeScript interfaces for all Zustand stores
+
+// ========== App Store Types ==========
+
+export type Theme = 'light' | 'dark' | 'system';
+export type ViewMode = 'sessions' | 'liteTasks' | 'project-overview' | 'sessionDetail' | 'liteTaskDetail' | 'loop-monitor' | 'issue-manager' | 'orchestrator';
+export type SessionFilter = 'all' | 'active' | 'archived';
+export type LiteTaskType = 'lite-plan' | 'lite-fix' | null;
+
+export interface AppState {
+  // Theme
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+
+  // Sidebar
+  sidebarOpen: boolean;
+  sidebarCollapsed: boolean;
+
+  // View state
+  currentView: ViewMode;
+  currentFilter: SessionFilter;
+  currentLiteType: LiteTaskType;
+  currentSessionDetailKey: string | null;
+
+  // Loading and error states
+  isLoading: boolean;
+  loadingMessage: string | null;
+  error: string | null;
+}
+
+export interface AppActions {
+  // Theme actions
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+
+  // Sidebar actions
+  setSidebarOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+
+  // View actions
+  setCurrentView: (view: ViewMode) => void;
+  setCurrentFilter: (filter: SessionFilter) => void;
+  setCurrentLiteType: (type: LiteTaskType) => void;
+  setCurrentSessionDetailKey: (key: string | null) => void;
+
+  // Loading/error actions
+  setLoading: (loading: boolean, message?: string | null) => void;
+  setError: (error: string | null) => void;
+  clearError: () => void;
+}
+
+export type AppStore = AppState & AppActions;
+
+// ========== Workflow Store Types ==========
+
+export interface SessionMetadata {
+  session_id: string;
+  title?: string;
+  description?: string;
+  status: 'planning' | 'in_progress' | 'completed' | 'archived' | 'paused';
+  created_at: string;
+  updated_at?: string;
+  location: 'active' | 'archived';
+  has_plan?: boolean;
+  plan_updated_at?: string;
+  has_review?: boolean;
+  review?: {
+    dimensions: string[];
+    iterations: string[];
+    fixes: string[];
+  };
+  summaries?: Array<{ task_id: string; content: unknown }>;
+  tasks?: TaskData[];
+}
+
+export interface TaskData {
+  task_id: string;
+  title?: string;
+  description?: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'blocked' | 'skipped';
+  priority?: 'low' | 'medium' | 'high' | 'critical';
+  created_at?: string;
+  updated_at?: string;
+  has_summary?: boolean;
+  depends_on?: string[];
+  estimated_complexity?: string;
+}
+
+export interface LiteTaskSession {
+  session_id: string;
+  type: LiteTaskType;
+  status: string;
+  created_at: string;
+  tasks?: TaskData[];
+}
+
+export interface WorkflowData {
+  activeSessions: SessionMetadata[];
+  archivedSessions: SessionMetadata[];
+}
+
+export interface WorkflowFilters {
+  status: SessionMetadata['status'][] | null;
+  search: string;
+  dateRange: { start: Date | null; end: Date | null };
+}
+
+export interface WorkflowSorting {
+  field: 'created_at' | 'updated_at' | 'title' | 'status';
+  direction: 'asc' | 'desc';
+}
+
+export interface WorkflowState {
+  // Core data
+  workflowData: WorkflowData;
+  projectPath: string;
+  recentPaths: string[];
+  serverPlatform: 'win32' | 'darwin' | 'linux';
+
+  // Data stores (maps)
+  sessionDataStore: Record<string, SessionMetadata>;
+  liteTaskDataStore: Record<string, LiteTaskSession>;
+  taskJsonStore: Record<string, unknown>;
+
+  // Active session
+  activeSessionId: string | null;
+
+  // Filters and sorting
+  filters: WorkflowFilters;
+  sorting: WorkflowSorting;
+}
+
+export interface WorkflowActions {
+  // Session actions
+  setSessions: (active: SessionMetadata[], archived: SessionMetadata[]) => void;
+  addSession: (session: SessionMetadata) => void;
+  updateSession: (sessionId: string, updates: Partial<SessionMetadata>) => void;
+  removeSession: (sessionId: string) => void;
+  archiveSession: (sessionId: string) => void;
+
+  // Task actions
+  addTask: (sessionId: string, task: TaskData) => void;
+  updateTask: (sessionId: string, taskId: string, updates: Partial<TaskData>) => void;
+  removeTask: (sessionId: string, taskId: string) => void;
+
+  // Lite task actions
+  setLiteTaskSession: (key: string, session: LiteTaskSession) => void;
+  removeLiteTaskSession: (key: string) => void;
+
+  // Task JSON store
+  setTaskJson: (key: string, data: unknown) => void;
+  removeTaskJson: (key: string) => void;
+
+  // Active session
+  setActiveSessionId: (sessionId: string | null) => void;
+
+  // Project path
+  setProjectPath: (path: string) => void;
+  addRecentPath: (path: string) => void;
+  setServerPlatform: (platform: 'win32' | 'darwin' | 'linux') => void;
+
+  // Filters and sorting
+  setFilters: (filters: Partial<WorkflowFilters>) => void;
+  setSorting: (sorting: Partial<WorkflowSorting>) => void;
+  resetFilters: () => void;
+
+  // Computed selectors
+  getActiveSession: () => SessionMetadata | null;
+  getFilteredSessions: () => SessionMetadata[];
+  getSessionByKey: (key: string) => SessionMetadata | undefined;
+}
+
+export type WorkflowStore = WorkflowState & WorkflowActions;
+
+// ========== Config Store Types ==========
+
+export interface CliToolConfig {
+  enabled: boolean;
+  primaryModel: string;
+  secondaryModel: string;
+  tags: string[];
+  type: 'builtin' | 'cli-wrapper' | 'api-endpoint';
+  settingsFile?: string;
+}
+
+export interface ApiEndpoints {
+  base: string;
+  sessions: string;
+  tasks: string;
+  loops: string;
+  issues: string;
+  orchestrator: string;
+}
+
+export interface UserPreferences {
+  autoRefresh: boolean;
+  refreshInterval: number; // milliseconds
+  notificationsEnabled: boolean;
+  soundEnabled: boolean;
+  compactView: boolean;
+  showCompletedTasks: boolean;
+  defaultSessionFilter: SessionFilter;
+  defaultSortField: WorkflowSorting['field'];
+  defaultSortDirection: WorkflowSorting['direction'];
+}
+
+export interface ConfigState {
+  // CLI tools configuration
+  cliTools: Record<string, CliToolConfig>;
+  defaultCliTool: string;
+
+  // API endpoints
+  apiEndpoints: ApiEndpoints;
+
+  // User preferences
+  userPreferences: UserPreferences;
+
+  // Feature flags
+  featureFlags: Record<string, boolean>;
+}
+
+export interface ConfigActions {
+  // CLI tools
+  setCliTools: (tools: Record<string, CliToolConfig>) => void;
+  updateCliTool: (toolId: string, updates: Partial<CliToolConfig>) => void;
+  setDefaultCliTool: (toolId: string) => void;
+
+  // API endpoints
+  setApiEndpoints: (endpoints: Partial<ApiEndpoints>) => void;
+
+  // User preferences
+  setUserPreferences: (prefs: Partial<UserPreferences>) => void;
+  resetUserPreferences: () => void;
+
+  // Feature flags
+  setFeatureFlag: (flag: string, enabled: boolean) => void;
+
+  // Bulk config
+  loadConfig: (config: Partial<ConfigState>) => void;
+}
+
+export type ConfigStore = ConfigState & ConfigActions;
+
+// ========== Notification Store Types ==========
+
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+export type WebSocketStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting';
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration?: number; // milliseconds, 0 = persistent
+  timestamp: string;
+  dismissible?: boolean;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface WebSocketMessage {
+  type: string;
+  payload?: unknown;
+  sessionId?: string;
+  entityId?: string;
+  timestamp?: string;
+}
+
+export interface NotificationState {
+  // Toast queue
+  toasts: Toast[];
+  maxToasts: number;
+
+  // WebSocket status
+  wsStatus: WebSocketStatus;
+  wsLastMessage: WebSocketMessage | null;
+  wsReconnectAttempts: number;
+
+  // Notification panel
+  isPanelVisible: boolean;
+
+  // Persistent notifications (stored in localStorage)
+  persistentNotifications: Toast[];
+}
+
+export interface NotificationActions {
+  // Toast actions
+  addToast: (toast: Omit<Toast, 'id' | 'timestamp'>) => string;
+  removeToast: (id: string) => void;
+  clearAllToasts: () => void;
+
+  // WebSocket status
+  setWsStatus: (status: WebSocketStatus) => void;
+  setWsLastMessage: (message: WebSocketMessage | null) => void;
+  incrementReconnectAttempts: () => void;
+  resetReconnectAttempts: () => void;
+
+  // Notification panel
+  togglePanel: () => void;
+  setPanelVisible: (visible: boolean) => void;
+
+  // Persistent notifications
+  addPersistentNotification: (notification: Omit<Toast, 'id' | 'timestamp'>) => void;
+  removePersistentNotification: (id: string) => void;
+  clearPersistentNotifications: () => void;
+  loadPersistentNotifications: () => void;
+  savePersistentNotifications: () => void;
+}
+
+export type NotificationStore = NotificationState & NotificationActions;
diff --git a/ccw/frontend/tailwind.config.js b/ccw/frontend/tailwind.config.js
new file mode 100644
index 00000000..cedffdf5
--- /dev/null
+++ b/ccw/frontend/tailwind.config.js
@@ -0,0 +1,113 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Base colors
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+
+        // Interactive colors
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+          light: "hsl(var(--primary-light))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+
+        // Semantic colors
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+
+        // Sidebar colors
+        sidebar: {
+          background: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+        },
+
+        // State colors
+        hover: "hsl(var(--hover))",
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          light: "hsl(var(--success-light))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          light: "hsl(var(--warning-light))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          light: "hsl(var(--info-light))",
+        },
+        indigo: {
+          DEFAULT: "hsl(var(--indigo))",
+          light: "hsl(var(--indigo-light))",
+        },
+        orange: {
+          DEFAULT: "hsl(var(--orange))",
+          light: "hsl(var(--orange-light))",
+        },
+      },
+
+      fontFamily: {
+        sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
+        mono: ["Consolas", "Monaco", "Courier New", "monospace"],
+      },
+
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        DEFAULT: "0 2px 8px rgb(0 0 0 / 0.08)",
+        md: "0 4px 12px rgb(0 0 0 / 0.1)",
+        lg: "0 8px 24px rgb(0 0 0 / 0.12)",
+      },
+
+      borderRadius: {
+        lg: "0.5rem",
+        md: "0.375rem",
+        sm: "0.25rem",
+      },
+
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
diff --git a/ccw/frontend/tsconfig.json b/ccw/frontend/tsconfig.json
new file mode 100644
index 00000000..131fb44b
--- /dev/null
+++ b/ccw/frontend/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/ccw/frontend/tsconfig.node.json b/ccw/frontend/tsconfig.node.json
new file mode 100644
index 00000000..5956ab82
--- /dev/null
+++ b/ccw/frontend/tsconfig.node.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+
+    /* Project references */
+    "composite": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/ccw/frontend/vite.config.ts b/ccw/frontend/vite.config.ts
new file mode 100644
index 00000000..df21cb36
--- /dev/null
+++ b/ccw/frontend/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3456',
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: 'ws://localhost:3456',
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+})
diff --git a/ccw/src/core/routes/dashboard-routes.ts b/ccw/src/core/routes/dashboard-routes.ts
new file mode 100644
index 00000000..0dde1fec
--- /dev/null
+++ b/ccw/src/core/routes/dashboard-routes.ts
@@ -0,0 +1,103 @@
+/**
+ * Dashboard Routes Module
+ * Provides API endpoints for dashboard initialization and configuration
+ *
+ * Endpoints:
+ * - GET /api/dashboard/init - Returns initial dashboard data (projectPath, recentPaths, platform, initialData)
+ */
+
+import type { RouteContext } from './types.js';
+import { getRecentPaths, normalizePathForDisplay } from '../../utils/path-resolver.js';
+
+/**
+ * Dashboard initialization response structure
+ */
+interface DashboardInitResponse {
+  projectPath: string;
+  recentPaths: string[];
+  platform: string;
+  initialData: {
+    generatedAt: string;
+    activeSessions: unknown[];
+    archivedSessions: unknown[];
+    liteTasks: {
+      litePlan: unknown[];
+      liteFix: unknown[];
+      multiCliPlan: unknown[];
+    };
+    reviewData: {
+      dimensions: Record<string, unknown>;
+    };
+    projectOverview: null;
+    statistics: {
+      totalSessions: number;
+      activeSessions: number;
+      totalTasks: number;
+      completedTasks: number;
+      reviewFindings: number;
+      litePlanCount: number;
+      liteFixCount: number;
+      multiCliPlanCount: number;
+    };
+  };
+}
+
+/**
+ * Handle dashboard routes
+ * @returns true if route was handled, false otherwise
+ */
+export async function handleDashboardRoutes(ctx: RouteContext): Promise<boolean> {
+  const { pathname, req, res, initialPath } = ctx;
+
+  // GET /api/dashboard/init - Return initial dashboard data
+  if (pathname === '/api/dashboard/init' && req.method === 'GET') {
+    try {
+      const response: DashboardInitResponse = {
+        projectPath: normalizePathForDisplay(initialPath),
+        recentPaths: getRecentPaths(),
+        platform: process.platform,
+        initialData: {
+          generatedAt: new Date().toISOString(),
+          activeSessions: [],
+          archivedSessions: [],
+          liteTasks: {
+            litePlan: [],
+            liteFix: [],
+            multiCliPlan: []
+          },
+          reviewData: {
+            dimensions: {}
+          },
+          projectOverview: null,
+          statistics: {
+            totalSessions: 0,
+            activeSessions: 0,
+            totalTasks: 0,
+            completedTasks: 0,
+            reviewFindings: 0,
+            litePlanCount: 0,
+            liteFixCount: 0,
+            multiCliPlanCount: 0
+          }
+        }
+      };
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: response,
+        timestamp: new Date().toISOString()
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: false,
+        error: (error as Error).message
+      }));
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/ccw/src/core/routes/orchestrator-routes.ts b/ccw/src/core/routes/orchestrator-routes.ts
new file mode 100644
index 00000000..b8731f81
--- /dev/null
+++ b/ccw/src/core/routes/orchestrator-routes.ts
@@ -0,0 +1,1688 @@
+/**
+ * Orchestrator Routes Module
+ * CCW Orchestrator System - HTTP API endpoints for Flow CRUD, Execution Control, and Template Management
+ *
+ * Flow Endpoints:
+ * - GET    /api/orchestrator/flows              - List all flows with pagination
+ * - POST   /api/orchestrator/flows              - Create new flow
+ * - GET    /api/orchestrator/flows/:id          - Get flow details
+ * - PUT    /api/orchestrator/flows/:id          - Update flow
+ * - DELETE /api/orchestrator/flows/:id          - Delete flow
+ * - POST   /api/orchestrator/flows/:id/duplicate - Duplicate flow
+ *
+ * Execution Control Endpoints:
+ * - POST   /api/orchestrator/flows/:id/execute        - Start flow execution
+ * - POST   /api/orchestrator/executions/:execId/pause  - Pause execution
+ * - POST   /api/orchestrator/executions/:execId/resume - Resume execution
+ * - POST   /api/orchestrator/executions/:execId/stop   - Stop execution
+ * - GET    /api/orchestrator/executions/:execId        - Get execution state
+ * - GET    /api/orchestrator/executions/:execId/logs   - Get execution logs
+ *
+ * Template Management Endpoints:
+ * - GET    /api/orchestrator/templates          - List local + builtin templates
+ * - GET    /api/orchestrator/templates/remote   - Fetch remote templates from GitHub
+ * - POST   /api/orchestrator/templates/install  - Install template from URL or GitHub
+ * - DELETE /api/orchestrator/templates/:id      - Delete local template
+ * - POST   /api/orchestrator/templates/export   - Export flow as template
+ */
+
+import { join, dirname } from 'path';
+import { randomBytes } from 'crypto';
+import { fileURLToPath } from 'url';
+import type { RouteContext } from './types.js';
+
+// ES Module __dirname equivalent
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// ============================================================================
+// TypeScript Interfaces
+// ============================================================================
+
+/**
+ * Node types supported by the orchestrator
+ */
+export type FlowNodeType = 'slash-command' | 'file-operation' | 'conditional' | 'parallel';
+
+/**
+ * SlashCommand node data
+ */
+export interface SlashCommandNodeData {
+  command: string;
+  args?: string;
+  execution: {
+    mode: 'mainprocess' | 'async';
+    timeout?: number;
+  };
+  contextHint?: string;
+  onError?: 'continue' | 'pause' | 'fail';
+}
+
+/**
+ * FileOperation node data
+ */
+export interface FileOperationNodeData {
+  operation: 'read' | 'write' | 'append' | 'delete' | 'copy' | 'move';
+  path: string;
+  content?: string;
+  destinationPath?: string;
+  encoding?: string;
+  outputVariable?: string;
+  addToContext: boolean;
+}
+
+/**
+ * Conditional node data
+ */
+export interface ConditionalNodeData {
+  condition: string;
+  trueLabel?: string;
+  falseLabel?: string;
+}
+
+/**
+ * Parallel node data
+ */
+export interface ParallelNodeData {
+  joinMode: 'all' | 'any' | 'none';
+  timeout?: number;
+  failFast?: boolean;
+}
+
+/**
+ * Union type for all node data types
+ */
+export type NodeData =
+  | SlashCommandNodeData
+  | FileOperationNodeData
+  | ConditionalNodeData
+  | ParallelNodeData;
+
+/**
+ * Flow node definition
+ */
+export interface FlowNode {
+  id: string;
+  type: FlowNodeType;
+  position: { x: number; y: number };
+  data: NodeData;
+}
+
+/**
+ * Flow edge definition (connection between nodes)
+ */
+export interface FlowEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+  label?: string;
+}
+
+/**
+ * Flow metadata
+ */
+export interface FlowMetadata {
+  author?: string;
+  tags?: string[];
+  source?: 'local' | 'template' | 'imported';
+}
+
+/**
+ * Flow definition - complete workflow graph
+ */
+export interface Flow {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  created_at: string;
+  updated_at: string;
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+  variables: Record<string, unknown>;
+  metadata: FlowMetadata;
+}
+
+/**
+ * Flow create request body
+ */
+interface FlowCreateRequest {
+  name: string;
+  description?: string;
+  version?: string;
+  nodes?: FlowNode[];
+  edges?: FlowEdge[];
+  variables?: Record<string, unknown>;
+  metadata?: FlowMetadata;
+}
+
+/**
+ * Flow update request body
+ */
+interface FlowUpdateRequest {
+  name?: string;
+  description?: string;
+  version?: string;
+  nodes?: FlowNode[];
+  edges?: FlowEdge[];
+  variables?: Record<string, unknown>;
+  metadata?: FlowMetadata;
+}
+
+// ============================================================================
+// Execution State Interfaces (per DESIGN_SPEC.md Section 3.3)
+// ============================================================================
+
+/**
+ * Execution status values
+ */
+export type ExecutionStatus = 'pending' | 'running' | 'paused' | 'completed' | 'failed';
+
+/**
+ * Node execution status values
+ */
+export type NodeExecutionStatus = 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+
+/**
+ * Execution log entry
+ */
+export interface ExecutionLog {
+  timestamp: string;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  nodeId?: string;
+  message: string;
+}
+
+/**
+ * Individual node execution state
+ */
+export interface NodeExecutionState {
+  status: NodeExecutionStatus;
+  startedAt?: string;
+  completedAt?: string;
+  result?: unknown;
+  error?: string;
+}
+
+/**
+ * Full execution state for a flow run
+ */
+export interface ExecutionState {
+  id: string;
+  flowId: string;
+  status: ExecutionStatus;
+  startedAt?: string;
+  completedAt?: string;
+  currentNodeId?: string;
+  variables: Record<string, unknown>;
+  nodeStates: Record<string, NodeExecutionState>;
+  logs: ExecutionLog[];
+}
+
+// ============================================================================
+// Template Interfaces
+// ============================================================================
+
+/**
+ * Template metadata - additional info for templates beyond Flow metadata
+ */
+export interface TemplateMetadata {
+  author: string;
+  category: string;
+  tags: string[];
+  version: string;
+  description: string;
+  source: 'local' | 'builtin' | 'remote';
+  remoteUrl?: string;
+  installedAt?: string;
+}
+
+/**
+ * Template definition - extends Flow with template-specific metadata
+ */
+export interface Template extends Omit<Flow, 'metadata'> {
+  template_metadata: TemplateMetadata;
+}
+
+/**
+ * Remote template index entry (from GitHub)
+ */
+export interface RemoteTemplateEntry {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  author: string;
+  category: string;
+  tags: string[];
+  downloadUrl: string;
+}
+
+/**
+ * Remote template index response
+ */
+export interface RemoteTemplateIndex {
+  version: string;
+  updated_at: string;
+  templates: RemoteTemplateEntry[];
+}
+
+/**
+ * Template install request body
+ */
+interface TemplateInstallRequest {
+  url?: string;
+  templateId?: string;
+}
+
+/**
+ * Template export request body
+ */
+interface TemplateExportRequest {
+  flowId: string;
+  name?: string;
+  author?: string;
+  category?: string;
+  tags?: string[];
+  description?: string;
+}
+
+// ============================================================================
+// Storage Helpers
+// ============================================================================
+
+/**
+ * Generate a unique flow ID
+ * Format: flow-{timestamp}-{random8hex}
+ */
+function generateFlowId(): string {
+  const timestamp = new Date().toISOString().replace(/[-:]/g, '').split('.')[0];
+  const random = randomBytes(4).toString('hex');
+  return `flow-${timestamp}-${random}`;
+}
+
+/**
+ * Get the flows storage directory path
+ */
+function getFlowsDir(workflowDir: string): string {
+  return join(workflowDir, '.workflow', '.orchestrator', 'flows');
+}
+
+/**
+ * Read a single flow from storage
+ */
+async function readFlowStorage(workflowDir: string, flowId: string): Promise<Flow | null> {
+  const { readFile } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const flowsDir = getFlowsDir(workflowDir);
+  const filePath = join(flowsDir, `${flowId}.json`);
+
+  if (!existsSync(filePath)) {
+    return null;
+  }
+
+  try {
+    const content = await readFile(filePath, 'utf-8');
+    return JSON.parse(content) as Flow;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write a flow to storage
+ */
+async function writeFlowStorage(workflowDir: string, flow: Flow): Promise<void> {
+  const { writeFile, mkdir } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const flowsDir = getFlowsDir(workflowDir);
+
+  if (!existsSync(flowsDir)) {
+    await mkdir(flowsDir, { recursive: true });
+  }
+
+  const filePath = join(flowsDir, `${flow.id}.json`);
+  await writeFile(filePath, JSON.stringify(flow, null, 2), 'utf-8');
+}
+
+/**
+ * Delete a flow from storage
+ */
+async function deleteFlowStorage(workflowDir: string, flowId: string): Promise<void> {
+  const { unlink } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const flowsDir = getFlowsDir(workflowDir);
+  const filePath = join(flowsDir, `${flowId}.json`);
+
+  if (existsSync(filePath)) {
+    await unlink(filePath);
+  }
+}
+
+/**
+ * List all flows from storage
+ * Returns flows sorted by updated_at (most recent first)
+ */
+async function listFlows(workflowDir: string): Promise<Flow[]> {
+  const { readdir } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const flowsDir = getFlowsDir(workflowDir);
+
+  if (!existsSync(flowsDir)) {
+    return [];
+  }
+
+  const files = await readdir(flowsDir);
+  const flowFiles = files.filter(f => f.startsWith('flow-') && f.endsWith('.json'));
+
+  const flows: Flow[] = [];
+  for (const file of flowFiles) {
+    const flowId = file.replace('.json', '');
+    const flow = await readFlowStorage(workflowDir, flowId);
+    if (flow) {
+      flows.push(flow);
+    }
+  }
+
+  // Sort by updated_at (most recent first)
+  flows.sort((a, b) =>
+    new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+  );
+
+  return flows;
+}
+
+/**
+ * Validate flow ID format to prevent path traversal
+ */
+function isValidFlowId(id: string): boolean {
+  if (!id) return false;
+  // Block path traversal attempts and null bytes
+  if (id.includes('/') || id.includes('\\') || id === '..' || id === '.') return false;
+  if (id.includes('\0')) return false;
+  // Must start with 'flow-'
+  if (!id.startsWith('flow-')) return false;
+  return true;
+}
+
+// ============================================================================
+// Execution Storage Helpers
+// ============================================================================
+
+/**
+ * Generate a unique execution ID
+ * Format: exec-{timestamp}-{random8hex}
+ */
+function generateExecutionId(): string {
+  const timestamp = new Date().toISOString().replace(/[-:]/g, '').split('.')[0];
+  const random = randomBytes(4).toString('hex');
+  return `exec-${timestamp}-${random}`;
+}
+
+/**
+ * Get the executions storage directory path
+ */
+function getExecutionsDir(workflowDir: string): string {
+  return join(workflowDir, '.workflow', '.orchestrator', 'executions');
+}
+
+/**
+ * Validate execution ID format to prevent path traversal
+ */
+function isValidExecutionId(id: string): boolean {
+  if (!id) return false;
+  // Block path traversal attempts and null bytes
+  if (id.includes('/') || id.includes('\\') || id === '..' || id === '.') return false;
+  if (id.includes('\0')) return false;
+  // Must start with 'exec-'
+  if (!id.startsWith('exec-')) return false;
+  return true;
+}
+
+/**
+ * Read execution state from storage
+ */
+async function readExecutionStorage(workflowDir: string, execId: string): Promise<ExecutionState | null> {
+  const { readFile } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const executionsDir = getExecutionsDir(workflowDir);
+  const filePath = join(executionsDir, execId, 'status.json');
+
+  if (!existsSync(filePath)) {
+    return null;
+  }
+
+  try {
+    const content = await readFile(filePath, 'utf-8');
+    return JSON.parse(content) as ExecutionState;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write execution state to storage
+ */
+async function writeExecutionStorage(workflowDir: string, execution: ExecutionState): Promise<void> {
+  const { writeFile, mkdir } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const executionsDir = getExecutionsDir(workflowDir);
+  const execDir = join(executionsDir, execution.id);
+
+  if (!existsSync(execDir)) {
+    await mkdir(execDir, { recursive: true });
+  }
+
+  const filePath = join(execDir, 'status.json');
+  await writeFile(filePath, JSON.stringify(execution, null, 2), 'utf-8');
+}
+
+/**
+ * Append a log entry to the execution state
+ */
+async function appendExecutionLog(
+  workflowDir: string,
+  execId: string,
+  log: Omit<ExecutionLog, 'timestamp'>
+): Promise<ExecutionState | null> {
+  const execution = await readExecutionStorage(workflowDir, execId);
+  if (!execution) {
+    return null;
+  }
+
+  const logEntry: ExecutionLog = {
+    ...log,
+    timestamp: new Date().toISOString()
+  };
+
+  execution.logs.push(logEntry);
+  await writeExecutionStorage(workflowDir, execution);
+  return execution;
+}
+
+// ============================================================================
+// Template Storage Helpers
+// ============================================================================
+
+/**
+ * GitHub repository configuration for remote templates
+ */
+const GITHUB_CONFIG = {
+  owner: 'anthropics',
+  repo: 'claude-code-workflow',
+  branch: 'main',
+  templatesPath: 'templates/orchestrator'
+};
+
+/**
+ * Remote templates cache with TTL (5 minutes)
+ */
+let remoteTemplatesCache: {
+  data: RemoteTemplateIndex | null;
+  timestamp: number;
+} = { data: null, timestamp: 0 };
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+/**
+ * Generate a unique template ID
+ * Format: tpl-{timestamp}-{random8hex}
+ */
+function generateTemplateId(): string {
+  const timestamp = new Date().toISOString().replace(/[-:]/g, '').split('.')[0];
+  const random = randomBytes(4).toString('hex');
+  return `tpl-${timestamp}-${random}`;
+}
+
+/**
+ * Get the templates storage directory path (local user templates)
+ */
+function getTemplatesDir(workflowDir: string): string {
+  return join(workflowDir, '.workflow', '.orchestrator', 'templates');
+}
+
+/**
+ * Get the builtin templates directory path (shipped with CCW)
+ */
+function getBuiltinTemplatesDir(): string {
+  // Resolve relative to this module's location
+  return join(__dirname, '..', '..', '..', 'templates', 'orchestrator');
+}
+
+/**
+ * Validate template ID format to prevent path traversal
+ */
+function isValidTemplateId(id: string): boolean {
+  if (!id) return false;
+  // Block path traversal attempts and null bytes
+  if (id.includes('/') || id.includes('\\') || id === '..' || id === '.') return false;
+  if (id.includes('\0')) return false;
+  // Must start with 'tpl-' for user templates or be alphanumeric for builtin
+  if (!id.startsWith('tpl-') && !/^[a-zA-Z0-9-]+$/.test(id)) return false;
+  return true;
+}
+
+/**
+ * Read a single template from storage
+ */
+async function readTemplateStorage(workflowDir: string, templateId: string): Promise<Template | null> {
+  const { readFile } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const templatesDir = getTemplatesDir(workflowDir);
+  const filePath = join(templatesDir, `${templateId}.json`);
+
+  if (!existsSync(filePath)) {
+    return null;
+  }
+
+  try {
+    const content = await readFile(filePath, 'utf-8');
+    return JSON.parse(content) as Template;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write a template to storage
+ */
+async function writeTemplateStorage(workflowDir: string, template: Template): Promise<void> {
+  const { writeFile, mkdir } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const templatesDir = getTemplatesDir(workflowDir);
+
+  if (!existsSync(templatesDir)) {
+    await mkdir(templatesDir, { recursive: true });
+  }
+
+  const filePath = join(templatesDir, `${template.id}.json`);
+  await writeFile(filePath, JSON.stringify(template, null, 2), 'utf-8');
+}
+
+/**
+ * Delete a template from storage
+ */
+async function deleteTemplateStorage(workflowDir: string, templateId: string): Promise<void> {
+  const { unlink } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const templatesDir = getTemplatesDir(workflowDir);
+  const filePath = join(templatesDir, `${templateId}.json`);
+
+  if (existsSync(filePath)) {
+    await unlink(filePath);
+  }
+}
+
+/**
+ * List local templates from storage
+ * Returns templates sorted by installedAt (most recent first)
+ */
+async function listLocalTemplates(workflowDir: string): Promise<Template[]> {
+  const { readdir, readFile } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const templatesDir = getTemplatesDir(workflowDir);
+
+  if (!existsSync(templatesDir)) {
+    return [];
+  }
+
+  const files = await readdir(templatesDir);
+  const templateFiles = files.filter(f => f.endsWith('.json'));
+
+  const templates: Template[] = [];
+  for (const file of templateFiles) {
+    const templateId = file.replace('.json', '');
+    const template = await readTemplateStorage(workflowDir, templateId);
+    if (template) {
+      templates.push(template);
+    }
+  }
+
+  // Sort by installedAt (most recent first)
+  templates.sort((a, b) => {
+    const aTime = a.template_metadata?.installedAt ? new Date(a.template_metadata.installedAt).getTime() : 0;
+    const bTime = b.template_metadata?.installedAt ? new Date(b.template_metadata.installedAt).getTime() : 0;
+    return bTime - aTime;
+  });
+
+  return templates;
+}
+
+/**
+ * List builtin templates from CCW installation
+ */
+async function listBuiltinTemplates(): Promise<Template[]> {
+  const { readdir, readFile } = await import('fs/promises');
+  const { existsSync } = await import('fs');
+  const builtinDir = getBuiltinTemplatesDir();
+
+  if (!existsSync(builtinDir)) {
+    return [];
+  }
+
+  const files = await readdir(builtinDir);
+  const templateFiles = files.filter(f => f.endsWith('.json') && f !== 'index.json');
+
+  const templates: Template[] = [];
+  for (const file of templateFiles) {
+    try {
+      const filePath = join(builtinDir, file);
+      const content = await readFile(filePath, 'utf-8');
+      const template = JSON.parse(content) as Template;
+      // Mark as builtin source
+      if (template.template_metadata) {
+        template.template_metadata.source = 'builtin';
+      }
+      templates.push(template);
+    } catch {
+      // Skip invalid template files
+    }
+  }
+
+  return templates;
+}
+
+/**
+ * Fetch remote template index from GitHub
+ * Uses caching to avoid rate limits
+ */
+async function fetchRemoteTemplateIndex(): Promise<RemoteTemplateIndex> {
+  // Check cache
+  const now = Date.now();
+  if (remoteTemplatesCache.data && (now - remoteTemplatesCache.timestamp) < CACHE_TTL_MS) {
+    return remoteTemplatesCache.data;
+  }
+
+  const indexUrl = `https://raw.githubusercontent.com/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/${GITHUB_CONFIG.branch}/${GITHUB_CONFIG.templatesPath}/index.json`;
+
+  try {
+    const response = await fetch(indexUrl);
+    if (!response.ok) {
+      throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);
+    }
+
+    const index = await response.json() as RemoteTemplateIndex;
+
+    // Update cache
+    remoteTemplatesCache = { data: index, timestamp: now };
+
+    return index;
+  } catch (error) {
+    // Return cached data if available, even if expired
+    if (remoteTemplatesCache.data) {
+      return remoteTemplatesCache.data;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Fetch a single template from a URL
+ */
+async function fetchRemoteTemplate(url: string): Promise<Template> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch template: ${response.status} ${response.statusText}`);
+  }
+
+  const template = await response.json() as Template;
+  return template;
+}
+
+/**
+ * Convert a Flow to a Template with metadata
+ */
+function flowToTemplate(
+  flow: Flow,
+  metadata: {
+    author?: string;
+    category?: string;
+    tags?: string[];
+    description?: string;
+  }
+): Template {
+  const now = new Date().toISOString();
+  const templateId = generateTemplateId();
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { metadata: flowMetadata, ...flowWithoutMetadata } = flow;
+
+  return {
+    ...flowWithoutMetadata,
+    id: templateId,
+    template_metadata: {
+      author: metadata.author || flowMetadata?.author || 'Unknown',
+      category: metadata.category || 'General',
+      tags: metadata.tags || flowMetadata?.tags || [],
+      version: flow.version || '1.0.0',
+      description: metadata.description || flow.description || '',
+      source: 'local',
+      installedAt: now
+    }
+  };
+}
+
+// ============================================================================
+// Route Handler
+// ============================================================================
+
+/**
+ * Handle orchestrator routes
+ * @returns true if route was handled, false otherwise
+ */
+export async function handleOrchestratorRoutes(ctx: RouteContext): Promise<boolean> {
+  const { pathname, req, res, initialPath, handlePostRequest, broadcastToClients } = ctx;
+
+  // Get workflow directory from initialPath
+  const workflowDir = initialPath || process.cwd();
+
+  // ==== LIST FLOWS ====
+  // GET /api/orchestrator/flows
+  if (pathname === '/api/orchestrator/flows' && req.method === 'GET') {
+    try {
+      const flows = await listFlows(workflowDir);
+
+      // Parse query params for pagination
+      const url = ctx.url;
+      const limit = parseInt(url.searchParams.get('limit') || '50', 10);
+      const offset = parseInt(url.searchParams.get('offset') || '0', 10);
+
+      // Apply pagination
+      const paginatedFlows = flows.slice(offset, offset + limit);
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: paginatedFlows,
+        total: flows.length,
+        limit,
+        offset,
+        hasMore: offset + limit < flows.length,
+        timestamp: new Date().toISOString()
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== CREATE FLOW ====
+  // POST /api/orchestrator/flows
+  if (pathname === '/api/orchestrator/flows' && req.method === 'POST') {
+    handlePostRequest(req, res, async (body) => {
+      const { name, description, version, nodes, edges, variables, metadata } = body as FlowCreateRequest;
+
+      // Validation
+      if (!name || typeof name !== 'string' || name.trim().length === 0) {
+        return { success: false, error: 'name is required and must be non-empty', status: 400 };
+      }
+
+      try {
+        const flowId = generateFlowId();
+        const now = new Date().toISOString();
+
+        const flow: Flow = {
+          id: flowId,
+          name: name.trim(),
+          description: description?.trim() || '',
+          version: version || '1.0.0',
+          created_at: now,
+          updated_at: now,
+          nodes: nodes || [],
+          edges: edges || [],
+          variables: variables || {},
+          metadata: metadata || { source: 'local' }
+        };
+
+        await writeFlowStorage(workflowDir, flow);
+
+        // Broadcast flow creation
+        try {
+          broadcastToClients({
+            type: 'ORCHESTRATOR_FLOW_CREATED',
+            flow_id: flowId,
+            flow: flow
+          });
+        } catch {
+          // Ignore broadcast errors
+        }
+
+        return { success: true, data: flow };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== DUPLICATE FLOW ====
+  // POST /api/orchestrator/flows/:id/duplicate
+  if (pathname.match(/^\/api\/orchestrator\/flows\/[^/]+\/duplicate$/) && req.method === 'POST') {
+    const flowId = pathname.split('/').slice(-2)[0];
+    if (!flowId || !isValidFlowId(flowId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid flow ID format' }));
+      return true;
+    }
+
+    handlePostRequest(req, res, async (body) => {
+      const { name } = body as { name?: string };
+
+      try {
+        const originalFlow = await readFlowStorage(workflowDir, flowId);
+        if (!originalFlow) {
+          return { success: false, error: 'Flow not found', status: 404 };
+        }
+
+        const newFlowId = generateFlowId();
+        const now = new Date().toISOString();
+
+        const duplicatedFlow: Flow = {
+          ...originalFlow,
+          id: newFlowId,
+          name: name?.trim() || `${originalFlow.name} (Copy)`,
+          created_at: now,
+          updated_at: now,
+          metadata: {
+            ...originalFlow.metadata,
+            source: 'local'
+          }
+        };
+
+        await writeFlowStorage(workflowDir, duplicatedFlow);
+
+        // Broadcast flow duplication
+        try {
+          broadcastToClients({
+            type: 'ORCHESTRATOR_FLOW_DUPLICATED',
+            original_flow_id: flowId,
+            flow_id: newFlowId,
+            flow: duplicatedFlow
+          });
+        } catch {
+          // Ignore broadcast errors
+        }
+
+        return { success: true, data: duplicatedFlow, message: 'Flow duplicated successfully' };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== GET SINGLE FLOW ====
+  // GET /api/orchestrator/flows/:id
+  if (pathname.match(/^\/api\/orchestrator\/flows\/[^/]+$/) && req.method === 'GET') {
+    const flowId = pathname.split('/').pop();
+    if (!flowId || !isValidFlowId(flowId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid flow ID format' }));
+      return true;
+    }
+
+    try {
+      const flow = await readFlowStorage(workflowDir, flowId);
+      if (!flow) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Flow not found' }));
+        return true;
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true, data: flow }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== UPDATE FLOW ====
+  // PUT /api/orchestrator/flows/:id
+  if (pathname.match(/^\/api\/orchestrator\/flows\/[^/]+$/) && req.method === 'PUT') {
+    const flowId = pathname.split('/').pop();
+    if (!flowId || !isValidFlowId(flowId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid flow ID format' }));
+      return true;
+    }
+
+    handlePostRequest(req, res, async (body) => {
+      const { name, description, version, nodes, edges, variables, metadata } = body as FlowUpdateRequest;
+
+      try {
+        const flow = await readFlowStorage(workflowDir, flowId);
+        if (!flow) {
+          return { success: false, error: 'Flow not found', status: 404 };
+        }
+
+        // Apply updates
+        if (name !== undefined) {
+          if (typeof name !== 'string' || name.trim().length === 0) {
+            return { success: false, error: 'name must be a non-empty string', status: 400 };
+          }
+          flow.name = name.trim();
+        }
+
+        if (description !== undefined) {
+          flow.description = typeof description === 'string' ? description.trim() : '';
+        }
+
+        if (version !== undefined) {
+          flow.version = version;
+        }
+
+        if (nodes !== undefined) {
+          if (!Array.isArray(nodes)) {
+            return { success: false, error: 'nodes must be an array', status: 400 };
+          }
+          flow.nodes = nodes;
+        }
+
+        if (edges !== undefined) {
+          if (!Array.isArray(edges)) {
+            return { success: false, error: 'edges must be an array', status: 400 };
+          }
+          flow.edges = edges;
+        }
+
+        if (variables !== undefined) {
+          flow.variables = variables || {};
+        }
+
+        if (metadata !== undefined) {
+          flow.metadata = { ...flow.metadata, ...metadata };
+        }
+
+        flow.updated_at = new Date().toISOString();
+
+        await writeFlowStorage(workflowDir, flow);
+
+        // Broadcast flow update
+        try {
+          broadcastToClients({
+            type: 'ORCHESTRATOR_FLOW_UPDATED',
+            flow_id: flowId,
+            flow: flow
+          });
+        } catch {
+          // Ignore broadcast errors
+        }
+
+        return { success: true, data: flow };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== DELETE FLOW ====
+  // DELETE /api/orchestrator/flows/:id
+  if (pathname.match(/^\/api\/orchestrator\/flows\/[^/]+$/) && req.method === 'DELETE') {
+    const flowId = pathname.split('/').pop();
+    if (!flowId || !isValidFlowId(flowId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid flow ID format' }));
+      return true;
+    }
+
+    try {
+      const flow = await readFlowStorage(workflowDir, flowId);
+      if (!flow) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Flow not found' }));
+        return true;
+      }
+
+      // TODO: Check if flow is currently being executed (future enhancement)
+      // For now, allow deletion regardless of execution state
+
+      await deleteFlowStorage(workflowDir, flowId);
+
+      // Broadcast flow deletion
+      try {
+        broadcastToClients({
+          type: 'ORCHESTRATOR_FLOW_DELETED',
+          flow_id: flowId
+        });
+      } catch {
+        // Ignore broadcast errors
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true, message: 'Flow deleted' }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ============================================================================
+  // Execution Control Endpoints
+  // ============================================================================
+
+  // Helper to broadcast execution state updates
+  const broadcastExecutionStateUpdate = (execution: ExecutionState): void => {
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_STATE_UPDATE',
+        execId: execution.id,
+        status: execution.status,
+        currentNodeId: execution.currentNodeId,
+        timestamp: new Date().toISOString()
+      });
+    } catch {
+      // Ignore broadcast errors
+    }
+  };
+
+  // ==== EXECUTE FLOW ====
+  // POST /api/orchestrator/flows/:id/execute
+  if (pathname.match(/^\/api\/orchestrator\/flows\/[^/]+\/execute$/) && req.method === 'POST') {
+    const flowId = pathname.split('/').slice(-2)[0];
+    if (!flowId || !isValidFlowId(flowId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid flow ID format' }));
+      return true;
+    }
+
+    handlePostRequest(req, res, async (body) => {
+      const { variables: inputVariables } = body as { variables?: Record<string, unknown> };
+
+      try {
+        // Verify flow exists
+        const flow = await readFlowStorage(workflowDir, flowId);
+        if (!flow) {
+          return { success: false, error: 'Flow not found', status: 404 };
+        }
+
+        // Create execution state
+        const execId = generateExecutionId();
+        const now = new Date().toISOString();
+
+        // Initialize node states for all nodes in the flow
+        const nodeStates: Record<string, NodeExecutionState> = {};
+        for (const node of flow.nodes) {
+          nodeStates[node.id] = {
+            status: 'pending'
+          };
+        }
+
+        const execution: ExecutionState = {
+          id: execId,
+          flowId: flowId,
+          status: 'pending',
+          startedAt: now,
+          variables: { ...flow.variables, ...inputVariables },
+          nodeStates,
+          logs: [{
+            timestamp: now,
+            level: 'info',
+            message: `Execution started for flow: ${flow.name}`
+          }]
+        };
+
+        // Save execution state
+        await writeExecutionStorage(workflowDir, execution);
+
+        // Broadcast execution created
+        broadcastExecutionStateUpdate(execution);
+
+        // TODO: Trigger actual flow executor (future enhancement)
+        // For now, just create the execution in pending state
+        // The executor will be implemented in a later task
+
+        return {
+          success: true,
+          data: {
+            execId: execution.id,
+            flowId: execution.flowId,
+            status: execution.status,
+            startedAt: execution.startedAt
+          },
+          message: 'Execution created'
+        };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== PAUSE EXECUTION ====
+  // POST /api/orchestrator/executions/:execId/pause
+  if (pathname.match(/^\/api\/orchestrator\/executions\/[^/]+\/pause$/) && req.method === 'POST') {
+    const execId = pathname.split('/').slice(-2)[0];
+    if (!execId || !isValidExecutionId(execId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid execution ID format' }));
+      return true;
+    }
+
+    try {
+      const execution = await readExecutionStorage(workflowDir, execId);
+      if (!execution) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Execution not found' }));
+        return true;
+      }
+
+      // Can only pause running executions
+      if (execution.status !== 'running') {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: false,
+          error: `Cannot pause execution with status: ${execution.status}`
+        }));
+        return true;
+      }
+
+      // Update status to paused
+      execution.status = 'paused';
+      execution.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        message: 'Execution paused by user'
+      });
+
+      await writeExecutionStorage(workflowDir, execution);
+      broadcastExecutionStateUpdate(execution);
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: execution,
+        message: 'Execution paused'
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== RESUME EXECUTION ====
+  // POST /api/orchestrator/executions/:execId/resume
+  if (pathname.match(/^\/api\/orchestrator\/executions\/[^/]+\/resume$/) && req.method === 'POST') {
+    const execId = pathname.split('/').slice(-2)[0];
+    if (!execId || !isValidExecutionId(execId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid execution ID format' }));
+      return true;
+    }
+
+    try {
+      const execution = await readExecutionStorage(workflowDir, execId);
+      if (!execution) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Execution not found' }));
+        return true;
+      }
+
+      // Can only resume paused executions
+      if (execution.status !== 'paused') {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: false,
+          error: `Cannot resume execution with status: ${execution.status}`
+        }));
+        return true;
+      }
+
+      // Update status to running
+      execution.status = 'running';
+      execution.logs.push({
+        timestamp: new Date().toISOString(),
+        level: 'info',
+        message: 'Execution resumed by user'
+      });
+
+      await writeExecutionStorage(workflowDir, execution);
+      broadcastExecutionStateUpdate(execution);
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: execution,
+        message: 'Execution resumed'
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== STOP EXECUTION ====
+  // POST /api/orchestrator/executions/:execId/stop
+  if (pathname.match(/^\/api\/orchestrator\/executions\/[^/]+\/stop$/) && req.method === 'POST') {
+    const execId = pathname.split('/').slice(-2)[0];
+    if (!execId || !isValidExecutionId(execId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid execution ID format' }));
+      return true;
+    }
+
+    try {
+      const execution = await readExecutionStorage(workflowDir, execId);
+      if (!execution) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Execution not found' }));
+        return true;
+      }
+
+      // Can only stop running, paused, or pending executions
+      if (!['running', 'paused', 'pending'].includes(execution.status)) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: false,
+          error: `Cannot stop execution with status: ${execution.status}`
+        }));
+        return true;
+      }
+
+      // Update status to failed with manual stop reason
+      const now = new Date().toISOString();
+      execution.status = 'failed';
+      execution.completedAt = now;
+      execution.logs.push({
+        timestamp: now,
+        level: 'warn',
+        message: 'Execution manually stopped by user'
+      });
+
+      await writeExecutionStorage(workflowDir, execution);
+      broadcastExecutionStateUpdate(execution);
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: execution,
+        message: 'Execution stopped'
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== GET EXECUTION STATE ====
+  // GET /api/orchestrator/executions/:execId
+  if (pathname.match(/^\/api\/orchestrator\/executions\/[^/]+$/) && req.method === 'GET') {
+    const execId = pathname.split('/').pop();
+    if (!execId || !isValidExecutionId(execId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid execution ID format' }));
+      return true;
+    }
+
+    try {
+      const execution = await readExecutionStorage(workflowDir, execId);
+      if (!execution) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Execution not found' }));
+        return true;
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true, data: execution }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== GET EXECUTION LOGS ====
+  // GET /api/orchestrator/executions/:execId/logs
+  if (pathname.match(/^\/api\/orchestrator\/executions\/[^/]+\/logs$/) && req.method === 'GET') {
+    const execId = pathname.split('/').slice(-2)[0];
+    if (!execId || !isValidExecutionId(execId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid execution ID format' }));
+      return true;
+    }
+
+    try {
+      const execution = await readExecutionStorage(workflowDir, execId);
+      if (!execution) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Execution not found' }));
+        return true;
+      }
+
+      // Parse pagination params from URL
+      const url = ctx.url;
+      const limit = parseInt(url.searchParams.get('limit') || '100', 10);
+      const offset = parseInt(url.searchParams.get('offset') || '0', 10);
+      const level = url.searchParams.get('level'); // Optional filter by log level
+      const nodeId = url.searchParams.get('nodeId'); // Optional filter by node
+
+      // Apply filters
+      let filteredLogs = execution.logs;
+
+      if (level) {
+        filteredLogs = filteredLogs.filter(log => log.level === level);
+      }
+
+      if (nodeId) {
+        filteredLogs = filteredLogs.filter(log => log.nodeId === nodeId);
+      }
+
+      // Apply pagination
+      const paginatedLogs = filteredLogs.slice(offset, offset + limit);
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: {
+          execId: execution.id,
+          logs: paginatedLogs,
+          total: filteredLogs.length,
+          limit,
+          offset,
+          hasMore: offset + limit < filteredLogs.length
+        }
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ============================================================================
+  // Template Management Endpoints
+  // ============================================================================
+
+  // ==== LIST TEMPLATES ====
+  // GET /api/orchestrator/templates
+  // Returns combined list of local and builtin templates
+  if (pathname === '/api/orchestrator/templates' && req.method === 'GET') {
+    try {
+      // Get local templates
+      const localTemplates = await listLocalTemplates(workflowDir);
+
+      // Get builtin templates
+      const builtinTemplates = await listBuiltinTemplates();
+
+      // Combine and deduplicate (local takes precedence)
+      const localIds = new Set(localTemplates.map(t => t.id));
+      const combinedTemplates = [
+        ...localTemplates,
+        ...builtinTemplates.filter(t => !localIds.has(t.id))
+      ];
+
+      // Parse query params for filtering
+      const url = ctx.url;
+      const category = url.searchParams.get('category');
+      const source = url.searchParams.get('source');
+
+      let filteredTemplates = combinedTemplates;
+
+      if (category) {
+        filteredTemplates = filteredTemplates.filter(
+          t => t.template_metadata?.category?.toLowerCase() === category.toLowerCase()
+        );
+      }
+
+      if (source) {
+        filteredTemplates = filteredTemplates.filter(
+          t => t.template_metadata?.source === source
+        );
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: filteredTemplates,
+        total: filteredTemplates.length,
+        sources: {
+          local: localTemplates.length,
+          builtin: builtinTemplates.length
+        },
+        timestamp: new Date().toISOString()
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  // ==== LIST REMOTE TEMPLATES ====
+  // GET /api/orchestrator/templates/remote
+  // Fetches template index from GitHub
+  if (pathname === '/api/orchestrator/templates/remote' && req.method === 'GET') {
+    try {
+      const remoteIndex = await fetchRemoteTemplateIndex();
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: true,
+        data: remoteIndex.templates,
+        total: remoteIndex.templates.length,
+        index_version: remoteIndex.version,
+        updated_at: remoteIndex.updated_at,
+        timestamp: new Date().toISOString()
+      }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({
+        success: false,
+        error: (error as Error).message,
+        message: 'Failed to fetch remote templates. Check network connectivity and GitHub rate limits.'
+      }));
+      return true;
+    }
+  }
+
+  // ==== INSTALL TEMPLATE ====
+  // POST /api/orchestrator/templates/install
+  // Downloads template from URL or GitHub and saves locally
+  if (pathname === '/api/orchestrator/templates/install' && req.method === 'POST') {
+    handlePostRequest(req, res, async (body) => {
+      const { url, templateId } = body as TemplateInstallRequest;
+
+      // Must provide either url or templateId
+      if (!url && !templateId) {
+        return { success: false, error: 'Either url or templateId is required', status: 400 };
+      }
+
+      try {
+        let downloadUrl = url;
+        let templateName = '';
+
+        // If templateId provided, look up URL from remote index
+        if (templateId && !url) {
+          const remoteIndex = await fetchRemoteTemplateIndex();
+          const remoteTemplate = remoteIndex.templates.find(t => t.id === templateId);
+
+          if (!remoteTemplate) {
+            return { success: false, error: `Template ${templateId} not found in remote index`, status: 404 };
+          }
+
+          downloadUrl = remoteTemplate.downloadUrl;
+          templateName = remoteTemplate.name;
+        }
+
+        if (!downloadUrl) {
+          return { success: false, error: 'Could not determine download URL', status: 400 };
+        }
+
+        // Fetch the template
+        const remoteTemplate = await fetchRemoteTemplate(downloadUrl);
+
+        // Generate new local ID and update metadata
+        const now = new Date().toISOString();
+        const localTemplate: Template = {
+          ...remoteTemplate,
+          id: generateTemplateId(),
+          template_metadata: {
+            ...remoteTemplate.template_metadata,
+            source: 'remote',
+            remoteUrl: downloadUrl,
+            installedAt: now
+          }
+        };
+
+        // Save to local storage
+        await writeTemplateStorage(workflowDir, localTemplate);
+
+        // Broadcast template installation
+        try {
+          broadcastToClients({
+            type: 'ORCHESTRATOR_TEMPLATE_INSTALLED',
+            template_id: localTemplate.id,
+            template: localTemplate
+          });
+        } catch {
+          // Ignore broadcast errors
+        }
+
+        return {
+          success: true,
+          data: localTemplate,
+          message: `Template "${templateName || localTemplate.name}" installed successfully`
+        };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== EXPORT FLOW AS TEMPLATE ====
+  // POST /api/orchestrator/templates/export
+  // Converts an existing flow to a template
+  if (pathname === '/api/orchestrator/templates/export' && req.method === 'POST') {
+    handlePostRequest(req, res, async (body) => {
+      const { flowId, name, author, category, tags, description } = body as TemplateExportRequest;
+
+      // Validation
+      if (!flowId || typeof flowId !== 'string') {
+        return { success: false, error: 'flowId is required', status: 400 };
+      }
+
+      if (!isValidFlowId(flowId)) {
+        return { success: false, error: 'Invalid flow ID format', status: 400 };
+      }
+
+      try {
+        // Read the source flow
+        const flow = await readFlowStorage(workflowDir, flowId);
+        if (!flow) {
+          return { success: false, error: 'Flow not found', status: 404 };
+        }
+
+        // Convert to template
+        const template = flowToTemplate(flow, {
+          author,
+          category,
+          tags,
+          description
+        });
+
+        // Override name if provided
+        if (name && typeof name === 'string' && name.trim()) {
+          template.name = name.trim();
+        }
+
+        // Save template
+        await writeTemplateStorage(workflowDir, template);
+
+        // Broadcast template export
+        try {
+          broadcastToClients({
+            type: 'ORCHESTRATOR_TEMPLATE_EXPORTED',
+            flow_id: flowId,
+            template_id: template.id,
+            template: template
+          });
+        } catch {
+          // Ignore broadcast errors
+        }
+
+        return {
+          success: true,
+          data: template,
+          message: `Flow exported as template "${template.name}"`
+        };
+      } catch (error) {
+        return { success: false, error: (error as Error).message, status: 500 };
+      }
+    });
+    return true;
+  }
+
+  // ==== DELETE TEMPLATE ====
+  // DELETE /api/orchestrator/templates/:id
+  // Only deletes local templates (cannot delete builtin)
+  if (pathname.match(/^\/api\/orchestrator\/templates\/[^/]+$/) && req.method === 'DELETE') {
+    const templateId = pathname.split('/').pop();
+    if (!templateId || !isValidTemplateId(templateId)) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Invalid template ID format' }));
+      return true;
+    }
+
+    try {
+      // Check if template exists in local storage
+      const template = await readTemplateStorage(workflowDir, templateId);
+      if (!template) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: false, error: 'Template not found in local storage' }));
+        return true;
+      }
+
+      // Cannot delete builtin templates
+      if (template.template_metadata?.source === 'builtin') {
+        res.writeHead(403, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({
+          success: false,
+          error: 'Cannot delete builtin templates. Only local and installed templates can be deleted.'
+        }));
+        return true;
+      }
+
+      // Delete the template
+      await deleteTemplateStorage(workflowDir, templateId);
+
+      // Broadcast template deletion
+      try {
+        broadcastToClients({
+          type: 'ORCHESTRATOR_TEMPLATE_DELETED',
+          template_id: templateId
+        });
+      } catch {
+        // Ignore broadcast errors
+      }
+
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: true, message: 'Template deleted' }));
+      return true;
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: (error as Error).message }));
+      return true;
+    }
+  }
+
+  return false;
+}
diff --git a/ccw/src/core/server.ts b/ccw/src/core/server.ts
index 8848911a..8b68f1ea 100644
--- a/ccw/src/core/server.ts
+++ b/ccw/src/core/server.ts
@@ -34,6 +34,8 @@ import { handleLoopRoutes } from './routes/loop-routes.js';
 import { handleLoopV2Routes, initializeCliToolsCache } from './routes/loop-v2-routes.js';
 import { handleTestLoopRoutes } from './routes/test-loop-routes.js';
 import { handleTaskRoutes } from './routes/task-routes.js';
+import { handleDashboardRoutes } from './routes/dashboard-routes.js';
+import { handleOrchestratorRoutes } from './routes/orchestrator-routes.js';
 
 // Import WebSocket handling
 import { handleWebSocketUpgrade, broadcastToClients, extractSessionIdFromPath } from './websocket.js';
@@ -514,6 +516,11 @@ export async function startServer(options: ServerOptions = {}): Promise<http.Ser
         if (await handleNavStatusRoutes(routeContext)) return;
       }
 
+      // Dashboard routes (/api/dashboard/*) - Dashboard initialization
+      if (pathname.startsWith('/api/dashboard/')) {
+        if (await handleDashboardRoutes(routeContext)) return;
+      }
+
       // CLI routes (/api/cli/*)
       if (pathname.startsWith('/api/cli/')) {
         // CLI Settings routes first (more specific path /api/cli/settings/*)
@@ -577,6 +584,11 @@ export async function startServer(options: ServerOptions = {}): Promise<http.Ser
         if (await handleCcwRoutes(routeContext)) return;
       }
 
+      // Orchestrator routes (/api/orchestrator/*)
+      if (pathname.startsWith('/api/orchestrator/')) {
+        if (await handleOrchestratorRoutes(routeContext)) return;
+      }
+
       // Loop V2 routes (/api/loops/v2/*) - must be checked before v1
       if (pathname.startsWith('/api/loops/v2')) {
         if (await handleLoopV2Routes(routeContext)) return;
diff --git a/ccw/src/core/services/flow-executor.ts b/ccw/src/core/services/flow-executor.ts
new file mode 100644
index 00000000..7a00bc8a
--- /dev/null
+++ b/ccw/src/core/services/flow-executor.ts
@@ -0,0 +1,1154 @@
+/**
+ * Flow Execution Engine
+ *
+ * FlowExecutor: Executes flow definitions using DAG traversal with:
+ * - Topological sorting for execution order
+ * - NodeRunner for type-specific node execution
+ * - Variable interpolation using {{variable}} syntax
+ * - State persistence to status.json
+ * - WebSocket broadcasts for real-time updates
+ *
+ * Integrates with:
+ * - orchestrator-routes.ts for execution control endpoints
+ * - websocket.ts for real-time broadcasts
+ * - cli-executor for slash-command execution
+ */
+
+import { readFile, writeFile, mkdir, unlink, copyFile, rename } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { broadcastToClients } from '../websocket.js';
+import { executeCliTool } from '../../tools/cli-executor-core.js';
+import type {
+  Flow,
+  FlowNode,
+  FlowEdge,
+  FlowNodeType,
+  ExecutionState,
+  ExecutionStatus,
+  NodeExecutionState,
+  NodeExecutionStatus,
+  ExecutionLog,
+  SlashCommandNodeData,
+  FileOperationNodeData,
+  ConditionalNodeData,
+  ParallelNodeData,
+} from '../routes/orchestrator-routes.js';
+
+// ============================================================================
+// Types and Interfaces
+// ============================================================================
+
+/**
+ * Execution context passed to node runners
+ */
+export interface ExecutionContext {
+  executionId: string;
+  flowId: string;
+  workingDir: string;
+  variables: Record<string, unknown>;
+  nodeResults: Record<string, NodeResult>;
+  fileContext: Array<{ path: string; content?: string; operation?: string }>;
+}
+
+/**
+ * Result from executing a single node
+ */
+export interface NodeResult {
+  success: boolean;
+  output?: unknown;
+  error?: string;
+  branch?: 'true' | 'false';
+  exitCode?: number;
+}
+
+/**
+ * DAG adjacency list representation
+ */
+interface DAGNode {
+  nodeId: string;
+  node: FlowNode;
+  incoming: string[];  // Dependencies (nodes that must run before this one)
+  outgoing: string[];  // Dependents (nodes that run after this one)
+}
+
+/**
+ * Options for FlowExecutor
+ */
+export interface FlowExecutorOptions {
+  onNodeStarted?: (nodeId: string) => void;
+  onNodeCompleted?: (nodeId: string, result: NodeResult) => void;
+  onNodeFailed?: (nodeId: string, error: string) => void;
+  onStateUpdate?: (state: ExecutionState) => void;
+}
+
+// ============================================================================
+// Variable Interpolation
+// ============================================================================
+
+/**
+ * Interpolate {{variable}} placeholders in a template string
+ * Supports nested access: {{result.output}}, {{prevResult.exitCode}}
+ *
+ * @param template - String containing {{variable}} placeholders
+ * @param variables - Object containing variable values
+ * @returns Interpolated string with placeholders replaced
+ */
+export function interpolate(template: string, variables: Record<string, unknown>): string {
+  if (!template || typeof template !== 'string') {
+    return template;
+  }
+
+  return template.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+    const trimmedPath = path.trim();
+    const value = getNestedValue(variables, trimmedPath);
+
+    if (value === undefined || value === null) {
+      // Keep original placeholder if value not found
+      return match;
+    }
+
+    // Convert to string
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  });
+}
+
+/**
+ * Get nested value from object using dot notation
+ * e.g., getNestedValue({a: {b: 1}}, 'a.b') returns 1
+ */
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  const parts = path.split('.');
+  let current: unknown = obj;
+
+  for (const part of parts) {
+    if (current === null || current === undefined) {
+      return undefined;
+    }
+    if (typeof current !== 'object') {
+      return undefined;
+    }
+    current = (current as Record<string, unknown>)[part];
+  }
+
+  return current;
+}
+
+/**
+ * Interpolate all string values in an object recursively
+ */
+export function interpolateObject<T>(obj: T, variables: Record<string, unknown>): T {
+  if (typeof obj === 'string') {
+    return interpolate(obj, variables) as T;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map(item => interpolateObject(item, variables)) as T;
+  }
+
+  if (obj !== null && typeof obj === 'object') {
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
+      result[key] = interpolateObject(value, variables);
+    }
+    return result as T;
+  }
+
+  return obj;
+}
+
+// ============================================================================
+// NodeRunner - Type-specific Node Execution
+// ============================================================================
+
+/**
+ * NodeRunner executes individual nodes based on their type
+ */
+export class NodeRunner {
+  private context: ExecutionContext;
+
+  constructor(context: ExecutionContext) {
+    this.context = context;
+  }
+
+  /**
+   * Execute a node and return the result
+   */
+  async run(node: FlowNode): Promise<NodeResult> {
+    switch (node.type) {
+      case 'slash-command':
+        return this.runSlashCommand(node);
+      case 'file-operation':
+        return this.runFileOperation(node);
+      case 'conditional':
+        return this.runConditional(node);
+      case 'parallel':
+        return this.runParallel(node);
+      default:
+        return {
+          success: false,
+          error: `Unknown node type: ${(node as FlowNode).type}`
+        };
+    }
+  }
+
+  /**
+   * Execute a slash-command node
+   * Integrates with executeCliTool from cli-executor
+   */
+  private async runSlashCommand(node: FlowNode): Promise<NodeResult> {
+    const data = node.data as SlashCommandNodeData;
+
+    // Interpolate command and args
+    const command = interpolate(data.command, this.context.variables);
+    const args = data.args ? interpolate(data.args, this.context.variables) : '';
+    const contextHint = data.contextHint ? interpolate(data.contextHint, this.context.variables) : '';
+
+    // Build prompt: combine command, args, and context hint
+    let prompt = command;
+    if (args) {
+      prompt += ` ${args}`;
+    }
+    if (contextHint) {
+      prompt = `${contextHint}\n\n${prompt}`;
+    }
+
+    // Add file context if available
+    if (this.context.fileContext.length > 0) {
+      const fileContextStr = this.context.fileContext
+        .filter(fc => fc.content)
+        .map(fc => `=== File: ${fc.path} ===\n${fc.content}`)
+        .join('\n\n');
+
+      if (fileContextStr) {
+        prompt = `${fileContextStr}\n\n${prompt}`;
+      }
+    }
+
+    try {
+      // Use claude tool for slash-command execution
+      const result = await executeCliTool({
+        tool: 'claude',
+        prompt,
+        mode: data.execution?.mode === 'mainprocess' ? 'write' : 'analysis',
+        cd: this.context.workingDir
+      });
+
+      // Store output in variables for subsequent nodes
+      const outputVar = `${node.id}_output`;
+      this.context.variables[outputVar] = result.stdout;
+      this.context.variables[`${node.id}_exitCode`] = result.execution?.exit_code ?? 0;
+
+      return {
+        success: result.success,
+        output: result.stdout,
+        exitCode: result.execution?.exit_code ?? 0
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: (error as Error).message
+      };
+    }
+  }
+
+  /**
+   * Execute a file-operation node
+   * Supports: read, write, append, delete, copy, move
+   */
+  private async runFileOperation(node: FlowNode): Promise<NodeResult> {
+    const data = node.data as FileOperationNodeData;
+
+    // Interpolate path and content
+    const filePath = interpolate(data.path, this.context.variables);
+    const resolvedPath = join(this.context.workingDir, filePath);
+    const encoding = (data.encoding || 'utf-8') as BufferEncoding;
+
+    try {
+      switch (data.operation) {
+        case 'read': {
+          const content = await readFile(resolvedPath, encoding);
+
+          // Store in output variable if specified
+          if (data.outputVariable) {
+            this.context.variables[data.outputVariable] = content;
+          }
+
+          // Add to file context for subsequent nodes
+          if (data.addToContext) {
+            this.context.fileContext.push({ path: filePath, content });
+          }
+
+          return { success: true, output: content };
+        }
+
+        case 'write': {
+          const content = data.content ? interpolate(data.content, this.context.variables) : '';
+
+          // Ensure directory exists
+          const dir = dirname(resolvedPath);
+          if (!existsSync(dir)) {
+            await mkdir(dir, { recursive: true });
+          }
+
+          await writeFile(resolvedPath, content, encoding);
+
+          if (data.addToContext) {
+            this.context.fileContext.push({ path: filePath, operation: 'written' });
+          }
+
+          return { success: true, output: { path: filePath, bytesWritten: content.length } };
+        }
+
+        case 'append': {
+          const content = data.content ? interpolate(data.content, this.context.variables) : '';
+
+          // Ensure directory exists
+          const dir = dirname(resolvedPath);
+          if (!existsSync(dir)) {
+            await mkdir(dir, { recursive: true });
+          }
+
+          // Read existing content and append
+          let existingContent = '';
+          if (existsSync(resolvedPath)) {
+            existingContent = await readFile(resolvedPath, encoding);
+          }
+          await writeFile(resolvedPath, existingContent + content, encoding);
+
+          if (data.addToContext) {
+            this.context.fileContext.push({ path: filePath, operation: 'appended' });
+          }
+
+          return { success: true, output: { path: filePath, bytesAppended: content.length } };
+        }
+
+        case 'delete': {
+          if (existsSync(resolvedPath)) {
+            await unlink(resolvedPath);
+          }
+          return { success: true, output: { path: filePath, deleted: true } };
+        }
+
+        case 'copy': {
+          const destPath = data.destinationPath
+            ? join(this.context.workingDir, interpolate(data.destinationPath, this.context.variables))
+            : resolvedPath + '.copy';
+
+          // Ensure destination directory exists
+          const destDir = dirname(destPath);
+          if (!existsSync(destDir)) {
+            await mkdir(destDir, { recursive: true });
+          }
+
+          await copyFile(resolvedPath, destPath);
+          return { success: true, output: { source: filePath, destination: destPath } };
+        }
+
+        case 'move': {
+          const destPath = data.destinationPath
+            ? join(this.context.workingDir, interpolate(data.destinationPath, this.context.variables))
+            : resolvedPath;
+
+          if (destPath === resolvedPath) {
+            return { success: false, error: 'Source and destination are the same' };
+          }
+
+          // Ensure destination directory exists
+          const destDir = dirname(destPath);
+          if (!existsSync(destDir)) {
+            await mkdir(destDir, { recursive: true });
+          }
+
+          await rename(resolvedPath, destPath);
+          return { success: true, output: { source: filePath, destination: destPath } };
+        }
+
+        default:
+          return { success: false, error: `Unknown file operation: ${data.operation}` };
+      }
+    } catch (error) {
+      return {
+        success: false,
+        error: (error as Error).message
+      };
+    }
+  }
+
+  /**
+   * Execute a conditional node
+   * Evaluates condition and returns branch decision
+   */
+  private async runConditional(node: FlowNode): Promise<NodeResult> {
+    const data = node.data as ConditionalNodeData;
+
+    // Interpolate condition
+    const condition = interpolate(data.condition, this.context.variables);
+
+    try {
+      // Evaluate condition in a safe context
+      const result = this.evaluateCondition(condition);
+
+      return {
+        success: true,
+        output: result,
+        branch: result ? 'true' : 'false'
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: `Condition evaluation failed: ${(error as Error).message}`
+      };
+    }
+  }
+
+  /**
+   * Safely evaluate a condition expression
+   * Uses Function constructor with limited scope
+   */
+  private evaluateCondition(condition: string): boolean {
+    // Create a safe evaluation context with common comparison helpers
+    const safeContext = {
+      // Allow access to variables
+      ...this.context.variables,
+      // Add helper functions
+      isEmpty: (v: unknown) => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0),
+      isNotEmpty: (v: unknown) => !(v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)),
+      contains: (str: string, search: string) => String(str).includes(search),
+      startsWith: (str: string, search: string) => String(str).startsWith(search),
+      endsWith: (str: string, search: string) => String(str).endsWith(search),
+    };
+
+    // Build a safe evaluation function
+    const keys = Object.keys(safeContext);
+    const values = Object.values(safeContext);
+
+    try {
+      // Create function with explicit parameters to prevent scope leakage
+      const evalFn = new Function(...keys, `return (${condition})`);
+      const result = evalFn(...values);
+      return Boolean(result);
+    } catch (error) {
+      // If direct evaluation fails, try simpler comparison
+      // Handle common patterns like "value >= 0.95"
+      const simpleMatch = condition.match(/^(.+?)\s*(===|!==|==|!=|>=|<=|>|<)\s*(.+)$/);
+      if (simpleMatch) {
+        const [, left, op, right] = simpleMatch;
+        const leftVal = this.parseValue(left.trim());
+        const rightVal = this.parseValue(right.trim());
+
+        switch (op) {
+          case '===': return leftVal === rightVal;
+          case '!==': return leftVal !== rightVal;
+          case '==': return leftVal == rightVal;
+          case '!=': return leftVal != rightVal;
+          case '>=': return Number(leftVal) >= Number(rightVal);
+          case '<=': return Number(leftVal) <= Number(rightVal);
+          case '>': return Number(leftVal) > Number(rightVal);
+          case '<': return Number(leftVal) < Number(rightVal);
+        }
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * Parse a value from condition string
+   */
+  private parseValue(val: string): unknown {
+    // Check for number
+    if (/^-?\d+(\.\d+)?$/.test(val)) {
+      return parseFloat(val);
+    }
+    // Check for boolean
+    if (val === 'true') return true;
+    if (val === 'false') return false;
+    // Check for null/undefined
+    if (val === 'null') return null;
+    if (val === 'undefined') return undefined;
+    // Check for quoted string
+    if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) {
+      return val.slice(1, -1);
+    }
+    // Otherwise, try to get from context
+    return this.context.variables[val] ?? val;
+  }
+
+  /**
+   * Execute a parallel node
+   * Forks execution into multiple branches
+   */
+  private async runParallel(node: FlowNode): Promise<NodeResult> {
+    const data = node.data as ParallelNodeData;
+
+    // Parallel node doesn't execute directly - it's a control flow marker
+    // The FlowExecutor handles the actual parallel execution based on outgoing edges
+    // This method returns success to indicate the fork point was reached
+
+    return {
+      success: true,
+      output: {
+        joinMode: data.joinMode,
+        timeout: data.timeout,
+        failFast: data.failFast
+      }
+    };
+  }
+}
+
+// ============================================================================
+// FlowExecutor - Main Execution Engine
+// ============================================================================
+
+/**
+ * FlowExecutor orchestrates the execution of a flow definition
+ * using DAG traversal with topological sorting
+ */
+export class FlowExecutor {
+  private flow: Flow;
+  private executionId: string;
+  private workflowDir: string;
+  private options: FlowExecutorOptions;
+  private state: ExecutionState;
+  private dag: Map<string, DAGNode>;
+  private pauseRequested: boolean = false;
+  private stopRequested: boolean = false;
+
+  constructor(
+    flow: Flow,
+    executionId: string,
+    workflowDir: string,
+    options: FlowExecutorOptions = {}
+  ) {
+    this.flow = flow;
+    this.executionId = executionId;
+    this.workflowDir = workflowDir;
+    this.options = options;
+    this.dag = new Map();
+
+    // Initialize execution state
+    this.state = this.createInitialState();
+  }
+
+  /**
+   * Create initial execution state
+   */
+  private createInitialState(): ExecutionState {
+    const nodeStates: Record<string, NodeExecutionState> = {};
+    for (const node of this.flow.nodes) {
+      nodeStates[node.id] = { status: 'pending' };
+    }
+
+    return {
+      id: this.executionId,
+      flowId: this.flow.id,
+      status: 'pending',
+      variables: { ...this.flow.variables },
+      nodeStates,
+      logs: []
+    };
+  }
+
+  /**
+   * Build DAG from flow nodes and edges
+   * Returns adjacency list representation
+   */
+  buildDAG(): Map<string, DAGNode> {
+    this.dag.clear();
+
+    // Initialize DAG nodes
+    for (const node of this.flow.nodes) {
+      this.dag.set(node.id, {
+        nodeId: node.id,
+        node,
+        incoming: [],
+        outgoing: []
+      });
+    }
+
+    // Add edges
+    for (const edge of this.flow.edges) {
+      const sourceNode = this.dag.get(edge.source);
+      const targetNode = this.dag.get(edge.target);
+
+      if (sourceNode && targetNode) {
+        sourceNode.outgoing.push(edge.target);
+        targetNode.incoming.push(edge.source);
+      }
+    }
+
+    return this.dag;
+  }
+
+  /**
+   * Perform topological sort using Kahn's algorithm
+   * Returns nodes in execution order
+   */
+  topologicalSort(): FlowNode[] {
+    if (this.dag.size === 0) {
+      this.buildDAG();
+    }
+
+    const sorted: FlowNode[] = [];
+    const inDegree = new Map<string, number>();
+    const queue: string[] = [];
+
+    // Calculate in-degrees
+    for (const [nodeId, dagNode] of this.dag) {
+      inDegree.set(nodeId, dagNode.incoming.length);
+      if (dagNode.incoming.length === 0) {
+        queue.push(nodeId);
+      }
+    }
+
+    // Process nodes with zero in-degree
+    while (queue.length > 0) {
+      const nodeId = queue.shift()!;
+      const dagNode = this.dag.get(nodeId);
+
+      if (dagNode) {
+        sorted.push(dagNode.node);
+
+        // Reduce in-degree of dependents
+        for (const dependentId of dagNode.outgoing) {
+          const currentDegree = inDegree.get(dependentId) || 0;
+          const newDegree = currentDegree - 1;
+          inDegree.set(dependentId, newDegree);
+
+          if (newDegree === 0) {
+            queue.push(dependentId);
+          }
+        }
+      }
+    }
+
+    // Check for cycles
+    if (sorted.length !== this.flow.nodes.length) {
+      this.addLog('error', 'Flow contains cycles - cannot execute');
+      throw new Error('Flow contains cycles - cannot perform topological sort');
+    }
+
+    return sorted;
+  }
+
+  /**
+   * Get nodes ready for execution (all dependencies completed)
+   */
+  private getReadyNodes(sortedNodes: FlowNode[]): FlowNode[] {
+    const ready: FlowNode[] = [];
+
+    for (const node of sortedNodes) {
+      const nodeState = this.state.nodeStates[node.id];
+
+      // Skip if already completed, failed, or skipped
+      if (nodeState.status !== 'pending') {
+        continue;
+      }
+
+      // Check if all dependencies are completed
+      const dagNode = this.dag.get(node.id);
+      if (!dagNode) continue;
+
+      const allDepsCompleted = dagNode.incoming.every(depId => {
+        const depState = this.state.nodeStates[depId];
+        return depState && (depState.status === 'completed' || depState.status === 'skipped');
+      });
+
+      // For conditional branches, check if we should skip
+      if (allDepsCompleted) {
+        const shouldSkip = this.shouldSkipNode(node);
+        if (shouldSkip) {
+          nodeState.status = 'skipped';
+          continue;
+        }
+        ready.push(node);
+      }
+    }
+
+    return ready;
+  }
+
+  /**
+   * Check if a node should be skipped based on conditional branching
+   */
+  private shouldSkipNode(node: FlowNode): boolean {
+    const dagNode = this.dag.get(node.id);
+    if (!dagNode) return false;
+
+    // Check if this node is on a conditional branch that wasn't taken
+    for (const depId of dagNode.incoming) {
+      const depState = this.state.nodeStates[depId];
+      const depNode = this.flow.nodes.find(n => n.id === depId);
+
+      if (depNode?.type === 'conditional' && depState.status === 'completed') {
+        const result = this.state.nodeStates[depId].result as NodeResult;
+        const branch = result?.branch;
+
+        // Find the edge from conditional to this node
+        const edge = this.flow.edges.find(e => e.source === depId && e.target === node.id);
+        if (edge) {
+          // Check if edge label matches the branch taken
+          const edgeLabel = edge.sourceHandle || edge.label || 'true';
+          if (branch && edgeLabel !== branch) {
+            return true;  // Skip this branch
+          }
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Main execution method
+   * Executes the flow and returns final state
+   */
+  async execute(initialVariables?: Record<string, unknown>): Promise<ExecutionState> {
+    // Merge initial variables
+    if (initialVariables) {
+      this.state.variables = { ...this.state.variables, ...initialVariables };
+    }
+
+    // Build DAG and get execution order
+    this.buildDAG();
+    const sortedNodes = this.topologicalSort();
+
+    // Start execution
+    this.state.status = 'running';
+    this.state.startedAt = new Date().toISOString();
+    this.addLog('info', `Starting execution of flow: ${this.flow.name}`);
+    await this.persistState();
+    this.broadcastStateUpdate();
+
+    // Create execution context
+    const context: ExecutionContext = {
+      executionId: this.executionId,
+      flowId: this.flow.id,
+      workingDir: this.workflowDir,
+      variables: this.state.variables,
+      nodeResults: {},
+      fileContext: []
+    };
+
+    try {
+      // Main execution loop
+      while (true) {
+        // Check for pause/stop requests
+        if (this.stopRequested) {
+          this.state.status = 'failed';
+          this.addLog('warn', 'Execution stopped by user');
+          break;
+        }
+
+        if (this.pauseRequested) {
+          this.state.status = 'paused';
+          this.addLog('info', 'Execution paused');
+          await this.persistState();
+          this.broadcastStateUpdate();
+          return this.state;
+        }
+
+        // Get nodes ready for execution
+        const readyNodes = this.getReadyNodes(sortedNodes);
+
+        // If no ready nodes and not all completed, check for completion
+        if (readyNodes.length === 0) {
+          const allCompleted = Object.values(this.state.nodeStates).every(
+            s => s.status === 'completed' || s.status === 'failed' || s.status === 'skipped'
+          );
+
+          if (allCompleted) {
+            // Check if any nodes failed
+            const anyFailed = Object.values(this.state.nodeStates).some(s => s.status === 'failed');
+            this.state.status = anyFailed ? 'failed' : 'completed';
+            break;
+          }
+
+          // Should not happen if DAG is valid
+          throw new Error('Execution stuck: no ready nodes but not all completed');
+        }
+
+        // Execute ready nodes
+        // For now, execute sequentially; parallel nodes handle their own forking
+        for (const node of readyNodes) {
+          if (this.stopRequested || this.pauseRequested) break;
+
+          await this.executeNode(node, context);
+        }
+      }
+    } catch (error) {
+      this.state.status = 'failed';
+      this.addLog('error', `Execution failed: ${(error as Error).message}`);
+    }
+
+    // Finalize
+    this.state.completedAt = new Date().toISOString();
+    this.addLog('info', `Execution ${this.state.status}: ${this.flow.name}`);
+    await this.persistState();
+    this.broadcastStateUpdate();
+
+    return this.state;
+  }
+
+  /**
+   * Execute a single node
+   */
+  private async executeNode(node: FlowNode, context: ExecutionContext): Promise<void> {
+    const nodeState = this.state.nodeStates[node.id];
+    const now = new Date().toISOString();
+
+    // Update state to running
+    nodeState.status = 'running';
+    nodeState.startedAt = now;
+    this.state.currentNodeId = node.id;
+    await this.persistState();
+
+    // Broadcast node started
+    this.broadcastNodeStarted(node.id);
+    this.options.onNodeStarted?.(node.id);
+    this.addLog('info', `Starting node: ${node.id} (${node.type})`, node.id);
+
+    try {
+      // Create node runner with current context
+      const runner = new NodeRunner(context);
+
+      // Execute the node
+      const result = await runner.run(node);
+
+      // Handle parallel node specially
+      if (node.type === 'parallel') {
+        await this.executeParallelBranches(node, context);
+      }
+
+      // Update node state
+      nodeState.status = result.success ? 'completed' : 'failed';
+      nodeState.completedAt = new Date().toISOString();
+      nodeState.result = result;
+
+      if (!result.success && result.error) {
+        nodeState.error = result.error;
+      }
+
+      // Store result in context
+      context.nodeResults[node.id] = result;
+      context.variables[`${node.id}_result`] = result;
+
+      // Sync variables back to state
+      this.state.variables = context.variables;
+
+      await this.persistState();
+
+      if (result.success) {
+        this.broadcastNodeCompleted(node.id, result);
+        this.options.onNodeCompleted?.(node.id, result);
+        this.addLog('info', `Completed node: ${node.id}`, node.id);
+      } else {
+        // Handle error based on node's onError setting
+        const nodeData = node.data as SlashCommandNodeData;
+        const onError = nodeData.onError || 'fail';
+
+        this.addLog('error', `Node failed: ${node.id} - ${result.error}`, node.id);
+        this.broadcastNodeFailed(node.id, result.error || 'Unknown error');
+        this.options.onNodeFailed?.(node.id, result.error || 'Unknown error');
+
+        if (onError === 'fail') {
+          throw new Error(`Node ${node.id} failed: ${result.error}`);
+        } else if (onError === 'pause') {
+          this.pauseRequested = true;
+        }
+        // 'continue' - just move on to next node
+      }
+    } catch (error) {
+      nodeState.status = 'failed';
+      nodeState.completedAt = new Date().toISOString();
+      nodeState.error = (error as Error).message;
+
+      await this.persistState();
+      this.broadcastNodeFailed(node.id, (error as Error).message);
+      this.options.onNodeFailed?.(node.id, (error as Error).message);
+
+      throw error;
+    }
+  }
+
+  /**
+   * Execute parallel branches
+   */
+  private async executeParallelBranches(parallelNode: FlowNode, context: ExecutionContext): Promise<void> {
+    const data = parallelNode.data as ParallelNodeData;
+    const dagNode = this.dag.get(parallelNode.id);
+
+    if (!dagNode) return;
+
+    // Get branch starting nodes (direct outgoing edges from parallel node)
+    const branchNodeIds = dagNode.outgoing;
+    if (branchNodeIds.length === 0) return;
+
+    this.addLog('info', `Executing ${branchNodeIds.length} parallel branches`, parallelNode.id);
+
+    // Create promises for each branch
+    const branchPromises = branchNodeIds.map(async (branchNodeId) => {
+      const branchNode = this.flow.nodes.find(n => n.id === branchNodeId);
+      if (!branchNode) return { success: false, error: 'Branch node not found' };
+
+      try {
+        await this.executeNode(branchNode, context);
+        return { success: true };
+      } catch (error) {
+        return { success: false, error: (error as Error).message };
+      }
+    });
+
+    // Execute based on join mode
+    const timeout = data.timeout || 300000; // Default 5 minutes
+
+    try {
+      if (data.joinMode === 'all') {
+        // Wait for all branches to complete
+        const results = await Promise.all(
+          branchPromises.map(p =>
+            Promise.race([
+              p,
+              new Promise<{ success: false; error: string }>((_, reject) =>
+                setTimeout(() => reject(new Error('Branch timeout')), timeout)
+              )
+            ])
+          )
+        );
+
+        // Check if any failed (and failFast is enabled)
+        if (data.failFast) {
+          const failed = results.find(r => !r.success);
+          if (failed && 'error' in failed) {
+            throw new Error(`Parallel branch failed: ${failed.error}`);
+          }
+        }
+      } else if (data.joinMode === 'any') {
+        // Wait for first branch to complete
+        await Promise.race([
+          Promise.race(branchPromises),
+          new Promise((_, reject) => setTimeout(() => reject(new Error('All branches timeout')), timeout))
+        ]);
+      } else {
+        // 'none' - fire and forget, don't wait
+        // Just trigger the branches without awaiting
+        for (const promise of branchPromises) {
+          promise.catch(() => {}); // Suppress unhandled rejection
+        }
+      }
+    } catch (error) {
+      this.addLog('error', `Parallel execution failed: ${(error as Error).message}`, parallelNode.id);
+      throw error;
+    }
+  }
+
+  /**
+   * Request pause (will pause at next safe point)
+   */
+  pause(): void {
+    this.pauseRequested = true;
+    this.addLog('info', 'Pause requested');
+  }
+
+  /**
+   * Resume from paused state
+   */
+  async resume(additionalVariables?: Record<string, unknown>): Promise<ExecutionState> {
+    if (this.state.status !== 'paused') {
+      throw new Error('Cannot resume: execution is not paused');
+    }
+
+    this.pauseRequested = false;
+
+    if (additionalVariables) {
+      this.state.variables = { ...this.state.variables, ...additionalVariables };
+    }
+
+    // Continue execution
+    return this.execute();
+  }
+
+  /**
+   * Request stop (will stop at next safe point)
+   */
+  stop(): void {
+    this.stopRequested = true;
+    this.addLog('warn', 'Stop requested');
+  }
+
+  /**
+   * Get current execution state
+   */
+  getState(): ExecutionState {
+    return { ...this.state };
+  }
+
+  // ============================================================================
+  // State Persistence
+  // ============================================================================
+
+  /**
+   * Persist execution state to disk
+   */
+  private async persistState(): Promise<void> {
+    const executionsDir = join(this.workflowDir, '.workflow', '.orchestrator', 'executions');
+    const execDir = join(executionsDir, this.executionId);
+    const statusPath = join(execDir, 'status.json');
+
+    try {
+      if (!existsSync(execDir)) {
+        await mkdir(execDir, { recursive: true });
+      }
+
+      await writeFile(statusPath, JSON.stringify(this.state, null, 2), 'utf-8');
+    } catch (error) {
+      console.error(`[FlowExecutor] Failed to persist state: ${(error as Error).message}`);
+    }
+  }
+
+  // ============================================================================
+  // WebSocket Broadcasts
+  // ============================================================================
+
+  /**
+   * Broadcast state update
+   */
+  private broadcastStateUpdate(): void {
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_STATE_UPDATE',
+        execId: this.executionId,
+        status: this.state.status,
+        currentNodeId: this.state.currentNodeId,
+        timestamp: new Date().toISOString()
+      });
+      this.options.onStateUpdate?.(this.state);
+    } catch (error) {
+      // Ignore broadcast errors
+    }
+  }
+
+  /**
+   * Broadcast node started event
+   */
+  private broadcastNodeStarted(nodeId: string): void {
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_NODE_STARTED',
+        execId: this.executionId,
+        nodeId,
+        timestamp: new Date().toISOString()
+      });
+    } catch (error) {
+      // Ignore broadcast errors
+    }
+  }
+
+  /**
+   * Broadcast node completed event
+   */
+  private broadcastNodeCompleted(nodeId: string, result: NodeResult): void {
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_NODE_COMPLETED',
+        execId: this.executionId,
+        nodeId,
+        result,
+        timestamp: new Date().toISOString()
+      });
+    } catch (error) {
+      // Ignore broadcast errors
+    }
+  }
+
+  /**
+   * Broadcast node failed event
+   */
+  private broadcastNodeFailed(nodeId: string, error: string): void {
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_NODE_FAILED',
+        execId: this.executionId,
+        nodeId,
+        error,
+        timestamp: new Date().toISOString()
+      });
+    } catch (error) {
+      // Ignore broadcast errors
+    }
+  }
+
+  // ============================================================================
+  // Logging
+  // ============================================================================
+
+  /**
+   * Add log entry to execution state
+   */
+  private addLog(level: ExecutionLog['level'], message: string, nodeId?: string): void {
+    const log: ExecutionLog = {
+      timestamp: new Date().toISOString(),
+      level,
+      message,
+      ...(nodeId && { nodeId })
+    };
+
+    this.state.logs.push(log);
+
+    // Also broadcast log entry
+    try {
+      broadcastToClients({
+        type: 'ORCHESTRATOR_LOG',
+        execId: this.executionId,
+        log
+      });
+    } catch (error) {
+      // Ignore broadcast errors
+    }
+  }
+}
+
+// ============================================================================
+// Factory Functions
+// ============================================================================
+
+/**
+ * Create and execute a flow
+ * Convenience function for simple execution scenarios
+ */
+export async function executeFlow(
+  flow: Flow,
+  executionId: string,
+  workflowDir: string,
+  options?: FlowExecutorOptions & { variables?: Record<string, unknown> }
+): Promise<ExecutionState> {
+  const { variables, ...executorOptions } = options || {};
+  const executor = new FlowExecutor(flow, executionId, workflowDir, executorOptions);
+  return executor.execute(variables);
+}
+
+/**
+ * Load flow from storage and execute
+ */
+export async function executeFlowById(
+  flowId: string,
+  executionId: string,
+  workflowDir: string,
+  options?: FlowExecutorOptions & { variables?: Record<string, unknown> }
+): Promise<ExecutionState> {
+  const flowsDir = join(workflowDir, '.workflow', '.orchestrator', 'flows');
+  const flowPath = join(flowsDir, `${flowId}.json`);
+
+  if (!existsSync(flowPath)) {
+    throw new Error(`Flow not found: ${flowId}`);
+  }
+
+  const content = await readFile(flowPath, 'utf-8');
+  const flow = JSON.parse(content) as Flow;
+
+  return executeFlow(flow, executionId, workflowDir, options);
+}
diff --git a/ccw/src/core/websocket.ts b/ccw/src/core/websocket.ts
index 967d2faa..4d1d3a17 100644
--- a/ccw/src/core/websocket.ts
+++ b/ccw/src/core/websocket.ts
@@ -63,6 +63,79 @@ export interface LoopLogEntryMessage {
   timestamp: string;
 }
 
+/**
+ * Orchestrator WebSocket message types
+ */
+export type OrchestratorMessageType =
+  | 'ORCHESTRATOR_STATE_UPDATE'
+  | 'ORCHESTRATOR_NODE_STARTED'
+  | 'ORCHESTRATOR_NODE_COMPLETED'
+  | 'ORCHESTRATOR_NODE_FAILED'
+  | 'ORCHESTRATOR_LOG';
+
+/**
+ * Execution log entry for Orchestrator
+ */
+export interface ExecutionLog {
+  timestamp: string;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  nodeId?: string;
+  message: string;
+}
+
+/**
+ * Orchestrator State Update - fired when execution status changes
+ */
+export interface OrchestratorStateUpdateMessage {
+  type: 'ORCHESTRATOR_STATE_UPDATE';
+  execId: string;
+  status: 'pending' | 'running' | 'paused' | 'completed' | 'failed';
+  currentNodeId?: string;
+  timestamp: string;
+}
+
+/**
+ * Orchestrator Node Started - fired when a node begins execution
+ */
+export interface OrchestratorNodeStartedMessage {
+  type: 'ORCHESTRATOR_NODE_STARTED';
+  execId: string;
+  nodeId: string;
+  timestamp: string;
+}
+
+/**
+ * Orchestrator Node Completed - fired when a node finishes successfully
+ */
+export interface OrchestratorNodeCompletedMessage {
+  type: 'ORCHESTRATOR_NODE_COMPLETED';
+  execId: string;
+  nodeId: string;
+  result?: unknown;
+  timestamp: string;
+}
+
+/**
+ * Orchestrator Node Failed - fired when a node encounters an error
+ */
+export interface OrchestratorNodeFailedMessage {
+  type: 'ORCHESTRATOR_NODE_FAILED';
+  execId: string;
+  nodeId: string;
+  error: string;
+  timestamp: string;
+}
+
+/**
+ * Orchestrator Log - fired for execution log entries
+ */
+export interface OrchestratorLogMessage {
+  type: 'ORCHESTRATOR_LOG';
+  execId: string;
+  log: ExecutionLog;
+  timestamp: string;
+}
+
 export function handleWebSocketUpgrade(req: IncomingMessage, socket: Duplex, _head: Buffer): void {
   const header = req.headers['sec-websocket-key'];
   const key = Array.isArray(header) ? header[0] : header;
@@ -300,3 +373,59 @@ export function broadcastLoopLog(loop_id: string, step_id: string, line: string)
     timestamp: new Date().toISOString()
   });
 }
+
+/**
+ * Union type for Orchestrator messages (without timestamp - added automatically)
+ */
+export type OrchestratorMessage =
+  | Omit<OrchestratorStateUpdateMessage, 'timestamp'>
+  | Omit<OrchestratorNodeStartedMessage, 'timestamp'>
+  | Omit<OrchestratorNodeCompletedMessage, 'timestamp'>
+  | Omit<OrchestratorNodeFailedMessage, 'timestamp'>
+  | Omit<OrchestratorLogMessage, 'timestamp'>;
+
+/**
+ * Orchestrator-specific broadcast with throttling
+ * Throttles ORCHESTRATOR_STATE_UPDATE messages to avoid flooding clients
+ */
+let lastOrchestratorBroadcast = 0;
+const ORCHESTRATOR_BROADCAST_THROTTLE = 1000; // 1 second
+
+/**
+ * Broadcast orchestrator update with throttling
+ * STATE_UPDATE messages are throttled to 1 per second
+ * Other message types are sent immediately
+ */
+export function broadcastOrchestratorUpdate(message: OrchestratorMessage): void {
+  const now = Date.now();
+
+  // Throttle ORCHESTRATOR_STATE_UPDATE to reduce WebSocket traffic
+  if (message.type === 'ORCHESTRATOR_STATE_UPDATE' && now - lastOrchestratorBroadcast < ORCHESTRATOR_BROADCAST_THROTTLE) {
+    return;
+  }
+
+  if (message.type === 'ORCHESTRATOR_STATE_UPDATE') {
+    lastOrchestratorBroadcast = now;
+  }
+
+  broadcastToClients({
+    ...message,
+    timestamp: new Date().toISOString()
+  });
+}
+
+/**
+ * Broadcast orchestrator log entry (no throttling)
+ * Used for streaming real-time execution logs to Dashboard
+ */
+export function broadcastOrchestratorLog(execId: string, log: Omit<ExecutionLog, 'timestamp'>): void {
+  broadcastToClients({
+    type: 'ORCHESTRATOR_LOG',
+    execId,
+    log: {
+      ...log,
+      timestamp: new Date().toISOString()
+    },
+    timestamp: new Date().toISOString()
+  });
+}