@tea-agent/loop-agent 0.30.0 → 0.31.1

package/dist/worker/observe/static/format.js

@@ -299,6 +299,37 @@ export function truncateText(text, maxLen) {
 	return `${normalized.slice(0, maxLen)}…`;
 }
 
+/** Approximate display columns for CJK-heavy UI strings (SVG node cards). */
+export function displayWidth(text) {
+	let width = 0;
+	for (const char of String(text ?? "")) {
+		const code = char.codePointAt(0) ?? 0;
+		// Treat non-ASCII (CJK / fullwidth / most symbols) as double-width.
+		width += code > 0x00ff ? 2 : 1;
+	}
+	return width;
+}
+
+/** Truncate by display width so CJK status lines fit fixed SVG node cards. */
+export function truncateDisplayText(text, maxWidth) {
+	if (!text) return "—";
+	const normalized = String(text).replace(/\s+/g, " ").trim();
+	const limit = Math.max(1, Number(maxWidth) || 0);
+	if (displayWidth(normalized) <= limit) return normalized;
+	let out = "";
+	let width = 0;
+	// Reserve 1 column for the ellipsis when possible.
+	const budget = Math.max(1, limit - 1);
+	for (const char of normalized) {
+		const code = char.codePointAt(0) ?? 0;
+		const w = code > 0x00ff ? 2 : 1;
+		if (width + w > budget) break;
+		out += char;
+		width += w;
+	}
+	return `${out}…`;
+}
+
 export function repoBaseName(repoRoot) {
 	if (!repoRoot) return "未绑定仓库";
 	const trimmed = String(repoRoot).replace(/[\\/]+$/, "");
@@ -314,4 +345,3 @@ export function formatRepoPathDisplay(repoRoot) {
 		.replace(/^\/Users\/[^/]+/, "~")
 		.replace(/^\/home\/[^/]+/, "~");
 }
-

package/dist/worker/observe/static/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Loop Agent</title>
-    <link rel="icon" href="data:," />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link
       rel="stylesheet"

package/dist/worker/observe/static/state.js

@@ -41,6 +41,21 @@ export const uiState = {
 	dagNodeInputData: null,
 	dagNodeInputError: null,
 	dagNodeInputLoading: false,
+	/**
+	 * Execution-output request identity ("<dagRunId>:<nodeId>:<key>#<seq>").
+	 * Stale async responses are rejected when this no longer matches.
+	 */
+	dagNodeExecutionOutputIdentity: null,
+	dagNodeExecutionOutputRequestSeq: 0,
+	/**
+	 * Cache of loaded execution bodies keyed by dagRunId\0nodeId\0key.
+	 * Survives poll re-renders; cleared on node switch.
+	 */
+	dagNodeExecutionOutputCache: null,
+	/** Loading/error for the currently requested execution key (not global wipe). */
+	dagNodeExecutionOutputLoading: false,
+	dagNodeExecutionOutputError: null,
+	dagNodeExecutionOutputKey: null,
 	/** When true,「执行过程」展开 message_start/end 原始协议事件。 */
 	sessionTimelineShowProtocol: false,
 	/** Open <details> keys restored across timeline re-renders. */
@@ -48,8 +63,19 @@ export const uiState = {
 	lastSnapshot: null,
 	dagInspectorOpen: false,
 	dagInspectorTab: "output",
+	/**
+	 * Inspector attempt selection (identity: dagRunId + nodeId + attempt key).
+	 * null = latest attempt; reset on node switch; preserved across poll refreshes.
+	 */
+	dagInspectorAttempt: null,
+	/**
+	 * DAG 图区域当前视图模式镜像（真实持久在 dagGraphViewModes Map）。
+	 * 同会话内重新进入同一 dagRunId 时保持，不切回逻辑拓扑（AC-001）。
+	 */
+	dagGraphViewMode: "topology",
 	dagInspectorWidth: null,
 	dagGraphViewportState: null,
+	dagTrajectoryViewportState: null,
 	dagTimelineViewportState: null,
 	dagNodeOutputViewportState: null,
 	dagNodeInputViewportState: null,
@@ -69,6 +95,42 @@ export const uiState = {
 /** Per-dagRunId graph viewport restore map (stable Map instance). */
 export const dagGraphViewportStates = new Map();
 
+/**
+ * Per-dagRunId graph view mode ("topology" | "trajectory"). Session-only
+ * persistence: poll refreshes and re-entering the same dagRunId keep the
+ * current mode; a full page reload falls back to 逻辑拓扑 (AC-001 evidence gap).
+ */
+export const dagGraphViewModes = new Map();
+
+/** Per-dagRunId execution-trajectory viewport restore map. */
+export const dagTrajectoryViewportStates = new Map();
+
+/** Set the graph view mode for a dagRunId (topology | trajectory). */
+export function setDagGraphViewMode(dagRunId, mode) {
+	const normalized = mode === "trajectory" ? "trajectory" : "topology";
+	dagGraphViewModes.set(dagRunId, normalized);
+	uiState.dagGraphViewMode = normalized;
+	return normalized;
+}
+
+/** Resolve the effective graph view mode for a dagRunId (default topology). */
+export function currentDagGraphViewMode(dagRunId) {
+	return dagGraphViewModes.get(dagRunId) ?? "topology";
+}
+
+export function updateDagTrajectoryViewportState(
+	_previous,
+	dagRunId,
+	scrollLeft,
+	scrollTop,
+) {
+	return {
+		dagRunId,
+		scrollLeft: Math.max(0, Number(scrollLeft) || 0),
+		scrollTop: Math.max(0, Number(scrollTop) || 0),
+	};
+}
+
 /**
  * Per-context inspector content scroll map.
  * Key format: dag:<dagRunId>:<nodeId>:<tab>
@@ -140,6 +202,46 @@ export function makeDagNodeInputIdentity(dagRunId, nodeId) {
 	return `${dagRunId}:${nodeId}#${uiState.dagNodeInputRequestSeq}`;
 }
 
+/** Build a fresh execution-output identity token (includes key). */
+export function makeDagNodeExecutionOutputIdentity(dagRunId, nodeId, key) {
+	uiState.dagNodeExecutionOutputRequestSeq += 1;
+	return `${dagRunId}:${nodeId}:${key ?? "latest"}#${uiState.dagNodeExecutionOutputRequestSeq}`;
+}
+
+/** Stable cache key for a node execution body. */
+export function dagNodeExecutionOutputCacheKey(dagRunId, nodeId, key) {
+	return `${dagRunId ?? ""}\0${nodeId ?? ""}\0${key ?? "latest"}`;
+}
+
+/** Read a cached execution body entry (or null). */
+export function getDagNodeExecutionOutputCache(dagRunId, nodeId, key) {
+	const map = uiState.dagNodeExecutionOutputCache;
+	if (!(map instanceof Map)) return null;
+	return map.get(dagNodeExecutionOutputCacheKey(dagRunId, nodeId, key)) ?? null;
+}
+
+/** Write a successful body into the cache without clearing other keys. */
+export function setDagNodeExecutionOutputCache(dagRunId, nodeId, key, entry) {
+	if (!(uiState.dagNodeExecutionOutputCache instanceof Map)) {
+		uiState.dagNodeExecutionOutputCache = new Map();
+	}
+	uiState.dagNodeExecutionOutputCache.set(
+		dagNodeExecutionOutputCacheKey(dagRunId, nodeId, key),
+		entry,
+	);
+	return entry;
+}
+
+/** Drop all cached execution bodies (node switch / leave). */
+export function clearDagNodeExecutionOutputCache() {
+	uiState.dagNodeExecutionOutputCache = new Map();
+	uiState.dagNodeExecutionOutputError = null;
+	uiState.dagNodeExecutionOutputLoading = false;
+	uiState.dagNodeExecutionOutputKey = null;
+	uiState.dagNodeExecutionOutputIdentity = null;
+	uiState.dagNodeExecutionOutputRequestSeq += 1;
+}
+
 export function isPageVisible() {
 	return (
 		typeof document === "undefined" || document.visibilityState !== "hidden"

package/dist/worker/observe/static/styles.css

@@ -1453,6 +1453,43 @@ body.is-resizing-dag-graph {
 	overflow: auto;
 	overscroll-behavior: contain;
 }
+.dag-inspector-attempt-bar {
+	position: sticky;
+	top: calc(-1 * var(--space-4));
+	z-index: 2;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	padding-bottom: var(--space-3);
+	margin-bottom: var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+	background: var(--surface);
+}
+.dag-inspector-attempt-label {
+	font-size: 12px;
+	color: var(--muted);
+}
+.dag-inspector-attempt-select {
+	font-size: 12px;
+	padding: 2px 6px;
+	border: 1px solid var(--hairline);
+	border-radius: 6px;
+	background: var(--surface);
+	color: var(--ink);
+}
+.dag-inspector-attempt-preview {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: 12px;
+	color: var(--body);
+}
+.dag-inspector-attempt-artifact-note {
+	color: var(--muted);
+	font-size: 12px;
+}
 .panel-graph {
 	min-height: 0;
 }
@@ -1513,22 +1550,35 @@ body.is-resizing-dag-graph {
 }
 .dag-edge {
 	fill: none;
-	stroke: color-mix(in srgb, var(--hairline-strong) 80%, var(--muted));
-	stroke-width: 1.75;
+	/* P1 ordinary edges: stronger contrast / slightly thicker for readability. */
+	stroke: color-mix(in srgb, var(--hairline-strong) 78%, var(--muted));
+	stroke-width: 1.6;
+	stroke-linecap: round;
+	stroke-linejoin: round;
 	transition:
 		opacity var(--transition-fast),
 		stroke var(--transition-fast);
 }
 #dag-arrow path {
-	fill: color-mix(in srgb, var(--hairline-strong) 80%, var(--muted));
+	fill: color-mix(in srgb, var(--hairline-strong) 62%, var(--muted));
 }
+/* Control loops stay visible but visually lighter than the main chain. */
 .dag-edge-control {
-	stroke: var(--orange);
-	stroke-width: 2;
-	stroke-dasharray: 6 4;
+	stroke: color-mix(in srgb, var(--orange) 58%, var(--muted));
+	stroke-width: 1.25;
+	stroke-dasharray: 5 5;
+	opacity: 0.72;
 }
 #dag-arrow-control path {
-	fill: var(--orange);
+	fill: color-mix(in srgb, var(--orange) 58%, var(--muted));
+}
+.dag-edge-control-label {
+	fill: color-mix(in srgb, var(--orange) 70%, var(--muted));
+	font-size: 10px;
+	font-weight: 500;
+	opacity: 0.85;
+	pointer-events: none;
+	user-select: none;
 }
 .dag-graph-node {
 	cursor: pointer;
@@ -1597,6 +1647,10 @@ body.is-resizing-dag-graph {
 	fill: var(--body);
 	font-size: 11px;
 }
+.dag-node-history {
+	fill: var(--muted);
+	font-size: 10px;
+}
 .dag-dimmed {
 	opacity: 0.28;
 }
@@ -1609,6 +1663,212 @@ body.is-resizing-dag-graph {
 	}
 }
 
+/* ---- 双视图 segmented control（逻辑拓扑 | 执行轨迹，AC-001） ---- */
+.dag-graph-toolbar-left {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--space-3);
+}
+.dag-graph-mode-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	padding: 3px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+	box-shadow: var(--shadow-panel);
+}
+.dag-graph-mode-tab {
+	min-height: 26px;
+	padding: 0 12px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-pill);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-graph-mode-tab:hover {
+	color: var(--ink);
+}
+.dag-graph-mode-tab[aria-selected="true"] {
+	background: var(--ink);
+	color: #fff;
+}
+.dag-graph-mode-tab:focus-visible {
+	outline: 2px solid var(--orange);
+	outline-offset: 1px;
+	color: var(--ink);
+}
+.dag-graph-mode-tab[aria-selected="true"]:focus-visible {
+	outline-color: var(--orange-active);
+	color: #fff;
+}
+
+/* ---- 执行轨迹 storyboard（AC-002..AC-006） ---- */
+.dag-trajectory {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-3);
+	padding: var(--space-4);
+	min-width: max-content;
+}
+.dag-trajectory-lane {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+.dag-trajectory-lane-head {
+	display: flex;
+	align-items: baseline;
+	gap: var(--space-2);
+}
+.dag-trajectory-lane-title {
+	font-size: 13px;
+	font-weight: 750;
+	color: var(--ink);
+}
+.dag-trajectory-lane-meta {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-lane-cards {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+	gap: var(--space-2);
+}
+.dag-trajectory-occurrence {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 6px;
+	min-width: 176px;
+	max-width: 240px;
+	padding: 10px 12px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+	color: var(--ink);
+	text-align: left;
+	cursor: pointer;
+	box-shadow: var(--shadow-panel);
+}
+.dag-trajectory-occurrence:hover,
+.dag-trajectory-occurrence:focus-visible {
+	border-color: var(--orange);
+	outline: none;
+}
+.dag-trajectory-occurrence-node {
+	font-size: 12px;
+	font-weight: 700;
+	word-break: break-all;
+}
+.dag-trajectory-occurrence-status {
+	align-self: flex-start;
+}
+.dag-trajectory-occurrence-meta {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-occurrence-verdict {
+	font-size: 11px;
+	color: var(--body);
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+.dag-trajectory-attempt-strip {
+	font-size: 11px;
+	color: var(--body);
+}
+/* 历史失败已恢复/已覆盖：独立中性样式（不占用当前终态失败红色，不洗白事实）。 */
+.dag-trajectory-occurrence.is-recovered {
+	border-color: color-mix(in srgb, var(--amber, #b58900) 55%, var(--hairline));
+	background: color-mix(in srgb, var(--amber-soft, #fff7d6) 55%, var(--surface));
+}
+.dag-trajectory-recovered {
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--amber, #b58900);
+}
+.dag-trajectory-partial {
+	font-size: 11px;
+	color: var(--muted);
+	border: 1px dashed var(--hairline-strong);
+	border-radius: 6px;
+	padding: 2px 6px;
+}
+.dag-trajectory-transition {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding-left: 4px;
+}
+.dag-trajectory-transition-arrow {
+	color: var(--muted);
+	font-size: 14px;
+}
+.dag-trajectory-transition-reason {
+	font-size: 11px;
+	color: var(--muted);
+}
+.dag-trajectory-banner {
+	padding: 8px 12px;
+	border: 1px solid color-mix(in srgb, var(--amber, #b58900) 50%, var(--hairline));
+	border-radius: var(--radius-lg);
+	background: color-mix(in srgb, var(--amber-soft, #fff7d6) 60%, var(--surface));
+	color: var(--body);
+	font-size: 12px;
+}
+.dag-trajectory-banner.is-error {
+	border-color: color-mix(in srgb, var(--red) 50%, var(--hairline));
+	background: color-mix(in srgb, var(--red) 6%, var(--surface));
+	color: var(--red);
+}
+.dag-trajectory-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--space-3);
+	padding: var(--space-8) var(--space-4);
+	color: var(--muted);
+}
+.dag-trajectory-empty-text {
+	margin: 0;
+	font-size: 13px;
+}
+.dag-trajectory-back {
+	min-height: 32px;
+	padding: 0 12px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-pill);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 650;
+	cursor: pointer;
+}
+.dag-trajectory-back:hover,
+.dag-trajectory-back:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-trajectory-fallback {
+	margin: 0;
+	padding: var(--space-4) var(--space-5);
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+.dag-trajectory-fallback-item {
+	font-size: 12px;
+	color: var(--body);
+}
+
 .dag-section-heading {
 	display: flex;
 	align-items: baseline;