Code Review Diff Components with Accept-Reject UI Built In
accept/reject UI and annotation framework map directly to agent loop reviewer step and potential PR diff rendering on joelclaw.com
Pierre Computer Company builds code review tooling, and they’ve open-sourced the diff rendering layer as a standalone package. It’s not a minimal diff viewer — it ships with split/unified views, virtual scrolling for large files, a full annotation framework, and accept/reject UI baked in. The kind of thing you’d normally spend weeks building for a code review product, available as a drop-in.
The architecture is doing real work. Syntax highlighting runs in a worker pool off the main thread, so rendering a 2,000-line diff doesn’t freeze the browser. The highlighter is Shiki-based with LRU caching, which means repeated file types don’t re-parse grammars on every render. Hunk expansion is built in — collapsed by default, expand on demand. The library ships as both Web Components and React wrappers, so it works in any modern stack. SSR is supported, which matters for joelclaw.com where most content rendering happens server-side.
The 500+ line types.ts is the tell that this was built for a real product, not a demo. Heavy typing usually means the API was designed to be extended — and the annotation framework confirms that. You can attach structured metadata to specific hunks, which is exactly the interface you’d need to show agent-generated observations alongside a diff. The accept/reject UI gives that annotation framework an interaction model: an agent proposes a change, surfaces it as a diff with annotations, and the user (or another agent) accepts or rejects at the hunk level.
For the agent loop reviewer step, this covers a real gap. The loop generates code, the reviewer evaluates it, but today there’s no UI surface for showing that review — it’s all CLI output and Inngest run traces. A component library that already has accept/reject and annotation primitives built in is the right building block for a proper code review UI, whether that surfaces in a gateway channel or on joelclaw.com itself.
Key Ideas
- Dual-target output: ships as both Web Components and React wrappers — integrates into any stack without re-implementation
- Worker pool for Shiki highlighting: syntax highlighting is CPU-intensive; moving it off the main thread with a pool means large diffs stay responsive
- LRU cache on grammar parsing: repeated file types don’t reload grammar definitions — matters for multi-file diffs in a loop session
- Annotation framework: structured metadata attachable to specific hunks — the right primitive for agent-generated code observations and review comments
- Accept/reject UI: hunk-level approval built in, not bolted on — maps to the reviewer→implementor handoff in the agent loop roles
- Virtual scrolling: large diffs don’t destroy the render; the DOM stays windowed
- Hunk expansion: default collapsed view with on-demand expansion — sensible default for showing only the changed lines
- SSR support: renders on the server, important for Next.js and static generation
- 500+ line
types.ts: indicator of production-intent design and a well-considered extension surface - Extracted from a real product: Pierre is an actual code review platform — this library earned its design through real usage