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

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

@@ -0,0 +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);
+}