comate-ui-inspector 0.1.0 → 0.1.2-alpha.1

package/cli.mjs

@@ -34,7 +34,11 @@ function nmDirs() {
                   'Library/Application Support/Microsoft Edge/NativeMessagingHosts',
                   'Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts',
               ]
-            : ['.config/google-chrome/NativeMessagingHosts', '.config/microsoft-edge/NativeMessagingHosts', '.config/chromium/NativeMessagingHosts'];
+            : [
+                  '.config/google-chrome/NativeMessagingHosts',
+                  '.config/microsoft-edge/NativeMessagingHosts',
+                  '.config/chromium/NativeMessagingHosts',
+              ];
     return rels.map(rel => join(home, rel));
 }
 
@@ -51,10 +55,15 @@ function out(text) {
 }
 function install() {
     chmodSync(hostPath, 0o755);
+    // 用壳脚本硬编码 node 绝对路径：Chrome 拉起 native host 时 PATH 极简（不含 nvm 等目录），
+    // 直接 `#!/usr/bin/env node` 会找不到 node 导致 host 起不来；壳脚本规避这点。
+    const wrapperPath = resolve(pkgRoot, 'extension/native-host/host-wrapper.sh');
+    writeFileSync(wrapperPath, `#!/bin/sh\nexec "${process.execPath}" "${hostPath}" "$@"\n`);
+    chmodSync(wrapperPath, 0o755);
     const manifest = {
         name: HOST_NAME,
         description: 'ui-inspector native messaging host',
-        path: hostPath,
+        path: wrapperPath,
         type: 'stdio',
         allowed_origins: [`chrome-extension://${EXT_ID}/`],
     };
@@ -97,6 +106,10 @@ function uninstall({purge}) {
             out(`removed host manifest -> ${file}`);
         }
     }
