feat: show live action status on Kanban task cards #791
Description
Description
Display the current agent action (e.g., "Reading spec.md", "Editing file.ts") directly on the Kanban task card, so users don't have to open the task detail/logs to see what's happening.
Current Behavior
- Task cards show phase (Coding, QA) and progress bar
- To see detailed activity, users must click the card and open logs
Proposed Behavior
When a task is running, show a mini status line below the progress indicator:
- Truncated action message (e.g., "Reading ...spec.md")
- Color-coded by tool type (same colors as logs)
- Subtle animation (pulse) to indicate activity
Implementation Approach
Option A: Simple text display
Just show task.executionProgress?.message with generic styling.
Option B: Smart color coding (Recommended)
Parse the message to detect tool type and apply colors:
| Message starts with | Tool | Color |
|---|---|---|
| "Reading" | Read | text-blue-500 bg-blue-500/10 |
| "Searching files" | Glob | text-amber-500 bg-amber-500/10 |
| "Searching code" | Grep | text-green-500 bg-green-500/10 |
| "Editing" | Edit | text-purple-500 bg-purple-500/10 |
| "Writing" | Write | text-cyan-500 bg-cyan-500/10 |
| "Running" | Bash | text-orange-500 bg-orange-500/10 |
| Other | - | text-muted-foreground |
UI Mockup
┌─────────────────────────────────────┐
│ Task Title │
│ Description... │
│ │
│ [Coding] [Feature] │
│ │
│ ████████████░░░░░░░░ 60% │
│ ┌─────────────────────────────────┐ │
│ │ 📖 Reading ...ation/spec.md │ │ ← NEW: Mini status with tool color
│ └─────────────────────────────────┘ │
│ │
│ 2 min ago [Stop] │
└─────────────────────────────────────┘
Files to Modify
apps/frontend/src/renderer/components/TaskCard.tsx- Add status display- Potentially extract tool color logic to shared utility
Related
- Colors defined in
TaskLogs.tsx→getToolInfo() - Data available via
task.executionProgress?.message