ux: Improvements to to-do lists and task headers #9096

brunobergher · 2025-11-07T11:49:50Z

This is strictly UX-focused, with the aim of reducing visual noise and making to-do lists more useful. Changes include:

Redesigned to-do list component, with fewer elements and a strong emphasis on the task at hand, now part of the task header (so you don't need to close it in order to continue following Roo's work)
Because it has a more fixed place, I changed the to-do entries in the chat messages to only show the changed to-dos (usually the one just completed and the one Roo started on)
While integrating it to the task header, I made it visually lighter ("task" -> icon, chevron down only shows on hover, etc)
Deprioritized context-related info in the expanded state of the TaskHeader, moving the buttons closer to the task itself
And seceral of other visual tweaks at places

No functionality change (other than the shorter to-do-related messages in the chat.

Test Procedure

Start a task where the agent comes up with a to-do list plan
Watch to-dos fly by, interact open/close the task header

Screenshots / Videos

There many states, but these screenshots encapsulate the vast majority of what changes.

Important

Improves UX by redesigning to-do lists and task headers, integrating them for better focus and reduced visual noise, with various visual tweaks across the UI.

UX Improvements:
- Redesigned to-do list component, integrated into task header for better focus and reduced visual noise.
- Task header now shows only changed to-dos in chat messages, emphasizing current tasks.
- Visual tweaks include lighter task header, hover effects, and deprioritized context info.
Components:
- Added TodoChangeDisplay in ChatRow.tsx to show changes in to-dos.
- Introduced LucideIconButton in LucideIconButton.tsx for consistent icon button styling.
- Updated TaskHeader.tsx to integrate to-do list and adjust task info layout.
Miscellaneous:
- Updated translations in multiple language files for new to-do list messages.
- Adjusted CSS in index.css for mention highlights and other UI elements.

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

… inline

roomote · 2025-11-07T11:50:28Z

Rooviewer See task on Roo Cloud

Review completed. Latest commit 1334429 removes a commented-out line referencing an unused parameter. All previously identified issues remain resolved. No new issues found.

Fix invalid CSS class text-shrink-0 in TodoListDisplay.tsx (should be shrink-0)
Fix invalid Tailwind classes -mt-1.25 and max-w-50 in TaskHeader.tsx (use valid Tailwind utilities)
Remove unused CSS animation gradient-text in index.css
Remove unused prop isParentExpanded from TodoListDisplay component

Previous reviews

431ab2e: Review #1

d474aa0: Review #2

17205cb: Review #3

7d2e8d3: Review #4

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

webview-ui/src/components/chat/TodoListDisplay.tsx

webview-ui/src/components/chat/TaskHeader.tsx

webview-ui/src/index.css

webview-ui/src/components/chat/TodoListDisplay.tsx

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

…tRow.tsx and TaskHeader.tsx

…o bb/visuals-todos

roomote · 2025-11-07T12:42:00Z

Rooviewer See task on Roo Cloud

Review completed. All previously identified issues have been successfully resolved:

Fixed invalid CSS class text-shrink-0 in TodoListDisplay.tsx (now shrink-0)
Fixed invalid Tailwind classes -mt-1.25 and max-w-50 in TaskHeader.tsx (now -mt-1.5 and max-w-md)
Removed unused CSS animation gradient-text from index.css
Removed unused prop isParentExpanded from TodoListDisplay component

No new issues found. The PR is ready to merge.

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

webview-ui/src/components/chat/ChatRow.tsx

ellipsis-dev · 2025-11-07T21:37:51Z

webview-ui/src/components/chat/TodoChangeDisplay.tsx

+
+			<div className="pl-1 pr-1 pt-1 font-light leading-normal">
+				{todoGroups.map((group, index) => (
+					<TodoList key={index} {...group} />


Consider using a stable unique key (e.g. group.keyPrefix) instead of the array index when mapping over todoGroups. This helps ensure consistent rendering across re-renders.

Suggested change

<TodoList key={index} {...group} />

<TodoList key={group.keyPrefix} {...group} />

ellipsis-dev · 2025-11-07T21:37:51Z

webview-ui/src/components/chat/TodoChangeDisplay.tsx

+			{
+				todos: startedTodos,
+				status: "in_progress",
+				keyPrefix: "started",


There is an inconsistent naming for the keyPrefix. In the initial state branch the in-progress group uses keyPrefix 'in-progress', but in the update branch it uses 'started'. If both refer to in-progress tasks, consider aligning the naming or adding a comment to clarify the distinction.

brunobergher added 4 commits November 6, 2025 18:10

Redesigned header todo list

56e99c4

Some tweaks

c410eb5

More compact todolist display *in* tasks, with just the changes shown…

4836169

… inline

Refreshed task header

7d2e8d3

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Nov 7, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Nov 7, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Nov 7, 2025

roomote bot reviewed Nov 7, 2025

View reviewed changes

webview-ui/src/components/chat/TodoListDisplay.tsx Outdated Show resolved Hide resolved

roomote bot reviewed Nov 7, 2025

View reviewed changes

webview-ui/src/components/chat/TaskHeader.tsx Outdated Show resolved Hide resolved

roomote bot reviewed Nov 7, 2025

View reviewed changes

webview-ui/src/index.css Outdated Show resolved Hide resolved

roomote bot reviewed Nov 7, 2025

View reviewed changes

webview-ui/src/components/chat/TodoListDisplay.tsx Outdated Show resolved Hide resolved

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Nov 7, 2025

brunobergher and others added 6 commits November 7, 2025 12:21

Update webview-ui/src/components/chat/TodoListDisplay.tsx

659d21d

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

Update webview-ui/src/components/chat/TaskHeader.tsx

9efec2e

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>

Removes unused animation

c89318f

Code Review

1aadff4

Merge branch 'main' into bb/visuals-todos - Resolved conflicts in Cha…

502c470

…tRow.tsx and TaskHeader.tsx

Merge branch 'bb/visuals-todos' of github.com:RooCodeInc/Roo-Code int…

17205cb

…o bb/visuals-todos

brunobergher marked this pull request as ready for review November 7, 2025 12:41

brunobergher requested review from cte, jr and mrubens as code owners November 7, 2025 12:41

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. UI/UX UI/UX related or focused labels Nov 7, 2025

roomote bot approved these changes Nov 7, 2025

View reviewed changes

i18n

d474aa0

roomote bot approved these changes Nov 7, 2025

View reviewed changes

mrubens reviewed Nov 7, 2025

View reviewed changes

webview-ui/src/components/chat/ChatRow.tsx Outdated Show resolved Hide resolved

Update logic to show initial todo list in the chat

431ab2e

ellipsis-dev bot reviewed Nov 7, 2025

View reviewed changes

roomote bot approved these changes Nov 7, 2025

View reviewed changes

Update webview-ui/src/components/chat/ChatRow.tsx

1334429

roomote bot approved these changes Nov 7, 2025

View reviewed changes

mrubens approved these changes Nov 7, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Nov 7, 2025

mrubens merged commit fff5cf8 into main Nov 7, 2025
13 checks passed

mrubens deleted the bb/visuals-todos branch November 7, 2025 22:26

github-project-automation bot moved this from New to Done in Roo Code Roadmap Nov 7, 2025

github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Nov 7, 2025

mini2s added a commit to zgsm-ai/costrict that referenced this pull request Nov 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ux: Improvements to to-do lists and task headers #9096

ux: Improvements to to-do lists and task headers #9096

Uh oh!

brunobergher commented Nov 7, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot commented Nov 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roomote bot commented Nov 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

ellipsis-dev bot Nov 7, 2025

Uh oh!

ellipsis-dev bot Nov 7, 2025

Uh oh!

Uh oh!

	<TodoList key={index} {...group} />
	<TodoList key={group.keyPrefix} {...group} />

ux: Improvements to to-do lists and task headers #9096

ux: Improvements to to-do lists and task headers #9096

Uh oh!

Conversation

brunobergher commented Nov 7, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Procedure

Screenshots / Videos

Uh oh!

roomote bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

roomote bot commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ellipsis-dev bot Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brunobergher commented Nov 7, 2025 •

edited by ellipsis-dev bot

Loading

roomote bot commented Nov 7, 2025 •

edited

Loading

roomote bot commented Nov 7, 2025 •

edited

Loading