ux: Improve subtask visibility and navigation in history and chat views

[brunobergher]

Motivation

Subtasks (created via newTask tool) were not well-represented in the UI, making it difficult for users to:

• See the parent-child relationship between tasks
• Navigate between parent and child tasks
• Understand aggregated costs when subtasks are involved

Key Changes

Screenshots

Home

Task Header

Messages

History

History View

• Grouped task display: Parent tasks now show collapsible subtask lists via new TaskGroupItem, SubtaskCollapsibleRow, and SubtaskRow components
• useGroupedTasks hook: Transforms flat task lists into parent-child grouped structure, with flat mode preserved for search
• In search mode, subtasks are tagged with a visual indicator

Chat View

• Back navigation: TaskHeader now shows a "Back to parent task" button for subtasks
• Subtask links: ChatRow displays "Go to subtask" links on newTask tool messages and subtask_result messages
• Token progress: Replaced text with circular progress indicator; token details now use a table layout

Visual Polish

• Lighter styling throughout the history components
• StandardTooltip delay increased to 600ms for less intrusive tooltips
• Added Table UI component for consistent table layouts

i18n

• Added translations for all new subtask-related strings across all 17 locales

---

Important

Enhances subtask visibility and navigation in history and chat views with new UI components, hooks, and i18n updates.

• History View:
  • Introduces TaskGroupItem, SubtaskCollapsibleRow, and SubtaskRow components for collapsible subtask lists.
  • Adds useGroupedTasks hook to transform flat task lists into parent-child structures.
  • Subtasks tagged with visual indicators in search mode.
• Chat View:
  • TaskHeader now includes a "Back to parent task" button for subtasks.
  • ChatRow displays "Go to subtask" links for newTask and subtask_result messages.
  • Replaces text with circular progress indicator for token progress.
• Visual Polish:
  • Lighter styling for history components.
  • StandardTooltip delay increased to 600ms.
  • Adds Table UI component for table layouts.
• i18n:
  • Updates translations for new subtask-related strings across 17 locales.
• Misc:
  • Enhances deleteTaskWithId in ClineProvider.ts to handle cascading subtask deletions.

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

[roomote]

Rooviewer   See task on Roo Cloud

PR Review: Approved ✅

This PR implements excellent improvements to subtask visibility and navigation across history and chat views.

Highlights

• Clean Architecture: New useGroupedTasks hook cleanly separates grouping logic from UI
• Comprehensive Tests: All 90 tests pass covering grouping, expand/collapse, search mode, and cascade delete
• Cascade Delete: Properly handles recursive subtask deletion in ClineProvider.ts
• UI/UX: Circular progress indicator, back-to-parent navigation, and collapsible subtask rows
• i18n: All strings translated across 17 locales

Latest Update (d9c827f)

✅ StandardTooltip default delay updated to 600ms, aligning code with PR description for less intrusive tooltips.

Minor Observations (Non-blocking)

1. Token progress SVG could be extracted to a reusable component (works correctly as-is)

Status: Approved and ready for merge once draft status is removed.

Previous reviews

• 5d4b258: Review #1
• 5d4b258: Review #2
• c943647: Review #3

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

[roomote]

PR Review Summary

This PR implements excellent improvements to subtask visibility and navigation across history and chat views. The implementation is well-structured, thoroughly tested, and follows existing patterns in the codebase.

Highlights

✅ Clean Architecture: The new useGroupedTasks hook cleanly separates the grouping logic from the UI components, making it reusable and testable.

✅ Comprehensive Tests: All 90 new/modified tests pass, covering the core functionality including:

• Task grouping logic with parent-child relationships
• Expand/collapse behavior preservation
• Search mode flat list with subtask indicators
• Cascade delete with subtask count warnings
• Back-to-parent navigation

✅ Cascade Delete: The deleteTaskWithId function in ClineProvider.ts properly handles recursive subtask deletion, collecting all child IDs before batch deletion.

✅ UI/UX Improvements:

• Circular progress indicator for token usage is a nice visual upgrade
• Back-to-parent navigation improves the subtask experience
• Subtask collapsible rows maintain a clean hierarchy view

✅ i18n: All new strings are properly translated across all 17 locales.

Minor Observations (Non-blocking)

1. Token Progress Indicator: The inline SVG calculation in TaskHeader.tsx (lines 271-303) could potentially be extracted to a reusable component for cleaner code, though the current implementation works correctly.

2. StandardTooltip Delay: The PR description mentions "delay increased to 600ms" but the default in code remains 300ms with a new configurable delay prop - this is actually better as it provides flexibility while maintaining backward compatibility.

Verified

• All test suites pass (7 files, 90 tests)
• Code follows project conventions and Tailwind CSS usage
• Type safety maintained throughout

Approving this PR - it's ready for merge once the draft status is removed.

[brunobergher]

@roomote implement these improvements:
Minor Observations (Non-blocking)

Token Progress Indicator: The inline SVG calculation in TaskHeader.tsx (lines 271-303) could potentially be extracted to a reusable component for cleaner code, though the current implementation works correctly.

StandardTooltip Delay: The PR description mentions "delay increased to 600ms" but the default in code remains 300ms with a new configurable delay prop - this is actually better as it provides flexibility while maintaining backward compatibility.

[roomote]

Rooviewer   Follow along on Roo Cloud

Reviewing your PR now. I'll share feedback in a few minutes!