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

package/dist/{scratch-block-diff-renderer-xS8OYsRl.js → scratch-block-diff-renderer-DZR8ep-T.js}

@@ -694,18 +694,23 @@ function readAsset(loadAsset, version, md5ext) {
 	}
 	return read;
 }
-/** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
-function useCostumeImage(target, version, loadAsset) {
-	const costume = target && loadAsset ? currentCostume(target) : null;
-	const key = costume ? version + ":" + costume.md5ext : "";
+/** The image type of an asset file name, or `undefined` for sounds and anything that is not an image. */
+function assetImageType(md5ext) {
+	const match = /^[0-9A-Za-z_-]{1,128}\.([0-9A-Za-z]{1,8})$/.exec(md5ext);
+	return match ? imageTypes[match[1].toLowerCase()] : void 0;
+}
+/** Loads one image asset of one version as an object URL, or `null` while it is unavailable or not an image. */
+function useAssetImage(md5ext, version, loadAsset) {
+	const type = md5ext ? assetImageType(md5ext) : void 0;
+	const key = md5ext && type && loadAsset ? version + ":" + md5ext : "";
 	const [image, setImage] = useState();
 	useEffect(() => {
-		if (!costume || !loadAsset) return;
+		if (!key || !loadAsset) return;
 		let active = true;
 		let url;
-		readAsset(loadAsset, version, costume.md5ext).then((blob) => {
+		readAsset(loadAsset, version, md5ext).then((blob) => {
 			if (!blob || !active) return;
-			url = URL.createObjectURL(new Blob([blob], { type: costume.type }));
+			url = URL.createObjectURL(new Blob([blob], { type }));
 			setImage({
 				key,
 				url
@@ -718,6 +723,11 @@ function useCostumeImage(target, version, loadAsset) {
 	}, [key, loadAsset]);
 	return (image === null || image === void 0 ? void 0 : image.key) === key ? image.url : null;
 }
+/** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
+function useCostumeImage(target, version, loadAsset) {
+	const costume = target && loadAsset ? currentCostume(target) : null;
+	return useAssetImage(costume === null || costume === void 0 ? void 0 : costume.md5ext, version, loadAsset);
+}
 // src/block-diff-preview.tsx
 init_objectSpread2();
 function createPreviewSync() {
@@ -968,6 +978,7 @@ function compareProjectForReview(before, after) {
 	};
 }
 // src/project-source-review.tsx
+init_objectSpread2();
 var ja = {
 	review: "変更レビュー",
 	fullDescription: "PR 本文を表示",
@@ -1149,15 +1160,26 @@ function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review
 }
 var countScripts = (comparison) => comparison.targets.reduce((count, target) => count + target.scripts.length, 0);
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset }) {
+function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset, target }) {
 	const labels = locale.startsWith("ja") ? ja : en;
+	const only = target && JSON.stringify([target.isStage, target.isStage || target.name]);
 	const comparison = useMemo(() => {
+		let result;
 		try {
-			return compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
+			result = compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
 		} catch (_unused) {
 			return null;
 		}
-	}, [before, after]);
+		if (!only) return result;
+		return {
+			properties: [],
+			targets: result.targets.filter((item) => JSON.stringify([item.isStage, item.isStage || item.name]) === only).map((item) => _objectSpread2(_objectSpread2({}, item), {}, { properties: [] }))
+		};
+	}, [
+		before,
+		after,
+		only
+	]);
 	if (!comparison) return fallback === void 0 ? /* @__PURE__ */ React.createElement("p", { role: "alert" }, labels.invalid) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
 		role: "alert",
 		className: "twgit-review-unreadable"
@@ -1165,7 +1187,7 @@ function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fa
 	return /* @__PURE__ */ React.createElement("section", {
 		className: "twgit-block-diff twgit-review twgit-review-comparison",
 		"aria-label": labels.comparison
-	}, /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, comparison.targets.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, countScripts(comparison))))), /* @__PURE__ */ React.createElement(ComparisonTargets, {
+	}, !only && /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, comparison.targets.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, countScripts(comparison))))), /* @__PURE__ */ React.createElement(ComparisonTargets, {
 		comparison,
 		labels,
 		renderBlock,
@@ -1229,6 +1251,236 @@ function ProjectSourceReview({ title, description, verification, files, renderBl
 		}
 	}))));
 }
