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

package/src/index.tsx

@@ -4,13 +4,19 @@ import {FileDiffView} from './file-diff-view.js';
 import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
 import type {ChangedFile} from './project-change-model.js';
 import {openRepository} from './repository.js';
-import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup} from './repository.js';
+import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup, HistoryCommit, HistoryCursor} from './repository.js';
+import {HistoryGraph} from './history-graph-view.js';
+import type {HistoryActionResult} from './history-graph-view.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 type {GitAuthor, LocalOperation} from './local-operations.js';
 import {PullRequestReviewPanel} from './pull-request-panel.js';
+import {openProjectSourceTabs} from './project-source-tabs.js';
+import type {ProjectSourceTabsFile} from './project-source-tabs.js';
+import {parseProjectSource} from './project-source-patch.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {ScratchBlockLocationWorkspace} from './block-diff-location.js';
 export {createScratchBlocksDiffLocator} from './block-diff-location.js';
@@ -23,8 +29,15 @@ export type {ScratchBlockDiffRendererOptions, ScratchBlocksPort} from './scratch
 
 export {openRepository, createReadOnlyFs, GitPanelError} from './repository.js';
 export {openProjectComparison} from './project-comparison.js';
+export {openProjectSourceTabs} from './project-source-tabs.js';
+export type {ProjectSourceTabsFile, ProjectSourceTabsOptions} from './project-source-tabs.js';
 export type {ProjectComparisonAction, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
-export type {Repository, Snapshot, FileChange, FileDiff} from './repository.js';
+export type {Repository, Snapshot, FileChange, FileDiff, HistoryCommit, HistoryCursor, HistoryPage, HistoryRef} from './repository.js';
+export {HistoryGraph, laneColors} from './history-graph-view.js';
+export type {HistoryActionResult, HistoryGraphProps} from './history-graph-view.js';
+export {layoutHistory} from './history-graph.js';
+export type {GraphCommit, GraphLayout, GraphRow, GraphSegment} from './history-graph.js';
+export type {GitAuthor, LocalOperation} from './local-operations.js';
 
 export interface GitHost {
     connectionSettings?: GitConnectionSettings;
@@ -42,12 +55,23 @@ export interface GitHost {
     openTargetCode?(targetId: string): void | Promise<void>;
     /** The Editor's code workspace as it is now. */
     getWorkspace?(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+    /**
+     * Offers staging, unstaging and commits. Without it the panel only reads. `author` is used only where the
+     * repository's Git config has no user.name or user.email; the panel never writes the config.
+     */
+    localWrite?: {author?(): GitAuthor | undefined};
 }
 export interface GitPanelRequest {
     reference: {providerId: string; documentId: string};
     filename: string;
     title?: string;
     transient?: boolean;
+    /** Tabs of one area share a split panel of the host's layout. */
+    area?: string;
+    /** Gathers the tab with the others of the same `id` under a labelled chip; `color` is a palette id such as `'green'`. */
+    tabGroup?: {id: string; label: string; color?: string; collapsed?: boolean};
+    /** Opens the tab behind the active one. */
+    inactive?: boolean;
     mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
 }
 interface Controller {open(locale: string): void; refresh(automatic?: boolean): Promise<void>}
@@ -105,9 +129,10 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     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) => {
+    /** Whether an operation ran to the end, or the message the panel shows for why it did not. */
+    const run = async (operation: () => Promise<Partial<State>>, automatic = false): Promise<HistoryActionResult> => {
         if (running.current && !automatic && background.current) await background.current;
-        if (running.current || !alive.current) return;
+        if (running.current || !alive.current) return {done: false};
         let settle = () => {};
         if (automatic) background.current = new Promise(resolve => {settle = resolve;});
         running.current = true;
@@ -119,17 +144,19 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         try {
             const update = await operation();
             if (epoch.current === ticket) setState(previous => ({...previous, ...update, busy: automatic ? previous.busy : false}));
+            return {done: true};
         } catch (error) {
-            if (epoch.current !== ticket) return;
+            if (epoch.current !== ticket) return {done: false};
             const code = error instanceof GitPanelError ? error.code : 'failed';
             // A background read that met another tool still writing tries again on the next check, without an alert.
             if (automatic && code === 'changed') {
                 handled.current = null;
-                return;
+                return {done: false};
             }
             const message = labels[code as keyof typeof labels] || labels.failed;
             setState(previous => ({...previous, error: automatic && previous.error ? previous.error : message,
                 busy: automatic ? previous.busy : false, diff: null}));
+            return {done: false, error: message};
         } finally {
             running.current = false;
             // A result dropped by a newer load still ends the busy state, unless a refresh follows at once.
@@ -337,10 +364,77 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                 notice: operation === 'pull' && current.current.project !== null ? labels.pulledProject : labels.remoteDone};
         });
     };
+    const [message, setMessage] = useState('');
+    const localOperation = (operation: LocalOperation, notice?: string) => {
+        const repository = current.current.repository;
+        if (!repository || !host.localWrite) return Promise.resolve<HistoryActionResult>({done: false});
+        return run(async () => {
+            const ticket = epoch.current;
+            await repository.localOperation(operation, () => {
+                if (epoch.current !== ticket) throw new GitPanelError('changed');
+                // Staging records the saved files; edits still in the Editor would be left out without a word.
+                if (operation.kind === 'stage' && host.isProjectDirty()) throw new GitPanelError('saveFirst');
+                // Switching replaces the files the Editor opened, like pull.
+                if ((operation.kind === 'switchBranch' || (operation.kind === 'createBranch' && operation.checkout)) &&
+                    (host.isProjectDirty() || host.isProjectRunning?.())) throw new GitPanelError('switchUnsafe');
+            });
+            if (operation.kind === 'commit') setMessage('');
+            const snapshot = await repository.read(current.current.project ?? '');
+            return {snapshot, changes: snapshot.changes, selected: null, diff: null, commit: null, notice};
+        });
+    };
+    const [newBranch, setNewBranch] = useState('');
+    const [switchAfterCreate, setSwitchAfterCreate] = useState(true);
+    const changeBranch = async (operation: Extract<LocalOperation, {kind: 'createBranch' | 'switchBranch'}>): Promise<HistoryActionResult> => {
+        const repository = current.current.repository;
+        const project = current.current.project;
+        const switching = operation.kind === 'switchBranch' || operation.checkout;
+        if (!repository) return {done: false};
+        // Tell before switching when the open project folder is not on the branch.
+        const at = operation.kind === 'createBranch' ? operation.at : undefined;
+        if (switching && project && !(operation.kind === 'createBranch' && !operation.fromRemote && !at) &&
+            !await (at ? repository.hasFolder(at, project, 'commit') :
+                repository.hasFolder(operation.name, project, operation.kind === 'createBranch' && operation.fromRemote)) &&
+            !document.defaultView?.confirm(labels.projectMissing)) return {done: false};
+        const result = await localOperation(operation, switching ? labels.switched : labels.branchCreated);
+        if (operation.kind === 'createBranch' && !operation.fromRemote && !at) setNewBranch('');
+        return result;
+    };
+    // The history graph reads its own pages after each snapshot, through the same queue as the other reads.
+    const [history, setHistory] = useState<{commits: HistoryCommit[]; cursor: HistoryCursor | null; loading: boolean; failed: boolean}>(
+        {commits: [], cursor: null, loading: false, failed: false});
+    const historyTicket = useRef(0);
+    useEffect(() => {
+        const ticket = ++historyTicket.current;
+        const repository = state.repository;
+        if (!repository || !state.snapshot) {
+            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 (historyTicket.current === ticket) setHistory({commits: page.commits, cursor: page.cursor, loading: false, failed: false});
+        }, () => {
+            if (historyTicket.current === ticket) setHistory({commits: [], cursor: null, loading: false, failed: true});
+        });
+    }, [state.repository, state.snapshot]);
+    const showMoreHistory = () => {
+        const repository = state.repository;
+        if (!repository || !history.cursor || history.loading) return;
+        const ticket = historyTicket.current;
+        setHistory(previous => ({...previous, loading: true}));
+        repository.history({after: history.cursor}).then(page => {
+            if (historyTicket.current === ticket) setHistory(previous => ({commits: [...previous.commits, ...page.commits],
+                cursor: page.cursor, loading: false, failed: false}));
+        }, () => {
+            if (historyTicket.current === ticket) setHistory(previous => ({...previous, cursor: null, loading: false, failed: true}));
+        });
+    };
     const focusTrap = (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Escape') {event.stopPropagation(); closePanel(); 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"]')]
