Add auto scroll animation for the worker log#1513
Conversation
There was a problem hiding this comment.
Pull request overview
Adds automatic scrolling for the workflow worker log so the log view stays pinned to the latest tool-use entry while a task is running.
Changes:
- Track toolkit updates more granularly (including last toolkit message tail) to trigger auto-scroll.
- Auto-scroll when a task “Completion Report” becomes available, and reset “at-bottom” state when opening/switching tasks.
- Reorders/adjusts multiple Tailwind
classNamestrings in the workflow node UI.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -280,18 +280,30 @@ export function Node({ id, data }: NodeProps) { | |||
|
|
|||
| const toolkits = selectedTask?.toolkits; | |||
| const lastToolkit = toolkits?.[toolkits.length - 1]; | |||
There was a problem hiding this comment.
lastToolkit is computed as toolkits?.[toolkits.length - 1], but toolkits.length will throw when selectedTask is null (initial state) or when selectedTask.toolkits is undefined. Consider using toolkits?.at(-1) or guarding the index with (toolkits?.length ?? 0) - 1 to avoid a runtime crash during render.
| const lastToolkit = toolkits?.[toolkits.length - 1]; | |
| const lastToolkit = toolkits?.at(-1); |
| useEffect(() => { | ||
| if (!isExpanded || !toolkits?.length) return; | ||
| scrollLogToBottom(); | ||
| }, [isExpanded, toolkits?.length, toolkitChangeKey, scrollLogToBottom]); | ||
|
|
||
| // Reset scroll-to-bottom flag when switching tasks so new task always starts at bottom | ||
| // Scroll to bottom when a report appears | ||
| useEffect(() => { | ||
| if (!isExpanded || !selectedTask?.report) return; | ||
| scrollLogToBottom(); | ||
| }, [isExpanded, selectedTask?.report, scrollLogToBottom]); | ||
|
|
||
| // Reset scroll-to-bottom flag when switching tasks or when panel opens | ||
| useEffect(() => { | ||
| wasAtBottomRef.current = true; | ||
| }, [selectedTask?.id]); | ||
|
|
||
| useEffect(() => { | ||
| if (isExpanded) { | ||
| wasAtBottomRef.current = true; | ||
| } | ||
| }, [isExpanded]); |
There was a problem hiding this comment.
The new auto-scroll behavior (scroll on toolkit message updates via toolkitChangeKey, scroll when selectedTask.report appears, and the bottom-tracking via wasAtBottomRef) isn’t covered by unit tests. Since the repo has React component tests (e.g., test/unit/components/*.test.tsx), please add tests around the expected scroll behavior (scrolls when at bottom; does not scroll when user has scrolled up; scrolls when report first becomes available).
| } rounded-xl border-worker-border-default bg-worker-surface-primary flex overflow-hidden border border-solid ${ | ||
| getCurrentTask()?.activeAgent === id | ||
| ? `${agentMap[data.type]?.borderColor} z-50` | ||
| : 'z-10 border-worker-border-default' | ||
| } transition-all duration-300 ease-in-out ${ | ||
| : 'border-worker-border-default z-10' | ||
| } ease-in-out transition-all duration-300 ${ |
There was a problem hiding this comment.
PR description/checklist indicates “No frontend/UI changes”, but this PR modifies a TSX UI component and includes multiple className/layout changes in addition to the auto-scroll feature. Please update the PR checklist accordingly (and keep the screenshot/recording evidence consistent with that).
Related Issue
Closes #
Description
Add worker log auto scroll to latest tool use item when running the task.
Testing Evidence (REQUIRED)
What is the purpose of this pull request?
Contribution Guidelines Acknowledgement