Skip to content

feat: rebuild diff review on Pierre CodeView - #1726

Merged
chuks-qua merged 5 commits into
mainfrom
feat/pierre-diff-review
Sep 21, 2026
Merged

chuks-qua merged 5 commits into
mainfrom
feat/pierre-diff-review

Conversation

@chuks-qua

@chuks-qua chuks-qua commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

What

Previously the review surface rendered diffs through hand-rolled unified and side-by-side components, the Files pane floated over content at narrow widths, line comments used a bespoke editor inside diff rows, and the turn summary listed flat full paths.

Now the whole comparison renders through @pierre/diffs CodeView with the library's own virtualization, the Files pane is docked with minimum widths and drag-to-collapse, line comments compose inline at the clicked line using the same editor primitives as the "Add comment" flow, and the turn summary groups files under a collapsible folder tree with resolved per-file stats.

Verified: focused Vitest suites pass (turn summary 8/8, diff panel and file list suites), typecheck and lint clean, and the flows below were exercised live in the app (screenshots and video attached).

Known limits: the pull-request diff surface is unchanged in this pass, and vlist still owns transcript virtualization (Pierre owns diff virtualization).

Why

The old diff view had accumulated usability and maintenance problems: duplicated custom renderers, a floating panel that broke at narrow widths, a one-off comment editor, and summary rows that repeated full paths.

UI Changes

Before: hand-rolled diff rows, a flat summary, and a separate comment card.

Before: hand-rolled diff rows

Before: flat turn summary

Before: bespoke code comment card

After: Pierre-rendered diff, folder-tree summary, and the comment editor inline at the line.

After: Pierre diff rendering

After: folder-tree turn summary

After: comment editor inline at the clicked line

Video: gutter + mounts the editor at the line, typing survives scroll virtualization, and saving produces the comment chip.

diff-comment-flow.webm

Key Changes

  • Pierre CodeView for review diffs: ReviewDiffView renders the whole comparison through CodeView, replacing UnifiedDiff, SideBySideDiff, FileEntry, DiffContent, and useDiffHighlighter. @pierre/diffs pinned at 1.4.1.
  • Docked Files pane: no floating overlay. Both panes keep minimum widths; dragging past the minimum collapses the pane; it hides below the combined minimum and returns when there is room.
  • Merged toolbar: file controls (jump, unified/split, refresh, options) portal into the top toolbar row instead of a second row.
  • Inline diff comments: the gutter + sets a store-backed edit target and the editor renders inside the diff row at that line, sharing the CommentEditorComposer primitives with "Add comment". A module-level draft cache keeps unsent text when pierre's virtualizer unmounts the row.
  • Folder-tree turn summary: collapsible directory headers with compressed single-child chains, indent guides, per-file stats with an em dash for zero sides, aggregate totals in the header, and a 5-file cap with a +N more files escape.
  • Windows paths: path splitting and basenames handle \ separators so snapshot file lists on Windows group and resolve stats correctly.
  • Plumbing: snapshot.getDiffStats and cumulative stats through contracts and transport; DiffStats gains changeType.

Config Changes

None

Review Notes

  • The throwaway HTML prototype used for the redesign review is intentionally not committed.
  • The dev runtime repeatedly shut down during verification; final evidence was captured against a fresh agent:up session.
  • No benchmark run; Pierre's virtualization is the perf mechanism by design.

Replace the hand-rolled diff renderers with @pierre/diffs CodeView for
whole-comparison virtualization. Files pane is docked with min widths and
drag-to-collapse, line comments compose in the bottom composer instead of
an inline editor, and the turn change summary renders a collapsible folder
tree with resolved stats. Snapshot diff stats plumbing added through
contracts and server transport. Legacy UnifiedDiff/SideBySideDiff/
FileEntry and the custom highlighter are removed.
Docking the editor in the composer left no visual link between the comment
and the line it annotates. The editor now mounts inside the diff row the
user clicked, matching the transcript annotation editor; the module-level
draft cache keeps unsent text when pierre's virtualizer unmounts the row.
Resolve bun.lock conflict by taking main's lockfile and reinstalling, which
keeps @pierre/diffs pinned at 1.4.1.
The pierre Virtualizer stubs broke unrelated suites: the synchronous
IntersectionObserver callback hit a TDZ on MermaidBlock's timeoutId, its
empty intersectionRect tripped the visibility gate, and adding
Element.prototype.getAnimations pushed Base UI popovers onto an async
exit-animation path that jsdom never completes. Fire the callback on a
microtask with a non-zero rect, and set BASE_UI_ANIMATIONS_DISABLED so
Base UI keeps the synchronous unmount path it uses without the API.

Generated with [Devin](https://devin.ai)
The HTML mock was exploration material and was never meant to ship.

Generated with [Devin](https://devin.ai)
@chuks-qua
chuks-qua merged commit 2bafa52 into main Sep 21, 2026
20 of 24 checks passed
@chuks-qua
chuks-qua deleted the feat/pierre-diff-review branch September 21, 2026 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant