@tea-agent/loop-agent 0.40.0-next.8 → 0.40.0

package/dist/worker/observe/static/operator-chrome.css

@@ -49,16 +49,18 @@
 .och-inner {
 	box-sizing: border-box;
 	width: 100%;
+	min-width: 0;
 	padding-inline: 14px;
 	margin: 0 auto;
 }
 
-/* Band 1 — 全局带：品牌 / 仓库身份 / 模式 / 对象上下文 / 状态格 */
+/* Band 1 — 全局带：品牌 / 仓库身份 / 模式 / 状态格（对象上下文在下方独立行） */
 .och-global {
 	position: relative;
 	display: flex;
 	align-items: center;
 	gap: 12px;
+	min-width: 0;
 	/* DSH 2026-08-23：约 44px 与内容同色的压缩标题栏。 */
 	height: 44px;
 }
@@ -318,11 +320,21 @@
 	z-index: 1;
 }
 
-/* 对象上下文 chip：跨模式选中连续性 + 显式返回路径 */
+/* 对象上下文 chip：跨模式选中连续性 + 显式返回路径。
+ * 不放进 44px 全局带：≥720px 模式开关 position:fixed 居中，长 run id
+ * 会从左侧把「返回 恢复」顶进滑块底下。独立一行后按钮始终完整可见。 */
+.och-context-row {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	padding: 0 0 8px;
+}
 .och-context {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
+	min-width: 0;
+	max-width: 100%;
 	min-height: 30px;
 	padding: 0 6px 0 12px;
 	border: 1px solid
@@ -331,26 +343,29 @@
 	background: color-mix(in srgb, var(--och-peach) 42%, var(--och-surface));
 	font-size: 12px;
 	color: var(--och-ink);
-	white-space: nowrap;
 }
 .och-context[hidden] {
 	display: none;
 }
 .och-context-kind {
+	flex-shrink: 0;
 	color: var(--och-orange-active);
 	font-weight: 700;
 }
 .och-context-id {
+	flex: 1 1 auto;
+	min-width: 0;
 	font-family: var(--och-mono);
 	font-size: 11px;
 	color: var(--och-body);
-	max-width: 260px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 .och-context-return {
 	display: inline-flex;
 	align-items: center;
+	flex-shrink: 0;
 	gap: 4px;
 	height: 22px;
 	padding: 0 9px;
@@ -360,6 +375,7 @@
 	font-size: 11px;
 	font-weight: 600;
 	text-decoration: none;
+	white-space: nowrap;
 }
 .och-context-return:hover {
 	background: var(--och-orange-active);
@@ -369,6 +385,7 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 0;
 	width: 20px;
 	height: 20px;
 	padding: 0;
@@ -401,6 +418,7 @@
 	font-size: 12px;
 	font-variant-numeric: tabular-nums;
 	white-space: nowrap;
+	flex-shrink: 0;
 }
 .och-fresh-dot {
 	width: 7px;
@@ -425,6 +443,7 @@
 	color: var(--och-body);
 	text-decoration: none;
 	white-space: nowrap;
+	flex-shrink: 0;
 	transition: border-color 0.15s ease;
 }
 .och-pi:hover {

package/dist/worker/observe/static/operator-chrome.js

@@ -17,6 +17,7 @@ export const OPERATE_TABS = Object.freeze([
 	{ id: "night", label: "夜间", href: "/#/operate/night" },
 	{ id: "models", label: "模型与认证", href: "/#/operate/models" },
 	{ id: "settings", label: "设置", href: "/#/operate/settings" },
+	{ id: "pi-plugins", label: "Pi 插件", href: "/#/operate/pi-plugins" },
 ]);
 
 export const INSPECT_TABS = Object.freeze([
@@ -653,7 +654,9 @@ export function mountOperatorChrome(root, config = {}) {
 		if (model.context) {
 			const chip = el("div", "och-context");
 			chip.appendChild(el("span", "och-context-kind", model.context.kindLabel));
-			chip.appendChild(el("span", "och-context-id", model.context.id));
+			const idEl = el("span", "och-context-id", model.context.id);
+			idEl.title = model.context.id;
+			chip.appendChild(idEl);
 			const back = el("a", "och-context-return");
 			back.href = model.context.returnHref;
 			back.appendChild(makeIcon("arrowLeft"));
@@ -675,7 +678,9 @@ export function mountOperatorChrome(root, config = {}) {
 				render();
 			});
 			chip.appendChild(close);
-			global.appendChild(chip);
+			const row = el("div", "och-context-row");
+			row.appendChild(chip);
+			inner.appendChild(row);
 		}
 
 		global.appendChild(el("span", "och-spacer"));

package/dist/worker/observe/static/styles.css

@@ -1,4 +1,7 @@
-:root {
+html:has(body[data-shell="observe-console"]),
+body[data-shell="observe-console"],
+.inspect-workspace-root {
+	color-scheme: light;
 	--canvas: #f7f7f4;
 	--canvas-soft: #fafaf7;
 	--surface: #ffffff;
@@ -38,14 +41,14 @@
 	--transition-base: 220ms ease;
 	--shadow-panel: 0 1px 2px rgb(38 37 30 / 4%), 0 8px 24px rgb(38 37 30 / 3%);
 	--shadow-soft: 0 10px 30px rgb(38 37 30 / 6%);
-	color-scheme: light;
 }
 
-* {
+body[data-shell="observe-console"] *,
+.inspect-workspace-root * {
 	box-sizing: border-box;
 }
 
-html {
+html:has(body[data-shell="observe-console"]) {
 	background:
 		radial-gradient(
 			1200px 480px at 8% -10%,
@@ -62,7 +65,7 @@ html {
 	scroll-behavior: smooth;
 }
 
-body {
+body[data-shell="observe-console"] {
 	min-width: 320px;
 	margin: 0;
 	min-height: 100vh;
@@ -76,29 +79,46 @@ body {
 	line-height: 1.5;
 }
 
-button,
-input,
-select,
-textarea {
+body[data-shell="observe-console"] button,
+body[data-shell="observe-console"] input,
+body[data-shell="observe-console"] select,
+body[data-shell="observe-console"] textarea,
+.inspect-workspace-root button,
+.inspect-workspace-root input,
+.inspect-workspace-root select,
+.inspect-workspace-root textarea {
 	font: inherit;
 }
 
-a {
+body[data-shell="observe-console"] a,
+.inspect-workspace-root a {
 	color: inherit;
 }
 
-code,
-pre,
-.output-block,
-.dag-node-label,
-.dag-node-meta,
-.dag-node-status,
-.dag-node-table td:nth-child(2),
-td:first-child,
-.meta-item dd,
-.kpi-value,
-.risk-total,
-.process-timeline-time {
+body[data-shell="observe-console"] code,
+body[data-shell="observe-console"] pre,
+body[data-shell="observe-console"] .output-block,
+body[data-shell="observe-console"] .dag-node-label,
+body[data-shell="observe-console"] .dag-node-meta,
+body[data-shell="observe-console"] .dag-node-status,
+body[data-shell="observe-console"] .dag-node-table td:nth-child(2),
+body[data-shell="observe-console"] td:first-child,
+body[data-shell="observe-console"] .meta-item dd,
+body[data-shell="observe-console"] .kpi-value,
+body[data-shell="observe-console"] .risk-total,
+body[data-shell="observe-console"] .process-timeline-time,
+.inspect-workspace-root code,
+.inspect-workspace-root pre,
+.inspect-workspace-root .output-block,
+.inspect-workspace-root .dag-node-label,
+.inspect-workspace-root .dag-node-meta,
+.inspect-workspace-root .dag-node-status,
+.inspect-workspace-root .dag-node-table td:nth-child(2),
+.inspect-workspace-root td:first-child,
+.inspect-workspace-root .meta-item dd,
+.inspect-workspace-root .kpi-value,
+.inspect-workspace-root .risk-total,
+.inspect-workspace-root .process-timeline-time {
 	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
@@ -125,6 +145,30 @@ td:first-child,
 	padding: var(--space-5) 0 56px;
 }
 
+.inspect-workspace-root {
+	position: relative;
+	min-height: 100%;
+	color: var(--ink);
+	font-family:
+		system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
+		"Noto Sans SC", BlinkMacSystemFont, sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.inspect-workspace-root .dag-inspector {
+	top: 8px;
+	right: 8px;
+	bottom: 8px;
+	width: min(var(--dag-inspector-width, 50%), calc(100% - 16px));
+}
+
+.inspect-workspace-root #app {
+	width: 100%;
+	margin: 0;
+	padding: var(--space-4) var(--space-5) var(--space-6);
+}
+
 .breadcrumb {
 	display: flex;
 	min-height: 16px;
@@ -257,7 +301,8 @@ td:first-child,
 	color: var(--body);
 }
 
-.panel {
+body[data-shell="observe-console"] .panel,
+.inspect-workspace-root .panel {
 	min-width: 0;
 	background: color-mix(in srgb, var(--surface) 96%, transparent);
 	border: 1px solid var(--hairline);
@@ -288,7 +333,8 @@ td:first-child,
 }
 
 .section-heading,
-.panel h3 {
+body[data-shell="observe-console"] .panel h3,
+.inspect-workspace-root .panel h3 {
 	margin: 0 0 var(--space-4);
 	color: var(--ink);
 	font-size: 14px;
@@ -1810,6 +1856,15 @@ body.is-resizing-dag-graph {
 	color: var(--muted);
 	font-size: 11px;
 }
+.process-timeline-export-bar {
+	display: flex;
+	justify-content: flex-end;
+	padding: 2px 0 var(--space-2);
+}
+.process-timeline-export-bar .btn {
+	font-size: 11px;
+	padding: 3px 10px;
+}
 .process-timeline {
 	display: grid;
 	gap: 0;
@@ -2526,7 +2581,8 @@ body.is-resizing-dag-graph {
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.muted {
+body[data-shell="observe-console"] .muted,
+.inspect-workspace-root .muted {
 	color: var(--muted);
 }
 
@@ -2746,6 +2802,12 @@ body.is-resizing-dag-graph {
 		bottom: 12px;
 		width: calc(100vw - 24px);
 	}
+	.inspect-workspace-root .dag-inspector {
+		width: calc(100% - 16px);
+		top: 8px;
+		right: 8px;
+		bottom: 8px;
+	}
 	.dag-inspector-resize-handle {
 		display: none;
 	}

package/dist/worker/observe/static/views/dag-inspector.js

@@ -24,6 +24,7 @@ import { renderMarkdown, renderInspectorDocument } from "../markdown-render.js";
 import { describeDagNodePurpose } from "../dag-node-purpose.js";
 import { buildPromptRestartCandidateOptions } from "../prompt-restart-candidates.js";
 import { copyText } from "../copy.js";
+import { navigate } from "../router.js";
 import {
 	fetchWithWorkspaceScope,
 	uiState,
@@ -47,6 +48,7 @@ import {
 import {
 	formatSessionEventTime,
 	renderSessionTimeline,
+	buildPageStyledDoc,
 } from "./session-timeline.js";
 import { createCustomSelect } from "../custom-select.js";
 
@@ -1671,7 +1673,7 @@ async function renderPromptRestart(content, dagRunId, node) {
 						open.className = "prompt-restart-submit is-secondary";
 						open.textContent = "打开新 run";
 						open.addEventListener("click", () => {
-							window.location.hash = `#/dag/${encodeURIComponent(String(newRunId))}`;
+							navigate(`/dag/${encodeURIComponent(String(newRunId))}`);
 						});
 						row.appendChild(open);
 					} else {
@@ -2343,6 +2345,45 @@ function renderNonPiProcess(content, body) {
 		ul.appendChild(li);
 	}
 	content.appendChild(ul);
+	appendProcessExportButton(content, body, body);
+}
+
+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);
+}
+
+function appendProcessExportButton(content, body, meta) {
+	if (!body || ((body.commands ?? []).length === 0 && (body.steps ?? []).length === 0)) return;
+	const toolbar = el("div", "process-timeline-export-bar");
+	const btn = el("button", "btn btn-secondary", "导出 HTML");
+	btn.type = "button";
+	btn.addEventListener("click", async () => {
+		let cssText = "";
+		try {
+			const res = await fetch("/inspect/styles.css", { cache: "no-cache" });
+			if (res.ok) cssText = await res.text();
+		} catch {
+			/* 忽略：导出仍会用内联兜底样式 */
+		}
+		// 复用页面真实渲染 DOM，保证导出排版与页面一致。
+		const clone = content.cloneNode(true);
+		const bar = clone.querySelector(".process-timeline-export-bar");
+		if (bar) bar.remove();
+		downloadTextFile(
+			`node-process-${meta?.nodeId || "node"}-${Date.now()}.html`,
+			buildPageStyledDoc(clone.innerHTML, meta ?? {}, cssText),
+		);
+	});
+	toolbar.appendChild(btn);
+	content.insertBefore(toolbar, content.firstChild);
 }
 
 export async function mergeNodeProcess(dagRunId, node) {

package/dist/worker/observe/static/views/dags.js

@@ -15,6 +15,7 @@ import {
 	DAG_HISTORY_DEFAULT_PAGE_SIZE,
 	navigate,
 	parseRoute,
+	inspectPathToCanonicalHref,
 } from "../router.js";
 import { fetchDagRunHistory, summarizeFetchError } from "../api.js";
 import { copyText } from "../copy.js";
@@ -57,7 +58,8 @@ function currentHistoryQuery() {
 }
 
 function syncHash(page, pageSize, { replace = false } = {}) {
-	const next = buildDagHistoryHash(page, pageSize);
+	const path = buildDagHistoryHash(page, pageSize);
+	const next = inspectPathToCanonicalHref(path).replace(/^\/#/, "") || "/inspect";
 	const current = (location.hash || "").replace(/^#/, "") || "/";
 	const currentPath = current.split("?")[0];
 	const nextPath = next.split("?")[0];
@@ -72,15 +74,15 @@ function syncHash(page, pageSize, { replace = false } = {}) {
 				location.hash = next;
 			}
 		}
-		return next;
+		return path;
 	}
 	if (replace && typeof history !== "undefined" && history.replaceState) {
 		const base = `${location.pathname}${location.search}`;
 		history.replaceState(null, "", `${base}#${next}`);
-		return next;
+		return path;
 	}
-	navigate(next);
-	return next;
+	navigate(path);
+	return path;
 }
 
 function setControlsDisabled(disabled) {

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

@@ -30,6 +30,112 @@ 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);
+}
+
+/** 兜底样式：仅在无法抓取页面 /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}
+`;
+
+const EXPORT_SHELL_CSS = `
+body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--canvas)}
+.export-shell{max-width:1000px;margin:0 auto;padding:24px 28px;background:var(--surface);min-height:100vh;box-shadow:0 0 0 1px var(--hairline)}
+.export-head h1{font-size:15px;color:var(--ink);margin:0;font-weight:700}
+.export-sub{color:var(--muted);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);border-radius:var(--radius-sm);background:var(--surface);color:var(--body);font-size:11px;font-weight:600;cursor:pointer;user-select:none}
+.export-toggle:hover,.export-toggle:focus-visible{border-color:var(--orange);color:var(--orange-active);outline:none}
+body.hide-protocol .process-timeline-item.process-timeline-protocol{display:none}
+`;
+
+/**
+ * 把页面渲染出的时间线 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()
+		? `${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>`
+		: "";
+	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><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;
 }
@@ -742,6 +848,35 @@ export function renderSessionTimeline(content, nodeId, options = {}) {
 		parent.scrollLeft = scrollLeft;
 	});
 	toolbar.appendChild(protocolToggle);
+	const exportBtn = el("button", "btn btn-secondary", "导出 HTML");
+	exportBtn.type = "button";
+	exportBtn.addEventListener("click", async () => {
+		let cssText = "";
+		try {
+			const res = await fetch("/inspect/styles.css", { cache: "no-cache" });
+			if (res.ok) cssText = await res.text();
+		} catch {
+			/* 忽略：导出仍会用内联兜底样式 */
+		}
+		// 复用页面真实渲染（含原始协议事件），保证导出的排版与页面一致。
+		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);
 
 	const timelineItems = buildRichTimelineItems(visible.events, {