comate-ui-inspector 0.1.6-alpha.3 → 0.1.6-alpha.4

package/bridge/server.mjs

@@ -5,7 +5,7 @@
  * 跑在「Comate agent / hook / MCP 所在的那台机器」（通常是远程开发机），读写和它们同一份
  * ~/.ui-inspector/*.json。浏览器扩展（transport=http）直连本服务。
  */
-import {createServer} from 'node:http';
+import {createServer, get} from 'node:http';
 import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync, rmSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
@@ -19,6 +19,8 @@ const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
 const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
 // figma 节点内导出的图片字节落盘到这里（按采集批次分子目录）。
 const figmaAssetsDir = resolve(homedir(), '.ui-inspector/figma-assets');
+// bridge 实际绑定的端口写这里，供 cli（install --remote）读取并打印真正在用的端口。
+const portFile = resolve(homedir(), '.ui-inspector/bridge.json');
 const PORT = Number(process.env.UI_INSPECTOR_BRIDGE_PORT) || 8917;
 const HOST = process.env.UI_INSPECTOR_BRIDGE_HOST || '127.0.0.1';
 
@@ -276,6 +278,95 @@ const server = createServer((req, res) => {
     json(res, 404, {ok: false, error: 'not found'});
 });
 
-server.listen(PORT, HOST, () => {
-    process.stdout.write(`ui-inspector bridge listening on http://${HOST}:${PORT}\n`);
+let currentPort = PORT;
+let triedReuse = false;
+let bound = false;
+const MAX_PORT_TRIES = 20;
+
+// 绑定成功：把实际端口写进 bridge.json（cli install --remote 据此打印真正在用的端口）。
+server.on('listening', () => {
+    bound = true;
+    const addr = server.address();
+    const actual = (addr && addr.port) || currentPort;
+    try {
+        mkdirSync(dirname(portFile), {recursive: true});
+        writeFileSync(
+            portFile,
+            `${JSON.stringify({host: HOST, port: actual, pid: process.pid, ts: Date.now()})}\n`,
+            'utf8'
+        );
+    } catch {
+        // 写端口文件失败不影响服务
+    }
+    process.stdout.write(`ui-inspector bridge listening on http://${HOST}:${actual}\n`);
+});
+
+// 顺延到下一个端口；连试 MAX_PORT_TRIES 个都不行才放弃。bound 后幂等，避免重复 listen 崩溃。
+function hopNext() {
+    if (bound) {
+        return;
+    }
+    if (currentPort - PORT >= MAX_PORT_TRIES) {
+        process.stderr.write(
+            `从 ${PORT} 起连续 ${MAX_PORT_TRIES} 个端口都被占用，放弃。手动指定 UI_INSPECTOR_BRIDGE_PORT。\n`
+        );
+        process.exit(1);
+        return;
+    }
+    currentPort += 1;
+    server.listen(currentPort, HOST);
+}
+
+// 端口被占用是常见情况。基准端口被占时先探测是不是已有我们的 bridge：是就复用退出（幂等）；
+// 否则自动顺延到下一个可用端口。其它启动错误直接友好报错退出，不抛未捕获异常。
+server.on('error', err => {
+    if (!err || err.code !== 'EADDRINUSE') {
+        process.stderr.write(`ui-inspector bridge 启动失败：${String(err)}\n`);
+        process.exit(1);
+        return;
+    }
+    if (currentPort === PORT && !triedReuse) {
+        triedReuse = true;
+        const probeHost = HOST === '0.0.0.0' ? '127.0.0.1' : HOST;
+        // probe 的 end/error/timeout 可能多次触发（如 destroy 又引发 error），用 settled 保证只处理一次。
+        let settled = false;
+        const settle = fn => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            fn();
+        };
+        const req = get({host: probeHost, port: PORT, path: '/state', timeout: 1500}, res => {
+            let body = '';
+            res.on('data', c => (body += c));
+            res.on('end', () =>
+                settle(() => {
+                    let ok = false;
+                    try {
+                        ok = JSON.parse(body).ok === true;
+                    } catch {
+                        ok = false;
+                    }
+                    if (ok) {
+                        process.stdout.write(
+                            `ui-inspector bridge 已在 http://${HOST}:${PORT} 运行，复用现有实例即可。\n`
+                        );
+                        process.exit(0);
+                    } else {
+                        hopNext(); // 被非 bridge 占用 → 换端口
+                    }
+                })
+            );
+        });
+        req.on('error', () => settle(hopNext));
+        req.on('timeout', () => {
+            req.destroy();
+            settle(hopNext);
+        });
+        return;
+    }
+    hopNext();
 });
+
+server.listen(currentPort, HOST);

package/cli.mjs

@@ -119,6 +119,29 @@ function installNativeHost() {
 }
 
 // 后台拉起 bridge 并与本进程脱钩，install --remote 用：装完 hook/MCP 顺手把 bridge 跑起来。
+// bridge 可能因端口被占而自动顺延端口，所以不能直接用传入的 port——读它落盘的 bridge.json 拿真正在用的端口。
+function sleepSync(ms) {
+    Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+
+// 轮询 ~/.ui-inspector/bridge.json，拿一条「本次启动之后写入」的记录（ts >= since）。读不到返回 null。
+function readActualBridgePort(since, timeoutMs = 4000) {
+    const f = resolve(pendingDir, 'bridge.json');
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+        try {
+            const j = JSON.parse(readFileSync(f, 'utf8'));
+            if (j && j.port && (j.ts || 0) >= since) {
+                return j.port;
+            }
+        } catch {
+            // 文件还没写出来
+        }
+        sleepSync(150);
+    }
+    return null;
+}
+
 function startBridgeDetached(port, host) {
     mkdirSync(pendingDir, {recursive: true});
     const logFile = resolve(pendingDir, 'bridge.log');
@@ -127,14 +150,21 @@ function startBridgeDetached(port, host) {
     if (host) {
         env.UI_INSPECTOR_BRIDGE_HOST = String(host);
     }
+    const spawnedAt = Date.now();
     const child = spawn(process.execPath, [resolve(pkgRoot, 'bridge/server.mjs')], {
         detached: true,
         stdio: ['ignore', fd, fd],
         env,
     });
     child.unref();
-    out(`bridge 已后台启动（pid ${child.pid}，监听 ${host || '127.0.0.1'}:${port}），日志：${logFile}`);
+    // 端口可能被占而自动顺延；读 bridge.json 拿真正在用的端口。复用现有实例时子进程不写新记录，回落到传入 port。
+    const actual = readActualBridgePort(spawnedAt) || port;
+    out(`bridge 已后台启动（pid ${child.pid}，监听 ${host || '127.0.0.1'}:${actual}），日志：${logFile}`);
+    if (String(actual) !== String(port)) {
+        out(`  注意：端口 ${port} 被占用，已自动改用 ${actual}——扩展弹窗地址请填这个端口。`);
+    }
     out(`  停止：kill ${child.pid}`);
+    return actual;
 }
 
 function install({remote, port, host}) {
@@ -142,9 +172,9 @@ function install({remote, port, host}) {
     if (remote) {
         const bindHost = host || '0.0.0.0';
         out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
-        startBridgeDetached(port, bindHost);
+        const actual = startBridgeDetached(port, bindHost);
         out(
-            `\n浏览器在扩展弹窗里把传输设为「远程（HTTP bridge）」、地址填「本机可达地址:${port}」（如 devlocal.oreateai.com:${port}）即可直连。`
+            `\n浏览器在扩展弹窗里把传输设为「远程（HTTP bridge）」、地址填「本机可达地址:${actual}」（如 devlocal.oreateai.com:${actual}）即可直连。`
         );
         return;
     }

package/extension/bridge-content.js

@@ -196,8 +196,9 @@
             ovBar.remove();
             ovBar = null;
         }
-        document.removeEventListener('mousemove', ovDrag);
-        document.removeEventListener('mouseup', ovDragEnd);
+        document.removeEventListener('pointermove', ovDrag);
+        document.removeEventListener('pointerup', ovDragEnd);
+        document.removeEventListener('pointercancel', ovDragEnd);
     }
 
     function ovApply() {
@@ -232,22 +233,30 @@
         ovImg = document.createElement('img');
         ovImg.src = data.dataUrl;
         ovImg.draggable = false;
-        ovImg.style.cssText = 'display:block;cursor:move;box-shadow:0 0 0 1px rgba(255,0,0,0.35);';
+        // touch-action:none —— 否则移动端/模拟器会把触摸当成页面滚动吞掉，pointermove 不触发。
+        ovImg.style.cssText = 'display:block;cursor:move;touch-action:none;box-shadow:0 0 0 1px rgba(255,0,0,0.35);';
         ovImg.addEventListener('load', function () {
             if (!ovs.baseW) {
                 ovs.baseW = ovImg.naturalWidth || 0;
             }
             ovApply();
         });
-        ovImg.addEventListener('mousedown', function (e) {
+        // 用 Pointer Events 统一鼠标 + 触摸（含 DevTools 移动端模拟器把鼠标转成 touch 的情况）。
+        ovImg.addEventListener('pointerdown', function (e) {
             if (ovs.through) {
                 return;
             }
             dragFrom = {dx: e.clientX - ovs.x, dy: e.clientY - ovs.y};
+            try {
+                ovImg.setPointerCapture(e.pointerId);
+            } catch (err) {
+                // 某些环境不支持指针捕获，忽略
+            }
             e.preventDefault();
         });
-        document.addEventListener('mousemove', ovDrag);
-        document.addEventListener('mouseup', ovDragEnd);
+        document.addEventListener('pointermove', ovDrag);
+        document.addEventListener('pointerup', ovDragEnd);
+        document.addEventListener('pointercancel', ovDragEnd);
         ov.appendChild(ovImg);
         document.documentElement.appendChild(ov);
         ovToolbar();

package/extension/inspector-main.js

@@ -39,6 +39,17 @@
     panelHead.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;';
     var panelCount = document.createElement('span');
     panelCount.style.cssText = 'font-weight:600;';
+    // 右侧按钮组：收起/展开 + 清空。
+    var panelBtns = document.createElement('div');
+    panelBtns.style.cssText = 'display:flex;gap:6px;flex:none;';
+    var panelToggle = document.createElement('button');
+    panelToggle.textContent = '收起';
+    panelToggle.style.cssText =
+        'border:none;background:#2f2f2f;color:#fff;border-radius:4px;padding:2px 8px;cursor:pointer;font:inherit;';
+    panelToggle.onclick = function () {
+        panelCollapsed = !panelCollapsed;
+        renderPanel();
+    };
     var panelClear = document.createElement('button');
     panelClear.textContent = '清空';
     panelClear.style.cssText =
@@ -49,8 +60,10 @@
         renderPanel();
         showHint('已清空全部选中');
     };
+    panelBtns.appendChild(panelToggle);
+    panelBtns.appendChild(panelClear);
     panelHead.appendChild(panelCount);
-    panelHead.appendChild(panelClear);
+    panelHead.appendChild(panelBtns);
     var panelList = document.createElement('div');
     panel.appendChild(panelHead);
     panel.appendChild(panelList);
@@ -81,6 +94,7 @@
     // DOM 树上下级导航状态：navPath 从叶子往上累积，navIdx 当前停在哪一层（0 = 叶子）。
     var navPath = [];
     var navIdx = 0;
+    var panelCollapsed = false; // 侧边栏收起态：仅隐藏列表，保留标题与计数
 
     function renderPanel() {
         if (!selected.length) {
@@ -89,6 +103,8 @@
         }
         panel.style.display = 'block';
         panelCount.textContent = '已选中 ' + selected.length + ' 个';
+        panelToggle.textContent = panelCollapsed ? '展开' : '收起';
+        panelList.style.display = panelCollapsed ? 'none' : 'block';
         panelList.textContent = '';
         renumber();
         selected.forEach(function (item, i) {

package/extension/popup.html

@@ -225,15 +225,13 @@
                         <input
                             id="bridge-target"
                             type="text"
-                            placeholder="devlocal.oreateai.com:8917"
+                            placeholder="<remote-ip>:<port>"
                         />
                     </div>
                     <div class="hint">
                         填开发机 bridge 的完整地址（如
-                        <code>devlocal.oreateai.com:8917</code>
-                        ）。开发机上
-                        <code>ui-inspector install --remote</code>
-                        起 bridge（默认绑 0.0.0.0 供直连）。
+                        <code><\remote-ip>:<\port></code>
+                        ）
                     </div>
                 </div>
             </section>

package/package.json

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