Unify history item UI with TaskItem and TaskItemHeader #4151
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Introduces `TaskItem.tsx` and `TaskItemHeader.tsx` to centralize and standardize the rendering of history entries. `TaskItem` handles the overall structure for "compact" (Preview) and "full" (HistoryView) variants. `TaskItemHeader` consolidates all metadata (timestamp, tokens, cost, cache, file size) into a single, consistent line above the task content, enhancing visual clarity and reducing UI clutter. This refactor significantly simplifies `HistoryPreview.tsx` and `HistoryView.tsx`. Approximately 314 lines of previous rendering logic were removed from these components and replaced by 242 lines in the new, focused, and reusable `TaskItem` and `TaskItemHeader` components, resulting in a net reduction and improved maintainability. Most importantly, rendering logic happens in one place. Key UI Changes: - Metadata (timestamp, tokens, cost, cache, file size) now displayed inline on a single header row in both variants. - Removed explicit "Tokens:" and "API Cost:" labels for a cleaner look. - Action buttons (Copy, Export, Delete) in the full view are now aligned with the metadata header. - File size is displayed in the header for the "full" variant only. - Workspace information is no longer displayed in the "compact" preview. Component Changes: - Created `webview-ui/src/components/history/TaskItem.tsx` (125 lines) - Created `webview-ui/src/components/history/TaskItemHeader.tsx` (117 lines) - Modified `webview-ui/src/components/history/HistoryPreview.tsx` (-65 lines, +3 lines) - Modified `webview-ui/src/components/history/HistoryView.tsx` (-249 lines, +3 lines) - Uses `HistoryItem` type for standardized data handling. Fixes: RooCodeInc#4018 Signed-off-by: Eric Wheeler <[email protected]>
Fixes test failures that occurred after the major refactoring that introduced the shared TaskItem component. The original implementation was correct but the tests needed updates to match the new component structure. - Add data-testid attributes to TaskItemHeader for reliable test selection - Update TaskItem.test.tsx assertions to use new test IDs for tokens/cache - Fix Checkbox import path in TaskItem.tsx (ui/checkbox vs ui) - Add missing mocks for lucide-react and Checkbox in HistoryView.test.tsx - Update HistoryView test assertions to use correct selectors - Ensure all 19 history component tests pass successfully The refactoring reduced code duplication by ~250+ lines while maintaining functionality, and these test fixes ensure the quality gates remain intact. Signed-off-by: Eric Wheeler <[email protected]>
Create a new TaskItemFooter component that displays token and cost information with different styles for compact and full views. Move the CopyButton and ExportButton from header to footer in full view. Adjust file size display positioning in the header for better visual alignment. Signed-off-by: Eric Wheeler <[email protected]>
Update data-testid attributes in HistoryView and TaskItem tests to match the actual implementation in TaskItemFooter component. The tests were looking for generic "tokens-in" and "tokens-out" attributes, but the implementation uses variant-specific attributes like "tokens-in-footer-full". Also added mocks for CopyButton and ExportButton components to resolve "Element type is invalid" errors during test rendering. Signed-off-by: Eric Wheeler <[email protected]>
dosubot
bot
added
size:XL
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| overflowWrap: "anywhere", | ||
| }} | ||
| data-testid={isCompact ? undefined : "task-content"} | ||
| {...(isCompact ? {} : { dangerouslySetInnerHTML: { __html: item.task } })}> |
Contributor
There was a problem hiding this comment.
Ensure that item.task is sanitized before using dangerouslySetInnerHTML to prevent potential XSS vulnerabilities.
Suggested change
| {...(isCompact ? {} : { dangerouslySetInnerHTML: { __html: item.task } })}> | |
| {...(isCompact ? {} : { dangerouslySetInnerHTML: { __html: sanitizeHtml(item.task) } })}> |
Collaborator
|
|
mrubens
approved these changes
Jun 2, 2025
github-project-automation
bot
moved this from PR [Needs Review]
to Done
in Roo Code Roadmap
Contributor
|
Thank you! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Introduces
TaskItem.tsxandTaskItemHeader.tsxto centralize andstandardize the rendering of history entries.
TaskItemhandles theoverall structure for "compact" (Preview) and "full" (HistoryView)
variants.
TaskItemHeaderconsolidates all metadata (timestamp, tokens,cost, cache, file size) into a single, consistent line above the task
content, enhancing visual clarity and reducing UI clutter.
This refactor significantly simplifies
HistoryPreview.tsxandHistoryView.tsx. Approximately 314 lines of previous rendering logicwere removed from these components and replaced by 242 lines in the new,
focused, and reusable
TaskItemandTaskItemHeadercomponents,resulting in a net reduction and improved maintainability.
Most importantly, rendering logic happens in one place.
Key UI Changes:
inline on a single header row in both variants.
aligned with the metadata header.
Component Changes:
webview-ui/src/components/history/TaskItem.tsx(125 lines)webview-ui/src/components/history/TaskItemHeader.tsx(117 lines)webview-ui/src/components/history/HistoryPreview.tsx(-65 lines, +3 lines)webview-ui/src/components/history/HistoryView.tsx(-249 lines, +3 lines)HistoryItemtype for standardized data handling.Fixes: #4018
Comes from: #4019
Signed-off-by: Eric Wheeler [email protected]<!--
Thank you for contributing to Roo Code!
Before submitting your PR, please ensure:
-->
Related GitHub Issue
Closes: #
Description
Test Procedure
Type of Change
srcor test files.Pre-Submission Checklist
npm run lint).console.log) has been removed.npm test).mainbranch.npm run changesetif this PR includes user-facing changes or dependency updates.Screenshots / Videos
Documentation Updates
Additional Notes
Get in Touch