+// src/project-change-model.ts
+init_objectSpread2();
+var targetDataKeys = [
+	"variables",
+	"lists",
+	"broadcasts"
+];
+var nonSettingKeys = /* @__PURE__ */ new Set([
+	"blocks",
+	"costumes",
+	"sounds",
+	...targetDataKeys
+]);
+var propertyLabels = /* @__PURE__ */ new Map([
+	["variables", ["変数", "Variables"]],
+	["lists", ["リスト", "Lists"]],
+	["broadcasts", ["メッセージ", "Broadcast messages"]],
+	["costumes", ["コスチューム・背景", "Costumes and backdrops"]],
+	["sounds", ["音", "Sounds"]],
+	["blocks", ["コード", "Code"]],
+	["x", ["X 座標", "X position"]],
+	["y", ["Y 座標", "Y position"]],
+	["size", ["大きさ", "Size"]],
+	["direction", ["向き", "Direction"]],
+	["visible", ["表示状態", "Visibility"]],
+	["currentCostume", ["表示するコスチューム", "Selected costume"]],
+	["layerOrder", ["重なり順", "Layer order"]],
+	["volume", ["音量", "Volume"]],
+	["comments", ["コメント", "Comments"]],
+	["draggable", ["ドラッグ可否", "Draggable"]],
+	["rotationStyle", ["回転方法", "Rotation style"]],
+	["tempo", ["テンポ", "Tempo"]],
+	["videoTransparency", ["ビデオの透明度", "Video transparency"]],
+	["videoState", ["ビデオの状態", "Video state"]],
+	["textToSpeechLanguage", ["音声合成の言語", "Text to speech language"]],
+	["monitors", ["モニター", "Monitors"]],
+	["extensions", ["拡張機能", "Extensions"]],
+	["meta", ["作品の情報", "Project metadata"]]
+]);
+/** The Japanese or English name of a project or target property key; unknown keys are returned as they are. */
+function projectPropertyLabel(key, locale = "en") {
+	var _propertyLabels$get, _propertyLabels$get2;
+	return (_propertyLabels$get = (_propertyLabels$get2 = propertyLabels.get(key)) === null || _propertyLabels$get2 === void 0 ? void 0 : _propertyLabels$get2[locale.startsWith("ja") ? 0 : 1]) !== null && _propertyLabels$get !== void 0 ? _propertyLabels$get : key;
+}
+/** The asset file name of a costume or sound entry: `md5ext`, or `assetId.dataFormat`; `''` when it has neither. */
+function assetFileName(entry) {
+	if (typeof entry.md5ext === "string") return entry.md5ext;
+	return typeof entry.assetId === "string" && typeof entry.dataFormat === "string" ? entry.assetId + "." + entry.dataFormat : "";
+}
+function joinPath(...parts) {
+	return parts.flatMap((part) => part.split("/")).filter((part) => part !== "" && part !== ".").join("/");
+}
+function statusOf(before, after) {
+	return before === void 0 ? "added" : after === void 0 ? "removed" : "updated";
+}
+function entriesOf(target, kind) {
+	const list = target === null || target === void 0 ? void 0 : target[kind];
+	return Array.isArray(list) ? list.filter(isRecord) : [];
+}
+function nameOf(entry) {
+	return typeof entry.name === "string" ? entry.name : "";
+}
+/** Pairs the entries of two versions by name (repeated names pair in order): after's order first, then removed ones. */
+function pairEntries(before, after) {
+	var _remaining$get;
+	const remaining = /* @__PURE__ */ new Map();
+	for (const entry of before) {
+		const queue = remaining.get(nameOf(entry));
+		if (queue) queue.push(entry);
+		else remaining.set(nameOf(entry), [entry]);
+	}
+	const pairs = [];
+	for (const entry of after) pairs.push({
+		name: nameOf(entry),
+		before: (_remaining$get = remaining.get(nameOf(entry))) === null || _remaining$get === void 0 ? void 0 : _remaining$get.shift(),
+		after: entry
+	});
+	for (const entry of before) {
+		const queue = remaining.get(nameOf(entry));
+		if ((queue === null || queue === void 0 ? void 0 : queue[0]) === entry) pairs.push({
+			name: nameOf(entry),
+			before: queue.shift()
+		});
+	}
+	return pairs;
+}
+function changedKeys(before, after, skip) {
+	return [.../* @__PURE__ */ new Set([...Object.keys(after), ...Object.keys(before)])].filter((key) => !skip(key) && !equal(before[key], after[key]));
+}
+/** Arranges the changed files of one project folder by stage, sprite and element. Pure; reads nothing. */
+function organizeProjectChanges(input) {
+	const { folder, files, assetsDirectory } = input;
+	const normalize = (project) => project === null ? { targets: [] } : _objectSpread2(_objectSpread2({}, project), {}, { targets: project.targets.map((target) => {
+		var _target$blocks;
+		return _objectSpread2(_objectSpread2({}, target), {}, { blocks: (_target$blocks = target.blocks) !== null && _target$blocks !== void 0 ? _target$blocks : {} });
+	}) });
+	const before = normalize(input.before), after = normalize(input.after);
+	const projectPath = joinPath(folder, "project.source.json");
+	const projectFiles = files.filter((file) => file.path === projectPath);
+	const explained = /* @__PURE__ */ new Set();
+	let projectUsed = false;
+	const useProject = () => {
+		projectUsed = true;
+		return [...projectFiles];
+	};
+	const filesAt = (paths) => {
+		const wanted = new Set(paths.filter((path) => path !== void 0));
+		const found = files.filter((file) => wanted.has(file.path));
+		for (const file of found) explained.add(file.path);
+		return found;
+	};
+	const review = compareProjectForReview(before, after);
+	const scripts = new Map(review.targets.map((target) => {
+		var _target$after;
+		return [targetKey((_target$after = target.after) !== null && _target$after !== void 0 ? _target$after : target.before), target.scripts.length];
+	}));
+	const oldTargets = new Map(before.targets.map((target) => [targetKey(target), target]));
+	const newTargets = new Map(after.targets.map((target) => [targetKey(target), target]));
+	const keys = [...new Set([...after.targets, ...before.targets].map(targetKey))];
+	keys.sort((a, b) => Number(b === "stage") - Number(a === "stage"));
+	const targets = [];
+	for (const key of keys) {
+		var _scripts$get;
+		const a = oldTargets.get(key), b = newTargets.get(key);
+		const status = statusOf(a, b);
+		const elements = [];
+		const count = (_scripts$get = scripts.get(key)) !== null && _scripts$get !== void 0 ? _scripts$get : 0;
+		if (count) elements.push({
+			key: JSON.stringify([
+				key,
+				"code",
+				""
+			]),
+			kind: "code",
+			status,
+			scripts: count,
+			files: useProject()
+		});
+		for (const kind of ["costumes", "sounds"]) {
+			const seen = /* @__PURE__ */ new Map();
+			for (const pair of pairEntries(entriesOf(a, kind), entriesOf(b, kind))) {
+				var _seen$get;
+				const md5ext = {
+					before: pair.before && assetFileName(pair.before) || void 0,
+					after: pair.after && assetFileName(pair.after) || void 0
+				};
+				const differs = !equal(pair.before, pair.after);
+				const assets = filesAt([md5ext.before && joinPath(folder, assetsDirectory.before, md5ext.before), md5ext.after && joinPath(folder, assetsDirectory.after, md5ext.after)]);
+				if (!differs && !assets.length) continue;
+				const repeat = (_seen$get = seen.get(pair.name)) !== null && _seen$get !== void 0 ? _seen$get : 0;
+				seen.set(pair.name, repeat + 1);
+				elements.push({
+					key: JSON.stringify(repeat ? [
+						key,
+						kind,
+						pair.name,
+						repeat
+					] : [
+						key,
+						kind,
+						pair.name
+					]),
+					kind,
+					status: statusOf(pair.before, pair.after),
+					name: pair.name,
+					before: pair.before,
+					after: pair.after,
+					md5ext,
+					files: [...differs ? useProject() : [], ...assets]
+				});
+			}
+		}
+		if (a && b) {
+			const oldFields = a, newFields = b;
+			const data = changedKeys(oldFields, newFields, (property) => !targetDataKeys.includes(property));
+			if (data.length) elements.push({
+				key: JSON.stringify([
+					key,
+					"data",
+					""
+				]),
+				kind: "data",
+				status,
+				properties: data,
+				files: useProject()
+			});
+			const settings = changedKeys(oldFields, newFields, (property) => nonSettingKeys.has(property));
+			if (settings.length) elements.push({
+				key: JSON.stringify([
+					key,
+					"settings",
+					""
+				]),
+				kind: "settings",
+				status,
+				properties: settings,
+				files: useProject()
+			});
+		} else projectUsed = true;
+		if (status !== "updated" || elements.length) {
+			const { name, isStage } = b !== null && b !== void 0 ? b : a;
+			targets.push({
+				key,
+				name,
+				isStage,
+				status,
+				before: a,
+				after: b,
+				elements
+			});
+		}
+	}
+	const project = changedKeys(before, after, (key) => key === "targets").map((property) => ({
+		key: JSON.stringify([
+			"project",
+			"settings",
+			property
+		]),
+		kind: "settings",
+		status: statusOf(before[property], after[property]),
+		properties: [property],
+		files: useProject()
+	}));
+	if (projectUsed) explained.add(projectPath);
+	return {
+		targets,
+		project,
+		other: files.filter((file) => !explained.has(file.path))
+	};
+}
 // src/github-pull-requests.ts
 init_objectSpread2();
 var PullRequestError = class extends Error {
@@ -1827,4 +2079,4 @@ function createScratchBlocksDiffRenderer(options) {
 		};
 	};
 }
