@kitlangton/ghui 0.1.21 → 0.2.0

package/src/App.tsx

@@ -1,6 +1,8 @@
 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 { useKeymap } from "@ghui/keymap/react"
+import { appKeymap, type AppCtx } from "./keymap/all.js"
+import { useOpenTuiSubscribe } from "./keyboard/opentuiAdapter.js"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
 import { Cause, Effect, Layer, Schedule } from "effect"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
@@ -11,7 +13,7 @@ import { buildAppCommands } from "./appCommands.js"
 import type { AppCommand } from "./commands.js"
 import { clampCommandIndex, commandEnabled, defineCommand, filterCommands, sortCommandsByScope } from "./commands.js"
 import { config } from "./config.js"
-import { type CreatePullRequestCommentInput, type DiffCommentSide, type ListPullRequestPageInput, type LoadStatus, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestReviewComment } from "./domain.js"
+import { type CreatePullRequestCommentInput, type DiffCommentSide, type ListPullRequestPageInput, type LoadStatus, type PullRequestConversationItem, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestReviewComment } from "./domain.js"
 import { formatShortDate, formatTimestamp } from "./date.js"
 import { errorMessage } from "./errors.js"
 import { availableMergeActions, mergeInfoFromPullRequest } from "./mergeActions.js"
@@ -22,12 +24,13 @@ import { BrowserOpener } from "./services/BrowserOpener.js"
 import { Clipboard } from "./services/Clipboard.js"
 import { CommandRunner } from "./services/CommandRunner.js"
 import { GitHubService } from "./services/GitHubService.js"
