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

package/dist/index.js

@@ -1,6 +1,6 @@
 import { a as gitHubRepositoryFromOrigin, c as projectPropertyLabel, g as useCostumeImage, h as useAssetImage, i as createGitHubPullRequests, l as ProjectSourceComparison, r as PullRequestError, s as organizeProjectChanges, t as createScratchBlocksDiffRenderer, u as ProjectSourceReview, y as parseProjectSource } from "./scratch-block-diff-renderer-DZR8ep-T.js";
 import { n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2$1 } from "./objectSpread2-Dkd68nJH.js";
-import { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-VBp-UNWc.js";
+import { i as createReadOnlyFs, r as GitPanelError, t as openRepository } from "./repository-CtvWYPQ8.js";
 import * as m from "react";
 import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
@@ -2689,7 +2689,7 @@ function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset })
 	const [view, setView] = useState("blocks");
 	const names = locale.startsWith("ja") ? ja$3 : en$3;
 	const parsed = (diff === null || diff === void 0 ? void 0 : diff.patch) ? parseDiff(diff.patch)[0] : null;
-	const text = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, labels.mode, " · ", ((_change$oldMode = change.oldMode) === null || _change$oldMode === void 0 ? void 0 : _change$oldMode.toString(8)) || "—", " → ", ((_change$newMode = change.newMode) === null || _change$newMode === void 0 ? void 0 : _change$newMode.toString(8)) || "—"), diff && /* @__PURE__ */ React.createElement("p", null, diff.beforeSize, " → ", diff.afterSize, " ", labels.bytes), (diff === null || diff === void 0 ? void 0 : diff.binary) && /* @__PURE__ */ React.createElement("p", null, labels.binary), (diff === null || diff === void 0 ? void 0 : diff.tooLarge) && /* @__PURE__ */ React.createElement("p", null, labels.large), parsed && /* @__PURE__ */ React.createElement(index, {
+	const text = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("details", { className: "twgit-file-details" }, /* @__PURE__ */ React.createElement("summary", null, labels.details), /* @__PURE__ */ React.createElement("p", null, labels.mode, " · ", ((_change$oldMode = change.oldMode) === null || _change$oldMode === void 0 ? void 0 : _change$oldMode.toString(8)) || "—", " → ", ((_change$newMode = change.newMode) === null || _change$newMode === void 0 ? void 0 : _change$newMode.toString(8)) || "—"), diff && /* @__PURE__ */ React.createElement("p", null, diff.beforeSize, " → ", diff.afterSize, " ", labels.bytes)), (diff === null || diff === void 0 ? void 0 : diff.binary) && /* @__PURE__ */ React.createElement("p", null, labels.binary), (diff === null || diff === void 0 ? void 0 : diff.tooLarge) && /* @__PURE__ */ React.createElement("p", null, labels.large), parsed && /* @__PURE__ */ React.createElement(index, {
 		viewType: "unified",
 		diffType: parsed.type,
 		hunks: parsed.hunks
@@ -2746,10 +2746,10 @@ var en$2 = {
 	file: "File name",
 	noImage: "No image",
 	groups: {
-		staged: "Staged",
-		unstaged: "Unstaged",
-		untracked: "Untracked",
-		commit: "Commit"
+		staged: "in the next record",
+		unstaged: "not yet recorded",
+		untracked: "new file",
+		commit: "in this record"
 	}
 };
 var ja$2 = {
@@ -2780,10 +2780,10 @@ var ja$2 = {
 	file: "ファイル名",
 	noImage: "画像なし",
 	groups: {
-		staged: "ステージ済み",
-		unstaged: "未ステージ",
-		untracked: "未追跡",
-		commit: "コミット"
+		staged: "次の記録に入る",
+		unstaged: "まだ記録していない",
+		untracked: "新しいファイル",
+		commit: "この記録"
 	}
 };
 var projectChangeLabels = (locale) => locale.startsWith("ja") ? ja$2 : en$2;
@@ -3039,15 +3039,15 @@ var messages = {
 		replace: "Replace the open project and discard its unsaved changes?",
 		dirty: "The Editor has unsaved changes.",
 		saved: "The Editor has no unsaved changes.",
-		staged: "Staged",
-		unstaged: "Unstaged",
-		untracked: "Untracked",
-		commit: "Commit changes",
-		history: "History",
-		worktree: "Working tree",
-		clean: "No changes in the selected folder.",
+		staged: "Changes in the next record",
+		unstaged: "Saved, not yet recorded",
+		untracked: "New files never recorded",
+		commit: "Changes in this record",
+		history: "Records (commits)",
+		worktree: "Saved files",
+		clean: "No saved changes in the selected folder.",
 		branches: "Local branches",
-		unborn: "No commits yet",
+		unborn: "No records yet",
 		detached: "Detached HEAD",
 		select: "Select a file to view its diff.",
 		binary: "Binary asset",
@@ -3061,16 +3061,33 @@ var messages = {
 		changed: "Files or Git state changed while reading. Refresh to read the current state.",
 		outdated: "The repository changed outside the Editor. Refresh to read the current state.",
 		unsupported: "This repository contains an entry the browser cannot represent.",
-		pullUnsafe: "Stop the project and clear unsaved or local Git changes before pulling.",
-		diverged: "Pull requires a fast-forward. Your local branch and files are intact.",
+		pullUnsafe: "Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).",
+		diverged: "This branch and GitHub's have both gained records, so they cannot be combined here (pull only fast-forwards). Your branch and files are unchanged.",
 		session: "Reconnect GitHub for this repository and requested permission.",
-		pushUnknown: "The push result is unknown. Fetch and check the remote branch before retrying.",
-		pushRefresh: "The push succeeded. Fetch to refresh the local tracking branch.",
-		rollbackFailed: "Git could not restore all local changes. Check the working tree and Git status.",
-		remoteFailed: "The Git operation failed. Check the selected connection and retry.",
-		remoteDone: "Git operation completed.",
-		pulledProject: "Pull completed. Use Reload Project to open the updated files.",
-		confirmPush: "Push the current branch to its GitHub origin?",
+		pushUnknown: "It is unknown whether GitHub received the records. Check GitHub (fetch) before sending again.",
+		pushRefresh: "GitHub received the records. Check GitHub (fetch) to update the status.",
+		rollbackFailed: "Some local changes could not be restored. Check the files and the Git details.",
+		remoteFailed: "Could not complete the GitHub operation. Check the connection and try again.",
+		remoteDone: "The GitHub operation finished.",
+		pulledProject: "Got the changes from GitHub. Use Reload Project to open the updated files.",
+		confirmPush: "Send the records on this branch to GitHub (push)?",
+		details: "Git details",
+		branch: "Branch",
+		head: "HEAD",
+		groups: "Git groups",
+		added: "Added",
+		modified: "Changed",
+		deleted: "Deleted",
+		gitStaged: "Staged",
+		gitUnstaged: "Unstaged",
+		gitUntracked: "Untracked",
+		upstreamSame: "Same as GitHub",
+		upstreamAhead: "Ahead of GitHub",
+		upstreamBehind: "Behind GitHub",
+		upstreamDiverged: "Diverged from GitHub",
+		upstreamUnknown: "Not checked with GitHub yet",
+		records: "records",
+		checkedAt: "as of the last check",
 		failed: "Could not read the repository. Check folder access and refresh."
 	},
 	ja: {
@@ -3090,18 +3107,18 @@ var messages = {
 		reload: "作品を再読込",
 		up: "上のフォルダ",
 		browse: "リポジトリ内の作品を選択",
-		replace: "未保存の変更を破棄して、別の作品を開きますか？",
-		dirty: "Editor に未保存の変更があります。",
-		saved: "Editor に未保存の変更はありません。",
-		staged: "ステージ済み",
-		unstaged: "未ステージ",
-		untracked: "未追跡",
-		commit: "コミットの変更",
-		history: "履歴",
-		worktree: "作業ツリー",
-		clean: "対象フォルダに変更はありません。",
+		replace: "保存していない編集を破棄して、別の作品を開きますか？",
+		dirty: "Editor に保存していない編集があります。",
+		saved: "Editor に保存していない編集はありません。",
+		staged: "次の記録に入る変更",
+		unstaged: "保存したが、まだ記録していない変更",
+		untracked: "まだ記録したことのない新しいファイル",
+		commit: "この記録の変更",
+		history: "記録（コミット）の履歴",
+		worktree: "保存したファイル",
+		clean: "対象フォルダに、保存した変更はありません。",
 		branches: "ローカルブランチ",
-		unborn: "コミットはまだありません",
+		unborn: "まだ記録がありません",
 		detached: "ブランチ未選択の HEAD",
 		select: "ファイルを選ぶと差分を表示します。",
 		binary: "バイナリアセット",
@@ -3115,16 +3132,33 @@ var messages = {
 		changed: "読込中にファイルまたは Git の状態が変わりました。再取得してください。",
 		outdated: "Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。",
 		unsupported: "ブラウザーで扱えない種類の Git エントリーがあります。",
-		pullUnsafe: "pull の前に実行を止め、未保存編集とローカルの Git 変更を解消してください。",
-		diverged: "fast-forward できません。ローカルブランチとファイルは保持されています。",
+		pullUnsafe: "GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。",
+		diverged: "このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。",
 		session: "このリポジトリと操作に必要な権限で GitHub に接続してください。",
-		pushUnknown: "push の結果が不明です。再試行する前に fetch でリモートブランチを確認してください。",
-		pushRefresh: "push は成功しました。fetch でローカルの追跡ブランチを更新してください。",
-		rollbackFailed: "Git がローカルの変更をすべて復元できませんでした。作業ツリーと Git の状態を確認してください。",
-		remoteFailed: "Git 操作に失敗しました。選択中の接続を確認して再試行してください。",
-		remoteDone: "Git 操作が完了しました。",
-		pulledProject: "pull が完了しました。「作品を再読込」で更新済みのファイルを開けます。",
-		confirmPush: "現在のブランチを GitHub の origin に push しますか？",
+		pushUnknown: "GitHub が記録を受け取ったか分かりません。送り直す前に「GitHub と確かめる」を使ってください。",
+		pushRefresh: "GitHub が記録を受け取りました。「GitHub と確かめる」で状態を更新してください。",
+		rollbackFailed: "一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。",
+		remoteFailed: "GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。",
+		remoteDone: "GitHub との操作が終わりました。",
+		pulledProject: "GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。",
+		confirmPush: "このブランチの記録を GitHub に送りますか（push）？",
+		details: "Git の詳細",
+		branch: "ブランチ",
+		head: "HEAD",
+		groups: "Git の区分",
+		added: "追加",
+		modified: "変更",
+		deleted: "削除",
+		gitStaged: "ステージ済み (staged)",
+		gitUnstaged: "未ステージ (unstaged)",
+		gitUntracked: "未追跡 (untracked)",
+		upstreamSame: "GitHub と同じ",
+		upstreamAhead: "GitHub より進んでいる",
+		upstreamBehind: "GitHub より遅れている",
+		upstreamDiverged: "GitHub と分かれている",
+		upstreamUnknown: "まだ GitHub と確かめていない",
+		records: "件",
+		checkedAt: "最後に確かめた時点",
 		failed: "リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。"
 	}
 };
@@ -3151,10 +3185,10 @@ var en$1 = {
 	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)"
 };
 var ja$1 = {
 	title: "GitHub 接続",
@@ -3177,10 +3211,10 @@ var ja$1 = {
 	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）"
 };
 function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	const labels = locale.startsWith("ja") ? ja$1 : en$1;
@@ -3216,7 +3250,16 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 		if (!remote) throw new Error("INVALID_REMOTE");
 		await settings.connect(remote, allowPush);
 	});
-	return /* @__PURE__ */ React.createElement("details", { className: "twgit-connection" }, /* @__PURE__ */ React.createElement("summary", null, labels.title), !settings.modes.length ? /* @__PURE__ */ React.createElement("p", null, labels.unavailable) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, labels.mode, " ", /* @__PURE__ */ React.createElement("select", {
+	const connected = !!mode && state.status === "connected";
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, runOperation && connected && /* @__PURE__ */ React.createElement("span", { className: "twgit-sync" }, [
+		"fetch",
+		"pull",
+		"push"
+	].map((operation) => /* @__PURE__ */ React.createElement("button", {
+		key: operation,
+		disabled: busy || !readOrigin || operation === "push" && !write,
+		onClick: () => void run(() => runOperation(operation))
+	}, labels[operation]))), /* @__PURE__ */ React.createElement("details", { className: "twgit-connection" }, /* @__PURE__ */ React.createElement("summary", null, labels.title), /* @__PURE__ */ React.createElement("div", { className: "twgit-connection-body" }, !settings.modes.length ? /* @__PURE__ */ React.createElement("p", null, labels.unavailable) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, labels.mode, " ", /* @__PURE__ */ React.createElement("select", {
 		value: mode !== null && mode !== void 0 ? mode : "",
 		disabled: busy,
 		onChange: (event) => {
@@ -3250,18 +3293,10 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	}, labels.check), /* @__PURE__ */ React.createElement("button", {
 		disabled: busy,
 		onClick: () => void run(settings.disconnect)
-	}, labels.disconnect), runOperation && state.status === "connected" && [
-		"fetch",
-		"pull",
-		"push"
-	].map((operation) => /* @__PURE__ */ React.createElement("button", {
-		key: operation,
-		disabled: busy || !readOrigin || operation === "push" && !write,
-		onClick: () => void run(() => runOperation(operation))
-	}, labels[operation]))), error && /* @__PURE__ */ React.createElement("p", {
+	}, labels.disconnect))))), error && /* @__PURE__ */ React.createElement("p", {
 		className: "twgit-error",
 		role: "alert"
-	}, labels[error])));
+	}, labels[error]));
 }
 // src/pull-request-panel.tsx
 var en = {
@@ -3456,7 +3491,7 @@ var initial = {
 var controllers = /* @__PURE__ */ new WeakMap();
 var watchInterval = 2e3;
 function GitPanel({ document, host, controller }) {
-	var _state$repository, _state$snapshot, _state$snapshot2, _state$snapshot3, _state$snapshot4, _state$snapshot5;
+	var _state$repository, _state$snapshot$head$, _state$snapshot$head, _state$snapshot;
 	const [visible, setVisible] = useState(false);
 	const [review, setReview] = useState(false);
 	const [locale, setLocale] = useState(document.documentElement.lang || "en");
@@ -3789,7 +3824,10 @@ function GitPanel({ document, host, controller }) {
 		type: "button",
 		disabled: state.busy,
 		onClick: () => setReview(!review)
-	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement("button", { onClick: () => setVisible(false) }, labels.close)), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("strong", null, ((_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.branch) || (((_state$snapshot2 = state.snapshot) === null || _state$snapshot2 === void 0 ? void 0 : _state$snapshot2.head) ? labels.detached : labels.unborn)), /* @__PURE__ */ React.createElement("code", null, (_state$snapshot3 = state.snapshot) === null || _state$snapshot3 === void 0 || (_state$snapshot3 = _state$snapshot3.head) === null || _state$snapshot3 === void 0 ? void 0 : _state$snapshot3.slice(0, 12)), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved)), !review && host.connectionSettings && /* @__PURE__ */ React.createElement(ConnectionSettings, {
+	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement("button", { onClick: () => setVisible(false) }, labels.close)), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved), state.snapshot && /* @__PURE__ */ React.createElement("span", {
+		"data-git-upstream": state.snapshot.upstream.state,
+		title: labels.checkedAt
+	}, upstreamText(state.snapshot, labels)), !review && host.connectionSettings && /* @__PURE__ */ React.createElement(ConnectionSettings, {
 		settings: host.connectionSettings,
 		locale,
 		runOperation: host.connectionSettings.getSession ? remoteOperation : void 0,
@@ -3798,7 +3836,7 @@ function GitPanel({ document, host, controller }) {
 			const remote = await state.repository.readOrigin();
 			return epoch.current === ticket ? remote : void 0;
 		} : void 0
-	}), state.error && /* @__PURE__ */ React.createElement("p", {
+	}), state.snapshot && /* @__PURE__ */ React.createElement("details", { className: "twgit-git-details" }, /* @__PURE__ */ React.createElement("summary", null, labels.details), /* @__PURE__ */ React.createElement("div", { className: "twgit-connection-body" }, /* @__PURE__ */ React.createElement("p", null, labels.branch, " · ", /* @__PURE__ */ React.createElement("strong", null, state.snapshot.branch || (state.snapshot.head ? labels.detached : labels.unborn))), /* @__PURE__ */ React.createElement("p", null, labels.head, " · ", /* @__PURE__ */ React.createElement("code", null, (_state$snapshot$head$ = (_state$snapshot$head = state.snapshot.head) === null || _state$snapshot$head === void 0 ? void 0 : _state$snapshot$head.slice(0, 12)) !== null && _state$snapshot$head$ !== void 0 ? _state$snapshot$head$ : "—")), /* @__PURE__ */ React.createElement("p", null, labels.branches, " · ", state.snapshot.branches.join(", ") || "—"), /* @__PURE__ */ React.createElement("p", null, labels.groups, " · ", labels.gitStaged, " = ", labels.staged, " / ", labels.gitUnstaged, " = ", labels.unstaged, " / ", labels.gitUntracked, " = ", labels.untracked), /* @__PURE__ */ React.createElement("p", null, labels.permissions)))), state.error && /* @__PURE__ */ React.createElement("p", {
 		className: "twgit-error",
 		role: "alert"
 	}, state.error), state.notice && /* @__PURE__ */ React.createElement("p", {
@@ -3828,7 +3866,7 @@ function GitPanel({ document, host, controller }) {
 			disabled: state.busy,
 			"aria-pressed": state.selected === change,
 			onClick: () => openFile(change)
-		}, /* @__PURE__ */ React.createElement("span", null, !change.after ? "D" : !change.before ? "A" : "M"), " ", change.path))))));
+		}, /* @__PURE__ */ React.createElement("small", { className: "twgit-change-kind" }, !change.after ? labels.deleted : !change.before ? labels.added : labels.modified), " ", change.path))))));
 		return projectList ? /* @__PURE__ */ React.createElement(ProjectChangeListView, {
 			changes: projectList,
 			selected: selection ? element : null,
@@ -3840,12 +3878,12 @@ function GitPanel({ document, host, controller }) {
 			fileListOpen,
 			setFileListOpen
 		}) : fileList;
-	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, labels.branches), /* @__PURE__ */ React.createElement("ul", null, (_state$snapshot4 = state.snapshot) === null || _state$snapshot4 === void 0 ? void 0 : _state$snapshot4.branches.map((branch) => /* @__PURE__ */ React.createElement("li", { key: branch }, branch)))), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot5 = state.snapshot) === null || _state$snapshot5 === void 0 ? void 0 : _state$snapshot5.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
+	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy,
 		"aria-pressed": state.commit === commit.oid,
 		title: commit.oid,
 		onClick: () => void selectCommit(commit.oid)
-	}, commit.message.split("\n")[0]), /* @__PURE__ */ React.createElement("small", null, /* @__PURE__ */ React.createElement("code", null, commit.oid.slice(0, 8)), " · ", commit.author, " · ", (/* @__PURE__ */ new Date(commit.timestamp * 1e3)).toLocaleString(locale)))))), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
+	}, commit.message.split("\n")[0]), /* @__PURE__ */ React.createElement("small", null, commit.author, " · ", (/* @__PURE__ */ new Date(commit.timestamp * 1e3)).toLocaleString(locale)))))), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
 		changes: projectList,
 		selection,
 		locale,
@@ -3858,7 +3896,17 @@ function GitPanel({ document, host, controller }) {
 		locale,
 		renderBlock: host.renderReviewBlock,
 		loadAsset
-	}) : /* @__PURE__ */ React.createElement("p", null, labels.select))), /* @__PURE__ */ React.createElement("footer", null, labels.permissions)));
+	}) : /* @__PURE__ */ React.createElement("p", null, labels.select)))));
+}
+/** The GitHub relation in plain words, with the number of records where it helps. */
+function upstreamText({ upstream }, labels) {
+	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;
+	}
 }
 function mountGitPanel({ vm, document, host }) {
 	var _document$defaultView2;

package/dist/messages.d.ts

@@ -51,6 +51,23 @@ export declare const messages: {
         remoteDone: string;
         pulledProject: string;
         confirmPush: string;
+        details: string;
+        branch: string;
+        head: string;
+        groups: string;
+        added: string;
+        modified: string;
+        deleted: string;
+        gitStaged: string;
+        gitUnstaged: string;
+        gitUntracked: string;
+        upstreamSame: string;
+        upstreamAhead: string;
+        upstreamBehind: string;
+        upstreamDiverged: string;
+        upstreamUnknown: string;
+        records: string;
+        checkedAt: string;
         failed: string;
     };
     ja: {
@@ -105,6 +122,23 @@ export declare const messages: {
         remoteDone: string;
         pulledProject: string;
         confirmPush: string;
+        details: string;
+        branch: string;
+        head: string;
+        groups: string;
+        added: string;
+        modified: string;
+        deleted: string;
+        gitStaged: string;
+        gitUnstaged: string;
+        gitUntracked: string;
+        upstreamSame: string;
+        upstreamAhead: string;
+        upstreamBehind: string;
+        upstreamDiverged: string;
+        upstreamUnknown: string;
+        records: string;
+        checkedAt: string;
         failed: string;
     };
 };

package/dist/{repository-VBp-UNWc.js → repository-CtvWYPQ8.js}

@@ -14562,6 +14562,37 @@ async function fetch({ fs, http, onProgress, onMessage, onAuth, onAuthSuccess, o
 	}
 }
 /**
+* Find the merge base for a set of commits
+*
+* @param {object} args
+* @param {FsClient} args.fs - a file system client
+* @param {string} [args.dir] - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir,'.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string[]} args.oids - Which commits
+* @param {object} [args.cache] - a [cache](cache.md) object
+*
+*/
+async function findMergeBase({ fs, dir, gitdir = join(dir, ".git"), oids, cache = {} }) {
+	try {
+		assertParameter("fs", fs);
+		assertParameter("gitdir", gitdir);
+		assertParameter("oids", oids);
+		const fsp = new FileSystem(fs);
+		return await _findMergeBase({
+			fs: fsp,
+			cache,
+			gitdir: await discoverGitdir({
+				fsp,
+				dotgit: gitdir
+			}),
+			oids
+		});
+	} catch (err) {
+		err.caller = "git.findMergeBase";
+		throw err;
+	}
+}
+/**
 * Read an entry from the git config files.
 *
 * *Caveats:*
@@ -16800,6 +16831,9 @@ var emptyTree = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
 var textLimit = 1048576;
 var inScope = (path, scope) => !scope || path === scope || path.startsWith(scope + "/");
 var probeLimit = 5e3;
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+var upstreamWalkLimit = 1e3;
+var trackingRef = (branchRef) => "refs/remotes/origin/" + branchRef.slice(11);
 var sameMetadata = (a, b) => a.size === b.size && [...a].every(([path, bytes]) => {
 	var _b$get;
 	return sameBytes(bytes, (_b$get = b.get(path)) !== null && _b$get !== void 0 ? _b$get : null);
@@ -16839,7 +16873,7 @@ async function openRepository(root) {
 		if (text.startsWith("ref: refs/heads/")) {
 			const ref = text.slice(5);
 			pathParts(ref);
-			paths.push("/.git/" + ref);
+			paths.push("/.git/" + ref, "/.git/" + trackingRef(ref));
 		} else if (!/^[0-9a-f]{40}$/.test(text)) throw new GitPanelError("invalid");
 		const result = /* @__PURE__ */ new Map();
 		for (const path of paths) {
@@ -16885,7 +16919,7 @@ async function openRepository(root) {
 			} catch (_unused) {
 				return "locked";
 			}
-			paths.push(".git/" + head.slice(5));
+			paths.push(".git/" + head.slice(5), ".git/" + trackingRef(head.slice(5)));
 		}
 		const lines = [];
 		for (const path of paths) {
@@ -16957,6 +16991,86 @@ async function openRepository(root) {
 			mode
 		}]));
 	};
