feat(planning): Add Generate Task Breakdown button to DiscoveryProgress - #213
Conversation
Implements Feature 016-3: Dynamic button that appears after PRD generation
to initiate task breakdown from the planning phase.
Changes:
- Add task generation UI with 4 states (button, progress, error, complete)
- Add WebSocket event handlers for planning_started, issues_generated,
tasks_decomposed, tasks_ready, and planning_failed events
- Add generateTasks API endpoint to lib/api.ts
- Add onNavigateToTasks callback prop for Tasks tab navigation
- Add 19 unit tests following TDD approach (89 total passing)
- Add 6 E2E tests for the complete flow
- Update existing tests for changed testid (next-phase-indicator →
task-generation-section)
The backend endpoint /api/projects/{id}/planning/generate-tasks is not
yet implemented; frontend is ready to respond to WebSocket events.
WalkthroughImplements the Task Breakdown feature by adding a "Generate Task Breakdown" button and related UI states to the DiscoveryProgress component, integrating new API endpoints, WebSocket planning-phase message types, and comprehensive E2E test coverage to enable users to generate and review task decompositions from PRDs. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant DP as DiscoveryProgress
participant API as projectsApi
participant Backend
participant WS as WebSocket
participant Nav as Dashboard
User->>DP: Click "Generate Task Breakdown"
DP->>DP: Set isGeneratingTasks=true
DP->>API: generateTasks(projectId)
API->>Backend: POST /planning/generate-tasks
Backend-->>API: { success: true }
rect rgb(200, 220, 255)
Note over Backend,WS: Planning Phase Events (via WebSocket)
Backend->>WS: planning_started
WS->>DP: Update UI, show progress
Backend->>WS: issues_generated { issues_count: n }
WS->>DP: Update progress message
Backend->>WS: tasks_decomposed { tasks_count: m }
WS->>DP: Update progress
Backend->>WS: tasks_ready
WS->>DP: tasksGenerated=true, show "Review Tasks"
end
User->>DP: Click "Review Tasks"
DP->>Nav: onNavigateToTasks()
Nav->>Nav: setActiveTab('tasks')
alt Error Scenario
Backend->>WS: planning_failed { planning_error: msg }
WS->>DP: Show error state
User->>DP: Click "Retry Task Generation"
DP->>API: generateTasks(projectId)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom Pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Code Review - PR #213: Feature 016-3 Task Breakdown ButtonSummaryThis PR successfully implements the "Generate Task Breakdown" button feature in the DiscoveryProgress component. The implementation is well-structured, secure, and thoroughly tested. Ready to merge ✅ Strengths1. Excellent State ManagementThe component manages 6 related state variables cohesively:
All states are properly coordinated with clear transitions between 4 UI states:
2. Robust Error Handling
3. Security Best Practices✅ Authentication: All API calls route through authenticated axios instance with JWT tokens 4. Comprehensive Test Coverage
5. WebSocket IntegrationProperly handles 5 planning phase events:
Code Quality Observations✅ Conditional Rendering LogicThe UI state conditions are mutually exclusive and well-defined (lines 871-954): // Show button: PRD complete, planning phase, no tasks yet
{prdCompleted && phase === 'planning' && !tasksGenerated && !isGeneratingTasks && !taskGenerationError && (
<button>Generate Task Breakdown</button>
)}
// Show progress
{isGeneratingTasks && <ProgressUI />}
// Show error with retry
{taskGenerationError && <ErrorUI />}
// Show success with navigation
{tasksGenerated && <SuccessUI />}✅ API IntegrationClean integration with existing API patterns (lib/api.ts:62-65): generateTasks: (projectId: number | string) =>
api.post<{ success: boolean; message: string }>(
`/api/projects/${projectId}/planning/generate-tasks`
),✅ Type SafetyNew WebSocket message types properly defined in
Suggestions (Optional Enhancements)These are not blockers - the current implementation is production-ready:
Checklist ReviewFrom the PR description:
Note: The frontend is complete and ready. E2E and manual testing blocked on backend Files Changed
Alignment with CLAUDE.md✅ shadcn/ui Nova: Consistent use of Risk Assessment
Recommendation: APPROVE & MERGE ✅This implementation demonstrates:
The frontend is production-ready and properly handles the case where the backend endpoint is not yet implemented. Review conducted following OWASP security guidelines, project coding standards from CLAUDE.md, and existing codebase patterns. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
web-ui/src/components/Dashboard.tsx (1)
462-466: Prefer a memoized callback foronNavigateToTasksPassing an inline arrow (
onNavigateToTasks={() => setActiveTab('tasks')}) creates a new function each render and can defeat memoization onDiscoveryProgress. Consider lifting this into auseCallback(e.g.,const handleNavigateToTasks = useCallback(() => setActiveTab('tasks'), []);) and passing that instead for slightly better render performance.tests/e2e/test_task_breakdown.spec.ts (1)
18-308: Well-structured, state-aware E2E coverage for Task BreakdownThe suite cleanly uses
loginUser, centralized error monitoring, env-driven project selection, and conditionaltest.skipto keep the tests robust against varying backend states. Selectors line up with the new UI test IDs, and flows for happy path, progress, error, and retry are all exercised. Only minor nit is thatPROJECT_IDresolution is duplicated across tests; you could factor that into a helper for readability, but this is optional.docs/code-review/2026-01-06-task-breakdown-button-review.md (1)
1-160: Minor: address markdownlint MD036 (emphasis as heading)Static analysis flags
**✅ APPROVED FOR MERGE**as emphasis used instead of a heading. If you care about a clean markdownlint run, consider turning this into a proper heading (e.g.,## ✅ APPROVED FOR MERGE) or disabling the rule for this line.web-ui/__tests__/components/DiscoveryProgress.test.tsx (1)
3050-3535: Comprehensive tests for Task Generation button and planning eventsThe new “Task Generation Button” suites thoroughly cover visibility conditions, API invocation, WebSocket-driven progress (
planning_started,issues_generated,tasks_decomposed,tasks_ready,planning_failed), navigation viaonNavigateToTasks, and error/retry behavior. This gives strong confidence in the new UI logic. If you find these evolve further, you might factor out a small helper to emit the common “planning_started → issues_generated → tasks_decomposed → tasks_ready” sequence to reduce repetition, but it’s not required.web-ui/src/components/DiscoveryProgress.tsx (1)
870-954: Task Generation UI states are mutually consistent and align with testsThe four UI variants—pre-generation button, in-progress spinner, error-with-retry, and tasks-ready-with-review—are gated on
prdCompleted && phase === 'planning'plus task-generation state, matching the mental model and the component tests. TheonNavigateToTasks?.()callback on “Review Tasks →” neatly hands control back to the parent without coupling this component to routing. One potential future enhancement would be to initializetasksGenerated/counts from an API on mount (similar to PRD status) so a reload after tasks are ready doesn’t rely solely on WebSocket replay, but this can be deferred.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/code-review/2026-01-06-task-breakdown-button-review.mdtests/e2e/test_task_breakdown.spec.tsweb-ui/__tests__/components/DiscoveryProgress.test.tsxweb-ui/src/components/Dashboard.tsxweb-ui/src/components/DiscoveryProgress.tsxweb-ui/src/lib/api.tsweb-ui/src/types/index.ts
🧰 Additional context used
📓 Path-based instructions (7)
web-ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
web-ui/src/**/*.{ts,tsx}: Use TypeScript 5.3+ for frontend development with React 18, Next.js 14, Tailwind CSS, and Hugeicons for icons
Use TypeScript strict mode and ensure 100% type safety with no hardcoded types or any usage in frontend code
Files:
web-ui/src/lib/api.tsweb-ui/src/components/DiscoveryProgress.tsxweb-ui/src/types/index.tsweb-ui/src/components/Dashboard.tsx
web-ui/src/lib/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Frontend API files must use const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080' pattern without hardcoded production URLs or different fallback ports
Files:
web-ui/src/lib/api.ts
tests/e2e/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Implement E2E tests using Playwright + TestSprite with loginUser() helper from tests/e2e/test-utils.ts for authentication
Files:
tests/e2e/test_task_breakdown.spec.ts
**/*.md
📄 CodeRabbit inference engine (AGENTS.md)
Documentation files must be sized to fit in a single agent context window (spec.md ~200-400 lines, plan.md ~300-600 lines, tasks.md ~400-800 lines)
Files:
docs/code-review/2026-01-06-task-breakdown-button-review.md
web-ui/src/components/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
web-ui/src/components/**/*.tsx: Use shadcn/ui Nova template components with semantic color palette (bg-card, text-foreground, etc.) and avoid hardcoded color values
Use cn() utility for conditional Tailwind CSS classes and follow Nova's compact spacing conventions
Files:
web-ui/src/components/DiscoveryProgress.tsxweb-ui/src/components/Dashboard.tsx
web-ui/src/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Replace all icon usage with Hugeicons (@hugeicons/react) and do not mix with lucide-react
Files:
web-ui/src/components/DiscoveryProgress.tsxweb-ui/src/components/Dashboard.tsx
web-ui/src/components/Dashboard.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Use React.memo on all Dashboard sub-components and useMemo for derived state to optimize performance with multi-agent support
Files:
web-ui/src/components/Dashboard.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T19:08:54.154Z
Learning: Applies to specs/*/tasks.md : Feature task files (tasks.md) must include phase-by-phase task breakdown with unique task identifiers (T001, T002, etc.), acceptance criteria per task, beads issue references, and estimated effort
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/app/page.tsx : Implement automatic project discovery start after project creation with loading state transitions and 'Start Discovery' button for idle projects
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to tests/e2e/**/*.ts : Implement E2E tests using Playwright + TestSprite with loginUser() helper from tests/e2e/test-utils.ts for authentication
Applied to files:
tests/e2e/test_task_breakdown.spec.ts
📚 Learning: 2025-11-25T19:08:54.154Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T19:08:54.154Z
Learning: Applies to specs/*/tasks.md : Feature task files (tasks.md) must include phase-by-phase task breakdown with unique task identifiers (T001, T002, etc.), acceptance criteria per task, beads issue references, and estimated effort
Applied to files:
tests/e2e/test_task_breakdown.spec.tsdocs/code-review/2026-01-06-task-breakdown-button-review.mdweb-ui/src/components/DiscoveryProgress.tsx
📚 Learning: 2025-11-25T19:08:37.203Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: docs/CLAUDE.md:0-0
Timestamp: 2025-11-25T19:08:37.203Z
Learning: Applies to docs/web-ui/**/__tests__/**/*.test.{ts,tsx} : Create JavaScript test files colocated or in __tests__/ as *.test.ts
Applied to files:
tests/e2e/test_task_breakdown.spec.tsweb-ui/__tests__/components/DiscoveryProgress.test.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/app/page.tsx : Implement automatic project discovery start after project creation with loading state transitions and 'Start Discovery' button for idle projects
Applied to files:
tests/e2e/test_task_breakdown.spec.tsweb-ui/src/components/DiscoveryProgress.tsxweb-ui/__tests__/components/DiscoveryProgress.test.tsxweb-ui/src/components/Dashboard.tsx
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/lib/websocketMessageMapper.ts : Implement WebSocket event mapping with 9 event types (agent_created, task_assigned, etc.) with automatic reconnection using exponential backoff (1s → 30s)
Applied to files:
web-ui/src/components/DiscoveryProgress.tsxweb-ui/src/types/index.ts
📚 Learning: 2026-01-04T06:26:12.870Z
Learnt from: CR
Repo: frankbria/codeframe PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-04T06:26:12.870Z
Learning: Applies to web-ui/src/components/Dashboard.tsx : Use React.memo on all Dashboard sub-components and useMemo for derived state to optimize performance with multi-agent support
Applied to files:
web-ui/src/components/Dashboard.tsx
🧬 Code graph analysis (1)
web-ui/__tests__/components/DiscoveryProgress.test.tsx (2)
web-ui/src/types/api.ts (1)
DiscoveryProgressResponse(135-139)web-ui/src/lib/api.ts (1)
projectsApi(30-66)
🪛 markdownlint-cli2 (0.18.1)
docs/code-review/2026-01-06-task-breakdown-button-review.md
154-154: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Frontend Unit Tests
- GitHub Check: Backend Unit Tests
- GitHub Check: E2E Smoke Tests (Chromium)
- GitHub Check: claude-review
🔇 Additional comments (8)
web-ui/src/lib/api.ts (1)
62-65:generateTasksAPI wiring looks consistentThe new
generateTasksmethod matches existing patterns (typed response, shared axios instance, auth interceptor) and aligns with the documented endpoint path.web-ui/src/types/index.ts (2)
87-120: Planning-phase WebSocket message types are consistent and backward compatibleThe new planning-related message types integrate cleanly into the existing
WebSocketMessageTypeunion and match usages inDiscoveryProgressand its tests. Existing message handlers remain unaffected.
190-199: Planning metadata fields align with event semantics
issues_count,tasks_count, andplanning_errorare optional, narrowly scoped to planning events, and are read defensively (|| 0/ fallback message) on the consumer side. This keeps the type surface clear while remaining tolerant of partial payloads.web-ui/__tests__/components/DiscoveryProgress.test.tsx (1)
18-33: API mocks extended correctly for new planning endpoints
mockGenerateTasksandmockGetPRDare wired into the existingprojectsApimock, and both are reset inbeforeEach, keeping tests isolated while matching the real API surface.web-ui/src/components/DiscoveryProgress.tsx (4)
20-27: NewonNavigateToTasksprop is cleanly integratedThe extended props interface and memoized component signature cleanly expose
onNavigateToTaskswithout breaking existing callers. Parent wiring inDashboardis straightforward, and the optional chaining (onNavigateToTasks?.()) keeps it safe when not provided.
66-73: Task generation state scaffolding is coherent and minimal
tasksGenerated,isGeneratingTasks,taskGenerationError,taskGenerationProgress,issuesCount, andtasksCountcover the distinct UI states without overlapping responsibilities. Defaults are sensible and reset points (in planning_started, planning_failed, tasks_ready) keep them consistent.
268-288:handleGenerateTaskBreakdownerror handling is robustThe handler guards against double invocations, clears prior error state, and provides informative messages on failure while leaving the WebSocket-driven success path to update UI. This aligns with how PRD generation retries are handled.
404-441: Planning WebSocket handlers correctly drive task-generation stateThe new branches for
planning_started,issues_generated,tasks_decomposed,tasks_ready, andplanning_failedare all scoped byproject_id, reset related state appropriately, and use defensive fallbacks for optional counts/error fields. This should map cleanly to the backend’s planning lifecycle.
1 participant
Summary
Implements Feature 016-3: Dynamic "Generate Task Breakdown" button in the DiscoveryProgress component.
planning_started,issues_generated,tasks_decomposed,tasks_ready,planning_failed)generateTasksAPI endpoint tolib/api.tsonNavigateToTaskscallback prop for Tasks tab navigationTest Coverage
docs/code-review/2026-01-06-task-breakdown-button-review.md)Button States
Test Plan
npm run lint)npm run type-check)Notes
The backend endpoint
/api/projects/{id}/planning/generate-tasksis not yet implemented. The frontend is ready to respond to WebSocket events when the backend sends them.Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.