-import { loadStoredThemeId, saveStoredThemeId } from "./themeStore.js"
+import { loadStoredDiffWhitespaceMode, loadStoredThemeId, saveStoredDiffWhitespaceMode, 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, diffAnchorOnSide, diffCommentAnchorLabel, diffCommentLineLabel, diffCommentLocationKey, diffCommentSideLabel, getStackedDiffCommentAnchors, minimizeWhitespaceDiffFiles, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileIndexAtLine, type DiffCommentAnchor, type DiffCommentKind, type DiffView, type DiffWhitespaceMode, type DiffWrapMode, type StackedDiffCommentAnchor, verticalDiffAnchor } from "./ui/diff.js"
+import { DETAIL_BODY_SCROLL_LIMIT, DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailHeaderHeight, getDetailJunctionRows, getScrollableDetailBodyHeight, LoadingPane, type DetailConversationStatus, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
 import { FooterHints, initialRetryProgress, RetryProgress } from "./ui/FooterHints.js"
+import { LoadingLogoPane } from "./ui/LoadingLogo.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
 import { CommandPalette } from "./ui/CommandPalette.js"
 import { CloseModal, CommentModal, CommentThreadModal, filterLabels, initialCloseModalState, initialCommandPaletteState, initialCommentModalState, initialCommentThreadModalState, initialLabelModalState, initialMergeModalState, initialModal, initialOpenRepositoryModalState, initialThemeModalState, LabelModal, MergeModal, Modal, OpenRepositoryModal, ThemeModal, type CloseModalState, type CommandPaletteState, type CommentModalState, type CommentThreadModalState, type LabelModalState, type MergeModalState, type ModalState, type ModalTag, type OpenRepositoryModalState, type ThemeModalState } from "./ui/modals.js"
@@ -35,6 +38,7 @@ import { groupBy, reviewLabel } from "./ui/pullRequests.js"
 import { PullRequestDiffPane } from "./ui/PullRequestDiffPane.js"
 import { buildPullRequestListRows, pullRequestListRowIndex, PullRequestList } from "./ui/PullRequestList.js"
 import { editSingleLineInput, isSingleLineInputKey, printableKeyText, singleLineText } from "./ui/singleLineInput.js"
+import { SPINNER_FRAMES } from "./ui/spinner.js"
 
 const parseOptionalPositiveInt = (value: string | undefined, fallback: number | null) => {
 	if (value === undefined) return fallback
@@ -54,7 +58,10 @@ const githubRuntime = Atom.runtime(
 		Layer.provideMerge(Observability.layer),
 	),
 )
-const initialThemeId = await Effect.runPromise(loadStoredThemeId)
+const [initialThemeId, initialDiffWhitespaceMode] = await Promise.all([
+	Effect.runPromise(loadStoredThemeId),
+	Effect.runPromise(loadStoredDiffWhitespaceMode),
+])
 
 interface PullRequestLoad {
 	readonly view: PullRequestView
@@ -96,6 +103,11 @@ interface AppliedDiffLineColorState {
 	readonly entries: readonly AppliedDiffLineColor[]
 }
 
+interface DiffCommentRangeSelection {
+	readonly start: StackedDiffCommentAnchor
+	readonly end: StackedDiffCommentAnchor
+}
+
 interface DetailHydration {
 	readonly token: symbol
 	notifyError: boolean
@@ -106,7 +118,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 MAX_REPOSITORY_CACHE_ENTRIES = 8
 const LOAD_MORE_SELECTION_THRESHOLD = 8
 const LOAD_MORE_SCROLL_THRESHOLD = 3
@@ -114,7 +125,6 @@ const DETAIL_PREFETCH_BEHIND = 1
 const DETAIL_PREFETCH_AHEAD = 3
 const DETAIL_PREFETCH_CONCURRENCY = 3
 const DETAIL_PREFETCH_DELAY_MS = 120
-
 const appendPullRequestPage = (existing: readonly PullRequestItem[], incoming: readonly PullRequestItem[]) => {
 	const seen = new Set(existing.map((pullRequest) => pullRequest.url))
 	const mergedIncoming = mergeCachedDetails(incoming, existing)
@@ -179,7 +189,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,10 +196,14 @@ 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 diffWhitespaceModeAtom = Atom.make<DiffWhitespaceMode>(initialDiffWhitespaceMode)
 const diffCommentAnchorIndexAtom = Atom.make(0)
+const diffPreferredSideAtom = Atom.make<DiffCommentSide | null>(null)
+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 pullRequestConversationAtom = Atom.make<Record<string, readonly PullRequestConversationItem[]>>({}).pipe(Atom.keepAlive)
+const pullRequestConversationLoadedAtom = Atom.make<Record<string, "loading" | "ready">>({}).pipe(Atom.keepAlive)
 const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>({}).pipe(Atom.keepAlive)
 
 const activeModalAtom = Atom.make<Modal>(initialModal)
@@ -324,6 +337,9 @@ const pullRequestDiffAtom = Atom.family((key: string) => {
 const listPullRequestCommentsAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
 	GitHubService.use((github) => github.listPullRequestComments(input.repository, input.number))
 )
+const listPullRequestConversationAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
+	GitHubService.use((github) => github.listPullRequestConversation(input.repository, input.number))
+)
 const getPullRequestMergeInfoAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
 	GitHubService.use((github) => github.getPullRequestMergeInfo(input.repository, input.number))
 )
@@ -381,12 +397,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 +428,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 +535,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,10 +542,14 @@ export const App = () => {
 	const [diffScrollTop, setDiffScrollTop] = useAtom(diffScrollTopAtom)
 	const [diffRenderView, setDiffRenderView] = useAtom(diffRenderViewAtom)
 	const [diffWrapMode, setDiffWrapMode] = useAtom(diffWrapModeAtom)
-	const [diffCommentMode, setDiffCommentMode] = useAtom(diffCommentModeAtom)
+	const [diffWhitespaceMode, setDiffWhitespaceMode] = useAtom(diffWhitespaceModeAtom)
 	const [diffCommentAnchorIndex, setDiffCommentAnchorIndex] = useAtom(diffCommentAnchorIndexAtom)
+	const [diffPreferredSide, setDiffPreferredSide] = useAtom(diffPreferredSideAtom)
+	const [diffCommentRangeStartIndex, setDiffCommentRangeStartIndex] = useAtom(diffCommentRangeStartIndexAtom)
 	const [diffCommentThreads, setDiffCommentThreads] = useAtom(diffCommentThreadsAtom)
 	const setDiffCommentsLoaded = useAtomSet(diffCommentsLoadedAtom)
+	const setPullRequestConversation = useAtomSet(pullRequestConversationAtom)
+	const setPullRequestConversationLoaded = useAtomSet(pullRequestConversationLoadedAtom)
 	const setPullRequestDiffCache = useAtomSet(pullRequestDiffCacheAtom)
 	const [activeModal, setActiveModal] = useAtom(activeModalAtom)
 	const [themeId, setThemeId] = useAtom(themeIdAtom)
@@ -551,6 +601,7 @@ export const App = () => {
 	const [refreshCompletionMessage, setRefreshCompletionMessage] = useState<string | null>(null)
 	const [refreshStartedAt, setRefreshStartedAt] = useState<number | null>(null)
 	const [terminalFocused, setTerminalFocused] = useState(true)
+	const [startupLoadComplete, setStartupLoadComplete] = useState(false)
 	const [loadingMoreKey, setLoadingMoreKey] = useState<string | null>(null)
 	const usernameResult = useAtomValue(usernameAtom)
 	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
@@ -559,6 +610,7 @@ export const App = () => {
 	const removePullRequestLabel = useAtomSet(removePullRequestLabelAtom, { mode: "promise" })
 	const toggleDraftStatus = useAtomSet(toggleDraftAtom, { mode: "promise" })
 	const listPullRequestComments = useAtomSet(listPullRequestCommentsAtom, { mode: "promise" })
+	const listPullRequestConversation = useAtomSet(listPullRequestConversationAtom, { mode: "promise" })
 	const getPullRequestMergeInfo = useAtomSet(getPullRequestMergeInfoAtom, { mode: "promise" })
 	const mergePullRequest = useAtomSet(mergePullRequestAtom, { mode: "promise" })
 	const closePullRequest = useAtomSet(closePullRequestAtom, { mode: "promise" })
@@ -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>())
@@ -589,7 +640,7 @@ export const App = () => {
 	const terminalFocusedRef = useRef(true)
 	const terminalWasBlurredRef = useRef(false)
 	const pullRequestStatusRef = useRef<LoadStatus>("loading")
-	const refreshPullRequestsRef = useRef<(message?: string) => void>(() => {})
+	const refreshPullRequestsRef = useRef<(message?: string, options?: { readonly resetTransientState?: boolean }) => void>(() => {})
 	const maybeRefreshPullRequestsRef = useRef<(minimumAgeMs: number) => void>(() => {})
 	const detailScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const detailPreviewScrollRef = useRef<ScrollBoxRenderable | null>(null)
@@ -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)
 		}
@@ -634,7 +682,7 @@ export const App = () => {
 	const pullRequestLoad = useAtomValue(pullRequestLoadAtom)
 	const pullRequests = useAtomValue(displayedPullRequestsAtom)
 	const pullRequestStatus = useAtomValue(pullRequestStatusAtom)
-	const isInitialLoading = pullRequestStatus === "loading" && pullRequests.length === 0
+	const isInitialLoading = !startupLoadComplete && pullRequestStatus === "loading" && pullRequests.length === 0
 	const pullRequestError = AsyncResult.isFailure(pullRequestResult) ? errorMessage(Cause.squash(pullRequestResult.cause)) : null
 	const username = AsyncResult.isSuccess(usernameResult) ? usernameResult.value : null
 	pullRequestStatusRef.current = pullRequestStatus
@@ -644,6 +692,8 @@ export const App = () => {
 	const visibleGroups = useAtomValue(visibleGroupsAtom)
 	const visiblePullRequests = useAtomValue(visiblePullRequestsAtom)
 	const selectedPullRequest = useAtomValue(selectedPullRequestAtom)
+	const pullRequestConversation = useAtomValue(pullRequestConversationAtom)
+	const pullRequestConversationLoaded = useAtomValue(pullRequestConversationLoadedAtom)
 	const selectedRepository = viewRepository(activeView)
 	const activeViews = activePullRequestViews(activeView)
 	const currentQueueCacheKey = viewCacheKey(activeView)
@@ -662,22 +712,60 @@ export const App = () => {
 	}), [visibleGroups, pullRequestStatus, pullRequestError, visibleFilterText, filterMode, filterQuery, loadedPullRequestCount, hasMorePullRequests, isLoadingMorePullRequests])
 	const selectedPullRequestRowIndex = pullRequestListRowIndex(pullRequestListRows, selectedPullRequest?.url ?? null)
 	const selectedDiffKey = useAtomValue(selectedDiffKeyAtom)
+	const selectedConversationItems = selectedDiffKey ? pullRequestConversation[selectedDiffKey] ?? [] : []
+	const selectedConversationStatus: DetailConversationStatus = selectedDiffKey ? pullRequestConversationLoaded[selectedDiffKey] ?? "idle" : "idle"
 	const selectedDiffState = useAtomValue(selectedDiffStateAtom)
 	const effectiveDiffRenderView = contentWidth >= 100 ? diffRenderView : "unified"
-	const readyDiffFiles = selectedDiffState?._tag === "Ready" ? selectedDiffState.files : []
+	const readyDiffFiles = useMemo(
+		() => selectedDiffState?._tag === "Ready"
+			? diffWhitespaceMode === "ignore" ? minimizeWhitespaceDiffFiles(selectedDiffState.files) : selectedDiffState.files
+			: [],
+		[selectedDiffState, diffWhitespaceMode],
+	)
+	const displayedDiffState = useMemo(
+		() => selectedDiffState?._tag === "Ready"
+			? PullRequestDiffState.Ready({ patch: readyDiffFiles.map((file) => file.patch).join("\n"), files: readyDiffFiles })
+			: selectedDiffState,
+		[selectedDiffState, readyDiffFiles],
+	)
 	const stackedDiffFiles = useMemo(() => buildStackedDiffFiles(readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth), [readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth])
 	const diffCommentAnchors = useMemo(
 		() => 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
@@ -710,12 +798,36 @@ export const App = () => {
 		if (!pullRequest) return
 		setPullRequestOverrides((current) => ({ ...current, [url]: transform(pullRequest) }))
 	}
-	const refreshPullRequests = (message?: string) => {
+	const markPullRequestCompleted = (pullRequest: PullRequestItem, state: "closed" | "merged") => {
+		setRecentlyCompletedPullRequests((current) => ({
+			...current,
+			[pullRequest.url]: {
+				...pullRequest,
+				state,
+				autoMergeEnabled: false,
+			},
+		}))
+	}
+	const restoreOptimisticPullRequest = (pullRequest: PullRequestItem) => {
+		setRecentlyCompletedPullRequests((current) => {
+			if (!(pullRequest.url in current)) return current
+			const next = { ...current }
+			delete next[pullRequest.url]
+			return next
+		})
+		updatePullRequest(pullRequest.url, () => pullRequest)
+	}
+	const refreshPullRequests = (message?: string, options: { readonly resetTransientState?: boolean } = {}) => {
 		refreshGenerationRef.current += 1
 		detailHydrationRef.current.clear()
 		if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
 		setLoadingMoreKey(null)
 		setPullRequestOverrides({})
+		if (options.resetTransientState) {
+			setRecentlyCompletedPullRequests({})
+			setPullRequestConversation({})
+			setPullRequestConversationLoaded({})
+		}
 		if (message) {
 			setNotice(null)
 			setRefreshCompletionMessage(message)
@@ -736,7 +848,7 @@ export const App = () => {
 		setLoadingMoreKey(null)
 		setDetailFullView(false)
 		setDiffFullView(false)
-		setDiffCommentMode(false)
+		setDiffCommentRangeStartIndex(null)
 		setFilterDraft(filterQuery)
 		setNotice(null)
 		setRefreshCompletionMessage(null)
@@ -818,6 +930,29 @@ export const App = () => {
 		})
 		return true
 	}
+	const loadPullRequestConversation = (pullRequest: PullRequestItem, force = false) => {
+		const key = pullRequestDiffKey(pullRequest)
+		const previousLoadState = registry.get(pullRequestConversationLoadedAtom)[key]
+		if (!force && previousLoadState) return
+		const generation = refreshGenerationRef.current
+		setPullRequestConversationLoaded((current) => ({ ...current, [key]: "loading" }))
+		void listPullRequestConversation({ repository: pullRequest.repository, number: pullRequest.number })
+			.then((items) => {
+				if (generation !== refreshGenerationRef.current) return
+				setPullRequestConversation((current) => ({ ...current, [key]: items }))
+				setPullRequestConversationLoaded((current) => ({ ...current, [key]: "ready" }))
+			})
+			.catch((error) => {
+				if (generation !== refreshGenerationRef.current) return
+				setPullRequestConversationLoaded((current) => {
+					if (previousLoadState === "ready") return { ...current, [key]: previousLoadState }
+					const next = { ...current }
+					delete next[key]
+					return next
+				})
+				flashNotice(errorMessage(error))
+			})
+	}
 	maybeRefreshPullRequestsRef.current = (minimumAgeMs) => {
 		if (!terminalFocusedRef.current || pullRequestStatusRef.current === "loading") return
 		const lastRefreshAt = lastPullRequestRefreshAtRef.current
@@ -933,20 +1068,30 @@ export const App = () => {
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
+		setDiffPreferredSide(null)
+		setDiffCommentRangeStartIndex(null)
 		detailPreviewScrollRef.current?.scrollTo({ x: 0, y: 0 })
 	}, [selectedIndex])
 
+	useEffect(() => {
+		setDiffFileIndex((current) => safeDiffFileIndex(readyDiffFiles, current))
+	}, [readyDiffFiles.length])
+
 	useEffect(() => {
 		setDiffCommentAnchorIndex((current) => {
 			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 +1104,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,25 +1135,49 @@ 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])
+
+	// Scroll the selected line into view when the diff view is opened. Previously
+	// opentui's `focused` scrollbox did this auto-scroll on mount; with the keymap
+	// migration the scrollbox is `focusable={false}` so we have to scroll explicitly.
+	useEffect(() => {
+		if (!diffFullView) return
+		if (!selectedDiffCommentAnchor) return
+		ensureDiffLineVisible(selectedDiffCommentAnchor.renderLine)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [diffFullView])
 	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 loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
+	const hasActiveLoadingIndicator = pullRequestResult.waiting || isHydratingPullRequestDetails || isLoadingMorePullRequests || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?._tag === "Loading"
+	const loadingIndicator = SPINNER_FRAMES[loadingFrame % SPINNER_FRAMES.length]!
 
 	useEffect(() => {
 		if (!hasActiveLoadingIndicator) return
 		const interval = globalThis.setInterval(() => {
-			setLoadingFrame((current) => (current + 1) % LOADING_FRAMES.length)
+			setLoadingFrame((current) => current + 1)
 		}, 120)
 		return () => globalThis.clearInterval(interval)
 	}, [hasActiveLoadingIndicator])
 
+	useEffect(() => {
+		if (isInitialLoading) setLoadingFrame(0)
+	}, [isInitialLoading])
+
+	useEffect(() => {
+		if (startupLoadComplete || pullRequestStatus === "loading") return
+		setStartupLoadComplete(true)
+	}, [startupLoadComplete, pullRequestStatus])
+
 	useEffect(() => {
 		if (pullRequestStatus !== "ready" || !selectedPullRequest) return
 		hydratePullRequestDetails(selectedPullRequest, true)
 	}, [pullRequestStatus, selectedPullRequest?.url, selectedPullRequest?.headRefOid, selectedPullRequest?.state, selectedPullRequest?.detailLoaded, selectedPullRequest?.repository, selectedPullRequest?.number])
 
+	useEffect(() => {
+		if (pullRequestStatus !== "ready" || !selectedPullRequest) return
+		loadPullRequestConversation(selectedPullRequest)
+	}, [pullRequestStatus, selectedPullRequest?.url, selectedPullRequest?.headRefOid, selectedPullRequest?.repository, selectedPullRequest?.number])
+
 	useEffect(() => {
 		if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
 		if (pullRequestStatus !== "ready" || visiblePullRequests.length === 0) return
@@ -1041,7 +1211,7 @@ export const App = () => {
 		title: `${loadingIndicator} Loading pull request details`,
 		hint: `${selectedPullRequest.repository} #${selectedPullRequest.number}`,
 	} : detailPlaceholderContent
-	const detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows(selectedPullRequest, rightPaneWidth, true)
+	const detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows(selectedPullRequest, rightPaneWidth, true, rightContentWidth, selectedConversationItems, selectedConversationStatus)
 
 	const halfPage = Math.max(1, Math.floor(wideBodyHeight / 2))
 
@@ -1135,9 +1305,11 @@ export const App = () => {
 		diffCommentLineColorsRef.current = { contextKey: null, entries: [] }
 		setDiffFullView(true)
 		setDetailFullView(false)
-		setDiffCommentMode(false)
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
+		setDiffCommentAnchorIndex(0)
+		setDiffPreferredSide(null)
+		setDiffCommentRangeStartIndex(null)
 		setDiffRenderView(contentWidth >= 100 ? "split" : "unified")
 		diffScrollRef.current?.scrollTo({ x: 0, y: 0 })
 		loadPullRequestDiff(selectedPullRequest, { includeComments: true })
@@ -1158,53 +1330,13 @@ export const App = () => {
 		const scrollTop = diffScrollRef.current?.scrollTop
 		if (scrollTop === undefined || stackedDiffFiles.length === 0) return
 		setDiffScrollTop((current) => current === scrollTop ? current : scrollTop)
-		const nextIndex = stackedDiffFileAtLine(stackedDiffFiles, scrollTop)?.index ?? 0
+		const nextIndex = Math.max(0, stackedDiffFileIndexAtLine(stackedDiffFiles, scrollTop))
 		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 +1358,69 @@ 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 targetSide = diffPreferredSide ?? selectedDiffCommentAnchor?.side
+		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex && anchor.side === targetSide)
+			?? 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 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))]
-		if (nextRow === undefined) return
-		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === currentAnchor?.side)
-			?? diffCommentAnchors.find((anchor) => anchor.renderLine === nextRow)
+	const navigableDiffCommentAnchors = () => diffCommentRangeStartAnchor
+		? diffCommentAnchors.filter((anchor) => sameDiffCommentTarget(anchor, diffCommentRangeStartAnchor))
+		: diffCommentAnchors
+
+	const moveDiffCommentAnchor = (delta: number, options: { readonly preserveViewportRow?: boolean } = {}) => {
+		const anchors = navigableDiffCommentAnchors()
+		if (anchors.length === 0) return
+		const currentAnchor = selectedDiffCommentAnchor && anchors.includes(selectedDiffCommentAnchor) ? selectedDiffCommentAnchor : anchors[0]
+		const nextAnchor = verticalDiffAnchor(anchors, currentAnchor ?? null, delta, diffPreferredSide)
 		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) => {
+		setDiffPreferredSide(side)
 		if (!selectedDiffCommentAnchor) return
-		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.renderLine === selectedDiffCommentAnchor.renderLine && anchor.side === side)
+		const nextAnchor = diffAnchorOnSide(diffCommentAnchors, selectedDiffCommentAnchor, side)
 		if (!nextAnchor) return
+		setDiffCommentRangeStartIndex(null)
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 	}
 
@@ -1265,9 +1429,12 @@ export const App = () => {
 		const nextAnchor = (side ? lineAnchors.find((anchor) => anchor.side === side) : undefined) ?? lineAnchors[0]
 		if (!nextAnchor) return
 		suppressNextDiffCommentScrollRef.current = true
+		setDiffPreferredSide(side ?? nextAnchor.side)
+		if (diffCommentRangeStartAnchor && !sameDiffCommentTarget(diffCommentRangeStartAnchor, nextAnchor)) {
+			setDiffCommentRangeStartIndex(null)
+		}
 		setDiffCommentAnchorIndex(diffCommentAnchors.indexOf(nextAnchor))
 		setDiffFileIndex(nextAnchor.fileIndex)
-		setDiffCommentMode(true)
 	}
 
 	const editComment = (transform: (state: CommentEditorValue) => CommentEditorValue) => {
@@ -1288,6 +1455,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 +1496,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 +1509,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 +1520,7 @@ export const App = () => {
 			line: target.line,
 			side: target.side,
 			body,
+			...rangeInput,
 		} satisfies CreatePullRequestCommentInput
 
 		if (threadKey) {
@@ -1325,6 +1530,7 @@ export const App = () => {
 			}))
 		}
 		closeActiveModal()
+		setDiffCommentRangeStartIndex(null)
 		flashNotice(`Commenting on ${target.path}:${target.line}`)
 		void createPullRequestComment(input).then((comment) => {
 			if (threadKey) {
@@ -1400,16 +1606,7 @@ export const App = () => {
 		setCloseModal((current) => ({ ...current, running: true, error: null }))
 		void closePullRequest({ repository, number })
 			.then(() => {
-				if (previousPullRequest) {
-					setRecentlyCompletedPullRequests((current) => ({
-						...current,
-						[previousPullRequest.url]: {
-							...previousPullRequest,
-							state: "closed",
-							autoMergeEnabled: false,
-						},
-					}))
-				}
+				if (previousPullRequest) markPullRequestCompleted(previousPullRequest, "closed")
 				closeActiveModal()
 				refreshPullRequests(`Closed #${number}`)
 			})
@@ -1444,6 +1641,12 @@ export const App = () => {
 		setThemeId(id)
 	}
 
+	const toggleDiffWhitespaceMode = () => {
+		const next = diffWhitespaceMode === "ignore" ? "show" : "ignore"
+		setDiffWhitespaceMode(next)
+		void Effect.runPromise(saveStoredDiffWhitespaceMode(next)).catch((error) => flashNotice(errorMessage(error)))
+	}
+
 	const moveThemeSelection = (delta: number) => {
 		const filteredThemes = filterThemeDefinitions(themeModalRef.current.query)
 		if (filteredThemes.length === 0) return
@@ -1539,30 +1742,15 @@ export const App = () => {
 		const { repository, number } = mergeModal.info
 		const targetPullRequest = pullRequests.find((pullRequest) => pullRequest.repository === repository && pullRequest.number === number)
 		const previousPullRequest = targetPullRequest ?? null
-		const previousMergeInfo = mergeModal.info
 
 		if (targetPullRequest && option.optimisticAutoMergeEnabled !== undefined) {
 			updatePullRequest(targetPullRequest.url, (pullRequest) => ({ ...pullRequest, autoMergeEnabled: option.optimisticAutoMergeEnabled! }))
-			setMergeModal((current) => ({
-				...current,
-				info: current.info ? { ...current.info, autoMergeEnabled: option.optimisticAutoMergeEnabled! } : current.info,
-			}))
 		}
+		if (targetPullRequest && option.optimisticState === "merged") markPullRequestCompleted(targetPullRequest, "merged")
 
-		setMergeModal((current) => ({ ...current, running: true, error: null }))
+		closeActiveModal()
 		void mergePullRequest({ repository, number, action: option.action })
 			.then(() => {
-				if (option.refreshOnSuccess && previousPullRequest) {
-					setRecentlyCompletedPullRequests((current) => ({
-						...current,
-						[previousPullRequest.url]: {
-							...previousPullRequest,
-							state: "merged",
-							autoMergeEnabled: false,
-						},
-					}))
-				}
-				closeActiveModal()
 				if (option.refreshOnSuccess) {
 					refreshPullRequests(`${option.pastTense} #${number}`)
 				} else {
@@ -1570,8 +1758,7 @@ export const App = () => {
 				}
 			})
 			.catch((error) => {
-				if (previousPullRequest) updatePullRequest(previousPullRequest.url, () => previousPullRequest)
-				setMergeModal((current) => ({ ...current, running: false, info: previousMergeInfo, error: errorMessage(error) }))
+				if (previousPullRequest) restoreOptimisticPullRequest(previousPullRequest)
 				flashNotice(errorMessage(error))
 			})
 	}
@@ -1685,10 +1872,13 @@ export const App = () => {
 		diffReady: selectedDiffState?._tag === "Ready",
 		effectiveDiffRenderView,
 		diffWrapMode,
+		diffWhitespaceMode,
 		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 +1906,7 @@ export const App = () => {
 			openDiffView,
 			closeDiffView: () => {
 				setDiffFullView(false)
-				setDiffCommentMode(false)
+				setDiffCommentRangeStartIndex(null)
 			},
 			reloadDiff: () => {
 				if (!selectedPullRequest) return
@@ -1725,11 +1915,11 @@ export const App = () => {
 			},
 			toggleDiffRenderView: () => setDiffRenderView((current) => current === "unified" ? "split" : "unified"),
 			toggleDiffWrapMode: () => setDiffWrapMode((current) => current === "none" ? "word" : "none"),
+			toggleDiffWhitespaceMode,
 			jumpDiffFile,
-			toggleDiffCommentMode: () => {
-				if (diffCommentMode) setDiffCommentMode(false)
-				else enterDiffCommentMode()
-			},
+			openSelectedDiffComment,
+			toggleDiffCommentRange,
+			moveDiffCommentThread,
 			openDiffCommentModal,
 			togglePullRequestDraftStatus: toggleSelectedPullRequestDraftStatus,
 			openLabelModal,
@@ -1755,6 +1945,8 @@ export const App = () => {
 		const command = appCommands.find((entry) => entry.id === id)
 		return command ? runCommand(command, options) : false
 	}
+	const runCommandByIdRef = useRef(runCommandById)
+	runCommandByIdRef.current = runCommandById
 	const dynamicPaletteCommands: readonly AppCommand[] = (() => {
 		if (!commandPaletteActive) return []
 		const repository = parseRepositoryInput(commandPalette.query)
@@ -1769,287 +1961,250 @@ 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
-		&& !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)
+	// === Helpers used by the keymap layers ===
+	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) => ({
+	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)
+	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,
+	const moveCommandPaletteSelection = (delta: -1 | 1) => setCommandPalette((current) => {
+		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCommands)
+		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+	})
+	const selectCommandPaletteIndex = (index: number) => setCommandPalette((current) => {
+		const selectedIndex = clampCommandIndex(index, commandPaletteCommands)
+		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+	})
+	const runCommandPaletteCommand = (command: AppCommand) => {
+		runCommand(command, { notifyDisabled: true, closePalette: true })
+	}
+	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)
+	}
+	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]!
 	})
-	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,
+	const stepSelected = (delta: number) => setSelectedIndex((current) => {
+		if (visiblePullRequests.length === 0) return 0
+		return Math.max(0, Math.min(visiblePullRequests.length - 1, current + delta))
 	})
-	commandPaletteCtxRef.current = {
-		runSelected: () => { if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true }) },
-		setCommandPalette,
-		paletteCommands: commandPaletteCommands,
+	const stepSelectedDown = (count = 1) => {
+		if (visiblePullRequests.length === 0) return
+		if (selectedIndex + count >= visiblePullRequests.length && hasMorePullRequests) {
+			loadMorePullRequests()
+		}
+		stepSelected(count)
 	}
-	const moveCommandPaletteSelection = (delta: -1 | 1) => commandPaletteCtxRef.current.setCommandPalette((current) => {
-		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCtxRef.current.paletteCommands)
-		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+	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
 	})
-	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)
-			} },
-		],
-	}), [])
+	const handleQuitOrClose = () => {
+		if (themeModalActive) {
+			closeThemeModal(false)
+			return
+		}
+		if (activeModal._tag !== "None") {
+			closeActiveModal()
+			return
+		}
+		runCommandById("app.quit")
+	}
+
+	// === Build the keymap context ===
+	const appCtx: AppCtx = {
+		closeModalActive,
+		mergeModalActive,
+		commentThreadModalActive,
+		labelModalActive,
+		themeModalActive,
+		openRepositoryModalActive,
+		commentModalActive,
+		commandPaletteActive,
+		filterMode,
+		diffFullView,
+		detailFullView,
+		textInputActive: commentModalActive
+			|| commandPaletteActive
+			|| openRepositoryModalActive
+			|| labelModalActive
+			|| filterMode
+			|| (themeModalActive && themeModal.filterMode),
+		closeModal: {
+			closeModal: closeActiveModal,
+			confirmClose: confirmClosePullRequest,
+		},
+		mergeModal: {
+			availableActionCount: availableMergeActions(mergeModal.info).length,
+			closeModal: closeActiveModal,
+			confirmMerge: confirmMergeAction,
+			moveSelection: moveMergeSelection,
+		},
+		commentThreadModal: {
+			halfPage,
+			closeModal: closeActiveModal,
+			openInlineComment: openDiffCommentModal,
+			scrollBy: scrollCommentThread,
+		},
+		labelModal: {
+			closeModal: closeActiveModal,
+			toggleSelected: toggleLabelAtIndex,
+			moveSelection: moveLabelSelection,
+		},
+		themeModal: {
+			filterMode: themeModal.filterMode,
+			hasFilteredResults: filterThemeDefinitions(themeModal.query).length > 0,
+			closeWithoutSaving: () => closeThemeModal(false),
+			clearFilter: () => updateThemeQuery("", { filterMode: false }),
+			enterFilterMode: () => updateThemeQuery("", { filterMode: true }),
+			confirmSelection: () => closeThemeModal(true),
+			moveSelection: moveThemeSelection,
+		},
+		openRepositoryModal: {
+			closeModal: closeActiveModal,
+			openFromInput: openRepositoryFromInput,
+		},
+		commentModal: {
+			closeModal: closeActiveModal,
+			submit: submitDiffComment,
+			insertNewline: () => editComment((state) => insertText(state, "\n")),
+			moveLeft: () => editComment(editorMoveLeft),
+			moveRight: () => editComment(editorMoveRight),
+			moveUp: () => editComment((state) => moveVertically(state, -1)),
+			moveDown: () => editComment((state) => moveVertically(state, 1)),
+			moveLineStart: () => editComment(moveLineStart),
+			moveLineEnd: () => editComment(moveLineEnd),
+			moveWordBackward: () => editComment(moveWordBackward),
+			moveWordForward: () => editComment(moveWordForward),
+			backspace: () => editComment(editorBackspace),
+			deleteForward: () => editComment(editorDeleteForward),
+			deleteWordBackward: () => editComment(deleteWordBackward),
+			deleteWordForward: () => editComment(deleteWordForward),
+			deleteToLineStart: () => editComment(deleteToLineStart),
+			deleteToLineEnd: () => editComment(deleteToLineEnd),
+		},
+		commandPalette: {
+			closeModal: closeActiveModal,
+			runSelected: () => {
+				if (selectedCommand) runCommandPaletteCommand(selectedCommand)
+			},
+			moveSelection: moveCommandPaletteSelection,
+		},
+		filterModeCtx: {
+			cancel: () => {
+				setFilterDraft(filterQuery)
+				setFilterMode(false)
+			},
+			commit: () => {
+				setFilterQuery(filterDraft)
+				setFilterMode(false)
+			},
+		},
+		diff: {
+			halfPage,
+			handleEscape: () => {
+				if (diffCommentRangeActive) setDiffCommentRangeStartIndex(null)
+				else runCommandById("diff.close")
+			},
+			openSelectedComment: openSelectedDiffComment,
+			addComment: () => runCommandById("diff.add-comment"),
+			toggleRange: () => runCommandById("diff.toggle-range"),
+			toggleView: () => runCommandById("diff.toggle-view"),
+			toggleWrap: () => runCommandById("diff.toggle-wrap"),
+			reload: () => runCommandById("diff.reload"),
+			nextThread: () => runCommandById("diff.next-thread"),
+			previousThread: () => runCommandById("diff.previous-thread"),
+			moveAnchor: moveDiffCommentAnchor,
+			moveAnchorToBoundary: moveDiffCommentToBoundary,
+			alignAnchor: alignSelectedDiffCommentAnchor,
+			selectSide: selectDiffCommentSide,
+			nextFile: () => runCommandById("diff.next-file"),
+			previousFile: () => runCommandById("diff.previous-file"),
+			openInBrowser: () => runCommandById("pull.open-browser"),
+		},
+		detail: {
+			halfPage,
+			scrollBy: scrollDetailFullViewBy,
+			scrollTo: scrollDetailFullViewTo,
+			closeDetail: () => runCommandById("detail.close"),
+			openTheme: () => runCommandById("theme.open"),
+			openDiff: () => runCommandById("diff.open"),
+			closePullRequest: () => runCommandById("pull.close"),
+			openLabels: () => runCommandById("pull.labels"),
+			openMerge: () => runCommandById("pull.merge"),
+			toggleDraft: () => runCommandById("pull.toggle-draft"),
+			refresh: () => runCommandById("pull.refresh"),
+			openInBrowser: () => runCommandById("pull.open-browser"),
+			copyMetadata: () => runCommandById("pull.copy-metadata"),
+		},
+		listNav: {
+			halfPage,
+			visibleCount: visiblePullRequests.length,
+			hasFilter: filterQuery.length > 0,
+			canScrollDetailPreview: isWideLayout && selectedPullRequest !== null,
+			runCommandById: (id) => { runCommandById(id) },
+			switchQueueMode,
+			scrollDetailPreviewBy,
+			scrollDetailPreviewTo,
+			clearFilter: () => { runCommandById("filter.clear") },
+			stepSelected,
+			stepSelectedUp,
+			stepSelectedDown,
+			stepSelectedUpWrap,
+			stepSelectedDownWithLoadMore,
+			moveSelectedToPreviousGroup,
+			moveSelectedToNextGroup,
+			setSelected: (index) => setSelectedIndex(index),
+		},
+		openCommandPalette: () => { runCommandById("command.open") },
+		handleQuitOrClose,
+	}
+
+	useKeymap(appKeymap, appCtx, useOpenTuiSubscribe())
 
 	useKeyboard((key) => {
 		if (commandPaletteActive) {
@@ -2073,18 +2228,9 @@ export const App = () => {
 			return
 		}
 
-		if ((key.name === "q" && !commentModalActive && !(themeModalActive && themeModal.filterMode)) || (key.ctrl && key.name === "c")) {
-			if (themeModalActive) {
-				closeThemeModal(false)
-				return
-			}
-			if (activeModal._tag !== "None") {
-				closeActiveModal()
-				return
-			}
-			runCommandById("app.quit")
-			return
-		}
+		// q / ctrl+c quit/close-modal logic now lives in the keymap layer
+		// (handleQuitOrClose). This useKeyboard callback only handles raw text
+		// input for modals that need character-by-character accumulation.
 
 		if (themeModalActive) {
 			if (themeModal.filterMode && isSingleLineInputKey(key)) {
@@ -2113,343 +2259,30 @@ 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
 	})
 
+	if (isInitialLoading) {
+		return (
+			<box width={terminalWidth} height={terminalHeight} flexDirection="column" backgroundColor={colors.background}>
+				<LoadingLogoPane content={detailPlaceholderContent} width={contentWidth} height={terminalHeight} frame={loadingFrame} />
+			</box>
+		)
+	}
+
 	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, selectedConversationItems, selectedConversationStatus)
+	const fullscreenDetailBodyScrollable = fullscreenDetailBodyHeight > fullscreenDetailBodyViewportHeight
 	const wideDetailHeaderHeight = getDetailHeaderHeight(selectedPullRequest, rightPaneWidth, true)
 	const wideDetailBodyViewportHeight = Math.max(1, wideBodyHeight - wideDetailHeaderHeight)
-	const wideDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, rightContentWidth)
+	const wideDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, rightContentWidth, selectedConversationItems, selectedConversationStatus)
 	const wideDetailBodyScrollable = wideDetailBodyHeight > wideDetailBodyViewportHeight
 
 	const prListProps = {
@@ -2463,6 +2296,7 @@ export const App = () => {
 		loadedCount: loadedPullRequestCount,
 		hasMore: hasMorePullRequests,
 		isLoadingMore: isLoadingMorePullRequests,
+		loadingIndicator,
 		onSelectPullRequest: selectPullRequestByUrl,
 	} as const
 
@@ -2491,8 +2325,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
@@ -2520,28 +2354,27 @@ export const App = () => {
 			<box paddingLeft={1} paddingRight={1} flexDirection="column" backgroundColor={colors.background}>
 				<PlainLine text={headerLine} fg={colors.muted} bold />
 			</box>
-			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
+			{isWideLayout && !detailFullView && !diffFullView ? (
 				<Divider width={contentWidth} junctionAt={dividerJunctionAt} junctionChar="┬" />
 			) : (
 				<Divider width={contentWidth} />
 			)}
-			{isInitialLoading ? (
-				<LoadingPane content={detailPlaceholderContent} width={contentWidth} height={wideBodyHeight} />
-			) : diffFullView ? (
+			{diffFullView ? (
 				<PullRequestDiffPane
 					pullRequest={selectedPullRequest}
-					diffState={selectedDiffState}
+					diffState={displayedDiffState}
 					stackedFiles={stackedDiffFiles}
 					scrollTop={diffScrollTop}
 					view={effectiveDiffRenderView}
+					whitespaceMode={diffWhitespaceMode}
 					wrapMode={diffWrapMode}
 					paneWidth={contentWidth}
 					height={wideBodyHeight}
 					loadingIndicator={loadingIndicator}
 					scrollRef={diffScrollRef}
 					setDiffRef={setDiffRenderableRef}
-					commentMode={diffCommentMode}
 					selectedCommentAnchor={selectedDiffCommentAnchor}
+					selectedCommentLabel={selectedDiffCommentLabel}
 					selectedCommentThread={selectedDiffCommentThread}
 					onSelectCommentLine={selectDiffCommentLine}
 					themeId={themeId}
@@ -2553,20 +2386,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} focusable={false} flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
+								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} conversationItems={selectedConversationItems} conversationStatus={selectedConversationStatus} 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">
@@ -2588,7 +2417,7 @@ export const App = () => {
 							<>
 								<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={rightContentWidth} paneWidth={rightPaneWidth} showChecks />
 								<scrollbox ref={detailPreviewScrollRef} flexGrow={1} verticalScrollbarOptions={{ visible: wideDetailBodyScrollable }}>
-									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} loadingIndicator={loadingIndicator} themeId={themeId} />
+									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} conversationItems={selectedConversationItems} conversationStatus={selectedConversationStatus} loadingIndicator={loadingIndicator} themeId={themeId} />
 								</scrollbox>
 							</>
 						) : (
@@ -2598,23 +2427,20 @@ 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} focusable={false} flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
+								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} conversationItems={selectedConversationItems} conversationStatus={selectedConversationStatus} 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">
-					<DetailsPane pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
+					<DetailsPane pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} conversationItems={selectedConversationItems} conversationStatus={selectedConversationStatus} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
 						<scrollbox ref={prListScrollRef} focusable={false} flexGrow={1}>
@@ -2626,7 +2452,7 @@ export const App = () => {
 				</box>
 			)}
 
-			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
+			{isWideLayout && !detailFullView && !diffFullView ? (
 				<Divider width={contentWidth} junctionAt={dividerJunctionAt} junctionChar="┴" />
 			) : (
 				<Divider width={contentWidth} />
@@ -2640,7 +2466,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"}
@@ -2730,6 +2556,8 @@ export const App = () => {
 					modalHeight={commandPaletteHeight}
 					offsetLeft={commandPaletteLeft}
 					offsetTop={commandPaletteTop}
+					onSelectCommandIndex={selectCommandPaletteIndex}
+					onRunCommand={runCommandPaletteCommand}
 				/>
 			) : null}
 		</box>