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

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>;
+}

package/src/project-source-tabs.tsx

@@ -0,0 +1,118 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {render, unmountComponentAtNode} from 'react-dom';
+import {compareProjectForReview} from './project-source-review-model.js';
+import type {TargetReview} from './project-source-review-model.js';
+import {reviewTabWords, ScriptReviewTab, TargetReviewTab} from './project-source-review.js';
+import type {ProjectSource} from './project-source-patch.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {ProjectAssetLoader} from './project-assets.js';
+import type {ProjectBlockLocator} from './block-diff-location.js';
+import type {GitPanelRequest} from './index.js';
+
+/** One project.source.json of a comparison, read into both versions. */
+export interface ProjectSourceTabsFile {
+    path: string;
+    before: ProjectSource;
+    after: ProjectSource;
+    loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on the after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator;
+}
+
+export interface ProjectSourceTabsOptions {
+    /**
+     * Names this comparison, such as `owner/repo#42@<head>` or `<commit>:project.source.json`. Its tabs share one
+     * split, and opening the same comparison again brings its tabs forward instead of adding them twice.
+     */
+    key: string;
+    files: readonly ProjectSourceTabsFile[];
+    renderBlock: ProjectBlockRenderer;
+    locale?: string;
+    /**
+     * Shares the reviewed marks of the script tabs with the review of this name, such as `owner/repo#42`, and keeps
+     * them in the browser. Without it, the marks are kept for this comparison while the page is open.
+     */
+    rememberAs?: string;
+}
+
+const providerId = 'turbowarp-plus-git';
+// The chip colour says what happened to the stage or sprite, as the review's status words do.
+const statusColor = {added: 'green', removed: 'red', updated: 'blue'} as const;
+
+/** Renders its content once the tab is first shown, so a comparison with many scripts draws only what is looked at. */
+function WhenShown({children}: {children: React.ReactNode}) {
+    const element = useRef<HTMLDivElement>(null);
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const view = element.current?.ownerDocument.defaultView as (Window & typeof globalThis) | null;
+        if (shown || !element.current) return;
+        if (!view?.IntersectionObserver) {
+            setShown(true);
+            return;
+        }
+        const observer = new view.IntersectionObserver(entries => {
+            if (entries.some(entry => entry.isIntersecting)) setShown(true);
+        });
+        observer.observe(element.current);
+        return () => observer.disconnect();
+    }, [shown]);
+    return <div ref={element} className="twgit-review-tab-body">{shown && children}</div>;
+}
+
+/**
+ * Opens a comparison of project.source.json files as tabs of the host's workspace: a tab group for each changed
+ * stage or sprite, holding a tab for each changed script and one for its changes outside the code.
+ * Returns how many tabs were asked for, or `0` when the host has no workspace to take them.
+ */
+export function openProjectSourceTabs(openPanel: ((request: GitPanelRequest) => boolean) | undefined,
+    {key, files, renderBlock, locale = 'en', rememberAs}: ProjectSourceTabsOptions): number {
+    if (!openPanel) return 0;
+    const words = reviewTabWords(locale);
+    const area = `${providerId}:diff:${key}`;
+    const requests: GitPanelRequest[] = [];
+    const tab = (documentId: string, title: string, content: () => React.ReactElement,
+        tabGroup?: GitPanelRequest['tabGroup']): GitPanelRequest => ({
+        reference: {providerId, documentId: `diff:${key}:${documentId}`},
+        filename: title,
+        title,
+        transient: true,
+        area,
+        tabGroup,
+        inactive: requests.length > 0,
+        mount(element) {
+            element.classList.add('twgit-panel-tab', 'twgit-review-tab-slot');
+            render(<WhenShown>{content()}</WhenShown>, element);
+            return {requestClose: () => {}, dispose: () => { unmountComponentAtNode(element); }};
+        }
+    });
+    for (const file of files) {
+        const comparison = compareProjectForReview(file.before, file.after);
+        const prefix = files.length > 1 ? file.path.split('/').slice(0, -1).join('/') : '';
+        const labelOf = (target: TargetReview) => prefix ? `${prefix}: ${words.target(target)}` : words.target(target);
+        if (comparison.properties.length || !comparison.targets.length) {
+            const title = prefix ? `${prefix}: ${words.project}` : words.project;
+            requests.push(tab(`${file.path}:project`, title, () => <TargetReviewTab comparison={comparison} locale={locale}/>));
+        }
+        for (const target of comparison.targets) {
+            const targetKey = JSON.stringify([file.path, target.isStage, target.name]);
+            const tabGroup = {id: `${area}:${targetKey}`, label: labelOf(target), color: statusColor[target.status]};
+            if (target.status !== 'updated' || target.properties.length || !target.scripts.length) {
+                // The chip names the stage or sprite, so its tabs name only what they show.
+                requests.push(tab(`${targetKey}:details`, words.targetDetails,
+                    () => <TargetReviewTab comparison={comparison} target={target} locale={locale} loadAsset={file.loadAsset}/>, tabGroup));
+            }
+            for (const script of target.scripts) {
+                requests.push(tab(`${targetKey}:${script.id}`, words.script(script),
+                    () => <ScriptReviewTab comparison={comparison} script={script} renderBlock={renderBlock} locale={locale}
+                        loadAsset={file.loadAsset} locateBlock={file.locateBlock}
+                        mark={{name: rememberAs ?? area, remember: !!rememberAs, file: file.path, target}}/>, tabGroup));
+            }
+        }
+    }
+    let opened = 0;
+    for (const request of requests) {
+        if (!openPanel(request)) break;
+        opened++;
+    }
+    return opened;
+}

