016-6: Dashboard Integration + Polish

[frankbria]

Part of #197 - Planning Phase Automation

Scope

This issue integrates all new components into the Dashboard and polishes the user experience.

Tasks

Dashboard Integration (~1h)

• Update web-ui/src/components/Dashboard.tsx
• Replace old phase display with PhaseProgress component
• Ensure SessionStatus is properly positioned
• Add TaskReview to Tasks tab (or modal)
• Update tab navigation based on phase:
  • Planning phase: Show "Review Tasks" badge on Tasks tab
  • Development phase: Show task progress
• Stop unnecessary WebSocket polling when no state changes expected

Polish (~0.5h)

• Consistent styling across new components
• Smooth transitions between states
• Error boundaries for new components
• Loading skeletons where appropriate
• Mobile responsiveness check

Integration Points

Dashboard.tsx
├── PhaseProgress (top of page, replaces old step counter)
├── Overview Tab
│   ├── SessionStatus (connected to API)
│   └── DiscoveryProgress (with action buttons)
└── Tasks Tab
    ├── TaskReview (when phase = "planning")
    └── TaskList (when phase = "development")

Acceptance Criteria

• All new components render correctly in Dashboard
• Phase transitions update UI appropriately
• No console errors
• Responsive on mobile
• WebSocket polling is efficient (not constant when idle)

Dependencies

• Requires: 016-3, 016-4, 016-5 (all UI components)

Blocks

• None (final integration)

Files

• web-ui/src/components/Dashboard.tsx (modify)
• web-ui/__tests__/Dashboard.test.tsx (modify)

Testing

• E2E test: Create project → Complete discovery → Generate tasks → Approve → Development starts
• Verify all phase transitions work correctly
• Check WebSocket event handling

Effort

~1.5 hours

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#51 - feat: Add TaskStats component to Dashboard Overview tab [merged]
#93 - fix(e2e): Fix dashboard and metrics tests for tab-based UI rendering [merged]
#169 - feat(dashboard): Add dedicated tabs for Tasks, Quality Gates, and Metrics [merged]
#194 - Fix PRD generation progress tracking UI [merged]
#196 - fix(discovery): Synchronize PRD buttons and fix state persistence on tab revisit [merged]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[traycerai]

Plan

Observations

The Dashboard currently uses a simple phase badge (PhaseIndicator) and displays phase info in the header. SessionStatus and DiscoveryProgress components are already integrated in the Overview tab. The Tasks tab shows TaskTreeView and TaskStats. The codebase has robust WebSocket infrastructure with reconnection logic. However, the new components (PhaseProgress, TaskReview, TaskList) mentioned as dependencies from issues 016-3, 016-4, and 016-5 don't exist yet and need to be created first before this integration can proceed.

Approach

This integration assumes the prerequisite components (PhaseProgress, TaskReview, TaskList) have been created. The plan focuses on integrating these components into the Dashboard, adding phase-aware tab navigation with badges, optimizing WebSocket polling to reduce unnecessary updates during idle states, and ensuring responsive design with proper error boundaries. The integration follows the existing Dashboard architecture using the useAgentState hook for state management and maintains consistency with current styling patterns.

Implementation Steps

1. Create Missing Components (Prerequisites)

Before proceeding with Dashboard integration, ensure these components exist:

1.1 PhaseProgress Component (file:web-ui/src/components/PhaseProgress.tsx)

• Create a visual progress indicator showing the current phase and workflow step
• Display phases: discovery → planning → development → review → complete
• Show current step (e.g., "Step 5/15") with visual progress bar
• Use phase colors from PhaseIndicator for consistency
• Accept props: phase: ProjectPhase, workflowStep: number, totalSteps: number
• Make it responsive and visually prominent (replaces header phase text)

1.2 TaskReview Component (file:web-ui/src/components/TaskReview.tsx)

• Display generated tasks awaiting approval during planning phase
• Fetch tasks from API using existing projectsApi.getIssues(projectId)
• Show task list with approve/reject actions
• Include "Approve All" and "Request Changes" buttons
• Handle approval via API endpoint (create if needed: POST /api/projects/{id}/tasks/approve)
• Show loading states and error handling
• Emit WebSocket event on approval to trigger phase transition

