@tea-agent/loop-agent 0.32.1 → 0.33.0

package/dist/worker/observe/static/custom-select.js

@@ -0,0 +1,567 @@
+/** Observe UI — shared custom select (trigger + listbox).
+ *
+ * UI-only component: holds ephemeral open/active state, never writes state.js
+ * or persistence, and never fetches. Callers own business callbacks.
+ */
+
+const MENU_GAP_PX = 7;
+const VIEWPORT_PAD_PX = 8;
+const MAX_VISIBLE_OPTIONS = 6;
+const OPTION_HEIGHT_PX = 38;
+
+/** @type {null | { close: (opts?: { restoreFocus?: boolean }) => void }} */
+let openInstance = null;
+
+let idSeq = 0;
+function nextId(prefix) {
+	idSeq += 1;
+	return `${prefix}-${idSeq}`;
+}
+
+function safeAddListener(target, type, handler, options) {
+	if (!target || typeof target.addEventListener !== "function") return () => {};
+	target.addEventListener(type, handler, options);
+	return () => {
+		if (typeof target.removeEventListener === "function") {
+			target.removeEventListener(type, handler, options);
+		}
+	};
+}
+
+function optionLabel(options, value) {
+	const hit = options.find((o) => String(o.value) === String(value));
+	return hit ? String(hit.label) : value == null ? "" : String(value);
+}
+
+function clamp(n, min, max) {
+	return Math.min(max, Math.max(min, n));
+}
+
+/**
+ * @param {{
+ *   ariaLabel: string,
+ *   value: string,
+ *   options: Array<{ value: string, label: string }>,
+ *   onChange: (value: string) => void,
+ *   className?: string,
+ *   disabled?: boolean,
+ *   id?: string,
+ * }} config
+ * @returns {HTMLElement}
+ */
+export function createCustomSelect(config) {
+	const {
+		ariaLabel,
+		options: rawOptions = [],
+		onChange,
+		className = "",
+		disabled = false,
+		id,
+	} = config;
+	const options = Array.isArray(rawOptions) ? rawOptions.slice() : [];
+	let value =
+		config.value != null && config.value !== ""
+			? String(config.value)
+			: options[0]
+				? String(options[0].value)
+				: "";
+
+	const root = document.createElement("div");
+	root.className = ["custom-select", className].filter(Boolean).join(" ");
+	root.dataset.customSelect = "1";
+	if (id) root.id = id;
+
+	const listboxId = nextId("custom-select-listbox");
+	const trigger = document.createElement("button");
+	trigger.type = "button";
+	trigger.className = "custom-select-trigger";
+	trigger.setAttribute("aria-haspopup", "listbox");
+	trigger.setAttribute("aria-expanded", "false");
+	trigger.setAttribute("aria-controls", listboxId);
+	if (ariaLabel) trigger.setAttribute("aria-label", ariaLabel);
+	trigger.disabled = Boolean(disabled);
+
+	const valueEl = document.createElement("span");
+	valueEl.className = "custom-select-value";
+	valueEl.textContent = optionLabel(options, value);
+
+	const chevron = document.createElement("i");
+	chevron.className = "ri-arrow-down-s-line custom-select-chevron";
+	chevron.setAttribute("aria-hidden", "true");
+
+	trigger.appendChild(valueEl);
+	trigger.appendChild(chevron);
+	root.appendChild(trigger);
+
+	const menu = document.createElement("div");
+	menu.className = "custom-select-menu";
+	menu.id = listboxId;
+	menu.setAttribute("role", "listbox");
+	if (ariaLabel) menu.setAttribute("aria-label", ariaLabel);
+	menu.hidden = true;
+	menu.tabIndex = -1;
+	root.appendChild(menu);
+
+	/** @type {HTMLElement[]} */
+	let optionNodes = [];
+	/** @type {number} */
+	let activeIndex = 0;
+	/** @type {Array<() => void>} */
+	let detachGlobal = [];
+	let isOpen = false;
+
+	function rebuildOptions() {
+		while (menu.firstChild) menu.removeChild(menu.firstChild);
+		optionNodes = [];
+		for (let i = 0; i < options.length; i++) {
+			const opt = options[i];
+			const optionEl = document.createElement("div");
+			optionEl.className = "custom-select-option";
+			optionEl.setAttribute("role", "option");
+			optionEl.dataset.value = String(opt.value);
+			// Mirror raw value for integration stubs that still read `.value`.
+			optionEl.value = String(opt.value);
+			optionEl.setAttribute("data-value", String(opt.value));
+			optionEl.id = `${listboxId}-opt-${i}`;
+			const selected = String(opt.value) === String(value);
+			optionEl.setAttribute("aria-selected", selected ? "true" : "false");
+			if (selected) optionEl.classList.add("is-selected");
+
+			const label = document.createElement("span");
+			label.className = "custom-select-option-label";
+			label.textContent = String(opt.label);
+			optionEl.appendChild(label);
+
+			const check = document.createElement("i");
+			check.className = "ri-check-line custom-select-option-check";
+			check.setAttribute("aria-hidden", "true");
+			optionEl.appendChild(check);
+
+			optionEl.addEventListener("click", (event) => {
+				if (event && typeof event.preventDefault === "function") {
+					event.preventDefault();
+				}
+				if (event && typeof event.stopPropagation === "function") {
+					event.stopPropagation();
+				}
+				commitValue(String(opt.value));
+			});
+			optionEl.addEventListener("mouseenter", () => {
+				setActiveIndex(i, { scroll: false });
+			});
+
+			menu.appendChild(optionEl);
+			optionNodes.push(optionEl);
+		}
+		// Keep a hidden native-like options mirror for limited test stubs that
+		// still inspect OPTION children; not used for interaction.
+		// (Not a focusable <select>; no native menu.)
+	}
+
+	function syncSelectedClasses() {
+		for (const node of optionNodes) {
+			const selected = node.dataset.value === String(value);
+			node.setAttribute("aria-selected", selected ? "true" : "false");
+			if (selected) node.classList.add("is-selected");
+			else node.classList.remove("is-selected");
+		}
+		valueEl.textContent = optionLabel(options, value);
+	}
+
+	function setActiveIndex(index, { scroll = true } = {}) {
+		if (optionNodes.length === 0) {
+			activeIndex = 0;
+			return;
+		}
+		activeIndex = clamp(index, 0, optionNodes.length - 1);
+		for (let i = 0; i < optionNodes.length; i++) {
+			const node = optionNodes[i];
+			if (i === activeIndex) {
+				node.classList.add("is-active");
+				if (scroll && typeof node.scrollIntoView === "function") {
+					try {
+						node.scrollIntoView({ block: "nearest" });
+					} catch {
+						node.scrollIntoView();
+					}
+				}
+			} else {
+				node.classList.remove("is-active");
+			}
+		}
+		const active = optionNodes[activeIndex];
+		if (active) {
+			menu.setAttribute("aria-activedescendant", active.id);
+		}
+	}
+
+	function indexOfValue(v) {
+		const idx = options.findIndex((o) => String(o.value) === String(v));
+		return idx >= 0 ? idx : 0;
+	}
+
+	function positionMenu() {
+		// Prefer absolute positioning within the root so sticky bars keep
+		// correct stacking without needing a body portal.
+		menu.style.position = "absolute";
+		menu.style.left = "0";
+		menu.style.right = "auto";
+		menu.style.minWidth = "100%";
+		menu.style.width = "max-content";
+		menu.style.maxWidth = "";
+		menu.style.top = "";
+		menu.style.bottom = "";
+		menu.classList.remove("is-open-up");
+		menu.classList.add("is-open-down");
+
+		const triggerRect =
+			typeof trigger.getBoundingClientRect === "function"
+				? trigger.getBoundingClientRect()
+				: null;
+		const viewportW =
+			typeof window !== "undefined" && window.innerWidth
+				? window.innerWidth
+				: 1024;
+		const viewportH =
+			typeof window !== "undefined" && window.innerHeight
+				? window.innerHeight
+				: 768;
+
+		const maxMenuHeight = MAX_VISIBLE_OPTIONS * OPTION_HEIGHT_PX + 8;
+		menu.style.maxHeight = `${maxMenuHeight}px`;
+
+		if (!triggerRect) {
+			menu.style.top = `calc(100% + ${MENU_GAP_PX}px)`;
+			return;
+		}
+
+		const spaceBelow = viewportH - triggerRect.bottom - VIEWPORT_PAD_PX;
+		const spaceAbove = triggerRect.top - VIEWPORT_PAD_PX;
+		const openUp =
+			spaceBelow < Math.min(maxMenuHeight, OPTION_HEIGHT_PX * 3) &&
+			spaceAbove > spaceBelow;
+
+		if (openUp) {
+			menu.classList.remove("is-open-down");
+			menu.classList.add("is-open-up");
+			menu.style.top = "auto";
+			menu.style.bottom = `calc(100% + ${MENU_GAP_PX}px)`;
+			menu.style.maxHeight = `${Math.min(maxMenuHeight, Math.max(OPTION_HEIGHT_PX, spaceAbove - MENU_GAP_PX))}px`;
+		} else {
+			menu.style.top = `calc(100% + ${MENU_GAP_PX}px)`;
+			menu.style.bottom = "auto";
+			menu.style.maxHeight = `${Math.min(maxMenuHeight, Math.max(OPTION_HEIGHT_PX, spaceBelow - MENU_GAP_PX))}px`;
+		}
+
+		// Clamp width to viewport so narrow screens do not overflow.
+		const maxWidth = Math.max(80, viewportW - VIEWPORT_PAD_PX * 2);
+		menu.style.maxWidth = `${maxWidth}px`;
+		// If the root is near the right edge, pin the menu to the trigger's
+		// right side so it grows leftward within the viewport.
+		const overflowRight = triggerRect.left + triggerRect.width > viewportW - VIEWPORT_PAD_PX;
+		if (overflowRight || triggerRect.left < VIEWPORT_PAD_PX) {
+			const left = clamp(
+				triggerRect.left,
+				VIEWPORT_PAD_PX,
+				viewportW - VIEWPORT_PAD_PX - Math.min(triggerRect.width, maxWidth),
+			);
+			// Switch to fixed coordinates only when we need viewport clamping
+			// beyond the local anchor box.
+			if (left !== triggerRect.left || triggerRect.width > maxWidth) {
+				menu.style.position = "fixed";
+				menu.style.left = `${left}px`;
+				menu.style.minWidth = `${Math.min(triggerRect.width, maxWidth)}px`;
+				menu.style.width = "auto";
+				if (openUp) {
+					menu.style.top = "auto";
+					menu.style.bottom = `${viewportH - triggerRect.top + MENU_GAP_PX}px`;
+				} else {
+					menu.style.top = `${triggerRect.bottom + MENU_GAP_PX}px`;
+					menu.style.bottom = "auto";
+				}
+			}
+		}
+	}
+
+	function clearGlobalListeners() {
+		for (const off of detachGlobal) {
+			try {
+				off();
+			} catch {
+				// ignore stub cleanup failures
+			}
+		}
+		detachGlobal = [];
+	}
+
+	function closeMenu({ restoreFocus = false } = {}) {
+		if (!isOpen) {
+			if (restoreFocus && typeof trigger.focus === "function") {
+				try {
+					trigger.focus({ preventScroll: true });
+				} catch {
+					trigger.focus();
+				}
+			}
+			return;
+		}
+		isOpen = false;
+		menu.hidden = true;
+		trigger.setAttribute("aria-expanded", "false");
+		root.classList.remove("is-open");
+		menu.classList.remove("is-open-up", "is-open-down");
+		menu.removeAttribute("aria-activedescendant");
+		clearGlobalListeners();
+		if (openInstance && openInstance.root === root) {
+			openInstance = null;
+		}
+		if (restoreFocus && typeof trigger.focus === "function") {
+			try {
+				trigger.focus({ preventScroll: true });
+			} catch {
+				trigger.focus();
+			}
+		}
+	}
+
+	function openMenu() {
+		if (trigger.disabled || options.length === 0) return;
+		if (openInstance && openInstance.root !== root) {
+			openInstance.close({ restoreFocus: false });
+		}
+		isOpen = true;
+		menu.hidden = false;
+		trigger.setAttribute("aria-expanded", "true");
+		root.classList.add("is-open");
+		setActiveIndex(indexOfValue(value), { scroll: true });
+		positionMenu();
+
+		const onPointerDown = (event) => {
+			const target = event?.target;
+			if (!target) return;
+			const inRoot =
+				typeof root.contains === "function"
+					? root.contains(target)
+					: target === root || target === trigger || target === menu;
+			if (inRoot) return;
+			// closest walk for limited stubs
+			if (typeof target.closest === "function") {
+				if (target.closest("[data-custom-select]")) {
+					// Another custom-select trigger: let that instance open,
+					// which will close us via openInstance single-open.
+					const other = target.closest("[data-custom-select]");
+					if (other === root) return;
+				}
+			}
+			closeMenu({ restoreFocus: false });
+		};
+		const onResize = () => {
+			if (isOpen) positionMenu();
+		};
+		const onScroll = (event) => {
+			if (!isOpen) return;
+			const t = event?.target;
+			// Ignore scrolls inside the menu itself.
+			if (t && (t === menu || (typeof menu.contains === "function" && menu.contains(t)))) {
+				return;
+			}
+			positionMenu();
+		};
+		// Sole open-state keyboard owner: document capture. Trigger only opens
+		// while closed so capture→target never double-steps or re-opens.
+		const onKeyDown = (event) => {
+			if (!isOpen) return;
+			const key = event?.key;
+			if (!key) return;
+			const stop = () => {
+				if (typeof event.preventDefault === "function") event.preventDefault();
+				if (typeof event.stopPropagation === "function") event.stopPropagation();
+			};
+			if (key === "Escape") {
+				stop();
+				closeMenu({ restoreFocus: true });
+				return;
+			}
+			if (key === "Tab") {
+				// Close without trapping focus; browser moves focus naturally.
+				closeMenu({ restoreFocus: false });
+				return;
+			}
+			if (key === "ArrowDown") {
+				stop();
+				setActiveIndex(activeIndex + 1);
+				return;
+			}
+			if (key === "ArrowUp") {
+				stop();
+				setActiveIndex(activeIndex - 1);
+				return;
+			}
+			if (key === "Home") {
+				stop();
+				setActiveIndex(0);
+				return;
+			}
+			if (key === "End") {
+				stop();
+				setActiveIndex(optionNodes.length - 1);
+				return;
+			}
+			if (key === "Enter" || key === " ") {
+				stop();
+				const opt = options[activeIndex];
+				if (opt) commitValue(String(opt.value));
+			}
+		};
+
+		detachGlobal.push(safeAddListener(document, "pointerdown", onPointerDown, true));
+		// Fallback for environments without pointer events.
+		detachGlobal.push(safeAddListener(document, "mousedown", onPointerDown, true));
+		detachGlobal.push(safeAddListener(window, "resize", onResize));
+		detachGlobal.push(safeAddListener(document, "scroll", onScroll, true));
+		detachGlobal.push(safeAddListener(document, "keydown", onKeyDown, true));
+
+		openInstance = {
+			root,
+			close: closeMenu,
+		};
+
+		if (typeof menu.focus === "function") {
+			try {
+				menu.focus({ preventScroll: true });
+			} catch {
+				menu.focus();
+			}
+		}
+	}
+
+	function commitValue(next) {
+		const nextValue = String(next);
+		const prev = value;
+		value = nextValue;
+		syncSelectedClasses();
+		closeMenu({ restoreFocus: true });
+		if (nextValue !== String(prev) && typeof onChange === "function") {
+			onChange(nextValue);
+		} else if (nextValue === String(prev) && typeof onChange === "function") {
+			// Still notify when user explicitly re-selects the same option so
+			// callers that rely on change semantics stay consistent; history
+			// page clamps hash and no-ops identical query.
+			onChange(nextValue);
+		}
+	}
+
+	function toggleMenu() {
+		if (isOpen) closeMenu({ restoreFocus: true });
+		else openMenu();
+	}
+
+	trigger.addEventListener("click", (event) => {
+		if (event && typeof event.preventDefault === "function") event.preventDefault();
+		if (event && typeof event.stopPropagation === "function") event.stopPropagation();
+		if (trigger.disabled) return;
+		toggleMenu();
+	});
+
+	trigger.addEventListener("keydown", (event) => {
+		if (trigger.disabled) return;
+		// Open-state keys are owned exclusively by the document capture listener.
+		if (isOpen) return;
+		const key = event?.key;
+		if (key === "Enter" || key === " ") {
+			if (typeof event.preventDefault === "function") event.preventDefault();
+			openMenu();
+			return;
+		}
+		if (key === "ArrowDown" || key === "ArrowUp") {
+			if (typeof event.preventDefault === "function") event.preventDefault();
+			openMenu();
+		}
+	});
+
+	// Support limited test stubs that set `.value` then fire a `change` handler
+	// (legacy native <select> contract used by inspector unit tests).
+	Object.defineProperty(root, "value", {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return value;
+		},
+		set(next) {
+			value = next == null ? "" : String(next);
+			syncSelectedClasses();
+		},
+	});
+	Object.defineProperty(root, "disabled", {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return Boolean(trigger.disabled);
+		},
+		set(next) {
+			trigger.disabled = Boolean(next);
+			if (trigger.disabled) {
+				root.classList.add("is-disabled");
+				closeMenu({ restoreFocus: false });
+			} else {
+				root.classList.remove("is-disabled");
+			}
+			// Mirror disabled onto root for query paths that check el.disabled.
+			root.setAttribute("aria-disabled", trigger.disabled ? "true" : "false");
+			if (trigger.disabled) root.dataset.disabled = "true";
+			else delete root.dataset.disabled;
+		},
+	});
+
+	// Also mirror disabled/value onto the trigger for attribute-based queries.
+	Object.defineProperty(trigger, "value", {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return value;
+		},
+		set(next) {
+			root.value = next;
+		},
+	});
+
+	root.addEventListener("change", () => {
+		// Invoked by stubs via handlers.change() after assigning .value.
+		if (typeof onChange === "function") onChange(String(value));
+	});
+
+	// Public control surface for callers that re-render with new props.
+	root.setCustomSelectDisabled = (next) => {
+		root.disabled = Boolean(next);
+	};
+	root.setCustomSelectValue = (next) => {
+		root.value = next;
+	};
+	root.getCustomSelectTrigger = () => trigger;
+	root.closeCustomSelect = () => closeMenu({ restoreFocus: false });
+
+	// Forward data-* attributes helpers: allow callers to stamp business hooks
+	// on the trigger (e.g. data-dags-page-size) after creation.
+	root.getCustomSelectRoot = () => root;
+
+	if (disabled) root.disabled = true;
+	rebuildOptions();
+	syncSelectedClasses();
+	setActiveIndex(indexOfValue(value), { scroll: false });
+
+	// Compatibility surface for integration stubs that previously walked native
+	// <option> children under a <select>. Not used for real DOM interaction.
+	root.__customSelectOptions = () =>
+		options.map((opt) => ({
+			tagName: "OPTION",
+			value: String(opt.value),
+			textContent: String(opt.label),
+		}));
+
+	return root;
+}
+
+/** Close any open custom select (e.g. before view teardown). */
+export function closeOpenCustomSelect() {
+	if (openInstance) openInstance.close({ restoreFocus: false });
+}

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

