@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/ChatWindow.tsx

@@ -20,15 +20,19 @@ import {
 	IconFileOutline16,
 	IconRefreshOutline14,
 	IconSearchOutline16,
+	IconSkillOutline16,
 	IconTerminalOutline14,
 	IconThinkOutline14,
 	IconWarningOutline16,
 } from "@/components/icons";
 import { DiffView, type DiffLine, parseUnifiedDiff } from "@/components/DiffView";
 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";
 import { useI18n } from "@/i18n";
 import { fmtDuration, fmtPercent, fmtThroughput, fmtTokens } from "@/lib/format";
@@ -271,7 +275,7 @@ function fmtSpan(ms: number): string {
 }
 
 type StepTone = "dim" | "live" | "fail" | "warn";
-type StepKind = ToolKind | "think" | "summary" | "context" | "error" | "abort" | "retry" | "work";
+type StepKind = ToolKind | "think" | "summary" | "context" | "error" | "abort" | "retry" | "work" | "skill";
 
 function KindIcon({ kind }: { kind: StepKind }) {
 	const p = { size: 14, style: { flex: "none" as const } };
@@ -297,6 +301,8 @@ function KindIcon({ kind }: { kind: StepKind }) {
 			return <IconRefreshOutline14 {...p} />;
 		case "work":
 			return <span className="pw-pi" aria-hidden>π</span>;
+		case "skill":
+			return <IconSkillOutline16 size={14} style={{ flex: "none" }} />;
 		default:
 			return <IconDataOutline16 {...p} />;
 	}
@@ -442,12 +448,20 @@ const ToolStep = memo(function ToolStep({
 	}, [args, isWriteTool, kind, output, state]);
 	const failed = Boolean(state?.isError) && !running;
 	const summary = toolSummary(name, args, cwd);
-	let argsTitle = summary.text;
-	try {
-		argsTitle = JSON.stringify(args, null, 2).slice(0, 2000);
-	} catch {
-		/* keep summary */
-	}
+	// 标题 JSON：先截断超长字符串值再序列化——write 的 content 几 MB，直接 stringify
+	// 每次渲染白算一遍再扔掉 99.9%；截后仍保 2000 字符上限的展示语义不变
+	const argsTitle = useMemo(() => {
+		const clip = (value: unknown): unknown =>
+			typeof value === "string" && value.length > 600 ? `${value.slice(0, 600)}…` : value;
+		try {
+			const shallow = args && typeof args === "object" && !Array.isArray(args)
+				? Object.fromEntries(Object.entries(args as Record<string, unknown>).map(([k, v]) => [k, clip(v)]))
+				: args;
+			return JSON.stringify(shallow, null, 2).slice(0, 2000);
+		} catch {
+			return summary.text;
+		}
+	}, [args, summary.text]);
 	const argPath = (() => {
 		if (kind !== "read" && kind !== "write") return "";
 		const a = args as { path?: unknown; file_path?: unknown } | undefined;
@@ -642,7 +656,7 @@ const ERROR_HINT_KEY: Record<ModelErrorKind, string> = {
 	moderation: "modelErrorModeration",
 };
 
-function ErrorStep({ message, count, model }: { message: string; count: number; model?: string }) {
+function ErrorStep({ message, count }: { message: string; count: number }) {
 	const { t } = useI18n();
 	const tt = t as unknown as Dict;
 	const kind = classifyModelError(message);
@@ -655,7 +669,6 @@ function ErrorStep({ message, count, model }: { message: string; count: number;
 					{hint ? ` · ${hint}` : ""}
 				</span>
 				{count > 1 && <span className="pw-meta">{t.modelErrorTimes.replace("{n}", String(count))}</span>}
-				{model && <span className="pw-meta">{model}</span>}
 			</div>
 		</Step>
 	);
@@ -700,6 +713,41 @@ function ContextStep({ resource, cwd }: { resource: ContextResource | string; cw
 	);
 }
 
+// ---------- 技能调用：本轮用过哪个技能（不是一条用户发言）----------
+/**
+ * pi 把 `/skill:name 参数` 在输入端展开成一段用户消息（SKILL.md 正文 + 参数接在 `</skill>` 后），
+ * 模型必须收到它。但那不是「用户发了一条消息」：
+ *   - Claude Code 里技能是模型发起的 Skill 工具调用，用户打的正文是它的 `args` 入参
+ *     （tool_result 只有 "Launching skill: name"，不含 args）；
+ *   - Codex 里没有技能步骤，模型直接读 SKILL.md 文件。
+ * 所以这里不渲染用户气泡，而是放进本轮过程：一行「使用技能 name」，参数挂在这一行上、可展开看全文。
+ */
+function SkillStep({ name, args }: { name: string; args: string }) {
+	const { t } = useI18n();
+	const tt = t as unknown as Dict;
+	const [open, setOpen] = useState(false);
+	const oneLine = args.replace(/\s+/g, " ").trim();
+	const line = (
+		<>
+			<span className="pw-verb">{tt.skillStep}</span>
+			<span className="pw-skill-name">{name}</span>
+			{oneLine && !open && <span className="pw-gist">{oneLine}</span>}
+		</>
+	);
+	return (
+		<Step kind="skill">
+			{oneLine ? (
+				<button type="button" className="pw-line pw-clickable" aria-expanded={open} onClick={() => setOpen((value) => !value)} title={args}>
+					{line}
+				</button>
+			) : (
+				<div className="pw-line" title={`${tt.skillStepTitle} · ${name}`}>{line}</div>
+			)}
+			{open && oneLine && <pre className="pw-output pw-think-full">{args}</pre>}
+		</Step>
+	);
+}
+
 // ---------- 工作指示：π 记号 + 英文状态词闪光（没有正在进行的步骤时）或「Working for 12s」；整行固定英文 ----------
 
 function WorkingStep({ startedAt, outputTokens, workingMessage, hasLiveStep }: { startedAt: number; outputTokens?: number; workingMessage?: string | null; hasLiveStep: boolean }) {
@@ -725,7 +773,7 @@ type Item =
 	| { kind: "narr"; key: string; msgIndex: number; text: string; live: boolean; error: boolean }
 	| { kind: "image"; key: string; msgIndex: number; data: string; mimeType: string }
 	| { kind: "tool"; key: string; msgIndex: number; call: ToolCallContent; state?: ToolCardState }
-	| { kind: "error"; key: string; msgIndex: number; message: string; count: number; model?: string }
+	| { kind: "error"; key: string; msgIndex: number; message: string; count: number }
 	| { kind: "abort"; key: string; msgIndex: number };
 
 type Run = { kind: "run"; key: string; items: Item[]; hasThink: boolean; cmds: number; reads: number; searches: number; durationMs?: number };
@@ -743,7 +791,7 @@ function buildItems(messages: WebMessage[], k: number, tools: Record<string, Too
 		else if (c.type === "text" && !omitText && c.text.trim()) items.push({ kind: "narr", key, msgIndex: k, text: c.text, live: live && i === lastIndex, error: isError });
 		else if (c.type === "image" && !omitText) items.push({ kind: "image", key, msgIndex: k, data: c.data, mimeType: c.mimeType });
 	});
-	if (isError && (errorCount ?? 1) > 0) items.push({ kind: "error", key: `${k}-err`, msgIndex: k, message: message.errorMessage || message.stopReason || "error", count: errorCount ?? 1, model: message.model });
+	if (isError && (errorCount ?? 1) > 0) items.push({ kind: "error", key: `${k}-err`, msgIndex: k, message: message.errorMessage || message.stopReason || "error", count: errorCount ?? 1 });
 	if (message.stopReason === "aborted") items.push({ kind: "abort", key: `${k}-abort`, msgIndex: k });
 	return items;
 }
@@ -832,13 +880,13 @@ 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":
 			return <ToolStep id={item.call.id} name={item.call.name} args={item.call.arguments} state={item.state} cwd={cwd} onInspectTool={onInspectTool} onOpenFile={onOpenFile} />;
 		case "error":
-			return <ErrorStep message={item.message} count={item.count} model={item.model} />;
+			return <ErrorStep message={item.message} count={item.count} />;
 		case "abort":
 			return <AbortStep />;
 		default:
@@ -869,26 +917,28 @@ 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 && (
-				<MessageActions
-					text={textAll.trim()}
-					onFork={message.id && onFork ? () => onFork(message.id!) : undefined}
-					durationMs={(message.endedAt ?? message.timestamp) != null && turnStartMs != null ? Math.max(0, (message.endedAt ?? message.timestamp)! - turnStartMs) : undefined}
-					usage={message.usage}
-					time={message.timestamp}
-				/>
+				<div>
+					<MessageActions
+						text={textAll.trim()}
+						onFork={message.id && onFork ? () => onFork(message.id!) : undefined}
+						durationMs={(message.endedAt ?? message.timestamp) != null && turnStartMs != null ? Math.max(0, (message.endedAt ?? message.timestamp)! - turnStartMs) : undefined}
+						usage={message.usage}
+						time={message.timestamp}
+					/>
+				</div>
 			)}
-			{/* 本轮改了 N 个文件：跟在耗时 / 时间戳那一行后面。原先是挂在用户消息下面，
-			    放在这里才读得通——先看到答案，再看到这一轮动了什么。 */}
+			{/* 本轮改了 N 个文件：独立换行，与上方复制按钮左边对齐 */}
 			{showActions && roundBadge && (
-				<div className="msg-actions">
+				<div className="mt-1.5 flex items-center">
 					<button
 						type="button"
 						className="pw-chip"
@@ -918,13 +968,37 @@ export interface RoundBadge {
 	del: number;
 }
 
-/** 行级 memo：流式期间只有最后一条消息变化，历史行全部跳过重渲染 */
-const UserMessage = memo(function UserMessage({ message, onEditMessage }: { message: WebMessage; onEditMessage?: (entryId: string, text: string) => void }) {
-	const { t } = useI18n();
-	const text = message.content
+/** 用户消息里的纯文本（多个 text 块拼起来）；技能识别与正常渲染都用它 */
+function userTextOf(message: WebMessage): string {
+	return message.content
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
 		.map((c) => c.text)
 		.join("\n");
+}
+
+/** 用户附带的图片；正常消息与技能消息共用一套排版（靠右、圆角、细描边） */
+function UserImages({ images }: { images: Array<{ type: "image"; data: string; mimeType: string }> }) {
+	if (!images.length) return null;
+	return (
+		<div className="mb-2 flex max-w-[85%] flex-wrap justify-end gap-2 self-end">
+			{images.map((image, index) => (
+				<PreviewImage
+					key={index}
+					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)" }}
+				/>
+			))}
+		</div>
+	);
+}
+
+/** 行级 memo：流式期间只有最后一条消息变化，历史行全部跳过重渲染 */
+const UserMessage = memo(function UserMessage({ message, onEditMessage }: { message: WebMessage; onEditMessage?: (entryId: string, text: string) => void }) {
+	const { t } = useI18n();
+	const text = userTextOf(message);
 	const images = message.content.filter((content) => content.type === "image");
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(text);
@@ -932,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"
@@ -954,7 +1030,7 @@ const UserMessage = memo(function UserMessage({ message, onEditMessage }: { mess
 						type="button"
 						className="btn-primary-white"
 						style={{ height: 26, padding: "0 12px", fontSize: 12 }}
-						disabled={!draft.trim() || draft.trim() === text.trim()}
+						disabled={!draft.trim()}
 						onClick={submit}
 					>
 						{t.sendEdit}
@@ -965,27 +1041,18 @@ const UserMessage = memo(function UserMessage({ message, onEditMessage }: { mess
 	}
 	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" 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：贴进来的代码块/列表不再是一坨纯文本 */}
+			<UserImages images={images} />
+			{/* 用户消息也走 Markdown：贴进来的代码块/列表不再是一坨纯文本。
+			    技能展开的消息不会走到这里（在回合层被识别成技能步骤，见 TurnBlockView）。 */}
 			{text && <div className="msg-user-bubble"><Markdown text={text} /></div>}
 			{/* 用户消息：复制 + 原地编辑重发（编辑后模型从这条消息重新回答）；时钟在图标左侧（dsh clock=start） */}
 			{text && (
@@ -1002,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[] = [];
@@ -1011,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: [] };
@@ -1074,6 +1146,8 @@ function TurnBlockView({
 }) {
 	const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
 	const user = turn.userIndex >= 0 ? messages[turn.userIndex] : undefined;
+	// 技能展开的用户消息不在这一层当「发言」渲染，改成本轮过程里的一个技能步骤
+	const skill = useMemo(() => (user ? parseExpandedSkill(userTextOf(user)) : null), [user]);
 	const assistants = turn.assistantIndexes;
 	const lastIdx = assistants[assistants.length - 1];
 	const turnLive = isStreaming && isLast;
@@ -1116,13 +1190,15 @@ function TurnBlockView({
 	const blocks: Block[] = turnLive ? items.map((item) => ({ kind: "item", item })) : collapseRuns(items, finalIdx, spanOf);
 	const last = items[items.length - 1];
 	const hasLiveStep = Boolean(runningTool) || (last?.kind === "think" && last.live) || (last?.kind === "narr" && last.live);
-	const showProcess = items.length > 0 || Boolean(contextFiles?.length) || turnLive || (isLast && Boolean(retryNotice));
+	const showProcess = items.length > 0 || Boolean(contextFiles?.length) || turnLive || Boolean(skill) || (isLast && Boolean(retryNotice));
 
 	return (
 		<>
-			{user && <UserMessage message={user} onEditMessage={onEditMessage} />}
+			{user && !skill && <UserMessage message={user} onEditMessage={onEditMessage} />}
+			{skill && <UserImages images={user?.content.filter((c) => c.type === "image") ?? []} />}
 			{showProcess && (
 				<div className="pw-turn">
+					{skill && <SkillStep name={skill.name} args={skill.args} />}
 					{contextFiles?.map((resource, i) => (
 						<ContextStep key={`ctx-${typeof resource === "string" ? resource : `${resource.source}-${resource.path}`}-${i}`} resource={resource} cwd={cwd} />
 					))}
@@ -1245,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,
 }: {
@@ -1265,20 +1380,26 @@ export function SessionStatsBar({
 	if (stats.ttftSteps > 0) speeds.push(`${t.ttftAverage} ${fmtDuration(stats.ttftMs / stats.ttftSteps)}`);
 	if (stats.decodeMs > 0) speeds.push(`${fmtThroughput(stats.decodeTokens / (stats.decodeMs / 1000))} tok/s`);
 	if (speeds.length) groups.push(speeds.join(" · "));
+	// 计费输入 = 新输入 + 命中缓存 + 写缓存。上游不返回 cacheRead/cacheWrite 时（很多中转与
+	// 自建网关只给 prompt_tokens / completion_tokens），缓存命中率恒为 0——那不是「没命中」而是
+	// 「没这个数据」，显示 0.00% 会误导，所以整项不显示。
 	const billedInput = stats.tokens.input + stats.tokens.cacheRead + stats.tokens.cacheWrite;
+	const cacheReported = stats.tokens.cacheRead > 0 || stats.tokens.cacheWrite > 0;
 	if (billedInput > 0 || stats.tokens.output > 0) {
-		if (billedInput > 0) groups.push(`${t.cacheHits} ${fmtPercent((stats.tokens.cacheRead / billedInput) * 100)}`);
+		if (billedInput > 0 && cacheReported) groups.push(`${t.cacheHits} ${fmtPercent((stats.tokens.cacheRead / billedInput) * 100)}`);
 		groups.push(`${t.inputTokens} ${fmtTokens(billedInput)} tok · ${t.outputTokens} ${fmtTokens(stats.tokens.output)} tok`);
 	}
 	const line = groups.join(" | ");
 	return (
-		// 悬停显示完整统计：自定义浮层固定在统计条上方（原生 title 位置不可控）
-		// 容器只有 544px（内容窄轴下限）而整行实测 959px，以前一律省略号截断：
-		// 提高精度后更长，「输入 / 输出 tokens」这类用户最关心的反而看不到。
-		// 改成允许换行：窄屏折成两行完整显示，代价是纵向多占 20px。
+		// 悬停显示完整统计:自定义浮层固定在统计条上方(原生 title 位置不可控)。
+		// 容器只有 544px(内容窄轴下限)而整行实测 959px,所以行本身保持单行 +
+		// 省略号:统计条只有 20px 高,折行会把输入卡顶上去(手机上尤其明显)。
+		// 想看完的方法有两条 —— 桌面悬停看浮层,手机上由「远程连接」的
+		// mobile-fit.css 把这一行改成横向滑动(见 src/lib/remote/assets.json),
+		// 所以 544px 里被省略号切掉的部分在手机上是滑得到的。
 		<div className="group relative mx-auto mt-1 block w-full px-4 pt-1 text-center">
 			<div
-				className="[overflow-wrap:anywhere]"
+				className="overflow-hidden text-ellipsis whitespace-nowrap"
 				style={{ fontSize: "var(--dsh-content-font-size-secondary, 13px)", lineHeight: "20px", color: "var(--dsw-label-caption)" }}
 			>
 				{line}
@@ -1383,6 +1504,7 @@ export function ChatWindow({
 	stats,
 	onOpenTrajectory,
 	onOpenFile,
+	onOpenPath,
 	roundBadges,
 	onShowRound,
 }: {
@@ -1411,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;
 }) {
@@ -1430,6 +1554,9 @@ export function ChatWindow({
 		},
 	}), []);
 	useChatReadingAnchor(rootRef, scrollRef, chatScroll.shouldPin);
+	// 正文里可点击的文件路径（见 chat/markdown-actions）：只认当前工作区内的相对路径，
+	// 点开走页内文件查看器（不离开页面，路径不存在时查看器自己会报「文件不存在」）。
+	const markdownActions = useMemo<MarkdownActions>(() => ({ openFile: onOpenPath ?? onOpenFile }), [onOpenPath, onOpenFile]);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;
@@ -1467,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]);
 
 	// ---------- 回合懒渲染 ----------
@@ -1641,6 +1770,7 @@ export function ChatWindow({
 				/>
 			))}
 			<ChatScrollContext.Provider value={chatScroll}>
+				<MarkdownActionsProvider value={markdownActions}>
 				<div
 					ref={scrollRef}
 					className="min-h-0 flex-1 overflow-y-auto"
@@ -1667,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}
@@ -1695,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>
@@ -1731,6 +1863,7 @@ export function ChatWindow({
 						)}
 					</div>
 				</div>
+				</MarkdownActionsProvider>
 			</ChatScrollContext.Provider>
 			{/* 右侧大纲导航：从助手回答的标题和用户消息生成，随滚动高亮，悬停展开 */}
 			<OutlineRail scrollRef={scrollRef} revision={`${messages.length}:${nearTurns.size}:${isStreaming ? 1 : 0}`} />

package/src/components/ContextMeter.tsx

@@ -8,17 +8,35 @@ 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;
 	contextWindow: number | null;
 	/** 当前会话的模型：有它才能在弹窗里改上下文窗口 */
 	model?: { provider: string; id: string } | null;
-	/** 覆盖「上下文估算」这个措辞：真实用量（如旁聊）不该叫估算 */
+	/** 覆盖「上下文估算」这个措辞：拿到真实用量时不该叫估算 */
 	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 还是改之前的值（冷会话要等下一次快照）。
@@ -75,7 +95,6 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source, la
 		{ 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: "background", label: t.contextBackground, value: b?.background, color: "#5B8DEF" },
 		{ 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)" },
@@ -100,15 +119,20 @@ export function ContextMeter({ percent, tokens, contextWindow, model, source, la
 
 	return (
 		<div ref={ref} className="relative">
-			<button className="icon-btn" style={{ width: 28, height: 28 }} title={usageLabel} aria-label={usageLabel} onClick={() => setOpen((o) => !o)}>
+			<button className="icon-btn isx-ring-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 > 85 ? "var(--dsw-warn)" : "var(--dsw-accent)"} strokeWidth="2"
+					<circle cx="7" cy="7" r={r} fill="none" stroke={p > 85 ? "var(--dsw-warn)" : "var(--dsw-label-primary)"} 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-72 p-4" style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}>
+				/* 弹窗右下角对齐在直径 28px 的圆环上，而圆环离屏幕右缘还有 60-70px：固定
+				   w-72(288px) 在 ≤360px 的手机会往左顶出屏幕（实测 344px 下 left=-15）。
+				   .pw-context-popover 不是给本仓 CSS 用的，是「远程连接」注入的 mobile-fit.css
+				   认的钩子 —— 它用 calc(100vw-96px) + !important 压过那里的 .popover 兜底，重命名
+				   或删掉这个类会让手机端重新冒出溢出。 */
+				<div className="pw-context-popover popover absolute bottom-9 right-0 z-50 w-72 max-w-[calc(100vw-96px)] p-4" style={{ fontSize: "var(--dsh-content-font-size-secondary)" }}>
 					{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>}
 					{window_ > 0 && (
 						<div className="mt-3 flex h-2 w-full overflow-hidden rounded-full" style={{ background: "var(--dsw-selector)" }} data-testid="context-bar" aria-hidden>