helixlife-v5-cli 1.2.8 → 1.2.9

package/lib/automation-overlay.init.js

@@ -7,23 +7,51 @@
 (() => {
   if (window.__helix_visual__) return;
 
-  const VERSION = '1.0.0';
+  const VERSION = "1.0.0";
   const VISUAL_DEFAULTS = {
     enabled: true,
     durationMs: 420,
+    /** true：HUD 与高亮不自动消失（改样式/调试）；false：操作结束后按 durationMs 消失 */
+    persist: false,
   };
-  const VISUAL_STYLE_ID = '__helix_visual_style__';
-  const VISUAL_LAYER_ID = '__helix_visual_layer__';
-  const VISUAL_HUD_ID = '__helix_visual_hud__';
+  const VISUAL_STYLE_ID = "__helix_visual_style__";
+  const VISUAL_LAYER_ID = "__helix_visual_layer__";
+  const VISUAL_HUD_ID = "__helix_visual_hud__";
   const VISUAL_TONE_MAP = {
-    pending: { border: '#faad14', fill: 'rgba(250, 173, 20, 0.16)', pill: '#ad6800', text: '#fffbe6' },
-    success: { border: '#52c41a', fill: 'rgba(82, 196, 26, 0.14)', pill: '#237804', text: '#f6ffed' },
-    danger: { border: '#ff4d4f', fill: 'rgba(255, 77, 79, 0.14)', pill: '#a8071a', text: '#fff1f0' },
-    info: { border: '#1677ff', fill: 'rgba(22, 119, 255, 0.14)', pill: '#0958d9', text: '#f0f5ff' },
+    pending: {
+      border: "#faad14",
+      fill: "rgba(250, 173, 20, 0.16)",
+      pill: "#ad6800",
+      text: "#fffbe6",
+      statusDot: "#FFA406",
+    },
+    success: {
+      border: "#9747ff",
+      fill: "rgba(151, 71, 255, 0.14)",
+      pill: "#9747ff",
+      text: "#f6ffed",
+      statusDot: "#9747ff",
+    },
+    danger: {
+      border: "#FE2C55",
+      fill: "rgba(254, 44, 85, 0.14)",
+      pill: "#FE2C55",
+      text: "#ffe9ee",
+      statusDot: "#FE2C55",
+    },
+    info: {
+      border: "#6546e4",
+      fill: "rgba(101, 70, 228, 0.14)",
+      pill: "#6546e4",
+      text: "#f0f5ff",
+      statusDot: "#6546e4",
+    },
   };
   const visualState = {
     config: { ...VISUAL_DEFAULTS },
     hudTimer: null,
+    /** 当前持久选中框（select / 脚本步骤高亮） */
+    pinnedBox: null,
   };
 
   function clamp(n, min, max) {
@@ -38,16 +66,25 @@
 
   function normalizeVisualOptions(options = {}) {
     const base = { ...visualState.config };
-    if (!options || typeof options !== 'object') return base;
-    if (typeof options.enabled === 'boolean') base.enabled = options.enabled;
-    if (options.durationMs != null) base.durationMs = normalizeDuration(options.durationMs, base.durationMs);
+    if (!options || typeof options !== "object") return base;
+    if (typeof options.enabled === "boolean") base.enabled = options.enabled;
+    if (typeof options.persist === "boolean") base.persist = options.persist;
+    if (options.durationMs != null)
+      base.durationMs = normalizeDuration(options.durationMs, base.durationMs);
     return base;
   }
 
+  function getDomHost() {
+    return document.body || document.documentElement;
+  }
+
   function ensureVisualRoot() {
+    const layerHost = getDomHost();
+    if (!layerHost) return null;
+    const styleParent = document.head || document.documentElement || layerHost;
     let style = document.getElementById(VISUAL_STYLE_ID);
     if (!style) {
-      style = document.createElement('style');
+      style = document.createElement("style");
       style.id = VISUAL_STYLE_ID;
       style.textContent = `
         #${VISUAL_LAYER_ID}{
@@ -66,27 +103,100 @@
         .__helix_visual_badge{
           position:absolute;
           left:0;
-          top:-28px;
+          top:-40px;
+          width: max-content;
           max-width:280px;
-          padding:4px 10px;
-          border-radius:999px;
-          font:600 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
-          letter-spacing:.01em;
-          white-space:nowrap;
-          text-overflow:ellipsis;
+          display:inline-flex;
+          align-items:center;
+          gap:10px;
+          box-sizing:border-box;
+          padding:7px 10px;
+          border-radius:20px;
+          background:#19191E;
+          box-shadow:0 0 8px rgba(115, 66, 214, 0.8);
+          font-weight: 400;
+          font-size: 12px;
+          color: #EBEBEB;
+        }
+        .__helix_visual_badge::before{
+          content: '';
+          position: absolute;
+          inset: -1px;
+          background: linear-gradient(90deg, rgba(151, 71, 255, 1), rgba(101, 70, 228, 1));
+          z-index: -1;
+          border-radius: 20px;
+          padding: 0px;
+        }
+        .__helix_visual_badge_text{
           overflow:hidden;
-          box-shadow:0 8px 24px rgba(0,0,0,.18);
+          text-overflow:ellipsis;
         }
-        #${VISUAL_HUD_ID}{
+        .__helix_visual_badge_dot{
+          width:6px;
+          height:6px;
+          border-radius:100%;
+          flex-shrink:0;
+        }
+        #${VISUAL_HUD_ID},
+        .__helix_visual_hud_shell{
           position:fixed;
+          z-index: 99;
           top:16px;
           right:16px;
-          max-width:360px;
-          padding:10px 14px;
-          border-radius:12px;
-          box-shadow:0 12px 32px rgba(0,0,0,.22);
-          font:600 13px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
-          white-space:pre-wrap;
+          width:340px;
+          min-height:98px;
+          box-sizing:border-box;
+          padding:1px;
+          border-radius:20px;
+          background:linear-gradient(90deg, rgba(151, 71, 255, 1), rgba(101, 70, 228, 1));
+          box-shadow:0 0 8px rgba(115, 66, 214, 0.8);
+        }
+        .__helix_visual_hud{
+          width:100%;
+          min-height:96px;
+          box-sizing:border-box;
+          border-radius:19px;
+          background:#19191E;
+          padding:16px 18px;
+          color:rgba(255,255,255,0.88);
+          font:500 13px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+        }
+        .__helix_visual_hud_head{
+          display:flex;
+          align-items:center;
+          justify-content:space-between;
+          gap:12px;
+          margin-bottom:10px;
+        }
+        .__helix_visual_hud_action{
+          font-weight:600;
+          font-size:16px;
+          color:#EBEBEB;
+        }
+        .__helix_visual_hud_status{
+          display:inline-flex;
+          align-items:center;
+          gap:10px;
+          font-size:12px;
+          font-weight:400;
+          color:#EBEBEB;
+          white-space:nowrap;
+        }
+        .__helix_visual_hud_dot{
+          width:6px;
+          height:6px;
+          border-radius:100%;
+          flex-shrink:0;
+        }
+        .__helix_visual_hud_target{
+          padding:7px 10px;
+          background:rgba(235,235,235,0.05);
+          border-radius:10px;
+          display:flex;
+          align-items:center;
+          font-weight:400;
+          font-size:12px;
+          color:#B2B1B1;
         }
         @keyframes __helix_visual_pulse{
           0%{transform:scale(.985);opacity:.2}
@@ -94,13 +204,13 @@
           100%{transform:scale(1);opacity:1}
         }
       `;
-      (document.head || document.documentElement).appendChild(style);
+      styleParent.appendChild(style);
     }
     let layer = document.getElementById(VISUAL_LAYER_ID);
     if (!layer) {
-      layer = document.createElement('div');
+      layer = document.createElement("div");
       layer.id = VISUAL_LAYER_ID;
-      (document.body || document.documentElement).appendChild(layer);
+      layerHost.appendChild(layer);
     }
     return layer;
   }
@@ -110,74 +220,226 @@
   }
 
   function removeLater(el, durationMs) {
-    if (!el) return;
+    if (!el || visualState.config.persist) return;
     const ms = normalizeDuration(durationMs);
     window.setTimeout(() => {
       if (el && el.parentNode) el.remove();
     }, ms);
   }
 
-  function flashElement(el, options = {}) {
-    const { tone = 'info', label = '', durationMs, inset = 0 } = options;
+  function appendBadge(box, spec, label, badgeTop) {
+    const badge = document.createElement("div");
+    badge.className = "__helix_visual_badge";
+    badge.style.top = badgeTop + "px";
+
+    const dot = document.createElement("span");
+    dot.className = "__helix_visual_badge_dot";
+    dot.style.background = spec.statusDot || spec.border;
+
+    const text = document.createElement("span");
+    text.className = "__helix_visual_badge_text";
+    text.textContent = label;
+
+    badge.appendChild(dot);
+    badge.appendChild(text);
+    box.appendChild(badge);
+  }
+
+  function createHighlightBox(layer, spec, label, rect) {
+    const box = document.createElement("div");
+    box.className = "__helix_visual_box";
+    box.style.left = rect.left + "px";
+    box.style.top = rect.top + "px";
+    box.style.width = rect.width + "px";
+    box.style.height = rect.height + "px";
+    // box.style.border = `2px solid ${spec.border}`;
+    // box.style.background = spec.fill;
+    // box.style.boxShadow = `0 0 0 1px ${spec.border}33, 0 12px 28px ${spec.border}22`;
+    box.style.border = "none";
+    box.style.boxShadow = "0 0 0 6px rgba(159, 71, 255, 0.2)";
+    if (label) {
+      appendBadge(box, spec, label, rect.top < 38 ? rect.height + 8 : -45);
+    }
+    layer.appendChild(box);
+    return box;
+  }
+
+  function populateHudCard(inner, options = {}) {
+    const {
+      action = "",
+      target = "",
+      status = "pending",
+      detail = "",
+    } = options;
+    const spec = toneSpec(status);
+    inner.replaceChildren();
+
+    const head = document.createElement("div");
+    head.className = "__helix_visual_hud_head";
+
+    const actionEl = document.createElement("span");
+    actionEl.className = "__helix_visual_hud_action";
+    actionEl.textContent = action;
+
+    const statusEl = document.createElement("span");
+    statusEl.className = "__helix_visual_hud_status";
+
+    const dot = document.createElement("span");
+    dot.className = "__helix_visual_hud_dot";
+    dot.style.background = spec.statusDot || spec.border;
+
+    const statusText = document.createElement("span");
+    statusText.textContent = detail;
+
+    statusEl.appendChild(dot);
+    statusEl.appendChild(statusText);
+    head.appendChild(actionEl);
+    head.appendChild(statusEl);
+    inner.appendChild(head);
+
+    const targetEl = document.createElement("div");
+    targetEl.className = "__helix_visual_hud_target";
+    const targetText = String(target || "").trim();
+    if (targetText) {
+      targetEl.textContent = targetText;
+    } else {
+      targetEl.textContent = "执行中…";
+    }
+    inner.appendChild(targetEl);
+  }
+
+  function createHudCard(options = {}) {
+    const shell = document.createElement("div");
+    shell.className = "__helix_visual_hud_shell";
+    const inner = document.createElement("div");
+    inner.className = "__helix_visual_hud";
+    populateHudCard(inner, options);
+    shell.appendChild(inner);
+    return shell;
+  }
+
+  function rectWithInset(rect, inset = 0) {
+    return {
+      left: Math.max(4, rect.left - inset),
+      top: Math.max(4, rect.top - inset),
+      width: Math.max(18, rect.width + inset * 2),
+      height: Math.max(18, rect.height + inset * 2),
+    };
+  }
+
+  function unpinSelection() {
+    if (visualState.pinnedBox && visualState.pinnedBox.parentNode) {
+      visualState.pinnedBox.remove();
+    }
+    visualState.pinnedBox = null;
+  }
+
+  /**
+   * 持久选中态：紫色边框 + 角标标签，并同步右上角 HUD（用于 run-code 脚本步骤）。
+   */
+  function selectElement(el, options = {}) {
+    const {
+      tone = "pending",
+      label = "",
+      action = "",
+      target = "",
+      detail = "",
+      inset = 4,
+    } = options;
     if (!el || !visualState.config.enabled) return false;
     const rect = el.getBoundingClientRect();
     if (!rect || rect.width <= 0 || rect.height <= 0) return false;
     const layer = ensureVisualRoot();
+    if (!layer) return false;
+    unpinSelection();
     const spec = toneSpec(tone);
-    const box = document.createElement('div');
-    box.className = '__helix_visual_box';
-    box.style.left = Math.max(4, rect.left - inset) + 'px';
-    box.style.top = Math.max(4, rect.top - inset) + 'px';
-    box.style.width = Math.max(18, rect.width + inset * 2) + 'px';
-    box.style.height = Math.max(18, rect.height + inset * 2) + 'px';
-    box.style.border = `2px solid ${spec.border}`;
-    box.style.background = spec.fill;
-    box.style.boxShadow = `0 0 0 1px ${spec.border}33, 0 12px 28px ${spec.border}22`;
-    if (label) {
-      const badge = document.createElement('div');
-      badge.className = '__helix_visual_badge';
-      badge.textContent = label;
-      badge.style.background = spec.pill;
-      badge.style.color = spec.text;
-      badge.style.top = (rect.top < 38 ? rect.height + 8 : -28) + 'px';
-      box.appendChild(badge);
+    const box = createHighlightBox(
+      layer,
+      spec,
+      label,
+      rectWithInset(rect, inset),
+    );
+    box.dataset.helixPinned = "1";
+    visualState.pinnedBox = box;
+    if (action || target || detail || label) {
+      showHud({
+        action: action || "步骤",
+        target: target || label,
+        status: tone,
+        detail: detail || label || "执行中…",
+      });
     }
-    layer.appendChild(box);
+    return true;
+  }
+
+  function flashElement(el, options = {}) {
+    const {
+      tone = "info",
+      label = "",
+      durationMs,
+      inset = 0,
+      action = "",
+      target = "",
+      detail = "",
+    } = options;
+    if (!el || !visualState.config.enabled) return false;
+    const rect = el.getBoundingClientRect();
+    if (!rect || rect.width <= 0 || rect.height <= 0) return false;
+    const layer = ensureVisualRoot();
+    if (!layer) return false;
+    const spec = toneSpec(tone);
+    const box = createHighlightBox(
+      layer,
+      spec,
+      label,
+      rectWithInset(rect, inset),
+    );
     removeLater(box, durationMs);
     return true;
   }
 
   function showHud(options = {}) {
-    const { action = '', target = '', status = 'pending', detail = '', durationMs } = options;
+    const {
+      action = "",
+      target = "",
+      status = "pending",
+      detail = "",
+      durationMs,
+    } = options;
     if (!visualState.config.enabled) return false;
     const layer = ensureVisualRoot();
+    if (!layer) return false;
     let hud = document.getElementById(VISUAL_HUD_ID);
     if (!hud) {
-      hud = document.createElement('div');
+      hud = createHudCard({ action, target, status, detail });
       hud.id = VISUAL_HUD_ID;
       layer.appendChild(hud);
+    } else {
+      const inner = hud.querySelector(".__helix_visual_hud");
+      if (inner) populateHudCard(inner, { action, target, status, detail });
     }
-    const spec = toneSpec(status);
-    const lines = [];
-    if (action) lines.push(action);
-    if (target) lines.push(target);
-    if (detail) lines.push(detail);
-    hud.textContent = lines.join('\n');
-    hud.style.border = `1px solid ${spec.border}`;
-    hud.style.background = spec.fill.replace(/0\.\d+\)$/, '0.92)');
-    hud.style.color = spec.pill;
+    if (visualState.config.persist) return true;
     if (visualState.hudTimer) clearTimeout(visualState.hudTimer);
-    visualState.hudTimer = window.setTimeout(() => {
-      if (hud && hud.parentNode) hud.remove();
-      visualState.hudTimer = null;
-    }, normalizeDuration(durationMs, Math.max(900, visualState.config.durationMs * 2)));
+    visualState.hudTimer = window.setTimeout(
+      () => {
+        if (hud && hud.parentNode) hud.remove();
+        visualState.hudTimer = null;
+      },
+      normalizeDuration(
+        durationMs,
+        Math.max(900, visualState.config.durationMs * 2),
+      ),
+    );
     return true;
   }
 
   function cleanupVisualArtifacts() {
+    unpinSelection();
     const layer = document.getElementById(VISUAL_LAYER_ID);
     if (!layer) return;
-    Array.from(layer.querySelectorAll('.__helix_visual_box')).forEach((el) => el.remove());
+    Array.from(layer.querySelectorAll(".__helix_visual_box")).forEach((el) =>
+      el.remove(),
+    );
     const hud = document.getElementById(VISUAL_HUD_ID);
     if (hud) hud.remove();
     if (visualState.hudTimer) {
@@ -187,7 +449,7 @@
   }
 
   function setVisualOptions(options = {}) {
-    if (!options || typeof options !== 'object') {
+    if (!options || typeof options !== "object") {
       visualState.config = { ...VISUAL_DEFAULTS };
       cleanupVisualArtifacts();
       return { ok: true, data: { ...visualState.config } };
@@ -201,6 +463,8 @@
     version: () => VERSION,
     setVisualOptions,
     flash: flashElement,
+    select: selectElement,
+    unpin: unpinSelection,
     showHud,
     cleanup: cleanupVisualArtifacts,
     __meta: { version: VERSION, loadedAt: new Date().toISOString() },

package/lib/browser-css-cache-guard.init-page.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const { HELIX_HOST_RE } = require('./helix-styles-guard');
+
+const GUARD_KEY = '__helixCssCacheGuard__';
+
+async function hasBrokenHelixStylesheet(page) {
+  return page.evaluate(() => {
+    const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    const appCss = links.filter((l) => l.href.includes('/static/css/'));
+    if (appCss.length === 0) return false;
+    return appCss.some((l) => {
+      try {
+        return !l.sheet;
+      } catch {
+        return true;
+      }
+    });
+  });
+}
+
+async function cssCacheGuard({ page }) {
+  if (page[GUARD_KEY]) return;
+  page[GUARD_KEY] = true;
+
+  const maybeFix = async () => {
+    try {
+      const url = page.url();
+      if (!HELIX_HOST_RE.test(url)) return;
+      const broken = await hasBrokenHelixStylesheet(page);
+      if (!broken) return;
+      if (page[`${GUARD_KEY}Reloaded`]) return;
+      page[`${GUARD_KEY}Reloaded`] = true;
+      await page.reload({ waitUntil: 'networkidle', bypassCache: true });
+    } catch {
+      // 页面已关闭或正在导航
+    }
+  };
+
+  page.on('load', () => {
+    void maybeFix();
+  });
+
+  if (page.url() && page.url() !== 'about:blank') {
+    await maybeFix();
+  }
+}
+
+module.exports = { default: cssCacheGuard };

package/lib/browser-window-maximize.init-page.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/**
+ * 有头会话启动后通过 CDP 将首个浏览器窗口最大化（配合 launchOptions --start-maximized）。
+ * initPage 在 Playwright CLI 每个新标签页/窗口初始化时调用；后续页面不再强制最大化，
+ * 新窗口则复制已有窗口的位置与尺寸，避免用户手动调整窗口后新开页又变全屏。
+ */
+
+async function getWindowId(page) {
+  const cdp = await page.context().newCDPSession(page);
+  const { windowId } = await cdp.send('Browser.getWindowForTarget');
+  return { cdp, windowId };
+}
+
+async function maximizeBrowserWindow({ page }) {
+  try {
+    const context = page.context();
+    const pages = context.pages();
+
+    if (pages.length > 1) {
+      await syncWindowBoundsFromExisting(page, pages);
+      return;
+    }
+
+    const { cdp, windowId } = await getWindowId(page);
+    await cdp.send('Browser.setWindowBounds', {
+      windowId,
+      bounds: { windowState: 'maximized' },
+    });
+  } catch {
+    // Chromium channel unavailable or CDP unsupported — rely on --start-maximized.
+  }
+}
+
+/**
+ * 新标签/新窗口：同窗口内无需处理；独立 popup 窗口则复制参考窗口 bounds。
+ */
+async function syncWindowBoundsFromExisting(page, pages) {
+  const refPage = pages.find((p) => p !== page && !p.isClosed()) ?? pages[0];
+  if (!refPage || refPage === page) return;
+
+  try {
+    const { windowId: newWindowId } = await getWindowId(page);
+    const { windowId: refWindowId } = await getWindowId(refPage);
+
+    if (newWindowId === refWindowId) return;
+
+    const cdpRef = await page.context().newCDPSession(refPage);
+    const { bounds } = await cdpRef.send('Browser.getWindowBounds', {
+      windowId: refWindowId,
+    });
+    if (!bounds) return;
+
+    const cdpNew = await page.context().newCDPSession(page);
+    await cdpNew.send('Browser.setWindowBounds', {
+      windowId: newWindowId,
+      bounds,
+    });
+  } catch {
+    // CDP unsupported or race during close — ignore.
+  }
+}
+
+module.exports = { default: maximizeBrowserWindow };