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

package/README.md

@@ -42,20 +42,36 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 ```bash
 # 远程机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge
 ui-inspector install --remote            # --port 默认 8917；跳过无浏览器的 native host
-# 本地笔记本：把 bridge 端口 + dev server 端口一起转发到本地 127.0.0.1
-ui-inspector link <remote-ssh-目标> --port <dev端口>
+# 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1（dev server 端口自行转发）
+ui-inspector link <remote-ssh-目标>                        # 本地/远程 bridge 都用默认 8917
+# 本地与远程 bridge 端口不同时才两个都填：
+ui-inspector link <remote-ssh-目标> --bridge-port <本地> --remote-bridge-port <远程>
 ```
 
-`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> -L <dev端口>:127.0.0.1:<dev端口> <remote>`，保持前台、Ctrl-C 断开。远程 bridge 端口不必和本地一致：本地用 `--bridge-port`、远程用 `--remote-bridge-port`（默认两者相同）；弹窗里填的是**本地**那个端口。
+`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> <remote>`，保持前台、Ctrl-C 断开。端口参数只有两个：本地 `--bridge-port`、远程 `--remote-bridge-port`（默认相同，相同时只填 `--bridge-port`、省略即默认 8917）；弹窗里填的是**本地**那个。dev server 端口由你的远程开发工具自行转发，`link` 不再代管。
 
 链路断了（ssh 掉线 / 远程 bridge 或 dev server 停了）时，先在本地自检：
 
 ```bash
-ui-inspector doctor <remote> --port <dev端口>   # 定位断在哪层并打印对应恢复命令
+ui-inspector doctor <remote> --dev-port <dev端口>   # 定位断在哪层并打印对应恢复命令
 ```
 
 恢复顺序：先确保远程 bridge 活（`ui-inspector bridge` / `install --remote`）→ 再接本地隧道（`ui-inspector link`）→ 再看远程 dev server。
 
+### 直连模式（笔记本能直达开发机内网 IP、堡垒机禁转发时用）
+
+如果你的笔记本本来就能直连开发机的内网 IP（比如 `/etc/hosts` 把 `devlocal.oreateai.com` 指到 `10.25.64.64`，浏览器直接就能打开 dev 页），那连 SSH 隧道都不用——把 bridge 暴露到开发机网卡，浏览器直连即可，正好绕开「堡垒机禁止 SSH 转发」：
+
+```bash
+# 开发机上：bridge 绑 0.0.0.0（install --remote 顺带起，或单独跑 bridge）
+ui-inspector install --remote --host 0.0.0.0
+# 或：ui-inspector bridge --host 0.0.0.0 --port 8917
+```
+
+然后扩展弹窗「传输通路」选 `远程（HTTP bridge）`，地址填**完整地址** `devlocal.oreateai.com:8917`（或 `10.25.64.64:8917`），不用 `ui-inspector link`。
+
+> 注意：`--host 0.0.0.0` 会把 bridge 暴露在内网，谁能访问到这个端口谁就能写 pending；仅在可信内网用。dev 页若是 https、扩展连 http bridge 被浏览器拦，则退回隧道模式或给 bridge 上 https。
+
 本地仍需一次：加载扩展（`chrome://extensions` 选 `extension` 目录），在弹窗把传输切到 `远程（HTTP bridge）`、填本地端口、加上你的 dev 域名。bridge 只绑 127.0.0.1、不暴露到网络，访问全程走 SSH 转发，所以 https 页面连 `127.0.0.1` 不触发混合内容拦截。
 
 ## 卸载 / 状态

package/bridge/server.mjs