+    const wrapperPath = resolve(pkgRoot, 'extension/native-host/host-wrapper.sh');
+    if (existsSync(wrapperPath)) {
+        rmSync(wrapperPath);
+    }
     const config = readHooks();
     if (config?.hooks?.UserPromptSubmit) {
         const before = config.hooks.UserPromptSubmit.length;
@@ -151,4 +164,3 @@ if (cmd === 'install') {
 } else {
     help();
 }
-

package/extension/bridge-content.js

@@ -1,29 +1,60 @@
 /*
  * ISOLATED world 内容脚本：MAIN world 与 background 之间的中继。
  *
- * - 收到 MAIN 发来的 selection（window.postMessage）→ 转给 background 写入本地桥；
- * - 每 1.5s 问 background 要一次 /state 的 count；count 为 0（AI 调 MCP 清空后）
+ * - 收到 MAIN 发来的 selection（window.postMessage）→ 转给 background 写入本地 host；
+ * - 每 1.5s 问 background 要一次 state 的 count；count 为 0（AI 调 MCP 清空后）
  *   → 回发 cleared 给 MAIN，让它撤掉页面高亮。
+ *
+ * 健壮性：扩展被重载后旧页面里的本脚本会「上下文失效」，此时访问 chrome.runtime 会抛
+ * "Extension context invalidated"。用 alive() 判活 + try/catch 兜住，并在失效时停掉轮询。
  */
 (function () {
+    const alive = () => !!(chrome.runtime && chrome.runtime.id);
+    let lastStatusId; // 首轮只记录、不弹；之后 id 变化才弹 toast
+
     window.addEventListener('message', event => {
-        if (event.source !== window) {
+        if (event.source !== window || !event.data || event.data.__uiInspector !== 'selection') {
+            return;
+        }
+        if (!alive()) {
             return;
         }
-        const data = event.data;
-        if (data && data.__uiInspector === 'selection') {
-            chrome.runtime.sendMessage({type: 'ingest', targets: data.targets || []});
+        try {
+            chrome.runtime.sendMessage(
+                {type: 'ingest', targets: event.data.targets || []},
+                () => void chrome.runtime.lastError
+            );
+        } catch {
+            // 扩展已重载、上下文失效：刷新页面即恢复
         }
     });
 
-    setInterval(() => {
-        chrome.runtime.sendMessage({type: 'state'}, resp => {
-            if (chrome.runtime.lastError) {
-                return;
-            }
-            if (resp && resp.ok && resp.count === 0) {
-                window.postMessage({__uiInspectorBridge: 'cleared'}, '*');
-            }
-        });
+    const timer = setInterval(() => {
+        if (!alive()) {
+            clearInterval(timer);
+            return;
+        }
+        try {
+            chrome.runtime.sendMessage({type: 'state'}, resp => {
+                if (chrome.runtime.lastError || !resp || !resp.ok) {
+                    return;
+                }
+                if (resp.count === 0) {
+                    window.postMessage({__uiInspectorBridge: 'cleared'}, '*');
+                }
+                const status = resp.status;
+                if (status && status.id !== undefined) {
+                    if (lastStatusId !== undefined && status.id !== lastStatusId) {
+                        window.postMessage(
+                            {__uiInspectorBridge: 'status', text: status.text, level: status.level},
+                            '*'
+                        );
+                    }
+                    lastStatusId = status.id;
+                }
+            });
+        } catch {
+            clearInterval(timer);
+        }
     }, 1500);
 })();

package/extension/inspector-main.js

@@ -28,6 +28,8 @@
     document.body.appendChild(hint);
 
     function showHint(text) {
+        window.clearTimeout(showStatus._t);
+        hint.style.background = '#111';
         hint.textContent = text;
         hint.style.opacity = '1';
         window.clearTimeout(showHint._t);
@@ -35,6 +37,21 @@
             hint.style.opacity = '0';
         }, 1800);
     }
+
+    // MCP notify_browser 推送的状态，复用底部这颗 pill：
+    // 「修改中」(info) 常驻不消失，「已完成」(success) /「失败」(error) 自动淡出。
+    function showStatus(text, level) {
+        window.clearTimeout(showHint._t);
+        window.clearTimeout(showStatus._t);
+        hint.textContent = text;
+        hint.style.background = level === 'success' ? '#16a34a' : level === 'error' ? '#dc2626' : '#111';
+        hint.style.opacity = '1';
+        if (level === 'success' || level === 'error') {
+            showStatus._t = window.setTimeout(function () {
+                hint.style.opacity = '0';
+            }, 2600);
+        }
+    }
     function cssPath(el) {
         var parts = [];
         var node = el;
@@ -162,7 +179,13 @@
         function (e) {
             if (e.key === 'Alt' && !active) {
                 active = true;
-                showHint('选择模式：点击元素可多选，再点取消；松开 Alt 退出');
+                showHint('选择模式：点击元素可多选，再点取消；松开 Alt 退出。点不动时按 Enter 选中当前悬停元素');
+            }
+            // 有些元素会吞掉 click（preventDefault/覆盖层），改用 Enter 选中当前 hover 的元素
+            if (e.key === 'Enter' && active && current && current !== overlay && current !== hint) {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleSelect(current);
             }
         },
         true
@@ -210,14 +233,17 @@
     window.addEventListener('scroll', repositionBoxes, true);
     window.addEventListener('resize', repositionBoxes, true);
 
-    // bridge-content 轮询到服务端 pending 已清空时回发 cleared，撤掉全部高亮
+    // bridge-content 轮询回发的消息：cleared（撤高亮）/ status（toast 提示）
     window.addEventListener('message', function (event) {
-        if (event.source !== window) {
+        if (event.source !== window || !event.data) {
             return;
         }
-        if (event.data && event.data.__uiInspectorBridge === 'cleared' && selected.length) {
+        if (event.data.__uiInspectorBridge === 'cleared' && selected.length) {
             clearSelection();
-            showHint('已按 AI 指令取消全部选中');
+            showHint('已取消全部选中');
+        }
+        if (event.data.__uiInspectorBridge === 'status' && event.data.text) {
+            showStatus(event.data.text, event.data.level);
         }
     });
 })();

package/extension/native-host/host.mjs

@@ -7,7 +7,7 @@
  *
  * 消息：
  *   {type:'ingest', targets:[...]}  → replace 写入 .ui-inspector/pending.json，回 {ok,pending}
- *   {type:'state'}                  → 回 {ok,count}
+ *   {type:'state'}                  → 回 {ok,count,status}（status 为最近一条 notify_browser 推送）
  *
  * 数据文件与 MCP server / hook 共用：统一在用户主目录 ~/.ui-inspector/pending.json（与仓库位置无关）。
  */
@@ -17,6 +17,7 @@ import {homedir} from 'node:os';
 
 // 共享落盘：一台机器一份，放用户主目录，不绑定任何仓库——一份代码可服务多个项目。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 
 function readStore() {
     try {
@@ -27,6 +28,14 @@ function readStore() {
     }
 }
 
+function readStatus() {
+    try {
+        return JSON.parse(readFileSync(statusFile, 'utf8'));
+    } catch {
+        return null;
+    }
+}
+
 function writeStore(list) {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
@@ -47,7 +56,7 @@ function handle(msg) {
         writeStore(targets.map(target => ({target, receivedAt: now})));
         resp = {ok: true, pending: targets.length};
     } else if (msg && msg.type === 'state') {
-        resp = {ok: true, count: readStore().length};
+        resp = {ok: true, count: readStore().length, status: readStatus()};
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/hooks/inject-ui-inspector.mjs

@@ -5,13 +5,13 @@
  * 流程：浏览器里按住 Alt 点元素（可多选，持久高亮）→ 落盘 .ui-inspector/pending.json；
  * 回到 Comate 写修改意见提交 → 本 hook 读取**全部**选中元素，作为 additionalContext 注入给 Agent。
  *
- * 注意：这里**不清空** pending —— 选中态要一直保持到 AI 改完、主动调 MCP clear_pending_edits
- * 才取消（页面轮询到 count=0 后撤掉高亮）。否则第一轮提交就会把多选清掉、页面提前取消高亮。
+ * 注入后立即**清空** pending —— 「agent 拿到元素即取消选中」：页面轮询到 count=0 会撤掉高亮，
+ * 不必等 AI 改完。改动过程中/完成的状态由 AI 调 MCP 的 notify_browser 推给页面 toast。
  *
  * 入参由 stdin 传入（UserPromptSubmit 的 JSON），这里用不到；输出 JSON 到 stdout。
  */
-import {readFileSync} from 'node:fs';
-import {resolve} from 'node:path';
+import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
+import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
 // 共享落盘：读用户主目录下的 pending（与 host / mcp 同一路径），一份代码可服务多个仓库。
@@ -52,7 +52,15 @@ const body = list.map((entry, index) => describe(entry?.target ?? {}, index, tot
 const additionalContext = [
     `【ui-inspector】用户在页面上选中了 ${total} 个元素，接下来这条消息是针对它们的修改意见：`,
     body,
-    '请据此定位源码并按用户意见修改；改完调用 MCP 工具 clear_pending_edits 取消页面选中。',
+    '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。',
 ].join('\n');
 
+// 「拿到即取消选中」：注入后清空 pending，页面轮询到 count=0 即撤掉高亮
+try {
+    mkdirSync(dirname(storeFile), {recursive: true});
+    writeFileSync(storeFile, '[]\n', 'utf8');
+} catch {
+    // 清空失败不影响注入
+}
+
 emit({decision: 'allow', additionalContext});

package/mcp/server.mjs

@@ -15,6 +15,7 @@ import {homedir} from 'node:os';
 import {createInterface} from 'node:readline';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 
 function readStore() {
     try {
@@ -32,6 +33,14 @@ function clearStore() {
     return count;
 }
 
+// 写一条状态供扩展轮询 → 页面 toast。id 单调递增（用时间戳），扩展据此判断是否是新状态。
+function writeStatus(message, level) {
+    mkdirSync(dirname(statusFile), {recursive: true});
+    const status = {text: String(message ?? ''), level: level || 'info', id: Date.now()};
+    writeFileSync(statusFile, `${JSON.stringify(status)}\n`, 'utf8');
+    return status;
+}
+
 const TOOLS = [
     {
         name: 'list_pending_edits',
@@ -45,12 +54,24 @@ const TOOLS = [
     },
     {
         name: 'clear_pending_edits',
-        description: '处理完后清空待处理列表，返回被清空的条数。',
+        description: '清空待处理选中列表（取消页面高亮），返回被清空的条数。',
         inputSchema: {type: 'object', properties: {}},
     },
+    {
+        name: 'notify_browser',
+        description: '向浏览器页面推送一条状态提示（toast），用于告知进度，如「修改中…」「已完成」。',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                message: {type: 'string', description: '要在页面 toast 显示的文案'},
+                level: {type: 'string', enum: ['info', 'success', 'error'], description: '提示级别，默认 info'},
+            },
+            required: ['message'],
+        },
+    },
 ];
 
-function callTool(name) {
+function callTool(name, args) {
     if (name === 'list_pending_edits') {
         return readStore();
     }
@@ -61,6 +82,9 @@ function callTool(name) {
     if (name === 'clear_pending_edits') {
         return {cleared: clearStore()};
     }
+    if (name === 'notify_browser') {
+        return writeStatus(args?.message, args?.level);
+    }
     throw new Error('unknown tool: ' + name);
 }
 
@@ -90,7 +114,7 @@ function handle(msg) {
     }
     if (msg.method === 'tools/call') {
         try {
-            const result = callTool(msg.params?.name);
+            const result = callTool(msg.params?.name, msg.params?.arguments);
             send({
                 jsonrpc: '2.0',
                 id: msg.id,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "comate-ui-inspector",
-    "version": "0.1.0",
+    "version": "0.1.2-alpha.1",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",