@kitlangton/ghui 0.1.21 → 0.1.22

package/src/App.tsx

@@ -1,6 +1,7 @@
 import type { DiffRenderable, PasteEvent, ScrollBoxRenderable } from "@opentui/core"
 import { RegistryContext, useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
-import { useBindings } from "@opentui/keymap/react"
+import { useAppCommandRegistry } from "./keyboard/useAppCommandRegistry.js"
+import { scrollBindings, useScopedBindings, type ScopedBindingAction } from "./keyboard/useScopedBindings.js"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
 import { Cause, Effect, Layer, Schedule } from "effect"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
@@ -25,8 +26,8 @@ import { GitHubService } from "./services/GitHubService.js"
 import { loadStoredThemeId, saveStoredThemeId } from "./themeStore.js"
 import { colors, filterThemeDefinitions, mixHex, 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, diffCommentLocationKey, getStackedDiffCommentAnchors, nearestDiffCommentAnchorIndex, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileAtLine, type DiffCommentAnchor, type DiffView, type DiffWrapMode, type StackedDiffCommentAnchor } from "./ui/diff.js"
-import { DETAIL_BODY_SCROLL_LIMIT, DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, getScrollableDetailBodyHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
+import { buildStackedDiffFiles, diffCommentAnchorLabel, diffCommentLineLabel, diffCommentLocationKey, diffCommentSideLabel, getStackedDiffCommentAnchors, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileAtLine, type DiffCommentAnchor, type DiffCommentKind, type DiffView, type DiffWrapMode, type StackedDiffCommentAnchor } from "./ui/diff.js"
+import { DETAIL_BODY_SCROLL_LIMIT, DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailHeaderHeight, getDetailJunctionRows, getScrollableDetailBodyHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
 import { FooterHints, initialRetryProgress, RetryProgress } from "./ui/FooterHints.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
 import { CommandPalette } from "./ui/CommandPalette.js"
@@ -96,6 +97,11 @@ interface AppliedDiffLineColorState {
 	readonly entries: readonly AppliedDiffLineColor[]
 }
 
+interface DiffCommentRangeSelection {
+	readonly start: StackedDiffCommentAnchor
+	readonly end: StackedDiffCommentAnchor
+}
+
 interface DetailHydration {
 	readonly token: symbol
 	notifyError: boolean
@@ -114,6 +120,23 @@ const DETAIL_PREFETCH_BEHIND = 1
 const DETAIL_PREFETCH_AHEAD = 3
 const DETAIL_PREFETCH_CONCURRENCY = 3
 const DETAIL_PREFETCH_DELAY_MS = 120
+const MAX_KEYMAP_COUNT_PREFIX = 99
+
+const countSequence = (count: number, key: string) => `${String(count).split("").join(" ")} ${key}`
+
+const countedVerticalBindings = (
+	moveUp: (count: number) => void,
+	moveDown: (count: number) => void,
+): Record<string, ScopedBindingAction> => {
+	const bindings: Record<string, ScopedBindingAction> = {}
+	for (let count = 1; count <= MAX_KEYMAP_COUNT_PREFIX; count++) {
+		bindings[countSequence(count, "k")] = () => moveUp(count)
+		bindings[countSequence(count, "up")] = () => moveUp(count)
+		bindings[countSequence(count, "j")] = () => moveDown(count)
+		bindings[countSequence(count, "down")] = () => moveDown(count)
+	}
+	return bindings
+}
 
 const appendPullRequestPage = (existing: readonly PullRequestItem[], incoming: readonly PullRequestItem[]) => {
 	const seen = new Set(existing.map((pullRequest) => pullRequest.url))
@@ -179,7 +202,6 @@ const noticeAtom = Atom.make<string | null>(null)
 const filterQueryAtom = Atom.make("")
 const filterDraftAtom = Atom.make("")
 const filterModeAtom = Atom.make(false)
-const pendingGAtom = Atom.make(false)
 const detailFullViewAtom = Atom.make(false)
 const detailScrollOffsetAtom = Atom.make(0)
 const diffFullViewAtom = Atom.make(false)
@@ -187,8 +209,8 @@ const diffFileIndexAtom = Atom.make(0)
 const diffScrollTopAtom = Atom.make(0)
 const diffRenderViewAtom = Atom.make<DiffView>("split")
 const diffWrapModeAtom = Atom.make<DiffWrapMode>("none")
-const diffCommentModeAtom = Atom.make(false)
 const diffCommentAnchorIndexAtom = Atom.make(0)
+const diffCommentRangeStartIndexAtom = Atom.make<number | null>(null)
 const diffCommentThreadsAtom = Atom.make<Record<string, readonly PullRequestReviewComment[]>>({}).pipe(Atom.keepAlive)
 const diffCommentsLoadedAtom = Atom.make<Record<string, "loading" | "ready">>({}).pipe(Atom.keepAlive)
 const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>({}).pipe(Atom.keepAlive)
@@ -381,12 +403,13 @@ const pullRequestDiffAtomKey = pullRequestRevisionAtomKey
 const parsePullRequestDetailAtomKey = (key: string) => parsePullRequestRevisionAtomKey(key, "detail")
 const parsePullRequestDiffAtomKey = (key: string) => parsePullRequestRevisionAtomKey(key, "diff")
 
-const isShiftG = (key: { readonly name: string; readonly shift?: boolean }) => key.name === "G" || key.name === "g" && key.shift
 
-const isThemeKey = (key: { readonly name: string; readonly ctrl?: boolean; readonly meta?: boolean }) => !key.ctrl && !key.meta && key.name.toLowerCase() === "t"
+
+const diffCommentThreadMapKey = (diffKey: string, location: Pick<PullRequestReviewComment, "path" | "side" | "line">) =>
+	`${diffKey}:${diffCommentLocationKey(location)}`
 
 const diffCommentThreadKey = (pullRequest: PullRequestItem, comment: Pick<PullRequestReviewComment, "path" | "side" | "line">) =>
-	`${pullRequestDiffKey(pullRequest)}:${diffCommentLocationKey(comment)}`
+	diffCommentThreadMapKey(pullRequestDiffKey(pullRequest), comment)
 
 const groupDiffCommentThreads = (pullRequest: PullRequestItem, comments: readonly PullRequestReviewComment[]) => {
 	const threads: Record<string, PullRequestReviewComment[]> = {}
@@ -411,13 +434,43 @@ const originalDiffLineColor = (anchor: DiffCommentAnchor): DiffLineColorConfig =
 	return { gutter: colors.diff.lineNumberBg, content: colors.diff.contextBg }
 }
 
-const diffCommentGutterColor = (anchor: DiffCommentAnchor, kind: "selected" | "thread") => {
-	const accent = kind === "thread"
-		? colors.status.pending
-		: anchor.side === "RIGHT" ? colors.status.passing : colors.status.failing
-	return mixHex(originalDiffLineColor(anchor).gutter, accent, 0.45)
+const selectedDiffCommentAccentByKind = {
+	addition: () => colors.status.passing,
+	deletion: () => colors.status.failing,
+	context: () => colors.muted,
+} satisfies Record<DiffCommentKind, () => string>
+
+const selectedDiffCommentAccent = (kind: DiffCommentKind) => selectedDiffCommentAccentByKind[kind]()
+
+const mixDiffLineContentColor = (base: string, accent: string, amount: number) =>
+	mixHex(base === "transparent" ? colors.background : base, accent, amount)
+
+const diffCommentLineColor = (anchor: DiffCommentAnchor, kind: "selected" | "range" | "thread"): DiffLineColorConfig => {
+	const original = originalDiffLineColor(anchor)
+	const accent = kind === "thread" ? colors.status.pending : selectedDiffCommentAccent(anchor.kind)
+	if (kind === "thread") return { ...original, gutter: mixHex(original.gutter, accent, 0.45) }
+	return {
+		gutter: mixHex(original.gutter, accent, kind === "selected" ? 0.68 : 0.42),
+		content: mixDiffLineContentColor(original.content, accent, kind === "selected" ? 0.2 : 0.1),
+	}
 }
 
+const sameDiffCommentTarget = (left: DiffCommentAnchor, right: DiffCommentAnchor) =>
+	left.path === right.path && left.side === right.side
+
+const diffCommentRangeSelection = (start: StackedDiffCommentAnchor | null, end: StackedDiffCommentAnchor | null): DiffCommentRangeSelection | null => {
+	if (!start || !end || !sameDiffCommentTarget(start, end)) return null
+	return start.line <= end.line ? { start, end } : { start: end, end: start }
+}
+
+const diffCommentRangeContains = (range: DiffCommentRangeSelection, anchor: StackedDiffCommentAnchor) =>
+	sameDiffCommentTarget(range.start, anchor) && anchor.line >= range.start.line && anchor.line <= range.end.line
+
+const diffCommentRangeLabel = (range: DiffCommentRangeSelection) =>
+	range.start.line === range.end.line
+		? diffCommentAnchorLabel(range.end)
+		: `${diffCommentSideLabel(range.end)} ${diffCommentLineLabel(range.start)}-${diffCommentLineLabel(range.end)}`
+
 const diffSideTargets = (diff: DiffRenderable, anchor: DiffCommentAnchor, view: DiffView) => {
 	const withSides = diff as unknown as DiffRenderableRuntimeSides
 	if (view === "split") {
@@ -488,7 +541,6 @@ export const App = () => {
 	const [filterQuery, setFilterQuery] = useAtom(filterQueryAtom)
 	const [filterDraft, setFilterDraft] = useAtom(filterDraftAtom)
 	const [filterMode, setFilterMode] = useAtom(filterModeAtom)
-	const [pendingG, setPendingG] = useAtom(pendingGAtom)
 	const [detailFullView, setDetailFullView] = useAtom(detailFullViewAtom)
 	const setDetailScrollOffset = useAtomSet(detailScrollOffsetAtom)
 	const [diffFullView, setDiffFullView] = useAtom(diffFullViewAtom)
@@ -496,8 +548,8 @@ export const App = () => {
 	const [diffScrollTop, setDiffScrollTop] = useAtom(diffScrollTopAtom)
 	const [diffRenderView, setDiffRenderView] = useAtom(diffRenderViewAtom)
 	const [diffWrapMode, setDiffWrapMode] = useAtom(diffWrapModeAtom)
-	const [diffCommentMode, setDiffCommentMode] = useAtom(diffCommentModeAtom)
 	const [diffCommentAnchorIndex, setDiffCommentAnchorIndex] = useAtom(diffCommentAnchorIndexAtom)
+	const [diffCommentRangeStartIndex, setDiffCommentRangeStartIndex] = useAtom(diffCommentRangeStartIndexAtom)
 	const [diffCommentThreads, setDiffCommentThreads] = useAtom(diffCommentThreadsAtom)
 	const setDiffCommentsLoaded = useAtomSet(diffCommentsLoadedAtom)
 	const setPullRequestDiffCache = useAtomSet(pullRequestDiffCacheAtom)
@@ -579,7 +631,6 @@ export const App = () => {
 	const wideDetailLines = Math.max(8, terminalHeight - 8)
 	const wideBodyHeight = Math.max(8, terminalHeight - 4)
 	const noticeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-	const pendingGTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const diffPrefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const detailPrefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 	const detailHydrationRef = useRef(new Map<string, DetailHydration>())
@@ -620,9 +671,6 @@ export const App = () => {
 		if (noticeTimeoutRef.current !== null) {
 			clearTimeout(noticeTimeoutRef.current)
 		}
-		if (pendingGTimeoutRef.current !== null) {
-			clearTimeout(pendingGTimeoutRef.current)
-		}
 		if (diffPrefetchTimeoutRef.current !== null) {
 			clearTimeout(diffPrefetchTimeoutRef.current)
 		}
@@ -670,14 +718,39 @@ export const App = () => {
 		() => diffFullView ? getStackedDiffCommentAnchors(stackedDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth) : [],
 		[diffFullView, stackedDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth],
 	)
-	const selectedDiffCommentAnchor = diffCommentAnchors[Math.max(0, Math.min(diffCommentAnchorIndex, diffCommentAnchors.length - 1))] ?? null
-	const selectedDiffCommentThreadKey = selectedDiffKey && selectedDiffCommentAnchor ? `${selectedDiffKey}:${diffCommentLocationKey(selectedDiffCommentAnchor)}` : null
+	const selectedDiffCommentAnchorIndex = Math.max(0, Math.min(diffCommentAnchorIndex, diffCommentAnchors.length - 1))
+	const selectedDiffCommentAnchor = diffCommentAnchors[selectedDiffCommentAnchorIndex] ?? null
+	const diffCommentRangeStartAnchor = diffCommentRangeStartIndex === null
+		? null
+		: diffCommentAnchors[Math.max(0, Math.min(diffCommentRangeStartIndex, diffCommentAnchors.length - 1))] ?? null
+	const selectedDiffCommentRange = useMemo(
+		() => diffCommentRangeSelection(diffCommentRangeStartAnchor, selectedDiffCommentAnchor),
+		[diffCommentRangeStartAnchor, selectedDiffCommentAnchor],
+	)
+	const selectedDiffCommentRangeAnchors = useMemo(
+		() => selectedDiffCommentRange
+			? diffCommentAnchors.filter((anchor) => diffCommentRangeContains(selectedDiffCommentRange, anchor))
+			: [],
+		[diffCommentAnchors, selectedDiffCommentRange],
+	)
+	const diffCommentRangeActive = selectedDiffCommentRange !== null
+	const selectedDiffCommentLabel = selectedDiffCommentRange
+		? diffCommentRangeLabel(selectedDiffCommentRange)
+		: selectedDiffCommentAnchor ? diffCommentAnchorLabel(selectedDiffCommentAnchor) : null
+	const selectedDiffCommentThreadKey = selectedDiffKey && selectedDiffCommentAnchor ? diffCommentThreadMapKey(selectedDiffKey, selectedDiffCommentAnchor) : null
 	const selectedDiffCommentThread = selectedDiffCommentThreadKey ? diffCommentThreads[selectedDiffCommentThreadKey] ?? [] : []
 	const diffLineColorContextKey = selectedDiffKey ? `${selectedDiffKey}:${effectiveDiffRenderView}:${diffWrapMode}` : null
-	const diffCommentRows = useMemo(
-		() => [...new Set(diffCommentAnchors.map((anchor) => anchor.renderLine))].sort((left, right) => left - right),
-		[diffCommentAnchors],
-	)
+	const diffCommentThreadAnchors = useMemo(() => {
+		if (!selectedDiffKey) return [] as readonly StackedDiffCommentAnchor[]
+		const seen = new Set<string>()
+		return diffCommentAnchors.filter((anchor) => {
+			const key = diffCommentLocationKey(anchor)
+			if (seen.has(key)) return false
+			if ((diffCommentThreads[diffCommentThreadMapKey(selectedDiffKey, anchor)]?.length ?? 0) === 0) return false
+			seen.add(key)
+			return true
+		})
+	}, [diffCommentAnchors, diffCommentThreads, selectedDiffKey])
 	const groupStarts = useAtomValue(groupStartsAtom)
 	const getCurrentGroupIndex = (current: number) => {
 		if (groupStarts.length === 0) return 0
@@ -736,7 +809,7 @@ export const App = () => {
 		setLoadingMoreKey(null)
 		setDetailFullView(false)
 		setDiffFullView(false)
-		setDiffCommentMode(false)
+		setDiffCommentRangeStartIndex(null)
 		setFilterDraft(filterQuery)
 		setNotice(null)
 		setRefreshCompletionMessage(null)
@@ -933,6 +1006,7 @@ export const App = () => {
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
+		setDiffCommentRangeStartIndex(null)
 		detailPreviewScrollRef.current?.scrollTo({ x: 0, y: 0 })
 	}, [selectedIndex])
 
@@ -941,12 +1015,16 @@ export const App = () => {
 			if (diffCommentAnchors.length === 0) return 0
 			return Math.max(0, Math.min(current, diffCommentAnchors.length - 1))
 		})
+		setDiffCommentRangeStartIndex((current) => {
+			if (current === null || diffCommentAnchors.length === 0) return null
+			return Math.max(0, Math.min(current, diffCommentAnchors.length - 1))
+		})
 	}, [diffCommentAnchors.length])
 
 	useEffect(() => {
-		if (!diffCommentMode || !selectedDiffCommentAnchor) return
+		if (!diffFullView || !selectedDiffCommentAnchor) return
 		setDiffFileIndex((current) => current === selectedDiffCommentAnchor.fileIndex ? current : selectedDiffCommentAnchor.fileIndex)
-	}, [diffCommentMode, selectedDiffCommentAnchor?.fileIndex])
+	}, [diffFullView, selectedDiffCommentAnchor?.fileIndex])
 
 	useEffect(() => {
 		const previous = diffCommentLineColorsRef.current
@@ -959,27 +1037,28 @@ export const App = () => {
 
 		const nextEntries: AppliedDiffLineColor[] = []
 		const appliedKeys = new Set<string>()
-		const applyLineColor = (anchor: StackedDiffCommentAnchor, gutter: string, override = false) => {
+		const applyLineColor = (anchor: StackedDiffCommentAnchor, color: DiffLineColorConfig, override = false) => {
 			const key = `${effectiveDiffRenderView}:${anchor.side}:${anchor.renderLine}`
 			if (appliedKeys.has(key) && !override) return
 			appliedKeys.add(key)
 			const entry = { anchor, view: effectiveDiffRenderView } satisfies AppliedDiffLineColor
 			const diff = diffRenderableRefs.current.get(anchor.fileIndex)
-			if (diff) setDiffCommentLineColor(diff, entry, { ...originalDiffLineColor(anchor), gutter })
+			if (diff) setDiffCommentLineColor(diff, entry, color)
 			if (!nextEntries.some((existing) => existing.view === entry.view && existing.anchor.side === anchor.side && existing.anchor.renderLine === anchor.renderLine)) {
 				nextEntries.push(entry)
 			}
 		}
 
-		if (selectedDiffKey) {
-			for (const anchor of diffCommentAnchors) {
-				if ((diffCommentThreads[`${selectedDiffKey}:${diffCommentLocationKey(anchor)}`]?.length ?? 0) > 0) {
-					applyLineColor(anchor, diffCommentGutterColor(anchor, "thread"))
-				}
+		for (const anchor of diffCommentThreadAnchors) {
+			applyLineColor(anchor, diffCommentLineColor(anchor, "thread"))
+		}
+		if (selectedDiffCommentRangeAnchors.length > 0) {
+			for (const anchor of selectedDiffCommentRangeAnchors) {
+				applyLineColor(anchor, diffCommentLineColor(anchor, "range"), true)
 			}
 		}
-		if (diffCommentMode && selectedDiffCommentAnchor) {
-			applyLineColor(selectedDiffCommentAnchor, diffCommentGutterColor(selectedDiffCommentAnchor, "selected"), true)
+		if (selectedDiffCommentAnchor) {
+			applyLineColor(selectedDiffCommentAnchor, diffCommentLineColor(selectedDiffCommentAnchor, "selected"), true)
 			if (suppressNextDiffCommentScrollRef.current) {
 				suppressNextDiffCommentScrollRef.current = false
 			} else {
@@ -989,10 +1068,10 @@ export const App = () => {
 			suppressNextDiffCommentScrollRef.current = false
 		}
 		diffCommentLineColorsRef.current = { contextKey: diffLineColorContextKey, entries: nextEntries }
-	}, [diffCommentMode, selectedDiffCommentAnchor?.renderLine, selectedDiffCommentAnchor?.localRenderLine, selectedDiffCommentAnchor?.side, selectedDiffCommentAnchor?.fileIndex, diffLineColorContextKey, effectiveDiffRenderView, diffCommentAnchors, diffCommentThreads])
+	}, [selectedDiffCommentAnchor?.renderLine, selectedDiffCommentAnchor?.localRenderLine, selectedDiffCommentAnchor?.side, selectedDiffCommentAnchor?.fileIndex, selectedDiffCommentRangeAnchors, diffLineColorContextKey, effectiveDiffRenderView, diffCommentThreadAnchors])
 	const isHydratingPullRequestDetails = pullRequestStatus === "ready" && selectedPullRequest?.state === "open" && !selectedPullRequest.detailLoaded
 	const isRefreshingPullRequests = pullRequestResult.waiting && pullRequestLoad !== null
-	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?._tag === "Loading"
+	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || isLoadingMorePullRequests || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?._tag === "Loading"
 	const loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
 
 	useEffect(() => {
@@ -1135,9 +1214,10 @@ export const App = () => {
 		diffCommentLineColorsRef.current = { contextKey: null, entries: [] }
 		setDiffFullView(true)
 		setDetailFullView(false)
-		setDiffCommentMode(false)
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
+		setDiffCommentAnchorIndex(0)
+		setDiffCommentRangeStartIndex(null)
 		setDiffRenderView(contentWidth >= 100 ? "split" : "unified")
 		diffScrollRef.current?.scrollTo({ x: 0, y: 0 })
 		loadPullRequestDiff(selectedPullRequest, { includeComments: true })
@@ -1162,49 +1242,9 @@ export const App = () => {
 		setDiffFileIndex((current) => current === nextIndex ? current : nextIndex)
 	}
 
-	const scrollDiffBy = (y: number) => {
-		diffScrollRef.current?.scrollBy({ x: 0, y })
-		syncDiffScrollState()
-	}
-
-	const scrollDiffTo = (y: number) => {
-		diffScrollRef.current?.scrollTo({ x: 0, y })
-		syncDiffScrollState()
-	}
 	const scrollDetailPreviewBy = (y: number) => detailPreviewScrollRef.current?.scrollBy({ x: 0, y })
 	const scrollDetailPreviewTo = (y: number) => detailPreviewScrollRef.current?.scrollTo({ x: 0, y })
 
-	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
@@ -1226,37 +1266,72 @@ export const App = () => {
 		if (readyDiffFiles.length === 0) return
 		const nextIndex = safeDiffFileIndex(readyDiffFiles, diffFileIndex + delta)
 		setDiffFileIndex(nextIndex)
-		if (diffCommentMode) {
-			const nextAnchor = diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex && anchor.side === selectedDiffCommentAnchor?.side)
-				?? diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex)
-			if (nextAnchor) setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
-		}
+		setDiffCommentRangeStartIndex(null)
+		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex && anchor.side === selectedDiffCommentAnchor?.side)
+			?? diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex)
+		if (nextAnchor) setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 		scrollToDiffFile(nextIndex)
 	}
 
-	const enterDiffCommentMode = () => {
-		const scrollTop = diffScrollRef.current?.scrollTop ?? 0
-		suppressNextDiffCommentScrollRef.current = true
-		setDiffCommentAnchorIndex(nearestDiffCommentAnchorIndex(diffCommentAnchors, scrollTop + DIFF_STICKY_HEADER_LINES))
-		setDiffCommentMode(true)
-	}
+	const navigableDiffCommentAnchors = () => diffCommentRangeStartAnchor
+		? diffCommentAnchors.filter((anchor) => sameDiffCommentTarget(anchor, diffCommentRangeStartAnchor))
+		: diffCommentAnchors
 
-	const moveDiffCommentAnchor = (delta: number) => {
-		if (diffCommentAnchors.length === 0) return
-		const currentAnchor = selectedDiffCommentAnchor ?? diffCommentAnchors[0]
-		const currentRowIndex = Math.max(0, currentAnchor ? diffCommentRows.indexOf(currentAnchor.renderLine) : 0)
-		const nextRow = diffCommentRows[Math.max(0, Math.min(diffCommentRows.length - 1, currentRowIndex + delta))]
+	const moveDiffCommentAnchor = (delta: number, options: { readonly preserveViewportRow?: boolean } = {}) => {
+		const anchors = navigableDiffCommentAnchors()
+		if (anchors.length === 0) return
+		const rows = [...new Set(anchors.map((anchor) => anchor.renderLine))].sort((left, right) => left - right)
+		const currentAnchor = selectedDiffCommentAnchor && anchors.includes(selectedDiffCommentAnchor) ? selectedDiffCommentAnchor : anchors[0]
+		const currentRowIndex = Math.max(0, currentAnchor ? rows.indexOf(currentAnchor.renderLine) : 0)
+		const nextRow = rows[Math.max(0, Math.min(rows.length - 1, currentRowIndex + delta))]
 		if (nextRow === undefined) return
-		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === currentAnchor?.side)
-			?? diffCommentAnchors.find((anchor) => anchor.renderLine === nextRow)
+		const nextAnchor = anchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === currentAnchor?.side)
+			?? anchors.find((anchor) => anchor.renderLine === nextRow)
 		if (!nextAnchor) return
+		if (options.preserveViewportRow) {
+			const scroll = diffScrollRef.current
+			if (scroll && currentAnchor) {
+				const maxScreenOffset = Math.max(DIFF_STICKY_HEADER_LINES, scroll.viewport.height - 2)
+				const screenOffset = Math.max(DIFF_STICKY_HEADER_LINES, Math.min(maxScreenOffset, currentAnchor.renderLine - scroll.scrollTop))
+				const maxScrollTop = Math.max(0, scroll.scrollHeight - scroll.viewport.height)
+				const nextTop = Math.max(0, Math.min(maxScrollTop, nextAnchor.renderLine - screenOffset))
+				suppressNextDiffCommentScrollRef.current = true
+				scroll.scrollTo({ x: 0, y: nextTop })
+				syncDiffScrollState()
+			}
+		}
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 	}
 
+	const moveDiffCommentToBoundary = (boundary: "first" | "last") => {
+		const anchors = navigableDiffCommentAnchors()
+		const nextAnchor = boundary === "first" ? anchors[0] : anchors[anchors.length - 1]
+		if (!nextAnchor) return
+		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
+		setDiffFileIndex(nextAnchor.fileIndex)
+	}
+
+	const alignSelectedDiffCommentAnchor = (position: "top" | "center" | "bottom") => {
+		if (!selectedDiffCommentAnchor) return
+		const scroll = diffScrollRef.current
+		if (!scroll) return
+		const viewportHeight = Math.max(1, scroll.viewport.height)
+		const offset = position === "top"
+			? DIFF_STICKY_HEADER_LINES
+			: position === "center"
+				? Math.max(DIFF_STICKY_HEADER_LINES, Math.floor(viewportHeight / 2))
+				: Math.max(DIFF_STICKY_HEADER_LINES, viewportHeight - 2)
+		const maxScrollTop = Math.max(0, scroll.scrollHeight - viewportHeight)
+		const nextTop = Math.max(0, Math.min(maxScrollTop, selectedDiffCommentAnchor.renderLine - offset))
+		scroll.scrollTo({ x: 0, y: nextTop })
+		syncDiffScrollState()
+	}
+
 	const selectDiffCommentSide = (side: DiffCommentSide) => {
 		if (!selectedDiffCommentAnchor) return
 		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.renderLine === selectedDiffCommentAnchor.renderLine && anchor.side === side)
 		if (!nextAnchor) return
+		setDiffCommentRangeStartIndex(null)
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 	}
 
@@ -1265,9 +1340,11 @@ export const App = () => {
 		const nextAnchor = (side ? lineAnchors.find((anchor) => anchor.side === side) : undefined) ?? lineAnchors[0]
 		if (!nextAnchor) return
 		suppressNextDiffCommentScrollRef.current = true
+		if (diffCommentRangeStartAnchor && !sameDiffCommentTarget(diffCommentRangeStartAnchor, nextAnchor)) {
+			setDiffCommentRangeStartIndex(null)
+		}
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 		setDiffFileIndex(nextAnchor.fileIndex)
-		setDiffCommentMode(true)
 	}
 
 	const editComment = (transform: (state: CommentEditorValue) => CommentEditorValue) => {
@@ -1288,6 +1365,39 @@ export const App = () => {
 		setCommentThreadModal({ scrollOffset: 0 })
 	}
 
+	const openSelectedDiffComment = () => {
+		if (diffCommentRangeActive) {
+			openDiffCommentModal()
+			return
+		}
+		if (selectedDiffCommentThread.length > 0) openDiffCommentThreadModal()
+		else openDiffCommentModal()
+	}
+
+	const toggleDiffCommentRange = () => {
+		if (!selectedDiffCommentAnchor) return
+		setDiffCommentRangeStartIndex((current) => current === null ? selectedDiffCommentAnchorIndex : null)
+	}
+
+	const moveDiffCommentThread = (delta: 1 | -1) => {
+		if (diffCommentThreadAnchors.length === 0) {
+			flashNotice("No diff comments")
+			return
+		}
+		const currentIndex = selectedDiffCommentAnchor
+			? diffCommentThreadAnchors.findIndex((anchor) => diffCommentLocationKey(anchor) === diffCommentLocationKey(selectedDiffCommentAnchor))
+			: -1
+		const nextAnchor = currentIndex >= 0
+			? diffCommentThreadAnchors[(currentIndex + delta + diffCommentThreadAnchors.length) % diffCommentThreadAnchors.length]
+			: delta > 0
+				? diffCommentThreadAnchors.find((anchor) => !selectedDiffCommentAnchor || anchor.renderLine > selectedDiffCommentAnchor.renderLine) ?? diffCommentThreadAnchors[0]
+				: [...diffCommentThreadAnchors].reverse().find((anchor) => !selectedDiffCommentAnchor || anchor.renderLine < selectedDiffCommentAnchor.renderLine) ?? diffCommentThreadAnchors[diffCommentThreadAnchors.length - 1]
+		if (!nextAnchor) return
+		setDiffCommentRangeStartIndex(null)
+		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
+		setDiffFileIndex(nextAnchor.fileIndex)
+	}
+
 	const submitDiffComment = () => {
 		if (!selectedPullRequest || !selectedDiffCommentAnchor) return
 		const body = commentModal.body.trim()
@@ -1296,8 +1406,9 @@ export const App = () => {
 			return
 		}
 
-		const threadKey = selectedDiffCommentThreadKey
-		const target = selectedDiffCommentAnchor
+		const targetRange = selectedDiffCommentRange
+		const target = targetRange?.end ?? selectedDiffCommentAnchor
+		const threadKey = selectedDiffKey ? diffCommentThreadMapKey(selectedDiffKey, target) : null
 		const optimisticComment = {
 			id: `local:${Date.now()}`,
 			path: target.path,
@@ -1308,6 +1419,9 @@ export const App = () => {
 			createdAt: new Date(),
 			url: null,
 		} satisfies PullRequestReviewComment
+		const rangeInput = targetRange && targetRange.start.line !== targetRange.end.line
+			? { startLine: targetRange.start.line, startSide: targetRange.start.side }
+			: {}
 		const input = {
 			repository: selectedPullRequest.repository,
 			number: selectedPullRequest.number,
@@ -1316,6 +1430,7 @@ export const App = () => {
 			line: target.line,
 			side: target.side,
 			body,
+			...rangeInput,
 		} satisfies CreatePullRequestCommentInput
 
 		if (threadKey) {
@@ -1325,6 +1440,7 @@ export const App = () => {
 			}))
 		}
 		closeActiveModal()
+		setDiffCommentRangeStartIndex(null)
 		flashNotice(`Commenting on ${target.path}:${target.line}`)
 		void createPullRequestComment(input).then((comment) => {
 			if (threadKey) {
@@ -1687,8 +1803,10 @@ export const App = () => {
 		diffWrapMode,
 		readyDiffFileCount: readyDiffFiles.length,
 		diffFileIndex,
-		diffCommentMode,
-		selectedDiffCommentAnchorLabel: selectedDiffCommentAnchor ? `${selectedDiffCommentAnchor.path}:${selectedDiffCommentAnchor.line}` : null,
+		diffRangeActive: diffCommentRangeActive,
+		selectedDiffCommentAnchorLabel: selectedDiffCommentLabel,
+		selectedDiffCommentThreadCount: selectedDiffCommentThread.length,
+		hasDiffCommentThreads: diffCommentThreadAnchors.length > 0,
 		actions: {
 			openCommandPalette,
 			refreshPullRequests,
@@ -1716,7 +1834,7 @@ export const App = () => {
 			openDiffView,
 			closeDiffView: () => {
 				setDiffFullView(false)
-				setDiffCommentMode(false)
+				setDiffCommentRangeStartIndex(null)
 			},
 			reloadDiff: () => {
 				if (!selectedPullRequest) return
@@ -1726,10 +1844,9 @@ export const App = () => {
 			toggleDiffRenderView: () => setDiffRenderView((current) => current === "unified" ? "split" : "unified"),
 			toggleDiffWrapMode: () => setDiffWrapMode((current) => current === "none" ? "word" : "none"),
 			jumpDiffFile,
-			toggleDiffCommentMode: () => {
-				if (diffCommentMode) setDiffCommentMode(false)
-				else enterDiffCommentMode()
-			},
+			openSelectedDiffComment,
+			toggleDiffCommentRange,
+			moveDiffCommentThread,
 			openDiffCommentModal,
 			togglePullRequestDraftStatus: toggleSelectedPullRequestDraftStatus,
 			openLabelModal,
@@ -1755,6 +1872,9 @@ export const App = () => {
 		const command = appCommands.find((entry) => entry.id === id)
 		return command ? runCommand(command, options) : false
 	}
+	const runCommandByIdRef = useRef(runCommandById)
+	runCommandByIdRef.current = runCommandById
+	useAppCommandRegistry(appCommands, runCommandByIdRef)
 	const dynamicPaletteCommands: readonly AppCommand[] = (() => {
 		if (!commandPaletteActive) return []
 		const repository = parseRepositoryInput(commandPalette.query)
@@ -1769,287 +1889,337 @@ export const App = () => {
 	})()
 	// Dynamic commands always pin to the top of the palette; they came directly from the
 	// user's typed input so they shouldn't be filtered by fuzzy score against themselves.
+	const staticPaletteCommands = commandPaletteActive
+		? filterCommands(appCommands.filter((command) => command.id !== "command.open" && commandEnabled(command)), commandPalette.query)
+		: []
 	const commandPaletteCommands = commandPaletteActive
 		? [
 			...dynamicPaletteCommands,
-			...sortCommandsByScope(filterCommands(appCommands.filter((command) => command.id !== "command.open" && commandEnabled(command)), commandPalette.query)),
+			...(commandPalette.query.trim().length > 0 ? staticPaletteCommands : sortCommandsByScope(staticPaletteCommands)),
 		]
 		: []
 	const selectedCommandIndex = clampCommandIndex(commandPalette.selectedIndex, commandPaletteCommands)
 	const selectedCommand = commandPaletteCommands[selectedCommandIndex] ?? null
 
-	// Keymap migration phase 2: simple cmd-id bindings move out of useKeyboard.
-	// Gated to "global mode" — no modal active, no full-view, not in filter editing —
-	// so these don't dispatch on top of modal-specific handlers below.
-	const globalKeymapActiveRef = useRef(false)
-	globalKeymapActiveRef.current = !commandPaletteActive
-		&& !openRepositoryModalActive
-		&& !labelModalActive
-		&& !commentModalActive
-		&& !commentThreadModalActive
-		&& !closeModalActive
-		&& !mergeModalActive
-		&& !themeModalActive
+	const noModalActive = activeModal._tag === "None"
+	const globalLayerActive = noModalActive
 		&& !diffFullView
 		&& !detailFullView
 		&& !filterMode
-	const runCommandByIdRef = useRef(runCommandById)
-	runCommandByIdRef.current = runCommandById
-	useBindings(() => ({
-		enabled: () => globalKeymapActiveRef.current,
-		bindings: [
-			{ key: "/", cmd: () => runCommandByIdRef.current("filter.open") },
-			{ key: "r", cmd: () => runCommandByIdRef.current("pull.refresh") },
-			{ key: "t", cmd: () => runCommandByIdRef.current("theme.open") },
-			{ key: "d", cmd: () => runCommandByIdRef.current("diff.open") },
-			{ key: "l", cmd: () => runCommandByIdRef.current("pull.labels") },
-			{ key: "m", cmd: () => runCommandByIdRef.current("pull.merge") },
-			{ key: "shift+m", cmd: () => runCommandByIdRef.current("pull.merge") },
-			{ key: "x", cmd: () => runCommandByIdRef.current("pull.close") },
-			{ key: "o", cmd: () => runCommandByIdRef.current("pull.open-browser") },
-			{ key: "s", cmd: () => runCommandByIdRef.current("pull.toggle-draft") },
-			{ key: "shift+s", cmd: () => runCommandByIdRef.current("pull.toggle-draft") },
-			{ key: "y", cmd: () => runCommandByIdRef.current("pull.copy-metadata") },
-			{ key: "return", cmd: () => runCommandByIdRef.current("detail.open") },
-		],
-	}), [])
-	// Always-on bindings — work even while modals are open.
-	useBindings(() => ({
-		bindings: [
-			{ key: "ctrl+p", cmd: () => runCommandByIdRef.current("command.open") },
-			{ key: "meta+k", cmd: () => runCommandByIdRef.current("command.open") },
-		],
-	}), [])
-
-	// CloseModal: escape closes, enter confirms.
-	const closeModalActiveRef = useRef(false)
-	closeModalActiveRef.current = closeModalActive
-	const closeActiveModalRef = useRef(closeActiveModal)
-	closeActiveModalRef.current = closeActiveModal
-	const confirmClosePullRequestRef = useRef(confirmClosePullRequest)
-	confirmClosePullRequestRef.current = confirmClosePullRequest
-	useBindings(() => ({
-		enabled: () => closeModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => confirmClosePullRequestRef.current() },
-		],
-	}), [])
-
-	// MergeModal: escape, enter (when options>0), up/down/j/k navigation.
-	const mergeModalActiveRef = useRef(false)
-	mergeModalActiveRef.current = mergeModalActive
-	const mergeModalContextRef = useRef({ availableCount: 0, confirm: confirmMergeAction, setMergeModal })
-	mergeModalContextRef.current = {
-		availableCount: availableMergeActions(mergeModal.info).length,
-		confirm: confirmMergeAction,
-		setMergeModal,
-	}
-	const moveMergeSelection = (delta: -1 | 1) => mergeModalContextRef.current.setMergeModal((current) => {
-		const max = Math.max(0, mergeModalContextRef.current.availableCount - 1)
+	useScopedBindings({
+		when: true,
+		bindings: {
+			"ctrl+p": "command.open",
+			"meta+k": "command.open",
+		},
+	})
+
+	useScopedBindings({
+		when: closeModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			return: confirmClosePullRequest,
+		},
+	})
+
+	const moveMergeSelection = (delta: -1 | 1) => setMergeModal((current) => {
+		const max = Math.max(0, availableMergeActions(mergeModal.info).length - 1)
 		return { ...current, selectedIndex: Math.max(0, Math.min(max, current.selectedIndex + delta)) }
 	})
-	useBindings(() => ({
-		enabled: () => mergeModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => {
-				if (mergeModalContextRef.current.availableCount > 0) mergeModalContextRef.current.confirm()
-			} },
-			{ key: "up", cmd: () => moveMergeSelection(-1) },
-			{ key: "k", cmd: () => moveMergeSelection(-1) },
-			{ key: "down", cmd: () => moveMergeSelection(1) },
-			{ key: "j", cmd: () => moveMergeSelection(1) },
-		],
-	}), [])
-
-	// CommentThreadModal: scroll the thread, shortcut to compose a reply.
-	const commentThreadModalActiveRef = useRef(false)
-	commentThreadModalActiveRef.current = commentThreadModalActive
-	const commentThreadCtxRef = useRef({ openDiffCommentModal, setCommentThreadModal, halfPage })
-	commentThreadCtxRef.current = { openDiffCommentModal, setCommentThreadModal, halfPage }
-	const scrollCommentThread = (delta: number) => commentThreadCtxRef.current.setCommentThreadModal((current) => ({
+	useScopedBindings({
+		when: mergeModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			return: () => {
+				if (availableMergeActions(mergeModal.info).length > 0) confirmMergeAction()
+			},
+			up: () => moveMergeSelection(-1),
+			k: () => moveMergeSelection(-1),
+			down: () => moveMergeSelection(1),
+			j: () => moveMergeSelection(1),
+		},
+	})
+
+	const scrollCommentThread = (delta: number) => setCommentThreadModal((current) => ({
 		...current,
 		scrollOffset: Math.max(0, current.scrollOffset + delta),
 	}))
-	useBindings(() => ({
-		enabled: () => commentThreadModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
-			{ key: "a", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
-			{ key: "c", cmd: () => commentThreadCtxRef.current.openDiffCommentModal() },
-			{ key: "up", cmd: () => scrollCommentThread(-1) },
-			{ key: "k", cmd: () => scrollCommentThread(-1) },
-			{ key: "down", cmd: () => scrollCommentThread(1) },
-			{ key: "j", cmd: () => scrollCommentThread(1) },
-			{ key: "pageup", cmd: () => scrollCommentThread(-commentThreadCtxRef.current.halfPage) },
-			{ key: "ctrl+u", cmd: () => scrollCommentThread(-commentThreadCtxRef.current.halfPage) },
-			{ key: "pagedown", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
-			{ key: "ctrl+d", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
-			{ key: "ctrl+v", cmd: () => scrollCommentThread(commentThreadCtxRef.current.halfPage) },
-		],
-	}), [])
-
-	// LabelModal: nav keys via keymap; text input stays in useKeyboard fallback.
-	const labelModalActiveRef = useRef(false)
-	labelModalActiveRef.current = labelModalActive
-	const labelModalCtxRef = useRef({ toggleLabelAtIndex, setLabelModal, filteredCount: 0 })
-	labelModalCtxRef.current = {
-		toggleLabelAtIndex,
-		setLabelModal,
-		filteredCount: filterLabels(labelModal.availableLabels, labelModal.query).length,
-	}
-	const moveLabelSelection = (delta: -1 | 1) => labelModalCtxRef.current.setLabelModal((current) => {
-		const max = Math.max(0, labelModalCtxRef.current.filteredCount - 1)
+	useScopedBindings({
+		when: commentThreadModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			return: openDiffCommentModal,
+			a: openDiffCommentModal,
+			c: openDiffCommentModal,
+			up: () => scrollCommentThread(-1),
+			k: () => scrollCommentThread(-1),
+			down: () => scrollCommentThread(1),
+			j: () => scrollCommentThread(1),
+			pageup: () => scrollCommentThread(-halfPage),
+			"ctrl+u": () => scrollCommentThread(-halfPage),
+			pagedown: () => scrollCommentThread(halfPage),
+			"ctrl+d": () => scrollCommentThread(halfPage),
+			"ctrl+v": () => scrollCommentThread(halfPage),
+		},
+	})
+
+	const moveLabelSelection = (delta: -1 | 1) => setLabelModal((current) => {
+		const max = Math.max(0, filterLabels(labelModal.availableLabels, labelModal.query).length - 1)
 		return { ...current, selectedIndex: Math.max(0, Math.min(max, current.selectedIndex + delta)) }
 	})
-	useBindings(() => ({
-		enabled: () => labelModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => labelModalCtxRef.current.toggleLabelAtIndex() },
-			{ key: "up", cmd: () => moveLabelSelection(-1) },
-			{ key: "k", cmd: () => moveLabelSelection(-1) },
-			{ key: "down", cmd: () => moveLabelSelection(1) },
-			{ key: "j", cmd: () => moveLabelSelection(1) },
-		],
-	}), [])
-
-	// ThemeModal: nav + filter-mode toggle. j/k only navigate when not in filter mode
-	// (so users can type those letters into the query).
-	const themeModalActiveRef = useRef(false)
-	themeModalActiveRef.current = themeModalActive
-	const themeModalCtxRef = useRef({
-		filterMode: false,
-		hasResults: true,
-		closeThemeModal,
-		updateThemeQuery,
-		moveThemeSelection,
+	useScopedBindings({
+		when: labelModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			return: toggleLabelAtIndex,
+			up: () => moveLabelSelection(-1),
+			k: () => moveLabelSelection(-1),
+			down: () => moveLabelSelection(1),
+			j: () => moveLabelSelection(1),
+		},
 	})
-	themeModalCtxRef.current = {
-		filterMode: themeModal.filterMode,
-		hasResults: filterThemeDefinitions(themeModal.query).length > 0,
-		closeThemeModal,
-		updateThemeQuery,
-		moveThemeSelection,
-	}
-	useBindings(() => ({
-		enabled: () => themeModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => {
-				if (themeModalCtxRef.current.filterMode) themeModalCtxRef.current.updateThemeQuery("", { filterMode: false })
-				else themeModalCtxRef.current.closeThemeModal(false)
-			} },
-			{ key: "/", cmd: () => themeModalCtxRef.current.updateThemeQuery("", { filterMode: true }) },
-			{ key: "return", cmd: () => {
-				if (themeModalCtxRef.current.filterMode && !themeModalCtxRef.current.hasResults) return
-				themeModalCtxRef.current.closeThemeModal(true)
-			} },
-			{ key: "up", cmd: () => themeModalCtxRef.current.moveThemeSelection(-1) },
-			{ key: "down", cmd: () => themeModalCtxRef.current.moveThemeSelection(1) },
-			{ key: "k", cmd: () => { if (!themeModalCtxRef.current.filterMode) themeModalCtxRef.current.moveThemeSelection(-1) } },
-			{ key: "j", cmd: () => { if (!themeModalCtxRef.current.filterMode) themeModalCtxRef.current.moveThemeSelection(1) } },
-		],
-	}), [])
-
-	// OpenRepositoryModal: escape closes, return submits.
-	const openRepositoryModalActiveRef = useRef(false)
-	openRepositoryModalActiveRef.current = openRepositoryModalActive
-	const openRepositoryFromInputRef = useRef(openRepositoryFromInput)
-	openRepositoryFromInputRef.current = openRepositoryFromInput
-	useBindings(() => ({
-		enabled: () => openRepositoryModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => openRepositoryFromInputRef.current() },
-		],
-	}), [])
-
-	// CommentModal: full text editor — escape, submit, all the cursor/edit bindings.
-	const commentModalActiveRef = useRef(false)
-	commentModalActiveRef.current = commentModalActive
-	const commentModalCtxRef = useRef({ submitDiffComment, editComment })
-	commentModalCtxRef.current = { submitDiffComment, editComment }
-	const editComm = (transform: Parameters<typeof editComment>[0]) => commentModalCtxRef.current.editComment(transform)
-	useBindings(() => ({
-		enabled: () => commentModalActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "ctrl+s", cmd: () => commentModalCtxRef.current.submitDiffComment() },
-			{ key: "ctrl+a", cmd: () => editComm(moveLineStart) },
-			{ key: "ctrl+e", cmd: () => editComm(moveLineEnd) },
-			{ key: "ctrl+b", cmd: () => editComm(editorMoveLeft) },
-			{ key: "ctrl+f", cmd: () => editComm(editorMoveRight) },
-			{ key: "ctrl+w", cmd: () => editComm(deleteWordBackward) },
-			{ key: "ctrl+u", cmd: () => editComm(deleteToLineStart) },
-			{ key: "ctrl+k", cmd: () => editComm(deleteToLineEnd) },
-			{ key: "ctrl+d", cmd: () => editComm(editorDeleteForward) },
-			{ key: "meta+b", cmd: () => editComm(moveWordBackward) },
-			{ key: "meta+left", cmd: () => editComm(moveWordBackward) },
-			{ key: "meta+f", cmd: () => editComm(moveWordForward) },
-			{ key: "meta+right", cmd: () => editComm(moveWordForward) },
-			{ key: "meta+backspace", cmd: () => editComm(deleteWordBackward) },
-			{ key: "meta+delete", cmd: () => editComm(deleteWordForward) },
-			{ key: "backspace", cmd: () => editComm(editorBackspace) },
-			{ key: "delete", cmd: () => editComm(editorDeleteForward) },
-			{ key: "left", cmd: () => editComm(editorMoveLeft) },
-			{ key: "right", cmd: () => editComm(editorMoveRight) },
-			{ key: "up", cmd: () => editComm((state) => moveVertically(state, -1)) },
-			{ key: "down", cmd: () => editComm((state) => moveVertically(state, 1)) },
-			{ key: "home", cmd: () => editComm(moveLineStart) },
-			{ key: "end", cmd: () => editComm(moveLineEnd) },
-			{ key: "shift+return", cmd: () => editComm((state) => insertText(state, "\n")) },
-			{ key: "return", cmd: () => commentModalCtxRef.current.submitDiffComment() },
-		],
-	}), [])
-
-	// CommandPalette: escape closes, return runs, up/k & down/j navigate.
-	const commandPaletteActiveRef = useRef(false)
-	commandPaletteActiveRef.current = commandPaletteActive
-	const commandPaletteCtxRef = useRef({
-		runSelected: () => {},
-		setCommandPalette,
-		paletteCommands: commandPaletteCommands,
+
+	useScopedBindings({
+		when: themeModalActive,
+		bindings: {
+			escape: () => {
+				if (themeModal.filterMode) updateThemeQuery("", { filterMode: false })
+				else closeThemeModal(false)
+			},
+			"/": () => updateThemeQuery("", { filterMode: true }),
+			return: () => {
+				if (themeModal.filterMode && filterThemeDefinitions(themeModal.query).length === 0) return
+				closeThemeModal(true)
+			},
+			up: () => moveThemeSelection(-1),
+			down: () => moveThemeSelection(1),
+			k: () => { if (!themeModal.filterMode) moveThemeSelection(-1) },
+			j: () => { if (!themeModal.filterMode) moveThemeSelection(1) },
+		},
 	})
-	commandPaletteCtxRef.current = {
-		runSelected: () => { if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true }) },
-		setCommandPalette,
-		paletteCommands: commandPaletteCommands,
-	}
-	const moveCommandPaletteSelection = (delta: -1 | 1) => commandPaletteCtxRef.current.setCommandPalette((current) => {
-		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCtxRef.current.paletteCommands)
+
+	useScopedBindings({
+		when: openRepositoryModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			return: openRepositoryFromInput,
+		},
+	})
+
+	useScopedBindings({
+		when: commentModalActive,
+		bindings: {
+			escape: closeActiveModal,
+			"ctrl+s": submitDiffComment,
+			"ctrl+a": () => editComment(moveLineStart),
+			"ctrl+e": () => editComment(moveLineEnd),
+			"ctrl+b": () => editComment(editorMoveLeft),
+			"ctrl+f": () => editComment(editorMoveRight),
+			"ctrl+w": () => editComment(deleteWordBackward),
+			"ctrl+u": () => editComment(deleteToLineStart),
+			"ctrl+k": () => editComment(deleteToLineEnd),
+			"ctrl+d": () => editComment(editorDeleteForward),
+			"meta+b": () => editComment(moveWordBackward),
+			"meta+left": () => editComment(moveWordBackward),
+			"meta+f": () => editComment(moveWordForward),
+			"meta+right": () => editComment(moveWordForward),
+			"meta+backspace": () => editComment(deleteWordBackward),
+			"meta+delete": () => editComment(deleteWordForward),
+			backspace: () => editComment(editorBackspace),
+			delete: () => editComment(editorDeleteForward),
+			left: () => editComment(editorMoveLeft),
+			right: () => editComment(editorMoveRight),
+			up: () => editComment((state) => moveVertically(state, -1)),
+			down: () => editComment((state) => moveVertically(state, 1)),
+			home: () => editComment(moveLineStart),
+			end: () => editComment(moveLineEnd),
+			"shift+return": () => editComment((state) => insertText(state, "\n")),
+			return: submitDiffComment,
+		},
+	})
+
+	const moveCommandPaletteSelection = (delta: -1 | 1) => setCommandPalette((current) => {
+		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCommands)
 		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
 	})
-	useBindings(() => ({
-		enabled: () => commandPaletteActiveRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => closeActiveModalRef.current() },
-			{ key: "ctrl+c", cmd: () => closeActiveModalRef.current() },
-			{ key: "return", cmd: () => commandPaletteCtxRef.current.runSelected() },
-			{ key: "up", cmd: () => moveCommandPaletteSelection(-1) },
-			{ key: "down", cmd: () => moveCommandPaletteSelection(1) },
-		],
-	}), [])
-
-	// FilterMode: escape cancels, return commits.
-	const filterModeRef = useRef(false)
-	filterModeRef.current = filterMode
-	const filterCtxRef = useRef({ filterQuery, filterDraft, setFilterQuery, setFilterDraft, setFilterMode })
-	filterCtxRef.current = { filterQuery, filterDraft, setFilterQuery, setFilterDraft, setFilterMode }
-	useBindings(() => ({
-		enabled: () => filterModeRef.current,
-		bindings: [
-			{ key: "escape", cmd: () => {
-				filterCtxRef.current.setFilterDraft(filterCtxRef.current.filterQuery)
-				filterCtxRef.current.setFilterMode(false)
-			} },
-			{ key: "return", cmd: () => {
-				filterCtxRef.current.setFilterQuery(filterCtxRef.current.filterDraft)
-				filterCtxRef.current.setFilterMode(false)
-			} },
-		],
-	}), [])
+	useScopedBindings({
+		when: commandPaletteActive,
+		bindings: {
+			escape: closeActiveModal,
+			"ctrl+c": closeActiveModal,
+			return: () => { if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true }) },
+			up: () => moveCommandPaletteSelection(-1),
+			down: () => moveCommandPaletteSelection(1),
+		},
+	})
+
+	useScopedBindings({
+		when: filterMode,
+		bindings: {
+			escape: () => { setFilterDraft(filterQuery); setFilterMode(false) },
+			return: () => { setFilterQuery(filterDraft); setFilterMode(false) },
+		},
+	})
+
+	useScopedBindings({
+		when: diffFullView && noModalActive,
+		bindings: {
+			escape: () => {
+				if (diffCommentRangeActive) setDiffCommentRangeStartIndex(null)
+				else runCommandById("diff.close")
+			},
+			return: openSelectedDiffComment,
+			a: "diff.add-comment",
+			v: "diff.toggle-range",
+			"shift+v": "diff.toggle-view",
+			w: "diff.toggle-wrap",
+			r: "diff.reload",
+			n: "diff.next-thread",
+			p: "diff.previous-thread",
+			pageup: () => moveDiffCommentAnchor(-halfPage, { preserveViewportRow: true }),
+			"ctrl+u": () => moveDiffCommentAnchor(-halfPage, { preserveViewportRow: true }),
+			pagedown: () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
+			"ctrl+d": () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
+			"ctrl+v": () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
+			"shift+up": () => moveDiffCommentAnchor(-8),
+			"shift+k": () => moveDiffCommentAnchor(-8),
+			"meta+up": () => moveDiffCommentAnchor(-8),
+			"meta+k": () => moveDiffCommentAnchor(-8),
+			"shift+down": () => moveDiffCommentAnchor(8),
+			"shift+j": () => moveDiffCommentAnchor(8),
+			"meta+down": () => moveDiffCommentAnchor(8),
+			"meta+j": () => moveDiffCommentAnchor(8),
+			...countedVerticalBindings(
+				(count) => moveDiffCommentAnchor(-count),
+				(count) => moveDiffCommentAnchor(count),
+			),
+			up: () => moveDiffCommentAnchor(-1),
+			k: () => moveDiffCommentAnchor(-1),
+			down: () => moveDiffCommentAnchor(1),
+			j: () => moveDiffCommentAnchor(1),
+			left: () => selectDiffCommentSide("LEFT"),
+			h: () => selectDiffCommentSide("LEFT"),
+			right: () => selectDiffCommentSide("RIGHT"),
+			l: () => selectDiffCommentSide("RIGHT"),
+			"]": "diff.next-file",
+			"[": "diff.previous-file",
+			"g g": () => moveDiffCommentToBoundary("first"),
+			"shift+g": () => moveDiffCommentToBoundary("last"),
+			"z z": () => alignSelectedDiffCommentAnchor("center"),
+			"z t": () => alignSelectedDiffCommentAnchor("top"),
+			"z b": () => alignSelectedDiffCommentAnchor("bottom"),
+			o: "pull.open-browser",
+		},
+	})
+
+	const scrollDetailFullViewBy = (delta: number) => {
+		detailScrollRef.current?.scrollBy({ x: 0, y: delta })
+		setDetailScrollOffset((current) => Math.max(0, current + delta))
+	}
+	const scrollDetailFullViewTo = (y: number) => {
+		detailScrollRef.current?.scrollTo({ x: 0, y })
+		setDetailScrollOffset(y)
+	}
+	useScopedBindings({
+		when: detailFullView && noModalActive,
+		bindings: {
+			...scrollBindings(scrollDetailFullViewBy, halfPage, scrollDetailFullViewTo),
+			escape: "detail.close",
+			return: "detail.close",
+			t: "theme.open",
+			d: "diff.open",
+			x: "pull.close",
+			l: "pull.labels",
+			m: "pull.merge",
+			"shift+m": "pull.merge",
+			s: "pull.toggle-draft",
+			"shift+s": "pull.toggle-draft",
+			r: "pull.refresh",
+			o: "pull.open-browser",
+			y: "pull.copy-metadata",
+		},
+	})
+
+	const moveSelectedToPreviousGroup = () => setSelectedIndex((current) => {
+		if (visiblePullRequests.length === 0 || groupStarts.length === 0) return 0
+		const currentGroup = getCurrentGroupIndex(current)
+		if (currentGroup <= 0) return groupStarts[groupStarts.length - 1]!
+		return groupStarts[currentGroup - 1]!
+	})
+	const moveSelectedToNextGroup = () => setSelectedIndex((current) => {
+		if (visiblePullRequests.length === 0 || groupStarts.length === 0) return 0
+		const currentGroup = getCurrentGroupIndex(current)
+		if (currentGroup >= groupStarts.length - 1) return groupStarts[0]!
+		return groupStarts[currentGroup + 1]!
+	})
+	const stepSelected = (delta: number) => setSelectedIndex((current) => {
+		if (visiblePullRequests.length === 0) return 0
+		return Math.max(0, Math.min(visiblePullRequests.length - 1, current + delta))
+	})
+	const stepSelectedDown = (count = 1) => {
+		if (visiblePullRequests.length === 0) return
+		if (selectedIndex + count >= visiblePullRequests.length && hasMorePullRequests) {
+			loadMorePullRequests()
+		}
+		stepSelected(count)
+	}
+	const stepSelectedUp = (count = 1) => stepSelected(-count)
+	const stepSelectedDownWithLoadMore = () => {
+		if (visiblePullRequests.length > 0 && selectedIndex >= visiblePullRequests.length - 1 && hasMorePullRequests) {
+			loadMorePullRequests()
+			return
+		}
+		setSelectedIndex((current) => {
+			if (visiblePullRequests.length === 0) return 0
+			return current >= visiblePullRequests.length - 1 ? 0 : current + 1
+		})
+	}
+	const stepSelectedUpWrap = () => setSelectedIndex((current) => {
+		if (visiblePullRequests.length === 0) return 0
+		return current <= 0 ? visiblePullRequests.length - 1 : current - 1
+	})
+	useScopedBindings({
+		when: globalLayerActive,
+		bindings: {
+			"/": "filter.open",
+			r: "pull.refresh",
+			t: "theme.open",
+			d: "diff.open",
+			l: "pull.labels",
+			m: "pull.merge",
+			"shift+m": "pull.merge",
+			x: "pull.close",
+			o: "pull.open-browser",
+			s: "pull.toggle-draft",
+			"shift+s": "pull.toggle-draft",
+			y: "pull.copy-metadata",
+			return: "detail.open",
+			tab: () => switchQueueMode(1),
+			"shift+tab": () => switchQueueMode(-1),
+			escape: () => { if (filterQuery.length > 0) runCommandByIdRef.current("filter.clear") },
+			home: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewTo(0) },
+			end: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewTo(Number.MAX_SAFE_INTEGER) },
+			pageup: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewBy(-halfPage) },
+			pagedown: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewBy(halfPage) },
+			"[": moveSelectedToPreviousGroup,
+			"meta+up": moveSelectedToPreviousGroup,
+			"meta+k": moveSelectedToPreviousGroup,
+			"shift+k": moveSelectedToPreviousGroup,
+			"]": moveSelectedToNextGroup,
+			"meta+down": moveSelectedToNextGroup,
+			"meta+j": moveSelectedToNextGroup,
+			"shift+j": moveSelectedToNextGroup,
+			"ctrl+u": () => stepSelected(-halfPage),
+			"ctrl+d": () => stepSelected(halfPage),
+			...countedVerticalBindings(stepSelectedUp, stepSelectedDown),
+			up: stepSelectedUpWrap,
+			k: stepSelectedUpWrap,
+			down: stepSelectedDownWithLoadMore,
+			j: stepSelectedDownWithLoadMore,
+			"g g": () => setSelectedIndex(0),
+			"shift+g": () => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
+		},
+	})
 
 	useKeyboard((key) => {
 		if (commandPaletteActive) {
@@ -2113,340 +2283,19 @@ export const App = () => {
 			return
 		}
 
-		if (diffFullView) {
-			if (diffCommentMode) {
-				if (key.name === "escape") {
-					setDiffCommentMode(false)
-					return
-				}
-				if (key.name === "c") {
-					runCommandById("diff.comment-mode")
-					return
-				}
-				if (key.name === "return" || key.name === "enter") {
-					if (selectedDiffCommentThread.length > 0) openDiffCommentThreadModal()
-					else openDiffCommentModal()
-					return
-				}
-				if (key.name === "a") {
-					runCommandById("diff.add-comment")
-					return
-				}
-				if (key.name === "pageup" || key.ctrl && key.name === "u") {
-					moveDiffCommentAnchor(-halfPage)
-					return
-				}
-				if (key.name === "pagedown" || key.ctrl && (key.name === "d" || key.name === "v")) {
-					moveDiffCommentAnchor(halfPage)
-					return
-				}
-				if ((key.shift || key.option || key.meta) && (key.name === "up" || key.name === "k") || key.name === "K") {
-					moveDiffCommentAnchor(-8)
-					return
-				}
-				if ((key.shift || key.option || key.meta) && (key.name === "down" || key.name === "j") || key.name === "J") {
-					moveDiffCommentAnchor(8)
-					return
-				}
-				if (key.name === "up" || key.name === "k") {
-					moveDiffCommentAnchor(-1)
-					return
-				}
-				if (key.name === "down" || key.name === "j") {
-					moveDiffCommentAnchor(1)
-					return
-				}
-				if (key.name === "left" || key.name === "h") {
-					selectDiffCommentSide("LEFT")
-					return
-				}
-				if (key.name === "right" || key.name === "l") {
-					selectDiffCommentSide("RIGHT")
-					return
-				}
-				if (key.name === "]" && selectedDiffState?._tag === "Ready") {
-					runCommandById("diff.next-file")
-					return
-				}
-				if (key.name === "[" && selectedDiffState?._tag === "Ready") {
-					runCommandById("diff.previous-file")
-					return
-				}
-				return
-			}
-
-			if (key.name === "escape" || key.name === "return" || key.name === "enter") {
-				runCommandById("diff.close")
-				return
-			}
-			if (key.name === "c" && selectedDiffState?._tag === "Ready") {
-				runCommandById("diff.comment-mode")
-				return
-			}
-			if (key.name === "home") {
-				scrollDiffTo(0)
-				return
-			}
-			if (key.name === "end") {
-				scrollDiffTo(Number.MAX_SAFE_INTEGER)
-				return
-			}
-			if (key.name === "pageup") {
-				scrollDiffBy(-halfPage)
-				return
-			}
-			if (key.name === "pagedown") {
-				scrollDiffBy(halfPage)
-				return
-			}
-			if (handleVimGoto(key, () => scrollDiffTo(0), () => scrollDiffTo(Number.MAX_SAFE_INTEGER))) return
-			if (key.name === "up" || key.name === "k") {
-				scrollDiffBy(-1)
-				return
-			}
-			if (key.name === "down" || key.name === "j") {
-				scrollDiffBy(1)
-				return
-			}
-			if (key.ctrl && key.name === "u") {
-				scrollDiffBy(-halfPage)
-				return
-			}
-			if (key.ctrl && (key.name === "d" || key.name === "v")) {
-				scrollDiffBy(halfPage)
-				return
-			}
-			if (key.name === "v") {
-				runCommandById("diff.toggle-view")
-				return
-			}
-			if (key.name === "w") {
-				runCommandById("diff.toggle-wrap")
-				return
-			}
-			if (key.name === "r" && selectedPullRequest) {
-				runCommandById("diff.reload")
-				return
-			}
-			if ((key.name === "]" || key.name === "right" || key.name === "l") && selectedDiffState?._tag === "Ready") {
-				runCommandById("diff.next-file")
-				return
-			}
-			if ((key.name === "[" || key.name === "left" || key.name === "h") && selectedDiffState?._tag === "Ready") {
-				runCommandById("diff.previous-file")
-				return
-			}
-			if (key.name === "o" && selectedPullRequest) {
-				runCommandById("pull.open-browser")
-				return
-			}
-			return
-		}
-
-		if (detailFullView) {
-			const plainKey = !key.ctrl && !key.meta && !key.option
-			if (key.name === "escape" || (key.name === "return" || key.name === "enter")) {
-				runCommandById("detail.close")
-				return
-			}
-			if (isThemeKey(key)) {
-				runCommandById("theme.open")
-				return
-			}
-			if (plainKey && key.name === "d" && selectedPullRequest) {
-				runCommandById("diff.open")
-				return
-			}
-			if (plainKey && key.name === "x" && selectedPullRequest?.state === "open") {
-				runCommandById("pull.close")
-				return
-			}
-			if (plainKey && key.name === "l" && selectedPullRequest) {
-				runCommandById("pull.labels")
-				return
-			}
-			if (plainKey && (key.name === "m" || key.name === "M") && selectedPullRequest) {
-				runCommandById("pull.merge")
-				return
-			}
-			if (plainKey && (key.name === "s" || key.name === "S") && selectedPullRequest) {
-				runCommandById("pull.toggle-draft")
-				return
-			}
-			if (plainKey && key.name === "r") {
-				runCommandById("pull.refresh")
-				return
-			}
-			if (key.name === "home") {
-				detailScrollRef.current?.scrollTo({ x: 0, y: 0 })
-				setDetailScrollOffset(0)
-				return
-			}
-			if (key.name === "end") {
-				detailScrollRef.current?.scrollTo({ x: 0, y: Number.MAX_SAFE_INTEGER })
-				setDetailScrollOffset(Number.MAX_SAFE_INTEGER)
-				return
-			}
-			if (key.name === "pageup") {
-				detailScrollRef.current?.scrollBy({ x: 0, y: -halfPage })
-				setDetailScrollOffset((current) => Math.max(0, current - halfPage))
-				return
-			}
-			if (key.name === "pagedown") {
-				detailScrollRef.current?.scrollBy({ x: 0, y: halfPage })
-				setDetailScrollOffset((current) => current + halfPage)
-				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))
-				return
-			}
-			if (key.name === "down" || key.name === "j") {
-				detailScrollRef.current?.scrollBy({ x: 0, y: 1 })
-				setDetailScrollOffset((current) => current + 1)
-				return
-			}
-			if (key.ctrl && key.name === "u") {
-				detailScrollRef.current?.scrollBy({ x: 0, y: -halfPage })
-				setDetailScrollOffset((current) => Math.max(0, current - halfPage))
-				return
-			}
-			if (key.ctrl && (key.name === "d" || key.name === "v")) {
-				detailScrollRef.current?.scrollBy({ x: 0, y: halfPage })
-				setDetailScrollOffset((current) => current + halfPage)
-				return
-			}
-			if (plainKey && key.name === "o" && selectedPullRequest) {
-				runCommandById("pull.open-browser")
-				return
-			}
-			if (plainKey && key.name === "y" && selectedPullRequest) {
-				runCommandById("pull.copy-metadata")
-				return
-			}
-			return
-		}
-
 		if (filterMode) {
 			if (isSingleLineInputKey(key)) {
 				setFilterDraft((current) => editSingleLineInput(current, key) ?? current)
 			}
-			return
 		}
-
-		if (key.name === "tab") {
-			switchQueueMode(key.shift ? -1 : 1)
-			return
-		}
-
-		if (key.name === "escape" && filterQuery.length > 0) {
-			runCommandById("filter.clear")
-			return
-		}
-		if (isWideLayout && selectedPullRequest && !detailFullView && !diffFullView) {
-			if (key.name === "home") {
-				scrollDetailPreviewTo(0)
-				return
-			}
-			if (key.name === "end") {
-				scrollDetailPreviewTo(Number.MAX_SAFE_INTEGER)
-				return
-			}
-			if (key.name === "pageup") {
-				scrollDetailPreviewBy(-halfPage)
-				return
-			}
-			if (key.name === "pagedown") {
-				scrollDetailPreviewBy(halfPage)
-				return
-			}
-		}
-		if (
-			key.name === "[" ||
-			((key.option || key.meta) && (key.name === "up" || key.name === "k")) ||
-			(key.shift && key.name === "k") ||
-			key.name === "K"
-		) {
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0 || groupStarts.length === 0) return 0
-				const currentGroup = getCurrentGroupIndex(current)
-				if (currentGroup <= 0) return groupStarts[groupStarts.length - 1]!
-				return groupStarts[currentGroup - 1]!
-			})
-			return
-		}
-		if (
-			key.name === "]" ||
-			((key.option || key.meta) && (key.name === "down" || key.name === "j")) ||
-			(key.shift && key.name === "j") ||
-			key.name === "J"
-		) {
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0 || groupStarts.length === 0) return 0
-				const currentGroup = getCurrentGroupIndex(current)
-				if (currentGroup >= groupStarts.length - 1) return groupStarts[0]!
-				return groupStarts[currentGroup + 1]!
-			})
-			return
-		}
-		if (key.ctrl && key.name === "u") {
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0) return 0
-				return Math.max(0, current - halfPage)
-			})
-			return
-		}
-		if (key.ctrl && key.name === "d") {
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0) return 0
-				return Math.min(visiblePullRequests.length - 1, current + halfPage)
-			})
-			return
-		}
-		if (key.name === "up" || key.name === "k") {
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0) return 0
-				return current <= 0 ? visiblePullRequests.length - 1 : current - 1
-			})
-			return
-		}
-		if (key.name === "down" || key.name === "j") {
-			if (visiblePullRequests.length > 0 && selectedIndex >= visiblePullRequests.length - 1 && hasMorePullRequests) {
-				loadMorePullRequests()
-				return
-			}
-			setSelectedIndex((current) => {
-				if (visiblePullRequests.length === 0) return 0
-				return current >= visiblePullRequests.length - 1 ? 0 : current + 1
-			})
-			return
-		}
-		if (handleVimGoto(key,
-			() => setSelectedIndex(0),
-			() => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
-		)) return
 	})
 
 	const fullscreenContentWidth = Math.max(24, contentWidth - 2)
 	const fullscreenBodyLines = Math.max(8, terminalHeight - 8)
-	const wideFullscreenDetailScrollable = getDetailsPaneHeight({
-		pullRequest: selectedPullRequest,
-		contentWidth: fullscreenContentWidth,
-		bodyLines: DETAIL_BODY_SCROLL_LIMIT,
-		paneWidth: contentWidth,
-		showChecks: true,
-	}) > wideBodyHeight
-	const narrowFullscreenDetailScrollable = getDetailsPaneHeight({
-		pullRequest: selectedPullRequest,
-		contentWidth: fullscreenContentWidth,
-		bodyLines: DETAIL_BODY_SCROLL_LIMIT,
-		paneWidth: contentWidth,
-	}) > wideBodyHeight
+	const fullscreenDetailHeaderHeight = getDetailHeaderHeight(selectedPullRequest, contentWidth, isWideLayout)
+	const fullscreenDetailBodyViewportHeight = Math.max(1, wideBodyHeight - fullscreenDetailHeaderHeight)
+	const fullscreenDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, fullscreenContentWidth)
+	const fullscreenDetailBodyScrollable = fullscreenDetailBodyHeight > fullscreenDetailBodyViewportHeight
 	const wideDetailHeaderHeight = getDetailHeaderHeight(selectedPullRequest, rightPaneWidth, true)
 	const wideDetailBodyViewportHeight = Math.max(1, wideBodyHeight - wideDetailHeaderHeight)
 	const wideDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, rightContentWidth)