@@ -15,7 +15,7 @@
   <body data-shell="observe-console">
     <a class="skip-link" href="#main-content">跳到主内容</a>
     <nav class="embedded-operator-nav" aria-label="Operator 导航">
-      <a href="/">返回操作台</a>
+      <a href="/#/tasks">返回操作台</a>
       <span aria-current="page">观测</span>
     </nav>
     <div id="app">
@@ -185,23 +185,64 @@
           ></aside>
         </section>
 
+        <section data-view="dags" id="view-dags" class="view view-dags" hidden>
+          <header class="page-header dags-page-header">
+            <div class="view-heading page-header-heading">
+              <p class="view-kicker">DAG History</p>
+              <h2 id="dags-page-title" tabindex="-1">DAG 运行历史</h2>
+              <p>全部正式 DAG 执行记录（不含 dry-run / init-only）。</p>
+            </div>
+          </header>
+          <div
+            id="dags-degraded"
+            class="panel dags-degraded-banner"
+            hidden
+          ></div>
+          <section
+            id="dags-status"
+            class="panel"
+            aria-label="历史列表状态"
+          ></section>
+          <section
+            id="dags-table"
+            class="panel panel-table dags-table-panel"
+            aria-label="DAG 运行历史表格"
+          ></section>
+          <section
+            id="dags-meta"
+            class="panel dags-meta-panel"
+            aria-label="分页与刷新"
+          ></section>
+          <div
+            id="dags-copy-announce"
+            class="sr-only"
+            aria-live="polite"
+            aria-atomic="true"
+          ></div>
+          <div
+            id="dags-copy-toast"
+            class="dags-copy-toast"
+            role="status"
+            aria-live="polite"
+            hidden
+          ></div>
+        </section>
+
         <section data-view="night" id="view-night" class="view" hidden>
           <header class="page-header">
             <div class="view-heading page-header-heading">
               <p class="view-kicker">Night Scheduler</p>
               <h2>夜间任务</h2>
             </div>
-            <div class="cta-row">
+            <div class="page-header-actions" aria-label="夜间页操作">
               <button
                 type="button"
                 id="night-refresh-btn"
-                class="btn btn-secondary"
+                class="page-action-btn"
               >
                 刷新
               </button>
-              <a class="btn btn-secondary" href="/?workspace=night"
-                >打开 Operate 面板</a
-              >
+              <a class="page-action-btn" href="/#/night">打开操作台 · 夜间</a>
             </div>
           </header>
           <section