See every change
Code-diff and version-control primitives — hunks, side-by-side and inline diffs, commit cards, PR cards, merge-conflict markers, blame strips, file trees, stat bars, review threads, approve buttons, mini commit graphs, and cherry-pick previews. Tuned for the Mufflermen monorepo: quote-instant-pricing flags, the 3D parts catalogue, and bay-availability realtime sync.
See every change is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
See every change: Code-diff and version-control primitives — hunks, side-by-side and inline diffs, commit cards, PR cards, merge-conflict markers, blame strips, file trees, stat bars, review threads, approve buttons, mini commit graphs, and cherry-pick previews. Tuned for the Mufflermen monorepo: quote-instant-pricing flags, the 3D parts catalogue, and bay-availability realtime sync.
Pick a primitive
Every primitive renders at full scale in its own sub-route with realistic Mufflermen data — feature branches, signed commits from Marcus / Jordan / Sophie, signed-by-policy chips. Composition lives under /full-pr-review.
Diff hunk
Single hunk surface with @@ range strip and tone-coded lines (added / removed / context / meta) for old + new line numbers.
Inspect primitive statesSide-by-side diff
Two-column diff — old version left, new version right — line numbers per side, paired additions/removals.
Inspect primitive statesInline diff
Single-column unified diff with +/- markers and tone-coded backgrounds. The default GitHub-style view.
Inspect primitive statesCommit card
Commit summary — short sha chip, author avatar, message subject + body, branch chip, signed-status chip, action buttons.
Inspect primitive statesBranch indicator
Compact branch chip — fork icon + name + ahead/behind chip + protection badge (review required / admins only).
Inspect primitive statesPull request card
PR card — number, title, author, status chip (Draft / Open / Changes / Approved / Merged / Closed), check rows, reviewer avatars.
Inspect primitive statesMerge conflict marker
Conflict zone — <<<<<<< HEAD / ======= / >>>>>>> branch with explanatory chips and accept-ours / accept-theirs / resolve-manually CTAs.
Inspect primitive statesBlame strip
Left rail of per-line commit chips with hover popover showing author, date, and short sha.
Inspect primitive statesFile tree changes
Changed files list — status icon per file (Added / Modified / Renamed / Deleted), +/- per file, distribution bar, total chip.
Inspect primitive statesDiff stats bar
Horizontal stats bar — insertions vs deletions as colored segments, total files chip, legend.
Inspect primitive statesReview comment thread
Code-review thread anchored to a line — avatar, body, reactions, inline code suggestion block, resolve toggle.
Inspect primitive statesApprove changes button
Three-up verdict — Approve / Request changes / Comment with required-by-policy chip when branch protection requires.
Inspect primitive statesCommit graph mini
SVG mini commit graph — colored lanes for main / feature / hotfix, dots per commit, merge chevrons, sha labels.
Inspect primitive statesCherry-pick preview
Cherry-pick preview — selected commit summary, target branch chip, conflict-prediction chip, apply + cancel actions.
Inspect primitive statesFull PR review composition
PullRequestCard header, DiffStatsBar, FileTreeChanges on the left rail, SideBySideDiff with ReviewCommentThread overlaid, ApproveChangesButton at the foot, and a CommitGraphMini side panel — every primitive assembled.
Review full composition