@kitlangton/ghui 0.1.18 → 0.1.20

package/src/ui/PullRequestList.tsx

@@ -1,19 +1,25 @@
 import { TextAttributes } from "@opentui/core"
-import type { PullRequestItem } from "../domain.js"
+import type { LoadStatus, PullRequestItem } from "../domain.js"
 import { daysOpen } from "../date.js"
 import { colors } from "./colors.js"
 import { fitCell, PlainLine, SectionTitle, TextLine } from "./primitives.js"
-import { checkLabel, repoColor, reviewIcon, statusColor } from "./pullRequests.js"
+import { pullRequestRowDisplay, repoColor, reviewIcon } from "./pullRequests.js"
 
-export type LoadStatus = "loading" | "ready" | "error"
 export type PullRequestGroups = Array<[string, PullRequestItem[]]>
 
+export type PullRequestListRow =
+	| { readonly _tag: "title" }
+	| { readonly _tag: "filter" }
+	| { readonly _tag: "message"; readonly text: string; readonly color: string }
+	| { readonly _tag: "group"; readonly repository: string; readonly pullRequests: readonly PullRequestItem[] }
+	| { readonly _tag: "pull-request"; readonly pullRequest: PullRequestItem; readonly groupPullRequests: readonly PullRequestItem[] }
+	| { readonly _tag: "load-more"; readonly text: string }
+
 const GROUP_ICON = "◆"
 