+	/**
+	* Compares `refs/heads/<branch>` with `refs/remotes/origin/<branch>` from local refs only. Counts by painting
+	* commits from both tips in committer-time order until every queued commit is reachable from both, like
+	* `git rev-list --left-right --count`, reading at most `upstreamWalkLimit` commits.
+	*/
+	const upstreamRelation = async (branch, head) => {
+		const unknown = {
+			state: "unknown",
+			ahead: 0,
+			behind: 0
+		};
+		if (!branch || !head) return unknown;
+		pathParts(trackingRef("refs/heads/" + branch));
+		try {
+			const remote = await resolveRef(_objectSpread2(_objectSpread2({}, options), {}, { ref: trackingRef("refs/heads/" + branch) }));
+			if (remote === head) return {
+				state: "same",
+				ahead: 0,
+				behind: 0
+			};
+			const bases = await findMergeBase(_objectSpread2(_objectSpread2({}, options), {}, {
+				cache,
+				oids: [head, remote]
+			}));
+			const hasAhead = !bases.includes(head), hasBehind = !bases.includes(remote);
+			const local = 1, tracking = 2, both = 3;
+			const flags = /* @__PURE__ */ new Map([[head, local], [remote, tracking]]);
+			const time = async (oid) => (await readCommit(_objectSpread2(_objectSpread2({}, options), {}, {
+				cache,
+				oid
+			}))).commit;
+			const queue = [];
+			const enqueue = async (oid) => {
+				const commit = await time(oid);
+				queue.push({
+					oid,
+					time: commit.committer.timestamp,
+					parents: commit.parent
+				});
+			};
+			await enqueue(head);
+			await enqueue(remote);
+			let read = 2;
+			let complete = true;
+			while (queue.some((item) => flags.get(item.oid) !== both)) {
+				if (read >= 1e3) {
+					complete = false;
+					break;
+				}
+				queue.sort((a, b) => b.time - a.time);
+				const item = queue.shift();
+				const flag = flags.get(item.oid);
+				for (const parent of item.parents) {
+					var _flags$get;
+					const previous = (_flags$get = flags.get(parent)) !== null && _flags$get !== void 0 ? _flags$get : 0;
+					if ((previous | flag) === previous) continue;
+					flags.set(parent, previous | flag);
+					if (!queue.some((entry) => entry.oid === parent)) {
+						await enqueue(parent);
+						read++;
+					}
+				}
+			}
+			let ahead = 0, behind = 0;
+			for (const flag of flags.values()) if (flag === local) ahead++;
+			else if (flag === tracking) behind++;
+			if (!complete) {
+				ahead = hasAhead ? upstreamWalkLimit : 0;
+				behind = hasBehind ? upstreamWalkLimit : 0;
+			}
+			return {
+				state: hasAhead && hasBehind ? "diverged" : hasAhead ? "ahead" : hasBehind ? "behind" : "same",
+				ahead: hasAhead ? Math.max(ahead, 1) : 0,
+				behind: hasBehind ? Math.max(behind, 1) : 0
+			};
+		} catch (error) {
+			if (errorCode(error) === "NotFoundError") return unknown;
+			throw error;
+		}
+	};
 	const assertSnapshot = async (snapshot) => {
 		if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError("changed");
 	};
