@tea-agent/loop-agent 0.11.0 → 0.12.0

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

@@ -0,0 +1,477 @@
+/** 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).
+ */