[Phase 3] Task Board: bulk stop, reset, and state management actions

[frankbria]

Problem

The Task Board currently only supports executing a single READY task. Users need broader task management actions — especially for recovering from failures and managing running tasks during iterative development. Additionally, there's no way to navigate to the Execution Monitor for a task that's already running.

Requested Features

1. Navigate to Execution Monitor from In-Progress Tasks

• Clicking an IN_PROGRESS task card should offer a "View Execution" action
• Takes the user directly to /execution/{taskId} to watch live progress
• Could be the primary click action or a prominent button on the card

2. Stop In-Progress Tasks

• Single: Stop button on IN_PROGRESS task cards (calls POST /tasks/{id}/stop)
• Bulk: Select multiple IN_PROGRESS tasks and stop them all
• Confirmation dialog before bulk stop

3. Reset Failed Tasks

• Single: Reset button on FAILED task cards (transitions FAILED → READY)
• Bulk: Select multiple FAILED tasks and reset them all
• Optionally show last error summary before reset

4. Bulk Action Infrastructure

• Checkbox selection on task cards (shift-click for range select)
• Floating action bar appears when tasks are selected
• Available actions depend on selected task statuses:
  • All READY → "Execute All"
  • All IN_PROGRESS → "Stop All"
  • All FAILED → "Reset All"
  • Mixed → show applicable actions with counts
• Select-all within a status column

Backend Support

The API endpoints already exist:

• POST /api/v2/tasks/{id}/stop — stops a running task
• PATCH /api/v2/tasks/{id} with {"status": "READY"} — resets a failed task
• POST /api/v2/tasks/execute — batch execution

A new bulk-stop endpoint may be needed, or the frontend can fan out individual calls.

Acceptance Criteria

• Clicking an IN_PROGRESS task navigates to the Execution Monitor
• IN_PROGRESS tasks show a Stop action in the task card
• FAILED tasks show a Reset to Ready action in the task card
• Users can select multiple tasks via checkboxes
• Bulk action bar appears with context-appropriate actions
• Confirmation dialogs for destructive bulk actions (stop, reset)
• Optimistic UI updates with rollback on failure
• All actions work through the existing v2 API

[traycerai]

Plan

Observations

The Task Board already has a solid foundation with selection mode, checkboxes, and batch execution infrastructure. The file:web-ui/src/components/tasks/BatchActionsBar.tsx component exists but only supports batch execution. Backend endpoints for stopping tasks (POST /api/v2/tasks/{id}/stop) and updating task status (PATCH /api/v2/tasks/{id}) are already implemented in file:codeframe/ui/routers/tasks_v2.py. The UI uses @hugeicons/react for icons and Radix UI for dialogs. The current file:web-ui/src/components/tasks/TaskCard.tsx only shows actions for READY and BACKLOG tasks, missing Stop and Reset buttons for IN_PROGRESS and FAILED tasks.

Approach

Extend the existing Task Board infrastructure to support stop and reset actions at both single-task and bulk levels. Add action buttons to TaskCard for IN_PROGRESS (Stop) and FAILED (Reset) tasks. Enhance BatchActionsBar to detect selected task statuses and show context-appropriate actions (Stop All, Reset All, Execute All). Implement confirmation dialogs for destructive bulk operations. Add API client methods in file:web-ui/src/lib/api.ts for stop operations. Use optimistic UI updates with SWR's mutate function for immediate feedback and automatic rollback on errors. This approach leverages existing patterns and minimizes new infrastructure.

Implementation Steps

1. Extend API Client Layer

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

Add a stopTask method to the tasksApi object:

• Method signature: stopTask(workspacePath: string, taskId: string): Promise<void>
• Calls POST /api/v2/tasks/{taskId}/stop with workspace_path query parameter
• Returns the stop response

The updateStatus method already exists and can be used for resetting FAILED tasks to READY status.

---

2. Add Single-Task Actions to TaskCard

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

Add two new action buttons in the action buttons section (after line 101):

For IN_PROGRESS tasks:

