#16 - Frontend diff view — git diff visualization - charles/peon

claude-desktop commented

2026-04-16 11:31:47 +00:00

Collaborator

User story

As a user reviewing agent changes, I want a diff view that renders git diffs with syntax-highlighted file headers, added/removed lines, and hunk context, so that I can understand what the agent modified.

Acceptance criteria

DiffViewModel (RELM4 component, `components/diff_view.rs`)

Receives diff data via GitCommand::GetDiff response or from checkpoint comparison
Renders a list of FileDiff entries

Diff rendering

File header with path and a distinct CSS class (diff-file-header)
Each hunk rendered in a sourceview5::View with the diff language for syntax highlighting
Lines prefixed with (context), + (added), - (removed) as per spec §10.4
Added lines have a green background tint, removed lines have a red background tint (via CSS)
Hunk headers displayed

Accessible via Ctrl+D keybinding or header bar button
Switchable back to chat view
File list summary at the top (number of files changed, insertions, deletions)

Data flow

On view activation: sends GitCommand::GetDiff via IPC for the active project
Updates when receiving AppEvent::GitStatus or after a checkpoint

Tests

Test: diff rendering produces correct sourceview content from FileDiff data
Test: empty diff shows "No changes" placeholder

Out of scope

Side-by-side diff mode (post-v1)
Inline editing from diff view

References

Spec §10.4 (DiffView)

Dependencies

Blocked by: #8 (FileDiff shape), #13 (AppModel, AppMsg)
Blocks: none (v0.1 leaf)
Branch off: issue-13-app-shell
Full graph: #21

## User story As a **user reviewing agent changes**, I want a diff view that renders git diffs with syntax-highlighted file headers, added/removed lines, and hunk context, so that I can understand what the agent modified. ## Acceptance criteria ### DiffViewModel (RELM4 component, `components/diff_view.rs`) - [ ] Receives diff data via `GitCommand::GetDiff` response or from checkpoint comparison - [ ] Renders a list of `FileDiff` entries ### Diff rendering - [ ] File header with path and a distinct CSS class (`diff-file-header`) - [ ] Each hunk rendered in a `sourceview5::View` with the `diff` language for syntax highlighting - [ ] Lines prefixed with ` ` (context), `+` (added), `-` (removed) as per spec §10.4 - [ ] Added lines have a green background tint, removed lines have a red background tint (via CSS) - [ ] Hunk headers displayed ### Navigation - [ ] Accessible via `Ctrl+D` keybinding or header bar button - [ ] Switchable back to chat view - [ ] File list summary at the top (number of files changed, insertions, deletions) ### Data flow - [ ] On view activation: sends `GitCommand::GetDiff` via IPC for the active project - [ ] Updates when receiving `AppEvent::GitStatus` or after a checkpoint ### Tests - [ ] Test: diff rendering produces correct sourceview content from FileDiff data - [ ] Test: empty diff shows "No changes" placeholder ## Out of scope - Side-by-side diff mode (post-v1) - Inline editing from diff view ## References - Spec §10.4 (DiffView) ## Dependencies - **Blocked by:** #8 (FileDiff shape), #13 (AppModel, AppMsg) - **Blocks:** none (v0.1 leaf) - **Branch off:** `issue-13-app-shell` - **Full graph:** #21

claude-desktop added this to the v0.1.0 milestone

2026-04-16 11:31:47 +00:00

claude-desktop added the

area:frontend

type:user-story

labels

2026-04-16 11:31:47 +00:00

claude-desktop referenced this issue

2026-04-16 20:22:35 +00:00

v0.1.0 dependency tree and implementation order #21

claude-desktop referenced this issue

2026-04-16 20:25:34 +00:00