feat(frontend): create a separate UI tab for monitoring tasks by eureka0928 · Pull Request #13065 · OpenHands/OpenHands

eureka0928 · 2026-02-26T11:32:41Z

Summary of PR

Adds a dedicated Task List tab in the right panel so users can monitor the agent's task list without scrolling through chat history. The tab appears conditionally — only when the agent has created a task list — and shows the latest task statuses in real time.

Changes Made:

Added "tasklist" to the ConversationTab union type
Created useTaskList hook that extracts the latest task list from TaskTrackingObservation events
Created TaskListTab component with empty state and in-progress row highlighting
Registered the tab in TAB_CONFIG with lazy loading
Added conditional tab button (before Changes tab) and context menu entry
Added COMMON$TASK_LIST and COMMON$NO_TASKS i18n keys with translations in all 14 locales
Uses CheckCircleIcon to distinguish from the Planner tab

Demo Screenshots/Videos

Implements the design from:

Change Type

Checklist

I have read and reviewed the code and I understand what the code is doing.
I have tested the code to the best of my ability and ensured it works as expected.

Fixes

Resolves #11043

Release Notes

Include this change in the Release Notes.

Added a Task List tab in the right panel that shows the agent's current task list with real-time status updates. The tab appears automatically when the agent creates a task list and provides a persistent view without needing to scroll through chat history.

eureka0928 · 2026-02-26T11:36:40Z

Hi @jpelletier1 would you review this PR?
Thank you

hieptl

Hello @eureka928,

Thank you very much for creating this pull request. Could you please add tests for the component changes included in this pull request as well? At the moment, tests have only been added for use-task-list.ts.

Thank you very much! 🙏

eureka0928 · 2026-03-02T10:00:12Z

Hi @hieptl, thanks for the review! Both items are addressed in the latest push:

Typography.Text — Replaced the <span> with Text from #/ui/typography in the empty state.
Component tests — Added 8 tests for TaskListTab in __tests__/routes/task-list-tab.test.tsx covering:
- Empty state rendering (icon + message)
- Task item rendering with titles
- Task ID display
- in_progress background highlighting
- Notes display (present/absent)
- Latest plan event selection
- Text component usage
- Semantic <main> element

Please take another look when you get a chance. Thank you! 🙏

h-openhands

Hello @eureka928,

I’m running your code, but I don’t see the Task List tab. We can refer to the video below for more information.

Screen.Recording.2026-03-03.at.23.11.36.mov

Thank you! 🙏

eureka0928 · 2026-03-05T11:37:19Z

Hi @h-openhands, thanks for testing! 🙏

The Task List tab is conditionally rendered — it only appears when the agent emits TaskTrackingObservation events with command: "plan" during a conversation. This is by design, as the tab would be empty otherwise.

To see the tab:

Start a conversation with the agent
Give it a task that triggers planning (e.g., a multi-step coding task)
The agent will emit task tracking events, and the Task List tab will appear in the right panel

