Skip to content

Latest commit

 

History

History
524 lines (487 loc) · 37.6 KB

File metadata and controls

524 lines (487 loc) · 37.6 KB

6 Visualizations

Part of: Page Flow Documentation


Flow 9: Dependency Graph View

┌─────────────────────────────────────────────────────────────┐
│        PAGE: /graph/:projectId (Dependency Graph)          │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Project: Authentication System                       │   │
│  │  [Filter] [Search] [View Board] [View Specs]         │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Graph Controls                                       │   │
│  │  [Zoom In] [Zoom Out] [Fit to Screen] [Reset View]   │   │
│  │                                                       │   │
│  │  Filter: [All ▼] [Phase ▼] [Status ▼]              │   │
│  │  Show: ☑ Tasks ☑ Tickets ☑ Discoveries              │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Dependency Graph Visualization                       │   │
│  │                                                      │   │
│  │         ┌──────────┐                                 │   │
│  │         │ Task 1   │                                 │   │
│  │         │ Setup DB │                                 │   │
│  │         │ ✅ Done  │                                 │   │
│  │         └────┬─────┘                                 │   │
│  │              │                                        │   │
│  │              ▼                                        │   │
│  │         ┌──────────┐                                 │   │
│  │         │ Task 2   │                                 │   │
│  │         │ OAuth2   │                                 │   │
│  │         │ 🔄 Active│                                 │   │
│  │         └────┬─────┘                                 │   │
│  │              │                                        │   │
│  │              ├──────────┐                            │   │
│  │              │          │                            │   │
│  │              ▼          ▼                            │   │
│  │         ┌──────────┐ ┌──────────┐                   │   │
│  │         │ Task 3   │ │ Task 4   │                   │   │
│  │         │ JWT      │ │ Tests    │                   │   │
│  │         │ ⏳ Wait  │ │ ⏳ Wait  │                   │   │
│  │         └──────────┘ └──────────┘                   │   │
│  │                                                      │   │
│  │  Legend:                                            │   │
│  │  ✅ Completed  🔄 In Progress  ⏳ Waiting  🔴 Blocked│   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Graph Statistics                                    │   │
│  │  • Total Nodes: 12                                   │   │
│  │  • Completed: 5                                     │   │
│  │  • In Progress: 2                                   │   │
│  │  • Blocked: 1                                       │   │
│  │  • Waiting: 4                                      │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
└───────────────────────────┬──────────────────────────────────┘
                            │
                            │ Click on Node
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│    PAGE: /graph/:projectId/:ticketId (Ticket Graph)        │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Ticket: Add OAuth2 Authentication                    │   │
│  │  Focused View: Dependencies & Dependents              │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Focused Graph                                       │   │
│  │                                                      │   │
│  │         ┌──────────┐                                 │   │
│  │         │ Ticket A │                                 │   │
│  │         │ Setup DB │                                 │   │
│  │         │ ✅ Done  │                                 │   │
│  │         └────┬─────┘                                 │   │
│  │              │                                        │   │
│  │              ▼                                        │   │
│  │         ┌──────────┐                                 │   │
│  │         │ Ticket B │◄─── Focused Ticket              │   │
│  │         │ OAuth2   │                                 │   │
│  │         │ 🔄 Active│                                 │   │
│  │         └────┬─────┘                                 │   │
│  │              │                                        │   │
│  │              ├──────────┐                            │   │
│  │              │          │                            │   │
│  │              ▼          ▼                            │   │
│  │         ┌──────────┐ ┌──────────┐                   │   │
│  │         │ Ticket C │ │ Ticket D │                   │   │
│  │         │ JWT      │ │ Tests    │                   │   │
│  │         │ ⏳ Wait  │ │ ⏳ Wait  │                   │   │
│  │         └──────────┘ └──────────┘                   │   │
│  │                                                      │   │
│  │  [View Full Graph] [View Ticket Details]           │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Flow 10: Spec Workspace Views

