016-4: Create Tasks Button in DiscoveryProgress

[frankbria]

Part of #197 - Planning Phase Automation

Scope

This issue adds the "Generate Task Breakdown" button to the DiscoveryProgress component.

Tasks

Create Tasks Button (~1h)

• Modify web-ui/src/components/DiscoveryProgress.tsx
• Add button when: phase = "planning" AND PRD exists AND tasks not generated
• Button states:
  • Pre-generation: "Generate Task Breakdown" (primary action)
  • Generating: Spinner + "Generating tasks..." (disabled)
  • Complete: "Review Tasks →" (links to Tasks tab)
• Listen for WebSocket events:
  • planning_started → show generating state
  • issues_generated → update progress text
  • tasks_decomposed → update progress text
  • tasks_ready → show "Review Tasks" button
• Handle errors (show retry button)
• Remove placeholder "Next: Task Creation" text

UI Mockup

┌─────────────────────────────────────────┐
│ ✅ PRD Generated                        │
│                                         │
│ Your PRD has been generated with 8      │
│ features ready for development.         │
│                                         │
│ [Generate Task Breakdown]  ← Primary    │
│                                         │
│ or                                      │
│                                         │
│ [View PRD]  ← Secondary                 │
└─────────────────────────────────────────┘

After generation:
┌─────────────────────────────────────────┐
│ ✅ Tasks Ready for Review               │
│                                         │
│ Created 5 issues and 24 tasks from PRD. │
│                                         │
│ [Review Tasks →]  ← Links to Tasks tab  │
└─────────────────────────────────────────┘

Acceptance Criteria

• Button appears in correct state based on project phase
• Clicking button triggers task generation (or uses auto-trigger)
• Loading state shows during generation
• "Review Tasks" button appears after completion
• No placeholder text visible

Dependencies

• Requires: 016-2 (WebSocket events for progress)

Blocks

• 016-5: TaskReview Component - Task Approval UI #202 (016-6: Integration)

Files

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

Effort

~1 hour

[traycerai]

Plan

Observations

The file:web-ui/src/components/DiscoveryProgress.tsx component currently displays a placeholder "Next: Task Creation" message (lines 803-815) when PRD generation completes and the project is in the "planning" phase. The component already has established patterns for button states (loading, disabled, success), WebSocket event handling, and error management. The backend has a decompose_prd method in file:codeframe/agents/lead_agent.py (line 1274) that handles task breakdown. The Dashboard component uses tab-based navigation with setActiveTab to switch between views.

Approach

Replace the placeholder "Next: Task Creation" section with a dynamic button that shows three states: pre-generation ("Generate Task Breakdown"), generating (spinner + "Generating tasks..."), and complete ("Review Tasks →" linking to Tasks tab). The button will listen for WebSocket events (planning_started, issues_generated, tasks_decomposed, tasks_ready) to update its state. Since these WebSocket events are part of the dependency issue #16-2, the implementation will prepare the event handlers while noting that the backend events need to be emitted. The button will either trigger task generation via an API call or rely on auto-triggering based on the final architecture decision.

Implementation Steps

1. Add State Management for Task Generation

File: file:web-ui/src/components/DiscoveryProgress.tsx

Add new state variables after the existing PRD-related states (around line 64):

• tasksGenerated: boolean - tracks if tasks have been generated
• isGeneratingTasks: boolean - tracks if task generation is in progress
• taskGenerationError: string | null - stores error messages
• taskGenerationProgress: string - stores progress text (e.g., "Generating issues...", "Decomposing tasks...")

2. Create Task Generation Handler

File: file:web-ui/src/components/DiscoveryProgress.tsx

Add a new handler function (similar to handleRetryPrdGeneration pattern around line 230):

• handleGenerateTaskBreakdown: async function that:
  • Sets isGeneratingTasks to true
  • Clears any previous errors
  • Makes API call to trigger task generation (endpoint TBD - may be auto-triggered)
  • Handles success/error responses
  • Updates state accordingly

Note: The exact API endpoint needs clarification - the ticket mentions "or uses auto-trigger", suggesting task generation might be automatically triggered when PRD completes. If auto-trigger is used, this handler may only be needed for manual retry scenarios.

3. Add WebSocket Event Listeners

