Back to Vibe Kanban

Reviewing Code

docs/reviewing-code.mdx

0.1.05.0 KB
Original Source

After a coding agent finishes work, you review its changes, leave inline comments, and send the agent back to address them. This review-feedback-fix loop repeats until you are satisfied.

1. Open the changes panel

There are three ways to open the changes panel:

  • Click the Toggle Changes Panel button in the navbar
  • Click the changes icon in the app bar
  • Open the command bar from its icon in the navbar or with Cmd/Ctrl + K, then search for "Show Changes Panel"
<Frame> </Frame>

The changes panel shows the diff viewer in the centre and the file tree on the right.

<Frame> </Frame>

2. Navigate the file tree

The file tree shows all files that were added, modified, or deleted. Click any file to load its diff in the viewer.

<Frame> </Frame>

Use the search box at the top to filter files by name. The toggle button in the search bar lets you expand or collapse all folders at once.

<Tip> Start with the files you care most about — the main feature file or the entry point — rather than reviewing alphabetically. This gives you context for the rest of the changes. </Tip>

3. Read diffs

The diff viewer uses colour coding to show what changed: green for additions, red for deletions, and grey for unchanged context lines.

You can switch between two view modes:

ModeBest forHow to switch
UnifiedQuick scanning, small changesDiff view toggle in the navbar
Side-by-SideLarge refactors, comparing old vs newSame toggle, or Cmd/Ctrl + K → "Switch to Side-by-Side View"
<Frame> </Frame> <Frame> </Frame>

You can also switch views from the command bar (Cmd/Ctrl + K → "Switch to Side-by-Side View").

4. Add inline comments

To leave feedback on a specific line, hover over it in the diff and click the comment icon that appears. Write your comment and submit it.

<Frame> </Frame>

Good comments are specific and actionable. Here are some examples:

Comment typeExample
Request a change"This endpoint should validate the user ID before querying the database."
Ask a question"Why did you choose a Map here instead of a plain object?"
Provide context"This function is called from the auth middleware — it needs to handle expired tokens."
<Warning> Comments are not sent individually. They are collected and submitted together when you send a message in the chat. </Warning>

5. Send feedback to the agent

After adding your comments, send them to the agent. You can include an optional message for extra context, or just send the comments on their own. A badge shows how many review comments will be included.

<Frame> </Frame>

The agent sees all inline comments as context and works through them.

Troubleshooting

<AccordionGroup> <Accordion title="The changes panel is empty"> - The agent may not have made any changes yet — check the workspace status - If all changes were committed and pushed, the panel resets. Check the Git section for the latest commit. </Accordion> <Accordion title="I can't see my inline comments after sending"> Comments are consumed when you send a message. They become part of the chat history. Add new comments for the next review round. </Accordion> <Accordion title="The agent didn't address my comment"> Be more specific. Instead of "this is wrong", explain what is wrong and suggest a fix. Reference exact line numbers or variable names so the agent knows exactly where to look. </Accordion> </AccordionGroup>

Next steps

<CardGroup cols={2}> <Card title="Issue Management" icon="list-check" href="/issue-management"> Create and organise issues on the kanban board </Card> <Card title="Browser Testing" icon="browser" href="/browser-testing"> Preview your app in the built-in browser </Card> <Card title="Changes Panel" icon="code-compare" href="/workspaces/changes"> Full reference for diff viewer and comment features </Card> <Card title="Git Operations" icon="code-branch" href="/workspaces/git-operations"> Create pull requests, rebase, merge, and manage branches </Card> </CardGroup>