┌─────────────────────────────────────────────────────────────┐
│        PAGE: /projects/:projectId/specs (Specs List)       │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Specs                                               │   │
│  │                                                      │   │
│  │  [New Spec] [+ Generate from Ticket]               │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Spec: Authentication System                  │  │   │
│  │  │ Status: Requirements Complete                │  │   │
│  │  │ Updated: 2 hours ago                         │  │   │
│  │  │ [View] [Edit] [Export]                      │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
└───────────────────────────┬──────────────────────────────────┘
                            │
                            │ Click "View"
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│    PAGE: /projects/:projectId/specs/:specId (Spec Viewer) │
│                                                              │
│  ┌─────────┐  ┌──────────────────────────────────────┐   │
│  │ Sidebar │  │  Spec: Authentication System          │   │
│  │         │  │                                       │   │
│  │ Specs:  │  │  Status: Requirements Complete       │   │
│  │ • Auth  │  │  [Edit] [Export] [Version History]   │   │
│  │ • Pay   │  │                                       │   │
│  │         │  │  ┌────────────────────────────────┐ │   │
│  │         │  │  │ Tabs:                           │ │   │
│  │         │  │  │ [Requirements] [Design] [Tasks] │ │   │
│  │         │  │  │ [Execution]                      │ │   │
│  │         │  │  └────────────────────────────────┘ │   │
│  │         │  │                                       │   │
│  │         │  │  ┌────────────────────────────────┐ │   │
│  │         │  │  │ Requirements Tab (Active)       │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ ┌────────────────────────────┐ │ │   │
│  │         │  │  │ │ REQ-001: OAuth2 Support   │ │ │   │
│  │         │  │  │ │ [Edit] [Delete]            │ │ │   │
│  │         │  │  │ │                            │ │ │   │
│  │         │  │  │ │ WHEN: User requests OAuth  │ │ │   │
│  │         │  │  │ │      authentication         │ │ │   │
│  │         │  │  │ │ THE SYSTEM SHALL: Provide   │ │ │   │
│  │         │  │  │ │      OAuth2 authentication │ │ │   │
│  │         │  │  │ │      flow                   │ │ │   │
│  │         │  │  │ │                            │ │ │   │
│  │         │  │  │ │ ACCEPTANCE CRITERIA:       │ │ │   │
│  │         │  │  │ │ ✓ Support Google OAuth     │ │ │   │
│  │         │  │  │ │ ✓ Support GitHub OAuth     │ │ │   │
│  │         │  │  │ │ ✓ Token refresh mechanism  │ │ │   │
│  │         │  │  │ │ ✓ Secure token storage     │ │ │   │
│  │         │  │  │ │                            │ │ │   │
│  │         │  │  │ │ [Add Criterion] [Link Design] │ │   │
│  │         │  │  │ └────────────────────────────┘ │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ [+ Add Requirement]            │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ [Approve Requirements]        │ │   │
│  │         │  │  │ [Request Changes]             │ │   │
│  │         │  │  └────────────────────────────────┘ │   │
│  └─────────┘  └──────────────────────────────────────┘   │
│                                                              │
└───────────────────────────┬──────────────────────────────────┘
                            │
                            │ Click "Design" tab
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│    PAGE: /projects/:projectId/specs/:specId (Design Tab)  │
│                                                              │
│  ┌─────────┐  ┌──────────────────────────────────────┐   │
│  │ Sidebar │  │  Spec: Authentication System          │   │
│  │         │  │                                       │   │
│  │ Specs:  │  │  [Requirements] [Design] [Tasks]     │   │
│  │ • Auth  │  │  [Execution]                         │   │
│  │         │  │                                       │   │
│  │         │  │  ┌────────────────────────────────┐ │   │
│  │         │  │  │ Design Tab (Active)             │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ ┌────────────────────────────┐ │ │   │
│  │         │  │  │ │ Architecture Overview      │ │ │   │
│  │         │  │  │ │                          │ │ │   │
│  │         │  │  │ │ Authentication Service    │ │ │   │
│  │         │  │  │ │ ├─ OAuth2 Handler        │ │ │   │
│  │         │  │  │ │ ├─ JWT Generator         │ │ │   │
│  │         │  │  │ │ └─ Token Validator       │ │ │   │
│  │         │  │  │ └────────────────────────────┘ │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ ┌────────────────────────────┐ │ │   │
│  │         │  │  │ │ Sequence Diagram           │ │ │   │
│  │         │  │  │ │                          │ │ │   │
│  │         │  │  │ │ User → OAuth → Token      │ │ │   │
│  │         │  │  │ └────────────────────────────┘ │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ ┌────────────────────────────┐ │ │   │
│  │         │  │  │ │ Data Model                 │ │ │   │
│  │         │  │  │ │                          │ │ │   │
│  │         │  │  │ │ User {                     │ │ │   │
│  │         │  │  │ │   id: UUID                  │ │ │   │
│  │         │  │  │ │   email: string            │ │ │   │
│  │         │  │  │ │   oauth_providers: []      │ │ │   │
│  │         │  │  │ │ }                          │ │ │   │
│  │         │  │  │ └────────────────────────────┘ │ │   │
│  │         │  │  │                                │ │   │
│  │         │  │  │ [Approve Design]              │ │   │
│  │         │  │  │ [Request Changes]             │ │   │
│  │         │  │  └────────────────────────────────┘ │   │
│  └─────────┘  └──────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Flow 11: Statistics Dashboard