+        const items = [...event.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled):not([tabindex="-1"]), 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)) {
@@ -352,6 +446,13 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
     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.
+    const branching = !!host.localWrite && !!state.snapshot;
+    // Writing works on the current changes, not on a record from the history, and only on a branch.
+    const writable = !!host.localWrite && !state.commit && !!state.snapshot?.branch;
+    const unrecorded = [...new Set(state.changes.filter(change => change.group === 'unstaged' || change.group === 'untracked')
+        .map(change => change.path))];
+    const staged = state.changes.some(change => change.group === 'staged');
     const projectList = typeof projectChanges === 'object' ? projectChanges : null;
     // The open project matches the working tree, so only the working-tree side of its project file can be located.
     const projectFile = state.project === null ? null : [state.project, 'project.source.json'].filter(Boolean).join('/');
@@ -362,6 +463,20 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     const reviewLocator = (path: string, headSha: string) => locator && path === projectFile && state.snapshot?.head === headSha &&
         !state.changes.length ? locator : undefined;
     const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
+    // Only a tab leaves room for more tabs beside it; the modal dialog keeps its comparisons inside.
+    const openTabs = slot && host.openPanel && host.renderReviewBlock ?
+        (key: string, files: readonly ProjectSourceTabsFile[], rememberAs?: string) =>
+            openProjectSourceTabs(host.openPanel, {key, files, renderBlock: host.renderReviewBlock!, locale, rememberAs}) : undefined;
+    const openFileTabs = (change: FileChange) => openTabs && ((before: string | null, after: string | null) => {
+        let files: ProjectSourceTabsFile[];
+        try {
+            files = [{path: change.path, before: parseProjectSource(before), after: parseProjectSource(after),
+                loadAsset: loadAsset ?? undefined, locateBlock: fileLocator(change)}];
+        } catch {
+            return;
+        }
+        openTabs(`${state.commit ?? change.group}:${change.path}`, files);
+    });
     const content = <>
             <header>
                 <h2>{labels.title}</h2>
@@ -401,7 +516,7 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
             {!state.repository && <p>{labels.empty}</p>}
             {review && state.repository && host.renderReviewBlock &&
                 <PullRequestReviewPanel repository={state.repository} locale={locale} renderBlock={host.renderReviewBlock}
-                    locateFor={reviewLocator}/>}
+                    locateFor={reviewLocator} openTabs={openTabs}/>}
             {!review && state.repository && <div className="twgit-content">
                 <aside>
                     {state.browser && <details>
@@ -418,11 +533,16 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                     {(() => {
                         const fileList = 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}>
+                            <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}
+                                className={writable ? 'twgit-file-row' : undefined}>
                                 <button className="twgit-file" data-git-group={group} disabled={state.busy}
                                     aria-pressed={state.selected === change} onClick={() => openFile(change)}>
                                     <small className="twgit-change-kind">{!change.after ? labels.deleted : !change.before ? labels.added : labels.modified}</small> {change.path}
                                 </button>
+                                {writable && <button type="button" className="twgit-stage" disabled={state.busy}
+                                    aria-label={`${group === 'staged' ? labels.unstage : labels.stage}: ${change.path}`}
+                                    onClick={() => void localOperation({kind: group === 'staged' ? 'unstage' : 'stage', paths: [change.path]})}>
+                                    {group === 'staged' ? labels.unstage : labels.stage}</button>}
                             </li>)}</ul>
                         </section>);
                         return projectList ? <ProjectChangeListView changes={projectList} selected={selection ? element : null}
