@rexvane/piweb 0.3.18 → 0.3.19

package/src/components/ChatInput.tsx

@@ -8,6 +8,7 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
+	IconAtOutline16,
 	IconFileOutline16,
 	IconSendArrowUp14,
 	IconStopFill16,
@@ -32,11 +33,13 @@ export interface ChatDraft {
 	text: string;
 	images: ImageAttachment[];
 	uploads: Array<{ name: string; path: string; size: number }>;
+	/** 从文件树/文件面板「引用到输入框」加进来的路径引用:独立于正文,输入框里渲染成 chip */
+	references?: string[];
 	adopted?: SlashCommand | null;
 }
 
 export type ChatDraftUpdate = ChatDraft | ((previous: ChatDraft) => ChatDraft);
-export const EMPTY_CHAT_DRAFT: ChatDraft = { text: "", images: [], uploads: [] };
+export const EMPTY_CHAT_DRAFT: ChatDraft = { text: "", images: [], uploads: [], references: [] };
 
 type SendResult = { success: boolean; error?: string };
 const MAX_UPLOAD_FILES = 16;
@@ -131,6 +134,7 @@ export function ChatInput({
 		onDraftChange?.(update);
 	};
 	const { text, images, uploads } = currentDraft;
+	const references = currentDraft.references ?? [];
 	const adopted = currentDraft.adopted ?? null;
 	const setText = (value: string | ((previous: string) => string)) => changeDraft((previous) => ({ ...previous, text: typeof value === "function" ? value(previous.text) : value }));
 	const setAdopted = (value: SlashCommand | null) => changeDraft((previous) => ({ ...previous, adopted: value }));
@@ -222,6 +226,7 @@ export function ChatInput({
 		setSending(true);
 		onSendPendingChange?.(true);
 		const raw = (forcedText ?? draftRef.current.text).trim();
+		const refs = [...(draftRef.current.references ?? [])];
 		const trimmed = adopted ? `/${adopted.name}${raw ? ` ${raw}` : ""}` : raw;
 		void (async () => {
 			try {
@@ -229,8 +234,8 @@ export function ChatInput({
 				const submitted = draftRef.current;
 				const attachments = [...submitted.images];
 				const files = [...submitted.uploads];
-				if (!trimmed && attachments.length === 0 && files.length === 0) return;
-				if (trimmed.startsWith("/") && attachments.length === 0 && files.length === 0) {
+				if (!trimmed && attachments.length === 0 && files.length === 0 && refs.length === 0) return;
+				if (trimmed.startsWith("/") && attachments.length === 0 && files.length === 0 && refs.length === 0) {
 					const [head, ...rest] = trimmed.slice(1).split(/\s+/);
 					const builtin = (commands ?? []).find((c) => c.kind === "builtin" && c.name.toLowerCase() === head.toLowerCase());
 					if (builtin) {
@@ -241,8 +246,13 @@ export function ChatInput({
 						return;
 					}
 				}
-				const compose = (base: string) =>
-					files.length ? `${base}${base ? "\n\n" : ""}${files.map((f) => t.attachmentLine.replace("{path}", f.path).replace("{size}", fmtUploadSize(f.size))).join("\n")}` : base;
+				// 引用 chip 在发送时拼成 @路径 行(和 pi 的 @ 语法一致),显示与正文分开互不干扰
+				const compose = (base: string) => {
+					const parts = [base];
+					if (refs.length) parts.push(refs.map((path) => `@${path}`).join("\n"));
+					if (files.length) parts.push(files.map((f) => t.attachmentLine.replace("{path}", f.path).replace("{size}", fmtUploadSize(f.size))).join("\n"));
+					return parts.filter(Boolean).join("\n\n");
+				};
 				let result: SendResult;
 				if (isStreaming) {
 					const mode = override ?? (enterBehavior === "steer" ? "steer" : "followUp");
@@ -262,6 +272,7 @@ export function ChatInput({
 					adopted: previous.adopted === submitted.adopted ? null : previous.adopted,
 					images: previous.images.filter((image) => !attachments.includes(image)),
 					uploads: previous.uploads.filter((file) => !files.some((sent) => sent.path === file.path)),
+					references: (previous.references ?? []).filter((path) => !refs.includes(path)),
 				}));
 			} catch (error) {
 				if (forcedText) setText(forcedText);
@@ -403,7 +414,7 @@ export function ChatInput({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const hasDraft = text.trim().length > 0 || images.length > 0 || uploads.length > 0;
+	const hasDraft = text.trim().length > 0 || images.length > 0 || uploads.length > 0 || references.length > 0;
 
 	return (
 		<div ref={wrapRef} className="relative w-full" data-testid="composer">
@@ -491,6 +502,40 @@ export function ChatInput({
 			)}
 
 			{/* 附件轨：上传的普通文件（压缩包/文档等，路径引用） */}
+			{/* 路径引用(项目结构图/文件面板的「引用到输入框」):独立于正文,发送时拼成 @路径 */}
+			{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}`}
+							>
+								✕
+							</button>
+						</span>
+					))}
+				</div>
+			)}
+
 			{uploads.length > 0 && (
 				<div className="mb-2 flex flex-wrap gap-2 px-1">
 					{uploads.map((f, i) => (
@@ -731,3 +776,13 @@ function fmtUploadSize(bytes: number): string {
 	if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
 	return `${bytes}B`;
 }
+
+/**
+ * 引用 chip 上的显示文本:只要最后一段(文件名/目录名),太挤就靠 CSS 截断。
+ * 目录引用带尾斜杠,和文件区分开(与项目结构图里的展示一致)。
+ */
+function referenceLabelOf(path: string): string {
+	const trimmed = path.replace(/[\\/]+$/, "");
+	const base = trimmed.split(/[\\/]/).filter(Boolean).pop() ?? path;
+	return /[\\/]$/.test(path) ? `${base}/` : base;
+}

package/src/components/ChatWindow.tsx

@@ -5,10 +5,8 @@
  * 每个回合 = 用户消息 → 过程（叙述句是阶段标题，其下是带图标的步骤列表）→ 最终回答。
  * 进行中的思考 / 命令用闪光渐变的英文状态词；回合结束后思考与命令折成一行摘要，编辑保留 diff。
  */
-import { memo, useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
-import ReactMarkdown from "react-markdown";
-import rehypeHighlight from "rehype-highlight";
-import remarkGfm from "remark-gfm";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import dynamic from "next/dynamic";
 import {
 	IconBranchOutline16,
 	IconBrowseOutline14,
@@ -76,78 +74,18 @@ function formatMessageClock(time: number, t: Dict): string {
 	return `${md} ${clock}`;
 }
 
-type MarkdownTextNode = { value?: unknown; children?: MarkdownTextNode[] };
-function markdownNodeText(node: MarkdownTextNode | undefined): string {
-	if (!node) return "";
-	if (typeof node.value === "string") return node.value;
-	return node.children?.map(markdownNodeText).join("") ?? "";
-}
-
-function CopyButton({ text }: { text: string }) {
-	const [copied, setCopied] = useState(false);
-	const [copyFailed, setCopyFailed] = useState(false);
-	const { t } = useI18n();
-	return (
-		<>
-			<button
-				type="button"
-				className="icon-btn"
-				title={copyFailed ? t.copyFailed : t.copy}
-				aria-label={t.copy}
-				onClick={() => {
-					void copyText(text).then((ok) => {
-						setCopied(ok);
-						setCopyFailed(!ok);
-						setTimeout(() => { setCopied(false); setCopyFailed(false); }, 1200);
-					});
-				}}
-			>
-				{copied ? <IconCheckOutline14 size={14} /> : <IconCopyOutline16 size={14} />}
-			</button>
-			{copyFailed && <span role="alert" style={{ fontSize: 11, color: "var(--dsw-danger)" }}>{t.copyFailed}</span>}
-		</>
-	);
-}
-
-const Markdown = memo(function Markdown({ text }: { text: string }) {
-	return (
-		<div className="md">
-			<ReactMarkdown
-				remarkPlugins={[remarkGfm]}
-				rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
-				components={{
-					a: ({ node: _node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
-					pre: ({ node, children, ...props }) => (
-						<div className="md-code-block">
-							<div className="md-code-copy"><CopyButton text={markdownNodeText(node)} /></div>
-							<pre {...props}>{children}</pre>
-						</div>
-					),
-				}}
-			>
-				{text}
-			</ReactMarkdown>
-		</div>
-	);
-});
-
-
 /**
- * 流式正文：边流边按 Markdown 渲染（标题/列表/代码块在生成过程中就成形）。
- *
- * 不是每个 delta 都重解析整段——那样会随回答变长线性变慢；这里按 ~100ms 节流，
- * 只在最新文本稳定下来时才交给 Markdown，回合结束时外层会切到精确的最终渲染。
+ * Markdown 正文按需加载：react-markdown + remark-gfm + rehype-highlight（含 highlight.js
+ * 常用语言集）实测占首屏 JS 的 472KB / 1272KB，而 Hero 页根本用不到。AppShell 会在空闲时
+ * 预取这个分块，正常打开会话时已经就绪；万一还没加载完，这几毫秒里正文先留空，不阻塞其它内容。
  */
-const STREAM_MARKDOWN_THROTTLE_MS = 100;
-
-const StreamingMarkdown = memo(function StreamingMarkdown({ text }: { text: string }) {
-	const [shown, setShown] = useState(text);
-	useEffect(() => {
-		if (text === shown) return;
-		const timer = setTimeout(() => setShown(text), STREAM_MARKDOWN_THROTTLE_MS);
-		return () => clearTimeout(timer);
-	}, [text, shown]);
-	return <Markdown text={shown} />;
+const Markdown = dynamic(() => import("@/components/MarkdownBlock").then((m) => m.MarkdownBlock), {
+	ssr: false,
+	loading: () => null,
+});
+const StreamingMarkdown = dynamic(() => import("@/components/MarkdownBlock").then((m) => m.StreamingMarkdownBlock), {
+	ssr: false,
+	loading: () => null,
 });
 
 /** dsh TurnTimePanel 的简化版：耗时胶囊常驻，点击弹层看本回合 token 用量 */
@@ -303,8 +241,6 @@ const MONO = "var(--font-mono)";
 const RAIL = "⎿";
 /** 命令输出默认露出的行数 */
 const PREVIEW_LINES = 3;
-/** 写入 / 编辑默认露出的 diff 行数 */
-const DIFF_PREVIEW = 12;
 /** 进行中的状态词：Claude Code 同款用法，闪光渐变，按用户要求用英文（两种界面语言都一样） */
 const WORKING_VERBS = ["Thinking", "Pondering", "Cogitating", "Mulling", "Percolating", "Brewing", "Simmering", "Ruminating", "Synthesizing", "Noodling", "Marinating", "Crafting"];
 /** 有步骤在闪光时 π 行只报时长；这行和状态词一样固定英文，不随界面语言变 */
@@ -525,8 +461,9 @@ const ToolStep = memo(function ToolStep({
 	const showPreview = Boolean(preview.head) || preview.lines.length > 0;
 	// 失败且有 diff 时，出错信息要完整可见（此时 diff 占用了展开位）
 	const showFullOutput = hasOutput && (open && canExpand || (failed && hasDiff));
-	const diffLines = hasDiff && diff ? (open ? diff : diff.slice(0, DIFF_PREVIEW)) : null;
-	const diffHidden = diff && diffLines && !open ? diff.length - diffLines.length : 0;
+	// 折叠时只留标题行：diff 正文整块不渲染（原来固定露出前 12 行，手机上十几次编辑
+	// 会把整段对话淹没）。标题里已经有「+N −M 行」，点标题行展开看全文。
+	const diffLines = hasDiff && diff ? (open ? diff : null) : null;
 	const diffStat = hasDiff && diff
 		? isWriteTool && !state?.patch
 			? t.diffSummary.replace("{add}", String(diff.length)).replace("{del}", "0")
@@ -541,7 +478,16 @@ const ToolStep = memo(function ToolStep({
 	};
 	return (
 		<Step kind={kind} tone={running ? "live" : failed ? "fail" : "dim"} live={running} className="group/tool">
-			<div className="pw-line">
+			<div
+				className="pw-line"
+				role={hasDiff ? "button" : undefined}
+				tabIndex={hasDiff ? 0 : undefined}
+				aria-expanded={hasDiff ? open : undefined}
+				style={hasDiff ? { cursor: "pointer" } : undefined}
+				title={hasDiff ? (open ? t.collapseOutput : t.expandDiff) : undefined}
+				onClick={hasDiff ? toggle : undefined}
+				onKeyDown={hasDiff ? onKey : undefined}
+			>
 				{running ? <span className="pw-shimmer">{t.stepRunning}</span> : <span className="pw-verb" data-failed={failed || undefined}>{stepVerb(tt, kind, name)}</span>}
 				{summary.text ? (
 					<span className="pw-arg" title={argsTitle}>{summary.text}</span>
@@ -549,6 +495,15 @@ const ToolStep = memo(function ToolStep({
 					<span className="pw-arg" style={{ color: "var(--dsw-label-caption)" }}>{displayToolName(name)}</span>
 				)}
 				{diffStat && <span className="pw-meta">{diffStat}</span>}
+				{hasDiff && (
+					<span
+						className="pw-meta"
+						aria-hidden
+						style={{ display: "inline-flex", transform: open ? "rotate(90deg)" : undefined, transition: "transform var(--ds-duration-fast)" }}
+					>
+						<IconChevronRight14 size={11} />
+					</span>
+				)}
 				{deletedTarget && (
 					<span className="pw-meta" style={{ color: "var(--dsw-danger)" }} title={deletedTarget}>
 						{t.deletedFile.replace("{path}", relativizeInText(deletedTarget, cwd || ""))}
@@ -611,16 +566,9 @@ const ToolStep = memo(function ToolStep({
 			{diffLines && diffLines.length > 0 && (
 				<div className="pw-diff">
 					<DiffView lines={diffLines} language={languageForPath(argPath)} />
-					{diffHidden > 0 && (
-						<button type="button" className="pw-more" onClick={() => setOpen(true)}>
-							… {t.moreLines.replace("{n}", String(diffHidden))}
-						</button>
-					)}
-					{open && diff && diff.length > DIFF_PREVIEW && (
-						<button type="button" className="pw-more" onClick={() => setOpen(false)}>
-							{t.collapseOutput}
-						</button>
-					)}
+					<button type="button" className="pw-more" onClick={() => setOpen(false)}>
+						{t.collapseOutput}
+					</button>
 				</div>
 			)}
 			{showFullOutput && (
@@ -898,12 +846,18 @@ const FinalAnswer = memo(function FinalAnswer({
 	onFork,
 	showActions,
 	turnStartMs,
+	roundBadge,
+	onShowRound,
 }: {
 	message: WebMessage;
 	onFork?: (entryId: string) => void;
 	showActions: boolean;
 	turnStartMs?: number;
+	/** 这一轮改了哪些文件（项目生长那一轮的 commit） */
+	roundBadge?: RoundBadge;
+	onShowRound?: (commit: string) => void;
 }) {
+	const { t } = useI18n();
 	const textAll = message.content
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
 		.map((c) => c.text)
@@ -924,6 +878,27 @@ const FinalAnswer = memo(function FinalAnswer({
 					time={message.timestamp}
 				/>
 			)}
+			{/* 本轮改了 N 个文件：跟在耗时 / 时间戳那一行后面。原先是挂在用户消息下面，
+			    放在这里才读得通——先看到答案，再看到这一轮动了什么。 */}
+			{showActions && roundBadge && (
+				<div className="msg-actions">
+					<button
+						type="button"
+						className="pw-chip"
+						title={t.chatRoundShow}
+						onClick={() => onShowRound?.(roundBadge.commit)}
+						data-testid="round-badge"
+					>
+						{roundBadge.files ? t.chatRoundChanged.replace("{n}", String(roundBadge.files)) : t.chatRoundNoChanges}
+						{roundBadge.files > 0 && (
+							<>
+								<span style={{ color: "var(--dsw-success)" }}> +{roundBadge.add}</span>
+								<span style={{ color: "var(--dsw-danger)" }}> −{roundBadge.del}</span>
+							</>
+						)}
+					</button>
+				</div>
+			)}
 		</div>
 	);
 });
@@ -937,7 +912,7 @@ export interface RoundBadge {
 }
 
 /** 行级 memo：流式期间只有最后一条消息变化，历史行全部跳过重渲染 */
-const UserMessage = memo(function UserMessage({ message, badge, onShowRound, onEditMessage }: { message: WebMessage; badge?: RoundBadge; onShowRound?: (commit: string) => void; onEditMessage?: (entryId: string, text: string) => void }) {
+const UserMessage = memo(function UserMessage({ message, onEditMessage }: { message: WebMessage; onEditMessage?: (entryId: string, text: string) => void }) {
 	const { t } = useI18n();
 	const text = message.content
 		.filter((c): c is { type: "text"; text: string } => c.type === "text")
@@ -1005,23 +980,6 @@ const UserMessage = memo(function UserMessage({ message, badge, onShowRound, onE
 			)}
 			{/* 用户消息也走 Markdown：贴进来的代码块/列表不再是一坨纯文本 */}
 			{text && <div className="msg-user-bubble"><Markdown text={text} /></div>}
-			{badge && (
-				<button
-					type="button"
-					className="pw-chip mt-1.5"
-					title={t.chatRoundShow}
-					onClick={() => onShowRound?.(badge.commit)}
-					data-testid="round-badge"
-				>
-					{badge.files ? t.chatRoundChanged.replace("{n}", String(badge.files)) : t.chatRoundNoChanges}
-					{badge.files > 0 && (
-						<>
-							<span style={{ color: "var(--dsw-success)" }}> +{badge.add}</span>
-							<span style={{ color: "var(--dsw-danger)" }}> −{badge.del}</span>
-						</>
-					)}
-				</button>
-			)}
 			{/* 用户消息：复制 + 原地编辑重发（编辑后模型从这条消息重新回答）；时钟在图标左侧（dsh clock=start） */}
 			{text && (
 				<MessageActions
@@ -1155,7 +1113,7 @@ function TurnBlockView({
 
 	return (
 		<>
-			{user && <UserMessage message={user} badge={roundBadge} onShowRound={onShowRound} onEditMessage={onEditMessage} />}
+			{user && <UserMessage message={user} onEditMessage={onEditMessage} />}
 			{showProcess && (
 				<div className="pw-turn">
 					{contextFiles?.map((resource, i) => (
@@ -1184,7 +1142,98 @@ function TurnBlockView({
 					{turnLive && streamStartedAt && <WorkingStep startedAt={streamStartedAt} outputTokens={outputTokens} workingMessage={workingMessage} hasLiveStep={hasLiveStep} />}
 				</div>
 			)}
-			{finalIdx >= 0 && <FinalAnswer message={messages[finalIdx]} onFork={onFork} showActions={!isStreaming || !isLast} turnStartMs={user?.timestamp} />}
+			{finalIdx >= 0 && <FinalAnswer message={messages[finalIdx]} onFork={onFork} showActions={!isStreaming || !isLast} turnStartMs={user?.timestamp} roundBadge={roundBadge} onShowRound={onShowRound} />}
+		</>
+	);
+}
+
+/**
+ * 最终回答的占位排版：只认 ATX 标题（# ~ ####，围栏代码块里的不算），其余原样成段。
+ * 标题输出成 .md 里的 h1-h4，大纲（OutlineRail）照常收得到；没升级的回合也不缺目录项。
+ */
+function liteAnswerBlocks(text: string): ReactNode[] {
+	const out: ReactNode[] = [];
+	let para: string[] = [];
+	let fence: string | null = null;
+	const flush = () => {
+		if (para.join("").trim()) out.push(<div key={out.length}>{para.join("\n")}</div>);
+		para = [];
+	};
+	for (const line of text.split("\n")) {
+		const marker = /^\s*(`{3,}|~{3,})/.exec(line)?.[1];
+		if (marker && (!fence || marker.startsWith(fence))) fence = fence ? null : marker.slice(0, 3);
+		const heading = fence || marker ? null : /^ {0,3}(#{1,4})\s+(.+?)\s*#*\s*$/.exec(line);
+		if (!heading) {
+			para.push(line);
+			continue;
+		}
+		flush();
+		const Tag = `h${heading[1].length}` as "h1" | "h2" | "h3" | "h4";
+		out.push(<Tag key={out.length}>{heading[2]}</Tag>);
+	}
+	flush();
+	return out;
+}
+
+/**
+ * 远离视口的回合占位：纯文本近似（无 Markdown/高亮）。
+ * DOM 骨架和完整渲染对齐：用户消息带 data-role="user" / data-message-id（跳转定位），
+ * 只有最终回答带 data-role="assistant"（大纲只从这里取标题），过程只出一行摘要。
+ */
+function TurnLite({ turn, messages }: { turn: Turn; messages: WebMessage[] }) {
+	const { t } = useI18n();
+	const user = turn.userIndex >= 0 ? messages[turn.userIndex] : undefined;
+	const lastIdx = turn.assistantIndexes[turn.assistantIndexes.length - 1];
+	// 占位回合不会是正在流式的那一轮（最后一轮永远完整渲染），所以不用管 isStreaming
+	const finalIdx = lastIdx !== undefined && isFinalAnswer(messages[lastIdx]) ? lastIdx : -1;
+	const plain = (m: WebMessage) =>
+		m.content
+			.filter((c): c is { type: "text"; text: string } => c.type === "text" && typeof c.text === "string")
+			.map((c) => c.text)
+			.join("\n");
+	return (
+		<>
+			{user && (
+				<div className="group mt-7 flex w-full flex-col items-end first:mt-0" data-role="user" data-message-id={user.id}>
+					<div className="msg-user-bubble pw-turn-lite">
+						<div>{plain(user)}</div>
+					</div>
+				</div>
+			)}
+			{turn.assistantIndexes.map((k) => {
+				const m = messages[k];
+				if (!m) return null;
+				const think = m.content.some((c) => c.type === "thinking");
+				const tools = m.content.filter((c) => c.type === "toolCall").length;
+				const text = plain(m);
+				if (k === finalIdx) {
+					return (
+						<div key={k} className="group w-full" style={{ marginTop: 14 }} data-role="assistant">
+							<div className="md pw-turn-lite">{liteAnswerBlocks(text)}</div>
+						</div>
+					);
+				}
+				return (
+					<div key={k} className="group w-full" style={{ marginTop: 14 }}>
+						{(think || tools > 0) && (
+							<div className="pw-line" style={{ color: "var(--dsw-label-tertiary)" }}>
+								{think && <span>{t.thinkLabel}</span>}
+								{think && tools > 0 && <span> · </span>}
+								{tools > 0 && (
+									<span>
+										{t.toolCalls} × {tools}
+									</span>
+								)}
+							</div>
+						)}
+						{text && (
+							<div className="pw-turn-lite">
+								<div>{text}</div>
+							</div>
+						)}
+					</div>
+				);
+			})}
 		</>
 	);
 }
@@ -1300,6 +1349,9 @@ const TurnBlock = memo(TurnBlockView, turnBlockPropsEqual);
 const CHAT_WIDTH_KEY = "piweb.chatContentWidth";
 const CHAT_WIDTH_MIN = 480;
 const CHAT_WIDTH_MAX = 1200;
+/** 回合懒渲染：首屏完整渲染最近 N 回合；距视口 M px 内升级完整渲染 */
+const TURN_TAIL_FULL = 8;
+const TURN_NEAR_MARGIN = 1800;
 
 function resolveChatWidth(width: number, viewportWidth: number): number {
 	const max = Math.max(320, Math.min(CHAT_WIDTH_MAX, viewportWidth - 64));
@@ -1412,6 +1464,89 @@ export function ChatWindow({
 	const turns = useMemo(() => buildTurns(messages), [messages]);
 	const firstUser = useMemo(() => messages.findIndex((m) => m.role === "user"), [messages]);
 
+	// ---------- 回合懒渲染 ----------
+	// 打开长会话时快照一次性带来上百回合，每回合的 react-markdown + 代码高亮同步执行，
+	// 首挂可达数秒（154 回合实测 6.5s）。远离视口的回合先渲染纯文本占位（TurnLite），
+	// 滚动进入视口附近再升级完整渲染。升级判定按槽元素实measure位置计算（scroll 驱动），
+	// 不用 IntersectionObserver：占位槽无 CV 时几何虽真实，但 IO 的隐式 root/rootMargin
+	// 在托管 webview 等环境里行为不稳，scroll 驱动的位置判定是确定性的。
+	const [nearTurns, setNearTurns] = useState<Set<number>>(() => new Set());
+	const nearTurnsRef = useRef(nearTurns);
+	nearTurnsRef.current = nearTurns;
+	// 尾部起点：第一次拿到回合时定下，之后追加的回合一律完整渲染（不用等视口判定）。
+	// 在渲染里惰性赋值：同一批回合算出来的值相同，重复渲染也幂等。
+	const tailStartRef = useRef<number | null>(null);
+	if (tailStartRef.current === null && turns.length) tailStartRef.current = Math.max(0, turns.length - TURN_TAIL_FULL);
+	const slotElsRef = useRef(new Map<number, HTMLElement>());
+	const anchorRef = useRef<{ index: number; top: number } | null>(null);
+	const upgradeCheckRef = useRef(0);
+	const scheduleUpgradeCheck = useCallback(() => {
+		if (upgradeCheckRef.current) return;
+		upgradeCheckRef.current = requestAnimationFrame(() => {
+			upgradeCheckRef.current = 0;
+			const scroller = scrollRef.current;
+			if (!scroller) return;
+			const top = -TURN_NEAR_MARGIN;
+			const bottom = window.innerHeight + TURN_NEAR_MARGIN;
+			const viewTop = scroller.getBoundingClientRect().top;
+			const fresh: number[] = [];
+			let anchor: { index: number; top: number } | null = null;
+			for (const index of [...slotElsRef.current.keys()].sort((a, b) => a - b)) {
+				const rect = slotElsRef.current.get(index)!.getBoundingClientRect();
+				// 视口里第一个槽当锚点：升级只换槽里的内容，槽元素本身不变，位置可以前后对比
+				if (!anchor && rect.bottom > viewTop) anchor = { index, top: rect.top };
+				if (nearTurnsRef.current.has(index) || rect.top > bottom || rect.bottom < top) continue;
+				fresh.push(index);
+			}
+			if (!fresh.length) return;
+			anchorRef.current = anchor;
+			setNearTurns((prev) => {
+				const next = new Set(prev);
+				for (const index of fresh) next.add(index);
+				return next;
+			});
+		});
+	}, []);
+	useLayoutEffect(() => {
+		// 升级提交后（绘制前）。贴底状态下直接重新贴底：升级常发生在视口下方，会把底部推远。
+		// 否则视口上方的回合变高会把正在看的内容往下顶。Chrome / Edge / Firefox 的滚动锚定
+		// 会自己补偿，而且不打断平滑滚动（大纲跳转、搜索定位）；这里再写 scrollTop 反而会
+		// 打断它们。只有不支持锚定的浏览器（Safari）才按锚点槽的位移手动补偿。
+		const anchor = anchorRef.current;
+		anchorRef.current = null;
+		const scroller = scrollRef.current;
+		if (!scroller) return;
+		if (stickToBottom.current) {
+			scroller.scrollTop = scroller.scrollHeight;
+			return;
+		}
+		if (!anchor || (typeof CSS !== "undefined" && CSS.supports("overflow-anchor", "auto"))) return;
+		const el = slotElsRef.current.get(anchor.index);
+		const delta = el ? el.getBoundingClientRect().top - anchor.top : 0;
+		if (Math.abs(delta) >= 1) scroller.scrollTop += delta;
+	}, [nearTurns]);
+	// 快照到达 / 跳转（scrollIntoView、回到底部）后的初次判定；滚动中的判定挂在 onScroll 上
+	useEffect(() => {
+		scheduleUpgradeCheck();
+	}, [scheduleUpgradeCheck, messages.length]);
+	const registerSlot = useCallback((index: number, el: HTMLElement | null) => {
+		if (!el) {
+			slotElsRef.current.delete(index);
+			return;
+		}
+		slotElsRef.current.set(index, el);
+	}, []);
+	const slotCbRef = useRef(new Map<number, (el: HTMLElement | null) => void>());
+	const slotRef = useCallback((index: number) => {
+		let cb = slotCbRef.current.get(index);
+		if (!cb) {
+			cb = (el) => registerSlot(index, el);
+			slotCbRef.current.set(index, cb);
+		}
+		return cb;
+	}, [registerSlot]);
+	const isNear = useCallback((index: number) => index >= (tailStartRef.current ?? 0) || nearTurns.has(index), [nearTurns]);
+
 	useEffect(() => {
 		const grew = messages.length > prevLenRef.current;
 		prevLenRef.current = messages.length;
@@ -1512,32 +1647,39 @@ export function ChatWindow({
 					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) => (
-						<TurnBlock
-							key={turn.key}
-							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}
-						/>
+						// 回合间 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 && (
@@ -1577,7 +1719,7 @@ export function ChatWindow({
 				</div>
 			</div>
 			{/* 右侧大纲导航：从助手回答的标题和用户消息生成，随滚动高亮，悬停展开 */}
-			<OutlineRail scrollRef={scrollRef} revision={`${messages.length}:${isStreaming ? 1 : 0}`} />
+			<OutlineRail scrollRef={scrollRef} revision={`${messages.length}:${nearTurns.size}:${isStreaming ? 1 : 0}`} />
 			{/* 脱离底部时的“回到底部”浮钮：与输入框卡片同轴，挂在右上角顶部，图标带新内容角标 */}
 			{(unseen > 0 || awayFromBottom) && (
 				<div