@@ -2463,6 +2312,7 @@ export const App = () => {
 		loadedCount: loadedPullRequestCount,
 		hasMore: hasMorePullRequests,
 		isLoadingMore: isLoadingMorePullRequests,
+		loadingIndicator,
 		onSelectPullRequest: selectPullRequestByUrl,
 	} as const
 
@@ -2491,8 +2341,8 @@ export const App = () => {
 	const commentThreadModalHeight = commentThreadLayout.height
 	const commentThreadModalLeft = commentThreadLayout.left
 	const commentThreadModalTop = commentThreadLayout.top
-	const commentAnchorLabel = selectedDiffCommentAnchor
-		? `${selectedDiffCommentAnchor.path}:${selectedDiffCommentAnchor.line} ${selectedDiffCommentAnchor.side === "RIGHT" ? "right" : "left"}`
+	const commentAnchorLabel = selectedDiffCommentAnchor && selectedDiffCommentLabel
+		? `${selectedDiffCommentAnchor.path} ${selectedDiffCommentLabel}`
 		: "No diff line selected"
 	const mergeLayout = sizedModal(46, 68, 12, 16)
 	const mergeModalWidth = mergeLayout.width
@@ -2540,8 +2390,8 @@ export const App = () => {
 					loadingIndicator={loadingIndicator}
 					scrollRef={diffScrollRef}
 					setDiffRef={setDiffRenderableRef}
-					commentMode={diffCommentMode}
 					selectedCommentAnchor={selectedDiffCommentAnchor}
+					selectedCommentLabel={selectedDiffCommentLabel}
 					selectedCommentThread={selectedDiffCommentThread}
 					onSelectCommentLine={selectDiffCommentLine}
 					themeId={themeId}
@@ -2553,20 +2403,16 @@ export const App = () => {
 				</box>
 			) : isWideLayout && detailFullView ? (
 				<box flexGrow={1} flexDirection="column">
-					<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: wideFullscreenDetailScrollable }}>
-						<DetailsPane
-							pullRequest={selectedPullRequest}
-							viewerUsername={username}
-							contentWidth={fullscreenContentWidth}
-							bodyLines={fullscreenBodyLines}
-							bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT}
-							paneWidth={contentWidth}
-							showChecks
-							placeholderContent={detailPlaceholderContent}
-							loadingIndicator={loadingIndicator}
-							themeId={themeId}
-						/>
-					</scrollbox>
+					{selectedPullRequest ? (
+						<>
+							<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} showChecks />
+							<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
+								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} loadingIndicator={loadingIndicator} themeId={themeId} />
+							</scrollbox>
+						</>
+					) : (
+						<DetailsPane pullRequest={null} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
+					)}
 				</box>
 			) : isWideLayout ? (
 			<box key="wide-main" flexGrow={1} flexDirection="row">
@@ -2598,19 +2444,16 @@ export const App = () => {
 				</box>
 			) : detailFullView ? (
 				<box flexGrow={1} flexDirection="column">
-					<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: narrowFullscreenDetailScrollable }}>
-						<DetailsPane
-							pullRequest={selectedPullRequest}
-							viewerUsername={username}
-							contentWidth={fullscreenContentWidth}
-							bodyLines={fullscreenBodyLines}
-							bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT}
-							paneWidth={contentWidth}
-							placeholderContent={detailPlaceholderContent}
-							loadingIndicator={loadingIndicator}
-							themeId={themeId}
-						/>
-					</scrollbox>
+					{selectedPullRequest ? (
+						<>
+							<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} />
+							<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
+								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} loadingIndicator={loadingIndicator} themeId={themeId} />
+							</scrollbox>
+						</>
+					) : (
+						<DetailsPane pullRequest={null} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
+					)}
 				</box>
 			) : (
 				<box key="narrow-main" height={wideBodyHeight} flexDirection="column">
@@ -2640,7 +2483,7 @@ export const App = () => {
 						showFilterClear={filterMode || filterQuery.length > 0}
 						detailFullView={detailFullView}
 						diffFullView={diffFullView}
-						diffCommentMode={diffCommentMode}
+						diffRangeActive={diffCommentRangeActive}
 						hasSelection={selectedPullRequest !== null}
 						canCloseSelection={selectedPullRequest?.state === "open"}
 						hasError={pullRequestStatus === "error"}