@@ -430,19 +550,59 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                             fileListOpen={fileListOpen} setFileListOpen={setFileListOpen}/> : fileList;
                     })()}
                     {!state.changes.length && <p>{labels.clean}</p>}
+                    {writable && <section className="twgit-commit" aria-label={labels.commitButton}>
+                        <button type="button" disabled={state.busy || !unrecorded.length}
+                            onClick={() => void localOperation({kind: 'stage', paths: unrecorded})}>{labels.stageAll}</button>
+                        <label>{labels.commitLabel}
+                            <textarea value={message} rows={3} disabled={state.busy} onChange={event => setMessage(event.currentTarget.value)}/></label>
+                        <button type="button" disabled={state.busy || !staged || !message.trim()}
+                            onClick={() => void localOperation({kind: 'commit', message, author: host.localWrite?.author?.()},
+                                labels.committed)}>{labels.commitButton}</button>
+                    </section>}
+                    {branching && state.snapshot && <section className="twgit-branches" aria-label={labels.branches}>
+                        <h3>{labels.branches}</h3>
+                        <ul>{state.snapshot.branches.map(name => <li key={name}><code>{name}</code>
+                            {name === state.snapshot!.branch ? <small> · {labels.currentBranch}</small> :
+                                <button type="button" disabled={state.busy} aria-label={`${labels.switchTo}: ${name}`}
+                                    onClick={() => void changeBranch({kind: 'switchBranch', name})}>{labels.switchTo}</button>}
+                        </li>)}</ul>
+                        {state.snapshot.head && <form onSubmit={event => {
+                            event.preventDefault();
+                            if (newBranch.trim()) void changeBranch({kind: 'createBranch', name: newBranch.trim(), checkout: switchAfterCreate});
+                        }}>
+                            <label>{labels.newBranch} <input value={newBranch} disabled={state.busy}
+                                onChange={event => setNewBranch(event.currentTarget.value)}/></label>
+                            <label><input type="checkbox" checked={switchAfterCreate} disabled={state.busy}
+                                onChange={event => setSwitchAfterCreate(event.currentTarget.checked)}/> {labels.switchAfterCreate}</label>
+                            <button type="submit" disabled={state.busy || !newBranch.trim()}>{labels.createBranch}</button>
+                        </form>}
+                        {state.snapshot.remoteBranches.length > 0 && <>
+                            <h3>{labels.remoteBranches}</h3>
+                            <ul>{state.snapshot.remoteBranches.map(name => <li key={name}><code>origin/{name}</code>
+                                <button type="button" disabled={state.busy} aria-label={`${labels.createFromRemote}: origin/${name}`}
+                                    onClick={() => void changeBranch({kind: 'createBranch', name, fromRemote: true, checkout: true})}>
+                                    {labels.createFromRemote}</button></li>)}</ul>
+                        </>}
+                    </section>}
                     <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>{commit.author} · {new Date(commit.timestamp * 1000).toLocaleString(locale)}</small>
