@tea-agent/loop-agent 0.29.3 → 0.31.0

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

@@ -0,0 +1,313 @@
+/**
+ * DAG 执行轨迹 storyboard（Observe UI R5 / P1）。
+ *
+ * 将 detail 响应内嵌的有界 executionTrajectory 渲染为自上而下的 lane：
+ * 「初始执行」「修复轮次 N-1」「最终收敛」（仅内容 lane）。raw pass=1（scope
+ * base 或 convergence-pass）均显示「初始执行」，raw pass>=2 显示「修复轮次
+ * N-1」；raw pass 编号仅保留在 occurrence 卡 hover/title 诊断（AC-001/AC-002）。
+ * lane 内按真实
+ * sequence 左→右；occurrence 卡含节点名/状态/耗时/语义 verdict；多 attempt
+ * 显示中文紧凑尝试条；lane 间短箭头加中文原因；不画跨 lane 回环（P2 路由
+ * 算法不在 P1 范围）。布局异常降级为纵向事件列表，不空白页。
+ */
+import { el } from "../dom.js";
+import { statusLabel, formatMs } from "../format.js";
+import {
+	attemptFailureLabel,
+	semanticVerdictLabel,
+	transitionReasonLabel,
+} from "../dag-history-labels.js";
+import { setDagGraphViewMode } from "../state.js";
+import { selectDagExecution } from "./dag-inspector.js";
+
+export const TRAJECTORY_EMPTY_TEXT = "本次运行没有可展开的执行轨迹";
+export const TRAJECTORY_UNAVAILABLE_TEXT = "执行历史暂不可用";
+export const TRAJECTORY_PARTIAL_TEXT = "历史证据不完整";
+
+const SUCCESS_STATUSES = new Set([
+	"finished",
+	"completed",
+	"succeeded",
+	"done",
+	"success",
+]);
+const FAILURE_STATUSES = new Set([
+	"error",
+	"failed",
+	"partial_failed",
+	"partial-failed",
+	"interrupted",
+	"failure",
+	"superseded",
+]);
+const RUNNING_STATUSES = new Set(["running", "started", "paused", "queued"]);
+
+function occurrenceStatusBadge(status) {
+	const normalized = String(status ?? "").toLowerCase();
+	if (SUCCESS_STATUSES.has(normalized)) {
+		return { cls: "succeeded", label: "成功" };
+	}
+	if (FAILURE_STATUSES.has(normalized)) {
+		return { cls: "failed", label: "失败" };
+	}
+	if (RUNNING_STATUSES.has(normalized)) {
+		return { cls: "pending", label: "运行中" };
+	}
+	return { cls: "pending", label: statusLabel(status) ?? status ?? "未知" };
+}
+
+/** Lane grouping key from an occurrence (pre-sorted by the projection). */
+function laneKeyOf(occurrence) {
+	if (occurrence.scope === "final") return "final";
+	if (occurrence.scope === "base") return "base";
+	return `pass-${occurrence.pass ?? 0}`;
+}
+
+function laneTitle(laneKey, occurrence) {
+	if (laneKey === "base") return "初始执行";
+	if (laneKey === "final") return "最终收敛";
+	// raw pass=1 的 convergence-pass lane 也显示「初始执行」；raw pass>=2
+	// 映射为人类修复轮次 N-1（AC-001/AC-002），主文案不出现 raw 轮次直译。
+	const pass = occurrence.pass ?? 0;
+	if (pass <= 1) return "初始执行";
+	return `修复轮次 ${pass - 1}`;
+}
+
+/** 中文紧凑尝试条：首次尝试 / 第 N 次尝试（AC-002，主 UI 不出现裸 A1/A2）。 */
+function attemptStripLabel(occurrence) {
+	const attempts = occurrence.attempts;
+	if (!Array.isArray(attempts) || attempts.length <= 1) return null;
+	return attempts
+		.map((attempt) => {
+			const name =
+				attempt.attempt === 1 ? "首次尝试" : `第 ${attempt.attempt} 次尝试`;
+			// 失败 attempt 显示表一中文原因（AC-001），未知/缺失分类
+			// fail-closed 为「其他失败原因」；成功 attempt 保持「成功」。
+			const outcome =
+				attempt.status === "success"
+					? "成功"
+					: attemptFailureLabel(attempt.failureCategory);
+			return `${name} ${outcome}`;
+		})
+		.join(" → ");
+}
+
+function buildOccurrenceCard(dagRunId, occurrence) {
+	const badge = occurrenceStatusBadge(occurrence.status);
+	const recovered =
+		occurrence.recovered === true ||
+		occurrence.supersededBy?.length > 0 ||
+		false;
+	const card = document.createElement("button");
+	card.type = "button";
+	const extraClasses = [
+		recovered ? "is-recovered" : "",
+		occurrence.availability === "partial" ? "is-partial" : "",
+	]
+		.filter(Boolean)
+		.join(" ");
+	card.className = extraClasses
+		? `dag-trajectory-occurrence ${extraClasses}`
+		: "dag-trajectory-occurrence";
+	// 原始 pass/attempt 编号仅出现在 hover/title 诊断中，不作主标题（AC-003）。
+	const diagnostic = [
+		occurrence.executionId,
+		occurrence.status,
+		...(occurrence.pass ? [`pass ${occurrence.pass}`] : []),
+		...(occurrence.failureCategory
+			? [`failureCategory ${occurrence.failureCategory}`]
+			: []),
+	].join("\n");
+	card.setAttribute("title", diagnostic);
+	// 语义 verdict 主文案与 aria-label 均显示表二中文（AC-002）。
+	const verdictLabel = semanticVerdictLabel(occurrence.semanticVerdict);
+	card.setAttribute(
+		"aria-label",
+		`${occurrence.nodeId}，${badge.label}${occurrence.semanticVerdict ? `，语义 ${verdictLabel}` : ""}${recovered ? "，历史失败 · 已恢复/已覆盖" : ""}`,
+	);
+
+	const nodeLine = el("span", "dag-trajectory-occurrence-node", occurrence.nodeId);
+	card.appendChild(nodeLine);
+	const statusBadge = el(
+		"span",
+		`badge badge-${badge.cls} dag-trajectory-occurrence-status`,
+		badge.label,
+	);
+	card.appendChild(statusBadge);
+	if (occurrence.durationMs !== undefined) {
+		card.appendChild(
+			el(
+				"span",
+				"dag-trajectory-occurrence-meta",
+				formatMs(occurrence.durationMs),
+			),
+		);
+	}
+	if (occurrence.semanticVerdict) {
+		card.appendChild(
+			el("span", "dag-trajectory-occurrence-verdict", verdictLabel),
+		);
+	}
+	const strip = attemptStripLabel(occurrence);
+	if (strip) {
+		card.appendChild(el("span", "dag-trajectory-attempt-strip", strip));
+	}
+	if (recovered) {
+		const label =
+			occurrence.supersededBy?.length > 0
+				? "历史失败 · 已覆盖"
+				: "历史失败 · 已恢复";
+		card.appendChild(el("span", "dag-trajectory-recovered", label));
+	}
+	if (occurrence.availability === "partial") {
+		card.appendChild(
+			el("span", "dag-trajectory-partial", TRAJECTORY_PARTIAL_TEXT),
+		);
+	}
+	card.addEventListener("click", () => {
+		// @pass-<n> 映射为 Inspector 既有 pass-<n> key；@base/@final 默认最新。
+		selectDagExecution(
+			dagRunId,
+			occurrence.nodeId,
+			occurrence.pass ? `pass-${occurrence.pass}` : null,
+		);
+	});
+	return card;
+}
+
+function buildEmptyState(dagRunId, rerender) {
+	const root = el("div", "dag-trajectory-empty");
+	root.appendChild(el("p", "dag-trajectory-empty-text", TRAJECTORY_EMPTY_TEXT));
+	const back = document.createElement("button");
+	back.type = "button";
+	back.className = "dag-trajectory-back";
+	back.textContent = "返回逻辑拓扑";
+	back.addEventListener("click", () => {
+		setDagGraphViewMode(dagRunId, "topology");
+		rerender();
+	});
+	root.appendChild(back);
+	return root;
+}
+
+/**
+ * 渲染执行轨迹视图到图区域 viewport。`rerender` 由 dag-graph 注入，用于
+ * 空态「返回逻辑拓扑」就地切回拓扑（避免模块环）。
+ */
+export function renderTrajectoryStoryboard(dag, dagRunId, viewport, rerender) {
+	const trajectory = dag.executionTrajectory;
+	const fallback = (occurrences) => {
+		const list = el("ul", "dag-trajectory-fallback");
+		const items = Array.isArray(occurrences)
+			? occurrences
+			: trajectory?.occurrences ?? [];
+		if (items.length === 0) {
+			list.appendChild(
+				el("li", "dag-trajectory-fallback-item", TRAJECTORY_UNAVAILABLE_TEXT),
+			);
+		} else {
+			let rendered = 0;
+			for (const occurrence of items) {
+				if (!occurrence || typeof occurrence !== "object") continue;
+				// 纵向降级列表同样经表三/表二映射拼接，不出现裸英文 token（AC-002）。
+				const reason =
+					transitionReasonLabel(occurrence.nextReason) ||
+					semanticVerdictLabel(occurrence.semanticVerdict) ||
+					"";
+				list.appendChild(
+					el(
+						"li",
+						"dag-trajectory-fallback-item",
+						`${occurrence.nodeId} · ${statusLabel(occurrence.status)}${reason ? ` · ${reason}` : ""}`,
+					),
+				);
+				rendered += 1;
+			}
+			if (rendered === 0) {
+				list.appendChild(
+					el(
+						"li",
+						"dag-trajectory-fallback-item",
+						TRAJECTORY_UNAVAILABLE_TEXT,
+					),
+				);
+			}
+		}
+		viewport.appendChild(list);
+	};
+	try {
+		if (!trajectory || !Array.isArray(trajectory.occurrences)) {
+			// 无 executionTrajectory 或空轨迹：空态 + 返回逻辑拓扑入口。
+			viewport.appendChild(buildEmptyState(dagRunId, rerender));
+			return;
+		}
+		const root = el("div", "dag-trajectory");
+		if (trajectory.projectionError === true) {
+			root.appendChild(
+				el("div", "dag-trajectory-banner is-error", TRAJECTORY_UNAVAILABLE_TEXT),
+			);
+		}
+		if (Array.isArray(trajectory.warnings) && trajectory.warnings.length > 0) {
+			root.appendChild(
+				el(
+					"div",
+					"dag-trajectory-banner",
+					`${TRAJECTORY_PARTIAL_TEXT}：${trajectory.warnings.join("；")}`,
+				),
+			);
+		}
+		if (trajectory.occurrences.length === 0) {
+			root.appendChild(buildEmptyState(dagRunId, rerender));
+			viewport.appendChild(root);
+			return;
+		}
+		// 按投影排序连续分组为 lane（仅内容 lane），lane 间插入带中文原因的短箭头。
+		const lanes = [];
+		let currentLaneKey = null;
+		for (const occurrence of trajectory.occurrences) {
+			const laneKey = laneKeyOf(occurrence);
+			if (laneKey !== currentLaneKey) {
+				currentLaneKey = laneKey;
+				lanes.push({
+					laneKey,
+					title: laneTitle(laneKey, occurrence),
+					occurrences: [],
+				});
+			}
+			lanes[lanes.length - 1].occurrences.push(occurrence);
+		}
+		for (const [index, lane] of lanes.entries()) {
+			const laneRoot = el("div", "dag-trajectory-lane");
+			const head = el("div", "dag-trajectory-lane-head");
+			head.appendChild(el("span", "dag-trajectory-lane-title", lane.title));
+			head.appendChild(
+				el("span", "dag-trajectory-lane-meta", `${lane.occurrences.length} 次执行`),
+			);
+			laneRoot.appendChild(head);
+			const laneCards = el("div", "dag-trajectory-lane-cards");
+			for (const occurrence of lane.occurrences) {
+				laneCards.appendChild(buildOccurrenceCard(dagRunId, occurrence));
+			}
+			laneRoot.appendChild(laneCards);
+			root.appendChild(laneRoot);
+			if (index < lanes.length - 1) {
+				const lastOccurrence = lane.occurrences[lane.occurrences.length - 1];
+				const reason = transitionReasonLabel(lastOccurrence?.nextReason);
+				if (reason) {
+					const transition = el("div", "dag-trajectory-transition");
+					transition.appendChild(
+						el("span", "dag-trajectory-transition-arrow", "↓"),
+					);
+					transition.appendChild(
+						el("span", "dag-trajectory-transition-reason", reason),
+					);
+					root.appendChild(transition);
+				}
+			}
+		}
+		viewport.appendChild(root);
+	} catch {
+		// 布局/渲染异常降级：纵向事件列表，不空白页（AC-006）。
+		fallback(null);
+	}
+}

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

