103 lines
4.1 KiB
Markdown
103 lines
4.1 KiB
Markdown
|
# Sprint 19 Plan: GUI Phase 2 — Workflow Visualization
|
||
|
|
|
||
|
|
## Context
|
||
|
|
|
||
|
|
Sprint 13 gave us docked panels, themes, key symbols, and navigation. Sprint 19
|
||
|
|
adds the workflow-specific visualization. The architect should see the project as
|
||
|
|
a **structured flow** — task dependencies, routing decisions, execution progress,
|
||
|
|
review queues — not just code and files.
|
||
|
|
|
||
|
|
This is the GUI that makes the AI+Human thesis tangible. When an architect looks
|
||
|
|
at the screen, they should immediately understand: what's done, what's in progress,
|
||
|
|
what's blocked, what needs their attention, and why.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Phase 19a: Task Board Panel (Steps 428-432)
|
||
|
|
|
||
|
|
### Step 428: Kanban-Style Task Board (12 tests)
|
||
|
|
- New docked panel: Task Board
|
||
|
|
- Columns: Pending | Ready | In Progress | Review | Complete
|
||
|
|
- Cards show: task name, worker type icon, priority badge, annotation tags
|
||
|
|
- Drag (or click) to manually reassign between columns
|
||
|
|
- Filter by: worker type, priority, language, file
|
||
|
|
|
||
|
|
### Step 429: Task Detail View (12 tests)
|
||
|
|
- Click a task card → side panel with full details:
|
||
|
|
- Skeleton code (what was specified)
|
||
|
|
- Generated code (what the worker produced)
|
||
|
|
- Diff view: skeleton vs result
|
||
|
|
- Routing decision explanation
|
||
|
|
- Rejection history with feedback
|
||
|
|
- Annotations on the target node
|
||
|
|
- Approve/reject buttons for review items
|
||
|
|
|
||
|
|
### Step 430: Dependency Graph Visualization (12 tests)
|
||
|
|
- Visual DAG rendering of task dependencies
|
||
|
|
- Uses DependencyGraph.h data from Sprint 15
|
||
|
|
- Nodes colored by status (green=complete, blue=in-progress, grey=pending, red=blocked)
|
||
|
|
- Critical path highlighted
|
||
|
|
- Hover shows task details
|
||
|
|
- Click navigates to task in board and code editor
|
||
|
|
|
||
|
|
### Step 431: Progress Dashboard (12 tests)
|
||
|
|
- Workflow progress ring (% complete)
|
||
|
|
- Throughput chart (items completed over time)
|
||
|
|
- Worker breakdown pie chart (deterministic vs SLM vs LLM vs human)
|
||
|
|
- Cost tracker (tokens used, estimated remaining)
|
||
|
|
- Blocker summary with action buttons
|
||
|
|
|
||
|
|
### Step 432: Phase 19a Integration (8 tests)
|
||
|
|
- Task board syncs with live workflow state
|
||
|
|
- Dependency graph updates as tasks complete
|
||
|
|
- Progress dashboard reflects real orchestration events
|
||
|
|
- Full visual workflow: create → route → execute → review → complete, all visible
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Phase 19b: Code Annotation Overlay (Steps 433-437)
|
||
|
|
|
||
|
|
### Step 433: Inline Annotation Badges (12 tests)
|
||
|
|
- In the code editor, show annotation badges in the gutter (left margin)
|
||
|
|
- Each annotation type has an icon and color
|
||
|
|
- Click badge → expand to show full annotation details
|
||
|
|
- Multiple annotations on same line → stacked badges
|
||
|
|
|
||
|
|
### Step 434: Annotation Heatmap (12 tests)
|
||
|
|
- Color-code the code editor background by annotation density/complexity
|
||
|
|
- High complexity regions: warm colors (orange/red tint)
|
||
|
|
- Well-annotated safe regions: cool colors (green/blue tint)
|
||
|
|
- Toggle on/off from View menu
|
||
|
|
- Helps architect quickly spot the hard parts of the codebase
|
||
|
|
|
||
|
|
### Step 435: Workflow Status Overlay (12 tests)
|
||
|
|
- In multi-file view, each function/class has a status indicator:
|
||
|
|
- Skeleton (outline icon), In Progress (spinner), Complete (check), Review (eye)
|
||
|
|
- Color matches task board status
|
||
|
|
- Click status → opens task detail for that work item
|
||
|
|
|
||
|
|
### Step 436: Review Comparison View (12 tests)
|
||
|
|
- Side-by-side or inline diff for review items:
|
||
|
|
- Left: skeleton / original code
|
||
|
|
- Right: generated code
|
||
|
|
- Inline annotations showing what changed and why
|
||
|
|
- Approve/reject buttons integrated into the diff view
|
||
|
|
- Keyboard shortcuts: Ctrl+Shift+A (approve), Ctrl+Shift+R (reject)
|
||
|
|
|
||
|
|
### Step 437: Phase 19b Integration + Sprint Summary (8 tests)
|
||
|
|
- Annotation badges visible on all annotated code
|
||
|
|
- Heatmap correctly highlights complex regions
|
||
|
|
- Workflow overlay reflects live orchestration state
|
||
|
|
- Review comparison accessible from task board and code editor
|
||
|
|
- Sprint 19 totals: all visualization panels operational
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Step & Test Summary
|
||
|
|
|
||
|
|
| Phase | Steps | Tests | Theme |
|
||
|
|
|-------|-------|-------|-------|
|
||
|
|
| 19a | 428-432 | 56 | Task board, detail view, dependency graph, progress dashboard |
|
||
|
|
| 19b | 433-437 | 56 | Annotation badges, heatmap, workflow overlay, review diff |
|
||
|
|
| **Total** | **428-437** | **~112** | 10 steps |
|