@kitlangton/ghui 0.1.21 → 0.2.0

package/src/ui/FooterHints.tsx

@@ -15,7 +15,7 @@ interface HintsContext {
 	readonly showFilterClear: boolean
 	readonly detailFullView: boolean
 	readonly diffFullView: boolean
-	readonly diffCommentMode: boolean
+	readonly diffRangeActive: boolean
 	readonly hasSelection: boolean
 	readonly canCloseSelection: boolean
 	readonly hasError: boolean
@@ -33,26 +33,17 @@ const filterEditingHints: readonly HintItem[] = [
 	{ key: "ctrl-w", label: "word" },
 ]
 
-const diffCommentModeHints: readonly HintItem[] = [
-	{ key: "↑↓", label: "line" },
-	{ key: "pgup/pgdn", label: "jump" },
-	{ key: "←→", label: "side" },
-	{ key: "enter", label: "open" },
-	{ key: "a", label: "comment" },
-	{ key: "c", label: "done" },
-	{ key: "[]", label: "files" },
-	{ key: "esc", label: "back" },
-]
-
-const diffViewHints: readonly HintItem[] = [
+const diffViewHints = (ctx: HintsContext): readonly HintItem[] => [
 	{ key: "esc", label: "back" },
-	{ key: "v", label: "view" },
-	{ key: "w", label: "wrap" },
-	{ key: "c", label: "comment" },
+	{ key: "↑↓", label: ctx.diffRangeActive ? "range" : "line" },
+	{ key: "enter", label: ctx.diffRangeActive ? "comment" : "open" },
+	{ key: "v", label: ctx.diffRangeActive ? "clear" : "range" },
+	{ key: "n/p", label: "threads" },
 	{ key: "[]", label: "files" },
+	{ key: "V", label: "view" },
+	{ key: "w", label: "wrap" },
 	{ key: "r", label: "reload" },
 	{ key: "o", label: "open" },
-	{ key: "q", label: "quit" },
 ]
 
 const detailFullViewHints = (ctx: HintsContext): readonly HintItem[] => [
@@ -91,7 +82,7 @@ const defaultHints = (ctx: HintsContext): readonly HintItem[] => {
 
 const footerHints = (ctx: HintsContext): readonly HintItem[] => {
 	if (ctx.filterEditing) return filterEditingHints
-	if (ctx.diffFullView) return ctx.diffCommentMode ? diffCommentModeHints : diffViewHints
+	if (ctx.diffFullView) return diffViewHints(ctx)
 	if (ctx.detailFullView) return detailFullViewHints(ctx)
 	return defaultHints(ctx)
 }

package/src/ui/LoadingLogo.tsx

@@ -0,0 +1,75 @@
+import { TextAttributes } from "@opentui/core"
+import { colors, mixHex } from "./colors.js"
+import type { DetailPlaceholderContent } from "./DetailsPane.js"
+import { centerCell, Filler, PlainLine, TextLine } from "./primitives.js"
+import { SPINNER_FRAMES } from "./spinner.js"
+
+type LoadingLogoContent = Pick<DetailPlaceholderContent, "hint">
+
+const GHUI_LOGO = ["█▀▀▀ █  █ █  █ ▀█▀", "█ ▀█ █▀▀█ █  █  █ ", "▀▀▀▀ ▀  ▀ ▀▀▀▀ ▀▀▀"] as const
+
+const LEFT_WORD_WIDTH = 9
+const LOGO_WIDTH = Math.max(...GHUI_LOGO.map((line) => line.length))
+const LOGO_HEIGHT = GHUI_LOGO.length
+const LOGO_BLOCK_HEIGHT = LOGO_HEIGHT + 2
+
+const logoColor = (x: number) => (x < LEFT_WORD_WIDTH ? mixHex(colors.accent, colors.text, 0.14) : mixHex(colors.accent, colors.text, 0.52))
+
+const LOGO_COLORS = Array.from({ length: LOGO_WIDTH }, (_, index) => logoColor(index))
+const LOGO_ROWS = GHUI_LOGO.map((line) => Array.from(line.padEnd(LOGO_WIDTH, " "), (char, index) => ({ char, color: LOGO_COLORS[index]! })))
+
+const LogoRow = ({ row, left }: { row: (typeof LOGO_ROWS)[number]; left: number }) => (
+	<TextLine>
+		<span fg={colors.muted}>{" ".repeat(left)}</span>
+		{row.map(({ char, color }, index) =>
+			char === " " ? (
+				<span key={index}> </span>
+			) : (
+				<span key={index} fg={color} attributes={TextAttributes.BOLD}>
+					{char}
+				</span>
+			),
+		)}
+	</TextLine>
+)
+
+export const LoadingLogo = ({ content, width, frame }: { content: LoadingLogoContent; width: number; frame: number }) => {
+	const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
+	const logoLeft = Math.max(0, Math.floor((width - LOGO_WIDTH) / 2))
+
+	return (
+		<box flexDirection="column" width={width}>
+			{LOGO_ROWS.map((row, index) => (
+				<LogoRow key={index} row={row} left={logoLeft} />
+			))}
+			<box height={1} />
+			<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
+		</box>
+	)
+}
+
+export const LoadingLogoPane = ({ content, width, height, frame }: { content: LoadingLogoContent; width: number; height: number; frame: number }) => {
+	if (width < LOGO_WIDTH + 2 || height < LOGO_BLOCK_HEIGHT) {
+		const spinner = SPINNER_FRAMES[frame % SPINNER_FRAMES.length]!
+		const topRows = Math.max(0, Math.floor((height - 1) / 2))
+		const bottomRows = Math.max(0, height - topRows - 1)
+		return (
+			<box height={height} flexDirection="column">
+				<Filler rows={topRows} prefix="loading-logo-compact-top" />
+				<PlainLine text={centerCell(`${spinner} ${content.hint}`, width)} fg={colors.muted} />
+				<Filler rows={bottomRows} prefix="loading-logo-compact-bottom" />
+			</box>
+		)
+	}
+
+	const topRows = Math.max(0, Math.floor((height - LOGO_BLOCK_HEIGHT) / 2))
+	const bottomRows = Math.max(0, height - topRows - LOGO_BLOCK_HEIGHT)
+
+	return (
+		<box height={height} flexDirection="column">
+			<Filler rows={topRows} prefix="loading-logo-top" />
+			<LoadingLogo content={content} width={width} frame={frame} />
+			<Filler rows={bottomRows} prefix="loading-logo-bottom" />
+		</box>
+	)
+}

package/src/ui/PullRequestDiffPane.tsx

@@ -2,7 +2,8 @@ import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/c
 import { useMemo, type Ref } from "react"
 import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
+import { CommentBodyLine, commentCountText, commentMetaSegments, CommentSegmentsLine } from "./comments.js"
+import { createDiffSyntaxStyle, diffCommentAnchorLabel, diffCommentLineLabel, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileIndexAtLine, type DiffFileStats, type DiffView, type DiffWhitespaceMode, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
 import { DiffStats } from "./diffStats.js"
 import { Divider, fitCell, PaddedRow, PlainLine, TextLine } from "./primitives.js"
@@ -71,14 +72,15 @@ export const PullRequestDiffPane = ({
 	stackedFiles,
 	scrollTop,
 	view,
+	whitespaceMode,
 	wrapMode,
 	paneWidth,
 	height,
 	loadingIndicator,
 	scrollRef,
 	setDiffRef,
-	commentMode,
 	selectedCommentAnchor,
+	selectedCommentLabel,
 	selectedCommentThread,
 	onSelectCommentLine,
 	themeId,
@@ -88,14 +90,15 @@ export const PullRequestDiffPane = ({
 	stackedFiles: readonly StackedDiffFilePatch[]
 	scrollTop: number
 	view: DiffView
+	whitespaceMode: DiffWhitespaceMode
 	wrapMode: DiffWrapMode
 	paneWidth: number
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
 	setDiffRef: (index: number, diff: DiffRenderable | null) => void
-	commentMode: boolean
 	selectedCommentAnchor: StackedDiffCommentAnchor | null
+	selectedCommentLabel: string | null
 	selectedCommentThread: readonly PullRequestReviewComment[]
 	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
 	themeId: ThemeId
@@ -130,29 +133,33 @@ export const PullRequestDiffPane = ({
 	}
 
 	if (readyFiles.length === 0 || stackedFiles.length === 0) {
-		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
+		return <LoadingPane content={{ title: whitespaceMode === "ignore" ? "No non-whitespace diff" : "No diff", hint: whitespaceMode === "ignore" ? "Use the command palette to show whitespace changes" : "This PR has no patch contents" }} width={paneWidth} height={height} />
 	}
 
-	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
-	const commentPeek = commentMode && selectedCommentAnchor && selectedCommentThread.length > 0
+	const hasSelectedCommentAnchor = selectedCommentAnchor !== null
+	const commentPeek = hasSelectedCommentAnchor && selectedCommentThread.length > 0
 		? selectedCommentThread[selectedCommentThread.length - 1]!
 		: null
-	const commentPeekCount = selectedCommentThread.length === 1 ? "1 comment" : `${selectedCommentThread.length} comments`
-	const commentPeekBody = commentPeek?.body.split("\n")[0]?.trim() || "(empty comment)"
 	const commentPeekMeta = commentPeek && selectedCommentAnchor
-		? `${selectedSideLabel ?? "line"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}  ${commentPeek.author}  ${commentPeekCount}  enter thread  a comment`
-		: ""
+		? commentMetaSegments({
+			item: commentPeek,
+			markerLabel: diffCommentLineLabel(selectedCommentAnchor),
+			groups: [
+				[{ text: commentCountText(selectedCommentThread.length), fg: colors.muted }],
+				[{ text: "enter", fg: colors.text }, { text: " thread", fg: colors.muted }],
+			],
+		})
+		: []
 	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
-	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
-	const stickyArrayIndex = stickyFile ? stackedFiles.indexOf(stickyFile) : -1
+	const stickyArrayIndex = stackedDiffFileIndexAtLine(stackedFiles, stickyScrollTop)
+	const stickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex] : stackedFiles[0]
 	const incomingStickyFile = stickyArrayIndex >= 0 ? stackedFiles[stickyArrayIndex + 1] : undefined
 	const incomingHeaderDistance = incomingStickyFile ? incomingStickyFile.headerLine - stickyScrollTop : Number.POSITIVE_INFINITY
 	const incomingFile = incomingHeaderDistance === 1 ? incomingStickyFile : undefined
 	const stickyCommentLabelFor = (stackedFile: StackedDiffFilePatch | undefined) => {
-		if (!commentMode) return ""
-		if (!selectedCommentAnchor) return "  c no lines"
+		if (!selectedCommentAnchor) return "  no lines"
 		if (selectedCommentAnchor.fileIndex !== stackedFile?.index) return ""
-		return `  ${selectedCommentAnchor.side === "RIGHT" ? "right" : "left"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+		return `  ${selectedCommentLabel ?? diffCommentAnchorLabel(selectedCommentAnchor)}`
 	}
 	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
 	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
@@ -172,7 +179,7 @@ export const PullRequestDiffPane = ({
 		<box height={height} flexDirection="column">
 			<DiffPaneHeader pullRequest={pullRequest} paneWidth={paneWidth} />
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
+			<scrollbox ref={scrollRef} focusable={false} flexGrow={1} scrollY scrollX={false} onMouseDown={handleDiffMouseDown}>
 				{stackedFiles.map((stackedFile) => (
 					<box key={`${pullRequest.url}-${stackedFile.index}-${view}-${wrapMode}`} flexDirection="column" flexShrink={0}>
 						{stackedFile.index > 0 ? <Divider width={paneWidth} /> : null}
@@ -229,10 +236,10 @@ export const PullRequestDiffPane = ({
 				<>
 					<Divider width={paneWidth} />
 					<PaddedRow>
-						<PlainLine text={fitCell(commentPeekMeta, Math.max(1, paneWidth - 2))} fg={colors.count} />
+						<CommentSegmentsLine segments={commentPeekMeta} />
 					</PaddedRow>
 					<PaddedRow>
-						<PlainLine text={fitCell(commentPeekBody, Math.max(1, paneWidth - 2))} fg={colors.text} />
+						<CommentBodyLine body={commentPeek.body} width={Math.max(1, paneWidth - 2)} />
 					</PaddedRow>
 				</>
 			) : null}

package/src/ui/PullRequestList.tsx

@@ -69,6 +69,7 @@ export const buildPullRequestListRows = ({
 	loadedCount,
 	hasMore,
 	isLoadingMore,
+	loadingIndicator = "-",
 }: {
 	readonly groups: PullRequestGroups
 	readonly status: LoadStatus
@@ -78,6 +79,7 @@ export const buildPullRequestListRows = ({
 	readonly loadedCount: number
 	readonly hasMore: boolean
 	readonly isLoadingMore: boolean
+	readonly loadingIndicator?: string
 }): readonly PullRequestListRow[] => {
 	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
 	const rows: PullRequestListRow[] = [{ _tag: "title" }]
@@ -90,7 +92,7 @@ export const buildPullRequestListRows = ({
 		for (const pullRequest of pullRequests) rows.push({ _tag: "pull-request", pullRequest, groupPullRequests: pullRequests })
 	}
 	if (status === "ready" && itemCount > 0 && (hasMore || isLoadingMore)) {
-		rows.push({ _tag: "load-more", text: isLoadingMore ? `- Loading more pull requests... (${loadedCount} loaded)` : `- ${loadedCount} loaded, more available` })
+		rows.push({ _tag: "load-more", text: isLoadingMore ? `${loadingIndicator} Loading more pull requests... (${loadedCount} loaded)` : `- ${loadedCount} loaded, more available` })
 	}
 	return rows
 }
@@ -152,6 +154,7 @@ export const PullRequestList = ({
 	loadedCount,
 	hasMore,
 	isLoadingMore,
+	loadingIndicator,
 	onSelectPullRequest,
 }: {
 	groups: PullRequestGroups
@@ -165,9 +168,10 @@ export const PullRequestList = ({
 	loadedCount: number
 	hasMore: boolean
 	isLoadingMore: boolean
+	loadingIndicator: string
 	onSelectPullRequest: (url: string) => void
 }) => {
-	const rows = buildPullRequestListRows({ groups, status, error, filterText, showFilterBar, loadedCount, hasMore, isLoadingMore })
+	const rows = buildPullRequestListRows({ groups, status, error, filterText, showFilterBar, loadedCount, hasMore, isLoadingMore, loadingIndicator })
 
 	return (
 		<box width={contentWidth} flexDirection="column">

package/src/ui/comments.tsx

@@ -0,0 +1,143 @@
+import { TextAttributes } from "@opentui/core"
+import { formatRelativeDate } from "../date.js"
+import type { DiffCommentSide } from "../domain.js"
+import { colors } from "./colors.js"
+import { fitCell, TextLine } from "./primitives.js"
+
+export interface CommentSegment {
+	readonly text: string
+	readonly fg: string
+	readonly bold?: boolean
+}
+
+export interface CommentDisplayLine {
+	readonly key: string
+	readonly segments: readonly CommentSegment[]
+}
+
+export interface CommentDisplayItem {
+	readonly id: string
+	readonly author: string
+	readonly body: string
+	readonly createdAt: Date | null
+	readonly side?: DiffCommentSide | null
+}
+
+export const commentCountText = (count: number) => count === 1 ? "1 comment" : `${count} comments`
+
+export const commentSideColor = (side: DiffCommentSide | null | undefined) =>
+	side === "LEFT" ? colors.status.failing : side === "RIGHT" ? colors.status.passing : colors.count
+
+const commentTimestamp = (date: Date | null) => {
+	if (!date) return ""
+	const ageMs = Date.now() - date.getTime()
+	const minuteMs = 60_000
+	const hourMs = 60 * minuteMs
+	if (ageMs < minuteMs) return "just now"
+	if (ageMs < hourMs) return `${Math.max(1, Math.floor(ageMs / minuteMs))}m ago`
+	if (ageMs < 24 * hourMs) return `${Math.max(1, Math.floor(ageMs / hourMs))}h ago`
+	return formatRelativeDate(date)
+}
+
+const inlineCommentSegments = (text: string, fg = colors.text): readonly CommentSegment[] =>
+	text.split(/(`[^`]+`)/g).filter((part) => part.length > 0).map((part) =>
+		part.startsWith("`") && part.endsWith("`")
+			? { text: part.slice(1, -1), fg: colors.inlineCode }
+			: { text: part, fg },
+	)
+
+const wrapCommentText = (body: string, width: number) => {
+	const safeWidth = Math.max(1, width)
+	const lines = body.trim().length === 0 ? ["(empty comment)"] : body.replace(/\r/g, "").trim().split("\n")
+	return lines.flatMap((line) => {
+		const trimmed = line.trim()
+		if (trimmed.length === 0) return []
+		const wrapped: string[] = []
+		for (let index = 0; index < trimmed.length; index += safeWidth) {
+			wrapped.push(trimmed.slice(index, index + safeWidth))
+		}
+		return wrapped
+	})
+}
+
+const appendMetaGroup = (segments: CommentSegment[], group: readonly CommentSegment[]) => {
+	if (group.length === 0) return
+	segments.push({ text: " · ", fg: colors.muted }, ...group)
+}
+
+export const commentMetaSegments = ({
+	item,
+	markerLabel,
+	groups = [],
+}: {
+	readonly item: CommentDisplayItem
+	readonly markerLabel?: string | null | undefined
+	readonly groups?: readonly (readonly CommentSegment[])[] | undefined
+}): readonly CommentSegment[] => {
+	const sideColor = commentSideColor(item.side)
+	const timestamp = commentTimestamp(item.createdAt)
+	const segments: CommentSegment[] = [
+		{ text: "•", fg: colors.count, bold: true },
+		...(markerLabel ? [{ text: ` ${markerLabel}`, fg: sideColor, bold: true }] : []),
+		{ text: " ", fg: colors.muted },
+		{ text: item.author, fg: colors.count, bold: true },
+	]
+	if (timestamp) appendMetaGroup(segments, [{ text: timestamp, fg: colors.muted }])
+	for (const group of groups) appendMetaGroup(segments, group)
+	return segments
+}
+
+export const commentBodyRows = ({
+	keyPrefix,
+	body,
+	width,
+}: {
+	readonly keyPrefix: string
+	readonly body: string
+	readonly width: number
+}): readonly CommentDisplayLine[] =>
+	wrapCommentText(body, Math.max(1, width - 2)).map((line, index) => ({
+		key: `${keyPrefix}:body:${index}`,
+		segments: [
+			{ text: "│ ", fg: colors.muted },
+			...inlineCommentSegments(line),
+		],
+	}))
+
+export const commentDisplayRows = ({
+	item,
+	width,
+	markerLabel,
+	groups,
+}: {
+	readonly item: CommentDisplayItem
+	readonly width: number
+	readonly markerLabel?: string | null | undefined
+	readonly groups?: readonly (readonly CommentSegment[])[] | undefined
+}): readonly CommentDisplayLine[] => [
+	{ key: `${item.id}:meta`, segments: commentMetaSegments({ item, markerLabel, groups }) },
+	...commentBodyRows({ keyPrefix: item.id, body: item.body, width }),
+]
+
+export const firstCommentBodyLine = (body: string) => {
+	const text = body.trim().length > 0 ? body : "(empty comment)"
+	const newlineIndex = text.indexOf("\n")
+	return (newlineIndex >= 0 ? text.slice(0, newlineIndex) : text).trim() || "(empty comment)"
+}
+
+export const CommentSegmentsLine = ({ segments }: { segments: readonly CommentSegment[] }) => (
+	<TextLine>
+		{segments.map((segment, index) => segment.bold ? (
+			<span key={index} fg={segment.fg} attributes={TextAttributes.BOLD}>{segment.text}</span>
+		) : (
+			<span key={index} fg={segment.fg}>{segment.text}</span>
+		))}
+	</TextLine>
+)
+
+export const CommentBodyLine = ({ body, width }: { body: string; width: number }) => (
+	<CommentSegmentsLine segments={[
+		{ text: "│ ", fg: colors.muted },
+		{ text: fitCell(firstCommentBodyLine(body), Math.max(1, width - 2)), fg: colors.text },
+	]} />
+)

package/src/ui/diff.ts

@@ -9,6 +9,9 @@ export type DiffView = Schema.Schema.Type<typeof DiffView>
 export const DiffWrapMode = Schema.Literals(["none", "word"])
 export type DiffWrapMode = Schema.Schema.Type<typeof DiffWrapMode>
 
+export const DiffWhitespaceMode = Schema.Literals(["ignore", "show"])
+export type DiffWhitespaceMode = Schema.Schema.Type<typeof DiffWhitespaceMode>
+
 export const DiffCommentKind = Schema.Literals(["addition", "deletion", "context"])
 export type DiffCommentKind = Schema.Schema.Type<typeof DiffCommentKind>
 
@@ -154,6 +157,153 @@ const normalizeHunkLineCounts = (patch: string) => {
 	return normalized.join("\n")
 }
 
+const whitespaceComparableText = (text: string) => text.replace(/\s+/g, "")
+const MAX_WHITESPACE_LCS_CELLS = 40_000
+
+const linearWhitespaceEquivalentMatches = (deletions: readonly string[], additions: readonly string[]) => {
+	const additionsByKey = new Map<string, number[]>()
+	const cursors = new Map<string, number>()
+	for (let index = 0; index < additions.length; index++) {
+		const key = whitespaceComparableText(additions[index]!.slice(1))
+		let bucket = additionsByKey.get(key)
+		if (!bucket) {
+			bucket = []
+			additionsByKey.set(key, bucket)
+		}
+		bucket.push(index)
+	}
+
+	const matches: Array<{ readonly oldIndex: number; readonly newIndex: number }> = []
+	let minimumNewIndex = 0
+	for (let oldIndex = 0; oldIndex < deletions.length; oldIndex++) {
+		const key = whitespaceComparableText(deletions[oldIndex]!.slice(1))
+		const candidates = additionsByKey.get(key)
+		if (!candidates) continue
+		let cursor = cursors.get(key) ?? 0
+		while (cursor < candidates.length && candidates[cursor]! < minimumNewIndex) cursor++
+		const newIndex = candidates[cursor]
+		if (newIndex === undefined) continue
+		matches.push({ oldIndex, newIndex })
+		cursors.set(key, cursor + 1)
+		minimumNewIndex = newIndex + 1
+	}
+	return matches
+}
+
+const whitespaceEquivalentMatches = (deletions: readonly string[], additions: readonly string[]) => {
+	if ((deletions.length + 1) * (additions.length + 1) > MAX_WHITESPACE_LCS_CELLS) {
+		return linearWhitespaceEquivalentMatches(deletions, additions)
+	}
+
+	const oldKeys = deletions.map((line) => whitespaceComparableText(line.slice(1)))
+	const newKeys = additions.map((line) => whitespaceComparableText(line.slice(1)))
+	const lengths = Array.from({ length: oldKeys.length + 1 }, () => Array<number>(newKeys.length + 1).fill(0))
+
+	for (let oldIndex = oldKeys.length - 1; oldIndex >= 0; oldIndex--) {
+		for (let newIndex = newKeys.length - 1; newIndex >= 0; newIndex--) {
+			lengths[oldIndex]![newIndex] = oldKeys[oldIndex] === newKeys[newIndex]
+				? lengths[oldIndex + 1]![newIndex + 1]! + 1
+				: Math.max(lengths[oldIndex + 1]![newIndex]!, lengths[oldIndex]![newIndex + 1]!)
+		}
+	}
+
+	const matches: Array<{ readonly oldIndex: number; readonly newIndex: number }> = []
+	let oldIndex = 0
+	let newIndex = 0
+	while (oldIndex < oldKeys.length && newIndex < newKeys.length) {
+		if (oldKeys[oldIndex] === newKeys[newIndex]) {
+			matches.push({ oldIndex, newIndex })
+			oldIndex++
+			newIndex++
+		} else if (lengths[oldIndex + 1]![newIndex]! >= lengths[oldIndex]![newIndex + 1]!) {
+			oldIndex++
+		} else {
+			newIndex++
+		}
+	}
+
+	return matches
+}
+
+const mergeWhitespaceEquivalentChanges = (deletions: readonly string[], additions: readonly string[]) => {
+	const matches = whitespaceEquivalentMatches(deletions, additions)
+	const merged: string[] = []
+	let oldCursor = 0
+	let newCursor = 0
+
+	for (const match of matches) {
+		while (oldCursor < match.oldIndex) merged.push(deletions[oldCursor++]!)
+		while (newCursor < match.newIndex) merged.push(additions[newCursor++]!)
+		merged.push(` ${additions[match.newIndex]!.slice(1)}`)
+		oldCursor = match.oldIndex + 1
+		newCursor = match.newIndex + 1
+	}
+
+	while (oldCursor < deletions.length) merged.push(deletions[oldCursor++]!)
+	while (newCursor < additions.length) merged.push(additions[newCursor++]!)
+	return merged
+}
+
+const minimizeWhitespaceHunk = (header: string, body: readonly string[]) => {
+	const minimized: string[] = []
+	let deletions: string[] = []
+	let additions: string[] = []
+
+	const flushChangeBlock = () => {
+		if (deletions.length === 0 && additions.length === 0) return
+		minimized.push(...mergeWhitespaceEquivalentChanges(deletions, additions))
+		deletions = []
+		additions = []
+	}
+
+	for (const line of body) {
+		const firstChar = line[0]
+		if (firstChar === "-") {
+			deletions.push(line)
+			continue
+		}
+
+		if (firstChar === "+") {
+			additions.push(line)
+			continue
+		}
+
+		flushChangeBlock()
+		minimized.push(line)
+	}
+
+	flushChangeBlock()
+	return minimized.some((line) => line[0] === "-" || line[0] === "+") ? [header, ...minimized] : []
+}
+
+export const minimizeWhitespacePatch = (patch: string) => {
+	const lines = patch.split("\n")
+	const minimized: string[] = []
+
+	for (let index = 0; index < lines.length;) {
+		const line = lines[index]!
+		if (!line.match(hunkHeaderPattern)) {
+			minimized.push(line)
+			index++
+			continue
+		}
+
+		let end = index + 1
+		while (end < lines.length && !lines[end]!.match(hunkHeaderPattern) && !lines[end]!.startsWith("diff --git ")) end++
+		minimized.push(...minimizeWhitespaceHunk(line, lines.slice(index + 1, end)))
+		index = end
+	}
+
+	return normalizeHunkLineCounts(minimized.join("\n")).trimEnd()
+}
+
+export const minimizeWhitespaceDiffFiles = (files: readonly DiffFilePatch[]): readonly DiffFilePatch[] =>
+	files.flatMap((file) => {
+		const patch = minimizeWhitespacePatch(file.patch)
+		if (file.patch.split("\n").some((line) => line.match(hunkHeaderPattern)) && !patch.split("\n").some((line) => line.match(hunkHeaderPattern))) return []
+		return [{ ...file, patch }]
+	})
+
 export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
 	const trimmed = patch.trimEnd()
 	if (trimmed.length === 0) return []
@@ -200,8 +350,24 @@ export const buildStackedDiffFiles = (
 	})
 }
 
+export const stackedDiffFileIndexAtLine = (stackedFiles: readonly StackedDiffFilePatch[], line: number) => {
+	let low = 0
+	let high = stackedFiles.length - 1
+	let match = -1
+	while (low <= high) {
+		const mid = (low + high) >>> 1
+		if (stackedFiles[mid]!.headerLine <= line) {
+			match = mid
+			low = mid + 1
+		} else {
+			high = mid - 1
+		}
+	}
+	return match
+}
+
 export const stackedDiffFileAtLine = (stackedFiles: readonly StackedDiffFilePatch[], line: number) =>
-	stackedFiles.reduce<StackedDiffFilePatch | undefined>((current, file) => file.headerLine <= line ? file : current, undefined)
+	stackedFiles[stackedDiffFileIndexAtLine(stackedFiles, line)]
 
 export const diffStatText = (pullRequest: PullRequestItem) => {
 	if (!pullRequest.detailLoaded) return "loading details"
@@ -212,7 +378,11 @@ export const diffStatText = (pullRequest: PullRequestItem) => {
 
 export const diffCommentLocationKey = (location: Pick<PullRequestReviewComment, "path" | "side" | "line">) => `${location.path}:${location.side}:${location.line}`
 
-export const diffCommentAnchorKey = diffCommentLocationKey
+export const diffCommentSideLabel = (anchor: Pick<DiffCommentAnchor, "side">) => anchor.side === "RIGHT" ? "→" : "←"
+
+export const diffCommentLineLabel = (anchor: Pick<DiffCommentAnchor, "side" | "line">) => `${anchor.side === "RIGHT" ? "+" : "-"}${anchor.line}`
+
+export const diffCommentAnchorLabel = (anchor: Pick<DiffCommentAnchor, "side" | "line">) => `${diffCommentSideLabel(anchor)} ${diffCommentLineLabel(anchor)}`
 
 type PendingDiffCommentAnchor = Omit<DiffCommentAnchor, "renderLine">
 
@@ -244,10 +414,6 @@ export const diffFileStats = (file: DiffFilePatch): DiffFileStats => {
 	return { additions, deletions }
 }
 
-export const diffFileStatText = (file: DiffFilePatch) => {
-	return diffFileStatsText(diffFileStats(file))
-}
-
 export const diffFileStatsText = (stats: DiffFileStats) => {
 	return [
 		stats.additions > 0 ? `+${stats.additions}` : null,
@@ -347,6 +513,32 @@ export const getStackedDiffCommentAnchors = (
 		renderLine: stackedFile.diffStartLine + anchor.renderLine,
 	})))
 
+export const verticalDiffAnchor = <Anchor extends Pick<DiffCommentAnchor, "renderLine" | "side">>(
+	anchors: readonly Anchor[],
+	currentAnchor: Anchor | null,
+	delta: number,
+	preferredSide: DiffCommentSide | null = null,
+) => {
+	if (anchors.length === 0) return null
+	const rows = [...new Set(anchors.map((anchor) => anchor.renderLine))].sort((left, right) => left - right)
+	const current = currentAnchor && anchors.includes(currentAnchor) ? currentAnchor : anchors[0]!
+	const currentRowIndex = Math.max(0, rows.indexOf(current.renderLine))
+	const nextRow = rows[Math.max(0, Math.min(rows.length - 1, currentRowIndex + delta))]
+	if (nextRow === undefined) return null
+	const targetSide = preferredSide ?? current.side
+	return anchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === targetSide)
+		?? anchors.find((anchor) => anchor.renderLine === nextRow)
+		?? null
+}
+
+export const diffAnchorOnSide = <Anchor extends Pick<DiffCommentAnchor, "renderLine" | "side">>(
+	anchors: readonly Anchor[],
+	currentAnchor: Anchor | null,
+	side: DiffCommentSide,
+) => currentAnchor
+	? anchors.find((anchor) => anchor.renderLine === currentAnchor.renderLine && anchor.side === side) ?? null
+	: null
+
 export const nearestDiffCommentAnchorIndex = (anchors: readonly DiffCommentAnchor[], renderLine: number) => {
 	if (anchors.length === 0) return 0
 	const nextIndex = anchors.findIndex((anchor) => anchor.renderLine >= renderLine)