feat: move task details to top activity bar (#5652)

[roomote-bot]

Description

Fixes #5652

This PR addresses the UX issue where task details in the expandable pane take up UI space and sometimes don't show the actual task content. The solution moves task details to a top activity bar while keeping only context length and todo list in the current pane.

Changes Made

• Created new TaskActivityBar component that displays:

  • Task text with proper formatting
  • Token metrics (input/output tokens)
  • Cache information (reads/writes)
  • Cost information
  • Close button functionality

• Simplified TaskHeader component to only show:

  • Context window progress bar
  • Todo list display
  • Condense context button

• Updated ChatView component to integrate both components:

  • TaskActivityBar positioned at the top
  • TaskHeader positioned below with simplified interface

Testing

• All existing tests pass
• TypeScript compilation successful
• Build process completes without errors
• Linting passes with no warnings
• Manual testing completed:
  • Task details properly displayed in top activity bar
  • Context window progress and todo list remain in expandable pane
  • All functionality preserved (close button, condense context, etc.)

Verification of Acceptance Criteria

• Task details moved to top activity bar: Task text, tokens, cache info, and cost are now displayed in a dedicated TaskActivityBar component at the top
• Context length and todo list remain in current pane: The TaskHeader now only shows context window progress and todo list as requested
• UI space optimization: The expandable pane no longer contains redundant task information, reducing UI clutter
• Functionality preserved: All existing features (close button, condense context, token display) continue to work as expected

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for new component logic
• No breaking changes introduced
• TypeScript types properly defined
• Component interfaces updated appropriately
• Test files updated to match new component structure

Screenshots/Demo

The changes improve the UI layout by:

1. Moving task details to a dedicated top activity bar for better visibility
2. Simplifying the expandable pane to focus on context progress and todos
3. Maintaining all existing functionality while reducing UI space usage

---

Important

Introduces TaskActivityBar for task details and simplifies TaskHeader in ChatView for improved UI clarity.

• UI Components:
  • Added TaskActivityBar component to display task details (text, tokens, cache, cost) at the top.
  • Simplified TaskHeader to show only context progress and todo list.
• Integration:
  • Updated ChatView.tsx to integrate TaskActivityBar and TaskHeader.
• Testing:
  • Updated TaskHeader.spec.tsx to test new TaskHeader behavior, including button functionality and disabled state.

^{This description was created by for c783804. You can customize this summary. It will automatically update as commits are pushed.}

[delve-auditor]

✅ No security or compliance issues detected. Reviewed everything up to c783804.

Security Overview

• 🔎 Scanned files: 4 changed file(s)

Detected Code Changes

Change Type	Relevant files
Refactor	► ChatView.tsx     Split task metrics into new TaskActivityBar component ► TaskActivityBar.tsx     Add new component for task metrics display ► TaskHeader.tsx     Remove metrics display and simplify to core task functions ► TaskHeader.spec.tsx     Update tests to reflect component changes

Reply to this PR with @delve-auditor followed by a description of what change you want and we'll auto-submit a change to this PR to implement it.