-                    </li>)}</ol>
+                    {state.snapshot && <HistoryGraph commits={history.commits} selected={state.commit} locale={locale} busy={state.busy}
+                        onSelect={oid => void selectCommit(oid)} hasMore={!!history.cursor} loadingMore={history.loading}
+                        onShowMore={showMoreHistory} localBranches={state.snapshot.branches}
+                        {...branching ? {
+                            onCreateBranch: (oid: string, name: string, checkout: boolean) =>
+                                changeBranch({kind: 'createBranch', name, at: oid, checkout}),
+                            onSwitchBranch: (name: string) => changeBranch({kind: 'switchBranch', name}),
+                            onCreateFromRemote: (name: string) => changeBranch({kind: 'createBranch', name, fromRemote: true, checkout: true})
+                        } : {}}/>}
+                    {history.loading && !history.commits.length && <p>{labels.historyLoading}</p>}
+                    {history.failed && <p>{labels.historyFailed}</p>}
                 </aside>
                 <main className="twgit-diff">
                     {selection && projectList ? <ProjectElementView changes={projectList} selection={selection} locale={locale}
                         locateBlock={state.commit ? undefined : locator}
                         renderBlock={host.renderReviewBlock} onSelectFile={openFile}/> :
                         state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
-                            locateBlock={fileLocator(state.selected)}
+                            locateBlock={fileLocator(state.selected)} onOpenTabs={openFileTabs(state.selected)}
                             renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
                 </main>
             </div>}