@@ -16985,6 +17099,7 @@ async function openRepository(root) {
 			author: commit.author.name,
 			timestamp: commit.author.timestamp
 		})) : [];
+		const upstream = await upstreamRelation(branch || void 0, head);
 		const matrix = await statusMatrix(_objectSpread2(_objectSpread2({}, options), {}, {
 			cache,
 			refresh: false,
@@ -17033,7 +17148,8 @@ async function openRepository(root) {
 			changes,
 			scope,
 			metadata: before,
-			probe: fingerprint
+			probe: fingerprint,
+			upstream
 		};
 	};
 	const historyChanges = async (snapshot, oid) => {
@@ -17340,4 +17456,4 @@ async function openRepository(root) {
 		projectAssetLoader: (snapshot, folder, comparison) => ({ version, md5ext, signal }) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) : serial(() => readFolderAsset(snapshot, pathParts(folder), () => comparisonSource(snapshot, comparison, version), md5ext, signal)).catch(() => null)
 	};
 }
-export { GitPanelError as n, createReadOnlyFs as r, openRepository as t };
+export { createReadOnlyFs as i, upstreamWalkLimit as n, GitPanelError as r, openRepository as t };

package/dist/repository.d.ts

@@ -40,6 +40,21 @@ export interface Snapshot {
     metadata: Metadata;
     /** Size and time fingerprint taken before the read. Compare it with `probe(scope)` to see later changes. */
     probe: string;
+    /**
+     * How the current branch stands against `refs/remotes/origin/<branch>` as of the last fetch, from local refs only.
+     * `unknown` when there is no current branch or no tracking ref yet.
+     */
+    upstream: UpstreamRelation;
+}
+export interface UpstreamRelation {
+    state: 'same' | 'ahead' | 'behind' | 'diverged' | 'unknown';
+    /**
+     * Commits on the local branch that the tracking branch lacks, and the reverse. Zero when unknown. Counting reads at
+     * most `upstreamWalkLimit` (1000) commits; past that, a side that has commits of its own reports exactly that limit,
+     * meaning "this many or more". The state itself comes from the merge base and stays exact.
+     */
+    ahead: number;
+    behind: number;
 }
 export interface FileDiff {
     binary: boolean;
@@ -56,6 +71,8 @@ export interface FileDiff {
     afterSize: number;
     tooLarge: boolean;
 }
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+export declare const upstreamWalkLimit = 1000;
 export declare function openRepository(root: FileSystemDirectoryHandle): Promise<{
     root: FileSystemDirectoryHandle;
     openProject: (path: string) => Promise<FileSystemDirectoryHandle>;

package/dist/repository.js

@@ -1 +1 @@
-export { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-VBp-UNWc.js";
+export { r as GitPanelError, i as createReadOnlyFs, t as openRepository, n as upstreamWalkLimit } from "./repository-CtvWYPQ8.js";

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; }
@@ -152,4 +162,5 @@
 .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.9.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

@@ -287,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>}
@@ -323,7 +332,7 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                             <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)}>
-                                    <span>{!change.after ? 'D' : !change.before ? 'A' : 'M'}</span> {change.path}
+                                    <small className="twgit-change-kind">{!change.after ? labels.deleted : !change.before ? labels.added : labels.modified}</small> {change.path}
                                 </button>
                             </li>)}</ul>
                         </section>);
