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

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

@@ -1,6 +1,7 @@
 /** DAG node inspector panel (Observe UI R5). */
 import {
 	DAG_INSPECTOR_DEFAULT_WIDTH,
+	DAG_INSPECTOR_DEFAULT_WIDTH_RATIO,
 	DAG_INSPECTOR_MIN_WIDTH,
 	DAG_INSPECTOR_MAX_WIDTH,
 	DAG_INSPECTOR_RIGHT_OFFSET,
@@ -10,9 +11,11 @@ import {
 } from "../constants.js";
 import { clearNode, el } from "../dom.js";
 import { fetchJson } from "../api.js";
-import { badge, parseMarkdownBlocks, markdownLinkHref } from "../format.js";
+import { badge } from "../format.js";
+import { renderMarkdown } from "../markdown-render.js";
 import {
 	uiState,
+	makeSessionEventIdentity,
 	updateDagTimelineViewportState,
 	updateDagOutputViewportState,
 	computeFollowLatest,
@@ -23,6 +26,17 @@ import {
 	renderSessionTimeline,
 } from "./session-timeline.js";
 
+// Current inspector selection. Tab handlers reference this mutable slot so a
+// reused inspector shell never keeps stale node closures: every render writes
+// the latest {dagRunId, node} here and tab clicks re-render from the same
+// reference, always resolving the currently selected node identity.
+const inspectorSelection = { dagRunId: null, node: null };
+
+function renderDagInspectorForCurrent() {
+	if (!inspectorSelection.dagRunId || !inspectorSelection.node) return;
+	renderDagInspector(inspectorSelection.dagRunId, inspectorSelection.node, false);
+}
+
 export function selectDagNode(dagRunId, nodeId) {
 	const nodeChanged = uiState.selectedDagNodeId !== nodeId;
 	uiState.selectedDagNodeId = nodeId;
@@ -30,6 +44,9 @@ export function selectDagNode(dagRunId, nodeId) {
 	if (nodeChanged) {
 		uiState.sessionEventOffset = 0;
 		uiState.sessionEvents = [];
+		// Bump the session-event identity token so any in-flight response for the
+		// previous node is rejected before it can mutate the current node cache.
+		uiState.sessionEventIdentity = makeSessionEventIdentity(dagRunId, nodeId);
 	}
 	void import("./dag.js").then((m) => m.renderDagDetail(dagRunId, false));
 }
@@ -65,6 +82,17 @@ export function dagInspectorMaximumWidth() {
 	);
 }
 
+/** Default open width: half the viewport, clamped to min/max. */
+export function dagInspectorDefaultWidth() {
+	const half = Math.round(
+		window.innerWidth * DAG_INSPECTOR_DEFAULT_WIDTH_RATIO,
+	);
+	return Math.min(
+		dagInspectorMaximumWidth(),
+		Math.max(DAG_INSPECTOR_MIN_WIDTH, half || DAG_INSPECTOR_DEFAULT_WIDTH),
+	);
+}
+
 export function setDagInspectorWidth(panel, requestedWidth) {
 	const maximum = dagInspectorMaximumWidth();
 	uiState.dagInspectorWidth = Math.min(
@@ -95,7 +123,7 @@ export function createDagInspectorResizeHandle(panel) {
 			panel,
 			requestedWidth ??
 				uiState.dagInspectorWidth ??
-				DAG_INSPECTOR_DEFAULT_WIDTH,
+				dagInspectorDefaultWidth(),
 		);
 		handle.setAttribute("aria-valuemin", String(range.minimum));
 		handle.setAttribute("aria-valuemax", String(range.maximum));
@@ -123,7 +151,7 @@ export function createDagInspectorResizeHandle(panel) {
 	handle.addEventListener("pointercancel", stopResizing);
 	handle.addEventListener("keydown", (event) => {
 		const currentWidth =
-			uiState.dagInspectorWidth ?? DAG_INSPECTOR_DEFAULT_WIDTH;
+			uiState.dagInspectorWidth ?? dagInspectorDefaultWidth();
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			updateRange(currentWidth + DAG_INSPECTOR_KEYBOARD_STEP);
@@ -160,118 +188,6 @@ export function captureDagTimelineViewportState(panel) {
 	}
 }
 
-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`,
@@ -392,33 +308,35 @@ async function renderSpecEvidence(content, dagRunId, nodeId) {
 	}
 }
 
-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 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 ?? "");
+		// Drop timeline-only classes when switching tabs so output layout stays clean.
+		content.className = "dag-inspector-content";
+		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");
@@ -468,7 +386,7 @@ function buildDagInspectorHeader(dagRunId, node) {
 		button.appendChild(document.createTextNode(` ${label}`));
 		button.addEventListener("click", () => {
 			uiState.dagInspectorTab = tab;
-			renderDagInspector(dagRunId, node, false);
+			renderDagInspectorForCurrent();
 			const next = document.getElementById(`dag-inspector-tab-${tab}`);
 			next?.focus();
 		});
@@ -482,7 +400,7 @@ function buildDagInspectorHeader(dagRunId, node) {
 			const delta = event.key === "ArrowRight" ? 1 : -1;
 			const nextTab = order[(idx + delta + order.length) % order.length];
 			uiState.dagInspectorTab = nextTab;
-			renderDagInspector(dagRunId, node, false);
+			renderDagInspectorForCurrent();
 			document.getElementById(`dag-inspector-tab-${nextTab}`)?.focus();
 		});
 		tabs.appendChild(button);
@@ -523,6 +441,11 @@ function dagInspectorSignature(dagRunId, node) {
 }
 
 export function renderDagInspector(dagRunId, node, initial = true) {
+	// Record the current selection before any early-return so tab handlers
+	// (which reference the mutable inspectorSelection slot) always re-render
+	// the currently selected node, never a stale build-time closure.
+	inspectorSelection.dagRunId = dagRunId;
+	inspectorSelection.node = node;
 	const panel = document.getElementById("dag-inspector");
 	if (!panel) return;
 	captureDagTimelineViewportState(panel);

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

@@ -60,6 +60,7 @@ import {
 	shouldPreserveDiagnosticsOpen,
 	renderViewState,
 	mountViewState,
+	makeSessionEventIdentity,
 } from "../state.js";
 import { uiState, dagGraphViewportStates } from "../state.js";
 import { sortPoolTasks } from "../format-pool.js";
@@ -104,6 +105,7 @@ export async function renderDagDetail(dagRunId, initial = true) {
 		uiState.selectedDagNodeId = null;
 		uiState.sessionEventOffset = 0;
 		uiState.sessionEvents = [];
+		uiState.sessionEventIdentity = null;
 		uiState.dagInspectorOpen = false;
 		uiState.dagInspectorTab = "output";
 		uiState.dagGraphViewportState = null;
@@ -168,6 +170,7 @@ export async function renderDagDetail(dagRunId, initial = true) {
 		if (initial) {
 			uiState.sessionEventOffset = 0;
 			uiState.sessionEvents = [];
+			uiState.sessionEventIdentity = null;
 		}
 	}
 
@@ -336,6 +339,12 @@ export async function renderDagDetail(dagRunId, initial = true) {
 	nodesEl.scrollLeft = nodesScrollLeft;
 
 	if (uiState.dagInspectorOpen && uiState.selectedDagNodeId) {
+		if (!uiState.sessionEventIdentity) {
+			uiState.sessionEventIdentity = makeSessionEventIdentity(
+				dagRunId,
+				uiState.selectedDagNodeId,
+			);
+		}
 		await mergeSessionEvents(dagRunId, uiState.selectedDagNodeId);
 	}
 	renderDagInspector(