@tea-agent/loop-agent 0.10.0 → 0.11.0

package/dist/worker/observe/static/app.js

@@ -9,6 +9,7 @@ const DAG_INSPECTOR_MAX_WIDTH = 680;
 const DAG_INSPECTOR_RIGHT_OFFSET = 24;
 const DAG_INSPECTOR_VIEWPORT_MARGIN = 48;
 const DAG_INSPECTOR_KEYBOARD_STEP = 24;
+const OUTPUT_FOLLOW_LATEST_PX = 48;
 
 const UI_TEXT = {
 	dashboard: "总览",
@@ -163,6 +164,9 @@ let dagInspectorWidth = null;
 let dagGraphViewportState = null;
 const dagGraphViewportStates = new Map();
 let dagTimelineViewportState = null;
+let dagNodeOutputViewportState = null;
+let runOutputViewportState = null;
+let dagInspectorContentSignature = null;
 let pollingGeneration = 0;
 
 function isPageVisible() {
@@ -325,6 +329,66 @@ export function updateDagTimelineViewportState(
 	};
 }
 
+// Unified follow-latest helper for DAG node output and Worker output scroll
+// regions. Returns true only when the user is parked within `threshold` px of
+// the bottom, mirroring the existing process-timeline behaviour.
+export function computeFollowLatest(
+	scrollTop,
+	scrollHeight,
+	clientHeight,
+	threshold = OUTPUT_FOLLOW_LATEST_PX,
+) {
+	const top = Number(scrollTop);
+	const height = Number(scrollHeight);
+	const client = Number(clientHeight);
+	if (!Number.isFinite(top) || !Number.isFinite(height) || !Number.isFinite(client)) {
+		return false;
+	}
+	if (height <= 0 || client <= 0) return false;
+	return height - top - client < Math.max(0, Number(threshold) || 0);
+}
+
+// Generalised viewport-state record keyed by `regionKey`, so the same helper
+// serves the DAG node inspector output ("dag:<runId>:<nodeId>:output") and the
+// Worker run output ("run:<runId>:output").
+export function updateDagOutputViewportState(
+	_previous,
+	regionKey,
+	scrollLeft,
+	scrollTop,
+	followLatest,
+) {
+	return {
+		regionKey,
+		scrollLeft: Math.max(0, Number(scrollLeft) || 0),
+		scrollTop: Math.max(0, Number(scrollTop) || 0),
+		followLatest: Boolean(followLatest),
+	};
+}
+
+// Poll-render decision helpers. Initial paints always rebuild the shell; a
+// non-initial refresh reuses the existing viewport/inspector DOM identity so
+// active pointer-capture targets (scrollbar / resize handle) survive.
+export function shouldReuseDagDetailShell(initial, hasExistingViewport) {
+	return !Boolean(initial) && Boolean(hasExistingViewport);
+}
+
+export function shouldPreserveDiagnosticsOpen(initial, existingOpen) {
+	if (initial) return false;
+	return Boolean(existingOpen);
+}
+
+// Detects an in-progress resize/scroll gesture so the poll renderer can defer
+// tearing down the interactive shell until the gesture releases.
+export function isInteractiveGestureActive(bodyClassList) {
+	const list = bodyClassList;
+	if (!list || typeof list.contains !== "function") return false;
+	return (
+		list.contains("is-resizing-dag-inspector") ||
+		list.contains("is-resizing-dag-graph")
+	);
+}
+
 export function parseHashRoute(hashValue) {
 	const hash = hashValue.replace(/^#/, "") || "/";
 	const batchMatch = /^\/batch\/([^/]+)$/.exec(hash);
@@ -882,8 +946,11 @@ function createDagInspectorResizeHandle(panel) {
 function captureDagTimelineViewportState(panel) {
 	const scrollEl = panel.querySelector(".process-timeline-scroll");
 	if (scrollEl?.dataset.dagRunId && scrollEl.dataset.nodeId) {
-		const followLatest =
-			scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 48;
+		const followLatest = computeFollowLatest(
+			scrollEl.scrollTop,
+			scrollEl.scrollHeight,
+			scrollEl.clientHeight,
+		);
 		dagTimelineViewportState = updateDagTimelineViewportState(
 			dagTimelineViewportState,
 			scrollEl.dataset.dagRunId,
@@ -943,8 +1010,11 @@ function renderSessionTimeline(content, nodeId) {
 	content.addEventListener(
 		"scroll",
 		() => {
-			const followLatest =
-				content.scrollHeight - content.scrollTop - content.clientHeight < 48;
+			const followLatest = computeFollowLatest(
+				content.scrollTop,
+				content.scrollHeight,
+				content.clientHeight,
+			);
 			dagTimelineViewportState = updateDagTimelineViewportState(
 				dagTimelineViewportState,
 				currentDagRunId,
@@ -1197,19 +1267,42 @@ function svgEl(tag, attrs = {}) {
 	return node;
 }
 
-function renderDagGraph(dag, dagRunId) {
+function renderDagGraph(dag, dagRunId, existingWrap) {
 	const nodes = dag.nodes ?? [];
 	const edges = dag.edges ?? [];
 	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
-	const wrap = el("div", "dag-graph-wrap");
+	const existingViewport = existingWrap?.querySelector?.(":scope > .dag-graph-viewport") ?? null;
+	const reuseViewport =
+		Boolean(existingWrap?.isConnected) &&
+		Boolean(existingViewport?.isConnected) &&
+		existingViewport.classList?.contains("dag-graph-viewport") &&
+		existingViewport.dataset?.dagRunId === dagRunId;
+	// reuse-dag-graph-wrap: the live viewport remains attached to the document
+	// during polling. Only its toolbar and SVG contents are patched in place.
+	const wrap = reuseViewport ? existingWrap : el("div", "dag-graph-wrap");
 	const toolbar = el("div", "dag-graph-toolbar");
 	toolbar.appendChild(el("span", "dag-graph-summary", `${nodes.length} 节点 · ${layout.edges.length} 条依赖`));
 	const reset = el("button", "dag-graph-reset", "重置视图");
 	toolbar.appendChild(reset);
-	wrap.appendChild(toolbar);
-	if (edges.length === 0) wrap.appendChild(el("p", "dag-graph-fallback", "该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。"));
-	const viewport = el("div", "dag-graph-viewport");
+	const previousToolbar = reuseViewport
+		? wrap.querySelector(":scope > .dag-graph-toolbar")
+		: null;
+	if (previousToolbar) wrap.replaceChild(toolbar, previousToolbar);
+	else wrap.prepend(toolbar);
+	const previousFallback = reuseViewport
+		? wrap.querySelector(":scope > .dag-graph-fallback")
+		: null;
+	if (edges.length === 0) {
+		const fallback = previousFallback ?? el("p", "dag-graph-fallback");
+		fallback.textContent = "该运行没有可用依赖数据；图按并行层级展示，节点表格仍保留完整数据。";
+		if (!previousFallback) wrap.insertBefore(fallback, existingViewport ?? null);
+	} else {
+		previousFallback?.remove();
+	}
+	const viewport =
+		reuseViewport && existingViewport ? existingViewport : el("div", "dag-graph-viewport");
 	viewport.dataset.dagRunId = dagRunId;
+	clearNode(viewport);
 	const svg = svgEl("svg", { class: "dag-graph", viewBox: `0 0 ${layout.width} ${layout.height}`, width: layout.width, height: layout.height, role: "img", "aria-label": `DAG 依赖图，共 ${nodes.length} 个节点` });
 	const defs = svgEl("defs");
 	const marker = svgEl("marker", { id: "dag-arrow", viewBox: "0 0 10 10", refX: 9, refY: 5, markerWidth: 7, markerHeight: 7, orient: "auto-start-reverse" });
@@ -1236,26 +1329,39 @@ function renderDagGraph(dag, dagRunId) {
 		group.addEventListener("keydown", (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); activate(); } });
 		svg.appendChild(group);
 	}
-	viewport.appendChild(svg); wrap.appendChild(viewport);
+	viewport.appendChild(svg);
+	if (!reuseViewport) wrap.appendChild(viewport);
 	const graphViewportState =
 		dagGraphViewportStates.get(dagRunId) ??
 		(dagGraphViewportState?.dagRunId === dagRunId
 			? dagGraphViewportState
 			: null);
-	viewport.addEventListener(
-		"scroll",
-			() => {
-				dagGraphViewportState = updateDagGraphViewportState(
-					dagGraphViewportState,
-					dagRunId,
-					viewport.scrollLeft,
-					viewport.scrollTop,
-				);
-				dagGraphViewportStates.set(dagRunId, dagGraphViewportState);
-			},
-		{ passive: true },
-	);
-	if (graphViewportState) {
+	if (!reuseViewport) {
+		viewport.addEventListener(
+			"scroll",
+				() => {
+					dagGraphViewportState = updateDagGraphViewportState(
+						dagGraphViewportState,
+						dagRunId,
+						viewport.scrollLeft,
+						viewport.scrollTop,
+					);
+					dagGraphViewportStates.set(dagRunId, dagGraphViewportState);
+				},
+			{ passive: true },
+		);
+		viewport.addEventListener("pointerdown", () => {
+			document.body.classList.add("is-resizing-dag-graph");
+			const finish = () => {
+				document.body.classList.remove("is-resizing-dag-graph");
+				window.removeEventListener("pointerup", finish, true);
+				window.removeEventListener("pointercancel", finish, true);
+			};
+			window.addEventListener("pointerup", finish, true);
+			window.addEventListener("pointercancel", finish, true);
+		}, { passive: true });
+	}
+	if (!reuseViewport && graphViewportState) {
 		const restoreViewport = () => {
 			viewport.scrollLeft = graphViewportState.scrollLeft;
 			viewport.scrollTop = graphViewportState.scrollTop;
@@ -1389,7 +1495,7 @@ function renderMarkdown(content) {
 	return article;
 }
 
-function renderDagInspector(dagRunId, node) {
+function renderDagInspector(dagRunId, node, initial = true) {
 	const panel = document.getElementById("dag-inspector");
 	if (!panel) return;
 	captureDagTimelineViewportState(panel);
@@ -1399,17 +1505,97 @@ function renderDagInspector(dagRunId, node) {
 		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 (dagInspectorContentSignature === nextContentSignature) return;
+		// Capture the reader's scroll position before repainting the content so we
+		// can follow latest output when parked at the bottom, or stay put otherwise.
+		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`;
+		dagNodeOutputViewportState = updateDagOutputViewportState(
+			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 = 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;
+		}
+		dagInspectorContentSignature = nextContentSignature;
+		return;
+	}
+
 	clearNode(panel);
 	panel.classList.add("is-open");
 	panel.setAttribute("aria-hidden", "false");
 	panel.appendChild(createDagInspectorResizeHandle(panel));
+	const header = buildDagInspectorHeader(dagRunId, node);
+	panel.appendChild(header);
+
+	const content = el("div", "dag-inspector-content");
+	content.setAttribute("role", "tabpanel");
+	fillDagInspectorContent(content, dagRunId, node);
+	panel.appendChild(content);
+	dagInspectorContentSignature = nextContentSignature;
+}
+
+function dagInspectorSignature(dagRunId, node) {
+	return JSON.stringify([
+		dagRunId,
+		node.nodeId,
+		dagInspectorTab,
+		node.outputPreview ?? "",
+		node.errorPreview ?? "",
+		dagInspectorTab === "timeline" ? sessionEventOffset : null,
+	]);
+}
+
+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");
-	controls.appendChild(badge(node.status ?? "unknown"));
+	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";
@@ -1427,6 +1613,7 @@ function renderDagInspector(dagRunId, node) {
 		const button = document.createElement("button");
 		button.type = "button";
 		button.className = "dag-inspector-tab";
+		button.dataset.inspectorTab = tab;
 		button.setAttribute("role", "tab");
 		button.setAttribute("aria-selected", String(dagInspectorTab === tab));
 		const tabIcon = el("i", icon);
@@ -1435,15 +1622,40 @@ function renderDagInspector(dagRunId, node) {
 		button.appendChild(document.createTextNode(` ${label}`));
 		button.addEventListener("click", () => {
 			dagInspectorTab = tab;
-			renderDagInspector(dagRunId, node);
+			renderDagInspector(dagRunId, node, false);
 		});
 		tabs.appendChild(button);
 	}
 	header.appendChild(tabs);
-	panel.appendChild(header);
+	return header;
+}
 
-	const content = el("div", "dag-inspector-content");
-	content.setAttribute("role", "tabpanel");
+function syncDagInspectorHeader(panel, dagRunId, node) {
+	const existingHeader = panel.querySelector(":scope > .dag-inspector-header");
+	if (!existingHeader) return;
+	if (
+		existingHeader.dataset.dagRunId !== String(dagRunId ?? "") ||
+		existingHeader.dataset.dagNodeId !== String(node.nodeId ?? "")
+	) {
+		panel.replaceChild(buildDagInspectorHeader(dagRunId, node), existingHeader);
+		return;
+	}
+	const nodeLabel = existingHeader.querySelector(".dag-inspector-node");
+	if (nodeLabel) nodeLabel.textContent = node.nodeId;
+	const previousStatus = existingHeader.querySelector(".dag-inspector-status");
+	if (previousStatus?.parentNode) {
+		const nextStatus = badge(node.status ?? "unknown");
+		nextStatus.classList.add("dag-inspector-status");
+		previousStatus.parentNode.replaceChild(nextStatus, previousStatus);
+	}
+	for (const tab of existingHeader.querySelectorAll(".dag-inspector-tab")) {
+		tab.setAttribute("aria-selected", String(tab.dataset.inspectorTab === dagInspectorTab));
+	}
+}
+
+function fillDagInspectorContent(content, dagRunId, node) {
+	content.dataset.dagNodeId = String(node.nodeId ?? "");
+	content.dataset.dagRunId = String(dagRunId ?? "");
 	if (dagInspectorTab === "timeline") {
 		renderSessionTimeline(content, node.nodeId);
 	} else if (!node.outputPreview && !node.errorPreview) {
@@ -1457,7 +1669,6 @@ function renderDagInspector(dagRunId, node) {
 			content.appendChild(error);
 		}
 	}
-	panel.appendChild(content);
 }
 
 async function renderFailures() {
@@ -2038,10 +2249,43 @@ function renderRunPanels(task, events, snapshot) {
 
 	const outputLabel = cmd?.label;
 	const tail = getOutputTail(events, outputLabel);
-	clearNode(outputEl);
-	outputEl.appendChild(el("h3", null, "最新输出"));
-	const pre = el("pre", "output-block", tail || "暂无输出");
-	outputEl.appendChild(pre);
+	const existingPre = outputEl.querySelector("pre.output-block");
+	let followRunOutput = true;
+	let runOutputScrollLeft = 0;
+	let runOutputScrollTop = 0;
+	if (existingPre) {
+		followRunOutput = computeFollowLatest(
+			existingPre.scrollTop,
+			existingPre.scrollHeight,
+			existingPre.clientHeight,
+		);
+		runOutputScrollLeft = existingPre.scrollLeft;
+		runOutputScrollTop = existingPre.scrollTop;
+	}
+	const nextOutput = tail || "暂无输出";
+	let pre = existingPre;
+	if (!pre) {
+		clearNode(outputEl);
+		outputEl.appendChild(el("h3", null, "最新输出"));
+		pre = el("pre", "output-block", nextOutput);
+		outputEl.appendChild(pre);
+	} else if (pre.textContent !== nextOutput) {
+		pre.textContent = nextOutput;
+	}
+	if (followRunOutput) {
+		pre.scrollTop = pre.scrollHeight;
+	} else {
+		pre.scrollTop = runOutputScrollTop;
+	}
+	pre.scrollLeft = runOutputScrollLeft;
+	const runRegionKey = `run:${task.workerRunId ?? task.taskId}:output`;
+	runOutputViewportState = updateDagOutputViewportState(
+		runOutputViewportState,
+		runRegionKey,
+		pre.scrollLeft,
+		pre.scrollTop,
+		followRunOutput,
+	);
 
 	const artifacts = collectArtifacts(task, events);
 	clearNode(artifactsEl);
@@ -2142,6 +2386,7 @@ async function renderDagDetail(dagRunId, initial = true) {
 		dagInspectorTab = "output";
 		dagGraphViewportState = null;
 		dagTimelineViewportState = null;
+		dagInspectorContentSignature = null;
 	}
 
 	const metaEl = document.getElementById("dag-meta");
@@ -2182,7 +2427,19 @@ async function renderDagDetail(dagRunId, initial = true) {
 	const succeededCount = nodes.filter((n) => isNodeFinished(n.status) && !isNodeFailed(n.status))
 		.length;
 
-	clearNode(metaEl);
+	// reuse-dag-detail-shell: on a poll refresh (non-initial) we keep the
+	// interactive DOM identity stable so active scroll/resize gestures and the
+	// diagnostics <details> open state survive the redraw. Initial paints and
+	// DAG-run switches rebuild everything from scratch as before.
+	const existingGraphWrap = ranksEl.querySelector(":scope > .dag-graph-wrap") ?? null;
+	const existingViewport = existingGraphWrap?.querySelector(":scope > .dag-graph-viewport") ?? null;
+	const existingDetails = metaEl.querySelector("details.meta-diagnostics") ?? null;
+	const reuseShell = shouldReuseDagDetailShell(initial, Boolean(existingViewport));
+	const preserveDetailsOpen = shouldPreserveDiagnosticsOpen(
+		initial,
+		Boolean(existingDetails?.open),
+	);
+
 	const visibility = dagMetaVisibility(dag);
 	const livenessValue = LIVENESS_LABELS[dag.liveness] ?? dag.liveness ?? LIVENESS_LABELS.unknown;
 	const primaryEntries = [
@@ -2202,10 +2459,8 @@ async function renderDagDetail(dagRunId, initial = true) {
 		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
 		["DAG 路径", dag.dagPath ?? "—"],
 	);
-	metaEl.appendChild(metaGrid(primaryEntries));
-	const details = el("details", "meta-diagnostics");
-	details.appendChild(el("summary", null, "诊断信息"));
-	details.appendChild(metaGrid([
+	const primaryGrid = metaGrid(primaryEntries);
+	const diagnosticGrid = metaGrid([
 		["当前判定", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
 		["原始记录状态", badge(dag.status)],
 		["执行器状态", livenessValue],
@@ -2213,17 +2468,41 @@ async function renderDagDetail(dagRunId, initial = true) {
 		["状态一致性", visibility.showConsistencyWarning ? "不一致，需要处理" : "一致"],
 		["允许恢复", visibility.showResume ? "是" : "否"],
 		["允许收口", visibility.showReconcile ? "是" : "否"],
-	]));
-	metaEl.appendChild(details);
+	]);
+	if (!initial && existingDetails?.parentNode === metaEl) {
+		const existingPrimary = metaEl.querySelector(":scope > .meta-grid");
+		if (existingPrimary) metaEl.replaceChild(primaryGrid, existingPrimary);
+		else metaEl.insertBefore(primaryGrid, existingDetails);
+		const existingDiagnosticGrid = existingDetails.querySelector(":scope > .meta-grid");
+		if (existingDiagnosticGrid) {
+			existingDetails.replaceChild(diagnosticGrid, existingDiagnosticGrid);
+		} else {
+			existingDetails.appendChild(diagnosticGrid);
+		}
+		existingDetails.open = preserveDetailsOpen;
+	} else {
+		clearNode(metaEl);
+		metaEl.appendChild(primaryGrid);
+		const details = el("details", "meta-diagnostics");
+		details.appendChild(el("summary", null, "诊断信息"));
+		details.appendChild(diagnosticGrid);
+		metaEl.appendChild(details);
+	}
 
-	clearNode(ranksEl);
-		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+	const graphGestureActive = document.body.classList.contains("is-resizing-dag-graph");
 	if (nodes.length === 0) {
+		clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
 		ranksEl.appendChild(el("p", "empty", UI_TEXT.noNodes));
+	} else if (reuseShell && existingGraphWrap?.parentNode === ranksEl) {
+		if (!graphGestureActive) renderDagGraph(dag, dagRunId, existingGraphWrap);
 	} else {
-			ranksEl.appendChild(renderDagGraph(dag, dagRunId));
+		clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+		ranksEl.appendChild(renderDagGraph(dag, dagRunId, null));
 	}
 
+	const nodesScrollLeft = nodesEl.scrollLeft;
 	clearNode(nodesEl);
 	const nodeHeading = el("div", "dag-section-heading");
 	nodeHeading.appendChild(el("h3", null, "节点"));
@@ -2277,6 +2556,7 @@ async function renderDagDetail(dagRunId, initial = true) {
 		}
 		nodesEl.appendChild(nodeTable);
 	}
+	nodesEl.scrollLeft = nodesScrollLeft;
 
 	if (dagInspectorOpen && selectedDagNodeId) {
 		await mergeSessionEvents(dagRunId, selectedDagNodeId);
@@ -2284,6 +2564,7 @@ async function renderDagDetail(dagRunId, initial = true) {
 	renderDagInspector(
 		dagRunId,
 		nodes.find((node) => node.nodeId === selectedDagNodeId),
+		initial,
 	);
 	return isDagRunActive(dag);
 }

package/dist/worker/observe/static/index.html

@@ -37,7 +37,7 @@
         </div>
         <div id="dashboard-repo" class="repo-banner" aria-label="当前仓库"></div>
         <section id="dashboard-features" class="panel panel-features" aria-label="Feature 决策"></section>
-        <section id="dashboard-kpi" class="panel panel-kpi" aria-label="运行摘要"></section>
+        <section id="dashboard-kpi" class="panel panel-kpi" aria-label="运行摘要"></section>
         <div class="dashboard-workspace">
           <section id="dashboard-active-dags" class="panel panel-primary"></section>
           <aside id="dashboard-risk" class="panel panel-risk" aria-label="运行风险"></aside>

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

@@ -250,10 +250,10 @@ td:first-child,
 .kpi-group + .kpi-group { margin-top: var(--space-3); }
 .kpi-group-legend { padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
 
-.kpi-grid {
+.kpi-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  overflow: visible;
+  overflow: visible;
   border: 1px solid var(--hairline-strong);
   border-radius: var(--radius-lg);
   background: var(--surface);
@@ -275,8 +275,8 @@ td:first-child,
 .kpi-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-soft); cursor: help; font-size: 13px; line-height: 1; }
 .kpi-help:hover, .kpi-help:focus-visible { color: var(--ink); background: var(--surface-muted); outline: none; }
 .kpi-help:focus-visible { box-shadow: 0 0 0 2px var(--hairline-strong); }
-.kpi-tip { position: absolute; left: 12px; right: 12px; top: calc(100% - 8px); z-index: 10; max-width: 280px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-ink); color: var(--canvas); font-size: 11px; font-weight: 400; line-height: 1.5; box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast); }
-.kpi-help:hover + .kpi-tip, .kpi-help:focus-visible + .kpi-tip { opacity: 1; visibility: visible; }
+.kpi-tip { position: absolute; left: 12px; right: 12px; top: calc(100% - 8px); z-index: 10; max-width: 280px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-ink); color: var(--canvas); font-size: 11px; font-weight: 400; line-height: 1.5; box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast); }
+.kpi-help:hover + .kpi-tip, .kpi-help:focus-visible + .kpi-tip { opacity: 1; visibility: visible; }
 
 .dashboard-workspace,
 .dashboard-secondary {
@@ -451,6 +451,7 @@ tr.clickable:focus-within { outline: 2px solid var(--orange); outline-offset: -2
 .dag-inspector-resize-handle:focus-visible::before { background: var(--orange); opacity: 1; }
 .dag-inspector-resize-handle:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
 body.is-resizing-dag-inspector { cursor: col-resize; user-select: none; }
+body.is-resizing-dag-graph { cursor: grabbing; user-select: none; }
 .dag-inspector-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
 .dag-inspector-title { display: grid; gap: 6px; min-width: 0; }
 .dag-inspector-title h3 { margin: 0; font-size: 14px; }