File: file:web-ui/src/components/DiscoveryProgress.tsx

Add a new useEffect hook (after the PRD WebSocket handler around line 350) to listen for planning phase events:

Listen for these WebSocket message types:

• planning_started: Set isGeneratingTasks to true, update progress text
• issues_generated: Update taskGenerationProgress with issue count
• tasks_decomposed: Update taskGenerationProgress with task count
• tasks_ready: Set tasksGenerated to true, isGeneratingTasks to false

Filter messages by project_id to ensure only relevant events are processed (following existing pattern from line 232).

Dependency Note: These WebSocket events are defined in file:web-ui/src/types/index.ts but need to be emitted by the backend as part of issue #16-2. The event handlers should be implemented now to be ready when backend support is added.

4. Replace Placeholder with Dynamic Button

File: file:web-ui/src/components/DiscoveryProgress.tsx

Replace the "Next: Task Creation" section (lines 803-815) with conditional rendering:

Pre-generation state (when prdCompleted && !tasksGenerated && !isGeneratingTasks):

• Show success banner: "✅ PRD Generated"
• Display summary text: "Your PRD has been generated with X features ready for development."
• Primary button: "Generate Task Breakdown" (calls handleGenerateTaskBreakdown)
• Secondary button: "View PRD" (existing onViewPRD callback)

Generating state (when isGeneratingTasks):

• Show progress banner with spinner (reuse inline SVG spinner pattern from line 708)
• Display dynamic progress text from taskGenerationProgress
• Button disabled with text: "Generating tasks..."
• Show progress updates as WebSocket events arrive

Complete state (when tasksGenerated):

• Show success banner: "✅ Tasks Ready for Review"
• Display summary: "Created X issues and Y tasks from PRD."
• Primary button: "Review Tasks →" (navigates to Tasks tab)

Error state (when taskGenerationError):

• Show error banner with destructive styling
• Display error message
• Retry button: "Retry Task Generation" (calls handleGenerateTaskBreakdown)

5. Add Navigation to Tasks Tab

File: file:web-ui/src/components/DiscoveryProgress.tsx

Add a prop to receive navigation callback from parent Dashboard component:

• Add onNavigateToTasks?: () => void to DiscoveryProgressProps interface (around line 18)
• Use this callback in the "Review Tasks →" button click handler

File: file:web-ui/src/components/Dashboard.tsx

Pass navigation callback to DiscoveryProgress component (line 436):

<DiscoveryProgress 
  projectId={projectId} 
  onViewPRD={() => setShowPRD(true)}
  onNavigateToTasks={() => setActiveTab('tasks')}
/>

6. Update Tests

File: file:web-ui/__tests__/components/DiscoveryProgress.test.tsx

Add new test cases after the existing PRD tests (around line 2146):

Button State Tests:

• Test button appears when PRD complete and phase is "planning"
• Test button shows "Generate Task Breakdown" initially
• Test button disabled when no PRD exists
• Test button click triggers task generation

WebSocket Event Tests:

• Test planning_started event shows generating state
• Test issues_generated event updates progress text
• Test tasks_decomposed event updates progress text
• Test tasks_ready event shows "Review Tasks" button
• Test events filtered by project_id

Navigation Tests:

• Test "Review Tasks →" button calls onNavigateToTasks callback
• Test navigation only available after tasks generated

Error Handling Tests:

• Test error state displays error message
• Test retry button appears on error
• Test retry button triggers task generation again

7. API Integration (If Not Auto-Triggered)

File: file:web-ui/src/lib/api.ts

If manual trigger is needed, add new API method to projectsApi object (around line 62):

generateTasks: (projectId: number | string) =>
  api.post<{ success: boolean; message: string }>(
    `/api/projects/${projectId}/planning/generate-tasks`
  ),

Backend Note: If this endpoint is needed, it should be added to file:codeframe/ui/routers/projects.py to call lead_agent.decompose_prd() and emit appropriate WebSocket events.

8. Type Definitions

File: file:web-ui/src/types/index.ts

Verify WebSocket message types include planning events (they should already be defined around line 87):

• planning_started
• issues_generated
• tasks_decomposed
• tasks_ready

Add fields to WebSocketMessage interface if needed:

