[ENHANCEMENT] Batch UI updates for Task Todo List to prevent jittering

[chiangzi]

Problem (one or two sentences)

When Roo Code updates the task checklist, it appears to update each item sequentially rather than in a single batch. This causes the UI to jitter or "jump" multiple times (e.g., if there are 10 items, the UI flickers 10 times), which leads to a poor and distracting user experience.

Context (who is affected and when)

This affects any user working on complex tasks with multiple checklist items. It is most visible when the agent is initializing a long list of tasks or marking multiple tasks as completed in a short period.

Desired behavior (conceptual, not technical)

The task list should update smoothly in one go. Instead of seeing the UI layout shift for every single item update, the changes should be batched so that the entire list updates in a single, stable render.

Constraints / preferences (optional)

The update should remain responsive, but visual stability (preventing layout shifts) should be prioritized during list modifications.

Request checklist

• I've searched existing Issues and Discussions for duplicates
• This describes a specific problem with clear context and impact

Roo Code Task Links (optional)

No response

Acceptance criteria (optional)

Given a task list with 10+ items.
When the agent updates the status or content of these items.
Then the UI should only perform a single visual update or use a transition that prevents layout jittering.

Proposed approach (optional)

Implement a batching mechanism or a debounced render for the task list component. Instead of triggering a UI refresh for every Task object change, wait for the current operation sequence to complete before committing the state change to the view.

Trade-offs / risks (optional)

No response

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Root Cause Analysis

The jittering occurs because during streaming, UpdateTodoListTool.handlePartial() sends frequent updates to the UI via task.ask("tool", approvalMsg, block.partial). Each partial update triggers:

1. A re-computation of latestTodos in ChatView.tsx via useMemo()
2. A re-render of the TodoListDisplay component
3. Layout recalculation for each intermediate state of the todo list as it streams in

Proposed Solution

I propose implementing debounced todo rendering in the TodoListDisplay component to batch rapid updates into a single visual update:

Changes to webview-ui/src/components/chat/TodoListDisplay.tsx:

1. Add a debounced state hook that delays rendering updates during rapid changes:

   • Use a 100-150ms debounce window to batch multiple incoming updates
   • Only the final state within the debounce window will trigger a re-render

2. Add CSS transitions for smooth height changes:

   • Apply transition: max-height 150ms ease-out to prevent abrupt layout shifts
   • Use will-change: contents hint for better paint performance

3. Preserve stable keys for list items:

   • Ensure todo items use stable IDs as keys to minimize DOM mutations during updates

Additional consideration for TaskHeader.tsx:

• Apply the same debouncing logic where TodoListDisplay is rendered

This approach will:

• Reduce visual jitter during streaming by batching multiple updates
• Maintain responsiveness - the final state will appear within ~150ms of completion
• Avoid blocking UI interactions during the debounce window
• Keep the implementation simple and localized to the display component

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.