@rexvane/piweb 0.3.16 → 0.3.17

package/src/components/ChatWindow.tsx

@@ -22,7 +22,6 @@ import {
 	IconFileOutline16,
 	IconRefreshOutline14,
 	IconSearchOutline16,
-	IconSendArrowUp14,
 	IconTerminalOutline14,
 	IconThinkOutline14,
 	IconWarningOutline16,
@@ -77,13 +76,54 @@ function formatMessageClock(time: number, t: Dict): string {
 	return `${md} ${clock}`;
 }
 
+type MarkdownTextNode = { value?: unknown; children?: MarkdownTextNode[] };
+function markdownNodeText(node: MarkdownTextNode | undefined): string {
+	if (!node) return "";
+	if (typeof node.value === "string") return node.value;
+	return node.children?.map(markdownNodeText).join("") ?? "";
+}
+
+function CopyButton({ text }: { text: string }) {
+	const [copied, setCopied] = useState(false);
+	const [copyFailed, setCopyFailed] = useState(false);
+	const { t } = useI18n();
+	return (
+		<>
+			<button
+				type="button"
+				className="icon-btn"
+				title={copyFailed ? t.copyFailed : t.copy}
+				aria-label={t.copy}
+				onClick={() => {
+					void copyText(text).then((ok) => {
+						setCopied(ok);
+						setCopyFailed(!ok);
+						setTimeout(() => { setCopied(false); setCopyFailed(false); }, 1200);
+					});
+				}}
+			>
+				{copied ? <IconCheckOutline14 size={14} /> : <IconCopyOutline16 size={14} />}
+			</button>
+			{copyFailed && <span role="alert" style={{ fontSize: 11, color: "var(--dsw-danger)" }}>{t.copyFailed}</span>}
+		</>
+	);
+}
+
 const Markdown = memo(function Markdown({ text }: { text: string }) {
 	return (
-		<div className="md select-text">
+		<div className="md">
 			<ReactMarkdown
 				remarkPlugins={[remarkGfm]}
 				rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
-				components={{ a: ({ node: _node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" /> }}
+				components={{
+					a: ({ node: _node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+					pre: ({ node, children, ...props }) => (
+						<div className="md-code-block">
+							<div className="md-code-copy"><CopyButton text={markdownNodeText(node)} /></div>
+							<pre {...props}>{children}</pre>
+						</div>
+					),
+				}}
 			>
 				{text}
 			</ReactMarkdown>
@@ -888,8 +928,16 @@ const FinalAnswer = memo(function FinalAnswer({
 	);
 });
 
+/** 对话里提问下方的「本轮改了 N 个文件」：来自项目生长这一轮的 commit */
+export interface RoundBadge {
+	commit: string;
+	files: number;
+	add: number;
+	del: number;
+}
+
 /** 行级 memo：流式期间只有最后一条消息变化，历史行全部跳过重渲染 */
-const UserMessage = memo(function UserMessage({ message, onEditMessage }: { message: WebMessage; onEditMessage?: (entryId: string, text: string) => void }) {
+const UserMessage = memo(function UserMessage({ message, badge, onShowRound, onEditMessage }: { message: WebMessage; badge?: RoundBadge; onShowRound?: (commit: string) => void; onEditMessage?: (entryId: string, text: string) => void }) {
 	const { t } = useI18n();
 	const text = message.content
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
@@ -898,77 +946,89 @@ const UserMessage = memo(function UserMessage({ message, onEditMessage }: { mess
 	const images = message.content.filter((content) => content.type === "image");
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(text);
-	const [editorWidth, setEditorWidth] = useState(132);
-	const editRef = useRef<HTMLTextAreaElement>(null);
-	const bubbleRef = useRef<HTMLDivElement>(null);
 	const canEdit = Boolean(onEditMessage && message.id && text);
-	useEffect(() => {
-		if (!editing || !editRef.current) return;
-		editRef.current.style.height = "0px";
-		editRef.current.style.height = `${Math.min(320, editRef.current.scrollHeight)}px`;
-	}, [draft, editing]);
-	const imageStrip = images.length > 0 && (
-		<div className="mb-2 flex max-w-[85%] flex-wrap justify-end gap-2">
-			{images.map((image, index) => (
-				<img key={index} src={`data:${image.mimeType};base64,${image.data}`} alt="" className="max-h-72 max-w-full rounded-2xl object-contain" style={{ border: "0.5px solid var(--dsw-border-l2)" }} />
-			))}
-		</div>
-	);
-	function beginEdit() {
-		if (!canEdit) return;
-		setEditorWidth(Math.max(132, Math.ceil(bubbleRef.current?.getBoundingClientRect().width ?? 132)));
-		setDraft(text);
-		setEditing(true);
-	}
 	if (editing) {
 		return (
-			<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user">
-				{imageStrip}
-				<div className="msg-user-bubble pw-user-editor" style={{ width: editorWidth }}>
+			<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user" data-message-id={message.id}>
+				<div className="msg-user-bubble w-full">
 					<textarea
-						ref={editRef}
-						className="pw-user-editor-input"
+						className="w-full resize-none bg-transparent outline-none"
+						style={{ minHeight: 68, font: "inherit", color: "inherit" }}
 						value={draft}
 						aria-label={t.editMessage}
 						autoFocus
 						onChange={(e) => setDraft(e.target.value)}
 						onKeyDown={(e) => {
 							if (e.key === "Escape") { e.preventDefault(); setEditing(false); }
-							if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); submit(); }
+							if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); }
 						}}
 					/>
-					<div className="pw-user-editor-actions">
-						<button type="button" className="pw-user-editor-cancel" aria-label={t.cancel} title={t.cancel} onClick={() => setEditing(false)}><IconCloseOutline14 size={14} /></button>
-						<button type="button" className="pw-user-editor-send" aria-label={t.sendEdit} title={t.sendEdit} disabled={!draft.trim()} onClick={submit}><IconSendArrowUp14 size={15} /></button>
-					</div>
+				</div>
+				<div className="mt-1.5 flex items-center gap-2">
+					<button type="button" className="btn-outline" style={{ height: 26, padding: "0 10px", fontSize: 12 }} onClick={() => setEditing(false)}>
+						{t.cancel}
+					</button>
+					<button
+						type="button"
+						className="btn-primary-white"
+						style={{ height: 26, padding: "0 12px", fontSize: 12 }}
+						disabled={!draft.trim() || draft.trim() === text.trim()}
+						onClick={submit}
+					>
+						{t.sendEdit}
+					</button>
 				</div>
 			</div>
 		);
 	}
 	function submit() {
 		const next = draft.trim();
-		if (!next || !onEditMessage || !message.id) return;
+		if (!next || next === text.trim() || !onEditMessage || !message.id) return;
 		setEditing(false);
 		onEditMessage(message.id, next);
 	}
 	return (
 		// 回合边界：用户消息前留 28px（比回合内 8px 大得多），长对话里一眼找到“这一轮从哪开始”
-		<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user">
-			{imageStrip}
+		<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user" data-message-id={message.id}>
+			{images.length > 0 && (
+				<div className="mb-2 flex max-w-[85%] flex-wrap justify-end gap-2">
+					{images.map((image, index) => (
+						<img
+							key={index}
+							src={`data:${image.mimeType};base64,${image.data}`}
+							alt=""
+							className="max-h-72 max-w-full rounded-2xl object-contain"
+							style={{ border: "0.5px solid var(--dsw-border-l2)" }}
+						/>
+					))}
+				</div>
+			)}
 			{/* 用户消息也走 Markdown：贴进来的代码块/列表不再是一坨纯文本 */}
-			{text && <div ref={bubbleRef} className={`msg-user-bubble clay-bubble-user${canEdit ? " pw-user-message-clickable" : ""}`} onClick={canEdit ? (event) => {
-				if ((event.target as HTMLElement).closest("a, button, input, textarea, [role='button']")) return;
-				const selection = window.getSelection();
-				if (selection && !selection.isCollapsed) return;
-				beginEdit();
-			} : undefined}><Markdown text={text} /></div>}
+			{text && <div className="msg-user-bubble"><Markdown text={text} /></div>}
+			{badge && (
+				<button
+					type="button"
+					className="pw-chip mt-1.5"
+					title={t.chatRoundShow}
+					onClick={() => onShowRound?.(badge.commit)}
+					data-testid="round-badge"
+				>
+					{badge.files ? t.chatRoundChanged.replace("{n}", String(badge.files)) : t.chatRoundNoChanges}
+					{badge.files > 0 && (
+						<>
+							<span style={{ color: "var(--dsw-success)" }}> +{badge.add}</span>
+							<span style={{ color: "var(--dsw-danger)" }}> −{badge.del}</span>
+						</>
+					)}
+				</button>
+			)}
 			{/* 用户消息：复制 + 原地编辑重发（编辑后模型从这条消息重新回答）；时钟在图标左侧（dsh clock=start） */}
 			{text && (
 				<MessageActions
 					text={text}
 					clockStart={message.timestamp !== undefined}
 					time={message.timestamp}
-					onEdit={canEdit ? beginEdit : undefined}
+					onEdit={canEdit ? () => { setDraft(text); setEditing(true); } : undefined}
 				/>
 			)}
 		</div>
@@ -1021,6 +1081,8 @@ function TurnBlockView({
 	workingMessage,
 	onFork,
 	onEditMessage,
+	roundBadge,
+	onShowRound,
 	onInspectTool,
 	onOpenFile,
 }: {
@@ -1040,6 +1102,8 @@ function TurnBlockView({
 	onFork?: (entryId: string) => void;
 	/** 编辑该回合的用户消息并重新发送（模型从这条消息重新回答） */
 	onEditMessage?: (entryId: string, text: string) => void;
+	roundBadge?: RoundBadge;
+	onShowRound?: (commit: string) => void;
 	onInspectTool?: (toolCallId: string) => void;
 	onOpenFile?: (path: string) => void;
 }) {
@@ -1090,8 +1154,8 @@ function TurnBlockView({
 	const showProcess = items.length > 0 || Boolean(contextFiles?.length) || turnLive || (isLast && Boolean(retryNotice));
 
 	return (
-		<div className="pw-conversation-turn">
-			{user && <UserMessage message={user} onEditMessage={onEditMessage} />}
+		<>
+			{user && <UserMessage message={user} badge={roundBadge} onShowRound={onShowRound} onEditMessage={onEditMessage} />}
 			{showProcess && (
 				<div className="pw-turn">
 					{contextFiles?.map((resource, i) => (
@@ -1121,7 +1185,7 @@ function TurnBlockView({
 				</div>
 			)}
 			{finalIdx >= 0 && <FinalAnswer message={messages[finalIdx]} onFork={onFork} showActions={!isStreaming || !isLast} turnStartMs={user?.timestamp} />}
-		</div>
+		</>
 	);
 }
 
@@ -1206,6 +1270,11 @@ function turnBlockPropsEqual(prev: TurnBlockProps, next: TurnBlockProps): boolea
 		prev.contextFiles !== next.contextFiles ||
 		prev.onFork !== next.onFork ||
 		prev.onEditMessage !== next.onEditMessage ||
+		prev.onShowRound !== next.onShowRound ||
+		prev.roundBadge?.commit !== next.roundBadge?.commit ||
+		prev.roundBadge?.files !== next.roundBadge?.files ||
+		prev.roundBadge?.add !== next.roundBadge?.add ||
+		prev.roundBadge?.del !== next.roundBadge?.del ||
 		prev.onInspectTool !== next.onInspectTool ||
 		prev.onOpenFile !== next.onOpenFile
 	) return false;
@@ -1228,6 +1297,28 @@ function turnBlockPropsEqual(prev: TurnBlockProps, next: TurnBlockProps): boolea
 
 const TurnBlock = memo(TurnBlockView, turnBlockPropsEqual);
 
+const CHAT_WIDTH_KEY = "piweb.chatContentWidth";
+const CHAT_WIDTH_MIN = 480;
+const CHAT_WIDTH_MAX = 1200;
+
+function resolveChatWidth(width: number, viewportWidth: number): number {
+	const max = Math.max(320, Math.min(CHAT_WIDTH_MAX, viewportWidth - 64));
+	return Math.max(Math.min(CHAT_WIDTH_MIN, max), Math.min(width, max));
+}
+
+function setChatWidth(root: HTMLElement, width: number | null): void {
+	const scope = root.closest<HTMLElement>(".pi-main");
+	if (!scope) return;
+	if (width === null) {
+		scope.style.removeProperty("--dsh-chat-content-width");
+		scope.style.removeProperty("--dsh-composer-card-max-width");
+		return;
+	}
+	const resolved = resolveChatWidth(width, root.clientWidth);
+	scope.style.setProperty("--dsh-chat-content-width", `${resolved}px`);
+	scope.style.setProperty("--dsh-composer-card-max-width", `${resolved + 32}px`);
+}
+
 export function ChatWindow({
 	messages,
 	tools,
@@ -1246,6 +1337,8 @@ export function ChatWindow({
 	stats,
 	onOpenTrajectory,
 	onOpenFile,
+	roundBadges,
+	onShowRound,
 }: {
 	messages: WebMessage[];
 	tools: Record<string, ToolCardState>;
@@ -1272,10 +1365,31 @@ export function ChatWindow({
 	/** 在本机编辑器打开工具行涉及的文件 */
 	onEditMessage?: (entryId: string, text: string) => void;
 	onOpenFile?: (path: string) => void;
+	roundBadges?: ReadonlyMap<string, RoundBadge>;
+	onShowRound?: (commit: string) => void;
 }) {
 	const scrollRef = useRef<HTMLDivElement>(null);
+	const rootRef = useRef<HTMLDivElement>(null);
+	const widthPreference = useRef<number | null>(null);
+	const widthDrag = useRef<{ side: "left" | "right"; origin: number; width: number; pointerId: number } | null>(null);
 	const stickToBottom = useRef(true);
 	const { t } = useI18n();
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const saved = Number(localStorage.getItem(CHAT_WIDTH_KEY));
+		widthPreference.current = Number.isFinite(saved) && saved >= CHAT_WIDTH_MIN ? saved : null;
+		const syncWidth = () => setChatWidth(root, window.innerWidth <= 840 ? null : widthPreference.current);
+		const observer = new ResizeObserver(syncWidth);
+		observer.observe(root);
+		window.addEventListener("resize", syncWidth);
+		syncWidth();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", syncWidth);
+			setChatWidth(root, null);
+		};
+	}, []);
 	// 脱离底部后累计的新内容条数（回到底部按钮上的角标）
 	const [unseen, setUnseen] = useState(0);
 	/** 是否已离开底部（state 版：ref 变化不会触发渲染，静态会话翻页时按钮出不来） */
@@ -1321,10 +1435,74 @@ export function ChatWindow({
 	};
 
 	return (
-		<div className="pw-chat-window relative flex h-full min-h-0 flex-col">
+		<div ref={rootRef} className="relative flex h-full min-h-0 flex-col">
+			{(["left", "right"] as const).map((side) => (
+				<div
+					key={side}
+					className="piweb-conversation-width-handle"
+					data-side={side}
+					role="separator"
+					aria-orientation="vertical"
+					aria-label={t.chatWidthHandle}
+					tabIndex={0}
+					onPointerDown={(event) => {
+						if (event.button !== 0 || !rootRef.current) return;
+						event.preventDefault();
+						const width = widthPreference.current ?? Math.max(544, Math.min(rootRef.current.clientWidth * 0.64, 736));
+						widthDrag.current = { side, origin: event.clientX, width, pointerId: event.pointerId };
+						event.currentTarget.setPointerCapture(event.pointerId);
+						event.currentTarget.dataset.dragging = "true";
+					}}
+					onPointerMove={(event) => {
+						const drag = widthDrag.current;
+						if (!drag || drag.pointerId !== event.pointerId || !rootRef.current) return;
+						const delta = (event.clientX - drag.origin) * (side === "right" ? 2 : -2);
+						drag.width = resolveChatWidth((widthPreference.current ?? drag.width) + delta, rootRef.current.clientWidth);
+						drag.origin = event.clientX;
+						widthPreference.current = drag.width;
+						setChatWidth(rootRef.current, drag.width);
+					}}
+					onPointerUp={(event) => {
+						const drag = widthDrag.current;
+						if (!drag || drag.pointerId !== event.pointerId) return;
+						widthDrag.current = null;
+						event.currentTarget.removeAttribute("data-dragging");
+						if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+						if (rootRef.current) {
+							const width = resolveChatWidth(drag.width, rootRef.current.clientWidth);
+							widthPreference.current = width;
+							localStorage.setItem(CHAT_WIDTH_KEY, String(width));
+							setChatWidth(rootRef.current, width);
+						}
+					}}
+					onPointerCancel={(event) => {
+						event.currentTarget.removeAttribute("data-dragging");
+						widthDrag.current = null;
+						if (rootRef.current) setChatWidth(rootRef.current, widthPreference.current);
+					}}
+					onLostPointerCapture={(event) => {
+						event.currentTarget.removeAttribute("data-dragging");
+						if (widthDrag.current) {
+							widthDrag.current = null;
+							if (rootRef.current) setChatWidth(rootRef.current, widthPreference.current);
+						}
+					}}
+					onWheel={(event) => scrollRef.current?.scrollBy({ top: event.deltaY })}
+					onKeyDown={(event) => {
+						if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && rootRef.current) {
+							event.preventDefault();
+							const delta = event.key === "ArrowRight" ? 24 : -24;
+							const width = resolveChatWidth((widthPreference.current ?? rootRef.current.clientWidth * 0.64) + delta, rootRef.current.clientWidth);
+							widthPreference.current = width;
+							localStorage.setItem(CHAT_WIDTH_KEY, String(width));
+							setChatWidth(rootRef.current, width);
+						}
+					}}
+				/>
+			))}
 			<div
 				ref={scrollRef}
-				className="pw-chat-scroll min-h-0 flex-1 overflow-y-auto"
+				className="min-h-0 flex-1 overflow-y-auto"
 				role="log"
 				aria-live="polite"
 				aria-relevant="additions"
@@ -1336,7 +1514,7 @@ export function ChatWindow({
 					if (atBottom) setUnseen(0);
 				}}
 			>
-				<div className="pw-chat-flow mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
+				<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
 					{turns.map((turn, ti) => (
 						<TurnBlock
 							key={turn.key}
@@ -1355,6 +1533,8 @@ export function ChatWindow({
 							workingMessage={workingMessage}
 							onFork={onFork}
 							onEditMessage={onEditMessage}
+							roundBadge={turn.userIndex >= 0 ? roundBadges?.get(messages[turn.userIndex].id ?? "") : undefined}
+							onShowRound={onShowRound}
 							onInspectTool={onOpenTrajectory}
 							onOpenFile={onOpenFile}
 						/>

package/src/components/ContextMeter.tsx

@@ -2,8 +2,9 @@
 
 /**
  * 上下文占用：
- * 圆环常驻按钮 + 弹窗显示 Pi 的上下文用量与内容构成估算。
- * 总量由 SDK 提供；分类是字符/4 启发式估算，不能与总量相加。
+ * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与 13 类分段占用条
+ * （mac 磁盘存储条式的多色分段，含 Free Space 段）。
+ * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
  * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
  * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
  * 无对话时不渲染（由父组件经 contextVisible 控制）。
@@ -17,7 +18,7 @@ function fmtTok(n: number): string {
 	return n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(Math.round(n));
 }
 
-/** 估算分类的定义（顺序即渲染顺序） */
+/** 13 类分段的定义（顺序即渲染顺序） */
 interface Segment {
 	key: string;
 	label: string;
@@ -90,6 +91,7 @@ export function ContextMeter({
 				{ 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)" },
 			]
 		: // 服务端分项缺失（旧快照）：退回旧三段口径
 			[
@@ -98,9 +100,11 @@ export function ContextMeter({
 				{ 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)" },
 			];
 
-	// 容量只能按 SDK 总量计算；分类有遗漏与重叠，不能用于推导剩余空间。
-	const free = window_ > 0 && tokens !== null ? Math.max(0, window_ - used) : null;
-	const usedWidth = window_ > 0 && tokens !== null ? `${Math.max(0, Math.min(100, (used / window_) * 100))}%` : "0%";
+	// 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}%`;
 
 	return (
 		<div ref={ref} className="relative">
@@ -135,19 +139,21 @@ export function ContextMeter({
 						{tokens === null ? "—" : `~${fmtTok(used)}`} / {window_ > 0 ? fmtTok(window_) : "—"}
 					</div>
 
-					{free !== null && (
+					{/* 分段占用条（mac 磁盘存储条式多色分段，含 Free Space） */}
+					{usedSum > 0 && (
 						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} aria-hidden>
-							<span style={{ width: usedWidth, background: "var(--dsw-accent)" }} />
+							{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" }} />}
 						</div>
 					)}
-					<div className="mt-3" style={{ color: "var(--dsw-label-caption)", fontSize: 11 }}>{t.contextEstimateNote}</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)" />}
 					</div>
-					{b && b.autoCompactBuffer > 0 && <div className="mt-2 flex justify-between gap-2" style={{ color: "var(--dsw-label-tertiary)" }}><span>{t.contextAutoCompactBuffer}</span><span>{fmtTok(b.autoCompactBuffer)}</span></div>}
-					{window_ > 0 && <div className="mt-2 flex justify-between gap-2" style={{ color: "var(--dsw-label-secondary)" }}><span>{t.contextFreeSpace}</span><span>{free === null ? "—" : `~${fmtTok(free)}`}</span></div>}
 				</div>
 			)}
 		</div>

package/src/components/FileViewer.tsx

@@ -167,11 +167,12 @@ export function FileViewer({
 			} catch (error) {
 				if ((error as { status?: number }).status === 404) {
 					// 跟随中的文件可能在本轮后续工具里被删掉；从最近一次涉及它的快照取回最后内容。
-					const prior = [...growth.steps].reverse().find((step) =>
-						step.seq <= (growth.selected?.seq ?? Infinity) && step.changes.some((item) => item.path === tab.path || item.from === tab.path),
+					const upto = growth.selected ? growth.rounds.findIndex((round) => round.commit === growth.selected!.commit) : growth.rounds.length - 1;
+					const prior = growth.rounds.slice(0, upto + 1).reverse().find((round) =>
+						round.changes.some((item) => item.path === tab.path || item.from === tab.path),
 					);
 					const priorTree = prior?.changes.some((item) => (item.status === "D" && item.path === tab.path) || (item.status === "R" && item.from === tab.path))
-						? prior.parent
+						? prior.parentTree
 						: prior?.tree;
 					if (priorTree && priorTree !== tree) {
 						try {
@@ -192,7 +193,7 @@ export function FileViewer({
 			try {
 				if (tab.lazy || !range) {
 					// 会话还没有任何快照时整棵树都是磁盘条目，「不在快照里」的提示会误导
-					await diskContent(tab.lazy && growth.steps.length > 0 ? "disk" : null);
+					await diskContent(tab.lazy && growth.rounds.length > 0 ? "disk" : null);
 					return;
 				}
 				if (mode === "diff") {
@@ -223,7 +224,7 @@ export function FileViewer({
 		return () => {
 			alive = false;
 		};
-	}, [activeTab, cwd, mode, range, change, growth.steps, growth.selected, growth.pending, t.viewerLoadFailed]);
+	}, [activeTab, cwd, mode, range, change, growth.rounds, growth.selected, t.viewerLoadFailed]);
 
 	// 键盘：Esc 关（先关快速打开）、Ctrl/⌘+W 关页签、Ctrl/⌘+P 快速打开、[ ] 上一处下一处
 	useEffect(() => {
@@ -289,9 +290,9 @@ export function FileViewer({
 		setReveal({ path: dir, key: Date.now() });
 		onSelectTab(null);
 	};
-	const roundNumber = growth.selectedRound?.id ?? 0;
-	const stepBadge = roundNumber
-		? `${t.growthRoundLabel.replace("{n}", String(roundNumber))}${change ? ` · +${change.add ?? 0} −${change.del ?? 0}` : ""}`
+	const roundName = growth.selected ? (growth.selected.n ? t.growthRoundLabel.replace("{n}", String(growth.selected.n)) : t.growthKindUser) : "";
+	const stepBadge = roundName
+		? `${roundName}${change ? ` · +${change.add ?? 0} −${change.del ?? 0}` : ""}`
 		: "";
 	const isDiffMode = mode === "diff" && Boolean(loaded?.diff);
 	const noticeText = loaded?.notice === "deleted" ? t.viewerDeleted : loaded?.notice === "historical" ? t.viewerHistorical : loaded?.notice === "missing" ? t.viewerMissing : loaded?.notice === "disk" ? t.viewerNotInSnapshot : loaded?.notice === "nochange" ? t.viewerNoChanges : "";
@@ -463,10 +464,10 @@ export function FileViewer({
 						<div className="pw-viewer-toolbar hairline-b">
 							<div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2" style={{ background: "var(--dsw-hover)", height: 26, maxWidth: 360 }}>
 								<IconSearchOutline16 size={12} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
-								<input value={treeFilter} onChange={(e) => setTreeFilter(e.target.value)} aria-label={t.growthFilter} placeholder={t.growthFilter} className="min-w-0 flex-1 bg-transparent" style={{ fontSize: 12 }} />
+								<input value={treeFilter} onChange={(e) => setTreeFilter(e.target.value)} placeholder={t.growthFilter} className="min-w-0 flex-1 bg-transparent" style={{ fontSize: 12 }} />
 							</div>
 							<span style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
-								{roundNumber ? t.growthRoundLabel.replace("{n}", String(roundNumber)) : ""}
+								{roundName}
 							</span>
 							<button type="button" className="pw-chip" onClick={growth.expandAll}>{t.growthExpandAll}</button>
 							<button type="button" className="pw-chip" onClick={growth.collapseAll}>{t.growthCollapseAll}</button>

package/src/components/GitPanel.tsx

@@ -181,29 +181,27 @@ export function GitPanel({
 		: t.gitPanel;
 
 	return (
-		<div className="flex h-full min-h-0 flex-col p-4 select-none">
-			<div className="mb-3 flex items-center gap-2 pb-2 border-b border-slate-200/60 dark:border-slate-800/60">
+		<div className="flex h-full min-h-0 flex-col p-4">
+			<div className="mb-3 flex items-center gap-2">
 				{view ? (
-					<button className="w-7 h-7 rounded-full clay-btn-soft flex items-center justify-center text-slate-600 hover:text-slate-900 transition-transform active:scale-95" title={t.gitBack} onClick={() => changeView(null)}>
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.gitBack} onClick={() => changeView(null)}>
 						<IconChevronLeft14 size={13} />
 					</button>
 				) : (
-					<div className="w-7 h-7 rounded-full clay-inset flex items-center justify-center text-emerald-600">
-						<IconGitOutline16 size={15} />
-					</div>
+					<IconGitOutline16 size={15} style={{ flex: "none" }} />
 				)}
-				<span className="min-w-0 flex-1 truncate font-bold text-sm text-slate-800 dark:text-slate-100" title={view?.kind === "file" ? view.path : undefined}>
+				<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="w-7 h-7 rounded-full clay-btn-soft flex items-center justify-center text-slate-600 hover:text-slate-900 transition-transform active:scale-95" title={t.fileOpenEditor} onClick={() => onOpenFile(`${info.root}/${view.path}`)}>
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.fileOpenEditor} onClick={() => onOpenFile(`${info.root}/${view.path}`)}>
 						<IconFileOutline16 size={13} />
 					</button>
 				)}
-				<button className="w-7 h-7 rounded-full clay-btn-soft flex items-center justify-center text-slate-600 hover:text-slate-900 transition-transform active:scale-95" title={t.panelRefresh} onClick={() => (view ? void loadDiff(view) : void load())}>
-					<IconRefreshOutline14 size={13} className={loading || diffLoading ? "piweb-spin" : undefined} />
+				<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="w-7 h-7 rounded-full clay-btn-soft flex items-center justify-center text-slate-600 hover:text-rose-600 transition-colors" title={t.close} onClick={onClose}>
+				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} onClick={onClose}>
 					<IconCloseOutline14 size={13} />
 				</button>
 			</div>
@@ -216,7 +214,6 @@ export function GitPanel({
 			)}
 
 			<div className="min-h-0 flex-1 overflow-y-auto">
-				{!cwd && <div className="rounded-xl px-3 py-4 text-sm" style={{ color: "var(--dsw-label-caption)", background: "var(--dsw-hover)" }}>请先在工作台选择工作区，再查看 Git 差异。</div>}
 				{/* ---------- 差异视图 ---------- */}
 				{view && (
 					<div>
@@ -270,7 +267,8 @@ export function GitPanel({
 						{!error && info.files.length > 0 && onAskCommit && (
 							<button
 								type="button"
-								className="clay-btn clay-btn-mint text-white font-semibold px-3.5 py-1.5 rounded-full text-xs self-start shadow-sm active:scale-95"
+								className="btn-outline self-start"
+								style={{ height: 28, padding: "0 12px", fontSize: 12 }}
 								onClick={onAskCommit}
 								title={t.gitAskCommitPrompt}
 							>