• Add a Stop button with Cancel01Icon from @hugeicons/react
• Button should call onStop(task.id) handler (new prop)
• Use variant="ghost" and destructive styling
• Include e.stopPropagation() to prevent card click

For FAILED tasks:

• Add a Reset button with RefreshIcon from @hugeicons/react
• Button should call onReset(task.id) handler (new prop)
• Use variant="ghost" styling
• Include e.stopPropagation() to prevent card click

Update the TaskCardProps interface to include:

• onStop: (taskId: string) => void
• onReset: (taskId: string) => void

---

3. Wire Handlers Through Component Hierarchy

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

Add onStop and onReset props to TaskColumnProps interface and pass them down to TaskCard components in the map function.

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

Add onStop and onReset props to TaskBoardContentProps interface and pass them to each TaskColumn component.

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

Implement two new handler functions:

handleStop callback:

• Accepts taskId: string
• Calls tasksApi.stopTask(workspacePath, taskId)
• Uses optimistic update: immediately call mutate() to refresh task list
• Handle errors with setActionError()
• Clear detail modal if open for this task

handleReset callback:

• Accepts taskId: string
• Calls tasksApi.updateStatus(workspacePath, taskId, 'READY')
• Uses optimistic update: immediately call mutate() to refresh task list
• Handle errors with setActionError()

Pass these handlers to TaskBoardContent component.

---

4. Enhance BatchActionsBar for Multiple Action Types

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

Transform the component to support multiple bulk actions based on selected task statuses:

Update Props Interface:

• Add selectedTasks: Task[] to analyze selected task statuses
• Add onStopBatch: () => void handler
• Add onResetBatch: () => void handler
• Keep existing onExecuteBatch handler

Compute Action Availability:
Create helper functions or useMemo to determine:

• canExecute: all selected tasks are READY
• canStop: all selected tasks are IN_PROGRESS
• canReset: all selected tasks are FAILED
• hasMixed: selected tasks have different statuses

Update UI Layout:
When selectionMode is true and tasks are selected:

• Show selected count
• If canExecute: show "Execute All" button with PlayCircleIcon
• If canStop: show "Stop All" button with Cancel01Icon (destructive variant)
• If canReset: show "Reset All" button with RefreshIcon
• If hasMixed: show all applicable actions with counts (e.g., "Stop 3", "Reset 2")
• Remove strategy selector when not executing
• Keep Clear selection button

---

5. Implement Bulk Action Handlers in TaskBoardView

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

Add three new state variables:

• isStoppingBatch: boolean
• isResettingBatch: boolean
• confirmAction: { type: 'stop' | 'reset' | null, count: number } | null

handleStopBatch callback:

• Set confirmAction to show confirmation dialog
• On confirm: set isStoppingBatch = true
• Fan out individual tasksApi.stopTask() calls for each selected IN_PROGRESS task
• Use Promise.allSettled() to handle partial failures
• Collect errors and show summary if any fail
• Call mutate() to refresh task list
• Clear selection and exit selection mode on success
• Set isStoppingBatch = false in finally block

handleResetBatch callback:

• Set confirmAction to show confirmation dialog
• On confirm: set isResettingBatch = true
• Fan out individual tasksApi.updateStatus(workspacePath, taskId, 'READY') calls
• Use Promise.allSettled() to handle partial failures
• Collect errors and show summary if any fail
• Call mutate() to refresh task list
• Clear selection and exit selection mode on success
• Set isResettingBatch = false in finally block

Update handleExecuteBatch to also show confirmation dialog for consistency.

Pass selectedTasks (filtered from filteredTasks by selectedTaskIds), onStopBatch, and onResetBatch to BatchActionsBar.

---

6. Create Confirmation Dialog Component

New File: file:web-ui/src/components/tasks/BulkActionConfirmDialog.tsx

Create a reusable confirmation dialog component:

Props:

• open: boolean
• onOpenChange: (open: boolean) => void
• actionType: 'execute' | 'stop' | 'reset'
• taskCount: number
• onConfirm: () => void
• isLoading: boolean

