From 84b428b52f2b349d660d17892943f530205a9619 Mon Sep 17 00:00:00 2001 From: catlog22 Date: Wed, 26 Nov 2025 18:59:19 +0800 Subject: [PATCH] feat: Add independent fix tracking dashboard with theme support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit introduces an independent fix progress tracking system with enhanced visualization and theme customization. Changes: - Create standalone fix-dashboard.html with dark/light theme toggle - Add comprehensive task visualization with status filtering - Implement real-time progress tracking with 3-second polling - Add stage timeline with parallel/serial execution visualization - Include flow control steps tracking for active agents - Simplify state management (remove fix-state.json, use metadata in fix-plan.json) - Update review-fix.md documentation with dashboard generation steps - Change template references from @ to cat command syntax Dashboard Features: - Theme toggle (dark/light) with localStorage persistence - Task cards grid with status-based filtering (all/pending/in-progress/fixed/failed) - Tab-based view for Active Groups and Active Agents - Enhanced progress bar with gradient and shimmer animation - Stage timeline with visual status indicators - Fix history drawer for session review - Fully responsive design for mobile devices Technical Improvements: - Consumes new JSON structure (fix-plan.json with metadata field) - Real-time aggregation from multiple fix-progress-{N}.json files - Single HTML file (self-contained, no external dependencies) - Static generation (created once in Phase 1, no subsequent modifications) - Browser-side polling for status updates ๐Ÿค– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .claude/commands/workflow/review-fix.md | 63 +- .claude/templates/fix-dashboard.html | 1822 +++++++++++++++++++++++ 2 files changed, 1873 insertions(+), 12 deletions(-) create mode 100644 .claude/templates/fix-dashboard.html diff --git a/.claude/commands/workflow/review-fix.md b/.claude/commands/workflow/review-fix.md index 09a9adec..d7a81e93 100644 --- a/.claude/commands/workflow/review-fix.md +++ b/.claude/commands/workflow/review-fix.md @@ -78,8 +78,7 @@ Automated fix orchestrator with **two-phase architecture**: AI-powered planning โ”‚ โ”œโ”€ Apply fix per strategy โ”‚ โ”œโ”€ Run affected tests โ”‚ โ”œโ”€ On test failure: Rollback, retry up to max_iterations - โ”‚ โ””โ”€ On success: Commit, write completion JSON - โ”œโ”€ Update fix-progress.json after each finding + โ”‚ โ””โ”€ On success: Commit, update fix-progress-{N}.json โ””โ”€ Advance to next stage 4. Phase 4: Completion @@ -195,15 +194,15 @@ if (result.passRate < 100%) { - Auto-discovery: If review-dir provided, find latest `*-fix-export.json` - Session creation: Generate fix-session-id (`fix-{timestamp}`) - Directory structure: Create `{review-dir}/fixes/{fix-session-id}/` with subdirectories -- State files: Initialize fix-state.json, fix-progress.json, active-fix-session.json +- State files: Initialize active-fix-session.json (session marker) +- Dashboard generation: Create fix-dashboard.html from template (see Dashboard Generation below) - TodoWrite initialization: Set up 4-phase tracking **Phase 2: Planning Coordination** - Launch @cli-planning-agent with findings data and project context - Monitor planning progress (dashboard shows "Planning fixes..." indicator) -- Validate fix-plan.json output (schema conformance) +- Validate fix-plan.json output (schema conformance, includes metadata with session status) - Load plan into memory for execution phase -- Update fix-state.json with plan_file reference - TodoWrite update: Mark planning complete, start execution **Phase 3: Execution Orchestration** @@ -232,7 +231,43 @@ if (result.passRate < 100%) { - Output: "Some findings failed. Review fix-summary.md before completing session." - Do NOT auto-complete session +### Dashboard Generation +**MANDATORY**: Dashboard MUST be generated from template during Phase 1 initialization + +**Template Location**: `~/.claude/templates/fix-dashboard.html` + +**โš ๏ธ POST-GENERATION**: Orchestrator and agents MUST NOT read/write/modify fix-dashboard.html after creation + +**Generation Steps**: + +```bash +# 1. Copy template to fix session directory +cp ~/.claude/templates/fix-dashboard.html ${sessionDir}/fixes/${fixSessionId}/fix-dashboard.html + +# 2. Replace SESSION_ID placeholder +sed -i "s|{{SESSION_ID}}|${sessionId}|g" ${sessionDir}/fixes/${fixSessionId}/fix-dashboard.html + +# 3. Replace REVIEW_DIR placeholder +sed -i "s|{{REVIEW_DIR}}|${reviewDir}|g" ${sessionDir}/fixes/${fixSessionId}/fix-dashboard.html + +# 4. Output dashboard URL +echo "๐Ÿ”ง Fix Dashboard: file://$(cd ${sessionDir}/fixes/${fixSessionId} && pwd)/fix-dashboard.html" +``` + +**Dashboard Features**: +- Real-time progress tracking via JSON polling (3-second interval) +- Stage timeline visualization with parallel/serial execution modes +- Active groups and agents monitoring +- Flow control steps tracking for each agent +- Fix history drawer with session summaries +- Consumes new JSON structure (fix-plan.json with metadata + fix-progress-{N}.json) + +**JSON Consumption**: +- `fix-plan.json`: Reads metadata field for session info, timeline stages, groups configuration +- `fix-progress-{N}.json`: Polls all progress files to aggregate real-time status +- `active-fix-session.json`: Detects active session on load +- `fix-history.json`: Loads historical fix sessions ### Output File Structure @@ -240,7 +275,8 @@ if (result.passRate < 100%) { .workflow/active/WFS-{session-id}/.review/ โ”œโ”€โ”€ fix-export-{timestamp}.json # Exported findings (input) โ””โ”€โ”€ fixes/{fix-session-id}/ - โ”œโ”€โ”€ fix-plan.json # Planning agent output (execution plan) + โ”œโ”€โ”€ fix-dashboard.html # Interactive dashboard (generated once, auto-polls JSON) + โ”œโ”€โ”€ fix-plan.json # Planning agent output (execution plan with metadata) โ”œโ”€โ”€ fix-progress-1.json # Group 1 progress (planning agent init โ†’ agent updates) โ”œโ”€โ”€ fix-progress-2.json # Group 2 progress (planning agent init โ†’ agent updates) โ”œโ”€โ”€ fix-progress-3.json # Group 3 progress (planning agent init โ†’ agent updates) @@ -250,17 +286,19 @@ if (result.passRate < 100%) { ``` **File Producers**: -- **Planning Agent**: `fix-plan.json`, all `fix-progress-*.json` (initial state) +- **Orchestrator**: `fix-dashboard.html` (generated once from template during Phase 1) +- **Planning Agent**: `fix-plan.json` (with metadata), all `fix-progress-*.json` (initial state) - **Execution Agents**: Update assigned `fix-progress-{N}.json` in real-time -- **Dashboard**: Reads `fix-plan.json` + all `fix-progress-*.json`, aggregates in-memory every 3 seconds +- **Dashboard (Browser)**: Reads `fix-plan.json` + all `fix-progress-*.json`, aggregates in-memory every 3 seconds via JavaScript polling ### Agent Output Files **fix-plan.json**: - **Generated by**: @cli-planning-agent - **Template**: `~/.claude/workflows/cli-templates/fix-plan-template.json` -- **Purpose**: Execution strategy, group definitions, timeline stages -- **Orchestrator uses**: Load groups, determine execution order, assign agents +- **Purpose**: Session metadata, execution strategy, group definitions, timeline stages +- **Structure**: Includes `metadata` field with fix_session_id, review_session_id, status, timestamps +- **Orchestrator uses**: Load groups, determine execution order, assign agents, track session state **fix-progress-{N}.json** (one per group): - **Generated by**: @cli-planning-agent (initial) โ†’ @cli-execute-agent (updates) @@ -295,17 +333,18 @@ Project Context: ## Output Requirements ### 1. fix-plan.json -Read template: @~/.claude/workflows/cli-templates/fix-plan-template.json +Execute: cat ~/.claude/workflows/cli-templates/fix-plan-template.json Generate execution plan following template structure: **Key Generation Rules**: +- **Metadata**: Populate fix_session_id, review_session_id, status ("planning"), created_at, started_at timestamps - **Execution Strategy**: Choose approach (parallel/serial/hybrid) based on dependency analysis, set parallel_limit and stages count - **Groups**: Create groups (G1, G2, ...) with intelligent grouping (see Analysis Requirements below), assign progress files (fix-progress-1.json, ...), populate fix_strategy with approach/complexity/test_pattern, assess risks, identify dependencies - **Timeline**: Define stages respecting dependencies, set execution_mode per stage, map groups to stages, calculate critical path ### 2. fix-progress-{N}.json (one per group) -Read template: @~/.claude/workflows/cli-templates/fix-progress-template.json +Execute: cat ~/.claude/workflows/cli-templates/fix-progress-template.json For each group (G1, G2, G3, ...), generate fix-progress-{N}.json following template structure: diff --git a/.claude/templates/fix-dashboard.html b/.claude/templates/fix-dashboard.html new file mode 100644 index 00000000..ff6b9a80 --- /dev/null +++ b/.claude/templates/fix-dashboard.html @@ -0,0 +1,1822 @@ + + + + + + Fix Progress Dashboard - {{SESSION_ID}} + + + +
+
+
+

๐Ÿ”ง Fix Progress Dashboard

+
+ Session: {{SESSION_ID}} | + Fix Session: Loading... | + โ† Back to Review Dashboard +
+
+
+ + +
+
+ + +
+
+
+

Fix Progress

+ LOADING +
+
+ +
+
+ + + + + + + + + +
+ + +
+
+

๐Ÿ“‹ Fix Tasks

+
+ + + + + +
+
+
+
+
โณ
+

Loading tasks...

+
+
+
+ + +
+

๐Ÿ“Š Summary

+
+
+
๐Ÿ“Š
+
0
+
Total Findings
+
+
+
โœ…
+
0
+
Fixed
+
+
+
โŒ
+
0
+
Failed
+
+
+
โณ
+
0
+
Pending
+
+
+
+
+ + +
+
+
+

๐Ÿ“œ Fix History

+ +
+
+
+
โณ
+

Loading history...

+
+
+
+ + + +