@tea-agent/loop-agent 0.40.0-next.3 → 0.40.0-next.5

package/dist/worker/observe/static/inspect-workspace.js

@@ -0,0 +1,307 @@
+/**
+ * Hosted Inspect workspace adapter.
+ *
+ * Standalone `/inspect/` documents canonicalize into Console `/#/inspect/...`.
+ * Console hosts a single mountInspectWorkspace instance and pauses polls via
+ * setActive(false) without destroying selection/scroll.
+ */
+import {
+	parseHashRouteWithFilters,
+	parseRoute,
+	setNavigateHandler,
+	inspectPathToCanonicalHref,
+} from "./router.js";
+import {
+	isPageVisible,
+	pauseForegroundTimers,
+	setWorkspaceActive,
+	setWorkspaceScope,
+	applyWorkspaceScopeSwitch,
+	stopTimers,
+	uiState,
+	workspaceScope,
+} from "./state.js";
+import { renderFailures } from "./views/failures.js";
+import { startPoolView } from "./views/pool.js";
+import { startDashboardPolling } from "./views/dashboard.js";
+import { startDagsView } from "./views/dags.js";
+import { renderFeatureDetail } from "./views/feature.js";
+import { renderBatch } from "./views/batch.js";
+import { startTaskPolling } from "./views/task.js";
+import { startRunPolling } from "./views/run.js";
+import { startDagPolling } from "./views/dag.js";
+import { renderNightJobs } from "./views/night.js";
+import { closeDagInspectorOnOutsideClick } from "./views/dag-inspector.js";
+import { mountOperatorChrome } from "./operator-chrome.js";
+
+let instance = null;
+let lastInspectHash = "";
+let listenersBound = false;
+
+export function getInspectWorkspaceInstance() {
+	return instance && !instance.destroyed ? instance : null;
+}
+
+export function inspectCanonicalFromStandalone(locationLike) {
+	const loc = locationLike ?? (typeof location !== "undefined" ? location : null);
+	if (!loc) return null;
+	const pathname = String(loc.pathname ?? "/").replace(/\/+$/, "") || "/";
+	if (pathname !== "/inspect") return null;
+	return inspectPathToCanonicalHref(loc.hash || "#/");
+}
+
+export function tryCanonicalizeStandaloneInspect(locationLike) {
+	const loc = locationLike ?? (typeof location !== "undefined" ? location : null);
+	const canonical = inspectCanonicalFromStandalone(loc);
+	if (!canonical || !loc) return false;
+	if (typeof loc.replace === "function") loc.replace(canonical);
+	else if (typeof location !== "undefined" && typeof location.replace === "function") {
+		location.replace(canonical);
+	}
+	return true;
+}
+
+export function navigateInspectPath(path) {
+	const href = inspectPathToCanonicalHref(path);
+	if (instance && typeof instance.onNavigate === "function") {
+		instance.onNavigate(href);
+		return href;
+	}
+	if (typeof location !== "undefined") {
+		location.hash = href.startsWith("/#") ? href.slice(1) : href;
+	}
+	return href;
+}
+
+function startView(routeValue) {
+	if (routeValue.view === "dashboard") {
+		startDashboardPolling(routeValue.scrollTo);
+	} else if (routeValue.view === "dags") {
+		void startDagsView();
+	} else if (routeValue.view === "batch") {
+		void renderBatch(routeValue.batchRunId);
+	} else if (routeValue.view === "run") {
+		startRunPolling(routeValue.workerRunId);
+	} else if (routeValue.view === "dag") {
+		startDagPolling(routeValue.dagRunId);
+	} else if (routeValue.view === "failures") {
+		void renderFailures();
+	} else if (routeValue.view === "pool") {
+		startPoolView();
+	} else if (routeValue.view === "night") {
+		void renderNightJobs(routeValue.scheduleId);
+	} else if (routeValue.view === "task") {
+		startTaskPolling(routeValue.featureId, routeValue.taskId);
+	} else if (routeValue.view === "feature") {
+		void renderFeatureDetail(routeValue.featureId);
+	}
+}
+
+export function route(hashValue) {
+	stopTimers();
+	const parsed = hashValue
+		? parseHashRouteWithFilters(hashValue)
+		: parseRoute();
+	startView(parsed);
+}
+
+function resumeView(hashValue) {
+	const parsed = hashValue
+		? parseHashRouteWithFilters(hashValue)
+		: parseRoute();
+	startView(parsed);
+}
+
+function ensureStylesheet(href) {
+	if (typeof document === "undefined") return;
+	if (document.querySelector(`link[href="${href}"]`)) return;
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = href;
+	document.head.appendChild(link);
+}
+
+export async function prepareInspectWorkspace(root) {
+	if (!root || typeof document === "undefined") return;
+	if (root.querySelector("#main-content")) return;
+	ensureStylesheet("/inspect/styles.css");
+	ensureStylesheet("/inspect/operator-chrome.css");
+	const res = await fetch("/inspect/", { credentials: "same-origin" });
+	if (!res.ok) {
+		throw new Error(`Inspect markup HTTP ${res.status}`);
+	}
+	const html = await res.text();
+	const doc = new DOMParser().parseFromString(html, "text/html");
+	const app = doc.getElementById("app");
+	if (!app) throw new Error("Inspect markup missing #app");
+	root.appendChild(document.importNode(app, true));
+}
+
+function bindStandaloneListeners() {
+	if (listenersBound || typeof window === "undefined") return;
+	listenersBound = true;
+	window.addEventListener("hashchange", () => route());
+	window.addEventListener("load", () => route());
+	document.addEventListener("pointerdown", closeDagInspectorOnOutsideClick);
+	document.addEventListener("visibilitychange", () => {
+		if (!isPageVisible()) return;
+		const r = parseRoute();
+		if (r.view === "dashboard") startDashboardPolling();
+		if (r.view === "run") startRunPolling(r.workerRunId, false);
+		if (r.view === "dag") startDagPolling(r.dagRunId, false);
+		if (r.view === "pool" && uiState.poolAutoRefresh) startPoolView();
+		if (r.view === "task") startTaskPolling(r.featureId, r.taskId);
+	});
+}
+
+export function startStandaloneInspect() {
+	if (typeof window === "undefined") return;
+	// Multi-workspace (AC-003): sync scope from the URL query before any fetch.
+	syncWorkspaceScopeFromLocation();
+	window.addEventListener("hashchange", syncWorkspaceScopeFromLocation);
+	const chromeHost = document.getElementById("operator-chrome");
+	if (chromeHost) {
+		mountOperatorChrome(chromeHost, {
+			mode: "inspect",
+			liveLocation: true,
+			healthUrl: "/api/health",
+			inspectHref: "/#/inspect",
+			operateHref: "/#/operate/tasks",
+			chatHref: "/#/chat",
+			readinessHref: "/#/operate/models",
+			readinessTitle:
+				"Pi 状态（只读展示）。模型与认证管理在操作侧，点击进入。",
+			onNavigate: (href) => {
+				navigateInspectPath(href);
+			},
+		});
+	}
+	setNavigateHandler((href) => {
+		if (href.startsWith("/#/operate") || href.startsWith("/#/chat")) {
+			window.location.assign(href);
+			return;
+		}
+		window.location.hash = href.startsWith("/#") ? href.slice(1) : href;
+	});
+	bindStandaloneListeners();
+	route();
+}
+
+export function mountInspectWorkspace(root, options = {}) {
+	const existing = getInspectWorkspaceInstance();
+	if (existing) {
+		if (typeof options.onNavigate === "function") {
+			existing.onNavigate = options.onNavigate;
+			setNavigateHandler(options.onNavigate);
+		}
+		if (options.hash) existing.updateRoute(options.hash);
+		if (options.active === false) existing.setActive(false);
+		else if (options.active === true) existing.setActive(true);
+		return existing;
+	}
+
+	// Multi-workspace (AC-002/AC-003): hosted mode receives the parent shell's
+	// workspaceId via mount options/hash and postMessage updates; every observe
+	// GET is then scoped via scopedApiUrl.
+	setWorkspaceScope(options.workspaceId ?? workspaceIdFromHash(options.hash));
+	window.addEventListener("message", onWorkspaceScopeMessage);
+
+	const hosted = options.hosted === true || options.hosted !== false;
+	const onNavigate =
+		typeof options.onNavigate === "function"
+			? options.onNavigate
+			: (href) => navigateInspectPath(href);
+
+	setNavigateHandler(onNavigate);
+	lastInspectHash = options.hash || (typeof location !== "undefined" ? location.hash : "");
+	setWorkspaceActive(options.active !== false);
+
+	const host = {
+		root,
+		hosted,
+		destroyed: false,
+		onNavigate,
+		updateRoute(hashValue) {
+			if (host.destroyed) return;
+			lastInspectHash = hashValue || lastInspectHash;
+			if (!uiState.workspaceActive) return;
+			// AC-006: a hosted route update that carries a DIFFERENT workspaceId
+			// must not route under the old scope. Swap atomically:
+			// abort → clear → set scope → route new.
+			const nextScope = workspaceIdFromHash(lastInspectHash);
+			if (nextScope && nextScope !== workspaceScope()) {
+				applyWorkspaceScopeSwitch(nextScope, () => route(lastInspectHash));
+				return;
+			}
+			route(lastInspectHash);
+		},
+		setActive(active) {
+			if (host.destroyed) return;
+			const next = Boolean(active);
+			const wasActive = uiState.workspaceActive !== false;
+			setWorkspaceActive(next);
+			if (!next) {
+				pauseForegroundTimers();
+				return;
+			}
+			if (!wasActive) resumeView(lastInspectHash);
+		},
+		destroy() {
+			host.destroyed = true;
+			pauseForegroundTimers();
+			setNavigateHandler(null);
+			if (instance === host) instance = null;
+		},
+	};
+	instance = host;
+	if (options.autoStart !== false && !hosted) {
+		bindStandaloneListeners();
+		route(lastInspectHash);
+	}
+	return host;
+}
+
+/** Extract ?workspaceId= from a canonical console hash (e.g. #/inspect?workspaceId=ws-a). */
+function workspaceIdFromHash(hashValue) {
+	const raw = String(hashValue ?? "").replace(/^#/, "");
+	const qIndex = raw.indexOf("?");
+	if (qIndex < 0) return null;
+	const id = new URLSearchParams(raw.slice(qIndex + 1)).get("workspaceId");
+	return id?.trim() || null;
+}
+
+function syncWorkspaceScopeFromLocation() {
+	if (typeof window === "undefined") return;
+	const next =
+		workspaceIdFromHash(window.location.hash) ??
+		workspaceIdFromSearch(window.location.search);
+	// Atomic scope swap (AC-006): abort old timers → clear old state → set
+	// scope → re-route with the new scope. A no-op change (same scope) only
+	// publishes the scope without tearing the live view down.
+	if (next === workspaceScope()) {
+		setWorkspaceScope(next);
+		return;
+	}
+	applyWorkspaceScopeSwitch(next, () => route());
+}
+
+function workspaceIdFromSearch(search) {
+	const params = new URLSearchParams(String(search ?? ""));
+	const id = params.get("workspaceId");
+	return id?.trim() || null;
+}
+
+function onWorkspaceScopeMessage(event) {
+	const data = event?.data;
+	if (!data || typeof data !== "object") return;
+	if (data.type !== "loop-console:workspace-scope") return;
+	const next = typeof data.workspaceId === "string" ? data.workspaceId : null;
+	if (next === workspaceScope()) {
+		setWorkspaceScope(next);
+		return;
+	}
+	// Atomic scope swap (AC-006): abort → clear → set → re-route. The hosted
+	// view is re-routed (remounted from the new scope) so no observe GET can
+	// fire with the previous workspaceId after the message lands.
+	applyWorkspaceScopeSwitch(next, () => route());
+}

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

@@ -9,15 +9,15 @@
  */
 
 .och {
-	--och-canvas: var(--canvas, #f7f7f4);
-	--och-surface: var(--surface, #ffffff);
-	--och-surface-muted: var(--surface-muted, #f0efe9);
-	--och-ink: var(--ink, #26251e);
-	--och-body: var(--body, #5a5852);
-	--och-muted: var(--muted, #807d72);
-	--och-muted-soft: var(--muted-soft, #a09c92);
-	--och-hairline: var(--hairline, #e6e5e0);
-	--och-hairline-strong: var(--hairline-strong, #cfcdc4);
+	--och-canvas: var(--canvas, #f3f4f6);
+	--och-surface: var(--surface, #fbfcfd);
+	--och-surface-muted: var(--surface-muted, #eceef1);
+	--och-ink: var(--ink, #202124);
+	--och-body: var(--body, #50545b);
+	--och-muted: var(--muted, #767b84);
+	--och-muted-soft: var(--muted-soft, #9ca1aa);
+	--och-hairline: var(--hairline, #e1e3e7);
+	--och-hairline-strong: var(--hairline-strong, #cfd2d8);
 	--och-orange: var(--orange, #f54e00);
 	--och-orange-active: var(--orange-active, #d04200);
 	--och-green: var(--green, #1f8a65);
@@ -40,14 +40,16 @@
 	top: 0;
 	z-index: 50;
 	border-bottom: 1px solid var(--och-hairline);
-	background: color-mix(in srgb, var(--och-canvas) 88%, transparent);
+	background: var(--canvas-soft, var(--och-surface));
 	backdrop-filter: blur(12px);
 	-webkit-backdrop-filter: blur(12px);
 	font-family: inherit;
 }
 
 .och-inner {
-	width: min(100% - 48px, var(--och-shell-max));
+	box-sizing: border-box;
+	width: 100%;
+	padding-inline: 14px;
 	margin: 0 auto;
 }
 
@@ -57,7 +59,8 @@
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	height: 54px;
+	/* DSH 2026-08-23：约 44px 与内容同色的压缩标题栏。 */
+	height: 44px;
 }
 
 .och-brand {
@@ -70,6 +73,7 @@
 	color: var(--och-ink);
 	text-decoration: none;
 	white-space: nowrap;
+	flex-shrink: 0;
 }
 .och-brand-mark {
 	display: block;
@@ -114,6 +118,19 @@
 	color: var(--och-muted);
 }
 
+.och-workspace-picker {
+	position: relative;
+	display: inline-flex;
+	min-width: 0;
+	flex-shrink: 0;
+}
+
+.och-workspace-trigger .och-repo-name {
+	max-width: 180px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .och-pop {
 	position: absolute;
 	top: 50px;
@@ -155,21 +172,122 @@
 	word-break: break-all;
 }
 
+.och-workspace-picker .och-pop {
+	top: 36px;
+	left: 0;
+	width: min(340px, calc(100vw - 28px));
+	min-width: 260px;
+	padding: 8px;
+}
+.och-workspace-picker .och-pop-title {
+	padding: 5px 7px 7px;
+	margin: 0;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	color: var(--och-muted);
+}
+.och-workspace-option {
+	appearance: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	width: 100%;
+	min-height: 48px;
+	padding: 7px 8px;
+	border: 0;
+	border-radius: 9px;
+	background: transparent;
+	color: var(--och-body);
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+.och-workspace-option:hover,
+.och-workspace-option:focus-visible,
+.och-workspace-option[aria-checked="true"] {
+	background: color-mix(in srgb, var(--och-ink) 7%, transparent);
+	color: var(--och-ink);
+}
+.och-workspace-option-copy {
+	display: grid;
+	min-width: 0;
+	gap: 2px;
+}
+.och-workspace-option strong,
+.och-workspace-option small {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.och-workspace-option strong {
+	font-size: 13px;
+	font-weight: 650;
+}
+.och-workspace-option small {
+	font-size: 11px;
+	color: var(--och-muted);
+}
+.och-workspace-option > .och-icon {
+	color: var(--och-orange-active);
+	flex-shrink: 0;
+}
+.och-workspace-empty {
+	margin: 0;
+	padding: 12px 8px;
+	color: var(--och-muted);
+}
+
 /* 模式分段控件：全局唯一模式入口（重语法：ink 实底） */
 .och-mode {
-	display: inline-flex;
+	--och-mode-item-width: 92px;
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, var(--och-mode-item-width));
 	padding: 3px;
 	border: 1px solid var(--och-hairline);
 	border-radius: 999px;
 	background: var(--och-surface-muted);
 	flex-shrink: 0;
 }
+
+/* The product-mode switch is viewport-centered in Chat, Operate and Inspect;
+ * changing the active workspace must never move this global navigation. */
+@media (min-width: 720px) {
+	.och-mode {
+		position: fixed;
+		top: 3px;
+		left: 50vw;
+		transform: translateX(-50%);
+	}
+}
+/* DSH 2026-08-23：共享椭圆滑块，160-220ms 移动到选中椭圆。 */
+.och-mode-thumb {
+	position: absolute;
+	left: 0;
+	top: 0;
+	border-radius: 999px;
+	background: var(--och-ink);
+	box-shadow: 0 2px 8px rgba(38, 37, 30, 0.25);
+	transition: none;
+	pointer-events: none;
+}
+.och-mode-thumb.is-ready {
+	transition:
+		transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		width 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		height 190ms cubic-bezier(0.22, 1, 0.36, 1),
+		opacity 160ms ease;
+}
 .och-mode-btn {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	gap: 6px;
-	min-width: 92px;
+	box-sizing: border-box;
+	width: var(--och-mode-item-width);
+	min-width: var(--och-mode-item-width);
 	height: 30px;
 	padding: 0 14px;
 	border-radius: 999px;
@@ -190,9 +308,14 @@
 }
 .och-mode-btn.och-on,
 .och-mode-btn.och-on:hover {
-	background: var(--och-ink);
+	/* 滑块提供选中背景；文字反色保持可读。 */
 	color: #fff;
-	box-shadow: 0 2px 8px rgba(38, 37, 30, 0.25);
+	background: transparent;
+	box-shadow: none;
+}
+.och-mode-btn {
+	position: relative;
+	z-index: 1;
 }
 
 /* 对象上下文 chip：跨模式选中连续性 + 显式返回路径 */
@@ -452,9 +575,6 @@
 	.och-repo-fp {
 		display: none;
 	}
-	.och-mode-btn {
-		min-width: 0;
-	}
 	.och-workspace {
 		overflow-x: auto;
 	}
@@ -481,7 +601,7 @@
 
 @media (max-width: 760px) {
 	.och-inner {
-		width: min(100% - 24px, var(--och-shell-max));
+		padding-inline: 12px;
 	}
 	.och-global {
 		gap: 6px;
@@ -502,6 +622,9 @@
 	.och-mode-btn {
 		padding-inline: 10px;
 	}
+	.och-mode {
+		--och-mode-item-width: 78px;
+	}
 	.och-tab {
 		padding-inline: 10px;
 	}
@@ -509,6 +632,8 @@
 
 @media (prefers-reduced-motion: reduce) {
 	.och-mode-btn,
+	.och-mode-thumb,
+	.och-mode-thumb.is-ready,
 	.och-tab,
 	.och-repo,
 	.och-pi {

package/dist/worker/observe/static/operator-chrome.d.ts

@@ -25,20 +25,33 @@ export type ChromeRepoInfo = {
 	inspectReady?: boolean;
 };
 
+export type ChromeWorkspaceSwitcher = {
+	activeId: string | null;
+	loading: boolean;
+	items: Array<{
+		workspaceId: string;
+		name: string;
+		displayPath: string;
+	}>;
+};
+
 export type ChromeModel = {
-	mode: "operate" | "inspect";
+	mode: "chat" | "operate" | "inspect";
 	homeHref: string;
 	brand: string;
 	repo: ChromeRepoInfo | null;
+	workspaceSwitcher: ChromeWorkspaceSwitcher | null;
 	modeButtons: Array<{
-		id: "operate" | "inspect";
+		id: "chat" | "operate" | "inspect";
 		label: string;
 		href: string;
 		active: boolean;
 	}>;
 	context: InspectContext | null;
 	freshness: boolean;
+	statusVisible: boolean;
 	pi: { state: string; label: string; href: string; title: string };
+	workspaceTabsVisible: boolean;
 	tabs: Array<OperatorChromeTab & { active: boolean }>;
 	tabsAriaLabel: string;
 };
@@ -63,16 +76,20 @@ export function chromeStateFromHealth(body: unknown): {
 	repo: ChromeRepoInfo;
 };
 export function buildOperatorChromeModel(config: {
-	mode: "operate" | "inspect";
+	mode: "chat" | "operate" | "inspect";
 	activeTabHref?: string | null;
+	chatHref?: string;
 	operateHref?: string;
 	inspectHref?: string;
 	readinessState?: string;
 	readinessHref?: string;
 	readinessTitle?: string;
 	repo?: ChromeRepoInfo | null;
+	workspaceSwitcher?: ChromeWorkspaceSwitcher | null;
+	statusVisible?: boolean;
 	freshness?: boolean;
 	context?: InspectContext | null;
+	onSelectWorkspace?: (workspaceId: string) => void;
 }): ChromeModel;
 export function mountOperatorChrome(
 	root: HTMLElement,