-const getRowLayout = (contentWidth: number, numberWidth = 6) => {
+const getRowLayout = (contentWidth: number, numberWidth: number, ageWidth: number) => {
 	const reviewWidth = 1
 	const checkWidth = 6
-	const ageWidth = 4
 	const fixedWidth = reviewWidth + 1 + numberWidth + 1 + checkWidth + ageWidth
 	const titleWidth = Math.max(8, contentWidth - fixedWidth)
 	return { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth }
@@ -25,6 +31,12 @@ const groupNumberWidth = (pullRequests: readonly PullRequestItem[]) => {
 	return maxLen + 1
 }
 
+const groupAgeWidth = (pullRequests: readonly PullRequestItem[]) => {
+	if (pullRequests.length === 0) return 4
+	const maxLen = Math.max(...pullRequests.map((pr) => `${daysOpen(pr.createdAt)}d`.length))
+	return Math.max(4, maxLen + 1)
+}
+
 const MatchedCell = ({ text, width, query, align = "left" }: { text: string; width: number; query: string; align?: "left" | "right" }) => {
 	const fitted = fitCell(text, width, align)
 	const needle = query.trim().toLowerCase()
@@ -48,11 +60,53 @@ const GroupTitle = ({ label, color, filterText }: { label: string; color: string
 	</TextLine>
 )
 
+export const buildPullRequestListRows = ({
+	groups,
+	status,
+	error,
+	filterText,
+	showFilterBar,
+	loadedCount,
+	hasMore,
+	isLoadingMore,
+}: {
+	readonly groups: PullRequestGroups
+	readonly status: LoadStatus
+	readonly error: string | null
+	readonly filterText: string
+	readonly showFilterBar: boolean
+	readonly loadedCount: number
+	readonly hasMore: boolean
+	readonly isLoadingMore: boolean
+}): readonly PullRequestListRow[] => {
+	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
+	const rows: PullRequestListRow[] = [{ _tag: "title" }]
+	if (showFilterBar) rows.push({ _tag: "filter" })
+	if (status === "loading" && itemCount === 0) rows.push({ _tag: "message", text: "- Loading pull requests...", color: colors.muted })
+	if (status === "error") rows.push({ _tag: "message", text: `- ${error ?? "Could not load pull requests."}`, color: colors.error })
+	if (status === "ready" && itemCount === 0) rows.push({ _tag: "message", text: filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests.", color: colors.muted })
+	for (const [repository, pullRequests] of groups) {
+		rows.push({ _tag: "group", repository, pullRequests })
+		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` })
+	}
+	return rows
+}
+
+export const pullRequestListRowIndex = (rows: readonly PullRequestListRow[], url: string | null) => {
+	if (!url) return null
+	const index = rows.findIndex((row) => row._tag === "pull-request" && row.pullRequest.url === url)
+	return index >= 0 ? index : null
+}
+
 const PullRequestRow = ({
 	pullRequest,
 	selected,
 	contentWidth,
 	numWidth,
+	ageColWidth,
 	filterText,
 	onSelect,
 }: {
@@ -60,31 +114,25 @@ const PullRequestRow = ({
 	selected: boolean
 	contentWidth: number
 	numWidth: number
+	ageColWidth: number
 	filterText: string
 	onSelect: () => void
 }) => {
-	const isClosed = pullRequest.state === "closed"
-	const isMerged = pullRequest.state === "merged"
-	const isFinal = isClosed || isMerged
-	const checkText = isMerged ? "merged" : isClosed ? "closed" : checkLabel(pullRequest)?.replace(/^checks\s+/, "") ?? ""
 	const ageText = `${daysOpen(pullRequest.createdAt)}d`
-	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth)
+	const { reviewWidth, checkWidth, ageWidth, numberWidth, titleWidth } = getRowLayout(contentWidth, numWidth, ageColWidth)
 	const rowWidth = reviewWidth + 1 + numberWidth + 1 + titleWidth + checkWidth + ageWidth
 	const fillerWidth = Math.max(0, contentWidth - rowWidth)
-	const indicatorColor = isMerged ? colors.status.passing : isClosed ? colors.muted : pullRequest.autoMergeEnabled ? colors.accent : statusColor(pullRequest.reviewStatus)
-	const rowTextColor = selected ? colors.selectedText : isFinal ? colors.muted : colors.text
-	const numberColor = selected ? colors.accent : isFinal ? colors.muted : colors.count
-	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
+	const display = pullRequestRowDisplay(pullRequest, selected)
 
 	return (
-		<box height={1} onMouseDown={onSelect}>
-			<TextLine fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
-				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
+		<box width={contentWidth} height={1} onMouseDown={onSelect}>
+			<TextLine width={contentWidth} fg={display.rowFg} bg={selected ? colors.selectedBg : undefined}>
+				<span fg={display.indicatorFg}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
 				<span> </span>
-				<span fg={numberColor}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
+				<span fg={display.numberFg}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
 				<span> </span>
 				<span><MatchedCell text={pullRequest.title} width={titleWidth} query={filterText} /></span>
-				<span fg={checkColor}>{fitCell(checkText, checkWidth, "right")}</span>
+				<span fg={display.checkFg}>{fitCell(display.checkText, checkWidth, "right")}</span>
 				<span fg={colors.muted}>{fitCell(ageText, ageWidth, "right")}</span>
 				{fillerWidth > 0 ? <span>{" ".repeat(fillerWidth)}</span> : null}
 			</TextLine>
@@ -101,6 +149,9 @@ export const PullRequestList = ({
 	filterText,
 	showFilterBar,
 	isFilterEditing,
+	loadedCount,
+	hasMore,
+	isLoadingMore,
 	onSelectPullRequest,
 }: {
 	groups: PullRequestGroups
@@ -111,41 +162,43 @@ export const PullRequestList = ({
 	filterText: string
 	showFilterBar: boolean
 	isFilterEditing: boolean
+	loadedCount: number
+	hasMore: boolean
+	isLoadingMore: boolean
 	onSelectPullRequest: (url: string) => void
 }) => {
-	const itemCount = groups.reduce((count, [, pullRequests]) => count + pullRequests.length, 0)
-	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
+	const rows = buildPullRequestListRows({ groups, status, error, filterText, showFilterBar, loadedCount, hasMore, isLoadingMore })
 
 	return (
-		<box flexDirection="column">
-			<SectionTitle title="PULL REQUESTS" />
-			{showFilterBar ? (
-				<TextLine>
-					<span fg={colors.count}>/</span>
-					<span fg={colors.muted}> </span>
-					<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
-				</TextLine>
-			) : null}
-			{status === "loading" && itemCount === 0 ? <PlainLine text="- Loading pull requests..." fg={colors.muted} /> : null}
-			{status === "error" ? <PlainLine text={`- ${error ?? "Could not load pull requests."}`} fg={colors.error} /> : null}
-			{status === "ready" && itemCount === 0 ? <PlainLine text={emptyText} fg={colors.muted} /> : null}
-			{groups.map(([repo, pullRequests]) => {
-				const numWidth = groupNumberWidth(pullRequests)
+		<box width={contentWidth} flexDirection="column">
+			{rows.map((row, index) => {
+				if (row._tag === "title") return <SectionTitle key="title" title="PULL REQUESTS" />
+				if (row._tag === "filter") {
+					return (
+						<TextLine key="filter">
+							<span fg={colors.count}>/</span>
+							<span fg={colors.muted}> </span>
+							<span fg={isFilterEditing ? colors.text : colors.count}>{filterText.length > 0 ? filterText : "type to filter..."}</span>
+						</TextLine>
+					)
+				}
+				if (row._tag === "message") return <PlainLine key={`message-${index}`} text={row.text} fg={row.color} />
+				if (row._tag === "load-more") return <PlainLine key="load-more" text={row.text} fg={colors.muted} />
+				if (row._tag === "group") return <GroupTitle key={`group-${row.repository}`} label={row.repository} color={repoColor(row.repository)} filterText={filterText} />
+
+				const numWidth = groupNumberWidth(row.groupPullRequests)
+				const ageColWidth = groupAgeWidth(row.groupPullRequests)
 				return (
-					<box key={repo} flexDirection="column">
-						<GroupTitle label={repo} color={repoColor(repo)} filterText={filterText} />
-						{pullRequests.map((pullRequest) => (
-							<PullRequestRow
-								key={pullRequest.url}
-								pullRequest={pullRequest}
-							selected={pullRequest.url === selectedUrl}
-							contentWidth={contentWidth}
-							numWidth={numWidth}
-							filterText={filterText}
-							onSelect={() => onSelectPullRequest(pullRequest.url)}
-							/>
-						))}
-					</box>
+					<PullRequestRow
+						key={row.pullRequest.url}
+						pullRequest={row.pullRequest}
+						selected={row.pullRequest.url === selectedUrl}
+						contentWidth={contentWidth}
+						numWidth={numWidth}
+						ageColWidth={ageColWidth}
+						filterText={filterText}
+						onSelect={() => onSelectPullRequest(row.pullRequest.url)}
+					/>
 				)
 			})}
 		</box>

package/src/ui/colors.ts

@@ -1,4 +1,5 @@
 export type ThemeId =
+	| "system"
 	| "ghui"
 	| "tokyo-night"
 	| "catppuccin"
@@ -60,6 +61,99 @@ export interface ThemeDefinition {
 	readonly colors: ColorPalette
 }
 
+interface TerminalThemeColors {
+	readonly palette: readonly (string | null)[]
+	readonly defaultForeground: string | null
+	readonly defaultBackground: string | null
+	readonly highlightBackground: string | null
+	readonly highlightForeground: string | null
+}
+
+const readableHex = (value: string | null | undefined, fallback: string) =>
+	typeof value === "string" && /^#[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?$/.test(value) ? value : fallback
+
+const hexToRgb = (hex: string) => {
+	const value = hex.replace(/^#/, "").slice(0, 6)
+	return {
+		r: parseInt(value.slice(0, 2), 16),
+		g: parseInt(value.slice(2, 4), 16),
+		b: parseInt(value.slice(4, 6), 16),
+	}
+}
+
+const luminance = (hex: string) => {
+	const { r, g, b } = hexToRgb(hex)
+	return 0.299 * r + 0.587 * g + 0.114 * b
+}
+
+const rgbToHex = ({ r, g, b }: { readonly r: number; readonly g: number; readonly b: number }) =>
+	`#${[r, g, b].map((component) => Math.max(0, Math.min(255, Math.round(component))).toString(16).padStart(2, "0")).join("")}`
+
+export const mixHex = (base: string, overlay: string, amount: number) => {
+	const from = hexToRgb(base)
+	const to = hexToRgb(overlay)
+	return rgbToHex({
+		r: from.r + (to.r - from.r) * amount,
+		g: from.g + (to.g - from.g) * amount,
+		b: from.b + (to.b - from.b) * amount,
+	})
+}
+
+const grayscaleRamp = (background: string) => {
+	const bg = hexToRgb(background)
+	const bgLum = luminance(background)
+	const isDark = bgLum < 128
+	const grays: Record<number, string> = {}
+
+	for (let i = 1; i <= 12; i++) {
+		const factor = i / 12
+		let r: number
+		let g: number
+		let b: number
+
+		if (isDark) {
+			if (bgLum < 10) {
+				const value = Math.floor(factor * 0.4 * 255)
+				r = value
+				g = value
+				b = value
+			} else {
+				const nextLum = bgLum + (255 - bgLum) * factor * 0.4
+				const ratio = nextLum / bgLum
+				r = Math.min(bg.r * ratio, 255)
+				g = Math.min(bg.g * ratio, 255)
+				b = Math.min(bg.b * ratio, 255)
+			}
+		} else if (bgLum > 245) {
+			const value = Math.floor(255 - factor * 0.4 * 255)
+			r = value
+			g = value
+			b = value
+		} else {
+			const nextLum = bgLum * (1 - factor * 0.4)
+			const ratio = nextLum / bgLum
+			r = Math.max(bg.r * ratio, 0)
+			g = Math.max(bg.g * ratio, 0)
+			b = Math.max(bg.b * ratio, 0)
+		}
+
+		grays[i] = rgbToHex({ r, g, b })
+	}
+
+	return grays
+}
+
+const mutedTextColor = (background: string) => {
+	const bgLum = luminance(background)
+	const isDark = bgLum < 128
+	const value = isDark
+		? bgLum < 10 ? 180 : Math.min(Math.floor(160 + bgLum * 0.3), 200)
+		: bgLum > 245 ? 75 : Math.max(Math.floor(100 - (255 - bgLum) * 0.2), 60)
+	return rgbToHex({ r: value, g: value, b: value })
+}
+
+const contrastText = (background: string) => luminance(background) > 128 ? "#000000" : "#ffffff"
+
 const ghuiColors: ColorPalette = {
 	background: "#111018",
 	modalBackground: "#1a1a2e",
@@ -99,6 +193,70 @@ const ghuiColors: ColorPalette = {
 	},
 }
 
+const makeSystemColors = (terminal?: TerminalThemeColors): ColorPalette => {
+	const palette = terminal?.palette ?? []
+	const terminalBackground = readableHex(terminal?.defaultBackground, readableHex(palette[0], "#000000"))
+	const text = readableHex(terminal?.defaultForeground, readableHex(palette[7], "#ffffff"))
+	const grays = grayscaleRamp(terminalBackground)
+	const isDark = luminance(terminalBackground) < 128
+	const red = readableHex(palette[1], "#cc0000")
+	const green = readableHex(palette[2], "#4e9a06")
+	const yellow = readableHex(palette[3], "#c4a000")
+	const blue = readableHex(palette[4], "#3465a4")
+	const magenta = readableHex(palette[5], "#75507b")
+	const brightBlack = readableHex(palette[8], mutedTextColor(terminalBackground))
+	const brightGreen = readableHex(palette[10], green)
+	const brightBlue = readableHex(palette[12], blue)
+	const brightMagenta = readableHex(palette[13], magenta)
+	const primary = brightBlue
+	const panel = grays[2] ?? mixHex(terminalBackground, text, isDark ? 0.07 : 0.08)
+	const element = grays[3] ?? mixHex(terminalBackground, text, isDark ? 0.1 : 0.1)
+	const border = grays[7] ?? mixHex(terminalBackground, text, isDark ? 0.24 : 0.24)
+	const borderSubtle = grays[6] ?? border
+	const diffAlpha = isDark ? 0.22 : 0.14
+
+	return {
+		background: "transparent",
+		modalBackground: panel,
+		text,
+		muted: mutedTextColor(terminalBackground),
+		separator: border,
+		accent: primary,
+		inlineCode: brightGreen,
+		error: red,
+		selectedBg: primary,
+		selectedText: contrastText(primary),
+		count: primary,
+		status: {
+			draft: yellow,
+			approved: green,
+			changes: red,
+			review: primary,
+			none: brightBlack,
+			passing: green,
+			pending: yellow,
+			failing: red,
+		},
+		repos: {
+			opencode: primary,
+			"effect-smol": green,
+			"opencode-console": brightMagenta,
+			opencontrol: yellow,
+			default: blue,
+		},
+		diff: {
+			addedBg: mixHex(terminalBackground, green, diffAlpha),
+			removedBg: mixHex(terminalBackground, red, diffAlpha),
+			contextBg: panel,
+			lineNumberBg: borderSubtle,
+			addedLineNumberBg: mixHex(element, green, diffAlpha),
+			removedLineNumberBg: mixHex(element, red, diffAlpha),
+		},
+	}
+}
+
+const systemColors: ColorPalette = makeSystemColors()
+
 const tokyoNightColors: ColorPalette = {
 	background: "#1a1b26",
 	modalBackground: "#24283b",
@@ -607,6 +765,7 @@ const vesperColors: ColorPalette = {
 }
 
 export const themeDefinitions: readonly ThemeDefinition[] = [
+	{ id: "system", name: "System", description: "Use the terminal foreground, background, and ANSI palette", colors: systemColors },
 	{ id: "ghui", name: "GHUI", description: "Warm parchment accents on a deep slate background", colors: ghuiColors },
 	{ id: "tokyo-night", name: "Tokyo Night", description: "Cool indigo surfaces with neon editor accents", colors: tokyoNightColors },
 	{ id: "catppuccin", name: "Catppuccin", description: "Mocha lavender, peach, and soft pastel contrast", colors: catppuccinColors },
@@ -623,7 +782,7 @@ export const themeDefinitions: readonly ThemeDefinition[] = [
 	{ id: "opencode", name: "OpenCode", description: "Charcoal panels with peach, violet, and blue highlights", colors: opencodeColors },
 ] as const
 
-let activeTheme = themeDefinitions[0]!
+let activeTheme = themeDefinitions.find((theme) => theme.id === "ghui") ?? themeDefinitions[0]!
 
 export const colors: ColorPalette = { ...ghuiColors }
 
@@ -646,3 +805,10 @@ export const setActiveTheme = (id: ThemeId) => {
 	activeTheme = getThemeDefinition(id)
 	Object.assign(colors, activeTheme.colors)
 }
+
+export const setSystemThemeColors = (terminalColors: TerminalThemeColors) => {
+	Object.assign(systemColors, makeSystemColors(terminalColors))
+	if (activeTheme.id === "system") {
+		Object.assign(colors, systemColors)
+	}
+}

package/src/ui/diff.ts

@@ -1,7 +1,17 @@
-import { parseColor, SyntaxStyle } from "@opentui/core"
+import { parseColor, pathToFiletype, SyntaxStyle } from "@opentui/core"
+import { Data, Schema } from "effect"
 import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors } from "./colors.js"
 
+export const DiffView = Schema.Literals(["unified", "split"])
+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 DiffCommentKind = Schema.Literals(["addition", "deletion", "context"])
+export type DiffCommentKind = Schema.Schema.Type<typeof DiffCommentKind>
+
 export interface DiffFilePatch {
 	readonly name: string
 	readonly filetype: string | undefined
@@ -25,7 +35,7 @@ export interface DiffCommentAnchor {
 	readonly path: string
 	readonly line: number
 	readonly side: DiffCommentSide
-	readonly kind: "addition" | "deletion" | "context"
+	readonly kind: DiffCommentKind
 	readonly renderLine: number
 	readonly text: string
 }
@@ -35,10 +45,13 @@ export type StackedDiffCommentAnchor = DiffCommentAnchor & {
 	readonly localRenderLine: number
 }
 
-export type PullRequestDiffState =
-	| { readonly status: "loading" }
-	| { readonly status: "ready"; readonly patch: string; readonly files: readonly DiffFilePatch[] }
-	| { readonly status: "error"; readonly error: string }
+export type PullRequestDiffState = Data.TaggedEnum<{
+	Loading: {}
+	Ready: { readonly patch: string; readonly files: readonly DiffFilePatch[] }
+	Error: { readonly error: string }
+}>
+
+export const PullRequestDiffState = Data.taggedEnum<PullRequestDiffState>()
 
 export const createDiffSyntaxStyle = () => SyntaxStyle.fromStyles({
 	keyword: { fg: parseColor(colors.accent), bold: true },
@@ -60,55 +73,45 @@ export const createDiffSyntaxStyle = () => SyntaxStyle.fromStyles({
 	default: { fg: parseColor(colors.text) },
 })
 
-const extensionFiletypes: Record<string, string> = {
-	c: "c",
-	cc: "cpp",
-	cpp: "cpp",
-	cs: "csharp",
-	css: "css",
-	go: "go",
-	h: "c",
-	hpp: "cpp",
-	html: "html",
-	java: "java",
-	js: "javascript",
-	jsx: "javascript",
-	json: "json",
-	kt: "kotlin",
-	md: "markdown",
-	mjs: "javascript",
-	py: "python",
-	rs: "rust",
-	rb: "ruby",
-	sh: "bash",
-	svelte: "svelte",
-	toml: "toml",
-	ts: "typescript",
-	tsx: "typescript",
-	txt: "text",
-	vue: "vue",
-	yaml: "yaml",
-	yml: "yaml",
-	zig: "zig",
-}
+const unquoteDiffPath = (path: string) => path.replace(/^"|"$/g, "").replace(/^a\//, "").replace(/^b\//, "")
 
-const filetypeForPath = (path: string) => {
-	const basename = path.split("/").at(-1) ?? path
-	if (basename === "Dockerfile") return "dockerfile"
-	const extension = basename.includes(".") ? basename.split(".").at(-1)?.toLowerCase() : undefined
-	return extension ? extensionFiletypes[extension] : undefined
+const readDiffPath = (value: string, start: number) => {
+	if (value[start] === '"') {
+		for (let index = start + 1; index < value.length; index++) {
+			if (value[index] === '"' && value[index - 1] !== "\\") {
+				const raw = value.slice(start, index + 1)
+				try {
+					return { path: JSON.parse(raw) as string, end: index + 1 }
+				} catch {
+					return { path: raw, end: index + 1 }
+				}
+			}
+		}
+	}
+
+	const end = value.slice(start).search(/\s/)
+	const pathEnd = end >= 0 ? start + end : value.length
+	return { path: value.slice(start, pathEnd), end: pathEnd }
 }
 
-const unquoteDiffPath = (path: string) => path.replace(/^"|"$/g, "").replace(/^a\//, "").replace(/^b\//, "")
+const parseDiffGitPaths = (line: string) => {
+	const prefix = "diff --git "
+	if (!line.startsWith(prefix)) return null
+	const left = readDiffPath(line, prefix.length)
+	const rightStart = line.slice(left.end).search(/\S/)
+	if (rightStart < 0) return null
+	const right = readDiffPath(line, left.end + rightStart)
+	return [left.path, right.path] as const
+}
 
 const patchFileName = (patch: string) => {
 	const diffLine = patch.split("\n").find((line) => line.startsWith("diff --git "))
 	if (diffLine) {
-		const match = diffLine.match(/^diff --git\s+(\S+)\s+(\S+)/)
-		if (match) {
-			const next = unquoteDiffPath(match[2]!)
+		const paths = parseDiffGitPaths(diffLine)
+		if (paths) {
+			const next = unquoteDiffPath(paths[1])
 			if (next !== "/dev/null") return next
-			return unquoteDiffPath(match[1]!)
+			return unquoteDiffPath(paths[0])
 		}
 	}
 
@@ -165,19 +168,19 @@ export const splitPatchFiles = (patch: string): readonly DiffFilePatch[] => {
 		const end = index + 1 < matches.length ? matches[index + 1]!.index ?? trimmed.length : trimmed.length
 		const filePatch = normalizeHunkLineCounts(trimmed.slice(start, end).trimEnd())
 		const name = patchFileName(filePatch)
-		return { name, filetype: filetypeForPath(name), patch: filePatch }
+		return { name, filetype: pathToFiletype(name), patch: filePatch }
 	})
 }
 
-export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}`
+export const pullRequestDiffKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}#${pullRequest.number}:${pullRequest.headRefOid}`
 
 export const safeDiffFileIndex = (files: readonly DiffFilePatch[], index: number) =>
 	files.length > 0 ? Math.max(0, Math.min(index, files.length - 1)) : 0
 
 export const buildStackedDiffFiles = (
 	files: readonly DiffFilePatch[],
-	view: "unified" | "split",
-	wrapMode: "none" | "word",
+	view: DiffView,
+	wrapMode: DiffWrapMode,
 	width: number,
 ): readonly StackedDiffFilePatch[] => {
 	let offset = 0
@@ -197,14 +200,14 @@ export const buildStackedDiffFiles = (
 	})
 }
 
+export const stackedDiffFileAtLine = (stackedFiles: readonly StackedDiffFilePatch[], line: number) =>
+	stackedFiles.reduce<StackedDiffFilePatch | undefined>((current, file) => file.headerLine <= line ? file : current, undefined)
+
 export const diffStatText = (pullRequest: PullRequestItem) => {
 	if (!pullRequest.detailLoaded) return "loading details"
 	const files = pullRequest.changedFiles === 1 ? "1 file" : `${pullRequest.changedFiles} files`
-	return [
-		pullRequest.additions > 0 ? `+${pullRequest.additions}` : null,
-		pullRequest.deletions > 0 ? `-${pullRequest.deletions}` : null,
-		files,
-	].filter((part): part is string => part !== null).join(" ")
+	const stats = diffFileStatsText(pullRequest)
+	return stats ? `${stats} ${files}` : files
 }
 
 export const diffCommentLocationKey = (location: Pick<PullRequestReviewComment, "path" | "side" | "line">) => `${location.path}:${location.side}:${location.line}`
@@ -213,7 +216,7 @@ export const diffCommentAnchorKey = diffCommentLocationKey
 
 type PendingDiffCommentAnchor = Omit<DiffCommentAnchor, "renderLine">
 
-const diffContentWidth = (lines: readonly string[], view: "unified" | "split", width: number) => {
+const diffContentWidth = (lines: readonly string[], view: DiffView, width: number) => {
 	const lineNumberGutterWidth = patchLineNumberGutterWidth(lines)
 	return view === "split"
 		? Math.max(1, Math.floor(width / 2) - lineNumberGutterWidth)
@@ -242,14 +245,17 @@ export const diffFileStats = (file: DiffFilePatch): DiffFileStats => {
 }
 
 export const diffFileStatText = (file: DiffFilePatch) => {
-	const stats = diffFileStats(file)
+	return diffFileStatsText(diffFileStats(file))
+}
+
+export const diffFileStatsText = (stats: DiffFileStats) => {
 	return [
 		stats.additions > 0 ? `+${stats.additions}` : null,
 		stats.deletions > 0 ? `-${stats.deletions}` : null,
 	].filter((part): part is string => part !== null).join(" ")
 }
 
-export const getDiffCommentAnchors = (file: DiffFilePatch, view: "unified" | "split" = "unified", wrapMode: "none" | "word" = "none", width = 120): readonly DiffCommentAnchor[] => {
+export const getDiffCommentAnchors = (file: DiffFilePatch, view: DiffView = "unified", wrapMode: DiffWrapMode = "none", width = 120): readonly DiffCommentAnchor[] => {
 	const anchors: DiffCommentAnchor[] = []
 	const lines = file.patch.split("\n")
 	const contentWidth = diffContentWidth(lines, view, width)
@@ -330,8 +336,8 @@ export const getDiffCommentAnchors = (file: DiffFilePatch, view: "unified" | "sp
 
 export const getStackedDiffCommentAnchors = (
 	stackedFiles: readonly StackedDiffFilePatch[],
-	view: "unified" | "split" = "unified",
-	wrapMode: "none" | "word" = "none",
+	view: DiffView = "unified",
+	wrapMode: DiffWrapMode = "none",
 	width = 120,
 ): readonly StackedDiffCommentAnchor[] =>
 	stackedFiles.flatMap((stackedFile) => getDiffCommentAnchors(stackedFile.file, view, wrapMode, width).map((anchor) => ({
@@ -354,7 +360,7 @@ export const scrollTopForVisibleLine = (currentTop: number, viewportHeight: numb
 	return currentTop
 }
 
-const estimatedWrappedLineCount = (text: string, width: number, wrapMode: "none" | "word") => {
+const estimatedWrappedLineCount = (text: string, width: number, wrapMode: DiffWrapMode) => {
 	if (wrapMode === "none") return 1
 	return Math.max(1, Math.ceil(Bun.stringWidth(text) / Math.max(1, width)))
 }
@@ -394,7 +400,7 @@ const patchLineNumberGutterWidth = (lines: readonly string[]) => {
 	return Math.max(3, digits + 2) + (hasSigns ? 2 : 0)
 }
 
-export const patchRenderableLineCount = (patch: string, view: "unified" | "split", wrapMode: "none" | "word", width: number) => {
+export const patchRenderableLineCount = (patch: string, view: DiffView, wrapMode: DiffWrapMode, width: number) => {
 	const lines = patch.split("\n")
 	const contentWidth = diffContentWidth(lines, view, width)
 	let count = 0