┌─────────────────────────────────────────────────────────────┐
│          PAGE: /projects/:projectId/stats (Statistics)      │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Project: Authentication System                       │   │
│  │  [Overview] [Board] [Graph] [Specs] [Stats]         │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Tabs: [Overview] [Tickets] [Agents] [Code] [Cost] │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Overview Tab                                        │   │
│  │                                                      │   │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐         │   │
│  │  │  12      │  │  45      │  │  3       │         │   │
│  │  │ Tickets  │  │ Tasks    │  │ Agents   │         │   │
│  │  └──────────┘  └──────────┘  └──────────┘         │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Completion Rate: 75%                        │  │   │
│  │  │ ████████████████░░░░░░░░                    │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Average Cycle Time: 2.5 days                │  │   │
│  │  │ Average Task Duration: 4.2 hours            │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Tickets Tab                                         │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Tickets by Phase                             │  │   │
│  │  │                                              │  │   │
│  │  │  INITIAL:         ████░░░░░░░░░░░░░░░░░░░░  │  │   │
│  │  │  IMPLEMENTATION:  ████████████░░░░░░░░░░░░  │  │   │
│  │  │  INTEGRATION:     ████████████████░░░░░░░░  │  │   │
│  │  │  REFACTORING:     ████░░░░░░░░░░░░░░░░░░░░  │  │   │
│  │  │  DONE:            ████████████████████████  │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Completion Rate by Type                      │  │   │
│  │  │                                              │  │   │
│  │  │  Feature:  85%                              │  │   │
│  │  │  Bug:      90%                              │  │   │
│  │  │  Optimization: 70%                          │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Agents Tab                                         │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Agent Performance                            │  │   │
│  │  │                                              │  │   │
│  │  │  worker-1:  8 tasks completed                │  │   │
│  │  │  worker-2:  5 tasks completed               │  │   │
│  │  │  worker-3:  3 tasks completed               │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Average Alignment Score: 78%                │  │   │
│  │  │ Guardian Interventions: 12                  │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Code Tab                                            │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Code Changes                                 │  │   │
│  │  │                                              │  │   │
│  │  │  Total Lines: +12,450 -890                   │  │   │
│  │  │  Files Changed: 127                         │  │   │
│  │  │  Commits: 45                                │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Test Coverage: 78%                          │  │   │
│  │  │ Tests Passing: 234/300                      │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Flow 12: Activity Timeline View

┌─────────────────────────────────────────────────────────────┐
│        PAGE: /projects/:projectId/activity (Activity)       │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Project: Authentication System                       │   │
│  │  [Overview] [Board] [Graph] [Specs] [Activity]       │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐   │
│  │  Activity Timeline                                   │   │
│  │                                                      │   │
│  │  Filters: [All Events ▼] [By Type ▼] [By Agent ▼]  │   │
│  │  Search: [________________] [🔍]                    │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Oct 30, 2025 12:47                         │  │   │
│  │  │                                              │  │   │
│  │  │ ✅ Ticket "Add OAuth2" completed            │  │   │
│  │  │    by worker-1                              │  │   │
│  │  │    [View Ticket]                            │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Oct 30, 2025 12:30                         │  │   │
│  │  │                                              │  │   │
│  │  │ 🔍 Discovery: Bug found in login flow        │  │   │
│  │  │    Task: "Implement JWT"                     │  │   │
│  │  │    [View Discovery] [View Task]              │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Oct 30, 2025 12:15                         │  │   │
│  │  │                                              │  │   │
│  │  │ 💾 Memory saved: "Fixed PostgreSQL timeout" │  │   │
│  │  │    by worker-2                              │  │   │
│  │  │    [View Memory]                            │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Oct 30, 2025 11:45                         │  │   │
│  │  │                                              │  │   │
│  │  │ 🛡️ Guardian intervention sent               │  │   │
│  │  │    to worker-1: "Focus on core flow"        │  │   │
│  │  │    [View Intervention]                      │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  ┌──────────────────────────────────────────────┐  │   │
│  │  │ Oct 30, 2025 11:23                         │  │   │
│  │  │                                              │  │   │
│  │  │ 📝 Commit: "Add OAuth2 configuration"        │  │   │
│  │  │    by worker-1                              │  │   │
│  │  │    Changes: +450 -12 • 3 files              │  │   │
│  │  │    [View Commit]                            │  │   │
│  │  └──────────────────────────────────────────────┘  │   │
│  │                                                      │   │
│  │  [Load More]                                        │   │
│  └──────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

API Integration

Backend Endpoints

Graph visualization endpoints are prefixed with /api/v1/.


GET /api/v1/graph/dependency-graph/project/{project_id}

Description: Get dependency graph for entire project

Path Params: project_id (string)

Query Params:

  • include_resolved (default: true): Include completed tasks

Response (200):

{
  "nodes": [
    {
      "id": "ticket-uuid",
      "type": "ticket",
      "data": {
        "title": "Implement OAuth2",
        "status": "building",
        "phase_id": "PHASE_IMPLEMENTATION",
        "priority": "HIGH"
      }
    },
    {
      "id": "discovery-uuid",
      "type": "discovery",
      "data": {
        "description": "Bug found in login flow",
        "severity": "high",
        "created_at": "2025-01-15T10:00:00Z"
      }
    }
  ],
  "edges": [
    {
      "source": "ticket-1",
      "target": "ticket-2",
      "type": "depends_on"
    }
  ],
  "metadata": {
    "total_nodes": 25,
    "total_edges": 18
  }
}

GET /api/v1/graph/dependency-graph/ticket/{ticket_id}

Description: Get dependency graph for a specific ticket

Query Params:

  • include_resolved (default: true): Include completed tasks
  • include_discoveries (default: true): Include discovery nodes

Response (200):

{
  "nodes": [...],
  "edges": [...],
  "metadata": {
    "focus_ticket_id": "ticket-uuid",
    "direct_dependencies": 3,
    "blocking_count": 2
  }
}

GET /api/v1/graph/dependency-graph/task/{task_id}/blocked

Description: Get all tasks blocked by this task

Response (200):

{
  "task_id": "task-uuid",
  "blocked_tasks": [
    {
      "id": "blocked-task-uuid",
      "description": "Write integration tests",
      "status": "pending",
      "priority": "MEDIUM",
      "phase_id": "PHASE_TESTING"
    }
  ],
  "blocked_count": 2
}

GET /api/v1/graph/dependency-graph/task/{task_id}/blocking

Description: Get all tasks that block this task (dependencies)

Response (200):

{
  "task_id": "task-uuid",
  "blocking_tasks": [
    {
      "id": "blocking-task-uuid",
      "description": "Setup OAuth2 handler",
      "status": "completed",
      "priority": "HIGH",
      "phase_id": "PHASE_IMPLEMENTATION",
      "is_complete": true
    }
  ],
  "all_dependencies_complete": false
}

GET /api/v1/events (PLANNED)

Description: Get activity timeline events (for activity feed)

Note: This endpoint is planned but not yet implemented. Currently, activity events can be retrieved via WebSocket at WS /api/v1/ws/events.

Query Params:

  • entity_type (optional): Filter by entity type
  • limit (default: 50)

Next: See README.md for complete documentation index.