UX: Add task status transition tooltips and valid action guidance

[frankbria]

Problem

TaskCard displays status badges (Backlog, Ready, In Progress, Done, Blocked, Failed, Merged) but provides no explanation of what each status means, when it transitions automatically, or which user actions are valid from each state.

Impact

Users confused about valid state transitions and what each status implies. May make invalid state changes or not understand why certain actions are unavailable.

Recommendation

1. Add hover tooltip on each status badge explaining: what this status means, how the task entered this state, what happens next
2. In TaskDetailModal, show available transitions from the current status with descriptions
3. Disable action buttons for invalid transitions (e.g., cannot mark a DONE task READY)
4. Add visual state machine hint: "Next: mark Ready to enable execution"

Acceptance Criteria

• Tooltip on every status badge with meaning and context
• TaskDetailModal shows only valid next transitions
• Invalid transition buttons are disabled with explanation
• Status transition reasons displayed when status was last changed
• Consistent tooltip across all board columns

Affected Components

web-ui/src/components/tasks/TaskCard.tsx, web-ui/src/components/tasks/TaskDetailModal.tsx

[traycerai]

Warning

Something went wrong while processing your request.

Reference ID: 548182b0-8487-4f9d-9afb-86b324adec4f

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

[coderabbitai]

🔗 Related PRs

#389 - [Phase 3] Task Board: bulk stop, reset, and state management actions [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 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!