@tea-agent/loop-agent 0.43.0-next.1 → 0.43.0-next.2

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

@@ -183,6 +183,13 @@ body[data-shell="observe-console"] .process-timeline-time,
 	color: var(--muted);
 	font-size: 12px;
 }
+/* 末级（当前页）窄屏截断，避免长标题/裸 ID 撑换行。 */
+.breadcrumb .breadcrumb-current {
+	overflow: hidden;
+	min-width: 0;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 
 .breadcrumb[hidden] {
 	display: none;
@@ -274,9 +281,34 @@ body[data-shell="observe-console"] .process-timeline-time,
 
 .view-heading {
 	display: grid;
-	gap: 4px;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 4px 10px;
 	margin-bottom: var(--space-6);
 }
+/* 标题行：kicker + 标题 + 刷新按钮同行（按钮靠右）；说明文字独占下一行。
+   用显式 grid 而非 flex-wrap：flex-basis 百分比在部分嵌套下不触发换行。 */
+.view-heading .view-kicker {
+	grid-row: 1;
+	grid-column: 1;
+}
+/* 无 kicker 的页面标题从第一列开始，避免空列 + 列间距造成缩进。 */
+.view-heading:not(:has(.view-kicker)) > h2 {
+	grid-column: 1 / 3;
+}
+.view-heading > h2 {
+	grid-row: 1;
+	grid-column: 2;
+	margin: 0;
+}
+.view-heading .view-manual-refresh {
+	grid-row: 1;
+	grid-column: 3;
+}
+.view-heading > p:last-of-type {
+	grid-row: 2;
+	grid-column: 1 / -1;
+}
 
 .view-kicker {
 	display: inline-flex;
@@ -301,7 +333,7 @@ body[data-shell="observe-console"] .process-timeline-time,
 	letter-spacing: -0.02em;
 }
 
-.view-heading > p:last-child {
+.view-heading > p:last-of-type {
 	max-width: 66ch;
 	margin: 0;
 	color: var(--body);
@@ -1321,6 +1353,26 @@ body.is-resizing-dag-graph {
 	overscroll-behavior-x: contain;
 	scrollbar-width: thin;
 }
+/* 溢出渐隐：边缘阴影提示还有更多 Tab（类名由 overflow 测量驱动）。 */
+.dag-inspector-tabs.is-overflow-start,
+.dag-inspector-tabs.is-overflow-end {
+	background-repeat: no-repeat;
+	background-size: 22px 100%;
+}
+.dag-inspector-tabs.is-overflow-start {
+	background-image: linear-gradient(90deg, rgb(38 37 30 / 12%), rgb(38 37 30 / 0));
+	background-position: left center;
+}
+.dag-inspector-tabs.is-overflow-end {
+	background-image: linear-gradient(270deg, rgb(38 37 30 / 12%), rgb(38 37 30 / 0));
+	background-position: right center;
+}
+.dag-inspector-tabs.is-overflow-start.is-overflow-end {
+	background-image:
+		linear-gradient(90deg, rgb(38 37 30 / 12%), rgb(38 37 30 / 0)),
+		linear-gradient(270deg, rgb(38 37 30 / 12%), rgb(38 37 30 / 0));
+	background-position: left center, right center;
+}
 .dag-inspector-tab {
 	flex: 0 0 auto;
 	min-height: 30px;
@@ -1406,6 +1458,25 @@ body.is-resizing-dag-graph {
 	font-weight: 800;
 	letter-spacing: 0.12em;
 }
+.inspector-page-eyebrow-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+.inspector-page-eyebrow-row .observe-icon-button {
+	flex: 0 0 24px;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	font-size: 14px;
+}
+/* 收起态只保留 eyebrow 行，点击可再展开（会话级记忆）。 */
+.inspector-page-lead.is-collapsed h4,
+.inspector-page-lead.is-collapsed p {
+	display: none;
+}
 .dag-inspector-attempt-bar {
 	position: sticky;
 	top: calc(-1 * var(--space-4));
@@ -2029,13 +2100,16 @@ body.is-resizing-dag-graph {
 	margin: 0 2px;
 	pointer-events: none;
 }
+/* display:flex 会盖过 UA 的 [hidden]，贴底/无溢出隐藏 dock 需显式声明。 */
+.process-timeline-autoscroll-dock[hidden] {
+	display: none;
+}
 .process-timeline-autoscroll {
 	position: relative;
 	pointer-events: auto;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	gap: 7px;
 	width: 36px;
 	height: 36px;
 	padding: 0;
@@ -2044,7 +2118,9 @@ body.is-resizing-dag-graph {
 	background: color-mix(in srgb, var(--surface) 94%, var(--canvas));
 	color: var(--body);
 	box-shadow: 0 8px 24px rgb(38 37 30 / 14%);
-	font-size: 14px;
+	font-size: 11px;
+	font-weight: 650;
+	white-space: nowrap;
 	cursor: pointer;
 	backdrop-filter: blur(10px);
 }
@@ -2080,25 +2156,22 @@ body.is-resizing-dag-graph {
 	outline: none;
 	box-shadow: 0 8px 24px rgb(38 37 30 / 16%), 0 0 0 3px var(--orange-soft);
 }
-.process-timeline-autoscroll.is-active {
-	border-color: var(--ink);
-	background: var(--ink);
-	color: #fff;
-}
-.process-timeline-autoscroll.is-active:hover,
-.process-timeline-autoscroll.is-active:focus-visible {
+.process-timeline-autoscroll.has-unread {
 	border-color: var(--orange);
-	background: var(--ink);
-	color: #fff;
+	color: var(--orange-active);
 }
 .process-timeline-autoscroll-signal {
+	display: none;
+	position: absolute;
+	top: 5px;
+	right: 5px;
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
-	background: var(--muted-soft);
-}
-.process-timeline-autoscroll.is-active .process-timeline-autoscroll-signal {
 	background: var(--orange);
+}
+.process-timeline-autoscroll.has-unread .process-timeline-autoscroll-signal {
+	display: block;
 	box-shadow: 0 0 0 4px rgb(245 78 0 / 16%);
 	animation: process-timeline-live-pulse 1.8s ease-out infinite;
 }
@@ -2107,7 +2180,7 @@ body.is-resizing-dag-graph {
 	75% { box-shadow: 0 0 0 7px rgb(245 78 0 / 0%); }
 }
 @media (prefers-reduced-motion: reduce) {
-	.process-timeline-autoscroll.is-active .process-timeline-autoscroll-signal {
+	.process-timeline-autoscroll.has-unread .process-timeline-autoscroll-signal {
 		animation: none;
 	}
 	.process-timeline-autoscroll::after {
@@ -2119,28 +2192,6 @@ body.is-resizing-dag-graph {
 	flex-wrap: wrap;
 	gap: 4px;
 }
-.process-timeline-toggle {
-	min-height: 28px;
-	padding: 0 10px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-sm);
-	background: var(--surface);
-	color: var(--body);
-	font-size: 11px;
-	font-weight: 600;
-	cursor: pointer;
-}
-.process-timeline-toggle:hover,
-.process-timeline-toggle:focus-visible {
-	border-color: var(--orange);
-	color: var(--orange-active);
-	outline: none;
-}
-.process-timeline-toggle[aria-pressed="true"] {
-	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
-	background: #fff5ed;
-	color: var(--orange-active);
-}
 .process-timeline-body {
 	min-width: 0;
 	padding: 4px 0 8px var(--space-2);
@@ -2995,6 +3046,19 @@ body.is-resizing-dag-graph {
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 }
+.run-output-shell {
+	position: relative;
+}
+.run-output-follow-dock {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	z-index: 3;
+	pointer-events: none;
+}
+.run-output-follow-dock[hidden] {
+	display: none;
+}
 
 .artifact-list {
 	display: grid;
@@ -5199,3 +5263,160 @@ button.copy-command:focus-visible {
 .prompt-restart-status.prompt-restart-error {
 	color: var(--red);
 }
+
+/* Reader controls stay within reach while the body scrolls. */
+.dag-inspector.is-expanded { width: calc(100vw - 48px); }
+.inspect-workspace-root .dag-inspector.is-expanded { width: calc(100% - 32px); }
+.dag-inspector-header .dag-inspector-attempt-bar { position: relative; top: auto; grid-column: 1 / -1; margin: 0; padding: 8px 0 0; border-bottom: 0; border-top: 1px solid var(--hairline); }
+.process-timeline-toolbar { position: sticky; top: -16px; z-index: 5; padding: 8px 0; background: var(--surface); border-bottom: 1px solid var(--hairline); }
+.process-timeline-search { flex: 1 1 160px; min-width: 100px; padding: 6px 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
+.process-timeline-item.is-search-match { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); border-radius: var(--radius-sm); }
+.dag-inspector.is-expanded .inspector-page-lead { max-width: none; }
+.dag-inspector-content .process-timeline-code, .dag-inspector-content .process-timeline-thinking-body { max-height: none; overflow-y: visible; }
+@media (max-width: 700px) {
+ .dag-inspector.is-expanded { width: calc(100vw - 24px); }
+ .dag-inspector-controls { flex-wrap: wrap; }
+ .dag-inspector-header { padding: 12px; }
+ .dag-inspector-purpose, .dag-inspector-attempt-label { display: none; }
+ .dag-inspector-attempt-preview { font-size: 11px; }
+}
+
+.dag-action-intents, .node-relation-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+.node-relation-links h5 { width:100%; margin:8px 0 0; }
+.dag-action-intents [aria-pressed="true"] { border-color:var(--orange); color:var(--orange-active); }
+.dag-action-card[hidden] { display:none; }
+.context-component { padding:10px 0; border-top:1px solid var(--hairline); }
+.context-component > summary { cursor:pointer; overflow-wrap:anywhere; }
+.context-component-body { margin-top:12px; }
+.context-record-heading { margin:0; color:var(--ink); font-weight:650; }
+.context-record-meta { margin:0; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
+.context-component > summary { display:list-item; color:var(--ink); }
+.context-component-name { font-weight:600; }
+.context-component-meta { display:block; margin:4px 0 0 16px; color:var(--muted); font-size:11px; font-weight:400; }
+.context-source-details { margin-top:12px; color:var(--muted); font-size:12px; }
+.context-source-details > summary { cursor:pointer; }
+.context-source-details .node-transparency-summary { margin-top:12px; }
+.inspector-operation { padding:8px 12px; border:1px solid var(--hairline); border-radius:var(--radius-sm); margin-bottom:8px; overflow-wrap:anywhere; }
+.dag-graph-toolbar { flex-wrap:wrap; gap:8px; }
+.dag-graph-search, .relation-task-picker { padding:6px 8px; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface); max-width:100%; }
+#view-dashboard { display:flex; flex-direction:column; }
+#view-dashboard[hidden] { display:none; }
+#view-dashboard .dashboard-workspace { order:-2; }
+#dashboard-kpi { padding-top:8px; padding-bottom:8px; }
+#dashboard-kpi .kpi-card { padding-top:12px; padding-bottom:12px; }
+#dashboard-kpi .kpi-value { font-size:24px; }
+
+.attempt-comparison-toolbar { display:flex; gap:12px; padding-bottom:12px; }
+.attempt-comparison-columns { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; }
+.attempt-comparison-columns > p { grid-column:1/-1; }
+.attempt-comparison-column { min-width:0; overflow-wrap:anywhere; }
+@media (max-width:700px) { .attempt-comparison-columns { grid-template-columns:minmax(0,1fr); } }
+
+/* Compact controls share the existing palette and keep names available on focus. */
+.observe-icon-button,
+.dag-graph-toolbar .observe-icon-button {
+ display: inline-grid;
+ place-items: center;
+ flex: 0 0 32px;
+ width: 32px;
+ min-width: 32px;
+ height: 32px;
+ min-height: 32px;
+ padding: 0;
+ border: 1px solid transparent;
+ border-radius: 7px;
+ background: transparent;
+ color: var(--body);
+ font-size: 17px;
+ line-height: 1;
+ box-shadow: none;
+ cursor: pointer;
+}
+.observe-icon-button:hover:not(:disabled),
+.observe-icon-button[aria-pressed="true"] {
+ background: var(--surface-muted);
+ color: var(--ink);
+ border-color: var(--hairline);
+ transform: none;
+}
+.observe-icon-button:focus-visible,
+.observe-select:focus-visible {
+ outline: 2px solid var(--orange);
+ outline-offset: 2px;
+}
+.observe-icon-button:disabled { opacity: .35; cursor: default; }
+.observe-select {
+ min-height: 32px;
+ max-width: 100%;
+ padding: 4px 24px 4px 10px;
+ border: 1px solid var(--hairline);
+ border-radius: 7px;
+ background: var(--surface);
+ color: var(--ink);
+ font: inherit;
+ font-size: 12px;
+ cursor: pointer;
+}
+.dag-inspector-header { gap: 10px; padding: 12px 16px; }
+.dag-inspector-title { gap: 3px; }
+.dag-inspector-purpose { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dag-inspector-controls { gap: 3px; }
+.dag-inspector-header .dag-inspector-attempt-bar { gap: 4px; padding-top: 8px; }
+.dag-inspector-attempt-label { display: none; }
+.dag-inspector-attempt-preview { flex: 1; gap: 8px; min-width: 0; }
+.dag-inspector-attempt-category { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.process-timeline-toolbar { gap: 4px; align-items: center; flex-shrink: 0; }
+.process-timeline-filter-group { flex: 0 0 auto; max-width: 135px; }
+.process-timeline-search { margin: 0 4px; height: 32px; flex: 1 1 120px; }
+.process-timeline-toolbar > [role="status"] { font-size: 11px; white-space: nowrap; }
+.dag-graph-toolbar { gap: 4px; }
+.dag-graph-toolbar-left { margin-right: auto; }
+.dag-graph-search { height: 32px; width: 160px; margin-left: 8px; }
+@media (max-width: 700px) {
+ .dag-inspector-header { padding: 10px 12px; }
+ .dag-inspector-controls { flex-wrap: nowrap; }
+ .dag-inspector-status { padding: 2px 6px; }
+ .dag-inspector-attempt-preview { flex-basis: 100%; padding-left: 36px; }
+ .process-timeline-search { flex-basis: 96px; min-width: 76px; }
+ .dag-graph-toolbar-left { flex: 1 1 100%; }
+ .dag-graph-search { flex: 1; min-width: 96px; }
+}
+.observe-icon-button { position: relative; }
+.observe-icon-button::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ right: 0;
+ top: calc(100% + 6px);
+ z-index: 30;
+ padding: 6px 8px;
+ border-radius: 5px;
+ background: var(--ink);
+ color: var(--surface);
+ font: 11px/1.4 system-ui, sans-serif;
+ white-space: nowrap;
+ opacity: 0;
+ pointer-events: none;
+}
+.observe-icon-button:focus-visible::after { opacity: 1; }
+.risk-dag-items { display: grid; gap: 6px; padding-top: 8px; }
+/* The hosted Console also has .panel styles; keep the reader shell flush. */
+#dag-inspector { padding: 0; gap: 0; }
+.dag-inspector-header .dag-inspector-attempt-bar { flex-wrap: nowrap; background: transparent; }
+.dag-inspector-header .dag-inspector-attempt-select { min-width: 0; flex: 0 1 126px; }
+.dag-inspector-header .dag-inspector-attempt-preview { flex: 1 1 auto; flex-wrap: nowrap; padding: 0; }
+.dag-inspector-header .dag-inspector-attempt-category,
+.dag-inspector-header .dag-inspector-attempt-duration { display: none; }
+@container (max-width: 560px) {
+ .process-timeline-toolbar { display: grid; grid-template-columns: minmax(80px, 1fr) 32px 32px 32px; gap: 4px; }
+ .process-timeline-filter-group { grid-row: 1; grid-column: 1 / 3; width: fit-content; }
+ .process-timeline-errors { grid-row: 1; grid-column: 3; }
+ .process-timeline-protocol-toggle { grid-row: 1; grid-column: 4; }
+ .process-timeline-search { grid-row: 2; grid-column: 1 / 3; width: 100%; margin: 0; }
+ .process-search-previous { grid-row: 2; grid-column: 3; }
+ .process-search-next { grid-row: 2; grid-column: 4; }
+ .process-timeline-toolbar > [role="status"] { grid-row: 3; grid-column: 1 / -1; }
+ .process-timeline-toolbar > [role="status"]:empty { display: none; }
+}
+
+.process-search-highlight { background: #ffe082; color: #382800; border-radius: 2px; }
+.process-timeline-item.is-search-current { outline: 2px solid var(--amber); outline-offset: -2px; }

package/dist/worker/observe/static/task-failure-labels.d.ts

@@ -0,0 +1,4 @@
+export const TASK_FAILURE_UNKNOWN_LABEL: string;
+
+export function taskFailureCategoryLabel(category: unknown): string;
+export function followUpLabel(action: unknown): string;

package/dist/worker/observe/static/task-failure-labels.js

@@ -0,0 +1,67 @@
+/**
+ * 异常 Task 页业务文案映射（Observe UI，2026-09-06-observe-reading-and-polish）。
+ *
+ * 表驱动映射：Task 级 failureCategory（ProductLineFailureCategory）与
+ * 建议跟进（FOLLOW_UP_BY_CATEGORY / DAG_RECOVERY_ACTIONS）仅保留 raw token
+ * 于 title 等诊断属性，主文案一律中文业务术语。未知或缺失分类 fail-closed
+ * 原文透传（异常页是排障入口，未收录 token 比误译更有诊断价值）。
+ */
+
+/** 表一：Task 失败分类（src/worker/pool/types.ts ProductLineFailureCategory）→ 中文。 */
+const TASK_FAILURE_CATEGORY_LABELS = {
+	SpecUnclear: "需求不明确",
+	ContractMismatch: "契约不一致",
+	ProductBug: "产品缺陷",
+	TestBug: "测试缺陷",
+	EnvFailure: "环境问题",
+	FlakyTest: "测试不稳定",
+	RiskyChange: "变更风险",
+	DependencyFailure: "依赖阻塞",
+	NeedsHuman: "需要人工",
+	Unknown: "未分类",
+	// run 级补充（read-model：state.json controller-interrupted）。
+	"controller-interrupted": "控制器中断",
+};
+
+/**
+ * 表二：建议跟进/恢复动作 → 中文。并集覆盖
+ * src/worker/pool/failure-routing.ts FOLLOW_UP_BY_CATEGORY 与
+ * src/workflows/dag/recovery-recommendation.ts DAG_RECOVERY_ACTIONS。
+ */
+const FOLLOW_UP_LABELS = {
+	"spec-clarification": "澄清需求",
+	"architecture-contract-fix": "修订契约",
+	"dev-fix": "开发修复",
+	"qa-fix-test": "修复测试",
+	"env-fix": "修复环境",
+	"flaky-test-analysis": "分析不稳定测试",
+	"human-review": "人工审查",
+	"manual-review": "人工审查",
+	"unblock-dependency": "解除依赖阻塞",
+	"human-triage": "人工分诊",
+	none: "无需处理",
+	monitor: "持续观察",
+	"retry-node": "重试节点",
+	"rerun-after-fix": "修复后重跑",
+	"resume-or-reject": "恢复或拒绝",
+	"inspect-upstream": "检查上游",
+};
+
+export const TASK_FAILURE_UNKNOWN_LABEL = "未分类";
+
+/**
+ * Task 失败分类 → 中文；未知英文 token 原样透传（title 仍可标注 raw），
+ * 空值返回空串由调用方决定占位。
+ */
+export function taskFailureCategoryLabel(category) {
+	const raw = String(category ?? "").trim();
+	if (!raw) return "";
+	return TASK_FAILURE_CATEGORY_LABELS[raw] ?? raw;
+}
+
+/** 建议跟进/恢复动作 → 中文；未知 token 原样透传，空值返回空串。 */
+export function followUpLabel(action) {
+	const raw = String(action ?? "").trim();
+	if (!raw) return "";
+	return FOLLOW_UP_LABELS[raw] ?? raw;
+}

package/dist/worker/observe/static/task-history.js

@@ -0,0 +1,12 @@
+/** Merge poll/older pages without dropping the pages the reader loaded. */
+export function mergeTaskHistoryPage(state, page, older = false) {
+	const existing = new Map(state.runs.map((run) => [run.workerRunId, run]));
+	for (const run of page.runs ?? []) existing.set(run.workerRunId, run);
+	const order = older ? [...state.runs, ...(page.runs ?? [])] : [...(page.runs ?? []), ...state.runs];
+	const seen = new Set();
+	state.runs = order.filter((run) => { if (seen.has(run.workerRunId)) return false; seen.add(run.workerRunId); return true; }).map((run) => existing.get(run.workerRunId));
+	if (older || !state.loadedOlder) state.nextBefore = page.nextBefore ?? null;
+	if (older) state.loadedOlder = true;
+	state.error = null;
+	return state;
+}

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

@@ -1,3 +1,4 @@
+import { bindManualViewRefresh, mountTaskRelationPicker } from "../shell-chrome.js";
 /** Observe UI view module (R5). */
 import {
 	UI_TEXT,
@@ -19,6 +20,7 @@ import {
 import { clearNode, el, metaGrid, buildTable } from "../dom.js";
 import {
 	badge,
+	batchStatusBadge,
 	badgeClass,
 	statusLabel,
 	formatTs,
@@ -71,6 +73,7 @@ import { mountBoundedEventTimeline } from "./timeline.js";
 
 export async function renderBatch(batchRunId) {
 	showView("batch");
+	bindManualViewRefresh("batch", () => renderBatch(batchRunId));
 	setBreadcrumb([
 		{ label: UI_TEXT.dashboard, href: "#/" },
 		{ label: batchRunId },
@@ -88,7 +91,7 @@ export async function renderBatch(batchRunId) {
 	]);
 	if (snapshot) {
 		uiState.lastSnapshot = snapshot;
-		updateHeaderRefresh(snapshot.generatedAt);
+		updateHeaderRefresh(snapshot.generatedAt, { mode: "manual" });
 	}
 	if (!batch) {
 		clearNode(metaEl);
@@ -100,17 +103,7 @@ export async function renderBatch(batchRunId) {
 		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,
-	);
+	mountTaskRelationPicker("batch-relations", { featureId: batch.featureId, batchRunId: batch.batchRunId }, (batch.tasks ?? []).map((task) => ({ ...task, featureId: task.featureId ?? batch.featureId })), snapshot);
 
 	const totalDerived = derivedDurationMs(batch.startedAt, batch.finishedAt);
 	clearNode(metaEl);
@@ -123,7 +116,7 @@ export async function renderBatch(batchRunId) {
 					? objectRouteLink("feature", batch.featureId, snapshot)
 					: el("span", "muted", "—"),
 			],
-			["状态", badge(batch.status)],
+			["状态", batchStatusBadge(batch)],
 			["开始时间", formatTs(batch.startedAt)],
 			["结束时间", formatTs(batch.finishedAt)],
 			["总耗时", formatDuration(totalDerived)],

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

@@ -6,7 +6,7 @@ import {
 	edgeCollidesNonEndpointNodes,
 	routeControlEdge,
 } from "../dag-edge-routing.js";
-import { el } from "../dom.js";
+import { el, iconButton } from "../dom.js";
 import {
 	statusLabel,
 	statusSymbol,
@@ -23,7 +23,7 @@ import {
 	currentDagGraphViewMode,
 } from "../state.js";
 import { describeDagNodePurpose } from "../dag-node-purpose.js";
-import { selectDagNode } from "./dag-inspector.js";
+import { selectDagNode, selectDagExecution } from "./dag-inspector.js";
 import { renderTrajectoryStoryboard } from "./dag-trajectory.js";
 
 export function svgEl(tag, attrs = {}) {
@@ -138,6 +138,10 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 		controlLaneCount,
 	});
 	const wrap = existingWrap ?? el("div", "dag-graph-wrap");
+	const active = document.activeElement;
+	const focusedNodeId = existingWrap?.contains?.(active) ? active?.getAttribute?.("data-node-id") : null;
+	const focusedAction = existingWrap?.contains?.(active) ? active?.dataset?.graphAction : null;
+	const previousSearch = existingWrap?.querySelector(".dag-graph-search")?.value ?? "";
 	// Preserve .dag-graph-viewport DOM identity across poll refreshes so the
 	// user's active scroll/pointer target is not destroyed mid-gesture.
 	let viewport =
@@ -169,7 +173,7 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 	}
 	toolbarLeft.appendChild(el("span", "dag-graph-summary", summaryText));
 	toolbar.appendChild(toolbarLeft);
-	const reset = el("button", "dag-graph-reset", "重置视图");
+	const reset = iconButton("重置视图", "ri-restart-line", "dag-graph-reset");
 	toolbar.appendChild(reset);
 	const appendBeforeViewport = (child) => {
 		if (viewport?.parentNode === wrap) wrap.insertBefore(child, viewport);
@@ -339,6 +343,7 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			const purpose = describeDagNodePurpose(node.nodeId, node);
 			const group = svgEl("g", {
 				transform: `translate(${position.x} ${position.y})`,
+				"data-node-id": node.nodeId,
 				class: `dag-graph-node status-${status}${node.nodeId === uiState.selectedDagNodeId ? " selected" : ""}${uiState.selectedDagNodeId && !related.has(node.nodeId) ? " dag-dimmed" : ""}`,
 				tabindex: 0,
 				role: "button",
@@ -402,6 +407,9 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			});
 			svg.appendChild(group);
 		}
+		const scale = Number(viewport.dataset.scale) || 1;
+		svg.style.width = `${Number(svg.getAttribute("width")) * scale}px`;
+		svg.style.height = `${Number(svg.getAttribute("height")) * scale}px`;
 		viewport.appendChild(svg);
 	}
 	if (viewport.parentNode !== wrap) wrap.appendChild(viewport);
@@ -476,9 +484,48 @@ export function renderDagGraph(dag, dagRunId, existingWrap = null) {
 			}
 		}
 	}
+	const findNode = (id) => {
+		const matches = [...viewport.querySelectorAll("[data-node-id]")].filter((element) => element.getAttribute("data-node-id") === id);
+		const key = uiState.dagInspectorAttempt?.nodeId === id ? uiState.dagInspectorAttempt.key : null;
+		return matches.find((element) => key && element.getAttribute("data-execution-key") === key) ?? matches.at(-1);
+	};
+	const center = (id, executionId = null) => {
+		const target = executionId ? [...viewport.querySelectorAll("[data-execution-id]")].find((item) => item.getAttribute("data-execution-id") === executionId) : findNode(id);
+		if (!target) return;
+		const rect = target.getBoundingClientRect(), container = viewport.getBoundingClientRect();
+		viewport.scrollTo({ left: viewport.scrollLeft + rect.left - container.left - (container.width - rect.width) / 2, top: viewport.scrollTop + rect.top - container.top - (container.height - rect.height) / 2, behavior: "smooth" });
+	};
+	const addAction = (id, label, action) => { const icons = { selected: "ri-focus-3-line", running: "ri-play-circle-line", failed: "ri-error-warning-line", fit: "ri-fullscreen-line" }; const button = iconButton(label, icons[id], "dag-graph-reset"); button.type = "button"; button.dataset.graphAction = id; button.addEventListener("click", action); toolbar.appendChild(button); return button; };
+	addAction("selected", "定位选中", () => center(uiState.selectedDagNodeId)).disabled = !findNode(uiState.selectedDagNodeId);
+	addAction("running", "定位运行中", () => { const node = nodes.find((item) => String(item.status).toLowerCase() === "running"); if (node) center(node.nodeId); }).disabled = !nodes.some((item) => String(item.status).toLowerCase() === "running");
+	const failedNodes = (mode === "trajectory" ? dag.executionTrajectory?.occurrences ?? [] : nodes).filter((item) => ["error", "failed"].includes(String(item.status).toLowerCase()));
+	const failed = addAction("failed", `下个失败 (${failedNodes.length})`, () => {
+		if (!failedNodes.length) return;
+		const index = failedNodes.findIndex((item) => item.nodeId === uiState.selectedDagNodeId && (mode !== "trajectory" || (item.pass ? `pass-${item.pass}` : null) === (uiState.dagInspectorAttempt?.key ?? null)));
+		const node = failedNodes[(index + 1) % failedNodes.length];
+		if (mode === "trajectory") selectDagExecution(dagRunId, node.nodeId, node.pass ? `pass-${node.pass}` : null);
+		else selectDagNode(dagRunId, node.nodeId);
+		requestAnimationFrame(() => center(node.nodeId, node.executionId));
+	});
+	failed.disabled = !failedNodes.some((node) => findNode(node.nodeId));
+	const fit = addAction("fit", "适应画布", () => {
+		const svg = viewport.querySelector("svg.dag-graph"); if (!svg) return;
+		const width = Number(svg.getAttribute("width")), height = Number(svg.getAttribute("height"));
+		const scale = Math.min(1, (viewport.clientWidth - 24) / width, (viewport.clientHeight - 24) / height);
+		if (!(scale > 0)) return;
+		viewport.dataset.scale = String(scale); svg.style.width = `${width * scale}px`; svg.style.height = `${height * scale}px`; viewport.scrollTo({ left: 0, top: 0 });
+	});
+	fit.disabled = mode !== "topology";
+	const search = el("input", "dag-graph-search"); search.type = "search"; search.placeholder = "查找节点…"; search.value = previousSearch; search.setAttribute("aria-label", "查找流程节点"); search.dataset.graphAction = "search";
+	search.addEventListener("keydown", (event) => { if (event.key !== "Enter" || event.isComposing) return; event.preventDefault(); const matches = nodes.filter((item) => `${item.nodeId} ${describeDagNodePurpose(item.nodeId, item)}`.toLocaleLowerCase().includes(search.value.trim().toLocaleLowerCase())); if (!matches.length) return; const index = matches.findIndex((item) => item.nodeId === uiState.selectedDagNodeId); const node = matches[(index + 1) % matches.length]; center(node.nodeId); selectDagNode(dagRunId, node.nodeId); }); toolbar.appendChild(search);
+	if (focusedNodeId) findNode(focusedNodeId)?.focus?.({ preventScroll: true });
+	else if (focusedAction) [...toolbar.querySelectorAll("[data-graph-action]")].find((item) => item.dataset.graphAction === focusedAction)?.focus?.({ preventScroll: true });
 	// Toolbar is rebuilt each paint; bind reset to the current viewport/dagRunId.
 	// 重置视图只重置当前模式的 viewport：不切换模式、不重置另一模式、不关闭 Inspector。
 	reset.addEventListener("click", () => {
+		viewport.dataset.scale = "1";
+		const svg = viewport.querySelector("svg.dag-graph");
+		if (svg) { svg.style.width = `${svg.getAttribute("width")}px`; svg.style.height = `${svg.getAttribute("height")}px`; }
 		if (mode === "trajectory") {
 			uiState.dagTrajectoryViewportState = updateDagTrajectoryViewportState(
 				uiState.dagTrajectoryViewportState,