[Phase 3] Task Board View - Kanban & Batch Execution

[frankbria]

Overview

Implement the Task Board View for visualizing and managing task lifecycle with batch execution controls.

Reference: docs/PHASE_3_UI_ARCHITECTURE.md Section 1.3, 3.3, 5.4

Purpose

Visualize and manage task lifecycle from backlog to completion.

User Actions

• View tasks grouped by status (BACKLOG, READY, IN_PROGRESS, DONE, BLOCKED, FAILED)
• Filter/search tasks
• Execute single task
• Start batch execution with strategy selection
• View task details
• Mark tasks as READY manually

Components

TaskBoardView
├── TaskBoardHeader
│   ├── TaskFilters (status, search bar)
│   └── BatchActions
│       ├── SelectTasksMode (checkbox selection)
│       ├── BatchStrategySelector (serial/parallel/auto)
│       └── ExecuteBatchButton
├── TaskBoardContent (Kanban columns or grouped list)
│   ├── TaskColumn (status: BACKLOG)
│   ├── TaskColumn (status: READY)
│   ├── TaskColumn (status: IN_PROGRESS)
│   ├── TaskColumn (status: BLOCKED)
│   ├── TaskColumn (status: FAILED)
│   └── TaskColumn (status: DONE)
└── TaskDetailModal

TaskCard Component:

TaskCard
├── TaskTitle
├── TaskDescriptionSnippet (truncated)
├── TaskMetadata (effort, dependencies badge)
├── TaskStatusBadge
└── TaskActions (ViewDetails, Execute, MarkReady)

API Endpoints Used

• GET /api/v2/tasks - List all tasks
• GET /api/v2/tasks/{id} - Get task details
• PATCH /api/v2/tasks/{id} - Update task status
• POST /api/v2/tasks/{id}/execute - Execute single task
• POST /api/v2/batches/run - Start batch execution

Acceptance Criteria

• Kanban-style columns grouped by status
• Task cards show title, description snippet, status badge
• Task cards show dependency indicators
• Click task to open detail modal
• Execute button on READY tasks
• Mark Ready button on BACKLOG tasks
• Search/filter by task title or status
• Checkbox selection for batch execution
• Strategy selector (serial/parallel/auto)
• Execute batch button starts batch run
• Navigate to Execution Monitor on task/batch start

Route

• /tasks - Task board
• /tasks/:id - Task detail (modal overlay)

Real-time Requirements

None - poll on navigation, auto-refresh after actions

[traycerai]

Plan

Observations

The codebase uses Next.js 14 App Router with TypeScript, shadcn/ui components, and Tailwind CSS. The backend provides v2 API endpoints at /api/v2/tasks for task management and /api/v2/tasks/execute for batch execution. Existing components like TaskList.tsx demonstrate patterns for task filtering, status badges, and card layouts. The Phase 3 UI Architecture document specifies a Kanban-style board with batch execution controls and modal overlays for task details.

Approach

The implementation follows the Phase 3 UI Architecture specification for a Kanban-style Task Board View. The approach creates a new route at /tasks with a main board component displaying task columns grouped by status (BACKLOG, READY, IN_PROGRESS, BLOCKED, FAILED, DONE). Task cards will be clickable to open detail modals, with inline actions for execution and status updates. Batch execution controls will be integrated into the header with checkbox selection, strategy selector, and execution trigger. The design reuses existing shadcn/ui components and follows established patterns from TaskList.tsx.

Implementation Steps

1. Create Type Definitions

File: file:legacy/web-ui/src/types/task.ts

Define TypeScript interfaces for Task Board data structures:

• Task interface with fields: id, title, description, status, priority, depends_on, effort (optional)
• TaskStatus enum matching backend values: BACKLOG, READY, IN_PROGRESS, DONE, BLOCKED, FAILED
• BatchStrategy type: "serial" | "parallel" | "auto"
• BatchExecutionRequest interface with task_ids, strategy, max_parallel, retry_count

2. Create API Service Functions

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

Implement API client functions using the existing authFetch helper from file:legacy/web-ui/src/lib/api-client.ts:

• getTasks(status?: TaskStatus) → GET /api/v2/tasks?status={status}
• getTask(taskId: string) → GET /api/v2/tasks/{taskId}
• updateTaskStatus(taskId: string, status: TaskStatus) → PATCH /api/v2/tasks/{taskId}
• executeTask(taskId: string) → POST /api/v2/tasks/{taskId}/start?execute=true
• executeBatch(request: BatchExecutionRequest) → POST /api/v2/tasks/execute

3. Create TaskCard Component

File: file:legacy/web-ui/src/components/tasks/TaskCard.tsx

Build a reusable task card component using existing UI primitives:

• Use Card from file:legacy/web-ui/src/components/ui/card.tsx as base
• Display task title (truncated), description snippet (2 lines max)
• Show Badge for status using variant mapping (READY=default, IN_PROGRESS=secondary, BLOCKED/FAILED=destructive)
• Display dependency count badge if depends_on.length > 0
• Include action buttons: "View Details", "Execute" (READY only), "Mark Ready" (BACKLOG only)
• Use Hugeicons: PlayCircleIcon for execute, CheckmarkCircle01Icon for mark ready
• Add hover effect with border color change
• Make entire card clickable to open detail modal

4. Create TaskColumn Component

File: file:legacy/web-ui/src/components/tasks/TaskColumn.tsx

Build Kanban column component:

• Accept props: status, tasks, onTaskClick, onExecute, onMarkReady, selectedTaskIds, onToggleSelect
• Display column header with status label and task count badge
• Render scrollable list of TaskCard components
• Add checkbox in card header when batch selection mode is active
• Use Tailwind classes for column styling: flex flex-col gap-3 bg-muted/30 rounded-lg p-4 min-h-[400px]
• Empty state message when no tasks in column

5. Create TaskDetailModal Component

File: file:legacy/web-ui/src/components/tasks/TaskDetailModal.tsx

Build modal using Dialog from file:legacy/web-ui/src/components/ui/dialog.tsx:

• Display full task details: title, complete description, status, priority, dependencies list
• Show dependency task titles (fetch from API if needed)
• Include action buttons in footer: "Execute", "Mark Ready", "Close"
• Use DialogHeader, DialogContent, DialogFooter components
• Fetch task details on open using getTask(taskId) API call
• Handle loading and error states

6. Create BatchActionsBar Component

File: file:legacy/web-ui/src/components/tasks/BatchActionsBar.tsx

Build batch execution controls:

• Toggle button to enable/disable selection mode (checkbox icon)
• Display selected task count when in selection mode
• Strategy selector using Select from file:legacy/web-ui/src/components/ui/select.tsx with options: Serial, Parallel, Auto
• Max parallel input (number input, visible only for parallel/auto)
• "Execute Batch" button (disabled when no tasks selected)
• Use Hugeicons: CheckboxIcon for selection mode, PlayIcon for execute
• Clear selection button

7. Create TaskFilters Component

File: file:legacy/web-ui/src/components/tasks/TaskFilters.tsx

Build filter controls:

• Search input using Input from file:legacy/web-ui/src/components/ui/input.tsx with debounce (300ms)
• Status filter buttons (similar to existing TaskList.tsx pattern)
• Display active filter count
• Use Hugeicons: Search01Icon for search input

8. Create Main TaskBoardView Component

File: file:legacy/web-ui/src/components/tasks/TaskBoardView.tsx

Build main board component:

• Manage state: tasks, selectedTaskIds, selectionMode, batchStrategy, maxParallel, searchQuery, statusFilter, detailModalTaskId
• Fetch tasks on mount using getTasks() API call
• Implement search filtering (client-side on title/description)
• Render TaskFilters component
• Render BatchActionsBar component
• Render grid of 6 TaskColumn components (one per status)
• Use CSS Grid: grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4
• Handle task selection toggle
• Handle execute single task (navigate to /execution after starting)
• Handle mark ready (update status to READY)
• Handle batch execution (call API, navigate to /execution)
• Render TaskDetailModal when detailModalTaskId is set
• Auto-refresh tasks after actions (re-fetch from API)

9. Create Tasks Page Route

File: file:legacy/web-ui/src/app/tasks/page.tsx

Create Next.js page component:

• Import and render TaskBoardView component
• Wrap with ProtectedRoute (following pattern from file:legacy/web-ui/src/app/page.tsx)
• Wrap with ErrorBoundary
• Add page header with title "Task Board" and description
• Use consistent layout structure with existing pages

