@tea-agent/loop-agent 0.1.0-fe-test.0

package/dist/worker/observe/static/operator-chrome.js

@@ -0,0 +1,623 @@
+/**
+ * Operator Chrome — 统一壳（Operate React 与 Inspect vanilla 共用唯一实现）。
+ *
+ * 设计真源：docs/design/archive/2026-08-09-unified-operator-chrome.md
+ * - 一条 chrome 两条带：Band1 全局（品牌/仓库身份/模式分段控件/对象上下文/状态格），
+ *   Band2 工作区（下划线 tab，随模式切换内容）。
+ * - 模式语义：操作=做，观测=看同一对象；模式切换在持有 DAG 选中时不丢对象。
+ * - Inspect 永不提供写入口；需要动作时跳回操作侧。
+ *
+ * 纯函数（parse/build/resolve）不触碰 DOM，node 侧可直接单测；
+ * mountOperatorChrome 仅在浏览器环境调用。
+ */
+
+export const OPERATE_TABS = Object.freeze([
+	{ id: "chat", label: "对话", href: "#/chat" },
+	{ id: "tasks", label: "任务", href: "#/tasks" },
+	{ id: "recovery", label: "恢复", href: "#/recovery" },
+	{ id: "night", label: "夜间", href: "#/night" },
+	{ id: "models", label: "模型与认证", href: "#/models" },
+	{ id: "settings", label: "设置", href: "#/settings" },
+]);
+
+export const INSPECT_TABS = Object.freeze([
+	{ id: "dashboard", label: "总览", href: "#/" },
+	{ id: "pool", label: "资源池", href: "#/pool" },
+	{ id: "failures", label: "异常 Task", href: "#/failures" },
+]);
+
+export const READINESS_LABELS = Object.freeze({
+	"setup-required": "需要设置",
+	ready: "已就绪",
+	degraded: "降级可用",
+	unknown: "未知",
+});
+
+const CONTEXT_KIND_LABELS = Object.freeze({
+	dag: "DAG",
+	run: "Run",
+	task: "Task",
+	feature: "Feature",
+	batch: "Batch",
+	night: "夜间",
+});
+
+/** 支持返回操作侧的对象视图 → 返回落地工作区。v1 仅接通 recovery 闭环。 */
+const RETURNABLE_VIEWS = new Set(["dag", "run"]);
+
+function splitHash(hashValue) {
+	const raw = String(hashValue ?? "").replace(/^#/, "");
+	const qIndex = raw.indexOf("?");
+	const path = (qIndex >= 0 ? raw.slice(0, qIndex) : raw) || "/";
+	const query = qIndex >= 0 ? new URLSearchParams(raw.slice(qIndex + 1)) : null;
+	return { path, query };
+}
+
+function decode(value) {
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return null;
+	}
+}
+
+/** 与 router.js 同形的最小对象视图解析（只读 chrome 用，不替代路由）。 */
+export function parseInspectObjectView(hashValue) {
+	const { path } = splitHash(hashValue);
+	const match = /^\/(dag|run|task|feature|batch|night)\/([^/]+)$/.exec(path);
+	if (!match) return null;
+	const id = decode(match[2]);
+	if (!id) return null;
+	return { view: match[1], id };
+}
+
+/**
+ * Inspect 当前 hash 应高亮的工作区 tab href。
+ * 三个一级集合视图映射到各自 tab；下钻/对象页（dag/dags/run/night 等）
+ * 不高亮任何 tab——位置由面包屑与上下文 chip 表达（`#/dags` 自 0.33.0
+ * 起是独立历史分页页，不再是总览滚动别名）。
+ */
+export function activeInspectTabHref(hashValue) {
+	const { path } = splitHash(hashValue);
+	if (path === "/" || path === "") return "#/";
+	if (path === "/pool" || path.startsWith("/task/")) return "#/pool";
+	if (path === "/failures") return "#/failures";
+	if (path.startsWith("/feature/")) return "#/";
+	return null;
+}
+
+/**
+ * 对象上下文 chip 的选中模型。仅当 URL 携带 from 来源（如 from=recovery）
+ * 且当前为可返回对象视图时返回；否则为 null（chip 不出现）。
+ */
+export function parseInspectContext(hashValue) {
+	const objectView = parseInspectObjectView(hashValue);
+	if (!objectView || !RETURNABLE_VIEWS.has(objectView.view)) return null;
+	const { query } = splitHash(hashValue);
+	const from = query?.get("from") ?? null;
+	if (from !== "recovery") return null;
+	const returnParams = new URLSearchParams();
+	if (objectView.view === "dag") returnParams.set("dagRunId", objectView.id);
+	const suffix = returnParams.toString();
+	return {
+		view: objectView.view,
+		id: objectView.id,
+		from,
+		kindLabel: CONTEXT_KIND_LABELS[objectView.view] ?? objectView.view,
+		returnHref: `/#/recovery${suffix ? `?${suffix}` : ""}`,
+		returnLabel: "返回 恢复",
+	};
+}
+
+/** 从 Inspect 切回操作侧：持有 DAG 选中时不丢对象（换动作不换对象）。 */
+export function resolveOperateHrefFromInspectHash(hashValue) {
+	const objectView = parseInspectObjectView(hashValue);
+	if (objectView?.view === "dag") {
+		return `/#/recovery?dagRunId=${encodeURIComponent(objectView.id)}`;
+	}
+	// 2026-08-16: 无持有对象时默认落到对话页（与 Console 默认 landing 一致）。
+	return "/#/chat";
+}
+
+/** Inspect DAG 详情 → Operate Recovery 协作中止深链（只改导航，不发 mutation）。 */
+export function buildOperateInterruptHref(dagRunId) {
+	return `/#/recovery?dagRunId=${encodeURIComponent(dagRunId)}&intent=interrupt`;
+}
+
+/** 操作侧 → Inspect 的 canonical 深链（可携带 from 以激活上下文 chip）。 */
+export function buildInspectDagHref(dagRunId, options = {}) {
+	const base = `/inspect/#/dag/${encodeURIComponent(dagRunId)}`;
+	return options.from === "recovery" ? `${base}?from=recovery` : base;
+}
+
+/** 清除跨模式来源标记，但保留对象页上的其它查询参数与当前历史位置。 */
+export function clearInspectContextSource(hashValue) {
+	const { path, query } = splitHash(hashValue);
+	const nextQuery = new URLSearchParams(query ?? undefined);
+	nextQuery.delete("from");
+	const suffix = nextQuery.toString();
+	return `#${path}${suffix ? `?${suffix}` : ""}`;
+}
+
+export function repoBaseName(repoRoot) {
+	const parts = String(repoRoot ?? "")
+		.split(/[\\/]/)
+		.filter(Boolean);
+	return parts.at(-1) ?? "";
+}
+
+export function shortFingerprint(fingerprint) {
+	const raw = String(fingerprint ?? "").trim();
+	return raw ? raw.slice(0, 6) : "";
+}
+
+/** 统一/兼容 health 负载 → chrome 状态槽。缺字段时降级为 unknown。 */
+export function chromeStateFromHealth(body) {
+	const health = body && typeof body === "object" ? body : {};
+	const readiness =
+		typeof health.piReadiness === "string" ? health.piReadiness : "unknown";
+	return {
+		readiness,
+		readinessLabel: READINESS_LABELS[readiness] ?? readiness,
+		repo: {
+			name: health.repoName || repoBaseName(health.repoRoot) || "repository",
+			fingerprint: health.repoFingerprint ?? "",
+			version: health.packageVersion ?? "",
+			product: health.productName ?? health.product ?? "",
+			inspectReady: health.inspect?.ready,
+		},
+	};
+}
+
+/**
+ * 统一 chrome 的声明式模型。Operate（React 包装）与 Inspect（vanilla 挂载）
+ * 共用同一份模型结构，保证 DOM 契约一致。
+ */
+export function buildOperatorChromeModel(config) {
+	const mode = config.mode === "inspect" ? "inspect" : "operate";
+	const tabs = (mode === "inspect" ? INSPECT_TABS : OPERATE_TABS).map(
+		(tab) => ({
+			...tab,
+			active: tab.href === (config.activeTabHref ?? null),
+		}),
+	);
+	const state = config.readinessState ?? "unknown";
+	return {
+		mode,
+		homeHref: mode === "inspect" ? "/inspect/#/" : "/#/",
+		brand: "Loop Agent",
+		repo: config.repo ?? null,
+		modeButtons: [
+			{
+				id: "operate",
+				label: "操作",
+				// 2026-08-16: 默认落到对话页，与 Console 默认 landing（chat）一致。
+				href: config.operateHref ?? "/#/chat",
+				active: mode === "operate",
+			},
+			{
+				id: "inspect",
+				label: "观测",
+				href: config.inspectHref ?? "/inspect/#/",
+				active: mode === "inspect",
+			},
+		],
+		context: config.context ?? null,
+		freshness: mode === "inspect" && config.freshness !== false,
+		pi: {
+			state,
+			label: READINESS_LABELS[state] ?? state,
+			href:
+				config.readinessHref ?? (mode === "inspect" ? "/#/models" : "#/models"),
+			title: config.readinessTitle ?? "",
+		},
+		tabs,
+		tabsAriaLabel: mode === "inspect" ? "观测看板" : "操作工作区",
+	};
+}
+
+/* ---------------- 以下为浏览器 DOM 挂载层 ---------------- */
+
+const SVG_NS = "http:" + "//www.w3.org/2000/svg";
+const ICONS = Object.freeze({
+	radar: {
+		size: 17,
+		parts: [
+			["circle", { cx: 12, cy: 12, r: 9 }],
+			["circle", { cx: 12, cy: 12, r: 4.5 }],
+			["path", { d: "M12 12 L18 6" }],
+		],
+	},
+	zap: {
+		size: 13,
+		join: "round",
+		parts: [["path", { d: "M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2z" }]],
+	},
+	eye: {
+		size: 13,
+		parts: [
+			[
+				"path",
+				{
+					d: "M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z",
+				},
+			],
+			["circle", { cx: 12, cy: 12, r: 2.8 }],
+		],
+	},
+	branch: {
+		size: 13,
+		parts: [
+			["circle", { cx: 6, cy: 6, r: 2.4 }],
+			["circle", { cx: 6, cy: 18, r: 2.4 }],
+			["circle", { cx: 18, cy: 8, r: 2.4 }],
+			["path", { d: "M6 8.4v7.2M8.2 6.9 15.8 8" }],
+		],
+	},
+	chevron: {
+		size: 10,
+		strokeWidth: 2.4,
+		parts: [["path", { d: "m6 9 6 6 6-6" }]],
+	},
+	chevronUp: {
+		size: 10,
+		strokeWidth: 2.4,
+		parts: [["path", { d: "m6 15 6-6 6 6" }]],
+	},
+	arrowLeft: {
+		size: 11,
+		strokeWidth: 2.4,
+		join: "round",
+		parts: [["path", { d: "M19 12H5m6-7-7 7 7 7" }]],
+	},
+	close: {
+		size: 10,
+		strokeWidth: 2.4,
+		parts: [["path", { d: "M18 6 6 18M6 6l12 12" }]],
+	},
+});
+
+function el(tag, className, text) {
+	const node = document.createElement(tag);
+	if (className) node.className = className;
+	if (text !== undefined && text !== null) node.textContent = String(text);
+	return node;
+}
+
+function makeIcon(name) {
+	const span = el("span", "och-icon");
+	const definition = ICONS[name];
+	if (definition) {
+		const svg = document.createElementNS(SVG_NS, "svg");
+		svg.setAttribute("width", String(definition.size));
+		svg.setAttribute("height", String(definition.size));
+		svg.setAttribute("viewBox", "0 0 24 24");
+		svg.setAttribute("fill", "none");
+		svg.setAttribute("stroke", "currentColor");
+		svg.setAttribute("stroke-width", String(definition.strokeWidth ?? 2));
+		svg.setAttribute("stroke-linecap", "round");
+		if (definition.join) svg.setAttribute("stroke-linejoin", definition.join);
+		svg.setAttribute("aria-hidden", "true");
+		for (const [tag, attributes] of definition.parts) {
+			const part = document.createElementNS(SVG_NS, tag);
+			for (const [key, value] of Object.entries(attributes)) {
+				part.setAttribute(key, String(value));
+			}
+			svg.appendChild(part);
+		}
+		span.appendChild(svg);
+	}
+	span.style.display = "inline-flex";
+	return span;
+}
+
+function icon(parent, name) {
+	const span = makeIcon(name);
+	parent.appendChild(span);
+	return span;
+}
+
+let chromeInstanceSequence = 0;
+
+/** 标签带折叠偏好（与 sidebar-split.v1 同惯例的版本化 localStorage）。 */
+const OCH_WORKSPACE_COLLAPSED_KEY = "och-workspace-collapsed.v1";
+
+function readWorkspaceCollapsedPref() {
+	try {
+		return window.localStorage.getItem(OCH_WORKSPACE_COLLAPSED_KEY) === "1";
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * 挂载统一壳。config 见 buildOperatorChromeModel；另外支持：
+ * - healthUrl：提供则挂载后拉取一次，填充仓库身份与 Pi 状态（Inspect 侧用）。
+ * - liveLocation：提供则监听 hashchange，自选高亮 tab、自更新 operateHref 与
+ *   上下文 chip（Inspect 侧用；Operate 侧由 React 包裹层驱动 update）。
+ */
+export function mountOperatorChrome(root, config = {}) {
+	if (!root) throw new Error("mountOperatorChrome: root element is required");
+	root.classList.add("och-host");
+
+	let currentConfig = { ...config };
+	let popoverOpen = false;
+	let healthState = null;
+	let destroyed = false;
+	let freshnessText = "";
+	let workspaceCollapsed = readWorkspaceCollapsedPref();
+	const popoverId = `och-repo-popover-${++chromeInstanceSequence}`;
+
+	function currentModel() {
+		const base = { ...currentConfig };
+		if (base.liveLocation) {
+			const hash = window.location.hash;
+			base.activeTabHref = activeInspectTabHref(hash);
+			base.operateHref = resolveOperateHrefFromInspectHash(hash);
+			base.context = parseInspectContext(hash);
+		}
+		if (healthState) {
+			base.readinessState = healthState.readiness;
+			base.repo = healthState.repo;
+		}
+		return buildOperatorChromeModel(base);
+	}
+
+	function build(model) {
+		freshnessText =
+			root.querySelector("#header-refresh")?.textContent ?? freshnessText;
+		root.textContent = "";
+		const chrome = el("div", "och");
+		const inner = el("div", "och-inner");
+		chrome.appendChild(inner);
+
+		/* Band 1 */
+		const global = el("div", "och-global");
+		inner.appendChild(global);
+
+		const brand = el("a", "och-brand");
+		brand.href = model.homeHref;
+		brand.setAttribute("aria-label", `${model.brand} 首页`);
+		const brandMark = el("img", "och-brand-mark");
+		brandMark.src = "/inspect/favicon.svg";
+		brandMark.alt = "";
+		brandMark.setAttribute("aria-hidden", "true");
+		brand.appendChild(brandMark);
+		brand.appendChild(el("span", null, model.brand));
+		global.appendChild(brand);
+
+		if (model.repo) {
+			const repoBtn = el("button", "och-repo");
+			repoBtn.type = "button";
+			repoBtn.setAttribute("aria-haspopup", "dialog");
+			repoBtn.setAttribute("aria-controls", popoverId);
+			repoBtn.setAttribute("aria-expanded", String(popoverOpen));
+			icon(repoBtn, "branch");
+			repoBtn.appendChild(el("span", "och-repo-name", model.repo.name));
+			const fp = shortFingerprint(model.repo.fingerprint);
+			if (fp) repoBtn.appendChild(el("span", "och-repo-fp", fp));
+			icon(repoBtn, "chevron");
+			global.appendChild(repoBtn);
+
+			const pop = el("div", "och-pop");
+			pop.id = popoverId;
+			pop.hidden = !popoverOpen;
+			pop.setAttribute("role", "dialog");
+			pop.setAttribute("aria-label", "仓库身份");
+			pop.append(el("p", "och-pop-title", "仓库身份"));
+			let inspectState = "—";
+			if (model.repo.inspectReady !== undefined) {
+				inspectState = model.repo.inspectReady ? "ready" : "degraded";
+			}
+			const rows = [
+				["repo", model.repo.name],
+				["fingerprint", model.repo.fingerprint || "—"],
+				["package", model.repo.version || "—"],
+				["surface", "operate + inspect · 同进程"],
+				["inspect", inspectState],
+			];
+			for (const [k, v] of rows) {
+				const kv = el("div", "och-pop-kv");
+				kv.append(el("b", null, k), el("span", null, v));
+				pop.appendChild(kv);
+			}
+			global.appendChild(pop);
+			repoBtn.addEventListener("click", (event) => {
+				event.stopPropagation();
+				popoverOpen = !popoverOpen;
+				repoBtn.setAttribute("aria-expanded", String(popoverOpen));
+				pop.hidden = !popoverOpen;
+			});
+		}
+
+		const modeNav = el("nav", "och-mode");
+		modeNav.setAttribute("aria-label", "产品模式");
+		for (const btn of model.modeButtons) {
+			const a = el("a", `och-mode-btn${btn.active ? " och-on" : ""}`);
+			a.href = btn.href;
+			a.dataset.mode = btn.id;
+			if (btn.active) a.setAttribute("aria-current", "page");
+			a.appendChild(makeIcon(btn.id === "operate" ? "zap" : "eye"));
+			a.appendChild(document.createTextNode(btn.label));
+			modeNav.appendChild(a);
+		}
+		global.appendChild(modeNav);
+
+		if (model.context) {
+			const chip = el("div", "och-context");
+			chip.appendChild(el("span", "och-context-kind", model.context.kindLabel));
+			chip.appendChild(el("span", "och-context-id", model.context.id));
+			const back = el("a", "och-context-return");
+			back.href = model.context.returnHref;
+			back.appendChild(makeIcon("arrowLeft"));
+			back.appendChild(document.createTextNode(model.context.returnLabel));
+			chip.appendChild(back);
+			const close = el("button", "och-context-close");
+			close.type = "button";
+			close.setAttribute("aria-label", "清除选中上下文");
+			icon(close, "close");
+			close.addEventListener("click", () => {
+				currentConfig = { ...currentConfig, context: null };
+				if (currentConfig.liveLocation) {
+					history.replaceState(
+						null,
+						"",
+						clearInspectContextSource(window.location.hash),
+					);
+				}
+				render();
+			});
+			chip.appendChild(close);
+			global.appendChild(chip);
+		}
+
+		global.appendChild(el("span", "och-spacer"));
+
+		if (model.freshness) {
+			const fresh = el("span", "och-fresh");
+			fresh.setAttribute("aria-label", "数据新鲜度");
+			fresh.appendChild(el("span", "och-fresh-dot"));
+			const text = el("span", "och-fresh-text", freshnessText);
+			/* id 保留给 shell-chrome.updateHeaderRefresh 回写。 */
+			text.id = "header-refresh";
+			text.setAttribute("aria-live", "polite");
+			fresh.appendChild(text);
+			global.appendChild(fresh);
+		}
+
+		const pi = el("a", "och-pi");
+		pi.dataset.state = model.pi.state;
+		pi.href = model.pi.href;
+		if (model.pi.title) pi.title = model.pi.title;
+		pi.setAttribute("aria-label", `Pi 就绪：${model.pi.label}`);
+		pi.appendChild(el("span", "och-pi-label", "Pi"));
+		const piState = document.createElement("strong");
+		piState.textContent = model.pi.label;
+		pi.appendChild(piState);
+		global.appendChild(pi);
+
+		/* 标签带折叠切换（收展两态同一按钮，位于全局带右端）。 */
+		const fold = el("button", "och-workspace-fold");
+		fold.type = "button";
+		fold.setAttribute("aria-expanded", String(!workspaceCollapsed));
+		fold.setAttribute("aria-controls", "och-workspace");
+		const foldLabel = workspaceCollapsed ? "展开标签栏" : "收起标签栏";
+		fold.title = foldLabel;
+		fold.setAttribute("aria-label", foldLabel);
+		if (workspaceCollapsed) fold.classList.add("is-folded");
+		fold.appendChild(makeIcon("chevronUp"));
+		fold.addEventListener("click", () => {
+			workspaceCollapsed = !workspaceCollapsed;
+			try {
+				window.localStorage.setItem(
+					OCH_WORKSPACE_COLLAPSED_KEY,
+					workspaceCollapsed ? "1" : "0",
+				);
+			} catch {
+				/* localStorage 不可用时仅保持内存态。 */
+			}
+			const ws = root.querySelector(".och-workspace");
+			const btn = root.querySelector(".och-workspace-fold");
+			if (ws) {
+				ws.classList.toggle(
+					"och-workspace-collapsed",
+					workspaceCollapsed,
+				);
+			}
+			if (btn) {
+				btn.classList.toggle("is-folded", workspaceCollapsed);
+				btn.setAttribute("aria-expanded", String(!workspaceCollapsed));
+				const label = workspaceCollapsed ? "展开标签栏" : "收起标签栏";
+				btn.title = label;
+				btn.setAttribute("aria-label", label);
+			}
+		});
+		global.appendChild(fold);
+
+		/* Band 2 */
+		const workspace = el("div", "och-workspace");
+		workspace.id = "och-workspace";
+		if (workspaceCollapsed) workspace.classList.add("och-workspace-collapsed");
+		inner.appendChild(workspace);
+		const tabs = el("nav", "och-tabs");
+		tabs.setAttribute("aria-label", model.tabsAriaLabel);
+		for (const tab of model.tabs) {
+			const a = el(
+				"a",
+				`och-tab${tab.active ? " och-tab-active" : ""}`,
+				tab.label,
+			);
+			a.href = tab.href;
+			if (tab.active) a.setAttribute("aria-current", "page");
+			tabs.appendChild(a);
+		}
+		workspace.appendChild(tabs);
+
+		root.appendChild(chrome);
+	}
+
+	function render() {
+		build(currentModel());
+	}
+
+	function closePopover({ restoreFocus = false } = {}) {
+		if (!popoverOpen) return;
+		popoverOpen = false;
+		const repoBtn = root.querySelector(".och-repo");
+		const pop = root.querySelector(".och-pop");
+		repoBtn?.setAttribute("aria-expanded", "false");
+		if (pop) pop.hidden = true;
+		if (restoreFocus && repoBtn instanceof HTMLElement) repoBtn.focus();
+	}
+
+	function onHashChange() {
+		if (destroyed || !currentConfig.liveLocation) return;
+		popoverOpen = false;
+		render();
+	}
+
+	function onDocumentClick(event) {
+		if (!popoverOpen || !(event.target instanceof Node)) return;
+		const repoBtn = root.querySelector(".och-repo");
+		const pop = root.querySelector(".och-pop");
+		if (repoBtn?.contains(event.target) || pop?.contains(event.target)) return;
+		closePopover();
+	}
+
+	function onDocumentKeydown(event) {
+		if (event.key === "Escape") closePopover({ restoreFocus: true });
+	}
+
+	window.addEventListener("hashchange", onHashChange);
+	document.addEventListener("click", onDocumentClick);
+	document.addEventListener("keydown", onDocumentKeydown);
+
+	render();
+
+	if (currentConfig.healthUrl && typeof fetch === "function") {
+		fetch(currentConfig.healthUrl, { credentials: "same-origin" })
+			.then((res) => (res.ok ? res.json() : null))
+			.then((body) => {
+				if (destroyed || !body) return;
+				healthState = chromeStateFromHealth(body);
+				render();
+			})
+			.catch(() => {});
+	}
+
+	return {
+		update(nextConfig = {}) {
+			if (destroyed) return;
+			currentConfig = { ...currentConfig, ...nextConfig };
+			render();
+		},
+		destroy() {
+			destroyed = true;
+			window.removeEventListener("hashchange", onHashChange);
+			document.removeEventListener("click", onDocumentClick);
+			document.removeEventListener("keydown", onDocumentKeydown);
+			root.textContent = "";
+			root.classList.remove("och-host");
+		},
+	};
+}