@@ -332,12 +341,11 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                             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">
@@ -347,11 +355,21 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                             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');

package/src/messages.ts

@@ -7,9 +7,9 @@ export const messages = {
         open: 'Open This Project', reload: 'Reload Project', up: 'Parent folder', browse: 'Choose a project inside this repository',
         replace: 'Replace the open project and discard its unsaved changes?',
         dirty: 'The Editor has unsaved changes.', saved: 'The Editor has no unsaved changes.',
-        staged: 'Staged', unstaged: 'Unstaged', untracked: 'Untracked', commit: 'Commit changes',
-        history: 'History', worktree: 'Working tree', clean: 'No changes in the selected folder.',
-        branches: 'Local branches', unborn: 'No commits yet', detached: 'Detached HEAD', select: 'Select a file to view its diff.',
+        staged: 'Changes in the next record', unstaged: 'Saved, not yet recorded', untracked: 'New files never recorded', commit: 'Changes in this record',
+        history: 'Records (commits)', worktree: 'Saved files', clean: 'No saved changes in the selected folder.',
+        branches: 'Local branches', unborn: 'No records yet', detached: 'Detached HEAD', select: 'Select a file to view its diff.',
         binary: 'Binary asset', large: 'Text preview exceeds its display limit.', bytes: 'bytes',
         mode: 'Git file mode', permissions: 'Working-tree executable permission changes are unavailable in the browser.',
         unchanged: 'The text is unchanged.', loading: 'Reading repository…',
@@ -17,16 +17,20 @@ export const messages = {
         changed: 'Files or Git state changed while reading. Refresh to read the current state.',
         outdated: 'The repository changed outside the Editor. Refresh to read the current state.',
         unsupported: 'This repository contains an entry the browser cannot represent.',
-        pullUnsafe: 'Stop the project and clear unsaved or local Git changes before pulling.',
-        diverged: 'Pull requires a fast-forward. Your local branch and files are intact.',
+        pullUnsafe: 'Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).',
+        diverged: 'This branch and GitHub\'s have both gained records, so they cannot be combined here (pull only fast-forwards). Your branch and files are unchanged.',
         session: 'Reconnect GitHub for this repository and requested permission.',
-        pushUnknown: 'The push result is unknown. Fetch and check the remote branch before retrying.',
-        pushRefresh: 'The push succeeded. Fetch to refresh the local tracking branch.',
-        rollbackFailed: 'Git could not restore all local changes. Check the working tree and Git status.',
-        remoteFailed: 'The Git operation failed. Check the selected connection and retry.',
-        remoteDone: 'Git operation completed.',
-        pulledProject: 'Pull completed. Use Reload Project to open the updated files.',
-        confirmPush: 'Push the current branch to its GitHub origin?',
+        pushUnknown: 'It is unknown whether GitHub received the records. Check GitHub (fetch) before sending again.',
+        pushRefresh: 'GitHub received the records. Check GitHub (fetch) to update the status.',
+        rollbackFailed: 'Some local changes could not be restored. Check the files and the Git details.',
+        remoteFailed: 'Could not complete the GitHub operation. Check the connection and try again.',
+        remoteDone: 'The GitHub operation finished.',
+        pulledProject: 'Got the changes from GitHub. Use Reload Project to open the updated files.',
+        confirmPush: 'Send the records on this branch to GitHub (push)?',
+        details: 'Git details', branch: 'Branch', head: 'HEAD', groups: 'Git groups', added: 'Added', modified: 'Changed', deleted: 'Deleted',
+        gitStaged: 'Staged', gitUnstaged: 'Unstaged', gitUntracked: 'Untracked',
+        upstreamSame: 'Same as GitHub', upstreamAhead: 'Ahead of GitHub', upstreamBehind: 'Behind GitHub', upstreamDiverged: 'Diverged from GitHub',
+        upstreamUnknown: 'Not checked with GitHub yet', records: 'records', checkedAt: 'as of the last check',
         failed: 'Could not read the repository. Check folder access and refresh.'
     },
     ja: {
@@ -35,11 +39,11 @@ export const messages = {
         empty: '既存の Git リポジトリを選び、ファイルの状態と履歴を確認できます。',
         repository: 'リポジトリ', project: '作品フォルダ', none: '作品は未選択', root: 'リポジトリルート',
         open: 'この作品を開く', reload: '作品を再読込', up: '上のフォルダ', browse: 'リポジトリ内の作品を選択',
-        replace: '未保存の変更を破棄して、別の作品を開きますか？',
-        dirty: 'Editor に未保存の変更があります。', saved: 'Editor に未保存の変更はありません。',
-        staged: 'ステージ済み', unstaged: '未ステージ', untracked: '未追跡', commit: 'コミットの変更',
-        history: '履歴', worktree: '作業ツリー', clean: '対象フォルダに変更はありません。',
-        branches: 'ローカルブランチ', unborn: 'コミットはまだありません', detached: 'ブランチ未選択の HEAD', select: 'ファイルを選ぶと差分を表示します。',
+        replace: '保存していない編集を破棄して、別の作品を開きますか？',
+        dirty: 'Editor に保存していない編集があります。', saved: 'Editor に保存していない編集はありません。',
+        staged: '次の記録に入る変更', unstaged: '保存したが、まだ記録していない変更', untracked: 'まだ記録したことのない新しいファイル', commit: 'この記録の変更',
+        history: '記録（コミット）の履歴', worktree: '保存したファイル', clean: '対象フォルダに、保存した変更はありません。',
+        branches: 'ローカルブランチ', unborn: 'まだ記録がありません', detached: 'ブランチ未選択の HEAD', select: 'ファイルを選ぶと差分を表示します。',
         binary: 'バイナリアセット', large: 'テキスト差分の表示上限を超えています。', bytes: 'バイト',
         mode: 'Git のファイルモード', permissions: '作業ツリーの実行権限の変更はブラウザーから確認できません。',
         unchanged: 'テキストに変更はありません。', loading: 'リポジトリを読込中…',
@@ -47,16 +51,20 @@ export const messages = {
         changed: '読込中にファイルまたは Git の状態が変わりました。再取得してください。',
         outdated: 'Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。',
         unsupported: 'ブラウザーで扱えない種類の Git エントリーがあります。',
-        pullUnsafe: 'pull の前に実行を止め、未保存編集とローカルの Git 変更を解消してください。',
-        diverged: 'fast-forward できません。ローカルブランチとファイルは保持されています。',
+        pullUnsafe: 'GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。',
+        diverged: 'このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。',
         session: 'このリポジトリと操作に必要な権限で GitHub に接続してください。',
-        pushUnknown: 'push の結果が不明です。再試行する前に fetch でリモートブランチを確認してください。',
-        pushRefresh: 'push は成功しました。fetch でローカルの追跡ブランチを更新してください。',
-        rollbackFailed: 'Git がローカルの変更をすべて復元できませんでした。作業ツリーと Git の状態を確認してください。',
-        remoteFailed: 'Git 操作に失敗しました。選択中の接続を確認して再試行してください。',
-        remoteDone: 'Git 操作が完了しました。',
-        pulledProject: 'pull が完了しました。「作品を再読込」で更新済みのファイルを開けます。',
-        confirmPush: '現在のブランチを GitHub の origin に push しますか？',
+        pushUnknown: 'GitHub が記録を受け取ったか分かりません。送り直す前に「GitHub と確かめる」を使ってください。',
+        pushRefresh: 'GitHub が記録を受け取りました。「GitHub と確かめる」で状態を更新してください。',
+        rollbackFailed: '一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。',
+        remoteFailed: 'GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。',
+        remoteDone: 'GitHub との操作が終わりました。',
+        pulledProject: 'GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。',
+        confirmPush: 'このブランチの記録を GitHub に送りますか（push）？',
+        details: 'Git の詳細', branch: 'ブランチ', head: 'HEAD', groups: 'Git の区分', added: '追加', modified: '変更', deleted: '削除',
+        gitStaged: 'ステージ済み (staged)', gitUnstaged: '未ステージ (unstaged)', gitUntracked: '未追跡 (untracked)',
+        upstreamSame: 'GitHub と同じ', upstreamAhead: 'GitHub より進んでいる', upstreamBehind: 'GitHub より遅れている', upstreamDiverged: 'GitHub と分かれている',
+        upstreamUnknown: 'まだ GitHub と確かめていない', records: '件', checkedAt: '最後に確かめた時点',
         failed: 'リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。'
     }
 };

package/src/project-change-list.tsx

@@ -15,7 +15,7 @@ const en = {
     files: 'Files and Git groups', before: 'Before', after: 'After', absent: 'Not in this version',
     loading: 'Reading the project changes…', unreadable: 'The project data could not be read, so the changes are listed by file.',
     fileList: 'List by file', property: 'Item', format: 'Format', rate: 'Sample rate', samples: 'Samples', file: 'File name',
-    noImage: 'No image', groups: {staged: 'Staged', unstaged: 'Unstaged', untracked: 'Untracked', commit: 'Commit'} as Record<ChangeGroup, string>
+    noImage: 'No image', groups: {staged: 'in the next record', unstaged: 'not yet recorded', untracked: 'new file', commit: 'in this record'} as Record<ChangeGroup, string>
 };
 const ja: typeof en = {
     title: '作品の要素ごとの変更', stage: 'ステージ', code: count => `コード · ${count} か所`,
@@ -24,7 +24,7 @@ const ja: typeof en = {
     files: 'ファイルと Git の区分', before: '変更前', after: '変更後', absent: 'この版にはありません',
     loading: '作品の変更を読み込み中…', unreadable: '作品データを読み込めないため、ファイル単位で一覧にします。',
     fileList: 'ファイル単位の一覧', property: '項目', format: '形式', rate: 'サンプリング周波数', samples: 'サンプル数', file: 'ファイル名',
-    noImage: '画像なし', groups: {staged: 'ステージ済み', unstaged: '未ステージ', untracked: '未追跡', commit: 'コミット'}
+    noImage: '画像なし', groups: {staged: '次の記録に入る', unstaged: 'まだ記録していない', untracked: '新しいファイル', commit: 'この記録'}
 };
 type Labels = typeof en;
 export const projectChangeLabels = (locale: string): Labels => locale.startsWith('ja') ? ja : en;

package/src/repository.ts

@@ -45,6 +45,21 @@ export interface Snapshot {
     metadata: Metadata;
     /** Size and time fingerprint taken before the read. Compare it with `probe(scope)` to see later changes. */
     probe: string;
+    /**
+     * How the current branch stands against `refs/remotes/origin/<branch>` as of the last fetch, from local refs only.
+     * `unknown` when there is no current branch or no tracking ref yet.
+     */
+    upstream: UpstreamRelation;
+}
+export interface UpstreamRelation {
+    state: 'same' | 'ahead' | 'behind' | 'diverged' | 'unknown';
+    /**
+     * Commits on the local branch that the tracking branch lacks, and the reverse. Zero when unknown. Counting reads at
+     * most `upstreamWalkLimit` (1000) commits; past that, a side that has commits of its own reports exactly that limit,
+     * meaning "this many or more". The state itself comes from the merge base and stays exact.
+     */
+    ahead: number;
+    behind: number;
 }
 export interface FileDiff {
     binary: boolean;
@@ -63,6 +78,9 @@ const textLimit = 1024 * 1024;
 const inScope = (path: string, scope: string) => !scope || path === scope || path.startsWith(scope + '/');
 // Above this many work-tree files, probes only watch Git metadata. Edits then need a manual refresh.
 const probeLimit = 5000;
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+export const upstreamWalkLimit = 1000;
+const trackingRef = (branchRef: string) => 'refs/remotes/origin/' + branchRef.slice('refs/heads/'.length);
 const sameMetadata = (a: Metadata, b: Metadata) => a.size === b.size && [...a].every(([path, bytes]) => sameBytes(bytes, b.get(path) ?? null));
 
 export async function openRepository(root: FileSystemDirectoryHandle) {
@@ -89,7 +107,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         if (text.startsWith('ref: refs/heads/')) {
             const ref = text.slice(5);
             pathParts(ref);
-            paths.push('/.git/' + ref);
+            paths.push('/.git/' + ref, '/.git/' + trackingRef(ref));
         } else if (!/^[0-9a-f]{40}$/.test(text)) throw new GitPanelError('invalid');
         const result: Metadata = new Map();
         for (const path of paths) {
@@ -124,7 +142,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const paths = ['.git/HEAD', '.git/index', '.git/packed-refs', '.git/shallow', '.git/config'];
         if (head.startsWith('ref: refs/heads/')) {
             try {pathParts(head.slice(5));} catch {return 'locked';}
-            paths.push('.git/' + head.slice(5));
+            paths.push('.git/' + head.slice(5), '.git/' + trackingRef(head.slice(5)));
         }
         const lines: string[] = [];
         for (const path of paths) {
@@ -169,6 +187,60 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }) as {path: string; oid: string; mode: number}[];
         return new Map(result.map(({path, oid, mode}) => [path, {oid, mode}]));
     };
+    /**
+     * Compares `refs/heads/<branch>` with `refs/remotes/origin/<branch>` from local refs only. Counts by painting
+     * commits from both tips in committer-time order until every queued commit is reachable from both, like
+     * `git rev-list --left-right --count`, reading at most `upstreamWalkLimit` commits.
+     */
+    const upstreamRelation = async (branch: string | undefined, head: string | null): Promise<UpstreamRelation> => {
+        const unknown: UpstreamRelation = {state: 'unknown', ahead: 0, behind: 0};
+        if (!branch || !head) return unknown;
+        pathParts(trackingRef('refs/heads/' + branch));
+        try {
+            const remote = await git.resolveRef({...options, ref: trackingRef('refs/heads/' + branch)});
+            if (remote === head) return {state: 'same', ahead: 0, behind: 0};
+            const bases = await git.findMergeBase({...options, cache, oids: [head, remote]}) as string[];
+            const hasAhead = !bases.includes(head), hasBehind = !bases.includes(remote);
+            const local = 1, tracking = 2, both = 3;
+            const flags = new Map<string, number>([[head, local], [remote, tracking]]);
+            const time = async (oid: string) => (await git.readCommit({...options, cache, oid})).commit;
+            const queue: {oid: string; time: number; parents: string[]}[] = [];
+            const enqueue = async (oid: string) => {
+                const commit = await time(oid);
+                queue.push({oid, time: commit.committer.timestamp, parents: commit.parent});
+            };
+            await enqueue(head); await enqueue(remote);
+            let read = 2;
+            let complete = true;
+            while (queue.some(item => flags.get(item.oid) !== both)) {
+                if (read >= upstreamWalkLimit) {complete = false; break;}
+                queue.sort((a, b) => b.time - a.time);
+                const item = queue.shift()!;
+                const flag = flags.get(item.oid)!;
+                for (const parent of item.parents) {
+                    const previous = flags.get(parent) ?? 0;
+                    if ((previous | flag) === previous) continue;
+                    flags.set(parent, previous | flag);
+                    if (!queue.some(entry => entry.oid === parent)) {await enqueue(parent); read++;}
+                }
+            }
+            let ahead = 0, behind = 0;
+            for (const flag of flags.values()) {
+                if (flag === local) ahead++;
+                else if (flag === tracking) behind++;
+            }
+            if (!complete) {
+                ahead = hasAhead ? upstreamWalkLimit : 0;
+                behind = hasBehind ? upstreamWalkLimit : 0;
+            }
+            return {state: hasAhead && hasBehind ? 'diverged' : hasAhead ? 'ahead' : hasBehind ? 'behind' : 'same',
+                ahead: hasAhead ? Math.max(ahead, 1) : 0, behind: hasBehind ? Math.max(behind, 1) : 0};
+        } catch (error) {
+            // No tracking ref yet, or history missing from a shallow clone.
+            if (errorCode(error) === 'NotFoundError') return unknown;
+            throw error;
+        }
+    };
     const assertSnapshot = async (snapshot: Snapshot) => {
         if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError('changed');
     };
@@ -189,6 +261,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const commits = head ? (await git.log({...options, cache, ref: head, depth: 50})).map(({oid, commit}) => ({
             oid, message: commit.message, author: commit.author.name, timestamp: commit.author.timestamp
         })) : [];
+        const upstream = await upstreamRelation(branch || undefined, head);
         const matrix = await git.statusMatrix({...options, cache, refresh: false, filepaths: [scope || '.']});
         const staged = await entries(null, scope);
         const committed = await entries(head || emptyTree, scope);
@@ -210,7 +283,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }
         if (!sameMetadata(before, await metadata())) throw new GitPanelError('changed');
         await fs.checkReads();
-        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint};
+        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint, upstream};
     };
     const historyChanges = async (snapshot: Snapshot, oid: string): Promise<FileChange[]> => {
         fs.clearReads();

package/src/style.css

@@ -8,14 +8,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; }
@@ -44,3 +54,4 @@
 .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; }