@kitlangton/ghui 0.1.22 → 0.2.1

package/src/App.tsx

@@ -1,18 +1,19 @@
 import type { DiffRenderable, PasteEvent, ScrollBoxRenderable } from "@opentui/core"
 import { RegistryContext, useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
-import { useAppCommandRegistry } from "./keyboard/useAppCommandRegistry.js"
-import { scrollBindings, useScopedBindings, type ScopedBindingAction } from "./keyboard/useScopedBindings.js"
+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"
 import * as Atom from "effect/unstable/reactivity/Atom"
 import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry"
-import { useContext, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 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"
@@ -23,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, diffCommentAnchorLabel, diffCommentLineLabel, diffCommentLocationKey, diffCommentSideLabel, getStackedDiffCommentAnchors, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileAtLine, type DiffCommentAnchor, type DiffCommentKind, type DiffView, type DiffWrapMode, type StackedDiffCommentAnchor } from "./ui/diff.js"
-import { DETAIL_BODY_SCROLL_LIMIT, DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailHeaderHeight, getDetailJunctionRows, getScrollableDetailBodyHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
+import { 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"
@@ -36,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
@@ -55,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
@@ -112,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
@@ -120,24 +125,6 @@ const DETAIL_PREFETCH_BEHIND = 1
 const DETAIL_PREFETCH_AHEAD = 3
 const DETAIL_PREFETCH_CONCURRENCY = 3
 const DETAIL_PREFETCH_DELAY_MS = 120
-const MAX_KEYMAP_COUNT_PREFIX = 99
-
-const countSequence = (count: number, key: string) => `${String(count).split("").join(" ")} ${key}`
-
-const countedVerticalBindings = (
-	moveUp: (count: number) => void,
-	moveDown: (count: number) => void,
-): Record<string, ScopedBindingAction> => {
-	const bindings: Record<string, ScopedBindingAction> = {}
-	for (let count = 1; count <= MAX_KEYMAP_COUNT_PREFIX; count++) {
-		bindings[countSequence(count, "k")] = () => moveUp(count)
-		bindings[countSequence(count, "up")] = () => moveUp(count)
-		bindings[countSequence(count, "j")] = () => moveDown(count)
-		bindings[countSequence(count, "down")] = () => moveDown(count)
-	}
-	return bindings
-}
-
 const appendPullRequestPage = (existing: readonly PullRequestItem[], incoming: readonly PullRequestItem[]) => {
 	const seen = new Set(existing.map((pullRequest) => pullRequest.url))
 	const mergedIncoming = mergeCachedDetails(incoming, existing)
@@ -209,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 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)
@@ -346,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))
 )
@@ -548,10 +542,14 @@ export const App = () => {
 	const [diffScrollTop, setDiffScrollTop] = useAtom(diffScrollTopAtom)
 	const [diffRenderView, setDiffRenderView] = useAtom(diffRenderViewAtom)
 	const [diffWrapMode, setDiffWrapMode] = useAtom(diffWrapModeAtom)
+	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)
@@ -603,7 +601,9 @@ 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 [detailPreviewScrollTop, setDetailPreviewScrollTop] = useState(0)
 	const usernameResult = useAtomValue(usernameAtom)
 	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
 	const loadPullRequestPage = useAtomSet(listOpenPullRequestPageAtom, { mode: "promise" })
@@ -611,6 +611,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" })
@@ -640,10 +641,11 @@ 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)
+	const detailPreviewScrollTopRef = useRef(0)
 	const diffScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const prListScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const diffRenderableRefs = useRef(new Map<number, DiffRenderable>())
@@ -682,7 +684,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
@@ -692,6 +694,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)
@@ -710,9 +714,22 @@ 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) : [],
@@ -783,12 +800,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)
@@ -891,6 +932,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
@@ -1006,10 +1070,19 @@ export const App = () => {
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
+		setDiffPreferredSide(null)
 		setDiffCommentRangeStartIndex(null)
 		detailPreviewScrollRef.current?.scrollTo({ x: 0, y: 0 })
+		if (detailPreviewScrollTopRef.current !== 0) {
+			detailPreviewScrollTopRef.current = 0
+			setDetailPreviewScrollTop(0)
+		}
 	}, [selectedIndex])
 
