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

package/src/project-source-patch.ts

@@ -0,0 +1,126 @@
+import {applyPatch, createTwoFilesPatch, parsePatch} from 'diff';
+
+export type BlockTable = Record<string, unknown>;
+export interface ProjectTarget {
+    name: string;
+    isStage: boolean;
+    blocks: BlockTable;
+}
+export type ProjectSource = Record<string, unknown> & {targets: ProjectTarget[]};
+
+export const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+
+function readProject(source: string): ProjectSource {
+    const project: unknown = JSON.parse(source);
+    if (!isRecord(project) || !Array.isArray(project.targets) || !project.targets.every(target =>
+        isRecord(target) && typeof target.name === 'string' && typeof target.isStage === 'boolean' && (target.blocks === undefined || isRecord(target.blocks)))) {
+        throw new Error('Expected a project.source.json with Scratch targets and blocks.');
+    }
+    const parsed = project as ProjectSource;
+    return {...parsed, targets: parsed.targets.map(target => ({...target, blocks: target.blocks ?? {}}))};
+}
+
+/** Reads one version of a project.source.json. `null` stands for a version in which the file does not exist. */
+export function parseProjectSource(source: string | null): ProjectSource {
+    return source === null ? {targets: []} : readProject(source);
+}
+
+/** Keep the original lines and include enough context to render both sides from the patch alone. */
+export function createProjectSourceDiff(before: string, after: string): string {
+    readProject(before);
+    readProject(after);
+    const patch = createTwoFilesPatch('a/project.source.json', 'b/project.source.json', before, after,
+        undefined, undefined, {context: Infinity, timeout: 1000});
+    if (patch === undefined) throw new Error('Project source diff exceeded its time limit.');
+    return 'diff --git a/project.source.json b/project.source.json\n' + patch.replace(/^=+\n/, '');
+}
+
+export function readProjectSourceDiff(patch: string, beforeSource?: string): [ProjectSource, ProjectSource] | null {
+    const [file, extra] = parsePatch(patch);
+    if (!file || extra || !file.oldFileName || !file.newFileName) throw new Error('Expected a single unified text diff.');
+    if (beforeSource !== undefined) {
+        const before = readProject(beforeSource);
+        const after = applyPatch(beforeSource, file);
+        if (after === false) throw new Error('The original project does not match this diff.');
+        return [before, readProject(after)];
+    }
+    if (!file.hunks.length) return null;
+    const before: string[] = [], after: string[] = [];
+    for (const hunk of file.hunks) {
+        if (hunk.oldStart !== before.length + 1 || hunk.newStart !== after.length + 1) {
+            throw new Error('The diff omits project context.');
+        }
+        for (const line of hunk.lines) {
+            if (line.startsWith(' ') || line.startsWith('-')) before.push(line.slice(1));
+            if (line.startsWith(' ') || line.startsWith('+')) after.push(line.slice(1));
+        }
+    }
+    return [readProject(before.join('\n')), readProject(after.join('\n'))];
+}
+
+export function equal(a: unknown, b: unknown): boolean {
+    if (a === b) return true;
+    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((value, i) => equal(value, b[i]));
+    if (!isRecord(a) || !isRecord(b)) return false;
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every(key => Object.hasOwn(b, key) && equal(a[key], b[key]));
+}
+
+export const targetKey = (target: ProjectTarget) => target.isStage ? 'stage' : 'sprite:' + target.name;
+
+export interface BlockSide { target: ProjectTarget; id: string }
+export interface BlockPart { kind: 'input' | 'field'; name: string }
+
+function changedParts(before: unknown, after: unknown): BlockPart[] {
+    if (!isRecord(before) || !isRecord(after)) return [];
+    const result: BlockPart[] = [];
+    // A shadow hidden behind a reporter is not the field shown in the workspace.
+    const visibleInput = (input: unknown) => Array.isArray(input) ? input[1] ?? input[2] : input;
+    for (const group of ['inputs', 'fields'] as const) {
+        const oldGroup = isRecord(before[group]) ? before[group] : {};
+        const newGroup = isRecord(after[group]) ? after[group] : {};
+        for (const name of new Set([...Object.keys(oldGroup), ...Object.keys(newGroup)])) {
+            const a = oldGroup[name], b = newGroup[name];
+            if (group === 'inputs' ? !equal(visibleInput(a), visibleInput(b)) : !equal(a, b)) {
+                result.push({kind: group === 'inputs' ? 'input' : 'field', name});
+            }
+        }
+    }
+    return result;
+}
+export type BlockChangeKind = 'added' | 'removed' | 'updated';
+export interface BlockChange {
+    key: string;
+    before?: BlockSide;
+    after?: BlockSide;
+    kind: BlockChangeKind;
+    fields: string[];
+    parts: BlockPart[];
+}
+
+export function compareProjectBlocks(before: ProjectSource, after: ProjectSource) {
+    const oldTargets = new Map(before.targets.map(target => [targetKey(target), target]));
+    const newTargets = new Map(after.targets.map(target => [targetKey(target), target]));
+    const changes: BlockChange[] = [];
+    let unchanged = 0;
+    for (const key of new Set([...oldTargets.keys(), ...newTargets.keys()])) {
+        const oldTarget = oldTargets.get(key), newTarget = newTargets.get(key);
+        const oldBlocks: BlockTable = oldTarget?.blocks ?? {}, newBlocks: BlockTable = newTarget?.blocks ?? {};
+        for (const id of new Set([...Object.keys(oldBlocks), ...Object.keys(newBlocks)])) {
+            const hadBlock = Object.hasOwn(oldBlocks, id), hasBlock = Object.hasOwn(newBlocks, id);
+            const a = oldBlocks[id], b = newBlocks[id];
+            if (hadBlock && hasBlock && equal(a, b)) {
+                unchanged++;
+                continue;
+            }
+            const fields = isRecord(a) && isRecord(b) ?
+                [...new Set([...Object.keys(a), ...Object.keys(b)])].filter(field => !equal(a[field], b[field])) : [];
+            changes.push({key: JSON.stringify([key, id]), before: hadBlock && oldTarget ? {target: oldTarget, id} : undefined,
+                after: hasBlock && newTarget ? {target: newTarget, id} : undefined,
+                kind: !hadBlock ? 'added' : !hasBlock ? 'removed' : 'updated', fields, parts: changedParts(a, b)});
+        }
+    }
+    const withoutBlocks = (project: ProjectSource) => ({...project, targets: project.targets.map(({blocks: _, ...target}) => target)});
+    return {changes, unchanged, otherChanges: !equal(withoutBlocks(before), withoutBlocks(after))};
+}

