@tea-agent/loop-agent 0.32.1 → 0.33.1

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

@@ -1,7 +1,6 @@
-/** KPI cards, repo banner, projection fault, artifact/inbox links. */
+/** KPI cards, projection fault, artifact/inbox links. */
 import { UI_TEXT } from "./constants.js";
-import { clearNode, el } from "./dom.js";
-import { formatRepoPathDisplay, repoBaseName } from "./format.js";
+import { el } from "./dom.js";
 import { navigate } from "./router.js";
 
 export function failuresInboxLink(count) {
@@ -55,27 +54,6 @@ export function kpiCard(label, value, extraClass, helpText) {
 	return card;
 }
 
-export function renderRepoBanner(repoEl, snapshot) {
-	if (!repoEl) return;
-	clearNode(repoEl);
-	const repoRoot = snapshot.repoRoot ?? "";
-	const iconWrap = el("span", "repo-banner-icon");
-	const icon = el("i", "ri-git-repository-line");
-	icon.setAttribute("aria-hidden", "true");
-	iconWrap.appendChild(icon);
-	repoEl.appendChild(iconWrap);
-	const text = el("div", "repo-banner-text");
-	text.appendChild(el("span", "repo-banner-name", repoBaseName(repoRoot)));
-	const pathLine = el(
-		"span",
-		"repo-banner-path",
-		formatRepoPathDisplay(repoRoot),
-	);
-	pathLine.title = repoRoot || "路径未知";
-	text.appendChild(pathLine);
-	repoEl.appendChild(text);
-}
-
 export function renderProjectionFault(error) {
 	const banner = el("div", "projection-fault");
 	banner.setAttribute("role", "alert");

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

@@ -0,0 +1,480 @@
+/**
+ * Operator Chrome — 统一壳样式（Operate 与 Inspect 共用唯一来源）。
+ *
+ * 由统一 Console server 同时服务两侧：
+ *   - Inspect（/inspect/）以相对路径引入本文件；
+ *   - Operate（/）经 /inspect/operator-chrome.css 引入。
+ * 变量默认回退值与 observe/static/styles.css 及 console/static-src/styles.css
+ * 的暖白 token 保持一致；宿主样式表已定义同名变量时以宿主为准。
+ */
+
+.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-orange: var(--orange, #f54e00);
+	--och-orange-active: var(--orange-active, #d04200);
+	--och-green: var(--green, #1f8a65);
+	--och-amber: var(--amber, #a66a00);
+	--och-red: var(--red, #c72d53);
+	--och-mint: var(--mint, #d8ead5);
+	--och-peach: var(--peach, #f1d8cb);
+	--och-mono: var(
+		--font-mono,
+		"JetBrains Mono",
+		ui-monospace,
+		SFMono-Regular,
+		Menlo,
+		Consolas,
+		monospace
+	);
+	--och-shell-max: var(--shell-max, 1680px);
+
+	position: sticky;
+	top: 0;
+	z-index: 50;
+	border-bottom: 1px solid var(--och-hairline);
+	background: color-mix(in srgb, var(--och-canvas) 88%, transparent);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	font-family: inherit;
+}
+
+.och-inner {
+	width: min(100% - 48px, var(--och-shell-max));
+	margin: 0 auto;
+}
+
+/* Band 1 — 全局带：品牌 / 仓库身份 / 模式 / 对象上下文 / 状态格 */
+.och-global {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	height: 54px;
+}
+
+.och-brand {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 700;
+	letter-spacing: 0.01em;
+	color: var(--och-ink);
+	text-decoration: none;
+	white-space: nowrap;
+}
+.och-brand svg {
+	color: var(--och-orange);
+	flex-shrink: 0;
+}
+.och-brand:hover {
+	color: var(--och-orange-active);
+}
+
+.och-repo {
+	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 30px;
+	padding: 0 11px;
+	border: 1px solid var(--och-hairline);
+	border-radius: 999px;
+	background: var(--och-surface);
+	color: var(--och-body);
+	font-size: 12px;
+	font-family: inherit;
+	white-space: nowrap;
+	cursor: pointer;
+	transition:
+		border-color 0.15s ease,
+		color 0.15s ease;
+}
+.och-repo:hover {
+	border-color: var(--och-hairline-strong);
+	color: var(--och-ink);
+}
+.och-repo svg {
+	color: var(--och-muted);
+}
+.och-repo-fp {
+	font-family: var(--och-mono);
+	font-size: 11px;
+	color: var(--och-muted);
+}
+
+.och-pop {
+	position: absolute;
+	top: 50px;
+	left: 150px;
+	z-index: 60;
+	min-width: 300px;
+	padding: 14px 16px;
+	border: 1px solid var(--och-hairline);
+	border-radius: 14px;
+	background: var(--och-surface);
+	box-shadow: 0 8px 32px rgba(38, 37, 30, 0.14);
+	font-size: 12px;
+	color: var(--och-body);
+}
+.och-pop[hidden] {
+	display: none;
+}
+.och-pop-title {
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--och-ink);
+	margin: 0 0 8px;
+}
+.och-pop-kv {
+	display: flex;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 4px 0;
+}
+.och-pop-kv b {
+	font-weight: 500;
+	color: var(--och-muted);
+}
+.och-pop-kv span {
+	font-family: var(--och-mono);
+	font-size: 11.5px;
+	color: var(--och-ink);
+	text-align: right;
+	word-break: break-all;
+}
+
+/* 模式分段控件：全局唯一模式入口（重语法：ink 实底） */
+.och-mode {
+	display: inline-flex;
+	padding: 3px;
+	border: 1px solid var(--och-hairline);
+	border-radius: 999px;
+	background: var(--och-surface-muted);
+	flex-shrink: 0;
+}
+.och-mode-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	min-width: 92px;
+	height: 30px;
+	padding: 0 14px;
+	border-radius: 999px;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--och-body);
+	text-decoration: none;
+	transition:
+		color 0.18s ease,
+		background-color 0.18s ease,
+		box-shadow 0.18s ease;
+}
+.och-mode-btn svg {
+	opacity: 0.85;
+}
+.och-mode-btn:hover {
+	color: var(--och-ink);
+}
+.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);
+}
+
+/* 对象上下文 chip：跨模式选中连续性 + 显式返回路径 */
+.och-context {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 30px;
+	padding: 0 6px 0 12px;
+	border: 1px solid
+		color-mix(in srgb, var(--och-orange) 38%, var(--och-hairline));
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--och-peach) 42%, var(--och-surface));
+	font-size: 12px;
+	color: var(--och-ink);
+	white-space: nowrap;
+}
+.och-context[hidden] {
+	display: none;
+}
+.och-context-kind {
+	color: var(--och-orange-active);
+	font-weight: 700;
+}
+.och-context-id {
+	font-family: var(--och-mono);
+	font-size: 11px;
+	color: var(--och-body);
+	max-width: 260px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.och-context-return {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	height: 22px;
+	padding: 0 9px;
+	border-radius: 999px;
+	background: var(--och-ink);
+	color: #fff;
+	font-size: 11px;
+	font-weight: 600;
+	text-decoration: none;
+}
+.och-context-return:hover {
+	background: var(--och-orange-active);
+}
+.och-context-close {
+	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--och-muted);
+	cursor: pointer;
+}
+.och-context-close:hover {
+	background: rgba(38, 37, 30, 0.08);
+	color: var(--och-ink);
+}
+
+.och-spacer {
+	flex: 1 1 auto;
+}
+
+/* 新鲜度格（Inspect 模式渲染；元素 id 保持 header-refresh 供轮询回写） */
+.och-fresh {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 30px;
+	padding: 0 12px;
+	border: 1px solid var(--och-hairline);
+	border-radius: 999px;
+	background: var(--och-surface);
+	color: var(--och-muted);
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+.och-fresh-dot {
+	width: 7px;
+	height: 7px;
+	border-radius: 50%;
+	background: var(--och-green);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--och-green) 18%, transparent);
+	flex-shrink: 0;
+}
+
+/* Pi readiness：三态语义色与现行 Console 一致 */
+.och-pi {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 30px;
+	padding: 0 12px;
+	border-radius: 999px;
+	border: 1px solid var(--och-hairline);
+	background: var(--och-surface);
+	font-size: 12px;
+	color: var(--och-body);
+	text-decoration: none;
+	white-space: nowrap;
+	transition: border-color 0.15s ease;
+}
+.och-pi:hover {
+	border-color: var(--och-hairline-strong);
+}
+.och-pi-label {
+	font-family: var(--och-mono);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--och-ink);
+}
+.och-pi strong {
+	font-weight: 600;
+}
+.och-pi[data-state="ready"] {
+	border-color: color-mix(in srgb, var(--och-green) 34%, var(--och-hairline));
+	background: color-mix(in srgb, var(--och-mint) 46%, var(--och-surface));
+}
+.och-pi[data-state="ready"] strong {
+	color: var(--och-green);
+}
+.och-pi[data-state="degraded"] {
+	border-color: color-mix(in srgb, var(--och-amber) 38%, var(--och-hairline));
+	background: color-mix(in srgb, var(--och-peach) 40%, var(--och-surface));
+}
+.och-pi[data-state="degraded"] strong {
+	color: var(--och-amber);
+}
+.och-pi[data-state="setup-required"],
+.och-pi[data-state="unknown"] {
+	border-color: color-mix(in srgb, var(--och-red) 30%, var(--och-hairline));
+	background: color-mix(in srgb, var(--och-red) 5%, var(--och-surface));
+}
+.och-pi[data-state="setup-required"] strong,
+.och-pi[data-state="unknown"] strong {
+	color: var(--och-red);
+}
+
+/* Band 2 — 工作区带：下划线 tab（轻语法，从属于模式控件） */
+.och-workspace {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	height: 44px;
+}
+.och-tabs {
+	display: flex;
+	align-items: stretch;
+	gap: 2px;
+	height: 100%;
+}
+.och-tab {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	padding: 0 13px;
+	color: var(--och-muted);
+	font-size: 13.5px;
+	font-weight: 500;
+	text-decoration: none;
+	white-space: nowrap;
+	transition: color 0.15s ease;
+}
+.och-tab:hover {
+	color: var(--och-ink);
+}
+.och-tab.och-tab-active {
+	color: var(--och-ink);
+	font-weight: 600;
+}
+.och-tab.och-tab-active::after {
+	content: "";
+	position: absolute;
+	left: 10px;
+	right: 10px;
+	bottom: -1px;
+	height: 2px;
+	border-radius: 2px;
+	background: var(--och-orange);
+}
+
+.och a:focus-visible,
+.och button:focus-visible,
+.operator-chrome-fallback button:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--och-orange) 55%, transparent);
+	outline-offset: 2px;
+}
+
+.operator-chrome-fallback {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 54px;
+	padding: 0 24px;
+	border-bottom: 1px solid var(--hairline, #e6e5e0);
+	background: var(--canvas, #f7f7f4);
+}
+.operator-chrome-fallback button {
+	appearance: none;
+	padding: 6px 10px;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 999px;
+	background: var(--surface, #fff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	cursor: pointer;
+}
+.operator-chrome-fallback [role="status"] {
+	color: var(--red, #c72d53);
+	font-size: 12px;
+}
+
+@media (max-width: 1100px) {
+	.och-repo-fp {
+		display: none;
+	}
+	.och-mode-btn {
+		min-width: 0;
+	}
+	.och-workspace {
+		overflow-x: auto;
+	}
+	.och-global {
+		gap: 8px;
+	}
+	.och-fresh,
+	.och-pi {
+		padding-inline: 9px;
+	}
+	.och-fresh-text,
+	.och-pi strong {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+}
+
+@media (max-width: 760px) {
+	.och-inner {
+		width: min(100% - 24px, var(--och-shell-max));
+	}
+	.och-global {
+		gap: 6px;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+	.och-global::-webkit-scrollbar {
+		display: none;
+	}
+	.och-brand > span:last-child {
+		display: none;
+	}
+	.och-repo-name {
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.och-mode-btn {
+		padding-inline: 10px;
+	}
+	.och-tab {
+		padding-inline: 10px;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.och-mode-btn,
+	.och-tab,
+	.och-repo,
+	.och-pi {
+		transition: none;
+	}
+}

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

@@ -0,0 +1,82 @@
+/** 与 operator-chrome.js 对应的类型声明（供 vitest/TS 侧导入契约测试）。 */
+
+export type OperatorChromeTab = { id: string; label: string; href: string };
+
+export const OPERATE_TABS: readonly OperatorChromeTab[];
+export const INSPECT_TABS: readonly OperatorChromeTab[];
+export const READINESS_LABELS: Record<string, string>;
+
+export type InspectObjectView = { view: string; id: string };
+
+export type InspectContext = {
+	view: string;
+	id: string;
+	from: string;
+	kindLabel: string;
+	returnHref: string;
+	returnLabel: string;
+};
+
+export type ChromeRepoInfo = {
+	name: string;
+	fingerprint: string;
+	version: string;
+	product: string;
+	inspectReady?: boolean;
+};
+
+export type ChromeModel = {
+	mode: "operate" | "inspect";
+	homeHref: string;
+	brand: string;
+	repo: ChromeRepoInfo | null;
+	modeButtons: Array<{
+		id: "operate" | "inspect";
+		label: string;
+		href: string;
+		active: boolean;
+	}>;
+	context: InspectContext | null;
+	freshness: boolean;
+	pi: { state: string; label: string; href: string; title: string };
+	tabs: Array<OperatorChromeTab & { active: boolean }>;
+	tabsAriaLabel: string;
+};
+
+export function parseInspectObjectView(
+	hashValue: string,
+): InspectObjectView | null;
+export function activeInspectTabHref(hashValue: string): string | null;
+export function parseInspectContext(hashValue: string): InspectContext | null;
+export function resolveOperateHrefFromInspectHash(hashValue: string): string;
+export function buildInspectDagHref(
+	dagRunId: string,
+	options?: { from?: string },
+): string;
+export function clearInspectContextSource(hashValue: string): string;
+export function repoBaseName(repoRoot: string): string;
+export function shortFingerprint(fingerprint: string): string;
+export function chromeStateFromHealth(body: unknown): {
+	readiness: string;
+	readinessLabel: string;
+	repo: ChromeRepoInfo;
+};
+export function buildOperatorChromeModel(config: {
+	mode: "operate" | "inspect";
+	activeTabHref?: string | null;
+	operateHref?: string;
+	inspectHref?: string;
+	readinessState?: string;
+	readinessHref?: string;
+	readinessTitle?: string;
+	repo?: ChromeRepoInfo | null;
+	freshness?: boolean;
+	context?: InspectContext | null;
+}): ChromeModel;
+export function mountOperatorChrome(
+	root: HTMLElement,
+	config?: Record<string, unknown>,
+): {
+	update: (nextConfig?: Record<string, unknown>) => void;
+	destroy: () => void;
+};