Changes Panel

The changes panel lets you review all code modifications in your workspace and provide feedback to agents.

Why Review Changes?

Before committing or creating a PR, you should always review what the agent changed:

Verify correctness - Does the code do what you asked?
Check for issues - Are there bugs, security problems, or style violations?
Understand the approach - Learn what the agent did so you can explain it to reviewers
Provide feedback - Ask the agent to fix problems before committing

<Warning> **Never blindly trust agent output.** Always review changes before merging. Agents can make mistakes, introduce bugs, or misunderstand requirements. </Warning>

Opening Changes

Click the Changes toggle (<Icon icon="code-compare" />) in the navbar
Click the changes icon in the context bar
Use the command bar: Cmd/Ctrl + K → "Toggle Changes Panel"

File Tree

The changes panel displays a hierarchical file tree:

Folders: Expand/collapse to navigate
Files: Click to view the diff
Search: Filter files by name
Expand/Collapse All: Quick navigation buttons

Diff Viewer

View code changes with syntax highlighting:

Feature	Description
Additions	Green highlighting for new lines
Deletions	Red highlighting for removed lines
Context	Surrounding unchanged lines for reference
Line numbers	Original and new line numbers

Diff View Modes

Toggle between two display modes:

Mode	Description
Unified	Inline view with changes interleaved
Side-by-Side	Original and modified shown in parallel columns

Switch modes using the diff view toggle in the navbar (when Changes panel is open) or via command bar: Cmd/Ctrl + K → "Toggle Diff View Mode".

Diff Options

Customise the diff display:

Option	Description
Wrap Lines	Enable/disable line wrapping for long lines
Ignore Whitespace	Show/hide whitespace-only changes
Expand All	Expand all collapsed diff sections
Collapse All	Collapse all diff sections

Access these via the command bar's Diff Options page.

Giving Feedback with Comments

Add comments directly on code changes to provide feedback to agents.

Adding Comments

Hover over a line in the diff
Click the comment icon that appears
Write your feedback
Submit the comment

Comment Uses

Request changes: Ask the agent to modify specific code
Ask questions: Get explanations about implementation choices
Provide context: Share additional requirements or constraints
Approve sections: Indicate code that looks good

Agent Response to Comments

When you send a message with review comments, the agent sees your feedback and acts on it. In this example, the agent restores a file after the user requested the change be reverted.

<Info> Comments are visible to the agent in subsequent messages, helping guide further development. </Info>

GitHub Integration

When your workspace is linked to a pull request:

Viewing GitHub Comments

Click the GitHub icon in the changes panel toolbar to toggle GitHub comments
Comments from the PR appear inline with the diff
Badge shows comment count per file

<Frame> </Frame> <Note> Only submitted review comments are shown. Pending reviews (not yet submitted on GitHub) won't appear until you submit the review. </Note>

Linking to a PR

Workspaces automatically link when:

You create a PR from the workspace
The workspace branch matches an existing PR

<Tip> Review GitHub comments alongside your changes to address PR feedback efficiently. </Tip>

Review Workflow

Follow this workflow to effectively review and refine agent changes:

<Steps> <Step title="Wait for agent to finish"> Let the agent complete its work. The status in the sidebar will change from "Running" to "Idle". </Step> <Step title="Open the Changes panel"> Click the Changes icon in the navbar or use `Cmd/Ctrl + K` → "Toggle Changes Panel". </Step> <Step title="Review each file"> Click through each modified file in the file tree. Look for: - **Logic errors** - Does the code do what you intended? - **Missing pieces** - Are there unhandled edge cases? - **Code quality** - Is the code readable and maintainable? - **Security issues** - Any obvious vulnerabilities? </Step> <Step title="Add comments on issues"> For any problems you find, hover over the line and click the comment icon. Write specific feedback:

Good comment: "This API endpoint should validate the user ID before querying the database to prevent unauthorized access."

Bad comment: "This is wrong, fix it." </Step>

<Step title="Send feedback to agent"> Type a message in the chat (e.g., "Please address the review comments") and send it. The agent will see your inline comments and make corrections. </Step> <Step title="Re-review and repeat"> After the agent addresses feedback, review the new changes. Repeat until you're satisfied. </Step> <Step title="Create PR when ready"> Once changes look good, create a pull request using the Git panel or command bar. </Step> </Steps> <Tip> **Be specific in comments.** Instead of "this is wrong", explain what's wrong and ideally suggest a fix. The more context you give, the better the agent can correct the issue. </Tip>

Browser Testing - Test your application with the built-in browser
Interface Guide - Overview of workspace panels
Git Operations - Create PRs and manage branches