@kubohiroya/turbowarp-plus-editor-git 0.0.0-stage → 0.8.0

package/src/github-pull-requests.ts

@@ -0,0 +1,229 @@
+import {createProjectSourceDiff, isRecord} from './project-source-patch.js';
+import type {ProjectSourceReviewFile} from './project-source-review.js';
+import {assetLimit, assetsDirectoryParts, folderSettingsLimit, isAssetName} from './project-asset-paths.js';
+import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
+
+type ErrorCode = 'unavailable' | 'rateLimit' | 'failed' | 'changed' | 'tooManyFiles';
+export class PullRequestError extends Error {
+    constructor(readonly code: ErrorCode) {super(code);}
+}
+
+const repositoryName = /^[A-Za-z0-9_.-]+\/[A-Za-z0-9_.-]+$/;
+const validRepository = (value: unknown): value is string => typeof value === 'string' &&
+    repositoryName.test(value) && value.split('/').every(segment => segment !== '.' && segment !== '..');
+const isSha = (value: unknown): value is string => typeof value === 'string' && /^[a-f0-9]{40}$/i.test(value);
+
+export function gitHubRepositoryFromOrigin(origin: string | undefined) {
+    const name = origin?.trim().match(/^(?:https:\/\/github\.com\/|ssh:\/\/git@github\.com\/|git@github\.com:)([^/?#]+\/[^/?#]+)\/?$/i)?.[1];
+    const repository = name?.replace(/\.git$/i, '');
+    return validRepository(repository) ? repository : null;
+}
+
+function repoPath(repository: string) {
+    return '/repos/' + repository.split('/').map(encodeURIComponent).join('/');
+}
+const invalidResponse = () => new PullRequestError('failed');
+const emptyProject = '{"targets":[]}\n';
+const sourceLimit = 1024 * 1024;
+
+async function readBody(response: Response, limit: number, chunk: (value: Uint8Array) => void) {
+    if (Number(response.headers.get('Content-Length')) > limit || !response.body) throw invalidResponse();
+    const reader = response.body.getReader();
+    let length = 0;
+    try {
+        for (;;) {
+            const {done, value} = await reader.read();
+            if (done) return;
+            length += value.byteLength;
+            if (length > limit) throw invalidResponse();
+            chunk(value);
+        }
+    } catch (error) {
+        void reader.cancel().catch(() => {});
+        throw error;
+    }
+}
+
+async function readText(response: Response, limit: number) {
+    const decoder = new TextDecoder('utf-8', {fatal: true});
+    const chunks: string[] = [];
+    await readBody(response, limit, value => chunks.push(decoder.decode(value, {stream: true})));
+    return chunks.join('') + decoder.decode();
+}
+
+function readSummary(value: unknown) {
+    if (!isRecord(value) || !Number.isSafeInteger(value.number) || Number(value.number) < 1 ||
+        typeof value.title !== 'string') throw invalidResponse();
+    return {number: Number(value.number), title: value.title};
+}
+
+function readRevision(value: unknown) {
+    if (!isRecord(value) || !isSha(value.sha) || typeof value.ref !== 'string') throw invalidResponse();
+    const repository = isRecord(value.repo) ? value.repo.full_name : null;
+    if (repository !== null && !validRepository(repository)) throw invalidResponse();
+    return {sha: value.sha, ref: value.ref, repository};
+}
+
+function readPullRequest(value: unknown) {
+    const summary = readSummary(value);
+    if (!isRecord(value) || (value.state !== 'open' && value.state !== 'closed') ||
+        !Number.isSafeInteger(value.changed_files) || Number(value.changed_files) < 0) throw invalidResponse();
+    const author = isRecord(value.user) && typeof value.user.login === 'string' ? value.user.login : undefined;
+    const description = typeof value.body_text === 'string' ? value.body_text : typeof value.body === 'string' ? value.body : '';
+    const state: 'open' | 'closed' | 'merged' | 'draft' = value.merged_at ? 'merged' : value.draft ? 'draft' : value.state;
+    return {...summary, author, description, base: readRevision(value.base), head: readRevision(value.head), state,
+        changedFiles: Number(value.changed_files)};
+}
+
+function readFile(value: unknown) {
+    if (!isRecord(value) || typeof value.filename !== 'string' || typeof value.status !== 'string') throw invalidResponse();
+    return {path: value.filename, previous: typeof value.previous_filename === 'string' ? value.previous_filename : undefined,
+        status: value.status};
+}
+
+function contentPath(path: string) {
+    const parts = path.split('/');
+    if (parts.some(part => !part || part === '.' || part === '..')) throw invalidResponse();
+    return parts.map(encodeURIComponent).join('/');
+}
+
+/** One version of a project file on GitHub: the repository and commit, and the project file's path. */
+interface ProjectLocation {repository: string; sha: string; path: string}
+
+/**
+ * Reads the assets of both versions of a project file from raw.githubusercontent.com, which does not count against the
+ * API rate limit. Each version's sb3-source.json names its assets directory. Every read is capped, honors both its own
+ * signal and the pull request's, and resolves `null` on any failure.
+ */
+function rawAssetLoader(versions: Record<ProjectVersion, ProjectLocation | null>, send: typeof fetch, review: AbortSignal): ProjectAssetLoader {
+    const directories = new Map<ProjectVersion, Promise<string[] | null>>();
+    const get = (url: string, signal: AbortSignal) => send(url, {credentials: 'omit', redirect: 'error', signal});
+    const folderUrl = ({repository, sha, path}: ProjectLocation) => 'https://raw.githubusercontent.com/' +
+        repository.split('/').map(encodeURIComponent).join('/') + '/' + sha + '/' +
+        contentPath(path).split('/').slice(0, -1).map(part => part + '/').join('');
+    const readDirectory = async (folder: string, signal: AbortSignal) => {
+        let settings: string | null = null;
+        try {
+            const response = await get(folder + 'sb3-source.json', signal);
+            if (response.ok) settings = await readText(response, folderSettingsLimit);
+            else void response.body?.cancel().catch(() => {});
+        } catch (error) {
+            // A missing or unreadable file falls back to `assets`; a cancelled read is retried by the next request.
+            if (signal.aborted) throw error;
+        }
+        return assetsDirectoryParts(settings);
+    };
+    return async ({version, md5ext, signal: own}) => {
+        const location = versions[version];
+        if (!location || !isAssetName(md5ext)) return null;
+        try {
+            const signal = AbortSignal.any([own, review]);
+            if (signal.aborted) return null;
+            const folder = folderUrl(location);
+            let directory = directories.get(version);
+            if (!directory) {
+                directory = readDirectory(folder, signal);
+                directories.set(version, directory);
+                const pending = directory;
+                pending.catch(() => {if (directories.get(version) === pending) directories.delete(version);});
+            }
+            const parts = await directory;
+            if (!parts || signal.aborted) return null;
+            const response = await get(folder + parts.map(encodeURIComponent).join('/') + '/' + md5ext, signal);
+            if (!response.ok) {
+                void response.body?.cancel().catch(() => {});
+                return null;
+            }
+            const chunks: Uint8Array<ArrayBuffer>[] = [];
+            await readBody(response, assetLimit, value => chunks.push(value as Uint8Array<ArrayBuffer>));
+            return signal.aborted ? null : new Blob(chunks);
+        } catch {
+            return null;
+        }
+    };
+}
+
+export function createGitHubPullRequests(repository: string, send: typeof fetch = fetch) {
+    if (!validRepository(repository)) throw invalidResponse();
+    const api = 'https://api.github.com';
+    const repo = repoPath(repository);
+    const request = async (path: string, signal: AbortSignal, accept = 'application/vnd.github+json') => {
+        const response = await send(api + path, {headers: {Accept: accept}, credentials: 'omit', redirect: 'error', signal});
+        if (!response.ok) {
+            if (response.status === 429 || (response.status === 403 && (response.headers.get('X-RateLimit-Remaining') === '0' ||
+                response.headers.has('Retry-After')))) throw new PullRequestError('rateLimit');
+            if (response.status === 404 || response.status === 403) throw new PullRequestError('unavailable');
+            throw invalidResponse();
+        }
+        return response;
+    };
+    const json = async (path: string, signal: AbortSignal, accept?: string): Promise<unknown> =>
+        JSON.parse(await readText(await request(path, signal, accept), 12 * sourceLimit));
+    const metadata = async (number: number, signal: AbortSignal) => readPullRequest(await json(
+        repo + '/pulls/' + number, signal, 'application/vnd.github.text+json'));
+    const source = async (name: string, path: string, revision: string, signal: AbortSignal) => readText(
+        await request(repoPath(name) + '/contents/' + contentPath(path) + '?ref=' + revision, signal, 'application/vnd.github.raw+json'), sourceLimit);
+
+    return {
+        async list(page: number, signal: AbortSignal) {
+            const result = await json(repo + '/pulls?state=all&sort=updated&per_page=20&page=' + page, signal);
+            if (!Array.isArray(result)) throw invalidResponse();
+            return {items: result.map(readSummary), more: result.length === 20};
+        },
+        async load(number: number, signal: AbortSignal) {
+            if (!Number.isSafeInteger(number) || number < 1) throw invalidResponse();
+            const pr = await metadata(number, signal);
+            if (pr.number !== number) throw invalidResponse();
+            if (pr.changedFiles > 3000) throw new PullRequestError('tooManyFiles');
+            const records: ReturnType<typeof readFile>[] = [];
+            for (let page = 1; page <= Math.ceil(pr.changedFiles / 100); page++) {
+                const result = await json(repo + '/pulls/' + number + '/files?per_page=100&page=' + page, signal);
+                if (!Array.isArray(result)) throw invalidResponse();
+                records.push(...result.map(readFile));
+            }
+            const current = await metadata(number, signal);
+            if (current.base.sha !== pr.base.sha || current.head.sha !== pr.head.sha ||
+                current.changedFiles !== pr.changedFiles || records.length !== pr.changedFiles) {
+                throw new PullRequestError('changed');
+            }
+            let base: string | undefined;
+            if (records.some(file => file.path.split('/').pop() === 'project.source.json' && file.status !== 'added' && file.status !== 'copied')) {
+                try {
+                    const comparison = await json(repo + '/compare/' + pr.base.sha + '...' + pr.head.sha + '?per_page=1', signal);
+                    const merge = isRecord(comparison) ? comparison.merge_base_commit : null;
+                    if (isRecord(merge) && isSha(merge.sha)) base = merge.sha;
+                } catch (error) {
+                    if (signal.aborted) throw error;
+                }
+            }
+
+            const files: ProjectSourceReviewFile[] = [];
+            for (const file of records) {
+                const status = file.status === 'removed' ? 'removed' : file.status === 'added' || file.status === 'copied' ? 'added' : 'updated';
+                const related = {path: file.path, status, previousPath: file.previous} as const;
+                if (file.path.split('/').pop() !== 'project.source.json') {
+                    files.push(related);
+                    continue;
+                }
+                try {
+                    if (status !== 'added' && !base) throw invalidResponse();
+                    const [before, after] = await Promise.all([
+                        status === 'added' ? emptyProject : source(repository, file.previous ?? file.path, base!, signal),
+                        status === 'removed' ? emptyProject : source(pr.head.repository ?? repository, file.path, pr.head.sha, signal)
+                    ]);
+                    const loadAsset = rawAssetLoader({
+                        before: status === 'added' ? null : {repository, sha: base!, path: file.previous ?? file.path},
+                        after: status === 'removed' ? null : {repository: pr.head.repository ?? repository, sha: pr.head.sha, path: file.path}
+                    }, send, signal);
+                    files.push({path: file.path, previousPath: file.previous, patch: createProjectSourceDiff(before, after), loadAsset});
+                } catch (error) {
+                    if (signal.aborted) throw error;
+                    files.push({...related, unavailable: true});
+                }
+            }
+            return {...pr, files, url: 'https://github.com/' + repository + '/pull/' + number};
+        }
+    };
+}
+
+export type GitHubPullRequests = ReturnType<typeof createGitHubPullRequests>;

package/src/index.tsx

@@ -0,0 +1,352 @@
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {render, unmountComponentAtNode} from 'react-dom';
+import {FileDiffView} from './file-diff-view.js';
+import {openRepository} from './repository.js';
+import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup} from './repository.js';
+import {labelsFor} from './messages.js';
+import {GitPanelError} from './filesystem.js';
+import {ConnectionSettings} from './connection-settings.js';
+import type {GitConnectionSettings} from './connection-settings.js';
+import type {RemoteOperation} from './remote-operations.js';
+import {PullRequestReviewPanel} from './pull-request-panel.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.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 type {Repository, Snapshot, FileChange, FileDiff} from './repository.js';
+
+export interface GitHost {
+    connectionSettings?: GitConnectionSettings;
+    renderReviewBlock?: ProjectBlockRenderer;
+    openProject(directory: FileSystemDirectoryHandle, confirmReplace: () => boolean): Promise<'opened' | 'cancelled'>;
+    isProjectDirty(): boolean;
+    isProjectRunning?(): boolean;
+    subscribe?(listener: (event: 'loaded' | 'changed') => void): () => void;
+}
+interface Controller {open(locale: string): void; refresh(automatic?: boolean): Promise<void>}
+interface State {
+    repository: Repository | null;
+    snapshot: Snapshot | null;
+    project: string | null;
+    browser: {path: string; children: string[]; isProject: boolean} | null;
+    changes: FileChange[];
+    selected: FileChange | null;
+    diff: FileDiff | null;
+    commit: string | null;
+    error: string | null;
+    notice?: string;
+    busy: boolean;
+}
+const initial: State = {repository: null, snapshot: null, project: null, browser: null,
+    changes: [], selected: null, diff: null, commit: null, error: null, busy: false};
+const controllers = new WeakMap<object, Controller>();
+type PickerWindow = Window & {showDirectoryPicker?: (options: {id: string; mode: 'readwrite'}) => Promise<FileSystemDirectoryHandle>};
+type ObserverWindow = Window & {FileSystemObserver?: new (callback: () => void) => {
+    observe(handle: FileSystemDirectoryHandle, options: {recursive: boolean}): Promise<void>;
+    disconnect(): void;
+}};
+const watchInterval = 2000;
+
+function GitPanel({document, host, controller}: {document: Document; host: GitHost; controller: Controller}) {
+    const [visible, setVisible] = useState(false);
+    const [review, setReview] = useState(false);
+    const [locale, setLocale] = useState(document.documentElement.lang || 'en');
+    const [dirty, setDirty] = useState(host.isProjectDirty());
+    const [state, setState] = useState<State>(initial);
+    const current = useRef(state);
+    current.current = state;
+    const epoch = useRef(0);
+    const running = useRef(false);
+    const refreshPending = useRef(false);
+    const remoteRequest = useRef<AbortController>();
+    const alive = useRef(true);
+    const opening = useRef(false);
+    const dialog = useRef<HTMLDivElement>(null);
+    const reviewing = useRef(review);
+    reviewing.current = review;
+    // The last fingerprint acted on, so a failing read or an open diff is not retried on every check.
+    const handled = useRef<string | null>(null);
+    const labels = labelsFor(locale);
+    // A background refresh never drops a user's operation: the operation waits for that refresh instead.
+    const background = useRef<Promise<void> | null>(null);
+    const run = async (operation: () => Promise<Partial<State>>, automatic = false) => {
+        if (running.current && !automatic && background.current) await background.current;
+        if (running.current || !alive.current) return;
+        let settle = () => {};
+        if (automatic) background.current = new Promise(resolve => {settle = resolve;});
+        running.current = true;
+        const ticket = ++epoch.current;
+        // An automatic refresh keeps the current error and notice, such as an uncertain push result.
+        setState(previous => automatic ? {...previous, busy: true} : {...previous, busy: true, error: null, notice: undefined});
+        try {
+            const update = await operation();
+            if (epoch.current === ticket) setState(previous => ({...previous, ...update, busy: false}));
+        } catch (error) {
+            if (epoch.current !== ticket) return;
+            const code = error instanceof GitPanelError ? error.code : 'failed';
+            const message = labels[code as keyof typeof labels] || labels.failed;
+            setState(previous => ({...previous, error: automatic && previous.error ? previous.error : message, busy: false, diff: null}));
+        } finally {
+            running.current = false;
+            if (automatic) {background.current = null; settle();}
+            if (refreshPending.current) {
+                refreshPending.current = false;
+                queueMicrotask(() => void controller.refresh());
+            }
+        }
+    };
+    controller.open = language => {setLocale(language); setVisible(true);};
+    controller.refresh = async (automatic = false) => {
+        if (!alive.current || !current.current.repository) return;
+        if (running.current) {
+            if (!automatic) refreshPending.current = true;
+            return;
+        }
+        await run(async () => {
+            const {repository, project} = current.current;
+            const snapshot = await repository!.read(project ?? '');
+            return {snapshot, changes: snapshot.changes, selected: null, diff: null, commit: null};
+        }, automatic);
+    };
+    useEffect(() => {
+        alive.current = true;
+        const unsubscribe = host.subscribe?.(event => {
+            setDirty(host.isProjectDirty());
+            if (event === 'loaded' && !opening.current) {
+                epoch.current++;
+                setState(previous => ({...previous, project: null, snapshot: null, changes: [],
+                    selected: null, diff: null, commit: null, busy: false}));
+                queueMicrotask(() => void controller.refresh());
+            }
+        });
+        return () => {alive.current = false; epoch.current++; remoteRequest.current?.abort(); unsubscribe?.();};
+    }, [host]);
+    // While the panel is open, notice Git commands, agents and editors that change the repository outside the Editor.
+    useEffect(() => {
+        const repository = state.repository;
+        if (!visible || !repository) return;
+        const view = document.defaultView as ObserverWindow;
+        let stopped = false;
+        let checking = false;
+        const check = async () => {
+            const {snapshot} = current.current;
+            if (stopped || checking || running.current || document.visibilityState === 'hidden' ||
+                !snapshot || current.current.repository !== repository) return;
+            checking = true;
+            try {
+                const probe = await repository.probe(snapshot.scope);
+                if (stopped || probe === 'locked' || probe === snapshot.probe || probe === handled.current ||
+                    current.current.snapshot !== snapshot) return;
+                handled.current = probe;
+                const {selected, commit} = current.current;
+                // Keep an open diff, commit or review in place and ask for a refresh instead.
+                if (selected || commit || reviewing.current) {
+                    setState(previous => previous.snapshot === snapshot ? {...previous, notice: labelsFor(locale).outdated} : previous);
+                } else await controller.refresh(true);
+            } catch {
+                // Entries can disappear while another tool writes. The next check reads them again.
+            } finally {
+                checking = false;
+            }
+        };
+        let soon: number | undefined;
+        const schedule = () => {view.clearTimeout(soon); soon = view.setTimeout(() => void check(), 300);};
+        const interval = view.setInterval(() => void check(), watchInterval);
+        const onFocus = () => void check();
+        view.addEventListener('focus', onFocus);
+        document.addEventListener('visibilitychange', onFocus);
+        let observer: InstanceType<NonNullable<ObserverWindow['FileSystemObserver']>> | null = null;
+        try {
+            if (view.FileSystemObserver) {
+                observer = new view.FileSystemObserver(schedule);
+                observer.observe(repository.root, {recursive: true}).catch(() => {});
+            }
+        } catch {
+            observer = null;
+        }
+        void check();
+        return () => {
+            stopped = true;
+            view.clearInterval(interval);
+            view.clearTimeout(soon);
+            view.removeEventListener('focus', onFocus);
+            document.removeEventListener('visibilitychange', onFocus);
+            observer?.disconnect();
+        };
+    }, [visible, state.repository, locale]);
+    useEffect(() => {
+        if (!visible) return;
+        const previous = document.activeElement as HTMLElement | null;
+        dialog.current?.focus();
+        return () => {if (previous?.isConnected) previous.focus();};
+    }, [visible]);
+    const chooseRoot = async () => {
+        const view = document.defaultView as PickerWindow;
+        await run(async () => {
+            let root: FileSystemDirectoryHandle;
+            try {root = await view.showDirectoryPicker!({id: 'turbowarp-plus-git-root', mode: 'readwrite'});} catch (error) {
+                if ((error as DOMException).name === 'AbortError') return {};
+                throw error;
+            }
+            const repository = await openRepository(root);
+            const snapshot = await repository.read();
+            const browser = await repository.browse();
+            await host.connectionSettings?.disconnect();
+            setReview(false);
+            return {...initial, repository, snapshot, browser, changes: snapshot.changes};
+        });
+    };
+    const browse = (path: string) => run(async () => ({browser: await state.repository!.browse(path)}));
+    const openProject = (path: string) => run(async () => {
+        const directory = await state.repository!.openProject(path);
+        opening.current = true;
+        try {
+            const result = await host.openProject(directory, () => document.defaultView!.confirm(labels.replace));
+            if (result === 'cancelled') return {};
+        } finally {opening.current = false;}
+        if (!alive.current) return {};
+        setDirty(host.isProjectDirty());
+        setState(previous => ({...previous, project: path, snapshot: null, changes: [], selected: null, diff: null, commit: null}));
+        const snapshot = await state.repository!.read(path);
+        return {project: path, snapshot, changes: snapshot.changes, selected: null, diff: null, commit: null};
+    });
+    const selectFile = (selected: FileChange) => run(async () => ({selected,
+        diff: await state.repository!.readDiff(state.snapshot!, selected)}));
+    const selectCommit = (commit: string) => run(async () => ({commit,
+        changes: await state.repository!.historyChanges(state.snapshot!, commit), selected: null, diff: null}));
+    const remoteOperation = async (operation: RemoteOperation) => {
+        const repository = current.current.repository;
+        const getSession = host.connectionSettings?.getSession;
+        if (!repository || !getSession) return;
+        if (operation === 'push' && !document.defaultView?.confirm(labels.confirmPush)) return;
+        await run(async () => {
+            const ticket = epoch.current;
+            const request = new AbortController();
+            remoteRequest.current = request;
+            try {
+                await repository.remoteOperation(operation, getSession, () => {
+                    if (epoch.current !== ticket) throw new GitPanelError('changed');
+                    if (operation === 'pull' && (host.isProjectDirty() || host.isProjectRunning?.()))
+                        throw new GitPanelError('pullUnsafe');
+                }, request.signal);
+            } finally {
+                remoteRequest.current = undefined;
+            }
+            const snapshot = await repository.read(current.current.project ?? '');
+            return {snapshot, changes: snapshot.changes, selected: null, diff: null, commit: null,
+                notice: operation === 'pull' && current.current.project !== null ? labels.pulledProject : labels.remoteDone};
+        });
+    };
+    const focusTrap = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Escape') {event.stopPropagation(); setVisible(false); return;}
+        if (event.key !== 'Tab') return;
+        const items = [...event.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex="0"]')]
+            .filter(item => item.getClientRects().length > 0);
+        const first = items[0], last = items[items.length - 1];
+        if (event.shiftKey && (document.activeElement === first || document.activeElement === event.currentTarget)) {
+            event.preventDefault(); last?.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {event.preventDefault(); first?.focus();}
+    };
+    // One loader per selected change, so thumbnails read each asset once.
+    const loadAsset = useMemo(() => state.repository && state.snapshot && state.selected ?
+        state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
+    if (!visible) return null;
+    const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
+    return <div className="twgit-backdrop">
+        <div className="twgit-panel" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true" aria-label={labels.title}
+            onKeyDown={focusTrap}>
+            <header>
+                <h2>{labels.title}</h2>
+                <button onClick={chooseRoot} disabled={state.busy}>{labels.choose}</button>
+                {!review && <button onClick={() => void controller.refresh()} disabled={!state.repository || state.busy}>{labels.refresh}</button>}
+                {!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={() => setVisible(false)}>{labels.close}</button>
+            </header>
+            <div className="twgit-context">
+                <span>{labels.repository} · {state.repository?.root.name || '—'}</span>
+                <span>{labels.project} · {state.project === null ? labels.none : state.project || labels.root}</span>
+                <strong>{state.snapshot?.branch || (state.snapshot?.head ? labels.detached : labels.unborn)}</strong>
+                <code>{state.snapshot?.head?.slice(0, 12)}</code>
+                <span data-git-dirty="">{dirty ? labels.dirty : labels.saved}</span>
+            </div>
+            {!review && host.connectionSettings && <ConnectionSettings settings={host.connectionSettings} locale={locale}
+                runOperation={host.connectionSettings.getSession ? remoteOperation : undefined}
+                readOrigin={state.repository && !state.busy ? async () => {
+                    const ticket = epoch.current;
+                    const remote = await state.repository!.readOrigin();
+                    return epoch.current === ticket ? remote : undefined;
+                } : undefined}/>}
+            {state.error && <p className="twgit-error" role="alert">{state.error}</p>}
+            {state.notice && <p className="twgit-context" role="status">{state.notice}</p>}
+            {state.busy && <p role="status">{labels.loading}</p>}
+            {!state.repository && <p>{labels.empty}</p>}
+            {review && state.repository && host.renderReviewBlock &&
+                <PullRequestReviewPanel repository={state.repository} locale={locale} renderBlock={host.renderReviewBlock}/>}
+            {!review && state.repository && <div className="twgit-content">
+                <aside>
+                    {state.browser && <details>
+                        <summary>{labels.browse}</summary>
+                        <p><code>{state.browser.path || '/'}</code></p>
+                        <button disabled={state.busy || !state.browser.path} onClick={() => void browse(state.browser!.path.split('/').slice(0, -1).join('/'))}>{labels.up}</button>
+                        <button data-git-open-project="" disabled={state.busy || !state.browser.isProject} onClick={() => void openProject(state.browser!.path)}>{labels.open}</button>
+                        <ul>{state.browser.children.map(name => <li key={name}><button disabled={state.busy}
+                            onClick={() => void browse([state.browser!.path, name].filter(Boolean).join('/'))}>{name}/</button></li>)}</ul>
+                    </details>}
+                    <h3><button disabled={state.busy} onClick={() => void controller.refresh()}>{labels.worktree}</button></h3>
+                    {groups.map(group => <section key={group}>
+                        <h3>{labels[group]} · {state.changes.filter(change => change.group === group).length}</h3>
+                        <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}>
+                            <button className="twgit-file" data-git-group={group} disabled={state.busy}
+                                aria-pressed={state.selected === change} onClick={() => void selectFile(change)}>
+                                <span>{!change.after ? 'D' : !change.before ? 'A' : 'M'}</span> {change.path}
+                            </button>
+                        </li>)}</ul>
+                    </section>)}
+                    {!state.changes.length && <p>{labels.clean}</p>}
+                    <details><summary>{labels.branches}</summary><ul>{state.snapshot?.branches.map(branch => <li key={branch}>{branch}</li>)}</ul></details>
+                    <h3>{labels.history}</h3>
+                    <ol className="twgit-history">{state.snapshot?.commits.map(commit => <li key={commit.oid}>
+                        <button disabled={state.busy} aria-pressed={state.commit === commit.oid} title={commit.oid}
+                            onClick={() => void selectCommit(commit.oid)}>{commit.message.split('\n')[0]}</button>
+                        <small><code>{commit.oid.slice(0, 8)}</code> · {commit.author} · {new Date(commit.timestamp * 1000).toLocaleString(locale)}</small>
+                    </li>)}</ol>
+                </aside>
+                <main className="twgit-diff">
+                    {state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
+                        renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
+                </main>
+            </div>}
+            <footer>{labels.permissions}</footer>
+        </div>
+    </div>;
+}
+
+export function mountGitPanel({vm, document, host}: {vm: object; document: Document; host: GitHost}) {
+    if (!(document.defaultView as PickerWindow)?.showDirectoryPicker) return null;
+    const root = document.createElement('div');
+    document.body.append(root);
+    const controller: Controller = {open() {}, async refresh() {}};
+    controllers.set(vm, controller);
+    render(<GitPanel document={document} host={host} controller={controller}/>, root);
+    return {refresh: () => controller.refresh(), dispose() {
+        if (controllers.get(vm) === controller) controllers.delete(vm);
+        void host.connectionSettings?.disconnect().catch(() => {});
+        unmountComponentAtNode(root);
+        root.remove();
+    }};
+}
+
+export function renderGitMenu(createElement: (component: any, props: any, ...children: any[]) => any,
+    {vm, locale = 'en', MenuItem, MenuSection, onRequestClose}: {
+        vm: object; locale?: string; MenuItem: any; MenuSection: any; onRequestClose(): void;
+    }) {
+    const controller = controllers.get(vm);
+    if (!controller) return null;
+    return createElement(MenuSection, null, createElement(MenuItem, {
+        command: 'local-git', onClick() {onRequestClose(); controller.open(locale);}
+    }, labelsFor(locale).menu));
+}

package/src/messages.ts

@@ -0,0 +1,64 @@
+export const messages = {
+    en: {
+        pullRequests: 'Pull requests', localChanges: 'Local changes',
+        title: 'Local Git', menu: 'Local Git…', close: 'Close', choose: 'Choose Repository…', refresh: 'Refresh',
+        empty: 'Choose an existing Git repository to inspect its files and history.',
+        repository: 'Repository', project: 'Project folder', none: 'No project selected', root: 'Repository root',
+        open: 'Open This Project', reload: 'Reload Project', up: 'Parent folder', browse: 'Choose a project inside this repository',
+        replace: 'Replace the open project and discard its unsaved changes?',
+        dirty: 'The Editor has unsaved changes.', saved: 'The Editor has no unsaved changes.',
+        staged: 'Staged', unstaged: 'Unstaged', untracked: 'Untracked', commit: 'Commit changes',
+        history: 'History', worktree: 'Working tree', clean: 'No changes in the selected folder.',
+        branches: 'Local branches', unborn: 'No commits yet', detached: 'Detached HEAD', select: 'Select a file to view its diff.',
+        binary: 'Binary asset', large: 'Text preview exceeds its display limit.', bytes: 'bytes',
+        mode: 'Git file mode', permissions: 'Working-tree executable permission changes are unavailable in the browser.',
+        unchanged: 'The text is unchanged.', loading: 'Reading repository…',
+        invalid: 'Choose a repository with a .git directory, and a project inside that repository.',
+        changed: 'Files or Git state changed while reading. Refresh to read the current state.',
+        outdated: 'The repository changed outside the Editor. Refresh to read the current state.',
+        unsupported: 'This repository contains an entry the browser cannot represent.',
+        pullUnsafe: 'Stop the project and clear unsaved or local Git changes before pulling.',
+        diverged: 'Pull requires a fast-forward. Your local branch and files are intact.',
+        session: 'Reconnect GitHub for this repository and requested permission.',
+        pushUnknown: 'The push result is unknown. Fetch and check the remote branch before retrying.',
+        pushRefresh: 'The push succeeded. Fetch to refresh the local tracking branch.',
+        rollbackFailed: 'Git could not restore all local changes. Check the working tree and Git status.',
+        remoteFailed: 'The Git operation failed. Check the selected connection and retry.',
+        remoteDone: 'Git operation completed.',
+        pulledProject: 'Pull completed. Use Reload Project to open the updated files.',
+        confirmPush: 'Push the current branch to its GitHub origin?',
+        failed: 'Could not read the repository. Check folder access and refresh.'
+    },
+    ja: {
+        pullRequests: 'プルリクエスト', localChanges: 'ローカルの変更',
+        title: 'ローカル Git', menu: 'ローカル Git…', close: '閉じる', choose: 'リポジトリを選択…', refresh: '再取得',
+        empty: '既存の Git リポジトリを選び、ファイルの状態と履歴を確認できます。',
+        repository: 'リポジトリ', project: '作品フォルダ', none: '作品は未選択', root: 'リポジトリルート',
+        open: 'この作品を開く', reload: '作品を再読込', up: '上のフォルダ', browse: 'リポジトリ内の作品を選択',
+        replace: '未保存の変更を破棄して、別の作品を開きますか？',
+        dirty: 'Editor に未保存の変更があります。', saved: 'Editor に未保存の変更はありません。',
+        staged: 'ステージ済み', unstaged: '未ステージ', untracked: '未追跡', commit: 'コミットの変更',
+        history: '履歴', worktree: '作業ツリー', clean: '対象フォルダに変更はありません。',
+        branches: 'ローカルブランチ', unborn: 'コミットはまだありません', detached: 'ブランチ未選択の HEAD', select: 'ファイルを選ぶと差分を表示します。',
+        binary: 'バイナリアセット', large: 'テキスト差分の表示上限を超えています。', bytes: 'バイト',
+        mode: 'Git のファイルモード', permissions: '作業ツリーの実行権限の変更はブラウザーから確認できません。',
+        unchanged: 'テキストに変更はありません。', loading: 'リポジトリを読込中…',
+        invalid: '.git ディレクトリを持つリポジトリと、その配下の作品を選んでください。',
+        changed: '読込中にファイルまたは Git の状態が変わりました。再取得してください。',
+        outdated: 'Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。',
+        unsupported: 'ブラウザーで扱えない種類の Git エントリーがあります。',
+        pullUnsafe: 'pull の前に実行を止め、未保存編集とローカルの Git 変更を解消してください。',
+        diverged: 'fast-forward できません。ローカルブランチとファイルは保持されています。',
+        session: 'このリポジトリと操作に必要な権限で GitHub に接続してください。',
+        pushUnknown: 'push の結果が不明です。再試行する前に fetch でリモートブランチを確認してください。',
+        pushRefresh: 'push は成功しました。fetch でローカルの追跡ブランチを更新してください。',
+        rollbackFailed: 'Git がローカルの変更をすべて復元できませんでした。作業ツリーと Git の状態を確認してください。',
+        remoteFailed: 'Git 操作に失敗しました。選択中の接続を確認して再試行してください。',
+        remoteDone: 'Git 操作が完了しました。',
+        pulledProject: 'pull が完了しました。「作品を再読込」で更新済みのファイルを開けます。',
+        confirmPush: '現在のブランチを GitHub の origin に push しますか？',
+        failed: 'リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。'
+    }
+};
+export type Labels = typeof messages.en;
+export const labelsFor = (locale: string): Labels => locale.startsWith('ja') ? messages.ja : messages.en;