@rexvane/piweb 0.3.21 → 0.3.22

package/src/components/ContextMeter.tsx

@@ -1,48 +1,23 @@
 "use client";
 
-/**
- * 上下文占用：
- * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与 13 类分段占用条
- * （mac 磁盘存储条式的多色分段，含 Free Space 段）。
- * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
- * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
- * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
- * 冷会话（只浏览历史、agent 没启动）拿不到组装后的 System Prompt 和工具定义：
- * 其余分项照常显示，另给「现在统计」按需启动会话，分项随后经 context_breakdown 事件刷新。
- * 无对话时不渲染（由父组件经 contextVisible 控制）。
- */
+/** 上下文总量是 SDK 估算；API 输入用量与内容字符分类分别展示，不能按比例分摊 token。 */
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@/i18n";
+import { fmtPercent, fmtTokens } from "@/lib/format";
+import { formatCapacity, parseCapacity } from "@/lib/model-draft";
 import { classifyMessageChars } from "@/lib/process-format";
-import type { ContextBreakdown } from "@/lib/types";
-
-function fmtTok(n: number): string {
-	return n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(Math.round(n));
-}
+import type { ContextBreakdown, TrajTokens } from "@/lib/types";
 
-/** 13 类分段的定义（顺序即渲染顺序） */
-interface Segment {
-	key: string;
-	label: string;
-	tokens: number;
-	color: string;
-}
-
-export function ContextMeter({
-	percent,
-	tokens,
-	contextWindow,
-	source,
-}: {
+export function ContextMeter({ percent, tokens, contextWindow, model, source }: {
 	percent: number | null;
 	tokens: number | null;
 	contextWindow: number | null;
-	/** 分段数据源：消息字符统计只在弹窗打开时执行（流式期间消息每 token 都变，不能常驻扫描） */
+	/** 当前会话的模型：有它才能在弹窗里改上下文窗口 */
+	model?: { provider: string; id: string } | null;
 	source?: {
 		systemChars: number;
-		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown }> }[];
+		messages: Array<{ role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: TrajTokens; stopReason?: string }>;
 		breakdown?: ContextBreakdown;
-		/** 冷会话里点「现在统计」：启动会话（prepare），System Prompt 与工具定义才算得出来 */
 		loadFull?: () => Promise<unknown> | unknown;
 	};
 }) {
@@ -52,154 +27,229 @@ export function ContextMeter({
 	const { t } = useI18n();
 	const cold = Boolean(source?.breakdown?.cold);
 
-	// 新分项到了（不再是冷的）就收起「统计中」
-	useEffect(() => {
-		if (!cold) setCounting(false);
-	}, [cold]);
-
+	useEffect(() => { if (!cold) setCounting(false); }, [cold]);
 	useEffect(() => {
 		if (!open) return;
-		const h = (e: MouseEvent) => {
-			if (!ref.current?.contains(e.target as Node)) setOpen(false);
-		};
+		const h = (e: MouseEvent) => { if (!ref.current?.contains(e.target as Node)) setOpen(false); };
 		document.addEventListener("mousedown", h);
 		return () => document.removeEventListener("mousedown", h);
 	}, [open]);
 
-	const used = tokens ?? 0;
-	const window_ = contextWindow ?? 0;
-	const b = source?.breakdown;
+	// 流式期间只在打开弹窗后扫描，分类是实际文本字符数，不是假设的 token 数。
+	const chars = useMemo(() => classifyMessageChars(open ? source?.messages ?? [] : []), [open, source]);
+	const lastUsage = useMemo(() => open ? source?.messages.findLast((m) => m.role === "assistant" && m.stopReason !== "error" && m.stopReason !== "aborted" && m.stopReason !== "pending" &&
+		(m.usage?.input ?? 0) + (m.usage?.cacheRead ?? 0) + (m.usage?.cacheWrite ?? 0) + (m.usage?.output ?? 0) > 0)?.usage : undefined, [open, source]);
+	const measuredInput = lastUsage ? (lastUsage.input ?? 0) + (lastUsage.cacheRead ?? 0) + (lastUsage.cacheWrite ?? 0) : null;
 
-	// 消息分项只在弹窗打开时统计（≈4 字符/token，与 SDK 一致）
-	const messageSegments = useMemo(() => {
-		if (!open) return { user: 0, agentText: 0, agentThinking: 0, agentToolCall: 0, toolOutput: 0 };
-		const chars = classifyMessageChars(source?.messages ?? []);
-		return {
-			user: Math.max(0, Math.round(chars.user / 4)),
-			agentText: Math.max(0, Math.round(chars.agentText / 4)),
-			agentThinking: Math.max(0, Math.round(chars.agentThinking / 4)),
-			agentToolCall: Math.max(0, Math.round(chars.agentToolCall / 4)),
-			toolOutput: Math.max(0, Math.round(chars.toolOutput / 4)),
-		};
-	}, [open, source]);
+	// 刚改过窗口：服务端已落盘，但页面上的 contextWindow 还是改之前的值（冷会话要等下一次快照）。
+	// 在它变之前先显示刚保存的值；contextWindow 一变（快照 / 用量追上来，或别处改了）就以 props 为准。
+	const modelKey = model ? `${model.provider}/${model.id}` : "";
+	const [applied, setApplied] = useState<{ key: string; from: number; value: number } | null>(null);
+	useEffect(() => {
+		if (applied && (applied.key !== modelKey || contextWindow !== applied.from)) setApplied(null);
+	}, [applied, modelKey, contextWindow]);
+	const override = applied && applied.key === modelKey && contextWindow === applied.from ? applied.value : null;
 
-	const p = percent ?? 0;
-	const usageLabel = percent === null ? t.contextUnknown : `${Math.round(p)}% ${t.contextUsed}`;
+	const known = tokens !== null && Number.isFinite(tokens) && tokens >= 0;
+	const used = known ? tokens : 0;
+	const window_ = override ?? contextWindow ?? 0;
+	const recomputed = override !== null && known;
+	const p = recomputed ? used / override * 100 : percent ?? 0;
+	const usageLabel = percent === null && !recomputed ? t.contextUnknown : `${fmtPercent(p)} ${t.contextEstimated}`;
 	const r = 5.5;
-	const c = 2 * Math.PI * r;
-	const shown = Math.max(0, Math.min(100, p));
-
-	const segments: Segment[] = b
-		? [
-				{ key: "systemPrompt", label: t.contextSystemPrompt, tokens: b.systemPrompt, color: "var(--dsw-accent)" },
-				{ key: "systemTools", label: t.contextSystemTools, tokens: b.systemTools, color: "#8B7EC8" },
-				{ key: "customTools", label: t.contextCustomTools, tokens: b.customTools, color: "#B39DDB" },
-				{ key: "memory", label: t.contextMemory, tokens: b.memory, color: "#5FA8D3" },
-				{ key: "skills", label: t.contextSkills, tokens: b.skills, color: "#4FB286" },
-				{ key: "user", label: t.contextUserMessages, tokens: messageSegments.user, color: "var(--dsw-success)" },
-				{ key: "agentText", label: t.contextAgentText, tokens: messageSegments.agentText, color: "#7BC96F" },
-				{ key: "agentThinking", label: t.contextAgentThinking, tokens: messageSegments.agentThinking, color: "#C9A66B" },
-				{ key: "agentToolCall", label: t.contextAgentToolCall, tokens: messageSegments.agentToolCall, color: "#D3A15F" },
-				{ key: "toolOutput", label: t.contextToolOutput, tokens: messageSegments.toolOutput, color: "var(--dsw-warn)" },
-				{ key: "compacted", label: t.contextCompacted, tokens: b.compacted, color: "#A05A78" },
-				{ key: "buffer", label: t.contextAutoCompactBuffer, tokens: b.autoCompactBuffer, color: "var(--dsw-border-l3)" },
-			]
-		: // 服务端分项缺失（旧快照）：退回旧三段口径
-			[
-				{ key: "system", label: t.contextSystem, tokens: Math.max(0, Math.round((source?.systemChars ?? 0) / 4)), color: "var(--dsw-accent)" },
-				{ key: "messages", label: t.contextMessages, tokens: messageSegments.user + messageSegments.agentText + messageSegments.agentThinking, color: "var(--dsw-success)" },
-				{ key: "tools", label: t.contextTools, tokens: Math.max(0, used - Math.max(0, Math.round((source?.systemChars ?? 0) / 4)) - messageSegments.user - messageSegments.agentText - messageSegments.agentThinking), color: "var(--dsw-warn)" },
-			];
-
-	// Free Space：窗口余量（窗口未知则不显示）；分段条不归一化到已用之和
-	const usedSum = segments.reduce((sum, s) => sum + s.tokens, 0);
-	const free = window_ > 0 ? Math.max(0, window_ - usedSum) : 0;
-	const barTotal = window_ > 0 ? window_ : usedSum || 1;
-	const bar = (n: number) => `${(n / barTotal) * 100}%`;
+	const circumference = 2 * Math.PI * r;
+	const reserved = Math.max(0, source?.breakdown?.autoCompactBuffer ?? 0);
+	// 超过窗口时预留不再画到窗口外；未知用量不能将整扇窗口显示为 Free Space。
+	const visibleReserved = known && window_ > 0 ? Math.min(reserved, Math.max(0, window_ - used)) : 0;
+	const free = known && window_ > 0 ? Math.max(0, window_ - used - reserved) : null;
+	const b = source?.breakdown?.characters;
+	const rows = [
+		{ key: "system", label: t.contextSystemPrompt, value: b?.systemPrompt, color: "var(--dsw-accent)" },
+		{ key: "builtin", label: t.contextSystemTools, value: b?.systemTools, color: "#8B7EC8" },
+		{ key: "custom", label: t.contextCustomTools, value: b?.customTools, color: "#B39DDB" },
+		{ key: "memory", label: t.contextMemory, value: b?.memory, color: "#5FA8D3" },
+		{ key: "skills", label: t.contextSkills, value: b?.skills, color: "#4FB286" },
+		{ key: "user", label: t.contextUserMessages, value: chars.user, color: "var(--dsw-success)" },
+		{ key: "text", label: t.contextAgentText, value: chars.agentText, color: "#7BC96F" },
+		{ key: "thinking", label: t.contextAgentThinking, value: chars.agentThinking, color: "#C9A66B" },
+		{ key: "call", label: t.contextAgentToolCall, value: chars.agentToolCall, color: "#D3A15F" },
+		{ key: "output", label: t.contextToolOutput, value: chars.toolOutput, color: "var(--dsw-warn)" },
+		{ key: "compacted", label: t.contextCompacted, value: b?.compacted, color: "#A05A78" },
+	].filter((row) => row.value !== undefined && row.value > 0);
 
 	return (
 		<div ref={ref} className="relative">
-			<button
-				className="icon-btn"
-				style={{ width: 28, height: 28 }}
-				title={usageLabel}
-				onClick={() => setOpen((o) => !o)}
-			>
+			<button className="icon-btn" style={{ width: 28, height: 28 }} title={usageLabel} aria-label={usageLabel} onClick={() => setOpen((o) => !o)}>
 				<svg width="14" height="14" viewBox="0 0 14 14">
 					<circle cx="7" cy="7" r={r} fill="none" stroke="var(--dsw-border-l3)" strokeWidth="2" />
-					<circle
-						cx="7" cy="7" r={r}
-						fill="none"
-						stroke={p != null && p > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"}
-						strokeWidth="2"
-						strokeDasharray={`${(c * shown) / 100} ${c}`}
-						transform="rotate(-90 7 7)"
-						strokeLinecap="round"
-					/>
+					<circle cx="7" cy="7" r={r} fill="none" stroke={p > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"} strokeWidth="2"
+						strokeDasharray={`${circumference * Math.max(0, Math.min(100, p)) / 100} ${circumference}`} transform="rotate(-90 7 7)" strokeLinecap="round" />
 				</svg>
 			</button>
 			{open && (
-				<div
-					className="popover absolute bottom-9 right-0 z-50 w-64 p-4"
-					style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}
-				>
-					<div className="font-medium" style={{ color: "var(--dsw-label-primary)" }}>
-						{usageLabel}
-					</div>
-					<div style={{ color: "var(--dsw-label-tertiary)" }} className="mt-1">
-						{tokens === null ? "—" : `~${fmtTok(used)}`} / {window_ > 0 ? fmtTok(window_) : "—"}
+				<div className="popover absolute bottom-9 right-0 z-50 w-72 p-4" style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}>
+					<div className="font-medium" style={{ color: "var(--dsw-label-primary)" }}>{usageLabel}</div>
+					<div className="mt-1" style={{ color: "var(--dsw-label-tertiary)" }}>
+						{known ? `~${fmtTokens(used)}` : "—"} / {window_ > 0 ? fmtTokens(window_) : "—"} tok
 					</div>
-
-					{/* 分段占用条（mac 磁盘存储条式多色分段，含 Free Space） */}
-					{usedSum > 0 && (
+					{measuredInput !== null && <div className="mt-2 flex items-center justify-between gap-2"><span>{t.contextApiInput}</span><span title={`${measuredInput} tok`}>{fmtTokens(measuredInput)} tok</span></div>}
+					{known && window_ > 0 && (
 						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} aria-hidden>
-							{segments.filter((s) => s.tokens > 0).map((s) => (
-								<span key={s.key} style={{ width: bar(s.tokens), background: s.color }} />
-							))}
-							{free > 0 && <span style={{ width: bar(free), background: "transparent" }} />}
+							<span className="flex-none" style={{ width: `${Math.min(100, used / window_ * 100)}%`, background: "var(--dsw-accent)" }} />
+							{visibleReserved > 0 && <span className="flex-none" style={{ width: `${visibleReserved / window_ * 100}%`, background: "var(--dsw-border-l3)" }} />}
 						</div>
 					)}
 					<div className="mt-2 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
-						{segments.filter((s) => s.tokens > 0).map((s) => (
-							<SegmentRow key={s.key} label={s.label} tokens={s.tokens} color={s.color} />
-						))}
-						{window_ > 0 && <SegmentRow label={t.contextFreeSpace} tokens={free} color="var(--dsw-selector)" />}
+						{reserved > 0 && <DataRow label={t.contextAutoCompactBuffer} value={`${fmtTokens(reserved)} tok`} exact={`${reserved} tok`} color="var(--dsw-border-l3)" />}
+						{window_ > 0 && <DataRow label={t.contextFreeSpace} value={free === null ? "—" : `~${fmtTokens(free)} tok`} color="var(--dsw-selector)" />}
+					</div>
+					<div className="mt-3 font-medium">{t.contextCharacterBreakdown}</div>
+					<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-tertiary)" }}>{t.contextCharacterHint}</div>
+					<div className="mt-2 flex flex-col gap-1" style={{ color: "var(--dsw-label-tertiary)" }}>
+						{rows.map((row) => <DataRow key={row.key} label={row.label} value={`${fmtTokens(row.value!)} ${t.contextChars}`} exact={`${row.value} ${t.contextChars}`} color={row.color} />)}
 					</div>
-					{cold && source?.loadFull ? (
+					{cold && source?.loadFull && (
 						<div className="mt-3 flex items-center justify-between gap-2" style={{ color: "var(--dsw-label-tertiary)" }}>
 							<span className="min-w-0" style={{ fontSize: 11.5 }}>{t.contextColdHint}</span>
-							<button
-								type="button"
-								className="btn-outline flex-none"
-								style={{ height: 24, padding: "0 10px", fontSize: 12 }}
-								disabled={counting}
+							<button type="button" className="btn-outline flex-none" style={{ height: 24, padding: "0 10px", fontSize: 12 }} disabled={counting}
 								onClick={() => {
 									setCounting(true);
-									// 启动失败（例如没配模型）就把按钮还回来；成功时等 context_breakdown 事件把冷标记去掉
 									void Promise.resolve(source.loadFull?.()).then((result) => {
 										if ((result as { success?: boolean } | undefined)?.success === false) setCounting(false);
 									}, () => setCounting(false));
-								}}
-							>
-								{counting ? t.contextCounting : t.contextCountNow}
-							</button>
+								}}>{counting ? t.contextCounting : t.contextCountNow}</button>
 						</div>
-					) : null}
+					)}
+					{model && window_ > 0 && (
+						<WindowEditor key={modelKey} model={model} value={window_} onSaved={(value) => setApplied({ key: modelKey, from: contextWindow ?? 0, value })} />
+					)}
 				</div>
 			)}
 		</div>
 	);
 }
 
