@tea-agent/loop-agent 0.35.0 → 0.35.1-beta.0

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

@@ -1,453 +1,453 @@
-/** 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,
-	computeFollowLatest,
-	updateDagOutputViewportState,
-	renderViewState,
-	mountViewState,
-} from "../state.js";
-import { uiState } 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 } from "../dag-helpers.js";
-import {
-	findBatchRunIdForTask,
-	buildStepStates,
-	stepMarker,
-	getCurrentCommand,
-	getOutputTail,
-	collectArtifacts,
-} from "../run-processing.js";
-
-export async function mergeRunEvents(workerRunId) {
-	const page = await fetchJson(
-		`/api/runs/${encodeURIComponent(workerRunId)}/events?after=${uiState.runEventOffset}`,
-	);
-	if (!page?.events) return;
-	uiState.runEvents = uiState.runEvents.concat(page.events);
-	uiState.runEventOffset += page.events.length;
-}
-
-export function renderInlineArtifactList(container, artifacts) {
-	if (!artifacts || artifacts.size === 0) {
-		container.appendChild(el("p", "empty", UI_TEXT.noArtifacts));
-		return;
-	}
-	const list = el("ul", "artifact-list artifact-preview-list");
-	for (const [label, artifactPath] of artifacts) {
-		const li = document.createElement("li");
-		li.className = "artifact-preview-item";
-		const head = el("div", "artifact-preview-head");
-		const title = el(
-			"span",
-			"artifact-preview-label",
-			`${label}: ${artifactPath}`,
-		);
-		const open = document.createElement("a");
-		open.href = artifactUrl(artifactPath);
-		open.textContent = "打开";
-		open.target = "_blank";
-		open.rel = "noopener";
-		open.className = "artifact-link";
-		open.addEventListener("click", (e) => e.stopPropagation());
-		head.appendChild(title);
-		head.appendChild(document.createTextNode(" "));
-		head.appendChild(open);
-		const pre = el("pre", "output-block artifact-preview-body", "加载中…");
-		li.appendChild(head);
-		li.appendChild(pre);
-		list.appendChild(li);
-		void (async () => {
-			try {
-				const res = await fetch(artifactUrl(artifactPath));
-				const text = await res.text();
-				if (!res.ok) {
-					let message = text;
-					try {
-						const parsed = JSON.parse(text);
-						if (parsed && typeof parsed.message === "string") {
-							message = parsed.message;
-						} else if (parsed && typeof parsed.error === "string") {
-							message = parsed.error;
-						}
-					} catch {
-						/* keep raw */
-					}
-					pre.textContent = `无法读取 (${res.status}): ${message || "未知错误"}`;
-					pre.classList.add("artifact-preview-error");
-					return;
-				}
-				const preview = parseArtifactPreviewResponse(text);
-				pre.textContent = preview.content || "（空）";
-				if (preview.truncated) {
-					pre.appendChild(document.createTextNode("\n\n[预览已截断]"));
-				}
-			} catch (err) {
-				pre.textContent = `无法读取: ${err?.message ?? String(err)}`;
-				pre.classList.add("artifact-preview-error");
-			}
-		})();
-	}
-	container.appendChild(list);
-}
-
-export function renderRunDagProgress(task, snapshot) {
-	const panel = document.getElementById("run-dag-progress");
-	clearNode(panel);
-	const dag = findDagForRun(snapshot, task.workerRunId, task);
-	if (!dag) return;
-
-	const progress = dagProgress(dag);
-	panel.appendChild(el("h3", null, "DAG 节点进度"));
-	panel.appendChild(
-		metaGrid([
-			["DAG", dag.title || dag.dagRunId],
-			["当前状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
-			["进度", `${progress.finished}/${progress.total} 个节点`],
-			[
-				"详情",
-				(() => {
-					const a = el("a", "link", "查看 DAG 详情 →");
-					a.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
-					a.addEventListener("click", (e) => {
-						e.preventDefault();
-						navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
-					});
-					return a;
-				})(),
-			],
-		]),
-	);
-}
-
-export function renderRunPanels(task, events, snapshot) {
-	const metaEl = document.getElementById("run-meta");
-	const stepsEl = document.getElementById("run-steps");
-	const commandEl = document.getElementById("run-command");
-	const outputEl = document.getElementById("run-output");
-	const artifactsEl = document.getElementById("run-artifacts");
-	const diagnosisEl = document.getElementById("run-diagnosis");
-
-	const nowMs = Date.now();
-	const livenessNode = livenessBadge(task.liveness);
-	const statusCell = livenessNode
-		? (() => {
-				const wrap = document.createDocumentFragment();
-				wrap.appendChild(badge(task.status));
-				wrap.appendChild(document.createTextNode(" "));
-				wrap.appendChild(livenessNode);
-				return wrap;
-			})()
-		: badge(task.status);
-
-	const dag = findDagForRun(snapshot, task.workerRunId, task);
-	const batchRunId =
-		task.batchRunId ?? findBatchRunIdForTask(snapshot, task) ?? null;
-	const runDuration = displayDurationMs(task);
-
-	mountRelationBar(
-		"run-relations",
-		{
-			featureId: task.featureId,
-			taskId: task.taskId,
-			batchRunId: batchRunId ?? undefined,
-			workerRunId: task.workerRunId,
-			dagRunId: dag?.dagRunId ?? task.dagRunId,
-		},
-		snapshot,
-	);
-
-	clearNode(metaEl);
-	metaEl.appendChild(el("h3", "layer-primary", "主事实"));
-	metaEl.appendChild(
-		metaGrid([
-			["Worker 运行 ID", task.workerRunId ?? "—"],
-			["Task", objectRouteLink("task", task.taskId, snapshot, task.featureId)],
-			[
-				"Feature",
-				task.featureId
-					? objectRouteLink("feature", task.featureId, snapshot)
-					: el("span", "muted", "—"),
-			],
-			["状态", statusCell],
-			[
-				"Batch",
-				batchRunId
-					? objectRouteLink("batch", batchRunId, snapshot)
-					: el("span", "muted", "缺失"),
-			],
-			[
-				"DAG",
-				dag
-					? objectRouteLink("dag", dag.dagRunId, snapshot)
-					: task.dagRunId
-						? el("span", "muted", task.dagRunId)
-						: el("span", "muted", "缺失"),
-			],
-			["开始时间", formatTs(task.startedAt)],
-			["结束时间", formatTs(task.finishedAt)],
-			["派生耗时", formatMs(runDuration)],
-			["已用时", formatDuration(task.elapsedMs)],
-			["上次心跳", formatAgo(task.lastHeartbeatAt, nowMs)],
-			["上次输出", formatAgo(task.lastOutputAt, nowMs)],
-			[
-				"超时截止",
-				task.timeoutAt
-					? formatAgo(task.timeoutAt, nowMs)
-					: task.pid !== undefined
-						? `pid ${task.pid}`
-						: "—",
-			],
-		]),
-	);
-
-	renderRunDagProgress(task, snapshot);
-
-	const steps = buildStepStates(events);
-	clearNode(stepsEl);
-	const stepsHeading = el("h3", null, "执行过程 · 步骤");
-	stepsEl.appendChild(stepsHeading);
-	if (steps.every((s) => s.status === "pending")) {
-		stepsEl.appendChild(el("p", "empty", "暂无步骤事件"));
-	}
-	const ul = el("ul", "step-timeline");
-	for (const step of steps) {
-		const li = document.createElement("li");
-		const marker = el(
-			"span",
-			`step-marker ${step.status}`,
-			stepMarker(step.status),
-		);
-		const name = el("span", "step-name", step.display);
-		const dur = el(
-			"span",
-			"step-duration",
-			step.durationMs !== undefined ? formatMs(step.durationMs) : "",
-		);
-		li.appendChild(marker);
-		if (step.label === "run-dag" && dag?.dagRunId) {
-			const link = document.createElement("a");
-			link.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
-			link.className = "step-link";
-			link.textContent = "DAG →";
-			link.addEventListener("click", (e) => {
-				e.preventDefault();
-				navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
-			});
-			li.appendChild(name);
-			li.appendChild(link);
-		} else {
-			li.appendChild(name);
-		}
-		li.appendChild(dur);
-		ul.appendChild(li);
-	}
-	stepsEl.appendChild(ul);
-
-	const cmd = getCurrentCommand(events);
-	clearNode(commandEl);
-	commandEl.appendChild(el("h3", null, "当前命令"));
-	if (!cmd) {
-		commandEl.appendChild(el("p", "empty", UI_TEXT.noActiveCommand));
-	} else {
-		commandEl.appendChild(
-			metaGrid([
-				["标签", cmd.label ?? "—"],
-				["命令", (cmd.command ?? []).join(" ") || "—"],
-				["PID", cmd.pid !== undefined ? String(cmd.pid) : "—"],
-				[
-					"超时上限",
-					cmd.timeoutMs !== undefined ? formatMs(cmd.timeoutMs) : "—",
-				],
-				[
-					"已用时间",
-					cmd.elapsedMs !== undefined ? formatMs(cmd.elapsedMs) : "—",
-				],
-			]),
-		);
-	}
-
-	const outputLabel = cmd?.label;
-	const tail = getOutputTail(events, outputLabel);
-	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 — preserve pre identity across polls when present.
-	let pre = existingPre;
-	if (!pre) {
-		clearNode(outputEl);
-		outputEl.appendChild(el("h3", null, "最新输出 (tail)"));
-		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`;
-	uiState.runOutputViewportState = updateDagOutputViewportState(
-		uiState.runOutputViewportState,
-		runRegionKey,
-		pre.scrollLeft,
-		pre.scrollTop,
-		followRunOutput,
-	);
-
-	let diagnosisHeader = diagnosisEl?.querySelector(".run-diagnosis-header");
-	if (diagnosisEl && !diagnosisHeader) {
-		diagnosisHeader = el("div", "run-diagnosis-header panel panel-meta");
-		diagnosisEl.insertBefore(diagnosisHeader, diagnosisEl.firstChild);
-	}
-	if (diagnosisHeader) {
-		clearNode(diagnosisHeader);
-		diagnosisHeader.appendChild(el("h3", "layer-diagnostic", "诊断证据"));
-		diagnosisHeader.appendChild(
-			metaGrid([
-				["失败分类", task.failureCategory ?? "—"],
-				["建议跟进", task.recommendedFollowUp ?? "—"],
-			]),
-		);
-	}
-
-	const artifacts = collectArtifacts(task, events);
-	clearNode(artifactsEl);
-	artifactsEl.appendChild(el("h3", null, "产物预览"));
-	renderInlineArtifactList(artifactsEl, artifacts);
-}
-
-export async function renderRun(workerRunId, initial = true) {
-	showView("run");
-	setBreadcrumb([
-		{ label: UI_TEXT.dashboard, href: "#/" },
-		{ label: workerRunId },
-	]);
-
-	if (initial) {
-		uiState.runEvents = [];
-		uiState.runEventOffset = 0;
-		uiState.currentRunId = workerRunId;
-		const runMeta = document.getElementById("run-meta");
-		if (runMeta) mountViewState(runMeta, "loading", "加载运行…");
-	} else if (uiState.currentRunId && uiState.currentRunId !== workerRunId) {
-		return false;
-	}
-
-	const [task, snapshot] = await Promise.all([
-		fetchJson(`/api/runs/${encodeURIComponent(workerRunId)}`),
-		fetchJson("/api/snapshot"),
-	]);
-	if (!task) {
-		if (initial) {
-			const runMeta = document.getElementById("run-meta");
-			if (runMeta) mountViewState(runMeta, "error", "找不到该运行。");
-		}
-		return false;
-	}
-
-	if (snapshot) {
-		uiState.lastSnapshot = snapshot;
-		updateHeaderRefresh(snapshot.generatedAt);
-	}
-
-	uiState.currentBatchRunId = task.batchRunId ?? uiState.currentBatchRunId;
-	await mergeRunEvents(workerRunId);
-	renderRunPanels(task, uiState.runEvents, snapshot ?? uiState.lastSnapshot);
-	return !TERMINAL_RUN_STATUSES.has((task.status ?? "").toLowerCase());
-}
-
-export function startRunPolling(workerRunId, initial = true) {
-	if (uiState.runPollTimer) clearTimeout(uiState.runPollTimer);
-	const generation = ++uiState.pollingGeneration;
-	const poll = async (isInitial) => {
-		const active = await renderRun(workerRunId, isInitial);
-		if (generation !== uiState.pollingGeneration || !active) return;
-		const delay = detailPollDelay("running", isPageVisible());
-		uiState.runPollTimer = setTimeout(() => {
-			uiState.runPollTimer = null;
-			void poll(false);
-		}, delay);
-	};
-	void poll(initial);
-}
+/** 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,
+	computeFollowLatest,
+	updateDagOutputViewportState,
+	renderViewState,
+	mountViewState,
+} from "../state.js";
+import { uiState } 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 } from "../dag-helpers.js";
+import {
+	findBatchRunIdForTask,
+	buildStepStates,
+	stepMarker,
+	getCurrentCommand,
+	getOutputTail,
+	collectArtifacts,
+} from "../run-processing.js";
+
+export async function mergeRunEvents(workerRunId) {
+	const page = await fetchJson(
+		`/api/runs/${encodeURIComponent(workerRunId)}/events?after=${uiState.runEventOffset}`,
+	);
+	if (!page?.events) return;
+	uiState.runEvents = uiState.runEvents.concat(page.events);
+	uiState.runEventOffset += page.events.length;
+}
+
+export function renderInlineArtifactList(container, artifacts) {
+	if (!artifacts || artifacts.size === 0) {
+		container.appendChild(el("p", "empty", UI_TEXT.noArtifacts));
+		return;
+	}
+	const list = el("ul", "artifact-list artifact-preview-list");
+	for (const [label, artifactPath] of artifacts) {
+		const li = document.createElement("li");
+		li.className = "artifact-preview-item";
+		const head = el("div", "artifact-preview-head");
+		const title = el(
+			"span",
+			"artifact-preview-label",
+			`${label}: ${artifactPath}`,
+		);
+		const open = document.createElement("a");
+		open.href = artifactUrl(artifactPath);
+		open.textContent = "打开";
+		open.target = "_blank";
+		open.rel = "noopener";
+		open.className = "artifact-link";
+		open.addEventListener("click", (e) => e.stopPropagation());
+		head.appendChild(title);
+		head.appendChild(document.createTextNode(" "));
+		head.appendChild(open);
+		const pre = el("pre", "output-block artifact-preview-body", "加载中…");
+		li.appendChild(head);
+		li.appendChild(pre);
+		list.appendChild(li);
+		void (async () => {
+			try {
+				const res = await fetch(artifactUrl(artifactPath));
+				const text = await res.text();
+				if (!res.ok) {
+					let message = text;
+					try {
+						const parsed = JSON.parse(text);
+						if (parsed && typeof parsed.message === "string") {
+							message = parsed.message;
+						} else if (parsed && typeof parsed.error === "string") {
+							message = parsed.error;
+						}
+					} catch {
+						/* keep raw */
+					}
+					pre.textContent = `无法读取 (${res.status}): ${message || "未知错误"}`;
+					pre.classList.add("artifact-preview-error");
+					return;
+				}
+				const preview = parseArtifactPreviewResponse(text);
+				pre.textContent = preview.content || "（空）";
+				if (preview.truncated) {
+					pre.appendChild(document.createTextNode("\n\n[预览已截断]"));
+				}
+			} catch (err) {
+				pre.textContent = `无法读取: ${err?.message ?? String(err)}`;
+				pre.classList.add("artifact-preview-error");
+			}
+		})();
+	}
+	container.appendChild(list);
+}
+
+export function renderRunDagProgress(task, snapshot) {
+	const panel = document.getElementById("run-dag-progress");
+	clearNode(panel);
+	const dag = findDagForRun(snapshot, task.workerRunId, task);
+	if (!dag) return;
+
+	const progress = dagProgress(dag);
+	panel.appendChild(el("h3", null, "DAG 节点进度"));
+	panel.appendChild(
+		metaGrid([
+			["DAG", dag.title || dag.dagRunId],
+			["当前状态", dagStatusBadge(dag.effectiveStatus ?? dag.status)],
+			["进度", `${progress.finished}/${progress.total} 个节点`],
+			[
+				"详情",
+				(() => {
+					const a = el("a", "link", "查看 DAG 详情 →");
+					a.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+					a.addEventListener("click", (e) => {
+						e.preventDefault();
+						navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+					});
+					return a;
+				})(),
+			],
+		]),
+	);
+}
+
+export function renderRunPanels(task, events, snapshot) {
+	const metaEl = document.getElementById("run-meta");
+	const stepsEl = document.getElementById("run-steps");
+	const commandEl = document.getElementById("run-command");
+	const outputEl = document.getElementById("run-output");
+	const artifactsEl = document.getElementById("run-artifacts");
+	const diagnosisEl = document.getElementById("run-diagnosis");
+
+	const nowMs = Date.now();
+	const livenessNode = livenessBadge(task.liveness);
+	const statusCell = livenessNode
+		? (() => {
+				const wrap = document.createDocumentFragment();
+				wrap.appendChild(badge(task.status));
+				wrap.appendChild(document.createTextNode(" "));
+				wrap.appendChild(livenessNode);
+				return wrap;
+			})()
+		: badge(task.status);
+
+	const dag = findDagForRun(snapshot, task.workerRunId, task);
+	const batchRunId =
+		task.batchRunId ?? findBatchRunIdForTask(snapshot, task) ?? null;
+	const runDuration = displayDurationMs(task);
+
+	mountRelationBar(
+		"run-relations",
+		{
+			featureId: task.featureId,
+			taskId: task.taskId,
+			batchRunId: batchRunId ?? undefined,
+			workerRunId: task.workerRunId,
+			dagRunId: dag?.dagRunId ?? task.dagRunId,
+		},
+		snapshot,
+	);
+
+	clearNode(metaEl);
+	metaEl.appendChild(el("h3", "layer-primary", "主事实"));
+	metaEl.appendChild(
+		metaGrid([
+			["Worker 运行 ID", task.workerRunId ?? "—"],
+			["Task", objectRouteLink("task", task.taskId, snapshot, task.featureId)],
+			[
+				"Feature",
+				task.featureId
+					? objectRouteLink("feature", task.featureId, snapshot)
+					: el("span", "muted", "—"),
+			],
+			["状态", statusCell],
+			[
+				"Batch",
+				batchRunId
+					? objectRouteLink("batch", batchRunId, snapshot)
+					: el("span", "muted", "缺失"),
+			],
+			[
+				"DAG",
+				dag
+					? objectRouteLink("dag", dag.dagRunId, snapshot)
+					: task.dagRunId
+						? el("span", "muted", task.dagRunId)
+						: el("span", "muted", "缺失"),
+			],
+			["开始时间", formatTs(task.startedAt)],
+			["结束时间", formatTs(task.finishedAt)],
+			["派生耗时", formatMs(runDuration)],
+			["已用时", formatDuration(task.elapsedMs)],
+			["上次心跳", formatAgo(task.lastHeartbeatAt, nowMs)],
+			["上次输出", formatAgo(task.lastOutputAt, nowMs)],
+			[
+				"超时截止",
+				task.timeoutAt
+					? formatAgo(task.timeoutAt, nowMs)
+					: task.pid !== undefined
+						? `pid ${task.pid}`
+						: "—",
+			],
+		]),
+	);
+
+	renderRunDagProgress(task, snapshot);
+
+	const steps = buildStepStates(events);
+	clearNode(stepsEl);
+	const stepsHeading = el("h3", null, "执行过程 · 步骤");
+	stepsEl.appendChild(stepsHeading);
+	if (steps.every((s) => s.status === "pending")) {
+		stepsEl.appendChild(el("p", "empty", "暂无步骤事件"));
+	}
+	const ul = el("ul", "step-timeline");
+	for (const step of steps) {
+		const li = document.createElement("li");
+		const marker = el(
+			"span",
+			`step-marker ${step.status}`,
+			stepMarker(step.status),
+		);
+		const name = el("span", "step-name", step.display);
+		const dur = el(
+			"span",
+			"step-duration",
+			step.durationMs !== undefined ? formatMs(step.durationMs) : "",
+		);
+		li.appendChild(marker);
+		if (step.label === "run-dag" && dag?.dagRunId) {
+			const link = document.createElement("a");
+			link.href = `#/dag/${encodeURIComponent(dag.dagRunId)}`;
+			link.className = "step-link";
+			link.textContent = "DAG →";
+			link.addEventListener("click", (e) => {
+				e.preventDefault();
+				navigate(`/dag/${encodeURIComponent(dag.dagRunId)}`);
+			});
+			li.appendChild(name);
+			li.appendChild(link);
+		} else {
+			li.appendChild(name);
+		}
+		li.appendChild(dur);
+		ul.appendChild(li);
+	}
+	stepsEl.appendChild(ul);
+
+	const cmd = getCurrentCommand(events);
+	clearNode(commandEl);
+	commandEl.appendChild(el("h3", null, "当前命令"));
+	if (!cmd) {
+		commandEl.appendChild(el("p", "empty", UI_TEXT.noActiveCommand));
+	} else {
+		commandEl.appendChild(
+			metaGrid([
+				["标签", cmd.label ?? "—"],
+				["命令", (cmd.command ?? []).join(" ") || "—"],
+				["PID", cmd.pid !== undefined ? String(cmd.pid) : "—"],
+				[
+					"超时上限",
+					cmd.timeoutMs !== undefined ? formatMs(cmd.timeoutMs) : "—",
+				],
+				[
+					"已用时间",
+					cmd.elapsedMs !== undefined ? formatMs(cmd.elapsedMs) : "—",
+				],
+			]),
+		);
+	}
+
+	const outputLabel = cmd?.label;
+	const tail = getOutputTail(events, outputLabel);
+	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 — preserve pre identity across polls when present.
+	let pre = existingPre;
+	if (!pre) {
+		clearNode(outputEl);
+		outputEl.appendChild(el("h3", null, "最新输出 (tail)"));
+		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`;
+	uiState.runOutputViewportState = updateDagOutputViewportState(
+		uiState.runOutputViewportState,
+		runRegionKey,
+		pre.scrollLeft,
+		pre.scrollTop,
+		followRunOutput,
+	);
+
+	let diagnosisHeader = diagnosisEl?.querySelector(".run-diagnosis-header");
+	if (diagnosisEl && !diagnosisHeader) {
+		diagnosisHeader = el("div", "run-diagnosis-header panel panel-meta");
+		diagnosisEl.insertBefore(diagnosisHeader, diagnosisEl.firstChild);
+	}
+	if (diagnosisHeader) {
+		clearNode(diagnosisHeader);
+		diagnosisHeader.appendChild(el("h3", "layer-diagnostic", "诊断证据"));
+		diagnosisHeader.appendChild(
+			metaGrid([
+				["失败分类", task.failureCategory ?? "—"],
+				["建议跟进", task.recommendedFollowUp ?? "—"],
+			]),
+		);
+	}
+
+	const artifacts = collectArtifacts(task, events);
+	clearNode(artifactsEl);
+	artifactsEl.appendChild(el("h3", null, "产物预览"));
+	renderInlineArtifactList(artifactsEl, artifacts);
+}
+
+export async function renderRun(workerRunId, initial = true) {
+	showView("run");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: workerRunId },
+	]);
+
+	if (initial) {
+		uiState.runEvents = [];
+		uiState.runEventOffset = 0;
+		uiState.currentRunId = workerRunId;
+		const runMeta = document.getElementById("run-meta");
+		if (runMeta) mountViewState(runMeta, "loading", "加载运行…");
+	} else if (uiState.currentRunId && uiState.currentRunId !== workerRunId) {
+		return false;
+	}
+
+	const [task, snapshot] = await Promise.all([
+		fetchJson(`/api/runs/${encodeURIComponent(workerRunId)}`),
+		fetchJson("/api/snapshot"),
+	]);
+	if (!task) {
+		if (initial) {
+			const runMeta = document.getElementById("run-meta");
+			if (runMeta) mountViewState(runMeta, "error", "找不到该运行。");
+		}
+		return false;
+	}
+
+	if (snapshot) {
+		uiState.lastSnapshot = snapshot;
+		updateHeaderRefresh(snapshot.generatedAt);
+	}
+
+	uiState.currentBatchRunId = task.batchRunId ?? uiState.currentBatchRunId;
+	await mergeRunEvents(workerRunId);
+	renderRunPanels(task, uiState.runEvents, snapshot ?? uiState.lastSnapshot);
+	return !TERMINAL_RUN_STATUSES.has((task.status ?? "").toLowerCase());
+}
+
+export function startRunPolling(workerRunId, initial = true) {
+	if (uiState.runPollTimer) clearTimeout(uiState.runPollTimer);
+	const generation = ++uiState.pollingGeneration;
+	const poll = async (isInitial) => {
+		const active = await renderRun(workerRunId, isInitial);
+		if (generation !== uiState.pollingGeneration || !active) return;
+		const delay = detailPollDelay("running", isPageVisible());
+		uiState.runPollTimer = setTimeout(() => {
+			uiState.runPollTimer = null;
+			void poll(false);
+		}, delay);
+	};
+	void poll(initial);
+}