@kitlangton/ghui 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kitlangton/ghui",
-	"version": "0.1.18",
+	"version": "0.1.19",
 	"description": "Terminal UI for GitHub pull requests",
 	"type": "module",
 	"license": "MIT",

package/src/App.tsx

@@ -6,7 +6,7 @@ import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import * as Atom from "effect/unstable/reactivity/Atom"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { config } from "./config.js"
-import { pullRequestQueueLabels, pullRequestQueueModes, type CreatePullRequestCommentInput, type DiffCommentSide, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestQueueMode, type PullRequestReviewComment } from "./domain.js"
+import { pullRequestQueueLabels, pullRequestQueueModes, type CreatePullRequestCommentInput, type DiffCommentSide, type LoadStatus, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestQueueMode, type PullRequestReviewComment } from "./domain.js"
 import { formatShortDate, formatTimestamp } from "./date.js"
 import { availableMergeActions, mergeInfoFromPullRequest } from "./mergeActions.js"
 import { Observability } from "./observability.js"
@@ -14,9 +14,9 @@ import { GitHubService } from "./services/GitHubService.js"
 import { loadStoredThemeId, saveStoredThemeId } from "./themeStore.js"
 import { colors, filterThemeDefinitions, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.js"
 import { backspace as editorBackspace, deleteForward as editorDeleteForward, deleteToLineEnd, deleteToLineStart, deleteWordBackward, deleteWordForward, insertText, moveLeft as editorMoveLeft, moveLineEnd, moveLineStart, moveRight as editorMoveRight, moveVertically, moveWordBackward, moveWordForward, type CommentEditorValue } from "./ui/commentEditor.js"
-import { buildStackedDiffFiles, diffCommentAnchorKey, diffCommentLocationKey, getStackedDiffCommentAnchors, nearestDiffCommentAnchorIndex, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, type DiffCommentAnchor, type PullRequestDiffState, type StackedDiffCommentAnchor } from "./ui/diff.js"
+import { buildStackedDiffFiles, diffCommentAnchorKey, diffCommentLocationKey, getStackedDiffCommentAnchors, nearestDiffCommentAnchorIndex, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileAtLine, type DiffCommentAnchor, type DiffView, type DiffWrapMode, type StackedDiffCommentAnchor } from "./ui/diff.js"
 import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
-import { FooterHints, type RetryProgress } from "./ui/FooterHints.js"
+import { FooterHints, initialRetryProgress, RetryProgress } from "./ui/FooterHints.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
 import { CloseModal, CommentModal, CommentThreadModal, initialCloseModalState, initialCommentModalState, initialCommentThreadModalState, initialLabelModalState, initialMergeModalState, initialModal, initialThemeModalState, LabelModal, MergeModal, Modal, ThemeModal, type CloseModalState, type CommentModalState, type CommentThreadModalState, type LabelModalState, type MergeModalState, type ModalState, type ModalTag, type ThemeModalState } from "./ui/modals.js"
 import { groupBy, reviewLabel } from "./ui/pullRequests.js"
@@ -26,7 +26,6 @@ import { PullRequestList } from "./ui/PullRequestList.js"
 const githubRuntime = Atom.runtime(GitHubService.layer.pipe(Layer.provideMerge(Observability.layer)))
 const initialThemeId = await Effect.runPromise(loadStoredThemeId)
 
-type LoadStatus = "loading" | "ready" | "error"
 
 interface PullRequestLoad {
 	readonly queueMode: PullRequestQueueMode
@@ -37,7 +36,7 @@ interface PullRequestLoad {
 
 interface DetailPlaceholderInput {
 	readonly status: LoadStatus
-	readonly retryProgress: RetryProgress | null
+	readonly retryProgress: RetryProgress
 	readonly loadingIndicator: string
 	readonly visibleCount: number
 	readonly filterText: string
@@ -59,7 +58,7 @@ type DiffRenderableRuntimeSides = {
 
 interface AppliedDiffLineColor {
 	readonly anchor: StackedDiffCommentAnchor
-	readonly view: "unified" | "split"
+	readonly view: DiffView
 }
 
 interface AppliedDiffLineColorState {
@@ -71,6 +70,7 @@ const PR_FETCH_RETRIES = 6
 const FOCUS_RETURN_REFRESH_MIN_MS = 60_000
 const FOCUSED_IDLE_REFRESH_MS = 5 * 60_000
 const AUTO_REFRESH_JITTER_MS = 10_000
+const DIFF_STICKY_HEADER_LINES = 2
 const LOADING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
 
 const mergeCachedDetails = (fresh: readonly PullRequestItem[], cached: readonly PullRequestItem[] | undefined) => {
@@ -94,7 +94,7 @@ const mergeCachedDetails = (fresh: readonly PullRequestItem[], cached: readonly
 	})
 }
 
-const retryProgressAtom = Atom.make<RetryProgress | null>(null).pipe(Atom.keepAlive)
+const retryProgressAtom = Atom.make<RetryProgress>(initialRetryProgress).pipe(Atom.keepAlive)
 const queueModeAtom = Atom.make<PullRequestQueueMode>("authored").pipe(Atom.keepAlive)
 const queueLoadCacheAtom = Atom.make<Partial<Record<PullRequestQueueMode, PullRequestLoad>>>({}).pipe(Atom.keepAlive)
 const queueSelectionAtom = Atom.make<Partial<Record<PullRequestQueueMode, number>>>({}).pipe(Atom.keepAlive)
@@ -102,19 +102,19 @@ const pullRequestsAtom = githubRuntime.atom(
 	GitHubService.use((github) =>
 		Effect.gen(function*() {
 			const queueMode = yield* Atom.get(queueModeAtom)
-			yield* Atom.set(retryProgressAtom, null)
+			yield* Atom.set(retryProgressAtom, initialRetryProgress)
 			const data = yield* github.listOpenPullRequests(queueMode).pipe(
 				Effect.tapError(() =>
-					Atom.update(retryProgressAtom, (current) => ({
-						attempt: Math.min((current?.attempt ?? 0) + 1, PR_FETCH_RETRIES),
+					Atom.update(retryProgressAtom, (current) => RetryProgress.Retrying({
+						attempt: Math.min(RetryProgress.$match(current, { Idle: () => 0, Retrying: ({ attempt }) => attempt }) + 1, PR_FETCH_RETRIES),
 						max: PR_FETCH_RETRIES,
 					}))
 				),
 				Effect.retry({ times: PR_FETCH_RETRIES, schedule: Schedule.exponential("300 millis", 2) }),
-				Effect.tapError(() => Atom.set(retryProgressAtom, null)),
+				Effect.tapError(() => Atom.set(retryProgressAtom, initialRetryProgress)),
 			)
 
-			yield* Atom.set(retryProgressAtom, null)
+			yield* Atom.set(retryProgressAtom, initialRetryProgress)
 			const cache = yield* Atom.get(queueLoadCacheAtom)
 			const load = {
 				queueMode,
@@ -137,8 +137,9 @@ const detailFullViewAtom = Atom.make(false).pipe(Atom.keepAlive)
 const detailScrollOffsetAtom = Atom.make(0).pipe(Atom.keepAlive)
 const diffFullViewAtom = Atom.make(false).pipe(Atom.keepAlive)
 const diffFileIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
-const diffRenderViewAtom = Atom.make<"unified" | "split">("split").pipe(Atom.keepAlive)
-const diffWrapModeAtom = Atom.make<"none" | "word">("none").pipe(Atom.keepAlive)
+const diffScrollTopAtom = Atom.make(0).pipe(Atom.keepAlive)
+const diffRenderViewAtom = Atom.make<DiffView>("split").pipe(Atom.keepAlive)
+const diffWrapModeAtom = Atom.make<DiffWrapMode>("none").pipe(Atom.keepAlive)
 const diffCommentModeAtom = Atom.make(false).pipe(Atom.keepAlive)
 const diffCommentAnchorIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
 const diffCommentThreadsAtom = Atom.make<Record<string, readonly PullRequestReviewComment[]>>({}).pipe(Atom.keepAlive)
@@ -320,7 +321,31 @@ const originalDiffLineColor = (anchor: DiffCommentAnchor): DiffLineColorConfig =
 	return { gutter: colors.diff.lineNumberBg, content: colors.diff.contextBg }
 }
 
-const diffSideTargets = (diff: DiffRenderable, anchor: DiffCommentAnchor, view: "unified" | "split") => {
+const mixHexColor = (color: string, base: string, amount: number) => {
+	const parse = (hex: string) => {
+		const normalized = hex.replace(/^#/, "")
+		if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return null
+		return {
+			r: Number.parseInt(normalized.slice(0, 2), 16),
+			g: Number.parseInt(normalized.slice(2, 4), 16),
+			b: Number.parseInt(normalized.slice(4, 6), 16),
+		}
+	}
+	const left = parse(color)
+	const right = parse(base)
+	if (!left || !right) return color
+	const channel = (key: "r" | "g" | "b") => Math.round(left[key] * amount + right[key] * (1 - amount)).toString(16).padStart(2, "0")
+	return `#${channel("r")}${channel("g")}${channel("b")}`
+}
+
+const diffCommentGutterColor = (anchor: DiffCommentAnchor, kind: "selected" | "thread") => {
+	const accent = kind === "thread"
+		? colors.status.pending
+		: anchor.side === "RIGHT" ? colors.status.passing : colors.status.failing
+	return mixHexColor(accent, originalDiffLineColor(anchor).gutter, 0.45)
+}
+
+const diffSideTargets = (diff: DiffRenderable, anchor: DiffCommentAnchor, view: DiffView) => {
 	const withSides = diff as unknown as DiffRenderableRuntimeSides
 	if (view === "split") {
 		const target = anchor.side === "LEFT" ? withSides.leftSide : withSides.rightSide
@@ -345,7 +370,7 @@ const getDetailPlaceholderContent = ({
 	if (status === "loading") {
 		return {
 			title: `${loadingIndicator} Loading pull requests`,
-			hint: retryProgress ? `Retry ${retryProgress.attempt}/${retryProgress.max}` : "Fetching latest open PRs",
+			hint: retryProgress._tag === "Retrying" ? `Retry ${retryProgress.attempt}/${retryProgress.max}` : "Fetching latest open PRs",
 		}
 	}
 
@@ -394,6 +419,7 @@ export const App = () => {
 	const [_detailScrollOffset, setDetailScrollOffset] = useAtom(detailScrollOffsetAtom)
 	const [diffFullView, setDiffFullView] = useAtom(diffFullViewAtom)
 	const [diffFileIndex, setDiffFileIndex] = useAtom(diffFileIndexAtom)
+	const [diffScrollTop, setDiffScrollTop] = useAtom(diffScrollTopAtom)
 	const [diffRenderView, setDiffRenderView] = useAtom(diffRenderViewAtom)
 	const [diffWrapMode, setDiffWrapMode] = useAtom(diffWrapModeAtom)
 	const [diffCommentMode, setDiffCommentMode] = useAtom(diffCommentModeAtom)
@@ -410,22 +436,21 @@ export const App = () => {
 	const commentModalActive = Modal.$is("Comment")(activeModal)
 	const commentThreadModalActive = Modal.$is("CommentThread")(activeModal)
 	const themeModalActive = Modal.$is("Theme")(activeModal)
-	const labelModal: LabelModalState = labelModalActive ? activeModal.state : initialLabelModalState
-	const closeModal: CloseModalState = closeModalActive ? activeModal.state : initialCloseModalState
-	const mergeModal: MergeModalState = mergeModalActive ? activeModal.state : initialMergeModalState
-	const commentModal: CommentModalState = commentModalActive ? activeModal.state : initialCommentModalState
-	const commentThreadModal: CommentThreadModalState = commentThreadModalActive ? activeModal.state : initialCommentThreadModalState
-	const themeModal: ThemeModalState = themeModalActive ? activeModal.state : initialThemeModalState
+	const labelModal: LabelModalState = labelModalActive ? activeModal : initialLabelModalState
+	const closeModal: CloseModalState = closeModalActive ? activeModal : initialCloseModalState
+	const mergeModal: MergeModalState = mergeModalActive ? activeModal : initialMergeModalState
+	const commentModal: CommentModalState = commentModalActive ? activeModal : initialCommentModalState
+	const commentThreadModal: CommentThreadModalState = commentThreadModalActive ? activeModal : initialCommentThreadModalState
+	const themeModal: ThemeModalState = themeModalActive ? activeModal : initialThemeModalState
 	const makeModalSetter = <Tag extends Exclude<ModalTag, "None">>(tag: Tag) =>
 		(next: ModalState<Tag> | ((prev: ModalState<Tag>) => ModalState<Tag>)) => setActiveModal((current) => {
-			const ctor = Modal[tag] as (args: { state: ModalState<Tag> }) => Modal
+			const ctor = Modal[tag] as unknown as (args: ModalState<Tag>) => Modal
 			if (typeof next === "function") {
 				const updater = next as (prev: ModalState<Tag>) => ModalState<Tag>
 				if (current._tag !== tag) return current
-				const prev = (current as unknown as { readonly state: ModalState<Tag> }).state
-				return ctor({ state: updater(prev) })
+				return ctor(updater(current as unknown as ModalState<Tag>))
 			}
-			return ctor({ state: next })
+			return ctor(next)
 		})
 	const setLabelModal = makeModalSetter("Label")
 	const setCloseModal = makeModalSetter("Close")
@@ -566,14 +591,9 @@ export const App = () => {
 	const selectedPullRequest = visiblePullRequests[selectedIndex] ?? null
 	const selectedDiffState = selectedPullRequest ? pullRequestDiffCache[pullRequestDiffKey(selectedPullRequest)] : undefined
 	const effectiveDiffRenderView = contentWidth >= 100 ? diffRenderView : "unified"
-	const readyDiffFiles = selectedDiffState?.status === "ready" ? selectedDiffState.files : []
+	const readyDiffFiles = selectedDiffState?._tag === "Ready" ? selectedDiffState.files : []
 	const stackedDiffFiles = useMemo(() => buildStackedDiffFiles(readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth), [readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth])
 	const selectedDiffKey = selectedPullRequest ? pullRequestDiffKey(selectedPullRequest) : null
-	const selectedDiffCommentCount = useMemo(() => selectedDiffKey
-		? Object.entries(diffCommentThreads)
-			.filter(([key, comments]) => key.startsWith(`${selectedDiffKey}:`) && comments.length > 0)
-			.reduce((count, [, comments]) => count + comments.length, 0)
-		: 0, [diffCommentThreads, selectedDiffKey])
 	const diffCommentAnchors = useMemo(
 		() => diffFullView ? getStackedDiffCommentAnchors(stackedDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth) : [],
 		[diffFullView, stackedDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth],
@@ -732,6 +752,7 @@ export const App = () => {
 
 	useEffect(() => {
 		setDiffFileIndex(0)
+		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
 	}, [selectedIndex])
 
@@ -773,12 +794,12 @@ export const App = () => {
 		if (selectedDiffKey) {
 			for (const anchor of diffCommentAnchors) {
 				if ((diffCommentThreads[`${selectedDiffKey}:${diffCommentAnchorKey(anchor)}`]?.length ?? 0) > 0) {
-					applyLineColor(anchor, colors.status.pending)
+					applyLineColor(anchor, diffCommentGutterColor(anchor, "thread"))
 				}
 			}
 		}
 		if (diffCommentMode && selectedDiffCommentAnchor) {
-			applyLineColor(selectedDiffCommentAnchor, selectedDiffCommentAnchor.side === "RIGHT" ? colors.status.passing : colors.status.failing, true)
+			applyLineColor(selectedDiffCommentAnchor, diffCommentGutterColor(selectedDiffCommentAnchor, "selected"), true)
 			if (suppressNextDiffCommentScrollRef.current) {
 				suppressNextDiffCommentScrollRef.current = false
 			} else {
@@ -791,7 +812,7 @@ export const App = () => {
 	}, [diffCommentMode, selectedDiffCommentAnchor?.renderLine, selectedDiffCommentAnchor?.localRenderLine, selectedDiffCommentAnchor?.side, selectedDiffCommentAnchor?.fileIndex, diffLineColorContextKey, effectiveDiffRenderView, diffCommentAnchors, diffCommentThreads])
 	const isHydratingPullRequestDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)
 	const isRefreshingPullRequests = pullRequestResult.waiting && pullRequestLoad !== null
-	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?.status === "loading"
+	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?._tag === "Loading"
 	const loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
 
 	useEffect(() => {
@@ -887,20 +908,20 @@ export const App = () => {
 		const key = pullRequestDiffKey(pullRequest)
 		const existing = pullRequestDiffCache[key]
 		if (includeComments) loadPullRequestComments(pullRequest, force)
-		if (!force && (existing?.status === "ready" || existing?.status === "loading")) return
+		if (!force && existing && (existing._tag === "Ready" || existing._tag === "Loading")) return
 
-		setPullRequestDiffCache((current) => ({ ...current, [key]: { status: "loading" } }))
+		setPullRequestDiffCache((current) => ({ ...current, [key]: PullRequestDiffState.Loading() }))
 		void getPullRequestDiff({ repository: pullRequest.repository, number: pullRequest.number })
 			.then((patch) => {
 				setPullRequestDiffCache((current) => ({
 					...current,
-					[key]: { status: "ready", patch, files: splitPatchFiles(patch) },
+					[key]: PullRequestDiffState.Ready({ patch, files: splitPatchFiles(patch) }),
 				}))
 			})
 			.catch((error) => {
 				setPullRequestDiffCache((current) => ({
 					...current,
-					[key]: { status: "error", error: errorMessage(error) },
+					[key]: PullRequestDiffState.Error({ error: errorMessage(error) }),
 				}))
 				flashNotice(errorMessage(error))
 			})
@@ -930,6 +951,7 @@ export const App = () => {
 		setDetailFullView(false)
 		setDiffCommentMode(false)
 		setDiffFileIndex(0)
+		setDiffScrollTop(0)
 		setDiffRenderView(contentWidth >= 100 ? "split" : "unified")
 		diffScrollRef.current?.scrollTo({ x: 0, y: 0 })
 		loadPullRequestDiff(selectedPullRequest, { includeComments: true })
@@ -943,35 +965,75 @@ export const App = () => {
 	const scrollToDiffFile = (index: number) => {
 		const stackedFile = stackedDiffFiles[index]
 		diffScrollRef.current?.scrollTo({ x: 0, y: stackedFile?.headerLine ?? 0 })
+		syncDiffScrollState()
 	}
 
-	const syncDiffFileIndexToScroll = () => {
+	const syncDiffScrollState = () => {
 		const scrollTop = diffScrollRef.current?.scrollTop
 		if (scrollTop === undefined || stackedDiffFiles.length === 0) return
-		const nextIndex = stackedDiffFiles.reduce((current, file) => file.headerLine <= scrollTop + 1 ? file.index : current, 0)
+		setDiffScrollTop((current) => current === scrollTop ? current : scrollTop)
+		const nextIndex = stackedDiffFileAtLine(stackedDiffFiles, scrollTop)?.index ?? 0
 		setDiffFileIndex((current) => current === nextIndex ? current : nextIndex)
 	}
 
 	const scrollDiffBy = (y: number) => {
 		diffScrollRef.current?.scrollBy({ x: 0, y })
-		syncDiffFileIndexToScroll()
+		syncDiffScrollState()
 	}
 
 	const scrollDiffTo = (y: number) => {
 		diffScrollRef.current?.scrollTo({ x: 0, y })
-		if (y <= 0) setDiffFileIndex(0)
-		else if (y === Number.MAX_SAFE_INTEGER) setDiffFileIndex(Math.max(0, readyDiffFiles.length - 1))
-		else syncDiffFileIndexToScroll()
+		syncDiffScrollState()
+	}
+
+	const clearPendingGTimeout = () => {
+		if (pendingGTimeoutRef.current !== null) {
+			clearTimeout(pendingGTimeoutRef.current)
+			pendingGTimeoutRef.current = null
+		}
+	}
+
+	const handleVimGoto = (key: { readonly name: string; readonly shift?: boolean }, gotoStart: () => void, gotoEnd: () => void): boolean => {
+		if (isShiftG(key)) {
+			gotoEnd()
+			setPendingG(false)
+			clearPendingGTimeout()
+			return true
+		}
+		if (key.name === "g") {
+			if (pendingG) {
+				gotoStart()
+				setPendingG(false)
+				clearPendingGTimeout()
+			} else {
+				setPendingG(true)
+				pendingGTimeoutRef.current = setTimeout(() => {
+					setPendingG(false)
+					pendingGTimeoutRef.current = null
+				}, 500)
+			}
+			return true
+		}
+		return false
 	}
 
 	const ensureDiffLineVisible = (line: number) => {
 		const scroll = diffScrollRef.current
 		if (!scroll) return
 		const viewportHeight = Math.max(1, wideBodyHeight - (selectedDiffCommentThread.length > 0 ? 6 : 3))
-		const nextTop = scrollTopForVisibleLine(scroll.scrollTop, viewportHeight, line)
-		if (nextTop !== scroll.scrollTop) scroll.scrollTo({ x: 0, y: nextTop })
+		const nextTop = scrollTopForVisibleLine(scroll.scrollTop, viewportHeight, line, DIFF_STICKY_HEADER_LINES)
+		if (nextTop !== scroll.scrollTop) {
+			scroll.scrollTo({ x: 0, y: nextTop })
+			syncDiffScrollState()
+		}
 	}
 
+	useEffect(() => {
+		if (!diffFullView) return
+		const interval = globalThis.setInterval(syncDiffScrollState, 80)
+		return () => globalThis.clearInterval(interval)
+	}, [diffFullView, stackedDiffFiles])
+
 	const jumpDiffFile = (delta: 1 | -1) => {
 		if (readyDiffFiles.length === 0) return
 		const nextIndex = safeDiffFileIndex(readyDiffFiles, diffFileIndex + delta)
@@ -987,7 +1049,7 @@ export const App = () => {
 	const enterDiffCommentMode = () => {
 		const scrollTop = diffScrollRef.current?.scrollTop ?? 0
 		suppressNextDiffCommentScrollRef.current = true
-		setDiffCommentAnchorIndex(nearestDiffCommentAnchorIndex(diffCommentAnchors, scrollTop))
+		setDiffCommentAnchorIndex(nearestDiffCommentAnchorIndex(diffCommentAnchors, scrollTop + DIFF_STICKY_HEADER_LINES))
 		setDiffCommentMode(true)
 	}
 
@@ -1010,6 +1072,16 @@ export const App = () => {
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 	}
 
+	const selectDiffCommentLine = (renderLine: number, side: DiffCommentSide | null) => {
+		const lineAnchors = diffCommentAnchors.filter((anchor) => anchor.renderLine === renderLine)
+		const nextAnchor = (side ? lineAnchors.find((anchor) => anchor.side === side) : undefined) ?? lineAnchors[0]
+		if (!nextAnchor) return
+		suppressNextDiffCommentScrollRef.current = true
+		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
+		setDiffFileIndex(nextAnchor.fileIndex)
+		setDiffCommentMode(true)
+	}
+
 	const editComment = (transform: (state: CommentEditorValue) => CommentEditorValue) => {
 		setCommentModal((current) => {
 			const next = transform({ body: current.body, cursor: current.cursor })
@@ -1675,11 +1747,11 @@ export const App = () => {
 					selectDiffCommentSide("RIGHT")
 					return
 				}
-				if (key.name === "]" && selectedDiffState?.status === "ready") {
+				if (key.name === "]" && selectedDiffState?._tag === "Ready") {
 					jumpDiffFile(1)
 					return
 				}
-				if (key.name === "[" && selectedDiffState?.status === "ready") {
+				if (key.name === "[" && selectedDiffState?._tag === "Ready") {
 					jumpDiffFile(-1)
 					return
 				}
@@ -1691,7 +1763,7 @@ export const App = () => {
 				setDiffCommentMode(false)
 				return
 			}
-			if (key.name === "c" && selectedDiffState?.status === "ready") {
+			if (key.name === "c" && selectedDiffState?._tag === "Ready") {
 				enterDiffCommentMode()
 				return
 			}
@@ -1711,32 +1783,7 @@ export const App = () => {
 				scrollDiffBy(halfPage)
 				return
 			}
-			if (isShiftG(key)) {
-				scrollDiffTo(Number.MAX_SAFE_INTEGER)
-				setPendingG(false)
-				if (pendingGTimeoutRef.current !== null) {
-					clearTimeout(pendingGTimeoutRef.current)
-					pendingGTimeoutRef.current = null
-				}
-				return
-			}
-			if (key.name === "g") {
-				if (pendingG) {
-					scrollDiffTo(0)
-					setPendingG(false)
-					if (pendingGTimeoutRef.current !== null) {
-						clearTimeout(pendingGTimeoutRef.current)
-						pendingGTimeoutRef.current = null
-					}
-				} else {
-					setPendingG(true)
-					pendingGTimeoutRef.current = setTimeout(() => {
-						setPendingG(false)
-						pendingGTimeoutRef.current = null
-					}, 500)
-				}
-				return
-			}
+			if (handleVimGoto(key, () => scrollDiffTo(0), () => scrollDiffTo(Number.MAX_SAFE_INTEGER))) return
 			if (key.name === "up" || key.name === "k") {
 				scrollDiffBy(-1)
 				return
@@ -1766,11 +1813,11 @@ export const App = () => {
 				flashNotice(`Refreshing diff for #${selectedPullRequest.number}`)
 				return
 			}
-			if ((key.name === "]" || key.name === "right" || key.name === "l") && selectedDiffState?.status === "ready") {
+			if ((key.name === "]" || key.name === "right" || key.name === "l") && selectedDiffState?._tag === "Ready") {
 				jumpDiffFile(1)
 				return
 			}
-			if ((key.name === "[" || key.name === "left" || key.name === "h") && selectedDiffState?.status === "ready") {
+			if ((key.name === "[" || key.name === "left" || key.name === "h") && selectedDiffState?._tag === "Ready") {
 				jumpDiffFile(-1)
 				return
 			}
@@ -1822,14 +1869,9 @@ export const App = () => {
 				setDetailScrollOffset(0)
 				return
 			}
-			if (key.name === "end" || isShiftG(key)) {
+			if (key.name === "end") {
 				detailScrollRef.current?.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER })
 				setDetailScrollOffset(Number.MAX_SAFE_INTEGER)
-				setPendingG(false)
-				if (pendingGTimeoutRef.current !== null) {
-					clearTimeout(pendingGTimeoutRef.current)
-					pendingGTimeoutRef.current = null
-				}
 				return
 			}
 			if (key.name === "pageup") {
@@ -1842,24 +1884,10 @@ export const App = () => {
 				setDetailScrollOffset((current) => current + halfPage)
 				return
 			}
-			if (key.name === "g") {
-				if (pendingG) {
-					detailScrollRef.current?.scrollTo({ x: 0, y: 0 })
-					setDetailScrollOffset(0)
-					setPendingG(false)
-					if (pendingGTimeoutRef.current !== null) {
-						clearTimeout(pendingGTimeoutRef.current)
-						pendingGTimeoutRef.current = null
-					}
-				} else {
-					setPendingG(true)
-					pendingGTimeoutRef.current = setTimeout(() => {
-						setPendingG(false)
-						pendingGTimeoutRef.current = null
-					}, 500)
-				}
-				return
-			}
+			if (handleVimGoto(key,
+				() => { detailScrollRef.current?.scrollTo({ x: 0, y: 0 }); setDetailScrollOffset(0) },
+				() => { detailScrollRef.current?.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER }); setDetailScrollOffset(Number.MAX_SAFE_INTEGER) },
+			)) return
 			if (key.name === "up" || key.name === "k") {
 				detailScrollRef.current?.scrollBy({ x: 0, y: -1 })
 				setDetailScrollOffset((current) => Math.max(0, current - 1))
@@ -2001,31 +2029,10 @@ export const App = () => {
 			})
 			return
 		}
-		// Vim-style navigation: gg to go to top, G to go to bottom
-		if (isShiftG(key)) {
-			setSelectedIndex((_current) => {
-				if (visiblePullRequests.length === 0) return 0
-				return visiblePullRequests.length - 1
-			})
-			return
-		}
-		if (key.name === "g") {
-			if (pendingG) {
-				setSelectedIndex(0)
-				setPendingG(false)
-				if (pendingGTimeoutRef.current !== null) {
-					clearTimeout(pendingGTimeoutRef.current)
-					pendingGTimeoutRef.current = null
-				}
-			} else {
-				setPendingG(true)
-				pendingGTimeoutRef.current = setTimeout(() => {
-					setPendingG(false)
-					pendingGTimeoutRef.current = null
-				}, 500)
-			}
-			return
-		}
+		if (handleVimGoto(key,
+			() => setSelectedIndex(0),
+			() => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
+		)) return
 		if ((key.name === "return" || key.name === "enter") && !detailFullView) {
 			setDetailFullView(true)
 			setDetailScrollOffset(0)
@@ -2137,7 +2144,7 @@ export const App = () => {
 					pullRequest={selectedPullRequest}
 					diffState={selectedDiffState}
 					stackedFiles={stackedDiffFiles}
-					fileIndex={diffFileIndex}
+					scrollTop={diffScrollTop}
 					view={effectiveDiffRenderView}
 					wrapMode={diffWrapMode}
 					paneWidth={contentWidth}
@@ -2148,7 +2155,7 @@ export const App = () => {
 					commentMode={diffCommentMode}
 					selectedCommentAnchor={selectedDiffCommentAnchor}
 					selectedCommentThread={selectedDiffCommentThread}
-					commentCount={selectedDiffCommentCount}
+					onSelectCommentLine={selectDiffCommentLine}
 					themeId={themeId}
 				/>
 			) : isWideLayout && detailFullView ? (
@@ -2168,10 +2175,10 @@ export const App = () => {
 					</scrollbox>
 				</box>
 			) : isWideLayout ? (
-				<box flexGrow={1} flexDirection="row">
+				<box key="wide-main" flexGrow={1} flexDirection="row">
 					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column" paddingLeft={sectionPadding} paddingRight={sectionPadding}>
 						<scrollbox height={wideBodyHeight} flexGrow={0}>
-							<PullRequestList {...prListProps} contentWidth={leftContentWidth} />
+							<PullRequestList key={`wide-${leftContentWidth}`} {...prListProps} contentWidth={leftContentWidth} />
 						</scrollbox>
 					</box>
 					<SeparatorColumn height={wideBodyHeight} junctionRows={detailJunctions} />
@@ -2204,13 +2211,13 @@ export const App = () => {
 					</scrollbox>
 				</box>
 			) : (
-				<box height={wideBodyHeight} flexDirection="column">
-					<DetailsPane pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={rightContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
+				<box key="narrow-main" height={wideBodyHeight} flexDirection="column">
+					<DetailsPane pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
 						<scrollbox flexGrow={1}>
 							<box paddingLeft={sectionPadding} paddingRight={sectionPadding}>
-								<PullRequestList {...prListProps} contentWidth={leftContentWidth} />
+								<PullRequestList key={`narrow-${fullscreenContentWidth}`} {...prListProps} contentWidth={fullscreenContentWidth} />
 							</box>
 						</scrollbox>
 					</box>

package/src/domain.ts

@@ -1,8 +1,14 @@
-export type PullRequestState = "open" | "closed" | "merged"
+import { Schema } from "effect"
 
-export const pullRequestQueueModes = ["authored", "review", "assigned", "mentioned"] as const
+export const LoadStatus = Schema.Literals(["loading", "ready", "error"])
+export type LoadStatus = Schema.Schema.Type<typeof LoadStatus>
 
-export type PullRequestQueueMode = typeof pullRequestQueueModes[number]
+export const PullRequestState = Schema.Literals(["open", "closed", "merged"])
+export type PullRequestState = Schema.Schema.Type<typeof PullRequestState>
+
+export const PullRequestQueueMode = Schema.Literals(["authored", "review", "assigned", "mentioned"])
+export type PullRequestQueueMode = Schema.Schema.Type<typeof PullRequestQueueMode>
+export const pullRequestQueueModes = PullRequestQueueMode.literals
 
 export const pullRequestQueueLabels = {
 	authored: "authored",
@@ -21,11 +27,30 @@ export const pullRequestQueueSearchQualifier = (mode: PullRequestQueueMode, auth
 	return qualifiers[mode]
 }
 
-export type CheckConclusion = "success" | "failure" | "neutral" | "skipped" | "cancelled" | "timed_out"
+export const CheckConclusion = Schema.Literals(["success", "failure", "neutral", "skipped", "cancelled", "timed_out"])
+export type CheckConclusion = Schema.Schema.Type<typeof CheckConclusion>
+
+export const CheckRunStatus = Schema.Literals(["completed", "in_progress", "queued", "pending"])
+export type CheckRunStatus = Schema.Schema.Type<typeof CheckRunStatus>
+
+export const CheckRollupStatus = Schema.Literals(["passing", "pending", "failing", "none"])
+export type CheckRollupStatus = Schema.Schema.Type<typeof CheckRollupStatus>
+
+export const ReviewStatus = Schema.Literals(["draft", "approved", "changes", "review", "none"])
+export type ReviewStatus = Schema.Schema.Type<typeof ReviewStatus>
+
+export const Mergeable = Schema.Literals(["mergeable", "conflicting", "unknown"])
+export type Mergeable = Schema.Schema.Type<typeof Mergeable>
+
+export const DiffCommentSide = Schema.Literals(["LEFT", "RIGHT"])
+export type DiffCommentSide = Schema.Schema.Type<typeof DiffCommentSide>
+
+export const PullRequestMergeAction = Schema.Literals(["squash", "auto", "admin", "disable-auto"])
+export type PullRequestMergeAction = Schema.Schema.Type<typeof PullRequestMergeAction>
 
 export interface CheckItem {
 	readonly name: string
-	readonly status: "completed" | "in_progress" | "queued" | "pending"
+	readonly status: CheckRunStatus
 	readonly conclusion: CheckConclusion | null
 }
 
@@ -34,8 +59,6 @@ export interface PullRequestLabel {
 	readonly color: string | null
 }
 
-export type DiffCommentSide = "LEFT" | "RIGHT"
-
 export interface CreatePullRequestCommentInput {
 	readonly repository: string
 	readonly number: number
@@ -69,8 +92,8 @@ export interface PullRequestItem {
 	readonly deletions: number
 	readonly changedFiles: number
 	readonly state: PullRequestState
-	readonly reviewStatus: "draft" | "approved" | "changes" | "review" | "none"
-	readonly checkStatus: "passing" | "pending" | "failing" | "none"
+	readonly reviewStatus: ReviewStatus
+	readonly checkStatus: CheckRollupStatus
 	readonly checkSummary: string | null
 	readonly checks: readonly CheckItem[]
 	readonly autoMergeEnabled: boolean
@@ -86,11 +109,9 @@ export interface PullRequestMergeInfo {
 	readonly title: string
 	readonly state: PullRequestState
 	readonly isDraft: boolean
-	readonly mergeable: "mergeable" | "conflicting" | "unknown"
-	readonly reviewStatus: PullRequestItem["reviewStatus"]
-	readonly checkStatus: PullRequestItem["checkStatus"]
+	readonly mergeable: Mergeable
+	readonly reviewStatus: ReviewStatus
+	readonly checkStatus: CheckRollupStatus
 	readonly checkSummary: string | null
 	readonly autoMergeEnabled: boolean
 }
-
-export type PullRequestMergeAction = "squash" | "auto" | "admin" | "disable-auto"

package/src/services/GitHubService.ts

@@ -1,27 +1,26 @@
 import { Context, Effect, Layer, Schema } from "effect"
 import { config } from "../config.js"
-import { pullRequestQueueSearchQualifier, type CheckItem, type CreatePullRequestCommentInput, type PullRequestItem, type PullRequestMergeAction, type PullRequestMergeInfo, type PullRequestQueueMode, type PullRequestReviewComment } from "../domain.js"
+import { DiffCommentSide, pullRequestQueueSearchQualifier, type CheckItem, type CreatePullRequestCommentInput, type Mergeable, type PullRequestItem, type PullRequestMergeAction, type PullRequestMergeInfo, type PullRequestQueueMode, type PullRequestReviewComment, type ReviewStatus } from "../domain.js"
 import { getMergeActionDefinition } from "../mergeActions.js"
 import { CommandRunner, type CommandError, type JsonParseError } from "./CommandRunner.js"
 
 const NullableString = Schema.NullOr(Schema.String)
-const OptionalNullableString = Schema.optional(NullableString)
-const OptionalNullableNumber = Schema.optional(Schema.NullOr(Schema.Number))
-
-const RawCheckRunSchema = Schema.Struct({
-	__typename: Schema.Literal("CheckRun"),
-	name: OptionalNullableString,
-	status: OptionalNullableString,
-	conclusion: OptionalNullableString,
-})
-
-const RawStatusContextSchema = Schema.Struct({
-	__typename: Schema.Literal("StatusContext"),
-	context: OptionalNullableString,
-	state: OptionalNullableString,
-})
+const OptionalNullableString = Schema.optionalKey(NullableString)
+const OptionalNullableNumber = Schema.optionalKey(Schema.NullOr(Schema.Number))
 
-const RawCheckContextSchema = Schema.Union([RawCheckRunSchema, RawStatusContextSchema])
+const RawCheckContextSchema = Schema.Union([
+	Schema.Struct({
+		__typename: Schema.tag("CheckRun"),
+		name: OptionalNullableString,
+		status: OptionalNullableString,
+		conclusion: OptionalNullableString,
+	}),
+	Schema.Struct({
+		__typename: Schema.tag("StatusContext"),
+		context: OptionalNullableString,
+		state: OptionalNullableString,
+	}),
+]).pipe(Schema.toTaggedUnion("__typename"))
 
 const RawAuthorSchema = Schema.Struct({ login: Schema.String })
 const RawRepositorySchema = Schema.Struct({ nameWithOwner: Schema.String })
@@ -55,7 +54,7 @@ const RawPullRequestNodeSchema = Schema.Struct({
 	additions: Schema.Number,
 	deletions: Schema.Number,
 	changedFiles: Schema.Number,
-	statusCheckRollup: Schema.optional(Schema.NullOr(Schema.Struct({
+	statusCheckRollup: Schema.optionalKey(Schema.NullOr(Schema.Struct({
 		contexts: Schema.Struct({ nodes: Schema.Array(RawCheckContextSchema) }),
 	}))),
 })
@@ -88,22 +87,20 @@ const MergeInfoResponseSchema = Schema.Struct({
 	statusCheckRollup: Schema.Array(RawCheckContextSchema),
 })
 
-const DiffCommentSideSchema = Schema.Union([Schema.Literal("LEFT"), Schema.Literal("RIGHT")])
-
 const PullRequestCommentSchema = Schema.Struct({
-	id: Schema.optional(Schema.NullOr(Schema.Union([Schema.Number, Schema.String]))),
+	id: Schema.optionalKey(Schema.NullOr(Schema.Union([Schema.Number, Schema.String]))),
 	node_id: OptionalNullableString,
 	body: OptionalNullableString,
 	html_url: OptionalNullableString,
 	url: OptionalNullableString,
 	created_at: OptionalNullableString,
-	user: Schema.optional(Schema.NullOr(Schema.Struct({
+	user: Schema.optionalKey(Schema.NullOr(Schema.Struct({
 		login: OptionalNullableString,
 	}))),
 	path: OptionalNullableString,
 	line: OptionalNullableNumber,
 	original_line: OptionalNullableNumber,
-	side: Schema.optional(Schema.NullOr(DiffCommentSideSchema)),
+	side: Schema.optionalKey(Schema.NullOr(DiffCommentSide)),
 })
 
 const CommentsResponseSchema = Schema.Union([
@@ -205,13 +202,13 @@ const normalizeDate = (value: string | null | undefined) => {
 const getPullRequestState = (item: { readonly state: string; readonly merged: boolean }): PullRequestItem["state"] =>
 	item.merged ? "merged" : item.state.toLowerCase() === "open" ? "open" : "closed"
 
-const REVIEW_STATUS_BY_DECISION: Record<string, PullRequestItem["reviewStatus"]> = {
+const REVIEW_STATUS_BY_DECISION: Record<string, ReviewStatus> = {
 	APPROVED: "approved",
 	CHANGES_REQUESTED: "changes",
 	REVIEW_REQUIRED: "review",
 }
 
-const getReviewStatus = (item: { readonly isDraft: boolean; readonly reviewDecision: string | null }): PullRequestItem["reviewStatus"] => {
+const getReviewStatus = (item: { readonly isDraft: boolean; readonly reviewDecision: string | null }): ReviewStatus => {
 	if (item.isDraft) return "draft"
 	if (item.reviewDecision) return REVIEW_STATUS_BY_DECISION[item.reviewDecision] ?? "none"
 	return "none"
@@ -239,19 +236,24 @@ const normalizeCheckStatus = (raw: string | null | undefined): CheckItem["status
 const normalizeCheckConclusion = (raw: string | null | undefined): CheckItem["conclusion"] =>
 	raw ? CHECK_CONCLUSION_BY_RAW[raw] ?? null : null
 
-const getContextStatus = (context: RawCheckContext): CheckItem["status"] => {
-	if (context.__typename === "CheckRun") return normalizeCheckStatus(context.status)
-	if (context.state === "PENDING") return "in_progress"
-	return "completed"
-}
+const getContextStatus = (context: RawCheckContext): CheckItem["status"] =>
+	RawCheckContextSchema.match(context, {
+		CheckRun: (run) => normalizeCheckStatus(run.status),
+		StatusContext: (status) => status.state === "PENDING" ? "in_progress" : "completed",
+	})
 
-const getContextConclusion = (context: RawCheckContext): CheckItem["conclusion"] => {
-	if (context.__typename === "CheckRun") return normalizeCheckConclusion(context.conclusion)
-	if (context.state === "SUCCESS") return "success"
-	if (context.state === "FAILURE" || context.state === "ERROR") return "failure"
-	return null
+const STATUS_CONTEXT_CONCLUSION: Record<string, NonNullable<CheckItem["conclusion"]>> = {
+	SUCCESS: "success",
+	FAILURE: "failure",
+	ERROR: "failure",
 }
 
+const getContextConclusion = (context: RawCheckContext): CheckItem["conclusion"] =>
+	RawCheckContextSchema.match(context, {
+		CheckRun: (run) => normalizeCheckConclusion(run.conclusion),
+		StatusContext: (status) => (status.state ? STATUS_CONTEXT_CONCLUSION[status.state] : null) ?? null,
+	})
+
 const getCheckInfoFromContexts = (contexts: readonly RawCheckContext[]): Pick<PullRequestItem, "checkStatus" | "checkSummary" | "checks"> => {
 	if (contexts.length === 0) {
 		return { checkStatus: "none", checkSummary: null, checks: [] }
@@ -379,12 +381,12 @@ const fallbackCreatedComment = (input: CreatePullRequestCommentInput): PullReque
 
 export type GitHubError = CommandError | JsonParseError | Schema.SchemaError
 
-const MERGEABLE_BY_RAW: Record<string, PullRequestMergeInfo["mergeable"]> = {
+const MERGEABLE_BY_RAW: Record<string, Mergeable> = {
 	MERGEABLE: "mergeable",
 	CONFLICTING: "conflicting",
 }
 
-const normalizeMergeable = (value: string): PullRequestMergeInfo["mergeable"] =>
+const normalizeMergeable = (value: string): Mergeable =>
 	MERGEABLE_BY_RAW[value] ?? "unknown"
 
 export class GitHubService extends Context.Service<GitHubService, {

package/src/ui/FooterHints.tsx

@@ -1,10 +1,14 @@
+import { Data } from "effect"
 import { colors } from "./colors.js"
 import { TextLine } from "./primitives.js"
 
-export interface RetryProgress {
-	readonly attempt: number
-	readonly max: number
-}
+export type RetryProgress = Data.TaggedEnum<{
+	Idle: {}
+	Retrying: { readonly attempt: number; readonly max: number }
+}>
+
+export const RetryProgress = Data.taggedEnum<RetryProgress>()
+export const initialRetryProgress: RetryProgress = RetryProgress.Idle()
 
 export const FooterHints = ({
 	filterEditing,
@@ -29,7 +33,7 @@ export const FooterHints = ({
 	hasError: boolean
 	isLoading: boolean
 	loadingIndicator: string
-	retryProgress: RetryProgress | null
+	retryProgress: RetryProgress
 }) => {
 	if (filterEditing) {
 		return (
@@ -148,7 +152,7 @@ export const FooterHints = ({
 					<span fg={colors.muted}> clear  </span>
 				</>
 			) : null}
-			{retryProgress ? (
+			{retryProgress._tag === "Retrying" ? (
 				<>
 					<span fg={colors.status.pending}>retry</span>
 					<span fg={colors.muted}> {retryProgress.attempt}/{retryProgress.max}  </span>

package/src/ui/PullRequestDiffPane.tsx

@@ -1,8 +1,8 @@
-import type { DiffRenderable, ScrollBoxRenderable } from "@opentui/core"
+import type { DiffRenderable, MouseEvent, ScrollBoxRenderable } from "@opentui/core"
 import { useMemo, type Ref } from "react"
-import type { PullRequestItem, PullRequestReviewComment } from "../domain.js"
+import type { DiffCommentSide, PullRequestItem, PullRequestReviewComment } from "../domain.js"
 import { colors, type ThemeId } from "./colors.js"
-import { createDiffSyntaxStyle, diffFileStats, diffFileStatText, diffStatText, safeDiffFileIndex, type DiffCommentAnchor, type PullRequestDiffState, type StackedDiffFilePatch } from "./diff.js"
+import { createDiffSyntaxStyle, diffFileStats, diffFileStatsText, diffStatText, stackedDiffFileAtLine, type DiffFileStats, type DiffView, type DiffWrapMode, type PullRequestDiffState, type StackedDiffCommentAnchor, type StackedDiffFilePatch } from "./diff.js"
 import { LoadingPane, StatusCard } from "./DetailsPane.js"
 import { Divider, fitCell, PlainLine, TextLine } from "./primitives.js"
 import { shortRepoName } from "./pullRequests.js"
@@ -27,8 +27,7 @@ const DiffStats = ({ pullRequest }: { pullRequest: PullRequestItem }) => {
 	)
 }
 
-const FileStats = ({ file }: { file: StackedDiffFilePatch["file"] }) => {
-	const stats = diffFileStats(file)
+const FileStats = ({ stats }: { stats: DiffFileStats }) => {
 	return (
 		<>
 			{stats.additions > 0 ? <span fg={colors.status.passing}>{`+${stats.additions}`}</span> : null}
@@ -38,16 +37,32 @@ const FileStats = ({ file }: { file: StackedDiffFilePatch["file"] }) => {
 	)
 }
 
-const FileHeader = ({ file, index, count, width }: { file: StackedDiffFilePatch["file"]; index: number; count: number; width: number }) => {
+const FileHeader = ({
+	file,
+	index,
+	count,
+	width,
+	suffix = "",
+	suffixColor = colors.muted,
+}: {
+	file: StackedDiffFilePatch["file"]
+	index: number
+	count: number
+	width: number
+	suffix?: string
+	suffixColor?: string
+}) => {
 	const counter = `${index + 1}/${count}`
-	const statsText = diffFileStatText(file)
-	const nameWidth = Math.max(1, width - counter.length - statsText.length - 5)
+	const stats = diffFileStats(file)
+	const statsText = diffFileStatsText(stats)
+	const nameWidth = Math.max(1, width - counter.length - statsText.length - suffix.length - 5)
 	return (
 		<TextLine>
 			<span fg={colors.muted}>{counter} </span>
 			<span fg={colors.text}>{fitCell(file.name, nameWidth)}</span>
 			{statsText ? <span fg={colors.muted}>  </span> : null}
-			<FileStats file={file} />
+			<FileStats stats={stats} />
+			{suffix ? <span fg={suffixColor}>{suffix}</span> : null}
 		</TextLine>
 	)
 }
@@ -56,7 +71,7 @@ export const PullRequestDiffPane = ({
 	pullRequest,
 	diffState,
 	stackedFiles,
-	fileIndex,
+	scrollTop,
 	view,
 	wrapMode,
 	paneWidth,
@@ -67,29 +82,27 @@ export const PullRequestDiffPane = ({
 	commentMode,
 	selectedCommentAnchor,
 	selectedCommentThread,
-	commentCount,
+	onSelectCommentLine,
 	themeId,
 }: {
 	pullRequest: PullRequestItem | null
 	diffState: PullRequestDiffState | undefined
 	stackedFiles: readonly StackedDiffFilePatch[]
-	fileIndex: number
-	view: "unified" | "split"
-	wrapMode: "none" | "word"
+	scrollTop: number
+	view: DiffView
+	wrapMode: DiffWrapMode
 	paneWidth: number
 	height: number
 	loadingIndicator: string
 	scrollRef: Ref<ScrollBoxRenderable>
 	setDiffRef: (index: number, diff: DiffRenderable | null) => void
 	commentMode: boolean
-	selectedCommentAnchor: DiffCommentAnchor | null
+	selectedCommentAnchor: StackedDiffCommentAnchor | null
 	selectedCommentThread: readonly PullRequestReviewComment[]
-	commentCount: number
+	onSelectCommentLine: (renderLine: number, side: DiffCommentSide | null) => void
 	themeId: ThemeId
 }) => {
-	const readyFiles = diffState?.status === "ready" ? diffState.files : []
-	const safeIndex = safeDiffFileIndex(readyFiles, fileIndex)
-	const file = readyFiles[safeIndex] ?? null
+	const readyFiles = diffState?._tag === "Ready" ? diffState.files : []
 	const syntaxStyle = useMemo(() => createDiffSyntaxStyle(), [themeId])
 
 	if (!pullRequest) {
@@ -101,7 +114,7 @@ export const PullRequestDiffPane = ({
 	const leftHeader = `#${pullRequest.number} ${shortRepoName(pullRequest.repository)}`
 	const headerGap = Math.max(2, headerWidth - leftHeader.length - stats.length)
 
-	if (!diffState || diffState.status === "loading") {
+	if (!diffState || diffState._tag === "Loading") {
 		return (
 			<box height={height} flexDirection="column">
 				<box height={1} paddingLeft={1} paddingRight={1}>
@@ -118,7 +131,7 @@ export const PullRequestDiffPane = ({
 		)
 	}
 
-	if (diffState.status === "error") {
+	if (diffState._tag === "Error") {
 		return (
 			<box height={height} flexDirection="column">
 				<box height={1} paddingLeft={1} paddingRight={1}>
@@ -130,20 +143,11 @@ export const PullRequestDiffPane = ({
 		)
 	}
 
-	if (readyFiles.length === 0 || !file) {
+	if (readyFiles.length === 0 || stackedFiles.length === 0) {
 		return <LoadingPane content={{ title: "No diff", hint: "This PR has no patch contents" }} width={paneWidth} height={height} />
 	}
 
-	const fileCounter = `${safeIndex + 1}/${readyFiles.length}`
-	const currentFileStatsText = file ? diffFileStatText(file) : ""
 	const selectedSideLabel = selectedCommentAnchor?.side === "RIGHT" ? "right" : selectedCommentAnchor?.side === "LEFT" ? "left" : null
-	const commentLabel = commentMode && selectedCommentAnchor
-		? `  ${selectedSideLabel} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
-		: commentMode ? "  c no lines" : commentCount > 0 ? `  ● ${commentCount}` : ""
-	const commentLabelColor = commentMode && selectedCommentAnchor?.side === "LEFT"
-		? colors.status.failing
-		: commentMode ? colors.status.passing : colors.status.passing
-	const fileNameWidth = Math.max(8, headerWidth - fileCounter.length - currentFileStatsText.length - commentLabel.length - 4)
 	const commentPeek = commentMode && selectedCommentAnchor && selectedCommentThread.length > 0
 		? selectedCommentThread[selectedCommentThread.length - 1]!
 		: null
@@ -152,6 +156,31 @@ export const PullRequestDiffPane = ({
 	const commentPeekMeta = commentPeek && selectedCommentAnchor
 		? `${selectedSideLabel ?? "line"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}  ${commentPeek.author}  ${commentPeekCount}  enter thread  a comment`
 		: ""
+	const stickyScrollTop = Math.max(0, Math.floor(scrollTop))
+	const stickyFile = stackedDiffFileAtLine(stackedFiles, stickyScrollTop) ?? stackedFiles[0]
+	const stickyArrayIndex = stickyFile ? stackedFiles.indexOf(stickyFile) : -1
+	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.fileIndex !== stackedFile?.index) return ""
+		return `  ${selectedCommentAnchor.side === "RIGHT" ? "right" : "left"} ${selectedCommentAnchor.side === "RIGHT" ? "+" : "-"}${selectedCommentAnchor.line}`
+	}
+	const stickyCommentColor = selectedCommentAnchor?.side === "LEFT" ? colors.status.failing : colors.status.passing
+	const handleDiffMouseDown = function (this: ScrollBoxRenderable, event: MouseEvent) {
+		if (event.button !== 0) return
+		const localY = event.y - this.viewport.y
+		if (localY < 0 || localY >= this.viewport.height) return
+		const localX = event.x - this.viewport.x
+		const side = view === "split"
+			? localX < Math.floor(paneWidth / 2) ? "LEFT" : "RIGHT"
+			: null
+		onSelectCommentLine(Math.max(0, Math.floor(this.scrollTop + localY)), side)
+		event.preventDefault()
+		event.stopPropagation()
+	}
 
 	return (
 		<box height={height} flexDirection="column">
@@ -163,17 +192,8 @@ export const PullRequestDiffPane = ({
 					<DiffStats pullRequest={pullRequest} />
 				</TextLine>
 			</box>
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TextLine>
-					<span fg={colors.text}>{fitCell(file.name, fileNameWidth)}</span>
-					<span fg={colors.muted}>  {fileCounter}</span>
-					{currentFileStatsText ? <span fg={colors.muted}>  </span> : null}
-					<FileStats file={file} />
-					{commentLabel ? <span fg={commentLabelColor}>{commentLabel}</span> : null}
-				</TextLine>
-			</box>
 			<Divider width={paneWidth} />
-			<scrollbox ref={scrollRef} focused={!commentMode} flexGrow={1} scrollY scrollX={false}>
+			<scrollbox ref={scrollRef} focused={!commentMode} 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}
@@ -207,6 +227,25 @@ export const PullRequestDiffPane = ({
 					</box>
 				))}
 			</scrollbox>
+			{stickyFile ? (
+				<box position="absolute" top={2} left={0} width={paneWidth} height={2} zIndex={10} flexDirection="column" backgroundColor={colors.background}>
+					{incomingFile ? (
+						<>
+							<Divider width={paneWidth} />
+							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+								<FileHeader file={incomingFile.file} index={incomingFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(incomingFile)} suffixColor={stickyCommentColor} />
+							</box>
+						</>
+					) : (
+						<>
+							<box height={1} paddingLeft={1} paddingRight={1} backgroundColor={colors.background}>
+								<FileHeader file={stickyFile.file} index={stickyFile.index} count={readyFiles.length} width={paneWidth} suffix={stickyCommentLabelFor(stickyFile)} suffixColor={stickyCommentColor} />
+							</box>
+							<Divider width={paneWidth} />
+						</>
+					)}
+				</box>
+			) : null}
 			{commentPeek ? (
 				<>
 					<Divider width={paneWidth} />

package/src/ui/PullRequestList.tsx

@@ -1,11 +1,10 @@
 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"
 
-export type LoadStatus = "loading" | "ready" | "error"
 export type PullRequestGroups = Array<[string, PullRequestItem[]]>
 
 const GROUP_ICON = "◆"
@@ -77,8 +76,8 @@ const PullRequestRow = ({
 	const checkColor = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
 
 	return (
-		<box height={1} onMouseDown={onSelect}>
-			<TextLine fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
+		<box width={contentWidth} height={1} onMouseDown={onSelect}>
+			<TextLine width={contentWidth} fg={rowTextColor} bg={selected ? colors.selectedBg : undefined}>
 				<span fg={indicatorColor}>{fitCell(reviewIcon(pullRequest), reviewWidth)}</span>
 				<span> </span>
 				<span fg={numberColor}><MatchedCell text={`#${pullRequest.number}`} width={numberWidth} query={filterText} align="right" /></span>
@@ -117,7 +116,7 @@ export const PullRequestList = ({
 	const emptyText = filterText.length > 0 ? "- No matching pull requests." : "- No open pull requests."
 
 	return (
-		<box flexDirection="column">
+		<box width={contentWidth} flexDirection="column">
 			<SectionTitle title="PULL REQUESTS" />
 			{showFilterBar ? (
 				<TextLine>
@@ -138,11 +137,11 @@ export const PullRequestList = ({
 							<PullRequestRow
 								key={pullRequest.url}
 								pullRequest={pullRequest}
-							selected={pullRequest.url === selectedUrl}
-							contentWidth={contentWidth}
-							numWidth={numWidth}
-							filterText={filterText}
-							onSelect={() => onSelectPullRequest(pullRequest.url)}
+								selected={pullRequest.url === selectedUrl}
+								contentWidth={contentWidth}
+								numWidth={numWidth}
+								filterText={filterText}
+								onSelect={() => onSelectPullRequest(pullRequest.url)}
 							/>
 						))}
 					</box>

package/src/ui/diff.ts

@@ -1,7 +1,17 @@
 import { parseColor, 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 },
@@ -176,8 +189,8 @@ export const safeDiffFileIndex = (files: readonly DiffFilePatch[], index: number
 
 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 +210,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 +226,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 +255,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 +346,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 +370,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 +410,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

package/src/ui/modals.tsx

@@ -96,19 +96,19 @@ export const initialThemeModalState: ThemeModalState = {
 
 export type Modal = Data.TaggedEnum<{
 	None: {}
-	Label: { readonly state: LabelModalState }
-	Close: { readonly state: CloseModalState }
-	Merge: { readonly state: MergeModalState }
-	Comment: { readonly state: CommentModalState }
-	CommentThread: { readonly state: CommentThreadModalState }
-	Theme: { readonly state: ThemeModalState }
+	Label: LabelModalState
+	Close: CloseModalState
+	Merge: MergeModalState
+	Comment: CommentModalState
+	CommentThread: CommentThreadModalState
+	Theme: ThemeModalState
 }>
 
 export const Modal = Data.taggedEnum<Modal>()
 export const initialModal: Modal = Modal.None()
 
 export type ModalTag = Modal["_tag"]
-export type ModalState<Tag extends Exclude<ModalTag, "None">> = Extract<Modal, { _tag: Tag }>["state"]
+export type ModalState<Tag extends Exclude<ModalTag, "None">> = Omit<Extract<Modal, { _tag: Tag }>, "_tag">
 
 export const modalInitialStates = {
 	Label: initialLabelModalState,

package/src/ui/primitives.tsx

@@ -29,8 +29,8 @@ export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: stri
 	</box>
 )
 
-export const TextLine = ({ children, fg = colors.text, bg }: { children: React.ReactNode; fg?: string; bg?: string | undefined }) => (
-	<box height={1}>
+export const TextLine = ({ children, fg = colors.text, bg, width }: { children: React.ReactNode; fg?: string; bg?: string | undefined; width?: number }) => (
+	<box height={1} {...(width === undefined ? {} : { width })}>
 		{bg ? (
 			<text wrapMode="none" truncate fg={fg} bg={bg}>
 				{children}