@kubohiroya/turbowarp-plus-editor-git 0.18.0 → 0.19.0

package/src/github-review-api.ts

@@ -0,0 +1,298 @@
+import type {GitProxySession} from '@kubohiroya/turbowarp-plus-editor-auth';
+import {checkConnection, remoteUrl} from './smart-http.js';
+
+/**
+ * The pull request review routes of the GitHub connection's proxy, under `/v1/github/<owner>/<repo>/`. The proxy keeps
+ * the GitHub token and the GitHub node IDs; this client sends only a pull request number, the compared commit, a
+ * Review-Submit-Id and the review's words, and reads back the few fields the proxy returns.
+ */
+
+export type ReviewEvent = 'COMMENT' | 'APPROVE' | 'REQUEST_CHANGES';
+export const reviewEvents: readonly ReviewEvent[] = ['COMMENT', 'APPROVE', 'REQUEST_CHANGES'];
+
+const proxyCodes = {
+    400: ['BAD_REQUEST'],
+    401: ['SESSION_REQUIRED', 'SESSION_EXPIRED', 'REAUTH_REQUIRED'],
+    403: ['FORBIDDEN'],
+    // A proxy without the route group answers 404 too, so an unnamed 404 means the route is unavailable.
+    404: ['GITHUB_API_UNAVAILABLE', 'PULL_REQUEST_NOT_FOUND'],
+    409: ['REVIEW_STEP_CONFLICT', 'REVIEW_DUPLICATE', 'PENDING_REVIEW_EXISTS', 'REDIRECT_REJECTED'],
+    411: ['LENGTH_REQUIRED'],
+    413: ['PAYLOAD_TOO_LARGE'],
+    422: ['REVIEW_REJECTED', 'REVIEW_THREAD_REJECTED'],
+    429: ['RATE_LIMITED'],
+    500: ['GITHUB_API_MISCONFIGURED'],
+    502: ['UPSTREAM_FAILURE'],
+    504: ['UPSTREAM_TIMEOUT']
+} as const;
+
+type ProxyCode = (typeof proxyCodes)[keyof typeof proxyCodes][number];
+export type GitHubReviewErrorCode = ProxyCode | 'INVALID_REMOTE' | 'INVALID_CONNECTION' | 'INVALID_SESSION' |
+    'SESSION_UNAVAILABLE' | 'NETWORK_ERROR' | 'INVALID_RESPONSE' | 'ABORTED';
+
+// Codes after which a mutation may or may not have reached GitHub.
+const unknownCodes: readonly GitHubReviewErrorCode[] = ['REVIEW_DUPLICATE', 'UPSTREAM_FAILURE', 'UPSTREAM_TIMEOUT',
+    'NETWORK_ERROR', 'INVALID_RESPONSE'];
+
+export class GitHubReviewError extends Error {
+    constructor(readonly code: GitHubReviewErrorCode, readonly options: {
+        status?: number; requestId?: string; retryAfter?: number;
+        /** A mutation was sent and GitHub may have applied it. */
+        unknown?: boolean;
+    } = {}) {
+        super(code);
+        this.name = 'GitHubReviewError';
+    }
+    get unknown() {return this.options.unknown === true;}
+    get retryAfter() {return this.options.retryAfter;}
+}
+
+const isSha = (value: unknown): value is string => typeof value === 'string' && /^[0-9a-f]{40}$/u.test(value);
+const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null && !Array.isArray(value);
+const isCount = (value: unknown, max: number): value is number => Number.isSafeInteger(value) && Number(value) >= 0 && Number(value) <= max;
+const optionalString = (value: unknown) => value === null || typeof value === 'string';
+const submitIdPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/u;
+const requestIdPattern = /^[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/iu;
+
+/** A thread path the proxy accepts: a relative path whose last element is exactly project.source.json. */
+export function isReviewThreadPath(path: string) {
+    const parts = path.split('/');
+    return parts[parts.length - 1] === 'project.source.json' && new TextEncoder().encode(path).byteLength <= 1024 &&
+        parts.every(part => part && part !== '.' && part !== '..') && !/[\\\u0000-\u001f\u007f]/u.test(path);
+}
+
+export function newReviewSubmitId() {
+    const id = crypto.randomUUID();
+    if (!submitIdPattern.test(id)) throw new GitHubReviewError('INVALID_RESPONSE');
+    return id;
+}
+
+export interface ReviewContext {
+    headRefOid: string;
+    viewer: string;
+    pendingReview: {ours: boolean; commitOid: string | null; createdAt: string} | null;
+    reviews: {state: string; commitOid: string | null; submittedAt: string | null; ours: boolean}[];
+    /** The proxy's record of the submission, when the request named one. */
+    submit?: {state: string; threads: number};
+}
+
+export interface SubmittedReview {state: string; commitOid: string; submittedAt: string; url: string}
+export interface RestReview {id: number; login: string | null; commitId: string | null; state: string; body: string}
+
+function readContext(value: unknown, withSubmit: boolean): ReviewContext {
+    if (!isRecord(value) || !isSha(value.headRefOid) || typeof value.viewer !== 'string' || !Array.isArray(value.reviews))
+        throw new GitHubReviewError('INVALID_RESPONSE');
+    let pendingReview: ReviewContext['pendingReview'] = null;
+    if (value.pendingReview !== null) {
+        const pending = value.pendingReview;
+        if (!isRecord(pending) || typeof pending.ours !== 'boolean' || !(pending.commitOid === null || isSha(pending.commitOid)) ||
+            typeof pending.createdAt !== 'string') throw new GitHubReviewError('INVALID_RESPONSE');
+        pendingReview = {ours: pending.ours, commitOid: pending.commitOid, createdAt: pending.createdAt};
+    }
+    const reviews = value.reviews.map(review => {
+        if (!isRecord(review) || typeof review.state !== 'string' || !(review.commitOid === null || isSha(review.commitOid)) ||
+            !optionalString(review.submittedAt) || typeof review.ours !== 'boolean') throw new GitHubReviewError('INVALID_RESPONSE');
+        return {state: review.state, commitOid: review.commitOid as string | null, submittedAt: review.submittedAt as string | null,
+            ours: review.ours};
+    });
+    const context: ReviewContext = {headRefOid: value.headRefOid, viewer: value.viewer, pendingReview, reviews};
+    if (withSubmit) {
+        const submit = value.submit;
+        if (!isRecord(submit) || typeof submit.state !== 'string' || !isCount(submit.threads, 50))
+            throw new GitHubReviewError('INVALID_RESPONSE');
+        context.submit = {state: submit.state, threads: submit.threads};
+    }
+    return context;
+}
+
+async function readBounded(response: Response, limit: number) {
+    if (!response.body) return '';
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder('utf-8', {fatal: true});
+    let text = '', size = 0;
+    try {
+        for (;;) {
+            const {done, value} = await reader.read();
+            if (done) return text + decoder.decode();
+            size += value.byteLength;
+            if (size > limit) throw new GitHubReviewError('INVALID_RESPONSE');
+            text += decoder.decode(value, {stream: true});
+        }
+    } finally {
+        void reader.cancel().catch(() => {});
+    }
+}
+
+export interface GitHubReviewApiOptions {
+    /** The repository's GitHub HTTPS remote, as the connection was made for it. */
+    readonly remote: string;
+    /** The connection's session for `remote`; review calls ask for the review grant. */
+    readonly getSession: (remote: string, write: boolean, review?: boolean) => Promise<GitProxySession | null>;
+    readonly fetch?: typeof fetch;
+}
+
+export function createGitHubReviewApi({remote, getSession, fetch: send = (...args) => fetch(...args)}: GitHubReviewApiOptions) {
+    let path: string;
+    try {
+        path = '/v1/github' + remoteUrl(remote).slice('https://github.com'.length).replace(/\.git$/u, '');
+    } catch {
+        throw new GitHubReviewError('INVALID_REMOTE');
+    }
+    /** What the proxy answered about each route group: `false` after `404 GITHUB_API_UNAVAILABLE`. */
+    const available: {threads?: boolean; body?: boolean} = {};
+    let account: string | null = null;
+
+    async function session(review: boolean) {
+        let value: GitProxySession | null;
+        try {
+            value = await getSession(remote, false, review);
+        } catch {
+            throw new GitHubReviewError('SESSION_UNAVAILABLE');
+        }
+        if (!value) throw new GitHubReviewError('SESSION_REQUIRED');
+        if (!Number.isFinite(value.expiresAt) || value.expiresAt <= Date.now()) throw new GitHubReviewError('SESSION_EXPIRED');
+        try {
+            checkConnection(value.connection);
+        } catch {
+            throw new GitHubReviewError('INVALID_CONNECTION');
+        }
+        if (typeof value.bearer !== 'string' || !/^[A-Za-z0-9._~+\/-]+=*$/u.test(value.bearer))
+            throw new GitHubReviewError('INVALID_SESSION');
+        account = typeof value.account?.login === 'string' ? value.account.login : null;
+        return value;
+    }
+
+    async function call(route: string, {method = 'GET', body, submitId, review = false, mutation = false, limit = 256 * 1024,
+        group, signal}: {
+        method?: 'GET' | 'POST'; body?: unknown; submitId?: string; review?: boolean; mutation?: boolean; limit?: number;
+        group: 'threads' | 'body' | 'read'; signal?: AbortSignal;
+    }): Promise<unknown> {
+        if (signal?.aborted) throw new GitHubReviewError('ABORTED');
+        const current = await session(review);
+        const headers: Record<string, string> = {Authorization: 'Bearer ' + current.bearer, Accept: 'application/json'};
+        if (body !== undefined) headers['Content-Type'] = 'application/json';
+        if (submitId !== undefined) {
+            if (!submitIdPattern.test(submitId)) throw new GitHubReviewError('BAD_REQUEST');
+            headers['Review-Submit-Id'] = submitId;
+        }
+        let response: Response;
+        try {
+            response = await send(current.connection.proxyOrigin + path + route, {
+                method, headers, body: body === undefined ? undefined : JSON.stringify(body), signal,
+                credentials: 'omit', redirect: 'error', cache: 'no-store', referrerPolicy: 'no-referrer'
+            });
+        } catch {
+            if (!mutation && signal?.aborted) throw new GitHubReviewError('ABORTED');
+            throw new GitHubReviewError('NETWORK_ERROR', {unknown: mutation});
+        }
+        const json = response.headers.get('content-type')?.split(';')[0].trim() === 'application/json';
+        if (response.status !== 200) {
+            const allowed: readonly ProxyCode[] | undefined = proxyCodes[response.status as keyof typeof proxyCodes];
+            let code: GitHubReviewErrorCode = allowed?.[0] ?? 'INVALID_RESPONSE';
+            let requestId: string | undefined, retryAfter: number | undefined;
+            try {
+                const parsed: unknown = json ? JSON.parse(await readBounded(response, 4096)) : null;
+                if (isRecord(parsed)) {
+                    if (allowed?.includes(parsed.code as ProxyCode)) code = parsed.code as ProxyCode;
+                    if (typeof parsed.requestId === 'string' && requestIdPattern.test(parsed.requestId)) requestId = parsed.requestId;
+                    if (Number.isSafeInteger(parsed.retryAfter) && Number(parsed.retryAfter) >= 0) retryAfter = Number(parsed.retryAfter);
+                }
+            } catch {
+                // An untrusted error body never becomes part of a client error.
+            }
+            if (code === 'GITHUB_API_UNAVAILABLE' && group !== 'read') available[group] = false;
+            if (code === 'GITHUB_API_UNAVAILABLE' && group === 'read') available.threads = false;
+            const unknown = mutation && (unknownCodes.includes(code) || !allowed);
+            throw new GitHubReviewError(unknown && !allowed ? 'UPSTREAM_FAILURE' : code,
+                {status: response.status, requestId, retryAfter, unknown});
+        }
+        if (group !== 'read') available[group] = true;
+        try {
+            if (!json) throw new Error();
+            return JSON.parse(await readBounded(response, limit));
+        } catch {
+            throw new GitHubReviewError('INVALID_RESPONSE', {unknown: mutation});
+        }
+    }
+
+    const checkNumber = (number: number) => {
+        if (!Number.isSafeInteger(number) || number < 1 || number > 2147483647) throw new GitHubReviewError('BAD_REQUEST');
+    };
+    const graphql = (operation: string, number: number, variables: Record<string, unknown>, submitId: string | undefined,
+        signal: AbortSignal | undefined, mutation = true) => {
+        checkNumber(number);
+        return call('/graphql/' + operation, {method: 'POST', body: {number, ...variables}, submitId, review: mutation, mutation,
+            group: mutation ? 'threads' : 'read', signal});
+    };
+    const shape = <T>(check: boolean, value: T, mutation = true): T => {
+        if (!check) throw new GitHubReviewError('INVALID_RESPONSE', {unknown: mutation});
+        return value;
+    };
+
+    return {
+        available,
+        /** The GitHub login of the last session this client used. */
+        account: () => account,
+        /** Reads the viewer's pending and recent reviews; with `submitId`, resolves that submission's unknown outcome. */
+        async context(number: number, submitId?: string, signal?: AbortSignal) {
+            const value = await graphql('pullRequestReviewContext', number, {}, submitId, signal, false);
+            const context = readContext(value, submitId !== undefined);
+            available.threads = true;
+            return context;
+        },
+        /** Step 1: a pending review on `commitOid`. */
+        async start(number: number, submitId: string, commitOid: string, signal?: AbortSignal) {
+            if (!isSha(commitOid)) throw new GitHubReviewError('BAD_REQUEST');
+            const value = await graphql('addPullRequestReview', number, {commitOid}, submitId, signal);
+            shape(isRecord(value) && value.state === 'PENDING' && value.commitOid === commitOid, value);
+        },
+        /** Step 2: one file-level thread on a project.source.json; resolves the number of threads the proxy has accepted. */
+        async thread(number: number, submitId: string, threadIndex: number, threadPath: string, body: string, signal?: AbortSignal) {
+            if (!isCount(threadIndex, 49) || !isReviewThreadPath(threadPath) || !body || body.length > 65536)
+                throw new GitHubReviewError('BAD_REQUEST');
+            const value = await graphql('addPullRequestReviewThread', number, {threadIndex, path: threadPath, body}, submitId, signal);
+            return shape(isRecord(value) && value.threads === threadIndex + 1, threadIndex + 1);
+        },
+        /** Step 3: publishes the pending review. */
+        async submit(number: number, submitId: string, threadCount: number, event: ReviewEvent, body: string, signal?: AbortSignal) {
+            if (!isCount(threadCount, 50) || !reviewEvents.includes(event) || body.length > 65536)
+                throw new GitHubReviewError('BAD_REQUEST');
+            const value = await graphql('submitPullRequestReview', number, {threadCount, event, body}, submitId, signal);
+            const review = (isRecord(value) ? value : {}) as Partial<Record<keyof SubmittedReview, unknown>>;
+            return shape(typeof review.state === 'string' && review.state !== 'PENDING' && isSha(review.commitOid) &&
+                typeof review.submittedAt === 'string' && typeof review.url === 'string', review as SubmittedReview);
+        },
+        /** Removes the pending review of the submission. */
+        async discard(number: number, submitId: string, signal?: AbortSignal) {
+            const value = await graphql('deletePullRequestReview', number, {}, submitId, signal);
+            shape(isRecord(value) && value.deleted === true, value);
+        },
+        /** The review-body route: one page of the pull request's reviews, oldest first. */
+        async reviews(number: number, page: number, signal?: AbortSignal): Promise<RestReview[]> {
+            checkNumber(number);
+            if (!Number.isSafeInteger(page) || page < 1 || page > 10) throw new GitHubReviewError('BAD_REQUEST');
+            const value = await call(`/pulls/${number}/reviews?page=${page}`, {group: 'body', limit: 4 * 1024 * 1024, signal});
+            if (!Array.isArray(value)) throw new GitHubReviewError('INVALID_RESPONSE');
+            return value.map(review => {
+                if (!isRecord(review) || !Number.isSafeInteger(review.id) || typeof review.state !== 'string' ||
+                    !(review.commit_id === null || isSha(review.commit_id)) || !optionalString(review.body))
+                    throw new GitHubReviewError('INVALID_RESPONSE');
+                const login = isRecord(review.user) && typeof review.user.login === 'string' ? review.user.login : null;
+                return {id: Number(review.id), login, commitId: review.commit_id as string | null, state: review.state,
+                    body: typeof review.body === 'string' ? review.body : ''};
+            });
+        },
+        /** The review-body route: creates and publishes a review with a body only. */
+        async create(number: number, submitId: string, commitOid: string, event: ReviewEvent, body: string, signal?: AbortSignal) {
+            checkNumber(number);
+            if (!isSha(commitOid) || !reviewEvents.includes(event) || body.length > 65536 || (!body && event !== 'APPROVE'))
+                throw new GitHubReviewError('BAD_REQUEST');
+            const value = await call(`/pulls/${number}/reviews`, {method: 'POST', body: {commit_id: commitOid, event, body},
+                submitId, review: true, mutation: true, group: 'body', limit: 1024 * 1024, signal});
+            return shape(isRecord(value) && typeof value.state === 'string' && typeof value.html_url === 'string',
+                {url: (value as {html_url: string}).html_url});
+        }
+    };
+}
+
+export type GitHubReviewApi = ReturnType<typeof createGitHubReviewApi>;

package/src/index.tsx

@@ -6,7 +6,9 @@ import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLab
 import type {ChangedFile} from './project-change-model.js';
 import {openRepository} from './repository.js';
 import type {BranchRefs, Repository, Snapshot, FileChange, FileDiff, ChangeGroup, HistoryCommit, HistoryCursor} from './repository.js';
-import {BranchButton} from './branch-button.js';
+import {BranchButton, useBranchSnackbar} from './branch-button.js';
+import {changeMarks} from './change-marks.js';
+import type {ChangeMark} from './change-marks.js';
 import type {BranchButtonState} from './branch-button.js';
 import {HistoryGraph} from './history-graph-view.js';
 import type {HistoryActionResult} from './history-graph-view.js';
@@ -43,6 +45,8 @@ 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 {changeMarks} from './change-marks.js';
+export type {ChangeMark} from './change-marks.js';
 export type {GitAuthor, LocalOperation} from './local-operations.js';
 export {pullRequestBranch} from './local-operations.js';
 
@@ -89,9 +93,14 @@ interface Controller {
     /** Asks for a repository, then opens the panel on it. */
     choose(locale: string): Promise<void>;
     changeBranch(operation: BranchOperation): Promise<HistoryActionResult>;
+    /** Reloads the project folder selected in the panel, as Reload Project does. */
+    reload(): void;
     /** What the branch buttons show. */
     branch: BranchButtonState;
-    publish(state: BranchButtonState): void;
+    /** The chosen repository and its last snapshot, published with `branch`. */
+    repository: Repository | null;
+    snapshot: Snapshot | null;
+    publish(state: BranchButtonState, repository: Repository | null, snapshot: Snapshot | null): void;
     /** Follows `branch`. While anything follows it, the closed panel keeps watching the branches. */
     follow(listener: () => void): () => void;
     /** How many follow `branch`. */
@@ -102,10 +111,15 @@ interface Controller {
 function createController(): Controller {
     const listeners = new Set<() => void>();
     const controller: Controller = {
-        open() {}, async refresh() {}, async choose() {}, async changeBranch() {return {done: false};},
-        branch: {repository: false, branch: undefined, head: null, branches: [], remoteBranches: [], writable: false, busy: false},
-        publish(state) {
+        open() {}, async refresh() {}, async choose() {}, async changeBranch() {return {done: false};}, reload() {},
+        branch: {repository: false, branch: undefined, head: null, branches: [], remoteBranches: [], writable: false, busy: false,
+            project: false},
+        repository: null,
+        snapshot: null,
+        publish(state, repository, snapshot) {
             controller.branch = state;
+            controller.repository = repository;
+            controller.snapshot = snapshot;
             for (const listener of [...listeners]) listener();
         },
         follow(listener) {
@@ -450,7 +464,8 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     const pullRequestConnection = useMemo(() => {
         const settings = host.connectionSettings;
         const getSession = settings?.getSession;
-        return getSession ? {getSession, connected: () => settings.getView().state.status === 'connected'} : undefined;
+        return getSession ? {getSession, connected: () => settings.getView().state.status === 'connected',
+            reviewGranted: () => settings.getView().review === true} : undefined;
     }, [host]);
     const [message, setMessage] = useState('');
     const localOperation = (operation: LocalOperation, notice?: string) => {
@@ -552,6 +567,9 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     const loadAsset = useMemo(() => state.repository && state.snapshot && state.selected ?
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
     controller.changeBranch = changeBranch;
+    controller.reload = () => {
+        if (current.current.project !== null) void openProject(current.current.project);
+    };
     controller.choose = async language => {
         setLocale(language);
         const before = current.current.repository;
@@ -560,9 +578,10 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         if (!result.done && result.error || current.current.repository !== before) controller.open(language);
     };
     const branchState: BranchButtonState = {repository: !!state.repository, branch: refs?.branch, head: refs?.head ?? null,
-        branches: refs?.branches ?? [], remoteBranches: refs?.remoteBranches ?? [], writable: !!host.localWrite && !!refs, busy: state.busy};
+        branches: refs?.branches ?? [], remoteBranches: refs?.remoteBranches ?? [], writable: !!host.localWrite && !!refs, busy: state.busy,
+        project: state.project !== null};
     const published = JSON.stringify(branchState);
-    useEffect(() => controller.publish(branchState), [published]);
+    useEffect(() => controller.publish(branchState, state.repository, state.snapshot), [published, state.repository, state.snapshot]);
     if (!shown) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
     // Branches can be switched and created whenever writes are allowed and the repository has been read.
@@ -768,14 +787,18 @@ export function mountGitPanel({vm, document, host}: {vm: object; document: Docum
 }
 
 /** The branch button of the panel mounted for `vm`, or nothing while no panel is mounted for it. */
-function BranchEntry({vm, locale}: {vm: object; locale: string}) {
+/** Calls `listener` with the controller of the panel mounted for `vm`, now and whenever it is mounted or disposed. */
+function findController(vm: object, listener: (controller: Controller | undefined) => void) {
+    const update = () => listener(controllers.get(vm));
+    registrations.add(update);
+    update();
+    return () => {registrations.delete(update);};
+}
+
+/** The panel mounted for `vm` and what it last published. Following it keeps the closed panel watching the branches. */
+function useController(vm: object) {
     const [controller, setController] = useState(() => controllers.get(vm));
-    useEffect(() => {
-        const update = () => setController(controllers.get(vm));
-        registrations.add(update);
-        update();
-        return () => {registrations.delete(update);};
-    }, [vm]);
+    useEffect(() => findController(vm, setController), [vm]);
     const [state, setState] = useState(controller?.branch);
     useEffect(() => {
         if (!controller) return;
@@ -783,8 +806,14 @@ function BranchEntry({vm, locale}: {vm: object; locale: string}) {
         update();
         return controller.follow(update);
     }, [controller]);
+    return {controller, state};
+}
+
+function BranchEntry({vm, locale}: {vm: object; locale: string}) {
+    const {controller, state} = useController(vm);
     if (!controller || !state) return null;
     return <BranchButton state={state} locale={locale} open={() => controller.open(locale)} choose={() => void controller.choose(locale)}
+        reload={() => controller.reload()}
         switchBranch={name => controller.changeBranch({kind: 'switchBranch', name})}
         createBranch={(name, checkout) => controller.changeBranch({kind: 'createBranch', name, checkout})}
         createFromRemote={name => controller.changeBranch({kind: 'createBranch', name, fromRemote: true, checkout: true})}/>;
@@ -799,3 +828,112 @@ export function renderBranchButton(createElement: (component: any, props: any, .
     {vm, locale = 'en'}: {vm: object; locale?: string}) {
     return createElement(BranchEntry, {vm, locale});
 }
+
+type History = {commits: HistoryCommit[]; cursor: HistoryCursor | null; loading: boolean; failed: boolean};
+
+/** The history of the panel's repository, read again whenever its branches move. */
+function HistoryEntry({vm, locale}: {vm: object; locale: string}) {
+    const {controller, state} = useController(vm);
+    const labels = labelsFor(locale);
+    const repository = state && controller?.repository || null;
+    const [history, setHistory] = useState<History>({commits: [], cursor: null, loading: false, failed: false});
+    const [selected, setSelected] = useState<string | null>(null);
+    const ticket = useRef(0);
+    const root = useRef<HTMLDivElement>(null);
+    const refs = state ? [state.head, ...state.branches, '', ...state.remoteBranches].join('\n') : '';
+    useEffect(() => {
+        const current = ++ticket.current;
+        if (!repository) {
+            setHistory({commits: [], cursor: null, loading: false, failed: false});
+            return;
+        }
+        // The rows read before stay until the new page arrives, so focus in the list is kept.
+        setHistory(previous => ({...previous, cursor: null, loading: true, failed: false}));
+        repository.history().then(page => {
+            if (ticket.current === current) setHistory({commits: page.commits, cursor: page.cursor, loading: false, failed: false});
+        }, () => {
+            if (ticket.current === current) setHistory({commits: [], cursor: null, loading: false, failed: true});
+        });
+    }, [repository, refs]);
+    const showMore = () => {
+        if (!repository || !history.cursor || history.loading) return;
+        const current = ticket.current;
+        setHistory(previous => ({...previous, loading: true}));
+        repository.history({after: history.cursor}).then(page => {
+            if (ticket.current === current) setHistory(previous => ({commits: [...previous.commits, ...page.commits],
+                cursor: page.cursor, loading: false, failed: false}));
+        }, () => {
+            if (ticket.current === current) setHistory(previous => ({...previous, cursor: null, loading: false, failed: true}));
+        });
+    };
+    const {report, element: snackbar} = useBranchSnackbar(locale, !!state?.project, {
+        open: () => controller?.open(locale), reload: () => controller?.reload()
+    }, () => root.current?.querySelector<HTMLElement>('[tabindex="0"]')?.focus({preventScroll: true}));
+    if (!controller || !state) return null;
+    if (!repository) return <div className="twgit-history-view" ref={root}>
+        <p>{labels.historyViewEmpty}</p>
+        <button type="button" onClick={() => void controller.choose(locale)}>{labels.choose}</button>
+    </div>;
+    const change = async (operation: BranchOperation) => {
+        const result = await controller.changeBranch(operation);
+        report(result, operation.kind === 'switchBranch' || !!operation.checkout);
+        return result;
+    };
+    return <div className="twgit-history-view" ref={root}>
+        <HistoryGraph commits={history.commits} selected={selected} locale={locale} busy={state.busy} onSelect={setSelected}
+            hasMore={!!history.cursor} loadingMore={history.loading} onShowMore={showMore} localBranches={state.branches}
+            {...state.writable ? {
+                // A refused create stays in the graph's form with its reason; only a done one is told in the snackbar.
+                onCreateBranch: async (oid: string, name: string, checkout: boolean) => {
+                    const result = await controller.changeBranch({kind: 'createBranch', name, at: oid, checkout});
+                    if (result.done) report(result, checkout);
+                    return result;
+                },
+                onSwitchBranch: (name: string) => change({kind: 'switchBranch', name}),
+                onCreateFromRemote: (name: string) => change({kind: 'createBranch', name, fromRemote: true, checkout: true})
+            } : {}}/>
+        {history.loading && !history.commits.length && <p role="status">{labels.historyLoading}</p>}
+        {history.failed && <p>{labels.historyFailed}</p>}
+        {snackbar}
+    </div>;
+}
+
+/**
+ * Renders the history graph of the repository chosen in the panel mounted for `vm`, for a side panel of the host. It
+ * follows branch changes made anywhere, offers the graph's branch actions when the panel allows writes and tells their
+ * results in the branch button's snackbar. Before a repository is chosen it offers to choose one; it renders nothing
+ * while no panel is mounted for `vm`.
+ */
+export function renderHistoryView(createElement: (component: any, props: any, ...children: any[]) => any,
+    {vm, locale = 'en'}: {vm: object; locale?: string}) {
+    return createElement(HistoryEntry, {vm, locale});
+}
+
+/**
+ * Follows the Git status of the files under `directory`, as the panel mounted for `vm` last read it, and calls
+ * `listener` with their marks by path relative to `directory`. The marks are empty while no repository is chosen or
+ * `directory` is outside it. Returns the function that stops following.
+ */
+export function followChangeMarks(vm: object, directory: FileSystemDirectoryHandle,
+    listener: (marks: ReadonlyMap<string, ChangeMark>) => void) {
+    let stopped = false;
+    let read: Snapshot | null | undefined;
+    let unfollow = () => {};
+    const update = async (controller: Controller | undefined) => {
+        const {repository, snapshot} = controller ?? {repository: null, snapshot: null};
+        if (snapshot === read) return;
+        read = snapshot;
+        const path = repository && snapshot ? await repository.root.resolve(directory).catch(() => null) : null;
+        if (!stopped && read === snapshot) listener(path ? changeMarks(snapshot!.changes, path.join('/')) : new Map());
+    };
+    const unregister = findController(vm, controller => {
+        unfollow();
+        unfollow = controller ? controller.follow(() => void update(controller)) : () => {};
+        void update(controller);
+    });
+    return () => {
+        stopped = true;
+        unregister();
+        unfollow();
+    };
+}

package/src/messages.ts

@@ -55,7 +55,8 @@ export const messages = {
         historyActions: 'Actions', historyCreateHere: 'Create branch here…', historySwitch: 'Switch to {name}',
         historyCreateFromRemote: 'Create and switch to {name}', historyCopy: 'Copy commit ID', historyCopied: 'Copied the commit ID.',
         historyCopyFailed: 'Could not copy the commit ID.', historyRefs: 'Branches', cancel: 'Cancel',
-        branchMenu: 'Branches', openPanel: 'Open Local Git', newBranchItem: 'New Branch…', newBranchTitle: 'New Branch'
+        branchMenu: 'Branches', openPanel: 'Open Local Git', newBranchItem: 'New Branch…', newBranchTitle: 'New Branch',
+        switchedShort: 'Switched branches.', historyViewEmpty: 'Choose a Git repository to show its history here.'
     },
     ja: {
         pullRequests: 'プルリクエスト', localChanges: 'ローカルの変更',
@@ -113,8 +114,81 @@ export const messages = {
         historyActions: '操作', historyCreateHere: 'ここからブランチを作る…', historySwitch: '{name} に切り替える',
         historyCreateFromRemote: '{name} を作って切り替える', historyCopy: 'コミットの ID をコピー', historyCopied: 'コミットの ID をコピーしました。',
         historyCopyFailed: 'コミットの ID をコピーできませんでした。', historyRefs: 'ブランチ', cancel: 'キャンセル',
-        branchMenu: 'ブランチ', openPanel: 'ローカル Git を開く', newBranchItem: '新しいブランチ…', newBranchTitle: '新しいブランチ'
+        branchMenu: 'ブランチ', openPanel: 'ローカル Git を開く', newBranchItem: '新しいブランチ…', newBranchTitle: '新しいブランチ',
+        switchedShort: 'ブランチを切り替えました。', historyViewEmpty: 'Git リポジトリを選ぶと、ここに履歴を表示します。'
     }
 };
 export type Labels = typeof messages.en;
 export const labelsFor = (locale: string): Labels => locale.startsWith('ja') ? messages.ja : messages.en;
+
+/** The words of sending a pull request review through the GitHub connection. */
+export const reviewMessages = {
+    en: {
+        composer: 'Send a review', overall: 'Overall comment', event: 'Result',
+        COMMENT: 'Comment', APPROVE: 'Approve', REQUEST_CHANGES: 'Request changes',
+        scriptComment: 'Comment on this code', commented: 'Commented',
+        summaryThreads: 'Code comments sent as threads on their project.source.json: {threads}. Code comments in the review body: {body}.',
+        summaryBody: 'This connection sends only the review body: {body} code comments go in it.',
+        summaryNone: 'No code comments yet. Write them under each code change.',
+        send: 'Send Review', sending: 'Sending the review…', checking: 'Checking GitHub…',
+        sendAgain: 'Send Again', check: 'Check Whether It Was Sent', discard: 'Discard the Pending Review',
+        forget: 'Stop Tracking This Submission', useVersion: 'Review This Version',
+        sent: 'Sent the review.', openReview: 'Open the review on GitHub', openPullRequest: 'Open the pull request on GitHub',
+        dismiss: 'Dismiss', discarded: 'Discarded the pending review. Your words are kept.',
+        notStored: 'Browser storage is unavailable, so this draft is kept only while the panel is open.',
+        headChanged: 'The pull request changed after you started this review. The review is sent for the version shown.',
+        unsupported: 'This GitHub connection cannot send reviews.',
+        needsGrant: 'To send a review, disconnect and connect again with “Allow sending reviews”.',
+        allowReview: 'Allow sending reviews',
+        PENDING_REVIEW_EXISTS: 'You already have a pending review on this pull request on GitHub. Submit or discard it on GitHub, then send again.',
+        PENDING_REVIEW_LEFT: 'A pending review remains on GitHub. Only you can see it. Discard it here, or on GitHub with “Finish your review”.',
+        REVIEW_OUTCOME_UNKNOWN: 'It is unknown whether GitHub received the review. Check before sending again.',
+        pending: 'The review waits on GitHub with its code comments but is not published. Change it and send again, or discard it.',
+        REVIEW_REJECTED: 'GitHub refused the review, for example an approval of your own pull request.',
+        REVIEW_THREAD_REJECTED: 'GitHub refused a comment on a project file, so nothing was published. Comments on that file now go in the review body. Send again.',
+        RATE_LIMITED: 'The GitHub rate limit was reached. Try again in {seconds} seconds.',
+        EMPTY_REVIEW: 'Write an overall comment (needed to request changes) or a comment on the code.',
+        TOO_LONG: 'The review is longer than GitHub accepts (65,536 characters).',
+        closed: 'GitHub has no such review: it was not published, or it was discarded. You can send it again.',
+        lost: 'The connection no longer knows this submission. Check on GitHub whether the review was published ({count} of your reviews on this version found).',
+        session: 'Connect to GitHub again to send the review.',
+        FORBIDDEN: 'The GitHub connection is not allowed to send reviews to this repository.',
+        GITHUB_API_UNAVAILABLE: 'The connection cannot add code comments as threads. They now go in the review body: check the summary and send again.',
+        failed: 'Could not send the review. Nothing was published. Try again.'
+    },
+    ja: {
+        composer: 'レビューを送る', overall: '全体のコメント', event: '結果',
+        COMMENT: 'コメント', APPROVE: '承認', REQUEST_CHANGES: '修正を依頼',
+        scriptComment: 'このコードへのコメント', commented: 'コメントあり',
+        summaryThreads: 'コードへのコメントのうち {threads} 件をその project.source.json へのスレッドとして、{body} 件をレビュー本文に入れて送ります。',
+        summaryBody: 'この接続ではレビュー本文だけを送れます。コードへのコメント {body} 件を本文に入れます。',
+        summaryNone: 'コードへのコメントはまだありません。各コードの変更の下に書けます。',
+        send: 'レビューを送信', sending: 'レビューを送信中…', checking: 'GitHub で確かめています…',
+        sendAgain: 'もう一度送る', check: '送信されたか確かめる', discard: '保留中のレビューを破棄',
+        forget: 'この送信の記録を消す', useVersion: 'この版をレビューする',
+        sent: 'レビューを送りました。', openReview: 'GitHub でレビューを開く', openPullRequest: 'GitHub で PR を開く',
+        dismiss: '閉じる', discarded: '保留中のレビューを破棄しました。書いた内容は残っています。',
+        notStored: 'ブラウザーのストレージを使えないため、この下書きはパネルを開いている間だけ残ります。',
+        headChanged: 'レビューを書き始めた後に PR が更新されました。レビューは表示中の版に対して送ります。',
+        unsupported: 'この GitHub 接続ではレビューを送れません。',
+        needsGrant: 'レビューを送るには、切断して「レビューの送信を許可する」を付けて接続し直してください。',
+        allowReview: 'レビューの送信を許可する',
+        PENDING_REVIEW_EXISTS: 'この PR に、GitHub で書きかけの保留中のレビューがあります。GitHub で送るか破棄してから、もう一度送ってください。',
+        PENDING_REVIEW_LEFT: 'GitHub に保留中のレビューが残っています。あなたにしか見えません。ここで破棄するか、GitHub の「Finish your review」から破棄してください。',
+        REVIEW_OUTCOME_UNKNOWN: 'GitHub がレビューを受け取ったかわかりません。もう一度送る前に確かめてください。',
+        pending: 'レビューはコードへのコメント付きで GitHub に保留中ですが、公開されていません。直してもう一度送るか、破棄してください。',
+        REVIEW_REJECTED: 'GitHub がレビューを拒みました（自分の PR の承認など）。',
+        REVIEW_THREAD_REJECTED: 'GitHub が作品ファイルへのコメントを拒んだため、何も公開していません。そのファイルへのコメントはレビュー本文に入れます。もう一度送ってください。',
+        RATE_LIMITED: 'GitHub の利用上限に達しました。{seconds} 秒後に再試行してください。',
+        EMPTY_REVIEW: '全体のコメント（修正の依頼では必須）か、コードへのコメントを書いてください。',
+        TOO_LONG: 'レビューが GitHub の上限（65,536 文字）を超えています。',
+        closed: 'GitHub にそのレビューはありません。公開されなかったか、破棄されています。もう一度送れます。',
+        lost: '接続がこの送信の記録を持っていません。レビューが公開されたかを GitHub で確かめてください（この版へのあなたのレビュー {count} 件）。',
+        session: 'レビューを送るには、GitHub にもう一度接続してください。',
+        FORBIDDEN: 'GitHub 接続に、このリポジトリへレビューを送る権限がありません。',
+        GITHUB_API_UNAVAILABLE: 'この接続ではコードへのコメントをスレッドにできません。コメントはレビュー本文に入れます。件数を確かめて、もう一度送ってください。',
+        failed: 'レビューを送れませんでした。何も公開していません。再試行してください。'
+    }
+};
+export type ReviewLabels = typeof reviewMessages.en;
+export const reviewLabelsFor = (locale: string): ReviewLabels => locale.startsWith('ja') ? reviewMessages.ja : reviewMessages.en;