0ad6be7e6e
* refactor: Unify history item UI with TaskItem and TaskItemHeader 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: #4018 Signed-off-by: Eric Wheeler <roo-code@z.ewheeler.org> * test: fix TaskItem and HistoryView test failures after refactor 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 <roo-code@z.ewheeler.org> * ui: move token and cost info from header to dedicated footer 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 <roo-code@z.ewheeler.org> * test: update history component tests to match implementation 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 <roo-code@z.ewheeler.org> * Move cache information from header to footer to be consistent with cost/token data * Fix ESLint warnings: remove unused imports and variables --------- Signed-off-by: Eric Wheeler <roo-code@z.ewheeler.org> Co-authored-by: Eric Wheeler <roo-code@z.ewheeler.org> |
||
|---|---|---|
| .changeset | ||
| .github | ||
| .husky | ||
| .roo | ||
| .vscode | ||
| apps | ||
| evals | ||
| locales | ||
| packages | ||
| scripts | ||
| src | ||
| webview-ui | ||
| .dockerignore | ||
| .env.sample | ||
| .git-blame-ignore-revs | ||
| .gitattributes | ||
| .gitconfig | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierrc.json | ||
| .rooignore | ||
| .roomodes | ||
| .tool-versions | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| ellipsis.yaml | ||
| knip.json | ||
| LICENSE | ||
| MONOREPO.md | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| PRIVACY.md | ||
| README.md | ||
| renovate.json | ||
| turbo.json | ||
English • Català • Deutsch • Español • Français • हिन्दी • Italiano • Nederlands • Русский
日本語 • 한국어 • Polski • Português (BR) • Türkçe • Tiếng Việt • 简体中文 • 繁體中文
Roo Code (prev. Roo Cline)
Connect with developers, contribute ideas, and stay ahead with the latest AI-powered coding tools.
Roo Code is an AI-powered autonomous coding agent that lives in your editor. It can:
- Communicate in natural language
- Read and write files directly in your workspace
- Run terminal commands
- Automate browser actions
- Integrate with any OpenAI-compatible or custom API/model
- Adapt its “personality” and capabilities through Custom Modes
Whether you’re seeking a flexible coding partner, a system architect, or specialized roles like a QA engineer or product manager, Roo Code can help you build software more efficiently.
Check out the CHANGELOG for detailed updates and fixes.
🎉 Roo Code 3.19 Released
Roo Code 3.19 brings intelligent context management improvements and enhanced user experience!
- Intelligent Context Condensing Enabled by Default - Context condensing is now enabled by default with configurable settings for when automatic condensing happens.
- Manual Condensing Button - New button in the task header allows you to manually trigger context condensing at any time.
- Enhanced Condensing Settings - Fine-tune when and how automatic condensing occurs through the Context Settings panel.
What Can Roo Code Do?
- 🚀 Generate Code from natural language descriptions
- 🔧 Refactor & Debug existing code
- 📝 Write & Update documentation
- 🤔 Answer Questions about your codebase
- 🔄 Automate repetitive tasks
- 🏗️ Create new files and projects
Quick Start
Key Features
Multiple Modes
Roo Code adapts to your needs with specialized modes:
- Code Mode: For general-purpose coding tasks
- Architect Mode: For planning and technical leadership
- Ask Mode: For answering questions and providing information
- Debug Mode: For systematic problem diagnosis
- Custom Modes: Create unlimited specialized personas for security auditing, performance optimization, documentation, or any other task
Smart Tools
Roo Code comes with powerful tools that can:
- Read and write files in your project
- Execute commands in your VS Code terminal
- Control a web browser
- Use external tools via MCP (Model Context Protocol)
MCP extends Roo Code's capabilities by allowing you to add unlimited custom tools. Integrate with external APIs, connect to databases, or create specialized development tools - MCP provides the framework to expand Roo Code's functionality to meet your specific needs.
Customization
Make Roo Code work your way with:
- Custom Instructions for personalized behavior
- Custom Modes for specialized tasks
- Local Models for offline use
- Auto-Approval Settings for faster workflows
Resources
Documentation
Community
- Discord: Join our Discord server for real-time help and discussions
- Reddit: Visit our subreddit to share experiences and tips
- GitHub: Report issues or request features
Local Setup & Development
- Clone the repo:
git clone https://github.com/RooCodeInc/Roo-Code.git
- Install dependencies:
pnpm install
- Run the extension:
Press F5 (or Run → Start Debugging) in VSCode to open a new window with Roo Code running.
Changes to the webview will appear immediately. Changes to the core extension will require a restart of the extension host.
Alternatively you can build a .vsix and install it directly in VSCode:
pnpm build
A .vsix file will appear in the bin/ directory which can be installed with:
code --install-extension bin/roo-cline-<version>.vsix
We use changesets for versioning and publishing. Check our CHANGELOG.md for release notes.
Disclaimer
Please note that Roo Code, Inc does not make any representations or warranties regarding any code, models, or other tools provided or made available in connection with Roo Code, any associated third-party tools, or any resulting outputs. You assume all risks associated with the use of any such tools or outputs; such tools are provided on an "AS IS" and "AS AVAILABLE" basis. Such risks may include, without limitation, intellectual property infringement, cyber vulnerabilities or attacks, bias, inaccuracies, errors, defects, viruses, downtime, property loss or damage, and/or personal injury. You are solely responsible for your use of any such tools or outputs (including, without limitation, the legality, appropriateness, and results thereof).
Contributing
We love community contributions! Get started by reading our CONTRIBUTING.md.
Contributors
Thanks to all our contributors who have helped make Roo Code better!
License
Apache 2.0 © 2025 Roo Code, Inc.
Enjoy Roo Code! Whether you keep it on a short leash or let it roam autonomously, we can’t wait to see what you build. If you have questions or feature ideas, drop by our Reddit community or Discord. Happy coding!