-function SegmentRow({ label, tokens, color }: { label: string; tokens: number; color: string }) {
-	if (tokens <= 0) return null;
+async function postModels<T>(body: Record<string, unknown>): Promise<T> {
+	const response = await fetch("/api/models", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+	const payload = (await response.json().catch(() => null)) as { success?: boolean; data?: T; error?: string } | null;
+	if (!response.ok || !payload?.success) throw new Error(payload?.error || `request failed (${response.status})`);
+	return payload.data as T;
+}
+
+/**
+ * 弹窗底部的上下文窗口：平时显示精确值，「修改」后填数字保存。
+ * 不用滑块：模型的真实上限是 128000、200000 这类精确值，拖出来的近似值多一点上游就 400。
+ * 内置目录有原值就并排给出、填大了提醒；改的是该模型的全局配置，这一点写在输入框下面。
+ */
+function WindowEditor({ model, value, onSaved }: { model: { provider: string; id: string }; value: number; onSaved: (value: number) => void }) {
+	const { t } = useI18n();
+	const [editing, setEditing] = useState(false);
+	const [text, setText] = useState("");
+	/** undefined = 还在查（不显示上限提示，免得先闪一句「没有内置值」） */
+	const [builtin, setBuiltin] = useState<number | null | undefined>(undefined);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const infoSeq = useRef(0);
+	const parsed = parseCapacity(text);
+	const target = parsed !== undefined && !Number.isNaN(parsed) ? parsed : null;
+	const valid = target !== null;
+	const over = target !== null && typeof builtin === "number" && target > builtin;
+	const exact = (n: number) => n.toLocaleString("en-US");
+
+	const begin = () => {
+		setEditing(true);
+		setText(formatCapacity(value));
+		setError(null);
+		setBuiltin(undefined);
+		const seq = ++infoSeq.current;
+		void postModels<{ builtin: number | null }>({ action: "contextWindowInfo", providerId: model.provider, modelId: model.id }).then(
+			(info) => { if (seq === infoSeq.current) setBuiltin(info.builtin); },
+			() => { if (seq === infoSeq.current) setBuiltin(null); },
+		);
+	};
+	const cancel = () => {
+		infoSeq.current += 1;
+		setEditing(false);
+	};
+	const save = async () => {
+		if (target === null || saving) return;
+		setSaving(true);
+		setError(null);
+		try {
+			const info = await postModels<{ contextWindow: number }>({ action: "setContextWindow", providerId: model.provider, modelId: model.id, contextWindow: target });
+			onSaved(info.contextWindow);
+			setEditing(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	if (!editing) {
+		return (
+			<div className="hairline-t mt-3 flex items-center justify-between gap-2 pt-3" style={{ color: "var(--dsw-label-tertiary)" }}>
+				<span>{t.contextWindowLabel}</span>
+				<span className="flex items-center gap-2">
+					<span style={{ color: "var(--dsw-label-secondary)", fontFamily: "var(--font-mono)" }}>{exact(value)}</span>
+					<button type="button" className="btn-outline" style={{ height: 22, padding: "0 8px", fontSize: 11.5 }} onClick={begin}>{t.contextWindowEdit}</button>
+				</span>
+			</div>
+		);
+	}
 	return (
-		<div className="flex items-center justify-between gap-2">
-			<span className="flex items-center gap-1.5">
-				<span className="inline-block rounded-full" style={{ width: 7, height: 7, background: color }} />
-				{label}
-			</span>
-			<span>~{fmtTok(tokens)}</span>
+		<div className="hairline-t mt-3 pt-3" style={{ color: "var(--dsw-label-tertiary)" }}>
+			<div>{t.contextWindowLabel}</div>
+			<div className="mt-1.5 flex items-center gap-1.5">
+				<input
+					autoFocus
+					value={text}
+					onChange={(e) => setText(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							void save();
+						} else if (e.key === "Escape") {
+							e.preventDefault();
+							e.stopPropagation();
+							cancel();
+						}
+					}}
+					aria-label={t.contextWindowLabel}
+					aria-invalid={!valid}
+					spellCheck={false}
+					className="min-w-0 flex-1 rounded-md px-2"
+					style={{ height: 26, fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-primary)", background: "var(--dsw-hover)", border: `0.5px solid ${valid ? "var(--dsw-border-l2)" : "var(--dsw-danger)"}` }}
+				/>
+				<button type="button" className="btn-primary-white flex-none" style={{ height: 26, padding: "0 10px", fontSize: 12 }} disabled={!valid || saving} onClick={() => void save()}>
+					{saving ? t.saving : t.save}
+				</button>
+				<button type="button" className="btn-outline flex-none" style={{ height: 26, padding: "0 10px", fontSize: 12 }} disabled={saving} onClick={cancel}>{t.cancel}</button>
+			</div>
+			{typeof builtin === "number" && (
+				<div className="mt-1.5 flex items-center gap-1.5" style={{ fontSize: 11.5 }}>
+					<span>{t.contextWindowBuiltin.replace("{value}", exact(builtin))}</span>
+					{target !== builtin && (
+						<button type="button" className="underline" style={{ color: "var(--dsw-label-secondary)" }} onClick={() => setText(formatCapacity(builtin))}>{t.contextWindowUseBuiltin}</button>
+					)}
+				</div>
+			)}
+			{!valid ? (
+				<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}>{t.contextWindowInvalid}</div>
+			) : over ? (
+				<div className="mt-1" style={{ fontSize: 11.5, color: "var(--dsw-warn)" }}>{t.contextWindowOverBuiltin}</div>
+			) : builtin === null ? (
+				<div className="mt-1" style={{ fontSize: 11.5 }}>{t.contextWindowNoBuiltin}</div>
+			) : null}
+			<div className="mt-1" style={{ fontSize: 11.5 }}>{t.contextWindowScope}</div>
+			{error && <div className="mt-1" role="alert" style={{ fontSize: 11.5, color: "var(--dsw-danger)" }}>{error}</div>}
 		</div>
 	);
 }
+
+function DataRow({ label, value, exact, color }: { label: string; value: string; exact?: string; color: string }) {
+	return <div className="flex items-center justify-between gap-2">
+		<span className="flex items-center gap-1.5"><span className="inline-block rounded-full" style={{ width: 7, height: 7, background: color }} />{label}</span>
+		<span title={exact}>{value}</span>
+	</div>;
+}

package/src/components/GitPanel.tsx

@@ -39,10 +39,19 @@ interface GitInfo {
 	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;
 }
 
@@ -75,6 +84,7 @@ export function GitPanel({
 }) {
 	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("");
@@ -105,6 +115,23 @@ export function GitPanel({
 		}
 	}, [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);
@@ -165,13 +192,31 @@ export function GitPanel({
 	const error = view ? diffError : statusError || info?.statusError || "";
 
 	const parsed = useMemo(() => (diff?.patch ? parseUnifiedDiff(diff.patch) : null), [diff]);
-	const stats = parsed ? diffStats(parsed) : null;
+	// 新服务端给完整 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
@@ -247,6 +292,39 @@ export function GitPanel({
 				)}
 				{!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
@@ -280,45 +358,37 @@ export function GitPanel({
 						{error ? null : info.files.length === 0 ? (
 							<div style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.gitNoChanges}</div>
 						) : (
-							[
-								{ label: t.gitConflict, list: conflicts, mode: "worktree" as const },
-								{ label: t.gitStaged, list: staged, mode: "staged" as const },
-								{ label: t.gitUnstaged, list: unstaged, mode: "worktree" as const },
-								{ label: t.gitUntracked, list: untracked, mode: "untracked" as const },
-							].map(
-								(group) =>
-									group.list.length > 0 && (
-										<div key={group.label}>
-											<div className="mb-1 flex items-center gap-2" style={{ fontSize: 11.5, color: group.mode === "worktree" && group.label === t.gitConflict ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
-												<span style={{ fontWeight: 600 }}>{group.label}</span>
-												<span>{group.list.length}</span>
-											</div>
-											<div className="flex flex-col">
-												{group.list.map((f) => (
-													<button
-														key={`${group.label}:${f.path}`}
-														type="button"
-														className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors"
-														title={f.path}
-														onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-														onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-														onClick={() => openFile(f, group.mode, group.mode === "staged" ? t.gitStagedDiff : group.mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
-													>
-														<span
-															className="flex-none rounded px-1 text-center"
-															style={{ minWidth: 16, fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: KIND_COLOR[f.kind], background: "var(--dsw-hover)" }}
-														>
-															{f.kind === "untracked" ? "?" : f.kind === "conflict" ? "!" : group.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>
-									),
-							)
+							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">
+										{area.entries.map(({ file: f, mode }) => (
+											<button
+												key={`${area.key}:${f.path}`}
+												type="button"
+												className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors"
+												title={f.path}
+												onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
+												onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+												onClick={() => openFile(f, mode, mode === "staged" ? t.gitStagedDiff : mode === "untracked" ? t.gitUntracked : t.gitWorktreeDiff)}
+											>
+												<span
+													className="flex-none rounded px-1 text-center"
+													style={{ minWidth: 16, fontSize: 10.5, fontFamily: "var(--font-mono)", fontWeight: 600, color: KIND_COLOR[f.kind], background: "var(--dsw-hover)" }}
+												>
+													{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>
+							))
 						)}
 
 						{/* 最近提交 */}