@kitlangton/ghui 0.1.19 → 0.1.20

package/src/App.tsx

@@ -1,37 +1,66 @@
-import type { DiffRenderable, ScrollBoxRenderable } from "@opentui/core"
-import { useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
+import type { DiffRenderable, PasteEvent, ScrollBoxRenderable } from "@opentui/core"
+import { RegistryContext, useAtom, useAtomRefresh, useAtomSet, useAtomValue } from "@effect/atom-react"
 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 { useEffect, useMemo, useRef, useState } from "react"
+import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry"
+import { useContext, useEffect, useMemo, useRef, useState } from "react"
+import { buildAppCommands } from "./appCommands.js"
+import type { AppCommand } from "./commands.js"
+import { clampCommandIndex, commandEnabled, filterCommands } from "./commands.js"
 import { config } from "./config.js"
-import { pullRequestQueueLabels, pullRequestQueueModes, type CreatePullRequestCommentInput, type DiffCommentSide, type LoadStatus, type PullRequestItem, type PullRequestLabel, type PullRequestMergeAction, type PullRequestQueueMode, type PullRequestReviewComment } from "./domain.js"
+import { type CreatePullRequestCommentInput, type DiffCommentSide, type ListPullRequestPageInput, type LoadStatus, 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"
 import { Observability } from "./observability.js"
+import { mergeCachedDetails } from "./pullRequestCache.js"
+import { activePullRequestViews, initialPullRequestView, nextView, parseRepositoryInput, type PullRequestView, viewCacheKey, viewEquals, viewLabel, viewMode, viewRepository } from "./pullRequestViews.js"
+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 { colors, filterThemeDefinitions, setActiveTheme, themeDefinitions, type ThemeId } from "./ui/colors.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, diffCommentAnchorKey, diffCommentLocationKey, getStackedDiffCommentAnchors, nearestDiffCommentAnchorIndex, PullRequestDiffState, pullRequestDiffKey, safeDiffFileIndex, scrollTopForVisibleLine, splitPatchFiles, stackedDiffFileAtLine, type DiffCommentAnchor, type DiffView, type DiffWrapMode, type StackedDiffCommentAnchor } from "./ui/diff.js"
-import { DetailBody, DetailHeader, DetailPlaceholder, DetailsPane, getDetailBodyHeight, getDetailHeaderHeight, getDetailJunctionRows, getDetailsPaneHeight, LoadingPane, type DetailPlaceholderContent } from "./ui/DetailsPane.js"
+import { 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 { FooterHints, initialRetryProgress, RetryProgress } from "./ui/FooterHints.js"
 import { Divider, fitCell, PlainLine, SeparatorColumn } from "./ui/primitives.js"
-import { CloseModal, CommentModal, CommentThreadModal, initialCloseModalState, initialCommentModalState, initialCommentThreadModalState, initialLabelModalState, initialMergeModalState, initialModal, initialThemeModalState, LabelModal, MergeModal, Modal, ThemeModal, type CloseModalState, type CommentModalState, type CommentThreadModalState, type LabelModalState, type MergeModalState, type ModalState, type ModalTag, type ThemeModalState } from "./ui/modals.js"
+import { 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"
 import { groupBy, reviewLabel } from "./ui/pullRequests.js"
 import { PullRequestDiffPane } from "./ui/PullRequestDiffPane.js"
-import { PullRequestList } from "./ui/PullRequestList.js"
+import { buildPullRequestListRows, pullRequestListRowIndex, PullRequestList } from "./ui/PullRequestList.js"
+import { editSingleLineInput, isSingleLineInputKey, printableKeyText, singleLineText } from "./ui/singleLineInput.js"
 
-const githubRuntime = Atom.runtime(GitHubService.layer.pipe(Layer.provideMerge(Observability.layer)))
-const initialThemeId = await Effect.runPromise(loadStoredThemeId)
+const parseOptionalPositiveInt = (value: string | undefined, fallback: number | null) => {
+	if (value === undefined) return fallback
+	const parsed = Number.parseInt(value, 10)
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
+}
 
+const mockPrCount = parseOptionalPositiveInt(process.env.GHUI_MOCK_PR_COUNT, null)
+const pullRequestPageSize = Math.min(100, parseOptionalPositiveInt(process.env.GHUI_PR_PAGE_SIZE, config.prPageSize) ?? config.prPageSize)
+const githubServiceLayer = mockPrCount !== null
+	? (await import("./services/MockGitHubService.js")).MockGitHubService.layer({ prCount: mockPrCount, repoCount: parseOptionalPositiveInt(process.env.GHUI_MOCK_REPO_COUNT, 4) ?? 4 })
+	: GitHubService.layerNoDeps
+
+const githubRuntime = Atom.runtime(
+	Layer.mergeAll(githubServiceLayer, Clipboard.layerNoDeps, BrowserOpener.layerNoDeps).pipe(
+		Layer.provide(CommandRunner.layer),
+		Layer.provideMerge(Observability.layer),
+	),
+)
+const initialThemeId = await Effect.runPromise(loadStoredThemeId)
 
 interface PullRequestLoad {
-	readonly queueMode: PullRequestQueueMode
+	readonly view: PullRequestView
 	readonly data: readonly PullRequestItem[]
 	readonly fetchedAt: Date | null
-	readonly detailsFetchedAt: Date | null
+	readonly endCursor: string | null
+	readonly hasNextPage: boolean
 }
 
 interface DetailPlaceholderInput {
@@ -66,87 +95,103 @@ interface AppliedDiffLineColorState {
 	readonly entries: readonly AppliedDiffLineColor[]
 }
 
+interface DetailHydration {
+	readonly token: symbol
+	notifyError: boolean
+}
+
 const PR_FETCH_RETRIES = 6
 const FOCUS_RETURN_REFRESH_MIN_MS = 60_000
 const FOCUSED_IDLE_REFRESH_MS = 5 * 60_000
 const AUTO_REFRESH_JITTER_MS = 10_000
 const DIFF_STICKY_HEADER_LINES = 2
 const LOADING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
-
-const mergeCachedDetails = (fresh: readonly PullRequestItem[], cached: readonly PullRequestItem[] | undefined) => {
-	if (!cached) return fresh
-	const cachedByUrl = new Map(cached.map((pullRequest) => [pullRequest.url, pullRequest]))
-	return fresh.map((pullRequest) => {
-		const cachedPullRequest = cachedByUrl.get(pullRequest.url)
-		if (!cachedPullRequest?.detailLoaded) return pullRequest
-		return {
-			...pullRequest,
-			body: cachedPullRequest.body,
-			labels: cachedPullRequest.labels,
-			additions: cachedPullRequest.additions,
-			deletions: cachedPullRequest.deletions,
-			changedFiles: cachedPullRequest.changedFiles,
-			checkStatus: cachedPullRequest.checkStatus,
-			checkSummary: cachedPullRequest.checkSummary,
-			checks: cachedPullRequest.checks,
-			detailLoaded: true,
-		} satisfies PullRequestItem
-	})
+const MAX_REPOSITORY_CACHE_ENTRIES = 8
+const LOAD_MORE_SELECTION_THRESHOLD = 8
+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)
+	return [...existing, ...mergedIncoming.filter((pullRequest) => !seen.has(pullRequest.url))]
 }
 
 const retryProgressAtom = Atom.make<RetryProgress>(initialRetryProgress).pipe(Atom.keepAlive)
-const queueModeAtom = Atom.make<PullRequestQueueMode>("authored").pipe(Atom.keepAlive)
-const queueLoadCacheAtom = Atom.make<Partial<Record<PullRequestQueueMode, PullRequestLoad>>>({}).pipe(Atom.keepAlive)
-const queueSelectionAtom = Atom.make<Partial<Record<PullRequestQueueMode, number>>>({}).pipe(Atom.keepAlive)
+const activeViewAtom = Atom.make<PullRequestView>(initialPullRequestView(config.repository)).pipe(Atom.keepAlive)
+const queueLoadCacheAtom = Atom.make<Partial<Record<string, PullRequestLoad>>>({}).pipe(Atom.keepAlive)
+const queueSelectionAtom = Atom.make<Partial<Record<string, number>>>({}).pipe(Atom.keepAlive)
+const trimQueueLoadCache = (cache: Partial<Record<string, PullRequestLoad>>) => {
+	const repositoryKeys = Object.keys(cache).filter((key) => key.startsWith("repository:"))
+	if (repositoryKeys.length <= MAX_REPOSITORY_CACHE_ENTRIES) return cache
+	const remove = new Set(repositoryKeys.slice(0, repositoryKeys.length - MAX_REPOSITORY_CACHE_ENTRIES))
+	return Object.fromEntries(Object.entries(cache).filter(([key]) => !remove.has(key))) as Partial<Record<string, PullRequestLoad>>
+}
 const pullRequestsAtom = githubRuntime.atom(
 	GitHubService.use((github) =>
 		Effect.gen(function*() {
-			const queueMode = yield* Atom.get(queueModeAtom)
+			const view = yield* Atom.get(activeViewAtom)
+			const queueMode = viewMode(view)
+			const repository = viewRepository(view)
+			const cacheKey = viewCacheKey(view)
 			yield* Atom.set(retryProgressAtom, initialRetryProgress)
-			const data = yield* github.listOpenPullRequests(queueMode).pipe(
-				Effect.tapError(() =>
-					Atom.update(retryProgressAtom, (current) => RetryProgress.Retrying({
-						attempt: Math.min(RetryProgress.$match(current, { Idle: () => 0, Retrying: ({ attempt }) => attempt }) + 1, PR_FETCH_RETRIES),
-						max: PR_FETCH_RETRIES,
-					}))
-				),
-				Effect.retry({ times: PR_FETCH_RETRIES, schedule: Schedule.exponential("300 millis", 2) }),
-				Effect.tapError(() => Atom.set(retryProgressAtom, initialRetryProgress)),
-			)
+			const page = yield* github.listOpenPullRequestPage({
+				mode: queueMode,
+				repository,
+				cursor: null,
+				pageSize: Math.min(pullRequestPageSize, config.prFetchLimit),
+			}).pipe(
+					Effect.tapError(() =>
+						Atom.update(retryProgressAtom, (current) => RetryProgress.Retrying({
+							attempt: Math.min(RetryProgress.$match(current, { Idle: () => 0, Retrying: ({ attempt }) => attempt }) + 1, PR_FETCH_RETRIES),
+							max: PR_FETCH_RETRIES,
+						}))
+					),
+					Effect.retry({ times: PR_FETCH_RETRIES, schedule: Schedule.exponential("300 millis", 2) }),
+					Effect.tapError(() => Atom.set(retryProgressAtom, initialRetryProgress)),
+				)
 
 			yield* Atom.set(retryProgressAtom, initialRetryProgress)
 			const cache = yield* Atom.get(queueLoadCacheAtom)
+			const existingLoad = cache[cacheKey]
+			const data = mergeCachedDetails(page.items, existingLoad?.data)
 			const load = {
-				queueMode,
-				data: mergeCachedDetails(data, cache[queueMode]?.data),
+				view,
+				data,
 				fetchedAt: new Date(),
-				detailsFetchedAt: null,
+				endCursor: page.endCursor,
+				hasNextPage: page.hasNextPage && data.length < config.prFetchLimit,
 			} satisfies PullRequestLoad
-			yield* Atom.set(queueLoadCacheAtom, { ...cache, [queueMode]: load })
+			const nextCache = { ...cache }
+			delete nextCache[cacheKey]
+			nextCache[cacheKey] = load
+			yield* Atom.set(queueLoadCacheAtom, trimQueueLoadCache(nextCache))
 			return load
 		})
 	),
 ).pipe(Atom.keepAlive)
-const selectedIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
-const noticeAtom = Atom.make<string | null>(null).pipe(Atom.keepAlive)
-const filterQueryAtom = Atom.make("").pipe(Atom.keepAlive)
-const filterDraftAtom = Atom.make("").pipe(Atom.keepAlive)
-const filterModeAtom = Atom.make(false).pipe(Atom.keepAlive)
-const pendingGAtom = Atom.make(false).pipe(Atom.keepAlive)
-const detailFullViewAtom = Atom.make(false).pipe(Atom.keepAlive)
-const detailScrollOffsetAtom = Atom.make(0).pipe(Atom.keepAlive)
-const diffFullViewAtom = Atom.make(false).pipe(Atom.keepAlive)
-const diffFileIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
-const diffScrollTopAtom = Atom.make(0).pipe(Atom.keepAlive)
-const diffRenderViewAtom = Atom.make<DiffView>("split").pipe(Atom.keepAlive)
-const diffWrapModeAtom = Atom.make<DiffWrapMode>("none").pipe(Atom.keepAlive)
-const diffCommentModeAtom = Atom.make(false).pipe(Atom.keepAlive)
-const diffCommentAnchorIndexAtom = Atom.make(0).pipe(Atom.keepAlive)
+const selectedIndexAtom = Atom.make(0)
+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)
+const diffFileIndexAtom = Atom.make(0)
+const diffScrollTopAtom = Atom.make(0)
+const diffRenderViewAtom = Atom.make<DiffView>("split")
+const diffWrapModeAtom = Atom.make<DiffWrapMode>("none")
+const diffCommentModeAtom = Atom.make(false)
+const diffCommentAnchorIndexAtom = Atom.make(0)
 const diffCommentThreadsAtom = Atom.make<Record<string, readonly PullRequestReviewComment[]>>({}).pipe(Atom.keepAlive)
 const diffCommentsLoadedAtom = Atom.make<Record<string, "loading" | "ready">>({}).pipe(Atom.keepAlive)
 const pullRequestDiffCacheAtom = Atom.make<Record<string, PullRequestDiffState>>({}).pipe(Atom.keepAlive)
 
-const activeModalAtom = Atom.make<Modal>(initialModal).pipe(Atom.keepAlive)
+const activeModalAtom = Atom.make<Modal>(initialModal)
 const themeIdAtom = Atom.make<ThemeId>(initialThemeId).pipe(Atom.keepAlive)
 const labelCacheAtom = Atom.make<Record<string, readonly PullRequestLabel[]>>({}).pipe(Atom.keepAlive)
 const pullRequestOverridesAtom = Atom.make<Record<string, PullRequestItem>>({}).pipe(Atom.keepAlive)
@@ -157,12 +202,110 @@ const usernameAtom = githubRuntime.atom(
 		: Effect.succeed(config.author.replace(/^@/, "")),
 ).pipe(Atom.keepAlive)
 
+const pullRequestLoadAtom = Atom.make((get) => {
+	const view = get(activeViewAtom)
+	const cacheKey = viewCacheKey(view)
+	const cache = get(queueLoadCacheAtom)
+	const result = get(pullRequestsAtom)
+	const resolved = AsyncResult.getOrElse(result, () => null)
+	return cache[cacheKey] ?? (resolved && viewCacheKey(resolved.view) === cacheKey ? resolved : null)
+})
+
+const isLoadingQueueModeAtom = Atom.make((get) => {
+	const cacheKey = viewCacheKey(get(activeViewAtom))
+	const resolved = AsyncResult.getOrElse(get(pullRequestsAtom), () => null)
+	return resolved !== null && viewCacheKey(resolved.view) !== cacheKey
+})
+
+const pullRequestStatusAtom = Atom.make((get): LoadStatus => {
+	const result = get(pullRequestsAtom)
+	const load = get(pullRequestLoadAtom)
+	const isLoadingQueue = get(isLoadingQueueModeAtom)
+	if ((result.waiting || isLoadingQueue) && load === null) return "loading"
+	return AsyncResult.isFailure(result) ? "error" : "ready"
+})
+
+const displayedPullRequestsAtom = Atom.make((get) => {
+	const load = get(pullRequestLoadAtom)
+	const overrides = get(pullRequestOverridesAtom)
+	const recentlyCompleted = get(recentlyCompletedPullRequestsAtom)
+	const source = load?.data ?? []
+	const seenUrls = new Set<string>()
+	const open = source.map((pullRequest) => {
+		seenUrls.add(pullRequest.url)
+		return recentlyCompleted[pullRequest.url] ?? overrides[pullRequest.url] ?? pullRequest
+	})
+	return [
+		...open,
+		...Object.values(recentlyCompleted).filter((pullRequest) => !seenUrls.has(pullRequest.url)),
+	]
+})
+
+const effectiveFilterQueryAtom = Atom.make((get) =>
+	(get(filterModeAtom) ? get(filterDraftAtom) : get(filterQueryAtom)).trim().toLowerCase(),
+)
+
+const filteredPullRequestsAtom = Atom.make((get) => {
+	const pullRequests = get(displayedPullRequestsAtom)
+	const query = get(effectiveFilterQueryAtom)
+	if (query.length === 0) return pullRequests
+	return pullRequests.flatMap((pullRequest) => {
+		const score = pullRequestFilterScore(pullRequest, query)
+		return score === null ? [] : [{ pullRequest, score }]
+	}).sort((left, right) =>
+		left.score - right.score || right.pullRequest.createdAt.getTime() - left.pullRequest.createdAt.getTime()
+	).map(({ pullRequest }) => pullRequest)
+})
+
+const visibleRepoOrderAtom = Atom.make((get) => {
+	const query = get(effectiveFilterQueryAtom)
+	if (query.length === 0) return [] as readonly string[]
+	return [...new Set(get(filteredPullRequestsAtom).map((pullRequest) => pullRequest.repository))]
+})
+
+const visibleGroupsAtom = Atom.make((get) =>
+	groupBy(get(filteredPullRequestsAtom), (pullRequest) => pullRequest.repository, get(visibleRepoOrderAtom)),
+)
+
+const visiblePullRequestsAtom = Atom.make((get) => get(visibleGroupsAtom).flatMap(([, pullRequests]) => pullRequests))
+
+const groupStartsAtom = Atom.make((get) => {
+	const groups = get(visibleGroupsAtom)
+	const starts: number[] = []
+	for (let index = 0; index < groups.length; index++) {
+		if (index === 0) starts.push(0)
+		else starts.push(starts[index - 1]! + groups[index - 1]![1].length)
+	}
+	return starts
+})
+
+const selectedPullRequestAtom = Atom.make((get) => {
+	const pullRequests = get(visiblePullRequestsAtom)
+	const index = get(selectedIndexAtom)
+	return pullRequests[index] ?? null
+})
+
+const selectedDiffKeyAtom = Atom.make((get) => {
+	const pullRequest = get(selectedPullRequestAtom)
+	return pullRequest ? pullRequestDiffKey(pullRequest) : null
+})
+
+const selectedDiffStateAtom = Atom.make((get) => {
+	const key = get(selectedDiffKeyAtom)
+	if (!key) return undefined
+	return get(pullRequestDiffCacheAtom)[key]
+})
+
 const listRepoLabelsAtom = githubRuntime.fn<string>()((repository) =>
 	GitHubService.use((github) => github.listRepoLabels(repository))
 )
-const listOpenPullRequestDetailsAtom = githubRuntime.fn<PullRequestQueueMode>()((queueMode) =>
-	GitHubService.use((github) => github.listOpenPullRequestDetails(queueMode))
+const listOpenPullRequestPageAtom = githubRuntime.fn<ListPullRequestPageInput>()((input) =>
+	GitHubService.use((github) => github.listOpenPullRequestPage(input))
 )
+const pullRequestDetailsAtom = Atom.family((key: string) => {
+	const { repository, number } = parsePullRequestDetailAtomKey(key)
+	return githubRuntime.atom(GitHubService.use((github) => github.getPullRequestDetails(repository, number)))
+})
 const addPullRequestLabelAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly label: string }>()((input) =>
 	GitHubService.use((github) => github.addPullRequestLabel(input.repository, input.number, input.label))
 )
@@ -172,9 +315,10 @@ const removePullRequestLabelAtom = githubRuntime.fn<{ readonly repository: strin
 const toggleDraftAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number; readonly isDraft: boolean }>()((input) =>
 	GitHubService.use((github) => github.toggleDraftStatus(input.repository, input.number, input.isDraft))
 )
-const getPullRequestDiffAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
-	GitHubService.use((github) => github.getPullRequestDiff(input.repository, input.number))
-)
+const pullRequestDiffAtom = Atom.family((key: string) => {
+	const { repository, number } = parsePullRequestDiffAtomKey(key)
+	return githubRuntime.atom(GitHubService.use((github) => github.getPullRequestDiff(repository, number)))
+})
 const listPullRequestCommentsAtom = githubRuntime.fn<{ readonly repository: string; readonly number: number }>()((input) =>
 	GitHubService.use((github) => github.listPullRequestComments(input.repository, input.number))
 )
@@ -188,12 +332,13 @@ const closePullRequestAtom = githubRuntime.fn<{ readonly repository: string; rea
 	GitHubService.use((github) => github.closePullRequest(input.repository, input.number))
 )
 const createPullRequestCommentAtom = githubRuntime.fn<CreatePullRequestCommentInput>()((input) => GitHubService.use((github) => github.createPullRequestComment(input)))
+const copyToClipboardAtom = githubRuntime.fn<string>()((text) => Clipboard.use((clipboard) => clipboard.copy(text)))
+const openInBrowserAtom = githubRuntime.fn<PullRequestItem>()((pullRequest) => BrowserOpener.use((browser) => browser.openPullRequest(pullRequest)))
 
 const centeredOffset = (outer: number, inner: number) => Math.floor((outer - inner) / 2)
 
-const deleteLastWord = (value: string) => value.replace(/\s*\S+\s*$/, "")
 
-const errorMessage = (error: unknown) => error instanceof Error ? error.message : String(error)
+const pasteText = (event: PasteEvent) => new TextDecoder().decode(event.bytes)
 
 const pullRequestFilterScore = (pullRequest: PullRequestItem, query: string) => {
 	const normalized = query.trim().toLowerCase()
@@ -210,91 +355,34 @@ const pullRequestFilterScore = (pullRequest: PullRequestItem, query: string) =>
 	return scores.length > 0 ? Math.min(...scores) : null
 }
 
-const clipboardCommands = (): readonly (readonly string[])[] => {
-	if (process.platform === "darwin") return [["pbcopy"]]
-	if (process.platform === "linux") {
-		return [
-			...(process.env.WAYLAND_DISPLAY ? [["wl-copy"]] : []),
-			["xclip", "-selection", "clipboard"],
-			["xsel", "--clipboard", "--input"],
-		]
-	}
-	return []
-}
-
-const copyToClipboard = async (text: string) => {
-	const commands = clipboardCommands()
-	let lastError = ""
-
-	for (const command of commands) {
-		let proc: Bun.Subprocess<"pipe", "ignore", "pipe">
-		try {
-			proc = Bun.spawn({
-				cmd: [...command],
-				stdin: "pipe",
-				stdout: "ignore",
-				stderr: "pipe",
-			})
-		} catch (error) {
-			lastError = errorMessage(error)
-			continue
-		}
-
-		proc.stdin.write(text)
-		proc.stdin.end()
-
-		const exitCode = await proc.exited
-		if (exitCode === 0) return
-
-		const stderr = await Bun.readableStreamToText(proc.stderr)
-		lastError = stderr.trim()
-	}
-
-	const installHint = process.platform === "linux" ? " Install wl-clipboard, xclip, or xsel." : ""
-	throw new Error(lastError || `Clipboard is not available.${installHint}`)
-}
-
-const openPullRequestInBrowser = async (pullRequest: PullRequestItem) => {
-	const proc = Bun.spawn({
-		cmd: ["gh", "pr", "view", String(pullRequest.number), "--repo", pullRequest.repository, "--web"],
-		stdout: "ignore",
-		stderr: "pipe",
-	})
-
-	const exitCode = await proc.exited
-	if (exitCode === 0) return
-
-	const stderr = await Bun.readableStreamToText(proc.stderr)
-	throw new Error(stderr.trim() || "Could not open PR in browser")
-}
-
-const copyPullRequestMetadata = async (pullRequest: PullRequestItem) => {
+const pullRequestMetadataText = (pullRequest: PullRequestItem) => {
 	const lines = [
 		pullRequest.title,
 		`${pullRequest.repository} #${pullRequest.number}`,
 		pullRequest.url,
 	]
-
 	const review = reviewLabel(pullRequest)
-	if (review) {
-		lines.push(`review: ${review}`)
-	}
-	if (pullRequest.checkSummary) {
-		lines.push(pullRequest.checkSummary)
-	}
+	if (review) lines.push(`review: ${review}`)
+	if (pullRequest.checkSummary) lines.push(pullRequest.checkSummary)
+	return lines.join("\n")
+}
 
-	await copyToClipboard(lines.join("\n"))
+const pullRequestDetailKey = (pullRequest: PullRequestItem) => `${pullRequest.url}:${pullRequest.headRefOid}`
+const pullRequestRevisionAtomKey = (pullRequest: PullRequestItem) => `${pullRequest.repository}\u0000${pullRequest.number}\u0000${pullRequest.headRefOid}`
+const parsePullRequestRevisionAtomKey = (key: string, label: string) => {
+	const [repository, number] = key.split("\u0000")
+	if (!repository || !number) throw new Error(`Invalid pull request ${label} key: ${key}`)
+	return { repository, number: Number.parseInt(number, 10) }
 }
+const pullRequestDetailAtomKey = pullRequestRevisionAtomKey
+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 nextQueueMode = (mode: PullRequestQueueMode, delta: 1 | -1) => {
-	const index = pullRequestQueueModes.indexOf(mode)
-	return pullRequestQueueModes[(index + delta + pullRequestQueueModes.length) % pullRequestQueueModes.length]!
-}
-
 const diffCommentThreadKey = (pullRequest: PullRequestItem, comment: Pick<PullRequestReviewComment, "path" | "side" | "line">) =>
 	`${pullRequestDiffKey(pullRequest)}:${diffCommentLocationKey(comment)}`
 
@@ -321,28 +409,11 @@ const originalDiffLineColor = (anchor: DiffCommentAnchor): DiffLineColorConfig =
 	return { gutter: colors.diff.lineNumberBg, content: colors.diff.contextBg }
 }
 
-const mixHexColor = (color: string, base: string, amount: number) => {
-	const parse = (hex: string) => {
-		const normalized = hex.replace(/^#/, "")
-		if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return null
-		return {
-			r: Number.parseInt(normalized.slice(0, 2), 16),
-			g: Number.parseInt(normalized.slice(2, 4), 16),
-			b: Number.parseInt(normalized.slice(4, 6), 16),
-		}
-	}
-	const left = parse(color)
-	const right = parse(base)
-	if (!left || !right) return color
-	const channel = (key: "r" | "g" | "b") => Math.round(left[key] * amount + right[key] * (1 - amount)).toString(16).padStart(2, "0")
-	return `#${channel("r")}${channel("g")}${channel("b")}`
-}
-
 const diffCommentGutterColor = (anchor: DiffCommentAnchor, kind: "selected" | "thread") => {
 	const accent = kind === "thread"
 		? colors.status.pending
 		: anchor.side === "RIGHT" ? colors.status.passing : colors.status.failing
-	return mixHexColor(accent, originalDiffLineColor(anchor).gutter, 0.45)
+	return mixHex(originalDiffLineColor(anchor).gutter, accent, 0.45)
 }
 
 const diffSideTargets = (diff: DiffRenderable, anchor: DiffCommentAnchor, view: DiffView) => {
@@ -404,11 +475,12 @@ const getDetailPlaceholderContent = ({
 export const App = () => {
 	const renderer = useRenderer()
 	const { width, height } = useTerminalDimensions()
+	const registry = useContext(RegistryContext)
 	const pullRequestResult = useAtomValue(pullRequestsAtom)
 	const refreshPullRequestsAtom = useAtomRefresh(pullRequestsAtom)
-	const [queueMode, setQueueMode] = useAtom(queueModeAtom)
-	const [queueLoadCache, setQueueLoadCache] = useAtom(queueLoadCacheAtom)
-	const [queueSelection, setQueueSelection] = useAtom(queueSelectionAtom)
+	const [activeView, setActiveView] = useAtom(activeViewAtom)
+	const setQueueLoadCache = useAtomSet(queueLoadCacheAtom)
+	const setQueueSelection = useAtomSet(queueSelectionAtom)
 	const [selectedIndex, setSelectedIndex] = useAtom(selectedIndexAtom)
 	const [notice, setNotice] = useAtom(noticeAtom)
 	const [filterQuery, setFilterQuery] = useAtom(filterQueryAtom)
@@ -416,7 +488,7 @@ export const App = () => {
 	const [filterMode, setFilterMode] = useAtom(filterModeAtom)
 	const [pendingG, setPendingG] = useAtom(pendingGAtom)
 	const [detailFullView, setDetailFullView] = useAtom(detailFullViewAtom)
-	const [_detailScrollOffset, setDetailScrollOffset] = useAtom(detailScrollOffsetAtom)
+	const setDetailScrollOffset = useAtomSet(detailScrollOffsetAtom)
 	const [diffFullView, setDiffFullView] = useAtom(diffFullViewAtom)
 	const [diffFileIndex, setDiffFileIndex] = useAtom(diffFileIndexAtom)
 	const [diffScrollTop, setDiffScrollTop] = useAtom(diffScrollTopAtom)
@@ -425,8 +497,8 @@ export const App = () => {
 	const [diffCommentMode, setDiffCommentMode] = useAtom(diffCommentModeAtom)
 	const [diffCommentAnchorIndex, setDiffCommentAnchorIndex] = useAtom(diffCommentAnchorIndexAtom)
 	const [diffCommentThreads, setDiffCommentThreads] = useAtom(diffCommentThreadsAtom)
-	const [diffCommentsLoaded, setDiffCommentsLoaded] = useAtom(diffCommentsLoadedAtom)
-	const [pullRequestDiffCache, setPullRequestDiffCache] = useAtom(pullRequestDiffCacheAtom)
+	const setDiffCommentsLoaded = useAtomSet(diffCommentsLoadedAtom)
+	const setPullRequestDiffCache = useAtomSet(pullRequestDiffCacheAtom)
 	const [activeModal, setActiveModal] = useAtom(activeModalAtom)
 	const [themeId, setThemeId] = useAtom(themeIdAtom)
 	const closeActiveModal = () => setActiveModal(initialModal)
@@ -436,12 +508,16 @@ export const App = () => {
 	const commentModalActive = Modal.$is("Comment")(activeModal)
 	const commentThreadModalActive = Modal.$is("CommentThread")(activeModal)
 	const themeModalActive = Modal.$is("Theme")(activeModal)
+	const commandPaletteActive = Modal.$is("CommandPalette")(activeModal)
+	const openRepositoryModalActive = Modal.$is("OpenRepository")(activeModal)
 	const labelModal: LabelModalState = labelModalActive ? activeModal : initialLabelModalState
 	const closeModal: CloseModalState = closeModalActive ? activeModal : initialCloseModalState
 	const mergeModal: MergeModalState = mergeModalActive ? activeModal : initialMergeModalState
 	const commentModal: CommentModalState = commentModalActive ? activeModal : initialCommentModalState
 	const commentThreadModal: CommentThreadModalState = commentThreadModalActive ? activeModal : initialCommentThreadModalState
 	const themeModal: ThemeModalState = themeModalActive ? activeModal : initialThemeModalState
+	const commandPalette: CommandPaletteState = commandPaletteActive ? activeModal : initialCommandPaletteState
+	const openRepositoryModal: OpenRepositoryModalState = openRepositoryModalActive ? activeModal : initialOpenRepositoryModalState
 	const makeModalSetter = <Tag extends Exclude<ModalTag, "None">>(tag: Tag) =>
 		(next: ModalState<Tag> | ((prev: ModalState<Tag>) => ModalState<Tag>)) => setActiveModal((current) => {
 			const ctor = Modal[tag] as unknown as (args: ModalState<Tag>) => Modal
@@ -458,31 +534,35 @@ export const App = () => {
 	const setCommentModal = makeModalSetter("Comment")
 	const setCommentThreadModal = makeModalSetter("CommentThread")
 	const setThemeModal = makeModalSetter("Theme")
+	const setCommandPalette = makeModalSetter("CommandPalette")
+	const setOpenRepositoryModal = makeModalSetter("OpenRepository")
 	setActiveTheme(themeId)
 	const themeIdRef = useRef(themeId)
 	const themeModalRef = useRef(themeModal)
 	themeIdRef.current = themeId
 	themeModalRef.current = themeModal
-	const [labelCache, setLabelCache] = useAtom(labelCacheAtom)
-	const [pullRequestOverrides, setPullRequestOverrides] = useAtom(pullRequestOverridesAtom)
-	const [recentlyCompletedPullRequests, setRecentlyCompletedPullRequests] = useAtom(recentlyCompletedPullRequestsAtom)
+	const setLabelCache = useAtomSet(labelCacheAtom)
+	const setPullRequestOverrides = useAtomSet(pullRequestOverridesAtom)
+	const setRecentlyCompletedPullRequests = useAtomSet(recentlyCompletedPullRequestsAtom)
 	const retryProgress = useAtomValue(retryProgressAtom)
 	const [loadingFrame, setLoadingFrame] = useState(0)
 	const [refreshCompletionMessage, setRefreshCompletionMessage] = useState<string | null>(null)
 	const [refreshStartedAt, setRefreshStartedAt] = useState<number | null>(null)
 	const [terminalFocused, setTerminalFocused] = useState(true)
+	const [loadingMoreKey, setLoadingMoreKey] = useState<string | null>(null)
 	const usernameResult = useAtomValue(usernameAtom)
 	const loadRepoLabels = useAtomSet(listRepoLabelsAtom, { mode: "promise" })
-	const loadPullRequestDetails = useAtomSet(listOpenPullRequestDetailsAtom, { mode: "promise" })
+	const loadPullRequestPage = useAtomSet(listOpenPullRequestPageAtom, { mode: "promise" })
 	const addPullRequestLabel = useAtomSet(addPullRequestLabelAtom, { mode: "promise" })
 	const removePullRequestLabel = useAtomSet(removePullRequestLabelAtom, { mode: "promise" })
 	const toggleDraftStatus = useAtomSet(toggleDraftAtom, { mode: "promise" })
-	const getPullRequestDiff = useAtomSet(getPullRequestDiffAtom, { mode: "promise" })
 	const listPullRequestComments = useAtomSet(listPullRequestCommentsAtom, { mode: "promise" })
 	const getPullRequestMergeInfo = useAtomSet(getPullRequestMergeInfoAtom, { mode: "promise" })
 	const mergePullRequest = useAtomSet(mergePullRequestAtom, { mode: "promise" })
 	const closePullRequest = useAtomSet(closePullRequestAtom, { mode: "promise" })
 	const createPullRequestComment = useAtomSet(createPullRequestCommentAtom, { mode: "promise" })
+	const copyToClipboard = useAtomSet(copyToClipboardAtom, { mode: "promise" })
+	const openInBrowser = useAtomSet(openInBrowserAtom, { mode: "promise" })
 	const terminalWidth = width ?? 100
 	const terminalHeight = height ?? 24
 	const contentWidth = Math.max(1, terminalWidth)
@@ -492,14 +572,15 @@ export const App = () => {
 	const leftPaneWidth = isWideLayout ? Math.max(44, Math.floor((contentWidth - splitGap) * 0.56)) : contentWidth
 	const rightPaneWidth = isWideLayout ? Math.max(28, contentWidth - leftPaneWidth - splitGap) : contentWidth
 	const dividerJunctionAt = Math.max(1, leftPaneWidth)
-	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 3) : Math.max(24, contentWidth - sectionPadding * 2)
+	const leftContentWidth = isWideLayout ? Math.max(24, leftPaneWidth - 2) : Math.max(24, contentWidth - sectionPadding * 2)
 	const rightContentWidth = isWideLayout ? Math.max(24, rightPaneWidth - sectionPadding * 2) : Math.max(24, contentWidth - sectionPadding * 2)
-	const wideDetailLines = Math.max(8, terminalHeight - 8) // fill available vertical space
+	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 detailHydrationRef = useRef<number | null>(null)
+	const detailPrefetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+	const detailHydrationRef = useRef(new Map<string, DetailHydration>())
 	const refreshGenerationRef = useRef(0)
 	const didMountQueueModeRef = useRef(false)
 	const lastPullRequestRefreshAtRef = useRef(0)
@@ -509,7 +590,9 @@ export const App = () => {
 	const refreshPullRequestsRef = useRef<(message?: string) => void>(() => {})
 	const maybeRefreshPullRequestsRef = useRef<(minimumAgeMs: number) => void>(() => {})
 	const detailScrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const detailPreviewScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const diffScrollRef = useRef<ScrollBoxRenderable | null>(null)
+	const prListScrollRef = useRef<ScrollBoxRenderable | null>(null)
 	const diffRenderableRefs = useRef(new Map<number, DiffRenderable>())
 	const diffCommentLineColorsRef = useRef<AppliedDiffLineColorState>({ contextKey: null, entries: [] })
 	const suppressNextDiffCommentScrollRef = useRef(false)
@@ -530,6 +613,8 @@ export const App = () => {
 	}, [renderer, themeId])
 
 	useEffect(() => () => {
+		refreshGenerationRef.current += 1
+		detailHydrationRef.current.clear()
 		if (noticeTimeoutRef.current !== null) {
 			clearTimeout(noticeTimeoutRef.current)
 		}
@@ -539,100 +624,83 @@ export const App = () => {
 		if (diffPrefetchTimeoutRef.current !== null) {
 			clearTimeout(diffPrefetchTimeoutRef.current)
 		}
+		if (detailPrefetchTimeoutRef.current !== null) {
+			clearTimeout(detailPrefetchTimeoutRef.current)
+		}
 	}, [])
 
-	const resolvedPullRequestLoad = AsyncResult.getOrElse(pullRequestResult, () => null)
-	const pullRequestLoad = queueLoadCache[queueMode] ?? (resolvedPullRequestLoad?.queueMode === queueMode ? resolvedPullRequestLoad : null)
-	const isLoadingQueueMode = resolvedPullRequestLoad !== null && resolvedPullRequestLoad.queueMode !== queueMode
-	const pullRequests = useMemo(() => {
-		const source = pullRequestLoad?.data ?? []
-		const seenUrls = new Set<string>()
-		const openPullRequests = source.map((pullRequest) => {
-			seenUrls.add(pullRequest.url)
-			return recentlyCompletedPullRequests[pullRequest.url] ?? pullRequestOverrides[pullRequest.url] ?? pullRequest
-		})
-
-		return [
-			...openPullRequests,
-			...Object.values(recentlyCompletedPullRequests).filter((pullRequest) => !seenUrls.has(pullRequest.url)),
-		]
-	}, [pullRequestLoad?.data, pullRequestOverrides, recentlyCompletedPullRequests])
-	const pullRequestStatus: LoadStatus = (pullRequestResult.waiting || isLoadingQueueMode) && pullRequestLoad === null
-		? "loading"
-		: AsyncResult.isFailure(pullRequestResult)
-			? "error"
-			: "ready"
+	const pullRequestLoad = useAtomValue(pullRequestLoadAtom)
+	const pullRequests = useAtomValue(displayedPullRequestsAtom)
+	const pullRequestStatus = useAtomValue(pullRequestStatusAtom)
 	const isInitialLoading = 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
 
-	const effectiveFilterQuery = (filterMode ? filterDraft : filterQuery).trim().toLowerCase()
 	const visibleFilterText = filterMode ? filterDraft : filterQuery
 
-	const filteredPullRequests = useMemo(() => {
-		if (effectiveFilterQuery.length === 0) return pullRequests
-		return pullRequests.flatMap((pullRequest) => {
-			const score = pullRequestFilterScore(pullRequest, effectiveFilterQuery)
-			return score === null ? [] : [{ pullRequest, score }]
-		}).sort((left, right) =>
-			left.score - right.score || right.pullRequest.createdAt.getTime() - left.pullRequest.createdAt.getTime()
-		).map(({ pullRequest }) => pullRequest)
-	}, [pullRequests, effectiveFilterQuery])
-
-	const visibleRepoOrder = useMemo(() => effectiveFilterQuery.length > 0
-		? [...new Set(filteredPullRequests.map((pullRequest) => pullRequest.repository))]
-		: [], [filteredPullRequests, effectiveFilterQuery.length])
-	const visibleGroups = useMemo(
-		() => groupBy(filteredPullRequests, (pullRequest) => pullRequest.repository, visibleRepoOrder),
-		[filteredPullRequests, visibleRepoOrder],
-	)
-	const visiblePullRequests = useMemo(() => visibleGroups.flatMap(([, pullRequests]) => pullRequests), [visibleGroups])
-	const selectedPullRequest = visiblePullRequests[selectedIndex] ?? null
-	const selectedDiffState = selectedPullRequest ? pullRequestDiffCache[pullRequestDiffKey(selectedPullRequest)] : undefined
+	const visibleGroups = useAtomValue(visibleGroupsAtom)
+	const visiblePullRequests = useAtomValue(visiblePullRequestsAtom)
+	const selectedPullRequest = useAtomValue(selectedPullRequestAtom)
+	const selectedRepository = viewRepository(activeView)
+	const activeViews = activePullRequestViews(activeView)
+	const currentQueueCacheKey = viewCacheKey(activeView)
+	const loadedPullRequestCount = pullRequestLoad?.data.length ?? 0
+	const hasMorePullRequests = Boolean(pullRequestLoad?.hasNextPage && loadedPullRequestCount < config.prFetchLimit)
+	const isLoadingMorePullRequests = loadingMoreKey === currentQueueCacheKey
+	const pullRequestListRows = useMemo(() => buildPullRequestListRows({
+		groups: visibleGroups,
+		status: pullRequestStatus,
+		error: pullRequestError,
+		filterText: visibleFilterText,
+		showFilterBar: filterMode || filterQuery.length > 0,
+		loadedCount: loadedPullRequestCount,
+		hasMore: hasMorePullRequests,
+		isLoadingMore: isLoadingMorePullRequests,
+	}), [visibleGroups, pullRequestStatus, pullRequestError, visibleFilterText, filterMode, filterQuery, loadedPullRequestCount, hasMorePullRequests, isLoadingMorePullRequests])
+	const selectedPullRequestRowIndex = pullRequestListRowIndex(pullRequestListRows, selectedPullRequest?.url ?? null)
+	const selectedDiffKey = useAtomValue(selectedDiffKeyAtom)
+	const selectedDiffState = useAtomValue(selectedDiffStateAtom)
 	const effectiveDiffRenderView = contentWidth >= 100 ? diffRenderView : "unified"
 	const readyDiffFiles = selectedDiffState?._tag === "Ready" ? selectedDiffState.files : []
 	const stackedDiffFiles = useMemo(() => buildStackedDiffFiles(readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth), [readyDiffFiles, effectiveDiffRenderView, diffWrapMode, contentWidth])
-	const selectedDiffKey = selectedPullRequest ? pullRequestDiffKey(selectedPullRequest) : null
 	const 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}:${diffCommentAnchorKey(selectedDiffCommentAnchor)}` : null
+	const selectedDiffCommentThreadKey = selectedDiffKey && selectedDiffCommentAnchor ? `${selectedDiffKey}:${diffCommentLocationKey(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 groupStarts = useMemo(() => visibleGroups.reduce<Array<number>>((starts, [, pullRequests], index) => {
-		if (index === 0) {
-			starts.push(0)
-			return starts
-		}
-		starts.push(starts[index - 1]! + visibleGroups[index - 1]![1].length)
-		return starts
-	}, []), [visibleGroups])
+	const groupStarts = useAtomValue(groupStartsAtom)
 	const getCurrentGroupIndex = (current: number) => {
-		for (let index = groupStarts.length - 1; index >= 0; index--) {
-			if (groupStarts[index]! <= current) return index
-		}
-		return 0
+		if (groupStarts.length === 0) return 0
+		let low = 0
+		let high = groupStarts.length - 1
+		while (low < high) {
+			const mid = (low + high + 1) >>> 1
+			if (groupStarts[mid]! <= current) low = mid
+			else high = mid - 1
+		}
+		return low
 	}
 	const summaryRight = pullRequestLoad?.fetchedAt
 		? `updated ${formatShortDate(pullRequestLoad.fetchedAt)} ${formatTimestamp(pullRequestLoad.fetchedAt)}`
 		: pullRequestStatus === "loading"
 			? "loading pull requests..."
 			: ""
-	const headerLeft = username ? `GHUI  ${username}  ${pullRequestQueueLabels[queueMode]}` : `GHUI  ${pullRequestQueueLabels[queueMode]}`
+	const headerLeft = username ? `GHUI  ${username}  ${viewLabel(activeView)}` : `GHUI  ${viewLabel(activeView)}`
 	const headerLine = `${fitCell(headerLeft, Math.max(0, headerFooterWidth - summaryRight.length))}${summaryRight}`
 	const footerNotice = notice ? fitCell(notice, headerFooterWidth) : null
 	const selectPullRequestByUrl = (url: string) => {
 		const index = visiblePullRequests.findIndex((pullRequest) => pullRequest.url === url)
 		if (index >= 0) {
 			setSelectedIndex(index)
-			setQueueSelection((current) => ({ ...current, [queueMode]: index }))
+			setQueueSelection((current) => ({ ...current, [currentQueueCacheKey]: index }))
 		}
 	}
 	const updatePullRequest = (url: string, transform: (pullRequest: PullRequestItem) => PullRequestItem) => {
@@ -642,6 +710,9 @@ export const App = () => {
 	}
 	const refreshPullRequests = (message?: string) => {
 		refreshGenerationRef.current += 1
+		detailHydrationRef.current.clear()
+		if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
+		setLoadingMoreKey(null)
 		setPullRequestOverrides({})
 		if (message) {
 			setNotice(null)
@@ -651,15 +722,16 @@ export const App = () => {
 		refreshPullRequestsAtom()
 	}
 	refreshPullRequestsRef.current = refreshPullRequests
-	const switchQueueMode = (delta: 1 | -1) => {
-		const mode = nextQueueMode(queueMode, delta)
-		if (mode === queueMode) return
+	const switchViewTo = (view: PullRequestView) => {
+		if (viewEquals(view, activeView)) return
 		refreshGenerationRef.current += 1
-		setQueueSelection((current) => ({ ...current, [queueMode]: selectedIndex }))
-		setQueueMode(mode)
-		setSelectedIndex(queueSelection[mode] ?? 0)
+		setQueueSelection((current) => ({ ...current, [currentQueueCacheKey]: selectedIndex }))
+		setActiveView(view)
+		setSelectedIndex(registry.get(queueSelectionAtom)[viewCacheKey(view)] ?? 0)
 		setRecentlyCompletedPullRequests({})
-		detailHydrationRef.current = null
+		detailHydrationRef.current.clear()
+		if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
+		setLoadingMoreKey(null)
 		setDetailFullView(false)
 		setDiffFullView(false)
 		setDiffCommentMode(false)
@@ -668,6 +740,82 @@ export const App = () => {
 		setRefreshCompletionMessage(null)
 		setRefreshStartedAt(null)
 	}
+	const switchQueueMode = (delta: 1 | -1) => {
+		switchViewTo(nextView(activeView, activeViews, delta))
+	}
+	const loadMorePullRequests = () => {
+		if (!pullRequestLoad || !hasMorePullRequests || isLoadingMorePullRequests || !pullRequestLoad.endCursor) return false
+		const remaining = config.prFetchLimit - pullRequestLoad.data.length
+		if (remaining <= 0) return false
+		const cacheKey = currentQueueCacheKey
+		const generation = refreshGenerationRef.current
+		setLoadingMoreKey(cacheKey)
+		void loadPullRequestPage({
+			mode: viewMode(activeView),
+			repository: selectedRepository,
+			cursor: pullRequestLoad.endCursor,
+			pageSize: Math.min(pullRequestPageSize, remaining),
+		}).then((page) => {
+			if (generation !== refreshGenerationRef.current) return
+			setQueueLoadCache((current) => {
+				const load = current[cacheKey]
+				if (!load) return current
+				const data = appendPullRequestPage(load.data, page.items)
+				return {
+					...current,
+					[cacheKey]: {
+						...load,
+						data,
+						endCursor: page.endCursor,
+						hasNextPage: page.hasNextPage && data.length < config.prFetchLimit,
+					},
+				}
+			})
+		}).catch((error) => {
+			flashNotice(errorMessage(error))
+		}).finally(() => {
+			setLoadingMoreKey((current) => current === cacheKey ? null : current)
+		})
+		return true
+	}
+	const applyPullRequestDetail = (detail: PullRequestItem) => {
+		setQueueLoadCache((current) => {
+			const next = { ...current }
+			let changed = false
+			for (const [cacheKey, load] of Object.entries(current)) {
+				if (!load) continue
+				const index = load.data.findIndex((pullRequest) => pullRequest.url === detail.url)
+				if (index < 0) continue
+				const data = [...load.data]
+				data[index] = detail
+				changed = true
+				next[cacheKey] = { ...load, data }
+			}
+			return changed ? next : current
+		})
+	}
+	const hydratePullRequestDetails = (pullRequest: PullRequestItem, notifyError: boolean) => {
+		if (pullRequest.state !== "open" || pullRequest.detailLoaded) return false
+		const detailKey = pullRequestDetailKey(pullRequest)
+		const existing = detailHydrationRef.current.get(detailKey)
+		if (existing) {
+			if (notifyError) existing.notifyError = true
+			return false
+		}
+		if (!notifyError && detailHydrationRef.current.size >= DETAIL_PREFETCH_CONCURRENCY) return false
+		const entry: DetailHydration = { token: Symbol(detailKey), notifyError }
+		detailHydrationRef.current.set(detailKey, entry)
+		const generation = refreshGenerationRef.current
+		const atom = pullRequestDetailsAtom(pullRequestDetailAtomKey(pullRequest))
+		void Effect.runPromise(AtomRegistry.getResult(registry, atom, { suspendOnWaiting: true })).then((detail) => {
+			if (generation === refreshGenerationRef.current && detailHydrationRef.current.get(detailKey) === entry) applyPullRequestDetail(detail)
+		}).catch((error) => {
+			if (entry.notifyError && generation === refreshGenerationRef.current && detailHydrationRef.current.get(detailKey) === entry) flashNotice(errorMessage(error))
+		}).finally(() => {
+			if (detailHydrationRef.current.get(detailKey) === entry) detailHydrationRef.current.delete(detailKey)
+		})
+		return true
+	}
 	maybeRefreshPullRequestsRef.current = (minimumAgeMs) => {
 		if (!terminalFocusedRef.current || pullRequestStatusRef.current === "loading") return
 		const lastRefreshAt = lastPullRequestRefreshAtRef.current
@@ -687,14 +835,14 @@ export const App = () => {
 			didMountQueueModeRef.current = true
 			return
 		}
-		if (queueLoadCache[queueMode]) return
+		if (registry.get(queueLoadCacheAtom)[currentQueueCacheKey]) return
 		refreshPullRequestsAtom()
-	}, [queueMode, queueLoadCache, refreshPullRequestsAtom])
+	}, [currentQueueCacheKey, refreshPullRequestsAtom, registry])
 
 	useEffect(() => {
 		if (!refreshCompletionMessage || refreshStartedAt === null) return
 		const fetchedAt = pullRequestLoad?.fetchedAt?.getTime()
-		const isHydratingDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)
+		const isHydratingDetails = pullRequestStatus === "ready" && selectedPullRequest?.state === "open" && !selectedPullRequest.detailLoaded
 		if (pullRequestStatus === "ready" && fetchedAt !== undefined && fetchedAt !== refreshStartedAt && !isHydratingDetails) {
 			flashNotice(`✓ ${refreshCompletionMessage}`)
 			setRefreshCompletionMessage(null)
@@ -747,13 +895,29 @@ export const App = () => {
 	}, [visiblePullRequests.length])
 
 	useEffect(() => {
-		setQueueSelection((current) => current[queueMode] === selectedIndex ? current : { ...current, [queueMode]: selectedIndex })
-	}, [queueMode, selectedIndex])
+		setQueueSelection((current) => current[currentQueueCacheKey] === selectedIndex ? current : { ...current, [currentQueueCacheKey]: selectedIndex })
+	}, [currentQueueCacheKey, selectedIndex])
+
+	useEffect(() => {
+		if (filterMode || filterQuery.length > 0 || visiblePullRequests.length === 0) return
+		const thresholdIndex = Math.max(0, visiblePullRequests.length - LOAD_MORE_SELECTION_THRESHOLD)
+		if (selectedIndex >= thresholdIndex) loadMorePullRequests()
+	}, [selectedIndex, visiblePullRequests.length, filterMode, filterQuery, hasMorePullRequests, isLoadingMorePullRequests, currentQueueCacheKey])
+
+	useEffect(() => {
+		const scroll = prListScrollRef.current
+		if (!scroll || selectedPullRequestRowIndex === null) return
+		const viewportHeight = scroll.viewport.height
+		if (viewportHeight <= 0) return
+		const nextTop = scrollTopForVisibleLine(scroll.scrollTop, viewportHeight, selectedPullRequestRowIndex, 2)
+		if (nextTop !== scroll.scrollTop) scroll.scrollTo({ x: 0, y: nextTop })
+	}, [selectedPullRequestRowIndex])
 
 	useEffect(() => {
 		setDiffFileIndex(0)
 		setDiffScrollTop(0)
 		setDiffCommentAnchorIndex(0)
+		detailPreviewScrollRef.current?.scrollTo({ x: 0, y: 0 })
 	}, [selectedIndex])
 
 	useEffect(() => {
@@ -793,7 +957,7 @@ export const App = () => {
 
 		if (selectedDiffKey) {
 			for (const anchor of diffCommentAnchors) {
-				if ((diffCommentThreads[`${selectedDiffKey}:${diffCommentAnchorKey(anchor)}`]?.length ?? 0) > 0) {
+				if ((diffCommentThreads[`${selectedDiffKey}:${diffCommentLocationKey(anchor)}`]?.length ?? 0) > 0) {
 					applyLineColor(anchor, diffCommentGutterColor(anchor, "thread"))
 				}
 			}
@@ -810,7 +974,7 @@ export const App = () => {
 		}
 		diffCommentLineColorsRef.current = { contextKey: diffLineColorContextKey, entries: nextEntries }
 	}, [diffCommentMode, selectedDiffCommentAnchor?.renderLine, selectedDiffCommentAnchor?.localRenderLine, selectedDiffCommentAnchor?.side, selectedDiffCommentAnchor?.fileIndex, diffLineColorContextKey, effectiveDiffRenderView, diffCommentAnchors, diffCommentThreads])
-	const isHydratingPullRequestDetails = pullRequestStatus === "ready" && pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)
+	const 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]!
@@ -824,31 +988,30 @@ export const App = () => {
 	}, [hasActiveLoadingIndicator])
 
 	useEffect(() => {
-		const fetchedAt = pullRequestLoad?.fetchedAt?.getTime()
-		if (pullRequestStatus !== "ready" || fetchedAt === undefined) return
-		if (detailHydrationRef.current === fetchedAt || pullRequestLoad?.detailsFetchedAt?.getTime() === fetchedAt) return
-		if (!pullRequests.some((pullRequest) => pullRequest.state === "open" && !pullRequest.detailLoaded)) return
-		detailHydrationRef.current = fetchedAt
-		const generation = refreshGenerationRef.current
-		void loadPullRequestDetails(queueMode).then((details) => {
-			if (generation !== refreshGenerationRef.current) return
-			setQueueLoadCache((current) => {
-				const load = current[queueMode]
-				if (!load) return current
-				const detailsByUrl = new Map(details.map((detail) => [detail.url, detail]))
-				return {
-					...current,
-					[queueMode]: {
-						...load,
-						data: load.data.map((pullRequest) => detailsByUrl.get(pullRequest.url) ?? pullRequest),
-						detailsFetchedAt: load.fetchedAt,
-					},
+		if (pullRequestStatus !== "ready" || !selectedPullRequest) return
+		hydratePullRequestDetails(selectedPullRequest, true)
+	}, [pullRequestStatus, selectedPullRequest?.url, selectedPullRequest?.headRefOid, selectedPullRequest?.state, selectedPullRequest?.detailLoaded, selectedPullRequest?.repository, selectedPullRequest?.number])
+
+	useEffect(() => {
+		if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
+		if (pullRequestStatus !== "ready" || visiblePullRequests.length === 0) return
+		detailPrefetchTimeoutRef.current = globalThis.setTimeout(() => {
+			detailPrefetchTimeoutRef.current = null
+			let started = 0
+			for (let distance = 1; distance <= Math.max(DETAIL_PREFETCH_AHEAD, DETAIL_PREFETCH_BEHIND); distance++) {
+				const offsets = [distance <= DETAIL_PREFETCH_AHEAD ? distance : null, distance <= DETAIL_PREFETCH_BEHIND ? -distance : null]
+				for (const offset of offsets) {
+					if (offset === null) continue
+					if (started >= DETAIL_PREFETCH_CONCURRENCY) return
+					const pullRequest = visiblePullRequests[selectedIndex + offset]
+					if (pullRequest && hydratePullRequestDetails(pullRequest, false)) started += 1
 				}
-			})
-		}).catch((error) => {
-			flashNotice(errorMessage(error))
-		})
-	}, [queueMode, pullRequestStatus, pullRequestLoad?.fetchedAt, pullRequests.length])
+			}
+		}, DETAIL_PREFETCH_DELAY_MS)
+		return () => {
+			if (detailPrefetchTimeoutRef.current !== null) clearTimeout(detailPrefetchTimeoutRef.current)
+		}
+	}, [pullRequestStatus, currentQueueCacheKey, selectedIndex, visiblePullRequests])
 
 	const detailPlaceholderContent = getDetailPlaceholderContent({
 		status: pullRequestStatus,
@@ -857,13 +1020,18 @@ export const App = () => {
 		visibleCount: visiblePullRequests.length,
 		filterText: visibleFilterText,
 	})
-	const detailJunctions = getDetailJunctionRows(selectedPullRequest, rightPaneWidth, true)
+	const isSelectedPullRequestDetailLoading = selectedPullRequest !== null && !selectedPullRequest.detailLoaded
+	const detailLoadingContent: DetailPlaceholderContent = selectedPullRequest ? {
+		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) => {
 		const key = pullRequestDiffKey(pullRequest)
-		const previousLoadState = diffCommentsLoaded[key]
+		const previousLoadState = registry.get(diffCommentsLoadedAtom)[key]
 		if (!force && previousLoadState) return
 		setDiffCommentsLoaded((current) => ({ ...current, [key]: "loading" }))
 		void listPullRequestComments({ repository: pullRequest.repository, number: pullRequest.number })
@@ -906,12 +1074,14 @@ export const App = () => {
 		const force = options.force ?? false
 		const includeComments = options.includeComments ?? false
 		const key = pullRequestDiffKey(pullRequest)
-		const existing = pullRequestDiffCache[key]
+		const existing = registry.get(pullRequestDiffCacheAtom)[key]
 		if (includeComments) loadPullRequestComments(pullRequest, force)
 		if (!force && existing && (existing._tag === "Ready" || existing._tag === "Loading")) return
 
 		setPullRequestDiffCache((current) => ({ ...current, [key]: PullRequestDiffState.Loading() }))
-		void getPullRequestDiff({ repository: pullRequest.repository, number: pullRequest.number })
+		const atom = pullRequestDiffAtom(pullRequestDiffAtomKey(pullRequest))
+		if (force) registry.refresh(atom)
+		void Effect.runPromise(AtomRegistry.getResult(registry, atom, { suspendOnWaiting: true }))
 			.then((patch) => {
 				setPullRequestDiffCache((current) => ({
 					...current,
@@ -985,6 +1155,8 @@ export const App = () => {
 		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) {
@@ -1161,14 +1333,14 @@ export const App = () => {
 	}
 
 	const openSelectedPullRequestInBrowser = (pullRequest: PullRequestItem) => {
-		void openPullRequestInBrowser(pullRequest)
+		void openInBrowser(pullRequest)
 			.then(() => flashNotice(`Opened #${pullRequest.number} in browser`))
 			.catch((error) => flashNotice(errorMessage(error)))
 	}
 
 	const copySelectedPullRequestMetadata = () => {
 		if (!selectedPullRequest) return
-		void copyPullRequestMetadata(selectedPullRequest)
+		void copyToClipboard(pullRequestMetadataText(selectedPullRequest))
 			.then(() => flashNotice(`Copied #${selectedPullRequest.number} metadata`))
 			.catch((error) => flashNotice(errorMessage(error)))
 	}
@@ -1291,7 +1463,7 @@ export const App = () => {
 	const openLabelModal = () => {
 		if (!selectedPullRequest) return
 		const repository = selectedPullRequest.repository
-		const cachedLabels = labelCache[repository]
+		const cachedLabels = registry.get(labelCacheAtom)[repository]
 		if (cachedLabels) {
 			setLabelModal({
 				repository,
@@ -1390,9 +1562,7 @@ export const App = () => {
 
 	const toggleLabelAtIndex = () => {
 		if (!selectedPullRequest) return
-		const filtered = labelModal.availableLabels.filter((label) =>
-			labelModal.query.length === 0 || label.name.toLowerCase().includes(labelModal.query.toLowerCase()),
-		)
+		const filtered = filterLabels(labelModal.availableLabels, labelModal.query)
 		const label = filtered[labelModal.selectedIndex]
 		if (!label) return
 
@@ -1424,7 +1594,214 @@ export const App = () => {
 		}
 	}
 
+	const openCommandPalette = () => {
+		setCommandPalette(initialCommandPaletteState)
+	}
+	const openRepositoryPicker = () => {
+		setOpenRepositoryModal({ query: selectedRepository ?? "", error: null })
+	}
+	const openRepositoryFromInput = () => {
+		const repository = parseRepositoryInput(openRepositoryModal.query)
+		if (!repository) {
+			setOpenRepositoryModal((current) => ({ ...current, error: "Enter a repository as owner/name or a GitHub URL." }))
+			return
+		}
+		closeActiveModal()
+		switchViewTo({ _tag: "Repository", repository })
+		flashNotice(`Opened ${repository}`)
+	}
+	const insertPastedText = (text: string) => {
+		if (text.length === 0) return false
+		if (commandPaletteActive) {
+			setCommandPalette((current) => ({ ...current, query: current.query + singleLineText(text), selectedIndex: 0 }))
+			return true
+		}
+		if (openRepositoryModalActive) {
+			setOpenRepositoryModal((current) => ({ ...current, query: current.query + singleLineText(text), error: null }))
+			return true
+		}
+		if (themeModalActive && themeModal.filterMode) {
+			editThemeQuery((query) => query + singleLineText(text))
+			return true
+		}
+		if (commentModalActive) {
+			editComment((state) => insertText(state, text.replace(/\r\n?/g, "\n")))
+			return true
+		}
+		if (labelModalActive) {
+			setLabelModal((current) => ({ ...current, query: current.query + singleLineText(text), selectedIndex: 0 }))
+			return true
+		}
+		if (filterMode) {
+			setFilterDraft((current) => current + singleLineText(text))
+			return true
+		}
+		return false
+	}
+
+	useEffect(() => {
+		const handlePaste = (event: PasteEvent) => {
+			if (insertPastedText(pasteText(event))) event.preventDefault()
+		}
+		const keyInput = renderer.keyInput as unknown as {
+			on: (event: "paste", handler: (event: PasteEvent) => void) => void
+			off: (event: "paste", handler: (event: PasteEvent) => void) => void
+		}
+		keyInput.on("paste", handlePaste)
+		return () => {
+			keyInput.off("paste", handlePaste)
+		}
+	}, [renderer, commandPaletteActive, openRepositoryModalActive, themeModalActive, themeModal.filterMode, commentModalActive, labelModalActive, filterMode])
+
+	const appCommands: readonly AppCommand[] = buildAppCommands({
+		pullRequestStatus,
+		filterQuery,
+		filterMode,
+		selectedRepository,
+		activeViews,
+		activeView,
+		loadedPullRequestCount,
+		hasMorePullRequests,
+		isLoadingMorePullRequests,
+		selectedPullRequest,
+		detailFullView,
+		diffFullView,
+		diffReady: selectedDiffState?._tag === "Ready",
+		effectiveDiffRenderView,
+		diffWrapMode,
+		readyDiffFileCount: readyDiffFiles.length,
+		diffFileIndex,
+		diffCommentMode,
+		selectedDiffCommentAnchorLabel: selectedDiffCommentAnchor ? `${selectedDiffCommentAnchor.path}:${selectedDiffCommentAnchor.line}` : null,
+		actions: {
+			openCommandPalette,
+			refreshPullRequests,
+			openFilter: () => {
+				setFilterDraft(filterQuery)
+				setFilterMode(true)
+			},
+			clearFilter: () => {
+				setFilterQuery("")
+				setFilterDraft("")
+				setFilterMode(false)
+			},
+			openThemeModal,
+			openRepositoryPicker,
+			loadMorePullRequests,
+			switchViewTo,
+			openDetails: () => {
+				setDetailFullView(true)
+				setDetailScrollOffset(0)
+			},
+			closeDetails: () => {
+				setDetailFullView(false)
+				setDetailScrollOffset(0)
+			},
+			openDiffView,
+			closeDiffView: () => {
+				setDiffFullView(false)
+				setDiffCommentMode(false)
+			},
+			reloadDiff: () => {
+				if (!selectedPullRequest) return
+				loadPullRequestDiff(selectedPullRequest, { force: true, includeComments: true })
+				flashNotice(`Refreshing diff for #${selectedPullRequest.number}`)
+			},
+			toggleDiffRenderView: () => setDiffRenderView((current) => current === "unified" ? "split" : "unified"),
+			toggleDiffWrapMode: () => setDiffWrapMode((current) => current === "none" ? "word" : "none"),
+			jumpDiffFile,
+			toggleDiffCommentMode: () => {
+				if (diffCommentMode) setDiffCommentMode(false)
+				else enterDiffCommentMode()
+			},
+			openDiffCommentModal,
+			togglePullRequestDraftStatus: toggleSelectedPullRequestDraftStatus,
+			openLabelModal,
+			openMergeModal,
+			openCloseModal,
+			openPullRequestInBrowser: () => {
+				if (selectedPullRequest) openSelectedPullRequestInBrowser(selectedPullRequest)
+			},
+			copyPullRequestMetadata: copySelectedPullRequestMetadata,
+			quit: () => renderer.destroy(),
+		},
+	})
+	const runCommand = (command: AppCommand, options: { readonly notifyDisabled?: boolean; readonly closePalette?: boolean } = {}) => {
+		if (!commandEnabled(command)) {
+			if (options.notifyDisabled && command.disabledReason) flashNotice(command.disabledReason)
+			return false
+		}
+		if (options.closePalette) closeActiveModal()
+		command.run()
+		return true
+	}
+	const runCommandById = (id: string, options: { readonly notifyDisabled?: boolean } = {}) => {
+		const command = appCommands.find((entry) => entry.id === id)
+		return command ? runCommand(command, options) : false
+	}
+	const commandPaletteCommands = commandPaletteActive ? filterCommands(appCommands.filter((command) => command.id !== "command.open" && commandEnabled(command)), commandPalette.query) : []
+	const selectedCommandIndex = clampCommandIndex(commandPalette.selectedIndex, commandPaletteCommands)
+	const selectedCommand = commandPaletteCommands[selectedCommandIndex] ?? null
+
 	useKeyboard((key) => {
+		if (commandPaletteActive) {
+			if (key.name === "escape" || key.ctrl && key.name === "c") {
+				closeActiveModal()
+				return
+			}
+			if (key.name === "return" || key.name === "enter") {
+				if (selectedCommand) runCommand(selectedCommand, { notifyDisabled: true, closePalette: true })
+				return
+			}
+			if (key.name === "up" || key.name === "k" && !key.ctrl && !key.meta) {
+				setCommandPalette((current) => {
+					const selectedIndex = clampCommandIndex(current.selectedIndex - 1, commandPaletteCommands)
+					return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+				})
+				return
+			}
+			if (key.name === "down" || key.name === "j" && !key.ctrl && !key.meta) {
+				setCommandPalette((current) => {
+					const selectedIndex = clampCommandIndex(current.selectedIndex + 1, commandPaletteCommands)
+					return selectedIndex === current.selectedIndex ? current : { ...current, selectedIndex }
+				})
+				return
+			}
+			if (isSingleLineInputKey(key)) {
+				setCommandPalette((current) => {
+					const query = editSingleLineInput(current.query, key) ?? current.query
+					return current.query === query && current.selectedIndex === 0 ? current : { ...current, query, selectedIndex: 0 }
+				})
+				return
+			}
+			return
+		}
+
+		if (openRepositoryModalActive) {
+			if (key.name === "escape" || key.ctrl && key.name === "c") {
+				closeActiveModal()
+				return
+			}
+			if (key.name === "return" || key.name === "enter") {
+				openRepositoryFromInput()
+				return
+			}
+			if (isSingleLineInputKey(key)) {
+				setOpenRepositoryModal((current) => ({
+					...current,
+					query: editSingleLineInput(current.query, key) ?? current.query,
+					error: null,
+				}))
+				return
+			}
+			return
+		}
+
+		if ((key.ctrl && key.name === "p") || (key.meta && key.name === "k")) {
+			runCommandById("command.open")
+			return
+		}
+
 		if ((key.name === "q" && !commentModalActive && !(themeModalActive && themeModal.filterMode)) || (key.ctrl && key.name === "c")) {
 			if (themeModalActive) {
 				closeThemeModal(false)
@@ -1434,7 +1811,7 @@ export const App = () => {
 				closeActiveModal()
 				return
 			}
-			renderer.destroy()
+			runCommandById("app.quit")
 			return
 		}
 
@@ -1464,16 +1841,8 @@ export const App = () => {
 				moveThemeSelection(1)
 				return
 			}
-			if (themeModal.filterMode && key.name === "backspace") {
-				editThemeQuery((query) => query.slice(0, -1))
-				return
-			}
-			if (themeModal.filterMode && key.ctrl && key.name === "u") {
-				updateThemeQuery("")
-				return
-			}
-			if (themeModal.filterMode && !key.ctrl && !key.meta && key.sequence.length === 1 && key.name !== "return") {
-				editThemeQuery((query) => query + key.sequence)
+			if (themeModal.filterMode && isSingleLineInputKey(key)) {
+				editThemeQuery((query) => editSingleLineInput(query, key) ?? query)
 				return
 			}
 			return
@@ -1572,8 +1941,9 @@ export const App = () => {
 				submitDiffComment()
 				return
 			}
-			if (!key.ctrl && !key.meta && key.sequence.length === 1) {
-				editComment((state) => insertText(state, key.sequence))
+			const text = printableKeyText(key)
+			if (text) {
+				editComment((state) => insertText(state, text))
 				return
 			}
 			return
@@ -1646,7 +2016,6 @@ export const App = () => {
 			return
 		}
 
-		// Label modal takes priority over everything else
 		if (labelModalActive) {
 			if (key.name === "escape") {
 				closeActiveModal()
@@ -1664,31 +2033,17 @@ export const App = () => {
 				return
 			}
 			if (key.name === "down" || key.name === "j") {
-				const filtered = labelModal.availableLabels.filter((label) =>
-					labelModal.query.length === 0 || label.name.toLowerCase().includes(labelModal.query.toLowerCase()),
-				)
+				const filtered = filterLabels(labelModal.availableLabels, labelModal.query)
 				setLabelModal((current) => ({
 					...current,
 					selectedIndex: Math.min(Math.max(0, filtered.length - 1), current.selectedIndex + 1),
 				}))
 				return
 			}
-			if (key.name === "backspace") {
+			if (isSingleLineInputKey(key)) {
 				setLabelModal((current) => ({
 					...current,
-					query: current.query.slice(0, -1),
-					selectedIndex: 0,
-				}))
-				return
-			}
-			if (key.ctrl && key.name === "u") {
-				setLabelModal((current) => ({ ...current, query: "", selectedIndex: 0 }))
-				return
-			}
-			if (!key.ctrl && !key.meta && key.sequence.length === 1) {
-				setLabelModal((current) => ({
-					...current,
-					query: current.query + key.sequence,
+					query: editSingleLineInput(current.query, key) ?? current.query,
 					selectedIndex: 0,
 				}))
 				return
@@ -1703,7 +2058,7 @@ export const App = () => {
 					return
 				}
 				if (key.name === "c") {
-					setDiffCommentMode(false)
+					runCommandById("diff.comment-mode")
 					return
 				}
 				if (key.name === "return" || key.name === "enter") {
@@ -1712,7 +2067,7 @@ export const App = () => {
 					return
 				}
 				if (key.name === "a") {
-					openDiffCommentModal()
+					runCommandById("diff.add-comment")
 					return
 				}
 				if (key.name === "pageup" || key.ctrl && key.name === "u") {
@@ -1748,23 +2103,22 @@ export const App = () => {
 					return
 				}
 				if (key.name === "]" && selectedDiffState?._tag === "Ready") {
-					jumpDiffFile(1)
+					runCommandById("diff.next-file")
 					return
 				}
 				if (key.name === "[" && selectedDiffState?._tag === "Ready") {
-					jumpDiffFile(-1)
+					runCommandById("diff.previous-file")
 					return
 				}
 				return
 			}
 
 			if (key.name === "escape" || key.name === "return" || key.name === "enter") {
-				setDiffFullView(false)
-				setDiffCommentMode(false)
+				runCommandById("diff.close")
 				return
 			}
 			if (key.name === "c" && selectedDiffState?._tag === "Ready") {
-				enterDiffCommentMode()
+				runCommandById("diff.comment-mode")
 				return
 			}
 			if (key.name === "home") {
@@ -1801,67 +2155,64 @@ export const App = () => {
 				return
 			}
 			if (key.name === "v") {
-				setDiffRenderView((current) => current === "unified" ? "split" : "unified")
+				runCommandById("diff.toggle-view")
 				return
 			}
 			if (key.name === "w") {
-				setDiffWrapMode((current) => current === "none" ? "word" : "none")
+				runCommandById("diff.toggle-wrap")
 				return
 			}
 			if (key.name === "r" && selectedPullRequest) {
-				loadPullRequestDiff(selectedPullRequest, { force: true, includeComments: true })
-				flashNotice(`Refreshing diff for #${selectedPullRequest.number}`)
+				runCommandById("diff.reload")
 				return
 			}
 			if ((key.name === "]" || key.name === "right" || key.name === "l") && selectedDiffState?._tag === "Ready") {
-				jumpDiffFile(1)
+				runCommandById("diff.next-file")
 				return
 			}
 			if ((key.name === "[" || key.name === "left" || key.name === "h") && selectedDiffState?._tag === "Ready") {
-				jumpDiffFile(-1)
+				runCommandById("diff.previous-file")
 				return
 			}
 			if (key.name === "o" && selectedPullRequest) {
-				openSelectedPullRequestInBrowser(selectedPullRequest)
+				runCommandById("pull.open-browser")
 				return
 			}
 			return
 		}
 
-		// Fullscreen detail mode handles its own navigation keys.
 		if (detailFullView) {
 			const plainKey = !key.ctrl && !key.meta && !key.option
 			if (key.name === "escape" || (key.name === "return" || key.name === "enter")) {
-				setDetailFullView(false)
-				setDetailScrollOffset(0)
+				runCommandById("detail.close")
 				return
 			}
 			if (isThemeKey(key)) {
-				openThemeModal()
+				runCommandById("theme.open")
 				return
 			}
 			if (plainKey && key.name === "d" && selectedPullRequest) {
-				openDiffView()
+				runCommandById("diff.open")
 				return
 			}
 			if (plainKey && key.name === "x" && selectedPullRequest?.state === "open") {
-				openCloseModal()
+				runCommandById("pull.close")
 				return
 			}
 			if (plainKey && key.name === "l" && selectedPullRequest) {
-				openLabelModal()
+				runCommandById("pull.labels")
 				return
 			}
 			if (plainKey && (key.name === "m" || key.name === "M") && selectedPullRequest) {
-				openMergeModal()
+				runCommandById("pull.merge")
 				return
 			}
 			if (plainKey && (key.name === "s" || key.name === "S") && selectedPullRequest) {
-				toggleSelectedPullRequestDraftStatus()
+				runCommandById("pull.toggle-draft")
 				return
 			}
 			if (plainKey && key.name === "r") {
-				refreshPullRequests("Refreshed")
+				runCommandById("pull.refresh")
 				return
 			}
 			if (key.name === "home") {
@@ -1909,11 +2260,11 @@ export const App = () => {
 				return
 			}
 			if (plainKey && key.name === "o" && selectedPullRequest) {
-				openSelectedPullRequestInBrowser(selectedPullRequest)
+				runCommandById("pull.open-browser")
 				return
 			}
 			if (plainKey && key.name === "y" && selectedPullRequest) {
-				copySelectedPullRequestMetadata()
+				runCommandById("pull.copy-metadata")
 				return
 			}
 			return
@@ -1925,25 +2276,13 @@ export const App = () => {
 				setFilterMode(false)
 				return
 			}
-			if (key.name === "enter") {
+			if (key.name === "return" || key.name === "enter") {
 				setFilterQuery(filterDraft)
 				setFilterMode(false)
 				return
 			}
-			if (key.ctrl && key.name === "u") {
-				setFilterDraft("")
-				return
-			}
-			if (key.ctrl && key.name === "w") {
-				setFilterDraft((current) => deleteLastWord(current))
-				return
-			}
-			if (key.name === "backspace") {
-				setFilterDraft((current) => current.slice(0, -1))
-				return
-			}
-			if (!key.ctrl && !key.meta && key.sequence.length === 1 && key.name !== "return") {
-				setFilterDraft((current) => current + key.sequence)
+			if (isSingleLineInputKey(key)) {
+				setFilterDraft((current) => editSingleLineInput(current, key) ?? current)
 				return
 			}
 		}
@@ -1954,25 +2293,40 @@ export const App = () => {
 		}
 
 		if (isThemeKey(key)) {
-			openThemeModal()
+			runCommandById("theme.open")
 			return
 		}
 
 		if (key.name === "/") {
-			setFilterDraft(filterQuery)
-			setFilterMode(true)
+			runCommandById("filter.open")
 			return
 		}
 		if (key.name === "escape" && filterQuery.length > 0) {
-			setFilterQuery("")
-			setFilterDraft("")
-			setFilterMode(false)
+			runCommandById("filter.clear")
 			return
 		}
 		if (key.name === "r") {
-			refreshPullRequests("Refreshed")
+			runCommandById("pull.refresh")
 			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")) ||
@@ -2023,6 +2377,10 @@ export const App = () => {
 			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
@@ -2034,36 +2392,35 @@ export const App = () => {
 			() => setSelectedIndex(visiblePullRequests.length === 0 ? 0 : visiblePullRequests.length - 1),
 		)) return
 		if ((key.name === "return" || key.name === "enter") && !detailFullView) {
-			setDetailFullView(true)
-			setDetailScrollOffset(0)
+			runCommandById("detail.open")
 			return
 		}
 		if (key.name === "d" && selectedPullRequest) {
-			openDiffView()
+			runCommandById("diff.open")
 			return
 		}
 		if (key.name === "x" && selectedPullRequest?.state === "open") {
-			openCloseModal()
+			runCommandById("pull.close")
 			return
 		}
 		if (key.name === "l" && selectedPullRequest) {
-			openLabelModal()
+			runCommandById("pull.labels")
 			return
 		}
 		if (key.name === "m" || key.name === "M") {
-			if (selectedPullRequest) openMergeModal()
+			if (selectedPullRequest) runCommandById("pull.merge")
 			return
 		}
 		if (key.name === "o" && selectedPullRequest) {
-			openSelectedPullRequestInBrowser(selectedPullRequest)
+			runCommandById("pull.open-browser")
 			return
 		}
 		if ((key.name === "s" || key.name === "S") && selectedPullRequest) {
-			toggleSelectedPullRequestDraftStatus()
+			runCommandById("pull.toggle-draft")
 			return
 		}
 		if (key.name === "y" && selectedPullRequest) {
-			copySelectedPullRequestMetadata()
+			runCommandById("pull.copy-metadata")
 			return
 		}
 	})
@@ -2073,19 +2430,20 @@ export const App = () => {
 	const wideFullscreenDetailScrollable = getDetailsPaneHeight({
 		pullRequest: selectedPullRequest,
 		contentWidth: fullscreenContentWidth,
-		bodyLines: fullscreenBodyLines,
+		bodyLines: DETAIL_BODY_SCROLL_LIMIT,
 		paneWidth: contentWidth,
 		showChecks: true,
 	}) > wideBodyHeight
 	const narrowFullscreenDetailScrollable = getDetailsPaneHeight({
 		pullRequest: selectedPullRequest,
 		contentWidth: fullscreenContentWidth,
-		bodyLines: fullscreenBodyLines,
+		bodyLines: DETAIL_BODY_SCROLL_LIMIT,
 		paneWidth: contentWidth,
 	}) > wideBodyHeight
 	const wideDetailHeaderHeight = getDetailHeaderHeight(selectedPullRequest, rightPaneWidth, true)
 	const wideDetailBodyViewportHeight = Math.max(1, wideBodyHeight - wideDetailHeaderHeight)
-	const wideDetailBodyScrollable = getDetailBodyHeight(selectedPullRequest, rightContentWidth, wideDetailLines) > wideDetailBodyViewportHeight
+	const wideDetailBodyHeight = getScrollableDetailBodyHeight(selectedPullRequest, rightContentWidth)
+	const wideDetailBodyScrollable = wideDetailBodyHeight > wideDetailBodyViewportHeight
 
 	const prListProps = {
 		groups: visibleGroups,
@@ -2095,6 +2453,9 @@ export const App = () => {
 		filterText: visibleFilterText,
 		showFilterBar: filterMode || filterQuery.length > 0,
 		isFilterEditing: filterMode,
+		loadedCount: loadedPullRequestCount,
+		hasMore: hasMorePullRequests,
+		isLoadingMore: isLoadingMorePullRequests,
 		onSelectPullRequest: selectPullRequestByUrl,
 	} as const
 
@@ -2103,29 +2464,49 @@ export const App = () => {
 	const labelModalHeight = Math.min(20, terminalHeight - 4)
 	const labelModalLeft = centeredOffset(contentWidth, labelModalWidth)
 	const labelModalTop = centeredOffset(terminalHeight, labelModalHeight)
-	const closeModalWidth = Math.min(68, Math.max(46, contentWidth - 12))
-	const closeModalHeight = Math.min(12, terminalHeight - 4)
-	const closeModalLeft = centeredOffset(contentWidth, closeModalWidth)
-	const closeModalTop = centeredOffset(terminalHeight, closeModalHeight)
-	const commentModalWidth = Math.min(76, Math.max(46, contentWidth - 8))
-	const commentModalHeight = Math.min(16, terminalHeight - 4)
-	const commentModalLeft = centeredOffset(contentWidth, commentModalWidth)
-	const commentModalTop = centeredOffset(terminalHeight, commentModalHeight)
-	const commentThreadModalWidth = Math.min(86, Math.max(50, contentWidth - 8))
-	const commentThreadModalHeight = Math.min(22, terminalHeight - 4)
-	const commentThreadModalLeft = centeredOffset(contentWidth, commentThreadModalWidth)
-	const commentThreadModalTop = centeredOffset(terminalHeight, commentThreadModalHeight)
+	const sizedModal = (minW: number, maxW: number, padX: number, maxH: number) => {
+		const w = Math.min(maxW, Math.max(minW, contentWidth - padX))
+		const h = Math.min(maxH, terminalHeight - 4)
+		return { width: w, height: h, left: centeredOffset(contentWidth, w), top: centeredOffset(terminalHeight, h) }
+	}
+	const closeLayout = sizedModal(46, 68, 12, 12)
+	const closeModalWidth = closeLayout.width
+	const closeModalHeight = closeLayout.height
+	const closeModalLeft = closeLayout.left
+	const closeModalTop = closeLayout.top
+	const commentLayout = sizedModal(46, 76, 8, 16)
+	const commentModalWidth = commentLayout.width
+	const commentModalHeight = commentLayout.height
+	const commentModalLeft = commentLayout.left
+	const commentModalTop = commentLayout.top
+	const commentThreadLayout = sizedModal(50, 86, 8, 22)
+	const commentThreadModalWidth = commentThreadLayout.width
+	const commentThreadModalHeight = commentThreadLayout.height
+	const commentThreadModalLeft = commentThreadLayout.left
+	const commentThreadModalTop = commentThreadLayout.top
 	const commentAnchorLabel = selectedDiffCommentAnchor
 		? `${selectedDiffCommentAnchor.path}:${selectedDiffCommentAnchor.line} ${selectedDiffCommentAnchor.side === "RIGHT" ? "right" : "left"}`
 		: "No diff line selected"
-	const mergeModalWidth = Math.min(68, Math.max(46, contentWidth - 12))
-	const mergeModalHeight = Math.min(16, terminalHeight - 4)
-	const mergeModalLeft = centeredOffset(contentWidth, mergeModalWidth)
-	const mergeModalTop = centeredOffset(terminalHeight, mergeModalHeight)
-	const themeModalWidth = Math.min(58, Math.max(38, contentWidth - 12))
-	const themeModalHeight = Math.min(16, terminalHeight - 4)
-	const themeModalLeft = centeredOffset(contentWidth, themeModalWidth)
-	const themeModalTop = centeredOffset(terminalHeight, themeModalHeight)
+	const mergeLayout = sizedModal(46, 68, 12, 16)
+	const mergeModalWidth = mergeLayout.width
+	const mergeModalHeight = mergeLayout.height
+	const mergeModalLeft = mergeLayout.left
+	const mergeModalTop = mergeLayout.top
+	const themeLayout = sizedModal(38, 58, 12, 16)
+	const themeModalWidth = themeLayout.width
+	const themeModalHeight = themeLayout.height
+	const themeModalLeft = themeLayout.left
+	const themeModalTop = themeLayout.top
+	const openRepositoryLayout = sizedModal(46, 76, 8, 8)
+	const openRepositoryModalWidth = openRepositoryLayout.width
+	const openRepositoryModalHeight = openRepositoryLayout.height
+	const openRepositoryModalLeft = openRepositoryLayout.left
+	const openRepositoryModalTop = openRepositoryLayout.top
+	const commandPaletteLayout = sizedModal(50, 88, 8, 24)
+	const commandPaletteWidth = commandPaletteLayout.width
+	const commandPaletteHeight = commandPaletteLayout.height
+	const commandPaletteLeft = commandPaletteLayout.left
+	const commandPaletteTop = commandPaletteLayout.top
 
 	return (
 		<box width={terminalWidth} height={terminalHeight} flexDirection="column" backgroundColor={colors.background}>
@@ -2158,6 +2539,11 @@ export const App = () => {
 					onSelectCommentLine={selectDiffCommentLine}
 					themeId={themeId}
 				/>
+			) : detailFullView && isSelectedPullRequestDetailLoading && selectedPullRequest ? (
+				<box flexGrow={1} flexDirection="column">
+					<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} showChecks={isWideLayout} />
+					<LoadingPane content={detailLoadingContent} width={contentWidth} height={Math.max(1, wideBodyHeight - getDetailHeaderHeight(selectedPullRequest, contentWidth, isWideLayout))} />
+				</box>
 			) : isWideLayout && detailFullView ? (
 				<box flexGrow={1} flexDirection="column">
 					<scrollbox ref={detailScrollRef} focused flexGrow={1} verticalScrollbarOptions={{ visible: wideFullscreenDetailScrollable }}>
@@ -2166,6 +2552,7 @@ export const App = () => {
 							viewerUsername={username}
 							contentWidth={fullscreenContentWidth}
 							bodyLines={fullscreenBodyLines}
+							bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT}
 							paneWidth={contentWidth}
 							showChecks
 							placeholderContent={detailPlaceholderContent}
@@ -2175,19 +2562,26 @@ export const App = () => {
 					</scrollbox>
 				</box>
 			) : isWideLayout ? (
-				<box key="wide-main" flexGrow={1} flexDirection="row">
-					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column" paddingLeft={sectionPadding} paddingRight={sectionPadding}>
-						<scrollbox height={wideBodyHeight} flexGrow={0}>
-							<PullRequestList key={`wide-${leftContentWidth}`} {...prListProps} contentWidth={leftContentWidth} />
+			<box key="wide-main" flexGrow={1} flexDirection="row">
+					<box width={leftPaneWidth} height={wideBodyHeight} flexDirection="column">
+						<scrollbox ref={prListScrollRef} focusable={false} height={wideBodyHeight} flexGrow={0}>
+							<box paddingLeft={sectionPadding} paddingRight={0}>
+								<PullRequestList key={`wide-${leftContentWidth}`} {...prListProps} contentWidth={leftContentWidth} />
+							</box>
 						</scrollbox>
 					</box>
 					<SeparatorColumn height={wideBodyHeight} junctionRows={detailJunctions} />
 					<box width={rightPaneWidth} height={wideBodyHeight} flexDirection="column">
-						{selectedPullRequest ? (
+						{isSelectedPullRequestDetailLoading && selectedPullRequest ? (
 							<>
 								<DetailHeader pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={rightContentWidth} paneWidth={rightPaneWidth} showChecks />
-								<scrollbox flexGrow={1} verticalScrollbarOptions={{ visible: wideDetailBodyScrollable }}>
-									<DetailBody pullRequest={selectedPullRequest} contentWidth={rightContentWidth} bodyLines={wideDetailLines} loadingIndicator={loadingIndicator} themeId={themeId} />
+								<LoadingPane content={detailLoadingContent} width={rightPaneWidth} height={Math.max(1, wideBodyHeight - getDetailHeaderHeight(selectedPullRequest, rightPaneWidth, true))} />
+							</>
+						) : selectedPullRequest ? (
+							<>
+								<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} />
 								</scrollbox>
 							</>
 						) : (
@@ -2203,6 +2597,7 @@ export const App = () => {
 							viewerUsername={username}
 							contentWidth={fullscreenContentWidth}
 							bodyLines={fullscreenBodyLines}
+							bodyLineLimit={DETAIL_BODY_SCROLL_LIMIT}
 							paneWidth={contentWidth}
 							placeholderContent={detailPlaceholderContent}
 							loadingIndicator={loadingIndicator}
@@ -2215,7 +2610,7 @@ export const App = () => {
 					<DetailsPane pullRequest={selectedPullRequest} viewerUsername={username} contentWidth={fullscreenContentWidth} paneWidth={contentWidth} placeholderContent={detailPlaceholderContent} loadingIndicator={loadingIndicator} themeId={themeId} />
 					<Divider width={contentWidth} />
 					<box flexGrow={1} flexDirection="column">
-						<scrollbox flexGrow={1}>
+						<scrollbox ref={prListScrollRef} focusable={false} flexGrow={1}>
 							<box paddingLeft={sectionPadding} paddingRight={sectionPadding}>
 								<PullRequestList key={`narrow-${fullscreenContentWidth}`} {...prListProps} contentWidth={fullscreenContentWidth} />
 							</box>
@@ -2310,6 +2705,26 @@ export const App = () => {
 					offsetTop={themeModalTop}
 				/>
 			) : null}
+			{openRepositoryModalActive ? (
+				<OpenRepositoryModal
+					state={openRepositoryModal}
+					modalWidth={openRepositoryModalWidth}
+					modalHeight={openRepositoryModalHeight}
+					offsetLeft={openRepositoryModalLeft}
+					offsetTop={openRepositoryModalTop}
+				/>
+			) : null}
+			{commandPaletteActive ? (
+				<CommandPalette
+					commands={commandPaletteCommands}
+					query={commandPalette.query}
+					selectedIndex={selectedCommandIndex}
+					modalWidth={commandPaletteWidth}
+					modalHeight={commandPaletteHeight}
+					offsetLeft={commandPaletteLeft}
+					offsetTop={commandPaletteTop}
+				/>
+			) : null}
 		</box>
 	)
 }