@rexvane/piweb 0.3.14 → 0.3.16

package/src/components/ChatInput.tsx

@@ -8,16 +8,22 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
+	IconCheckOutline14,
+	IconChevronRight14,
+	IconCloseOutline14,
 	IconFileOutline16,
 	IconSendArrowUp14,
 	IconStopFill16,
 	IconTerminalOutline14,
+	IconWorkflowAgent16,
+	IconWorkflowGoal16,
+	IconWorkflowPlan16,
 } from "@/components/icons";
 import { ContextMeter } from "@/components/ContextMeter";
 import { ModelSelector, type ModelChoice } from "@/components/ModelSelector";
 import { useI18n } from "@/i18n";
 import { otherBehavior, useEnterBehavior } from "@/lib/enter-behavior";
-import type { ImageAttachment } from "@/lib/types";
+import type { ImageAttachment, WorkflowMode, WorkflowState } from "@/lib/types";
 
 export interface SlashCommand {
 	name: string;
@@ -56,6 +62,9 @@ export function ChatInput({
 	thinkingLevel,
 	thinkingLevels,
 	models,
+	modelLoading,
+	modelLoadError,
+	onRetryModels,
 	providerNames,
 	authByProvider,
 	queue,
@@ -68,6 +77,9 @@ export function ChatInput({
 	onSelectModel,
 	onSelectLevel,
 	onClearQueue,
+	workflow,
+	onWorkflowModeChange,
+	onApprovePlan,
 	draft,
 	initialDraft,
 	onDraftChange,
@@ -95,6 +107,9 @@ export function ChatInput({
 	thinkingLevel?: string;
 	thinkingLevels: string[];
 	models: ModelChoice[];
+	modelLoading?: boolean;
+	modelLoadError?: string | null;
+	onRetryModels?: () => void;
 	providerNames: Record<string, string>;
 	authByProvider: Record<string, boolean>;
 	queue: { steering: string[]; followUp: string[] };
@@ -109,6 +124,9 @@ export function ChatInput({
 	onSelectLevel: (level: string) => void;
 	/** 清空队列并返回被清掉的文本（取回编辑 / 丢弃都走它） */
 	onClearQueue?: () => Promise<QueueResult | void> | void;
+	workflow?: WorkflowState;
+	onWorkflowModeChange?: (mode: WorkflowMode) => void | Promise<{ success?: boolean } | void>;
+	onApprovePlan?: () => void | Promise<{ success?: boolean; error?: string } | void>;
 	/** Parent-owned, session-scoped draft. Async work always updates this same target. */
 	draft?: ChatDraft;
 	initialDraft?: ChatDraft;
@@ -146,15 +164,70 @@ export function ChatInput({
 	const [dragActive, setDragActive] = useState(false);
 	const dragDepth = useRef(0);
 	const [modelOpen, setModelOpen] = useState(false);
+	const [workflowOpen, setWorkflowOpen] = useState(false);
+	const [pendingWorkflowMode, setPendingWorkflowMode] = useState<WorkflowMode | null>(null);
+	const [approvalPending, setApprovalPending] = useState(false);
+	const [approvalError, setApprovalError] = useState("");
+	const approvalInFlightRef = useRef(false);
+	const workflowRequestRef = useRef(0);
+	const workflowInFlightRef = useRef(false);
+	const queuedWorkflowRef = useRef<{ mode: WorkflowMode; request: number } | null>(null);
 	const [cmdIdx, setCmdIdx] = useState(0);
 	const [cmdDismissed, setCmdDismissed] = useState(false);
 	const taRef = useRef<HTMLTextAreaElement>(null);
 	const wrapRef = useRef<HTMLDivElement>(null);
+	const workflowRef = useRef<HTMLDivElement>(null);
 	const { t } = useI18n();
 	const isBlocked = !model?.id;
 	const enterBehavior = useEnterBehavior();
 	const queuedCount = queue.steering.length + queue.followUp.length;
 	const [restoreTick, setRestoreTick] = useState(0);
+	const activeWorkflowMode = pendingWorkflowMode ?? workflow?.mode ?? "agent";
+
+	useEffect(() => {
+		if (pendingWorkflowMode !== null && workflow?.mode === pendingWorkflowMode) setPendingWorkflowMode(null);
+	}, [workflow?.mode, pendingWorkflowMode]);
+	useEffect(() => { setApprovalError(""); }, [workflow?.mode, workflow?.planStatus, workflow?.planId]);
+
+	const approvePlan = async () => {
+		if (!onApprovePlan || approvalInFlightRef.current || isStreaming || disabled) return;
+		approvalInFlightRef.current = true;
+		setApprovalPending(true);
+		setApprovalError("");
+		try {
+			const result = await onApprovePlan();
+			if (result && result.success === false && mountedRef.current) setApprovalError(result.error || t.planApprovalFailed);
+		} catch (error) {
+			if (mountedRef.current) setApprovalError(error instanceof Error ? error.message : t.planApprovalFailed);
+		} finally {
+			approvalInFlightRef.current = false;
+			if (mountedRef.current) setApprovalPending(false);
+		}
+	};
+
+	const flushWorkflowMode = async () => {
+		if (workflowInFlightRef.current || !queuedWorkflowRef.current || !onWorkflowModeChange) return;
+		const { mode, request } = queuedWorkflowRef.current;
+		queuedWorkflowRef.current = null;
+		workflowInFlightRef.current = true;
+		try {
+			const result = await onWorkflowModeChange(mode);
+			if (mountedRef.current && request === workflowRequestRef.current && result && result.success === false) setPendingWorkflowMode(null);
+		} catch {
+			if (mountedRef.current && request === workflowRequestRef.current) setPendingWorkflowMode(null);
+		} finally {
+			workflowInFlightRef.current = false;
+			if (mountedRef.current && queuedWorkflowRef.current) void flushWorkflowMode();
+		}
+	};
+
+	const selectWorkflowMode = (mode: WorkflowMode) => {
+		if (!onWorkflowModeChange) return;
+		const request = ++workflowRequestRef.current;
+		setPendingWorkflowMode(mode);
+		queuedWorkflowRef.current = { mode, request };
+		void flushWorkflowMode();
+	};
 
 	useEffect(() => {
 		mountedRef.current = true;
@@ -163,6 +236,23 @@ export function ChatInput({
 	useEffect(() => {
 		setAttachmentError(uploadFailure ?? "");
 	}, [uploadFailure]);
+	useEffect(() => {
+		if (!workflowOpen) return;
+		const closeOnPointer = (event: PointerEvent) => {
+			if (!workflowRef.current?.contains(event.target as Node)) setWorkflowOpen(false);
+		};
+		const closeOnEscape = (event: KeyboardEvent) => {
+			if (event.key !== "Escape") return;
+			setWorkflowOpen(false);
+			workflowRef.current?.querySelector<HTMLButtonElement>(".pw-workflow-add")?.focus();
+		};
+		document.addEventListener("pointerdown", closeOnPointer);
+		document.addEventListener("keydown", closeOnEscape);
+		return () => {
+			document.removeEventListener("pointerdown", closeOnPointer);
+			document.removeEventListener("keydown", closeOnEscape);
+		};
+	}, [workflowOpen]);
 	useEffect(() => {
 		autoSize();
 	}, [text]);
@@ -404,9 +494,35 @@ export function ChatInput({
 	}, []);
 
 	const hasDraft = text.trim().length > 0 || images.length > 0 || uploads.length > 0;
+	const workflowName = activeWorkflowMode === "plan" ? t.workflowPlan : activeWorkflowMode === "goal" ? t.workflowGoal : t.workflowAgent;
+	const workflowPlaceholder = activeWorkflowMode === "plan" ? t.workflowPlanPlaceholder : activeWorkflowMode === "goal" ? t.workflowGoalPlaceholder : t.inputPlaceholder;
+	const composerExpanded = text.length > 56 || text.includes("\n") || images.length > 0 || uploads.length > 0 || Boolean(adopted);
 
 	return (
-		<div ref={wrapRef} className="relative w-full" data-testid="composer">
+		<div ref={wrapRef} className="pw-composer-shell relative w-full" data-expanded={composerExpanded || undefined} data-testid="composer">
+			{activeWorkflowMode === "plan" && workflow?.mode === "plan" && workflow.planStatus === "ready" && onApprovePlan && (
+				<section className="pw-plan-ready" aria-label={t.planReady}>
+					<div className="pw-plan-ready-content">
+						<span className="pw-plan-ready-icon" aria-hidden="true"><IconWorkflowPlan16 size={16} /></span>
+						<div className="pw-plan-ready-copy">
+							<strong>{t.planReady}</strong>
+							<span>{t.planReadyHint}</span>
+						</div>
+					</div>
+					<div className="pw-plan-ready-actions">
+						<button type="button" className="pw-plan-ready-refine" disabled={disabled || approvalPending} onClick={() => taRef.current?.focus()}>{t.planRefine}</button>
+						<button type="button" className="pw-plan-ready-approve" disabled={isStreaming || disabled || approvalPending} onClick={() => { void approvePlan(); }}>{approvalPending ? t.planApproving : t.planApprove}<IconChevronRight14 size={14} aria-hidden="true" /></button>
+					</div>
+					{approvalError && <p className="pw-plan-ready-error" role="alert">{approvalError}</p>}
+				</section>
+			)}
+			{activeWorkflowMode === "goal" && workflow?.mode === "goal" && workflow.goal && (
+				<div className="pw-goal-active" title={workflow.goal}>
+					<IconWorkflowGoal16 size={14} aria-hidden="true" />
+					<span className="pw-goal-active-label">{t.goalActive}</span>
+					<span className="pw-goal-active-text">{workflow.goal}</span>
+				</div>
+			)}
 			{/* 排队中的消息（Claude Code 同款：列在输入卡上方；↑ 取回编辑，或直接丢弃） */}
 			{queuedCount > 0 && (
 				<div className="pw-queue">
@@ -518,16 +634,8 @@ export function ChatInput({
 			)}
 
 			{/* 卡片（玻璃态）—— 拖放由 document 级监听统一接管 */}
-			<div
-				className="relative w-full"
-				style={{
-					borderRadius: 22,
-					background: "var(--dsw-input-major)",
-					boxShadow: "var(--dsw-elevation-soft)",
-					border: "0.5px solid var(--dsw-border-l1)",
-				}}
-			>
-				<div className="px-4 pt-3 flex items-start gap-1.5">
+			<div className="pw-composer relative w-full" data-mode={activeWorkflowMode}>
+				<div className="pw-composer-body flex items-start gap-1.5">
 					{adopted && (
 						<button
 							type="button"
@@ -555,7 +663,7 @@ export function ChatInput({
 						value={text}
 						disabled={disabled || isBlocked || sendBusy}
 						rows={1}
-						placeholder={adopted ? (adopted.argumentHint ?? t.inputPlaceholder) : !disabled && isBlocked ? t.blockedComposer : t.inputPlaceholder}
+						placeholder={adopted ? (adopted.argumentHint ?? workflowPlaceholder) : !disabled && isBlocked ? t.blockedComposer : workflowPlaceholder}
 						suppressHydrationWarning
 						className="min-w-0 flex-1 resize-none"
 						style={{ fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))", lineHeight: 1.55 }}
@@ -631,19 +739,35 @@ export function ChatInput({
 				</div>
 
 				{/* 按钮行：左侧只保留命令入口；图片通过拖放或粘贴添加。 */}
-				<div
-					className="flex items-center gap-2"
-					style={{
-						paddingLeft: 8,
-						paddingRight: 12,
-						paddingBottom: 8,
-						paddingTop: 4,
-						height: 40,
-						containerType: "inline-size",
-					}}
-				>
-					{/* 命令菜单通过输入 / 触发（dsh 同款），不再提供 ＋ 启动按钮 */}
-					<div className="flex-1" />
+				<div className="pw-composer-toolbar flex items-center gap-2">
+					{workflow && onWorkflowModeChange && (
+						<div ref={workflowRef} className="relative flex shrink-0 items-center gap-2">
+							<button type="button" className="pw-workflow-add" disabled={isStreaming || disabled} aria-label={`${t.workflowMenu}: ${workflowName}`} title={t.workflowMenu} aria-haspopup="menu" aria-expanded={workflowOpen} onClick={() => setWorkflowOpen((open) => !open)}>
+								<span className="pw-workflow-plus" aria-hidden="true" />
+							</button>
+							{activeWorkflowMode !== "agent" && (
+								<span className="pw-workflow-current" data-mode={activeWorkflowMode}>
+									<span className="pw-workflow-current-icon" aria-hidden="true">{activeWorkflowMode === "plan" ? <IconWorkflowPlan16 size={14} /> : <IconWorkflowGoal16 size={14} />}</span>
+									<span>{workflowName}</span>
+									<button type="button" className="pw-workflow-current-dismiss" disabled={isStreaming || disabled} aria-label={`${t.workflowClear}: ${workflowName}`} title={t.workflowClear} onClick={() => { selectWorkflowMode("agent"); taRef.current?.focus(); }}><IconCloseOutline14 size={10} aria-hidden="true" /></button>
+								</span>
+							)}
+							{workflowOpen && (
+								<div className="popover pw-workflow-menu" role="menu">
+									<div className="pw-workflow-menu-label">{t.workflowMenu}</div>
+									{(["agent", "plan", "goal"] as const).map((mode) => (
+										<button key={mode} type="button" className="pw-workflow-option" data-mode={mode} role="menuitemradio" aria-checked={activeWorkflowMode === mode} onClick={() => { setWorkflowOpen(false); selectWorkflowMode(mode); taRef.current?.focus(); }}>
+											<span className="pw-workflow-option-icon" aria-hidden="true">{mode === "agent" ? <IconWorkflowAgent16 size={16} /> : mode === "plan" ? <IconWorkflowPlan16 size={16} /> : <IconWorkflowGoal16 size={16} />}</span>
+											<strong className="pw-workflow-option-name">{mode === "agent" ? t.workflowAgent : mode === "plan" ? t.workflowPlan : t.workflowGoal}</strong>
+											<span className="pw-workflow-option-description">{mode === "agent" ? t.workflowAgentHint : mode === "plan" ? t.workflowPlanHint : t.workflowGoalHint}</span>
+											<IconCheckOutline14 className="pw-workflow-option-check" size={14} aria-hidden="true" />
+										</button>
+									))}
+								</div>
+							)}
+						</div>
+					)}
+					{!workflow && <div className="flex-1" />}
 
 					{/* 模型芯片（右组，dsh 分组菜单；/model 命令可受控打开） */}
 					<ModelSelector
@@ -651,6 +775,9 @@ export function ChatInput({
 						thinkingLevel={thinkingLevel}
 						thinkingLevels={thinkingLevels}
 						models={models}
+						modelLoading={modelLoading}
+						modelLoadError={modelLoadError}
+						onRetryModels={onRetryModels}
 						providerNames={providerNames}
 						authByProvider={authByProvider}
 						onSelectModel={onSelectModel}

package/src/components/ChatWindow.tsx

@@ -22,6 +22,7 @@ import {
 	IconFileOutline16,
 	IconRefreshOutline14,
 	IconSearchOutline16,
+	IconSendArrowUp14,
 	IconTerminalOutline14,
 	IconThinkOutline14,
 	IconWarningOutline16,
@@ -78,7 +79,7 @@ function formatMessageClock(time: number, t: Dict): string {
 
 const Markdown = memo(function Markdown({ text }: { text: string }) {
 	return (
-		<div className="md">
+		<div className="md select-text">
 			<ReactMarkdown
 				remarkPlugins={[remarkGfm]}
 				rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
@@ -897,72 +898,77 @@ 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">
-				<div className="msg-user-bubble w-full">
+				{imageStrip}
+				<div className="msg-user-bubble pw-user-editor" style={{ width: editorWidth }}>
 					<textarea
-						className="w-full resize-none bg-transparent outline-none"
-						style={{ minHeight: 68, font: "inherit", color: "inherit" }}
+						ref={editRef}
+						className="pw-user-editor-input"
 						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.preventDefault(); submit(); }
+							if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); submit(); }
 						}}
 					/>
-				</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 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>
 		);
 	}
 	function submit() {
 		const next = draft.trim();
-		if (!next || next === text.trim() || !onEditMessage || !message.id) return;
+		if (!next || !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">
-			{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>
-			)}
+			{imageStrip}
 			{/* 用户消息也走 Markdown：贴进来的代码块/列表不再是一坨纯文本 */}
-			{text && <div className="msg-user-bubble"><Markdown text={text} /></div>}
+			{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>}
 			{/* 用户消息：复制 + 原地编辑重发（编辑后模型从这条消息重新回答）；时钟在图标左侧（dsh clock=start） */}
 			{text && (
 				<MessageActions
 					text={text}
 					clockStart={message.timestamp !== undefined}
 					time={message.timestamp}
-					onEdit={canEdit ? () => { setDraft(text); setEditing(true); } : undefined}
+					onEdit={canEdit ? beginEdit : undefined}
 				/>
 			)}
 		</div>
@@ -1084,7 +1090,7 @@ 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} />}
 			{showProcess && (
 				<div className="pw-turn">
@@ -1115,7 +1121,7 @@ function TurnBlockView({
 				</div>
 			)}
 			{finalIdx >= 0 && <FinalAnswer message={messages[finalIdx]} onFork={onFork} showActions={!isStreaming || !isLast} turnStartMs={user?.timestamp} />}
-		</>
+		</div>
 	);
 }
 
@@ -1315,10 +1321,10 @@ export function ChatWindow({
 	};
 
 	return (
-		<div className="relative flex h-full min-h-0 flex-col">
+		<div className="pw-chat-window relative flex h-full min-h-0 flex-col">
 			<div
 				ref={scrollRef}
-				className="min-h-0 flex-1 overflow-y-auto"
+				className="pw-chat-scroll min-h-0 flex-1 overflow-y-auto"
 				role="log"
 				aria-live="polite"
 				aria-relevant="additions"
@@ -1330,7 +1336,7 @@ export function ChatWindow({
 					if (atBottom) setUnseen(0);
 				}}
 			>
-				<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
+				<div className="pw-chat-flow 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}

package/src/components/ContextMeter.tsx

@@ -2,9 +2,8 @@
 
 /**
  * 上下文占用：
- * 圆环常驻按钮 + 弹窗显示「百分比 / ~已用 / 窗口」与 13 类分段占用条
- * （mac 磁盘存储条式的多色分段，含 Free Space 段）。
- * 分段口径：全部为字符/4 启发式估算（与 SDK estimateTokens 一致），
+ * 圆环常驻按钮 + 弹窗显示 Pi 的上下文用量与内容构成估算。
+ * 总量由 SDK 提供；分类是字符/4 启发式估算，不能与总量相加。
  * 服务端分项（System Prompt / Tools / Memory / Skills / Compacted / Buffer）来自快照，
  * 消息分项（User / Agent Text / Thinking / Tool Call / Tool Output）弹窗打开时前端统计。
  * 无对话时不渲染（由父组件经 contextVisible 控制）。
@@ -18,7 +17,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;
@@ -91,7 +90,6 @@ 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)" },
 			]
 		: // 服务端分项缺失（旧快照）：退回旧三段口径
 			[
@@ -100,11 +98,9 @@ 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)" },
 			];
 
-	// 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}%`;
+	// 容量只能按 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%";
 
 	return (
 		<div ref={ref} className="relative">
@@ -139,21 +135,19 @@ export function ContextMeter({
 						{tokens === null ? "—" : `~${fmtTok(used)}`} / {window_ > 0 ? fmtTok(window_) : "—"}
 					</div>
 
-					{/* 分段占用条（mac 磁盘存储条式多色分段，含 Free Space） */}
-					{usedSum > 0 && (
+					{free !== null && (
 						<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 style={{ width: usedWidth, background: "var(--dsw-accent)" }} />
 						</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

@@ -463,7 +463,7 @@ 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)} placeholder={t.growthFilter} className="min-w-0 flex-1 bg-transparent" style={{ fontSize: 12 }} />
+								<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 }} />
 							</div>
 							<span style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 								{roundNumber ? t.growthRoundLabel.replace("{n}", String(roundNumber)) : ""}

package/src/components/GitPanel.tsx

@@ -181,27 +181,29 @@ export function GitPanel({
 		: t.gitPanel;
 
 	return (
-		<div className="flex h-full min-h-0 flex-col p-4">
-			<div className="mb-3 flex items-center gap-2">
+		<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">
 				{view ? (
-					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.gitBack} onClick={() => changeView(null)}>
+					<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)}>
 						<IconChevronLeft14 size={13} />
 					</button>
 				) : (
-					<IconGitOutline16 size={15} style={{ flex: "none" }} />
+					<div className="w-7 h-7 rounded-full clay-inset flex items-center justify-center text-emerald-600">
+						<IconGitOutline16 size={15} />
+					</div>
 				)}
-				<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }} title={view?.kind === "file" ? view.path : undefined}>
+				<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}>
 					{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}`)}>
+					<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}`)}>
 						<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 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>
-				<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} onClick={onClose}>
+				<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}>
 					<IconCloseOutline14 size={13} />
 				</button>
 			</div>
@@ -214,6 +216,7 @@ 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>
@@ -267,8 +270,7 @@ export function GitPanel({
 						{!error && info.files.length > 0 && onAskCommit && (
 							<button
 								type="button"
-								className="btn-outline self-start"
-								style={{ height: 28, padding: "0 12px", fontSize: 12 }}
+								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"
 								onClick={onAskCommit}
 								title={t.gitAskCommitPrompt}
 							>

package/src/components/ModelSelector.tsx

@@ -21,6 +21,9 @@ export function ModelSelector({
 	thinkingLevel,
 	thinkingLevels,
 	models,
+	modelLoading = false,
+	modelLoadError,
+	onRetryModels,
 	providerNames,
 	authByProvider,
 	onSelectModel,
@@ -32,6 +35,9 @@ export function ModelSelector({
 	thinkingLevel?: string;
 	thinkingLevels: string[];
 	models: ModelChoice[];
+	modelLoading?: boolean;
+	modelLoadError?: string | null;
+	onRetryModels?: () => void;
 	providerNames: Record<string, string>;
 	authByProvider: Record<string, boolean>;
 	onSelectModel: (provider: string, id: string) => void;
@@ -102,7 +108,8 @@ export function ModelSelector({
 		});
 	}, [open, pane]);
 
-	const hasModel = Boolean(model?.id);
+	// Pi uses this sentinel when no usable model can be restored.
+	const hasModel = Boolean(model?.id && !(model.provider === "unknown" && model.id === "unknown"));
 	const modelName = hasModel ? (model?.name || model?.id || "") : "";
 	const effortLabel = hasModel && thinkingLevel && thinkingLevel !== "off" ? thinkingLevel : undefined;
 	const triggerTitle = hasModel
@@ -110,10 +117,10 @@ export function ModelSelector({
 		: t.selectModel;
 
 	return (
-		<div ref={ref} className="relative">
+		<div ref={ref} className="pw-model-selector relative min-w-0">
 			<button
 				type="button"
-				className="chip"
+				className="chip min-w-0 max-w-full"
 				data-open={open}
 				title={triggerTitle}
 				aria-label={triggerTitle}
@@ -124,7 +131,7 @@ export function ModelSelector({
 					setPane("model");
 				}}
 			>
-				<span className="max-w-[220px] truncate" suppressHydrationWarning>{hasModel ? modelName : t.selectModel}</span>
+				<span className="min-w-0 max-w-[220px] truncate" suppressHydrationWarning>{hasModel ? modelName : t.selectModel}</span>
 				{effortLabel && (
 					<span style={{ color: "var(--dsw-label-caption)", flex: "none", fontSize: 13 }}>
 						{effortLabel}
@@ -198,9 +205,15 @@ export function ModelSelector({
 					{pane === "model" && (
 						<div className="flex min-h-0 flex-col">
 							<div ref={listRef} className="max-h-[340px] overflow-y-auto py-1">
-								{groups.length === 0 && (
+								{modelLoadError && (
+									<div role="alert" className="px-3 py-2" style={{ fontSize: 12, color: "var(--dsw-danger)" }}>
+										<span title={modelLoadError}>{t.modelsLoadFailed}</span>{" "}
+										{onRetryModels && <button type="button" className="underline" onClick={onRetryModels}>{t.settingsRetry}</button>}
+									</div>
+								)}
+								{groups.length === 0 && (modelLoading || !modelLoadError) && (
 									<div className="px-3 py-3" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>
-										{t.emptyModels}
+										{modelLoading ? t.modelsLoading : t.emptyModels}
 									</div>
 								)}
 								{groups.map((g) => (