clover's git

the-knife

1	import type { CodeViewItem, DiffLineAnnotation, SelectedLineRange } from "@pierre/diffs";
2	import type { CodeViewDiffItem, CodeViewHandle } from "@pierre/diffs/react";
3	import type {
4	EnvironmentId,
5	PullRequestDetailView,
6	PullRequestDiffSide,
7	PullRequestOmittedFileStat,
8	PullRequestRef,
9	PullRequestReviewPosition,
10	PullRequestReviewThread,
11	PullRequestThreadCommentsResult,
12	} from "@t3tools/contracts";
13	import {
14	ChevronDownIcon,
15	ChevronRightIcon,
16	Columns2Icon,
17	FolderTreeIcon,
18	InfoIcon,
19	MessageSquareOffIcon,
20	PilcrowIcon,
21	Rows3Icon,
22	Settings2Icon,
23	TextWrapIcon,
24	TriangleAlertIcon,
25	} from "lucide-react";
26	import { ChevronDown, ChevronRight, ChevronsDownUp, ChevronsUpDown } from "lucide";
27	import { useAtomRefresh } from "@effect/atom-react";
28	import * as Schema from "effect/Schema";
29	import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
30
31	import { useLocalStorage } from "~/hooks/useLocalStorage";
32	import { useClientSettings, useUpdateClientSettings } from "~/hooks/useSettings";
33	import { useTheme } from "~/hooks/useTheme";
34	import { areAllDiffFilesCollapsed } from "~/lib/diffCollapse";
35	import { pullRequestFindingKey, type PullRequestFinding } from "./pullRequestDetail.logic";
36	import { canEditPullRequestComment, canResolvePullRequestThread } from "./pullRequestEditing.logic";
37	import { orderDiffFiles } from "./pullRequestFileOrder.logic";
38	import {
39	buildFileDiffRenderKey,
40	fnv1a32,
41	getDiffLineStat,
42	getRenderablePatch,
43	resolveDiffThemeName,
44	resolveFileDiffPath,
45	resolveFileDiffPreviousPath,
46	type RenderablePatch,
47	} from "~/lib/diffRendering";
48	import { APP_BASE_NAME } from "~/branding";
49	import { PREFERRED_HIGHLIGHTER } from "~/lib/syntaxHighlighting";
50	import { cn } from "~/lib/utils";
51	import { createPullRequestDiffFileContentsLoader } from "~/lib/diffFileContents";
52	import {
53	buildDiffReviewComment,
54	resolveDiffReviewPosition,
55	type ReviewCommentContext,
56	} from "~/reviewCommentContext";
57	import { pullRequestEnvironment } from "~/state/pullRequests";
58	import { useEnvironmentQuery } from "~/state/query";
59	import { useAtomCommand } from "~/state/use-atom-command";
60
61	import { DiffPanelLoadingState } from "../DiffPanelShell";
62	import { DiffCommentAnnotation } from "../diffs/DiffCommentAnnotation";
63	import { DiffFileTree } from "../diffs/DiffFileTree";
64	import { useCodeViewFileReveal } from "../diffs/useCodeViewFileReveal";
65	import { diffFileTreeEntries } from "../diffs/diffFileTree.logic";
66	import { StyledDiffCodeView } from "../diffs/StyledDiffCodeView";
67	import { Button } from "../ui/button";
68	import { MorphIcon } from "~/components/MorphIcon";
69	import { Checkbox } from "../ui/checkbox";
70	import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
71	import {
72	DropdownMenu,
73	DropdownMenuCheckboxItem,
74	DropdownMenuContent,
75	DropdownMenuItem,
76	DropdownMenuRadioGroup,
77	DropdownMenuRadioItem,
78	DropdownMenuSeparator,
79	DropdownMenuTrigger,
80	} from "../ui/menu";
81	import { toastManager } from "../ui/toast";
82	import { Toggle, ToggleGroup } from "../ui/toggle-group";
83	import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
84	import {
85	getReviewPositionAnchor,
86	PendingReviewCommentCard,
87	ReviewThreadCard,
88	toViewerSide,
89	} from "./PullRequestReviewAnnotation";
90	import {
91	isFileDiffCollapsed,
92	isLineInFileDiff,
93	toggleFileDiffFoldForViewed,
94	type DiffFoldOverride,
95	} from "./pullRequestDiff.logic";
96	import { PullRequestDiffStat, PullRequestMetaLine } from "./pullRequestPresentation";
97	import { usePullRequestFilesViewed } from "./usePullRequestFilesViewed";
98	import {
99	nextPendingReviewCommentId,
100	pullRequestReviewKey,
101	usePendingReviewComments,
102	usePullRequestReviewStore,
103	type PendingReviewComment,
104	} from "./pullRequestReviewStore";
105
106	/** Everything pinned to one line of one file: what is already there, and what is being added. */
107	interface ReviewAnnotationGroup {
108	readonly threads: ReadonlyArray<PullRequestReviewThread>;
109	readonly pending: ReadonlyArray<PendingReviewComment>;
110	readonly draft: boolean;
111	}
112
113	type ReviewAnnotation = DiffLineAnnotation<ReviewAnnotationGroup>;
114
115	/** Commits per press of "Show more" in the scope menu. */
116	const COMMIT_PAGE_SIZE = 10;
117
118	const PULL_REQUEST_FILE_TREE_STORAGE_KEY = "t3code.pullRequestFileTreeOpen";
119
120	/** One answer from the host: a whole number of files, and where the next one carries on. */
121	interface DiffSlice {
122	/** What was asked for, null being the first slice. Identifies the slice among the loaded ones. */
123	readonly cursor: string | null;
124	readonly patch: string;
125	readonly truncated: boolean;
126	readonly nextCursor: string | null;
127	readonly omittedFileStats: ReadonlyArray<PullRequestOmittedFileStat>;
128	}
129
130	/**
131	* The viewer's own per-file counts are hidden and drawn from this side of its shadow root
132	* instead: its counts are hunk sums, and a file whose hunks the host withheld would read as
133	* an empty change rather than as the counts the host did report.
134	*/
135	const REPLACE_FILE_COUNTS_CSS = `
136	[data-diffs-header] [data-additions-count],
137	[data-diffs-header] [data-deletions-count] {
138	display: none !important;
139	}`;
140
141	/** Nothing loaded yet, as one identity, so the memos below do not see a new array every render. */
142	const NO_SLICES: ReadonlyArray<DiffSlice> = [];
143
144	/** A group while it is still gathering what belongs on its line. */
145	interface MutableAnnotationGroup {
146	readonly side: PullRequestDiffSide;
147	readonly line: number;
148	readonly threads: PullRequestReviewThread[];
149	readonly pending: PendingReviewComment[];
150	draft: boolean;
151	}
152
153	interface DraftAnchor {
154	readonly fileKey: string;
155	readonly path: string;
156	/** What the file was called before the change, for the hosts that resolve a position by both. */
157	readonly oldPath: string | null;
158	readonly position: PullRequestReviewPosition;
159	/** The whole selection, which the comment collapses to one line but a question keeps. */
160	readonly range: SelectedLineRange;
161	}
162
163	/** A range of the diff and the reader's request for the agent. */
164	export interface PullRequestAgentSelectionInput {
165	/** The marked lines, already in the shape the composer draws and the agent reads. */
166	readonly comment: ReviewCommentContext;
167	readonly request: string;
168	}
169
170	/**
171	* Whether the viewer draws this line at all. A line counts the new file on the right and the old
172	* one on the left, and each hunk covers one run of each; a line outside every run — a
173	* conversation the host could not mark outdated, or one under a hunk it withheld — has no row to
174	* be pinned to, however much its file looks like a match.
175	*/
176	/**
177	* The pull request's patch, with the review written against it. Conversations already on the
178	* host sit under the line they were written on, and a new comment joins the review being
179	* drafted rather than being posted as it is typed.
180	*/
181	function PullRequestCodeTab({
182	scrollerRef,
183	environmentId,
184	reference,
185	detail,
186	selectedCommitOid,
187	onSelectedCommitChange,
188	pendingFinding,
189	fixFindingLabel = "Fix in a thread",
190	onFixFinding,
191	onAddToAgentSelection,
192	onRefresh,
193	refreshToken = 0,
194	revealRequest = null,
195	}: {
196	scrollerRef: (node: HTMLDivElement | null) => void;
197	environmentId: EnvironmentId;
198	reference: PullRequestRef;
199	detail: PullRequestDetailView;
200	/** Commit whose diff is open. Null keeps the whole pull-request diff selected. */
201	selectedCommitOid: string | null;
202	onSelectedCommitChange: (oid: string | null) => void;
203	/** The hand-off currently preparing, if any, so only the finding it belongs to says so. */
204	pendingFinding?: string | null;
205	fixFindingLabel?: string;
206	onFixFinding?: (finding: PullRequestFinding) => void;
207	/** Absent where there is no active agent composer to receive a local comment. */
208	onAddToAgentSelection?: (input: PullRequestAgentSelectionInput) => void;
209	onRefresh: () => void;
210	/** Bumped by the panel's refresh button: drop the accumulated pages and re-read the diff. */
211	refreshToken?: number;
212	/** A file another tab asked to show. A new nonce asks again for the same path. */
213	revealRequest?: { readonly path: string; readonly nonce: number } | null;
214	}) {
215	const { resolvedTheme } = useTheme();
216	const settings = useClientSettings();
217	const [toggledFiles, setToggledFiles] = useState<ReadonlySet<string>>(() => new Set());
218	// A change of any size can carry hundreds of commits, and a menu that long is a scroll rather
219	// than a choice. The rest arrive ten at a time, on request.
220	const [visibleCommitCount, setVisibleCommitCount] = useState(COMMIT_PAGE_SIZE);
221	/** Set once the reader has asked for every file at once, until they pick a file apart again. */
222	const [foldOverride, setFoldOverride] = useState<DiffFoldOverride>(null);
223	const effectiveFoldOverride =
224	foldOverride ?? (settings.diffFilesCollapsed ? "folded" : "expanded");
225	const diffLayout = settings.diffLayout;
226	const updateClientSettings = useUpdateClientSettings();
227	const [wordWrap, setWordWrap] = useState(settings.wordWrap);
228	const [ignoreWhitespace, setIgnoreWhitespace] = useState(settings.diffIgnoreWhitespace);
229	const [fileTreeOpen, setFileTreeOpen] = useLocalStorage(
230	PULL_REQUEST_FILE_TREE_STORAGE_KEY,
231	false,
232	Schema.Boolean,
233	);
234	const [selectedLines, setSelectedLines] = useState<{
235	id: string;
236	range: SelectedLineRange;
237	} | null>(null);
238	const [draft, setDraft] = useState<DraftAnchor | null>(null);
239	const [threadPending, setThreadPending] = useState(false);
240	const [orphansOpen, setOrphansOpen] = useState(false);
241	// Which pull request the slices belong to travels with them, so a render taken before the
242	// reset below cannot read the previous one's slices — or send its cursor to the host.
243	const [sliceState, setSliceState] = useState<{
244	readonly key: string;
245	readonly cursor: string | null;
246	readonly slices: ReadonlyArray<DiffSlice>;
247	}>({ key: "", cursor: null, slices: NO_SLICES });
248	const parseCache = useRef(new Map<string, RenderablePatch>());
249	const [viewer, setViewer] = useState<CodeViewHandle<ReviewAnnotationGroup, undefined> | null>(
250	null,
251	);
252
253	const referenceKey = pullRequestReviewKey(reference);
254	const commit = selectedCommitOid;
255	// One commit's own changes and the whole change are two different diffs, paged separately, so
256	// everything below is keyed by both.
257	const scopeKey = commit === null ? referenceKey : `${referenceKey}@${commit}`;
258	// The panel keeps this mounted across pull requests, so an open composer would otherwise
259	// survive the switch and attach its comment to whichever one is on screen when it is sent.
260	useEffect(() => {
261	setDraft(null);
262	setSelectedLines(null);
263	setToggledFiles(new Set());
264	setFoldOverride(null);
265	setVisibleCommitCount(COMMIT_PAGE_SIZE);
266	setOrphansOpen(false);
267	setSliceState({ key: scopeKey, cursor: null, slices: NO_SLICES });
268	parseCache.current.clear();
269	}, [scopeKey]);
270
271	const loadedSlices = sliceState.key === scopeKey ? sliceState.slices : NO_SLICES;
272	const cursor = sliceState.key === scopeKey ? sliceState.cursor : null;
273	const diffQuery = useEnvironmentQuery(
274	pullRequestEnvironment.diff({
275	environmentId,
276	input: {
277	...reference,
278	...(cursor === null ? {} : { cursor }),
279	...(commit === null ? {} : { commit }),
280	},
281	}),
282	);
283	// Each answer is kept as its own slice. Concatenating the patches and re-parsing the growing
284	// text would cost more with every slice, which is the wall the slicing exists to remove.
285	useEffect(() => {
286	const data = diffQuery.data;
287	if (data === null) return;
288	setSliceState((previous) => {
289	const slices = previous.key === scopeKey ? previous.slices : NO_SLICES;
290	const next = {
291	cursor,
292	patch: data.patch,
293	truncated: data.truncated,
294	nextCursor: data.nextCursor,
295	omittedFileStats: data.omittedFileStats ?? [],
296	};
297	const index = slices.findIndex((slice) => slice.cursor === cursor);
298	if (index === -1) {
299	return { key: scopeKey, cursor, slices: [...slices, next] };
300	}
301	const existing = slices[index];
302	if (
303	existing !== undefined &&
304	existing.patch === next.patch &&
305	existing.truncated === next.truncated &&
306	existing.nextCursor === next.nextCursor &&
307	existing.omittedFileStats.length === next.omittedFileStats.length &&
308	existing.omittedFileStats.every((file, index) => {
309	const refreshed = next.omittedFileStats[index];
310	return (
311	refreshed !== undefined &&
312	refreshed.path === file.path &&
313	refreshed.additions === file.additions &&
314	refreshed.deletions === file.deletions
315	);
316	})
317	) {
318	return previous;
319	}
320	// A page that came back different means the diff moved under the review. The slices
321	// after it go with the replacement: their cursors were positions in the old diff.
322	return { key: scopeKey, cursor, slices: [...slices.slice(0, index), next] };
323	});
324	}, [cursor, diffQuery.data, scopeKey]);
325	// The refresh button rereads from the first page rather than the page the reader is on:
326	// pages are positions in one snapshot of the diff, and a fresh snapshot starts over.
327	const refreshFirstDiffPage = useAtomRefresh(
328	pullRequestEnvironment.diff({
329	environmentId,
330	input: { ...reference, ...(commit === null ? {} : { commit }) },
331	}),
332	);
333	const reviewKey = referenceKey;
334	const pendingComments = usePendingReviewComments(reference);
335	const addComment = usePullRequestReviewStore((store) => store.addComment);
336	const removeComment = usePullRequestReviewStore((store) => store.removeComment);
337	const replyToThread = useAtomCommand(pullRequestEnvironment.replyToThread, {
338	reportFailure: false,
339	});
340	const setThreadResolution = useAtomCommand(pullRequestEnvironment.setThreadResolution, {
341	reportFailure: false,
342	});
343	const updateComment = useAtomCommand(pullRequestEnvironment.updateComment, {
344	reportFailure: false,
345	});
346	const loadThreadComments = useAtomCommand(pullRequestEnvironment.threadComments, {
347	reportFailure: false,
348	});
349	const getDiffFileContents = useAtomCommand(pullRequestEnvironment.diffFileContents);
350	const loadDiffFiles = useMemo(
351	() =>
352	createPullRequestDiffFileContentsLoader(getDiffFileContents, {
353	environmentId,
354	reference,
355	commit,
356	cacheKey: `pull-request:${referenceKey}:${detail.updatedAt}:${commit ?? "all"}`,
357	}),
358	[commit, detail.updatedAt, environmentId, getDiffFileContents, reference, referenceKey],
359	);
360
361	// What is offered is the intersection of two different questions: what this host can do at
362	// all, and what this account may do on this repository. Either one saying no means a control
363	// that would only ever end in a refusal.
364	const review = useMemo(() => {
365	const hostReview = detail.capabilities.review;
366	const viewer = detail.viewerPermissions;
367	return {
368	inlineComment: hostReview.inlineComment && viewer.comment,
369	reply: hostReview.reply && viewer.comment,
370	resolve: hostReview.resolve && viewer.resolve,
371	};
372	}, [detail.capabilities.review, detail.viewerPermissions]);
373	// A comment is posted against the pull request's head diff, so a line number taken from one
374	// commit's own diff would land somewhere else entirely. Commenting waits for the whole change.
375	const canCommentOnLines = review.inlineComment && commit === null;
376	// Every slice is parsed on its own and the result held, so a slice arriving costs one parse
377	// rather than one per slice already on screen. Its cache key carries the theme, which is what
378	// the tokenizer caches against, so a theme change is still a fresh parse.
379	const parsedSlices = useMemo(
380	() =>
381	loadedSlices.map((slice) => {
382	// The patch's own hash is part of the key: a refreshed page reuses its cursor, and a
383	// key of position alone would keep handing back the parse of the patch it replaced.
384	const cacheKey = `pull-request:${scopeKey}:${resolvedTheme}:${ignoreWhitespace}:${slice.cursor ?? "first"}:${fnv1a32(slice.patch)}`;
385	const cached = parseCache.current.get(cacheKey);
386	if (cached) return cached;
387	const parsed = getRenderablePatch(slice.patch, cacheKey, {
388	compactPartialHunkOffsets: true,
389	ignoreWhitespace,
390	});
391	if (parsed) parseCache.current.set(cacheKey, parsed);
392	return parsed;
393	}),
394	[loadedSlices, resolvedTheme, scopeKey, ignoreWhitespace],
395	);
396	// Ordered within a slice rather than across them: ordering the accumulated set would let a late
397	// slice push a file the reader is part way through further down the page.
398	const files = useMemo(
399	() =>
400	parsedSlices.flatMap((parsed) =>
401	parsed?.kind === "files" ? orderDiffFiles(parsed.files) : [],
402	),
403	[parsedSlices],
404	);
405	const filePaths = useMemo(() => files.map((file) => resolveFileDiffPath(file)), [files]);
406	// Offered under a commit scope as well as from the whole change, because reading a change one
407	// commit at a time is what the scope is for. The tick is kept against the change request rather
408	// than the scope it was made in, so clearing a file here clears it everywhere.
409	const viewedFilesStore = detail.capabilities.viewedFiles;
410	const filesViewed = usePullRequestFilesViewed({
411	environmentId,
412	reference,
413	enabled: viewedFilesStore !== undefined,
414	paths: filePaths,
415	});
416	const {
417	setViewed,
418	refresh: refreshFilesViewed,
419	enabled: filesViewedEnabled,
420	isViewed: isFileViewed,
421	isStale: isFileViewedStale,
422	} = filesViewed;
423	// The button goes around the host's cache, so everything the tab reads from it starts over:
424	// the diff from its first page, and with it the ticks, which a push since the last read can
425	// have marked as standing against an older version of the file.
426	const appliedRefreshToken = useRef(refreshToken);
427	useEffect(() => {
428	if (appliedRefreshToken.current === refreshToken) return;
429	appliedRefreshToken.current = refreshToken;
430	setSliceState({ key: scopeKey, cursor: null, slices: NO_SLICES });
431	refreshFirstDiffPage();
432	refreshFilesViewed();
433	}, [refreshToken, scopeKey, refreshFirstDiffPage, refreshFilesViewed]);
434	const nextCursor = loadedSlices.at(-1)?.nextCursor ?? null;
435	// What a slice withheld: the host declining to inline part of it, or a patch the viewer could
436	// not structure and so dropped. Neither says anything about there being more to fetch.
437	const withheldContent =
438	loadedSlices.some((slice) => slice.truncated) ||
439	parsedSlices.some((parsed) => parsed?.kind === "raw");
440
441	// Placing a conversation takes more than its file being in the diff: its line has to fall
442	// inside a hunk that was rendered. One that does not is drawn nowhere, so it belongs in the
443	// off-diff list rather than disappearing between the two.
444	const placedThreadIds = useMemo(() => {
445	const placed = new Set<string>();
446	// A commit's diff counts lines within that commit; a review comment is anchored to the
447	// pull request's head diff. Pinning one onto the other would put the remark against
448	// whichever code happens to hold that line number in this commit, so while a commit is on
449	// screen every conversation is listed rather than placed.
450	if (commit !== null) return placed;
451	for (const file of files) {
452	const path = resolveFileDiffPath(file);
453	for (const thread of detail.reviewThreads) {
454	if (
455	thread.path === path &&
456	thread.line !== null &&
457	isLineInFileDiff(file, thread.side, thread.line)
458	) {
459	placed.add(thread.id);
460	}
461	}
462	}
463	return placed;
464	}, [commit, detail.reviewThreads, files]);
465
466	// Hashing what the annotations show is the costly part of an item's version, and none of it
467	// moves when a file is ticked or folded, so it is kept apart from the two that do.
468	const annotatedFiles = useMemo(
469	() =>
470	files.map((fileDiff) => {
471	const fileKey = buildFileDiffRenderKey(fileDiff);
472	const path = resolveFileDiffPath(fileDiff);
473	// One annotation per line, so a line that already carries a conversation shows a new
474	// comment underneath it rather than in place of it.
475	const groups = new Map<string, MutableAnnotationGroup>();
476	const groupAt = (side: PullRequestDiffSide, line: number) => {
477	const key = `${side}:${line}`;
478	const existing = groups.get(key);
479	if (existing) return existing;
480	const created: MutableAnnotationGroup = {
481	side,
482	line,
483	threads: [],
484	pending: [],
485	draft: false,
486	};
487	groups.set(key, created);
488	return created;
489	};
490
491	for (const thread of detail.reviewThreads) {
492	if (thread.path !== path || thread.line === null) continue;
493	if (!placedThreadIds.has(thread.id)) continue;
494	groupAt(thread.side, thread.line).threads.push(thread);
495	}
496	// Pending comments anchor to the head diff exactly like host threads do, so a
497	// commit's diff must not place them either — the same line means other code there.
498	if (commit === null) {
499	for (const comment of pendingComments) {
500	if (comment.path !== path) continue;
501	const anchor = getReviewPositionAnchor(comment.position);
502	groupAt(anchor.side, anchor.line).pending.push(comment);
503	}
504	}
505	if (draft?.fileKey === fileKey) {
506	const anchor = getReviewPositionAnchor(draft.position);
507	groupAt(anchor.side, anchor.line).draft = true;
508	}
509
510	const annotations: ReviewAnnotation[] = [...groups.values()].map((group) => ({
511	side: toViewerSide(group.side),
512	lineNumber: group.line,
513	metadata: { threads: group.threads, pending: group.pending, draft: group.draft },
514	}));
515	return {
516	fileKey,
517	path,
518	fileDiff,
519	annotations,
520	// The viewer re-renders an item only when its version changes, so everything the
521	// annotations show has to be part of it.
522	annotationsVersion: fnv1a32(
523	annotations
524	.map(
525	({ side, lineNumber, metadata }) =>
526	`${side}:${lineNumber}:${metadata.draft ? "d" : ""}:${metadata.pending
527	.map((comment) => `${comment.id}:${comment.body}`)
528	.join(",")}:${metadata.threads
529	.map(
530	(thread) =>
531	`${thread.id}:${thread.isResolved ? "r" : ""}:${
532	thread.isOutdated ? "o" : ""
533	}:${thread.comments
534	.map(
535	(comment) =>
536	`${comment.id}:${comment.author?.login ?? ""}:${comment.createdAt}:${comment.body}:${(
537	comment.reactions ?? []
538	)
539	.map(
540	(r) => `${r.content}:${r.count}:${r.viewerHasReacted ? "v" : ""}`,
541	)
542	.join(",")}`,
543	)
544	.join(";")}`,
545	)
546	.join(",")}`,
547	)
548	.join("|"),
549	),
550	};
551	}),
552	[commit, detail.reviewThreads, draft, files, pendingComments, placedThreadIds],
553	);
554
555	const items = useMemo<CodeViewDiffItem<ReviewAnnotationGroup>[]>(
556	() =>
557	annotatedFiles.map(({ fileKey, path, fileDiff, annotations, annotationsVersion }) => {
558	const collapsed = isFileDiffCollapsed(fileKey, effectiveFoldOverride, toggledFiles);
559	// Ticking a file that is already folded changes no fold, so without this the box on
560	// screen would keep saying the opposite of what the count says.
561	const viewedMark = filesViewedEnabled
562	? `e${isFileViewed(path) ? "v" : ""}${isFileViewedStale(path) ? "s" : ""}`
563	: "";
564	return {
565	id: fileKey,
566	type: "diff" as const,
567	fileDiff,
568	annotations,
569	collapsed,
570	version: fnv1a32(`${collapsed ? "1" : "0"}:${viewedMark}:${annotationsVersion}`),
571	};
572	}),
573	[
574	annotatedFiles,
575	filesViewedEnabled,
576	effectiveFoldOverride,
577	isFileViewed,
578	isFileViewedStale,
579	toggledFiles,
580	],
581	);
582	const omittedFileStats = useMemo(
583	() =>
584	new Map(
585	loadedSlices.flatMap((slice) =>
586	slice.omittedFileStats.map((file) => [file.path, file] as const),
587	),
588	),
589	[loadedSlices],
590	);
591	const sourceFileStats = useMemo(
592	() =>
593	new Map(
594	parsedSlices.flatMap((parsed) =>
595	parsed?.kind === "files"
596	? parsed.files.map(
597	(file, index) =>
598	[
599	buildFileDiffRenderKey(file),
600	getDiffLineStat([parsed.sourceFiles[index] ?? file]),
601	] as const,
602	)
603	: [],
604	),
605	),
606	[parsedSlices],
607	);
608	const fileKeys = useMemo(() => items.map((item) => item.id), [items]);
609	const collapsedFileKeys = useMemo(
610	() => new Set(items.filter((item) => item.collapsed === true).map((item) => item.id)),
611	[items],
612	);
613	const allFilesCollapsed = areAllDiffFilesCollapsed(fileKeys, collapsedFileKeys);
614	const fileTreeEntries = useMemo(() => diffFileTreeEntries(files), [files]);
615
616	// A failed slice must not be asked for again on its own. The files already loaded keep the
617	// sentinel on screen, so re-arming it after a failure would request the same slice forever.
618	const canLoadNextSlice =
619	nextCursor !== null &&
620	nextCursor !== cursor &&
621	!diffQuery.isPending &&
622	diffQuery.error === null;
623	const loadNextSlice = useCallback(() => {
624	if (nextCursor === null) return;
625	setSliceState((previous) => ({ ...previous, cursor: nextCursor }));
626	}, [nextCursor]);
627
628	// The sentinel is held as state rather than a ref because the viewer mounts its own footer:
629	// an effect reading a ref could run before that node exists and would never arm the observer.
630	const [sentinel, setSentinel] = useState<HTMLDivElement | null>(null);
631	useEffect(() => {
632	if (sentinel === null || !canLoadNextSlice) return;
633	const observer = new IntersectionObserver(
634	(observed) => {
635	if (observed.some((entry) => entry.isIntersecting)) loadNextSlice();
636	},
637	// Start the next slice slightly before the sentinel is on screen.
638	{ rootMargin: "240px" },
639	);
640	observer.observe(sentinel);
641	return () => observer.disconnect();
642	}, [canLoadNextSlice, loadNextSlice, sentinel]);
643
644	// A stable identity: the viewer's SlotPortals memoizes each file's header/annotation portal on
645	// these render props, so a fresh function here would recreate every visible file's portal on
646	// every tab re-render (a line-selection drag, a keystroke in the draft, a review-store update).
647	const toggleFile = useCallback(
648	(fileKey: string) =>
649	setToggledFiles((current) => {
650	// The override becomes this file's new default the moment it is folded into the set below,
651	// so nothing has to be re-derived when the reader goes back to choosing one at a time.
652	const next = new Set(current);
653	if (next.has(fileKey)) next.delete(fileKey);
654	else next.add(fileKey);
655	return next;
656	}),
657	[],
658	);
659
660	// The tick and the fold are one gesture: clearing a file puts it away, un-clearing brings it
661	// back. Folding is still held as the reader's difference from the toolbar's default rather
662	// than derived from what has been ticked, so folding everything ticks nothing off.
663	const setFileViewed = useCallback(
664	(fileKey: string, path: string, viewed: boolean) => {
665	setViewed(path, viewed);
666	setToggledFiles((current) =>
667	toggleFileDiffFoldForViewed(fileKey, viewed, effectiveFoldOverride, current),
668	);
669	},
670	[effectiveFoldOverride, setViewed],
671	);
672
673	const requestTreeReveal = useCodeViewFileReveal(viewer, scopeKey);
674	const revealFile = useCallback(
675	(path: string) => {
676	const item = items.find((candidate) => resolveFileDiffPath(candidate.fileDiff) === path);
677	if (item === undefined) return;
678	if (item.collapsed === true) toggleFile(item.id);
679	requestTreeReveal(item.id);
680	},
681	[items, requestTreeReveal, toggleFile],
682	);
683	// Answered once the requested file has arrived: a large diff may still be paging when the
684	// request comes in, so it waits for the slice that carries the path rather than dropping it.
685	const answeredReveal = useRef<number | null>(null);
686	useEffect(() => {
687	if (revealRequest === null || answeredReveal.current === revealRequest.nonce) return;
688	if (!items.some((item) => resolveFileDiffPath(item.fileDiff) === revealRequest.path)) {
689	// The reader is not scrolling toward it, so the sentinel would never ask for its slice.
690	if (canLoadNextSlice) loadNextSlice();
691	return;
692	}
693	answeredReveal.current = revealRequest.nonce;
694	revealFile(revealRequest.path);
695	}, [canLoadNextSlice, items, loadNextSlice, revealFile, revealRequest]);
696
697	const toggleAllFiles = () => {
698	// Held as an override of the default rather than as the file keys on screen: a diff that is
699	// still paging would otherwise bring its next slice in folded, moments after the reader
700	// asked for everything to be open.
701	setFoldOverride(areAllDiffFilesCollapsed(fileKeys, collapsedFileKeys) ? "expanded" : "folded");
702	setToggledFiles(new Set());
703	};
704
705	// Newest first: the last commit is the one a reader coming back to a change is looking for.
706	const orderedCommits = useMemo(
707	() =>
708	// By instant, not by the text: GitLab keeps a commit's own UTC offset, so two commits
709	// from different zones would sort by how they were written rather than when they landed.
710	detail.commits.toSorted(
711	(left, right) => Date.parse(right.committedDate) - Date.parse(left.committedDate),
712	),
713	[detail.commits],
714	);
715
716	const beginComment = useCallback(
717	(range: SelectedLineRange | null, context: { item: CodeViewItem<ReviewAnnotationGroup> }) => {
718	if (!range || !canCommentOnLines) return;
719	const item = context.item;
720	if (item.type !== "diff") return;
721	const file = files.find((candidate) => buildFileDiffRenderKey(candidate) === item.id);
722	if (!file) return;
723	// A range collapses to its last line: only GitHub carries a multi-line comment, and one
724	// that silently lost its first line on the other hosts would be worse than one line.
725	const path = resolveFileDiffPath(file);
726	const previousPath = resolveFileDiffPreviousPath(file);
727	const sourceFile = parsedSlices
728	.flatMap((slice) => (slice?.kind === "files" ? slice.sourceFiles : []))
729	.find((candidate) => resolveFileDiffPath(candidate) === path);
730	const side = range.endSide ?? range.side;
731	const position =
732	(sourceFile && resolveDiffReviewPosition(sourceFile, range.end, side)) ??
733	resolveDiffReviewPosition(file, range.end, side);
734	if (position === null) return;
735	setDraft({
736	fileKey: item.id,
737	path,
738	oldPath: previousPath === path ? null : previousPath,
739	position,
740	range,
741	});
742	},
743	[canCommentOnLines, files, parsedSlices],
744	);
745
746	// Built here because the parsed diff only lives here, and built by the same function the
747	// thread panel's own line selection uses — the gesture is the same one, so a second reading of
748	// the hunks would only be a second place for it to drift.
749	const finishSelection = useCallback(
750	(anchor: DraftAnchor, text: string, onFinish: (comment: ReviewCommentContext) => void) => {
751	const file = files.find((candidate) => buildFileDiffRenderKey(candidate) === anchor.fileKey);
752	const comment =
753	file === undefined
754	? null
755	: buildDiffReviewComment({
756	id: `pull-request-selection:${anchor.fileKey}:${anchor.range.start}:${anchor.range.end}`,
757	sectionId: `pull-request:${detail.number}`,
758	sectionTitle: `PR #${detail.number} review`,
759	filePath: anchor.path,
760	fileDiff: file,
761	range: anchor.range,
762	text,
763	});
764	setDraft(null);
765	setSelectedLines(null);
766	if (comment !== null) onFinish(comment);
767	},
768	[detail.number, files],
769	);
770
771	// The viewer's SlotPortals memoizes each visible file's header/annotation portal on these
772	// render props and on `options` below; a fresh identity on any of them — as a plain inline
773	// function or object literal would be — invalidates that memo and recreates every portal on
774	// screen on any tab re-render (a drag-selection, a keystroke in the draft, a review-store
775	// update), which is the jank this file is otherwise clean of.
776	const renderCodeViewFooter = useCallback(
777	() =>
778	// Only while something is still owed. A finished diff whose query fails on a later
779	// refresh — a reconnect re-runs every one of them — is whole on screen already, and
780	// saying otherwise sends the reader looking for files that are all there.
781	nextCursor === null ? null : (
782	<div
783	ref={setSentinel}
784	className="flex items-center justify-center gap-2 py-2 text-xs text-muted-foreground"
785	>
786	{diffQuery.error !== null ? (
787	<>
788	<span>The rest of this diff could not be loaded.</span>
789	<Button size="xs" variant="outline" onClick={() => diffQuery.refresh()}>
790	Retry
791	</Button>
792	</>
793	) : diffQuery.isPending ? (
794	"Loading more files..."
795	) : null}
796	</div>
797	),
798	[nextCursor, diffQuery.error, diffQuery.isPending, diffQuery.refresh],
799	);
800
801	const renderHeaderPrefix = useCallback(
802	(item: CodeViewItem<ReviewAnnotationGroup>) => {
803	// The item the viewer is drawing already carries the state the memo settled on, so the
804	// chevron follows it rather than recomputing the default here.
805	const collapsed = item.collapsed === true;
806	return (
807	<Button
808	size="icon-micro"
809	variant="ghost-muted"
810	aria-expanded={!collapsed}
811	aria-label={collapsed ? "Expand diff" : "Collapse diff"}
812	className="mr-1"
813	onClick={(event) => {
814	event.stopPropagation();
815	toggleFile(item.id);
816	}}
817	>
818	<MorphIcon className="size-4" icon={collapsed ? ChevronRight : ChevronDown} />
819	</Button>
820	);
821	},
822	[toggleFile],
823	);
824
825	// Read through refs rather than closed over. The viewer memoizes each visible file's header
826	// portal on the callback below, so a fresh identity on every tick, and on every refresh of the
827	// host's answer, would rebuild every header on screen.
828	const filesViewedRef = useRef(filesViewed);
829	filesViewedRef.current = filesViewed;
830	const setFileViewedRef = useRef(setFileViewed);
831	setFileViewedRef.current = setFileViewed;
832
833	const renderHeaderMetadata = useCallback(
834	(item: CodeViewItem<ReviewAnnotationGroup>) => {
835	if (item.type !== "diff") return null;
836	let { additions, deletions } =
837	sourceFileStats.get(item.id) ?? getDiffLineStat([item.fileDiff]);
838	const path = resolveFileDiffPath(item.fileDiff);
839	if (additions === 0 && deletions === 0) {
840	const withheld = omittedFileStats.get(path);
841	if (withheld) ({ additions, deletions } = withheld);
842	}
843	const stat = (
844	<PullRequestDiffStat
845	additions={additions}
846	deletions={deletions}
847	className="font-mono text-2xs"
848	/>
849	);
850	const viewedFiles = filesViewedRef.current;
851	if (!viewedFiles.enabled) return stat;
852	const viewed = viewedFiles.isViewed(path);
853	const stale = viewedFiles.isStale(path);
854	return (
855	<span className="flex items-center gap-3">
856	{stat}
857	{/* The header itself folds the file, so the tick keeps its press to itself. The
858	attribute is what the header's capture listener looks for. */}
859	<label
860	data-viewed-toggle=""
861	className="flex cursor-pointer select-none items-center gap-1.5 text-2xs text-muted-foreground"
862	onClick={(event) => event.stopPropagation()}
863	>
864	<Checkbox
865	aria-label={stale ? "Changed" : "Viewed"}
866	checked={viewed}
867	onCheckedChange={(next) => setFileViewedRef.current(item.id, path, next === true)}
868	/>
869	{stale ? (
870	<Tooltip>
871	<TooltipTrigger render={<span className="text-warning-foreground" />}>
872	Changed
873	</TooltipTrigger>
874	<TooltipPopup side="bottom">
875	This file has been pushed to since you marked it viewed.
876	</TooltipPopup>
877	</Tooltip>
878	) : (
879	<span className="@max-xs:hidden">Viewed</span>
880	)}
881	</label>
882	</span>
883	);
884	},
885	[omittedFileStats, sourceFileStats],
886	);
887
888	const diffViewOptions = useMemo(
889	() => ({
890	diffStyle: diffLayout === "split" ? ("split" as const) : ("unified" as const),
891	lineDiffType: "none" as const,
892	overflow: wordWrap ? ("wrap" as const) : ("scroll" as const),
893	theme: resolveDiffThemeName(resolvedTheme),
894	preferredHighlighter: PREFERRED_HIGHLIGHTER,
895	themeType: resolvedTheme,
896	stickyHeaders: true,
897	loadDiffFiles,
898	enableGutterUtility: canCommentOnLines && draft === null,
899	enableLineSelection: canCommentOnLines && draft === null,
900	// Two gestures reach the same place: dragging the line numbers selects a range, and the
901	// gutter's own button comments on the one line it sits on. They are separate callbacks in
902	// the viewer, so a reader who only ever presses the button gets nothing unless both are
903	// wired.
904	onGutterUtilityClick: beginComment,
905	onLineSelectionEnd: beginComment,
906	}),
907	[diffLayout, wordWrap, resolvedTheme, loadDiffFiles, canCommentOnLines, draft, beginComment],
908	);
909
910	const runThreadCommand = useCallback(
911	async (label: string, run: () => Promise<{ readonly _tag: string }>): Promise<boolean> => {
912	if (threadPending) return false;
913	setThreadPending(true);
914	const result = await run();
915	setThreadPending(false);
916	if (result._tag === "Failure") {
917	toastManager.add({ type: "error", title: label });
918	return false;
919	}
920	onRefresh();
921	return true;
922	},
923	[onRefresh, threadPending],
924	);
925
926	// A conversation is the same card wired to the same commands whether it sits on its line or
927	// was stranded off the diff; only where it is drawn differs.
928	const renderThreadCard = useCallback(
929	(thread: PullRequestReviewThread) => (
930	<ReviewThreadCard
931	// Named with the pull request too: a thread's id is the host's own, and two pull requests
932	// can hand out the same one — which would leave one card's open editor standing over the
933	// other's conversation.
934	key={`${reference.projectId}#${reference.number}:${thread.id}`}
935	thread={thread}
936	workspaceRoot={detail.workspaceRoot}
937	canReply={review.reply}
938	canResolve={review.resolve && canResolvePullRequestThread(detail, thread)}
939	canReact={detail.capabilities.reactions === true}
940	environmentId={environmentId}
941	reference={reference}
942	pending={threadPending}
943	fixPending={pendingFinding === pullRequestFindingKey({ kind: "thread", thread })}
944	fixLabel={fixFindingLabel}
945	{...(onFixFinding ? { onFix: () => onFixFinding({ kind: "thread", thread }) } : {})}
946	onLoadMore={async (cursor): Promise<PullRequestThreadCommentsResult | null> => {
947	const result = await loadThreadComments({
948	environmentId,
949	input: { ...reference, threadId: thread.id, cursor },
950	});
951	if (result._tag === "Failure") {
952	toastManager.add({
953	type: "error",
954	title: "More comments could not be loaded",
955	});
956	return null;
957	}
958	return result.value;
959	}}
960	onReply={(body) =>
961	runThreadCommand("Reply could not be posted", () =>
962	replyToThread({
963	environmentId,
964	input: { ...reference, threadId: thread.id, body },
965	}),
966	)
967	}
968	// A conversation on a line is made of review comments, whatever the host filed them as.
969	canEditComment={(comment) =>
970	canEditPullRequestComment(detail, {
971	author: comment.author,
972	kind: "review-comment",
973	canEdit: comment.canEdit,
974	})
975	}
976	onEditComment={(commentId, body) =>
977	runThreadCommand("The comment could not be saved", () =>
978	updateComment({
979	environmentId,
980	input: { ...reference, commentId, kind: "review-comment", body },
981	}),
982	)
983	}
984	onToggleResolved={() =>
985	void runThreadCommand("The conversation could not be updated", () =>
986	setThreadResolution({
987	environmentId,
988	input: { ...reference, threadId: thread.id, resolved: !thread.isResolved },
989	}),
990	)
991	}
992	onReacted={onRefresh}
993	/>
994	),
995	[
996	detail,
997	environmentId,
998	fixFindingLabel,
999	loadThreadComments,
1000	onRefresh,
1001	onFixFinding,
1002	pendingFinding,
1003	reference,
1004	replyToThread,
1005	review.reply,
1006	review.resolve,
1007	runThreadCommand,
1008	setThreadResolution,
1009	threadPending,
1010	updateComment,
1011	],
1012	);
1013
1014	const renderAnnotation = useCallback(
1015	(annotation: ReviewAnnotation) => (
1016	<div className="py-1 font-sans text-foreground">
1017	{annotation.metadata.threads.map(renderThreadCard)}
1018	{annotation.metadata.pending.map((comment) => (
1019	<PendingReviewCommentCard
1020	key={comment.id}
1021	comment={comment}
1022	onRemove={() => removeComment(reviewKey, comment.id)}
1023	/>
1024	))}
1025	{annotation.metadata.draft && draft ? (
1026	<DiffCommentAnnotation
1027	kind="draft"
1028	rangeLabel={`${draft.path}:${getReviewPositionAnchor(draft.position).line}`}
1029	text=""
1030	submitLabel="Add to review"
1031	{...(onAddToAgentSelection
1032	? {
1033	secondaryAction: {
1034	label: "Add to agent",
1035	onAction: (text: string) =>
1036	finishSelection(draft, text, (comment) =>
1037	onAddToAgentSelection({ comment, request: text }),
1038	),
1039	},
1040	}
1041	: {})}
1042	onCancel={() => {
1043	setDraft(null);
1044	setSelectedLines(null);
1045	}}
1046	onComment={(body) => {
1047	addComment(reviewKey, {
1048	id: nextPendingReviewCommentId(),
1049	path: draft.path,
1050	...(draft.oldPath === null ? {} : { oldPath: draft.oldPath }),
1051	position: draft.position,
1052	body,
1053	});
1054	setDraft(null);
1055	setSelectedLines(null);
1056	}}
1057	/>
1058	) : null}
1059	</div>
1060	),
1061	[
1062	addComment,
1063	draft,
1064	finishSelection,
1065	onAddToAgentSelection,
1066	removeComment,
1067	renderThreadCard,
1068	reviewKey,
1069	],
1070	);
1071
1072	// A rebase or a force-push can take the scoped commit out of the change. Its diff may still
1073	// be reachable on the host, but it is no longer part of what is being reviewed, so the scope
1074	// goes back to the whole change rather than sitting under a name nothing matches.
1075	//
1076	// Including when the change reports no commits at all: the scope dropdown is the only way back
1077	// to the whole diff and it is not drawn without commits to list, so a scope that outlived them
1078	// would leave the tab reading one obsolete commit with nothing to press.
1079	const selectedCommit = orderedCommits.find((entry) => entry.oid === commit);
1080	useEffect(() => {
1081	if (commit !== null && selectedCommit === undefined) {
1082	onSelectedCommitChange(null);
1083	}
1084	}, [commit, onSelectedCommitChange, selectedCommit]);
1085	const scopeLabel = selectedCommit ? selectedCommit.messageHeadline : "All commits";
1086	const changeIgnoreWhitespace = (next: boolean) => {
1087	setIgnoreWhitespace(next);
1088	setDraft(null);
1089	setSelectedLines(null);
1090	};
1091	const toolbar = (
1092	<div className="@container flex h-10 min-h-10 shrink-0 items-center justify-between gap-2 border-b border-border/60 bg-background px-4 text-xs text-muted-foreground">
1093	<div className="flex min-w-0 flex-1 items-center gap-3">
1094	{/* A host that reports no commits has nothing to scope by, and a dropdown whose only
1095	entry is the scope already showing is a control that does nothing. */}
1096	{orderedCommits.length > 0 ? (
1097	<DropdownMenu>
1098	<DropdownMenuTrigger
1099	render={<Button size="xs" variant="secondary" />}
1100	className="min-w-0 max-w-64"
1101	aria-label={`Diff scope: ${scopeLabel}`}
1102	>
1103	<span className="truncate">{scopeLabel}</span>
1104	<ChevronDownIcon className="size-3.5 shrink-0 opacity-70" />
1105	</DropdownMenuTrigger>
1106	<DropdownMenuContent align="start" className="max-w-[min(28rem,calc(100vw-2rem))]">
1107	<DropdownMenuRadioGroup
1108	value={commit ?? "all"}
1109	onValueChange={(value) => onSelectedCommitChange(value === "all" ? null : value)}
1110	>
1111	<DropdownMenuRadioItem value="all" closeOnClick>
1112	<span>All commits</span>
1113	</DropdownMenuRadioItem>
1114	{orderedCommits.slice(0, visibleCommitCount).map((entry) => (
1115	<DropdownMenuRadioItem key={entry.oid} value={entry.oid} closeOnClick>
1116	{/* Headlines run long, and the abbreviated oid after one is what a reader
1117	matches against the commit list on the host. */}
1118	<span className="flex items-center gap-2">
1119	<Tooltip>
1120	<TooltipTrigger
1121	render={<span className="min-w-0 truncate">{entry.messageHeadline}</span>}
1122	/>
1123	<TooltipPopup side="top">{entry.messageHeadline}</TooltipPopup>
1124	</Tooltip>
1125	<span className="ml-auto shrink-0 font-mono text-xs text-muted-foreground">
1126	{entry.oid.slice(0, 7)}
1127	</span>
1128	</span>
1129	</DropdownMenuRadioItem>
1130	))}
1131	</DropdownMenuRadioGroup>
1132	{orderedCommits.length > visibleCommitCount ? (
1133	// Kept out of the radio group: it changes how much of the list is on screen
1134	// rather than what the diff is scoped to.
1135	<DropdownMenuItem
1136	closeOnClick={false}
1137	onClick={() => setVisibleCommitCount((count) => count + COMMIT_PAGE_SIZE)}
1138	>
1139	<span className="text-muted-foreground">
1140	Show more ({orderedCommits.length - visibleCommitCount} left)
1141	</span>
1142	</DropdownMenuItem>
1143	) : null}
1144	</DropdownMenuContent>
1145	</DropdownMenu>
1146	) : null}
1147	{/* One count, and the caveats as icons that carry their own words. Spelled out they
1148	competed for a strip this narrow and every one of them truncated to nothing. */}
1149	<PullRequestMetaLine>
1150	<span className="shrink-0 tabular-nums">
1151	{files.length} {files.length === 1 ? "file" : "files"}
1152	{nextCursor === null ? "" : "+"}
1153	</span>
1154	{filesViewed.enabled && files.length > 0 ? (
1155	<span className="flex min-w-0 items-center gap-1 tabular-nums">
1156	{/* Named on a host that keeps no record of its own, so the reader is told whose
1157	ticks these are without having to find the icon beside them. The count holds its
1158	width and the wording gives way, so the narrow right panel keeps its controls. */}
1159	<span className="shrink-0">
1160	{filesViewed.viewedCount} / {files.length}
1161	</span>
1162	<span className="truncate">
1163	{viewedFilesStore === "environment" ? `viewed in ${APP_BASE_NAME}` : "viewed"}
1164	</span>
1165	{viewedFilesStore === "environment" ? (
1166	<Tooltip>
1167	<TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
1168	<InfoIcon
1169	aria-label="These ticks are kept here, not on the host"
1170	className="text-muted-foreground size-3.5"
1171	/>
1172	</TooltipTrigger>
1173	<TooltipPopup side="bottom">
1174	This host keeps no shared record of which files you have read, so these ticks
1175	are kept by this environment. They follow you between the apps connected to it,
1176	but the host's own web UI will not show them.
1177	</TooltipPopup>
1178	</Tooltip>
1179	) : null}
1180	{filesViewed.error !== null ? (
1181	<Tooltip>
1182	<TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
1183	<TriangleAlertIcon
1184	aria-label="Your ticks could not be read"
1185	className="size-3.5 text-warning-foreground"
1186	/>
1187	</TooltipTrigger>
1188	<TooltipPopup side="bottom">
1189	The boxes below are whatever was last read, and empty if nothing has been read
1190	yet. {filesViewed.error}
1191	</TooltipPopup>
1192	</Tooltip>
1193	) : null}
1194	{filesViewed.truncated ? (
1195	<Tooltip>
1196	<TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
1197	<TriangleAlertIcon
1198	aria-label="This count covers only part of the change"
1199	className="size-3.5 text-warning-foreground"
1200	/>
1201	</TooltipTrigger>
1202	<TooltipPopup side="bottom">
1203	This change has more files than the host will report ticks for in one read, so
1204	the count is short and some boxes below start empty.
1205	</TooltipPopup>
1206	</Tooltip>
1207	) : null}
1208	</span>
1209	) : null}
1210	{withheldContent ? (
1211	<Tooltip>
1212	<TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
1213	<TriangleAlertIcon
1214	aria-label="Some of this diff was not shown"
1215	className="size-3.5 text-warning-foreground"
1216	/>
1217	</TooltipTrigger>
1218	<TooltipPopup side="bottom">
1219	The host withheld part of this diff — a binary file, or a change too large to
1220	inline.
1221	</TooltipPopup>
1222	</Tooltip>
1223	) : null}
1224	{commit !== null && review.inlineComment ? (
1225	<Tooltip>
1226	<TooltipTrigger render={<span className="flex shrink-0 items-center" />}>
1227	<MessageSquareOffIcon
1228	aria-label="Line comments are written from the whole change"
1229	className="size-3.5"
1230	/>
1231	</TooltipTrigger>
1232	<TooltipPopup side="bottom">
1233	A comment is anchored to the whole change, so switch to All commits to write one.
1234	</TooltipPopup>
1235	</Tooltip>
1236	) : null}
1237	</PullRequestMetaLine>
1238	</div>
1239	<div className="flex shrink-0 items-center gap-1">
1240	<DropdownMenu>
1241	<Tooltip>
1242	<TooltipTrigger
1243	render={
1244	<DropdownMenuTrigger
1245	render={<Button size="icon-sm" variant="ghost" />}
1246	className="@lg:hidden"
1247	aria-label="Diff options"
1248	/>
1249	}
1250	>
1251	<Settings2Icon className="size-3.5" />
1252	</TooltipTrigger>
1253	<TooltipPopup side="top">Diff options</TooltipPopup>
1254	</Tooltip>
1255	<DropdownMenuContent align="end">
1256	<DropdownMenuCheckboxItem
1257	checked={ignoreWhitespace}
1258	onCheckedChange={(checked) => changeIgnoreWhitespace(checked)}
1259	>
1260	Hide whitespace changes
1261	</DropdownMenuCheckboxItem>
1262	<DropdownMenuCheckboxItem
1263	checked={wordWrap}
1264	onCheckedChange={(checked) => setWordWrap(checked)}
1265	>
1266	Wrap lines
1267	</DropdownMenuCheckboxItem>
1268	<DropdownMenuSeparator />
1269	<DropdownMenuRadioGroup
1270	value={diffLayout}
1271	onValueChange={(value) => {
1272	if (value === "stacked" || value === "split") {
1273	updateClientSettings({ diffLayout: value });
1274	}
1275	}}
1276	>
1277	<DropdownMenuRadioItem value="stacked" closeOnClick>
1278	Stacked
1279	</DropdownMenuRadioItem>
1280	<DropdownMenuRadioItem value="split" closeOnClick>
1281	Split
1282	</DropdownMenuRadioItem>
1283	</DropdownMenuRadioGroup>
1284	</DropdownMenuContent>
1285	</DropdownMenu>
1286	<div className="hidden items-center gap-1 @lg:flex">
1287	<Tooltip>
1288	<TooltipTrigger
1289	render={
1290	<Toggle
1291	aria-label={
1292	ignoreWhitespace ? "Show whitespace changes" : "Hide whitespace changes"
1293	}
1294	variant="ghost"
1295	size="sm"
1296	pressed={ignoreWhitespace}
1297	onPressedChange={(pressed) => changeIgnoreWhitespace(Boolean(pressed))}
1298	/>
1299	}
1300	>
1301	<PilcrowIcon className="size-3.5" />
1302	</TooltipTrigger>
1303	<TooltipPopup side="top">
1304	{ignoreWhitespace ? "Show whitespace changes" : "Hide whitespace changes"}
1305	</TooltipPopup>
1306	</Tooltip>
1307	<ToggleGroup
1308	aria-label="Diff layout"
1309	className="shrink-0"
1310	variant="segmented"
1311	value={[diffLayout]}
1312	onValueChange={(value) => {
1313	const next = value[0];
1314	if (next === "stacked" || next === "split") {
1315	updateClientSettings({ diffLayout: next });
1316	}
1317	}}
1318	>
1319	<Toggle aria-label="Stacked diff view" value="stacked">
1320	<Rows3Icon className="size-3.5" />
1321	</Toggle>
1322	<Toggle aria-label="Split diff view" value="split">
1323	<Columns2Icon className="size-3.5" />
1324	</Toggle>
1325	</ToggleGroup>
1326	<Tooltip>
1327	<TooltipTrigger
1328	render={
1329	<Toggle
1330	aria-label={wordWrap ? "Disable diff line wrapping" : "Enable diff line wrapping"}
1331	variant="ghost"
1332	size="sm"
1333	pressed={wordWrap}
1334	onPressedChange={(pressed) => {
1335	setWordWrap(Boolean(pressed));
1336	}}
1337	/>
1338	}
1339	>
1340	<TextWrapIcon className="size-3.5" />
1341	</TooltipTrigger>
1342	<TooltipPopup side="top">
1343	{wordWrap ? "Disable line wrapping" : "Enable line wrapping"}
1344	</TooltipPopup>
1345	</Tooltip>
1346	</div>
1347	{fileKeys.length > 0 ? (
1348	<Tooltip>
1349	<TooltipTrigger
1350	render={
1351	<Button
1352	type="button"
1353	size="icon-sm"
1354	variant="ghost"
1355	aria-label={allFilesCollapsed ? "Expand all files" : "Collapse all files"}
1356	onClick={toggleAllFiles}
1357	/>
1358	}
1359	>
1360	<MorphIcon
1361	className="size-3.5"
1362	icon={allFilesCollapsed ? ChevronsUpDown : ChevronsDownUp}
1363	/>
1364	</TooltipTrigger>
1365	<TooltipPopup side="top">
1366	{allFilesCollapsed ? "Expand all files" : "Collapse all files"}
1367	</TooltipPopup>
1368	</Tooltip>
1369	) : null}
1370	{fileKeys.length > 0 ? (
1371	<Tooltip>
1372	<TooltipTrigger
1373	render={
1374	<Toggle
1375	aria-label={fileTreeOpen ? "Hide file tree" : "Show file tree"}
1376	variant="ghost"
1377	size="sm"
1378	pressed={fileTreeOpen}
1379	onPressedChange={(pressed) => setFileTreeOpen(Boolean(pressed))}
1380	/>
1381	}
1382	>
1383	<FolderTreeIcon className="size-3.5" />
1384	</TooltipTrigger>
1385	<TooltipPopup side="top">
1386	{fileTreeOpen ? "Hide file tree" : "Show file tree"}
1387	</TooltipPopup>
1388	</Tooltip>
1389	) : null}
1390	</div>
1391	</div>
1392	);
1393	// The toolbar rides above every branch below, not just the one with a patch in it: a commit
1394	// whose diff is empty or unreadable still needs the scope dropdown that got the reader there.
1395	const withToolbar = (body: ReactNode) => (
1396	<div className="flex h-full min-h-0 flex-col">
1397	{toolbar}
1398	<div ref={scrollerRef} className="min-h-0 flex-1 overflow-auto">
1399	{body}
1400	</div>
1401	</div>
1402	);
1403
1404	// Under the toolbar rather than in place of it, so choosing a commit does not take the
1405	// dropdown that was just used off the screen while its diff loads.
1406	if (diffQuery.isPending && loadedSlices.length === 0) {
1407	return withToolbar(<DiffPanelLoadingState label="Loading pull request diff..." />);
1408	}
1409
1410	// A slice that fails once there are files on screen is reported at the end of them instead:
1411	// the diff already read is worth more than the error that stopped it growing.
1412	if (diffQuery.error && loadedSlices.length === 0) {
1413	return withToolbar(
1414	<p className="px-4 py-5 text-sm text-muted-foreground">{diffQuery.error}</p>,
1415	);
1416	}
1417
1418	// A patch the viewer cannot structure (binary, or a format it does not parse) still has to
1419	// be readable, so it falls back to the raw text rather than an empty tab. Only once the diff
1420	// is whole: returning here while a cursor is outstanding would take the sentinel off screen
1421	// and end the walk, leaving the rest of the change unasked for.
1422	const rawSlices =
1423	nextCursor === null
1424	? parsedSlices.flatMap((parsed) => (parsed?.kind === "raw" ? [parsed] : []))
1425	: [];
1426	if (files.length === 0 && rawSlices.length > 0) {
1427	return withToolbar(
1428	<div className="space-y-4 px-4 py-5">
1429	{rawSlices.map((slice) => (
1430	<div key={`${slice.reason}:${slice.text.slice(0, 64)}`} className="space-y-2">
1431	<p className="text-xs text-muted-foreground">{slice.reason}</p>
1432	<pre className="whitespace-pre-wrap break-words font-mono text-xs">{slice.text}</pre>
1433	</div>
1434	))}
1435	</div>,
1436	);
1437	}
1438
1439	if (items.length === 0 && nextCursor === null) {
1440	return withToolbar(
1441	<p className="px-4 py-5 text-sm text-muted-foreground">
1442	{commit === null
1443	? "This pull request has no file changes."
1444	: "This commit has no file changes."}
1445	</p>,
1446	);
1447	}
1448
1449	const orphanThreads = detail.reviewThreads.filter((thread) => !placedThreadIds.has(thread.id));
1450	// A file carrying five stranded conversations should read as that file once rather than as
1451	// five copies of its path.
1452	const orphanFiles = new Map<string, PullRequestReviewThread[]>();
1453	for (const thread of orphanThreads) {
1454	const existing = orphanFiles.get(thread.path);
1455	if (existing) existing.push(thread);
1456	else orphanFiles.set(thread.path, [thread]);
1457	}
1458
1459	const unstructured =
1460	rawSlices.length === 0 ? null : (
1461	// A slice the viewer cannot structure is still part of the change. Shown under the files
1462	// that did parse rather than dropped, because the alternative is a diff that silently
1463	// omits whatever the viewer could not read.
1464	<div className="space-y-4 border-t border-border/60 px-4 py-5">
1465	{rawSlices.map((slice) => (
1466	<div key={`${slice.reason}:${slice.text.slice(0, 64)}`} className="space-y-2">
1467	<p className="text-xs text-muted-foreground">{slice.reason}</p>
1468	<pre className="whitespace-pre-wrap break-words font-mono text-xs">{slice.text}</pre>
1469	</div>
1470	))}
1471	</div>
1472	);
1473
1474	return (
1475	<div className="flex h-full min-h-0 flex-col">
1476	{toolbar}
1477	{/* Above the code, closed, and counted: these belong to the change rather than to any
1478	line of it, and in the stream they read as cards dropped into the patch. */}
1479	{orphanFiles.size > 0 ? (
1480	<div className="shrink-0 border-b border-border/60">
1481	<Collapsible open={orphansOpen} onOpenChange={setOrphansOpen}>
1482	{/* Still a heading, so the section keeps its place in a screen reader's outline;
1483	the count is spelled out there rather than left as a bare number. */}
1484	<h2>
1485	<CollapsibleTrigger className="flex w-full items-center gap-1.5 px-4 py-2 text-left text-xs text-muted-foreground">
1486	{/* While slices are still arriving a conversation may simply belong to a file
1487	that has not landed yet, which is not the same as being off the diff. */}
1488	<span>
1489	{nextCursor === null
1490	? "Conversations not on the current diff"
1491	: "Conversations not on the diff loaded so far"}
1492	</span>
1493	<ChevronRightIcon
1494	aria-hidden
1495	className={cn("size-3.5 transition-transform", orphansOpen && "rotate-90")}
1496	/>
1497	<span aria-hidden className="tabular-nums">
1498	{orphanThreads.length}
1499	</span>
1500	<span className="sr-only">
1501	{orphanThreads.length === 1
1502	? "1 conversation"
1503	: `${orphanThreads.length} conversations`}
1504	</span>
1505	</CollapsibleTrigger>
1506	</h2>
1507	<CollapsiblePanel>
1508	{/* Capped: opened on a change with dozens of them, this would otherwise leave no
1509	room for the diff it sits above. */}
1510	<div className="max-h-64 space-y-3 overflow-auto px-4 pb-3">
1511	{[...orphanFiles].map(([path, threads]) => (
1512	<div key={path}>
1513	<Tooltip>
1514	<TooltipTrigger
1515	render={
1516	<p className="truncate px-3 text-xs text-muted-foreground">{path}</p>
1517	}
1518	/>
1519	<TooltipPopup side="top">{path}</TooltipPopup>
1520	</Tooltip>
1521	<div className="mt-1 space-y-2">
1522	{threads.map((thread) => (
1523	<div key={thread.id}>
1524	{thread.line === null ? null : (
1525	<p className="px-3 text-xs text-muted-foreground">Line {thread.line}</p>
1526	)}
1527	{renderThreadCard(thread)}
1528	</div>
1529	))}
1530	</div>
1531	</div>
1532	))}
1533	</div>
1534	</CollapsiblePanel>
1535	</Collapsible>
1536	</div>
1537	) : null}
1538	<div className="flex min-h-0 flex-1 overflow-hidden">
1539	{/* Relative wrapper so the review overlay floats over the diff rather than pushing it
1540	up; the viewer inside still owns its own scrolling. */}
1541	<div
1542	className="relative min-h-0 min-w-0 flex-1"
1543	// The chevron answers this too, but the whole header row is the target a reader
1544	// actually aims for. The header lives in the viewer's shadow tree, so the capture
1545	// listener walks `composedPath` — the only way to see through the shadow boundary.
1546	onClickCapture={(event) => {
1547	const composedPath = event.nativeEvent.composedPath?.() ?? [];
1548	for (const node of composedPath) {
1549	if (!(node instanceof HTMLElement)) continue;
1550	// A control inside the header — the collapse chevron — handles itself, and
1551	// this capture listener fires before its own click does. Leave it alone or
1552	// the two toggles cancel out.
1553	if (node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement) {
1554	return;
1555	}
1556	// A label answers for the control it names and this listener runs before it hears
1557	// anything, so stopping the press keeps the header from folding what the tick folds.
1558	if (node.hasAttribute("data-viewed-toggle")) return;
1559	if (node.hasAttribute("data-diffs-header")) {
1560	const filePath = node.querySelector("[data-title]")?.textContent?.trim();
1561	if (filePath === undefined || filePath === "") return;
1562	const item = items.find(
1563	(candidate) => resolveFileDiffPath(candidate.fileDiff) === filePath,
1564	);
1565	if (item !== undefined) toggleFile(item.id);
1566	return;
1567	}
1568	}
1569	}}
1570	>
1571	{/* The viewer virtualizes against the element it is told is scrolling and places its
1572	rows absolutely, so it has to own that element — the thread diff panel hands it the
1573	same one. Scrolling from a parent instead leaves it painting over its neighbours. */}
1574	<StyledDiffCodeView<ReviewAnnotationGroup>
1575	// Keep scrollbar space stable so file metadata and line numbers do not shift as a
1576	// diff crosses the overflow boundary. The viewer is itself focusable for keyboard
1577	// interaction, but its native host outline clips and competes with the focus
1578	// indicators on its actual controls.
1579	className="@container h-full overflow-auto [scrollbar-gutter:stable]"
1580	containerRef={scrollerRef}
1581	viewerRef={setViewer}
1582	items={items}
1583	selectedLines={selectedLines}
1584	onSelectedLinesChange={setSelectedLines}
1585	options={diffViewOptions}
1586	// The viewer owns the scroll container, so the sentinel that asks for the next slice
1587	// has to live inside it — at the end of the files, where reaching it means the reader
1588	// is running out of diff.
1589	renderCodeViewFooter={renderCodeViewFooter}
1590	renderHeaderPrefix={renderHeaderPrefix}
1591	renderHeaderMetadata={renderHeaderMetadata}
1592	renderAnnotation={renderAnnotation}
1593	// Find can ask again before the unfolded file arrives, so this unfolds and never folds.
1594	onRevealSearchMatch={(item) =>
1595	setToggledFiles((current) =>
1596	toggleFileDiffFoldForViewed(item.id, false, effectiveFoldOverride, current),
1597	)
1598	}
1599	unsafeCSSExtra={REPLACE_FILE_COUNTS_CSS}
1600	/>
1601	</div>
1602	{fileTreeOpen ? (
1603	<aside className="flex w-[min(20rem,40%)] min-w-48 shrink-0 border-l border-border/60">
1604	<DiffFileTree
1605	ariaLabel={`Pull request #${detail.number} files`}
1606	entries={fileTreeEntries}
1607	onSelectFile={revealFile}
1608	// The tree lists only what has arrived; a footer says so while the diff is still
1609	// paging, and lets the reader pull the rest in without scrolling for it.
1610	footer={
1611	nextCursor === null ? null : (
1612	<div className="shrink-0 border-t border-border/60 p-2">
1613	<Button
1614	type="button"
1615	size="xs"
1616	variant="outline"
1617	className="w-full"
1618	disabled={diffQuery.isPending}
1619	onClick={diffQuery.error !== null ? () => diffQuery.refresh() : loadNextSlice}
1620	>
1621	{diffQuery.error !== null
1622	? "Retry"
1623	: diffQuery.isPending
1624	? "Loading more files..."
1625	: "Load more files"}
1626	</Button>
1627	</div>
1628	)
1629	}
1630	/>
1631	</aside>
1632	) : null}
1633	</div>
1634	{unstructured}
1635	</div>
1636	);
1637	}
1638
1639	export default PullRequestCodeTab;