@rexvane/piweb 0.3.25 → 0.3.26

package/src/components/GitPanel.tsx

@@ -1,449 +1,449 @@
-"use client";
-
-/**
- * Git 面板（详情栏）：分支 / 上游 / ahead-behind、按状态分组的变更文件、最近提交；
- * 点文件看差异（暂存 / 工作区 / 未跟踪整文件），点提交看该次提交的内容。
- * 只读——提交、推送走对话让 pi 做（「让 pi 提交」会把请求填进输入框）。
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { DiffView, diffStats, parseUnifiedDiff } from "@/components/DiffView";
-import { languageForPath } from "@/lib/highlight";
-import { IconChevronLeft14, IconCloseOutline14, IconFileOutline16, IconGitOutline16, IconRefreshOutline14 } from "@/components/icons";
-import { useI18n } from "@/i18n";
-
-interface GitFileEntry {
-	path: string;
-	indexStatus: string;
-	workStatus: string;
-	kind: "modified" | "added" | "deleted" | "renamed" | "untracked" | "conflict";
-}
-
-interface GitCommit {
-	hash: string;
-	subject: string;
-	author: string;
-	relative: string;
-}
-
-interface GitInfo {
-	available: boolean;
-	isRepo: boolean;
-	root: string | null;
-	branch: string | null;
-	upstream: string | null;
-	ahead: number;
-	behind: number;
-	detached: boolean;
-	files: GitFileEntry[];
-	commits: GitCommit[];
-	statusError?: string;
-}
-
-interface GithubIdentity {
-	login: string;
-	name?: string;
-	avatar?: string;
-	url?: string;
-	repo?: string;
-}
-
-interface DiffResult {
-	patch: string;
-	truncated: boolean;
-	binary: boolean;
-	stats?: { add: number; del: number };
-	title?: string;
-}
-
-type View = { kind: "file"; path: string; mode: "staged" | "worktree" | "untracked"; label: string } | { kind: "commit"; hash: string };
-
-const KIND_COLOR: Record<GitFileEntry["kind"], string> = {
-	modified: "var(--dsw-warn)",
-	added: "var(--dsw-success)",
-	deleted: "var(--dsw-danger)",
-	renamed: "var(--dsw-accent)",
-	untracked: "var(--dsw-label-caption)",
-	conflict: "var(--dsw-danger)",
-};
-
-export function GitPanel({
-	cwd,
-	onClose,
-	refreshKey = 0,
-	onAskCommit,
-	onOpenFile,
-}: {
-	cwd: string;
-	onClose: () => void;
-	/** 外部触发刷新（回合结束 / pi 改了文件） */
-	refreshKey?: number;
-	/** 把「请提交当前变更」填进输入框 */
-	onAskCommit?: () => void;
-	/** 在本机编辑器打开（相对仓库根的路径） */
-	onOpenFile?: (absPath: string) => void;
-}) {
-	const { t } = useI18n();
-	const [info, setInfo] = useState<GitInfo | null>(null);
-	const [identity, setIdentity] = useState<GithubIdentity | null>(null);
-	const [loading, setLoading] = useState(false);
-	const [statusError, setStatusError] = useState("");
-	const [diffError, setDiffError] = useState("");
-	const [view, setView] = useState<View | null>(null);
-	const [diff, setDiff] = useState<DiffResult | null>(null);
-	const [diffLoading, setDiffLoading] = useState(false);
-	const statusRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
-	const diffRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
-
-	const load = useCallback(async () => {
-		statusRequest.current.controller?.abort();
-		const controller = new AbortController();
-		const version = ++statusRequest.current.version;
-		statusRequest.current.controller = controller;
-		const isCurrent = () => !controller.signal.aborted && statusRequest.current.version === version;
-		if (!cwd) return;
-		setLoading(true);
-		setStatusError("");
-		try {
-			const r = await fetch(`/api/git?cwd=${encodeURIComponent(cwd)}`, { signal: controller.signal });
-			const j = await r.json();
-			if (!r.ok || !j.success) throw new Error(j.error || "failed to load git status");
-			if (isCurrent()) setInfo(j.data as GitInfo);
-		} catch (e) {
-			if (isCurrent()) setStatusError(e instanceof Error ? e.message : "failed to load git status");
-		} finally {
-			if (isCurrent()) setLoading(false);
-		}
-	}, [cwd]);
-
-	// GitHub 身份单独拉：要走网络（gh / 头像），不能拖慢上面那条纯本地的状态读取
-	useEffect(() => {
-		setIdentity(null);
-		if (!cwd) return;
-		const controller = new AbortController();
-		void (async () => {
-			try {
-				const r = await fetch(`/api/github?cwd=${encodeURIComponent(cwd)}`, { signal: controller.signal });
-				const j = await r.json();
-				if (j?.success && j.data?.identity) setIdentity(j.data.identity as GithubIdentity);
-			} catch {
-				/* 取不到就只显示分支，不报错 */
-			}
-		})();
-		return () => controller.abort();
-	}, [cwd, refreshKey]);
-
-	useEffect(() => {
-		setInfo(null);
-		setView(null);
-		setDiff(null);
-		setDiffError("");
-		setStatusError("");
-		setLoading(false);
-		return () => {
-			statusRequest.current.controller?.abort();
-			statusRequest.current.version += 1;
-			diffRequest.current.controller?.abort();
-			diffRequest.current.version += 1;
-		};
-	}, [cwd]);
-	useEffect(() => { void load(); }, [load, refreshKey]);
-
-	const loadDiff = useCallback(async (target: View) => {
-		diffRequest.current.controller?.abort();
-		const controller = new AbortController();
-		const version = ++diffRequest.current.version;
-		diffRequest.current.controller = controller;
-		const isCurrent = () => !controller.signal.aborted && diffRequest.current.version === version;
-		setDiffLoading(true);
-		setDiff(null);
-		setDiffError("");
-		try {
-			const url = target.kind === "file"
-				? `/api/git?cwd=${encodeURIComponent(cwd)}&diff=${encodeURIComponent(target.path)}&mode=${target.mode}`
-				: `/api/git?cwd=${encodeURIComponent(cwd)}&show=${encodeURIComponent(target.hash)}`;
-			const r = await fetch(url, { signal: controller.signal });
-			const j = await r.json();
-			if (!r.ok || !j.success) throw new Error(j.error || "failed to load diff");
-			if (isCurrent()) setDiff(j.data as DiffResult);
-		} catch (e) {
-			if (isCurrent()) setDiffError(e instanceof Error ? e.message : "failed to load diff");
-		} finally {
-			if (isCurrent()) setDiffLoading(false);
-		}
-	}, [cwd]);
-
-	useEffect(() => {
-		setDiff(null);
-		setDiffError("");
-		setDiffLoading(false);
-		if (view) void loadDiff(view);
-		return () => {
-			diffRequest.current.controller?.abort();
-			diffRequest.current.version += 1;
-		};
-	}, [view, loadDiff, refreshKey]);
-	const changeView = (next: View | null) => {
-		diffRequest.current.controller?.abort();
-		diffRequest.current.version += 1;
-		setDiff(null);
-		setDiffError("");
-		setView(next);
-	};
-	const error = view ? diffError : statusError || info?.statusError || "";
-
-	const parsed = useMemo(() => (diff?.patch ? parseUnifiedDiff(diff.patch) : null), [diff]);
-	// 新服务端给完整 Git 统计；旧服务端只在 patch 完整时才允许本地计数。
-	const stats = diff?.binary ? null : diff?.stats ?? (parsed && !diff?.truncated ? diffStats(parsed) : null);
-
-	const conflicts = info?.files.filter((f) => f.kind === "conflict") ?? [];
-	const staged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.indexStatus !== " ") ?? [];
-	const unstaged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.workStatus !== " ") ?? [];
-	const untracked = info?.files.filter((f) => f.kind === "untracked") ?? [];
-
-	/**
-	 * 按 Git 的三个区呈现（分支 / 上游那些是「版本库」侧，在别的行）：
-	 * - 暂存区：`git add` 过的，下次 commit 会带上；
-	 * - 工作区：改了还没 add 的 + 未跟踪的新文件（都属于「还没进暂存区」）；
-	 * - 冲突单独置顶（不先解决，提交走不下去）。
-	 * 未跟踪文件要整份当新增行看，模式逐文件给，不能按组统一。
-	 */
-	const areas: Array<{ key: string; label: string; entries: Array<{ file: GitFileEntry; mode: "staged" | "worktree" | "untracked" }>; danger?: boolean }> = [
-		{ key: "conflict", label: t.gitConflict, entries: conflicts.map((file) => ({ file, mode: "worktree" as const })), danger: true },
-		{ key: "staged", label: t.gitStagingArea, entries: staged.map((file) => ({ file, mode: "staged" as const })) },
-		{
-			key: "worktree",
-			label: t.gitWorkingTree,
-			entries: [...unstaged.map((file) => ({ file, mode: "worktree" as const })), ...untracked.map((file) => ({ file, mode: "untracked" as const }))],
-		},
-	].filter((area) => area.entries.length > 0);
-
-	const openFile = (f: GitFileEntry, mode: "staged" | "worktree" | "untracked", label: string) => changeView({ kind: "file", path: f.path, mode, label });
-
-	const headerTitle = view
-		? view.kind === "file"
-			? view.path.split("/").pop() ?? view.path
-			: diff?.title?.split("\n")[0] ?? view.hash
-		: t.gitPanel;
-
-	return (
-		<div className="flex h-full min-h-0 flex-col p-4">
-			<div className="mb-3 flex items-center gap-2">
-				{view ? (
-					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.gitBack} onClick={() => changeView(null)}>
-						<IconChevronLeft14 size={13} />
-					</button>
-				) : (
-					<IconGitOutline16 size={15} style={{ flex: "none" }} />
-				)}
-				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }} title={view?.kind === "file" ? view.path : undefined}>
-					{headerTitle}
-				</span>
-				{view?.kind === "file" && onOpenFile && info?.root && (
-					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.fileOpenEditor} onClick={() => onOpenFile(`${info.root}/${view.path}`)}>
-						<IconFileOutline16 size={13} />
-					</button>
-				)}
-				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.panelRefresh} onClick={() => (view ? void loadDiff(view) : void load())}>
-					<IconRefreshOutline14 size={13} />
-				</button>
-				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} onClick={onClose}>
-					<IconCloseOutline14 size={13} />
-				</button>
-			</div>
-
-			{error && (
-				<div className="mb-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-danger)", color: "white" }} role="alert">
-					{!view && <div>{t.gitStatusUnknown}</div>}
-					{error}
-				</div>
-			)}
-
-			<div className="min-h-0 flex-1 overflow-y-auto">
-				{/* ---------- 差异视图 ---------- */}
-				{view && (
-					<div>
-						<div className="mb-2 flex flex-wrap items-center gap-2" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
-							{view.kind === "file" ? <span>{view.label}</span> : diff?.title?.split("\n")[1] ? <span>{diff.title.split("\n")[1]}</span> : null}
-							{stats && (
-								<span style={{ fontFamily: "var(--font-mono)" }}>
-									<span style={{ color: "var(--dsw-success)" }}>+{stats.add}</span> <span style={{ color: "var(--dsw-danger)" }}>−{stats.del}</span>
-								</span>
-							)}
-							{diff?.truncated && <span style={{ color: "var(--dsw-warn)" }}>{t.gitDiffTruncated}</span>}
-						</div>
-						{diffLoading && !diff && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
-						{diff?.binary && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitBinary}</div>}
-						{diff && !diff.binary && !parsed && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitDiffEmpty}</div>}
-						{parsed && (
-							<div className="overflow-x-auto rounded-xl px-2 py-1.5" style={{ background: "var(--dsw-hover)" }}>
-								<DiffView lines={parsed} language={view?.kind === "file" ? languageForPath(view.path) : undefined} />
-							</div>
-						)}
-					</div>
-				)}
-
-				{/* ---------- 状态列表 ---------- */}
-				{!view && loading && !info && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
-				{!view && !loading && info && !info.available && (
-					<div style={{ fontSize: 12.5, color: "var(--dsw-danger)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitUnavailable}</div>
-				)}
-				{!view && !loading && info && info.available && !info.isRepo && (
-					<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitNotRepo}</div>
-				)}
-				{!view && info?.isRepo && (
-					<div className="flex flex-col gap-4">
-						{/* GitHub 身份：头像 + 账号（取不到就整行不出现） */}
-						{identity && (
-							<div className="flex items-center gap-2">
-								{identity.avatar ? (
-									// eslint-disable-next-line @next/next/no-img-element
-									<img src={identity.avatar} alt="" width={22} height={22} className="flex-none rounded-full" />
-								) : (
-									<span
-										className="grid flex-none place-items-center rounded-full"
-										style={{ width: 22, height: 22, background: "var(--dsw-selector)", fontSize: 11, fontWeight: 600, color: "var(--dsw-label-secondary)" }}
-										aria-hidden
-									>
-										{identity.login.slice(0, 1).toUpperCase()}
-									</span>
-								)}
-								<a
-									href={identity.url ?? `https://github.com/${identity.login}`}
-									target="_blank"
-									rel="noreferrer"
-									className="min-w-0 truncate"
-									style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)", textDecoration: "none" }}
-									title={identity.name ? `${identity.name} (@${identity.login})` : `@${identity.login}`}
-								>
-									@{identity.login}
-								</a>
-								{identity.repo && (
-									<span className="min-w-0 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={identity.repo}>
-										· {identity.repo}
-									</span>
-								)}
-							</div>
-						)}
-
-						{/* 分支行 */}
-						<div className="flex flex-wrap items-center gap-2" style={{ fontSize: 12.5 }}>
-							<span
-								className="flex items-center gap-1.5 rounded-full px-2.5 py-1"
-								style={{ background: "var(--dsw-accent-soft)", color: "var(--dsw-accent)", fontWeight: 600, border: "1px solid var(--dsw-border-l2)" }}
-							>
-								<IconGitOutline16 size={12} />
-								{info.detached ? t.gitDetached : info.branch ?? "—"}
-							</span>
-							{info.ahead > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↑ {t.gitAhead.replace("{n}", String(info.ahead))}</span>}
-							{info.behind > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↓ {t.gitBehind.replace("{n}", String(info.behind))}</span>}
-							<span className="min-w-0 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={info.upstream ?? undefined}>
-								{info.upstream ? t.gitUpstream.replace("{name}", info.upstream) : info.detached ? "" : t.gitNoUpstream}
-							</span>
-						</div>
-
-						{/* 让 pi 提交 */}
-						{!error && info.files.length > 0 && onAskCommit && (
-							<button
-								type="button"
-								className="btn-outline self-start"
-								style={{ height: 28, padding: "0 12px", fontSize: 12 }}
-								onClick={onAskCommit}
-								title={t.gitAskCommitPrompt}
-							>
-								{t.gitAskCommit}
-							</button>
-						)}
-
-						{/* 变更文件 */}
-						{error ? null : info.files.length === 0 ? (
-							<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.gitNoChanges}</div>
-						) : (
-							areas.map((area) => (
-								<div key={area.key}>
-									<div className="mb-1 flex items-center gap-2" style={{ fontSize: 11.5, color: area.danger ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
-										<span style={{ fontWeight: 600 }}>{area.label}</span>
-										<span>{area.entries.length}</span>
-									</div>
-									<div className="flex flex-col gap-0.5">
-										{area.entries.map(({ file: f, mode }) => (
-											<button
-												key={`${area.key}:${f.path}`}
-												type="button"
-												className="flex w-full items-center gap-2 rounded-xl px-2.5 py-1.5 text-left transition-all"
-												title={f.path}
-												style={{ transition: "all 0.18s var(--isx-ease)" }}
-												onMouseEnter={(e) => {
-													e.currentTarget.style.background = "var(--dsw-hover)";
-													e.currentTarget.style.transform = "translateX(2px)";
-												}}
-												onMouseLeave={(e) => {
-													e.currentTarget.style.background = "transparent";
-													e.currentTarget.style.transform = "none";
-												}}
-												onClick={() => openFile(f, mode, mode === "staged" ? t.gitStagedDiff : mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
-											>
-												<span
-													className="flex-none rounded-full px-1.5 text-center"
-													style={{
-														minWidth: 18,
-														fontSize: 10,
-														fontFamily: "var(--font-mono)",
-														fontWeight: 700,
-														color: KIND_COLOR[f.kind],
-														background: "var(--dsw-hover)",
-														border: "1px solid currentColor",
-													}}
-												>
-													{f.kind === "untracked" ? "?" : f.kind === "conflict" ? "!" : mode === "staged" ? f.indexStatus : f.workStatus !== " " ? f.workStatus : f.indexStatus}
-												</span>
-												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--dsw-label-secondary)" }}>
-													{f.path}
-												</span>
-											</button>
-										))}
-									</div>
-								</div>
-							))
-						)}
-
-						{/* 最近提交 */}
-						<div className="hairline-t pt-3">
-							<div className="mb-1" style={{ fontSize: 11.5, fontWeight: 600, color: "var(--dsw-label-caption)" }}>{t.gitRecentCommits}</div>
-							{info.commits.length === 0 ? (
-								<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitNoCommits}</div>
-							) : (
-								<div className="flex flex-col gap-0.5">
-									{info.commits.map((c) => (
-										<button
-											key={c.hash}
-											type="button"
-											className="flex w-full flex-col items-stretch rounded-xl px-2.5 py-1.5 text-left transition-all"
-											style={{ transition: "all 0.18s var(--isx-ease)" }}
-											onMouseEnter={(e) => {
-												e.currentTarget.style.background = "var(--dsw-hover)";
-												e.currentTarget.style.transform = "translateX(2px)";
-											}}
-											onMouseLeave={(e) => {
-												e.currentTarget.style.background = "transparent";
-												e.currentTarget.style.transform = "none";
-											}}
-											onClick={() => changeView({ kind: "commit", hash: c.hash })}
-										>
-											<span className="flex items-baseline gap-2">
-												<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--dsw-accent)", background: "var(--dsw-accent-soft)" }}>{c.hash}</span>
-												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, color: "var(--dsw-label-secondary)" }} title={c.subject}>{c.subject}</span>
-											</span>
-											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", paddingLeft: 0, marginTop: 2 }}>
-												{c.author} · {c.relative}
-											</span>
-										</button>
-									))}
-								</div>
-							)}
-						</div>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
+"use client";
+
+/**
+ * Git 面板（详情栏）：分支 / 上游 / ahead-behind、按状态分组的变更文件、最近提交；
+ * 点文件看差异（暂存 / 工作区 / 未跟踪整文件），点提交看该次提交的内容。
+ * 只读——提交、推送走对话让 pi 做（「让 pi 提交」会把请求填进输入框）。
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DiffView, diffStats, parseUnifiedDiff } from "@/components/DiffView";
+import { languageForPath } from "@/lib/highlight";
+import { IconChevronLeft14, IconCloseOutline14, IconFileOutline16, IconGitOutline16, IconRefreshOutline14 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+
+interface GitFileEntry {
+	path: string;
+	indexStatus: string;
+	workStatus: string;
+	kind: "modified" | "added" | "deleted" | "renamed" | "untracked" | "conflict";
+}
+
+interface GitCommit {
+	hash: string;
+	subject: string;
+	author: string;
+	relative: string;
+}
+
+interface GitInfo {
+	available: boolean;
+	isRepo: boolean;
+	root: string | null;
+	branch: string | null;
+	upstream: string | null;
+	ahead: number;
+	behind: number;
+	detached: boolean;
+	files: GitFileEntry[];
+	commits: GitCommit[];
+	statusError?: string;
+}
+
+interface GithubIdentity {
+	login: string;
+	name?: string;
+	avatar?: string;
+	url?: string;
+	repo?: string;
+}
+
+interface DiffResult {
+	patch: string;
+	truncated: boolean;
+	binary: boolean;
+	stats?: { add: number; del: number };
+	title?: string;
+}
+
+type View = { kind: "file"; path: string; mode: "staged" | "worktree" | "untracked"; label: string } | { kind: "commit"; hash: string };
+
+const KIND_COLOR: Record<GitFileEntry["kind"], string> = {
+	modified: "var(--dsw-warn)",
+	added: "var(--dsw-success)",
+	deleted: "var(--dsw-danger)",
+	renamed: "var(--dsw-accent)",
+	untracked: "var(--dsw-label-caption)",
+	conflict: "var(--dsw-danger)",
+};
+
+export function GitPanel({
+	cwd,
+	onClose,
+	refreshKey = 0,
+	onAskCommit,
+	onOpenFile,
+}: {
+	cwd: string;
+	onClose: () => void;
+	/** 外部触发刷新（回合结束 / pi 改了文件） */
+	refreshKey?: number;
+	/** 把「请提交当前变更」填进输入框 */
+	onAskCommit?: () => void;
+	/** 在本机编辑器打开（相对仓库根的路径） */
+	onOpenFile?: (absPath: string) => void;
+}) {
+	const { t } = useI18n();
+	const [info, setInfo] = useState<GitInfo | null>(null);
+	const [identity, setIdentity] = useState<GithubIdentity | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [statusError, setStatusError] = useState("");
+	const [diffError, setDiffError] = useState("");
+	const [view, setView] = useState<View | null>(null);
+	const [diff, setDiff] = useState<DiffResult | null>(null);
+	const [diffLoading, setDiffLoading] = useState(false);
+	const statusRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
+	const diffRequest = useRef<{ version: number; controller?: AbortController }>({ version: 0 });
+
+	const load = useCallback(async () => {
+		statusRequest.current.controller?.abort();
+		const controller = new AbortController();
+		const version = ++statusRequest.current.version;
+		statusRequest.current.controller = controller;
+		const isCurrent = () => !controller.signal.aborted && statusRequest.current.version === version;
+		if (!cwd) return;
+		setLoading(true);
+		setStatusError("");
+		try {
+			const r = await fetch(`/api/git?cwd=${encodeURIComponent(cwd)}`, { signal: controller.signal });
+			const j = await r.json();
+			if (!r.ok || !j.success) throw new Error(j.error || "failed to load git status");
+			if (isCurrent()) setInfo(j.data as GitInfo);
+		} catch (e) {
+			if (isCurrent()) setStatusError(e instanceof Error ? e.message : "failed to load git status");
+		} finally {
+			if (isCurrent()) setLoading(false);
+		}
+	}, [cwd]);
+
+	// GitHub 身份单独拉：要走网络（gh / 头像），不能拖慢上面那条纯本地的状态读取
+	useEffect(() => {
+		setIdentity(null);
+		if (!cwd) return;
+		const controller = new AbortController();
+		void (async () => {
+			try {
+				const r = await fetch(`/api/github?cwd=${encodeURIComponent(cwd)}`, { signal: controller.signal });
+				const j = await r.json();
+				if (j?.success && j.data?.identity) setIdentity(j.data.identity as GithubIdentity);
+			} catch {
+				/* 取不到就只显示分支，不报错 */
+			}
+		})();
+		return () => controller.abort();
+	}, [cwd, refreshKey]);
+
+	useEffect(() => {
+		setInfo(null);
+		setView(null);
+		setDiff(null);
+		setDiffError("");
+		setStatusError("");
+		setLoading(false);
+		return () => {
+			statusRequest.current.controller?.abort();
+			statusRequest.current.version += 1;
+			diffRequest.current.controller?.abort();
+			diffRequest.current.version += 1;
+		};
+	}, [cwd]);
+	useEffect(() => { void load(); }, [load, refreshKey]);
+
+	const loadDiff = useCallback(async (target: View) => {
+		diffRequest.current.controller?.abort();
+		const controller = new AbortController();
+		const version = ++diffRequest.current.version;
+		diffRequest.current.controller = controller;
+		const isCurrent = () => !controller.signal.aborted && diffRequest.current.version === version;
+		setDiffLoading(true);
+		setDiff(null);
+		setDiffError("");
+		try {
+			const url = target.kind === "file"
+				? `/api/git?cwd=${encodeURIComponent(cwd)}&diff=${encodeURIComponent(target.path)}&mode=${target.mode}`
+				: `/api/git?cwd=${encodeURIComponent(cwd)}&show=${encodeURIComponent(target.hash)}`;
+			const r = await fetch(url, { signal: controller.signal });
+			const j = await r.json();
+			if (!r.ok || !j.success) throw new Error(j.error || "failed to load diff");
+			if (isCurrent()) setDiff(j.data as DiffResult);
+		} catch (e) {
+			if (isCurrent()) setDiffError(e instanceof Error ? e.message : "failed to load diff");
+		} finally {
+			if (isCurrent()) setDiffLoading(false);
+		}
+	}, [cwd]);
+
+	useEffect(() => {
+		setDiff(null);
+		setDiffError("");
+		setDiffLoading(false);
+		if (view) void loadDiff(view);
+		return () => {
+			diffRequest.current.controller?.abort();
+			diffRequest.current.version += 1;
+		};
+	}, [view, loadDiff, refreshKey]);
+	const changeView = (next: View | null) => {
+		diffRequest.current.controller?.abort();
+		diffRequest.current.version += 1;
+		setDiff(null);
+		setDiffError("");
+		setView(next);
+	};
+	const error = view ? diffError : statusError || info?.statusError || "";
+
+	const parsed = useMemo(() => (diff?.patch ? parseUnifiedDiff(diff.patch) : null), [diff]);
+	// 新服务端给完整 Git 统计；旧服务端只在 patch 完整时才允许本地计数。
+	const stats = diff?.binary ? null : diff?.stats ?? (parsed && !diff?.truncated ? diffStats(parsed) : null);
+
+	const conflicts = info?.files.filter((f) => f.kind === "conflict") ?? [];
+	const staged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.indexStatus !== " ") ?? [];
+	const unstaged = info?.files.filter((f) => f.kind !== "conflict" && f.kind !== "untracked" && f.workStatus !== " ") ?? [];
+	const untracked = info?.files.filter((f) => f.kind === "untracked") ?? [];
+
+	/**
+	 * 按 Git 的三个区呈现（分支 / 上游那些是「版本库」侧，在别的行）：
+	 * - 暂存区：`git add` 过的，下次 commit 会带上；
+	 * - 工作区：改了还没 add 的 + 未跟踪的新文件（都属于「还没进暂存区」）；
+	 * - 冲突单独置顶（不先解决，提交走不下去）。
+	 * 未跟踪文件要整份当新增行看，模式逐文件给，不能按组统一。
+	 */
+	const areas: Array<{ key: string; label: string; entries: Array<{ file: GitFileEntry; mode: "staged" | "worktree" | "untracked" }>; danger?: boolean }> = [
+		{ key: "conflict", label: t.gitConflict, entries: conflicts.map((file) => ({ file, mode: "worktree" as const })), danger: true },
+		{ key: "staged", label: t.gitStagingArea, entries: staged.map((file) => ({ file, mode: "staged" as const })) },
+		{
+			key: "worktree",
+			label: t.gitWorkingTree,
+			entries: [...unstaged.map((file) => ({ file, mode: "worktree" as const })), ...untracked.map((file) => ({ file, mode: "untracked" as const }))],
+		},
+	].filter((area) => area.entries.length > 0);
+
+	const openFile = (f: GitFileEntry, mode: "staged" | "worktree" | "untracked", label: string) => changeView({ kind: "file", path: f.path, mode, label });
+
+	const headerTitle = view
+		? view.kind === "file"
+			? view.path.split("/").pop() ?? view.path
+			: diff?.title?.split("\n")[0] ?? view.hash
+		: t.gitPanel;
+
+	return (
+		<div className="flex h-full min-h-0 flex-col p-4">
+			<div className="mb-3 flex items-center gap-2">
+				{view ? (
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.gitBack} onClick={() => changeView(null)}>
+						<IconChevronLeft14 size={13} />
+					</button>
+				) : (
+					<IconGitOutline16 size={15} style={{ flex: "none" }} />
+				)}
+				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }} title={view?.kind === "file" ? view.path : undefined}>
+					{headerTitle}
+				</span>
+				{view?.kind === "file" && onOpenFile && info?.root && (
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.fileOpenEditor} onClick={() => onOpenFile(`${info.root}/${view.path}`)}>
+						<IconFileOutline16 size={13} />
+					</button>
+				)}
+				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.panelRefresh} onClick={() => (view ? void loadDiff(view) : void load())}>
+					<IconRefreshOutline14 size={13} />
+				</button>
+				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} onClick={onClose}>
+					<IconCloseOutline14 size={13} />
+				</button>
+			</div>
+
+			{error && (
+				<div className="mb-2 rounded-xl px-3 py-2" style={{ fontSize: 12.5, background: "var(--dsw-danger)", color: "white" }} role="alert">
+					{!view && <div>{t.gitStatusUnknown}</div>}
+					{error}
+				</div>
+			)}
+
+			<div className="min-h-0 flex-1 overflow-y-auto">
+				{/* ---------- 差异视图 ---------- */}
+				{view && (
+					<div>
+						<div className="mb-2 flex flex-wrap items-center gap-2" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+							{view.kind === "file" ? <span>{view.label}</span> : diff?.title?.split("\n")[1] ? <span>{diff.title.split("\n")[1]}</span> : null}
+							{stats && (
+								<span style={{ fontFamily: "var(--font-mono)" }}>
+									<span style={{ color: "var(--dsw-success)" }}>+{stats.add}</span> <span style={{ color: "var(--dsw-danger)" }}>−{stats.del}</span>
+								</span>
+							)}
+							{diff?.truncated && <span style={{ color: "var(--dsw-warn)" }}>{t.gitDiffTruncated}</span>}
+						</div>
+						{diffLoading && !diff && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
+						{diff?.binary && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitBinary}</div>}
+						{diff && !diff.binary && !parsed && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitDiffEmpty}</div>}
+						{parsed && (
+							<div className="overflow-x-auto rounded-xl px-2 py-1.5" style={{ background: "var(--dsw-hover)" }}>
+								<DiffView lines={parsed} language={view?.kind === "file" ? languageForPath(view.path) : undefined} />
+							</div>
+						)}
+					</div>
+				)}
+
+				{/* ---------- 状态列表 ---------- */}
+				{!view && loading && !info && <div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.panelLoading}</div>}
+				{!view && !loading && info && !info.available && (
+					<div style={{ fontSize: 12.5, color: "var(--dsw-danger)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitUnavailable}</div>
+				)}
+				{!view && !loading && info && info.available && !info.isRepo && (
+					<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "8px 2px", lineHeight: 1.6 }}>{t.gitNotRepo}</div>
+				)}
+				{!view && info?.isRepo && (
+					<div className="flex flex-col gap-4">
+						{/* GitHub 身份：头像 + 账号（取不到就整行不出现） */}
+						{identity && (
+							<div className="flex items-center gap-2">
+								{identity.avatar ? (
+									// eslint-disable-next-line @next/next/no-img-element
+									<img src={identity.avatar} alt="" width={22} height={22} className="flex-none rounded-full" />
+								) : (
+									<span
+										className="grid flex-none place-items-center rounded-full"
+										style={{ width: 22, height: 22, background: "var(--dsw-selector)", fontSize: 11, fontWeight: 600, color: "var(--dsw-label-secondary)" }}
+										aria-hidden
+									>
+										{identity.login.slice(0, 1).toUpperCase()}
+									</span>
+								)}
+								<a
+									href={identity.url ?? `https://github.com/${identity.login}`}
+									target="_blank"
+									rel="noreferrer"
+									className="min-w-0 truncate"
+									style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)", textDecoration: "none" }}
+									title={identity.name ? `${identity.name} (@${identity.login})` : `@${identity.login}`}
+								>
+									@{identity.login}
+								</a>
+								{identity.repo && (
+									<span className="min-w-0 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={identity.repo}>
+										· {identity.repo}
+									</span>
+								)}
+							</div>
+						)}
+
+						{/* 分支行 */}
+						<div className="flex flex-wrap items-center gap-2" style={{ fontSize: 12.5 }}>
+							<span
+								className="flex items-center gap-1.5 rounded-full px-2.5 py-1"
+								style={{ background: "var(--dsw-accent-soft)", color: "var(--dsw-accent)", fontWeight: 600, border: "1px solid var(--dsw-border-l2)" }}
+							>
+								<IconGitOutline16 size={12} />
+								{info.detached ? t.gitDetached : info.branch ?? "—"}
+							</span>
+							{info.ahead > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↑ {t.gitAhead.replace("{n}", String(info.ahead))}</span>}
+							{info.behind > 0 && <span style={{ color: "var(--dsw-label-secondary)" }}>↓ {t.gitBehind.replace("{n}", String(info.behind))}</span>}
+							<span className="min-w-0 truncate" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }} title={info.upstream ?? undefined}>
+								{info.upstream ? t.gitUpstream.replace("{name}", info.upstream) : info.detached ? "" : t.gitNoUpstream}
+							</span>
+						</div>
+
+						{/* 让 pi 提交 */}
+						{!error && info.files.length > 0 && onAskCommit && (
+							<button
+								type="button"
+								className="btn-outline self-start"
+								style={{ height: 28, padding: "0 12px", fontSize: 12 }}
+								onClick={onAskCommit}
+								title={t.gitAskCommitPrompt}
+							>
+								{t.gitAskCommit}
+							</button>
+						)}
+
+						{/* 变更文件 */}
+						{error ? null : info.files.length === 0 ? (
+							<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.gitNoChanges}</div>
+						) : (
+							areas.map((area) => (
+								<div key={area.key}>
+									<div className="mb-1 flex items-center gap-2" style={{ fontSize: 11.5, color: area.danger ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
+										<span style={{ fontWeight: 600 }}>{area.label}</span>
+										<span>{area.entries.length}</span>
+									</div>
+									<div className="flex flex-col gap-0.5">
+										{area.entries.map(({ file: f, mode }) => (
+											<button
+												key={`${area.key}:${f.path}`}
+												type="button"
+												className="flex w-full items-center gap-2 rounded-xl px-2.5 py-1.5 text-left transition-all"
+												title={f.path}
+												style={{ transition: "all 0.18s var(--isx-ease)" }}
+												onMouseEnter={(e) => {
+													e.currentTarget.style.background = "var(--dsw-hover)";
+													e.currentTarget.style.transform = "translateX(2px)";
+												}}
+												onMouseLeave={(e) => {
+													e.currentTarget.style.background = "transparent";
+													e.currentTarget.style.transform = "none";
+												}}
+												onClick={() => openFile(f, mode, mode === "staged" ? t.gitStagedDiff : mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
+											>
+												<span
+													className="flex-none rounded-full px-1.5 text-center"
+													style={{
+														minWidth: 18,
+														fontSize: 10,
+														fontFamily: "var(--font-mono)",
+														fontWeight: 700,
+														color: KIND_COLOR[f.kind],
+														background: "var(--dsw-hover)",
+														border: "1px solid currentColor",
+													}}
+												>
+													{f.kind === "untracked" ? "?" : f.kind === "conflict" ? "!" : mode === "staged" ? f.indexStatus : f.workStatus !== " " ? f.workStatus : f.indexStatus}
+												</span>
+												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--dsw-label-secondary)" }}>
+													{f.path}
+												</span>
+											</button>
+										))}
+									</div>
+								</div>
+							))
+						)}
+
+						{/* 最近提交 */}
+						<div className="hairline-t pt-3">
+							<div className="mb-1" style={{ fontSize: 11.5, fontWeight: 600, color: "var(--dsw-label-caption)" }}>{t.gitRecentCommits}</div>
+							{info.commits.length === 0 ? (
+								<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)", padding: "4px 2px" }}>{t.gitNoCommits}</div>
+							) : (
+								<div className="flex flex-col gap-0.5">
+									{info.commits.map((c) => (
+										<button
+											key={c.hash}
+											type="button"
+											className="flex w-full flex-col items-stretch rounded-xl px-2.5 py-1.5 text-left transition-all"
+											style={{ transition: "all 0.18s var(--isx-ease)" }}
+											onMouseEnter={(e) => {
+												e.currentTarget.style.background = "var(--dsw-hover)";
+												e.currentTarget.style.transform = "translateX(2px)";
+											}}
+											onMouseLeave={(e) => {
+												e.currentTarget.style.background = "transparent";
+												e.currentTarget.style.transform = "none";
+											}}
+											onClick={() => changeView({ kind: "commit", hash: c.hash })}
+										>
+											<span className="flex items-baseline gap-2">
+												<span className="flex-none rounded-md px-1.5 py-0.5" style={{ fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--dsw-accent)", background: "var(--dsw-accent-soft)" }}>{c.hash}</span>
+												<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12, color: "var(--dsw-label-secondary)" }} title={c.subject}>{c.subject}</span>
+											</span>
+											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)", paddingLeft: 0, marginTop: 2 }}>
+												{c.author} · {c.relative}
+											</span>
+										</button>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}