@tea-agent/loop-agent 0.11.0 → 0.13.0-alpha.0

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

@@ -0,0 +1,492 @@
+/** 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 {
+	objectExistsInSnapshot,
+	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";
+
+export async function renderFeatureDetail(featureId) {
+	showView("feature");
+	setBreadcrumb([
+		{ label: UI_TEXT.dashboard, href: "#/" },
+		{ label: featureId || "Feature" },
+	]);
+
+	const titleEl = document.getElementById("feature-title");
+	const metaEl = document.getElementById("feature-meta");
+	const acEl = document.getElementById("feature-ac");
+	const blockingEl = document.getElementById("feature-blocking");
+	const actionsEl = document.getElementById("feature-actions");
+	const factsEl = document.getElementById("feature-facts");
+	const followEl = document.getElementById("feature-followups");
+	const evidenceEl = document.getElementById("feature-evidence");
+	const warningsEl = document.getElementById("feature-warnings");
+	const relationsEl = document.getElementById("feature-relations");
+	if (!metaEl) return false;
+	if (titleEl) titleEl.textContent = featureId || "Feature 决策详情";
+	mountViewState(metaEl, "loading", "加载 Feature…");
+
+	const snapshot = await fetchJson("/api/snapshot");
+
+	for (const node of [
+		metaEl,
+		acEl,
+		blockingEl,
+		actionsEl,
+		factsEl,
+		followEl,
+		evidenceEl,
+		warningsEl,
+		relationsEl,
+	]) {
+		if (node) clearNode(node);
+	}
+
+	const lookup = featureLookupState(snapshot, featureId);
+	if (lookup.kind === "unavailable") {
+		mountViewState(
+			metaEl,
+			"error",
+			"无法加载 snapshot，Feature 投影暂时不可用。请稍后刷新。",
+		);
+		return false;
+	}
+	uiState.lastSnapshot = snapshot;
+	updateHeaderRefresh(snapshot.generatedAt);
+
+	const feature = lookup.kind === "found" ? lookup.feature : undefined;
+	if (!feature) {
+		mountViewState(
+			metaEl,
+			"empty",
+			featureId
+				? `未找到 Feature：${featureId}（当前 snapshot.features 中无此 id）`
+				: "Feature id 缺失",
+		);
+		if (relationsEl) {
+			relationsEl.appendChild(
+				renderObjectRelationBar(buildObjectRelations({}, snapshot), snapshot),
+			);
+		}
+		return false;
+	}
+
+	// Relations: only proven snapshot objects (feature itself + linked tasks if present).
+	const linkedTask = (feature.tasks ?? [])
+		.map((t) => t.taskId)
+		.find((id) => objectExistsInSnapshot("task", id, snapshot));
+	const poolTask = linkedTask
+		? (snapshot?.tasks ?? []).find((t) => t.taskId === linkedTask)
+		: undefined;
+	const batchRunId =
+		poolTask?.batchRunId ??
+		(poolTask ? findBatchRunIdForTask(snapshot, poolTask) : null);
+	const dag =
+		poolTask != null
+			? findDagForRun(snapshot, poolTask.workerRunId, poolTask)
+			: undefined;
+	mountRelationBar(
+		"feature-relations",
+		{
+			featureId: feature.featureId,
+			taskId: linkedTask,
+			batchRunId: batchRunId ?? undefined,
+			workerRunId: poolTask?.workerRunId,
+			dagRunId: dag?.dagRunId ?? poolTask?.dagRunId,
+		},
+		snapshot,
+	);
+
+	try {
+		metaEl.appendChild(el("h3", "section-heading", "状态与摘要"));
+		metaEl.appendChild(
+			metaGrid([
+				["Feature ID", feature.featureId],
+				["状态", badge(feature.statusLabel ?? feature.status)],
+				[
+					"Tasks",
+					`${feature.summary?.tasksSucceeded ?? 0}/${feature.summary?.tasksTotal ?? 0} 成功 · ${feature.summary?.tasksFailed ?? 0} 失败 · ${feature.summary?.tasksBlocked ?? 0} 阻塞 · ${feature.summary?.tasksReady ?? 0} 就绪`,
+				],
+				[
+					"required AC",
+					`${feature.summary?.requiredAcCovered ?? 0}/${feature.summary?.requiredAcTotal ?? 0}`,
+				],
+			]),
+		);
+	} catch {
+		metaEl.appendChild(el("p", "empty", "状态摘要渲染失败。"));
+	}
+
+	if (acEl) {
+		try {
+			acEl.appendChild(el("h3", "section-heading", "验收覆盖"));
+			const acs = feature.acceptanceCoverage ?? [];
+			if (acs.length === 0) {
+				acEl.appendChild(el("p", "empty", "暂无 acceptanceCoverage。"));
+			} else {
+				acEl.appendChild(
+					buildTable(
+						["AC", "required", "状态", "blockedBy", "证据"],
+						acs.map((ac) => ({
+							cells: [
+								ac.acId,
+								ac.required ? "是" : "否",
+								ac.status ?? "—",
+								(ac.blockedBy ?? []).join(", ") || "—",
+								(ac.evidence ?? []).length
+									? String((ac.evidence ?? []).length)
+									: "缺失",
+							],
+						})),
+					),
+				);
+			}
+		} catch {
+			acEl.appendChild(el("p", "empty", "AC 覆盖渲染失败。"));
+		}
+	}
+
+	if (blockingEl) {
+		try {
+			blockingEl.appendChild(el("h3", "section-heading", "阻塞项"));
+			const items = feature.blockingItems ?? [];
+			if (items.length === 0) {
+				blockingEl.appendChild(el("p", "empty", "当前无阻塞项。"));
+			} else {
+				const ul = el("ul", "blocking-list");
+				for (const item of items) {
+					const li = document.createElement("li");
+					li.appendChild(
+						el("div", "blocking-message", item.message ?? item.type ?? "—"),
+					);
+					const meta = el("div", "blocking-meta");
+					if (item.taskId) {
+						meta.appendChild(document.createTextNode("Task "));
+						meta.appendChild(
+							objectRouteLink("task", item.taskId, snapshot, feature.featureId),
+						);
+					}
+					if (item.failureCategory) {
+						meta.appendChild(
+							document.createTextNode(` · ${item.failureCategory}`),
+						);
+					}
+					li.appendChild(meta);
+					const ev = item.evidence ?? [];
+					if (ev.length) {
+						const evWrap = el("div", "artifact-links");
+						for (const path of ev) {
+							evWrap.appendChild(
+								artifactLink(path.split("/").pop() || path, path),
+							);
+							evWrap.appendChild(document.createTextNode(" "));
+						}
+						li.appendChild(evWrap);
+					}
+					ul.appendChild(li);
+				}
+				blockingEl.appendChild(ul);
+			}
+			const risk = feature.riskSummary;
+			blockingEl.appendChild(el("h3", "section-heading", "风险摘要"));
+			if (!risk) {
+				blockingEl.appendChild(el("p", "empty", "风险摘要缺失。"));
+			} else {
+				blockingEl.appendChild(
+					el(
+						"p",
+						null,
+						`high ${risk.high ?? 0} · medium ${risk.medium ?? 0} · low ${risk.low ?? 0}`,
+					),
+				);
+			}
+		} catch {
+			blockingEl.appendChild(el("p", "empty", "阻塞/风险渲染失败。"));
+		}
+	}
+
+	if (actionsEl) {
+		try {
+			const planning = feature.planning;
+			if (planning) {
+				actionsEl.appendChild(el("h3", "section-heading", "Ready 选择计划（只读）"));
+				const selected = planning.selected ?? [];
+				const deferred = planning.deferred ?? [];
+				const blocked = planning.blocked ?? [];
+				// Render planner facts in projection order; do not re-sort selected/deferred.
+				actionsEl.appendChild(buildTable(
+					["已选择", "延后", "阻塞"],
+					[{
+						cells: [
+							selected.map((task) => `${task.taskId} (${task.priority})`).join(", ") || "无",
+							deferred.map((task) => {
+								const ahead = Array.isArray(task.selectedAhead) && task.selectedAhead.length
+									? ` ahead=${task.selectedAhead.join("|")}`
+									: "";
+								return `${task.taskId}: ${task.reasonCode || "selection-limit"}${ahead}`;
+							}).join(", ") || "无",
+							blocked.map((task) => {
+								const by = Array.isArray(task.blockedBy) && task.blockedBy.length
+									? ` by ${task.blockedBy.join(",")}`
+									: "";
+								return `${task.taskId}: ${task.reasonCode || task.reason || "blocked"}${by}`;
+							}).join(", ") || "无",
+						],
+					}],
+				));
+			}
+			actionsEl.appendChild(
+				el("h3", "section-heading", "建议命令（derived/advisory · 仅可复制）"),
+			);
+			actionsEl.appendChild(
+				el(
+					"p",
+					"muted advisory-note",
+					"以下命令为投影建议，Observe 不会执行任何写操作。",
+				),
+			);
+			if (feature.nextAction) {
+				actionsEl.appendChild(el("h4", null, "下一步"));
+				actionsEl.appendChild(renderRecommendedCommand(feature.nextAction));
+			} else {
+				actionsEl.appendChild(el("p", "empty", "无 nextAction。"));
+			}
+			const alts = feature.alternativeActions ?? [];
+			if (alts.length) {
+				actionsEl.appendChild(el("h4", null, "备选"));
+				for (const alt of alts) {
+					actionsEl.appendChild(renderRecommendedCommand(alt));
+				}
+			}
+			const cards = feature.followUps?.actionCards ?? feature.actionCards ?? [];
+			if (cards.length) {
+				actionsEl.appendChild(el("h4", null, "actionCards"));
+				for (const card of cards) {
+					actionsEl.appendChild(
+						renderRecommendedCommand({
+							kind: card.action ?? card.kind,
+							label: card.label,
+							command: card.command,
+						}),
+					);
+				}
+			}
+		} catch {
+			actionsEl.appendChild(el("p", "empty", "建议命令渲染失败。"));
+		}
+	}
+
+	if (factsEl) {
+		try {
+			factsEl.appendChild(
+				el("h3", "section-heading", "已执行事实（snapshot）"),
+			);
+			factsEl.appendChild(
+				el(
+					"p",
+					"muted advisory-note",
+					"仅展示当前 snapshot 中可证明的 Task / run 事实，非建议。",
+				),
+			);
+			const tasks = feature.tasks ?? [];
+			if (tasks.length === 0) {
+				factsEl.appendChild(el("p", "empty", "Feature 未关联 Task 事实。"));
+			} else {
+				factsEl.appendChild(
+					buildTable(
+						["Task", "类型", "状态", "pool 关联"],
+						tasks.map((t) => {
+							const pool = (snapshot?.tasks ?? []).find(
+								(p) =>
+									p.taskId === t.taskId &&
+									(!feature.featureId || p.featureId === feature.featureId),
+							);
+							const links = el("div", "artifact-links");
+							links.appendChild(
+								objectRouteLink("task", t.taskId, snapshot, feature.featureId),
+							);
+							if (pool?.workerRunId) {
+								links.appendChild(document.createTextNode(" · "));
+								links.appendChild(
+									objectRouteLink("run", pool.workerRunId, snapshot),
+								);
+							}
+							return {
+								cells: [t.taskId, t.type ?? "—", badge(t.status), links],
+							};
+						}),
+					),
+				);
+			}
+			const resolved = feature.followUps?.resolvedFailureTaskIds ?? [];
+			if (resolved.length) {
+				factsEl.appendChild(
+					el("p", null, `已解析失败 Task：${resolved.join(", ")}`),
+				);
+			}
+		} catch {
+			factsEl.appendChild(el("p", "empty", "已执行事实渲染失败。"));
+		}
+	}
+
+	if (followEl) {
+		try {
+			followEl.appendChild(el("h3", "section-heading", "待处理 follow-ups"));
+			const pending = feature.followUps?.pending ?? [];
+			if (pending.length === 0) {
+				followEl.appendChild(el("p", "empty", "无 pending follow-up。"));
+			} else {
+				followEl.appendChild(
+					buildTable(
+						["followUpId", "proposedTask", "parentTask", "draft"],
+						pending.map((f) => ({
+							cells: [
+								f.followUpId,
+								f.proposedTaskId ?? "—",
+								objectRouteLink(
+									"task",
+									f.parentTaskId,
+									snapshot,
+									feature.featureId,
+								),
+								artifactLink("draft", f.draftPath),
+							],
+						})),
+					),
+				);
+			}
+		} catch {
+			followEl.appendChild(el("p", "empty", "follow-up 渲染失败。"));
+		}
+	}
+
+	if (evidenceEl) {
+		try {
+			evidenceEl.appendChild(el("h3", "section-heading", "证据"));
+			const ev = feature.evidence ?? {};
+			const links = el("div", "artifact-links");
+			const pairs = [
+				["morningReport", ev.morningReport],
+				["observeSnapshot", ev.observeSnapshot],
+				["delivery", ev.delivery],
+				["closeout", ev.closeout],
+			];
+			let any = false;
+			for (const [label, path] of pairs) {
+				if (path) {
+					any = true;
+					links.appendChild(artifactLink(label, path));
+					links.appendChild(document.createTextNode(" "));
+				} else {
+					links.appendChild(el("span", "muted", `${label}: 缺失`));
+					links.appendChild(document.createTextNode(" "));
+				}
+			}
+			evidenceEl.appendChild(links);
+			if (!any) {
+				evidenceEl.appendChild(el("p", "empty", "全部 evidence 路径缺失。"));
+			}
+		} catch {
+			evidenceEl.appendChild(el("p", "empty", "证据渲染失败。"));
+		}
+	}
+
+	if (warningsEl) {
+		try {
+			warningsEl.appendChild(
+				el("h3", "section-heading", "投影警告（derived）"),
+			);
+			const warns = [
+				...(feature.projectionWarnings ?? []),
+				...(snapshot?.projectionWarnings ?? []),
+			];
+			if (warns.length === 0) {
+				mountViewState(warningsEl, "empty", "无 projectionWarnings。");
+			} else {
+				const ul = el("ul", "warning-list");
+				for (const w of warns) {
+					ul.appendChild(el("li", null, String(w)));
+				}
+				warningsEl.appendChild(ul);
+			}
+		} catch {
+			warningsEl.appendChild(el("p", "empty", "警告渲染失败。"));
+		}
+	}
+
+	return ["running", "needs_action"].includes(
+		(feature.status ?? "").toLowerCase(),
+	);
+}