@@ -62,7 +62,7 @@ import {
 	mountViewState,
 	makeSessionEventIdentity,
 } from "../state.js";
-import { uiState, dagGraphViewportStates } from "../state.js";
+import { uiState, dagGraphViewportStates, dagGraphViewModes } from "../state.js";
 import { sortPoolTasks } from "../format-pool.js";
 import {
 	dagMetaVisibility,
@@ -108,9 +108,12 @@ export async function renderDagDetail(dagRunId, initial = true) {
 		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");
@@ -167,6 +170,7 @@ export async function renderDagDetail(dagRunId, initial = true) {
 	) {
 		uiState.selectedDagNodeId = null;
 		uiState.dagInspectorOpen = false;
+		uiState.dagInspectorAttempt = null;
 		if (initial) {
 			uiState.sessionEventOffset = 0;
 			uiState.sessionEvents = [];
@@ -325,17 +329,30 @@ export async function renderDagDetail(dagRunId, initial = true) {
 					node.model ?? "—",
 					node.status ? badge(node.status) : "—",
 					formatMs(node.durationMs),
+					(typeof node.executionSummary?.historyLabel === "string" &&
+						node.executionSummary.historyLabel.trim()) ||
+						"—",
 					node.errorPreview ?? node.label ?? "—",
 				],
 			};
 		});
 		const nodeTable = buildTable(
-			["序号", "节点 ID", "依赖层", "执行方式", "模型", "状态", "耗时", "备注"],
+			[
+				"序号",
+				"节点 ID",
+				"依赖层",
+				"执行方式",
+				"模型",
+				"状态",
+				"耗时",
+				"执行历史",
+				"备注",
+			],
 			rows,
 		);
 		nodeTable.classList.add("dag-node-table");
 		for (const row of nodeTable.tBodies[0]?.rows ?? []) {
-			for (const columnIndex of [1, 4, 7]) {
+			for (const columnIndex of [1, 4, 8]) {
 				const cell = row.cells[columnIndex];
 				if (cell?.textContent) cell.title = cell.textContent;
 			}