The visibility logic is in conversation-tabs.tsx — the tab is added only when hasTaskList is true (i.e., there's at least one task tracking observation in the event stream).

Let me know if you have any questions!

hieptl · 2026-03-05T14:30:58Z

Hello @eureka928,

I’m currently running your code locally and tested it with the following prompt: “Write a hello world script in bash. Before doing the task, use the task tracker tool to create a task list first.” However, I wasn’t able to see the Task List tab in the interface.

For reference, I’ve included a video below that shows what I’m experiencing. It appears that my environment is still displaying the previous UI.

issue.mov

Thank you very much! 🙏

eureka0928 · 2026-03-05T15:13:43Z

Hi @hieptl
You should select this button to see the task list

hieptl · 2026-03-05T16:00:52Z

Hello @eureka928,

I found a few additional issues while running your code locally. Before going through each one in detail, it may be helpful to first refer to the image above, which shows the design provided in the GitHub issue.

Issue 1:
The padding for each item in the Task List tab appears to be larger than what is shown in the design. Please refer to the image below for a comparison.

Issue 2:
Based on the design, it seems that the ID field does not need to be displayed.

Issue 3:
According to the design, when the agent is running a task, that task should be highlighted.

Thank you very much! 🙏

eureka0928 · 2026-03-09T09:14:42Z

Use check-circle icon instead of lesson-plan icon to distinguish from the planner tab. Add background highlight for in-progress tasks.

… tests - Replace <span> with Text from #/ui/typography in empty state - Add 8 component tests for TaskListTab covering empty state, task rendering, IDs, notes, in_progress highlighting, latest event selection, and semantic markup

The hook only handled v0 events where observation is a string "task_tracking". Added support for v1 events where observation is an object with kind "TaskTrackerObservation".

- Reduce task item padding and gap to match design - Remove ID display from task items - Use double-check icon for task list tab button - Increase highlight contrast for in-progress tasks - Dim completed task text/icon for better differentiation - Add desktop-only padding increase for tab buttons

- Full-width edge-to-edge highlight for in-progress tasks - Move padding from container to individual task rows - Reduce line height to 16px for tighter text

hieptl · 2026-03-09T10:20:44Z

Hello @eureka928,

While testing the pull request locally, I noticed a potential issue. The text color and icon color on the TaskList tab do not appear to match the current UI design.

Please refer to the image below for more details.

Thank you very much! 🙏

I have verified the pull request locally, and everything appears to be working as expected. Thank you very much for your contribution!

hieptl

Hello @eureka928,

I have verified the pull request locally, and everything appears to be working as expected. Thank you very much for your contribution!

I’ve approved the pull request. When you have a chance, it would be great to add tests for the changes in conversation-tabs-context-menu.tsx and conversation-tabs.tsx to help ensure the behavior remains stable.

Thank you again! 🙏

eureka0928 · 2026-03-10T14:13:42Z

Hello @eureka928,

I have verified the pull request locally, and everything appears to be working as expected. Thank you very much for your contribution!

I’ve approved the pull request. When you have a chance, it would be great to add tests for the changes in conversation-tabs-context-menu.tsx and conversation-tabs.tsx to help ensure the behavior remains stable.

Thank you again! 🙏

Added!

eureka0928 requested review from amanape and hieptl as code owners February 26, 2026 11:32

eureka0928 force-pushed the feat/task-list-tab branch 2 times, most recently from 64eb544 to 641c723 Compare March 2, 2026 09:14

hieptl previously requested changes Mar 2, 2026

View reviewed changes

Comment thread frontend/src/routes/task-list-tab.tsx Outdated

h-openhands reviewed Mar 3, 2026

View reviewed changes

enyst mentioned this pull request Mar 3, 2026

Add right-side pane UI for feature (in addition to in-chat display) #12855

Closed

eureka0928 force-pushed the feat/task-list-tab branch from 0ec00e0 to 4c3ac57 Compare March 5, 2026 01:23

eureka0928 requested a review from hieptl March 5, 2026 14:30

eureka0928 force-pushed the feat/task-list-tab branch from d186238 to 54727fe Compare March 5, 2026 14:40

eureka0928 force-pushed the feat/task-list-tab branch 3 times, most recently from 878ae4c to edffbb4 Compare March 6, 2026 13:21

eureka0928 added 3 commits March 9, 2026 10:15

feat(frontend): add tasklist to ConversationTab union type

b8d319d

feat(frontend): add i18n keys for task list tab

0f07e9a

feat(frontend): create useTaskList hook to extract task list from events

cf25d19

eureka0928 requested a review from h-openhands March 9, 2026 09:15

eureka0928 added 6 commits March 9, 2026 10:15

feat(frontend): create task list tab component

8869d24

feat(frontend): wire up task list tab in right panel

f1c16c8

test(frontend): add unit tests for useTaskList hook

6001082

fix(frontend): match task list tab to mockup design

8bfecd8

Use check-circle icon instead of lesson-plan icon to distinguish from the planner tab. Add background highlight for in-progress tasks.

fix(frontend): support v1 event format in useTaskList hook

e7f5eec

The hook only handled v0 events where observation is a string "task_tracking". Added support for v1 events where observation is an object with kind "TaskTrackerObservation".

eureka0928 added 4 commits March 9, 2026 10:15

fix(frontend): refine task list tab highlight and spacing

fa4a81e

- Full-width edge-to-edge highlight for in-progress tasks - Move padding from container to individual task rows - Reduce line height to 16px for tighter text

test(frontend): update task tracking test to reflect ID removal

65dd6ab

fix(frontend): show scrollbar only on overflow in task list tab

a5c24d0

eureka0928 force-pushed the feat/task-list-tab branch from 9a403a4 to a5c24d0 Compare March 9, 2026 09:15

eureka0928 and others added 2 commits March 9, 2026 11:48

fix(frontend): match done task color and thicken tab icon

fec3854

Merge remote-tracking branch 'upstream/main' into feat/task-list-tab

efd6641

hieptl approved these changes Mar 10, 2026

View reviewed changes

test(frontend): add tasklist tab tests for conversation tabs components

f56c372

test(frontend): add context menu tests for conversation tabs

e94e9dd

hieptl reviewed Mar 10, 2026

View reviewed changes

Comment thread frontend/__tests__/components/features/conversation/conversation-tabs.test.tsx Outdated

eureka0928 added 2 commits March 10, 2026 16:18

refactor(frontend): move context menu tests to dedicated test file

af8d537

refactor(frontend): clean up context menu test file

6ca0713

hieptl merged commit 145f126 into OpenHands:main Mar 10, 2026
17 checks passed

Conversation

eureka0928 commented Feb 26, 2026

Summary of PR

Changes Made:

Demo Screenshots/Videos

Change Type

Checklist

Fixes

Release Notes

Uh oh!

eureka0928 commented Feb 26, 2026

Uh oh!

hieptl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

eureka0928 commented Mar 2, 2026

Uh oh!

h-openhands left a comment

Choose a reason for hiding this comment

Uh oh!

eureka0928 commented Mar 5, 2026

Uh oh!

hieptl commented Mar 5, 2026

Uh oh!

eureka0928 commented Mar 5, 2026

Uh oh!

hieptl commented Mar 5, 2026

Uh oh!

eureka0928 commented Mar 9, 2026

Uh oh!

hieptl commented Mar 9, 2026

Uh oh!

hieptl left a comment

Choose a reason for hiding this comment

Uh oh!

eureka0928 commented Mar 10, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants