@kubohiroya/turbowarp-plus-editor-git 0.10.0 → 0.12.0

package/src/project-source-review.tsx

@@ -1,11 +1,15 @@
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, 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 {ProjectBlockLocator} from './block-diff-location.js';
+import type {LocationStatus} from './block-diff-preview.js';
+import {currentCostume, useAssetImage, useCostumeImage} from './project-assets.js';
+import {assetFileName, projectPropertyLabel} from './project-change-model.js';
+import {hatName, legend, summaryPhrase} from './review-words.js';
 import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
 
 type Comparison = ReturnType<typeof compareProjectForReview>;
@@ -15,7 +19,9 @@ export type ProjectSourceReviewFile = {
     summary?: string;
     previousPath?: string;
     unavailable?: boolean;
-} & ({patch: string; beforeSource?: string; loadAsset?: ProjectAssetLoader} | {status: 'added' | 'removed' | 'updated'});
+} & ({patch: string; beforeSource?: string; loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on this file's after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator} | {status: 'added' | 'removed' | 'updated'});
 
 export interface ProjectSourceReviewProps {
     title: string;
@@ -31,25 +37,37 @@ const ja = {
     review: '変更レビュー', fullDescription: 'PR 本文を表示', checks: '確認してほしいこと', files: '変更ファイル', targets: '影響するステージ・スプライト',
     scripts: 'コードの変更', scriptCount: (count: number) => `コードの変更 · ${count} か所`,
     reviewed: '確認済み', before: '変更前', after: '変更後',
-    updated: '変更', added: '追加', removed: '削除', reorganized: '再編',
+    updated: '変更', added: '追加', removed: '削除', reorganized: '再編', moved: '位置だけ', reordered: '並べ替え',
+    stage: 'ステージ', otherSettings: 'そのほかの設定', legend: '色の見方',
+    targetAdded: (name: string, stage: boolean) => stage ? 'ステージを追加' : `スプライト『${name}』を追加`,
+    targetRemoved: (name: string, stage: boolean) => stage ? 'ステージを削除' : `スプライト『${name}』を削除`,
+    assetOwner: (owner: string, kind: 'costume' | 'backdrop' | 'sound', name: string) => `${owner} の${kind === 'sound' ? '音' : kind === 'backdrop' ? '背景' : 'コスチューム'}『${name}』`,
     absent: 'この版にはこのコードがありません', loading: 'コードを描画中…',
     unavailable: 'このコードを描画できません。',
     related: '関連ファイル', properties: 'コード以外の変更', invalid: 'この作品の差分を読み込めません。',
     flag: '緑の旗が押されたとき', broadcast: 'を受け取ったとき', key: 'キーが押されたとき',
     click: 'このスプライトが押されたとき', script: 'コード', noChanges: '作品に内容の変更はありません。',
-    comparison: '作品の変更', unreadable: '作品データとして読み込めないため、テキストの差分を表示します。'
+    comparison: '作品の変更', unreadable: '作品データとして読み込めないため、テキストの差分を表示します。',
+    locate: '編集画面で強調', locating: '編集画面でブロックを検索中…', located: '編集画面で強調しました。',
+    missingLocation: '編集画面に該当する版またはブロックがありません。'
 };
 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',
+    updated: 'Changed', added: 'Added', removed: 'Removed', reorganized: 'Reorganized', moved: 'Moved only', reordered: 'Reconnected',
+    stage: 'Stage', otherSettings: 'Other settings', legend: 'Colours',
+    targetAdded: (name, stage) => stage ? 'Added the stage' : `Added the sprite “${name}”`,
+    targetRemoved: (name, stage) => stage ? 'Removed the stage' : `Removed the sprite “${name}”`,
+    assetOwner: (owner, kind, name) => `${kind === 'sound' ? 'Sound' : kind === 'backdrop' ? 'Backdrop' : 'Costume'} “${name}” of ${owner}`,
     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.'
+    comparison: 'Project changes', unreadable: 'This file could not be read as project data, so its text diff is shown.',
+    locate: 'Highlight in Editor', locating: 'Finding the block in the Editor…', located: 'Highlighted in the Editor.',
+    missingLocation: 'This version or block is unavailable in the Editor.'
 };
 
 const properties = new Map<string, readonly [string, string]>([
@@ -63,25 +81,53 @@ const properties = new Map<string, readonly [string, string]>([
 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;
+    return typeof block.opcode === 'string' && hatName(block.opcode, labels === ja ? 'ja' : 'en') || labels.script;
 }
 
-function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset}: {
+type BlockLocation = {locate?(side: BlockSide): void; status(side: BlockSide): LocationStatus | undefined};
+const sideKey = (side: BlockSide) => JSON.stringify([side.target.isStage, side.target.name, side.id]);
+
+/** Highlights the after version of a script in the Editor, one request per comparison, and cancels it on unmount. */
+function useBlockLocation(comparison: Comparison, locateBlock?: ProjectBlockLocator): BlockLocation {
+    const request = useRef<AbortController>();
+    const [location, setLocation] = useState<{comparison: Comparison; key: string; locator: ProjectBlockLocator; status: LocationStatus}>();
+    useEffect(() => () => request.current?.abort(), [comparison, locateBlock]);
+    const locate = async (side: BlockSide) => {
+        if (!locateBlock) return;
+        request.current?.abort();
+        const controller = new AbortController();
+        request.current = controller;
+        const selected = {comparison, key: sideKey(side), locator: locateBlock};
+        setLocation({...selected, status: 'locating'});
+        let found = false;
+        try {
+            found = await locateBlock({target: side.target, id: side.id, version: 'after', parts: [], signal: controller.signal});
+        } catch {
+            // The host may replace the active project while resolving its workspace.
+        }
+        if (!controller.signal.aborted) setLocation({...selected, status: found ? 'located' : 'missingLocation'});
+    };
+    return {
+        locate: locateBlock && (side => void locate(side)),
+        status: side => location?.comparison === comparison && location.locator === locateBlock && location.key === sideKey(side) ?
+            location.status : undefined
+    };
+}
+
+function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location}: {
     script: ScriptReview; labels: typeof ja; reviewed?: boolean; setReviewed?(value: boolean): void;
-    renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; location?: BlockLocation;
 }) {
     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 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;
@@ -90,6 +136,7 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
             <span className="twgit-review-status">{labels[status]}</span>
             <strong>{title}</strong>
             {status === 'reorganized' && <small>{script.before.length} → {script.after.length}</small>}
+            {summary && <small className="twgit-review-summary">{summary}</small>}
             {reviewed && <small>{labels.reviewed}</small>}
         </summary>
         {open && <>
@@ -98,7 +145,9 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
                     {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}/>) :
+                        version={version} loadAsset={loadAsset} sync={sync}
+                        onLocate={version === 'after' && location?.locate ? () => location.locate!(side) : undefined}
+                        locationStatus={version === 'after' ? location?.status(side) : undefined}/>) :
                         <BlockPreview title={labels[version]} renderBlock={renderBlock} withContext labels={labels}/>}
                 </div>)}
             </div>
