@tea-agent/loop-agent 0.12.0 → 0.13.0-beta.0

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

@@ -1,477 +1,607 @@
-/** DAG node inspector panel (Observe UI R5). */
-import {
-	DAG_INSPECTOR_DEFAULT_WIDTH,
-	DAG_INSPECTOR_MIN_WIDTH,
-	DAG_INSPECTOR_MAX_WIDTH,
-	DAG_INSPECTOR_RIGHT_OFFSET,
-	DAG_INSPECTOR_VIEWPORT_MARGIN,
-	DAG_INSPECTOR_KEYBOARD_STEP,
-	UI_TEXT,
-} from "../constants.js";
-import { clearNode, el } from "../dom.js";
-import { badge, parseMarkdownBlocks, markdownLinkHref } from "../format.js";
-import {
-	uiState,
-	updateDagTimelineViewportState,
-	updateDagOutputViewportState,
-	computeFollowLatest,
-	isInteractiveGestureActive,
-} from "../state.js";
-import { renderSessionTimeline } from "./session-timeline.js";
-
-export function selectDagNode(dagRunId, nodeId) {
-	const nodeChanged = uiState.selectedDagNodeId !== nodeId;
-	uiState.selectedDagNodeId = nodeId;
-	uiState.dagInspectorOpen = true;
-	if (nodeChanged) {
-		uiState.sessionEventOffset = 0;
-		uiState.sessionEvents = [];
-	}
-	void import("./dag.js").then((m) => m.renderDagDetail(dagRunId, false));
-}
-
-export function closeDagInspector() {
-	uiState.dagInspectorOpen = false;
-	const panel = document.getElementById("dag-inspector");
-	if (panel) {
-		panel.classList.remove("is-open");
-		panel.setAttribute("aria-hidden", "true");
-	}
-}
-
-export function closeDagInspectorOnOutsideClick(event) {
-	if (!uiState.dagInspectorOpen || !(event.target instanceof Element)) return;
-	if (
-		event.target.closest(
-			"#dag-inspector, .dag-node-table tbody tr, button, a, input, select, textarea, [role='button'], [role='tab']",
-		)
-	) {
-		return;
-	}
-	closeDagInspector();
-}
-
-export function dagInspectorMaximumWidth() {
-	return Math.max(
-		DAG_INSPECTOR_MIN_WIDTH,
-		Math.min(
-			DAG_INSPECTOR_MAX_WIDTH,
-			window.innerWidth - DAG_INSPECTOR_VIEWPORT_MARGIN,
-		),
-	);
-}
-
-export function setDagInspectorWidth(panel, requestedWidth) {
-	const maximum = dagInspectorMaximumWidth();
-	uiState.dagInspectorWidth = Math.min(
-		maximum,
-		Math.max(DAG_INSPECTOR_MIN_WIDTH, Math.round(requestedWidth)),
-	);
-	panel.style.setProperty(
-		"--dag-inspector-width",
-		`${uiState.dagInspectorWidth}px`,
-	);
-	return {
-		minimum: DAG_INSPECTOR_MIN_WIDTH,
-		maximum,
-		value: uiState.dagInspectorWidth,
-	};
-}
-
-export function createDagInspectorResizeHandle(panel) {
-	const handle = el("div", "dag-inspector-resize-handle");
-	handle.tabIndex = 0;
-	handle.setAttribute("role", "separator");
-	handle.setAttribute("aria-orientation", "vertical");
-	handle.setAttribute("aria-label", "调整节点检查器宽度");
-	handle.title = "拖动调整节点检查器宽度";
-
-	const updateRange = (requestedWidth) => {
-		const range = setDagInspectorWidth(
-			panel,
-			requestedWidth ??
-				uiState.dagInspectorWidth ??
-				DAG_INSPECTOR_DEFAULT_WIDTH,
-		);
-		handle.setAttribute("aria-valuemin", String(range.minimum));
-		handle.setAttribute("aria-valuemax", String(range.maximum));
-		handle.setAttribute("aria-valuenow", String(range.value));
-	};
-
-	updateRange();
-	handle.addEventListener("pointerdown", (event) => {
-		if (event.button !== 0) return;
-		event.preventDefault();
-		handle.setPointerCapture(event.pointerId);
-		document.body.classList.add("is-resizing-dag-inspector");
-	});
-	handle.addEventListener("pointermove", (event) => {
-		if (!handle.hasPointerCapture(event.pointerId)) return;
-		updateRange(window.innerWidth - event.clientX - DAG_INSPECTOR_RIGHT_OFFSET);
-	});
-	const stopResizing = (event) => {
-		if (handle.hasPointerCapture(event.pointerId)) {
-			handle.releasePointerCapture(event.pointerId);
-		}
-		document.body.classList.remove("is-resizing-dag-inspector");
-	};
-	handle.addEventListener("pointerup", stopResizing);
-	handle.addEventListener("pointercancel", stopResizing);
-	handle.addEventListener("keydown", (event) => {
-		const currentWidth =
-			uiState.dagInspectorWidth ?? DAG_INSPECTOR_DEFAULT_WIDTH;
-		if (event.key === "ArrowLeft") {
-			event.preventDefault();
-			updateRange(currentWidth + DAG_INSPECTOR_KEYBOARD_STEP);
-		} else if (event.key === "ArrowRight") {
-			event.preventDefault();
-			updateRange(currentWidth - DAG_INSPECTOR_KEYBOARD_STEP);
-		} else if (event.key === "Home") {
-			event.preventDefault();
-			updateRange(DAG_INSPECTOR_MIN_WIDTH);
-		} else if (event.key === "End") {
-			event.preventDefault();
-			updateRange(dagInspectorMaximumWidth());
-		}
-	});
-	return handle;
-}
-
-export function captureDagTimelineViewportState(panel) {
-	const scrollEl = panel.querySelector(".process-timeline-scroll");
-	if (scrollEl?.dataset.dagRunId && scrollEl.dataset.nodeId) {
-		const followLatest = computeFollowLatest(
-			scrollEl.scrollTop,
-			scrollEl.scrollHeight,
-			scrollEl.clientHeight,
-		);
-		uiState.dagTimelineViewportState = updateDagTimelineViewportState(
-			uiState.dagTimelineViewportState,
-			scrollEl.dataset.dagRunId,
-			scrollEl.dataset.nodeId,
-			scrollEl.scrollLeft,
-			scrollEl.scrollTop,
-			followLatest,
-		);
-	}
-}
-
-export function appendInlineMarkdown(target, text) {
-	const tokenPattern = /(`[^`]*`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
-	let cursor = 0;
-	for (const match of text.matchAll(tokenPattern)) {
-		const index = match.index ?? 0;
-		if (index > cursor)
-			target.appendChild(document.createTextNode(text.slice(cursor, index)));
-		const token = match[0];
-		if (token.startsWith("`")) {
-			target.appendChild(el("code", null, token.slice(1, -1)));
-		} else if (token.startsWith("**")) {
-			const strong = document.createElement("strong");
-			strong.textContent = token.slice(2, -2);
-			target.appendChild(strong);
-		} else if (token.startsWith("*")) {
-			const emphasis = document.createElement("em");
-			emphasis.textContent = token.slice(1, -1);
-			target.appendChild(emphasis);
-		} else {
-			const link = token.match(/^\[([^\]]+)\]\((.+)\)$/);
-			const href = markdownLinkHref(link?.[2]);
-			if (link && href) {
-				const anchor = document.createElement("a");
-				anchor.href = href;
-				anchor.target = "_blank";
-				anchor.rel = "noopener noreferrer";
-				anchor.textContent = link[1];
-				target.appendChild(anchor);
-			} else {
-				target.appendChild(document.createTextNode(token));
-			}
-		}
-		cursor = index + token.length;
-	}
-	if (cursor < text.length)
-		target.appendChild(document.createTextNode(text.slice(cursor)));
-}
-
-export function renderMarkdown(content) {
-	const article = el("article", "markdown-output");
-	for (const block of parseMarkdownBlocks(content)) {
-		switch (block.type) {
-			case "heading": {
-				const heading = document.createElement(`h${block.level}`);
-				appendInlineMarkdown(heading, block.text);
-				article.appendChild(heading);
-				break;
-			}
-			case "paragraph": {
-				const paragraph = document.createElement("p");
-				appendInlineMarkdown(paragraph, block.text);
-				article.appendChild(paragraph);
-				break;
-			}
-			case "quote": {
-				const quote = document.createElement("blockquote");
-				appendInlineMarkdown(quote, block.text);
-				article.appendChild(quote);
-				break;
-			}
-			case "list": {
-				const list = document.createElement(block.ordered ? "ol" : "ul");
-				for (const item of block.items) {
-					const listItem = document.createElement("li");
-					appendInlineMarkdown(listItem, item);
-					list.appendChild(listItem);
-				}
-				article.appendChild(list);
-				break;
-			}
-			case "code": {
-				const pre = document.createElement("pre");
-				const code = document.createElement("code");
-				if (block.language) code.dataset.language = block.language;
-				code.textContent = block.text;
-				pre.appendChild(code);
-				article.appendChild(pre);
-				break;
-			}
-			case "table": {
-				const table = document.createElement("table");
-				const head = document.createElement("thead");
-				const headRow = document.createElement("tr");
-				for (const value of block.headers) {
-					const cell = document.createElement("th");
-					appendInlineMarkdown(cell, value);
-					headRow.appendChild(cell);
-				}
-				head.appendChild(headRow);
-				table.appendChild(head);
-				const body = document.createElement("tbody");
-				for (const row of block.rows) {
-					const tableRow = document.createElement("tr");
-					for (const value of row) {
-						const cell = document.createElement("td");
-						appendInlineMarkdown(cell, value);
-						tableRow.appendChild(cell);
-					}
-					body.appendChild(tableRow);
-				}
-				table.appendChild(body);
-				article.appendChild(table);
-				break;
-			}
-			case "rule":
-				article.appendChild(document.createElement("hr"));
-				break;
-		}
-	}
-	return article;
-}
-
-function fillDagInspectorContent(content, dagRunId, node) {
-	const activeTab =
-		uiState.dagInspectorTab === "timeline" ? "timeline" : "output";
-	content.id = `dag-inspector-panel-${activeTab}`;
-	content.setAttribute("role", "tabpanel");
-	content.setAttribute("aria-labelledby", `dag-inspector-tab-${activeTab}`);
-	content.dataset.dagNodeId = String(node.nodeId ?? "");
-	if (activeTab === "timeline") {
-		renderSessionTimeline(content, node.nodeId);
-	} else if (!node.outputPreview && !node.errorPreview) {
-		content.appendChild(el("p", "empty", UI_TEXT.noOutput));
-	} else {
-		if (node.outputPreview)
-			content.appendChild(renderMarkdown(node.outputPreview));
-		if (node.errorPreview) {
-			const error = el("section", "markdown-error");
-			error.appendChild(el("p", "markdown-error-title", "错误输出"));
-			error.appendChild(renderMarkdown(node.errorPreview));
-			content.appendChild(error);
-		}
-	}
-}
-
-function buildDagInspectorHeader(dagRunId, node) {
-	const header = el("div", "dag-inspector-header");
-	header.dataset.dagRunId = String(dagRunId ?? "");
-	header.dataset.dagNodeId = String(node.nodeId ?? "");
-	const title = el("div", "dag-inspector-title");
-	title.appendChild(el("h3", null, "节点检查器"));
-	title.appendChild(el("div", "dag-inspector-node", node.nodeId));
-	header.appendChild(title);
-	const controls = el("div", "dag-inspector-controls");
-	const status = badge(node.status ?? "unknown");
-	status.classList.add("dag-inspector-status");
-	controls.appendChild(status);
-	const close = document.createElement("button");
-	close.type = "button";
-	close.className = "dag-inspector-close";
-	close.setAttribute("aria-label", "关闭节点检查器");
-	const closeIcon = el("i", "ri-close-line");
-	closeIcon.setAttribute("aria-hidden", "true");
-	close.appendChild(closeIcon);
-	close.addEventListener("click", closeDagInspector);
-	controls.appendChild(close);
-	header.appendChild(controls);
-
-	const tabDefs = [
-		["output", "节点输出", "ri-file-text-line"],
-		["timeline", "执行过程", "ri-route-line"],
-	];
-	const tabs = el("div", "dag-inspector-tabs");
-	tabs.setAttribute("role", "tablist");
-	tabs.setAttribute("aria-label", "节点检查器面板");
-	for (const [tab, label, icon] of tabDefs) {
-		const selected = uiState.dagInspectorTab === tab;
-		const button = document.createElement("button");
-		button.type = "button";
-		button.id = `dag-inspector-tab-${tab}`;
-		button.className = "dag-inspector-tab";
-		button.setAttribute("role", "tab");
-		button.setAttribute("aria-controls", `dag-inspector-panel-${tab}`);
-		button.setAttribute("aria-selected", String(selected));
-		button.tabIndex = selected ? 0 : -1;
-		button.dataset.tab = tab;
-		const tabIcon = el("i", icon);
-		tabIcon.setAttribute("aria-hidden", "true");
-		button.appendChild(tabIcon);
-		button.appendChild(document.createTextNode(` ${label}`));
-		button.addEventListener("click", () => {
-			uiState.dagInspectorTab = tab;
-			renderDagInspector(dagRunId, node, false);
-			const next = document.getElementById(`dag-inspector-tab-${tab}`);
-			next?.focus();
-		});
-		button.addEventListener("keydown", (event) => {
-			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-			event.preventDefault();
-			event.stopPropagation();
-			const order = tabDefs.map(([id]) => id);
-			const idx = order.indexOf(tab);
-			if (idx < 0) return;
-			const delta = event.key === "ArrowRight" ? 1 : -1;
-			const nextTab = order[(idx + delta + order.length) % order.length];
-			uiState.dagInspectorTab = nextTab;
-			renderDagInspector(dagRunId, node, false);
-			document.getElementById(`dag-inspector-tab-${nextTab}`)?.focus();
-		});
-		tabs.appendChild(button);
-	}
-	header.appendChild(tabs);
-	return header;
-}
-
-function syncDagInspectorHeader(panel, dagRunId, node) {
-	const header = panel.querySelector(".dag-inspector-header");
-	if (!header) return;
-	header.dataset.dagRunId = String(dagRunId ?? "");
-	header.dataset.dagNodeId = String(node.nodeId ?? "");
-	const nodeLabel = header.querySelector(".dag-inspector-node");
-	if (nodeLabel) nodeLabel.textContent = node.nodeId;
-	const status = header.querySelector(".dag-inspector-status");
-	if (status) {
-		const next = badge(node.status ?? "unknown");
-		next.classList.add("dag-inspector-status");
-		status.replaceWith(next);
-	}
-	for (const button of header.querySelectorAll(".dag-inspector-tab")) {
-		const selected = button.dataset.tab === uiState.dagInspectorTab;
-		button.setAttribute("aria-selected", String(selected));
-		button.tabIndex = selected ? 0 : -1;
-	}
-}
-
-function dagInspectorSignature(dagRunId, node) {
-	return JSON.stringify([
-		dagRunId,
-		node.nodeId,
-		uiState.dagInspectorTab,
-		node.outputPreview ?? "",
-		node.errorPreview ?? "",
-		uiState.dagInspectorTab === "timeline" ? uiState.sessionEventOffset : null,
-	]);
-}
-
-export function renderDagInspector(dagRunId, node, initial = true) {
-	const panel = document.getElementById("dag-inspector");
-	if (!panel) return;
-	captureDagTimelineViewportState(panel);
-	if (!uiState.dagInspectorOpen || !node) {
-		panel.classList.remove("is-open");
-		panel.setAttribute("aria-hidden", "true");
-		return;
-	}
-
-	// Defer tearing down the inspector shell while the user is actively
-	// dragging the resize handle (or the graph) so the pointer-capture target
-	// is not destroyed mid-gesture; the next poll refreshes the content.
-	if (isInteractiveGestureActive(document.body.classList)) {
-		return;
-	}
-
-	const existingContent = panel.querySelector(".dag-inspector-content") ?? null;
-	const reuseShell = !initial && Boolean(existingContent);
-	const nextContentSignature = dagInspectorSignature(dagRunId, node);
-
-	if (reuseShell && existingContent) {
-		panel.classList.add("is-open");
-		panel.setAttribute("aria-hidden", "false");
-		syncDagInspectorHeader(panel, dagRunId, node);
-		if (panel.dataset.contentSignature === nextContentSignature) return;
-		const previousNode = existingContent.dataset.dagNodeId ?? "";
-		const nodeChanged = previousNode !== String(node.nodeId ?? "");
-		const followLatest =
-			nodeChanged ||
-			computeFollowLatest(
-				existingContent.scrollTop,
-				existingContent.scrollHeight,
-				existingContent.clientHeight,
-			);
-		const regionKey = `dag:${dagRunId}:${node.nodeId}:output`;
-		uiState.dagNodeOutputViewportState = updateDagOutputViewportState(
-			uiState.dagNodeOutputViewportState,
-			regionKey,
-			existingContent.scrollLeft,
-			existingContent.scrollTop,
-			followLatest,
-		);
-		const nestedViewportState = [
-			...existingContent.querySelectorAll("pre"),
-		].map((pre) => ({
-			scrollLeft: pre.scrollLeft,
-			scrollTop: pre.scrollTop,
-		}));
-		clearNode(existingContent);
-		fillDagInspectorContent(existingContent, dagRunId, node);
-		if (followLatest) {
-			existingContent.scrollTop = existingContent.scrollHeight;
-		} else {
-			existingContent.scrollTop = uiState.dagNodeOutputViewportState.scrollTop;
-		}
-		for (const [index, pre] of [
-			...existingContent.querySelectorAll("pre"),
-		].entries()) {
-			const previous = nestedViewportState[index];
-			if (!previous) continue;
-			pre.scrollLeft = previous.scrollLeft;
-			pre.scrollTop = previous.scrollTop;
-		}
-		panel.dataset.contentSignature = nextContentSignature;
-		return;
-	}
-
-	clearNode(panel);
-	panel.classList.add("is-open");
-	panel.setAttribute("aria-hidden", "false");
-	panel.appendChild(createDagInspectorResizeHandle(panel));
-	panel.appendChild(buildDagInspectorHeader(dagRunId, node));
-
-	const content = el("div", "dag-inspector-content");
-	fillDagInspectorContent(content, dagRunId, node);
-	panel.appendChild(content);
-	panel.dataset.contentSignature = nextContentSignature;
-}
-
-/**
- * Bounded event history UI. Uses opaque `cursor`/`nextCursor` (not SSE/run `after` offsets).
- */
+/** DAG node inspector panel (Observe UI R5). */
+import {
+	DAG_INSPECTOR_DEFAULT_WIDTH,
+	DAG_INSPECTOR_MIN_WIDTH,
+	DAG_INSPECTOR_MAX_WIDTH,
+	DAG_INSPECTOR_RIGHT_OFFSET,
+	DAG_INSPECTOR_VIEWPORT_MARGIN,
+	DAG_INSPECTOR_KEYBOARD_STEP,
+	UI_TEXT,
+} from "../constants.js";
+import { clearNode, el } from "../dom.js";
+import { fetchJson } from "../api.js";
+import { badge, parseMarkdownBlocks, markdownLinkHref } from "../format.js";
+import {
+	uiState,
+	updateDagTimelineViewportState,
+	updateDagOutputViewportState,
+	computeFollowLatest,
+	isInteractiveGestureActive,
+} from "../state.js";
+import {
+	formatSessionEventTime,
+	renderSessionTimeline,
+} from "./session-timeline.js";
+
+export function selectDagNode(dagRunId, nodeId) {
+	const nodeChanged = uiState.selectedDagNodeId !== nodeId;
+	uiState.selectedDagNodeId = nodeId;
+	uiState.dagInspectorOpen = true;
+	if (nodeChanged) {
+		uiState.sessionEventOffset = 0;
+		uiState.sessionEvents = [];
+	}
+	void import("./dag.js").then((m) => m.renderDagDetail(dagRunId, false));
+}
+
+export function closeDagInspector() {
+	uiState.dagInspectorOpen = false;
+	const panel = document.getElementById("dag-inspector");
+	if (panel) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+	}
+}
+
+export function closeDagInspectorOnOutsideClick(event) {
+	if (!uiState.dagInspectorOpen || !(event.target instanceof Element)) return;
+	if (
+		event.target.closest(
+			"#dag-inspector, .dag-node-table tbody tr, button, a, input, select, textarea, [role='button'], [role='tab']",
+		)
+	) {
+		return;
+	}
+	closeDagInspector();
+}
+
+export function dagInspectorMaximumWidth() {
+	return Math.max(
+		DAG_INSPECTOR_MIN_WIDTH,
+		Math.min(
+			DAG_INSPECTOR_MAX_WIDTH,
+			window.innerWidth - DAG_INSPECTOR_VIEWPORT_MARGIN,
+		),
+	);
+}
+
+export function setDagInspectorWidth(panel, requestedWidth) {
+	const maximum = dagInspectorMaximumWidth();
+	uiState.dagInspectorWidth = Math.min(
+		maximum,
+		Math.max(DAG_INSPECTOR_MIN_WIDTH, Math.round(requestedWidth)),
+	);
+	panel.style.setProperty(
+		"--dag-inspector-width",
+		`${uiState.dagInspectorWidth}px`,
+	);
+	return {
+		minimum: DAG_INSPECTOR_MIN_WIDTH,
+		maximum,
+		value: uiState.dagInspectorWidth,
+	};
+}
+
+export function createDagInspectorResizeHandle(panel) {
+	const handle = el("div", "dag-inspector-resize-handle");
+	handle.tabIndex = 0;
+	handle.setAttribute("role", "separator");
+	handle.setAttribute("aria-orientation", "vertical");
+	handle.setAttribute("aria-label", "调整节点检查器宽度");
+	handle.title = "拖动调整节点检查器宽度";
+
+	const updateRange = (requestedWidth) => {
+		const range = setDagInspectorWidth(
+			panel,
+			requestedWidth ??
+				uiState.dagInspectorWidth ??
+				DAG_INSPECTOR_DEFAULT_WIDTH,
+		);
+		handle.setAttribute("aria-valuemin", String(range.minimum));
+		handle.setAttribute("aria-valuemax", String(range.maximum));
+		handle.setAttribute("aria-valuenow", String(range.value));
+	};
+
+	updateRange();
+	handle.addEventListener("pointerdown", (event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		handle.setPointerCapture(event.pointerId);
+		document.body.classList.add("is-resizing-dag-inspector");
+	});
+	handle.addEventListener("pointermove", (event) => {
+		if (!handle.hasPointerCapture(event.pointerId)) return;
+		updateRange(window.innerWidth - event.clientX - DAG_INSPECTOR_RIGHT_OFFSET);
+	});
+	const stopResizing = (event) => {
+		if (handle.hasPointerCapture(event.pointerId)) {
+			handle.releasePointerCapture(event.pointerId);
+		}
+		document.body.classList.remove("is-resizing-dag-inspector");
+	};
+	handle.addEventListener("pointerup", stopResizing);
+	handle.addEventListener("pointercancel", stopResizing);
+	handle.addEventListener("keydown", (event) => {
+		const currentWidth =
+			uiState.dagInspectorWidth ?? DAG_INSPECTOR_DEFAULT_WIDTH;
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			updateRange(currentWidth + DAG_INSPECTOR_KEYBOARD_STEP);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			updateRange(currentWidth - DAG_INSPECTOR_KEYBOARD_STEP);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			updateRange(DAG_INSPECTOR_MIN_WIDTH);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			updateRange(dagInspectorMaximumWidth());
+		}
+	});
+	return handle;
+}
+
+export function captureDagTimelineViewportState(panel) {
+	const scrollEl = panel.querySelector(".process-timeline-scroll");
+	if (scrollEl?.dataset.dagRunId && scrollEl.dataset.nodeId) {
+		const followLatest = computeFollowLatest(
+			scrollEl.scrollTop,
+			scrollEl.scrollHeight,
+			scrollEl.clientHeight,
+		);
+		uiState.dagTimelineViewportState = updateDagTimelineViewportState(
+			uiState.dagTimelineViewportState,
+			scrollEl.dataset.dagRunId,
+			scrollEl.dataset.nodeId,
+			scrollEl.scrollLeft,
+			scrollEl.scrollTop,
+			followLatest,
+		);
+	}
+}
+
+export function appendInlineMarkdown(target, text) {
+	const tokenPattern = /(`[^`]*`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+	let cursor = 0;
+	for (const match of text.matchAll(tokenPattern)) {
+		const index = match.index ?? 0;
+		if (index > cursor)
+			target.appendChild(document.createTextNode(text.slice(cursor, index)));
+		const token = match[0];
+		if (token.startsWith("`")) {
+			target.appendChild(el("code", null, token.slice(1, -1)));
+		} else if (token.startsWith("**")) {
+			const strong = document.createElement("strong");
+			strong.textContent = token.slice(2, -2);
+			target.appendChild(strong);
+		} else if (token.startsWith("*")) {
+			const emphasis = document.createElement("em");
+			emphasis.textContent = token.slice(1, -1);
+			target.appendChild(emphasis);
+		} else {
+			const link = token.match(/^\[([^\]]+)\]\((.+)\)$/);
+			const href = markdownLinkHref(link?.[2]);
+			if (link && href) {
+				const anchor = document.createElement("a");
+				anchor.href = href;
+				anchor.target = "_blank";
+				anchor.rel = "noopener noreferrer";
+				anchor.textContent = link[1];
+				target.appendChild(anchor);
+			} else {
+				target.appendChild(document.createTextNode(token));
+			}
+		}
+		cursor = index + token.length;
+	}
+	if (cursor < text.length)
+		target.appendChild(document.createTextNode(text.slice(cursor)));
+}
+
+export function renderMarkdown(content) {
+	const article = el("article", "markdown-output");
+	for (const block of parseMarkdownBlocks(content)) {
+		switch (block.type) {
+			case "heading": {
+				const heading = document.createElement(`h${block.level}`);
+				appendInlineMarkdown(heading, block.text);
+				article.appendChild(heading);
+				break;
+			}
+			case "paragraph": {
+				const paragraph = document.createElement("p");
+				appendInlineMarkdown(paragraph, block.text);
+				article.appendChild(paragraph);
+				break;
+			}
+			case "quote": {
+				const quote = document.createElement("blockquote");
+				appendInlineMarkdown(quote, block.text);
+				article.appendChild(quote);
+				break;
+			}
+			case "list": {
+				const list = document.createElement(block.ordered ? "ol" : "ul");
+				for (const item of block.items) {
+					const listItem = document.createElement("li");
+					appendInlineMarkdown(listItem, item);
+					list.appendChild(listItem);
+				}
+				article.appendChild(list);
+				break;
+			}
+			case "code": {
+				const pre = document.createElement("pre");
+				const code = document.createElement("code");
+				if (block.language) code.dataset.language = block.language;
+				code.textContent = block.text;
+				pre.appendChild(code);
+				article.appendChild(pre);
+				break;
+			}
+			case "table": {
+				const table = document.createElement("table");
+				const head = document.createElement("thead");
+				const headRow = document.createElement("tr");
+				for (const value of block.headers) {
+					const cell = document.createElement("th");
+					appendInlineMarkdown(cell, value);
+					headRow.appendChild(cell);
+				}
+				head.appendChild(headRow);
+				table.appendChild(head);
+				const body = document.createElement("tbody");
+				for (const row of block.rows) {
+					const tableRow = document.createElement("tr");
+					for (const value of row) {
+						const cell = document.createElement("td");
+						appendInlineMarkdown(cell, value);
+						tableRow.appendChild(cell);
+					}
+					body.appendChild(tableRow);
+				}
+				table.appendChild(body);
+				article.appendChild(table);
+				break;
+			}
+			case "rule":
+				article.appendChild(document.createElement("hr"));
+				break;
+		}
+	}
+	return article;
+}
+
+async function renderSpecEvidence(content, dagRunId, nodeId) {
+	const evidence = await fetchJson(
+		`/api/dag-runs/${encodeURIComponent(dagRunId)}/nodes/${encodeURIComponent(nodeId)}/spec-evidence`,
+	);
+	if (!content.isConnected || content.dataset.dagNodeId !== String(nodeId)) return;
+	if (!evidence) {
+		content.appendChild(el("p", "empty", "无法加载规范证据。"));
+		return;
+	}
+
+	const statusLabels = {
+		"spec-read": "已读取规范",
+		"source-bound": "已绑定任务源",
+		"spec-injected": "仅注入 skill",
+		"search-only": "仅执行检索",
+		"kb-queried": "已观察知识库查询",
+		"no-evidence": "未观察到读取",
+	};
+	const statusSection = el("div", "spec-evidence-section");
+	statusSection.appendChild(el("h4", null, "证据状态"));
+	statusSection.appendChild(
+		el(
+			"span",
+			`badge badge-${evidence.status === "spec-read" ? "succeeded" : evidence.status === "no-evidence" ? "failed" : "pending"}`,
+			statusLabels[evidence.status] ?? evidence.status,
+		),
+	);
+	if (evidence.summary) {
+		statusSection.appendChild(
+			el("p", "spec-evidence-summary", evidence.summary),
+		);
+	}
+	content.appendChild(statusSection);
+
+	const appendListSection = (title, entries, renderEntry) => {
+		if (!entries?.length) return;
+		const section = el("div", "spec-evidence-section");
+		section.appendChild(el("h4", null, title));
+		const list = el("ul", "spec-evidence-list");
+		for (const entry of entries) list.appendChild(renderEntry(entry));
+		section.appendChild(list);
+		content.appendChild(section);
+	};
+
+	appendListSection("注入的 Skill", evidence.skillInjection?.skills, (skill) => {
+		const item = el("li", null);
+		const icon = el("i", "ri-bookmark-line");
+		icon.setAttribute("aria-hidden", "true");
+		item.append(icon, document.createTextNode(` ${skill}`));
+		return item;
+	});
+	appendListSection("已绑定任务源", evidence.sourceBinding?.sources, (source) => {
+		const item = el("li", null);
+		const icon = el("i", "ri-links-line");
+		icon.setAttribute("aria-hidden", "true");
+		item.append(icon, document.createTextNode(` ${source.kind}: `), el("code", null, source.path), document.createTextNode(` · sha256 ${source.sha256.slice(0, 12)}…`));
+		return item;
+	});
+	appendListSection("显式需求编号", evidence.sourceBinding?.requirementIds, (id) => el("li", null, id));
+	appendListSection(
+		`已读取规范文件（${evidence.specReads?.length ?? 0}）`,
+		evidence.specReads,
+		(read) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-file-text-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(icon, el("code", null, read.path));
+			if (read.timestamp) {
+				item.appendChild(
+					el(
+						"span",
+						"spec-evidence-time",
+						formatSessionEventTime({ timestamp: read.timestamp }),
+					),
+				);
+			}
+			return item;
+		},
+	);
+	appendListSection(
+		`检索操作（${evidence.specSearches?.length ?? 0}）`,
+		evidence.specSearches,
+		(search) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-search-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(icon, document.createTextNode(` ${search.tool}: ${search.query}`));
+			return item;
+		},
+	);
+	appendListSection(
+		`知识库查询（${evidence.knowledgeBaseQueries?.length ?? 0}）`,
+		evidence.knowledgeBaseQueries,
+		(query) => {
+			const item = el("li", null);
+			const icon = el("i", "ri-database-2-line");
+			icon.setAttribute("aria-hidden", "true");
+			item.append(icon, document.createTextNode(` ${query.connector}`));
+			return item;
+		},
+	);
+
+	if (evidence.status === "source-bound" || evidence.status === "spec-injected" || evidence.status === "no-evidence") {
+		const warning = el("div", "spec-evidence-warning");
+		const icon = el("i", "ri-alert-line");
+		icon.setAttribute("aria-hidden", "true");
+		warning.append(
+			icon,
+			document.createTextNode(
+				evidence.status === "source-bound"
+					? "DAG 已绑定权威任务源及内容哈希，但尚未观察到成功的 read 工具调用；绑定证明上下文来源，read 事件才证明节点读取了完整文件。"
+					: evidence.status === "no-evidence"
+					? "未观察到规范读取。只有 session event 中成功配对的 read 工具调用才算已读取，模型总结或文件名命中不能作为证明。"
+					: "规范 skill 已注入，但未观察到规范读取或知识库查询；grep/find/ls 只能证明检索，不能替代 read。",
+			),
+		);
+		content.appendChild(warning);
+	}
+}
+
+function fillDagInspectorContent(content, dagRunId, node) {
+	const activeTab = ["timeline", "spec-evidence"].includes(
+		uiState.dagInspectorTab,
+	)
+		? uiState.dagInspectorTab
+		: "output";
+	content.id = `dag-inspector-panel-${activeTab}`;
+	content.setAttribute("role", "tabpanel");
+	content.setAttribute("aria-labelledby", `dag-inspector-tab-${activeTab}`);
+	content.dataset.dagNodeId = String(node.nodeId ?? "");
+	if (activeTab === "spec-evidence") {
+		void renderSpecEvidence(content, dagRunId, node.nodeId);
+	} else if (activeTab === "timeline") {
+		renderSessionTimeline(content, node.nodeId);
+	} else if (!node.outputPreview && !node.errorPreview) {
+		content.appendChild(el("p", "empty", UI_TEXT.noOutput));
+	} else {
+		if (node.outputPreview)
+			content.appendChild(renderMarkdown(node.outputPreview));
+		if (node.errorPreview) {
+			const error = el("section", "markdown-error");
+			error.appendChild(el("p", "markdown-error-title", "错误输出"));
+			error.appendChild(renderMarkdown(node.errorPreview));
+			content.appendChild(error);
+		}
+	}
+}
+
+function buildDagInspectorHeader(dagRunId, node) {
+	const header = el("div", "dag-inspector-header");
+	header.dataset.dagRunId = String(dagRunId ?? "");
+	header.dataset.dagNodeId = String(node.nodeId ?? "");
+	const title = el("div", "dag-inspector-title");
+	title.appendChild(el("h3", null, "节点检查器"));
+	title.appendChild(el("div", "dag-inspector-node", node.nodeId));
+	header.appendChild(title);
+	const controls = el("div", "dag-inspector-controls");
+	const status = badge(node.status ?? "unknown");
+	status.classList.add("dag-inspector-status");
+	controls.appendChild(status);
+	const close = document.createElement("button");
+	close.type = "button";
+	close.className = "dag-inspector-close";
+	close.setAttribute("aria-label", "关闭节点检查器");
+	const closeIcon = el("i", "ri-close-line");
+	closeIcon.setAttribute("aria-hidden", "true");
+	close.appendChild(closeIcon);
+	close.addEventListener("click", closeDagInspector);
+	controls.appendChild(close);
+	header.appendChild(controls);
+
+	const tabDefs = [
+		["output", "节点输出", "ri-file-text-line"],
+		["timeline", "执行过程", "ri-route-line"],
+		["spec-evidence", "规范证据", "ri-book-open-line"],
+	];
+	const tabs = el("div", "dag-inspector-tabs");
+	tabs.setAttribute("role", "tablist");
+	tabs.setAttribute("aria-label", "节点检查器面板");
+	for (const [tab, label, icon] of tabDefs) {
+		const selected = uiState.dagInspectorTab === tab;
+		const button = document.createElement("button");
+		button.type = "button";
+		button.id = `dag-inspector-tab-${tab}`;
+		button.className = "dag-inspector-tab";
+		button.setAttribute("role", "tab");
+		button.setAttribute("aria-controls", `dag-inspector-panel-${tab}`);
+		button.setAttribute("aria-selected", String(selected));
+		button.tabIndex = selected ? 0 : -1;
+		button.dataset.tab = tab;
+		const tabIcon = el("i", icon);
+		tabIcon.setAttribute("aria-hidden", "true");
+		button.appendChild(tabIcon);
+		button.appendChild(document.createTextNode(` ${label}`));
+		button.addEventListener("click", () => {
+			uiState.dagInspectorTab = tab;
+			renderDagInspector(dagRunId, node, false);
+			const next = document.getElementById(`dag-inspector-tab-${tab}`);
+			next?.focus();
+		});
+		button.addEventListener("keydown", (event) => {
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			event.stopPropagation();
+			const order = tabDefs.map(([id]) => id);
+			const idx = order.indexOf(tab);
+			if (idx < 0) return;
+			const delta = event.key === "ArrowRight" ? 1 : -1;
+			const nextTab = order[(idx + delta + order.length) % order.length];
+			uiState.dagInspectorTab = nextTab;
+			renderDagInspector(dagRunId, node, false);
+			document.getElementById(`dag-inspector-tab-${nextTab}`)?.focus();
+		});
+		tabs.appendChild(button);
+	}
+	header.appendChild(tabs);
+	return header;
+}
+
+function syncDagInspectorHeader(panel, dagRunId, node) {
+	const header = panel.querySelector(".dag-inspector-header");
+	if (!header) return;
+	header.dataset.dagRunId = String(dagRunId ?? "");
+	header.dataset.dagNodeId = String(node.nodeId ?? "");
+	const nodeLabel = header.querySelector(".dag-inspector-node");
+	if (nodeLabel) nodeLabel.textContent = node.nodeId;
+	const status = header.querySelector(".dag-inspector-status");
+	if (status) {
+		const next = badge(node.status ?? "unknown");
+		next.classList.add("dag-inspector-status");
+		status.replaceWith(next);
+	}
+	for (const button of header.querySelectorAll(".dag-inspector-tab")) {
+		const selected = button.dataset.tab === uiState.dagInspectorTab;
+		button.setAttribute("aria-selected", String(selected));
+		button.tabIndex = selected ? 0 : -1;
+	}
+}
+
+function dagInspectorSignature(dagRunId, node) {
+	return JSON.stringify([
+		dagRunId,
+		node.nodeId,
+		uiState.dagInspectorTab,
+		node.outputPreview ?? "",
+		node.errorPreview ?? "",
+		uiState.dagInspectorTab === "timeline" ? uiState.sessionEventOffset : null,
+	]);
+}
+
+export function renderDagInspector(dagRunId, node, initial = true) {
+	const panel = document.getElementById("dag-inspector");
+	if (!panel) return;
+	captureDagTimelineViewportState(panel);
+	if (!uiState.dagInspectorOpen || !node) {
+		panel.classList.remove("is-open");
+		panel.setAttribute("aria-hidden", "true");
+		return;
+	}
+
+	// Defer tearing down the inspector shell while the user is actively
+	// dragging the resize handle (or the graph) so the pointer-capture target
+	// is not destroyed mid-gesture; the next poll refreshes the content.
+	if (isInteractiveGestureActive(document.body.classList)) {
+		return;
+	}
+
+	const existingContent = panel.querySelector(".dag-inspector-content") ?? null;
+	const reuseShell = !initial && Boolean(existingContent);
+	const nextContentSignature = dagInspectorSignature(dagRunId, node);
+
+	if (reuseShell && existingContent) {
+		panel.classList.add("is-open");
+		panel.setAttribute("aria-hidden", "false");
+		syncDagInspectorHeader(panel, dagRunId, node);
+		if (panel.dataset.contentSignature === nextContentSignature) return;
+		const previousNode = existingContent.dataset.dagNodeId ?? "";
+		const nodeChanged = previousNode !== String(node.nodeId ?? "");
+		const followLatest =
+			nodeChanged ||
+			computeFollowLatest(
+				existingContent.scrollTop,
+				existingContent.scrollHeight,
+				existingContent.clientHeight,
+			);
+		const regionKey = `dag:${dagRunId}:${node.nodeId}:output`;
+		uiState.dagNodeOutputViewportState = updateDagOutputViewportState(
+			uiState.dagNodeOutputViewportState,
+			regionKey,
+			existingContent.scrollLeft,
+			existingContent.scrollTop,
+			followLatest,
+		);
+		const nestedViewportState = [
+			...existingContent.querySelectorAll("pre"),
+		].map((pre) => ({
+			scrollLeft: pre.scrollLeft,
+			scrollTop: pre.scrollTop,
+		}));
+		clearNode(existingContent);
+		fillDagInspectorContent(existingContent, dagRunId, node);
+		if (followLatest) {
+			existingContent.scrollTop = existingContent.scrollHeight;
+		} else {
+			existingContent.scrollTop = uiState.dagNodeOutputViewportState.scrollTop;
+		}
+		for (const [index, pre] of [
+			...existingContent.querySelectorAll("pre"),
+		].entries()) {
+			const previous = nestedViewportState[index];
+			if (!previous) continue;
+			pre.scrollLeft = previous.scrollLeft;
+			pre.scrollTop = previous.scrollTop;
+		}
+		panel.dataset.contentSignature = nextContentSignature;
+		return;
+	}
+
+	clearNode(panel);
+	panel.classList.add("is-open");
+	panel.setAttribute("aria-hidden", "false");
+	panel.appendChild(createDagInspectorResizeHandle(panel));
+	panel.appendChild(buildDagInspectorHeader(dagRunId, node));
+
+	const content = el("div", "dag-inspector-content");
+	fillDagInspectorContent(content, dagRunId, node);
+	panel.appendChild(content);
+	panel.dataset.contentSignature = nextContentSignature;
+}
+
+/**
+ * Bounded event history UI. Uses opaque `cursor`/`nextCursor` (not SSE/run `after` offsets).
+ */