@rexvane/piweb 0.3.20 → 0.3.22

package/src/components/ChatWindow.tsx

@@ -28,7 +28,9 @@ import { DiffView, type DiffLine, parseUnifiedDiff } from "@/components/DiffView
 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 { 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 {
@@ -127,16 +129,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>
 								)}
 							</>
@@ -614,9 +616,13 @@ const ThinkStep = memo(function ThinkStep({ text, live, startedAt }: { text: str
 // ---------- 叙述：模型在工具之间说的话，作为阶段标题（基线对齐，主色） ----------
 
 const NarrationBlock = memo(function NarrationBlock({ text, live, error }: { text: string; live?: boolean; error?: boolean }) {
+	// 流过的这一段一直交给流式组件：live 结束后它先把还没放出来的字放完，再自己换成整段渲染。
+	// 一结束就换成 <Markdown>，打字机这类慢样式积压的字会一口吐出来。
+	const [streamed, setStreamed] = useState(Boolean(live));
+	if (live && !streamed) setStreamed(true);
 	return (
 		<div className="pw-narr" data-error={error || undefined}>
-			{live ? <StreamingMarkdown text={text} /> : <Markdown text={text} />}
+			{streamed ? <StreamingMarkdown text={text} live={Boolean(live)} /> : <Markdown text={text} />}
 		</div>
 	);
 });
@@ -705,7 +711,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>
 	);
@@ -1238,22 +1244,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,
 }: {
@@ -1267,24 +1257,30 @@ export function SessionStatsBar({
 			.replace("{steps}", String(stats.assistantMessages)),
 	];
 	const durations: string[] = [];
-	if (stats.llmMs > 0) durations.push(`LLM ${fmtDuration(stats.llmMs)}`);
-	if (stats.toolMs > 0) durations.push(`${t.toolCalls} ${fmtDuration(stats.toolMs)}`);
+	const coverage = (n: number | undefined, total: number) => n !== undefined && n < total
+		? ` (${t.statsTimedCoverage.replace("{n}", String(n)).replace("{total}", String(total))})` : "";
+	if (stats.llmMs > 0) durations.push(`LLM ${fmtDuration(stats.llmMs)}${coverage(stats.llmTimedSteps, stats.assistantMessages)}`);
+	if (stats.toolMs > 0) durations.push(`${t.toolCalls} ${fmtDuration(stats.toolMs)}${coverage(stats.toolTimedCalls, stats.toolCalls)}`);
 	if (durations.length) groups.push(durations.join(" · "));
 	const speeds: string[] = [];
-	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`);
+	const timedLabel = (steps: number) => ` (${t.statsMeasuredSteps.replace("{n}", String(steps))})`;
+	if (stats.ttftSteps > 0) speeds.push(`${t.ttftAverage} ${fmtDuration(stats.ttftMs / stats.ttftSteps)}${timedLabel(stats.ttftSteps)}`);
+	if (stats.decodeMs > 0) speeds.push(`${fmtThroughput(stats.decodeTokens / (stats.decodeMs / 1000))} tok/s${timedLabel(stats.decodeSteps ?? stats.ttftSteps)}`);
 	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}
@@ -1425,6 +1421,16 @@ export function ChatWindow({
 	const widthPreference = useRef<number | null>(null);
 	const widthDrag = useRef<{ side: "left" | "right"; origin: number; width: number; pointerId: number } | null>(null);
 	const stickToBottom = useRef(true);
+	/** 上一次滚动事件时的 scrollTop：比它小就是在往上走（用户翻看、大纲 / 搜索跳转） */
+	const lastScrollTop = useRef(0);
+	// 流式正文逐帧变高时据此决定要不要跟着贴底（见 chat/chat-scroll）
+	const chatScroll = useMemo<ChatScroll>(() => ({
+		shouldPin: () => stickToBottom.current,
+		pin: () => {
+			const node = scrollRef.current;
+			if (node) node.scrollTop = node.scrollHeight;
+		},
+	}), []);
 	const { t } = useI18n();
 	useEffect(() => {
 		const root = rootRef.current;
@@ -1635,89 +1641,98 @@ export function ChatWindow({
 					}}
 				/>
 			))}
-			<div
-				ref={scrollRef}
-				className="min-h-0 flex-1 overflow-y-auto"
-				role="log"
-				aria-live="polite"
-				aria-relevant="additions"
-				onScroll={(event) => {
-					const node = event.currentTarget;
-					const atBottom = node.scrollHeight - node.scrollTop - node.clientHeight < 96;
-					stickToBottom.current = atBottom;
-					setAwayFromBottom(!atBottom);
-					if (atBottom) setUnseen(0);
-					scheduleUpgradeCheck();
-				}}
-			>
-				<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
-					{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) ? (
-								<TurnBlock
-									turn={turn}
-									messages={messages}
-									tools={tools}
-									cwd={cwd}
-									isStreaming={isStreaming}
-									isLast={ti === turns.length - 1}
-									lastAssistantIndex={lastAssistantIndex}
-									contextFiles={turn.userIndex >= 0 && turn.userIndex === firstUser ? contextFiles : undefined}
-									retryNotice={retryNotice}
-									streamStartedAt={streamStartedAt}
-									runningTool={runningTool}
-									outputTokens={stats?.tokens.output}
-									workingMessage={workingMessage}
-									onFork={onFork}
-									onEditMessage={onEditMessage}
-									roundBadge={turn.userIndex >= 0 ? roundBadges?.get(messages[turn.userIndex].id ?? "") : undefined}
-									onShowRound={onShowRound}
-									onInspectTool={onOpenTrajectory}
-									onOpenFile={onOpenFile}
-								/>
-							) : (
-								<TurnLite turn={turn} messages={messages} />
-							)}
-						</div>
-					))}
-					{/* 还没有任何消息就已在流式（极少见）：单独给一条工作指示 */}
-					{isStreaming && streamStartedAt && turns.length === 0 && (
-						<div className="pw-turn">
-							<WorkingStep startedAt={streamStartedAt} outputTokens={stats?.tokens.output} workingMessage={workingMessage} hasLiveStep={Boolean(runningTool)} />
-						</div>
-					)}
-					{/* 重连提示：跟随消息流显示在最后一条输出下面 */}
-					{!connected && (
-						<div className="mt-3 flex justify-center">
-							<div
-								className="rounded-full px-3 py-1"
-								style={{ fontSize: "var(--piweb-chat-font-t)", color: "var(--dsw-label-caption)", border: "0.5px dashed var(--dsw-border-l3)" }}
-							>
-								{t.reconnecting}
+			<ChatScrollContext.Provider value={chatScroll}>
+				<div
+					ref={scrollRef}
+					className="min-h-0 flex-1 overflow-y-auto"
+					role="log"
+					aria-live="polite"
+					aria-relevant="additions"
+					onScroll={(event) => {
+						const node = event.currentTarget;
+						const distance = node.scrollHeight - node.scrollTop - node.clientHeight;
+						const atBottom = distance < 96;
+						// 往上走就立刻松开贴底，不等离底 96px：流式正文每帧都会贴一次底，
+						// 大纲 / 搜索的平滑跳转刚起步、还在 96px 以内时就会被拽回去。
+						// 已经在最底下（内容变短被浏览器夹回来）不算往上翻。
+						const movedUp = node.scrollTop < lastScrollTop.current - 1 && distance > 2;
+						lastScrollTop.current = node.scrollTop;
+						if (movedUp) stickToBottom.current = false;
+						else stickToBottom.current = atBottom;
+						setAwayFromBottom(!atBottom);
+						if (atBottom) setUnseen(0);
+						scheduleUpgradeCheck();
+					}}
+				>
+					<div className="mx-auto flex w-full flex-col px-4 py-6" style={{ maxWidth: "var(--dsh-chat-content-width)" }}>
+						{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) ? (
+									<TurnBlock
+										turn={turn}
+										messages={messages}
+										tools={tools}
+										cwd={cwd}
+										isStreaming={isStreaming}
+										isLast={ti === turns.length - 1}
+										lastAssistantIndex={lastAssistantIndex}
+										contextFiles={turn.userIndex >= 0 && turn.userIndex === firstUser ? contextFiles : undefined}
+										retryNotice={retryNotice}
+										streamStartedAt={streamStartedAt}
+										runningTool={runningTool}
+										outputTokens={stats?.tokens.output}
+										workingMessage={workingMessage}
+										onFork={onFork}
+										onEditMessage={onEditMessage}
+										roundBadge={turn.userIndex >= 0 ? roundBadges?.get(messages[turn.userIndex].id ?? "") : undefined}
+										onShowRound={onShowRound}
+										onInspectTool={onOpenTrajectory}
+										onOpenFile={onOpenFile}
+									/>
+								) : (
+									<TurnLite turn={turn} messages={messages} />
+								)}
 							</div>
-						</div>
-					)}
-					{compaction && (
-						<div className="mt-3 flex justify-center" role="status">
-							<div className="flex items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-hover)", color: "var(--dsw-label-secondary)" }}>
-								<span>{compaction.phase === "start" ? t.compacting : compaction.errorMessage ? `${t.compactionFailed}: ${compaction.errorMessage}` : t.compactionComplete}</span>
-								{compaction.phase === "end" && <button type="button" onClick={onClearCompaction} aria-label={t.close} className="icon-btn">×</button>}
+						))}
+						{/* 还没有任何消息就已在流式（极少见）：单独给一条工作指示 */}
+						{isStreaming && streamStartedAt && turns.length === 0 && (
+							<div className="pw-turn">
+								<WorkingStep startedAt={streamStartedAt} outputTokens={stats?.tokens.output} workingMessage={workingMessage} hasLiveStep={Boolean(runningTool)} />
 							</div>
-						</div>
-					)}
-					{error && (
-						<button
-							className="mt-3 rounded-xl px-3 py-2 text-left"
-							style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-danger)", color: "white" }}
-							onClick={onClearError}
-							role="alert"
-						>
-							{error}
-						</button>
-					)}
+						)}
+						{/* 重连提示：跟随消息流显示在最后一条输出下面 */}
+						{!connected && (
+							<div className="mt-3 flex justify-center">
+								<div
+									className="rounded-full px-3 py-1"
+									style={{ fontSize: "var(--piweb-chat-font-t)", color: "var(--dsw-label-caption)", border: "0.5px dashed var(--dsw-border-l3)" }}
+								>
+									{t.reconnecting}
+								</div>
+							</div>
+						)}
+						{compaction && (
+							<div className="mt-3 flex justify-center" role="status">
+								<div className="flex items-center gap-2 rounded-xl px-3 py-2" style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-hover)", color: "var(--dsw-label-secondary)" }}>
+									<span>{compaction.phase === "start" ? t.compacting : compaction.errorMessage ? `${t.compactionFailed}: ${compaction.errorMessage}` : t.compactionComplete}</span>
+									{compaction.phase === "end" && <button type="button" onClick={onClearCompaction} aria-label={t.close} className="icon-btn">×</button>}
+								</div>
+							</div>
+						)}
+						{error && (
+							<button
+								className="mt-3 rounded-xl px-3 py-2 text-left"
+								style={{ fontSize: "var(--piweb-chat-font-s)", background: "var(--dsw-danger)", color: "white" }}
+								onClick={onClearError}
+								role="alert"
+							>
+								{error}
+							</button>
+						)}
+					</div>
 				</div>
-			</div>
+			</ChatScrollContext.Provider>
 			{/* 右侧大纲导航：从助手回答的标题和用户消息生成，随滚动高亮，悬停展开 */}
 			<OutlineRail scrollRef={scrollRef} revision={`${messages.length}:${nearTurns.size}:${isStreaming ? 1 : 0}`} />
 			{/* 脱离底部时的“回到底部”浮钮：与输入框卡片同轴，挂在右上角顶部，图标带新内容角标 */}