Skip to main content
Emdash provides a built-in diff visualization UI for reviewing changes before committing or creating pull requests. The File Changes panel shows real-time diffs, supports staging, and includes a comparison view for side-by-side review.
Diff review is a local-only feature. Remote projects over SSH do not yet support diff visualization.

​
File Changes panel

The File Changes panel is your central hub for reviewing agent-made changes:
1

Access the panel

Click the File Changes icon in the task toolbar, or use the keyboard shortcut:
  • macOS: Cmd+Shift+D
  • Windows/Linux: Ctrl+Shift+D
2

View changed files

The panel shows all modified, added, and deleted files since the base branch:
  • 🟢 Green: Added files
  • 🟡 Yellow: Modified files
  • 🔴 Red: Deleted files
  • +/- counts: Insertions and deletions per file
3

Navigate changes

  • Click a file to view its diff
  • Use arrow keys to navigate between files
  • Filter by file path or change type

​
Panel layout

From FileChangesPanel.tsx (exact file structure): 
<div className="file-changes-panel">
  <header>
    <h2>File Changes</h2>
    <div className="stats">
      {totalFiles} files, +{insertions} -{deletions}
    </div>
  </header>

  <div className="file-list">
    {files.map((file) => (
      <FileChangeItem
        key={file.path}
        path={file.path}
        status={file.status}
        insertions={file.insertions}
        deletions={file.deletions}
        onClick={() => openDiff(file)}
      />
    ))}
  </div>

  <footer>
    <button onClick={stageAll}>Stage All</button>
    <button onClick={commitChanges}>Commit</button>
    <button onClick={createPR}>Create PR</button>
  </footer>
</div>

​
Diff visualization

Clicking a file opens the diff viewer with syntax-highlighted changes:

​
Diff types

Default view showing changes inline:
function greet(name) {
- console.log('Hello, ' + name);
+ console.log(`Hello, ${name}!`);
}
  • Lines prefixed with - are deletions (red background)
  • Lines prefixed with + are additions (green background)
  • Context lines (unchanged) have no prefix

​
Diff navigation

Jump to next change

Press F8 or click Next Change to jump to the next modified hunk.

Jump to previous change

Press Shift+F8 or click Previous Change.

Fold unchanged lines

Click the fold icon to collapse large blocks of unchanged code.

Expand context

Click ... to show more context lines above/below changes.

​
Staging changes

Emdash supports Git’s staging area for granular control over commits:

​
Stage files

In the File Changes panel, click the Stage button next to a file.Or use the context menu:
  • Right-click a file → Stage changes

​
Stage hunks

Stage specific sections of a file:
  1. Open the diff viewer for a file
  2. Hover over a change hunk
  3. Click Stage Hunk (or Cmd/Ctrl+K)
  4. Only that hunk is staged; the rest remains unstaged
Hunk staging is useful when a file has multiple unrelated changes (e.g., a feature + unrelated formatting fix).

​
Committing changes

1

Stage desired files

Stage files or hunks you want to commit.
2

Write commit message

In the File Changes panel footer:
  1. Enter a commit message in the text field
  2. Follow Conventional Commits:
    • feat: add dark mode
    • fix: resolve login bug
    • chore: update dependencies
3

Commit

Click Commit or press Cmd/Ctrl+Enter.Emdash runs:
git commit -m "feat: add dark mode"
4

Verify commit

Check the commit log:
git log --oneline -5
Commits are local until you push to the remote. Create a PR to push changes.

​
Comparison view

The comparison view shows differences between two Git references:

​
Use cases

  • Compare task branch to main: See all changes before creating a PR
  • Compare two commits: Review changes between specific commits
  • Compare before/after: See impact of a refactor or bug fix

​
Opening comparison view

1

Select comparison targets

In the File Changes panel header, click Compare:
  • Base: Branch or commit to compare from (e.g., main)
  • Target: Branch or commit to compare to (e.g., emdash/feature-abc)
2

View full diff

The panel updates to show:
  • All files changed between base and target
  • Total insertions/deletions across all files
  • Commit history between refs
3

Navigate and review

Click individual files to view diffs, just like the standard view.