• issues_count?: number (for issues_generated)
• tasks_count?: number (for tasks_decomposed)

Visual Flow

sequenceDiagram
    participant User
    participant DiscoveryProgress
    participant WebSocket
    participant Backend
    participant Dashboard

    Note over DiscoveryProgress: PRD Complete, Phase=Planning
    DiscoveryProgress->>User: Show "Generate Task Breakdown" button
    
    User->>DiscoveryProgress: Click "Generate Task Breakdown"
    DiscoveryProgress->>Backend: POST /api/projects/{id}/planning/generate-tasks
    Backend->>WebSocket: Emit "planning_started"
    WebSocket->>DiscoveryProgress: Receive "planning_started"
    DiscoveryProgress->>User: Show spinner + "Generating tasks..."
    
    Backend->>Backend: Generate issues from PRD
    Backend->>WebSocket: Emit "issues_generated" (count: 5)
    WebSocket->>DiscoveryProgress: Receive "issues_generated"
    DiscoveryProgress->>User: Update progress: "Created 5 issues"
    
    Backend->>Backend: Decompose issues into tasks
    Backend->>WebSocket: Emit "tasks_decomposed" (count: 24)
    WebSocket->>DiscoveryProgress: Receive "tasks_decomposed"
    DiscoveryProgress->>User: Update progress: "Decomposed into 24 tasks"
    
    Backend->>WebSocket: Emit "tasks_ready"
    WebSocket->>DiscoveryProgress: Receive "tasks_ready"
    DiscoveryProgress->>User: Show "Review Tasks →" button
    
    User->>DiscoveryProgress: Click "Review Tasks →"
    DiscoveryProgress->>Dashboard: Call onNavigateToTasks()
    Dashboard->>Dashboard: setActiveTab('tasks')
    Dashboard->>User: Navigate to Tasks tab

Loading

Dependencies & Blockers

• Requires: Issue Enhanced Verification and Reporting #16-2 must implement WebSocket event emission in backend (planning_started, issues_generated, tasks_decomposed, tasks_ready)
• Requires: Clarification on whether task generation is auto-triggered or requires manual API call
• Blocks: Issue 016-5: TaskReview Component - Task Approval UI #202 (016-6: Integration) - this button is needed for the complete planning phase flow

Acceptance Criteria Verification

• ✅ Button appears when phase === "planning" AND PRD exists AND tasks not generated
• ✅ Three button states implemented: pre-generation, generating, complete
• ✅ WebSocket event listeners added for all four planning events
• ✅ Loading state shows spinner and progress text during generation
• ✅ "Review Tasks →" button navigates to Tasks tab after completion
• ✅ Error handling with retry button implemented
• ✅ Placeholder "Next: Task Creation" text removed

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `file:web-ui/src/components/DiscoveryProgress.tsx` component currently displays a placeholder "Next: Task Creation" message (lines 803-815) when PRD generation completes and the project is in the "planning" phase. The component already has established patterns for button states (loading, disabled, success), WebSocket event handling, and error management. The backend has a `decompose_prd` method in `file:codeframe/agents/lead_agent.py` (line 1274) that handles task breakdown. The Dashboard component uses tab-based navigation with `setActiveTab` to switch between views.

## Approach

Replace the placeholder "Next: Task Creation" section with a dynamic button that shows three states: pre-generation ("Generate Task Breakdown"), generating (spinner + "Generating tasks..."), and complete ("Review Tasks →" linking to Tasks tab). The button will listen for WebSocket events (`planning_started`, `issues_generated`, `tasks_decomposed`, `tasks_ready`) to update its state. Since these WebSocket events are part of the dependency issue #016-2, the implementation will prepare the event handlers while noting that the backend events need to be emitted. The button will either trigger task generation via an API call or rely on auto-triggering based on the final architecture decision.

## Implementation Steps

### 1. Add State Management for Task Generation

**File**: `file:web-ui/src/components/DiscoveryProgress.tsx`

Add new state variables after the existing PRD-related states (around line 64):

- `tasksGenerated`: boolean - tracks if tasks have been generated
- `isGeneratingTasks`: boolean - tracks if task generation is in progress
- `taskGenerationError`: string | null - stores error messages
- `taskGenerationProgress`: string - stores progress text (e.g., "Generating issues...", "Decomposing tasks...")