-export { gitHubRepositoryFromOrigin as a, BlockPreview as c, currentCostume as d, compareProjectBlocks as f, createGitHubPullRequests as i, createPreviewSync as l, readProjectSourceDiff as m, createScratchBlocksDiffLocator as n, ProjectSourceComparison as o, createProjectSourceDiff as p, PullRequestError as r, ProjectSourceReview as s, createScratchBlocksDiffRenderer as t, usePreviewSync as u };
+export { compareProjectBlocks as _, gitHubRepositoryFromOrigin as a, readProjectSourceDiff as b, projectPropertyLabel as c, BlockPreview as d, createPreviewSync as f, useCostumeImage as g, useAssetImage as h, createGitHubPullRequests as i, ProjectSourceComparison as l, currentCostume as m, createScratchBlocksDiffLocator as n, assetFileName as o, usePreviewSync as p, PullRequestError as r, organizeProjectChanges as s, createScratchBlocksDiffRenderer as t, ProjectSourceReview as u, createProjectSourceDiff as v, parseProjectSource as y };

package/dist/style.css

@@ -116,14 +116,24 @@
 .twgit-panel button:focus-visible, .twgit-panel summary:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
 .twgit-panel button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
 .twgit-context { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 8px 16px; }
-.twgit-connection { margin: 0 16px 8px; max-height: 45%; overflow: auto; }
+.twgit-context { align-items: center; }
+.twgit-connection, .twgit-git-details { position: relative; }
+.twgit-connection > summary, .twgit-git-details > summary { cursor: pointer; }
+/* Settings and Git details open over the list, so the list and the diff stay where they are. */
+.twgit-connection-body { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(440px, 80vw); max-height: 60vh;
+    overflow: auto; padding: 10px 12px; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 6px;
+    box-shadow: 0 8px 24px #0004; }
+.twgit-connection-body > p { margin: 4px 0; overflow-wrap: anywhere; }
+.twgit-sync { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.twgit-change-kind { display: inline-block; min-width: 2.6em; font-size: 11px; opacity: .8; }
+.twgit-file-details { font-size: 12px; margin-bottom: 6px; }
+.twgit-file-details > p { margin: 2px 0; }
 .twgit-content { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); flex: 1; min-height: 0; }
 .twgit-panel aside { padding: 0 14px 14px; overflow: auto; border-right: 1px solid GrayText; }
 .twgit-panel aside ul { list-style: none; padding: 0; margin: 4px 0; }
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
-.twgit-file span { display: inline-block; width: 1.4em; font-family: monospace; }
 .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; }
