@tea-agent/loop-agent 0.1.0-fe-test.0

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

@@ -0,0 +1,483 @@
+/** Observe UI view module (R5). */
+import {
+	UI_TEXT,
+	LIVENESS_LABELS,
+	ARTIFACT_LABELS,
+	ARTIFACT_KEYS,
+	STEP_LABELS,
+	STEP_ORDER,
+	DAG_INSPECTOR_DEFAULT_WIDTH,
+	DAG_INSPECTOR_MIN_WIDTH,
+	DAG_INSPECTOR_MAX_WIDTH,
+	DAG_INSPECTOR_RIGHT_OFFSET,
+	DAG_INSPECTOR_VIEWPORT_MARGIN,
+	DAG_INSPECTOR_KEYBOARD_STEP,
+	TERMINAL_RUN_STATUSES,
+	DAG_EFFECTIVE_STATUS_LABELS,
+	STATUS_LABELS,
+} from "../constants.js";
+import { clearNode, el, metaGrid, buildTable } from "../dom.js";
+import {
+	badge,
+	badgeClass,
+	statusLabel,
+	formatTs,
+	formatMs,
+	formatDuration,
+	formatAgo,
+	dagStatusBadge,
+	livenessBadge,
+	displayDurationMs,
+	derivedDurationMs,
+	summaryText,
+	truncateText,
+	repoBaseName,
+	parseMarkdownBlocks,
+	markdownLinkHref,
+} from "../format.js";
+import { parseRoute, navigate, buildHashPath } from "../router.js";
+import {
+	fetchJson,
+	artifactUrl,
+	parseArtifactPreviewResponse,
+} from "../api.js";
+import {
+	objectRouteLink,
+	findFeatureInSnapshot,
+	featureLookupState,
+	buildObjectRelations,
+	renderObjectRelationBar,
+} from "../relations.js";
+import { copyText, renderRecommendedCommand } from "../copy.js";
+import {
+	isPageVisible,
+	detailPollDelay,
+	dashboardPollDelay,
+	captureDagGraphViewportState,
+	updateDagGraphViewportState,
+	updateDagTimelineViewportState,
+	shouldReuseDagDetailShell,
+	shouldPreserveDiagnosticsOpen,
+	renderViewState,
+	mountViewState,
+	makeSessionEventIdentity,
+} from "../state.js";
+import { uiState, dagGraphViewportStates, dagGraphViewModes } from "../state.js";
+import { sortPoolTasks } from "../format-pool.js";
+import {
+	dagMetaVisibility,
+	isDagRunActive,
+	dashboardVisibleFeatures,
+	findDagForRun,
+} from "../dag-model.js";
+import { layoutDag } from "../dag-layout.js";
+import {
+	showView,
+	setBreadcrumb,
+	updateHeaderRefresh,
+	mountRelationBar,
+} from "../shell-chrome.js";
+import {
+	dagProgress,
+	frontendLintSummary,
+	isNodeFailed,
+	isNodeFinished,
+	isNodeActive,
+} from "../dag-helpers.js";
+import { findBatchRunIdForTask } from "../run-processing.js";
+import { renderDagGraph } from "./dag-graph.js";
+import {
+	closeDagInspector,
+	selectDagNode,
+	renderDagInspector,
+} from "./dag-inspector.js";
+import { mergeSessionEvents } from "./session-timeline.js";
+
+const ANSI_ESCAPE_RE =
+	// CSI + OSC sequences commonly present in shell/test error previews.
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: intentional ANSI strip
+	/\u001b\[[0-9;?]*[ -/]*[@-~]|\u001b\][^\u0007\u001b]*(?:\u0007|\u001b\\)/g;
+// biome-ignore lint/suspicious/noControlCharactersInRegex: intentional control-char strip
+const CONTROL_CHARS_RE = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g;
+const ERROR_NAME_LINE_RE =
+	/(?:^|\b)(?:Error|AssertionError|TypeError|ReferenceError|SyntaxError|RangeError)\b/;
+const FAIL_LINE_RE = /\bFAIL\b/;
+const SEPARATOR_LINE_RE = /^[\s\-_=*~#.]+$/;
+// Shell prompts and common package/test runners only — not result lines like
+// "node exited 1" or real runner errors such as "npm ERR! code 1".
+const COMMAND_LINE_RE =
+	/^(?:[$>#%]\s+|\s*(?:(?:npm|pnpm|yarn|npx)(?!\s+ERR\b)|vitest|tsc|eslint)\b)/i;
+
+/**
+ * Extract a short first-error summary from a raw errorPreview for the DAG
+ * node table 备注 column. Never returns the full multi-line dump.
+ */
+export function extractFirstErrorSummary(errorPreview) {
+	if (typeof errorPreview !== "string" || !errorPreview) return "";
+	const cleaned = errorPreview
+		.replace(ANSI_ESCAPE_RE, "")
+		.replace(CONTROL_CHARS_RE, "");
+	const lines = cleaned
+		.split(/\r?\n/)
+		.map((line) => line.replace(/\s+/g, " ").trim())
+		.filter((line) => line.length > 0);
+	if (lines.length === 0) return "";
+
+	const errorLine = lines.find((line) => ERROR_NAME_LINE_RE.test(line));
+	if (errorLine) return errorLine;
+
+	const failLine = lines.find((line) => FAIL_LINE_RE.test(line));
+	if (failLine) return failLine;
+
+	const effective = lines.find(
+		(line) => !SEPARATOR_LINE_RE.test(line) && !COMMAND_LINE_RE.test(line),
+	);
+	return effective ?? "";
+}
+
+/** Resolve 备注 cell content for a DAG node (failed → summary; else label). */
+export function resolveNodeRemark(node) {
+	const failed = isNodeFailed(node?.status);
+	if (failed) {
+		const summary = extractFirstErrorSummary(node?.errorPreview);
+		return {
+			failed: true,
+			text: summary || "—",
+			isErrorSummary: Boolean(summary),
+		};
+	}
+	const label = typeof node?.label === "string" ? node.label.trim() : "";
+	return {
+		failed: false,
+		text: label || "—",
+		isErrorSummary: false,
+	};
+}
+
+/**
+ * Sole production constructor for the DAG node table (sort, rows, buildTable,
+ * remark cells, title tooltips, row click → selectDagNode).
+ * Tests must call this (or renderDagDetail) instead of hand-building DOM.
+ */
+export function buildDagNodeTable(dagRunId, nodes) {
+	const sortedNodes = [...nodes].sort((a, b) => {
+		const ra = Number(a.rank);
+		const rb = Number(b.rank);
+		if (!Number.isNaN(ra) && !Number.isNaN(rb) && ra !== rb) return ra - rb;
+		if (a.rank !== b.rank) return (a.rank ?? "").localeCompare(b.rank ?? "");
+		return a.nodeId.localeCompare(b.nodeId);
+	});
+
+	const rows = sortedNodes.map((node, index) => {
+		const active = isNodeActive(node.status);
+		const failed = isNodeFailed(node.status);
+		let className = "";
+		if (active) className = "dag-active-node";
+		if (failed) className = "dag-error-node";
+		if (node.nodeId === uiState.selectedDagNodeId) {
+			className = className
+				? `${className} dag-node-selected`
+				: "dag-node-selected";
+		}
+		const remark = resolveNodeRemark(node);
+		const remarkCell = remark.isErrorSummary
+			? el("span", "dag-node-error-summary", remark.text)
+			: remark.text;
+		return {
+			className,
+			onClick: () => selectDagNode(dagRunId, node.nodeId),
+			cells: [
+				index + 1,
+				node.nodeId,
+				node.rank ?? "—",
+				node.executor ?? "—",
+				node.model ?? "—",
+				node.status ? badge(node.status) : "—",
+				formatMs(node.durationMs),
+				(typeof node.executionSummary?.historyLabel === "string" &&
+					node.executionSummary.historyLabel.trim()) ||
+					"—",
+				remarkCell,
+			],
+		};
+	});
+	const nodeTable = buildTable(
+		[
+			"序号",
+			"节点 ID",
+			"依赖层",
+			"执行方式",
+			"模型",
+			"状态",
+			"耗时",
+			"执行历史",
+			"备注",
+		],
+		rows,
+	);
+	nodeTable.classList.add("dag-node-table");
+	for (const row of nodeTable.tBodies[0]?.rows ?? []) {
+		// Title tooltips for long ID/model/remark text only; remark never
+		// carries full errorPreview (summary or — only).
+		for (const columnIndex of [1, 4, 8]) {
+			const cell = row.cells[columnIndex];
+			const text = cell?.textContent ?? "";
+			if (text) cell.title = text;
+		}
+	}
+	return nodeTable;
+}
+
+export async function renderDagDetail(dagRunId, initial = true) {
+	showView("dag");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: dagRunId },
+	]);
+
+	if (initial || uiState.currentDagRunId !== dagRunId) {
+		uiState.currentDagRunId = dagRunId;
+		uiState.selectedDagNodeId = null;
+		uiState.sessionEventOffset = 0;
+		uiState.sessionEvents = [];
+		uiState.sessionEventIdentity = null;
+		uiState.dagInspectorOpen = false;
+		uiState.dagInspectorTab = "output";
+		uiState.dagInspectorAttempt = null;
+		uiState.dagGraphViewportState = null;
+		uiState.dagTimelineViewportState = null;
+	}
+	// AC-001：同会话内重新进入同一 dagRunId 保持当前图视图模式（不切回逻辑拓扑）。
+	uiState.dagGraphViewMode = dagGraphViewModes.get(dagRunId) ?? "topology";
+
+	const metaEl = document.getElementById("dag-meta");
+	const ranksEl = document.getElementById("dag-ranks");
+	const nodesEl = document.getElementById("dag-nodes");
+	if (initial && metaEl) mountViewState(metaEl, "loading", "加载 DAG…");
+	uiState.dagGraphViewportState = captureDagGraphViewportState(
+		uiState.dagGraphViewportState,
+		dagRunId,
+		ranksEl.querySelector(".dag-graph-viewport"),
+	);
+	if (uiState.dagGraphViewportState?.dagRunId === dagRunId) {
+		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+	}
+
+	const [dag, snapshot] = await Promise.all([
+		fetchJson(`/api/dag-runs/${encodeURIComponent(dagRunId)}`),
+		fetchJson("/api/snapshot"),
+	]);
+	if (snapshot) {
+		uiState.lastSnapshot = snapshot;
+		updateHeaderRefresh(snapshot.generatedAt);
+	}
+	if (!dag) {
+		clearNode(metaEl);
+		mountViewState(metaEl, "error", "找不到该 DAG 运行。");
+		mountRelationBar("dag-relations", {}, snapshot);
+		closeDagInspector();
+		return false;
+	}
+
+	// Only link feature/task when a snapshot object carries this dagRunId (no naming guess).
+	const snap = snapshot ?? uiState.lastSnapshot;
+	const linkedTask = (snap?.tasks ?? []).find(
+		(t) => t.dagRunId === dag.dagRunId,
+	);
+	mountRelationBar(
+		"dag-relations",
+		{
+			featureId: linkedTask?.featureId,
+			taskId: linkedTask?.taskId,
+			batchRunId:
+				linkedTask?.batchRunId ??
+				(linkedTask ? findBatchRunIdForTask(snap, linkedTask) : undefined),
+			workerRunId: linkedTask?.workerRunId,
+			dagRunId: dag.dagRunId,
+		},
+		snap,
+	);
+
+	const nodes = dag.nodes ?? [];
+	if (
+		uiState.selectedDagNodeId &&
+		!nodes.some((n) => n.nodeId === uiState.selectedDagNodeId)
+	) {
+		uiState.selectedDagNodeId = null;
+		uiState.dagInspectorOpen = false;
+		uiState.dagInspectorAttempt = null;
+		if (initial) {
+			uiState.sessionEventOffset = 0;
+			uiState.sessionEvents = [];
+			uiState.sessionEventIdentity = null;
+		}
+	}
+
+	const progress = dagProgress(dag);
+	const failedCount = nodes.filter((n) => isNodeFailed(n.status)).length;
+	const skippedCount = nodes.filter(
+		(n) => (n.status ?? "").toLowerCase() === "skipped",
+	).length;
+	const succeededCount = nodes.filter(
+		(n) => isNodeFinished(n.status) && !isNodeFailed(n.status),
+	).length;
+
+	// 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 = [
+		["标题", dag.title || dag.dagRunId],
+		["DAG 运行 ID", dag.dagRunId],
+		["状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+	];
+	if (visibility.showExecutorStatus)
+		primaryEntries.push(["执行器状态", livenessValue]);
+	if (visibility.showConsistencyWarning)
+		primaryEntries.push(["状态一致性", "不一致，需要处理"]);
+	if (visibility.showResume) primaryEntries.push(["允许恢复", "是"]);
+	if (visibility.showReconcile) primaryEntries.push(["允许收口", "是"]);
+	const liveStatus = String(dag.effectiveStatus ?? dag.status ?? "").toLowerCase();
+	if (liveStatus === "running" || liveStatus === "active") {
+		const interruptLink = el(
+			"a",
+			"page-action-btn",
+			"在操作台中止此运行 →",
+		);
+		interruptLink.href = `/#/recovery?dagRunId=${encodeURIComponent(dag.dagRunId)}&intent=interrupt`;
+		interruptLink.setAttribute("data-testid", "inspect-dag-interrupt-link");
+		interruptLink.title = "只跳转到操作台 Recovery，不会在观测页执行中止";
+		primaryEntries.push(["协作中止", interruptLink]);
+	}
+	primaryEntries.push(
+		["开始时间", formatTs(dag.startedAt)],
+		["结束时间", formatTs(dag.finishedAt)],
+		["总耗时", formatDuration(dag.durationMs)],
+		["进度", `${progress.finished}/${progress.total}`],
+		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
+		["DAG 路径", dag.dagPath ?? "—"],
+	);
+	const lintSummary = frontendLintSummary(dag.frontendLint);
+	if (lintSummary) {
+		primaryEntries.push(["前端 lint 判定", lintSummary]);
+	}
+	const primaryGrid = metaGrid(primaryEntries);
+	const diagnosticGrid = metaGrid([
+		["当前判定", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+		["原始记录状态", badge(dag.status)],
+		["执行器状态", livenessValue],
+		["生命周期", dag.lifecycle ?? "—"],
+		[
+			"状态一致性",
+			visibility.showConsistencyWarning ? "不一致，需要处理" : "一致",
+		],
+		["允许恢复", visibility.showResume ? "是" : "否"],
+		["允许收口", visibility.showReconcile ? "是" : "否"],
+	]);
+	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);
+	}
+
+	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) {
+		// reuse-dag-graph-wrap + viewport identity: keep wrap/viewport alive.
+		// Defer content rebuild only while the graph resize gesture is active;
+		// even without defer, renderDagGraph reuses the same viewport node.
+		if (!graphGestureActive) {
+			renderDagGraph(dag, dagRunId, existingGraphWrap);
+		}
+	} else {
+		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, "节点"));
+	nodeHeading.appendChild(
+		el("span", "dag-section-meta", `共 ${nodes.length} 个节点`),
+	);
+	nodesEl.appendChild(nodeHeading);
+
+	if (nodes.length === 0) {
+		mountViewState(nodesEl, "empty", UI_TEXT.noNodes);
+	} else {
+		nodesEl.appendChild(buildDagNodeTable(dagRunId, nodes));
+	}
+	nodesEl.scrollLeft = nodesScrollLeft;
+
+	if (uiState.dagInspectorOpen && uiState.selectedDagNodeId) {
+		if (!uiState.sessionEventIdentity) {
+			uiState.sessionEventIdentity = makeSessionEventIdentity(
+				dagRunId,
+				uiState.selectedDagNodeId,
+			);
+		}
+		await mergeSessionEvents(dagRunId, uiState.selectedDagNodeId);
+	}
+	renderDagInspector(
+		dagRunId,
+		nodes.find((node) => node.nodeId === uiState.selectedDagNodeId),
+		initial,
+	);
+	return isDagRunActive(dag);
+}
+
+export function startDagPolling(dagRunId, initial = true) {
+	if (uiState.dagPollTimer) clearTimeout(uiState.dagPollTimer);
+	const generation = ++uiState.pollingGeneration;
+	const poll = async (isInitial) => {
+		const active = await renderDagDetail(dagRunId, isInitial);
+		if (generation !== uiState.pollingGeneration || !active) return;
+		const delay = detailPollDelay("running", isPageVisible());
+		uiState.dagPollTimer = setTimeout(() => {
+			uiState.dagPollTimer = null;
+			void poll(false);
+		}, delay);
+	};
+	void poll(initial);
+}