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

package/src/index.tsx

@@ -0,0 +1,349 @@
+import React, {useEffect, 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();}
+    };
+    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}/> : <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;

package/src/mutation-fs.ts

@@ -0,0 +1,204 @@
+import {createReadOnlyFs, errorCode, fileError, fileStat, GitPanelError, pathParts, sameBytes} from './filesystem.js';
+
+type Entry = {kind: 'directory'} | {kind: 'file'; bytes: Uint8Array<ArrayBuffer>; time: number} | null;
+type Change = {path: string; before: Entry; after: Entry};
+const missing = (error: unknown) => ['ENOENT', 'ENOTDIR'].includes(errorCode(error) ?? '');
+
+// Stage Git's writes before touching the granted directory. Pack data precedes refs.
+export function createMutationFs(root: FileSystemDirectoryHandle, worktree: boolean) {
+    const base = createReadOnlyFs(root);
+    const changes = new Map<string, Change>();
+    const normalize = (path: string) => '/' + pathParts(path).join('/');
+    const parent = (path: string) => path.slice(0, path.lastIndexOf('/')) || '/';
+    const name = (path: string) => path.slice(path.lastIndexOf('/') + 1);
+    const fail = (code: string, path: string): never => {throw fileError(code, path);};
+    function allow(path: string, directory = false) {
+        const parts = pathParts(path);
+        const [first, second, ...rest] = parts;
+        if (!first || parts.slice(1).some(part => part.toLowerCase() === '.git'))
+            return fail('EACCES', path);
+        if (first === '.git') {
+            const writableFolder = second === 'refs' || second === 'logs' ||
+                (second === 'objects' && rest[0]?.toLowerCase() !== 'info');
+            const writableFile = !directory && !rest.length &&
+                ['HEAD', 'ORIG_HEAD', 'FETCH_HEAD', 'index', 'packed-refs', 'shallow'].includes(second);
+            if (writableFolder || writableFile) return;
+        } else if (first.toLowerCase() !== '.git' && worktree) {
+            return;
+        }
+        fail('EACCES', path);
+    }
+
+    async function readEntry(fs: typeof base.promises, path: string): Promise<Entry> {
+        try {
+            const stat = await fs.stat(path);
+            if (stat.isDirectory()) return {kind: 'directory'};
+            const bytes = await fs.readFile(path);
+            if (!(bytes instanceof Uint8Array)) throw new GitPanelError('unsupported');
+            return {kind: 'file', bytes: Uint8Array.from(bytes), time: stat.mtimeMs};
+        } catch (error) {
+            if (missing(error)) return null;
+            throw error;
+        }
+    }
+
+    async function kind(path: string) {
+        const change = changes.get(path);
+        if (change) return change.after?.kind;
+        try {return (await base.promises.stat(path)).isDirectory() ? 'directory' : 'file';}
+        catch (error) {if (!missing(error)) throw error;}
+    }
+
+    async function stage(path: string, after: Entry) {
+        const previous = changes.get(path);
+        const before = previous ? previous.before : await readEntry(base.promises, path);
+        if (before && after && before.kind !== after.kind) throw new GitPanelError('unsupported');
+        changes.set(path, {path, before, after});
+    }
+
+    async function readdir(raw: string) {
+        const path = normalize(raw);
+        const current = await kind(path);
+        if (current !== 'directory') return fail(current ? 'ENOTDIR' : 'ENOENT', path);
+        const names = new Set<string>();
+        try {for (const entry of await base.promises.readdir(path)) names.add(entry);}
+        catch (error) {if (!missing(error)) throw error;}
+        for (const change of changes.values()) {
+            if (parent(change.path) !== path) continue;
+            if (change.after) names.add(name(change.path));
+            else names.delete(name(change.path));
+        }
+        return [...names];
+    }
+
+    async function remove(raw: string, directory: boolean) {
+        const path = normalize(raw);
+        allow(path, directory);
+        const current = await kind(path);
+        if (!current) return fail('ENOENT', path);
+        if (directory !== (current === 'directory')) return fail(directory ? 'ENOTDIR' : 'EISDIR', path);
+        if (directory && (await readdir(path)).length) return fail('ENOTEMPTY', path);
+        await stage(path, null);
+    }
+
+    async function stat(raw: string) {
+        const path = normalize(raw);
+        const change = changes.get(path);
+        if (!change) return base.promises.stat(path);
+        if (!change.after) return fail('ENOENT', path);
+        return fileStat(change.after.kind === 'directory' ? null :
+            {size: change.after.bytes.length, lastModified: change.after.time});
+    }
+
+    const fs = {promises: {
+        async readFile(raw: string, options?: string | {encoding?: string}) {
+            const path = normalize(raw);
+            const change = changes.get(path);
+            if (!change) return base.promises.readFile(path, options);
+            if (!change.after) return fail('ENOENT', path);
+            if (change.after.kind === 'directory') return fail('EISDIR', path);
+            const encoding = typeof options === 'string' ? options : options?.encoding;
+            return encoding ? new TextDecoder(encoding).decode(change.after.bytes) : change.after.bytes.slice();
+        },
+        async writeFile(raw: string, bytes: string | Uint8Array, options?: {mode?: number}) {
+            const path = normalize(raw);
+            allow(path);
+            if (!path.startsWith('/.git/') && options?.mode && (options.mode & 0o111))
+                throw new GitPanelError('unsupported');
+            if (await kind(parent(path)) !== 'directory') return fail('ENOENT', path);
+            if (await kind(path) === 'directory') return fail('EISDIR', path);
+            await stage(path, {kind: 'file', bytes: typeof bytes === 'string' ?
+                new TextEncoder().encode(bytes) : Uint8Array.from(bytes), time: Date.now()});
+        },
+        async mkdir(raw: string) {
+            const path = normalize(raw);
+            if (await kind(path)) return fail('EEXIST', path);
+            allow(path, true);
+            if (await kind(parent(path)) !== 'directory') return fail('ENOENT', path);
+            await stage(path, {kind: 'directory'});
+        },
+        unlink: (path: string) => remove(path, false),
+        rmdir: (path: string) => remove(path, true),
+        readdir, stat, lstat: stat,
+        readlink: base.promises.readlink,
+        symlink: base.promises.symlink,
+        chmod: base.promises.chmod
+    }};
+
+    function equal(a: Entry, b: Entry) {
+        return a?.kind === b?.kind && (a?.kind !== 'file' || (b?.kind === 'file' && sameBytes(a.bytes, b.bytes)));
+    }
+
+    async function apply(path: string, from: Entry, to: Entry) {
+        const current = createReadOnlyFs(root).promises;
+        if (path.startsWith('/.git/') && (await readEntry(current, path + '.lock') ||
+            await readEntry(current, '/.git/index.lock') || await readEntry(current, '/.git/packed-refs.lock')))
+            throw new GitPanelError('changed');
+        if (!equal(await readEntry(current, path), from))
+            throw new GitPanelError('changed');
+        let directory = root;
+        for (const part of pathParts(parent(path))) directory = await directory.getDirectoryHandle(part);
+        const filename = name(path);
+        if (!to) await directory.removeEntry(filename);
+        else if (to.kind === 'directory') await directory.getDirectoryHandle(filename, {create: true});
+        else {
+            const handle = await directory.getFileHandle(filename, {create: !from});
+            let stream: FileSystemWritableFileStream | undefined;
+            try {
+                stream = await handle.createWritable();
+                await stream.write(to.bytes);
+                await stream.close();
+            } catch (error) {
+                await stream?.abort().catch(() => {});
+                if (!from) {
+                    const current = await handle.getFile();
+                    if (current.size === 0) await directory.removeEntry(filename);
+                }
+                throw error;
+            }
+        }
+    }
+
+    function order(change: Change) {
+        const {path, before, after} = change;
+        const depth = pathParts(path).length;
+        if (!after) return before?.kind === 'directory' ? 1000 - depth : 0;
+        if (after.kind === 'directory') return 1000 + depth;
+        if (path.startsWith('/.git/objects/')) return 2000;
+        if (!path.startsWith('/.git/')) return 3000;
+        return path.startsWith('/.git/refs/heads/') || path === '/.git/HEAD' ? 5000 : 4000;
+    }
+
+    return {fs, async commit(guard: () => void) {
+        const pending = [...changes.values()].filter(change => !equal(change.before, change.after))
+            .sort((left, right) => order(left) - order(right));
+        await base.checkReads();
+        for (const change of pending) {
+            if (!equal(await readEntry(createReadOnlyFs(root).promises, change.path), change.before))
+                throw new GitPanelError('changed');
+        }
+        const applied: Change[] = [];
+        try {
+            for (const change of pending) {
+                guard();
+                try {
+                    await apply(change.path, change.before, change.after);
+                    applied.push(change);
+                } catch (error) {
+                    const current = await readEntry(createReadOnlyFs(root).promises, change.path);
+                    if (equal(current, change.after) && !(error instanceof GitPanelError)) applied.push(change);
+                    throw error;
+                }
+            }
+            guard();
+        } catch (error) {
+            let rollbackFailed = false;
+            for (const change of applied.reverse()) {
+                try {await apply(change.path, change.after, change.before);}
+                catch {rollbackFailed = true;}
+            }
+            if (rollbackFailed) throw new GitPanelError('rollbackFailed');
+            throw error;
+        }
+    }};
+}