@kubohiroya/turbowarp-plus-editor-git 0.16.0 → 0.17.0

package/src/index.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {createPortal, render, unmountComponentAtNode} from 'react-dom';
+import {CloseButton} from './close-button.js';
 import {FileDiffView} from './file-diff-view.js';
 import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
 import type {ChangedFile} from './project-change-model.js';
@@ -13,6 +14,7 @@ import {ConnectionSettings} from './connection-settings.js';
 import type {GitConnectionSettings} from './connection-settings.js';
 import type {RemoteOperation} from './remote-operations.js';
 import type {GitAuthor, LocalOperation} from './local-operations.js';
+import {pullRequestBranch} from './local-operations.js';
 import {PullRequestReviewPanel} from './pull-request-panel.js';
 import {openProjectSourceTabs} from './project-source-tabs.js';
 import type {ProjectSourceTabsFile} from './project-source-tabs.js';
@@ -27,17 +29,18 @@ import type {LocatorVM} from './editor-block-locator.js';
 export {createScratchBlocksDiffRenderer} from './scratch-block-diff-renderer.js';
 export type {ScratchBlockDiffRendererOptions, ScratchBlocksPort} from './scratch-block-diff-renderer.js';
 
-export {openRepository, createReadOnlyFs, GitPanelError} from './repository.js';
+export {openRepository, createReadOnlyFs, GitPanelError, pullRequestRef} from './repository.js';
 export {openProjectComparison} from './project-comparison.js';
 export {openProjectSourceTabs} from './project-source-tabs.js';
 export type {ProjectSourceTabsFile, ProjectSourceTabsOptions} from './project-source-tabs.js';
 export type {ProjectComparisonAction, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
-export type {Repository, Snapshot, FileChange, FileDiff, HistoryCommit, HistoryCursor, HistoryPage, HistoryRef} from './repository.js';
+export type {PullRequestBase, PullRequestFetch, PullRequestFiles, Repository, Snapshot, FileChange, FileDiff, HistoryCommit, HistoryCursor, HistoryPage, HistoryRef} from './repository.js';
 export {HistoryGraph, laneColors} from './history-graph-view.js';
 export type {HistoryActionResult, HistoryGraphProps} from './history-graph-view.js';
 export {layoutHistory} from './history-graph.js';
 export type {GraphCommit, GraphLayout, GraphRow, GraphSegment} from './history-graph.js';
 export type {GitAuthor, LocalOperation} from './local-operations.js';
+export {pullRequestBranch} from './local-operations.js';
 
 export interface GitHost {
     connectionSettings?: GitConnectionSettings;
@@ -364,6 +367,12 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                 notice: operation === 'pull' && current.current.project !== null ? labels.pulledProject : labels.remoteDone};
         });
     };
+    // A connected GitHub connection reads pull request contents over Git Smart HTTP, so private repositories work too.
+    const pullRequestConnection = useMemo(() => {
+        const settings = host.connectionSettings;
+        const getSession = settings?.getSession;
+        return getSession ? {getSession, connected: () => settings.getView().state.status === 'connected'} : undefined;
+    }, [host]);
     const [message, setMessage] = useState('');
     const localOperation = (operation: LocalOperation, notice?: string) => {
         const repository = current.current.repository;
@@ -400,6 +409,25 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         if (operation.kind === 'createBranch' && !operation.fromRemote && !at) setNewBranch('');
         return result;
     };
+    /**
+     * Opens a pull request version fetched over the connection: creates `pr/<number>` at its head (or reuses that
+     * branch when it already points there), switches to it with the same refusals as any switch, and opens the project
+     * folder again from it. The branch the person was on stays, so switching back is an ordinary switch.
+     */
+    const openPullRequest = async (number: number, head: string): Promise<HistoryActionResult> => {
+        const repository = current.current.repository;
+        if (!repository) return {done: false};
+        const original = current.current.snapshot?.branch ?? null;
+        const name = pullRequestBranch(number);
+        const result = await changeBranch({kind: 'createBranch', name, at: head, checkout: true, reuse: true});
+        if (!result.done) return result;
+        const project = current.current.project;
+        if (project !== null && await repository.hasFolder(name, project)) await openProject(project);
+        const notice = (original && original !== name ? labels.openedPullRequest : labels.openedPullRequestDetached)
+            .replace('{number}', String(number)).replace('{branch}', name).replace('{previous}', original ?? '');
+        if (alive.current) setState(previous => previous.error ? previous : {...previous, notice});
+        return result;
+    };
     // The history graph reads its own pages after each snapshot, through the same queue as the other reads.
     const [history, setHistory] = useState<{commits: HistoryCommit[]; cursor: HistoryCursor | null; loading: boolean; failed: boolean}>(
         {commits: [], cursor: null, loading: false, failed: false});