​
Comparison formats

# Three-dot diff (default): Changes in target since branching from base
git diff main...emdash/feature-abc

# Two-dot diff: All differences between branches
git diff main..emdash/feature-abc
Emdash uses three-dot diff to exclude commits from main that landed after the branch was created.

​
Approval workflow

Before creating a PR, Emdash encourages a review workflow:
1

Review all changes

Open the File Changes panel and review each modified file:
  • Verify the agent made intended changes
  • Check for accidental modifications
  • Look for security issues (hardcoded secrets, etc.)
2

Stage reviewed files

As you review each file, stage it to mark it as “approved”.Files left unstaged are not included in the PR.
3

Commit staged changes

Commit all staged files with a descriptive message.
4

Create PR

Once all changes are committed, click Create PR.Emdash generates a PR title/description based on your commits.
This workflow ensures you don’t blindly merge agent-generated code without review.

​
Common scenarios

​
Scenario 1: Agent modified too many files

Problem: The agent changed files you didn’t want modified. Solution:
  1. Review the File Changes panel
  2. Only stage files you want to keep
  3. Discard unwanted changes: 
    git checkout -- src/unwanted-file.ts
  4. Commit only staged files

​
Scenario 2: Large refactor needs multiple PRs

Problem: The agent made 50+ file changes that should be split into smaller PRs. Solution:
  1. Stage files for PR #1 (e.g., core functionality)
  2. Commit with message: feat: implement core feature
  3. Create PR #1
  4. Stage files for PR #2 (e.g., tests)
  5. Commit: test: add unit tests
  6. Create PR #2 on a new branch

​
Scenario 3: Need to test before committing

Problem: Want to test changes before finalizing the commit. Solution:
  1. Leave changes unstaged
  2. Run tests locally: 
    npm test
  3. If tests pass, stage and commit
  4. If tests fail, ask the agent to fix issues

​
Scenario 4: Reviewing merge conflicts

Problem: The base branch has new commits that conflict with task branch. Solution:
  1. Merge main into task branch: 
    git merge main
  2. Resolve conflicts in the diff viewer
  3. Stage resolved files
  4. Commit the merge

​
Keyboard shortcuts

ActionmacOSWindows/Linux
Open File ChangesCmd+Shift+DCtrl+Shift+D
Stage fileCmd+KCtrl+K
Unstage fileCmd+Shift+KCtrl+Shift+K
Stage allCmd+Shift+ACtrl+Shift+A
CommitCmd+EnterCtrl+Enter
Next changeF8F8
Previous changeShift+F8Shift+F8
Toggle split viewCmd+\Ctrl+\

​
Limitations

The following features are not yet supported:
  • Remote diffs: File Changes panel only works for local projects
  • Binary file diffs: Images, PDFs, etc. show “Binary file changed”
  • Large diffs: Files with >10,000 line changes may be slow to render
  • Inline editing: Cannot edit files directly in the diff viewer (use Monaco editor)

​
Best practices

Review everything

Never commit agent changes without reviewing the diff. Agents make mistakes.

Stage incrementally

Stage and commit related changes together. Split unrelated changes into separate commits.

Write clear messages

Commit messages explain why changes were made, not what changed (the diff shows that).

Test before committing

Run tests on unstaged changes. Only commit if tests pass.

​
Troubleshooting

Symptom: No files appear in the panel despite agent making changes.Solutions:
  1. Check if changes are committed: git status
  2. Ensure you’re in the task’s worktree directory
  3. Refresh the panel: Close and reopen
Symptom: Diff contains escape codes or binary data.Solution: This is a binary file. View it outside Emdash (e.g., image viewer).
Symptom: Clicking “Stage” does nothing.Solutions:
  1. Check if file exists: ls <file-path>
  2. Ensure Git is tracking the file: git status
  3. Check file permissions: ls -la <file-path>
Symptom: Viewer freezes when opening large diffs.Solutions:
  1. Close other Monaco editors to free memory
  2. View diff in external tool: git diff <file-path>
  3. Split large changes into smaller commits

Build docs developers (and LLMs) love

Get started for freeTalk to us