feat: add task coordination dashboard for multi-agent delegation visibility

[roomote-v0]

Related GitHub Issue

Closes: #12329

Description

This PR attempts to address Issue #12329 by adding a Task Delegation Dashboard section inside the existing Roo Code webview panel. The dashboard provides visual oversight of multi-agent coordination during delegation workflows.

Key implementation details:

• useTaskTree hook (webview-ui/src/components/chat/task-dashboard/useTaskTree.ts): Builds a tree data structure from the existing taskHistory state, filtering to the current delegation session using rootTaskId. Handles circular references, missing children, and session isolation.

• TaskDashboard component (webview-ui/src/components/chat/task-dashboard/TaskDashboard.tsx): Renders a collapsible tree view below the TaskHeader showing:

  • Parent/child delegation relationships as a nested tree
  • Mode name + status badge (Active/Delegated/Completed) per task node
  • Active task highlighting with a visual left-border indicator
  • Truncated task descriptions with full-text tooltips
  • Click-to-navigate to any task using the existing showTaskWithId message

• Integration: Added to ChatView.tsx between the TaskHeader and CheckpointWarning. The dashboard only renders when the current task is part of a delegation hierarchy (2+ tasks sharing a rootTaskId), so it has zero impact on simple single-mode workflows.

• Design choices: Uses existing VSCode theme CSS variables for colors, Tailwind CSS for styling, and leverages the existing getAllModes() utility for mode name resolution including custom modes.

Test Procedure

• 16 unit tests added across two test files:
  • useTaskTree.spec.ts (9 tests): Covers tree building logic including simple trees, deep nesting, multiple children, circular references, session isolation, and missing children.
  • TaskDashboard.spec.tsx (7 tests): Covers rendering, mode names, status badges, click-to-navigate, collapse/expand, and active task highlighting.
• All tests pass: cd webview-ui && npx vitest run src/components/chat/task-dashboard/
• TypeScript compilation passes: cd webview-ui && npx tsc --noEmit
• ESLint passes with zero warnings

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes.
• Documentation Impact: No documentation updates are required for this initial iteration.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Documentation Updates

• No documentation updates are required for this initial iteration. Follow-up iterations (real-time progress, quick mode switch, collapse/filter, toggle) may warrant documentation.

Additional Notes

This is the first iteration as scoped in the issue discussion. Future iterations can add:

• Real-time progress indicators
• Quick-switch to mode or view mode rules from the panel
• Collapse/filter controls
• Global toggle to show/hide the panel

Feedback and guidance are welcome.

Interactively review PR in Roo Code Cloud