@tea-agent/loop-agent 0.42.0-next.9 → 0.42.1

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

@@ -1,3 +1,4 @@
+import { bindManualViewRefresh, mountTaskRelationPicker } from "../shell-chrome.js";
 /** Observe UI view module (R5). */
 import {
 	UI_TEXT,
@@ -19,6 +20,7 @@ import {
 import { clearNode, el, metaGrid, buildTable } from "../dom.js";
 import {
 	badge,
+	batchStatusBadge,
 	badgeClass,
 	statusLabel,
 	formatTs,
@@ -71,6 +73,7 @@ import { mountBoundedEventTimeline } from "./timeline.js";
 
 export async function renderBatch(batchRunId) {
 	showView("batch");
+	bindManualViewRefresh("batch", () => renderBatch(batchRunId));
 	setBreadcrumb([
 		{ label: UI_TEXT.dashboard, href: "#/" },
 		{ label: batchRunId },
@@ -88,7 +91,7 @@ export async function renderBatch(batchRunId) {
 	]);
 	if (snapshot) {
 		uiState.lastSnapshot = snapshot;
-		updateHeaderRefresh(snapshot.generatedAt);
+		updateHeaderRefresh(snapshot.generatedAt, { mode: "manual" });
 	}
 	if (!batch) {
 		clearNode(metaEl);
@@ -100,17 +103,7 @@ export async function renderBatch(batchRunId) {
 		return;
 	}
 
-	mountRelationBar(
-		"batch-relations",
-		{
-			featureId: batch.featureId,
-			batchRunId: batch.batchRunId,
-			taskId: batch.tasks?.[0]?.taskId,
-			workerRunId: batch.tasks?.[0]?.workerRunId,
-			dagRunId: batch.tasks?.[0]?.dagRunId,
-		},
-		snapshot,
-	);
+	mountTaskRelationPicker("batch-relations", { featureId: batch.featureId, batchRunId: batch.batchRunId }, (batch.tasks ?? []).map((task) => ({ ...task, featureId: task.featureId ?? batch.featureId })), snapshot);
 
 	const totalDerived = derivedDurationMs(batch.startedAt, batch.finishedAt);
 	clearNode(metaEl);
@@ -123,7 +116,7 @@ export async function renderBatch(batchRunId) {
 					? objectRouteLink("feature", batch.featureId, snapshot)
 					: el("span", "muted", "—"),
 			],
-			["状态", badge(batch.status)],
+			["状态", batchStatusBadge(batch)],
 			["开始时间", formatTs(batch.startedAt)],
 			["结束时间", formatTs(batch.finishedAt)],
 			["总耗时", formatDuration(totalDerived)],

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

@@ -6,7 +6,7 @@ import {
 	edgeCollidesNonEndpointNodes,
 	routeControlEdge,
 } from "../dag-edge-routing.js";
-import { el } from "../dom.js";
+import { el, iconButton } from "../dom.js";
 import {
 	statusLabel,
 	statusSymbol,
@@ -23,7 +23,7 @@ import {
 	currentDagGraphViewMode,
 } from "../state.js";
 import { describeDagNodePurpose } from "../dag-node-purpose.js";
-import { selectDagNode } from "./dag-inspector.js";
+import { selectDagNode, selectDagExecution } from "./dag-inspector.js";
 import { renderTrajectoryStoryboard } from "./dag-trajectory.js";
 
 export function svgEl(tag, attrs = {}) {
@@ -138,6 +138,10 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 		controlLaneCount,
 	});
 	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
+	const active = document.activeElement;
+	const focusedNodeId = existingWrap?.contains?.(active) ? active?.getAttribute?.("data-node-id") : null;
+	const focusedAction = existingWrap?.contains?.(active) ? active?.dataset?.graphAction : null;
+	const previousSearch = existingWrap?.querySelector(".dag-graph-search")?.value ?? "";
 	// Preserve .dag-graph-viewport DOM identity across poll refreshes so the
 	// user's active scroll/pointer target is not destroyed mid-gesture.
 	let viewport =
@@ -169,7 +173,7 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 	}
 	toolbarLeft.appendChild(el("span", "dag-graph-summary", summaryText));
 	toolbar.appendChild(toolbarLeft);
-	const reset = el("button", "dag-graph-reset", "重置视图");
+	const reset = iconButton("重置视图", "ri-restart-line", "dag-graph-reset");
 	toolbar.appendChild(reset);
 	const appendBeforeViewport = (child) => {
 		if (viewport?.parentNode === wrap) wrap.insertBefore(child, viewport);
@@ -202,7 +206,7 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			width: layout.width,
 			height: layout.height,
 			role: "img",
-			"aria-label": `DAG 依赖图，共 ${nodes.length} 个节点`,
+			"aria-label": `执行步骤关系，共 ${nodes.length} 个步骤`,
 		});
 		const defs = svgEl("defs");
 		const marker = svgEl("marker", {
@@ -339,6 +343,7 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			const purpose = describeDagNodePurpose(node.nodeId, node);
 			const group = svgEl("g", {
 				transform: `translate(${position.x} ${position.y})`,
+				"data-node-id": node.nodeId,
 				class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
 				tabindex: 0,
 				role: "button",
@@ -402,6 +407,9 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			});
 			svg.appendChild(group);
 		}
+		const scale = Number(viewport.dataset.scale) || 1;
+		svg.style.width = `${Number(svg.getAttribute("width")) * scale}px`;
+		svg.style.height = `${Number(svg.getAttribute("height")) * scale}px`;
 		viewport.appendChild(svg);
 	}
 	if (viewport.parentNode !== wrap) wrap.appendChild(viewport);
@@ -476,9 +484,48 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			}
 		}
 	}
+	const findNode = (id) => {
+		const matches = [...viewport.querySelectorAll("[data-node-id]")].filter((element) => element.getAttribute("data-node-id") === id);
+		const key = uiState.dagInspectorAttempt?.nodeId === id ? uiState.dagInspectorAttempt.key : null;
+		return matches.find((element) => key && element.getAttribute("data-execution-key") === key) ?? matches.at(-1);
+	};
+	const center = (id, executionId = null) => {
+		const target = executionId ? [...viewport.querySelectorAll("[data-execution-id]")].find((item) => item.getAttribute("data-execution-id") === executionId) : findNode(id);
+		if (!target) return;
+		const rect = target.getBoundingClientRect(), container = viewport.getBoundingClientRect();
+		viewport.scrollTo({ left: viewport.scrollLeft + rect.left - container.left - (container.width - rect.width) / 2, top: viewport.scrollTop + rect.top - container.top - (container.height - rect.height) / 2, behavior: "smooth" });
+	};
+	const addAction = (id, label, action) => { const icons = { selected: "ri-focus-3-line", running: "ri-play-circle-line", failed: "ri-error-warning-line", fit: "ri-fullscreen-line" }; const button = iconButton(label, icons[id], "dag-graph-reset"); button.type = "button"; button.dataset.graphAction = id; button.addEventListener("click", action); toolbar.appendChild(button); return button; };
+	addAction("selected", "定位选中", () => center(uiState.selectedDagNodeId)).disabled = !findNode(uiState.selectedDagNodeId);
+	addAction("running", "定位运行中", () => { const node = nodes.find((item) => String(item.status).toLowerCase() === "running"); if (node) center(node.nodeId); }).disabled = !nodes.some((item) => String(item.status).toLowerCase() === "running");
+	const failedNodes = (mode === "trajectory" ? dag.executionTrajectory?.occurrences ?? [] : nodes).filter((item) => ["error", "failed"].includes(String(item.status).toLowerCase()));
+	const failed = addAction("failed", `下个失败 (${failedNodes.length})`, () => {
+		if (!failedNodes.length) return;
+		const index = failedNodes.findIndex((item) => item.nodeId === uiState.selectedDagNodeId && (mode !== "trajectory" || (item.pass ? `pass-${item.pass}` : null) === (uiState.dagInspectorAttempt?.key ?? null)));
+		const node = failedNodes[(index + 1) % failedNodes.length];
+		if (mode === "trajectory") selectDagExecution(dagRunId, node.nodeId, node.pass ? `pass-${node.pass}` : null);
+		else selectDagNode(dagRunId, node.nodeId);
+		requestAnimationFrame(() => center(node.nodeId, node.executionId));
+	});
+	failed.disabled = !failedNodes.some((node) => findNode(node.nodeId));
+	const fit = addAction("fit", "适应画布", () => {
+		const svg = viewport.querySelector("svg.dag-graph"); if (!svg) return;
+		const width = Number(svg.getAttribute("width")), height = Number(svg.getAttribute("height"));
+		const scale = Math.min(1, (viewport.clientWidth - 24) / width, (viewport.clientHeight - 24) / height);
+		if (!(scale > 0)) return;
+		viewport.dataset.scale = String(scale); svg.style.width = `${width * scale}px`; svg.style.height = `${height * scale}px`; viewport.scrollTo({ left: 0, top: 0 });
+	});
+	fit.disabled = mode !== "topology";
+	const search = el("input", "dag-graph-search"); search.type = "search"; search.placeholder = "查找节点…"; search.value = previousSearch; search.setAttribute("aria-label", "查找流程节点"); search.dataset.graphAction = "search";
+	search.addEventListener("keydown", (event) => { if (event.key !== "Enter" || event.isComposing) return; event.preventDefault(); const matches = nodes.filter((item) => `${item.nodeId} ${describeDagNodePurpose(item.nodeId, item)}`.toLocaleLowerCase().includes(search.value.trim().toLocaleLowerCase())); if (!matches.length) return; const index = matches.findIndex((item) => item.nodeId === uiState.selectedDagNodeId); const node = matches[(index + 1) % matches.length]; center(node.nodeId); selectDagNode(dagRunId, node.nodeId); }); toolbar.appendChild(search);
+	if (focusedNodeId) findNode(focusedNodeId)?.focus?.({ preventScroll: true });
+	else if (focusedAction) [...toolbar.querySelectorAll("[data-graph-action]")].find((item) => item.dataset.graphAction === focusedAction)?.focus?.({ preventScroll: true });
 	// Toolbar is rebuilt each paint; bind reset to the current viewport/dagRunId.
 	// 重置视图只重置当前模式的 viewport：不切换模式、不重置另一模式、不关闭 Inspector。
 	reset.addEventListener("click", () => {
+		viewport.dataset.scale = "1";
+		const svg = viewport.querySelector("svg.dag-graph");
+		if (svg) { svg.style.width = `${svg.getAttribute("width")}px`; svg.style.height = `${svg.getAttribute("height")}px`; }
 		if (mode === "trajectory") {
 			uiState.dagTrajectoryViewportState = updateDagTrajectoryViewportState(
 				uiState.dagTrajectoryViewportState,