package/src/pull-request-panel.tsx

@@ -5,6 +5,10 @@ import {ProjectSourceReview} from './project-source-review.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {Repository} from './repository.js';
 import type {ProjectBlockLocator} from './block-diff-location.js';
+import {readProjectSourceDiff} from './project-source-patch.js';
+import type {ProjectSourceTabsFile} from './project-source-tabs.js';
+
+type OpenTabs = (key: string, files: readonly ProjectSourceTabsFile[], rememberAs?: string) => number;
 
 const en = {
     title: 'Pull requests', number: 'Pull request number', openNumber: 'Open pull request',
@@ -15,7 +19,8 @@ const en = {
     unavailable: 'GitHub could not read this repository or pull request. The panel supports public repositories.',
     rateLimit: 'The public GitHub API rate limit was reached. Try again after the limit resets.',
     failed: 'Could not read GitHub. Try again.', changed: 'The pull request changed while it was being read. Open it again.',
-    tooManyFiles: 'GitHub only returns the first 3,000 changed files. This pull request exceeds that limit.'
+    tooManyFiles: 'GitHub only returns the first 3,000 changed files. This pull request exceeds that limit.',
+    openTabs: 'Open as tabs'
 };
 const ja: typeof en = {
     title: 'プルリクエスト', number: 'プルリクエスト番号', openNumber: 'PR を開く',
@@ -27,7 +32,8 @@ const ja: typeof en = {
     rateLimit: '公開 GitHub API の利用上限に達しました。上限の解除後に再試行してください。',
     failed: 'GitHub から取得できませんでした。再試行してください。',
     changed: '取得中にプルリクエストが更新されました。もう一度開いてください。',
-    tooManyFiles: '変更ファイルが GitHub API の取得上限である 3,000 件を超えています。'
+    tooManyFiles: '変更ファイルが GitHub API の取得上限である 3,000 件を超えています。',
+    openTabs: 'タブで開く'
 };
 
 function errorMessage(error: unknown, labels: typeof en) {
@@ -38,9 +44,10 @@ type Result<T> = {data: T; error?: never} | {data?: never; error: string};
 type Listing = Awaited<ReturnType<GitHubPullRequests['list']>>;
 type Pull = Awaited<ReturnType<GitHubPullRequests['load']>>;
 
-function PullRequests({name, labels, locale, renderBlock, locateFor}: {
+function PullRequests({name, labels, locale, renderBlock, locateFor, openTabs}: {
     name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
     locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
+    openTabs?: OpenTabs;
 }) {
     const client = useMemo(() => createGitHubPullRequests(name), [name]);
     const [page, setPage] = useState(1);
@@ -109,6 +116,18 @@ function PullRequests({name, labels, locale, renderBlock, locateFor}: {
                     {pr.author && <span>{pr.author}</span>}
                     <code title={pr.head.sha}>{pr.head.ref} → {pr.base.ref}</code>
                     <a href={pr.url} target="_blank" rel="noreferrer">{labels.onGitHub}</a>
+                    {openTabs && <button type="button" data-git-open-tabs="" onClick={() => openTabs(`${name}#${pr.number}@${pr.head.sha}`,
+                        pr.files.flatMap(file => {
+                            if (!('patch' in file)) return [];
+                            let projects;
+                            try {
+                                projects = readProjectSourceDiff(file.patch, file.beforeSource);
+                            } catch {
+                                return [];
+                            }
+                            return projects ? [{path: file.path, before: projects[0], after: projects[1], loadAsset: file.loadAsset,
+                                locateBlock: locateFor?.(file.path, pr.head.sha)}] : [];
+                        }), `${name}#${pr.number}`)}>{labels.openTabs}</button>}
                 </p>
                 <ProjectSourceReview title={pr.title} description={pr.description} files={locateFor ? pr.files.map(file => 'patch' in file ? {...file, locateBlock: locateFor(file.path, pr.head.sha)} : file) : pr.files}
                     renderBlock={renderBlock} locale={locale} rememberAs={`${name}#${pr.number}`}/>
@@ -117,8 +136,10 @@ function PullRequests({name, labels, locale, renderBlock, locateFor}: {
     </div>;
 }
 
-export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor}: {
+export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor, openTabs}: {
     repository: Repository; locale: string; renderBlock: ProjectBlockRenderer;
+    /** Opens a pull request's project changes as tabs of the host's layout. */
+    openTabs?: OpenTabs;
     /** Returns a locator for a project file whose PR head matches the open project, or `undefined`. */
     locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
@@ -135,5 +156,5 @@ export function PullRequestReviewPanel({repository, locale, renderBlock, locateF
     }, [repository]);
     if (origin?.repository !== repository) return <p role="status" className="twgit-context">{labels.loading}</p>;
     if (!origin.name) return <p className="twgit-context" role="status">{origin.failed ? labels.failed : labels.noOrigin}</p>;
-    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor}/>;
+    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor} openTabs={openTabs}/>;
 }

package/src/repository.ts

@@ -35,12 +35,41 @@ type Source = {kind: 'tree'; ref: string} | {kind: 'index'} | {kind: 'worktree'}
  * across the index and the working tree read as one; or one commit and its first parent.
  */
 export type ProjectComparison = {kind: 'worktree'} | {kind: 'commit'; commit: string};
+/** A ref drawn next to a commit in the history: a local branch, `origin/<name>`, or HEAD when it is detached. */
+export interface HistoryRef {
+    kind: 'branch' | 'remote' | 'head';
+    /** The branch name; `origin/<name>` for remote branches; `HEAD` for a detached HEAD. */
+    name: string;
+    /** The branch HEAD is on, or the detached HEAD. */
+    current: boolean;
+}
+export interface HistoryCommit {
+    oid: string;
+    parents: string[];
+    /** The first line of the message. */
+    message: string;
+    author: string;
+    /** Author time in seconds. */
+    timestamp: number;
+    refs: HistoryRef[];
+}
+/** Where `history` continues. It only works with the repository that returned it. */
+export type HistoryCursor = {readonly continues: 'history'};
+export interface HistoryPage {
+    commits: HistoryCommit[];
+    /** Pass as `after` to read the next page; `null` when every commit has been read. */
+    cursor: HistoryCursor | null;
+}
+/** Commits read per history page unless asked otherwise. */
+export const historyPageSize = 50;
 const projectSourceLimit = 16 * 1024 * 1024;
 type Metadata = Map<string, Uint8Array | null>;
 export interface Snapshot {
     branch: string | undefined;
     head: string | null;
     branches: string[];
+    /** Branches fetched from `origin` that have no local branch of the same name yet. */
+    remoteBranches: string[];
     commits: Commit[];
     changes: FileChange[];
     scope: string;
@@ -260,6 +289,8 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }
         const branch = await git.currentBranch(options);
         const branches = await git.listBranches(options);
+        const remoteBranches = (await git.listBranches({...options, remote: 'origin'}))
+            .filter(name => name !== 'HEAD' && !branches.includes(name)).sort();
         const commits = head ? (await git.log({...options, cache, ref: head, depth: 50})).map(({oid, commit}) => ({
             oid, message: commit.message, author: commit.author.name, timestamp: commit.author.timestamp
         })) : [];
@@ -285,7 +316,111 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }
         if (!sameMetadata(before, await metadata())) throw new GitPanelError('changed');
         await fs.checkReads();
-        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint, upstream};
+        return {branch: branch || undefined, head, branches, remoteBranches, commits, changes, scope, metadata: before, probe: fingerprint,
+            upstream};
+    };
+    interface HistoryNode {commit: HistoryCommit; time: number; children: number; expanded: boolean}
+    interface HistoryWalk {nodes: Map<string, HistoryNode>; pending: Set<HistoryNode>; frontier: Set<HistoryNode>}
+    const walks = new WeakMap<HistoryCursor, HistoryWalk>();
+    /**
+     * Reads commits reachable from the local branches, `origin/*` and HEAD, newest committer time first, like
+     * `git log --all --date-order` limited to those refs. A commit is listed only after every child read so far, and
+     * only once no commit still to be read is newer, keeping a page's worth read ahead, so a child stays above its
+     * parents unless committer times run backwards by more than that.
+     */
+    const history = async ({limit = historyPageSize, after}: {limit?: number; after?: HistoryCursor | null} = {}): Promise<HistoryPage> => {
+        fs.clearReads();
+        if (!(limit >= 1)) limit = historyPageSize;
+        let walk = after ? walks.get(after) : undefined;
+        // Each cursor continues once; the walk it names moves on.
+        if (after && !walk) throw new GitPanelError('changed');
+        if (after) walks.delete(after);
+        const readNode = async (oid: string): Promise<HistoryNode | null> => {
+            try {
+                const {commit} = await git.readCommit({...options, cache, oid});
+                return {commit: {oid, parents: commit.parent, message: commit.message.split('\n')[0], author: commit.author.name,
+                    timestamp: commit.author.timestamp, refs: []}, time: commit.committer.timestamp, children: 0, expanded: false};
+            } catch (error) {
+                // A shallow clone stops before the parents it does not have.
+                if (errorCode(error) === 'NotFoundError') return null;
+                throw error;
+            }
+        };
+        if (!walk) {
+            walk = {nodes: new Map(), pending: new Set(), frontier: new Set()};
+            const tips: {ref: string; label: HistoryRef}[] = [];
+            const branch = await git.currentBranch(options);
+            for (const name of (await git.listBranches(options)).sort()) {
+                tips.push({ref: `refs/heads/${name}`, label: {kind: 'branch', name, current: name === branch}});
+            }
+            for (const name of (await git.listBranches({...options, remote: 'origin'})).sort()) {
+                if (name !== 'HEAD') tips.push({ref: `refs/remotes/origin/${name}`, label: {kind: 'remote', name: `origin/${name}`, current: false}});
+            }
+            if (!branch) tips.push({ref: 'HEAD', label: {kind: 'head', name: 'HEAD', current: true}});
+            for (const {ref, label} of tips) {
+                let oid: string;
+                try {oid = await git.resolveRef({...options, ref});} catch (error) {
+                    if (errorCode(error) === 'NotFoundError') continue;
+                    throw error;
+                }
+                let node = walk.nodes.get(oid);
+                if (!node) {
+                    const read = await readNode(oid);
+                    if (!read) continue;
+                    node = read;
+                    walk.nodes.set(oid, node);
+                    walk.pending.add(node);
+                    walk.frontier.add(node);
+                }
+                node.commit.refs.push(label);
+            }
+        }
+        const {nodes, pending, frontier} = walk;
+        const expand = async (node: HistoryNode) => {
+            frontier.delete(node);
+            node.expanded = true;
+            for (const parent of new Set(node.commit.parents)) {
+                let next = nodes.get(parent);
+                if (!next) {
+                    const read = await readNode(parent);
+                    if (!read) continue;
+                    next = read;
+                    nodes.set(parent, next);
+                    pending.add(next);
+                    frontier.add(next);
+                }
+                if (pending.has(node) && pending.has(next)) next.children++;
+            }
+        };
+        const newer = (a: HistoryNode, b: HistoryNode) => a.time !== b.time ? a.time > b.time : a.commit.oid > b.commit.oid;
+        const pick = (items: Iterable<HistoryNode>, accept: (node: HistoryNode) => boolean) => {
+            let best: HistoryNode | null = null;
+            for (const node of items) if (accept(node) && (!best || newer(node, best))) best = node;
+            return best;
+        };
+        const commits: HistoryCommit[] = [];
+        while (commits.length < limit) {
+            let ready = pick(pending, node => node.children === 0);
+            let latest = pick(frontier, () => true);
+            // Read on while something unread may be newer than the next commit, keeping a page read ahead.
+            while (latest && (!ready || !ready.expanded || latest.time >= ready.time || pending.size < limit * 2)) {
+                await expand(latest);
+                ready = pick(pending, node => node.children === 0);
+                latest = pick(frontier, () => true);
+            }
+            if (!ready) break;
+            pending.delete(ready);
+            for (const parent of new Set(ready.commit.parents)) {
+                const node = nodes.get(parent);
+                if (node && pending.has(node) && ready.expanded) node.children--;
+            }
+            commits.push(ready.commit);
+        }
+        await fs.checkReads();
+        if (!pending.size) return {commits, cursor: null};
+        const cursor: HistoryCursor = Object.freeze({continues: 'history' as const});
+        walks.set(cursor, walk);
+        return {commits, cursor};
     };
     const historyChanges = async (snapshot: Snapshot, oid: string): Promise<FileChange[]> => {
         fs.clearReads();
@@ -463,9 +598,28 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         /** Stages, unstages or commits; see `runLocalOperation`. `guard` throws to stop before each write. */
         localOperation: (operation: LocalOperation, guard: () => void) =>
             serial(() => runLocalOperation(root, operation, guard)),
+        /**
+         * Whether a local branch, `origin/<name>` with `remote`, or the commit `name` with `remote` set to `'commit'`,
+         * has the folder `path` (the root always exists).
+         */
+        hasFolder: (name: string, path: string, remote: boolean | 'commit' = false) => serial(async () => {
+            const ref = remote === 'commit' ? name : remote ? `refs/remotes/origin/${name}` : `refs/heads/${name}`;
+            if (!path) return true;
+            try {
+                const {tree} = await git.readTree({...options, oid: await git.resolveRef({...options, ref}), filepath: path});
+                return tree.length > 0;
+            } catch {
+                return false;
+            }
+        }),
         read: (scope?: string) => serial(() => read(scope)),
         readDiff: (snapshot: Snapshot, change: FileChange) => serial(() => readDiff(snapshot, change)),
         historyChanges: (snapshot: Snapshot, oid: string) => serial(() => historyChanges(snapshot, oid)),
+        /**
+         * Reads one page of the commits reachable from the local branches, `origin/*` and a detached HEAD, newest first
+         * with each child above its parents, and the refs at each. Pass the returned `cursor` as `after` for the next page.
+         */
+        history: (options?: {limit?: number; after?: HistoryCursor | null}) => serial(() => history(options)),
         /**
          * Reads the assets of both versions of a selected project file, for thumbnails. Staged changes compare HEAD with
          * the index, unstaged ones the index with the working tree, untracked ones nothing with the working tree, and

package/src/style.css

@@ -2,6 +2,10 @@
 .twgit-panel { width: 94vw; height: 90vh; display: flex; flex-direction: column; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 8px; box-shadow: 0 12px 48px #0005; font: 14px/1.5 system-ui, sans-serif; overflow: hidden; }
 .twgit-panel > header { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid GrayText; }
 .twgit-panel > header h2 { margin: 0 auto 0 0; font-size: 18px; }
+.twgit-panel .twgit-close, .twgit-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
+    border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
+.twgit-panel .twgit-close:hover, .twgit-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-panel .twgit-close:focus-visible, .twgit-close:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
 .twgit-panel h3 { font-size: 14px; margin: 12px 0 5px; }
 .twgit-panel button { color: inherit; background: Canvas; border: 1px solid GrayText; border-radius: 4px; padding: 4px 8px; cursor: pointer; font: inherit; text-align: start; }
 .twgit-panel button:disabled { opacity: .5; cursor: default; }
@@ -26,15 +30,14 @@
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
-.twgit-panel .twgit-stage { font-size: 11px; margin: 0 0 4px; }
+.twgit-panel .twgit-file-row { display: flex; gap: 6px; align-items: center; }
+.twgit-panel .twgit-file-row .twgit-file { flex: 1; min-width: 0; width: auto; text-align: start; }
+.twgit-panel .twgit-stage { flex: none; font-size: 11px; margin: 0; white-space: nowrap; }
 .twgit-commit { display: grid; gap: 6px; margin: 10px 0; padding: 8px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
 .twgit-commit label { display: grid; gap: 4px; font-size: 12px; }
 .twgit-commit textarea { font: inherit; resize: vertical; min-height: 3em; }
 .twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
 .twgit-diff .diff { font-size: 12px; }
-.twgit-history { list-style: none; margin: 0; padding: 0; }
-.twgit-history li { padding: 5px 0; }
-.twgit-history small { display: block; font-size: 11px; }
 .twgit-panel > footer { font-size: 11px; padding: 8px 16px; border-top: 1px solid GrayText; }
 .twgit-error { margin: 6px 16px; color: #a11919; padding: 8px; background: #fff0f0; }
 @media (max-width: 700px) { .twgit-content { grid-template-columns: minmax(180px, 42%) minmax(0, 1fr); } .twgit-panel > header { flex-wrap: wrap; } }
@@ -65,3 +68,27 @@
 .twgit-comparison-body > p { margin: 0 0 8px; }
 .twgit-comparison-body > section { margin-top: 16px; }
 .twgit-comparison-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid GrayText; }
+.twgit-branches ul { list-style: none; padding: 0; margin: 4px 0; }
+.twgit-branches li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; }
+.twgit-branches form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
+.twgit-graph-list { list-style: none; margin: 0; padding: 0; }
+.twgit-graph-row { position: relative; display: flex; align-items: stretch; gap: 4px; height: 44px; }
+.twgit-graph-lanes { flex: none; display: block; }
+.twgit-panel .twgit-graph-commit, .twgit-graph-commit { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
+    gap: 1px; margin: 2px 0; padding: 2px 6px; border: 0; text-align: start; }
+.twgit-graph-subject, .twgit-graph-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.twgit-graph-meta { font-size: 11px; opacity: .8; }
+.twgit-graph-ref { display: inline-block; margin-inline-end: 4px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 8px;
+    border: 1px solid color-mix(in srgb, CanvasText 35%, Canvas); }
+.twgit-graph-ref-current { font-weight: 600; border-color: currentColor; }
+.twgit-graph-ref-remote { border-style: dashed; }
+.twgit-panel .twgit-graph-menu-button, .twgit-graph-menu-button { flex: none; align-self: center; padding: 0 6px; line-height: 22px; }
+.twgit-graph-popup { position: absolute; z-index: 6; top: 100%; right: 0; display: grid; gap: 2px; min-width: 200px; padding: 6px;
+    background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 6px; box-shadow: 0 8px 24px #0004; }
+.twgit-panel .twgit-graph-popup [role="menuitem"], .twgit-graph-popup [role="menuitem"] { border: 0; text-align: start; }
+.twgit-graph-popup form { display: grid; gap: 6px; font-size: 12px; }
+.twgit-graph-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
+.twgit-graph-more { margin: 6px 0; }
+.twgit-graph-status { margin: 4px 0; font-size: 11px; min-height: 1em; }
+.twgit-panel .twgit-graph-popup [role="menuitem"]:focus-visible, .twgit-graph-popup [role="menuitem"]:focus-visible { outline-offset: -2px; }
+.twgit-graph-form-error { margin: 0; color: #a11919; overflow-wrap: anywhere; }