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

package/bridge/server.mjs

@@ -5,10 +5,11 @@
  * 跑在「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';
+import {buildQaContextText} from '../lib/context-text.mjs';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
@@ -19,6 +20,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';
 
@@ -184,6 +187,56 @@ function figmaCapture(node) {
     writeFileSync(figmaPendingFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
+// QA 模式：读 append-only 事件流，返回有序的 {kind, item} 列表（与 hook 同源逻辑）。
+function readEvents() {
+    const out = [];
+    let text = '';
+    try {
+        text = readFileSync(eventsFile, 'utf8');
+    } catch {
+        return out;
+    }
+    for (const line of text.split('\n')) {
+        if (!line.trim()) {
+            continue;
+        }
+        let ev;
+        try {
+            ev = JSON.parse(line);
+        } catch {
+            continue;
+        }
+        if (ev && ev.kind && ev.item) {
+            out.push(ev);
+        }
+    }
+    return out;
+}
+
+// QA 模式：读 figma 采集列表。
+function readFigma() {
+    try {
+        const p = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        return Array.isArray(p) ? p : [];
+    } catch {
+        return [];
+    }
+}
+
+// QA 模式：把选中元素 + 已停止的录制 + figma 节点拼成一份可复制的上下文文本（供测试人员复制）。
+// 录制与 hook 同一约束：仅 active === false（已停止）时输出，进行中不输出以免截断。
+function qaContext() {
+    const list = readStore();
+    const meta = readMeta();
+    const evs = meta && meta.active === false ? readEvents() : [];
+    const figma = readFigma();
+    return {
+        ok: true,
+        text: buildQaContextText(list, meta, evs, figma),
+        counts: {elements: list.length, recEvents: evs.length, figma: figma.length},
+    };
+}
+
 function readBody(req, cb) {
     let body = '';
     req.on('data', chunk => (body += chunk));
@@ -233,6 +286,10 @@ const server = createServer((req, res) => {
         json(res, 200, {ok: true, count: readStore().length, status: readStatus()});
         return;
     }
+    if (req.method === 'GET' && url.pathname === '/qa/context') {
+        json(res, 200, qaContext());
+        return;
+    }
     if (req.method === 'POST' && url.pathname === '/rec/start') {
         readBody(req, (data, err) => {
             if (err) {
@@ -276,6 +333,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/enhancements/recorder/pane.html

@@ -6,6 +6,37 @@
     />
     录制控制台输出
 </label>
+<div
+    id="rec-console-filter-wrap"
+    style="margin-top: 4px"
+>
+    <div style="margin-bottom: 4px">
+        <label class="radio">
+            <input
+                type="radio"
+                name="console-filter-mode"
+                value="black"
+                checked
+            />
+            黑名单（剔除命中）
+        </label>
+        <label class="radio">
+            <input
+                type="radio"
+                name="console-filter-mode"
+                value="white"
+            />
+            白名单（只保留命中）
+        </label>
+    </div>
+    <input
+        id="rec-console-filter"
+        type="text"
+        placeholder="正则，每行一条，如 .*warn.*"
+        style="width: 100%"
+    />
+    <div class="hint">每行一条正则：黑名单剔除命中输出，白名单只保留命中输出（空则全不保留）。</div>
+</div>
 <label class="radio">
     <input
         type="checkbox"

package/enhancements/recorder/pane.js

@@ -13,6 +13,14 @@
         byId('rec-status').textContent = active ? '录制中…（操作页面后点停止）' : '';
         byId('rec-console').disabled = active;
         byId('rec-network').disabled = active;
+        byId('rec-console-filter').disabled = active;
+        for (const r of document.querySelectorAll('input[name="console-filter-mode"]')) {
+            r.disabled = active;
+            r.checked = (recording && recording.consoleFilterMode === r.value) || (!recording && r.value === 'black');
+        }
+        if (recording && typeof recording.consoleFilter === 'string') {
+            byId('rec-console-filter').value = recording.consoleFilter;
+        }
     }
 
     byId('rec-toggle').onclick = async () => {
@@ -26,6 +34,11 @@
                     active: true,
                     console: byId('rec-console').checked,
                     network: byId('rec-network').checked,
+                    consoleFilter: byId('rec-console-filter').value.trim(),
+                    consoleFilterMode:
+                        document.querySelector('input[name="console-filter-mode"]:checked')?.value === 'white'
+                            ? 'white'
+                            : 'black',
                     startedAt: Date.now(),
                 },
             });