+	useEffect(() => {
+		setDiffFileIndex((current) => safeDiffFileIndex(readyDiffFiles, current))
+	}, [readyDiffFiles.length])
+
 	useEffect(() => {
 		setDiffCommentAnchorIndex((current) => {
 			if (diffCommentAnchors.length === 0) return 0
@@ -1069,24 +1142,48 @@ export const App = () => {
 		}
 		diffCommentLineColorsRef.current = { contextKey: diffLineColorContextKey, entries: nextEntries }
 	}, [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 || isLoadingMorePullRequests || labelModal.loading || closeModal.running || mergeModal.loading || mergeModal.running || selectedDiffState?._tag === "Loading"
-	const loadingIndicator = LOADING_FRAMES[loadingFrame % LOADING_FRAMES.length]!
+	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
@@ -1120,8 +1217,6 @@ export const App = () => {
 		title: `${loadingIndicator} Loading pull request details`,
 		hint: `${selectedPullRequest.repository} #${selectedPullRequest.number}`,
 	} : detailPlaceholderContent
-	const detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows(selectedPullRequest, rightPaneWidth, true)
-
 	const halfPage = Math.max(1, Math.floor(wideBodyHeight / 2))
 
 	const loadPullRequestComments = (pullRequest: PullRequestItem, force = false) => {
@@ -1217,6 +1312,7 @@ export const App = () => {
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
+		setDiffPreferredSide(null)
 		setDiffCommentRangeStartIndex(null)
 		setDiffRenderView(contentWidth >= 100 ? "split" : "unified")
 		diffScrollRef.current?.scrollTo({ x: 0, y: 0 })
@@ -1238,12 +1334,27 @@ 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 scrollDetailPreviewBy = (y: number) => detailPreviewScrollRef.current?.scrollBy({ x: 0, y })
-	const scrollDetailPreviewTo = (y: number) => detailPreviewScrollRef.current?.scrollTo({ x: 0, y })
+	const syncDetailPreviewScrollState = useCallback(() => {
+		const scrollTop = detailPreviewScrollRef.current?.scrollTop
+		if (scrollTop === undefined) return
+		const nextTop = Math.max(0, Math.floor(scrollTop))
+		if (detailPreviewScrollTopRef.current === nextTop) return
+		detailPreviewScrollTopRef.current = nextTop
+		setDetailPreviewScrollTop(nextTop)
+	}, [])
+
+	const scrollDetailPreviewBy = (y: number) => {
+		detailPreviewScrollRef.current?.scrollBy({ x: 0, y })
+		syncDetailPreviewScrollState()
+	}
+	const scrollDetailPreviewTo = (y: number) => {
+		detailPreviewScrollRef.current?.scrollTo({ x: 0, y })
+		syncDetailPreviewScrollState()
+	}
 
 	const ensureDiffLineVisible = (line: number) => {
 		const scroll = diffScrollRef.current
@@ -1262,12 +1373,23 @@ export const App = () => {
 		return () => globalThis.clearInterval(interval)
 	}, [diffFullView, stackedDiffFiles])
 
+	useLayoutEffect(() => {
+		if (!isWideLayout || detailFullView || diffFullView) return
+		const scroll = detailPreviewScrollRef.current
+		if (!scroll) return
+		const sync = () => { syncDetailPreviewScrollState() }
+		scroll.verticalScrollBar.on("change", sync)
+		syncDetailPreviewScrollState()
+		return () => { scroll.verticalScrollBar.off("change", sync) }
+	}, [isWideLayout, detailFullView, diffFullView, syncDetailPreviewScrollState])
+
 	const jumpDiffFile = (delta: 1 | -1) => {
 		if (readyDiffFiles.length === 0) return
 		const nextIndex = safeDiffFileIndex(readyDiffFiles, diffFileIndex + delta)
 		setDiffFileIndex(nextIndex)
 		setDiffCommentRangeStartIndex(null)
-		const nextAnchor = diffCommentAnchors.find((anchor) => anchor.fileIndex === nextIndex && anchor.side === selectedDiffCommentAnchor?.side)
+		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)
@@ -1280,13 +1402,8 @@ export const App = () => {
 	const moveDiffCommentAnchor = (delta: number, options: { readonly preserveViewportRow?: boolean } = {}) => {
 		const anchors = navigableDiffCommentAnchors()
 		if (anchors.length === 0) return
-		const rows = [...new Set(anchors.map((anchor) => anchor.renderLine))].sort((left, right) => left - right)
 		const currentAnchor = selectedDiffCommentAnchor && anchors.includes(selectedDiffCommentAnchor) ? selectedDiffCommentAnchor : anchors[0]
-		const currentRowIndex = Math.max(0, currentAnchor ? rows.indexOf(currentAnchor.renderLine) : 0)
-		const nextRow = rows[Math.max(0, Math.min(rows.length - 1, currentRowIndex + delta))]
-		if (nextRow === undefined) return
-		const nextAnchor = anchors.find((anchor) => anchor.renderLine === nextRow && anchor.side === currentAnchor?.side)
-			?? anchors.find((anchor) => anchor.renderLine === nextRow)
+		const nextAnchor = verticalDiffAnchor(anchors, currentAnchor ?? null, delta, diffPreferredSide)
 		if (!nextAnchor) return
 		if (options.preserveViewportRow) {
 			const scroll = diffScrollRef.current
@@ -1328,8 +1445,9 @@ export const App = () => {
 	}
 
 	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))
@@ -1340,6 +1458,7 @@ 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)
 		}
@@ -1516,16 +1635,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}`)
 			})
@@ -1560,6 +1670,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
@@ -1655,30 +1771,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 {
@@ -1686,8 +1787,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))
 			})
 	}
@@ -1801,6 +1901,7 @@ export const App = () => {
 		diffReady: selectedDiffState?._tag === "Ready",
 		effectiveDiffRenderView,
 		diffWrapMode,
+		diffWhitespaceMode,
 		readyDiffFileCount: readyDiffFiles.length,
 		diffFileIndex,
 		diffRangeActive: diffCommentRangeActive,
@@ -1843,6 +1944,7 @@ export const App = () => {
 			},
 			toggleDiffRenderView: () => setDiffRenderView((current) => current === "unified" ? "split" : "unified"),
 			toggleDiffWrapMode: () => setDiffWrapMode((current) => current === "none" ? "word" : "none"),
+			toggleDiffWhitespaceMode,
 			jumpDiffFile,
 			openSelectedDiffComment,
 			toggleDiffCommentRange,
@@ -1874,7 +1976,6 @@ export const App = () => {
 	}
 	const runCommandByIdRef = useRef(runCommandById)
 	runCommandByIdRef.current = runCommandById
-	useAppCommandRegistry(appCommands, runCommandByIdRef)
 	const dynamicPaletteCommands: readonly AppCommand[] = (() => {
 		if (!commandPaletteActive) return []
 		const repository = parseRepositoryInput(commandPalette.query)
@@ -1901,217 +2002,30 @@ export const App = () => {
 	const selectedCommandIndex = clampCommandIndex(commandPalette.selectedIndex, commandPaletteCommands)
 	const selectedCommand = commandPaletteCommands[selectedCommandIndex] ?? null
 
-	const noModalActive = activeModal._tag === "None"
-	const globalLayerActive = noModalActive
-		&& !diffFullView
-		&& !detailFullView
-		&& !filterMode
-	useScopedBindings({
-		when: true,
-		bindings: {
-			"ctrl+p": "command.open",
-			"meta+k": "command.open",
-		},
-	})
-
-	useScopedBindings({
-		when: closeModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			return: confirmClosePullRequest,
-		},
-	})
-
+	// === 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)) }
 	})
-	useScopedBindings({
-		when: mergeModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			return: () => {
-				if (availableMergeActions(mergeModal.info).length > 0) confirmMergeAction()
-			},
-			up: () => moveMergeSelection(-1),
-			k: () => moveMergeSelection(-1),
-			down: () => moveMergeSelection(1),
-			j: () => moveMergeSelection(1),
-		},
-	})
-
 	const scrollCommentThread = (delta: number) => setCommentThreadModal((current) => ({
 		...current,
 		scrollOffset: Math.max(0, current.scrollOffset + delta),
 	}))
-	useScopedBindings({
-		when: commentThreadModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			return: openDiffCommentModal,
-			a: openDiffCommentModal,
-			c: openDiffCommentModal,
-			up: () => scrollCommentThread(-1),
-			k: () => scrollCommentThread(-1),
-			down: () => scrollCommentThread(1),
-			j: () => scrollCommentThread(1),
-			pageup: () => scrollCommentThread(-halfPage),
-			"ctrl+u": () => scrollCommentThread(-halfPage),
-			pagedown: () => scrollCommentThread(halfPage),
-			"ctrl+d": () => scrollCommentThread(halfPage),
-			"ctrl+v": () => scrollCommentThread(halfPage),
-		},
-	})
-
 	const moveLabelSelection = (delta: -1 | 1) => setLabelModal((current) => {
 		const max = Math.max(0, filterLabels(labelModal.availableLabels, labelModal.query).length - 1)
 		return { ...current, selectedIndex: Math.max(0, Math.min(max, current.selectedIndex + delta)) }
 	})
-	useScopedBindings({
-		when: labelModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			return: toggleLabelAtIndex,
-			up: () => moveLabelSelection(-1),
-			k: () => moveLabelSelection(-1),
-			down: () => moveLabelSelection(1),
-			j: () => moveLabelSelection(1),
-		},
-	})
-
-	useScopedBindings({
-		when: themeModalActive,
-		bindings: {
-			escape: () => {
-				if (themeModal.filterMode) updateThemeQuery("", { filterMode: false })
-				else closeThemeModal(false)
-			},
-			"/": () => updateThemeQuery("", { filterMode: true }),
-			return: () => {
-				if (themeModal.filterMode && filterThemeDefinitions(themeModal.query).length === 0) return
-				closeThemeModal(true)
-			},
-			up: () => moveThemeSelection(-1),
-			down: () => moveThemeSelection(1),
-			k: () => { if (!themeModal.filterMode) moveThemeSelection(-1) },
-			j: () => { if (!themeModal.filterMode) moveThemeSelection(1) },
-		},
-	})
-
-	useScopedBindings({
-		when: openRepositoryModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			return: openRepositoryFromInput,
-		},
-	})
-
-	useScopedBindings({
-		when: commentModalActive,
-		bindings: {
-			escape: closeActiveModal,
-			"ctrl+s": submitDiffComment,
-			"ctrl+a": () => editComment(moveLineStart),
-			"ctrl+e": () => editComment(moveLineEnd),
-			"ctrl+b": () => editComment(editorMoveLeft),
-			"ctrl+f": () => editComment(editorMoveRight),
-			"ctrl+w": () => editComment(deleteWordBackward),
-			"ctrl+u": () => editComment(deleteToLineStart),
-			"ctrl+k": () => editComment(deleteToLineEnd),
-			"ctrl+d": () => editComment(editorDeleteForward),
-			"meta+b": () => editComment(moveWordBackward),
-			"meta+left": () => editComment(moveWordBackward),
-			"meta+f": () => editComment(moveWordForward),
-			"meta+right": () => editComment(moveWordForward),
-			"meta+backspace": () => editComment(deleteWordBackward),
-			"meta+delete": () => editComment(deleteWordForward),
-			backspace: () => editComment(editorBackspace),
-			delete: () => editComment(editorDeleteForward),
-			left: () => editComment(editorMoveLeft),
-			right: () => editComment(editorMoveRight),
-			up: () => editComment((state) => moveVertically(state, -1)),
-			down: () => editComment((state) => moveVertically(state, 1)),
-			home: () => editComment(moveLineStart),
-			end: () => editComment(moveLineEnd),
-			"shift+return": () => editComment((state) => insertText(state, "\n")),
-			return: submitDiffComment,
-		},
-	})
-
 	const moveCommandPaletteSelection = (delta: -1 | 1) => setCommandPalette((current) => {
 		const selectedIndex = clampCommandIndex(current.selectedIndex + delta, commandPaletteCommands)
 		return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
 	})
-	useScopedBindings({
-		when: commandPaletteActive,
-		bindings: {
-			escape: closeActiveModal,
-			"ctrl+c": closeActiveModal,
-			return: () => { if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true }) },
-			up: () => moveCommandPaletteSelection(-1),
-			down: () => moveCommandPaletteSelection(1),
-		},
-	})
-
-	useScopedBindings({
-		when: filterMode,
-		bindings: {
-			escape: () => { setFilterDraft(filterQuery); setFilterMode(false) },
-			return: () => { setFilterQuery(filterDraft); setFilterMode(false) },
-		},
-	})
-
-	useScopedBindings({
-		when: diffFullView && noModalActive,
-		bindings: {
-			escape: () => {
-				if (diffCommentRangeActive) setDiffCommentRangeStartIndex(null)
-				else runCommandById("diff.close")
-			},
-			return: openSelectedDiffComment,
-			a: "diff.add-comment",
-			v: "diff.toggle-range",
-			"shift+v": "diff.toggle-view",
-			w: "diff.toggle-wrap",
-			r: "diff.reload",
-			n: "diff.next-thread",
-			p: "diff.previous-thread",
-			pageup: () => moveDiffCommentAnchor(-halfPage, { preserveViewportRow: true }),
-			"ctrl+u": () => moveDiffCommentAnchor(-halfPage, { preserveViewportRow: true }),
-			pagedown: () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
-			"ctrl+d": () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
-			"ctrl+v": () => moveDiffCommentAnchor(halfPage, { preserveViewportRow: true }),
-			"shift+up": () => moveDiffCommentAnchor(-8),
-			"shift+k": () => moveDiffCommentAnchor(-8),
-			"meta+up": () => moveDiffCommentAnchor(-8),
-			"meta+k": () => moveDiffCommentAnchor(-8),
-			"shift+down": () => moveDiffCommentAnchor(8),
-			"shift+j": () => moveDiffCommentAnchor(8),
-			"meta+down": () => moveDiffCommentAnchor(8),
-			"meta+j": () => moveDiffCommentAnchor(8),
-			...countedVerticalBindings(
-				(count) => moveDiffCommentAnchor(-count),
-				(count) => moveDiffCommentAnchor(count),
-			),
-			up: () => moveDiffCommentAnchor(-1),
-			k: () => moveDiffCommentAnchor(-1),
-			down: () => moveDiffCommentAnchor(1),
-			j: () => moveDiffCommentAnchor(1),
-			left: () => selectDiffCommentSide("LEFT"),
-			h: () => selectDiffCommentSide("LEFT"),
-			right: () => selectDiffCommentSide("RIGHT"),
-			l: () => selectDiffCommentSide("RIGHT"),
-			"]": "diff.next-file",
-			"[": "diff.previous-file",
-			"g g": () => moveDiffCommentToBoundary("first"),
-			"shift+g": () => moveDiffCommentToBoundary("last"),
-			"z z": () => alignSelectedDiffCommentAnchor("center"),
-			"z t": () => alignSelectedDiffCommentAnchor("top"),
-			"z b": () => alignSelectedDiffCommentAnchor("bottom"),
-			o: "pull.open-browser",
-		},
+	const 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))
@@ -2120,26 +2034,6 @@ export const App = () => {
 		detailScrollRef.current?.scrollTo({ x: 0, y })
 		setDetailScrollOffset(y)
 	}
-	useScopedBindings({
-		when: detailFullView && noModalActive,
-		bindings: {
-			...scrollBindings(scrollDetailFullViewBy, halfPage, scrollDetailFullViewTo),
-			escape: "detail.close",
-			return: "detail.close",
-			t: "theme.open",
-			d: "diff.open",
-			x: "pull.close",
-			l: "pull.labels",
-			m: "pull.merge",
-			"shift+m": "pull.merge",
-			s: "pull.toggle-draft",
-			"shift+s": "pull.toggle-draft",
-			r: "pull.refresh",
-			o: "pull.open-browser",
-			y: "pull.copy-metadata",
-		},
-	})
-
 	const moveSelectedToPreviousGroup = () => setSelectedIndex((current) => {
 		if (visiblePullRequests.length === 0 || groupStarts.length === 0) return 0
 		const currentGroup = getCurrentGroupIndex(current)
@@ -2178,48 +2072,168 @@ export const App = () => {
 		if (visiblePullRequests.length === 0) return 0
 		return current <= 0 ? visiblePullRequests.length - 1 : current - 1
 	})
-	useScopedBindings({
-		when: globalLayerActive,
-		bindings: {
-			"/": "filter.open",
-			r: "pull.refresh",
-			t: "theme.open",
-			d: "diff.open",
-			l: "pull.labels",
-			m: "pull.merge",
-			"shift+m": "pull.merge",
-			x: "pull.close",
-			o: "pull.open-browser",
-			s: "pull.toggle-draft",
-			"shift+s": "pull.toggle-draft",
-			y: "pull.copy-metadata",
-			return: "detail.open",
-			tab: () => switchQueueMode(1),
-			"shift+tab": () => switchQueueMode(-1),
-			escape: () => { if (filterQuery.length > 0) runCommandByIdRef.current("filter.clear") },
-			home: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewTo(0) },
-			end: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewTo(Number.MAX_SAFE_INTEGER) },
-			pageup: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewBy(-halfPage) },
-			pagedown: () => { if (isWideLayout && selectedPullRequest) scrollDetailPreviewBy(halfPage) },
-			"[": moveSelectedToPreviousGroup,
-			"meta+up": moveSelectedToPreviousGroup,
-			"meta+k": moveSelectedToPreviousGroup,
-			"shift+k": moveSelectedToPreviousGroup,
-			"]": moveSelectedToNextGroup,
-			"meta+down": moveSelectedToNextGroup,
-			"meta+j": moveSelectedToNextGroup,
-			"shift+j": moveSelectedToNextGroup,
-			"ctrl+u": () => stepSelected(-halfPage),
-			"ctrl+d": () => stepSelected(halfPage),
-			...countedVerticalBindings(stepSelectedUp, stepSelectedDown),
-			up: stepSelectedUpWrap,
-			k: stepSelectedUpWrap,
-			down: stepSelectedDownWithLoadMore,
-			j: stepSelectedDownWithLoadMore,
-			"g g": () => setSelectedIndex(0),
-			"shift+g": () => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
+	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) {
@@ -2243,18 +2257,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)) {
@@ -2290,16 +2295,34 @@ export const App = () => {
 		}
 	})
 
+	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 fullscreenDetailHeaderHeight = getDetailHeaderHeight(selectedPullRequest, contentWidth, isWideLayout)
 	const fullscreenDetailBodyViewportHeight = Math.max(1, wideBodyHeight - fullscreenDetailHeaderHeight)
-	const fullscreenDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, fullscreenContentWidth)
+	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 detailJunctions = isSelectedPullRequestDetailLoading ? [] : getDetailJunctionRows({
+		pullRequest: selectedPullRequest,
+		paneWidth: rightPaneWidth,
+		showChecks: true,
+		contentWidth: rightContentWidth,
+		conversationItems: selectedConversationItems,
+		conversationStatus: selectedConversationStatus,
+		bodyScrollTop: detailPreviewScrollTop,
+		bodyViewportHeight: wideDetailBodyViewportHeight,
+	})
 
 	const prListProps = {
 		groups: visibleGroups,
@@ -2370,20 +2393,19 @@ 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}
@@ -2406,8 +2428,8 @@ export const App = () => {
 					{selectedPullRequest ? (
 						<>
 							<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} showChecks />
-							<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
-								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} loadingIndicator={loadingIndicator} themeId={themeId} />
+							<scrollbox 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>
 						</>
 					) : (
@@ -2434,7 +2456,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>
 							</>
 						) : (
@@ -2447,8 +2469,8 @@ export const App = () => {
 					{selectedPullRequest ? (
 						<>
 							<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} />
-							<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: fullscreenDetailBodyScrollable }}>
-								<DetailBody pullRequest={selectedPullRequest} contentWidth={fullscreenContentWidth} bodyLines={fullscreenBodyLines} bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT} loadingIndicator={loadingIndicator} themeId={themeId} />
+							<scrollbox 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>
 						</>
 					) : (
@@ -2457,7 +2479,7 @@ export const App = () => {
 				</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}>
@@ -2469,7 +2491,7 @@ export const App = () => {
 				</box>
 			)}
 
-			{isWideLayout && !detailFullView && !diffFullView && !isInitialLoading ? (
+			{isWideLayout && !detailFullView && !diffFullView ? (
 				<Divider width={contentWidth} junctionAt={dividerJunctionAt} junctionChar="┴" />
 			) : (
 				<Divider width={contentWidth} />
@@ -2573,6 +2595,8 @@ export const App = () => {
 					modalHeight={commandPaletteHeight}
 					offsetLeft={commandPaletteLeft}
 					offsetTop={commandPaletteTop}
+					onSelectCommandIndex={selectCommandPaletteIndex}
+					onRunCommand={runCommandPaletteCommand}
 				/>
 			) : null}
 		</box>