10. Create Task Detail Route (Modal Overlay)

File: file:legacy/web-ui/src/app/tasks/[id]/page.tsx

Create intercepting route for modal overlay:

• Use Next.js parallel routes pattern with @modal folder
• Render TaskDetailModal with task ID from params
• Allow direct navigation to /tasks/{id} to show task detail in full page
• Implement back navigation to /tasks on modal close

11. Add Navigation Link

File: file:legacy/web-ui/src/components/Navigation.tsx

Update navigation component:

• Add "Tasks" link pointing to /tasks
• Use Hugeicons: TaskDaily01Icon or CheckListIcon
• Position after PRD link, before Execution link (following Phase 3 architecture)

12. Implement Navigation on Execution Start

Files: file:legacy/web-ui/src/components/tasks/TaskBoardView.tsx, file:legacy/web-ui/src/components/tasks/TaskDetailModal.tsx

Add navigation logic:

• Import useRouter from next/navigation
• After successful task execution API call, navigate to /execution route
• After successful batch execution, navigate to /execution route
• Pass run ID or batch ID as query parameter if execution monitor needs it

Visual Structure

graph TD
    A[TaskBoardView] --> B[TaskBoardHeader]
    B --> C[TaskFilters]
    B --> D[BatchActionsBar]
    A --> E[TaskBoardContent]
    E --> F1[TaskColumn: BACKLOG]
    E --> F2[TaskColumn: READY]
    E --> F3[TaskColumn: IN_PROGRESS]
    E --> F4[TaskColumn: BLOCKED]
    E --> F5[TaskColumn: FAILED]
    E --> F6[TaskColumn: DONE]
    F1 --> G[TaskCard[]]
    F2 --> G
    F3 --> G
    F4 --> G
    F5 --> G
    F6 --> G
    A --> H[TaskDetailModal]
    
    style A fill:#e1f5ff
    style E fill:#fff4e1
    style H fill:#ffe1f5

Loading

Component Hierarchy

Component	Purpose	Key Props
TaskBoardView	Main container, state management	-
TaskFilters	Search and status filtering	onSearchChange, onStatusFilter
BatchActionsBar	Batch execution controls	selectedCount, onExecute, strategy, onStrategyChange
TaskColumn	Kanban column for status group	status, tasks, selectionMode, onTaskClick
TaskCard	Individual task display	task, selected, onToggleSelect, onExecute, onMarkReady
TaskDetailModal	Task detail overlay	taskId, open, onClose, onExecute, onMarkReady

API Integration Summary

Action	Endpoint	Method	Navigation
Load tasks	/api/v2/tasks	GET	-
Get task details	/api/v2/tasks/{id}	GET	-
Mark task ready	/api/v2/tasks/{id}	PATCH	Refresh board
Execute single task	/api/v2/tasks/{id}/start?execute=true	POST	→ /execution
Execute batch	/api/v2/tasks/execute	POST	→ /execution

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase uses Next.js 14 App Router with TypeScript, shadcn/ui components, and Tailwind CSS. The backend provides v2 API endpoints at `/api/v2/tasks` for task management and `/api/v2/tasks/execute` for batch execution. Existing components like `TaskList.tsx` demonstrate patterns for task filtering, status badges, and card layouts. The Phase 3 UI Architecture document specifies a Kanban-style board with batch execution controls and modal overlays for task details.

## Approach

The implementation follows the Phase 3 UI Architecture specification for a Kanban-style Task Board View. The approach creates a new route at `/tasks` with a main board component displaying task columns grouped by status (BACKLOG, READY, IN_PROGRESS, BLOCKED, FAILED, DONE). Task cards will be clickable to open detail modals, with inline actions for execution and status updates. Batch execution controls will be integrated into the header with checkbox selection, strategy selector, and execution trigger. The design reuses existing shadcn/ui components and follows established patterns from `TaskList.tsx`.

## Implementation Steps

### 1. Create Type Definitions

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