### 2. Create Task Generation Handler

**File**: `file:web-ui/src/components/DiscoveryProgress.tsx`

Add a new handler function (similar to `handleRetryPrdGeneration` pattern around line 230):

- `handleGenerateTaskBreakdown`: async function that:
  - Sets `isGeneratingTasks` to true
  - Clears any previous errors
  - Makes API call to trigger task generation (endpoint TBD - may be auto-triggered)
  - Handles success/error responses
  - Updates state accordingly

**Note**: The exact API endpoint needs clarification - the ticket mentions "or uses auto-trigger", suggesting task generation might be automatically triggered when PRD completes. If auto-trigger is used, this handler may only be needed for manual retry scenarios.

### 3. Add WebSocket Event Listeners

**File**: `file:web-ui/src/components/DiscoveryProgress.tsx`

Add a new `useEffect` hook (after the PRD WebSocket handler around line 350) to listen for planning phase events:

Listen for these WebSocket message types:
- `planning_started`: Set `isGeneratingTasks` to true, update progress text
- `issues_generated`: Update `taskGenerationProgress` with issue count
- `tasks_decomposed`: Update `taskGenerationProgress` with task count  
- `tasks_ready`: Set `tasksGenerated` to true, `isGeneratingTasks` to false

Filter messages by `project_id` to ensure only relevant events are processed (following existing pattern from line 232).

**Dependency Note**: These WebSocket events are defined in `file:web-ui/src/types/index.ts` but need to be emitted by the backend as part of issue #016-2. The event handlers should be implemented now to be ready when backend support is added.

### 4. Replace Placeholder with Dynamic Button

**File**: `file:web-ui/src/components/DiscoveryProgress.tsx`

Replace the "Next: Task Creation" section (lines 803-815) with conditional rendering:

**Pre-generation state** (when `prdCompleted && !tasksGenerated && !isGeneratingTasks`):
- Show success banner: "✅ PRD Generated"
- Display summary text: "Your PRD has been generated with X features ready for development."
- Primary button: "Generate Task Breakdown" (calls `handleGenerateTaskBreakdown`)
- Secondary button: "View PRD" (existing `onViewPRD` callback)

**Generating state** (when `isGeneratingTasks`):
- Show progress banner with spinner (reuse inline SVG spinner pattern from line 708)
- Display dynamic progress text from `taskGenerationProgress`
- Button disabled with text: "Generating tasks..."
- Show progress updates as WebSocket events arrive

**Complete state** (when `tasksGenerated`):
- Show success banner: "✅ Tasks Ready for Review"
- Display summary: "Created X issues and Y tasks from PRD."
- Primary button: "Review Tasks →" (navigates to Tasks tab)

**Error state** (when `taskGenerationError`):
- Show error banner with destructive styling
- Display error message
- Retry button: "Retry Task Generation" (calls `handleGenerateTaskBreakdown`)

### 5. Add Navigation to Tasks Tab

**File**: `file:web-ui/src/components/DiscoveryProgress.tsx`

Add a prop to receive navigation callback from parent Dashboard component:

- Add `onNavigateToTasks?: () => void` to `DiscoveryProgressProps` interface (around line 18)
- Use this callback in the "Review Tasks →" button click handler

**File**: `file:web-ui/src/components/Dashboard.tsx`

Pass navigation callback to DiscoveryProgress component (line 436):

```typescript
<DiscoveryProgress 
  projectId={projectId} 
  onViewPRD={() => setShowPRD(true)}
  onNavigateToTasks={() => setActiveTab('tasks')}
/>
```

### 6. Update Tests

**File**: `file:web-ui/__tests__/components/DiscoveryProgress.test.tsx`

Add new test cases after the existing PRD tests (around line 2146):

**Button State Tests**:
- Test button appears when PRD complete and phase is "planning"
- Test button shows "Generate Task Breakdown" initially
- Test button disabled when no PRD exists
- Test button click triggers task generation

**WebSocket Event Tests**:
- Test `planning_started` event shows generating state
- Test `issues_generated` event updates progress text
- Test `tasks_decomposed` event updates progress text
- Test `tasks_ready` event shows "Review Tasks" button
- Test events filtered by project_id