package/src/local-operations.ts

@@ -0,0 +1,134 @@
+import * as git from 'isomorphic-git';
+import {createReadOnlyFs, errorCode, GitPanelError, pathParts} from './filesystem.js';
+import {createMutationFs} from './mutation-fs.js';
+
+/** The name and email a commit records. */
+export type GitAuthor = {name: string; email: string};
+export type LocalOperation =
+    | {kind: 'stage'; paths: readonly string[]}
+    | {kind: 'unstage'; paths: readonly string[]}
+    | {kind: 'commit'; message: string; author?: GitAuthor}
+    /**
+     * Creates `name` at HEAD, at the commit `at`, or at `origin/<name>` with `fromRemote`, and switches to it with
+     * `checkout`.
+     */
+    | {kind: 'createBranch'; name: string; fromRemote?: boolean; at?: string; checkout: boolean}
+    | {kind: 'switchBranch'; name: string};
+
+const missing = (error: unknown) => ['ENOENT', 'ENOTDIR', 'NotFoundError'].includes(errorCode(error) ?? '');
+
+/**
+ * Stages, unstages or commits in the granted repository. Like pull, Git's writes are collected first and applied
+ * after the files they replace are checked again; a failure part way puts back what was applied. Only `.git/index`,
+ * objects and the current branch ref are written. The work tree and `.git/config` are never written.
+ */
+export async function runLocalOperation(root: FileSystemDirectoryHandle, operation: LocalOperation, guard: () => void) {
+    const execute = async () => {
+        guard();
+        const switching = operation.kind === 'switchBranch' || (operation.kind === 'createBranch' && operation.checkout);
+        const transaction = createMutationFs(root, switching);
+        const options = {fs: transaction.fs, dir: '/', gitdir: '/.git', cache: {}};
+        const read = createReadOnlyFs(root).promises;
+        const exists = async (path: string) => {
+            try {
+                await read.stat(path);
+                return true;
+            } catch (error) {
+                if (missing(error)) return false;
+                throw error;
+            }
+        };
+        // Another tool is in the middle of a merge, rebase or its own write: leave the repository to it.
+        for (const path of ['/.git/index.lock', '/.git/MERGE_HEAD', '/.git/CHERRY_PICK_HEAD', '/.git/REVERT_HEAD',
+            '/.git/rebase-merge', '/.git/rebase-apply']) {
+            if (await exists(path)) throw new GitPanelError('locked');
+        }
+        if (operation.kind === 'createBranch' || operation.kind === 'switchBranch') {
+            const name = operation.name.trim();
+            const local = `refs/heads/${name}`;
+            if (switching) {
+                // Like pull: switching rewrites the work tree, so it starts from a clean one.
+                if ((await git.statusMatrix({...options, refresh: false})).some(([, head, worktree, stage]) =>
+                    head !== worktree || head !== stage)) throw new GitPanelError('switchUnsafe');
+            }
+            if (operation.kind === 'createBranch') {
+                let object: string;
+                if (operation.at !== undefined) {
+                    if (operation.fromRemote || !/^[0-9a-f]{40}$/.test(operation.at)) throw new GitPanelError('invalid');
+                    object = await git.readCommit({...options, oid: operation.at})
+                        .then(() => operation.at!, () => {throw new GitPanelError('invalid');});
+                } else if (operation.fromRemote) {
+                    try {
+                        object = await git.resolveRef({...options, ref: `refs/remotes/origin/${name}`});
+                    } catch {
+                        throw new GitPanelError('invalid');
+                    }
+                } else {
+                    object = await git.resolveRef({...options, ref: 'HEAD'}).catch(() => {throw new GitPanelError('unsupported');});
+                }
+                try {
+                    // The ref first: isomorphic-git's checkout of a missing branch would write tracking config.
+                    await git.branch({...options, ref: name, object, checkout: false});
+                } catch (error) {
+                    const code = (error as {code?: string})?.code;
+                    if (code === 'AlreadyExistsError') throw new GitPanelError('branchExists');
+                    if (code === 'InvalidRefNameError') throw new GitPanelError('branchName');
+                    throw error;
+                }
+            } else if (!(await git.listBranches(options)).includes(name)) {
+                throw new GitPanelError('invalid');
+            }
+            if (switching) {
+                // Executable bits, links and submodules cannot be written from the browser.
+                const commit = await git.resolveRef({...options, ref: local});
+                await git.walk({...options, trees: [git.TREE({ref: commit})], map: async (path, [entry]) => {
+                    if (!entry || path === '.') return true;
+                    const type = await entry.type();
+                    if (type === 'tree') return true;
+                    if (type !== 'blob' || await entry.mode() !== 0o100644) throw new GitPanelError('unsupported');
+                    return true;
+                }});
+                await git.checkout({...options, ref: name});
+                if (await git.currentBranch(options) !== name) throw new GitPanelError('changed');
+            }
+        } else if (operation.kind === 'stage') {
+            // The browser cannot see executable bits or links: staging such a file would change its mode in Git.
+            const modes = new Map<string, number>();
+            await git.walk({...options, trees: [git.STAGE()], map: async (path, [entry]) => {
+                if (entry && path !== '.' && await entry.type() === 'blob') modes.set(path, await entry.mode());
+                return true;
+            }});
+            for (const path of operation.paths) {
+                pathParts(path);
+                const mode = modes.get(path);
+                if (mode !== undefined && mode !== 0o100644) throw new GitPanelError('unsupported');
+                if (await exists('/' + path)) await git.add({...options, filepath: path});
+                else await git.remove({...options, filepath: path});
+            }
+        } else if (operation.kind === 'unstage') {
+            for (const path of operation.paths) {
+                pathParts(path);
+                await git.resetIndex({...options, filepath: path});
+            }
+        } else {
+            const message = operation.message.trim();
+            if (!message) throw new GitPanelError('commitMessage');
+            const ref = await git.currentBranch(options);
+            if (!ref) throw new GitPanelError('unsupported');
+            const configured = async (path: string) => {
+                const value = await git.getConfig({...options, path});
+                return typeof value === 'string' && value.trim() ? value : undefined;
+            };
+            // The repository's own identity first; the Editor's setting only fills in what Git does not have.
+            const name = await configured('user.name') ?? operation.author?.name?.trim();
+            const email = await configured('user.email') ?? operation.author?.email?.trim();
+            if (!name || !email) throw new GitPanelError('author');
+            const staged = (await git.statusMatrix({...options, refresh: false})).some(([, head, , stage]) => head !== stage);
+            if (!staged) throw new GitPanelError('nothingStaged');
+            await git.commit({...options, message: message + '\n', author: {name, email}});
+        }
+        guard();
+        await transaction.commit(guard);
+    };
+    return globalThis.navigator?.locks ? navigator.locks.request('tw-plus-git-mutation', execute) : execute();
+}

