@tea-agent/loop-agent 0.43.0-next.1 → 0.43.0-next.11

package/dist/worker/observe/static/views/session-timeline.js

@@ -1,12 +1,14 @@
 /** Session event timeline helpers (Observe UI R5 + rich process view). */
 import { UI_TEXT } from "../constants.js";
-import { el } from "../dom.js";
+import { el, iconButton } from "../dom.js";
 import { formatTs, truncateText } from "../format.js";
 import { renderMarkdown } from "../markdown-render.js";
 import { fetchJson } from "../api.js";
 import {
 	uiState,
 	updateDagTimelineViewportState,
+	inspectorReadingState,
+	isScrollRegionAboveBottom,
 } from "../state.js";
 
 /** Default visible lines for tool result preview before expand. */
@@ -17,6 +19,10 @@ function isTimelineAutoScrollEnabled() {
 }
 
 function scrollTimelineToLatest(content) {
+	if (content._readingState) {
+		content._readingState.followLatest = true;
+		content._readingState.seenCount = content._readingState.eventCount;
+	}
 	content.scrollLeft = 0;
 	content.scrollTop = content.scrollHeight;
 	uiState.dagTimelineViewportState = updateDagTimelineViewportState(
@@ -29,7 +35,9 @@ function scrollTimelineToLatest(content) {
 	);
 }
 
-/** Floating, explicit live-follow control for the execution-record viewport. */
+/** Floating chat-style jump-to-bottom control for execution-record viewports.
+ *  可滚动且视口离开底部即出现（终态运行同样可用），贴底或内容不足一屏时隐藏；
+ *  点击回到底部，活跃运行同时恢复跟随。 */
 export function createTimelineAutoScrollControl(content) {
 	const dock = el("div", "process-timeline-autoscroll-dock");
 	const button = document.createElement("button");
@@ -42,29 +50,21 @@ export function createTimelineAutoScrollControl(content) {
 	button.appendChild(icon);
 
 	const sync = () => {
-		const enabled = isTimelineAutoScrollEnabled();
-		const actionLabel = enabled ? "关闭自动滚动" : "自动滚动";
-		button.className = `process-timeline-autoscroll${enabled ? " is-active" : ""}`;
-		button.setAttribute("aria-pressed", String(enabled));
-		button.setAttribute("aria-label", actionLabel);
-		button.setAttribute("data-tooltip", actionLabel);
-		icon.className = enabled ? "ri-arrow-down-line" : "ri-pause-mini-fill";
+		dock.hidden = !isScrollRegionAboveBottom(content);
+		if (dock.hidden) return;
+		const unread = content._readingState
+			? Math.max(0, content._readingState.eventCount - content._readingState.seenCount)
+			: 0;
+		const label = unread > 0 ? `${unread} 条新记录 · 回到底部` : "回到底部";
+		button.className = `process-timeline-autoscroll${unread > 0 ? " has-unread" : ""}`;
+		button.setAttribute("aria-label", label);
+		button.setAttribute("data-tooltip", label);
 	};
+	content._syncTimelineFollow = sync;
 
 	button.addEventListener("click", () => {
-		const enabled = !isTimelineAutoScrollEnabled();
-		uiState.dagTimelineAutoScrollEnabled = enabled;
-		if (enabled) scrollTimelineToLatest(content);
-		else {
-			uiState.dagTimelineViewportState = updateDagTimelineViewportState(
-				uiState.dagTimelineViewportState,
-				uiState.currentDagRunId,
-				content.dataset.nodeId,
-				content.scrollLeft,
-				content.scrollTop,
-				false,
-			);
-		}
+		uiState.dagTimelineAutoScrollEnabled = true;
+		scrollTimelineToLatest(content);
 		sync();
 	});
 
@@ -90,149 +90,6 @@ export function sessionEventArgs(event) {
 	return args && typeof args === "object" && !Array.isArray(args) ? args : {};
 }
 
-function escapeHtml(text) {
-	return String(text ?? "")
-		.replaceAll("&", "&")
-		.replaceAll("<", "&lt;")
-		.replaceAll(">", "&gt;")
-		.replaceAll('"', "&quot;")
-		.replaceAll("'", "&#39;");
-}
-
-function downloadTextFile(filename, text) {
-	const blob = new Blob([text], { type: "text/html;charset=utf-8" });
-	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = filename;
-	document.body.appendChild(a);
-	a.click();
-	a.remove();
-	URL.revokeObjectURL(url);
-}
-
-/** 抓取页面真实加载的样式表原文（导出内联用）。
- *  不猜路径：直接取当前文档 <link rel="stylesheet"> 的 href（相对当前页面解析），
- *  反代/子路径部署下也和页面渲染用的是同一份 CSS；fetch 失败时返回 ""，
- *  调用方回退 EXPORT_FALLBACK_CSS。 */
-export async function fetchPageStylesheetText() {
-	try {
-		const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
-		const texts = [];
-		for (const link of links) {
-			const href = link.getAttribute("href");
-			if (!href) continue;
-			const url = new URL(href, document.baseURI).href;
-			const res = await fetch(url, { cache: "no-cache" });
-			if (res.ok) texts.push(await res.text());
-		}
-		return texts.join("\n");
-	} catch {
-		return "";
-	}
-}
-
-/** 兜底样式：仅在无法抓取页面 /inspect/styles.css 时使用（与页面 process-timeline 排版对齐）。 */
-const EXPORT_FALLBACK_CSS = `
-:root{--canvas:#f7f7f4;--surface:#ffffff;--canvas-soft:#fafaf7;--surface-muted:#f0efe9;--ink:#26251e;--body:#5a5852;--muted:#807d72;--muted-soft:#a09c92;--hairline:#e6e5e0;--hairline-strong:#cfcdc4;--orange:#f54e00;--orange-active:#d04200;--blue:#3f6ea4;--green:#1f8a65;--amber:#a66a00;--red:#c72d53;--lavender:#e4daf1;--radius-sm:6px;--space-2:8px;--space-3:12px;--space-5:20px}
-body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--canvas);color:var(--body);font-size:13px}
-.process-timeline{display:grid;gap:0;margin:0;padding:var(--space-2) 0;list-style:none}
-.process-timeline-item{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:stretch;min-height:34px}
-.process-timeline-item.has-time{grid-template-columns:20px 92px minmax(0,1fr)}
-.process-timeline-rail{position:relative;display:grid;place-items:center;min-height:34px}
-.process-timeline-rail::before{position:absolute;top:0;bottom:0;width:1px;background:var(--hairline-strong);content:""}
-.process-timeline-item.is-first .process-timeline-rail::before{top:50%}
-.process-timeline-item.is-last .process-timeline-rail::before{bottom:50%}
-.process-timeline-dot{position:relative;z-index:1;width:8px;height:8px;border:2px solid var(--surface);border-radius:50%;background:var(--muted-soft)}
-.process-timeline-lifecycle .process-timeline-dot{background:var(--lavender)}
-.process-timeline-tool-start .process-timeline-dot{background:var(--orange)}
-.process-timeline-tool-end .process-timeline-dot{background:var(--green)}
-.process-timeline-assistant .process-timeline-dot{background:var(--blue)}
-.process-timeline-protocol .process-timeline-dot{background:var(--muted-soft)}
-.process-timeline-item.is-error .process-timeline-dot{background:var(--red)}
-.process-timeline-time{padding:9px 0;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
-.process-timeline-label{min-width:0;padding:8px 0 8px var(--space-2);color:var(--body);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
-.process-timeline-protocol .process-timeline-label{color:var(--muted);font-size:11px}
-.process-timeline-body{min-width:0;padding:4px 0 8px var(--space-2)}
-.process-timeline-card{display:grid;gap:6px;min-width:0}
-.process-timeline-details{min-width:0;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface)}
-.process-timeline-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;color:var(--ink);font-size:12px;font-weight:650}
-.process-timeline-summary::-webkit-details-marker{display:none}
-.process-timeline-summary-title{min-width:0;overflow-wrap:anywhere}
-.process-timeline-summary-status{flex-shrink:0;color:var(--muted);font-size:11px;font-weight:700}
-.process-timeline-summary-status.status-succeeded{color:var(--green)}
-.process-timeline-summary-status.status-failed{color:var(--red)}
-.process-timeline-summary-status.status-pending{color:var(--orange)}
-.process-timeline-tool-card.is-error .process-timeline-details{border-color:var(--red);background:var(--canvas-soft)}
-.process-timeline-card-body{display:grid;gap:6px;padding:0 10px 10px}
-.process-timeline-section-label{color:var(--muted);font-size:11px;font-weight:700}
-.process-timeline-code,.process-timeline-thinking-body{margin:0;padding:8px 10px;overflow:auto;border-radius:var(--radius-sm);background:var(--canvas-soft);color:var(--body);font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:11px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
-.process-timeline-more{margin-top:2px}
-.process-timeline-more>summary{cursor:pointer;color:var(--blue);font-size:11px;font-weight:650}
-.process-timeline-thinking>summary{background:var(--lavender)}
-.process-timeline-turn-text{display:grid;gap:6px;padding:8px 10px;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface)}
-.process-timeline-turn-text .markdown-output{font-size:12px}
-.process-timeline-tool-only-note{margin:0;font-size:12px}
-.process-timeline-turn-tools{display:grid;gap:4px;margin:0;padding:0 0 0 1.1em;color:var(--body);font-size:12px;font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;overflow-wrap:anywhere}
-.process-timeline-turn-tools li{padding:2px 0}
-.process-timeline-agent-end-note{margin:0;font-size:11px}
-.markdown-output{display:grid;gap:var(--space-3);color:var(--body);font-size:13px;line-height:1.65}
-.markdown-output>:first-child{margin-top:0}
-.markdown-output>:last-child{margin-bottom:0}
-.markdown-output h1,.markdown-output h2,.markdown-output h3,.markdown-output h4{margin:var(--space-5) 0 var(--space-2);color:var(--ink);line-height:1.3}
-.markdown-output h1{font-size:21px}.markdown-output h2{font-size:18px}.markdown-output h3{font-size:16px}.markdown-output h4{font-size:14px}
-.markdown-output p,.markdown-output blockquote,.markdown-output ul,.markdown-output ol{margin:0;overflow-wrap:anywhere}
-.markdown-output ul,.markdown-output ol{padding-left:22px}
-.markdown-output blockquote{padding-left:12px}
-.btn{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--body);font-size:12px;font-weight:600;cursor:pointer;user-select:none}
-.btn-secondary{background:var(--surface-muted)}
-.btn:hover{border-color:var(--orange);color:var(--orange-active)}
-`;
-
-const EXPORT_SHELL_CSS = `
-/* 导出文档变量基础：页面样式把这些变量定义在 body[data-shell]/.inspect-workspace-root
- * 下，独立导出的 HTML 既无该属性也无该包裹，变量会整体失效——深色系统的画布
- * 兜底为黑底，叠加黑字后正文不可读。导出文档自带变量定义并强制 light 配色。 */
-:root{color-scheme:light}
-body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--canvas,#f7f7f4)}
-.export-shell{max-width:1000px;margin:0 auto;padding:24px 28px;background:var(--surface,#ffffff);min-height:100vh;box-shadow:0 0 0 1px var(--hairline,#e6e5e0)}
-.export-head h1{font-size:15px;color:var(--ink,#26251e);margin:0;font-weight:700}
-.export-sub{color:var(--muted,#807d72);font-size:12px;margin:4px 0 16px}
-.export-controls{display:flex;justify-content:flex-start;margin:0 0 12px}
-.export-toggle{min-height:28px;padding:0 12px;border:1px solid var(--hairline-strong,#cfcdc4);border-radius:var(--radius-sm,6px);background:var(--surface,#ffffff);color:var(--body,#5a5852);font-size:11px;font-weight:600;cursor:pointer;user-select:none}
-.export-toggle:hover,.export-toggle:focus-visible{border-color:var(--orange,#f54e00);color:var(--orange-active,#d04200);outline:none}
-body.hide-protocol .process-timeline-item.process-timeline-protocol{display:none}
-`;
-
-/** 导出文档自带的变量基础：与页面 styles.css 的 light 主题保持一致。
- *  即使 fetch 到了页面 CSS，其变量也挂在 body[data-shell=…]/.inspect-workspace-root
- *  选择器下而不生效，必须在导出文档内重新定义。 */
-const EXPORT_ROOT_VARS_CSS = `:root{--canvas:#f7f7f4;--surface:#ffffff;--canvas-soft:#fafaf7;--surface-muted:#f0efe9;--surface-ink:#26251e;--ink:#26251e;--body:#5a5852;--muted:#807d72;--muted-soft:#a09c92;--hairline:#e6e5e0;--hairline-strong:#cfcdc4;--orange:#f54e00;--orange-active:#d04200;--blue:#3f6ea4;--green:#1f8a65;--amber:#a66a00;--red:#c72d53;--lavender:#e4daf1;--mint:#d8ead5;--peach:#f1d8cb;--gold:#d8b166;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px}`;
-
-/**
- * 把页面渲染出的时间线 innerHTML 封装成自包含 HTML。
- * @param {string} bodyHTML 页面渲染的 .process-timeline 等真实 DOM 序列化结果
- * @param {{nodeId?:string,dagRunId?:string}} meta
- * @param {string} [cssText] 页面 /inspect/styles.css 原文；缺失时用兜底样式
- */
-export function buildPageStyledDoc(bodyHTML, meta = {}, cssText = "") {
-	const now = new Date().toLocaleString();
-	const title = meta.nodeId ? `节点执行过程 · ${meta.nodeId}` : "节点执行过程";
-	const style = cssText.trim()
-		? `${EXPORT_ROOT_VARS_CSS}\n${cssText}\n\n/* 导出外壳 */\n${EXPORT_SHELL_CSS}`
-		: `${EXPORT_FALLBACK_CSS}\n${EXPORT_SHELL_CSS}`;
-	// 有协议行时，在左上角提供一个「展开/隐藏原始协议事件」按钮（与页面一致），默认隐藏。
-	const hasProtocol = bodyHTML.includes("process-timeline-protocol");
-	const controls = hasProtocol
-		? `<div class="export-controls"><button type="button" id="exportToggleProtocol" class="export-toggle">展开原始协议事件</button></div><script>(function(){var b=document.body,t=document.getElementById('exportToggleProtocol'),on=false;function apply(){b.classList.toggle('hide-protocol',!on);t.textContent=on?'隐藏原始协议事件':'展开原始协议事件';}if(t){t.addEventListener('click',function(){on=!on;apply();});apply();}})();</script>`
-		: "";
-	// body 带 data-shell="observe-console"：内联的页面 styles.css 把全部设计令牌
-	// (--canvas/--surface/--hairline-strong …) 与部分规则 (body[data-shell] …) 定义在
-	// 该作用域下，导出文档带上属性后令牌与前缀规则原生命中，与页面渲染一致。
-	// EXPORT_ROOT_VARS_CSS 仍保留：fetch 页面 CSS 失败的兜底路径令牌不缺。
-	return `<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escapeHtml(title)}</title><style>${style}</style></head><body data-shell="observe-console"><div class="export-shell"><div class="export-head"><h1>${escapeHtml(title)}</h1></div><p class="export-sub">DAG ${escapeHtml(meta.dagRunId ?? "")} · 导出于 ${escapeHtml(now)}</p>${controls}<div class="export-timeline">${bodyHTML}</div></div></body></html>`;
-}
-
 export function sessionEventResult(event) {
 	return normalizeSessionEventFields(event).result;
 }
@@ -442,6 +299,7 @@ export function buildSessionTimelineItems(events) {
 			while (index + 1 < events.length) {
 				const nextType = events[index + 1]?.type;
 				if (nextType !== "message_start" && nextType !== "message_end") break;
+				if (eventCategory({ kind: "protocol", event: events[index + 1] }) !== eventCategory({ kind: "protocol", event })) break;
 				count += 1;
 				index += 1;
 			}
@@ -480,13 +338,16 @@ export function splitSessionEventsByAttempt(events) {
  * key. attempt-N shows only that attempt's segment when the shared log carries
  * multiple attempts; other keys (pass-N, null) keep the full stream.
  */
-export function resolveTimelineVisibleEvents(events, executionKey) {
+export function resolveTimelineVisibleEvents(events, executionKey, expectedAttempts) {
 	const match =
 		typeof executionKey === "string"
 			? /^attempt-(\d+)$/.exec(executionKey)
 			: null;
 	if (!match) return { events, note: null };
 	const segments = splitSessionEventsByAttempt(events);
+	if (Number.isSafeInteger(expectedAttempts) && segments.length !== expectedAttempts) return {
+		events, note: "当前显示节点共享日志：日志会话边界与尝试记录不一致，无法可靠按尝试拆分；分次产出可在“产出”中查看。",
+	};
 	if (segments.length <= 1) return { events, note: null };
 	const requested = Number(match[1]);
 	if (requested >= 1 && requested <= segments.length) {
@@ -531,6 +392,7 @@ export function buildRichTimelineItems(events, options = {}) {
 			while (index + 1 < events.length) {
 				const nextType = events[index + 1]?.type;
 				if (nextType !== "message_start" && nextType !== "message_end") break;
+				if (eventCategory({ kind: "protocol", event: events[index + 1] }) !== eventCategory({ kind: "protocol", event })) break;
 				count += 1;
 				index += 1;
 				protocolEvents.push(normalizeSessionEventFields(events[index]));
@@ -548,6 +410,7 @@ export function buildRichTimelineItems(events, options = {}) {
 					kind: "protocol",
 					event,
 					protocolCount: count,
+					protocolEvents,
 					collapsed: true,
 					detailKey: `protocol-${items.length}`,
 				});
@@ -684,32 +547,28 @@ export function buildRichTimelineItems(events, options = {}) {
 }
 
 const EXECUTION_RECORD_FILTERS = Object.freeze([
-	["all", "全部"],
-	["model", "模型消息"],
-	["tools", "工具与进程"],
+	["all", "全部"], ["model", "模型消息"], ["tools", "工具与进程"], ["system", "系统事件"],
 ]);
-
 function normalizeExecutionRecordFilter(value) {
-	return value === "model" || value === "tools" ? value : "all";
+	return ["model", "tools", "system"].includes(value) ? value : "all";
 }
-
-export function filterExecutionRecordItems(items, filter) {
+export function eventCategory(item) {
+	if (item.kind === "tool") return "tools";
+	if (item.kind === "turn") return "model";
+	if (item.kind === "protocol") {
+		const role = item.event?.message?.role ?? item.event?.role;
+		return ["tool", "toolResult"].includes(role) ? "tools" : ["assistant", "user"].includes(role) ? "model" : "system";
+	}
+	return "system";
+}
+export function isErrorRecord(item) {
+	const event = item.event ?? {};
+	return item.isError === true || event.isError === true || event.ok === false ||
+		["failed", "error", "failure"].includes(event.status) || event.message?.stopReason === "error";
+}
+export function filterExecutionRecordItems(items, filter, errorsOnly = false) {
 	const normalized = normalizeExecutionRecordFilter(filter);
-	if (normalized === "all") return items;
-	return items.filter((item) => {
-		const protocolEvents = Array.isArray(item.protocolEvents)
-			? item.protocolEvents
-			: [item.event];
-		const toolProtocol =
-			item.kind === "protocol" &&
-			protocolEvents.some((event) => {
-				const role = event?.message?.role ?? event?.role;
-				return role === "tool" || role === "toolResult";
-			});
-		const modelFact =
-			item.kind === "turn" || (item.kind === "protocol" && !toolProtocol);
-		return normalized === "model" ? modelFact : !modelFact;
-	});
+	return items.filter((item) => (normalized === "all" || eventCategory(item) === normalized) && (!errorsOnly || isErrorRecord(item)));
 }
 
 function ensureOpenDetailsSet() {
@@ -726,7 +585,7 @@ function closedDetailKey(detailKey) {
 function bindDetailsToggle(details, detailKey, defaultOpen = false) {
 	const openSet = ensureOpenDetailsSet();
 	if (defaultOpen) {
-		if (!openSet.has(closedDetailKey(detailKey))) details.open = true;
+		details.open = !openSet.has(closedDetailKey(detailKey));
 	} else if (openSet.has(detailKey)) {
 		details.open = true;
 	}
@@ -796,9 +655,9 @@ function renderToolCard(item) {
 			more.dataset.detailKey = `${item.detailKey}-full`;
 			bindDetailsToggle(more, `${item.detailKey}-full`);
 			const moreSummary = document.createElement("summary");
-			moreSummary.textContent = `展开全部结果（${totalLines} 行）`;
+			moreSummary.textContent = `展开剩余 ${totalLines - TOOL_RESULT_PREVIEW_LINES} 行（共 ${totalLines} 行）`;
 			more.appendChild(moreSummary);
-			appendPreBlock(more, "process-timeline-code", resultText);
+			appendPreBlock(more, "process-timeline-code", resultText.split("\n").slice(TOOL_RESULT_PREVIEW_LINES).join("\n"));
 			body.appendChild(more);
 		}
 	} else if (!item.pending) {
@@ -827,8 +686,7 @@ function renderTurnCard(item) {
 			details.className = "process-timeline-details process-timeline-thinking";
 			details.dataset.detailKey = `${item.detailKey}-thinking-${i}`;
 			// Default open for first thinking block so anomalies are visible.
-			if (i === 0) details.open = true;
-			bindDetailsToggle(details, `${item.detailKey}-thinking-${i}`);
+			bindDetailsToggle(details, `${item.detailKey}-thinking-${i}`, i === 0);
 			const summary = document.createElement("summary");
 			summary.className = "process-timeline-summary";
 			summary.textContent = "思考过程";
@@ -937,9 +795,45 @@ export async function mergeSessionEvents(dagRunId, nodeId) {
 	}
 }
 
+// Work on text nodes only: log contents must never become HTML.
+export function highlightTimelineSearch(row, query) {
+	for (const mark of row.querySelectorAll("mark.process-search-highlight")) {
+		mark.replaceWith(document.createTextNode(mark.textContent));
+	}
+	row.normalize();
+	if (!query) return false;
+	const pattern = new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "giu");
+	const walker = document.createTreeWalker(row, 4 /* SHOW_TEXT */);
+	const nodes = [];
+	while (walker.nextNode()) nodes.push(walker.currentNode);
+	let matched = false;
+	for (const node of nodes) {
+		const text = node.textContent;
+		const parts = [];
+		let end = 0;
+		for (const match of text.matchAll(pattern)) {
+			parts.push(document.createTextNode(text.slice(end, match.index)));
+			parts.push(el("mark", "process-search-highlight", match[0]));
+			end = match.index + match[0].length;
+		}
+		if (!parts.length) continue;
+		parts.push(document.createTextNode(text.slice(end)));
+		node.replaceWith(...parts);
+		matched = true;
+	}
+	return matched;
+}
+
 export function renderSessionTimeline(content, nodeId, options = {}) {
 	content.dataset.dagRunId = uiState.currentDagRunId ?? "";
 	content.dataset.nodeId = nodeId ?? "";
+	content.dataset.executionKey = options.executionKey ?? content.dataset.executionKey ?? "";
+	const reading = inspectorReadingState(uiState.currentDagRunId, nodeId, "timeline", content.dataset.executionKey, uiState.dagTimelineAutoScrollEnabled !== false);
+	if (reading) {
+		content._readingState = reading;
+		uiState.dagTimelineAutoScrollEnabled = reading.followLatest;
+		uiState.sessionTimelineOpenDetails = reading.openDetails;
+	}
 	content.classList.add("process-timeline-scroll");
 	if (!nodeId || uiState.sessionEvents.length === 0) {
 		content.appendChild(el("p", "empty", UI_TEXT.noSessionEvents));
@@ -949,74 +843,116 @@ export function renderSessionTimeline(content, nodeId, options = {}) {
 	const visible = resolveTimelineVisibleEvents(
 		uiState.sessionEvents,
 		options.executionKey,
+		options.attemptCount,
 	);
 	if (visible.note) {
 		content.appendChild(el("p", "process-timeline-note", visible.note));
 	}
 
-	const showProtocol = Boolean(uiState.sessionTimelineShowProtocol);
+	const showProtocol = reading?.showProtocol ?? Boolean(uiState.sessionTimelineShowProtocol);
 	const activeFilter = normalizeExecutionRecordFilter(
-		uiState.executionRecordFilter,
+		reading?.filter ?? uiState.executionRecordFilter,
 	);
 	const toolbar = el("div", "process-timeline-toolbar");
-	const filterGroup = el("div", "process-timeline-filter-group");
-	filterGroup.setAttribute("role", "group");
+	const filterGroup = el("select", "observe-select process-timeline-filter-group");
 	filterGroup.setAttribute("aria-label", "筛选执行记录");
 	for (const [filter, label] of EXECUTION_RECORD_FILTERS) {
-		const button = document.createElement("button");
-		button.type = "button";
-		button.className = "process-timeline-toggle process-timeline-filter";
-		button.setAttribute("aria-pressed", String(activeFilter === filter));
-		button.textContent = label;
-		button.addEventListener("click", () => {
-			uiState.executionRecordFilter = filter;
-			rerenderSessionTimeline(content, nodeId, options);
-		});
-		filterGroup.appendChild(button);
+		const option = el("option", null, label);
+		option.value = filter;
+		filterGroup.appendChild(option);
 	}
+	filterGroup.value = activeFilter;
+	filterGroup.addEventListener("change", () => {
+		uiState.executionRecordFilter = filterGroup.value;
+		if (reading) reading.filter = filterGroup.value;
+		rerenderSessionTimeline(content, nodeId, options);
+		content.querySelector(".process-timeline-filter-group")?.focus();
+	});
 	toolbar.appendChild(filterGroup);
-	const protocolToggle = document.createElement("button");
+	const protocolToggle = iconButton(
+		showProtocol ? "隐藏原始协议事件" : "展开原始协议事件",
+		"ri-code-s-slash-line",
+		"process-timeline-protocol-toggle",
+	);
 	protocolToggle.type = "button";
-	protocolToggle.className = "process-timeline-toggle";
 	protocolToggle.setAttribute("aria-pressed", String(showProtocol));
-	protocolToggle.textContent = showProtocol
-		? "隐藏原始协议事件"
-		: "展开原始协议事件";
 	protocolToggle.addEventListener("click", () => {
 		uiState.sessionTimelineShowProtocol = !showProtocol;
+		if (reading) reading.showProtocol = !showProtocol;
 		rerenderSessionTimeline(content, nodeId, options);
+		content.querySelector(".process-timeline-protocol-toggle")?.focus({ preventScroll: true });
 	});
-	toolbar.appendChild(protocolToggle);
-	const exportBtn = el("button", "btn btn-secondary", "导出 HTML");
-	exportBtn.type = "button";
-	exportBtn.addEventListener("click", async () => {
-		const cssText = await fetchPageStylesheetText();
-		// 复用页面真实渲染（含原始协议事件），保证导出的排版与页面一致。
-		const prevShow = uiState.sessionTimelineShowProtocol;
-		uiState.sessionTimelineShowProtocol = true;
-		const tmp = document.createElement("div");
-		tmp.className = "process-timeline-scroll";
-		renderSessionTimeline(tmp, nodeId, options);
-		const toolbar = tmp.querySelector(".process-timeline-toolbar");
-		if (toolbar) toolbar.remove();
-		const innerHTML = tmp.innerHTML;
-		uiState.sessionTimelineShowProtocol = prevShow;
-		downloadTextFile(
-			`node-process-${nodeId || "node"}-${Date.now()}.html`,
-			buildPageStyledDoc(innerHTML, {
-				nodeId,
-				dagRunId: uiState.currentDagRunId ?? "",
-			}, cssText),
-		);
-	});
-	toolbar.appendChild(exportBtn);
 	content.appendChild(toolbar);
-	content.appendChild(createTimelineAutoScrollControl(content));
+	if (reading) {
+		reading.eventCount = visible.events.length;
+		if (!reading.eventsInitialized || reading.followLatest) reading.seenCount = reading.eventCount;
+		reading.eventsInitialized = true;
+		content.appendChild(createTimelineAutoScrollControl(content));
+	}
 
 	const timelineItems = filterExecutionRecordItems(
 		buildRichTimelineItems(visible.events, { showProtocol }),
 		activeFilter,
+		reading?.errorsOnly,
 	);
+	const errors = iconButton("仅看错误", "ri-error-warning-line", "process-timeline-errors");
+	errors.type = "button";
+	errors.setAttribute("aria-pressed", String(reading?.errorsOnly === true));
+	errors.addEventListener("click", () => {
+		if (reading) reading.errorsOnly = !reading.errorsOnly;
+		rerenderSessionTimeline(content, nodeId, options);
+	});
+	toolbar.appendChild(errors);
+	const search = el("input", "process-timeline-search");
+	search.type = "search";
+	search.placeholder = "搜索当前尝试…";
+	search.setAttribute("aria-label", "搜索当前尝试执行记录");
+	search.value = reading?.query ?? "";
+	const resultCount = el("span", "muted");
+	resultCount.setAttribute("role", "status");
+	let matches = [], matchIndex = -1;
+	const searchButtons = [];
+	const refreshMatches = () => {
+		const query = search.value.trim();
+		if (reading) reading.query = search.value;
+		matches = [];
+		for (const row of content.querySelectorAll(".process-timeline-item")) {
+			const matched = highlightTimelineSearch(row, query);
+			row.classList.remove("is-search-current");
+			row.classList.toggle("is-search-match", Boolean(matched));
+			if (matched) matches.push(row);
+		}
+		matchIndex = -1;
+		for (const button of searchButtons) button.disabled = matches.length === 0;
+		resultCount.textContent = query ? `${matches.length} 条匹配` : "";
+	};
+	const jump = (delta) => {
+		if (!matches.length) return;
+		matchIndex = matchIndex < 0 ? (delta < 0 ? matches.length - 1 : 0) : (matchIndex + delta + matches.length) % matches.length;
+		for (const match of matches) match.classList.remove("is-search-current");
+		if (reading) reading.followLatest = false;
+		uiState.dagTimelineAutoScrollEnabled = false;
+		const row = matches[matchIndex];
+		row.classList.add("is-search-current");
+		for (const detail of row.querySelectorAll("details")) detail.open = true;
+		(row.querySelector("mark.process-search-highlight") ?? row).scrollIntoView({ block: "center" });
+		resultCount.textContent = `${matchIndex + 1} / ${matches.length}`;
+		content._syncTimelineFollow?.();
+	};
+	search.addEventListener("input", (event) => { if (!event.isComposing) refreshMatches(); });
+	search.addEventListener("compositionend", refreshMatches);
+	search.addEventListener("keydown", (event) => { if (event.key === "Enter" && !event.isComposing) { event.preventDefault(); jump(event.shiftKey ? -1 : 1); } });
+	toolbar.appendChild(search);
+	for (const [label, delta] of [["上一处", -1], ["下一处", 1]]) {
+		const button = iconButton(label, delta < 0 ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line", delta < 0 ? "process-search-previous" : "process-search-next");
+		button.type = "button";
+		button.disabled = true;
+		searchButtons.push(button);
+		button.addEventListener("click", () => jump(delta));
+		toolbar.appendChild(button);
+	}
+	toolbar.appendChild(resultCount);
+	toolbar.appendChild(protocolToggle);
 	const hasEventTimes = visible.events.some((event) =>
 		Boolean(sessionEventTimestamp(event)),
 	);
@@ -1082,33 +1018,45 @@ export function renderSessionTimeline(content, nodeId, options = {}) {
 		ul.appendChild(li);
 	}
 	content.appendChild(ul);
+	refreshMatches();
 
 	const timelineState =
 		uiState.dagTimelineViewportState?.dagRunId === uiState.currentDagRunId &&
 		uiState.dagTimelineViewportState.nodeId === nodeId
 			? uiState.dagTimelineViewportState
 			: null;
+	if (content.dataset.timelineScrollBound !== "1") {
+		content.dataset.timelineScrollBound = "1";
 	content.addEventListener(
 		"scroll",
 		() => {
+				if (content.dataset.inspectorTab && content.dataset.inspectorTab !== "timeline") return;
+				if (content.scrollHeight - content.clientHeight - content.scrollTop > 48) {
+					uiState.dagTimelineAutoScrollEnabled = false;
+					if (content._readingState) content._readingState.followLatest = false;
+				}
 			uiState.dagTimelineViewportState = updateDagTimelineViewportState(
 				uiState.dagTimelineViewportState,
 				uiState.currentDagRunId,
-				nodeId,
+					content.dataset.nodeId,
 				content.scrollLeft,
 				content.scrollTop,
 				isTimelineAutoScrollEnabled(),
 			);
+				if (content._readingState) Object.assign(content._readingState, { scrollTop: content.scrollTop, scrollLeft: content.scrollLeft });
+				content._syncTimelineFollow?.();
 		},
 		{ passive: true },
 	);
+	}
 	if (isTimelineAutoScrollEnabled()) {
 		content.scrollLeft = timelineState?.scrollLeft ?? 0;
 		content.scrollTop = content.scrollHeight;
 	} else {
-		content.scrollLeft = timelineState.scrollLeft;
-		content.scrollTop = timelineState.scrollTop;
+		content.scrollLeft = reading?.scrollLeft ?? timelineState?.scrollLeft ?? 0;
+		content.scrollTop = reading?.scrollTop ?? timelineState?.scrollTop ?? 0;
 	}
+	content._syncTimelineFollow?.();
 }
 
 function rerenderSessionTimeline(content, nodeId, options) {
@@ -1129,4 +1077,5 @@ function rerenderSessionTimeline(content, nodeId, options) {
 		content.scrollTop = scrollTop;
 		content.scrollLeft = scrollLeft;
 	}
+	content._syncTimelineFollow?.();
 }