@tea-agent/loop-agent 0.11.0 → 0.12.0

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

@@ -0,0 +1,226 @@
+/** 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,
+	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 { artifactLink } from "../kpi.js";
+import { renderInlineArtifactList } from "./run.js";
+import { mountBoundedEventTimeline } from "./timeline.js";
+
+export async function renderBatch(batchRunId) {
+	showView("batch");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: batchRunId },
+	]);
+
+	const metaEl = document.getElementById("batch-meta");
+	const tasksEl = document.getElementById("batch-tasks");
+	const evidenceEl = document.getElementById("batch-evidence");
+	const timelineEl = document.getElementById("batch-timeline");
+	if (metaEl) mountViewState(metaEl, "loading", "加载批次…");
+
+	const [batch, snapshot] = await Promise.all([
+		fetchJson(`/api/batches/${encodeURIComponent(batchRunId)}`),
+		fetchJson("/api/snapshot"),
+	]);
+	if (snapshot) {
+		uiState.lastSnapshot = snapshot;
+		updateHeaderRefresh(snapshot.generatedAt);
+	}
+	if (!batch) {
+		clearNode(metaEl);
+		mountViewState(metaEl, "error", "找不到该批次。");
+		if (tasksEl) clearNode(tasksEl);
+		if (evidenceEl) clearNode(evidenceEl);
+		if (timelineEl) clearNode(timelineEl);
+		mountRelationBar("batch-relations", {}, snapshot);
+		return;
+	}
+
+	mountRelationBar(
+		"batch-relations",
+		{
+			featureId: batch.featureId,
+			batchRunId: batch.batchRunId,
+			taskId: batch.tasks?.[0]?.taskId,
+			workerRunId: batch.tasks?.[0]?.workerRunId,
+			dagRunId: batch.tasks?.[0]?.dagRunId,
+		},
+		snapshot,
+	);
+
+	const totalDerived = derivedDurationMs(batch.startedAt, batch.finishedAt);
+	clearNode(metaEl);
+	metaEl.appendChild(
+		metaGrid([
+			["批次 ID", batch.batchRunId],
+			[
+				"功能 ID",
+				batch.featureId
+					? objectRouteLink("feature", batch.featureId, snapshot)
+					: el("span", "muted", "—"),
+			],
+			["状态", badge(batch.status)],
+			["开始时间", formatTs(batch.startedAt)],
+			["结束时间", formatTs(batch.finishedAt)],
+			["总耗时", formatDuration(totalDerived)],
+			["摘要", summaryText(batch.summary)],
+		]),
+	);
+
+	clearNode(tasksEl);
+	tasksEl.appendChild(el("h3", null, "Task"));
+
+	const tasks = batch.tasks ?? [];
+	if (tasks.length === 0) {
+		mountViewState(tasksEl, "empty", "该批次暂无 Task");
+	} else {
+		const snap = snapshot ?? uiState.lastSnapshot;
+		const rows = tasks.map((task) => {
+			const links = el("div", "artifact-links batch-task-links");
+			links.appendChild(objectRouteLink("task", task.taskId, snap));
+			links.appendChild(document.createTextNode(" · "));
+			links.appendChild(objectRouteLink("run", task.workerRunId, snap));
+			if (task.dagRunId) {
+				links.appendChild(document.createTextNode(" · "));
+				links.appendChild(objectRouteLink("dag", task.dagRunId, snap));
+			}
+			const evidence = el("div", "artifact-links batch-task-evidence");
+			const refs = task.artifactRefs ?? {};
+			evidence.appendChild(artifactLink("报告", refs.reportMarkdown));
+			evidence.appendChild(document.createTextNode(" "));
+			evidence.appendChild(artifactLink("诊断", refs.doctorMarkdown));
+			evidence.appendChild(document.createTextNode(" "));
+			evidence.appendChild(artifactLink("收尾方案", refs.closeoutDraft));
+			evidence.appendChild(document.createTextNode(" "));
+			evidence.appendChild(artifactLink("run 记录", refs.runRecordPath));
+			const taskDur = displayDurationMs(task);
+			return {
+				className: task.status === "running" ? "active-task" : "",
+				onClick: task.workerRunId
+					? () => navigate(`/run/${encodeURIComponent(task.workerRunId)}`)
+					: undefined,
+				cells: [
+					task.taskId,
+					task.featureId ?? "—",
+					task.harnessTaskId ?? "—",
+					task.workerRunId ?? "—",
+					badge(task.status),
+					formatTs(task.startedAt),
+					formatTs(task.finishedAt),
+					formatMs(taskDur),
+					task.failureCategory ?? "—",
+					task.recommendedFollowUp ?? "—",
+					links,
+					evidence,
+				],
+			};
+		});
+		tasksEl.appendChild(
+			buildTable(
+				[
+					"Task ID",
+					"Feature",
+					"Harness Task",
+					"Worker 运行 ID",
+					"状态",
+					"开始",
+					"结束",
+					"耗时",
+					"失败分类",
+					"建议跟进",
+					"关联",
+					"证据",
+				],
+				rows,
+			),
+		);
+	}
+
+	if (evidenceEl) {
+		clearNode(evidenceEl);
+		evidenceEl.appendChild(el("h3", null, "批次证据预览"));
+		const batchArts = new Map();
+		if (batch.batchRunPath) batchArts.set("batch-run", batch.batchRunPath);
+		for (const task of tasks) {
+			const refs = task.artifactRefs ?? {};
+			for (const key of ARTIFACT_KEYS) {
+				const p = refs[key];
+				if (p) batchArts.set(`${task.taskId}:${key}`, p);
+			}
+		}
+		renderInlineArtifactList(evidenceEl, batchArts);
+	}
+
+	if (timelineEl) {
+		await mountBoundedEventTimeline(
+			timelineEl,
+			`/api/batches/${encodeURIComponent(batchRunId)}/events`,
+			"批次事件时间线",
+		);
+	}
+}
+

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

@@ -0,0 +1,172 @@
+/** DAG dependency graph rendering (Observe UI R5). */
+import { layoutDag } from "../dag-layout.js";
+import { el } from "../dom.js";
+import {
+	statusLabel,
+	statusSymbol,
+	formatMs,
+	truncateText,
+} from "../format.js";
+import {
+	uiState,
+	dagGraphViewportStates,
+	updateDagGraphViewportState,
+} from "../state.js";
+import { selectDagNode } from "./dag-inspector.js";
+
+export function svgEl(tag, attrs = {}) {
+	const node = document.createElementNS("http://www.w3.org/2000/svg", tag);
+	for (const [key, value] of Object.entries(attrs))
+		node.setAttribute(key, String(value));
+	return node;
+}
+
+export function renderDagGraph(dag, dagRunId, existingWrap = null) {
+	const nodes = dag.nodes ?? [];
+	const edges = dag.edges ?? [];
+	const layout = layoutDag(nodes, edges, dag.ranks ?? []);
+	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
+	if (existingWrap) {
+		// reuse-dag-graph-wrap: replace children while keeping wrap identity.
+		while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+	}
+	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");
+	viewport.dataset.dagRunId = dagRunId;
+	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",
+	});
+	marker.appendChild(svgEl("path", { d: "M 0 0 L 10 5 L 0 10 z" }));
+	defs.appendChild(marker);
+	svg.appendChild(defs);
+	const related = new Set([uiState.selectedDagNodeId]);
+	for (const edge of layout.edges)
+		if (
+			edge.from === uiState.selectedDagNodeId ||
+			edge.to === uiState.selectedDagNodeId
+		) {
+			related.add(edge.from);
+			related.add(edge.to);
+		}
+	for (const edge of layout.edges) {
+		const path = svgEl("path", {
+			d: edge.path,
+			class: `dag-edge${uiState.selectedDagNodeId && (!related.has(edge.from) || !related.has(edge.to)) ? " dag-dimmed" : ""}`,
+			"marker-end": "url(#dag-arrow)",
+		});
+		path.appendChild(svgEl("title"));
+		path.firstChild.textContent = `${edge.from} → ${edge.to}`;
+		svg.appendChild(path);
+	}
+	const byId = Object.fromEntries(nodes.map((node) => [node.nodeId, node]));
+	for (const position of layout.nodes) {
+		const node = byId[position.nodeId] ?? { nodeId: position.nodeId };
+		const status = (node.status ?? "unknown").toLowerCase();
+		const group = svgEl("g", {
+			transform: `translate(${position.x} ${position.y})`,
+			class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
+			tabindex: 0,
+			role: "button",
+			"aria-label": `${node.nodeId}，状态 ${status}`,
+		});
+		group.appendChild(
+			svgEl("rect", { width: position.width, height: position.height, rx: 10 }),
+		);
+		const title = svgEl("title");
+		title.textContent = `${node.nodeId}\n${node.executor ?? "未知执行器"}\n${status}`;
+		group.appendChild(title);
+		const label = svgEl("text", { x: 14, y: 26, class: "dag-node-label" });
+		label.textContent = truncateText(node.label ?? node.nodeId, 26);
+		group.appendChild(label);
+		const executor = svgEl("text", { x: 14, y: 50, class: "dag-node-meta" });
+		executor.textContent = `◈ ${node.executor ?? "unknown"}`;
+		group.appendChild(executor);
+		const state = svgEl("text", { x: 14, y: 74, class: "dag-node-status" });
+		state.textContent = `${statusSymbol(status)} ${statusLabel(node.status)} · ${formatMs(node.durationMs)}`;
+		group.appendChild(state);
+		const activate = () => selectDagNode(dagRunId, node.nodeId);
+		group.addEventListener("click", activate);
+		group.addEventListener("keydown", (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				activate();
+			}
+		});
+		svg.appendChild(group);
+	}
+	viewport.appendChild(svg);
+	wrap.appendChild(viewport);
+	const graphViewportState =
+		dagGraphViewportStates.get(dagRunId) ??
+		(uiState.dagGraphViewportState?.dagRunId === dagRunId
+			? uiState.dagGraphViewportState
+			: null);
+	viewport.addEventListener(
+		"scroll",
+		() => {
+			uiState.dagGraphViewportState = updateDagGraphViewportState(
+				uiState.dagGraphViewportState,
+				dagRunId,
+				viewport.scrollLeft,
+				viewport.scrollTop,
+			);
+			dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		},
+		{ passive: true },
+	);
+	if (graphViewportState) {
+		const restoreViewport = () => {
+			viewport.scrollLeft = graphViewportState.scrollLeft;
+			viewport.scrollTop = graphViewportState.scrollTop;
+		};
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(restoreViewport);
+		} else {
+			restoreViewport();
+		}
+	}
+	reset.addEventListener("click", () => {
+		uiState.dagGraphViewportState = updateDagGraphViewportState(
+			uiState.dagGraphViewportState,
+			dagRunId,
+			0,
+			0,
+		);
+		dagGraphViewportStates.set(dagRunId, uiState.dagGraphViewportState);
+		viewport.scrollTo({ left: 0, top: 0, behavior: "smooth" });
+	});
+	return wrap;
+}