package/src/messages.ts

@@ -17,6 +17,11 @@ export const messages = {
         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.',
+        commitMessage: 'Write a message for this record.',
+        switchUnsafe: 'Stop the project, and save or record (or undo) every change, before switching branches.',
+        branchExists: 'A branch with this name already exists.',
+        locked: 'Another Git tool is working on this repository (a lock file, or a merge, cherry-pick, revert or rebase in progress). Try again after it finishes.',
+        branchName: 'Git cannot use this name for a branch.',
         pullUnsafe: 'Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).',
         diverged: 'This branch and GitHub\'s have both gained records, so they cannot be combined here (pull only fast-forwards). Your branch and files are unchanged.',
         session: 'Reconnect GitHub for this repository and requested permission.',
@@ -25,13 +30,27 @@ export const messages = {
         rollbackFailed: 'Some local changes could not be restored. Check the files and the Git details.',
         remoteFailed: 'Could not complete the GitHub operation. Check the connection and try again.',
         remoteDone: 'The GitHub operation finished.',
+        stage: 'Add to Next Record', unstage: 'Remove from Next Record', stageAll: 'Add All Changes to Next Record',
+        commitLabel: 'Message for this record', commitButton: 'Record (Commit)', committed: 'Recorded the changes (commit).',
+        commitAuthor: 'Recorded as',
+        saveFirst: 'Save the project before adding its changes to the next record.',
+        author: 'Set user.name and user.email for this repository in Git before recording. The Editor does not change Git settings.',
+        nothingStaged: 'Add changes to the next record first.',
+        switchTo: 'Switch', currentBranch: 'current', createBranch: 'Create Branch', newBranch: 'New branch name',
+        switchAfterCreate: 'Switch to it', createFromRemote: 'Create and Switch', remoteBranches: 'Branches on GitHub (origin)',
+        switched: 'Switched branches. Use Reload Project to open the files of this branch.', branchCreated: 'Created the branch.',
+        projectMissing: 'The open project folder is not on this branch. Switch anyway?',
         pulledProject: 'Got the changes from GitHub. Use Reload Project to open the updated files.',
         confirmPush: 'Send the records on this branch to GitHub (push)?',
         details: 'Git details', branch: 'Branch', head: 'HEAD', groups: 'Git groups', added: 'Added', modified: 'Changed', deleted: 'Deleted',
         gitStaged: 'Staged', gitUnstaged: 'Unstaged', gitUntracked: 'Untracked',
         upstreamSame: 'Same as GitHub', upstreamAhead: 'Ahead of GitHub', upstreamBehind: 'Behind GitHub', upstreamDiverged: 'Diverged from GitHub',
         upstreamUnknown: 'Not checked with GitHub yet', records: 'records', checkedAt: 'as of the last check',
-        failed: 'Could not read the repository. Check folder access and refresh.'
+        failed: 'Could not read the repository. Check folder access and refresh.',
+        historyMore: 'Show more', historyLoading: 'Reading records…', historyFailed: 'Could not read the records.',
+        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'
     },
     ja: {
         pullRequests: 'プルリクエスト', localChanges: 'ローカルの変更',
@@ -51,6 +70,11 @@ export const messages = {
         changed: '読込中にファイルまたは Git の状態が変わりました。再取得してください。',
         outdated: 'Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。',
         unsupported: 'ブラウザーで扱えない種類の Git エントリーがあります。',
+        commitMessage: 'この記録の説明を書いてください。',
+        switchUnsafe: 'ブランチを切り替える前に、実行を止め、すべての変更を保存して記録（または取り消し）してください。',
+        branchExists: '同じ名前のブランチがすでにあります。',
+        locked: 'ほかの Git の操作が、このリポジトリを使っています（ロックファイル、またはマージ・cherry-pick・revert・rebase の途中）。終わってから、もう一度試してください。',
+        branchName: 'この名前は Git のブランチ名に使えません。',
         pullUnsafe: 'GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。',
         diverged: 'このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。',
         session: 'このリポジトリと操作に必要な権限で GitHub に接続してください。',
@@ -59,13 +83,27 @@ export const messages = {
         rollbackFailed: '一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。',
         remoteFailed: 'GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。',
         remoteDone: 'GitHub との操作が終わりました。',
+        stage: '次の記録に入れる', unstage: '次の記録から外す', stageAll: 'すべての変更を次の記録に入れる',
+        commitLabel: 'この記録の説明', commitButton: '記録する（コミット）', committed: '変更を記録しました（コミット）。',
+        commitAuthor: '記録する人',
+        saveFirst: '次の記録に入れる前に、作品を保存してください。',
+        author: '記録する前に、Git でこのリポジトリの user.name と user.email を設定してください。Editor は Git の設定を変えません。',
+        nothingStaged: '先に、変更を次の記録に入れてください。',
+        switchTo: '切り替える', currentBranch: '現在', createBranch: 'ブランチを作る', newBranch: '新しいブランチの名前',
+        switchAfterCreate: '作ったら切り替える', createFromRemote: '作って切り替える', remoteBranches: 'GitHub（origin）のブランチ',
+        switched: 'ブランチを切り替えました。「作品を再読込」で、このブランチのファイルを開けます。', branchCreated: 'ブランチを作りました。',
+        projectMissing: '開いている作品フォルダは、このブランチにありません。切り替えますか？',
         pulledProject: 'GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。',
         confirmPush: 'このブランチの記録を GitHub に送りますか（push）？',
         details: 'Git の詳細', branch: 'ブランチ', head: 'HEAD', groups: 'Git の区分', added: '追加', modified: '変更', deleted: '削除',
         gitStaged: 'ステージ済み (staged)', gitUnstaged: '未ステージ (unstaged)', gitUntracked: '未追跡 (untracked)',
         upstreamSame: 'GitHub と同じ', upstreamAhead: 'GitHub より進んでいる', upstreamBehind: 'GitHub より遅れている', upstreamDiverged: 'GitHub と分かれている',
         upstreamUnknown: 'まだ GitHub と確かめていない', records: '件', checkedAt: '最後に確かめた時点',
-        failed: 'リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。'
+        failed: 'リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。',
+        historyMore: 'さらに表示', historyLoading: '記録を読込中…', historyFailed: '記録を読み込めませんでした。',
+        historyActions: '操作', historyCreateHere: 'ここからブランチを作る…', historySwitch: '{name} に切り替える',
+        historyCreateFromRemote: '{name} を作って切り替える', historyCopy: 'コミットの ID をコピー', historyCopied: 'コミットの ID をコピーしました。',
+        historyCopyFailed: 'コミットの ID をコピーできませんでした。', historyRefs: 'ブランチ', cancel: 'キャンセル'
     }
 };
 export type Labels = typeof messages.en;

package/src/project-source-diff.tsx

@@ -10,6 +10,8 @@ import './project-source-diff.css';
 export {createGitHubPullRequests, gitHubRepositoryFromOrigin} from './github-pull-requests.js';
 export {ProjectSourceComparison, ProjectSourceReview} from './project-source-review.js';
 export {ProjectComparisonDialog, openProjectComparison} from './project-comparison.js';
+export {openProjectSourceTabs} from './project-source-tabs.js';
+export type {ProjectSourceTabsFile, ProjectSourceTabsOptions} from './project-source-tabs.js';
 export type {ProjectComparisonAction, ProjectComparisonDialogProps, ProjectComparisonOptions, ProjectComparisonSection} from './project-comparison.js';
 export type {ProjectSourceComparisonProps, ProjectSourceReviewFile, ProjectSourceReviewProps} from './project-source-review.js';