helixlife-v5-cli 1.1.9 → 1.2.0

package/lib/automation-overlay.browser.js

@@ -0,0 +1,76 @@
+(() => {
+  const ROOT_ID = '__helix_cli_automation_overlay';
+
+  function ensureOverlay() {
+    if (document.getElementById(ROOT_ID)) {
+      return window.__helixCliOverlay;
+    }
+
+    const root = document.createElement('div');
+    root.id = ROOT_ID;
+    root.setAttribute('data-helix-cli', 'automation-overlay');
+    root.setAttribute('aria-hidden', 'true');
+    root.style.cssText = [
+      'position:fixed',
+      'top:16px',
+      'right:16px',
+      'z-index:2147483647',
+      'pointer-events:none',
+      'box-sizing:border-box',
+      'max-width:280px',
+      'padding:10px 14px',
+      'border-radius:12px',
+      'background:#f5b942',
+      'color:#3d2b00',
+      'font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif',
+      'box-shadow:0 4px 14px rgba(0,0,0,.18)',
+      'letter-spacing:.01em',
+    ].join(';');
+
+    const title = document.createElement('div');
+    title.dataset.line = 'title';
+    title.style.cssText = 'font-weight:600;margin-bottom:4px;word-break:break-all;';
+
+    const status = document.createElement('div');
+    status.dataset.line = 'status';
+    status.style.cssText = 'opacity:.92;';
+
+    const detail = document.createElement('div');
+    detail.dataset.line = 'detail';
+    detail.style.cssText = 'opacity:.78;margin-top:2px;font-size:12px;';
+
+    root.append(title, status, detail);
+    (document.body || document.documentElement).appendChild(root);
+
+    const api = {
+      update(payload = {}) {
+        const el = document.getElementById(ROOT_ID);
+        if (!el) return;
+        const t = el.querySelector('[data-line="title"]');
+        const s = el.querySelector('[data-line="status"]');
+        const d = el.querySelector('[data-line="detail"]');
+        if (t) t.textContent = payload.title || 'helixlife-v5-cli';
+        if (s) s.textContent = payload.status || '机器自动化';
+        if (d) d.textContent = payload.detail || 'CLI 操作中';
+        el.style.display = payload.hidden ? 'none' : 'block';
+      },
+    };
+
+    window.__helixCliOverlay = api;
+    return api;
+  }
+
+  function boot() {
+    ensureOverlay().update({
+      title: 'helixlife-v5-cli',
+      status: '机器自动化',
+      detail: '会话已就绪',
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot, { once: true });
+  } else {
+    boot();
+  }
+})();

package/lib/automation-overlay.init.js

@@ -0,0 +1,78 @@
+// Playwright browser init script: inject automation status overlay on every document.
+// Source is duplicated from automation-overlay.browser.js (keep in sync when editing).
+(() => {
+  const ROOT_ID = '__helix_cli_automation_overlay';
+
+  function ensureOverlay() {
+    if (document.getElementById(ROOT_ID)) {
+      return window.__helixCliOverlay;
+    }
+
+    const root = document.createElement('div');
+    root.id = ROOT_ID;
+    root.setAttribute('data-helix-cli', 'automation-overlay');
+    root.setAttribute('aria-hidden', 'true');
+    root.style.cssText = [
+      'position:fixed',
+      'top:16px',
+      'right:16px',
+      'z-index:2147483647',
+      'pointer-events:none',
+      'box-sizing:border-box',
+      'max-width:280px',
+      'padding:10px 14px',
+      'border-radius:12px',
+      'background:#f5b942',
+      'color:#3d2b00',
+      'font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif',
+      'box-shadow:0 4px 14px rgba(0,0,0,.18)',
+      'letter-spacing:.01em',
+    ].join(';');
+
+    const title = document.createElement('div');
+    title.dataset.line = 'title';
+    title.style.cssText = 'font-weight:600;margin-bottom:4px;word-break:break-all;';
+
+    const status = document.createElement('div');
+    status.dataset.line = 'status';
+    status.style.cssText = 'opacity:.92;';
+
+    const detail = document.createElement('div');
+    detail.dataset.line = 'detail';
+    detail.style.cssText = 'opacity:.78;margin-top:2px;font-size:12px;';
+
+    root.append(title, status, detail);
+    (document.body || document.documentElement).appendChild(root);
+
+    const api = {
+      update(payload = {}) {
+        const el = document.getElementById(ROOT_ID);
+        if (!el) return;
+        const t = el.querySelector('[data-line="title"]');
+        const s = el.querySelector('[data-line="status"]');
+        const d = el.querySelector('[data-line="detail"]');
+        if (t) t.textContent = payload.title || 'helixlife-v5-cli';
+        if (s) s.textContent = payload.status || '机器自动化';
+        if (d) d.textContent = payload.detail || 'CLI 操作中';
+        el.style.display = payload.hidden ? 'none' : 'block';
+      },
+    };
+
+    window.__helixCliOverlay = api;
+    return api;
+  }
+
+  function boot() {
+    ensureOverlay().update({
+      title: 'helixlife-v5-cli',
+      status: '机器自动化',
+      detail: '会话已就绪',
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot, { once: true });
+  } else {
+    boot();
+  }
+})();

package/lib/automation-overlay.js

@@ -0,0 +1,238 @@
+"use strict";
+
+const fs = require("node:fs");
+const path = require("node:path");
+
+const OVERLAY_SKIP_COMMANDS = new Set([
+  "run-code",
+  "list",
+  "close",
+  "close-all",
+  "kill-all",
+  "detach",
+  "delete-data",
+  "config-print",
+  "cookie-list",
+  "cookie-get",
+  "cookie-set",
+  "cookie-delete",
+  "cookie-clear",
+  "localstorage-list",
+  "localstorage-get",
+  "localstorage-set",
+  "localstorage-delete",
+  "localstorage-clear",
+  "sessionstorage-list",
+  "sessionstorage-get",
+  "sessionstorage-set",
+  "sessionstorage-delete",
+  "sessionstorage-clear",
+  "route-list",
+  "tab-list",
+  "console",
+  "network",
+  "state-save",
+  "state-load",
+  "tracing-start",
+  "tracing-stop",
+  "video-start",
+  "video-stop",
+  "video-chapter",
+  "highlight",
+  "generate-locator",
+  "show",
+]);
+
+const OVERLAY_SESSION_OPEN_COMMANDS = new Set(["open", "attach"]);
+
+let cachedBrowserScript = null;
+
+function isOverlayEnabled() {
+  const flag = process.env.HELIX_AUTOMATION_OVERLAY;
+  if (flag === "0" || flag === "false" || flag === "off") {
+    return false;
+  }
+  return true;
+}
+
+function resolveCliConfigPath() {
+  if (process.env.HELIX_CLI_CONFIG) {
+    return path.resolve(process.env.HELIX_CLI_CONFIG);
+  }
+  const initScriptPath = path.join(__dirname, "automation-overlay.init.js");
+  const runtimeConfigPath = path.join(__dirname, "cli.runtime.config.json");
+  const config = {
+    browser: {
+      initScript: [initScriptPath],
+    },
+  };
+  fs.writeFileSync(
+    runtimeConfigPath,
+    `${JSON.stringify(config, null, 2)}\n`,
+    "utf8",
+  );
+  return runtimeConfigPath;
+}
+
+function getBrowserOverlayScript() {
+  if (!cachedBrowserScript) {
+    cachedBrowserScript = fs.readFileSync(
+      path.join(__dirname, "automation-overlay.browser.js"),
+      "utf8",
+    );
+  }
+  return cachedBrowserScript;
+}
+
+function stripLeadingFlags(tokens) {
+  let i = 0;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t === "--raw" || t === "--json") {
+      i += 1;
+      continue;
+    }
+    if (t.startsWith("-s=")) {
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  return tokens.slice(i);
+}
+
+function truncate(text, max = 48) {
+  const s = String(text || "")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (s.length <= max) return s;
+  return `${s.slice(0, max - 1)}…`;
+}
+
+function describeOverlayPayload(tokens, phase) {
+  const core = stripLeadingFlags(tokens);
+  const command = core[0];
+  if (!command) {
+    return {
+      title: "helixlife-v5-cli",
+      status: phase === "after" ? "已完成" : "执行中...",
+      detail: "CLI自动化操作中",
+    };
+  }
+
+  const args = core.slice(1).filter((t) => !t.startsWith("--"));
+  let title = command;
+  let detail = args.length ? truncate(args.join(" ")) : "CLI自动化操作中";
+
+  switch (command) {
+    case "click":
+    case "dblclick":
+    case "hover":
+    case "check":
+    case "uncheck":
+      title = command;
+      detail = truncate(args[0] || "元素", 40);
+      break;
+    case "fill":
+      title = "fill";
+      detail = truncate(args[0] || "输入框", 40);
+      break;
+    case "type":
+      title = "type";
+      detail = truncate(args[0] || "", 32);
+      break;
+    case "goto":
+    case "open":
+      title = command;
+      detail = truncate(args[0] || "页面", 56);
+      break;
+    case "snapshot":
+      title = "snapshot";
+      detail = "页面验收";
+      break;
+    case "run-code":
+      title = "run-code";
+      detail = truncate(args[0] || "脚本", 40);
+      break;
+    case "press":
+      title = "press";
+      detail = truncate(args[0] || "按键", 24);
+      break;
+    case "select":
+      title = "select";
+      detail = truncate(args.join(" "), 40);
+      break;
+    case "upload":
+      title = "upload";
+      detail = truncate(args[0] || "文件", 40);
+      break;
+    case "eval":
+      title = "eval";
+      detail = "读取页面状态";
+      break;
+    default:
+      title = command;
+      break;
+  }
+
+  return {
+    title,
+    status: phase === "after" ? "已完成" : "执行中...",
+    detail: phase === "after" ? "CLI自动化操作中" : detail || "CLI自动化操作中",
+  };
+}
+
+function shouldUpdateOverlay(tokens) {
+  const core = stripLeadingFlags(tokens);
+  const command = core[0];
+  if (!command) return false;
+  if (OVERLAY_SKIP_COMMANDS.has(command)) return false;
+  return true;
+}
+
+function shouldInjectOpenConfig(tokens) {
+  const core = stripLeadingFlags(tokens);
+  const command = core[0];
+  if (!command || !OVERLAY_SESSION_OPEN_COMMANDS.has(command)) return false;
+  return !tokens.some((t) => t === "--config" || t.startsWith("--config="));
+}
+
+function injectOpenConfig(tokens) {
+  if (!isOverlayEnabled() || !shouldInjectOpenConfig(tokens)) {
+    return tokens;
+  }
+  const configPath = resolveCliConfigPath();
+  const next = [...tokens];
+  const core = stripLeadingFlags(tokens);
+  const insertAt = tokens.indexOf(core[0]);
+  next.splice(insertAt + 1, 0, `--config=${configPath}`);
+  return next;
+}
+
+function buildOverlayRunCode(payload) {
+  const browserScript = getBrowserOverlayScript();
+  const payloadJson = JSON.stringify(payload);
+  return [
+    "async page => {",
+    `  const browserScript = ${JSON.stringify(browserScript)};`,
+    `  const payload = ${payloadJson};`,
+    "  await page.evaluate(({ script, data }) => {",
+    "    // eslint-disable-next-line no-eval",
+    "    eval(script);",
+    "    if (window.__helixCliOverlay) window.__helixCliOverlay.update(data);",
+    "  }, { script: browserScript, data: payload });",
+    "}",
+  ].join("\n");
+}
+
+module.exports = {
+  OVERLAY_SKIP_COMMANDS,
+  isOverlayEnabled,
+  resolveCliConfigPath,
+  stripLeadingFlags,
+  describeOverlayPayload,
+  shouldUpdateOverlay,
+  shouldInjectOpenConfig,
+  injectOpenConfig,
+  buildOverlayRunCode,
+};

package/lib/cli.js

@@ -4,6 +4,13 @@ const path = require('node:path');
 const { spawnSync } = require('node:child_process');
 
 const PACKAGE_JSON = require(path.join(__dirname, '..', 'package.json'));
+const {
+  isOverlayEnabled,
+  injectOpenConfig,
+  shouldUpdateOverlay,
+  describeOverlayPayload,
+  buildOverlayRunCode,
+} = require('./automation-overlay');
 
 /** 默认快照/下载等工作区目录名（相对 cwd），替代引擎默认的 .playwright-cli */
 const DEFAULT_OUTPUT_DIR_NAME = 'helixlife-v5-cli';
@@ -35,9 +42,9 @@ function buildChildEnv() {
  * 将参数原样交给底层浏览器自动化引擎，返回子进程退出码。
  * 使用 node 直接执行入口脚本，避免依赖 npx、Shell 与 PATH，在 Windows / macOS 上一致。
  */
-function runPlaywrightCliPassthrough(args) {
+function runPlaywrightCliPassthrough(args, options = {}) {
   const result = spawnSync(process.execPath, [playwrightCliEntry(), ...args], {
-    stdio: 'inherit',
+    stdio: options.quiet ? ['ignore', 'ignore', 'ignore'] : 'inherit',
     env: buildChildEnv(),
     windowsHide: true,
   });
@@ -51,6 +58,27 @@ function runPlaywrightCliPassthrough(args) {
   return result.status === null || result.status === undefined ? 1 : result.status;
 }
 
+function updateAutomationOverlay(tokens, phase) {
+  if (!isOverlayEnabled() || !shouldUpdateOverlay(tokens)) {
+    return;
+  }
+  const payload = describeOverlayPayload(tokens, phase);
+  const code = buildOverlayRunCode(payload);
+  runPlaywrightCliPassthrough(['run-code', code], { quiet: true });
+}
+
+function runPlaywrightCliWithOverlay(tokens) {
+  const args = injectOpenConfig(tokens);
+  if (isOverlayEnabled() && shouldUpdateOverlay(args)) {
+    updateAutomationOverlay(args, 'before');
+  }
+  const code = runPlaywrightCliPassthrough(args);
+  if (code === 0 && isOverlayEnabled() && shouldUpdateOverlay(args)) {
+    updateAutomationOverlay(args, 'after');
+  }
+  return code;
+}
+
 function parseHelixFlags(tokens, startIndex) {
   const options = {
     headless: false,
@@ -114,6 +142,10 @@ function printHelp() {
   console.log(
     `  HELIX_OUTPUT_DIR / PLAYWRIGHT_MCP_OUTPUT_DIR（默认输出目录 <cwd>/${DEFAULT_OUTPUT_DIR_NAME}）`
   );
+  console.log(
+    '  HELIX_AUTOMATION_OVERLAY（设为 0/false/off 可关闭右上角机器操作浮层，默认开启）'
+  );
+  console.log('  HELIX_CLI_CONFIG（自定义 Playwright CLI 配置文件路径）');
 }
 
 function getBaseUrl() {
@@ -130,12 +162,12 @@ function helixHome(options) {
   if (!options.headless) {
     openArgs.push('--headed');
   }
-  const code = runPlaywrightCliPassthrough(openArgs);
+  const code = runPlaywrightCliWithOverlay(openArgs);
   if (code !== 0) {
     return code;
   }
   console.error(`[${PACKAGE_JSON.name}] opened: ${baseUrl}`);
-  return runPlaywrightCliPassthrough(['eval', 'document.title']);
+  return runPlaywrightCliWithOverlay(['eval', 'document.title']);
 }
 
 function helixDoctor(options) {
@@ -198,7 +230,7 @@ async function main(argv = process.argv) {
     return 2;
   }
 
-  return runPlaywrightCliPassthrough(tokens);
+  return runPlaywrightCliWithOverlay(tokens);
 }
 
 main.printHelp = printHelp;

package/lib/cli.runtime.config.json

@@ -0,0 +1,7 @@
+{
+  "browser": {
+    "initScript": [
+      "C:\\Users\\zouyh\\Desktop\\WorkSpace\\jieluoxuan\\cli\\helix-cli\\lib\\automation-overlay.init.js"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixlife-v5-cli",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "Helix（vip.helixlife.cn）精细化浏览器自动化命令行工具。",
   "main": "helix-cli.js",
   "bin": {