@@ -109,8 +158,16 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
     </details>;
 }
 
+// Keys without a name people know are grouped as other settings; the keys stay in the title for those who look.
 function propertyNames(keys: readonly string[], labels: typeof ja) {
-    return keys.map(key => properties.get(key)?.[labels === ja ? 0 : 1] ?? key).join(' · ');
+    const locale = labels === ja ? 'ja' : 'en';
+    const named = new Set<string>(), other: string[] = [];
+    for (const key of keys) {
+        const label = properties.get(key)?.[labels === ja ? 0 : 1] ?? projectPropertyLabel(key, locale);
+        if (label === key) other.push(key);
+        else named.add(label);
+    }
+    return <span title={keys.join(', ')}>{[...named, ...(other.length ? [labels.otherSettings] : [])].join(' · ')}</span>;
 }
 
 /**
@@ -135,26 +192,75 @@ function TargetThumbnails({target, labels, loadAsset}: {target: TargetReview; la
 }
 
 /** Lists the changed stages and sprites of one project file, each with its code comparisons. */
-function ComparisonTargets({comparison, labels, renderBlock, loadAsset, review}: {
+function ComparisonTargets({comparison, labels, renderBlock, loadAsset, locateBlock, review}: {
     comparison: Comparison; labels: typeof ja; renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    locateBlock?: ProjectBlockLocator;
     review?: {file: string; keys: ReadonlySet<string>; set(key: string, value: boolean): void};
 }) {
+    const location = useBlockLocation(comparison, locateBlock);
     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.isStage ? labels.stage : target.name}{target.scripts.length > 0 && <small>{labels.scriptCount(target.scripts.length)}</small>}</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.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))}/>;
