@tea-agent/loop-agent 0.11.0 → 0.12.0

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

@@ -0,0 +1,362 @@
+/** 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,
+} from "../state.js";
+import { uiState, dagGraphViewportStates } 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,
+	isNodeFailed,
+	isNodeFinished,
+	isNodeActive,
+	renderRankLanes,
+} 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";
+
+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.dagInspectorOpen = false;
+		uiState.dagInspectorTab = "output";
+		uiState.dagGraphViewportState = null;
+		uiState.dagTimelineViewportState = null;
+	}
+
+	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;
+		if (initial) {
+			uiState.sessionEventOffset = 0;
+			uiState.sessionEvents = [];
+		}
+	}
+
+	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(["允许收口", "是"]);
+	primaryEntries.push(
+		["开始时间", formatTs(dag.startedAt)],
+		["结束时间", formatTs(dag.finishedAt)],
+		["总耗时", formatDuration(dag.durationMs)],
+		["进度", `${progress.finished}/${progress.total}`],
+		["成功/失败/跳过", `${succeededCount}/${failedCount}/${skippedCount}`],
+		["DAG 路径", dag.dagPath ?? "—"],
+	);
+	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: keep wrap identity across polls when possible.
+		if (!graphGestureActive) {
+			renderDagGraph(dag, dagRunId, existingGraphWrap);
+		}
+	} else {
+		clearNode(ranksEl);
+		ranksEl.appendChild(el("h3", null, "DAG 依赖图"));
+		ranksEl.appendChild(renderDagGraph(dag, dagRunId, null));
+		ranksEl.appendChild(renderRankLanes(dag));
+	}
+
+	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 {
+		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) => {
+			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";
+			}
+			return {
+				className,
+				onClick: () => selectDagNode(dagRunId, node.nodeId),
+				cells: [
+					node.nodeId,
+					node.rank ?? "—",
+					node.executor ?? "—",
+					node.model ?? "—",
+					node.status ? badge(node.status) : "—",
+					formatMs(node.durationMs),
+					node.errorPreview ?? node.label ?? "—",
+				],
+			};
+		});
+		const nodeTable = buildTable(
+			["节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
+			rows,
+		);
+		nodeTable.classList.add("dag-node-table");
+		for (const row of nodeTable.tBodies[0]?.rows ?? []) {
+			for (const columnIndex of [0, 3, 6]) {
+				const cell = row.cells[columnIndex];
+				if (cell?.textContent) cell.title = cell.textContent;
+			}
+		}
+		nodesEl.appendChild(nodeTable);
+	}
+	nodesEl.scrollLeft = nodesScrollLeft;
+
+	if (uiState.dagInspectorOpen && 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);
+}