@@ -485,7 +513,7 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                 {!review && state.project !== null && <button disabled={state.busy} onClick={() => void openProject(state.project!)}>{labels.reload}</button>}
                 {state.repository && host.renderReviewBlock && <button type="button" disabled={state.busy}
                     onClick={() => setReview(!review)}>{review ? labels.localChanges : labels.pullRequests}</button>}
-                <button onClick={closePanel}>{labels.close}</button>
+                <CloseButton label={labels.close} onClick={closePanel}/>
             </header>
             <div className="twgit-context">
                 <span>{labels.repository} · {state.repository?.root.name || '—'}</span>
@@ -516,7 +544,8 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
             {!state.repository && <p>{labels.empty}</p>}
             {review && state.repository && host.renderReviewBlock &&
                 <PullRequestReviewPanel repository={state.repository} locale={locale} renderBlock={host.renderReviewBlock}
-                    locateFor={reviewLocator} openTabs={openTabs}/>}
+                    locateFor={reviewLocator} openTabs={openTabs} connection={pullRequestConnection}
+                    openLocally={branching ? {open: openPullRequest, busy: state.busy} : undefined}/>}
             {!review && state.repository && <div className="twgit-content">
                 <aside>
                     {state.browser && <details>

package/src/local-operations.ts

@@ -10,11 +10,18 @@ export type LocalOperation =
     | {kind: 'commit'; message: string; author?: GitAuthor}
     /**
      * Creates `name` at HEAD, at the commit `at`, or at `origin/<name>` with `fromRemote`, and switches to it with
-     * `checkout`.
+     * `checkout`. With `reuse` (only with `at`), a branch `name` that already points at `at` is switched to instead of
+     * failing, and one that points elsewhere fails with `pullRequestBranch` and is never moved.
      */
-    | {kind: 'createBranch'; name: string; fromRemote?: boolean; at?: string; checkout: boolean}
+    | {kind: 'createBranch'; name: string; fromRemote?: boolean; at?: string; checkout: boolean; reuse?: boolean}
     | {kind: 'switchBranch'; name: string};
 
+/**
+ * The local branch a pull request is opened on: `pr/<number>`, a name `git check-ref-format --branch` accepts. It is
+ * created at the fetched head (`pullRequestRef(number)`) and is an ordinary branch afterwards.
+ */
+export const pullRequestBranch = (number: number) => `pr/${number}`;
+
 const missing = (error: unknown) => ['ENOENT', 'ENOTDIR', 'NotFoundError'].includes(errorCode(error) ?? '');
 
 /**
@@ -53,6 +60,7 @@ export async function runLocalOperation(root: FileSystemDirectoryHandle, operati
             }
             if (operation.kind === 'createBranch') {
                 let object: string;
+                if (operation.reuse && operation.at === undefined) throw new GitPanelError('invalid');
                 if (operation.at !== undefined) {
                     if (operation.fromRemote || !/^[0-9a-f]{40}$/.test(operation.at)) throw new GitPanelError('invalid');
                     object = await git.readCommit({...options, oid: operation.at})
@@ -66,7 +74,19 @@ export async function runLocalOperation(root: FileSystemDirectoryHandle, operati
                 } else {
                     object = await git.resolveRef({...options, ref: 'HEAD'}).catch(() => {throw new GitPanelError('unsupported');});
                 }
-                try {
+                let existing: string | undefined;
+                if (operation.reuse && (await git.listBranches(options)).includes(name)) {
+                    existing = await git.resolveRef({...options, ref: local});
+                    // Never move a branch the person may have recorded on: only the same commit is reused.
+                    if (existing !== object) throw new GitPanelError('pullRequestBranch');
+                }
+                if (existing === undefined) {
+                    // Git keeps branches as files under refs/heads, so `pr` and `pr/7` cannot both exist.
+                    const conflict = (await git.listBranches(options)).some(branch =>
+                        branch !== name && (name.startsWith(`${branch}/`) || branch.startsWith(`${name}/`)));
+                    if (conflict) throw new GitPanelError('branchConflict');
+                }
+                if (existing === undefined) try {
                     // The ref first: isomorphic-git's checkout of a missing branch would write tracking config.
                     await git.branch({...options, ref: name, object, checkout: false});
                 } catch (error) {

package/src/messages.ts

@@ -20,6 +20,10 @@ export const messages = {
         commitMessage: 'Write a message for this record.',
         switchUnsafe: 'Stop the project, and save or record (or undo) every change, before switching branches.',
         branchExists: 'A branch with this name already exists.',
+        branchConflict: 'This name clashes with an existing branch: Git cannot keep both a branch and another branch under its name followed by /, such as pr and pr/7. Rename or delete the other branch with Git, or choose another name.',
+        pullRequestBranch: 'The branch pr/<number> already exists with other records, so this version was not opened. The branch is left unchanged. Switch to it in Local changes, or rename or delete it with Git, then open the pull request here again.',
+        openedPullRequest: 'Opened pull request #{number} on the local branch {branch}. To go back, switch to {previous} in Local changes.',
+        openedPullRequestDetached: 'Opened pull request #{number} on the local branch {branch}. To go back, switch to another branch in Local changes.',
         locked: 'Another Git tool is working on this repository (a lock file, or a merge, cherry-pick, revert or rebase in progress). Try again after it finishes.',
         branchName: 'Git cannot use this name for a branch.',
         pullUnsafe: 'Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).',
@@ -73,6 +77,10 @@ export const messages = {
         commitMessage: 'この記録の説明を書いてください。',
         switchUnsafe: 'ブランチを切り替える前に、実行を止め、すべての変更を保存して記録（または取り消し）してください。',
         branchExists: '同じ名前のブランチがすでにあります。',
+        branchConflict: 'この名前は既存のブランチとぶつかります。Git では、pr と pr/7 のように、あるブランチと、その名前に / を続けたブランチを両方は持てません。Git でもう一方の名前を変えるか消すか、別の名前にしてください。',
+        pullRequestBranch: 'ブランチ pr/<番号> が、別の記録を指してすでにあるため、この版を開きませんでした。ブランチはそのままです。「ローカルの変更」で切り替えるか、Git で名前を変えるか消してから、もう一度ここで開いてください。',
+        openedPullRequest: 'プルリクエスト #{number} を、ローカルブランチ {branch} で開きました。戻るときは「ローカルの変更」で {previous} に切り替えてください。',
+        openedPullRequestDetached: 'プルリクエスト #{number} を、ローカルブランチ {branch} で開きました。戻るときは「ローカルの変更」で別のブランチに切り替えてください。',
         locked: 'ほかの Git の操作が、このリポジトリを使っています（ロックファイル、またはマージ・cherry-pick・revert・rebase の途中）。終わってから、もう一度試してください。',
         branchName: 'この名前は Git のブランチ名に使えません。',
         pullUnsafe: 'GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。',

package/src/project-comparison.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect, useRef} from 'react';
+import {CloseButton} from './close-button.js';
 import {render, unmountComponentAtNode} from 'react-dom';
 import {ProjectSourceComparison} from './project-source-review.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
@@ -21,6 +22,7 @@ export interface ProjectComparisonOptions {
     sections: readonly ProjectComparisonSection[];
     /** The first action is the one the dialog focuses. Closing the dialog or pressing Escape chooses none. */
     actions: readonly ProjectComparisonAction[];
+    /** The tooltip and accessible name of the X button that closes the dialog. By default, "Close" in the locale. */
     closeLabel?: string;
     renderBlock: ProjectBlockRenderer;
     locale?: string;
@@ -32,7 +34,7 @@ export interface ProjectComparisonDialogProps extends ProjectComparisonOptions {
 const focusable = 'button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex="0"]';
 
 /** A modal that lays project comparisons side by side in sections and asks the user to choose an action. */
-export function ProjectComparisonDialog({title, description, notes = [], sections, actions, closeLabel = 'Close',
+export function ProjectComparisonDialog({title, description, notes = [], sections, actions, closeLabel,
     renderBlock, locale = 'en', onChoose}: ProjectComparisonDialogProps) {
     const dialog = useRef<HTMLDivElement>(null);
     const first = useRef<HTMLButtonElement>(null);
@@ -55,7 +57,7 @@ export function ProjectComparisonDialog({title, description, notes = [], section
             aria-label={title} onKeyDown={keyDown}>
             <header>
                 <h2>{title}</h2>
-                <button type="button" onClick={() => onChoose(null)}>{closeLabel}</button>
+                <CloseButton label={closeLabel ?? (locale.startsWith('ja') ? '閉じる' : 'Close')} onClick={() => onChoose(null)}/>
             </header>
             <div className="twgit-comparison-body">
                 {description && <p>{description}</p>}

package/src/pull-request-panel.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {createGitHubPullRequests, gitHubRepositoryFromOrigin, PullRequestError} from './github-pull-requests.js';
 import type {GitHubPullRequests} from './github-pull-requests.js';
 import {ProjectSourceReview} from './project-source-review.js';
@@ -7,6 +7,10 @@ import type {Repository} from './repository.js';
 import type {ProjectBlockLocator} from './block-diff-location.js';
 import {readProjectSourceDiff} from './project-source-patch.js';
 import type {ProjectSourceTabsFile} from './project-source-tabs.js';
+import {GitPanelError} from './filesystem.js';
+import type {GetRemoteSession} from './remote-operations.js';
+import type {ProjectSourceReviewFile} from './project-source-review.js';
+import {pullRequestBranch} from './local-operations.js';
 
 type OpenTabs = (key: string, files: readonly ProjectSourceTabsFile[], rememberAs?: string) => number;
 
@@ -20,7 +24,19 @@ const en = {
     rateLimit: 'The public GitHub API rate limit was reached. Try again after the limit resets.',
     failed: 'Could not read GitHub. Try again.', changed: 'The pull request changed while it was being read. Open it again.',
     tooManyFiles: 'GitHub only returns the first 3,000 changed files. This pull request exceeds that limit.',
-    openTabs: 'Open as tabs'
+    openTabs: 'Open as tabs',
+    session: 'Connect to GitHub again (GitHub connection) to read this pull request.',
+    forbidden: 'The GitHub connection is not allowed to read this repository.',
+    pullRequestNotFound: 'This repository has no pull request with this number.',
+    network: 'Could not reach GitHub through the connection. Check the network and try again.',
+    remoteFailed: 'Could not read the pull request through the GitHub connection. Try again.',
+    baseMissing: 'The base branch is not on GitHub. Choose another base branch.',
+    viaConnection: 'Read through the GitHub connection.',
+    listPrivate: 'The list uses the public GitHub API. Enter a pull request number to read it through the connection.',
+    noMetadata: 'The title and base branch are not available without the public GitHub API. Choose the base branch to compare with.',
+    base: 'Base branch', pullRequest: 'Pull request',
+    openLocally: 'Open here as {branch}',
+    openLocallyHint: 'Creates the local branch {branch} at this version, switches to it and opens the project, so it can be run. Unsaved edits and unrecorded changes stop it. Switch back in Local changes.'
 };
 const ja: typeof en = {
     title: 'プルリクエスト', number: 'プルリクエスト番号', openNumber: 'PR を開く',
@@ -33,33 +49,76 @@ const ja: typeof en = {
     failed: 'GitHub から取得できませんでした。再試行してください。',
     changed: '取得中にプルリクエストが更新されました。もう一度開いてください。',
     tooManyFiles: '変更ファイルが GitHub API の取得上限である 3,000 件を超えています。',
-    openTabs: 'タブで開く'
+    openTabs: 'タブで開く',
+    session: 'この PR を読むには、GitHub 接続でもう一度接続してください。',
+    forbidden: 'GitHub 接続に、このリポジトリを読む権限がありません。',
+    pullRequestNotFound: 'このリポジトリに、この番号のプルリクエストはありません。',
+    network: 'GitHub 接続で GitHub に届きませんでした。ネットワークを確認して、もう一度試してください。',
+    remoteFailed: 'GitHub 接続でプルリクエストを読めませんでした。もう一度試してください。',
+    baseMissing: 'ベースのブランチが GitHub にありません。別のベースを選んでください。',
+    viaConnection: 'GitHub 接続で取得しました。',
+    listPrivate: '一覧は公開 GitHub API を使います。番号を入れると、GitHub 接続で読みます。',
+    noMetadata: '公開 GitHub API を使えないため、題名とベースのブランチがわかりません。比べるベースのブランチを選んでください。',
+    base: 'ベースのブランチ', pullRequest: 'プルリクエスト',
+    openLocally: '{branch} として手元で開く',
+    openLocallyHint: 'この版にローカルブランチ {branch} を作って切り替え、作品を開き直して実行できるようにします。保存していない編集や記録していない変更があるときは行いません。元に戻すときは「ローカルの変更」で切り替えてください。'
 };
 
+const gitErrors = ['session', 'forbidden', 'pullRequestNotFound', 'network', 'remoteFailed', 'baseMissing', 'changed'] as const;
 function errorMessage(error: unknown, labels: typeof en) {
-    return error instanceof PullRequestError ? labels[error.code] : labels.failed;
+    if (error instanceof PullRequestError) return labels[error.code];
+    if (error instanceof GitPanelError) {
+        const code = gitErrors.find(code => code === error.code);
+        return code ? labels[code] : labels.failed;
+    }
+    return labels.failed;
+}
+
+/**
+ * Opens a pull request version fetched over the connection in the work tree: the host creates (or reuses) the local
+ * branch `pullRequestBranch(number)` at `head` and switches to it. `busy` disables the button.
+ */
+export interface PullRequestOpenLocally {
+    open(number: number, head: string): unknown;
+    busy: boolean;
+}
+
+/** The person's GitHub connection: while it is connected, pull request contents are read over Git Smart HTTP. */
+export interface PullRequestConnection {
+    getSession: GetRemoteSession;
+    connected(): boolean;
 }
 
 type Result<T> = {data: T; error?: never} | {data?: never; error: string};
 type Listing = Awaited<ReturnType<GitHubPullRequests['list']>>;
-type Pull = Awaited<ReturnType<GitHubPullRequests['load']>>;
+type Metadata = Awaited<ReturnType<GitHubPullRequests['metadata']>>;
+/** A pull request to show: from the public API, or from Git objects fetched over the connection. */
+type Pull = {
+    number: number; title: string; description: string; author?: string; state?: Metadata['state'];
+    head: {sha: string; ref: string}; base: {ref: string | null; sha: string};
+    files: readonly ProjectSourceReviewFile[]; url: string;
+    /** Set when the contents came over the connection: the branches to compare with, when the API gave no base. */
+    git?: {branches: readonly string[] | null};
+};
 
-function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}: {
+function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs, repository, connection, openLocally}: {
     name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
     locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
-    openTabs?: OpenTabs;
+    openTabs?: OpenTabs; repository: Repository; connection?: PullRequestConnection; openLocally?: PullRequestOpenLocally;
 }) {
     const client = useMemo(() => createGitHubPullRequests(name), [name]);
     const [page, setPage] = useState(1);
     const [listing, setListing] = useState<{page: number; result: Result<Listing>}>();
     const [input, setInput] = useState('');
-    const [selection, setSelection] = useState<{number: number}>();
+    const [selection, setSelection] = useState<{number: number; base?: string}>();
     const [loaded, setLoaded] = useState<{selection: NonNullable<typeof selection>; result: Result<Pull>}>();
     const list = listing?.page === page ? listing.result : undefined;
+    const [listConnected, setListConnected] = useState(false);
     const detail = loaded?.selection === selection ? loaded?.result : undefined;
     useEffect(() => {
         const controller = new AbortController();
         setListing(undefined);
+        setListConnected(!!connection?.connected());
         void client.list(page, controller.signal).then(data => {
             if (!controller.signal.aborted) setListing({page, result: {data}});
         }, error => {
@@ -70,13 +129,44 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}:
     useEffect(() => {
         if (!selection) return;
         const controller = new AbortController();
-        void client.load(selection.number, controller.signal).then(data => {
+        const load = (): Promise<Pull> => connection?.connected() ?
+            loadThroughConnection(selection.number, selection.base, controller.signal) : client.load(selection.number, controller.signal);
+        void load().then(data => {
             if (!controller.signal.aborted) setLoaded({selection, result: {data}});
         }, error => {
             if (!controller.signal.aborted) setLoaded({selection, result: {error: errorMessage(error, labels)}});
         });
         return () => controller.abort();
     }, [client, selection, labels]);
+    const fetched = useRef<{number: number; head: string; branches: readonly string[]; defaultBranch: string | null}>();
+    /**
+     * Fetches `refs/pull/<number>/head` and the branches over Git Smart HTTP and compares them from local objects. The
+     * public API only adds the title, description and base when it can read the repository; the contents never come
+     * from it, so a private repository is read only through the connection.
+     */
+    const loadThroughConnection = async (number: number, chosenBase: string | undefined, signal: AbortSignal): Promise<Pull> => {
+        const guard = () => {if (signal.aborted) throw new GitPanelError('changed');};
+        let head: string, branches: readonly string[], defaultBranch: string | null, metadata: Metadata | null = null;
+        if (chosenBase !== undefined && fetched.current?.number === number) {
+            ({head, branches, defaultBranch} = fetched.current);
+        } else {
+            metadata = await client.metadata(number, signal).catch(error => {
+                if (signal.aborted) throw error;
+                return null;
+            });
+            const result = await repository.fetchPullRequest(number, connection!.getSession, guard, signal);
+            if (metadata && metadata.head.sha !== result.head) throw new PullRequestError('changed');
+            ({head, branches, defaultBranch} = result);
+            fetched.current = {number, head, branches, defaultBranch};
+        }
+        const branch = chosenBase ?? metadata?.base.ref ?? defaultBranch ?? branches[0];
+        const read = await repository.readPullRequest(head, {sha: metadata?.base.sha, branch});
+        guard();
+        return {number, title: metadata?.title ?? `${labels.pullRequest} #${number}`, description: metadata?.description ?? '',
+            author: metadata?.author, state: metadata?.state, head: {sha: head, ref: metadata?.head.ref ?? `pull/${number}/head`},
+            base: read.base, files: read.files, url: 'https://github.com/' + name + '/pull/' + number,
+            git: {branches: metadata ? null : branches}};
+    };
     const choose = (number: number) => {
         if (!Number.isSafeInteger(number) || number < 1) return;
         setSelection({number});
@@ -93,7 +183,8 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}:
                 <button type="submit">{labels.openNumber}</button>
             </form>
             {!list && <p role="status">{labels.loading}</p>}
-            {list?.error && <p role="alert">{list.error}</p>}
+            {list?.error && (listConnected && list.error === labels.unavailable ?
+                <p role="status">{labels.listPrivate}</p> : <p role="alert">{list.error}</p>)}
             {list?.data && <>
                 {!list.data.items.length && <p>{labels.empty}</p>}
                 <ul>{list.data.items.map(item => <li key={item.number}>
@@ -112,9 +203,13 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}:
             {detail?.error && <p role="alert">{detail.error}</p>}
             {pr && <>
                 <p className="twgit-pr-revision">
-                    <strong>#{pr.number} · {labels[pr.state]}</strong>
+                    <strong>#{pr.number}{pr.state && <> · {labels[pr.state]}</>}</strong>
                     {pr.author && <span>{pr.author}</span>}
-                    <code title={pr.head.sha}>{pr.head.ref} → {pr.base.ref}</code>
+                    <code title={pr.head.sha}>{pr.head.ref} → {pr.base.ref ?? pr.base.sha.slice(0, 12)}</code>
+                    {pr.git?.branches && <label>{labels.base} <select data-git-pr-base="" value={pr.base.ref ?? ''}
+                        onChange={event => setSelection({number: pr.number, base: event.currentTarget.value})}>
+                        {pr.git.branches.map(branch => <option key={branch} value={branch}>{branch}</option>)}
+                    </select></label>}
                     <a href={pr.url} target="_blank" rel="noreferrer">{labels.onGitHub}</a>
                     {openTabs && <button type="button" data-git-open-tabs="" onClick={() => openTabs(`${name}#${pr.number}@${pr.head.sha}`,
                         pr.files.flatMap(file => {
@@ -128,7 +223,12 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}:
                             return projects ? [{path: file.path, before: projects[0], after: projects[1], loadAsset: file.loadAsset,
                                 locateBlock: locateFor?.(file.path, pr.head.sha)}] : [];
                         }), `${name}#${pr.number}`)}>{labels.openTabs}</button>}
+                    {pr.git && openLocally && <button type="button" data-git-open-pr-locally="" disabled={openLocally.busy}
+                        title={labels.openLocallyHint.replace('{branch}', pullRequestBranch(pr.number))}
+                        onClick={() => void openLocally.open(pr.number, pr.head.sha)}>
+                        {labels.openLocally.replace('{branch}', pullRequestBranch(pr.number))}</button>}
                 </p>
+                {pr.git && <p className="twgit-context" role="status">{labels.viaConnection}{pr.git.branches && <> {labels.noMetadata}</>}</p>}
                 <ProjectSourceReview title={pr.title} description={pr.description} files={locateFor ? pr.files.map(file => 'patch' in file ? {...file, locateBlock: locateFor(file.path, pr.head.sha)} : file) : pr.files}
                     renderBlock={renderBlock} locale={locale} rememberAs={`${name}#${pr.number}`}/>
             </>}
@@ -136,8 +236,18 @@ function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}:
     </div>;
 }
 
-export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor, openTabs}: {
+export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor, openTabs, connection, openLocally}: {
     repository: Repository; locale: string; renderBlock: ProjectBlockRenderer;
+    /**
+     * While connected, pull request contents are fetched over Git Smart HTTP (`refs/pull/<number>/head`) and compared
+     * from local Git objects, so private repositories can be reviewed. Without it, the public GitHub API is read.
+     */
+    connection?: PullRequestConnection;
+    /**
+     * Offers to open a pull request read over the connection in the work tree, on the branch `pr/<number>`. Pull
+     * requests read from the public API have no local objects, so the button is not shown for them.
+     */
+    openLocally?: PullRequestOpenLocally;
     /** Opens a pull request's project changes as tabs of the host's layout. */
     openTabs?: OpenTabs;
     /** Returns a locator for a project file whose PR head matches the open project, or `undefined`. */
@@ -156,5 +266,6 @@ export function PullRequestReviewPanel({repository, locale, renderBlock, locateF
     }, [repository]);
     if (origin?.repository !== repository) return <p role="status" className="twgit-context">{labels.loading}</p>;
     if (!origin.name) return <p className="twgit-context" role="status">{origin.failed ? labels.failed : labels.noOrigin}</p>;
-    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor} openTabs={openTabs}/>;
+    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor} openTabs={openTabs}
+        repository={repository} connection={connection} openLocally={openLocally}/>;
 }

package/src/remote-operations.ts

@@ -8,6 +8,89 @@ export type RemoteOperation = 'fetch' | 'pull' | 'push';
 export type RemoteSession = NonNullable<Awaited<ReturnType<GitSmartHttpOptions['getSession']>>>;
 export type GetRemoteSession = (remote: string, write: boolean) => Promise<RemoteSession | null>;
 
+type GitOptions = {fs: ReturnType<typeof createMutationFs>['fs']; dir: string; gitdir: string; cache: object};
+const sessionCodes = ['SESSION_REQUIRED', 'SESSION_UNAVAILABLE', 'SESSION_EXPIRED', 'REAUTH_REQUIRED', 'INVALID_SESSION'];
+
+// Fetch writes remote-tracking refs through these refspecs; anything else could land a ref outside refs/remotes/origin.
+async function checkRefspecs(options: GitOptions) {
+    const refspecs = await git.getConfigAll({...options, path: 'remote.origin.fetch'});
+    if (refspecs.some(spec => !/^\+?refs\/heads\/[^:\s]+:refs\/remotes\/origin\/[^:\s]+$/u.test(spec)))
+        throw new GitPanelError('unsupported');
+}
+
+/**
+ * Where a fetched pull request head is kept: outside `refs/heads`, `refs/remotes` and `refs/tags`, so Git CLI lists it
+ * with `git for-each-ref refs/pull` and `git log --all` but not as a branch or tag, `git fetch --prune` leaves it alone,
+ * and `git gc` keeps its objects. Each fetch of the same pull request replaces it.
+ */
+export const pullRequestRef = (number: number) => `refs/pull/origin/${number}/head`;
+
+export interface PullRequestFetch {
+    readonly number: number;
+    /** The commit at GitHub's `refs/pull/<number>/head`, kept locally at `ref`. */
+    readonly head: string;
+    readonly ref: string;
+    /** GitHub's default branch, from the advertised `HEAD`, or `null` when it is not advertised. */
+    readonly defaultBranch: string | null;
+    /** The branches on GitHub, as `refs/remotes/origin/<name>` after this fetch. */
+    readonly branches: readonly string[];
+}
+
+/**
+ * Fetches GitHub's `refs/pull/<number>/head` together with every branch, over the connection's Git Smart HTTP, like
+ * `git fetch origin refs/pull/<number>/head`. The branches update `refs/remotes/origin/*` as fetch does, and the head
+ * is kept at `pullRequestRef(number)`. The work tree, the index, HEAD and `.git/config` are never written. The writes
+ * are staged first and applied together, under the same lock as fetch, pull and push.
+ */
+export async function runPullRequestFetch(root: FileSystemDirectoryHandle, number: number,
+    getSession: GetRemoteSession, guard: () => void, signal?: AbortSignal): Promise<PullRequestFetch> {
+    if (!Number.isSafeInteger(number) || number < 1) throw new GitPanelError('pullRequestNotFound');
+    const execute = async () => {
+        guard();
+        const transaction = createMutationFs(root, false);
+        const options = {fs: transaction.fs, dir: '/', gitdir: '/.git', cache: {}};
+        const remote = await git.getConfig({...options, path: 'remote.origin.url'});
+        if (typeof remote !== 'string') throw new GitPanelError('session');
+        await checkRefspecs(options);
+        const session = await getSession(remote, false);
+        if (!session) throw new GitPanelError('session');
+        guard();
+        const transport = createGitSmartHttp({remote, connection: session.connection,
+            getSession: () => getSession(remote, false), signal});
+        const source = `refs/pull/${number}/head`;
+        let result: Awaited<ReturnType<typeof git.fetch>>;
+        try {
+            result = await git.fetch({...options, ...transport, remote: 'origin', remoteRef: source, tags: false});
+        } catch (error) {
+            const {code, data} = error as {code?: string; data?: {what?: string}};
+            // isomorphic-git resolves the wanted ref against the advertisement before it sends any request for objects.
+            if (code === 'NotFoundError' && data?.what === source) throw new GitPanelError('pullRequestNotFound');
+            throw remoteError(error);
+        }
+        const head = result.fetchHead;
+        if (!head || !/^[0-9a-f]{40}$/u.test(head)) throw new GitPanelError('remoteFailed');
+        const ref = pullRequestRef(number);
+        await git.writeRef({...options, ref, value: head, force: true});
+        const branches = (await git.listBranches({...options, remote: 'origin'})).filter(name => name !== 'HEAD').sort();
+        const advertised = result.defaultBranch?.startsWith('refs/heads/') ? result.defaultBranch.slice(11) : null;
+        await transaction.commit(guard);
+        return {number, head, ref, defaultBranch: advertised && branches.includes(advertised) ? advertised : null, branches};
+    };
+    return globalThis.navigator?.locks ? navigator.locks.request('tw-plus-git-mutation', execute) : execute();
+}
+
+/** Maps a failed read from GitHub to what the person can act on: the connection, access, or the network. */
+function remoteError(error: unknown) {
+    if (error instanceof GitPanelError) return error;
+    if (error instanceof GitSmartHttpError) {
+        if (sessionCodes.includes(error.code)) return new GitPanelError('session');
+        if (error.code === 'FORBIDDEN') return new GitPanelError('forbidden');
+        if (['NETWORK_ERROR', 'UPSTREAM_FAILURE', 'UPSTREAM_TIMEOUT', 'RATE_LIMITED'].includes(error.code))
+            return new GitPanelError('network');
+    }
+    return new GitPanelError('remoteFailed');
+}
+
 export async function runRemoteOperation(root: FileSystemDirectoryHandle, operation: RemoteOperation,
     getSession: GetRemoteSession, guard: () => void, signal?: AbortSignal) {
     const execute = async () => {
@@ -23,9 +106,7 @@ export async function runRemoteOperation(root: FileSystemDirectoryHandle, operat
         const trackingRef = await config('branch.' + ref + '.merge');
         if ((trackingRemote && trackingRemote !== 'origin') || (trackingRef && !trackingRef.startsWith('refs/heads/')))
             throw new GitPanelError('unsupported');
-        const refspecs = await git.getConfigAll({...options, path: 'remote.origin.fetch'});
-        if (refspecs.some(spec => !/^\+?refs\/heads\/[^:\s]+:refs\/remotes\/origin\/[^:\s]+$/u.test(spec)))
-            throw new GitPanelError('unsupported');
+        await checkRefspecs(options);
         if (operation === 'pull') {
             if ((await git.statusMatrix({...options, refresh: false})).some(([, head, worktree, stage]) =>
                 head !== worktree || head !== stage)) throw new GitPanelError('pullUnsafe');