@@ -135,4 +145,22 @@
 .twgit-view-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
 .twgit-review-unreadable { margin: 6px 0; padding: 8px; background: color-mix(in srgb, #d9822b 16%, Canvas); }
 .twgit-review-comparison .twgit-review-overview dl { margin: 4px 0 8px; }
+.twgit-element-list > section { margin: 6px 0 10px; }
+.twgit-element-target { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 14px; }
+.twgit-element-target img, .twgit-element img, .twgit-element-thumbnail { width: 28px; height: 28px; object-fit: contain; flex: none; }
+.twgit-element-thumbnail { display: inline-block; border-radius: 4px; background: color-mix(in srgb, CanvasText 8%, Canvas); }
+.twgit-panel .twgit-element { display: flex; align-items: center; gap: 6px; padding-inline-start: 10px; }
+.twgit-element-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.twgit-file-list { margin-top: 10px; }
+.twgit-element-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.twgit-element-picture { margin: 0; padding: 10px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
+.twgit-element-picture img { display: block; max-width: 100%; max-height: 260px; margin: 8px auto 0; object-fit: contain;
+    background: repeating-conic-gradient(color-mix(in srgb, CanvasText 6%, Canvas) 0 25%, Canvas 0 50%) 0 0 / 16px 16px; }
+.twgit-element-values { border-collapse: collapse; width: 100%; font-size: 13px; }
+.twgit-element-values th, .twgit-element-values td { text-align: start; vertical-align: top; padding: 6px 8px;
+    border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, Canvas); overflow-wrap: anywhere; }
+.twgit-element-values td { font-family: ui-monospace, monospace; }
+.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; }
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/connection-settings.tsx

@@ -28,7 +28,7 @@ const en = {
     unavailable: 'No GitHub connection is configured.', changed: 'Switching disconnects the current session.',
     error: 'GitHub connection failed. Retry using the selected connection.',
     invalid: 'The selected repository needs a GitHub HTTPS origin.',
-    allowPush: 'Authorize push', fetch: 'Fetch', pull: 'Pull (fast-forward only)', push: 'Push'
+    allowPush: 'Allow sending to GitHub (push)', fetch: 'Check GitHub (fetch)', pull: 'Get from GitHub (pull)', push: 'Send to GitHub (push)'
 };
 const ja: typeof en = {
     title: 'GitHub 接続', mode: '接続方式', select: '接続方式を選択',
@@ -39,7 +39,7 @@ const ja: typeof en = {
     unavailable: 'GitHub 接続先が設定されていません。', changed: '方式を切り替えると現在のセッションを切断します。',
     error: 'GitHub 接続に失敗しました。選択中の方式で再試行してください。',
     invalid: '選択したリポジトリには GitHub の HTTPS リモート origin が必要です。',
-    allowPush: 'push を許可する', fetch: 'Fetch', pull: 'Pull（fast-forward のみ）', push: 'Push'
+    allowPush: 'GitHub に送ることを許可する（push）', fetch: 'GitHub と確かめる（fetch）', pull: 'GitHub から取り込む（pull）', push: 'GitHub に送る（push）'
 };
 
 export function ConnectionSettings({settings, locale, readOrigin, runOperation}: {
@@ -69,8 +69,15 @@ export function ConnectionSettings({settings, locale, readOrigin, runOperation}:
         if (!remote) throw new Error('INVALID_REMOTE');
         await settings.connect(remote, allowPush);
     });
-    return <details className="twgit-connection">
+    const connected = !!mode && state.status === 'connected';
+    // Sync sits beside the GitHub status; the settings open over the list instead of pushing it down.
+    return <>
+        {runOperation && connected && <span className="twgit-sync">{(['fetch', 'pull', 'push'] as const).map(operation =>
+            <button key={operation} disabled={busy || !readOrigin || (operation === 'push' && !write)}
+                onClick={() => void run(() => runOperation(operation))}>{labels[operation]}</button>)}</span>}
+    <details className="twgit-connection">
         <summary>{labels.title}</summary>
+        <div className="twgit-connection-body">
         {!settings.modes.length ? <p>{labels.unavailable}</p> : <>
             <label>{labels.mode} <select value={mode ?? ''} disabled={busy}
                 onChange={event => {const choice = event.currentTarget.value as Mode; void run(() => settings.select(choice));}}>
@@ -93,11 +100,10 @@ export function ConnectionSettings({settings, locale, readOrigin, runOperation}:
                 {state.status !== 'disconnected' && <button disabled={busy}
                     onClick={() => void run(settings.refresh)}>{labels.check}</button>}
                 <button disabled={busy} onClick={() => void run(settings.disconnect)}>{labels.disconnect}</button>
-                {runOperation && state.status === 'connected' && (['fetch', 'pull', 'push'] as const).map(operation =>
-                    <button key={operation} disabled={busy || !readOrigin || (operation === 'push' && !write)}
-                        onClick={() => void run(() => runOperation(operation))}>{labels[operation]}</button>)}
             </>}
-            {error && <p className="twgit-error" role="alert">{labels[error]}</p>}
         </>}
-    </details>;
+        </div>
+    </details>
+        {error && <p className="twgit-error" role="alert">{labels[error]}</p>}
+    </>;
 }

package/src/file-diff-view.tsx

@@ -23,8 +23,10 @@ export function FileDiffView({change, diff, labels, locale, renderBlock, loadAss
     const names = locale.startsWith('ja') ? ja : en;
     const parsed = diff?.patch ? parseDiff(diff.patch)[0] : null;
     const text = <>
-        <p>{labels.mode} · {change.oldMode?.toString(8) || '—'} → {change.newMode?.toString(8) || '—'}</p>
-        {diff && <p>{diff.beforeSize} → {diff.afterSize} {labels.bytes}</p>}
+        <details className="twgit-file-details"><summary>{labels.details}</summary>
+            <p>{labels.mode} · {change.oldMode?.toString(8) || '—'} → {change.newMode?.toString(8) || '—'}</p>
+            {diff && <p>{diff.beforeSize} → {diff.afterSize} {labels.bytes}</p>}
+        </details>
         {diff?.binary && <p>{labels.binary}</p>}
         {diff?.tooLarge && <p>{labels.large}</p>}
         {parsed && <Diff viewType="unified" diffType={parsed.type} hunks={parsed.hunks}>

package/src/index.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {render, unmountComponentAtNode} from 'react-dom';
 import {FileDiffView} from './file-diff-view.js';
+import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
+import type {ChangedFile} from './project-change-model.js';
 import {openRepository} from './repository.js';
 import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup} from './repository.js';
 import {labelsFor} from './messages.js';
@@ -214,6 +216,20 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
     });
     const selectFile = (selected: FileChange) => run(async () => ({selected,
         diff: await state.repository!.readDiff(state.snapshot!, selected)}));
+    // A selected stage or sprite element replaces the file diff; picking a file goes back to it.
+    const [element, setElement] = useState<string | null>(null);
+    const [fileListOpen, setFileListOpen] = useState(false);
+    const projectChanges = useProjectChanges(state.repository, state.snapshot, state.project, state.commit, state.changes);
+    const openFile = (file: ChangedFile | FileChange) => {
+        const change = state.changes.find(item => item.path === file.path && item.group === file.group);
+        if (!change) return;
+        setElement(null);
+        void selectFile(change);
+    };
+    const openElement = (key: string) => {
+        setElement(key);
+        setState(previous => ({...previous, selected: null, diff: null}));
+    };
     const selectCommit = (commit: string) => run(async () => ({commit,
         changes: await state.repository!.historyChanges(state.snapshot!, commit), selected: null, diff: null}));
     const remoteOperation = async (operation: RemoteOperation) => {
@@ -254,6 +270,8 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
     if (!visible) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
+    const projectList = typeof projectChanges === 'object' ? projectChanges : null;
+    const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
     return <div className="twgit-backdrop">
         <div className="twgit-panel" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true" aria-label={labels.title}
             onKeyDown={focusTrap}>
@@ -269,17 +287,26 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
             <div className="twgit-context">
                 <span>{labels.repository} · {state.repository?.root.name || '—'}</span>
                 <span>{labels.project} · {state.project === null ? labels.none : state.project || labels.root}</span>
-                <strong>{state.snapshot?.branch || (state.snapshot?.head ? labels.detached : labels.unborn)}</strong>
-                <code>{state.snapshot?.head?.slice(0, 12)}</code>
                 <span data-git-dirty="">{dirty ? labels.dirty : labels.saved}</span>
+                {state.snapshot && <span data-git-upstream={state.snapshot.upstream.state} title={labels.checkedAt}>{upstreamText(state.snapshot, labels)}</span>}
+                {!review && host.connectionSettings && <ConnectionSettings settings={host.connectionSettings} locale={locale}
+                    runOperation={host.connectionSettings.getSession ? remoteOperation : undefined}
+                    readOrigin={state.repository && !state.busy ? async () => {
+                        const ticket = epoch.current;
+                        const remote = await state.repository!.readOrigin();
+                        return epoch.current === ticket ? remote : undefined;
+                    } : undefined}/>}
+                {state.snapshot && <details className="twgit-git-details">
+                    <summary>{labels.details}</summary>
+                    <div className="twgit-connection-body">
+                        <p>{labels.branch} · <strong>{state.snapshot.branch || (state.snapshot.head ? labels.detached : labels.unborn)}</strong></p>
+                        <p>{labels.head} · <code>{state.snapshot.head?.slice(0, 12) ?? '—'}</code></p>
+                        <p>{labels.branches} · {state.snapshot.branches.join(', ') || '—'}</p>
+                        <p>{labels.groups} · {labels.gitStaged} = {labels.staged} / {labels.gitUnstaged} = {labels.unstaged} / {labels.gitUntracked} = {labels.untracked}</p>
+                        <p>{labels.permissions}</p>
+                    </div>
+                </details>}
             </div>
-            {!review && host.connectionSettings && <ConnectionSettings settings={host.connectionSettings} locale={locale}
-                runOperation={host.connectionSettings.getSession ? remoteOperation : undefined}
-                readOrigin={state.repository && !state.busy ? async () => {
-                    const ticket = epoch.current;
-                    const remote = await state.repository!.readOrigin();
-                    return epoch.current === ticket ? remote : undefined;
-                } : undefined}/>}
             {state.error && <p className="twgit-error" role="alert">{state.error}</p>}
             {state.notice && <p className="twgit-context" role="status">{state.notice}</p>}
             {state.busy && <p role="status">{labels.loading}</p>}
@@ -297,34 +324,52 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                             onClick={() => void browse([state.browser!.path, name].filter(Boolean).join('/'))}>{name}/</button></li>)}</ul>
                     </details>}
                     <h3><button disabled={state.busy} onClick={() => void controller.refresh()}>{labels.worktree}</button></h3>
