fix: use ~/.claude path format for template reference

Update template path from .claude/templates to ~/.claude/templates to follow project convention for path references.
feat: add HTML dashboard generation to workflow status command
2026-02-14 02:42:04 +08:00 · 2025-11-20 09:54:41 +00:00 · 2025-11-20 09:49:54 +00:00 · 2025-11-20 17:40:30 +08:00 · 2025-11-20 17:40:11 +08:00 · 2025-11-20 09:35:45 +00:00
6 changed files with 1269 additions and 53 deletions
--- a/.claude/commands/memory/docs.md
+++ b/.claude/commands/memory/docs.md
@@ -89,7 +89,7 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj
 bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${project_name} -type f -name "*.md" ! -path "*/README.md" ! -path "*/ARCHITECTURE.md" ! -path "*/EXAMPLES.md" ! -path "*/api/*" 2>/dev/null | xargs cat 2>/dev/null; fi)
 ```

-**Data Processing**: Parse bash outputs, calculate statistics, use **Write tool** to create `${session_dir}/.process/phase2-analysis.json` with structure:
+**Data Processing**: Parse bash outputs, calculate statistics, use **Write tool** to create `${session_dir}/.process/doc-planning-data.json` with structure:

 ```json
 {
@@ -118,7 +118,7 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj

 **Then** use **Edit tool** to update `workflow-session.json` adding analysis field.

-**Output**: Single `phase2-analysis.json` with all analysis data (no temp files or Python scripts).
+**Output**: Single `doc-planning-data.json` with all analysis data (no temp files or Python scripts).

 **Auto-skipped**: Tests (`**/test/**`, `**/*.test.*`), Build (`**/node_modules/**`, `**/dist/**`), Config (root-level files), Vendor directories.

@@ -127,8 +127,8 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj
 **Commands**:

 ```bash
-# Count existing docs from phase2-analysis.json
-bash(cat .workflow/active/WFS-docs-{timestamp}/.process/phase2-analysis.json | jq '.existing_docs.file_list | length')
+# Count existing docs from doc-planning-data.json
+bash(cat .workflow/active/WFS-docs-{timestamp}/.process/doc-planning-data.json | jq '.existing_docs.file_list | length')
 ```

 **Data Processing**: Use count result, then use **Edit tool** to update `workflow-session.json`:
@@ -182,8 +182,8 @@ Large Projects (single dir >10 docs):
 **Commands**:

 ```bash
-# 1. Get top-level directories from phase2-analysis.json
-bash(cat .workflow/active/WFS-docs-{timestamp}/.process/phase2-analysis.json | jq -r '.top_level_dirs[]')
+# 1. Get top-level directories from doc-planning-data.json
+bash(cat .workflow/active/WFS-docs-{timestamp}/.process/doc-planning-data.json | jq -r '.top_level_dirs[]')

 # 2. Get mode from workflow-session.json
 bash(cat .workflow/active/WFS-docs-{timestamp}/workflow-session.json | jq -r '.mode // "full"')
@@ -201,7 +201,7 @@ bash(grep -r "router\.|@Get\|@Post" src/ 2>/dev/null && echo "API_FOUND" || echo
   - If total ≤10 docs: create group
   - If total >10 docs: split to 1 dir/group or subdivide
   - If single dir >10 docs: split by subdirectories
-3. Use **Edit tool** to update `phase2-analysis.json` adding groups field:
+3. Use **Edit tool** to update `doc-planning-data.json` adding groups field:
   ```json
   "groups": {
     "count": 3,
@@ -215,7 +215,7 @@ bash(grep -r "router\.|@Get\|@Post" src/ 2>/dev/null && echo "API_FOUND" || echo

 **Task ID Calculation**:
 ```bash
-group_count=$(jq '.groups.count' .workflow/active/WFS-docs-{timestamp}/.process/phase2-analysis.json)
+group_count=$(jq '.groups.count' .workflow/active/WFS-docs-{timestamp}/.process/doc-planning-data.json)
 readme_id=$((group_count + 1))   # Next ID after groups
 arch_id=$((group_count + 2))
 api_id=$((group_count + 3))
@@ -237,7 +237,7 @@ api_id=$((group_count + 3))

 **Generation Process**:
 1. Read configuration values (tool, cli_execute, mode) from workflow-session.json
-2. Read group assignments from phase2-analysis.json
+2. Read group assignments from doc-planning-data.json
 3. Generate Level 1 tasks (IMPL-001 to IMPL-N, one per group)
 4. Generate Level 2+ tasks if mode=full (README, ARCHITECTURE, HTTP API)

@@ -262,14 +262,14 @@ api_id=$((group_count + 3))
  },
  "context": {
    "requirements": [
-      "Process directories from group ${group_number} in phase2-analysis.json",
+      "Process directories from group ${group_number} in doc-planning-data.json",
      "Generate docs to .workflow/docs/${project_name}/ (mirrored structure)",
      "Code folders: API.md + README.md; Navigation folders: README.md only",
      "Use pre-analyzed data from Phase 2 (no redundant analysis)"
    ],
    "focus_paths": ["${group_dirs_from_json}"],
    "precomputed_data": {
-      "phase2_analysis": "${session_dir}/.process/phase2-analysis.json"
+      "phase2_analysis": "${session_dir}/.process/doc-planning-data.json"
    }
  },
  "flow_control": {
@@ -278,8 +278,8 @@ api_id=$((group_count + 3))
        "step": "load_precomputed_data",
        "action": "Load Phase 2 analysis and extract group directories",
        "commands": [
-          "bash(cat ${session_dir}/.process/phase2-analysis.json)",
-          "bash(jq '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories' ${session_dir}/.process/phase2-analysis.json)"
+          "bash(cat ${session_dir}/.process/doc-planning-data.json)",
+          "bash(jq '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories' ${session_dir}/.process/doc-planning-data.json)"
        ],
        "output_to": "phase2_context",
        "note": "Single JSON file contains all Phase 2 analysis results"
@@ -324,7 +324,7 @@ api_id=$((group_count + 3))
 {
  "step": 2,
  "title": "Batch generate documentation via CLI",
-  "command": "bash(dirs=$(jq -r '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories[]' ${session_dir}/.process/phase2-analysis.json); for dir in $dirs; do cd \"$dir\" && gemini --approval-mode yolo -p \"PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure\" || echo \"Failed: $dir\"; cd -; done)",
+  "command": "bash(dirs=$(jq -r '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories[]' ${session_dir}/.process/doc-planning-data.json); for dir in $dirs; do cd \"$dir\" && gemini --approval-mode yolo -p \"PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure\" || echo \"Failed: $dir\"; cd -; done)",
  "depends_on": [1],
  "output": "generated_docs"
 }
@@ -464,7 +464,7 @@ api_id=$((group_count + 3))
    ├── IMPL_PLAN.md
    ├── TODO_LIST.md
    ├── .process/
-    │   └── phase2-analysis.json         # All Phase 2 analysis data (replaces 7+ files)
+    │   └── doc-planning-data.json       # All Phase 2 analysis data (replaces 7+ files)
    └── .task/
        ├── IMPL-001.json                # Small: all modules | Large: group 1
        ├── IMPL-00N.json                # (Large only: groups 2-N)
@@ -473,7 +473,7 @@ api_id=$((group_count + 3))
        └── IMPL-{N+3}.json              # HTTP API (optional)
 ```

-**phase2-analysis.json Structure**:
+**doc-planning-data.json Structure**:
 ```json
 {
  "metadata": {
--- a/.claude/commands/workflow/status.md
+++ b/.claude/commands/workflow/status.md
@@ -1,15 +1,16 @@
 ---
 name: workflow:status
 description: Generate on-demand views for project overview and workflow tasks with optional task-id filtering for detailed view
-argument-hint: "[optional: --project|task-id|--validate]"
+argument-hint: "[optional: --project|task-id|--validate|--dashboard]"
 ---

 # Workflow Status Command (/workflow:status)

 ## Overview
-Generates on-demand views from project and session data. Supports two modes:
+Generates on-demand views from project and session data. Supports multiple modes:
 1. **Project Overview** (`--project`): Shows completed features and project statistics
 2. **Workflow Tasks** (default): Shows current session task progress
+3. **HTML Dashboard** (`--dashboard`): Generates interactive HTML task board with active and archived sessions

 No synchronization needed - all views are calculated from current JSON state.

@@ -19,6 +20,7 @@ No synchronization needed - all views are calculated from current JSON state.
 /workflow:status --project          # Show project-level feature registry
 /workflow:status impl-1             # Show specific task details
 /workflow:status --validate         # Validate workflow integrity
+/workflow:status --dashboard        # Generate HTML dashboard board
 ```

 ## Implementation Flow
@@ -192,4 +194,135 @@ find .workflow/active/WFS-session/.summaries/ -name "*.md" -type f 2>/dev/null |

 ## Completed Tasks
 - [COMPLETED] impl-0: Setup completed
+```
+
+## Dashboard Mode (HTML Board)
+
+### Step 1: Check for --dashboard flag
+```bash
+# If --dashboard flag present → Execute Dashboard Mode
+```
+
+### Step 2: Collect Workflow Data
+
+**Collect Active Sessions**:
+```bash
+# Find all active sessions
+find .workflow/active/ -name "WFS-*" -type d 2>/dev/null
+
+# For each active session, read metadata and tasks
+for session in $(find .workflow/active/ -name "WFS-*" -type d 2>/dev/null); do
+  cat "$session/workflow-session.json"
+  find "$session/.task/" -name "*.json" -type f 2>/dev/null
+done
+```
+
+**Collect Archived Sessions**:
+```bash
+# Find all archived sessions
+find .workflow/archives/ -name "WFS-*" -type d 2>/dev/null
+
+# Read manifest if exists
+cat .workflow/archives/manifest.json 2>/dev/null
+
+# For each archived session, read metadata
+for archive in $(find .workflow/archives/ -name "WFS-*" -type d 2>/dev/null); do
+  cat "$archive/workflow-session.json" 2>/dev/null
+  # Count completed tasks
+  find "$archive/.task/" -name "*.json" -type f 2>/dev/null | wc -l
+done
+```
+
+### Step 3: Process and Structure Data
+
+**Build data structure for dashboard**:
+```javascript
+const dashboardData = {
+  activeSessions: [],
+  archivedSessions: [],
+  generatedAt: new Date().toISOString()
+};
+
+// Process active sessions
+for each active_session in active_sessions:
+  const sessionData = JSON.parse(Read(active_session/workflow-session.json));
+  const tasks = [];
+
+  // Load all tasks for this session
+  for each task_file in find(active_session/.task/*.json):
+    const taskData = JSON.parse(Read(task_file));
+    tasks.push({
+      task_id: taskData.task_id,
+      title: taskData.title,
+      status: taskData.status,
+      type: taskData.type
+    });
+
+  dashboardData.activeSessions.push({
+    session_id: sessionData.session_id,
+    project: sessionData.project,
+    status: sessionData.status,
+    created_at: sessionData.created_at || sessionData.initialized_at,
+    tasks: tasks
+  });
+
+// Process archived sessions
+for each archived_session in archived_sessions:
+  const sessionData = JSON.parse(Read(archived_session/workflow-session.json));
+  const taskCount = bash(find archived_session/.task/*.json | wc -l);
+
+  dashboardData.archivedSessions.push({
+    session_id: sessionData.session_id,
+    project: sessionData.project,
+    archived_at: sessionData.completed_at || sessionData.archived_at,
+    taskCount: parseInt(taskCount),
+    archive_path: archived_session
+  });
+```
+
+### Step 4: Generate HTML from Template
+
+**Load template and inject data**:
+```javascript
+// Read the HTML template
+const template = Read("~/.claude/templates/workflow-dashboard.html");
+
+// Prepare data for injection
+const dataJson = JSON.stringify(dashboardData, null, 2);
+
+// Replace placeholder with actual data
+const htmlContent = template.replace('{{WORKFLOW_DATA}}', dataJson);
+
+// Ensure .workflow directory exists
+bash(mkdir -p .workflow);
+```
+
+### Step 5: Write HTML File
+
+```bash
+# Write the generated HTML to .workflow/dashboard.html
+Write({
+  file_path: ".workflow/dashboard.html",
+  content: htmlContent
+})
+```
+
+### Step 6: Display Success Message
+
+```markdown
+Dashboard generated successfully!
+
+Location: .workflow/dashboard.html
+
+Open in browser:
+  file://$(pwd)/.workflow/dashboard.html
+
+Features:
+- 📊 Active sessions overview
+- 📦 Archived sessions history
+- 🔍 Search and filter
+- 📈 Progress tracking
+- 🎨 Dark/light theme
+
+Refresh data: Re-run /workflow:status --dashboard
 ```
--- a/.claude/skills/command-guide/reference/commands/memory/docs.md
+++ b/.claude/skills/command-guide/reference/commands/memory/docs.md
@@ -89,7 +89,7 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj
 bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${project_name} -type f -name "*.md" ! -path "*/README.md" ! -path "*/ARCHITECTURE.md" ! -path "*/EXAMPLES.md" ! -path "*/api/*" 2>/dev/null | xargs cat 2>/dev/null; fi)
 ```

-**Data Processing**: Parse bash outputs, calculate statistics, use **Write tool** to create `${session_dir}/.process/phase2-analysis.json` with structure:
+**Data Processing**: Parse bash outputs, calculate statistics, use **Write tool** to create `${session_dir}/.process/doc-planning-data.json` with structure:

 ```json
 {
@@ -118,7 +118,7 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj

 **Then** use **Edit tool** to update `workflow-session.json` adding analysis field.

-**Output**: Single `phase2-analysis.json` with all analysis data (no temp files or Python scripts).
+**Output**: Single `doc-planning-data.json` with all analysis data (no temp files or Python scripts).

 **Auto-skipped**: Tests (`**/test/**`, `**/*.test.*`), Build (`**/node_modules/**`, `**/dist/**`), Config (root-level files), Vendor directories.

@@ -127,8 +127,8 @@ bash(if [ -d .workflow/docs/\${project_name} ]; then find .workflow/docs/\${proj
 **Commands**:

 ```bash
-# Count existing docs from phase2-analysis.json
-bash(cat .workflow/WFS-docs-{timestamp}/.process/phase2-analysis.json | jq '.existing_docs.file_list | length')
+# Count existing docs from doc-planning-data.json
+bash(cat .workflow/WFS-docs-{timestamp}/.process/doc-planning-data.json | jq '.existing_docs.file_list | length')
 ```

 **Data Processing**: Use count result, then use **Edit tool** to update `workflow-session.json`:
@@ -182,8 +182,8 @@ Large Projects (single dir >10 docs):
 **Commands**:

 ```bash
-# 1. Get top-level directories from phase2-analysis.json
-bash(cat .workflow/WFS-docs-{timestamp}/.process/phase2-analysis.json | jq -r '.top_level_dirs[]')
+# 1. Get top-level directories from doc-planning-data.json
+bash(cat .workflow/WFS-docs-{timestamp}/.process/doc-planning-data.json | jq -r '.top_level_dirs[]')

 # 2. Get mode from workflow-session.json
 bash(cat .workflow/WFS-docs-{timestamp}/workflow-session.json | jq -r '.mode // "full"')
@@ -201,7 +201,7 @@ bash(grep -r "router\.|@Get\|@Post" src/ 2>/dev/null && echo "API_FOUND" || echo
   - If total ≤10 docs: create group
   - If total >10 docs: split to 1 dir/group or subdivide
   - If single dir >10 docs: split by subdirectories
-3. Use **Edit tool** to update `phase2-analysis.json` adding groups field:
+3. Use **Edit tool** to update `doc-planning-data.json` adding groups field:
   ```json
   "groups": {
     "count": 3,
@@ -215,7 +215,7 @@ bash(grep -r "router\.|@Get\|@Post" src/ 2>/dev/null && echo "API_FOUND" || echo

 **Task ID Calculation**:
 ```bash
-group_count=$(jq '.groups.count' .workflow/WFS-docs-{timestamp}/.process/phase2-analysis.json)
+group_count=$(jq '.groups.count' .workflow/WFS-docs-{timestamp}/.process/doc-planning-data.json)
 readme_id=$((group_count + 1))   # Next ID after groups
 arch_id=$((group_count + 2))
 api_id=$((group_count + 3))
@@ -237,7 +237,7 @@ api_id=$((group_count + 3))

 **Generation Process**:
 1. Read configuration values (tool, cli_execute, mode) from workflow-session.json
-2. Read group assignments from phase2-analysis.json
+2. Read group assignments from doc-planning-data.json
 3. Generate Level 1 tasks (IMPL-001 to IMPL-N, one per group)
 4. Generate Level 2+ tasks if mode=full (README, ARCHITECTURE, HTTP API)

@@ -262,14 +262,14 @@ api_id=$((group_count + 3))
  },
  "context": {
    "requirements": [
-      "Process directories from group ${group_number} in phase2-analysis.json",
+      "Process directories from group ${group_number} in doc-planning-data.json",
      "Generate docs to .workflow/docs/${project_name}/ (mirrored structure)",
      "Code folders: API.md + README.md; Navigation folders: README.md only",
      "Use pre-analyzed data from Phase 2 (no redundant analysis)"
    ],
    "focus_paths": ["${group_dirs_from_json}"],
    "precomputed_data": {
-      "phase2_analysis": "${session_dir}/.process/phase2-analysis.json"
+      "phase2_analysis": "${session_dir}/.process/doc-planning-data.json"
    }
  },
  "flow_control": {
@@ -278,8 +278,8 @@ api_id=$((group_count + 3))
        "step": "load_precomputed_data",
        "action": "Load Phase 2 analysis and extract group directories",
        "commands": [
-          "bash(cat ${session_dir}/.process/phase2-analysis.json)",
-          "bash(jq '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories' ${session_dir}/.process/phase2-analysis.json)"
+          "bash(cat ${session_dir}/.process/doc-planning-data.json)",
+          "bash(jq '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories' ${session_dir}/.process/doc-planning-data.json)"
        ],
        "output_to": "phase2_context",
        "note": "Single JSON file contains all Phase 2 analysis results"
@@ -324,7 +324,7 @@ api_id=$((group_count + 3))
 {
  "step": 2,
  "title": "Batch generate documentation via CLI",
-  "command": "bash(dirs=$(jq -r '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories[]' ${session_dir}/.process/phase2-analysis.json); for dir in $dirs; do cd \"$dir\" && gemini --approval-mode yolo -p \"PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure\" || echo \"Failed: $dir\"; cd -; done)",
+  "command": "bash(dirs=$(jq -r '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories[]' ${session_dir}/.process/doc-planning-data.json); for dir in $dirs; do cd \"$dir\" && gemini --approval-mode yolo -p \"PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure\" || echo \"Failed: $dir\"; cd -; done)",
  "depends_on": [1],
  "output": "generated_docs"
 }
@@ -464,7 +464,7 @@ api_id=$((group_count + 3))
    ├── IMPL_PLAN.md
    ├── TODO_LIST.md
    ├── .process/
-    │   └── phase2-analysis.json         # All Phase 2 analysis data (replaces 7+ files)
+    │   └── doc-planning-data.json         # All Phase 2 analysis data (replaces 7+ files)
    └── .task/
        ├── IMPL-001.json                # Small: all modules | Large: group 1
        ├── IMPL-00N.json                # (Large only: groups 2-N)
@@ -473,7 +473,7 @@ api_id=$((group_count + 3))
        └── IMPL-{N+3}.json              # HTTP API (optional)
 ```

-**phase2-analysis.json Structure**:
+**doc-planning-data.json Structure**:
 ```json
 {
  "metadata": {
--- a/.claude/templates/workflow-dashboard.html
+++ b/.claude/templates/workflow-dashboard.html
@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Workflow Dashboard - Task Board</title>
+    <style>
+        :root {
+            --bg-primary: #f5f7fa;
+            --bg-secondary: #ffffff;
+            --bg-card: #ffffff;
+            --text-primary: #1a202c;
+            --text-secondary: #718096;
+            --border-color: #e2e8f0;
+            --accent-color: #4299e1;
+            --success-color: #48bb78;
+            --warning-color: #ed8936;
+            --danger-color: #f56565;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        [data-theme="dark"] {
+            --bg-primary: #1a202c;
+            --bg-secondary: #2d3748;
+            --bg-card: #2d3748;
+            --text-primary: #f7fafc;
+            --text-secondary: #a0aec0;
+            --border-color: #4a5568;
+            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            background-color: var(--bg-secondary);
+            box-shadow: var(--shadow);
+            padding: 20px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            color: var(--accent-color);
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+            align-items: center;
+            margin-top: 15px;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 250px;
+            position: relative;
+        }
+
+        .search-box input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.95rem;
+        }
+
+        .filter-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.2s;
+            background-color: var(--bg-card);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .btn:hover {
+            transform: translateY(-1px);
+            box-shadow: var(--shadow);
+        }
+
+        .btn.active {
+            background-color: var(--accent-color);
+            color: white;
+            border-color: var(--accent-color);
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .stat-card {
+            background-color: var(--bg-card);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            transition: transform 0.2s;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: var(--accent-color);
+        }
+
+        .stat-label {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-top: 5px;
+        }
+
+        .section {
+            margin-bottom: 40px;
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .sessions-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 20px;
+        }
+
+        .session-card {
+            background-color: var(--bg-card);
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+            padding: 20px;
+            transition: all 0.3s;
+        }
+
+        .session-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .session-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 15px;
+        }
+
+        .session-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 5px;
+        }
+
+        .session-status {
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .status-active {
+            background-color: #c6f6d5;
+            color: #22543d;
+        }
+
+        .status-archived {
+            background-color: #e2e8f0;
+            color: #4a5568;
+        }
+
+        [data-theme="dark"] .status-active {
+            background-color: #22543d;
+            color: #c6f6d5;
+        }
+
+        [data-theme="dark"] .status-archived {
+            background-color: #4a5568;
+            color: #e2e8f0;
+        }
+
+        .session-meta {
+            display: flex;
+            gap: 15px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background-color: var(--bg-primary);
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 15px 0;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+            transition: width 0.3s;
+        }
+
+        .tasks-list {
+            margin-top: 15px;
+        }
+
+        .task-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin-bottom: 8px;
+            background-color: var(--bg-primary);
+            border-radius: 6px;
+            border-left: 3px solid var(--border-color);
+            transition: all 0.2s;
+        }
+
+        .task-item:hover {
+            transform: translateX(4px);
+        }
+
+        .task-item.completed {
+            border-left-color: var(--success-color);
+            opacity: 0.8;
+        }
+
+        .task-item.in_progress {
+            border-left-color: var(--warning-color);
+        }
+
+        .task-item.pending {
+            border-left-color: var(--text-secondary);
+        }
+
+        .task-checkbox {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 2px solid var(--border-color);
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+        }
+
+        .task-item.completed .task-checkbox {
+            background-color: var(--success-color);
+            border-color: var(--success-color);
+        }
+
+        .task-item.completed .task-checkbox::after {
+            content: '✓';
+            color: white;
+            font-size: 0.8rem;
+            font-weight: bold;
+        }
+
+        .task-item.in_progress .task-checkbox {
+            border-color: var(--warning-color);
+            background-color: var(--warning-color);
+        }
+
+        .task-item.in_progress .task-checkbox::after {
+            content: '⟳';
+            color: white;
+            font-size: 0.9rem;
+        }
+
+        .task-title {
+            flex: 1;
+            font-size: 0.9rem;
+        }
+
+        .task-id {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            font-family: monospace;
+            margin-left: 10px;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        .theme-toggle {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: var(--accent-color);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            box-shadow: var(--shadow-lg);
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        @media (max-width: 768px) {
+            .sessions-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            h1 {
+                font-size: 1.5rem;
+            }
+
+            .header-controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .search-box {
+                width: 100%;
+            }
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 500;
+            margin-left: 8px;
+        }
+
+        .badge-count {
+            background-color: var(--accent-color);
+            color: white;
+        }
+
+        .session-footer {
+            margin-top: 15px;
+            padding-top: 15px;
+            border-top: 1px solid var(--border-color);
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🚀 Workflow Dashboard</h1>
+            <p style="color: var(--text-secondary);">Task Board - Active and Archived Sessions</p>
+
+            <div class="header-controls">
+                <div class="search-box">
+                    <input type="text" id="searchInput" placeholder="🔍 Search tasks or sessions..." />
+                </div>
+
+                <div class="filter-group">
+                    <button class="btn active" data-filter="all">All</button>
+                    <button class="btn" data-filter="active">Active</button>
+                    <button class="btn" data-filter="archived">Archived</button>
+                </div>
+            </div>
+        </header>
+
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-value" id="totalSessions">0</div>
+                <div class="stat-label">Total Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="activeSessions">0</div>
+                <div class="stat-label">Active Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="totalTasks">0</div>
+                <div class="stat-label">Total Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="completedTasks">0</div>
+                <div class="stat-label">Completed Tasks</div>
+            </div>
+        </div>
+
+        <div class="section" id="activeSectionContainer">
+            <div class="section-header">
+                <h2 class="section-title">📋 Active Sessions</h2>
+            </div>
+            <div class="sessions-grid" id="activeSessions"></div>
+        </div>
+
+        <div class="section" id="archivedSectionContainer">
+            <div class="section-header">
+                <h2 class="section-title">📦 Archived Sessions</h2>
+            </div>
+            <div class="sessions-grid" id="archivedSessions"></div>
+        </div>
+    </div>
+
+    <button class="theme-toggle" id="themeToggle">🌙</button>
+
+    <script>
+        // Workflow data will be injected here
+        const workflowData = {{WORKFLOW_DATA}};
+
+        // Theme management
+        function initTheme() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+            updateThemeIcon(savedTheme);
+        }
+
+        function toggleTheme() {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            updateThemeIcon(newTheme);
+        }
+
+        function updateThemeIcon(theme) {
+            document.getElementById('themeToggle').textContent = theme === 'dark' ? '☀️' : '🌙';
+        }
+
+        // Statistics calculation
+        function updateStatistics() {
+            const stats = {
+                totalSessions: workflowData.activeSessions.length + workflowData.archivedSessions.length,
+                activeSessions: workflowData.activeSessions.length,
+                totalTasks: 0,
+                completedTasks: 0
+            };
+
+            workflowData.activeSessions.forEach(session => {
+                stats.totalTasks += session.tasks.length;
+                stats.completedTasks += session.tasks.filter(t => t.status === 'completed').length;
+            });
+
+            workflowData.archivedSessions.forEach(session => {
+                stats.totalTasks += session.taskCount || 0;
+                stats.completedTasks += session.taskCount || 0;
+            });
+
+            document.getElementById('totalSessions').textContent = stats.totalSessions;
+            document.getElementById('activeSessions').textContent = stats.activeSessions;
+            document.getElementById('totalTasks').textContent = stats.totalTasks;
+            document.getElementById('completedTasks').textContent = stats.completedTasks;
+        }
+
+        // Render session card
+        function createSessionCard(session, isActive) {
+            const card = document.createElement('div');
+            card.className = 'session-card';
+            card.dataset.sessionType = isActive ? 'active' : 'archived';
+
+            const completedTasks = isActive
+                ? session.tasks.filter(t => t.status === 'completed').length
+                : (session.taskCount || 0);
+            const totalTasks = isActive ? session.tasks.length : (session.taskCount || 0);
+            const progress = totalTasks > 0 ? (completedTasks / totalTasks * 100) : 0;
+
+            let tasksHtml = '';
+            if (isActive && session.tasks.length > 0) {
+                tasksHtml = `
+                    <div class="tasks-list">
+                        ${session.tasks.map(task => `
+                            <div class="task-item ${task.status}">
+                                <div class="task-checkbox"></div>
+                                <div class="task-title">${task.title || 'Untitled Task'}</div>
+                                <span class="task-id">${task.task_id || ''}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+            }
+
+            card.innerHTML = `
+                <div class="session-header">
+                    <div>
+                        <h3 class="session-title">${session.session_id || 'Unknown Session'}</h3>
+                        <div style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px;">
+                            ${session.project || ''}
+                        </div>
+                    </div>
+                    <span class="session-status ${isActive ? 'status-active' : 'status-archived'}">
+                        ${isActive ? 'Active' : 'Archived'}
+                    </span>
+                </div>
+
+                <div class="session-meta">
+                    <span>📅 ${session.created_at || session.archived_at || 'N/A'}</span>
+                    <span>📊 ${completedTasks}/${totalTasks} tasks</span>
+                </div>
+
+                ${totalTasks > 0 ? `
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${progress}%"></div>
+                    </div>
+                    <div style="text-align: center; font-size: 0.85rem; color: var(--text-secondary);">
+                        ${Math.round(progress)}% Complete
+                    </div>
+                ` : ''}
+
+                ${tasksHtml}
+
+                ${!isActive && session.archive_path ? `
+                    <div class="session-footer">
+                        📁 Archive: ${session.archive_path}
+                    </div>
+                ` : ''}
+            `;
+
+            return card;
+        }
+
+        // Render all sessions
+        function renderSessions(filter = 'all') {
+            const activeContainer = document.getElementById('activeSessions');
+            const archivedContainer = document.getElementById('archivedSessions');
+
+            activeContainer.innerHTML = '';
+            archivedContainer.innerHTML = '';
+
+            if (filter === 'all' || filter === 'active') {
+                if (workflowData.activeSessions.length === 0) {
+                    activeContainer.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📭</div>
+                            <p>No active sessions</p>
+                        </div>
+                    `;
+                } else {
+                    workflowData.activeSessions.forEach(session => {
+                        activeContainer.appendChild(createSessionCard(session, true));
+                    });
+                }
+            }
+
+            if (filter === 'all' || filter === 'archived') {
+                if (workflowData.archivedSessions.length === 0) {
+                    archivedContainer.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📦</div>
+                            <p>No archived sessions</p>
+                        </div>
+                    `;
+                } else {
+                    workflowData.archivedSessions.forEach(session => {
+                        archivedContainer.appendChild(createSessionCard(session, false));
+                    });
+                }
+            }
+
+            // Show/hide sections
+            document.getElementById('activeSectionContainer').style.display =
+                (filter === 'all' || filter === 'active') ? 'block' : 'none';
+            document.getElementById('archivedSectionContainer').style.display =
+                (filter === 'all' || filter === 'archived') ? 'block' : 'none';
+        }
+
+        // Search functionality
+        function setupSearch() {
+            const searchInput = document.getElementById('searchInput');
+            searchInput.addEventListener('input', (e) => {
+                const query = e.target.value.toLowerCase();
+                const cards = document.querySelectorAll('.session-card');
+
+                cards.forEach(card => {
+                    const text = card.textContent.toLowerCase();
+                    card.style.display = text.includes(query) ? 'block' : 'none';
+                });
+            });
+        }
+
+        // Filter functionality
+        function setupFilters() {
+            const filterButtons = document.querySelectorAll('[data-filter]');
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    filterButtons.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    renderSessions(btn.dataset.filter);
+                });
+            });
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            initTheme();
+            updateStatistics();
+            renderSessions();
+            setupSearch();
+            setupFilters();
+
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+        });
+    </script>
+</body>
+</html>
--- a/WORKFLOW_DECISION_GUIDE.md
+++ b/WORKFLOW_DECISION_GUIDE.md
@@ -13,23 +13,23 @@ flowchart TD
    Q1 -->|不知道| Ideation[💡 构思阶段<br>需求探索]
    Q1 -->|知道| Q2{知道怎么做吗?}

-    Ideation --> BrainIdea[/workflow:brainstorm:auto-parallel<br>探索产品方向和功能定位]
+    Ideation --> BrainIdea[/ /workflow:brainstorm:auto-parallel<br>探索产品方向和功能定位 /]
    BrainIdea --> Q2

    Q2 -->|不知道| Design[🏗️ 设计探索阶段<br>架构方案探索]
    Q2 -->|知道| Q3{需要UI设计吗?}

-    Design --> BrainDesign[/workflow:brainstorm:auto-parallel<br>探索技术方案和架构]
+    Design --> BrainDesign[/ /workflow:brainstorm:auto-parallel<br>探索技术方案和架构 /]
    BrainDesign --> Q3

    Q3 -->|需要| UIDesign[🎨 UI设计阶段]
    Q3 -->|不需要| Q4{任务复杂度?}

    UIDesign --> Q3a{有参考设计吗?}
-    Q3a -->|有| UIImitate[/workflow:ui-design:imitate-auto<br>--input 参考URL]
-    Q3a -->|无| UIExplore[/workflow:ui-design:explore-auto<br>--prompt 设计描述]
+    Q3a -->|有| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input 参考URL /]
+    Q3a -->|无| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt 设计描述 /]

-    UIImitate --> UISync[/workflow:ui-design:design-sync<br>同步设计系统]
+    UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>同步设计系统 /]
    UIExplore --> UISync
    UISync --> Q4

@@ -37,19 +37,19 @@ flowchart TD
    Q4 -->|复杂完整| FullPlan[📋 完整规划<br>/workflow:plan]

    LitePlan --> Q5{需要代码探索?}
-    Q5 -->|需要| LitePlanE[/workflow:lite-plan -e<br>任务描述]
-    Q5 -->|不需要| LitePlanNormal[/workflow:lite-plan<br>任务描述]
+    Q5 -->|需要| LitePlanE[/ /workflow:lite-plan -e<br>任务描述 /]
+    Q5 -->|不需要| LitePlanNormal[/ /workflow:lite-plan<br>任务描述 /]

    LitePlanE --> LiteConfirm[三维确认:<br>1️⃣ 任务批准<br>2️⃣ 执行方式<br>3️⃣ 代码审查]
    LitePlanNormal --> LiteConfirm

    LiteConfirm --> Q6{选择执行方式}
-    Q6 -->|Agent| LiteAgent[/workflow:lite-execute<br>使用@code-developer]
+    Q6 -->|Agent| LiteAgent[/ /workflow:lite-execute<br>使用@code-developer /]
    Q6 -->|CLI工具| LiteCLI[CLI执行<br>Gemini/Qwen/Codex]
    Q6 -->|仅计划| UserImpl[用户手动实现]

    FullPlan --> PlanVerify{验证计划质量?}
-    PlanVerify -->|是| Verify[/workflow:action-plan-verify]
+    PlanVerify -->|是| Verify[/ /workflow:action-plan-verify /]
    PlanVerify -->|否| Execute
    Verify --> Q7{验证通过?}
    Q7 -->|否| FixPlan[修复计划问题]
@@ -63,16 +63,16 @@ flowchart TD
    Execute --> TestDecision

    TestDecision{需要测试吗?}
-    TestDecision -->|TDD模式| TDD[/workflow:tdd-plan<br>测试驱动开发]
-    TestDecision -->|后置测试| TestGen[/workflow:test-gen<br>生成测试]
-    TestDecision -->|已有测试| TestCycle[/workflow:test-cycle-execute<br>测试修复循环]
+    TestDecision -->|TDD模式| TDD[/ /workflow:tdd-plan<br>测试驱动开发 /]
+    TestDecision -->|后置测试| TestGen[/ /workflow:test-gen<br>生成测试 /]
+    TestDecision -->|已有测试| TestCycle[/ /workflow:test-cycle-execute<br>测试修复循环 /]
    TestDecision -->|不需要| Review

-    TDD --> TDDExecute[/workflow:execute<br>Red-Green-Refactor]
-    TDDExecute --> TDDVerify[/workflow:tdd-verify<br>验证TDD合规]
+    TDD --> TDDExecute[/ /workflow:execute<br>Red-Green-Refactor /]
+    TDDExecute --> TDDVerify[/ /workflow:tdd-verify<br>验证TDD合规 /]
    TDDVerify --> Review

-    TestGen --> TestExecute[/workflow:execute<br>执行测试任务]
+    TestGen --> TestExecute[/ /workflow:execute<br>执行测试任务 /]
    TestExecute --> TestResult{测试通过?}
    TestResult -->|否| TestCycle
    TestResult -->|是| Review
@@ -83,10 +83,10 @@ flowchart TD

    Review[📝 审查阶段]
    Review --> Q8{需要专项审查?}
-    Q8 -->|安全| SecurityReview[/workflow:review<br>--type security]
-    Q8 -->|架构| ArchReview[/workflow:review<br>--type architecture]
-    Q8 -->|质量| QualityReview[/workflow:review<br>--type quality]
-    Q8 -->|综合| GeneralReview[/workflow:review<br>综合审查]
+    Q8 -->|安全| SecurityReview[/ /workflow:review<br>--type security /]
+    Q8 -->|架构| ArchReview[/ /workflow:review<br>--type architecture /]
+    Q8 -->|质量| QualityReview[/ /workflow:review<br>--type quality /]
+    Q8 -->|综合| GeneralReview[/ /workflow:review<br>综合审查 /]
    Q8 -->|不需要| Complete

    SecurityReview --> Complete
--- a/WORKFLOW_DECISION_GUIDE_EN.md
+++ b/WORKFLOW_DECISION_GUIDE_EN.md
@@ -0,0 +1,419 @@
+# 🌳 CCW Workflow Decision Guide
+
+This guide helps you choose the right commands and workflows for the complete software development lifecycle.
+
+---
+
+## 📊 Full Lifecycle Command Selection Flowchart
+
+```mermaid
+flowchart TD
+    Start([Start New Feature/Project]) --> Q1{Know what to build?}
+
+    Q1 -->|No| Ideation[💡 Ideation Phase<br>Requirements Exploration]
+    Q1 -->|Yes| Q2{Know how to build?}
+
+    Ideation --> BrainIdea[/ /workflow:brainstorm:auto-parallel<br>Explore product direction and positioning /]
+    BrainIdea --> Q2
+
+    Q2 -->|No| Design[🏗️ Design Exploration<br>Architecture Solution Discovery]
+    Q2 -->|Yes| Q3{Need UI design?}
+
+    Design --> BrainDesign[/ /workflow:brainstorm:auto-parallel<br>Explore technical solutions and architecture /]
+    BrainDesign --> Q3
+
+    Q3 -->|Yes| UIDesign[🎨 UI Design Phase]
+    Q3 -->|No| Q4{Task complexity?}
+
+    UIDesign --> Q3a{Have reference design?}
+    Q3a -->|Yes| UIImitate[/ /workflow:ui-design:imitate-auto<br>--input reference URL /]
+    Q3a -->|No| UIExplore[/ /workflow:ui-design:explore-auto<br>--prompt design description /]
+
+    UIImitate --> UISync[/ /workflow:ui-design:design-sync<br>Sync design system /]
+    UIExplore --> UISync
+    UISync --> Q4
+
+    Q4 -->|Simple & Quick| LitePlan[⚡ Lightweight Planning<br>/workflow:lite-plan]
+    Q4 -->|Complex & Complete| FullPlan[📋 Full Planning<br>/workflow:plan]
+
+    LitePlan --> Q5{Need code exploration?}
+    Q5 -->|Yes| LitePlanE[/ /workflow:lite-plan -e<br>task description /]
+    Q5 -->|No| LitePlanNormal[/ /workflow:lite-plan<br>task description /]
+
+    LitePlanE --> LiteConfirm[Three-Dimensional Confirmation:<br>1️⃣ Task Approval<br>2️⃣ Execution Method<br>3️⃣ Code Review]
+    LitePlanNormal --> LiteConfirm
+
+    LiteConfirm --> Q6{Choose execution method}
+    Q6 -->|Agent| LiteAgent[/ /workflow:lite-execute<br>Using @code-developer /]
+    Q6 -->|CLI Tools| LiteCLI[CLI Execution<br>Gemini/Qwen/Codex]
+    Q6 -->|Plan Only| UserImpl[Manual User Implementation]
+
+    FullPlan --> PlanVerify{Verify plan quality?}
+    PlanVerify -->|Yes| Verify[/ /workflow:action-plan-verify /]
+    PlanVerify -->|No| Execute
+    Verify --> Q7{Verification passed?}
+    Q7 -->|No| FixPlan[Fix plan issues]
+    Q7 -->|Yes| Execute
+    FixPlan --> Execute
+
+    Execute[🚀 Execution Phase<br>/workflow:execute]
+    LiteAgent --> TestDecision
+    LiteCLI --> TestDecision
+    UserImpl --> TestDecision
+    Execute --> TestDecision
+
+    TestDecision{Need testing?}
+    TestDecision -->|TDD Mode| TDD[/ /workflow:tdd-plan<br>Test-Driven Development /]
+    TestDecision -->|Post-Implementation Testing| TestGen[/ /workflow:test-gen<br>Generate tests /]
+    TestDecision -->|Existing Tests| TestCycle[/ /workflow:test-cycle-execute<br>Test-fix cycle /]
+    TestDecision -->|No| Review
+
+    TDD --> TDDExecute[/ /workflow:execute<br>Red-Green-Refactor /]
+    TDDExecute --> TDDVerify[/ /workflow:tdd-verify<br>Verify TDD compliance /]
+    TDDVerify --> Review
+
+    TestGen --> TestExecute[/ /workflow:execute<br>Execute test tasks /]
+    TestExecute --> TestResult{Tests passed?}
+    TestResult -->|No| TestCycle
+    TestResult -->|Yes| Review
+
+    TestCycle --> TestPass{Pass rate ≥95%?}
+    TestPass -->|No, continue fixing| TestCycle
+    TestPass -->|Yes| Review
+
+    Review[📝 Review Phase]
+    Review --> Q8{Need specialized review?}
+    Q8 -->|Security| SecurityReview[/ /workflow:review<br>--type security /]
+    Q8 -->|Architecture| ArchReview[/ /workflow:review<br>--type architecture /]
+    Q8 -->|Quality| QualityReview[/ /workflow:review<br>--type quality /]
+    Q8 -->|Comprehensive| GeneralReview[/ /workflow:review<br>Comprehensive review /]
+    Q8 -->|No| Complete
+
+    SecurityReview --> Complete
+    ArchReview --> Complete
+    QualityReview --> Complete
+    GeneralReview --> Complete
+
+    Complete[✅ Completion Phase<br>/workflow:session:complete]
+    Complete --> End([Project Complete])
+
+    style Start fill:#e1f5ff
+    style End fill:#c8e6c9
+    style BrainIdea fill:#fff9c4
+    style BrainDesign fill:#fff9c4
+    style UIImitate fill:#f8bbd0
+    style UIExplore fill:#f8bbd0
+    style LitePlan fill:#b3e5fc
+    style FullPlan fill:#b3e5fc
+    style Execute fill:#c5e1a5
+    style TDD fill:#ffccbc
+    style TestGen fill:#ffccbc
+    style TestCycle fill:#ffccbc
+    style Review fill:#d1c4e9
+    style Complete fill:#c8e6c9
+```
+
+---
+
+## 🎯 Decision Point Explanations
+
+### 1️⃣ **Ideation Phase - "Know what to build?"**
+
+| Situation | Command | Description |
+|-----------|---------|-------------|
+| ❌ Uncertain about product direction | `/workflow:brainstorm:auto-parallel "Explore XXX domain product opportunities"` | Multi-role analysis with Product Manager, UX Expert, etc. |
+| ✅ Clear feature requirements | Skip to design phase | Already know what functionality to build |
+
+**Examples**:
+```bash
+# Uncertain scenario: Want to build a collaboration tool, but unsure what exactly
+/workflow:brainstorm:auto-parallel "Explore team collaboration tool positioning and core features" --count 5
+
+# Certain scenario: Building a real-time document collaboration editor (requirements clear)
+# Skip ideation, move to design phase
+```
+
+---
+
+### 2️⃣ **Design Phase - "Know how to build?"**
+
+| Situation | Command | Description |
+|-----------|---------|-------------|
+| ❌ Don't know technical approach | `/workflow:brainstorm:auto-parallel "Design XXX system architecture"` | System Architect, Security Expert analyze technical solutions |
+| ✅ Clear implementation path | Skip to planning | Already know tech stack, architecture patterns |
+
+**Examples**:
+```bash
+# Don't know how: Real-time collaboration conflict resolution? Which algorithm?
+/workflow:brainstorm:auto-parallel "Design conflict resolution mechanism for real-time collaborative document editing" --count 4
+
+# Know how: Using Operational Transformation + WebSocket + Redis
+# Skip design exploration, go directly to planning
+/workflow:plan "Implement real-time collaborative editing using OT algorithm, WebSocket communication, Redis storage"
+```
+
+---
+
+### 3️⃣ **UI Design Phase - "Need UI design?"**
+
+| Situation | Command | Description |
+|-----------|---------|-------------|
+| 🎨 Have reference design | `/workflow:ui-design:imitate-auto --input "URL"` | Copy from existing design |
+| 🎨 Design from scratch | `/workflow:ui-design:explore-auto --prompt "description"` | Generate multiple design variants |
+| ⏭️ Backend/No UI | Skip | Pure backend API, CLI tools, etc. |
+
+**Examples**:
+```bash
+# Have reference: Imitate Google Docs collaboration interface
+/workflow:ui-design:imitate-auto --input "https://docs.google.com"
+
+# No reference: Design from scratch
+/workflow:ui-design:explore-auto --prompt "Modern minimalist document collaboration editing interface" --style-variants 3
+
+# Sync design to project
+/workflow:ui-design:design-sync --session WFS-xxx --selected-prototypes "v1,v2"
+```
+
+---
+
+### 4️⃣ **Planning Phase - Choose Workflow Type**
+
+| Workflow | Use Case | Characteristics |
+|----------|----------|-----------------|
+| `/workflow:lite-plan` | Quick tasks, small features | In-memory planning, three-dimensional confirmation, fast execution |
+| `/workflow:plan` | Complex projects, team collaboration | Persistent plans, quality gates, complete traceability |
+
+**Lite-Plan Three-Dimensional Confirmation**:
+1. **Task Approval**: Confirm / Modify / Cancel
+2. **Execution Method**: Agent / Provide Plan / CLI Tools (Gemini/Qwen/Codex)
+3. **Code Review**: No / Claude / Gemini / Qwen / Codex
+
+**Examples**:
+```bash
+# Simple task
+/workflow:lite-plan "Add user avatar upload feature"
+
+# Need code exploration
+/workflow:lite-plan -e "Refactor authentication module to OAuth2 standard"
+
+# Complex project
+/workflow:plan "Implement complete real-time collaborative editing system"
+/workflow:action-plan-verify  # Verify plan quality
+/workflow:execute
+```
+
+---
+
+### 5️⃣ **Testing Phase - Choose Testing Strategy**
+
+| Strategy | Command | Use Case |
+|----------|---------|----------|
+| **TDD Mode** | `/workflow:tdd-plan` | Starting from scratch, test-driven development |
+| **Post-Implementation Testing** | `/workflow:test-gen` | Code complete, add tests |
+| **Test Fixing** | `/workflow:test-cycle-execute` | Existing tests, need to fix failures |
+
+**Examples**:
+```bash
+# TDD: Write tests first, then implement
+/workflow:tdd-plan "User authentication module"
+/workflow:execute  # Red-Green-Refactor cycle
+/workflow:tdd-verify  # Verify TDD compliance
+
+# Post-implementation testing: Add tests after code complete
+/workflow:test-gen WFS-user-auth-implementation
+/workflow:execute
+
+# Test fixing: Existing tests with high failure rate
+/workflow:test-cycle-execute --max-iterations 5
+# Auto-iterate fixes until pass rate ≥95%
+```
+
+---
+
+### 6️⃣ **Review Phase - Choose Review Type**
+
+| Type | Command | Focus |
+|------|---------|-------|
+| **Security Review** | `/workflow:review --type security` | SQL injection, XSS, authentication vulnerabilities |
+| **Architecture Review** | `/workflow:review --type architecture` | Design patterns, coupling, scalability |
+| **Quality Review** | `/workflow:review --type quality` | Code style, complexity, maintainability |
+| **Comprehensive Review** | `/workflow:review` | All-around inspection |
+
+**Examples**:
+```bash
+# Security-critical system
+/workflow:review --type security
+
+# After architecture refactoring
+/workflow:review --type architecture
+
+# Daily development
+/workflow:review --type quality
+```
+
+---
+
+## 🔄 Complete Flow for Typical Scenarios
+
+### Scenario A: New Feature Development (Know How to Build)
+
+```bash
+# 1. Planning
+/workflow:plan "Add JWT authentication and permission management"
+
+# 2. Verify plan
+/workflow:action-plan-verify
+
+# 3. Execute
+/workflow:execute
+
+# 4. Testing
+/workflow:test-gen WFS-jwt-auth
+/workflow:execute
+
+# 5. Review
+/workflow:review --type security
+
+# 6. Complete
+/workflow:session:complete
+```
+
+---
+
+### Scenario B: New Feature Development (Don't Know How to Build)
+
+```bash
+# 1. Design exploration
+/workflow:brainstorm:auto-parallel "Design distributed cache system architecture" --count 5
+
+# 2. UI design (if needed)
+/workflow:ui-design:explore-auto --prompt "Cache management dashboard interface"
+/workflow:ui-design:design-sync --session WFS-xxx
+
+# 3. Planning
+/workflow:plan
+
+# 4. Verification
+/workflow:action-plan-verify
+
+# 5. Execution
+/workflow:execute
+
+# 6. TDD testing
+/workflow:tdd-plan "Cache system core modules"
+/workflow:execute
+
+# 7. Review
+/workflow:review --type architecture
+/workflow:review --type security
+
+# 8. Complete
+/workflow:session:complete
+```
+
+---
+
+### Scenario C: Quick Feature Development (Lite Workflow)
+
+```bash
+# 1. Lightweight planning (may need code exploration)
+/workflow:lite-plan -e "Optimize database query performance"
+
+# 2. Three-dimensional confirmation
+# - Confirm task
+# - Choose Agent execution
+# - Choose Gemini code review
+
+# 3. Auto-execution (called internally by /workflow:lite-execute)
+
+# 4. Complete
+```
+
+---
+
+### Scenario D: Bug Fixing
+
+```bash
+# 1. Diagnosis
+/cli:mode:bug-diagnosis --tool gemini "User login fails with token expired error"
+
+# 2. Quick fix
+/workflow:lite-plan "Fix JWT token expiration validation logic"
+
+# 3. Test fix
+/workflow:test-cycle-execute
+
+# 4. Complete
+```
+
+---
+
+## 🎓 Quick Command Reference
+
+### Choose by Knowledge Level
+
+| Your Situation | Recommended Command |
+|----------------|---------------------|
+| 💭 Don't know what to build | `/workflow:brainstorm:auto-parallel "Explore product direction"` |
+| ❓ Know what, don't know how | `/workflow:brainstorm:auto-parallel "Design technical solution"` |
+| ✅ Know what and how | `/workflow:plan "Specific implementation description"` |
+| ⚡ Simple, clear small task | `/workflow:lite-plan "Task description"` |
+| 🐛 Bug fixing | `/cli:mode:bug-diagnosis` + `/workflow:lite-plan` |
+
+### Choose by Project Phase
+
+| Phase | Command |
+|-------|---------|
+| 📋 **Requirements Analysis** | `/workflow:brainstorm:auto-parallel` |
+| 🏗️ **Architecture Design** | `/workflow:brainstorm:auto-parallel` |
+| 🎨 **UI Design** | `/workflow:ui-design:explore-auto` / `imitate-auto` |
+| 📝 **Implementation Planning** | `/workflow:plan` / `/workflow:lite-plan` |
+| 🚀 **Coding Implementation** | `/workflow:execute` / `/workflow:lite-execute` |
+| 🧪 **Testing** | `/workflow:tdd-plan` / `/workflow:test-gen` |
+| 🔧 **Test Fixing** | `/workflow:test-cycle-execute` |
+| 📖 **Code Review** | `/workflow:review` |
+| ✅ **Project Completion** | `/workflow:session:complete` |
+
+### Choose by Work Mode
+
+| Mode | Workflow | Use Case |
+|------|----------|----------|
+| **🚀 Agile & Fast** | Lite Workflow | Personal dev, rapid iteration, prototype validation |
+| **📋 Standard & Complete** | Full Workflow | Team collaboration, enterprise projects, long-term maintenance |
+| **🧪 Quality-First** | TDD Workflow | Core modules, critical features, high reliability requirements |
+| **🎨 Design-Driven** | UI-Design Workflow | Frontend projects, user interfaces, design systems |
+
+---
+
+## 💡 Expert Advice
+
+### ✅ Best Practices
+
+1. **Use brainstorming when uncertain**: Better to spend 10 minutes exploring solutions than blindly implementing and rewriting
+2. **Use Full workflow for complex projects**: Persistent plans facilitate team collaboration and long-term maintenance
+3. **Use Lite workflow for small tasks**: Complete quickly, reduce overhead
+4. **Use TDD for critical modules**: Test-driven development ensures quality
+5. **Regularly update memory**: `/memory:update-related` keeps context accurate
+
+### ❌ Common Pitfalls
+
+1. **Blindly skipping brainstorming**: Not exploring unfamiliar technical domains leads to rework
+2. **Overusing brainstorming**: Brainstorming even simple features wastes time
+3. **Ignoring plan verification**: Not running `/workflow:action-plan-verify` causes execution issues
+4. **Ignoring testing**: Not generating tests, code quality cannot be guaranteed
+5. **Not completing sessions**: Not running `/workflow:session:complete` causes session state confusion
+
+---
+
+## 🔗 Related Documentation
+
+- [Getting Started Guide](GETTING_STARTED.md) - Quick start tutorial
+- [Command Reference](COMMAND_REFERENCE.md) - Complete command list
+- [Architecture Overview](ARCHITECTURE.md) - System architecture explanation
+- [Examples](EXAMPLES.md) - Real-world scenario examples
+- [FAQ](FAQ.md) - Frequently asked questions
+
+---
+
+**Last Updated**: 2025-11-20
+**Version**: 5.8.1
Author	SHA1	Message	Date
Claude	842ed624e8	fix: use ~/.claude path format for template reference Update template path from .claude/templates to ~/.claude/templates to follow project convention for path references.	2025-11-20 09:54:41 +00:00
Claude	4693527a8e	feat: add HTML dashboard generation to workflow status command Add --dashboard parameter to /workflow:status command that generates an interactive HTML task board displaying active and archived sessions. Features: - Responsive layout with modern CSS design - Real-time statistics for sessions and tasks - Task cards with status indicators (pending/in_progress/completed) - Progress bars for each session - Search and filter functionality - Dark/light theme toggle - Separate panels for active and archived sessions Implementation: - Added Dashboard Mode section to .claude/commands/workflow/status.md - Created HTML template at .claude/templates/workflow-dashboard.html - Template uses data injection pattern with {{WORKFLOW_DATA}} placeholder - Generated dashboard saved to .workflow/dashboard.html Usage: /workflow:status --dashboard The dashboard provides a visual overview of all workflow sessions and their tasks, making it easier to track project progress.	2025-11-20 09:49:54 +00:00
catlog22	fc965c87d7	Merge pull request #17 from catlog22/claude/optimize-doc-phase2-filename-012ABaeYT56XeMJ73zUeA3kt Optimize JSON filename in doc command phase2	2025-11-20 17:40:30 +08:00
catlog22	50a36ded97	Merge pull request #18 from catlog22/claude/add-english-workflow-guide-01EfMQYn5ZBavQWNB5PgSN85 Add English version of Workflow Decision Guide	2025-11-20 17:40:11 +08:00
Claude	c5a0f635f4	docs: add English version of Workflow Decision Guide Add WORKFLOW_DECISION_GUIDE_EN.md with complete English translation of the workflow decision guide, including: - Full lifecycle command selection flowchart - Decision point explanations with examples - Testing and review strategies - Complete flows for typical scenarios - Quick reference tables by knowledge level, project phase, and work mode - Best practices and common pitfalls	2025-11-20 09:35:45 +00:00
Claude	ca9653c2e6	refactor: rename phase2-analysis.json to doc-planning-data.json Optimize the Phase 2 output filename in /memory:docs command for better clarity: - Old: phase2-analysis.json (generic, non-descriptive) - New: doc-planning-data.json (clear purpose, self-documenting) The new name better reflects that this file contains comprehensive documentation planning data including folder analysis, grouping information, existing docs, and statistics. Updated all references in command documentation and skill guides.	2025-11-20 09:22:32 +00:00
catlog22	751d251433	Merge pull request #16 from catlog22/claude/fix-lexical-error-01QGNCxKABnMVrn1PSTCMLCW Fix lexical error in rich display rendering	2025-11-20 13:58:18 +08:00
Claude	51b1eb5da6	fix: correct Mermaid parallelogram syntax for command nodes Fixed lexical error in Mermaid diagram where nodes starting with [/workflow: were not properly closed. Changed to use correct parallelogram syntax [/ text /] to resolve "Unrecognized text" error. Affected nodes: - BrainIdea, BrainDesign (brainstorm commands) - UIImitate, UIExplore, UISync (UI design commands) - LitePlanE, LitePlanNormal, LiteAgent (lite workflow commands) - Verify, Execute variants (verification/execution commands) - TDD, TestGen, TestCycle (testing commands) - SecurityReview, ArchReview, QualityReview, GeneralReview (review commands)	2025-11-20 05:45:41 +00:00
catlog22	275ed051c6	Merge pull request #15 from catlog22/claude/add-project-documentation-01KoecebaGvjvFiUYgAWyL6F fix: remove quotes from Mermaid node labels to resolve rendering error	2025-11-20 13:32:26 +08:00
catlog22	5e69748016	Merge pull request #14 from catlog22/claude/add-project-documentation-01KoecebaGvjvFiUYgAWyL6F fix: replace <br/> with <br> for GitHub Mermaid compatibility	2025-11-20 13:22:49 +08:00
catlog22	8ae3da8f61	Merge pull request #13 from catlog22/claude/add-project-documentation-01KoecebaGvjvFiUYgAWyL6F docs: clarify brainstorm vs plan workflow and add decision guide	2025-11-20 13:19:03 +08:00
catlog22	758321b829	Merge pull request #12 from catlog22/claude/add-project-documentation-01KoecebaGvjvFiUYgAWyL6F docs: add comprehensive project documentation	2025-11-20 13:08:54 +08:00