Define TypeScript interfaces for Task Board data structures:
- `Task` interface with fields: `id`, `title`, `description`, `status`, `priority`, `depends_on`, `effort` (optional)
- `TaskStatus` enum matching backend values: `BACKLOG`, `READY`, `IN_PROGRESS`, `DONE`, `BLOCKED`, `FAILED`
- `BatchStrategy` type: `"serial" | "parallel" | "auto"`
- `BatchExecutionRequest` interface with `task_ids`, `strategy`, `max_parallel`, `retry_count`

### 2. Create API Service Functions

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

Implement API client functions using the existing `authFetch` helper from `file:legacy/web-ui/src/lib/api-client.ts`:
- `getTasks(status?: TaskStatus)` → `GET /api/v2/tasks?status={status}`
- `getTask(taskId: string)` → `GET /api/v2/tasks/{taskId}`
- `updateTaskStatus(taskId: string, status: TaskStatus)` → `PATCH /api/v2/tasks/{taskId}`
- `executeTask(taskId: string)` → `POST /api/v2/tasks/{taskId}/start?execute=true`
- `executeBatch(request: BatchExecutionRequest)` → `POST /api/v2/tasks/execute`

### 3. Create TaskCard Component

**File**: `file:legacy/web-ui/src/components/tasks/TaskCard.tsx`

Build a reusable task card component using existing UI primitives:
- Use `Card` from `file:legacy/web-ui/src/components/ui/card.tsx` as base
- Display task title (truncated), description snippet (2 lines max)
- Show `Badge` for status using variant mapping (READY=default, IN_PROGRESS=secondary, BLOCKED/FAILED=destructive)
- Display dependency count badge if `depends_on.length > 0`
- Include action buttons: "View Details", "Execute" (READY only), "Mark Ready" (BACKLOG only)
- Use Hugeicons: `PlayCircleIcon` for execute, `CheckmarkCircle01Icon` for mark ready
- Add hover effect with border color change
- Make entire card clickable to open detail modal

### 4. Create TaskColumn Component

**File**: `file:legacy/web-ui/src/components/tasks/TaskColumn.tsx`

Build Kanban column component:
- Accept props: `status`, `tasks`, `onTaskClick`, `onExecute`, `onMarkReady`, `selectedTaskIds`, `onToggleSelect`
- Display column header with status label and task count badge
- Render scrollable list of `TaskCard` components
- Add checkbox in card header when batch selection mode is active
- Use Tailwind classes for column styling: `flex flex-col gap-3 bg-muted/30 rounded-lg p-4 min-h-[400px]`
- Empty state message when no tasks in column

### 5. Create TaskDetailModal Component

**File**: `file:legacy/web-ui/src/components/tasks/TaskDetailModal.tsx`

Build modal using `Dialog` from `file:legacy/web-ui/src/components/ui/dialog.tsx`:
- Display full task details: title, complete description, status, priority, dependencies list
- Show dependency task titles (fetch from API if needed)
- Include action buttons in footer: "Execute", "Mark Ready", "Close"
- Use `DialogHeader`, `DialogContent`, `DialogFooter` components
- Fetch task details on open using `getTask(taskId)` API call
- Handle loading and error states

### 6. Create BatchActionsBar Component

**File**: `file:legacy/web-ui/src/components/tasks/BatchActionsBar.tsx`

Build batch execution controls:
- Toggle button to enable/disable selection mode (checkbox icon)
- Display selected task count when in selection mode
- Strategy selector using `Select` from `file:legacy/web-ui/src/components/ui/select.tsx` with options: Serial, Parallel, Auto
- Max parallel input (number input, visible only for parallel/auto)
- "Execute Batch" button (disabled when no tasks selected)
- Use Hugeicons: `CheckboxIcon` for selection mode, `PlayIcon` for execute
- Clear selection button

### 7. Create TaskFilters Component

**File**: `file:legacy/web-ui/src/components/tasks/TaskFilters.tsx`

Build filter controls:
- Search input using `Input` from `file:legacy/web-ui/src/components/ui/input.tsx` with debounce (300ms)
- Status filter buttons (similar to existing `TaskList.tsx` pattern)
- Display active filter count
- Use Hugeicons: `Search01Icon` for search input

### 8. Create Main TaskBoardView Component

**File**: `file:legacy/web-ui/src/components/tasks/TaskBoardView.tsx`

Build main board component:
- Manage state: `tasks`, `selectedTaskIds`, `selectionMode`, `batchStrategy`, `maxParallel`, `searchQuery`, `statusFilter`, `detailModalTaskId`
- Fetch tasks on mount using `getTasks()` API call
- Implement search filtering (client-side on title/description)
- Render `TaskFilters` component
- Render `BatchActionsBar` component
- Render grid of 6 `TaskColumn` components (one per status)
- Use CSS Grid: `grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4`
- Handle task selection toggle
- Handle execute single task (navigate to `/execution` after starting)
- Handle mark ready (update status to READY)
- Handle batch execution (call API, navigate to `/execution`)
- Render `TaskDetailModal` when `detailModalTaskId` is set
- Auto-refresh tasks after actions (re-fetch from API)

### 9. Create Tasks Page Route

**File**: `file:legacy/web-ui/src/app/tasks/page.tsx`

Create Next.js page component:
- Import and render `TaskBoardView` component
- Wrap with `ProtectedRoute` (following pattern from `file:legacy/web-ui/src/app/page.tsx`)
- Wrap with `ErrorBoundary`
- Add page header with title "Task Board" and description
- Use consistent layout structure with existing pages

### 10. Create Task Detail Route (Modal Overlay)

**File**: `file:legacy/web-ui/src/app/tasks/[id]/page.tsx`

Create intercepting route for modal overlay:
- Use Next.js parallel routes pattern with `@modal` folder
- Render `TaskDetailModal` with task ID from params
- Allow direct navigation to `/tasks/{id}` to show task detail in full page
- Implement back navigation to `/tasks` on modal close

### 11. Add Navigation Link

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

Update navigation component:
- Add "Tasks" link pointing to `/tasks`
- Use Hugeicons: `TaskDaily01Icon` or `CheckListIcon`
- Position after PRD link, before Execution link (following Phase 3 architecture)

### 12. Implement Navigation on Execution Start

**Files**: `file:legacy/web-ui/src/components/tasks/TaskBoardView.tsx`, `file:legacy/web-ui/src/components/tasks/TaskDetailModal.tsx`

Add navigation logic:
- Import `useRouter` from `next/navigation`
- After successful task execution API call, navigate to `/execution` route
- After successful batch execution, navigate to `/execution` route
- Pass run ID or batch ID as query parameter if execution monitor needs it

## Visual Structure

```mermaid
graph TD
    A[TaskBoardView] --> B[TaskBoardHeader]
    B --> C[TaskFilters]
    B --> D[BatchActionsBar]
    A --> E[TaskBoardContent]
    E --> F1[TaskColumn: BACKLOG]
    E --> F2[TaskColumn: READY]
    E --> F3[TaskColumn: IN_PROGRESS]
    E --> F4[TaskColumn: BLOCKED]
    E --> F5[TaskColumn: FAILED]
    E --> F6[TaskColumn: DONE]
    F1 --> G[TaskCard[]]
    F2 --> G
    F3 --> G
    F4 --> G
    F5 --> G
    F6 --> G
    A --> H[TaskDetailModal]
    
    style A fill:#e1f5ff
    style E fill:#fff4e1
    style H fill:#ffe1f5
```

## Component Hierarchy

| Component | Purpose | Key Props |
|-----------|---------|-----------|
| **TaskBoardView** | Main container, state management | - |
| **TaskFilters** | Search and status filtering | `onSearchChange`, `onStatusFilter` |
| **BatchActionsBar** | Batch execution controls | `selectedCount`, `onExecute`, `strategy`, `onStrategyChange` |
| **TaskColumn** | Kanban column for status group | `status`, `tasks`, `selectionMode`, `onTaskClick` |
| **TaskCard** | Individual task display | `task`, `selected`, `onToggleSelect`, `onExecute`, `onMarkReady` |
| **TaskDetailModal** | Task detail overlay | `taskId`, `open`, `onClose`, `onExecute`, `onMarkReady` |

## API Integration Summary

| Action | Endpoint | Method | Navigation |
|--------|----------|--------|------------|
| Load tasks | `/api/v2/tasks` | GET | - |
| Get task details | `/api/v2/tasks/{id}` | GET | - |
| Mark task ready | `/api/v2/tasks/{id}` | PATCH | Refresh board |
| Execute single task | `/api/v2/tasks/{id}/start?execute=true` | POST | → `/execution` |
| Execute batch | `/api/v2/tasks/execute` | POST | → `/execution` |

---

Execution Information

Branch: main
Commit: b252361

---

💡 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.

Warning

Something went wrong while processing your request.

Reference ID: d7f2bc68-463a-4a0e-9a74-a9010601c472

Please try again or contact support if the issue persists, referencing this ID.

[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]
#213 - feat(planning): Add Generate Task Breakdown button to DiscoveryProgress [merged]
#214 - feat(planning): Add TaskReview component for task approval workflow [merged]
#215 - feat(dashboard): Add phase-aware task view integration (#016-6) [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!

[frankbria]

Revise the implementation plan to not use /legacy/web-ui. All files should be under the /web-ui directory.

[frankbria]

Revised Implementation Plan — Task Board View

Full plan: docs/ISSUE_331_TASK_BOARD_PLAN.md

Key Corrections from Previous Plan

1. All file paths use web-ui/ (not legacy/web-ui/)
2. Uses existing API client pattern — extend tasksApi in web-ui/src/lib/api.ts (not separate api/tasks.ts with authFetch)
3. Correct endpoints — POST /api/v2/tasks/{id}/start?execute=true for single task, POST /api/v2/tasks/execute for batch
4. Reuses existing types — Task, TaskStatus, TaskListResponse already defined in web-ui/src/types/index.ts
5. Reuses existing Badge variants — status colors already defined in web-ui/src/components/ui/badge.tsx
6. SWR data fetching — matches existing PRD page pattern (not raw fetch)
7. Dialog for task detail — uses existing Dialog component (not parallel routes/@modal folder)
8. Enables sidebar link — changes enabled: false → true in AppSidebar.tsx line 26
9. Responsive Kanban grid — grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 (not forced 6-col at lg)

Acceptance Criteria Coverage

#	Criterion	Step
1	Kanban-style columns grouped by status	Step 6: TaskBoardContent
2	Task cards show title, description snippet, status badge	Step 4: TaskCard
3	Task cards show dependency indicators	Step 4: TaskCard
4	Click task to open detail modal	Step 7: TaskDetailModal
5	Execute button on READY tasks	Step 4: TaskCard
6	Mark Ready button on BACKLOG tasks	Step 4: TaskCard
7	Search/filter by task title or status	Step 8: TaskFilters
8	Checkbox selection for batch execution	Step 9: BatchActionsBar
9	Strategy selector (serial/parallel/auto)	Step 9: BatchActionsBar
10	Execute batch button starts batch run	Step 9: BatchActionsBar
11	Navigate to Execution Monitor on task/batch start	Step 11: page.tsx

File Structure

web-ui/src/
├── app/tasks/page.tsx                    # Task board route
├── components/tasks/
│   ├── index.ts                          # Barrel export
│   ├── TaskBoardView.tsx                 # Main container + state
│   ├── TaskBoardContent.tsx              # Kanban column grid
│   ├── TaskColumn.tsx                    # Single status column
│   ├── TaskCard.tsx                      # Individual task card
│   ├── TaskDetailModal.tsx               # Task detail dialog
│   ├── TaskFilters.tsx                   # Search + status filter
│   └── BatchActionsBar.tsx               # Batch execution controls
├── lib/api.ts                            # Extended tasksApi
└── types/index.ts                        # New batch types

Implementation Order

1. Shadcn components (select, checkbox, input) + types + API methods
2. Tasks page route + empty TaskBoardView shell → renders at /tasks
3. Enable sidebar link
4. TaskCard + TaskColumn + TaskBoardContent → Kanban board with real data
5. TaskDetailModal → click card to see details
6. TaskFilters → search and status filtering
7. BatchActionsBar → batch selection and execution
8. Wire up Execute + Mark Ready actions with navigation
9. Testing

API Integration

Action	Endpoint	Method	Post-Action
Load tasks	/api/v2/tasks	GET	—
Get task detail	/api/v2/tasks/{id}	GET	—
Mark task ready	/api/v2/tasks/{id}	PATCH {status: "READY"}	Refresh board
Execute single	/api/v2/tasks/{id}/start?execute=true	POST	→ /execution
Execute batch	/api/v2/tasks/execute	POST {task_ids, strategy}	→ /execution