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

package/src/index.tsx

@@ -4,7 +4,9 @@ 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';
@@ -12,6 +14,9 @@ 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';
@@ -24,8 +29,14 @@ 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 {
@@ -55,6 +66,12 @@ export interface GitPanelRequest {
     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>}
@@ -112,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;
@@ -126,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.
@@ -347,23 +367,74 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
     const [message, setMessage] = useState('');
     const localOperation = (operation: LocalOperation, notice?: string) => {
         const repository = current.current.repository;
-        if (!repository || !host.localWrite) return Promise.resolve();
+        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)) {
@@ -375,6 +446,8 @@ 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')
@@ -390,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>
@@ -429,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>
@@ -446,7 +533,8 @@ 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}
@@ -471,19 +559,50 @@ function GitPanel({vm, document, host, controller}: {vm: object; document: Docum
                             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

@@ -7,7 +7,13 @@ 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};
+    | {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) ?? '');
 
@@ -19,7 +25,8 @@ const missing = (error: unknown) => ['ENOENT', 'ENOTDIR', 'NotFoundError'].inclu
 export async function runLocalOperation(root: FileSystemDirectoryHandle, operation: LocalOperation, guard: () => void) {
     const execute = async () => {
         guard();
-        const transaction = createMutationFs(root, false);
+        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) => {
@@ -34,9 +41,57 @@ export async function runLocalOperation(root: FileSystemDirectoryHandle, operati
         // 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('changed');
+            if (await exists(path)) throw new GitPanelError('locked');
         }
-        if (operation.kind === 'stage') {
+        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]) => {

package/src/messages.ts

@@ -18,6 +18,10 @@ export const messages = {
         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.',
@@ -32,13 +36,21 @@ export const messages = {
         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: 'ローカルの変更',
@@ -59,6 +71,10 @@ export const messages = {
         outdated: 'Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。',
         unsupported: 'ブラウザーで扱えない種類の Git エントリーがあります。',
         commitMessage: 'この記録の説明を書いてください。',
+        switchUnsafe: 'ブランチを切り替える前に、実行を止め、すべての変更を保存して記録（または取り消し）してください。',
+        branchExists: '同じ名前のブランチがすでにあります。',
+        locked: 'ほかの Git の操作が、このリポジトリを使っています（ロックファイル、またはマージ・cherry-pick・revert・rebase の途中）。終わってから、もう一度試してください。',
+        branchName: 'この名前は Git のブランチ名に使えません。',
         pullUnsafe: 'GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。',
         diverged: 'このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。',
         session: 'このリポジトリと操作に必要な権限で GitHub に接続してください。',
@@ -73,13 +89,21 @@ export const messages = {
         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';
 

package/src/project-source-review.tsx

@@ -124,19 +124,27 @@ function useBlockLocation(comparison: Comparison, locateBlock?: ProjectBlockLoca
     };
 }
 
-function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location}: {
+/** What a script is called in a review: its hat block, or both hat blocks when the change replaced it. */
+function scriptReviewTitle(script: ScriptReview, labels: typeof ja) {
+    const beforeTitle = script.before[0] && scriptTitle(script.before[0], labels);
+    const afterTitle = script.after[0] && scriptTitle(script.after[0], labels);
+    return beforeTitle && afterTitle && beforeTitle !== afterTitle ? beforeTitle + ' → ' + afterTitle : afterTitle ?? beforeTitle;
+}
+
+function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location, expanded = false}: {
     script: ScriptReview; labels: typeof ja; reviewed?: boolean; setReviewed?(value: boolean): void;
     renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; location?: BlockLocation;
+    /** Starts open, as in a tab that holds this one script. */
+    expanded?: boolean;
 }) {
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(expanded);
     const {sync, toggle} = usePreviewSync(labels === ja ? 'ja' : 'en');
     const status = script.kind;
     const locale = labels === ja ? 'ja' : 'en';
     const summary = script.summary.map(item => summaryPhrase(item, locale)).join(labels === ja ? '、' : ', ');
-    const beforeTitle = script.before[0] && scriptTitle(script.before[0], labels);
-    const afterTitle = script.after[0] && scriptTitle(script.after[0], labels);
-    const title = beforeTitle && afterTitle && beforeTitle !== afterTitle ? beforeTitle + ' → ' + afterTitle : afterTitle ?? beforeTitle;
-    return <details className="twgit-review-script" onToggle={event => setOpen((event.currentTarget as HTMLDetailsElement).open)}>
+    const title = scriptReviewTitle(script, labels);
+    return <details className="twgit-review-script" open={expanded || undefined}
+        onToggle={event => setOpen((event.currentTarget as HTMLDetailsElement).open)}>
         <summary>
             <span className="twgit-review-status">{labels[status]}</span>
             <strong>{title}</strong>
@@ -339,8 +347,21 @@ const scriptBlocks = ({target, id}: ScriptReview['before'][number]) => {
 };
 const scriptPrint = (script: ScriptReview) => fingerprint([script.kind, script.before.map(scriptBlocks), script.after.map(scriptBlocks)]);
 const storageKey = (name: string) => `turbowarp-plus-git:reviewed:${name}`;
+// Marks of reviews that are not remembered, shared by the tabs of one comparison while the page is open.
+const memoryMarks = new Map<string, Record<string, string>>();
+// Whoever shows the marks of a review, such as the review panel and the tabs of the same pull request.
+const markListeners = new Map<string, Set<() => void>>();
+const subscribeMarks = (name: string, listener: () => void) => {
+    const listeners = markListeners.get(name) ?? new Set();
+    markListeners.set(name, listeners.add(listener));
+    return () => {
+        listeners.delete(listener);
+        if (!listeners.size) markListeners.delete(name);
+    };
+};
 // Browser storage can be missing or refuse access; the marks then last while the review is open.
-const readMarks = (name: string): Record<string, string> => {
+const readMarks = (name: string, remember = true): Record<string, string> => {
+    if (!remember) return memoryMarks.get(name) ?? {};
     try {
         const value = JSON.parse(globalThis.localStorage?.getItem(storageKey(name)) ?? '{}');
         return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
@@ -348,13 +369,18 @@ const readMarks = (name: string): Record<string, string> => {
         return {};
     }
 };
-const writeMarks = (name: string, marks: Record<string, string>) => {
+const writeMarks = (name: string, marks: Record<string, string>, remember = true) => {
+    if (!remember) {
+        if (Object.keys(marks).length) memoryMarks.set(name, marks);
+        else memoryMarks.delete(name);
+    }
     try {
-        if (Object.keys(marks).length) globalThis.localStorage?.setItem(storageKey(name), JSON.stringify(marks));
-        else globalThis.localStorage?.removeItem(storageKey(name));
+        if (remember && Object.keys(marks).length) globalThis.localStorage?.setItem(storageKey(name), JSON.stringify(marks));
+        else if (remember) globalThis.localStorage?.removeItem(storageKey(name));
     } catch {
         // Not kept; the marks still work for this review.
     }
+    markListeners.get(name)?.forEach(listener => listener());
 };
 
 export function ProjectSourceReview({title, description, verification, files, renderBlock, locale = 'en', rememberAs}: ProjectSourceReviewProps) {
@@ -379,18 +405,24 @@ export function ProjectSourceReview({title, description, verification, files, re
         return prints;
     }, [entries]);
     const [checked, setChecked] = useState<{entries: typeof entries; marks: Record<string, string>}>();
+    // A mark set in a tab of the same pull request shows here too.
+    const [, refresh] = useState(0);
+    useEffect(() => rememberAs ? subscribeMarks(rememberAs, () => {
+        setChecked(undefined);
+        refresh(count => count + 1);
+    }) : undefined, [rememberAs]);
     const marks = checked?.entries === entries ? checked.marks : rememberAs ? readMarks(rememberAs) : {};
     const reviewed = new Set([...scriptPrints].filter(([key, print]) => marks[key] === print).map(([key]) => key));
-    const setReviewed = (key: string, value: boolean) => setChecked(previous => {
-        const current = previous?.entries === entries ? previous.marks : rememberAs ? readMarks(rememberAs) : {};
+    const setReviewed = (key: string, value: boolean) => {
         // Keep only marks that still match a script of this review.
         const next: Record<string, string> = {};
-        for (const [name, print] of scriptPrints) if (current[name] === print) next[name] = print;
+        for (const [name, print] of scriptPrints) if (marks[name] === print) next[name] = print;
         if (value) next[key] = scriptPrints.get(key)!;
         else delete next[key];
+        // Writing tells the tabs of this review, and this panel, which then keeps the marks it has just set.
         if (rememberAs) writeMarks(rememberAs, next);
-        return {entries, marks: next};
-    });
+        setChecked({entries, marks: next});
+    };
     const targets = entries.reduce((total, entry) => total + (entry.comparison?.targets.length ?? 0), 0);
     const scripts = entries.reduce((total, entry) => total + (entry.comparison ? countScripts(entry.comparison) : 0), 0);
     const body = description?.trim();
@@ -429,3 +461,83 @@ export function ProjectSourceReview({title, description, verification, files, re
         </section>)}
     </section>;
 }
+
+/** The words of one tab of a project comparison opened as tabs. */
+export function reviewTabWords(locale: string) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    return {
+        script: (script: ScriptReview) => `${scriptReviewTitle(script, labels)} · ${labels[script.kind]}`,
+        target: (target: TargetReview) => target.isStage ? labels.stage : target.name,
+        targetDetails: labels.properties,
+        project: labels.comparison,
+        noChanges: labels.noChanges
+    };
+}
+
+/**
+ * Where a tab keeps its reviewed mark: under `name` with the review of the same name, in the browser when
+ * `remember` is set, or else while the page is open.
+ */
+export interface ReviewMarkPlace {
+    name: string;
+    remember: boolean;
+    file: string;
+    target: TargetReview;
+}
+
+function useReviewMark(place: ReviewMarkPlace | undefined, script: ScriptReview) {
+    const [, refresh] = useState(0);
+    useEffect(() => place && subscribeMarks(place.name, () => refresh(count => count + 1)), [place?.name]);
+    if (!place) return {};
+    const key = reviewKey(place.file, place.target, script);
+    const print = scriptPrint(script);
+    return {
+        reviewed: readMarks(place.name, place.remember)[key] === print,
+        setReviewed(value: boolean) {
+            const marks = {...readMarks(place.name, place.remember)};
+            if (value) marks[key] = print;
+            else delete marks[key];
+            writeMarks(place.name, marks, place.remember);
+        }
+    };
+}
+
+/** One script of a comparison, open, for a tab of its own. */
+export function ScriptReviewTab({comparison, script, renderBlock, locale = 'en', loadAsset, locateBlock, mark}: {
+    comparison: Comparison; script: ScriptReview; renderBlock: ProjectBlockRenderer; locale?: string;
+    loadAsset?: ProjectAssetLoader; locateBlock?: ProjectBlockLocator;
+    /** Offers the reviewed mark, shared with the review panel and other tabs that use the same place. */
+    mark?: ReviewMarkPlace;
+}) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    const location = useBlockLocation(comparison, locateBlock);
+    const {reviewed, setReviewed} = useReviewMark(mark, script);
+    return <section className="twgit-block-diff twgit-review twgit-review-tab">
+        <ScriptComparison script={script} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset} location={location} expanded
+            reviewed={reviewed} setReviewed={setReviewed}/>
+        <Legend labels={labels}/>
+    </section>;
+}
+
+/**
+ * What changed in a stage or sprite outside its code, or in the project as a whole when no target is given,
+ * for a tab of its own.
+ */
+export function TargetReviewTab({comparison, target, locale = 'en', loadAsset}: {
+    comparison: Comparison; target?: TargetReview; locale?: string; loadAsset?: ProjectAssetLoader;
+}) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    if (!target) {
+        return <section className="twgit-block-diff twgit-review twgit-review-tab">
+            {comparison.properties.length > 0 ? <p>{labels.properties} · {propertyNames(comparison.properties, labels)}</p> :
+                <p>{labels.noChanges}</p>}
+        </section>;
+    }
+    return <section className="twgit-block-diff twgit-review twgit-review-tab">
+        <h5><TargetThumbnails target={target} labels={labels} loadAsset={loadAsset}/>{target.isStage ? labels.stage : target.name}</h5>
+        {target.status !== 'updated' && <p className="twgit-review-target-status">
+            {(target.status === 'added' ? labels.targetAdded : labels.targetRemoved)(target.name, target.isStage)}</p>}
+        {target.status === 'updated' && target.properties.length > 0 && <p>{labels.properties} · {propertyNames(target.properties, labels)}</p>}
+        {target.scripts.length > 0 && <p>{labels.scriptCount(target.scripts.length)}</p>}
+    </section>;
+}