50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tce9,.cr-diff-review { display: grid; gap: var(--cr-space-3); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-diff-review__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cr-space-2); } .cr-diff-review__title { margin: 0; letter-spacing: var(--cr-font-tracking-tight); font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-semibold); } .cr-diff-review__stat { font-family: var(--cr-font-family-mono); font-size: var(--cr-font-size-sm); } .cr-diff-review__added { color: var(--cr-color-diff-added-fg); } .cr-diff-review__removed { color: var(--cr-color-diff-removed-fg); } .cr-diff-review__description { margin: 0; color: var(--cr-color-text-muted); } .cr-diff-review__hunks { display: grid; gap: var(--cr-space-3); } .cr-diff-review__hunk { overflow: hidden; border-radius: var(--cr-radius-lg); } .cr-diff-review__hunk:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-diff-review__hunk[data-decision='accepted'] { border-color: var(--cr-color-status-done-fg); } .cr-diff-review__hunk[data-decision='rejected'] { border-color: var(--cr-color-status-failed-fg); } /* Rejected hunks are marked by a dashed border and the Reject state, not by dimming: dimmed text fails contrast. */ .cr-diff-review__hunk[data-decision='rejected'] { border-style: dashed; } .cr-diff-review__hunk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cr-space-2); padding: var(--cr-space-2) var(--cr-space-3); border-bottom: 1px solid var(--cr-color-border-default); } .cr-diff-review__hunk-title { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin: 0; font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-diff-review__hunk-header { color: var(--cr-color-text-muted); font-family: var(--cr-font-family-mono); font-weight: var(--cr-font-weight-regular); } .cr-diff-review__hunk-actions { display: flex; gap: var(--cr-space-1); } .cr-diff-review__hunk-actions .cr-button[data-choice='accept'][aria-pressed='true'] { border-color: var(--cr-color-status-done-fg); background: var(--cr-color-status-done-bg); color: var(--cr-color-status-done-fg); } .cr-diff-review__hunk-actions .cr-button[data-choice='reject'][aria-pressed='true'] { border-color: var(--cr-color-status-failed-fg); background: var(--cr-color-status-failed-bg); color: var(--cr-color-status-failed-fg); } .cr-diff-review__lines { overflow-x: auto; padding-block: var(--cr-space-1); } .cr-diff-review__bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cr-space-2); padding: var(--cr-space-2) var(--cr-space-2) var(--cr-space-2) var(--cr-space-4); border-radius: var(--cr-radius-xl); font-size: var(--cr-font-size-sm); } .cr-diff-review__progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-3); } .cr-diff-review__bar-actions { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); } 53:T21a9,'use client'; import { useId, useRef, useState, type KeyboardEvent } from 'react'; import { Badge } from '@/components/creance/badge/Badge'; import { Button } from '@/components/creance/button/Button'; import { Code } from '@/components/creance/code/Code'; import { DiffLine, type DiffLineType } from '@/components/creance/diff-line/DiffLine'; import { KeyboardHint } from '@/components/creance/keyboard-hint/KeyboardHint'; import { cx } from '@/lib/creance/cx'; import { CheckIcon, CrossIcon } from '@/lib/creance/icons'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './DiffReview.css'; export interface DiffHunkLine { type: DiffLineType; content: string; oldNumber?: number | undefined; newNumber?: number | undefined; } export interface DiffHunk { id: string; /** The `@@ -12,4 +12,6 @@` header. */ header: string; lines: DiffHunkLine[]; } export type HunkDecision = 'accepted' | 'rejected'; export interface DiffReviewProps { file: string; hunks: DiffHunk[]; /** Called once every hunk has a decision and the person applies them. */ onApply?: (result: { accepted: string[]; rejected: string[] }) => void; /** Once set, the review is read-only and shows what was applied. */ applied?: { accepted: string[]; rejected: string[] } | undefined; /** What the change is for, in the agent's words. */ description?: string | undefined; headingLevel?: 2 | 3 | 4; className?: string; } function counts(hunks: DiffHunk[]) { let added = 0; let removed = 0; for (const line of hunks.flatMap((h) => h.lines)) { if (line.type === 'add') added++; if (line.type === 'remove') removed++; } return { added, removed }; } /** * Keyboard: J / K move between hunks, Y accepts and N rejects the focused hunk. * Shortcuts only work while focus is inside the review. */ export function DiffReview({ file, hunks, onApply, applied, description, headingLevel = 3, className }: DiffReviewProps) { const titleId = useId(); const [decisions, setDecisions] = useState>({}); const [message, setMessage] = useState(''); const hunkRefs = useRef>([]); const Heading = `h${headingLevel}` as const; const HunkHeading = `h${headingLevel + 1}` as 'h3' | 'h4' | 'h5'; const readOnly = applied !== undefined; const decisionFor = (id: string): HunkDecision | undefined => applied ? applied.accepted.includes(id) ? 'accepted' : applied.rejected.includes(id) ? 'rejected' : undefined : decisions[id]; const decided = hunks.filter((h) => decisionFor(h.id)).length; const accepted = hunks.filter((h) => decisionFor(h.id) === 'accepted').map((h) => h.id); const rejected = hunks.filter((h) => decisionFor(h.id) === 'rejected').map((h) => h.id); const { added, removed } = counts(hunks); function decide(id: string, decision: HunkDecision) { setDecisions((d) => ({ ...d, [id]: decision })); } function decideAll(decision: HunkDecision) { setDecisions(Object.fromEntries(hunks.map((h) => [h.id, decision]))); setMessage(decision === 'accepted' ? 'All hunks accepted' : 'All hunks rejected'); } function apply() { onApply?.({ accepted, rejected }); setMessage(`Applied ${accepted.length} of ${hunks.length} hunks`); } function onKeyDown(e: KeyboardEvent) { if (e.metaKey || e.ctrlKey || e.altKey) return; const current = hunkRefs.current.findIndex((el) => el?.contains(document.activeElement)); const key = e.key.toLowerCase(); if (key === 'j' || key === 'k') { const next = key === 'j' ? Math.min(current + 1, hunks.length - 1) : Math.max(current - 1, 0); hunkRefs.current[current === -1 ? 0 : next]?.focus(); } else if (!readOnly && current !== -1 && (key === 'y' || key === 'n')) { const hunk = hunks[current]; if (!hunk) return; decide(hunk.id, key === 'y' ? 'accepted' : 'rejected'); setMessage(`Hunk ${current + 1} ${key === 'y' ? 'accepted' : 'rejected'}`); } else { return; } e.preventDefault(); } return ( // Keyboard shortcuts are a convenience on top of the buttons, which stay fully usable. // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

Review changes to {file} +{added}{' '} −{removed} : {added} lines added, {removed} removed

{description &&

{description}

}

{hunks.map((hunk, i) => { const decision = decisionFor(hunk.id); const headingId = `${titleId}-h${i}`; return (

{ hunkRefs.current[i] = el; }} className="cr-diff-review__hunk cr-surface" data-decision={decision} aria-labelledby={headingId} tabIndex={-1} >

Hunk {i + 1} of {hunks.length} {readOnly ? ( {decision === 'accepted' ? 'Applied' : decision === 'rejected' ? 'Rejected' : 'Not reviewed'} ) : ( )}

{hunk.lines.map((line, j) => ( ))}

); })}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/badge.json","https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/code.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/diff-line.json","https://creance.pages.dev/r/keyboard-hint.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"diff-review/DiffReview.css","content":"$52","type":"registry:file","target":"@components/creance/diff-review/DiffReview.css"},{"path":"diff-review/DiffReview.tsx","content":"$53","type":"registry:ui","target":"@components/creance/diff-review/DiffReview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]