**Navigation Tests**:
- Test "Review Tasks →" button calls `onNavigateToTasks` callback
- Test navigation only available after tasks generated

**Error Handling Tests**:
- Test error state displays error message
- Test retry button appears on error
- Test retry button triggers task generation again

### 7. API Integration (If Not Auto-Triggered)

**File**: `file:web-ui/src/lib/api.ts`

If manual trigger is needed, add new API method to `projectsApi` object (around line 62):

```typescript
generateTasks: (projectId: number | string) =>
  api.post<{ success: boolean; message: string }>(
    `/api/projects/${projectId}/planning/generate-tasks`
  ),
```

**Backend Note**: If this endpoint is needed, it should be added to `file:codeframe/ui/routers/projects.py` to call `lead_agent.decompose_prd()` and emit appropriate WebSocket events.

### 8. Type Definitions

**File**: `file:web-ui/src/types/index.ts`

Verify WebSocket message types include planning events (they should already be defined around line 87):
- `planning_started`
- `issues_generated`  
- `tasks_decomposed`
- `tasks_ready`

Add fields to `WebSocketMessage` interface if needed:
- `issues_count?: number` (for `issues_generated`)
- `tasks_count?: number` (for `tasks_decomposed`)

## Visual Flow

```mermaid
sequenceDiagram
    participant User
    participant DiscoveryProgress
    participant WebSocket
    participant Backend
    participant Dashboard

    Note over DiscoveryProgress: PRD Complete, Phase=Planning
    DiscoveryProgress->>User: Show "Generate Task Breakdown" button
    
    User->>DiscoveryProgress: Click "Generate Task Breakdown"
    DiscoveryProgress->>Backend: POST /api/projects/{id}/planning/generate-tasks
    Backend->>WebSocket: Emit "planning_started"
    WebSocket->>DiscoveryProgress: Receive "planning_started"
    DiscoveryProgress->>User: Show spinner + "Generating tasks..."
    
    Backend->>Backend: Generate issues from PRD
    Backend->>WebSocket: Emit "issues_generated" (count: 5)
    WebSocket->>DiscoveryProgress: Receive "issues_generated"
    DiscoveryProgress->>User: Update progress: "Created 5 issues"
    
    Backend->>Backend: Decompose issues into tasks
    Backend->>WebSocket: Emit "tasks_decomposed" (count: 24)
    WebSocket->>DiscoveryProgress: Receive "tasks_decomposed"
    DiscoveryProgress->>User: Update progress: "Decomposed into 24 tasks"
    
    Backend->>WebSocket: Emit "tasks_ready"
    WebSocket->>DiscoveryProgress: Receive "tasks_ready"
    DiscoveryProgress->>User: Show "Review Tasks →" button
    
    User->>DiscoveryProgress: Click "Review Tasks →"
    DiscoveryProgress->>Dashboard: Call onNavigateToTasks()
    Dashboard->>Dashboard: setActiveTab('tasks')
    Dashboard->>User: Navigate to Tasks tab
```

## Dependencies & Blockers

- **Requires**: Issue #016-2 must implement WebSocket event emission in backend (`planning_started`, `issues_generated`, `tasks_decomposed`, `tasks_ready`)
- **Requires**: Clarification on whether task generation is auto-triggered or requires manual API call
- **Blocks**: Issue #202 (016-6: Integration) - this button is needed for the complete planning phase flow

## Acceptance Criteria Verification

- ✅ Button appears when `phase === "planning"` AND PRD exists AND tasks not generated
- ✅ Three button states implemented: pre-generation, generating, complete
- ✅ WebSocket event listeners added for all four planning events
- ✅ Loading state shows spinner and progress text during generation
- ✅ "Review Tasks →" button navigates to Tasks tab after completion
- ✅ Error handling with retry button implemented
- ✅ Placeholder "Next: Task Creation" text removed

---

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.

[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

---

⚠️ Possible Duplicate Issue

• feat: Planning Phase Automation - Bridge PRD to Development #197

🔗 Related PRs

#51 - feat: Add TaskStats component to Dashboard Overview tab [merged]
#76 - Add dismissible warning banner to QualityGateStatus component [merged]
#191 - feat(e2e): Enable conditional tests and fix discovery startup [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!