+                    location={location} reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}/>;
             })}
         </section>)}
     </>;
 }
 
+function Legend({labels}: {labels: typeof ja}) {
+    return <p className="twgit-review-legend" aria-label={labels.legend}>
+        {legend(labels === ja ? 'ja' : 'en').map(([kind, text]) => <span key={kind} data-legend={kind}>{text}</span>)}
+    </p>;
+}
+
+type RelatedEntry = {file: ProjectSourceReviewFile; comparison?: Comparison};
+
+/** Finds who uses an asset file of the review: the costume or sound whose file name it is, in the project beside it. */
+function assetOwner(path: string, status: 'added' | 'removed' | 'updated', entries: readonly RelatedEntry[]) {
+    const parts = path.split('/');
+    const name = parts.pop()!;
+    const folder = parts.slice(0, -1).join('/');
+    const version: ProjectVersion = status === 'removed' ? 'before' : 'after';
+    for (const {file, comparison} of entries) {
+        if (!comparison || !('patch' in file) || file.path.split('/').slice(0, -1).join('/') !== folder) continue;
+        for (const target of comparison.targets) {
+            const owner = target[version];
+            if (!owner) continue;
+            for (const kind of ['costumes', 'sounds'] as const) {
+                const list = (owner as unknown as Record<string, unknown>)[kind];
+                if (!Array.isArray(list)) continue;
+                const entry = list.find(item => isRecord(item) && assetFileName(item) === name);
+                if (isRecord(entry)) return {target, version, md5ext: name, loadAsset: file.loadAsset,
+                    kind: kind === 'sounds' ? 'sound' as const : target.isStage ? 'backdrop' as const : 'costume' as const,
+                    name: typeof entry.name === 'string' ? entry.name : name};
+            }
+        }
+    }
+    return null;
+}
+
+function RelatedFile({file, entries, labels}: {
+    file: ProjectSourceReviewFile & {status: 'added' | 'removed' | 'updated'}; entries: readonly RelatedEntry[]; labels: typeof ja;
+}) {
+    const owner = assetOwner(file.path, file.status, entries);
+    const image = useAssetImage(owner && owner.kind !== 'sound' ? owner.md5ext : undefined, owner?.version ?? 'after', owner?.loadAsset);
+    if (!owner) return <p>{labels.related} · {labels[file.status]}</p>;
+    const ownerName = owner.target.isStage ? labels.stage : owner.target.name;
+    return <p className="twgit-review-asset">
+        {image && <img src={image} alt=""/>}
+        <span>{labels.assetOwner(ownerName, owner.kind, owner.name)} · {labels[file.status]}</span>
+    </p>;
+}
+
 const countScripts = (comparison: Comparison) => comparison.targets.reduce((count, target) => count + target.scripts.length, 0);
 
 export interface ProjectSourceComparisonProps {
@@ -168,12 +274,14 @@ export interface ProjectSourceComparisonProps {
     fallback?: React.ReactNode;
     /** Reads the images of both versions for thumbnails. Without it, stages and sprites are shown by name. */
     loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on the after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator;
     /** Shows only the code of this stage or sprite, without the overview and the changes outside the code. */
     target?: {isStage: boolean; name: string};
 }
 
 /** 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, target}: ProjectSourceComparisonProps) {
+export function ProjectSourceComparison({before, after, renderBlock, locale = 'en', fallback, loadAsset, locateBlock, target}: ProjectSourceComparisonProps) {
     const labels = locale.startsWith('ja') ? ja : en;
     const only = target && JSON.stringify([target.isStage, target.isStage || target.name]);
     const comparison = useMemo(() => {
@@ -190,13 +298,15 @@ export function ProjectSourceComparison({before, after, renderBlock, locale = 'e
     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}>
+        {!only && <Legend labels={labels}/>}
         {!only && <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}/>
+        <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}
+            locateBlock={locateBlock}/>
     </section>;
 }
 
@@ -244,13 +354,15 @@ export function ProjectSourceReview({title, description, verification, files, re
                 <ul>{verification.map((item, index) => <li key={index}>{item}</li>)}</ul>
             </div>}
         </header>
+        <Legend labels={labels}/>
         <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>}
+            {'status' in file && <RelatedFile file={file} entries={entries} labels={labels}/>}
             {(invalid || file.unavailable) && <p role="alert">{labels.invalid}</p>}
             {comparison && <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock}
                 loadAsset={'loadAsset' in file ? file.loadAsset : undefined}
+                locateBlock={'locateBlock' in file ? file.locateBlock : undefined}
                 review={{file: file.path, keys: reviewed, set: setReviewed}}/>}
         </section>)}
     </section>;

package/src/pull-request-panel.tsx

@@ -4,6 +4,7 @@ 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';
+import type {ProjectBlockLocator} from './block-diff-location.js';
 
 const en = {
     title: 'Pull requests', number: 'Pull request number', openNumber: 'Open pull request',
@@ -37,8 +38,9 @@ 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}: {
+function PullRequests({name, labels, locale, renderBlock, locateFor}: {
     name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
+    locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
     const client = useMemo(() => createGitHubPullRequests(name), [name]);
     const [page, setPage] = useState(1);
@@ -108,14 +110,17 @@ function PullRequests({name, labels, locale, renderBlock}: {
                     <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}/>
+                <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}/>
             </>}
         </main>
     </div>;
 }
 
-export function PullRequestReviewPanel({repository, locale, renderBlock}: {
+export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor}: {
     repository: Repository; locale: string; renderBlock: ProjectBlockRenderer;
+    /** Returns a locator for a project file whose PR head matches the open project, or `undefined`. */
+    locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
     const labels = locale.startsWith('ja') ? ja : en;
     const [origin, setOrigin] = useState<{repository: Repository; name: string | null; failed?: boolean}>();
@@ -130,5 +135,5 @@ export function PullRequestReviewPanel({repository, locale, renderBlock}: {
     }, [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}/>;
+    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor}/>;
 }

