@rexvane/piweb 0.3.25 → 0.3.26

package/src/components/ChatInput.tsx

@@ -9,6 +9,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
 	IconAtOutline16,
+	IconCloseOutline14,
 	IconFileOutline16,
 	IconFolderClose16,
 	IconSendArrowUp14,
@@ -24,6 +25,7 @@ import { useWorkspaceFiles } from "@/hooks/useWorkspaceFiles";
 import { fmtBytes } from "@/lib/format";
 import { otherBehavior, useEnterBehavior } from "@/lib/enter-behavior";
 import { atToken, candidateText, suggestPaths, type PathCandidate } from "@/lib/workspace-index";
+import { slashCommandToken } from "@/lib/slash-command-token";
 import type { ImageAttachment } from "@/lib/types";
 
 export interface SlashCommand {
@@ -87,6 +89,7 @@ export function ChatInput({
 	pendingUploadCount = 0,
 	pendingSend = false,
 	onSendPendingChange,
+	attachmentLayout = "overlay",
 }: {
 	disabled?: boolean;
 	isStreaming: boolean;
@@ -132,6 +135,8 @@ export function ChatInput({
 	pendingUploadCount?: number;
 	pendingSend?: boolean;
 	onSendPendingChange?: (pending: boolean) => void;
+	/** Hero 在输入卡上方预留空间；聊天中仍让附件悬浮、不占布局高度 */
+	attachmentLayout?: "overlay" | "flow";
 }) {
 	const [localDraft, setLocalDraft] = useState<ChatDraft>(initialDraft ?? EMPTY_CHAT_DRAFT);
 	const currentDraft = draft ?? localDraft;
@@ -164,6 +169,7 @@ export function ChatInput({
 	const [modelOpen, setModelOpen] = useState(false);
 	const [cmdIdx, setCmdIdx] = useState(0);
 	const [cmdDismissed, setCmdDismissed] = useState(false);
+	const [commandCaret, setCommandCaret] = useState<number | null>(currentDraft.text.length);
 	// @ 引用：打字触发候选，选中后落成引用 chip（发送时统一拼成 `@路径` 行）
 	const [mention, setMention] = useState<{ query: string; start: number; tokenEnd: number } | null>(null);
 	const [mentionIdx, setMentionIdx] = useState(0);
@@ -189,11 +195,11 @@ export function ChatInput({
 		autoSize();
 	}, [text]);
 
-	// 斜杠命令模式：文本以 / 开头且未输入参数空格
-	const slash = text.startsWith("/") ? text.slice(1) : "";
-	const hasArgs = slash.includes(" ");
-	const typedCommandMode = !!commands?.length && text.startsWith("/") && !cmdDismissed && !hasArgs;
-	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.split(" ")[0].toLowerCase()));
+	// 补全光标处的 token，而不是只看草稿的第一个字符
+	const commandToken = slashCommandToken(text, commandCaret);
+	const slash = commandToken?.query ?? "";
+	const typedCommandMode = !adopted && !!commands?.length && !!commandToken && !cmdDismissed;
+	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.toLowerCase()));
 	const visibleCommands = filteredCommands;
 	const commandMode = typedCommandMode;
 
@@ -277,7 +283,67 @@ export function ChatInput({
 	}, [cmdIdx, visibleCommands.length]);
 	const effectiveIdx = Math.min(cmdIdx, Math.max(0, visibleCommands.length - 1));
 
+	const withoutCommandToken = () => commandToken ? text.slice(0, commandToken.start) + text.slice(commandToken.tokenEnd) : text;
+	const adoptCommand = (entry: SlashCommand) => {
+		// SDK 只展开开头的一个命令：已经采纳时不再覆盖（先 Backspace 摘掉）
+		if (draftRef.current.adopted) return;
+		const remaining = withoutCommandToken();
+		const caret = commandToken?.start ?? remaining.length;
+		setAdopted(entry);
+		setText(remaining);
+		setCommandCaret(caret);
+		setCmdDismissed(true);
+		setCmdIdx(0);
+		requestAnimationFrame(() => {
+			autoSize();
+			taRef.current?.focus();
+			taRef.current?.setSelectionRange(caret, caret);
+		});
+	};
+
+	// 行内扩展命令（如 /fast）自己执行：不能为了切换它把周围的草稿、图片或引用一起发出去
+	const runInlineExtension = async (entry: SlashCommand) => {
+		if (disabled || isBlocked || sendingRef.current || pendingSend || uploadBusy) return;
+		const original = text;
+		const remaining = withoutCommandToken();
+		sendingRef.current = true;
+		setSending(true);
+		onSendPendingChange?.(true);
+		setText(remaining);
+		setCommandCaret(remaining.length);
+		setCmdDismissed(true);
+		try {
+			const result = await onSend(`/${entry.name}`, []);
+			if (!result?.success) throw new Error(result?.error || "Command failed");
+		} catch (error) {
+			setText((previous) => previous === remaining ? original : previous);
+			if (mountedRef.current) {
+				setCommandCaret(commandToken?.tokenEnd ?? original.length);
+				setCmdDismissed(false);
+				setAttachmentError(error instanceof Error ? error.message : String(error));
+			}
+		} finally {
+			sendingRef.current = false;
+			if (mountedRef.current) setSending(false);
+			onSendPendingChange?.(false);
+		}
+	};
+
 	const runEntry = (entry: SlashCommand) => {
+		if (draftRef.current.adopted) return;
+		// 命令出现在正文中间：只替换这一段 token，前后文字原样保留
+		if (commandToken && (commandToken.start > 0 || commandToken.tokenEnd < text.length)) {
+			if (entry.kind === "builtin") {
+				if (entry.name === "model") setModelOpen(true);
+				else onCommand?.(entry.name, "");
+				const remaining = withoutCommandToken();
+				setText(remaining);
+				setCommandCaret(remaining.length);
+				setCmdDismissed(true);
+			} else if (entry.kind === "extension") void runInlineExtension(entry);
+			else adoptCommand(entry);
+			return;
+		}
 		const args = slash.slice(entry.name.length).trim();
 		if (entry.kind === "builtin" && entry.name === "model") {
 			setModelOpen(true);
@@ -505,7 +571,7 @@ export function ChatInput({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const hasDraft = text.trim().length > 0 || images.length > 0 || uploads.length > 0 || references.length > 0;
+	const hasDraft = adopted !== null || text.trim().length > 0 || images.length > 0 || uploads.length > 0 || references.length > 0;
 
 	return (
 		<div ref={wrapRef} className="relative w-full" data-testid="composer">
@@ -650,11 +716,12 @@ export function ChatInput({
 			)}
 
 			{/*
-			 * 附件轨（图片 / 引用 / 上传文件）：绝对定位浮在输入卡上方，**不占布局高度** ——
+			 * 附件轨（图片 / 引用 / 上传文件）：聊天中悬浮于输入卡上方，不占布局高度 ——
 			 * 输入框位置不动，多出来的附件直接盖住后面的聊天记录（用户要的就是这个）。
+			 * 新对话页用 flow 占位，避免 @ 引用和图片盖住上方的工作区选择器。
 			 * 外层 pointer-events-none，只有附件本身接收点击，免得挡住聊天区的交互。
 			 */}
-			<div className="pointer-events-none absolute inset-x-0 bottom-full z-20 flex flex-col gap-1.5 pb-2" data-testid="composer-attachments">
+			{(images.length > 0 || references.length > 0 || uploads.length > 0) && <div className={`pointer-events-none z-20 flex flex-col gap-1.5 pb-2 ${attachmentLayout === "flow" ? "relative" : "absolute inset-x-0 bottom-full"}`} data-testid="composer-attachments">
 			{/* 附件轨：图片（超过 4 张折叠成牌堆，展开沿弧线扇开；点开可放大、切换、删除） */}
 			{images.length > 0 && (
 				<ComposerImages
@@ -714,16 +781,18 @@ export function ChatInput({
 				/>
 			)}
 
-			</div>
+			</div>}
 
 			{/* 卡片（Iconsax .isx-composer：24px 圆角 + 聚焦高对比描边 + 底部流光短横条）—— 拖放由 document 级监听统一接管 */}
 			<div className="isx-composer relative w-full">
-				<div className="px-4 pt-3 flex items-start gap-1.5">
+				<div className="px-4 pt-3 flex flex-col items-stretch gap-1.5">
 					{adopted && (
 						<button
 							type="button"
-							className="flex-none flex items-center gap-1 self-start"
-							title={`${t.delete} (Backspace)`}
+							className="flex-none flex max-w-full items-center gap-1 self-start"
+							disabled={disabled || sendBusy}
+							aria-label={`${t.delete} /${adopted.name}`}
+							title={`${t.delete} /${adopted.name} (Backspace)`}
 							style={{
 								fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))",
 								lineHeight: "var(--piweb-chat-line-height, 1.55)",
@@ -738,7 +807,8 @@ export function ChatInput({
 							}}
 						>
 							<IconTerminalOutline14 size={14} style={{ color: "var(--dsw-accent)", flex: "none" }} />
-							<span style={{ color: "var(--dsw-accent)", fontWeight: 600 }}>/{adopted.name}</span>
+							<span className="min-w-0 truncate" style={{ color: "var(--dsw-accent)", fontWeight: 600 }}>/{adopted.name}</span>
+							<IconCloseOutline14 size={12} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
 						</button>
 					)}
 					<textarea
@@ -748,11 +818,12 @@ export function ChatInput({
 						rows={1}
 						placeholder={adopted ? (adopted.argumentHint ?? t.inputPlaceholder) : !disabled && isBlocked ? t.blockedComposer : t.inputPlaceholder}
 						suppressHydrationWarning
-						className="min-w-0 flex-1 resize-none"
+						className="min-w-0 w-full resize-none"
 						style={{ fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))", lineHeight: 1.55 }}
 						onChange={(e) => {
 							const value = e.target.value;
 							setText(value);
+							setCommandCaret(e.target.selectionStart);
 							setCmdDismissed(false);
 							setCmdIdx(0);
 							syncMention(value, e.target.selectionStart);
@@ -761,7 +832,10 @@ export function ChatInput({
 						onSelect={(e) => {
 							// 选中了一段文字时不弹：那时 Enter / Tab 应该照常工作
 							const ta = e.target as HTMLTextAreaElement;
-							syncMention(ta.value, ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null);
+							const caret = ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null;
+							setCommandCaret(caret);
+							if (slashCommandToken(ta.value, caret)?.start !== commandToken?.start) setCmdDismissed(false);
+							syncMention(ta.value, caret);
 						}}
 						onPaste={(e) => {
 							const files = Array.from(e.clipboardData.files);
@@ -799,13 +873,16 @@ export function ChatInput({
 									}
 								}
 							}
-							if (adopted && text === "" && (e.key === "Backspace" || e.key === "Escape")) {
-								// 空参数时退格/Esc：摘掉命令胶囊
+							if (adopted && !e.nativeEvent.isComposing && (
+								(e.key === "Backspace" && e.currentTarget.selectionStart === 0 && e.currentTarget.selectionEnd === 0) ||
+								(e.key === "Escape" && text === "")
+							)) {
+								// 光标在开头时退格 / 空参数时 Esc：只摘掉命令标记，不碰任何正文
 								e.preventDefault();
 								setAdopted(null);
 								return;
 							}
-							if (commandMode && visibleCommands.length > 0) {
+							if (commandMode && visibleCommands.length > 0 && !e.nativeEvent.isComposing) {
 								if (e.key === "ArrowDown") {
 									e.preventDefault();
 									setCmdIdx((i) => Math.min(i + 1, visibleCommands.length - 1));
@@ -818,10 +895,10 @@ export function ChatInput({
 								}
 								if (e.key === "Escape") {
 									e.preventDefault();
-										setCmdDismissed(true);
+									setCmdDismissed(true);
 									return;
 								}
-								if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+								if (e.key === "Enter") {
 									e.preventDefault();
 									runEntry(visibleCommands[effectiveIdx]);
 									return;
@@ -831,13 +908,7 @@ export function ChatInput({
 									e.preventDefault();
 									const entry = visibleCommands[effectiveIdx];
 									if (!entry) return;
-									setAdopted(entry);
-									setText("");
-									setCmdIdx(0);
-									requestAnimationFrame(() => {
-										autoSize();
-										taRef.current?.focus();
-									});
+									adoptCommand(entry);
 									return;
 								}
 							}

package/src/components/ChatWindow.tsx

@@ -30,6 +30,7 @@ import { languageForPath } from "@/lib/highlight";
 import { parseExpandedSkill } from "@/lib/chat/skill-expansion";
 import { copyText } from "@/lib/clipboard";
 import { OutlineRail } from "@/components/OutlineRail";
+import { PreviewImage } from "@/components/PreviewImage";
 import { ChatScrollContext, type ChatScroll } from "@/components/chat/chat-scroll";
 import { MarkdownActionsProvider, type MarkdownActions } from "@/components/chat/markdown-actions";
 import { useChatReadingAnchor } from "@/components/chat/reading-anchor";
@@ -879,7 +880,7 @@ function ItemView({ item, cwd, onInspectTool, onOpenFile }: { item: Item; cwd?:
 		case "image":
 			return (
 				<div className="pw-narr">
-					<img src={`data:${item.mimeType};base64,${item.data}`} alt="" className="my-1 max-h-96 max-w-full rounded-2xl object-contain" />
+					<PreviewImage image={{ type: "image", mimeType: item.mimeType, data: item.data }} className="my-1 max-h-96 max-w-full rounded-2xl object-contain" />
 				</div>
 			);
 		case "tool":
@@ -916,11 +917,12 @@ const FinalAnswer = memo(function FinalAnswer({
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
 		.map((c) => c.text)
 		.join("");
+	const images = message.content.filter((c) => c.type === "image");
 	return (
 		<div className="group w-full" style={{ marginTop: 14 }} data-role="assistant">
 			{message.content.map((c, i) => {
 				if (c.type === "text" && c.text.trim()) return <Markdown key={i} text={c.text} />;
-				if (c.type === "image") return <img key={i} src={`data:${c.mimeType};base64,${c.data}`} alt="" className="my-2 max-h-96 max-w-full rounded-2xl object-contain" />;
+				if (c.type === "image") return <PreviewImage key={i} image={c} images={images} index={images.indexOf(c)} className="my-2 max-h-96 max-w-full rounded-2xl object-contain" />;
 				return null;
 			})}
 			{showActions && (
@@ -980,10 +982,11 @@ function UserImages({ images }: { images: Array<{ type: "image"; data: string; m
 	return (
 		<div className="mb-2 flex max-w-[85%] flex-wrap justify-end gap-2 self-end">
 			{images.map((image, index) => (
-				<img
+				<PreviewImage
 					key={index}
-					src={`data:${image.mimeType};base64,${image.data}`}
-					alt=""
+					image={image}
+					images={images}
+					index={index}
 					className="max-h-72 max-w-full rounded-2xl object-contain"
 					style={{ border: "0.5px solid var(--dsw-border-l2)" }}
 				/>
@@ -1003,6 +1006,8 @@ const UserMessage = memo(function UserMessage({ message, onEditMessage }: { mess
 	if (editing) {
 		return (
 			<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user" data-message-id={message.id}>
+				{/* 编辑只改文字，图片由服务端从原消息里带进重发；照样显示，免得以为图被丢了 */}
+				<UserImages images={images} />
 				<div className="msg-user-bubble w-full">
 					<textarea
 						className="w-full resize-none bg-transparent outline-none"
@@ -1064,7 +1069,8 @@ const UserMessage = memo(function UserMessage({ message, onEditMessage }: { mess
 
 // ---------- 回合：用户消息 → 过程步骤 → 最终回答 ----------
 
-type Turn = { key: string; userIndex: number; assistantIndexes: number[] };
+/** summaryIndex：压缩分隔卡 / 分支摘要卡单独占一格，没有用户消息和过程 */
+type Turn = { key: string; userIndex: number; assistantIndexes: number[]; summaryIndex?: number };
 
 function buildTurns(messages: WebMessage[]): Turn[] {
 	const out: Turn[] = [];
@@ -1073,6 +1079,10 @@ function buildTurns(messages: WebMessage[]): Turn[] {
 		if (m.role === "user") {
 			cur = { key: `u${i}`, userIndex: i, assistantIndexes: [] };
 			out.push(cur);
+		} else if (m.role === "summary") {
+			// 压缩可能切在回合中间：卡片后面的助手消息另起一个回合，不并回卡片上方的用户消息
+			out.push({ key: `s${i}`, userIndex: -1, assistantIndexes: [], summaryIndex: i });
+			cur = null;
 		} else if (m.role === "assistant") {
 			if (!cur) {
 				cur = { key: `a${i}`, userIndex: -1, assistantIndexes: [] };
@@ -1311,6 +1321,45 @@ function TurnLite({ turn, messages }: { turn: Turn; messages: WebMessage[] }) {
 	);
 }
 
+/**
+ * 压缩分隔卡：卡片以上的消息照常显示（可编辑、可分叉），但模型只看得到它们的摘要；摘要可展开。
+ * 分支摘要卡：切换分支时离开的那条分支被总结成摘要发给模型。
+ */
+function SummaryCard({ message }: { message: WebMessage }) {
+	const { t } = useI18n();
+	const [open, setOpen] = useState(false);
+	const branch = message.summaryKind === "branch";
+	const summary = message.summary?.trim();
+	const title = branch
+		? t.branchSummaryTitle
+		: message.tokensBefore
+			? t.compactedTitleTokens.replace("{tokens}", fmtTokens(message.tokensBefore))
+			: t.compactedTitle;
+	const rule = <span aria-hidden="true" style={{ flex: 1, borderTop: "1px dashed var(--dsw-border-l3)" }} />;
+	return (
+		<div className="w-full" data-role="summary" data-message-id={message.id} style={{ fontSize: "var(--piweb-chat-font-s)", color: "var(--dsw-label-caption)" }}>
+			<div className="flex items-center gap-3">
+				{rule}
+				<span style={{ flex: "none", color: "var(--dsw-label-secondary)" }}>{title}</span>
+				{rule}
+			</div>
+			<div className="mt-1 flex flex-wrap items-center justify-center gap-x-2 text-center">
+				<span>{branch ? t.branchSummaryHint : t.compactedHint}</span>
+				{summary && (
+					<button type="button" className="hover:underline" aria-expanded={open} onClick={() => setOpen((value) => !value)} style={{ color: "var(--dsw-label-secondary)" }}>
+						{open ? t.hideSummary : t.showSummary}
+					</button>
+				)}
+			</div>
+			{open && summary && (
+				<div className="mt-2 rounded-xl px-3 py-2" style={{ background: "var(--dsw-hover)", color: "var(--dsw-label-primary)" }}>
+					<Markdown text={summary} />
+				</div>
+			)}
+		</div>
+	);
+}
+
 export function SessionStatsBar({
 	stats,
 }: {
@@ -1455,6 +1504,7 @@ export function ChatWindow({
 	stats,
 	onOpenTrajectory,
 	onOpenFile,
+	onOpenPath,
 	roundBadges,
 	onShowRound,
 }: {
@@ -1483,6 +1533,8 @@ export function ChatWindow({
 	/** 在本机编辑器打开工具行涉及的文件 */
 	onEditMessage?: (entryId: string, text: string) => void;
 	onOpenFile?: (path: string) => void;
+	/** 正文行内代码里的路径：用页内文件查看器打开；没给就退回 onOpenFile（本机编辑器） */
+	onOpenPath?: (path: string) => void;
 	roundBadges?: ReadonlyMap<string, RoundBadge>;
 	onShowRound?: (commit: string) => void;
 }) {
@@ -1502,8 +1554,9 @@ export function ChatWindow({
 		},
 	}), []);
 	useChatReadingAnchor(rootRef, scrollRef, chatScroll.shouldPin);
-	// 正文里可点击的文件路径（见 chat/markdown-actions）：只用查看器打开当前工作区内的相对路径
-	const markdownActions = useMemo<MarkdownActions>(() => ({ openFile: onOpenFile }), [onOpenFile]);
+	// 正文里可点击的文件路径（见 chat/markdown-actions）：只认当前工作区内的相对路径，
+	// 点开走页内文件查看器（不离开页面，路径不存在时查看器自己会报「文件不存在」）。
+	const markdownActions = useMemo<MarkdownActions>(() => ({ openFile: onOpenPath ?? onOpenFile }), [onOpenPath, onOpenFile]);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;
@@ -1541,6 +1594,8 @@ export function ChatWindow({
 		return -1;
 	}, [messages]);
 	const turns = useMemo(() => buildTurns(messages), [messages]);
+	// 工作指示 / 重试行挂在最后一个真正的回合上，压缩卡追加在末尾时也不抢走
+	const lastContentTurn = useMemo(() => turns.findLastIndex((turn) => turn.summaryIndex === undefined), [turns]);
 	const firstUser = useMemo(() => messages.findIndex((m) => m.role === "user"), [messages]);
 
 	// ---------- 回合懒渲染 ----------
@@ -1742,14 +1797,16 @@ export function ChatWindow({
 						{turns.map((turn, ti) => (
 							// 回合间 28px 的分隔挂在槽上：用户消息现在总是槽里的第一个子元素，它自己的 mt-7 会被 first:mt-0 吃掉
 							<div key={turn.key} data-turn-slot={ti} ref={slotRef(ti)} className="mt-7 first:mt-0">
-								{isNear(ti) ? (
+								{turn.summaryIndex !== undefined ? (
+									<SummaryCard message={messages[turn.summaryIndex]} />
+								) : isNear(ti) ? (
 									<TurnBlock
 										turn={turn}
 										messages={messages}
 										tools={tools}
 										cwd={cwd}
 										isStreaming={isStreaming}
-										isLast={ti === turns.length - 1}
+										isLast={ti === lastContentTurn}
 										lastAssistantIndex={lastAssistantIndex}
 										contextFiles={turn.userIndex >= 0 && turn.userIndex === firstUser ? contextFiles : undefined}
 										retryNotice={retryNotice}
@@ -1770,7 +1827,7 @@ export function ChatWindow({
 							</div>
 						))}
 						{/* 还没有任何消息就已在流式（极少见）：单独给一条工作指示 */}
-						{isStreaming && streamStartedAt && turns.length === 0 && (
+						{isStreaming && streamStartedAt && lastContentTurn < 0 && (
 							<div className="pw-turn">
 								<WorkingStep startedAt={streamStartedAt} outputTokens={stats?.tokens.output} workingMessage={workingMessage} hasLiveStep={Boolean(runningTool)} />
 							</div>

package/src/components/ContextMeter.tsx

@@ -8,6 +8,24 @@ import { formatCapacity, parseCapacity } from "@/lib/model-draft";
 import { classifyMessageChars } from "@/lib/process-format";
 import type { ContextBreakdown, TrajTokens } from "@/lib/types";
 
+type ContextMessage = {
+	role?: string;
+	content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>;
+	usage?: TrajTokens;
+	stopReason?: string;
+	timestamp?: number;
+	summaryKind?: string;
+};
+
+/**
+ * 消息列表会照常显示压缩前的历史，但模型上下文只从最近一张压缩卡往后算（卡片以上只剩摘要，已计入 compacted）。
+ * 保留下来的旧助手消息用量是压缩前那次请求的，也不能当「最近一次输入」。
+ */
+function inContext(messages: ContextMessage[]): { messages: ContextMessage[]; since?: number } {
+	const at = messages.findLastIndex((m) => m.role === "summary" && m.summaryKind === "compaction");
+	return at < 0 ? { messages } : { messages: messages.slice(at + 1), since: messages[at].timestamp };
+}
+
 export function ContextMeter({ percent, tokens, contextWindow, model, source, label }: {
 	percent: number | null;
 	tokens: number | null;
@@ -18,7 +36,7 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source, la
 	label?: string;
 	source?: {
 		systemChars: number;
-		messages: Array<{ role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: TrajTokens; stopReason?: string }>;
+		messages: ContextMessage[];
 		breakdown?: ContextBreakdown;
 		loadFull?: () => Promise<unknown> | unknown;
 	};
@@ -38,9 +56,11 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source, la
 	}, [open]);
 
 	// 流式期间只在打开弹窗后扫描，分类是实际文本字符数，不是假设的 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 context = useMemo(() => inContext(open ? source?.messages ?? [] : []), [open, source]);
+	const chars = useMemo(() => classifyMessageChars(context.messages), [context]);
+	const lastUsage = useMemo(() => context.messages.findLast((m) => m.role === "assistant" && m.stopReason !== "error" && m.stopReason !== "aborted" && m.stopReason !== "pending" &&
+		(context.since === undefined || (m.timestamp ?? 0) >= context.since) &&
+		(m.usage?.input ?? 0) + (m.usage?.cacheRead ?? 0) + (m.usage?.cacheWrite ?? 0) + (m.usage?.output ?? 0) > 0)?.usage, [context]);
 	const measuredInput = lastUsage ? (lastUsage.input ?? 0) + (lastUsage.cacheRead ?? 0) + (lastUsage.cacheWrite ?? 0) : null;
 
 	// 刚改过窗口：服务端已落盘，但页面上的 contextWindow 还是改之前的值（冷会话要等下一次快照）。

package/src/components/ExtensionUI.tsx

@@ -7,7 +7,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { IconShieldOutline16 } from "@/components/icons";
 import { useI18n } from "@/i18n";
-import type { ExtensionDialog } from "@/hooks/usePiWeb";
+import type { ExtensionDialog, PiWebNotice } from "@/hooks/usePiWeb";
 
 /** message 若全是 "key : value" 行（权限对话框的常见形态），解析成键值表渲染 */
 function parseKeyValueRows(message: string): { key: string; value: string }[] | null {
@@ -154,11 +154,17 @@ export function ExtensionNotices({
 	onDismiss,
 	children,
 }: {
-	notices: { id: string; message: string; type: "info" | "warning" | "error"; ts: number }[];
+	notices: PiWebNotice[];
 	onDismiss: (id: string) => void;
 	/** 同一摞里的其它常驻提示（如更新提示条），排在扩展通知上面，免得两处浮层叠在一起 */
 	children?: React.ReactNode;
 }) {
+	const { t } = useI18n();
+	const text = (n: PiWebNotice) => {
+		if (n.code === "external_reload") return t.externalSessionReloaded.replace("{n}", String(n.count ?? 0));
+		if (n.code === "external_write") return t.externalSessionWriting.replace("{n}", String(n.count ?? 0));
+		return n.message;
+	};
 	// 通知 6 秒后自动消失
 	useEffect(() => {
 		if (!notices.length) return;
@@ -179,7 +185,7 @@ export function ExtensionNotices({
 					style={{ fontSize: 12.5, background: "var(--dsw-glass-popover)", border: "0.5px solid var(--dsw-border-l2)", boxShadow: "var(--dsw-elevation-soft)", borderLeft: `3px solid ${color(n.type)}` }}
 					onClick={() => onDismiss(n.id)}
 				>
-					{n.message}
+					{text(n)}
 				</button>
 			))}
 		</div>

package/src/components/FileViewer.tsx

@@ -17,6 +17,7 @@ import { IconAtOutline16, IconChevronDown14, IconChevronUp14, IconCloseOutline14
 import type { GrowthApi } from "@/hooks/useGrowth";
 import { useI18n } from "@/i18n";
 import { fileIconSrc } from "@/lib/file-icons";
+import { fmtBytes } from "@/lib/format";
 import { fuzzyScore, type TreeNode } from "@/lib/growth-tree";
 import type { ViewerState } from "@/hooks/useFileViewer";
 import { highlightCode, languageForPath } from "@/lib/highlight";
@@ -113,8 +114,7 @@ export function FileViewer({
 	const [treeFilter, setTreeFilter] = useState("");
 	const [reveal, setReveal] = useState<{ path: string; key: number } | null>(null);
 	const [loaded, setLoaded] = useState<Loaded | null>(null);
-	const [dirPage, setDirPage] = useState<(DirPage & { key: string }) | null>(null);
-	const [dirMore, setDirMore] = useState<DirEntry[]>([]);
+	const [dirPage, setDirPage] = useState<(DirPage & { key: string; error?: string }) | null>(null);
 	const diffRef = useRef<FullDiffHandle>(null);
 	const rootRef = useRef<HTMLDivElement>(null);
 	const quickInputRef = useRef<HTMLInputElement>(null);
@@ -138,41 +138,44 @@ export function FileViewer({
 	const [dirFallback, setDirFallback] = useState<string | null>(null);
 	const dirPath = activeTab?.kind === "dir" ? activeTab.path : dirFallback;
 	const isDir = Boolean(dirPath);
+	// @src/ 这类带尾斜杠的引用：列目录时去掉
+	const dirRel = dirPath ? dirPath.replace(/\/+$/, "") : null;
+	const dirKey = dirRel !== null && cwd ? `dir|${cwd}|${dirRel}` : null;
+	// 只认当前目录的那一页：从一个文件夹页签切到另一个时，上一个目录的条目不能在新请求回来前冒充新目录
+	// （点上去会拼出不存在的路径），「加载更多」也不能接着上一个目录的偏移拉
+	const page = dirPage && dirPage.key === dirKey ? dirPage : null;
 	// 文件夹：列目录（分页，后端已按 .gitignore 过滤），不读文件内容
 	useEffect(() => {
-		if (!dirPath || !cwd || !activeTab) {
+		if (dirRel === null || !cwd || !dirKey) {
 			setDirPage(null);
-			setDirMore([]);
 			return;
 		}
-		// @src/ 这类带尾斜杠的引用：列目录时去掉
-		const path_ = dirPath.replace(/\/+$/, "");
-		const key = `dir|${path_}`;
 		let alive = true;
-		setDirMore([]);
 		void (async () => {
 			try {
-				const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(path_)}&offset=0`);
-				if (alive) setDirPage({ key, ...data });
+				const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(dirRel)}&offset=0`);
+				if (alive) setDirPage({ key: dirKey, ...data });
 			} catch (error) {
-				if (alive) setDirPage({ key, dir: path_, entries: [], nextOffset: null, truncated: false, error: error instanceof Error ? error.message : t.viewerLoadFailed } as DirPage & { key: string; error?: string });
+				if (alive) setDirPage({ key: dirKey, dir: dirRel, entries: [], nextOffset: null, truncated: false, error: error instanceof Error ? error.message : t.viewerLoadFailed });
 			}
 		})();
 		return () => {
 			alive = false;
 		};
-	}, [activeTab, dirPath, cwd, t.viewerLoadFailed]);
+	}, [dirRel, dirKey, cwd, t.viewerLoadFailed]);
 
 	/** 目录还有下一页时接着拉（大目录：node_modules 这种已被忽略，剩下的也不会太多） */
 	const loadMore = useCallback(async () => {
-		if (!activeTab || !cwd || !dirPage?.nextOffset) return;
+		if (!page?.nextOffset || dirRel === null || !cwd) return;
+		const base = page;
 		try {
-			const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(activeTab.path)}&offset=${dirPage.nextOffset}`);
-			setDirPage({ key: `dir|${activeTab.path}`, ...data, entries: [...dirPage.entries, ...data.entries] });
+			const data = await requestJson<DirPage>(`/api/files?cwd=${encodeURIComponent(cwd)}&path=${encodeURIComponent(dirRel)}&offset=${base.nextOffset}`);
+			// 请求途中切走了（或别的请求先换了这一页）就丢掉结果
+			setDirPage((current) => (current === base ? { ...base, ...data, key: base.key, entries: [...base.entries, ...data.entries] } : current));
 		} catch {
 			// 下一页失败就留在当前这页，用户可以再点
 		}
-	}, [activeTab, cwd, dirPage]);
+	}, [page, dirRel, cwd]);
 
 	// 取数据
 	useEffect(() => {
@@ -497,10 +500,10 @@ export function FileViewer({
 						{loaded?.truncated && <div className="pw-viewer-notice" data-kind="warn">{mode === "diff" ? t.viewerPatchTruncated : t.filePreviewTruncated}</div>}
 						{isDir ? (
 							<div className="min-h-0 flex-1 overflow-auto" data-testid="viewer-dir">
-								<div className="px-3 py-2" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
-									{t.viewerDirHint.replace("{n}", String(dirPage?.entries.length ?? 0))}
+								<div className="px-3 py-2" style={{ fontSize: 11.5, color: page?.error ? "var(--dsw-danger)" : "var(--dsw-label-caption)" }}>
+									{!page ? t.panelLoading : page.error ? page.error : t.viewerDirHint.replace("{n}", String(page.entries.length))}
 								</div>
-								{dirPage?.entries.map((entry) => (
+								{page?.entries.map((entry) => (
 									<button
 										key={entry.name}
 										type="button"
@@ -512,11 +515,11 @@ export function FileViewer({
 										<img className="pw-tree-icon" src={entry.kind === "dir" ? "/file-icons/folder-close.svg" : fileIconSrc(entry.name)} alt="" />
 										<span className="min-w-0 flex-1 truncate" style={{ fontSize: 12.5, fontFamily: entry.kind === "dir" ? "inherit" : "var(--font-mono)" }}>{entry.name}</span>
 										{entry.kind === "file" && entry.size !== undefined && (
-											<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", fontVariantNumeric: "tabular-nums" }}>{entry.size} B</span>
+											<span style={{ fontSize: 11, color: "var(--dsw-label-caption)", fontVariantNumeric: "tabular-nums" }}>{fmtBytes(entry.size)}</span>
 										)}
 									</button>
 								))}
-								{dirPage?.nextOffset ? (
+								{page?.nextOffset ? (
 									<button type="button" className="pw-chip mx-3 my-2" onClick={() => void loadMore()}>{t.viewerDirMore}</button>
 								) : null}
 							</div>