package/src/project-source-review-model.ts

@@ -0,0 +1,116 @@
+import {compareProjectBlocks, equal, isRecord, targetKey} from './project-source-patch.js';
+import type {BlockChange, BlockSide, ProjectSource, ProjectTarget} from './project-source-patch.js';
+import type {ScriptBlockMark} from './scratch-block-diff-renderer.js';
+
+export interface ScriptReviewSide extends BlockSide { marks: ScriptBlockMark[] }
+export interface ScriptReview {
+    id: string;
+    before: ScriptReviewSide[];
+    after: ScriptReviewSide[];
+}
+export interface TargetReview {
+    name: string;
+    isStage: boolean;
+    /** The stage or sprite in each version, absent where it does not exist. */
+    before?: ProjectTarget;
+    after?: ProjectTarget;
+    scripts: ScriptReview[];
+    properties: string[];
+}
+
+function scriptRoots(target?: ProjectTarget) {
+    const roots = new Map<string, string>();
+    if (!target) return roots;
+    for (const id of Object.keys(target.blocks)) {
+        if (roots.has(id)) continue;
+        const chain = new Set<string>();
+        let current = id;
+        while (!roots.has(current) && !chain.has(current)) {
+            chain.add(current);
+            const block = target.blocks[current];
+            if (!isRecord(block) || typeof block.parent !== 'string' || !Object.hasOwn(target.blocks, block.parent)) break;
+            current = block.parent;
+        }
+        const root = roots.get(current) ?? current;
+        for (const block of chain) roots.set(block, root);
+    }
+    return roots;
+}
+
+function groupScripts(before: ProjectTarget | undefined, after: ProjectTarget | undefined, changes: readonly BlockChange[]) {
+    const roots = {before: scriptRoots(before), after: scriptRoots(after)};
+    const parents = new Map<string, string>();
+    function groupOf(key: string) {
+        let parent = key;
+        while (parents.has(parent)) parent = parents.get(parent)!;
+        for (let current = key; current !== parent;) {
+            const next = parents.get(current)!;
+            parents.set(current, parent);
+            current = next;
+        }
+        return parent;
+    }
+
+    // Blocks retained across versions connect their original and new scripts, including splits and merges.
+    for (const [id, oldRoot] of roots.before) {
+        const newRoot = roots.after.get(id);
+        if (newRoot === undefined) continue;
+        const a = groupOf('before:' + oldRoot), b = groupOf('after:' + newRoot);
+        if (a !== b) parents.set(b, a);
+    }
+    const groups = new Map<string, ScriptReview>();
+    const sides = new Map<string, ScriptReviewSide>();
+    for (const version of ['before', 'after'] as const) {
+        const target = version === 'before' ? before : after;
+        if (!target) continue;
+        for (const root of new Set(roots[version].values())) {
+            const key = version + ':' + root;
+            const id = groupOf(key);
+            const group = groups.get(id) ?? {id, before: [], after: []};
+            const side: ScriptReviewSide = {target, id: root, marks: []};
+            group[version].push(side);
+            groups.set(id, group);
+            sides.set(key, side);
+        }
+    }
+    const affected = new Set<string>();
+    for (const change of changes) {
+        for (const version of ['before', 'after'] as const) {
+            const block = change[version];
+            if (!block) continue;
+            const key = version + ':' + roots[version].get(block.id);
+            sides.get(key)?.marks.push({id: block.id, kind: change.kind, parts: change.parts});
+            affected.add(groupOf(key));
+        }
+    }
+    return [...affected].map(id => groups.get(id)!);
+}
+
+function changedProperties(before: Record<string, unknown>, after: Record<string, unknown>, except: string) {
+    return [...new Set([...Object.keys(before), ...Object.keys(after)])].filter(key => key !== except && !equal(before[key], after[key]));
+}
+
+export function compareProjectForReview(before: ProjectSource, after: ProjectSource) {
+    const {changes} = compareProjectBlocks(before, after);
+    const byTarget = new Map<string, BlockChange[]>();
+    for (const change of changes) {
+        const key = targetKey((change.after ?? change.before)!.target);
+        const existing = byTarget.get(key);
+        if (existing) existing.push(change);
+        else byTarget.set(key, [change]);
+    }
+    const oldTargets = new Map(before.targets.map(target => [targetKey(target), target]));
+    const newTargets = new Map(after.targets.map(target => [targetKey(target), target]));
+    const targets: TargetReview[] = [];
+    for (const key of new Set([...oldTargets.keys(), ...newTargets.keys()])) {
+        const a = oldTargets.get(key), b = newTargets.get(key);
+        const edits = byTarget.get(key);
+        const scripts = edits ? groupScripts(a, b, edits) : [];
+        const properties = changedProperties({...a}, {...b}, 'blocks');
+        if (scripts.length || properties.length) {
+            const {name, isStage} = (b ?? a)!;
+            targets.push({name, isStage, scripts, properties, before: a, after: b});
+        }
+    }
+    return {targets, properties: changedProperties(before, after, 'targets')};
+}

package/src/project-source-review.tsx

@@ -0,0 +1,250 @@
+import React, {useMemo, useState} from 'react';
+import {BlockPreview, usePreviewSync} from './block-diff-preview.js';
+import {isRecord, parseProjectSource, readProjectSourceDiff} from './project-source-patch.js';
+import type {BlockSide} from './project-source-patch.js';
+import {compareProjectForReview} from './project-source-review-model.js';
+import type {ScriptReview, TargetReview} from './project-source-review-model.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import {currentCostume, useCostumeImage} from './project-assets.js';
+import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
+
+type Comparison = ReturnType<typeof compareProjectForReview>;
+
+export type ProjectSourceReviewFile = {
+    path: string;
+    summary?: string;
+    previousPath?: string;
+    unavailable?: boolean;
+} & ({patch: string; beforeSource?: string; loadAsset?: ProjectAssetLoader} | {status: 'added' | 'removed' | 'updated'});
+
+export interface ProjectSourceReviewProps {
+    title: string;
+    description?: string;
+    verification?: readonly string[];
+    files: readonly ProjectSourceReviewFile[];
+    renderBlock: ProjectBlockRenderer;
+    locale?: string;
+}
+
+// Like the Editor's Code tab, a connected group of blocks is called code, and each item is named by its hat block.
+const ja = {
+    review: '変更レビュー', fullDescription: 'PR 本文を表示', checks: '確認してほしいこと', files: '変更ファイル', targets: '影響するステージ・スプライト',
+    scripts: 'コードの変更', scriptCount: (count: number) => `コードの変更 · ${count} か所`,
+    reviewed: '確認済み', before: '変更前', after: '変更後',
+    updated: '変更', added: '追加', removed: '削除', reorganized: '再編',
+    absent: 'この版にはこのコードがありません', loading: 'コードを描画中…',
+    unavailable: 'このコードを描画できません。',
+    related: '関連ファイル', properties: 'コード以外の変更', invalid: 'この作品の差分を読み込めません。',
+    flag: '緑の旗が押されたとき', broadcast: 'を受け取ったとき', key: 'キーが押されたとき',
+    click: 'このスプライトが押されたとき', script: 'コード', noChanges: '作品に内容の変更はありません。',
+    comparison: '作品の変更', unreadable: '作品データとして読み込めないため、テキストの差分を表示します。'
+};
+const en: typeof ja = {
+    review: 'Change review', fullDescription: 'Show full PR description', checks: 'Review checklist', files: 'Changed files', targets: 'Affected stages and sprites',
+    scripts: 'Code changes', scriptCount: count => `Code changes · ${count}`,
+    reviewed: 'Reviewed', before: 'Before', after: 'After',
+    updated: 'Changed', added: 'Added', removed: 'Removed', reorganized: 'Reorganized',
+    absent: 'No code in this version', loading: 'Rendering code…',
+    unavailable: 'This code could not be rendered.',
+    related: 'Related file', properties: 'Changes outside the code', invalid: 'This project diff could not be read.',
+    flag: 'When green flag clicked', broadcast: 'received', key: 'When key pressed',
+    click: 'When this sprite clicked', script: 'Code', noChanges: 'No changes to the project contents.',
+    comparison: 'Project changes', unreadable: 'This file could not be read as project data, so its text diff is shown.'
+};
+
+const properties = new Map<string, readonly [string, string]>([
+    ['variables', ['変数', 'Variables']], ['lists', ['リスト', 'Lists']], ['broadcasts', ['メッセージ', 'Broadcast messages']],
+    ['costumes', ['コスチューム・背景', 'Costumes and backdrops']], ['sounds', ['音', 'Sounds']],
+    ['comments', ['コメント', 'Comments']], ['monitors', ['モニター', 'Monitors']], ['extensions', ['拡張機能', 'Extensions']],
+    ['x', ['X 座標', 'X position']], ['y', ['Y 座標', 'Y position']], ['visible', ['表示状態', 'Visibility']],
+    ['direction', ['向き', 'Direction']], ['size', ['大きさ', 'Size']], ['currentCostume', ['表示するコスチューム', 'Selected costume']]
+]);
+
+function scriptTitle(side: BlockSide, labels: typeof ja) {
+    const block = side.target.blocks[side.id];
+    if (!isRecord(block)) return labels.script;
+    if (block.opcode === 'event_whenflagclicked') return labels.flag;
+    if (block.opcode === 'event_whenthisspriteclicked') return labels.click;
+    if (block.opcode === 'event_whenkeypressed') return labels.key;
+    if (block.opcode === 'event_whenbroadcastreceived') {
+        const field = isRecord(block.fields) ? block.fields.BROADCAST_OPTION : undefined;
+        const message = Array.isArray(field) && typeof field[0] === 'string' ? field[0] : '';
+        if (message) return labels === ja ? `「${message}」${labels.broadcast}` : `“${message}” ${labels.broadcast}`;
+    }
+    return typeof block.opcode === 'string' ? block.opcode : labels.script;
+}
+
+function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset}: {
+    script: ScriptReview; labels: typeof ja; reviewed?: boolean; setReviewed?(value: boolean): void;
+    renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+}) {
+    const [open, setOpen] = useState(false);
+    const {sync, toggle} = usePreviewSync(labels === ja ? 'ja' : 'en');
+    const status = !script.before.length ? 'added' : !script.after.length ? 'removed' :
+        script.before.length !== 1 || script.after.length !== 1 ? 'reorganized' : 'updated';
+    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)}>
+        <summary>
+            <span className="twgit-review-status">{labels[status]}</span>
+            <strong>{title}</strong>
+            {status === 'reorganized' && <small>{script.before.length} → {script.after.length}</small>}
+            {reviewed && <small>{labels.reviewed}</small>}
+        </summary>
+        {open && <>
+            <div className="twgit-block-diff-sides">
+                {(['before', 'after'] as const).map(version => <div key={version}>
+                    {script[version].length ? script[version].map((side, index, sides) => <BlockPreview key={side.id} side={side}
+                        title={sides.length > 1 ? `${labels[version]} ${index + 1}` : labels[version]}
+                        marks={side.marks} renderBlock={renderBlock} withContext labels={labels}
+                        version={version} loadAsset={loadAsset} sync={sync}/>) :
+                        <BlockPreview title={labels[version]} renderBlock={renderBlock} withContext labels={labels}/>}
+                </div>)}
+            </div>
+            {toggle}
+            {setReviewed && <label className="twgit-review-checked"><input type="checkbox" checked={reviewed}
+                onChange={event => setReviewed(event.currentTarget.checked)}/> {labels.reviewed}</label>}
+        </>}
+    </details>;
+}
+
+function propertyNames(keys: readonly string[], labels: typeof ja) {
+    return keys.map(key => properties.get(key)?.[labels === ja ? 0 : 1] ?? key).join(' · ');
+}
+
+/**
+ * The current costume (the backdrop for the stage) of each version of a target that has one. A changed costume shows
+ * before → after. Nothing is shown until an image is read, so the heading falls back to the name alone.
+ */
+function TargetThumbnails({target, labels, loadAsset}: {target: TargetReview; labels: typeof ja; loadAsset?: ProjectAssetLoader}) {
+    const images = {before: useCostumeImage(target.before, 'before', loadAsset), after: useCostumeImage(target.after, 'after', loadAsset)};
+    const costumes = {before: target.before && currentCostume(target.before), after: target.after && currentCostume(target.after)};
+    const changed = !!costumes.before && !!costumes.after && costumes.before.md5ext !== costumes.after.md5ext;
+    // An unchanged costume is the same file in both versions, so either read shows it.
+    const versions: ProjectVersion[] = changed ? ['before', 'after'] : [images.after ? 'after' : 'before'];
+    const shown = versions.filter(version => images[version]);
+    if (!shown.length) return null;
+    return <span className="twgit-review-thumbnails">
+        {shown.map((version, index) => <React.Fragment key={version}>
+            {index > 0 && <span aria-hidden="true">→</span>}
+            <img src={images[version]!} title={costumes[version]?.name || undefined}
+                alt={changed ? `${labels[version]}: ${costumes[version]?.name ?? ''}` : ''}/>
+        </React.Fragment>)}
+    </span>;
+}
+
+/** Lists the changed stages and sprites of one project file, each with its code comparisons. */
+function ComparisonTargets({comparison, labels, renderBlock, loadAsset, review}: {
+    comparison: Comparison; labels: typeof ja; renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    review?: {file: string; keys: ReadonlySet<string>; set(key: string, value: boolean): void};
+}) {
+    return <>
+        {comparison.properties.length > 0 && <p>{labels.properties} · {propertyNames(comparison.properties, labels)}</p>}
+        {!comparison.targets.length && !comparison.properties.length && <p>{labels.noChanges}</p>}
+        {comparison.targets.map(target => <section className="twgit-review-target" key={JSON.stringify([target.isStage, target.name])}>
+            <h5><TargetThumbnails target={target} labels={labels} loadAsset={loadAsset}/>
+                {target.name}{target.scripts.length > 0 && <small>{labels.scriptCount(target.scripts.length)}</small>}</h5>
+            {target.properties.length > 0 && <p>{labels.properties} · {propertyNames(target.properties, labels)}</p>}
+            {target.scripts.map(script => {
+                const key = JSON.stringify([review?.file, target.isStage, target.name, script.id]);
+                return <ScriptComparison key={key} script={script} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}
+                    reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}/>;
+            })}
+        </section>)}
+    </>;
+}
+
+const countScripts = (comparison: Comparison) => comparison.targets.reduce((count, target) => count + target.scripts.length, 0);
+
+export interface ProjectSourceComparisonProps {
+    /** The earlier project.source.json, or `null` when the file did not exist yet. */
+    before: string | null;
+    /** The later project.source.json, or `null` when the file was removed. */
+    after: string | null;
+    renderBlock: ProjectBlockRenderer;
+    locale?: string;
+    /** Shown after an explanation when either version cannot be read as a project. Without it, only an error is shown. */
+    fallback?: React.ReactNode;
+    /** Reads the images of both versions for thumbnails. Without it, stages and sprites are shown by name. */
+    loadAsset?: ProjectAssetLoader;
+}
+
+/** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
+export function ProjectSourceComparison({before, after, renderBlock, locale = 'en', fallback, loadAsset}: ProjectSourceComparisonProps) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    const comparison = useMemo(() => {
+        try {
+            return compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
+        } catch {
+            return null;
+        }
+    }, [before, after]);
+    if (!comparison) return fallback === undefined ? <p role="alert">{labels.invalid}</p> :
+        <><p role="alert" className="twgit-review-unreadable">{labels.unreadable}</p>{fallback}</>;
+    return <section className="twgit-block-diff twgit-review twgit-review-comparison" aria-label={labels.comparison}>
+        <header className="twgit-review-overview">
+            <dl>
+                <div><dt>{labels.targets}</dt><dd>{comparison.targets.length}</dd></div>
+                <div><dt>{labels.scripts}</dt><dd>{countScripts(comparison)}</dd></div>
+            </dl>
+        </header>
+        <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}/>
+    </section>;
+}
+
+export function ProjectSourceReview({title, description, verification, files, renderBlock, locale = 'en'}: ProjectSourceReviewProps) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    const entries = useMemo(() => files.map(file => {
+        if (!('patch' in file)) return {file};
+        try {
+            const projects = readProjectSourceDiff(file.patch, file.beforeSource);
+            return {file, comparison: projects ? compareProjectForReview(...projects) : {targets: [], properties: []}};
+        } catch {
+            return {file, invalid: true};
+        }
+    }), [files]);
+    const [checked, setChecked] = useState<{entries: typeof entries; keys: Set<string>}>();
+    const reviewed = checked?.entries === entries ? checked.keys : new Set<string>();
+    const setReviewed = (key: string, value: boolean) => setChecked(previous => {
+        const keys = new Set(previous?.entries === entries ? previous.keys : []);
+        if (value) keys.add(key);
+        else keys.delete(key);
+        return {entries, keys};
+    });
+    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();
+    const longBody = !!body && body.length > 420;
+    const excerpt = longBody ? body.slice(0, 250).trimEnd() + '…' : body;
+    return <section className="twgit-block-diff twgit-review" aria-label={labels.review}>
+        <header className="twgit-review-overview">
+            <p>{labels.review}</p>
+            <h2>{title}</h2>
+            {excerpt && <p className="twgit-review-description">{excerpt}</p>}
+            <dl>
+                <div><dt>{labels.files}</dt><dd>{entries.length}</dd></div>
+                <div><dt>{labels.targets}</dt><dd>{targets}</dd></div>
+                <div><dt>{labels.scripts}</dt><dd>{scripts}</dd></div>
+                {scripts > 0 && <div><dt>{labels.reviewed}</dt><dd>{reviewed.size} / {scripts}</dd></div>}
+            </dl>
+            {longBody && <details className="twgit-review-body">
+                <summary>{labels.fullDescription}</summary>
+                <p className="twgit-review-description">{body}</p>
+            </details>}
+            {!!verification?.length && <div className="twgit-review-checklist">
+                <h3>{labels.checks}</h3>
+                <ul>{verification.map((item, index) => <li key={index}>{item}</li>)}</ul>
+            </div>}
+        </header>
+        <h3 className="twgit-review-files-title">{labels.files}</h3>
+        {entries.map(({file, comparison, invalid}) => <section key={file.path} className="twgit-review-file">
+            <header><h4>{file.previousPath ? file.previousPath + ' → ' + file.path : file.path}</h4>{file.summary && <p>{file.summary}</p>}</header>
+            {'status' in file && <p>{labels.related} · {labels[file.status]}</p>}
+            {(invalid || file.unavailable) && <p role="alert">{labels.invalid}</p>}
+            {comparison && <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock}
+                loadAsset={'loadAsset' in file ? file.loadAsset : undefined}
+                review={{file: file.path, keys: reviewed, set: setReviewed}}/>}
+        </section>)}
+    </section>;
+}

package/src/pull-request-panel.tsx

@@ -0,0 +1,134 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {createGitHubPullRequests, gitHubRepositoryFromOrigin, PullRequestError} from './github-pull-requests.js';
+import type {GitHubPullRequests} from './github-pull-requests.js';
+import {ProjectSourceReview} from './project-source-review.js';
+import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {Repository} from './repository.js';
+
+const en = {
+    title: 'Pull requests', number: 'Pull request number', openNumber: 'Open pull request',
+    open: 'Open', closed: 'Closed', merged: 'Merged', draft: 'Draft',
+    prev: 'Previous page', next: 'Next page', empty: 'No pull requests on this page.',
+    loading: 'Reading GitHub…', select: 'Select a pull request to review its changes.', onGitHub: 'Open on GitHub',
+    noOrigin: 'Choose a repository whose origin is on GitHub.',
+    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.'
+};
+const ja: typeof en = {
+    title: 'プルリクエスト', number: 'プルリクエスト番号', openNumber: 'PR を開く',
+    open: 'オープン', closed: 'クローズ済み', merged: 'マージ済み', draft: 'ドラフト',
+    prev: '前のページ', next: '次のページ', empty: 'このページにプルリクエストはありません。',
+    loading: 'GitHub から取得中…', select: 'プルリクエストを選ぶと差分内容を確認できます。', onGitHub: 'GitHub で開く',
+    noOrigin: 'GitHub のリポジトリを origin に設定した作業フォルダを選んでください。',
+    unavailable: 'GitHub のリポジトリまたは PR を取得できません。公開リポジトリに対応しています。',
+    rateLimit: '公開 GitHub API の利用上限に達しました。上限の解除後に再試行してください。',
+    failed: 'GitHub から取得できませんでした。再試行してください。',
+    changed: '取得中にプルリクエストが更新されました。もう一度開いてください。',
+    tooManyFiles: '変更ファイルが GitHub API の取得上限である 3,000 件を超えています。'
+};
+
+function errorMessage(error: unknown, labels: typeof en) {
+    return error instanceof PullRequestError ? labels[error.code] : labels.failed;
+}
+
+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}: {
+    name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
+}) {
+    const client = useMemo(() => createGitHubPullRequests(name), [name]);
+    const [page, setPage] = useState(1);
+    const [listing, setListing] = useState<{page: number; result: Result<Listing>}>();
+    const [input, setInput] = useState('');
+    const [selection, setSelection] = useState<{number: number}>();
+    const [loaded, setLoaded] = useState<{selection: NonNullable<typeof selection>; result: Result<Pull>}>();
+    const list = listing?.page === page ? listing.result : undefined;
+    const detail = loaded?.selection === selection ? loaded?.result : undefined;
+    useEffect(() => {
+        const controller = new AbortController();
+        setListing(undefined);
+        void client.list(page, controller.signal).then(data => {
+            if (!controller.signal.aborted) setListing({page, result: {data}});
+        }, error => {
+            if (!controller.signal.aborted) setListing({page, result: {error: errorMessage(error, labels)}});
+        });
+        return () => controller.abort();
+    }, [client, page, labels]);
+    useEffect(() => {
+        if (!selection) return;
+        const controller = new AbortController();
+        void client.load(selection.number, controller.signal).then(data => {
+            if (!controller.signal.aborted) setLoaded({selection, result: {data}});
+        }, error => {
+            if (!controller.signal.aborted) setLoaded({selection, result: {error: errorMessage(error, labels)}});
+        });
+        return () => controller.abort();
+    }, [client, selection, labels]);
+    const choose = (number: number) => {
+        if (!Number.isSafeInteger(number) || number < 1) return;
+        setSelection({number});
+        setInput(String(number));
+    };
+    const pr = detail?.data;
+    return <div className="twgit-content">
+        <aside>
+            <h3>{labels.title}</h3>
+            <p>{name}</p>
+            <form className="twgit-pr-number" onSubmit={event => {event.preventDefault(); choose(Number(input));}}>
+                <label>{labels.number}<input type="number" required min={1} max={Number.MAX_SAFE_INTEGER}
+                    value={input} onChange={event => setInput(event.currentTarget.value)}/></label>
+                <button type="submit">{labels.openNumber}</button>
+            </form>
+            {!list && <p role="status">{labels.loading}</p>}
+            {list?.error && <p role="alert">{list.error}</p>}
+            {list?.data && <>
+                {!list.data.items.length && <p>{labels.empty}</p>}
+                <ul>{list.data.items.map(item => <li key={item.number}>
+                    <button className="twgit-file" type="button" aria-pressed={selection?.number === item.number}
+                        onClick={() => choose(item.number)}>#{item.number} {item.title}</button>
+                </li>)}</ul>
+                <div className="twgit-pr-paging">
+                    <button type="button" disabled={page === 1} onClick={() => setPage(page - 1)}>{labels.prev}</button>
+                    <button type="button" disabled={!list.data.more} onClick={() => setPage(page + 1)}>{labels.next}</button>
+                </div>
+            </>}
+        </aside>
+        <main className="twgit-diff">
+            {!selection && <p>{labels.select}</p>}
+            {selection && !detail && <p role="status">{labels.loading}</p>}
+            {detail?.error && <p role="alert">{detail.error}</p>}
+            {pr && <>
+                <p className="twgit-pr-revision">
+                    <strong>#{pr.number} · {labels[pr.state]}</strong>
+                    {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>
+                </p>
+                <ProjectSourceReview title={pr.title} description={pr.description} files={pr.files} renderBlock={renderBlock} locale={locale}/>
+            </>}
+        </main>
+    </div>;
+}
+
+export function PullRequestReviewPanel({repository, locale, renderBlock}: {
+    repository: Repository; locale: string; renderBlock: ProjectBlockRenderer;
+}) {
+    const labels = locale.startsWith('ja') ? ja : en;
+    const [origin, setOrigin] = useState<{repository: Repository; name: string | null; failed?: boolean}>();
+    useEffect(() => {
+        let active = true;
+        void repository.readOrigin().then(value => {
+            if (active) setOrigin({repository, name: gitHubRepositoryFromOrigin(value)});
+        }, () => {
+            if (active) setOrigin({repository, name: null, failed: true});
+        });
+        return () => {active = false;};
+    }, [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}/>;
+}