-                    {groups.map(group => <section key={group}>
-                        <h3>{labels[group]} · {state.changes.filter(change => change.group === group).length}</h3>
-                        <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}>
-                            <button className="twgit-file" data-git-group={group} disabled={state.busy}
-                                aria-pressed={state.selected === change} onClick={() => void selectFile(change)}>
-                                <span>{!change.after ? 'D' : !change.before ? 'A' : 'M'}</span> {change.path}
-                            </button>
-                        </li>)}</ul>
-                    </section>)}
+                    {projectChanges === 'loading' && <p role="status">{projectChangeLabels(locale).loading}</p>}
+                    {projectChanges === 'unreadable' && <p>{projectChangeLabels(locale).unreadable}</p>}
+                    {(() => {
+                        const fileList = groups.map(group => <section key={group}>
+                            <h3>{labels[group]} · {state.changes.filter(change => change.group === group).length}</h3>
+                            <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}>
+                                <button className="twgit-file" data-git-group={group} disabled={state.busy}
+                                    aria-pressed={state.selected === change} onClick={() => openFile(change)}>
+                                    <small className="twgit-change-kind">{!change.after ? labels.deleted : !change.before ? labels.added : labels.modified}</small> {change.path}
+                                </button>
+                            </li>)}</ul>
+                        </section>);
+                        return projectList ? <ProjectChangeListView changes={projectList} selected={selection ? element : null}
+                            locale={locale} busy={state.busy} onSelect={openElement} onSelectFile={openFile} fileList={fileList}
+                            fileListOpen={fileListOpen} setFileListOpen={setFileListOpen}/> : fileList;
+                    })()}
                     {!state.changes.length && <p>{labels.clean}</p>}