package/src/review-words.ts

@@ -0,0 +1,66 @@
+import type {ScriptSummaryItem} from './project-source-review-model.js';
+
+type Pair = readonly [string, string];
+const pick = ([ja, en]: Pair, locale: string) => locale.startsWith('ja') ? ja : en;
+
+// Hat blocks name a script, as people read it in the Editor.
+const hats = new Map<string, Pair>([
+    ['event_whenflagclicked', ['緑の旗が押されたとき', 'When green flag clicked']],
+    ['event_whenthisspriteclicked', ['このスプライトが押されたとき', 'When this sprite clicked']],
+    ['event_whenstageclicked', ['ステージが押されたとき', 'When stage clicked']],
+    ['event_whenkeypressed', ['キーが押されたとき', 'When key pressed']],
+    ['event_whenbackdropswitchesto', ['背景が切り替わったとき', 'When backdrop switches']],
+    ['event_whengreaterthan', ['値が超えたとき', 'When value exceeds']],
+    ['event_whenbroadcastreceived', ['メッセージを受け取ったとき', 'When message received']],
+    ['control_start_as_clone', ['クローンされたとき', 'When I start as a clone']],
+    ['procedures_definition', ['定義', 'Define']]
+]);
+
+// Only blocks that summaries name; anything else is called a block.
+const blocks = new Map<string, Pair>([
+    ['control_repeat', ['〜回繰り返す', 'repeat'], ], ['control_forever', ['ずっと', 'forever']],
+    ['control_repeat_until', ['〜まで繰り返す', 'repeat until']], ['control_while', ['〜の間繰り返す', 'while']],
+    ['control_if', ['もし〜なら', 'if']], ['control_if_else', ['もし〜なら、でなければ', 'if else']],
+    ['control_wait', ['〜秒待つ', 'wait']], ['motion_movesteps', ['〜歩動かす', 'move steps']],
+    ['motion_turnright', ['〜度回す', 'turn']], ['motion_turnleft', ['〜度回す', 'turn']], ['motion_gotoxy', ['x座標を〜、y座標を〜にする', 'go to x y']],
+    ['motion_changeyby', ['y座標を〜ずつ変える', 'change y by']], ['motion_changexby', ['x座標を〜ずつ変える', 'change x by']],
+    ['motion_glidesecstoxy', ['〜秒でx座標を〜に、y座標を〜に変える', 'glide']],
+    ['looks_sayforsecs', ['〜と〜秒言う', 'say for secs']], ['looks_say', ['〜と言う', 'say']],
+    ['looks_switchcostumeto', ['コスチュームを〜にする', 'switch costume']], ['looks_nextcostume', ['次のコスチュームにする', 'next costume']],
+    ['data_setvariableto', ['〜を〜にする', 'set variable']], ['data_changevariableby', ['〜を〜ずつ変える', 'change variable']],
+    ['event_broadcast', ['〜を送る', 'broadcast']], ['sound_play', ['〜の音を鳴らす', 'play sound']]
+]);
+
+export function hatName(opcode: string, locale: string): string | undefined {
+    const pair = hats.get(opcode);
+    return pair && pick(pair, locale);
+}
+
+const blockName = (opcode: string, locale: string) => {
+    const pair = blocks.get(opcode) ?? hats.get(opcode);
+    return pair ? pick(pair, locale) : locale.startsWith('ja') ? 'ブロック' : 'a block';
+};
+
+/** One phrase per summary item, in the reader's language. */
+export function summaryPhrase(item: ScriptSummaryItem, locale: string): string {
+    const ja = locale.startsWith('ja');
+    switch (item.kind) {
+    case 'hatReplaced': return ja ? `「${blockName(item.before, locale)}」を「${blockName(item.after, locale)}」に替えた` :
+        `replaced “${blockName(item.before, locale)}” with “${blockName(item.after, locale)}”`;
+    case 'wrapped': return ja ? `「${blockName(item.opcode, locale)}」で包んだ` : `wrapped in “${blockName(item.opcode, locale)}”`;
+    case 'branchAdded': return ja ? `分岐「${blockName(item.opcode, locale)}」を追加` : `added “${blockName(item.opcode, locale)}”`;
+    case 'valueChanged': return ja ? `「${blockName(item.opcode, locale)}」の ${item.name} を変更` :
+        `changed ${item.name} of “${blockName(item.opcode, locale)}”`;
+    case 'blocksAdded': return ja ? `ブロックを ${item.count} 個追加` : `added ${item.count} ${item.count === 1 ? 'block' : 'blocks'}`;
+    case 'blocksRemoved': return ja ? `ブロックを ${item.count} 個削除` : `removed ${item.count} ${item.count === 1 ? 'block' : 'blocks'}`;
+    case 'reordered': return ja ? 'つなぎ方だけを変更' : 'only reconnected';
+    case 'moved': return ja ? '位置だけを変更' : 'only moved';
+    }
+}
+
+/** The colours of the previews, said once at the top of a review. */
+export const legend = (locale: string) => locale.startsWith('ja') ?
+    [['added', '緑の縁: 追加したブロック'], ['removed', '赤の縁: 削除したブロック'], ['updated', '紫の縁: 中身を変えたブロック'],
+        ['part', 'オレンジの枠: 値を変えた欄']] as const :
+    [['added', 'Green outline: added block'], ['removed', 'Red outline: removed block'], ['updated', 'Purple outline: block with changed contents'],
+        ['part', 'Orange frame: changed value']] as const;

package/src/style.css

@@ -55,3 +55,5 @@
 .twgit-element-files { margin-top: 12px; }
 .twgit-panel .twgit-element span.twgit-element-name { width: auto; font-family: inherit; }
 .twgit-git-details > .twgit-connection-body { left: auto; right: 0; }
+/* In a layout tab the panel fills the tab and leaves the Editor beside it. */
+.twgit-panel.twgit-panel-tab { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }