Release/v4.200.0

[code-crusher]

No description provided.

[matter-ai-bot]

Context

This pull request introduces a significant enhancement to the AI-generated code review workflow within the VS Code extension. The primary goal is to transition from a less intuitive comment thread-based review system to a more integrated and user-friendly inline review experience, leveraging VS Code's CodeLens feature and a dedicated webview component. Additionally, it includes a comprehensive UI styling update across various components to ensure a consistent and modern aesthetic.

Implementation

The core implementation involves a major refactoring of the FileEditReviewController to replace the old comment thread UI with a new FileEditReviewCodeLensProvider. This provider dynamically injects 'Accept', 'Reject', 'Next', and 'Accept All' actions directly into the editor as CodeLenses, making the review process more contextual. New VS Code commands (axon-code.fileEdit.accept, axon-code.fileEdit.reject, axon-code.fileEdit.acceptAll, axon-code.fileEdit.reviewNext) were registered to handle these actions. The seeNewChanges function was updated to utilize this new inline review flow instead of opening a traditional diff view.

On the webview side, a new AcceptRejectButtons React component was introduced. This component fetches and displays a list of changed files for a given commit range, allowing users to 'Accept all' or 'Reject all' changes directly from the chat UI. Communication between the webview and the extension is facilitated by new getCommitChanges and fileEditReviewAcceptAll message types. Rejecting changes now triggers a checkpointRestore to revert the codebase to the state before the AI's modifications.

Furthermore, a broad styling update was applied to various UI components (Dialog, DropdownMenu, Popover, Select, Button, Modal, CTA sections) across both web-evals and web-roo-code applications. This involved standardizing borders, rounded corners, and color variables, particularly introducing --color-matterai-border and --color-matterai-blue for a unified visual language. The BottomApiConfig component was also enhanced to automatically refresh profile data after new AI assistant responses, ensuring up-to-date usage information.

Screenshots

before	after

How to Test

1. Trigger AI Code Generation: Initiate an AI code generation task that results in file modifications.
2. Observe Inline Review: Verify that the generated changes now appear with 'Accept', 'Reject', 'Next', and 'Accept All' CodeLenses directly above the modified code in the VS Code editor.
3. Test CodeLens Actions:
   • Click 'Accept' on a change: Ensure the change is kept and the CodeLens disappears for that section.
   • Click 'Reject' on a change: Ensure the original content is restored and the CodeLens disappears.
   • Click 'Next': Verify navigation to the next pending change.
   • Click 'Accept All': Confirm all pending changes are accepted and CodeLenses are cleared.
4. Test Webview Review Buttons:
   • After AI code generation, check the chat text area for the new 'Accept all' / 'Reject all' buttons.
   • Click the header to expand/collapse the file list.
   • Click on a file in the list: Verify it opens the file in the editor.
   • Click 'Accept all' in the webview: Confirm all changes are accepted and the buttons disappear.
   • Alternatively, click 'Reject all' in the webview: Confirm the codebase reverts to the state before the AI changes and the buttons disappear.
5. Verify UI Styling: Check various UI components (dialogs, dropdowns, buttons, popovers) across the web-evals and web-roo-code applications to ensure the new border and rounded corner styles are consistently applied.
6. Profile Data Refresh: After an AI assistant response (e.g., a completion result), observe if the profile data (e.g., usage percentage) in BottomApiConfig refreshes automatically.

Get in Touch

Summary By MatterAI

🔄 What Changed

This PR significantly overhauls the AI-generated code review experience in the VS Code extension, moving from a comment-thread based system to an inline CodeLens and webview-driven approach. It introduces new commands for accepting/rejecting individual or all file edits and a dedicated webview component to visualize and manage these changes. Additionally, a consistent design refresh has been applied to various UI components across the application, standardizing borders and rounded corners. The extension now also automatically refreshes user profile data after AI assistant responses.

🔍 Impact of the Change

This update dramatically improves the user experience for reviewing AI-generated code, offering more intuitive and integrated control directly within the editor. The new webview component provides a clear overview of changes, enhancing transparency and decision-making. The widespread UI styling updates ensure a cohesive and modern look and feel across the platform, contributing to a polished user interface. Automated profile data refreshes keep users informed of their usage in real-time.

📁 Total Files Changed