-                    <details><summary>{labels.branches}</summary><ul>{state.snapshot?.branches.map(branch => <li key={branch}>{branch}</li>)}</ul></details>
                     <h3>{labels.history}</h3>
                     <ol className="twgit-history">{state.snapshot?.commits.map(commit => <li key={commit.oid}>
                         <button disabled={state.busy} aria-pressed={state.commit === commit.oid} title={commit.oid}
                             onClick={() => void selectCommit(commit.oid)}>{commit.message.split('\n')[0]}</button>
-                        <small><code>{commit.oid.slice(0, 8)}</code> · {commit.author} · {new Date(commit.timestamp * 1000).toLocaleString(locale)}</small>
+                        <small>{commit.author} · {new Date(commit.timestamp * 1000).toLocaleString(locale)}</small>
                     </li>)}</ol>
                 </aside>
                 <main className="twgit-diff">
-                    {state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
-                        renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
+                    {selection && projectList ? <ProjectElementView changes={projectList} selection={selection} locale={locale}
+                        renderBlock={host.renderReviewBlock} onSelectFile={openFile}/> :
+                        state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
+                            renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
                 </main>
             </div>}
-            <footer>{labels.permissions}</footer>
         </div>
     </div>;
 }
 
+/** The GitHub relation in plain words, with the number of records where it helps. */
+function upstreamText({upstream}: Snapshot, labels: ReturnType<typeof labelsFor>) {
+    switch (upstream.state) {
+    case 'same': return labels.upstreamSame;
+    case 'ahead': return `${labels.upstreamAhead} · ${upstream.ahead} ${labels.records}`;
+    case 'behind': return `${labels.upstreamBehind} · ${upstream.behind} ${labels.records}`;
+    case 'diverged': return `${labels.upstreamDiverged} · +${upstream.ahead} / −${upstream.behind}`;
+    default: return labels.upstreamUnknown;
+    }
+}
+
 export function mountGitPanel({vm, document, host}: {vm: object; document: Document; host: GitHost}) {
     if (!(document.defaultView as PickerWindow)?.showDirectoryPicker) return null;
     const root = document.createElement('div');