@@ -17,6 +17,8 @@ import {homedir} from 'node:os';
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 const PORT = Number(process.env.UI_INSPECTOR_BRIDGE_PORT) || 8917;
+// 默认只绑 127.0.0.1（走 SSH 隧道）；直连模式（笔记本能直达开发机内网 IP）时用 0.0.0.0 暴露到网卡。
+const HOST = process.env.UI_INSPECTOR_BRIDGE_HOST || '127.0.0.1';
 
 function readStore() {
     try {
@@ -83,6 +85,6 @@ const server = createServer((req, res) => {
     json(res, 404, {ok: false, error: 'not found'});
 });
 
-server.listen(PORT, '127.0.0.1', () => {
-    process.stdout.write(`ui-inspector bridge listening on http://127.0.0.1:${PORT}\n`);
+server.listen(PORT, HOST, () => {
+    process.stdout.write(`ui-inspector bridge listening on http://${HOST}:${PORT}\n`);
 });

package/cli.mjs

@@ -4,8 +4,8 @@
  *   npm i -g comate-ui-inspector
  *   ui-inspector install      # 注册 native host + 写个人级 hook + 打印 MCP 配置与扩展目录
  *   ui-inspector install --remote  # 远程开发机：装 hook/MCP 并后台起 bridge（跳过无浏览器的 native host）
- *   ui-inspector link <remote> --port <devport>  # 本地：SSH 把 bridge 端口 + dev 端口转发到本地 127.0.0.1
- *   ui-inspector doctor <remote> --port <devport> # 本地：自检远程链路断在哪层并打印恢复命令
+ *   ui-inspector link <remote> --bridge-port <本地> [--remote-bridge-port <远程>]  # 本地：SSH 把 bridge 端口转发到本地 127.0.0.1
+ *   ui-inspector doctor <remote> --bridge-port <本地> [--dev-port <dev端口>] # 本地：自检远程链路断在哪层并打印恢复命令
  *   ui-inspector uninstall    # 移除 native host 清单 + 个人级 hook（--purge 连 ~/.ui-inspector 一起删）
  *   ui-inspector status       # 查看安装状态
  *   ui-inspector bridge       # 启动 HTTP bridge（远程开发用，--port 默认 8917）
@@ -61,7 +61,10 @@ function out(text) {
     process.stdout.write(`${text}\n`);
 }
 function installHookAndMcp() {
-    const hookCommand = `node "${hookPath}"`;
+    // 用绝对路径的 node（当前运行 install 的这个），而不是裸 `node`：
+    // Comate 拉起 hook/MCP 时 PATH 极简（不含 nvm/fnm 目录），裸 `node` 会「未找到命令」。
+    const nodeBin = process.execPath;
+    const hookCommand = `"${nodeBin}" "${hookPath}"`;
     const config = readHooks() || {hooks: {}};
     config.hooks = config.hooks || {};
     const list = Array.isArray(config.hooks.UserPromptSubmit) ? config.hooks.UserPromptSubmit : [];
@@ -75,7 +78,7 @@ function installHookAndMcp() {
         out('hook already present, skip');
     }
     out('\n== 把下面加进 Comate 的 MCP 配置（stdio），然后 reload Comate ==');
-    out(JSON.stringify({mcpServers: {'ui-inspector': {command: 'node', args: [serverPath]}}}, null, 4));
+    out(JSON.stringify({mcpServers: {'ui-inspector': {command: nodeBin, args: [serverPath]}}}, null, 4));
 }
 
 function installNativeHost() {
@@ -104,26 +107,34 @@ function installNativeHost() {
 }
 
 // 后台拉起 bridge 并与本进程脱钩，install --remote 用：装完 hook/MCP 顺手把 bridge 跑起来。
-function startBridgeDetached(port) {
+function startBridgeDetached(port, host) {
     mkdirSync(pendingDir, {recursive: true});
     const logFile = resolve(pendingDir, 'bridge.log');
     const fd = openSync(logFile, 'a');
+    const env = {...process.env, UI_INSPECTOR_BRIDGE_PORT: String(port)};
+    if (host) {
+        env.UI_INSPECTOR_BRIDGE_HOST = String(host);
+    }
     const child = spawn(process.execPath, [resolve(pkgRoot, 'bridge/server.mjs')], {
         detached: true,
         stdio: ['ignore', fd, fd],
-        env: {...process.env, UI_INSPECTOR_BRIDGE_PORT: String(port)},
+        env,
     });
     child.unref();
-    out(`bridge 已后台启动（pid ${child.pid}，端口 ${port}），日志：${logFile}`);
+    out(`bridge 已后台启动（pid ${child.pid}，监听 ${host || '127.0.0.1'}:${port}），日志：${logFile}`);
     out(`  停止：kill ${child.pid}`);
 }
 
-function install({remote, port}) {
+function install({remote, port, host}) {
     installHookAndMcp();
     if (remote) {
         out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
-        startBridgeDetached(port);
-        out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标> --port <dev端口>`);
+        startBridgeDetached(port, host);
+        if (host && host !== '127.0.0.1') {
+            out(`\n直连模式：浏览器可直接访问本机 ${host}:${port}，弹窗里填该地址，无需 ui-inspector link。`);
+        } else {
+            out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标>`);
+        }
         return;
     }
     installNativeHost();
@@ -133,39 +144,41 @@ function install({remote, port}) {
     out('完成后：按住 Alt 点元素多选 → 回 Comate 写修改意见。');
 }
 
-// 本地笔记本：把远程 bridge 端口 + dev server 端口都转发到本地 127.0.0.1。
-// 远程 bridge 监听端口可与本地不同：-L <本地bridge端口>:127.0.0.1:<远程bridge端口>。
-function link({remote, devPort, bridgePort, remoteBridgePort}) {
+// 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1。端口参数只有两个：
+//   --bridge-port <本地>（默认 8917）、--remote-bridge-port <远程>（默认与本地相同）。
+//   本地=远程时只填 --bridge-port；不同才两个都填。dev server 端口自行转发。
+function link({remote, bridgePort, remoteBridgePort}) {
     if (!remote) {
-        out(
-            '用法：ui-inspector link <remote-ssh-目标> --port <dev端口> [--bridge-port 8917] [--remote-bridge-port <远程端口>]'
-        );
-        out('例：  ui-inspector link dev-box --port 5173');
+        out('用法：ui-inspector link <remote-ssh-目标> [--bridge-port <本地端口>] [--remote-bridge-port <远程端口>]');
+        out('例：  ui-inspector link dev-box                                    # 本地/远程都用默认 8917');
+        out('      ui-inspector link dev-box --bridge-port 9000                 # 本地=远程=9000');
+        out('      ui-inspector link dev-box --bridge-port 9000 --remote-bridge-port 8917  # 本地 9000 → 远程 8917');
         return;
     }
     const rbp = remoteBridgePort || bridgePort;
-    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`];
-    if (devPort) {
-        args.push('-L', `${devPort}:127.0.0.1:${devPort}`);
-    }
-    args.push(remote);
+    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`, remote];
     out(`转发中（Ctrl-C 断开）：ssh ${args.join(' ')}`);
     out(
-        `  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}${devPort ? `；dev → 127.0.0.1:${devPort}` : ''}`
-    );
-    out(
-        `  提示：弹窗里的端口填本地的 ${bridgePort}；远程 bridge 需在 ${rbp} 上监听（ui-inspector bridge --port ${rbp}）。`
+        `  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}（弹窗里填本地 ${bridgePort}；远程 bridge 需在 ${rbp} 监听）`
     );
+    out(`  注：dev server 端口请自行转发（远程开发工具通常已转发，或另跑 ssh -L <dev>:127.0.0.1:<dev> ${remote}）`);
     const child = spawn('ssh', args, {stdio: 'inherit'});
     child.on('exit', code => process.exit(code ?? 0));
 }
 
 function bridge() {
-    const i = process.argv.indexOf('--port');
-    const port = i >= 0 && process.argv[i + 1] ? process.argv[i + 1] : '8917';
+    const port = getOpt('--port', '8917');
+    const host = getOpt('--host', null);
     process.env.UI_INSPECTOR_BRIDGE_PORT = String(port);
-    out(`启动 HTTP bridge（远程开发传输）：127.0.0.1:${port}`);
-    out('本地浏览器经 SSH 端口转发访问：ssh -L ' + port + ':127.0.0.1:' + port + ' <remote>');
+    if (host) {
+        process.env.UI_INSPECTOR_BRIDGE_HOST = String(host);
+    }
+    out(`启动 HTTP bridge：监听 ${host || '127.0.0.1'}:${port}`);
+    if (host && host !== '127.0.0.1') {
+        out('直连模式：浏览器可直接访问本机该地址（弹窗里填完整地址），无需 SSH 隧道。');
+    } else {
+        out('隧道模式：本地经 SSH 转发访问，ssh -L ' + port + ':127.0.0.1:' + port + ' <remote>');
+    }
     import(resolve(pkgRoot, 'bridge/server.mjs'));
 }
 
@@ -226,22 +239,22 @@ function getOpt(name, def) {
 function parseLink() {
     const rest = process.argv.slice(3);
     let remote;
-    let devPort;
     let bridgePort = '8917';
     let remoteBridgePort;
+    let devPort;
     for (let i = 0; i < rest.length; i++) {
         const a = rest[i];
-        if (a === '--port') {
-            devPort = rest[++i];
-        } else if (a === '--bridge-port') {
+        if (a === '--bridge-port') {
             bridgePort = rest[++i];
         } else if (a === '--remote-bridge-port') {
             remoteBridgePort = rest[++i];
+        } else if (a === '--dev-port') {
+            devPort = rest[++i]; // 仅 doctor 用；放这里一并消费，避免其值被当成 remote
         } else if (!a.startsWith('-')) {
             remote = a;
         }
     }
-    return {remote, devPort, bridgePort, remoteBridgePort};
+    return {remote, bridgePort, remoteBridgePort, devPort};
 }
 
 // 探测本地某端口的 http 可达性（2s 超时）。用 node:http 而非 fetch，兼容 node 18+。
@@ -262,9 +275,12 @@ function probe(port, path) {
 
 // 一键自检：定位远程开发链路（本地隧道 → 远程 bridge → 远程 dev server）断在哪层，并打印恢复命令。
 async function doctor() {
-    const {remote, devPort, bridgePort} = parseLink();
+    const {remote, bridgePort, remoteBridgePort, devPort} = parseLink();
     const rm = remote || '<remote>';
-    const dp = devPort || '<dev端口>';
+    const linkCmd =
+        `ui-inspector link ${rm}` +
+        (bridgePort !== '8917' ? ` --bridge-port ${bridgePort}` : '') +
+        (remoteBridgePort && remoteBridgePort !== bridgePort ? ` --remote-bridge-port ${remoteBridgePort}` : '');
     out('ui-inspector doctor（远程开发链路自检）：');
 
     const b = await probe(bridgePort, '/state');
@@ -272,7 +288,7 @@ async function doctor() {
         out(`  [1] bridge ✓ 127.0.0.1:${bridgePort} 可达——本地→隧道→远程 bridge 全通`);
     } else if (b.state === 'refused') {
         out(`  [1] bridge ✗ 本地 127.0.0.1:${bridgePort} 无人监听 → SSH 隧道断了（或没起）`);
-        out(`        恢复：ui-inspector link ${rm} --port ${dp}`);
+        out(`        恢复：${linkCmd}`);
     } else {
         out(`  [1] bridge ✗ 隧道在、但远程 bridge 无响应（${b.state}）`);
         out(`        恢复：登远程机跑 ui-inspector bridge（或 install --remote），看 ~/.ui-inspector/bridge.log`);
@@ -281,35 +297,33 @@ async function doctor() {
     if (devPort) {
         const d = await probe(devPort, '/');
         if (d.state === 'refused') {
-            out(`  [2] dev    ✗ 本地 127.0.0.1:${devPort} 不可达 → 隧道没转发该端口，或远程 dev server 没起`);
-            out(`        恢复：① 远程起 dev server；② 本地 ui-inspector link ${rm} --port ${devPort}`);
+            out(`  [2] dev    ✗ 本地 127.0.0.1:${devPort} 不可达 → 该端口没转发，或远程 dev server 没起`);
         } else if (d.state === 'timeout') {
             out(`  [2] dev    ✗ 127.0.0.1:${devPort} 超时 → 远程 dev server 可能挂了`);
-            out(`        恢复：远程重启 dev server`);
         } else {
             out(`  [2] dev    ✓ 127.0.0.1:${devPort} 可达（HTTP ${d.code}）`);
         }
     } else {
-        out('  [2] dev    - 未传 --port，跳过 dev server 检查');
+        out('  [2] dev    - 未传 --dev-port，跳过 dev server 检查');
     }
 
-    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server。');
+    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server（自行转发）。');
 }
 
 function help() {
     out('用法：ui-inspector <install|uninstall|status|bridge|link|doctor>');
     out('  install          注册 native host + 个人级 hook，并打印 MCP 配置与扩展目录');
-    out('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（跳过 native host，--port 默认 8917）');
-    out('  link <remote>    本地：SSH 把 bridge 端口 + dev 端口转发到本地（--port <dev端口> [--bridge-port 8917]）');
-    out('  doctor <remote>  本地：自检远程开发链路断在哪层并打印恢复命令（--port <dev端口> [--bridge-port 8917]）');
+    out('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（--port 默认 8917，--host 0.0.0.0 可直连免隧道）');
+    out('  link <remote>    本地：SSH 把 bridge 端口转发到本地（--bridge-port <本地> [--remote-bridge-port <远程>]）');
+    out('  doctor <remote>  本地：自检远程链路断在哪层并打印恢复命令（--bridge-port <本地> [--dev-port <dev端口>]）');
     out('  uninstall        移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
     out('  status           查看安装状态');
-    out('  bridge           启动 HTTP bridge（远程开发用，--port 默认 8917）');
+    out('  bridge           启动 HTTP bridge（--port 默认 8917，--host 默认 127.0.0.1；直连填 0.0.0.0）');
 }
 
 const cmd = process.argv[2] || 'help';
 if (cmd === 'install') {
-    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917')});
+    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917'), host: getOpt('--host', null)});
 } else if (cmd === 'link') {
     link(parseLink());
 } else if (cmd === 'doctor') {

package/extension/background.js

@@ -4,24 +4,37 @@
  * 两件事：
  * 1) 传输适配：把内容脚本的 ingest/state 转发给本地后端。
  *    - native（默认，本地开发）：chrome.runtime.sendNativeMessage 按需拉起 host.mjs。
- *    - http（远程开发）：fetch http://127.0.0.1:<bridgePort>（/ingest、/state），远程机上跑 bridge/server.mjs。
+ *    - http（远程开发）：fetch bridge 的 /ingest、/state。bridgeTarget 为端口（→127.0.0.1:端口）或完整地址。
  * 2) 动态注册内容脚本：目标域名不再硬编码在 manifest，改由弹窗（popup）写入 storage，
  *    这里按配置用 chrome.scripting 注册（MAIN + ISOLATED 两份）。
  */
 const HOST = 'com.oreate.ui_inspector';
 
 // localhost / 127.0.0.1 是通用开发地址，作默认种子；项目专属域名（如 local.oreateai.com）在弹窗里加。
-// 远程模式下扩展永远连本地 SSH 转发出来的 127.0.0.1，host 固定，只需配端口。
+// bridgeTarget：隧道模式填端口（→ 127.0.0.1:端口）；直连模式填 host:port 或完整 URL。
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgePort: '8917',
+    bridgeTarget: '8917',
 };
 
 function getConfig() {
     return chrome.storage.local.get(DEFAULTS);
 }
 
+// 把弹窗里的 bridgeTarget 归一成请求 base：
+//   纯数字 → http://127.0.0.1:<端口>；带 http(s):// → 原样；其余 → 补 http://
+function bridgeBase(target) {
+    const t = String(target || '').trim();
+    if (/^\d+$/.test(t)) {
+        return `http://127.0.0.1:${t}`;
+    }
+    if (/^https?:\/\//i.test(t)) {
+        return t.replace(/\/+$/, '');
+    }
+    return `http://${t}`.replace(/\/+$/, '');
+}
+
 // ---------- 传输 ----------
 function viaNative(message) {
     return new Promise(resolve => {
@@ -35,8 +48,8 @@ function viaNative(message) {
     });
 }
 
-async function viaHttp(port, message) {
-    const base = `http://127.0.0.1:${port}`;
+async function viaHttp(target, message) {
+    const base = bridgeBase(target);
     try {
         if (message.type === 'ingest') {
             const r = await fetch(`${base}/ingest`, {
@@ -55,7 +68,7 @@ async function viaHttp(port, message) {
 
 async function dispatch(message) {
     const cfg = await getConfig();
-    return cfg.transport === 'http' ? viaHttp(cfg.bridgePort, message) : viaNative(message);
+    return cfg.transport === 'http' ? viaHttp(cfg.bridgeTarget, message) : viaNative(message);
 }
 
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {

package/extension/inspector-main.js

@@ -126,9 +126,30 @@
         box.style.height = rect.height + 'px';
     }
 
+    // 元素还在页面上渲染吗：被移出 DOM 或 display:none 时 getClientRects() 为空。
+    function isRendered(el) {
+        return el && el.isConnected && el.getClientRects().length > 0;
+    }
+
+    // 每帧跟随元素位置；同时剔除已消失（被删除/隐藏）的选中项，连同高亮框一起移除。
     function repositionBoxes() {
-        for (var i = 0; i < selected.length; i++) {
-            placeBox(selected[i].box, selected[i].el);
+        var removed = 0;
+        for (var i = selected.length - 1; i >= 0; i--) {
+            if (isRendered(selected[i].el)) {
+                placeBox(selected[i].box, selected[i].el);
+            } else {
+                selected[i].box.remove();
+                selected.splice(i, 1);
+                removed++;
+            }
+        }
+        if (removed) {
+            postSelection();
+            showHint(
+                selected.length
+                    ? '有选中元素已消失，已移除（当前 ' + selected.length + ' 个）'
+                    : '选中元素已消失，已全部移除'
+            );
         }
     }
 
@@ -233,6 +254,14 @@
     window.addEventListener('scroll', repositionBoxes, true);
     window.addEventListener('resize', repositionBoxes, true);
 
+    // 每帧跟随并清理：元素被删/隐藏后，repositionBoxes 会移除它的高亮框（scroll/resize 不一定触发）。
+    (function raf() {
+        if (selected.length) {
+            repositionBoxes();
+        }
+        window.requestAnimationFrame(raf);
+    })();
+
     // bridge-content 轮询回发的消息：cleared（撤高亮）/ status（toast 提示）
     window.addEventListener('message', function (event) {
         if (event.source !== window || !event.data) {

package/extension/popup.html

@@ -106,7 +106,7 @@
                 <input
                     id="domain-input"
                     type="text"
-                    placeholder="如 https://local.oreateai.com"
+                    placeholder="如 https://example.com"
                 />
                 <button
                     id="add-domain"
@@ -142,21 +142,15 @@
                     class="row"
                     style="margin-top: 6px"
                 >
-                    <span style="color: #656d76">127.0.0.1 :</span>
                     <input
-                        id="bridge-port"
+                        id="bridge-target"
                         type="text"
-                        inputmode="numeric"
-                        placeholder="8917"
-                        style="max-width: 90px"
+                        placeholder="8917 或 devlocal.oreateai.com:8917"
                     />
                 </div>
                 <div class="hint">
-                    只填本地端口（host 固定 127.0.0.1）。远程开发：远程跑
-                    <code>ui-inspector bridge</code>
-                    ，
-                    <code>ui-inspector link</code>
-                    把端口转发到本地。
+                    隧道模式填端口（如 <code>8917</code>，默认连本地 127.0.0.1）；直连模式填完整地址（如
+                    <code>devlocal.oreateai.com:8917</code>）。
                 </div>
             </div>
         </section>

package/extension/popup.js

@@ -2,7 +2,7 @@
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgePort: '8917',
+    bridgeTarget: '8917',
 };
 const PROTECTED = new Set(DEFAULTS.domains); // 默认项不可删、不回收权限
 
@@ -106,23 +106,22 @@ function toggleBridge() {
 }
 
 async function renderTransport() {
-    const {transport, bridgePort} = await getConfig();
+    const {transport, bridgeTarget} = await getConfig();
     for (const r of document.querySelectorAll('input[name="transport"]')) {
         r.checked = r.value === transport;
     }
-    $('bridge-port').value = bridgePort;
+    $('bridge-target').value = bridgeTarget;
     toggleBridge();
 }
 
 async function saveTransport() {
     const transport = document.querySelector('input[name="transport"]:checked')?.value || 'native';
-    const raw = $('bridge-port').value.trim();
-    if (transport === 'http' && !/^\d+$/.test(raw)) {
-        msg('端口要是数字', false);
+    const bridgeTarget = $('bridge-target').value.trim() || DEFAULTS.bridgeTarget;
+    if (transport === 'http' && !bridgeTarget) {
+        msg('请填 bridge 端口或地址', false);
         return;
     }
-    const bridgePort = raw || DEFAULTS.bridgePort;
-    await chrome.storage.local.set({transport, bridgePort});
+    await chrome.storage.local.set({transport, bridgeTarget});
     msg('已保存传输设置');
 }
 

package/package.json

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