1.3 TaskList Component (file:web-ui/src/components/TaskList.tsx)

• Display tasks during development phase (active phase)
• Reuse logic from TaskTreeView but with simpler flat list view
• Show task status, assigned agent, progress percentage
• Filter by status (all, in_progress, blocked, completed)
• Use useAgentState hook to get real-time task updates
• Include task actions (view details, view quality gates)

2. Dashboard Integration

2.1 Update Dashboard Header (file:web-ui/src/components/Dashboard.tsx, lines 263-337)

• Import PhaseProgress component
• Replace the phase text display (line 284) with <PhaseProgress> component
• Position it prominently below the project name
• Pass props: phase={projectData.phase}, workflowStep={projectData.workflow_step}, totalSteps={15}
• Remove or minimize the old "Phase: X (Step Y/15)" text to avoid redundancy

2.2 Update Overview Tab (file:web-ui/src/components/Dashboard.tsx, lines 432-574)

• PhaseProgress should appear at the very top of the Overview tab content
• Keep DiscoveryProgress below it (already positioned correctly at line 436)
• Keep SessionStatus below DiscoveryProgress (already at lines 438-441)
• Ensure proper spacing between components (mb-6 classes)

2.3 Update Tasks Tab (file:web-ui/src/components/Dashboard.tsx, lines 577-633)

• Add phase-aware conditional rendering:
  • If projectData.phase === 'planning': Show <TaskReview projectId={projectId} />
  • If projectData.phase === 'active' or 'review': Show <TaskList projectId={projectId} />
  • Otherwise: Show existing TaskTreeView (fallback)
• Keep TaskStats at the top (lines 581-584)
• Position phase-specific component below TaskStats
• Keep BlockerPanel, ReviewResultsPanel, and LintTrendChart below

2.4 Add Tab Navigation Badges (file:web-ui/src/components/Dashboard.tsx, lines 339-429)

• Update Tasks tab button (lines 357-370) to show conditional badge:
  • If projectData.phase === 'planning': Show "Review Tasks" badge with count
  • If projectData.phase === 'active': Show task progress badge (e.g., "3/10")
• Badge styling: Use <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
• Get task counts from useAgentState hook: const { tasks, completedTasks } = useAgentState()

3. WebSocket Optimization

3.1 Implement Conditional Polling (file:web-ui/src/components/Dashboard.tsx)

• Add state to track if active work is happening: const [isActiveWork, setIsActiveWork] = useState(false)
• Compute isActiveWork based on:
  • projectData.phase === 'active' AND
  • activeAgents.length > 0 (from useAgentState)
• Adjust WebSocket subscription behavior:
  • During active work: Keep current polling (real-time updates)
  • During idle (planning, review, complete phases): Reduce polling frequency or use event-driven updates only
• Modify existing WebSocket handlers (lines 189-247) to respect idle state

3.2 Optimize SWR Refresh Intervals

• Update SWR configurations for project status, blockers, PRD, issues (lines 134-157)
• Add conditional refreshInterval based on isActiveWork:
  • Active work: refreshInterval: 5000 (5 seconds)
  • Idle: refreshInterval: 30000 (30 seconds) or refreshInterval: 0 (manual refresh only)
• Use SWR's revalidateOnFocus and revalidateOnReconnect for better UX

4. Polish & Error Handling

4.1 Consistent Styling

• Ensure all new components use the same design tokens:
  • Card backgrounds: bg-card, borders: border-border
  • Text colors: text-foreground, text-muted-foreground
  • Primary actions: bg-primary text-primary-foreground
  • Spacing: mb-6 between major sections, p-6 for card padding
• Match existing component patterns (see SessionStatus, DiscoveryProgress)

4.2 Add Error Boundaries

• Wrap PhaseProgress in <ErrorBoundary> with fallback showing phase text
• Wrap TaskReview in <ErrorBoundary> with fallback showing error message and retry button
• Wrap TaskList in <ErrorBoundary> similar to QualityGatesPanel (lines 639-663)
• Use existing ErrorBoundary component (file:web-ui/src/components/ErrorBoundary.tsx)

4.3 Add Loading Skeletons

• Create loading skeleton for PhaseProgress: Show gray bars with pulse animation
• Create loading skeleton for TaskReview: Show list of skeleton cards
• Create loading skeleton for TaskList: Reuse TaskTreeView loading state
• Use Tailwind's animate-pulse utility

4.4 Smooth Transitions

• Add CSS transitions for phase changes: transition-all duration-300
• Animate tab badge appearance: transition-opacity duration-200
• Fade in/out when switching between TaskReview and TaskList
• Use React's key prop to trigger re-mount animations

4.5 Mobile Responsiveness

• Test PhaseProgress on mobile: Ensure it doesn't overflow, use responsive text sizes
• Test TaskReview on mobile: Stack action buttons vertically on small screens
• Test TaskList on mobile: Use single column layout, hide less important columns
• Update tab navigation (lines 342-427) to scroll horizontally on mobile if needed
• Use responsive classes: grid-cols-1 md:grid-cols-2 lg:grid-cols-3

5. Testing Updates

5.1 Update Dashboard Tests (file:web-ui/__tests__/components/Dashboard.test.tsx)

• Add test for PhaseProgress rendering with correct props
• Add test for phase-aware Tasks tab content (planning vs. active)
• Add test for tab badge display based on phase
• Add test for WebSocket polling optimization (idle vs. active)
• Mock new components (PhaseProgress, TaskReview, TaskList)
• Update existing tests to account for new component structure

5.2 Add Integration Tests

• Create E2E test: "Complete discovery → Generate tasks → Approve → Development starts"
• Test phase transitions update UI appropriately
• Test WebSocket event handling for task approval
• Test tab navigation badges update correctly
• Use existing E2E test patterns from file:tests/e2e/test_dashboard.spec.ts

6. Phase Transition Flow

sequenceDiagram
    participant User
    participant Dashboard
    participant TaskReview
    participant API
    participant WebSocket
    participant Backend

    User->>Dashboard: Views Tasks tab (planning phase)
    Dashboard->>TaskReview: Render TaskReview component
    TaskReview->>API: GET /api/projects/{id}/issues
    API-->>TaskReview: Return generated tasks
    TaskReview-->>User: Display tasks for review
    
    User->>TaskReview: Click "Approve All"
    TaskReview->>API: POST /api/projects/{id}/tasks/approve
    API->>Backend: Approve tasks, transition to active phase
    Backend->>WebSocket: Emit phase_changed event
    WebSocket-->>Dashboard: Receive phase update
    Dashboard->>Dashboard: Update projectData.phase = 'active'
    Dashboard->>TaskList: Render TaskList component
    TaskList-->>User: Display active tasks

Loading

7. Component Integration Diagram

graph TD
    A[Dashboard] --> B[Header]
    A --> C[Tab Navigation]
    A --> D[Overview Tab]
    A --> E[Tasks Tab]
    
    B --> B1[PhaseProgress - NEW]
    B --> B2[Project Info]
    B --> B3[Action Buttons]
    
    D --> D1[DiscoveryProgress]
    D --> D2[SessionStatus]
    D --> D3[Progress Section]
    D --> D4[Agents Section]
    
    E --> E1[TaskStats]
    E --> E2{Phase Check}
    E2 -->|planning| E3[TaskReview - NEW]
    E2 -->|active/review| E4[TaskList - NEW]
    E2 -->|other| E5[TaskTreeView]
    E --> E6[BlockerPanel]
    E --> E7[ReviewResultsPanel]
    
    C --> C1[Overview]
    C --> C2[Tasks with Badge - UPDATED]
    C --> C3[Quality Gates]
    C --> C4[Other Tabs]

Loading

8. Files to Modify

• file:web-ui/src/components/Dashboard.tsx - Main integration point
• file:web-ui/__tests__/components/Dashboard.test.tsx - Update tests
• file:web-ui/src/types/dashboard.ts - Add phase-related types if needed

9. Files to Create

• file:web-ui/src/components/PhaseProgress.tsx - Phase progress indicator
• file:web-ui/src/components/TaskReview.tsx - Task review component
• file:web-ui/src/components/TaskList.tsx - Task list component
• file:web-ui/__tests__/components/PhaseProgress.test.tsx - Tests
• file:web-ui/__tests__/components/TaskReview.test.tsx - Tests
• file:web-ui/__tests__/components/TaskList.test.tsx - Tests

10. Acceptance Criteria Checklist

• PhaseProgress component renders at top of Dashboard with correct phase and step
• SessionStatus remains properly positioned in Overview tab
• TaskReview appears in Tasks tab when phase === 'planning'
• TaskList appears in Tasks tab when phase === 'active'
• Tasks tab shows "Review Tasks" badge during planning phase
• Tasks tab shows task progress badge during development phase
• WebSocket polling reduces frequency during idle phases
• All components have consistent styling matching existing Dashboard
• Error boundaries catch and display errors gracefully
• Loading skeletons appear during data fetching
• Smooth transitions between phase states
• Mobile responsive on all screen sizes
• No console errors or warnings
• All tests pass including new integration tests

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Dashboard currently uses a simple phase badge (`PhaseIndicator`) and displays phase info in the header. `SessionStatus` and `DiscoveryProgress` components are already integrated in the Overview tab. The Tasks tab shows `TaskTreeView` and `TaskStats`. The codebase has robust WebSocket infrastructure with reconnection logic. However, the new components (`PhaseProgress`, `TaskReview`, `TaskList`) mentioned as dependencies from issues 016-3, 016-4, and 016-5 don't exist yet and need to be created first before this integration can proceed.

## Approach

This integration assumes the prerequisite components (`PhaseProgress`, `TaskReview`, `TaskList`) have been created. The plan focuses on integrating these components into the Dashboard, adding phase-aware tab navigation with badges, optimizing WebSocket polling to reduce unnecessary updates during idle states, and ensuring responsive design with proper error boundaries. The integration follows the existing Dashboard architecture using the `useAgentState` hook for state management and maintains consistency with current styling patterns.

## Implementation Steps

### 1. Create Missing Components (Prerequisites)

Before proceeding with Dashboard integration, ensure these components exist:

**1.1 PhaseProgress Component** (`file:web-ui/src/components/PhaseProgress.tsx`)
- Create a visual progress indicator showing the current phase and workflow step
- Display phases: discovery → planning → development → review → complete
- Show current step (e.g., "Step 5/15") with visual progress bar
- Use phase colors from `PhaseIndicator` for consistency
- Accept props: `phase: ProjectPhase`, `workflowStep: number`, `totalSteps: number`
- Make it responsive and visually prominent (replaces header phase text)

**1.2 TaskReview Component** (`file:web-ui/src/components/TaskReview.tsx`)
- Display generated tasks awaiting approval during planning phase
- Fetch tasks from API using existing `projectsApi.getIssues(projectId)`
- Show task list with approve/reject actions
- Include "Approve All" and "Request Changes" buttons
- Handle approval via API endpoint (create if needed: `POST /api/projects/{id}/tasks/approve`)
- Show loading states and error handling
- Emit WebSocket event on approval to trigger phase transition

**1.3 TaskList Component** (`file:web-ui/src/components/TaskList.tsx`)
- Display tasks during development phase (active phase)
- Reuse logic from `TaskTreeView` but with simpler flat list view
- Show task status, assigned agent, progress percentage
- Filter by status (all, in_progress, blocked, completed)
- Use `useAgentState` hook to get real-time task updates
- Include task actions (view details, view quality gates)

### 2. Dashboard Integration

**2.1 Update Dashboard Header** (`file:web-ui/src/components/Dashboard.tsx`, lines 263-337)
- Import `PhaseProgress` component
- Replace the phase text display (line 284) with `<PhaseProgress>` component
- Position it prominently below the project name
- Pass props: `phase={projectData.phase}`, `workflowStep={projectData.workflow_step}`, `totalSteps={15}`
- Remove or minimize the old "Phase: X (Step Y/15)" text to avoid redundancy

**2.2 Update Overview Tab** (`file:web-ui/src/components/Dashboard.tsx`, lines 432-574)
- `PhaseProgress` should appear at the very top of the Overview tab content
- Keep `DiscoveryProgress` below it (already positioned correctly at line 436)
- Keep `SessionStatus` below `DiscoveryProgress` (already at lines 438-441)
- Ensure proper spacing between components (mb-6 classes)

**2.3 Update Tasks Tab** (`file:web-ui/src/components/Dashboard.tsx`, lines 577-633)
- Add phase-aware conditional rendering:
  - If `projectData.phase === 'planning'`: Show `<TaskReview projectId={projectId} />`
  - If `projectData.phase === 'active'` or `'review'`: Show `<TaskList projectId={projectId} />`
  - Otherwise: Show existing `TaskTreeView` (fallback)
- Keep `TaskStats` at the top (lines 581-584)
- Position phase-specific component below `TaskStats`
- Keep `BlockerPanel`, `ReviewResultsPanel`, and `LintTrendChart` below

**2.4 Add Tab Navigation Badges** (`file:web-ui/src/components/Dashboard.tsx`, lines 339-429)
- Update Tasks tab button (lines 357-370) to show conditional badge:
  - If `projectData.phase === 'planning'`: Show "Review Tasks" badge with count
  - If `projectData.phase === 'active'`: Show task progress badge (e.g., "3/10")
- Badge styling: Use `<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">`
- Get task counts from `useAgentState` hook: `const { tasks, completedTasks } = useAgentState()`

### 3. WebSocket Optimization

**3.1 Implement Conditional Polling** (`file:web-ui/src/components/Dashboard.tsx`)
- Add state to track if active work is happening: `const [isActiveWork, setIsActiveWork] = useState(false)`
- Compute `isActiveWork` based on:
  - `projectData.phase === 'active'` AND
  - `activeAgents.length > 0` (from `useAgentState`)
- Adjust WebSocket subscription behavior:
  - During active work: Keep current polling (real-time updates)
  - During idle (planning, review, complete phases): Reduce polling frequency or use event-driven updates only
- Modify existing WebSocket handlers (lines 189-247) to respect idle state

**3.2 Optimize SWR Refresh Intervals**
- Update SWR configurations for project status, blockers, PRD, issues (lines 134-157)
- Add conditional `refreshInterval` based on `isActiveWork`:
  - Active work: `refreshInterval: 5000` (5 seconds)
  - Idle: `refreshInterval: 30000` (30 seconds) or `refreshInterval: 0` (manual refresh only)
- Use SWR's `revalidateOnFocus` and `revalidateOnReconnect` for better UX

### 4. Polish & Error Handling

**4.1 Consistent Styling**
- Ensure all new components use the same design tokens:
  - Card backgrounds: `bg-card`, borders: `border-border`
  - Text colors: `text-foreground`, `text-muted-foreground`
  - Primary actions: `bg-primary text-primary-foreground`
  - Spacing: `mb-6` between major sections, `p-6` for card padding
- Match existing component patterns (see `SessionStatus`, `DiscoveryProgress`)

**4.2 Add Error Boundaries**
- Wrap `PhaseProgress` in `<ErrorBoundary>` with fallback showing phase text
- Wrap `TaskReview` in `<ErrorBoundary>` with fallback showing error message and retry button
- Wrap `TaskList` in `<ErrorBoundary>` similar to `QualityGatesPanel` (lines 639-663)
- Use existing `ErrorBoundary` component (`file:web-ui/src/components/ErrorBoundary.tsx`)

**4.3 Add Loading Skeletons**
- Create loading skeleton for `PhaseProgress`: Show gray bars with pulse animation
- Create loading skeleton for `TaskReview`: Show list of skeleton cards
- Create loading skeleton for `TaskList`: Reuse `TaskTreeView` loading state
- Use Tailwind's `animate-pulse` utility

**4.4 Smooth Transitions**
- Add CSS transitions for phase changes: `transition-all duration-300`
- Animate tab badge appearance: `transition-opacity duration-200`
- Fade in/out when switching between `TaskReview` and `TaskList`
- Use React's `key` prop to trigger re-mount animations

**4.5 Mobile Responsiveness**
- Test `PhaseProgress` on mobile: Ensure it doesn't overflow, use responsive text sizes
- Test `TaskReview` on mobile: Stack action buttons vertically on small screens
- Test `TaskList` on mobile: Use single column layout, hide less important columns
- Update tab navigation (lines 342-427) to scroll horizontally on mobile if needed
- Use responsive classes: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`

### 5. Testing Updates

**5.1 Update Dashboard Tests** (`file:web-ui/__tests__/components/Dashboard.test.tsx`)
- Add test for `PhaseProgress` rendering with correct props
- Add test for phase-aware Tasks tab content (planning vs. active)
- Add test for tab badge display based on phase
- Add test for WebSocket polling optimization (idle vs. active)
- Mock new components (`PhaseProgress`, `TaskReview`, `TaskList`)
- Update existing tests to account for new component structure

**5.2 Add Integration Tests**
- Create E2E test: "Complete discovery → Generate tasks → Approve → Development starts"
- Test phase transitions update UI appropriately
- Test WebSocket event handling for task approval
- Test tab navigation badges update correctly
- Use existing E2E test patterns from `file:tests/e2e/test_dashboard.spec.ts`

### 6. Phase Transition Flow

```mermaid
sequenceDiagram
    participant User
    participant Dashboard
    participant TaskReview
    participant API
    participant WebSocket
    participant Backend

    User->>Dashboard: Views Tasks tab (planning phase)
    Dashboard->>TaskReview: Render TaskReview component
    TaskReview->>API: GET /api/projects/{id}/issues
    API-->>TaskReview: Return generated tasks
    TaskReview-->>User: Display tasks for review
    
    User->>TaskReview: Click "Approve All"
    TaskReview->>API: POST /api/projects/{id}/tasks/approve
    API->>Backend: Approve tasks, transition to active phase
    Backend->>WebSocket: Emit phase_changed event
    WebSocket-->>Dashboard: Receive phase update
    Dashboard->>Dashboard: Update projectData.phase = 'active'
    Dashboard->>TaskList: Render TaskList component
    TaskList-->>User: Display active tasks
```

### 7. Component Integration Diagram

```mermaid
graph TD
    A[Dashboard] --> B[Header]
    A --> C[Tab Navigation]
    A --> D[Overview Tab]
    A --> E[Tasks Tab]
    
    B --> B1[PhaseProgress - NEW]
    B --> B2[Project Info]
    B --> B3[Action Buttons]
    
    D --> D1[DiscoveryProgress]
    D --> D2[SessionStatus]
    D --> D3[Progress Section]
    D --> D4[Agents Section]
    
    E --> E1[TaskStats]
    E --> E2{Phase Check}
    E2 -->|planning| E3[TaskReview - NEW]
    E2 -->|active/review| E4[TaskList - NEW]
    E2 -->|other| E5[TaskTreeView]
    E --> E6[BlockerPanel]
    E --> E7[ReviewResultsPanel]
    
    C --> C1[Overview]
    C --> C2[Tasks with Badge - UPDATED]
    C --> C3[Quality Gates]
    C --> C4[Other Tabs]
```

### 8. Files to Modify

- `file:web-ui/src/components/Dashboard.tsx` - Main integration point
- `file:web-ui/__tests__/components/Dashboard.test.tsx` - Update tests
- `file:web-ui/src/types/dashboard.ts` - Add phase-related types if needed

### 9. Files to Create

- `file:web-ui/src/components/PhaseProgress.tsx` - Phase progress indicator
- `file:web-ui/src/components/TaskReview.tsx` - Task review component
- `file:web-ui/src/components/TaskList.tsx` - Task list component
- `file:web-ui/__tests__/components/PhaseProgress.test.tsx` - Tests
- `file:web-ui/__tests__/components/TaskReview.test.tsx` - Tests
- `file:web-ui/__tests__/components/TaskList.test.tsx` - Tests

### 10. Acceptance Criteria Checklist

- [ ] `PhaseProgress` component renders at top of Dashboard with correct phase and step
- [ ] `SessionStatus` remains properly positioned in Overview tab
- [ ] `TaskReview` appears in Tasks tab when `phase === 'planning'`
- [ ] `TaskList` appears in Tasks tab when `phase === 'active'`
- [ ] Tasks tab shows "Review Tasks" badge during planning phase
- [ ] Tasks tab shows task progress badge during development phase
- [ ] WebSocket polling reduces frequency during idle phases
- [ ] All components have consistent styling matching existing Dashboard
- [ ] Error boundaries catch and display errors gracefully
- [ ] Loading skeletons appear during data fetching
- [ ] Smooth transitions between phase states
- [ ] Mobile responsive on all screen sizes
- [ ] No console errors or warnings
- [ ] All tests pass including new integration tests

---

Execution Information

Branch: main
Commit: 02f1413

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.