File	ChangeLog
Dialog UI apps/web-evals/src/components/ui/dialog.tsx	Updated Tailwind CSS classes for consistent border and rounded-xl styling.
Dropdown UI apps/web-evals/src/components/ui/dropdown-menu.tsx	Modified Tailwind CSS for dropdown content, adding border and rounded-xl styles.
Popover UI apps/web-evals/src/components/ui/popover.tsx	Applied consistent border and rounded-xl styling to popover content.
Select UI apps/web-evals/src/components/ui/select.tsx	Updated Tailwind CSS for select content, ensuring consistent border and rounded-xl styles.
Cloud CTA apps/web-roo-code/src/app/cloud/page.tsx	Refined CTA section styling with new border and gradient classes.
Enterprise Page apps/web-roo-code/src/app/enterprise/page.tsx	Updated styling for CTA and feature cards with new border and shadow classes.
Pricing Page apps/web-roo-code/src/app/pricing/page.tsx	Adjusted styling for the free extension notice and CTA section with new border and gradient classes.
Button UI apps/web-roo-code/src/components/ui/button.tsx	Standardized button styling with rounded-xl and border classes.
Modal UI apps/web-roo-code/src/components/ui/modal.tsx	Updated modal content styling with consistent border and rounded-xl classes.
See New Changes src/core/checkpoints/kilocode/seeNewChanges.ts	Replaced old diff view logic with new inline file edit review controller integration.
Webview Handler src/core/webview/webviewMessageHandler.ts	Added new message handlers for fetching commit changes and accepting all file edits.
File Review Controller src/integrations/editor/FileEditReviewController.ts	Major refactor to implement CodeLens-based inline file review, replacing comment threads.
Package JSON src/package.json	Version bump to 4.200.0 and registered new commands for file edit review actions.
Webview Messages src/shared/WebviewMessage.ts	Defined new message types and payloads for commit changes and file edit review actions.
Chat Row webview-ui/src/components/chat/ChatRow.tsx	Removed old SeeNewChangesButtons and related logic, streamlining chat display.
Chat Text Area webview-ui/src/components/chat/ChatTextArea.tsx	Integrated new AcceptRejectButtons component and updated input border styling.
Slash Menu webview-ui/src/components/chat/SlashCommandMenu.tsx	Updated styling for the slash command menu with new border and rounded-xl classes.
Accept Reject Buttons webview-ui/src/components/chat/kilocode/AcceptRejectButtons.tsx	New component to display file changes from a commit range with 'Accept all'/'Reject all' actions.
See Changes Buttons webview-ui/src/components/chat/kilocode/SeeNewChangesButtons.tsx	Removed old component for displaying 'See New Changes' buttons.
Common Modal webview-ui/src/components/common/Modal.tsx	Updated modal overlay styling with new border and rounded-xl classes.
Task Item Footer webview-ui/src/components/history/TaskItemFooter.tsx	Added ExportButton and StandardTooltip imports, removed FavoriteButton comment.
Bottom API Config webview-ui/src/components/kilocode/BottomApiConfig.tsx	Added logic to refresh profile data after new AI assistant responses.
Kilo Task Header webview-ui/src/components/kilocode/KiloTaskHeader.tsx	Updated header styling with consistent border and outline classes.
Kilo Rules Modal webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx	Applied consistent border and rounded-xl styling to the rules toggle modal.
Button UI webview-ui/src/components/ui/button.tsx	Standardized button styling with rounded-lg and border classes.
Dialog UI webview-ui/src/components/ui/dialog.tsx	Updated Tailwind CSS classes for consistent border and rounded-xl styling.
Dropdown UI webview-ui/src/components/ui/dropdown-menu.tsx	Modified Tailwind CSS for dropdown content, adding border and rounded-xl styles.
Popover UI webview-ui/src/components/ui/popover.tsx	Applied consistent border and rounded-xl styling to popover content.
Select UI webview-ui/src/components/ui/select.tsx	Updated Tailwind CSS for select content, ensuring consistent border and rounded-xl styles.
Index CSS webview-ui/src/index.css	Added new CSS variables (--color-matterai-border, --color-matterai-blue) and updated context mention styles.

🧪 Test Added/Recommended

Recommended

• Unit and Integration Tests for FileEditReviewController: Add comprehensive tests to verify the correct behavior of addEdit, handleAccept, handleReject, handleAcceptAll, and handleReviewNext commands, including edge cases like no pending edits or multiple files.
• Component Tests for AcceptRejectButtons: Implement tests to ensure the webview component correctly fetches commit changes, displays file lists, and dispatches the appropriate vscode.postMessage calls for 'Accept all' and 'Reject all' actions.
• End-to-End Tests for Review Workflow: Develop E2E tests to validate the entire inline review flow, from AI code generation to user acceptance/rejection, ensuring seamless interaction between the extension and webview UI.

🔒Security Vulnerabilities

No new security vulnerabilities were detected in this pull request. The checkpointRestore mechanism for rejecting changes provides a robust rollback capability.

[matter-ai-bot]

✅ Reviewed the changes: This PR introduces a new file edit review system using CodeLenses in VS Code, replacing the previous comment thread approach. It also includes UI updates across web components with new styling and a new 'Accept/Reject' button component in the webview.

[code-crusher]

/matter draft a release changelog for social media post

[matter-ai-bot]

Here's a draft for your release changelog, tailored for a social media post:

---

✨ Major UI Refresh & Streamlined Code Review in Axon Code v4.200.0! ✨

We're thrilled to announce a significant update to Axon Code (v4.200.0), bringing a more intuitive and polished experience to your coding workflow!

🚀 What's New?

• Inline File Review (NEW!): Say goodbye to context switching! You can now accept or reject AI-generated code changes directly within your editor using new CodeLenses. Plus, a new dedicated panel in the chat provides a clear overview of all pending changes with "Accept All" and "Reject All" options. This replaces the previous diff view for a much smoother experience.

• Sleek UI/UX Overhaul: We've given many of our core UI components a fresh look! Enjoy updated dialogs, dropdowns, buttons, and modals with improved styling, consistent borders, and smoother animations across the entire extension and web apps.

• Smarter Usage Tracking: We've enhanced our backend to more proactively update your profile and usage data after assistant responses, ensuring you always have the latest insights.

Upgrade now and experience a more efficient and beautiful coding journey with Axon Code!

#AxonCode #MatterAI #VSCodeExtension #CodeReview #DeveloperTools #Productivity #UIUX #SoftwareDevelopment

---