@rexvane/piweb 0.3.21 → 0.3.23

package/src/components/ChatInput.tsx

@@ -6,18 +6,23 @@
  * 运行中：Enter 按设置插话 / 排队，Ctrl(⌘)+Enter 用另一种；停止按钮会把排队消息取回输入框（pi 终端同款）；
  * 排队中的消息列在输入卡上方，↑（空输入框时）取回编辑。Enter 发送 / Shift+Enter 换行。
  */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
 	IconAtOutline16,
 	IconFileOutline16,
+	IconFolderClose16,
 	IconSendArrowUp14,
 	IconStopFill16,
 	IconTerminalOutline14,
 } from "@/components/icons";
 import { ContextMeter } from "@/components/ContextMeter";
+import { COLLAPSE_AT, ComposerImages } from "@/components/composer/ComposerImages";
 import { ModelSelector, type ModelChoice } from "@/components/ModelSelector";
 import { useI18n } from "@/i18n";
+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 type { ImageAttachment } from "@/lib/types";
 
 export interface SlashCommand {
@@ -55,6 +60,7 @@ export function ChatInput({
 	contextWindow,
 	contextSource,
 	contextVisible = true,
+	cwd,
 	model,
 	thinkingLevel,
 	thinkingLevels,
@@ -89,12 +95,14 @@ export function ChatInput({
 	/** 上下文分段数据源：ContextMeter 弹窗打开时才做字符统计 */
 	contextSource?: {
 		systemChars: number;
-		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string }> }[];
+		messages: { role?: string; content: Array<{ type: string; text?: string; thinking?: string; arguments?: unknown; name?: string }>; usage?: import("@/lib/types").TrajTokens; stopReason?: string }[];
 		breakdown?: import("@/lib/types").ContextBreakdown;
 		loadFull?: () => Promise<unknown> | unknown;
 	};
 	/** 还没有对话时隐藏上下文计量 */
 	contextVisible?: boolean;
+	/** 工作区根：@ 引用的候选清单从这里取（不传就不启用 @ 引用） */
+	cwd?: string;
 	model?: { provider: string; id: string; name: string };
 	thinkingLevel?: string;
 	thinkingLevels: string[];
@@ -149,10 +157,20 @@ export function ChatInput({
 	const uploadBusy = uploadCount > 0 || pendingUploadCount > 0;
 	const sendBusy = sending || pendingSend;
 	const [dragActive, setDragActive] = useState(false);
+	/** 引用 chip 超过 COLLAPSE_AT 就先折叠：手机上折行会把输入框顶掉（图片的折叠在 ComposerImages 里） */
+	const [refsExpanded, setRefsExpanded] = useState(false);
+	/** 上传文件超过 4 个时的展开状态（与引用同一套折叠规则） */
+	const [uploadsExpanded, setUploadsExpanded] = useState(false);
 	const dragDepth = useRef(0);
 	const [modelOpen, setModelOpen] = useState(false);
 	const [cmdIdx, setCmdIdx] = useState(0);
 	const [cmdDismissed, setCmdDismissed] = useState(false);
+	// @ 引用：打字触发候选，选中后落成引用 chip（发送时统一拼成 `@路径` 行）
+	const [mention, setMention] = useState<{ query: string; start: number; tokenEnd: number } | null>(null);
+	const [mentionIdx, setMentionIdx] = useState(0);
+	/** 被 Esc 关掉的那个 token（位置 + 原文）；光标在它里面移动不再弹，改了字、或换成别的 token 重新弹 */
+	const mentionDismissed = useRef<string | null>(null);
+	const mentionMenuRef = useRef<HTMLDivElement>(null);
 	const taRef = useRef<HTMLTextAreaElement>(null);
 	const wrapRef = useRef<HTMLDivElement>(null);
 	const { t } = useI18n();
@@ -179,6 +197,79 @@ export function ChatInput({
 	const filteredCommands = (commands ?? []).filter((c) => c.name.toLowerCase().startsWith(slash.split(" ")[0].toLowerCase()));
 	const visibleCommands = filteredCommands;
 	const commandMode = typedCommandMode;
+
+	// ---------- @ 引用：输入 @ 弹候选，选中落成引用 chip ----------
+	// 候选清单一次拉全量（工作区 git 可见文件），之后每个字符都在本地匹配；规则与 pi 终端的 @ 补全一致（见 workspace-index）。
+	const mentionMode = mention !== null;
+	const mentionQuery = mention?.query ?? null;
+	const files = useWorkspaceFiles(cwd ?? "", mentionMode);
+	// 只在候选清单或查询变了时重算：光标移动、其它状态变化引起的重渲染不该每次扫一遍全量清单
+	const suggestions = useMemo(
+		() => (mentionQuery === null ? [] : suggestPaths(files.candidates, mentionQuery)),
+		[files.candidates, mentionQuery],
+	);
+	const effectiveMentionIdx = Math.min(mentionIdx, Math.max(0, suggestions.length - 1));
+
+	useEffect(() => {
+		mentionMenuRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+	}, [mentionIdx, suggestions.length]);
+
+	/**
+	 * 文本 / 光标变了就重新判是否在 @ token 里（Esc 关过的同一个 token 不再弹）。
+	 * 没有工作区就不弹：没有候选来源，菜单只会空转还拦着方向键和 Esc。
+	 */
+	const syncMention = (value: string, caret: number | null) => {
+		const token = caret === null || !cwd ? null : atToken(value, caret);
+		if (!token) {
+			// 离开 token 就忘掉 Esc：之后在同一位置打新的 @ 照常弹
+			mentionDismissed.current = null;
+			setMention(null);
+			return;
+		}
+		if (mentionDismissed.current === `${token.start}:${value.slice(token.start, token.tokenEnd)}`) {
+			setMention(null);
+			return;
+		}
+		if (!mention || mention.start !== token.start || mention.query !== token.query) setMentionIdx(0);
+		if (!mention || mention.start !== token.start || mention.query !== token.query || mention.tokenEnd !== token.tokenEnd) {
+			setMention({ query: token.query, start: token.start, tokenEnd: token.tokenEnd });
+		}
+	};
+
+	const closeMention = (dismiss: boolean) => {
+		if (dismiss && mention) mentionDismissed.current = `${mention.start}:${text.slice(mention.start, mention.tokenEnd)}`;
+		setMention(null);
+		setMentionIdx(0);
+	};
+
+	/** 选中候选：目录引用文件夹本身（要往下钻就继续打 `@src/lib/`），token 从正文里播掉 */
+	const applyMention = (candidate: PathCandidate) => {
+		if (!mention) return;
+		const { start, tokenEnd } = mention;
+		// 目录存成 `src/lib/`：chip 靠尾斜杠判断文件夹（去重会把尾斜杠归一化掉）
+		const path = candidate.dir ? `${candidate.path}/` : candidate.path;
+		changeDraft((previous) => {
+			const refs = previous.references ?? [];
+			// 目录带尾斜杠、文件不带：去重按去掉尾斜杠比较，
+			// 否则「文件面板引用的 src/lib」与「@ 选的 src/lib/」会变成两个 chip
+			const samePath = (a: string, b: string) => a.replace(/[\\/]+$/, "") === b.replace(/[\\/]+$/, "");
+			return {
+				...previous,
+				text: previous.text.slice(0, start) + previous.text.slice(tokenEnd),
+				references: refs.some((existing) => samePath(existing, path)) ? refs : [...refs, path],
+			};
+		});
+		setMention(null);
+		setMentionIdx(0);
+		requestAnimationFrame(() => {
+			autoSize();
+			const ta = taRef.current;
+			if (ta) {
+				ta.focus();
+				ta.setSelectionRange(start, start);
+			}
+		});
+	};
 	// 命令菜单滚动：.popover 的 overflow:hidden 会压掉 overflow-y-auto（unlayered CSS 优先），
 	// 内联 overflowY 强制可滚；键盘导航时把选中项滚进视野
 	const cmdMenuRef = useRef<HTMLDivElement>(null);
@@ -445,6 +536,63 @@ export function ChatInput({
 					{attachmentError}
 				</div>
 			)}
+			{/* @ 引用候选（与斜杠菜单同一处锚点：输入卡上方） */}
+			{mentionMode && (
+				<div
+					ref={mentionMenuRef}
+					data-testid="mention-menu"
+					className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5"
+					role="listbox"
+					aria-label={t.mentionFiles}
+					style={{ overflowY: "auto" }}
+				>
+					<div className="flex items-center gap-2 px-4 pb-1 pt-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
+						<span>{t.mentionFiles}</span>
+						{files.truncated && <span style={{ color: "var(--dsw-warn)" }}>{t.mentionTruncated}</span>}
+						{files.source === "disk" && <span title={t.mentionDiskSourceHint}>{t.mentionDiskSource}</span>}
+						<span className="flex-1" />
+						<span>{t.mentionHint}</span>
+					</div>
+					{files.status === "loading" && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.panelLoading}</div>
+					)}
+					{files.status === "error" && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-danger)" }} role="alert">{files.error}</div>
+					)}
+					{files.status === "ready" && suggestions.length === 0 && (
+						<div className="px-4 py-2" style={{ fontSize: 12.5, color: "var(--dsw-label-caption)" }}>{t.mentionNoMatch}</div>
+					)}
+					{suggestions.map(({ candidate, label, description }, i) => (
+						<button
+							key={`${candidate.dir ? "d" : "f"}:${candidate.path}`}
+							type="button"
+							role="option"
+							aria-selected={i === effectiveMentionIdx}
+							className="flex w-full items-center gap-2 px-4 py-1.5 text-left transition-colors"
+							style={{ background: i === effectiveMentionIdx ? "var(--dsw-hover)" : "transparent" }}
+							onMouseEnter={() => setMentionIdx(i)}
+							onClick={() => applyMention(candidate)}
+							title={candidateText(candidate)}
+						>
+							{candidate.dir ? (
+								<IconFolderClose16 size={13} style={{ flex: "none", color: "var(--dsw-warn)" }} />
+							) : (
+								<IconFileOutline16 size={13} style={{ flex: "none", color: "var(--dsw-label-caption)" }} />
+							)}
+							{/* 和 pi 终端一样：名字在前，路径在后；根目录下的条目两者相同，不重复显示 */}
+							<span className="flex-none truncate" style={{ maxWidth: "55%", fontSize: 12.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-primary)" }}>
+								{label}
+							</span>
+							{description.replace(/\/$/, "") !== label.replace(/\/$/, "") && (
+								<span className="min-w-0 flex-1 truncate" style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)" }}>
+									{description}
+								</span>
+							)}
+						</button>
+					))}
+				</div>
+			)}
+
 			{/* 斜杠命令菜单（dsh：悬浮于输入卡上方，同宽） */}
 			{commandMode && visibleCommands.length > 0 && (
 				<div ref={cmdMenuRef} className="popover absolute bottom-full left-0 right-0 z-50 mb-2 max-h-[340px] overflow-y-auto py-1.5" role="listbox" aria-label={t.slashCatalog} style={{ overflowY: "auto" }}>
@@ -478,91 +626,90 @@ export function ChatInput({
 				</div>
 			)}
 
-			{/* 附件轨：图片 */}
+			{/*
+			 * 附件轨（图片 / 引用 / 上传文件）：绝对定位浮在输入卡上方，**不占布局高度** ——
+			 * 输入框位置不动，多出来的附件直接盖住后面的聊天记录（用户要的就是这个）。
+			 * 外层 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">
+			{/* 附件轨：图片（超过 4 张折叠成牌堆，展开沿弧线扇开；点开可放大、切换、删除） */}
 			{images.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-2 px-1">
-					{images.map((img, i) => (
-						<div key={i} className="relative">
-							<img
-								src={`data:${img.mimeType};base64,${img.data}`}
-								alt=""
-								className="h-14 w-14 rounded-lg object-cover"
-								style={{ border: "0.5px solid var(--dsw-border-l2)" }}
-							/>
-							<button
-								className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-[10px]"
-								style={{ background: "var(--dsw-label-primary)", color: "var(--dsw-bg-base)" }}
-								disabled={sendBusy}
-								onClick={() => changeDraft((previous) => ({ ...previous, images: previous.images.filter((_, index) => index !== i) }))}
-							>
-								✕
-							</button>
-						</div>
-					))}
-				</div>
+				<ComposerImages
+					images={images}
+					disabled={sendBusy}
+					onRemove={(index) => changeDraft((previous) => ({ ...previous, images: previous.images.filter((_, at) => at !== index) }))}
+					onClear={() => changeDraft((previous) => ({ ...previous, images: [] }))}
+				/>
 			)}
 
-			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用） */}
 			{/* 路径引用(项目结构图/文件面板的「引用到输入框」):独立于正文,发送时拼成 @路径 */}
 			{references.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-1.5 px-1" data-testid="composer-references">
-					{references.map((path) => (
-						<span
-							key={path}
-							className="flex items-center gap-1 rounded-md px-2 py-1"
-							style={{
-								maxWidth: 240,
-								fontSize: 12,
-								fontFamily: "var(--font-mono)",
-								color: "var(--dsw-label-secondary)",
-								background: "var(--dsw-selector)",
-								border: "0.5px solid var(--dsw-border-l3)",
-							}}
-							title={path}
-						>
-							<IconAtOutline16 size={11} style={{ flex: "none", color: "var(--dsw-accent)" }} />
-							<span className="truncate">{referenceLabelOf(path)}</span>
-							<button
-								type="button"
-								className="flex h-4 w-4 flex-none items-center justify-center rounded-full text-[10px]"
-								style={{ color: "var(--dsw-label-caption)" }}
-								disabled={sendBusy}
-								onClick={() => changeDraft((previous) => ({ ...previous, references: (previous.references ?? []).filter((p) => p !== path) }))}
-								aria-label={`${t.delete} ${path}`}
+				<div className="pointer-events-auto flex flex-wrap gap-1 px-1" data-testid="composer-references">
+					{(refsExpanded ? references : references.slice(0, COLLAPSE_AT)).map((path, i) => {
+						const chip = referenceChipOf(path);
+						return (
+							<span
+								key={path}
+								className="pw-ref-chip group/ref"
+								title={path}
+								/* 与图片卡组同一套时序：从左往右错开浮上来，收起反向；不旋转（带文字转着读着累） */
+								style={{ animationDelay: `${Math.min(i * 14, 140)}ms` }}
 							>
-								✕
-							</button>
-						</span>
-					))}
+								{chip.dir ? (
+									<IconFolderClose16 size={12} style={{ flex: "none", color: "var(--dsw-warn)" }} />
+								) : (
+									<IconFileOutline16 size={12} style={{ flex: "none", color: "var(--dsw-accent)" }} />
+								)}
+								<span className="truncate">{chip.text}</span>
+								<button
+									type="button"
+									className="pw-ref-close"
+									disabled={sendBusy}
+									onClick={() => changeDraft((previous) => ({ ...previous, references: (previous.references ?? []).filter((p) => p !== path) }))}
+									aria-label={`${t.delete} ${path}`}
+								>
+									✕
+								</button>
+							</span>
+						);
+					})}
+					{references.length > COLLAPSE_AT ? (
+						<button type="button" className="pw-chip" data-testid="references-toggle" onClick={() => setRefsExpanded((open) => !open)}>
+							{refsExpanded ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(references.length - COLLAPSE_AT))}
+						</button>
+					) : null}
 				</div>
 			)}
 
+			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用）；超过 4 个折叠 */}
 			{uploads.length > 0 && (
-				<div className="mb-2 flex flex-wrap gap-2 px-1">
-					{uploads.map((f, i) => (
-						<div
-							key={f.path}
-							className="flex items-center gap-2 rounded-lg px-2.5 py-1.5"
-							style={{ border: "0.5px solid var(--dsw-border-l2)", background: "var(--dsw-hover)" }}
-							title={f.path}
-						>
-							<IconFileOutline16 size={14} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
-							<span className="max-w-[180px] truncate" style={{ fontSize: 12.5, color: "var(--dsw-label-secondary)" }}>{f.name}</span>
-							<span style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtUploadSize(f.size)}</span>
+				<div className="pointer-events-auto flex flex-wrap items-center gap-1 px-1" data-testid="composer-uploads">
+					{(uploadsExpanded ? uploads : uploads.slice(0, COLLAPSE_AT)).map((f, i) => (
+						<span key={f.path} className="pw-ref-chip group/ref" title={f.path}>
+							<IconFileOutline16 size={12} style={{ flex: "none", color: "var(--dsw-label-tertiary)" }} />
+							<span className="max-w-[180px] truncate">{f.name}</span>
+							<span style={{ flex: "none", fontSize: 11, color: "var(--dsw-label-caption)" }}>{fmtUploadSize(f.size)}</span>
 							<button
-								className="flex h-5 w-5 items-center justify-center rounded-full text-[10px]"
-								style={{ color: "var(--dsw-label-caption)" }}
+								type="button"
+								className="pw-ref-close"
 								disabled={sendBusy}
 								onClick={() => changeDraft((previous) => ({ ...previous, uploads: previous.uploads.filter((_, index) => index !== i) }))}
-								aria-label="remove"
+								aria-label={`${t.delete} ${f.name}`}
 							>
 								✕
 							</button>
-						</div>
+						</span>
 					))}
+					{uploads.length > COLLAPSE_AT ? (
+						<button type="button" className="pw-chip" data-testid="uploads-toggle" onClick={() => setUploadsExpanded((open) => !open)}>
+							{uploadsExpanded ? t.chipCollapse : t.chipExpandMore.replace("{n}", String(uploads.length - COLLAPSE_AT))}
+						</button>
+					) : null}
 				</div>
 			)}
 
+			</div>
+
 			{/* 卡片（玻璃态）—— 拖放由 document 级监听统一接管 */}
 			<div
 				className="relative w-full"
@@ -605,12 +752,19 @@ export function ChatInput({
 						suppressHydrationWarning
 						className="min-w-0 flex-1 resize-none"
 						style={{ fontSize: "var(--piweb-chat-font-size, var(--dsh-content-font-size))", lineHeight: 1.55 }}
-							onChange={(e) => {
-							setText(e.target.value);
-									setCmdDismissed(false);
+						onChange={(e) => {
+							const value = e.target.value;
+							setText(value);
+							setCmdDismissed(false);
 							setCmdIdx(0);
+							syncMention(value, e.target.selectionStart);
 							autoSize();
 						}}
+						onSelect={(e) => {
+							// 选中了一段文字时不弹：那时 Enter / Tab 应该照常工作
+							const ta = e.target as HTMLTextAreaElement;
+							syncMention(ta.value, ta.selectionStart === ta.selectionEnd ? ta.selectionStart : null);
+						}}
 						onPaste={(e) => {
 							const files = Array.from(e.clipboardData.files);
 							if (files.length) {
@@ -619,6 +773,34 @@ export function ChatInput({
 							}
 						}}
 						onKeyDown={(e) => {
+							// 输入法组字时的按键归输入法（Esc 取消组字、↑↓ 选字、Enter 上屏），一律不当候选操作
+							if (mentionMode && !e.nativeEvent.isComposing) {
+								// 候选开着时优先于发送：Esc 关掉、↑↓ 选、Enter / Tab 采纳。
+								// 没有候选时不拦 Enter——`@某人` 这种不成候选的文字要能直接发出去。
+								if (e.key === "Escape") {
+									e.preventDefault();
+									closeMention(true);
+									return;
+								}
+								if (suggestions.length > 0) {
+									if (e.key === "ArrowDown") {
+										e.preventDefault();
+										setMentionIdx((i) => Math.min(i + 1, suggestions.length - 1));
+										return;
+									}
+									if (e.key === "ArrowUp") {
+										e.preventDefault();
+										setMentionIdx((i) => Math.max(i - 1, 0));
+										return;
+									}
+									if (e.key === "Enter" || e.key === "Tab") {
+										e.preventDefault();
+										const picked = suggestions[effectiveMentionIdx];
+										if (picked) applyMention(picked.candidate);
+										return;
+									}
+								}
+							}
 							if (adopted && text === "" && (e.key === "Backspace" || e.key === "Escape")) {
 								// 空参数时退格/Esc：摘掉命令胶囊
 								e.preventDefault();
@@ -711,6 +893,7 @@ export function ChatInput({
 							percent={contextPercent}
 							tokens={contextTokens}
 							contextWindow={contextWindow}
+							model={model}
 							source={contextSource}
 						/>
 					)}
@@ -773,17 +956,19 @@ export function ChatInput({
 }
 
 function fmtUploadSize(bytes: number): string {
-	if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-	if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
-	return `${bytes}B`;
+	return fmtBytes(bytes).replace(/ /g, "");
 }
 
 /**
- * 引用 chip 上的显示文本:只要最后一段(文件名/目录名),太挤就靠 CSS 截断。
- * 目录引用带尾斜杠,和文件区分开(与项目结构图里的展示一致)。
+ * 引用 chip 上显示的短标签。只取 basename 会分不清两件事：目录与同名文件
+ * （`src/lib` 与 `src/lib.ts` 都显示 `lib`；`a/index.ts` 与 `b/index.ts` 都显示 `index.ts`）。
+ * 规则：目录带尾斜杠（`lib/`，配文件夹图标）；其余最多保留**尾部两段**
+ * （`src/lib/index.ts` → `…/lib/index.ts`）。完整路径仍在 title 里。
  */
-function referenceLabelOf(path: string): string {
-	const trimmed = path.replace(/[\\/]+$/, "");
-	const base = trimmed.split(/[\\/]/).filter(Boolean).pop() ?? path;
-	return /[\\/]$/.test(path) ? `${base}/` : base;
+function referenceChipOf(path: string): { text: string; dir: boolean } {
+	const dir = /[\\/]$/.test(path);
+	const parts = path.replace(/[\\/]+$/, "").split(/[\\/]/).filter(Boolean);
+	if (!parts.length) return { text: path, dir };
+	const tail = parts.slice(-2).join("/");
+	return { text: dir ? `${tail}/` : parts.length > 2 ? `…/${tail}` : tail, dir };
 }

package/src/components/ChatWindow.tsx

@@ -29,7 +29,9 @@ import { languageForPath } from "@/lib/highlight";
 import { copyText } from "@/lib/clipboard";
 import { OutlineRail } from "@/components/OutlineRail";
 import { ChatScrollContext, type ChatScroll } from "@/components/chat/chat-scroll";
+import { useChatReadingAnchor } from "@/components/chat/reading-anchor";
 import { useI18n } from "@/i18n";
+import { fmtDuration, fmtPercent, fmtThroughput, fmtTokens } from "@/lib/format";
 import type { ToolCardState } from "@/hooks/usePiWeb";
 import type { ContextResource, TrajEntry, TrajTokens, WebContent, WebMessage, WebStats } from "@/lib/types";
 import {
@@ -128,16 +130,16 @@ function TurnMetaPill({ durationMs, usage, t }: { durationMs: number; usage?: Tr
 							<>
 								<div className="flex items-center justify-between gap-2">
 									<span style={{ color: "var(--dsw-label-caption)" }}>{t.inputTokens}</span>
-									<span>{fmtTok(billed)}</span>
+									<span>{fmtTokens(billed)}</span>
 								</div>
 								<div className="flex items-center justify-between gap-2">
 									<span style={{ color: "var(--dsw-label-caption)" }}>{t.outputTokens}</span>
-									<span>{fmtTok(usage.output ?? 0)}</span>
+									<span>{fmtTokens(usage.output ?? 0)}</span>
 								</div>
 								{(usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0) > 0 && (
 									<div className="flex items-center justify-between gap-2">
 										<span style={{ color: "var(--dsw-label-caption)" }}>{t.cacheHits}</span>
-										<span>{Math.round(((usage.cacheRead ?? 0) / Math.max(billed, 1)) * 100)}%</span>
+										<span>{fmtPercent(((usage.cacheRead ?? 0) / Math.max(billed, 1)) * 100)}</span>
 									</div>
 								)}
 							</>
@@ -710,7 +712,7 @@ function WorkingStep({ startedAt, outputTokens, workingMessage, hasLiveStep }: {
 			<div className="pw-line">
 				{label ? <span className="pw-shimmer">{label}</span> : <span className="pw-verb">{fillBold(WORKING_FOR, { d: fmtSpan(elapsed) })}</span>}
 				{label && <span className="pw-meta">{fmtSpan(elapsed)}</span>}
-				{outputTokens ? <span className="pw-meta">↓ {fmtTok(outputTokens)} tokens</span> : null}
+				{outputTokens ? <span className="pw-meta">↓ {fmtTokens(outputTokens)} tokens</span> : null}
 			</div>
 		</Step>
 	);
@@ -1243,22 +1245,6 @@ function TurnLite({ turn, messages }: { turn: Turn; messages: WebMessage[] }) {
 	);
 }
 
-function fmtTok(n: number): string {
-	const scaled = (value: number) => value >= 100 ? String(Math.round(value)) : String(Math.round(value * 10) / 10);
-	return n >= 1_000_000 ? `${scaled(n / 1_000_000)}M` : n >= 1000 ? `${scaled(n / 1000)}K` : String(n);
-}
-
-function fmtDuration(ms: number): string {
-	const seconds = ms / 1000;
-	if (seconds < 60) return `${Math.round(seconds * 10) / 10}s`;
-	const whole = Math.round(seconds);
-	return `${Math.floor(whole / 60)}m${whole % 60}s`;
-}
-
-function fmtThroughput(tokensPerSecond: number): string {
-	return tokensPerSecond >= 10 ? String(Math.round(tokensPerSecond)) : String(Math.round(tokensPerSecond * 10) / 10);
-}
-
 export function SessionStatsBar({
 	stats,
 }: {
@@ -1281,15 +1267,18 @@ export function SessionStatsBar({
 	if (speeds.length) groups.push(speeds.join(" · "));
 	const billedInput = stats.tokens.input + stats.tokens.cacheRead + stats.tokens.cacheWrite;
 	if (billedInput > 0 || stats.tokens.output > 0) {
-		if (billedInput > 0) groups.push(`${t.cacheHits} ${Math.round((stats.tokens.cacheRead / billedInput) * 100)}%`);
-		groups.push(`${t.inputTokens} ${fmtTok(billedInput)} tok · ${t.outputTokens} ${fmtTok(stats.tokens.output)} tok`);
+		if (billedInput > 0) 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。
 		<div className="group relative mx-auto mt-1 block w-full px-4 pt-1 text-center">
 			<div
-				className="overflow-hidden text-ellipsis whitespace-nowrap"
+				className="[overflow-wrap:anywhere]"
 				style={{ fontSize: "var(--dsh-content-font-size-secondary, 13px)", lineHeight: "20px", color: "var(--dsw-label-caption)" }}
 			>
 				{line}
@@ -1440,6 +1429,7 @@ export function ChatWindow({
 			if (node) node.scrollTop = node.scrollHeight;
 		},
 	}), []);
+	useChatReadingAnchor(rootRef, scrollRef, chatScroll.shouldPin);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;