UI Structure:

• Use Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter from file:web-ui/src/components/ui/dialog.tsx
• Title varies by action type: "Execute Tasks", "Stop Tasks", "Reset Tasks"
• Description warns about the action and shows count
• For stop: "This will stop {count} running task(s). They will transition to READY status."
• For reset: "This will reset {count} failed task(s) to READY status."
• Footer with Cancel and Confirm buttons
• Confirm button shows loading spinner when isLoading is true
• Use destructive variant for Stop action

---

7. Integrate Confirmation Dialog in TaskBoardView

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

Import and render BulkActionConfirmDialog component at the bottom of the component (after TaskDetailModal).

Control dialog state with confirmAction state variable:

• open={confirmAction !== null}
• actionType={confirmAction?.type}
• taskCount={confirmAction?.count}
• onConfirm calls the appropriate handler based on type
• onOpenChange clears confirmAction when closed

---

8. Optional: Show Error Summary Before Reset

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

Enhance the dialog for reset actions:

Additional Props:

• failedTasks?: Task[] (optional, only for reset action)

UI Enhancement:
If actionType === 'reset' and failedTasks is provided:

• Show a collapsible section "View Errors" in the dialog
• Display last error message for each failed task (if available from task metadata)
• Use Accordion or Collapsible component from UI library
• Keep it concise (max 2-3 lines per task)

This requires checking if task error information is available in the Task type. If not available, skip this enhancement.

---

9. Add Optimistic Updates with Rollback

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

For all action handlers (stop, reset, execute):

Optimistic Update Pattern:

• Before API call: use SWR's mutate with optimistic data
• Create updated task list with expected status changes
• Pass optimistic data to mutate(optimisticData, false)
• Make API call
• On success: call mutate() to revalidate from server
• On error: call mutate() to revert to server state and show error

Example for handleStop:

const optimisticData = {
  ...data,
  tasks: data.tasks.map(t => 
    t.id === taskId ? { ...t, status: 'READY' } : t
  )
}
mutate(optimisticData, false)
try {
  await tasksApi.stopTask(workspacePath, taskId)
  await mutate()
} catch (err) {
  await mutate() // rollback
  setActionError(...)
}

---

10. Add Visual Feedback and Loading States

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

Add loading states for individual actions:

• Accept optional isStoppingTask?: boolean and isResettingTask?: boolean props
• Show Loading03Icon with spin animation when action is in progress
• Disable button during loading

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

Update button states:

• Disable "Stop All" button when isStoppingBatch is true
• Disable "Reset All" button when isResettingBatch is true
• Show Loading03Icon instead of action icon during loading
• Keep existing pattern from Execute button

---

11. Handle Mixed Selections

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

When selected tasks have mixed statuses:

Group by Status:

• Count tasks by status: readyCount, inProgressCount, failedCount
• Show multiple action buttons if counts > 0
• Label buttons with counts: "Execute 5", "Stop 2", "Reset 3"

Action Filtering:

• "Execute All" only executes READY tasks from selection
• "Stop All" only stops IN_PROGRESS tasks from selection
• "Reset All" only resets FAILED tasks from selection

Update handlers in TaskBoardView to filter selected tasks by status before making API calls.

---

12. Add Column-Level Select All

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

Add a "Select All" checkbox in the column header when selectionMode is true:

UI Addition:

• Add checkbox next to the task count badge in column header
• Checkbox is checked if all tasks in column are selected
• Checkbox is indeterminate if some tasks are selected
• Clicking toggles selection for all tasks in the column

New Props:

• onSelectAll: (taskIds: string[]) => void
• onDeselectAll: (taskIds: string[]) => void

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

Implement handlers:

• handleSelectAll: adds all provided task IDs to selection
• handleDeselectAll: removes all provided task IDs from selection

Pass these handlers through TaskBoardContent to TaskColumn.

---

13. Add Shift-Click Range Selection

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

Implement shift-click range selection:

State Management:

• Track lastSelectedIndex in TaskColumn component
• On checkbox click, check if shift key is pressed
• If shift pressed and lastSelectedIndex exists, select all tasks between indices
• Update lastSelectedIndex on each selection

Implementation:

• Modify checkbox onCheckedChange handler
• Add onKeyDown or check event.shiftKey in click handler
• Call onSelectRange(startId, endId) for range selections

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

Implement handleSelectRange:

• Accepts start and end task IDs
• Finds all tasks between them in the filtered list
• Adds all task IDs in range to selection

---

Sequence Diagram

sequenceDiagram
    participant User
    participant TaskCard
    participant TaskBoardView
    participant API
    participant Backend
    
    Note over User,Backend: Single Task Stop Flow
    User->>TaskCard: Click Stop button
    TaskCard->>TaskBoardView: onStop(taskId)
    TaskBoardView->>TaskBoardView: Optimistic update
    TaskBoardView->>API: stopTask(taskId)
    API->>Backend: POST /tasks/{id}/stop
    Backend-->>API: Success
    API-->>TaskBoardView: Success
    TaskBoardView->>TaskBoardView: Revalidate data
    
    Note over User,Backend: Bulk Reset Flow
    User->>TaskBoardView: Select multiple FAILED tasks
    User->>BatchActionsBar: Click "Reset All"
    BatchActionsBar->>TaskBoardView: onResetBatch()
    TaskBoardView->>TaskBoardView: Show confirmation dialog
    User->>TaskBoardView: Confirm action
    TaskBoardView->>API: updateStatus() for each task
    API->>Backend: PATCH /tasks/{id} (parallel)
    Backend-->>API: Success responses
    API-->>TaskBoardView: All settled
    TaskBoardView->>TaskBoardView: Revalidate & clear selection

Loading

---

Testing Considerations

While unit tests are not explicitly requested, consider manual testing scenarios:

1. Single Actions: Stop IN_PROGRESS task, Reset FAILED task
2. Bulk Actions: Select multiple tasks of same status, perform bulk action
3. Mixed Selection: Select tasks with different statuses, verify correct actions shown
4. Error Handling: Simulate API failures, verify rollback and error messages
5. Optimistic Updates: Verify immediate UI feedback before API response
6. Confirmation Dialogs: Test cancel and confirm flows
7. Column Select All: Select/deselect all tasks in a column
8. Shift-Click: Test range selection with shift key
9. Loading States: Verify spinners and disabled states during operations
10. Edge Cases: Empty selections, single task selections, all tasks selected

Import In IDE

🤖 Prompt for AI Agents

## Observations

The Task Board already has a solid foundation with selection mode, checkboxes, and batch execution infrastructure. The `file:web-ui/src/components/tasks/BatchActionsBar.tsx` component exists but only supports batch execution. Backend endpoints for stopping tasks (`POST /api/v2/tasks/{id}/stop`) and updating task status (`PATCH /api/v2/tasks/{id}`) are already implemented in `file:codeframe/ui/routers/tasks_v2.py`. The UI uses `@hugeicons/react` for icons and Radix UI for dialogs. The current `file:web-ui/src/components/tasks/TaskCard.tsx` only shows actions for READY and BACKLOG tasks, missing Stop and Reset buttons for IN_PROGRESS and FAILED tasks.

## Approach

Extend the existing Task Board infrastructure to support stop and reset actions at both single-task and bulk levels. Add action buttons to TaskCard for IN_PROGRESS (Stop) and FAILED (Reset) tasks. Enhance BatchActionsBar to detect selected task statuses and show context-appropriate actions (Stop All, Reset All, Execute All). Implement confirmation dialogs for destructive bulk operations. Add API client methods in `file:web-ui/src/lib/api.ts` for stop operations. Use optimistic UI updates with SWR's mutate function for immediate feedback and automatic rollback on errors. This approach leverages existing patterns and minimizes new infrastructure.

## Implementation Steps

### 1. Extend API Client Layer

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

Add a `stopTask` method to the `tasksApi` object:
- Method signature: `stopTask(workspacePath: string, taskId: string): Promise<void>`
- Calls `POST /api/v2/tasks/{taskId}/stop` with workspace_path query parameter
- Returns the stop response

The `updateStatus` method already exists and can be used for resetting FAILED tasks to READY status.

---

### 2. Add Single-Task Actions to TaskCard

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

Add two new action buttons in the action buttons section (after line 101):

**For IN_PROGRESS tasks:**
- Add a Stop button with `Cancel01Icon` from `@hugeicons/react`
- Button should call `onStop(task.id)` handler (new prop)
- Use `variant="ghost"` and destructive styling
- Include `e.stopPropagation()` to prevent card click

**For FAILED tasks:**
- Add a Reset button with `RefreshIcon` from `@hugeicons/react`
- Button should call `onReset(task.id)` handler (new prop)
- Use `variant="ghost"` styling
- Include `e.stopPropagation()` to prevent card click

Update the `TaskCardProps` interface to include:
- `onStop: (taskId: string) => void`
- `onReset: (taskId: string) => void`

---

### 3. Wire Handlers Through Component Hierarchy

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

Add `onStop` and `onReset` props to `TaskColumnProps` interface and pass them down to `TaskCard` components in the map function.

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

Add `onStop` and `onReset` props to `TaskBoardContentProps` interface and pass them to each `TaskColumn` component.

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

Implement two new handler functions:

**`handleStop` callback:**
- Accepts `taskId: string`
- Calls `tasksApi.stopTask(workspacePath, taskId)`
- Uses optimistic update: immediately call `mutate()` to refresh task list
- Handle errors with `setActionError()`
- Clear detail modal if open for this task

**`handleReset` callback:**
- Accepts `taskId: string`
- Calls `tasksApi.updateStatus(workspacePath, taskId, 'READY')`
- Uses optimistic update: immediately call `mutate()` to refresh task list
- Handle errors with `setActionError()`

Pass these handlers to `TaskBoardContent` component.

---

### 4. Enhance BatchActionsBar for Multiple Action Types

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

Transform the component to support multiple bulk actions based on selected task statuses:

**Update Props Interface:**
- Add `selectedTasks: Task[]` to analyze selected task statuses
- Add `onStopBatch: () => void` handler
- Add `onResetBatch: () => void` handler
- Keep existing `onExecuteBatch` handler

**Compute Action Availability:**
Create helper functions or useMemo to determine:
- `canExecute`: all selected tasks are READY
- `canStop`: all selected tasks are IN_PROGRESS
- `canReset`: all selected tasks are FAILED
- `hasMixed`: selected tasks have different statuses

**Update UI Layout:**
When `selectionMode` is true and tasks are selected:
- Show selected count
- If `canExecute`: show "Execute All" button with `PlayCircleIcon`
- If `canStop`: show "Stop All" button with `Cancel01Icon` (destructive variant)
- If `canReset`: show "Reset All" button with `RefreshIcon`
- If `hasMixed`: show all applicable actions with counts (e.g., "Stop 3", "Reset 2")
- Remove strategy selector when not executing
- Keep Clear selection button

---

### 5. Implement Bulk Action Handlers in TaskBoardView

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

Add three new state variables:
- `isStoppingBatch: boolean`
- `isResettingBatch: boolean`
- `confirmAction: { type: 'stop' | 'reset' | null, count: number } | null`

**`handleStopBatch` callback:**
- Set `confirmAction` to show confirmation dialog
- On confirm: set `isStoppingBatch = true`
- Fan out individual `tasksApi.stopTask()` calls for each selected IN_PROGRESS task
- Use `Promise.allSettled()` to handle partial failures
- Collect errors and show summary if any fail
- Call `mutate()` to refresh task list
- Clear selection and exit selection mode on success
- Set `isStoppingBatch = false` in finally block

**`handleResetBatch` callback:**
- Set `confirmAction` to show confirmation dialog
- On confirm: set `isResettingBatch = true`
- Fan out individual `tasksApi.updateStatus(workspacePath, taskId, 'READY')` calls
- Use `Promise.allSettled()` to handle partial failures
- Collect errors and show summary if any fail
- Call `mutate()` to refresh task list
- Clear selection and exit selection mode on success
- Set `isResettingBatch = false` in finally block

Update `handleExecuteBatch` to also show confirmation dialog for consistency.

Pass `selectedTasks` (filtered from `filteredTasks` by `selectedTaskIds`), `onStopBatch`, and `onResetBatch` to `BatchActionsBar`.

---

### 6. Create Confirmation Dialog Component

**New File: `file:web-ui/src/components/tasks/BulkActionConfirmDialog.tsx`**

Create a reusable confirmation dialog component:

**Props:**
- `open: boolean`
- `onOpenChange: (open: boolean) => void`
- `actionType: 'execute' | 'stop' | 'reset'`
- `taskCount: number`
- `onConfirm: () => void`
- `isLoading: boolean`

**UI Structure:**
- Use `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter` from `file:web-ui/src/components/ui/dialog.tsx`
- Title varies by action type: "Execute Tasks", "Stop Tasks", "Reset Tasks"
- Description warns about the action and shows count
- For stop: "This will stop {count} running task(s). They will transition to READY status."
- For reset: "This will reset {count} failed task(s) to READY status."
- Footer with Cancel and Confirm buttons
- Confirm button shows loading spinner when `isLoading` is true
- Use destructive variant for Stop action

---

### 7. Integrate Confirmation Dialog in TaskBoardView

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

Import and render `BulkActionConfirmDialog` component at the bottom of the component (after `TaskDetailModal`).

Control dialog state with `confirmAction` state variable:
- `open={confirmAction !== null}`
- `actionType={confirmAction?.type}`
- `taskCount={confirmAction?.count}`
- `onConfirm` calls the appropriate handler based on type
- `onOpenChange` clears `confirmAction` when closed

---

### 8. Optional: Show Error Summary Before Reset

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

Enhance the dialog for reset actions:

**Additional Props:**
- `failedTasks?: Task[]` (optional, only for reset action)

**UI Enhancement:**
If `actionType === 'reset'` and `failedTasks` is provided:
- Show a collapsible section "View Errors" in the dialog
- Display last error message for each failed task (if available from task metadata)
- Use `Accordion` or `Collapsible` component from UI library
- Keep it concise (max 2-3 lines per task)

This requires checking if task error information is available in the Task type. If not available, skip this enhancement.

---

### 9. Add Optimistic Updates with Rollback

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

For all action handlers (stop, reset, execute):

**Optimistic Update Pattern:**
- Before API call: use SWR's `mutate` with optimistic data
- Create updated task list with expected status changes
- Pass optimistic data to `mutate(optimisticData, false)`
- Make API call
- On success: call `mutate()` to revalidate from server
- On error: call `mutate()` to revert to server state and show error

**Example for handleStop:**
```
const optimisticData = {
  ...data,
  tasks: data.tasks.map(t => 
    t.id === taskId ? { ...t, status: 'READY' } : t
  )
}
mutate(optimisticData, false)
try {
  await tasksApi.stopTask(workspacePath, taskId)
  await mutate()
} catch (err) {
  await mutate() // rollback
  setActionError(...)
}
```

---

### 10. Add Visual Feedback and Loading States

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

Add loading states for individual actions:
- Accept optional `isStoppingTask?: boolean` and `isResettingTask?: boolean` props
- Show `Loading03Icon` with spin animation when action is in progress
- Disable button during loading

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

Update button states:
- Disable "Stop All" button when `isStoppingBatch` is true
- Disable "Reset All" button when `isResettingBatch` is true
- Show `Loading03Icon` instead of action icon during loading
- Keep existing pattern from Execute button

---

### 11. Handle Mixed Selections

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

When selected tasks have mixed statuses:

**Group by Status:**
- Count tasks by status: `readyCount`, `inProgressCount`, `failedCount`
- Show multiple action buttons if counts > 0
- Label buttons with counts: "Execute 5", "Stop 2", "Reset 3"

**Action Filtering:**
- "Execute All" only executes READY tasks from selection
- "Stop All" only stops IN_PROGRESS tasks from selection
- "Reset All" only resets FAILED tasks from selection

Update handlers in `TaskBoardView` to filter selected tasks by status before making API calls.

---

### 12. Add Column-Level Select All

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

Add a "Select All" checkbox in the column header when `selectionMode` is true:

**UI Addition:**
- Add checkbox next to the task count badge in column header
- Checkbox is checked if all tasks in column are selected
- Checkbox is indeterminate if some tasks are selected
- Clicking toggles selection for all tasks in the column

**New Props:**
- `onSelectAll: (taskIds: string[]) => void`
- `onDeselectAll: (taskIds: string[]) => void`

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

Implement handlers:
- `handleSelectAll`: adds all provided task IDs to selection
- `handleDeselectAll`: removes all provided task IDs from selection

Pass these handlers through `TaskBoardContent` to `TaskColumn`.

---

### 13. Add Shift-Click Range Selection

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

Implement shift-click range selection:

**State Management:**
- Track `lastSelectedIndex` in TaskColumn component
- On checkbox click, check if shift key is pressed
- If shift pressed and `lastSelectedIndex` exists, select all tasks between indices
- Update `lastSelectedIndex` on each selection

**Implementation:**
- Modify checkbox `onCheckedChange` handler
- Add `onKeyDown` or check `event.shiftKey` in click handler
- Call `onSelectRange(startId, endId)` for range selections

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

Implement `handleSelectRange`:
- Accepts start and end task IDs
- Finds all tasks between them in the filtered list
- Adds all task IDs in range to selection

---

## Sequence Diagram

```mermaid
sequenceDiagram
    participant User
    participant TaskCard
    participant TaskBoardView
    participant API
    participant Backend
    
    Note over User,Backend: Single Task Stop Flow
    User->>TaskCard: Click Stop button
    TaskCard->>TaskBoardView: onStop(taskId)
    TaskBoardView->>TaskBoardView: Optimistic update
    TaskBoardView->>API: stopTask(taskId)
    API->>Backend: POST /tasks/{id}/stop
    Backend-->>API: Success
    API-->>TaskBoardView: Success
    TaskBoardView->>TaskBoardView: Revalidate data
    
    Note over User,Backend: Bulk Reset Flow
    User->>TaskBoardView: Select multiple FAILED tasks
    User->>BatchActionsBar: Click "Reset All"
    BatchActionsBar->>TaskBoardView: onResetBatch()
    TaskBoardView->>TaskBoardView: Show confirmation dialog
    User->>TaskBoardView: Confirm action
    TaskBoardView->>API: updateStatus() for each task
    API->>Backend: PATCH /tasks/{id} (parallel)
    Backend-->>API: Success responses
    API-->>TaskBoardView: All settled
    TaskBoardView->>TaskBoardView: Revalidate & clear selection
```

---

## Testing Considerations

While unit tests are not explicitly requested, consider manual testing scenarios:

1. **Single Actions**: Stop IN_PROGRESS task, Reset FAILED task
2. **Bulk Actions**: Select multiple tasks of same status, perform bulk action
3. **Mixed Selection**: Select tasks with different statuses, verify correct actions shown
4. **Error Handling**: Simulate API failures, verify rollback and error messages
5. **Optimistic Updates**: Verify immediate UI feedback before API response
6. **Confirmation Dialogs**: Test cancel and confirm flows
7. **Column Select All**: Select/deselect all tasks in a column
8. **Shift-Click**: Test range selection with shift key
9. **Loading States**: Verify spinners and disabled states during operations
10. **Edge Cases**: Empty selections, single task selections, all tasks selected

---

Execution Information

Branch: main
Commit: 02ce2fc

---

💡 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: 80e7a3c6-8aaa-4f47-8731-615a66553046

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

#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]
#250 - fix(tasks): add Assign Tasks button for stuck pending tasks [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!