refactor: optimize TodoWrite format with hierarchical display across workflow commands

Adopt consistent hierarchical TodoWrite format for better visual clarity:
- Phase-level tasks: "Phase N: Description"
- Sub-tasks: "  → Sub-task description" (indented with arrow)
- Clear parent-child relationships through visual hierarchy
- Task attachment/collapse pattern visualization

Updated commands:
- lite-plan.md (Phase 1-4 examples)
- auto-parallel.md (Phase 0-3 examples)
- tdd-plan.md (Phase 3-5 examples)
- test-fix-gen.md (TodoWrite Pattern with examples)
- explore-auto.md (TodoWrite Pattern)
- imitate-auto.md (TodoWrite Pattern)
- review-session-cycle.md
- review-module-cycle.md

Benefits:
- Visual hierarchy shows task relationships
- Expanded view shows detailed progress
- Collapsed view maintains clean orchestrator-level summary
- Consistent format across all multi-phase workflows
This commit is contained in:
catlog22
2025-11-25 19:54:33 +08:00
parent 2d66c1b092
commit 152303f1b8
8 changed files with 491 additions and 171 deletions

View File

@@ -528,10 +528,10 @@ SlashCommand(command)
```javascript
// Initialize IMMEDIATELY after Phase 5 user confirmation to track multi-phase execution (4 orchestrator-level tasks)
TodoWrite({todos: [
{"content": "Execute style extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
{"content": "Execute animation extraction", "status": "pending", "activeForm": "Executing animation extraction"},
{"content": "Execute layout extraction", "status": "pending", "activeForm": "Executing layout extraction"},
{"content": "Execute UI assembly", "status": "pending", "activeForm": "Executing UI assembly"}
{"content": "Phase 7: Style Extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
{"content": "Phase 8: Animation Extraction", "status": "pending", "activeForm": "Executing animation extraction"},
{"content": "Phase 9: Layout Extraction", "status": "pending", "activeForm": "Executing layout extraction"},
{"content": "Phase 10: UI Assembly", "status": "pending", "activeForm": "Executing UI assembly"}
]})
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
@@ -539,14 +539,23 @@ TodoWrite({todos: [
// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
//
// Phase 7-10 SlashCommand Invocation Pattern:
// 1. SlashCommand invocation ATTACHES sub-command tasks to TodoWrite
// 2. TodoWrite expands to include attached tasks
// 3. Orchestrator EXECUTES attached tasks sequentially
// 4. After all attached tasks complete, COLLAPSE them into phase summary
// 5. Update next phase to in_progress
// 6. IMMEDIATELY execute next phase (auto-continue)
// 7. After Phase 10 completes, workflow finishes (generate command handles preview files)
// Phase 7-10 SlashCommand Invocation Pattern (when tasks are attached):
// Example - Phase 7 with sub-tasks:
// [
// {"content": "Phase 7: Style Extraction", "status": "in_progress", "activeForm": "Executing style extraction"},
// {"content": " → Analyze style references", "status": "in_progress", "activeForm": "Analyzing style references"},
// {"content": " → Generate style variants", "status": "pending", "activeForm": "Generating style variants"},
// {"content": " → Create design tokens", "status": "pending", "activeForm": "Creating design tokens"},
// {"content": "Phase 8: Animation Extraction", "status": "pending", "activeForm": "Executing animation extraction"},
// ...
// ]
//
// After sub-tasks complete, COLLAPSE back to:
// [
// {"content": "Phase 7: Style Extraction", "status": "completed", "activeForm": "Executing style extraction"},
// {"content": "Phase 8: Animation Extraction", "status": "in_progress", "activeForm": "Executing animation extraction"},
// ...
// ]
//
```

View File

@@ -570,12 +570,12 @@ ELSE:
```javascript
// Initialize IMMEDIATELY at start of Phase 0 to track multi-phase execution (6 orchestrator-level tasks)
TodoWrite({todos: [
{content: "Initialize and detect design source", status: "in_progress", activeForm: "Initializing"},
{content: "Extract style (complete design systems)", status: "pending", activeForm: "Extracting style"},
{content: "Extract animation (CSS auto mode)", status: "pending", activeForm: "Extracting animation"},
{content: "Extract layout (structure templates)", status: "pending", activeForm: "Extracting layout"},
{content: "Assemble UI prototypes", status: "pending", activeForm: "Assembling UI"},
{content: "Integrate design system", status: "pending", activeForm: "Integrating"}
{content: "Phase 0: Initialize and Detect Design Source", status: "in_progress", activeForm: "Initializing"},
{content: "Phase 2: Style Extraction", status: "pending", activeForm: "Extracting style"},
{content: "Phase 2.3: Animation Extraction", status: "pending", activeForm: "Extracting animation"},
{content: "Phase 2.5: Layout Extraction", status: "pending", activeForm: "Extracting layout"},
{content: "Phase 3: UI Assembly", status: "pending", activeForm: "Assembling UI"},
{content: "Phase 4: Design System Integration", status: "pending", activeForm: "Integrating"}
]})
// ⚠️ CRITICAL: Dynamic TodoWrite task attachment strategy:
@@ -583,13 +583,25 @@ TodoWrite({todos: [
// **Key Concept**: SlashCommand invocation ATTACHES tasks to current workflow.
// Orchestrator EXECUTES these attached tasks itself, not waiting for external completion.
//
// Phase 2-4 SlashCommand Invocation Pattern:
// 1. SlashCommand invocation ATTACHES sub-command tasks to TodoWrite
// 2. TodoWrite expands to include attached tasks
// 3. Orchestrator EXECUTES attached tasks sequentially
// 4. After all attached tasks complete, COLLAPSE them into phase summary
// 5. Update next phase to in_progress
// 6. IMMEDIATELY execute next phase SlashCommand (auto-continue)
// Phase 2-4 SlashCommand Invocation Pattern (when tasks are attached):
// Example - Phase 2 with sub-tasks:
// [
// {"content": "Phase 0: Initialize and Detect Design Source", "status": "completed", "activeForm": "Initializing"},
// {"content": "Phase 2: Style Extraction", "status": "in_progress", "activeForm": "Extracting style"},
// {"content": " → Analyze design references", "status": "in_progress", "activeForm": "Analyzing references"},
// {"content": " → Generate design tokens", "status": "pending", "activeForm": "Generating tokens"},
// {"content": " → Create style guide", "status": "pending", "activeForm": "Creating guide"},
// {"content": "Phase 2.3: Animation Extraction", "status": "pending", "activeForm": "Extracting animation"},
// ...
// ]
//
// After sub-tasks complete, COLLAPSE back to:
// [
// {"content": "Phase 0: Initialize and Detect Design Source", "status": "completed", "activeForm": "Initializing"},
// {"content": "Phase 2: Style Extraction", "status": "completed", "activeForm": "Extracting style"},
// {"content": "Phase 2.3: Animation Extraction", "status": "in_progress", "activeForm": "Extracting animation"},
// ...
// ]
//
```