comate-ui-inspector 0.1.5-alpha.1 → 0.1.5-alpha.3

package/bridge/server.mjs

@@ -43,6 +43,65 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
+// 录制累积：跨刷新/跨页面逐条追加进 recording.json（缓冲在后端，不在页面内存）。
+const REC_CAP = 1000;
+function readRecording() {
+    try {
+        return JSON.parse(readFileSync(recordingFile, 'utf8'));
+    } catch {
+        return null;
+    }
+}
+function writeRecording(rec) {
+    mkdirSync(dirname(recordingFile), {recursive: true});
+    writeFileSync(recordingFile, `${JSON.stringify(rec ?? null, null, 4)}\n`, 'utf8');
+}
+function recStart(startedAt, pageUrl) {
+    const cur = readRecording();
+    if (cur && cur.active && cur.startedAt === startedAt) {
+        return; // 同一会话重复 start（多标签页），忽略
+    }
+    writeRecording({active: true, startedAt, pageUrl, clicks: [], console: [], network: []});
+}
+function recEvent(kind, item) {
+    const cur = readRecording();
+    if (!cur || !cur.active) {
+        return;
+    }
+    const key = kind === 'click' ? 'clicks' : kind === 'console' ? 'console' : kind === 'network' ? 'network' : null;
+    if (!key) {
+        return;
+    }
+    if (!Array.isArray(cur[key])) {
+        cur[key] = [];
+    }
+    if (cur[key].length < REC_CAP) {
+        cur[key].push(item);
+        writeRecording(cur);
+    }
+}
+function recStop(endedAt) {
+    const cur = readRecording();
+    if (!cur) {
+        return;
+    }
+    cur.active = false;
+    cur.endedAt = endedAt || Date.now();
+    writeRecording(cur);
+}
+
+function readBody(req, cb) {
+    let body = '';
+    req.on('data', chunk => (body += chunk));
+    req.on('end', () => {
+        try {
+            cb(JSON.parse(body || '{}'));
+        } catch (error) {
+            cb(null, error);
+        }
+    });
+}
+
 function cors(res) {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
@@ -83,18 +142,33 @@ const server = createServer((req, res) => {
         json(res, 200, {ok: true, count: readStore().length, status: readStatus()});
         return;
     }
-    if (req.method === 'POST' && url.pathname === '/recording') {
-        let body = '';
-        req.on('data', chunk => (body += chunk));
-        req.on('end', () => {
-            try {
-                const {recording} = JSON.parse(body || '{}');
-                mkdirSync(dirname(recordingFile), {recursive: true});
-                writeFileSync(recordingFile, `${JSON.stringify(recording ?? null, null, 4)}\n`, 'utf8');
-                json(res, 200, {ok: true});
-            } catch (error) {
-                json(res, 400, {ok: false, error: String(error)});
+    if (req.method === 'POST' && url.pathname === '/rec/start') {
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
+            }
+            recStart(data.startedAt, data.pageUrl);
+            json(res, 200, {ok: true});
+        });
+        return;
+    }
+    if (req.method === 'POST' && url.pathname === '/rec/event') {
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
+            }
+            recEvent(data.kind, data.item);
+            json(res, 200, {ok: true});
+        });
+        return;
+    }
+    if (req.method === 'POST' && url.pathname === '/rec/stop') {
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
             }
+            recStop(data.endedAt);
+            json(res, 200, {ok: true});
         });
         return;
     }

package/enhancements/recorder/recorder-main.js

@@ -1,11 +1,11 @@
 /*
- * MAIN world 录制脚本（增强包）：录制期间抓取
+ * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**
  *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
  *   - console.log/info/warn/error
- *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/耗时）
- * 由 bridge-content 依据 chrome.storage.recording 发来的 rec-control 起停；
- * 停止时把整段录制 postMessage 出去，经 bridge→background→host/bridge 落盘 recording.json。
- * 未开始录制时完全惰性，不打补丁、无开销。
+ *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/发起与完成时间）
+ * 每个事件即时 postMessage 出去，经 bridge→background→host/bridge 追加进 recording.json。
+ * 这样页面刷新/跳转也不丢数据：缓冲在后端，不在页面内存，录制可跨页面连续进行。
+ * 本脚本自身无状态缓冲；未开始录制时完全惰性，不打补丁、无开销。
  */
 (function () {
     if (window.__oreateRecorder) {
@@ -13,7 +13,7 @@
     }
     window.__oreateRecorder = true;
 
-    var rec = null; // 进行中的录制 {clicks,console,network,startedAt,pageUrl,opts}
+    var on = null; // 录制中：{console, network}；未录制：null
     var saved = {}; // 被打补丁的原函数
 
     function cssPath(el) {
@@ -69,19 +69,25 @@
         }
     }
 
+    // 逐条上报：kind = click | console | network
+    function emit(kind, item) {
+        window.postMessage({__uiInspector: 'rec-event', kind: kind, item: item}, '*');
+    }
+
     function onClick(e) {
-        if (!rec) {
+        if (!on) {
             return;
         }
         var el = e.target;
         if (!el || el.nodeType !== 1) {
             return;
         }
-        rec.clicks.push({
+        emit('click', {
             selector: cssPath(el),
             tag: el.nodeName.toLowerCase(),
             text: (el.textContent || '').trim().slice(0, 80),
             componentChain: componentChain(el),
+            pageUrl: location.href,
             ts: Date.now(),
         });
     }
@@ -91,8 +97,8 @@
             saved['c_' + level] = console[level];
             console[level] = function () {
                 try {
-                    if (rec) {
-                        rec.console.push({
+                    if (on) {
+                        emit('console', {
                             level: level,
                             text: Array.prototype.map.call(arguments, fmt).join(' ').slice(0, 2000),
                             ts: Date.now(),
@@ -123,13 +129,15 @@
                 var method = (init && init.method) || (input && input.method) || 'GET';
                 var t0 = Date.now();
                 var p = saved.fetch.apply(this, arguments);
-                if (rec && sameHost(url)) {
+                if (on && sameHost(url)) {
                     p.then(
                         function (r) {
-                            rec.network.push({method: method, url: url, status: r.status, ms: Date.now() - t0, ts: t0});
+                            var t1 = Date.now();
+                            emit('network', {method: method, url: url, status: r.status, startTs: t0, endTs: t1, ms: t1 - t0});
                         },
                         function () {
-                            rec.network.push({method: method, url: url, status: 0, ms: Date.now() - t0, ts: t0, error: true});
+                            var t1 = Date.now();
+                            emit('network', {method: method, url: url, status: 0, startTs: t0, endTs: t1, ms: t1 - t0, error: true});
                         }
                     );
                 }
@@ -147,13 +155,15 @@
             var info = xhr.__rec;
             if (info) {
                 xhr.addEventListener('loadend', function () {
-                    if (rec && sameHost(info.url)) {
-                        rec.network.push({
+                    if (on && sameHost(info.url)) {
+                        var t1 = Date.now();
+                        emit('network', {
                             method: info.method,
                             url: info.url,
                             status: xhr.status,
-                            ms: Date.now() - info.t0,
-                            ts: info.t0,
+                            startTs: info.t0,
+                            endTs: t1,
+                            ms: t1 - info.t0,
                         });
                     }
                 });
@@ -178,30 +188,27 @@
     }
 
     function start(opts) {
-        if (rec) {
+        if (on) {
             return;
         }
-        rec = {clicks: [], console: [], network: [], startedAt: Date.now(), pageUrl: location.href, opts: opts};
+        on = {console: !!opts.console, network: !!opts.network};
         document.addEventListener('click', onClick, true);
-        if (opts.console) {
+        if (on.console) {
             startConsole();
         }
-        if (opts.network) {
+        if (on.network) {
             startNetwork();
         }
     }
 
     function stop() {
-        if (!rec) {
+        if (!on) {
             return;
         }
         document.removeEventListener('click', onClick, true);
         stopConsole();
         stopNetwork();
-        rec.endedAt = Date.now();
-        var payload = rec;
-        rec = null;
-        window.postMessage({__uiInspector: 'recording', recording: payload}, '*');
+        on = null;
     }
 
     window.addEventListener('message', function (ev) {

package/extension/background.js

@@ -59,11 +59,27 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
-        if (message.type === 'ingest-recording') {
-            const r = await fetch(`${base}/recording`, {
+        if (message.type === 'rec-start') {
+            const r = await fetch(`${base}/rec/start`, {
                 method: 'POST',
                 headers: {'content-type': 'application/json'},
-                body: JSON.stringify({recording: message.recording || null}),
+                body: JSON.stringify({startedAt: message.startedAt, pageUrl: message.pageUrl}),
+            });
+            return await r.json();
+        }
+        if (message.type === 'rec-event') {
+            const r = await fetch(`${base}/rec/event`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({kind: message.kind, item: message.item}),
+            });
+            return await r.json();
+        }
+        if (message.type === 'rec-stop') {
+            const r = await fetch(`${base}/rec/stop`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({endedAt: message.endedAt}),
             });
             return await r.json();
         }
@@ -83,7 +99,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (!msg || typeof msg.type !== 'string') {
         return;
     }
-    if (msg.type === 'ingest' || msg.type === 'state' || msg.type === 'ingest-recording') {
+    if (msg.type === 'ingest' || msg.type === 'state' || msg.type === 'rec-start' || msg.type === 'rec-event' || msg.type === 'rec-stop') {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse
     }

package/extension/bridge-content.js

@@ -30,9 +30,83 @@
         }
     });
 
-    // 录制（增强包）：MAIN 的录制结果 → background 落盘 recording.json
+    // 录制起停：弹窗写 chrome.storage.recording，这里转成 rec-control 发给 MAIN 的 recorder。
+    function relayRecControl(r) {
+        window.postMessage(
+            {
+                __uiInspectorBridge: 'rec-control',
+                active: !!(r && r.active),
+                console: !!(r && r.console),
+                network: !!(r && r.network),
+            },
+            '*'
+        );
+    }
+
+    // 复用 inspector-main 的底部 pill 弹 toast（MAIN world 监听 'status'）。
+    function toast(text, level) {
+        window.postMessage({__uiInspectorBridge: 'status', text: text, level: level || 'success'}, '*');
+    }
+
+    // 录制中页面顶部常驻提示条（ISOLATED world 建 DOM，右侧带停止按钮）。
+    var banner = null;
+    function ensureBanner() {
+        if (banner) {
+            return banner;
+        }
+        banner = document.createElement('div');
+        banner.style.cssText =
+            'position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:2147483647;' +
+            'display:none;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;' +
+            'background:#111;color:#fff;font:12px/1.4 sans-serif;box-shadow:0 2px 10px rgba(0,0,0,0.25);';
+        var style = document.createElement('style');
+        style.textContent =
+            '@keyframes oreateRecPulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,0.7)}' +
+            '70%{box-shadow:0 0 0 6px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}';
+        var dot = document.createElement('span');
+        dot.style.cssText =
+            'width:8px;height:8px;border-radius:50%;background:#ff5a5a;animation:oreateRecPulse 1.2s infinite;';
+        var label = document.createElement('span');
+        label.textContent = '正在录制…';
+        var stop = document.createElement('button');
+        stop.textContent = '停止';
+        stop.style.cssText =
+            'border:none;border-radius:999px;padding:4px 12px;background:#ff5a5a;color:#fff;cursor:pointer;font:inherit;';
+        stop.onclick = stopRecording;
+        banner.appendChild(style);
+        banner.appendChild(dot);
+        banner.appendChild(label);
+        banner.appendChild(stop);
+        return banner;
+    }
+    function showBanner() {
+        ensureBanner();
+        if (!banner.isConnected && document.body) {
+            document.body.appendChild(banner);
+        }
+        banner.style.display = 'flex';
+    }
+    function hideBanner() {
+        if (banner) {
+            banner.style.display = 'none';
+        }
+    }
+    // 停止：置 recording.active=false（触发 onChanged → 停录 + 收起提示条），录制结果落盘后弹 toast。
+    function stopRecording() {
+        hideBanner();
+        if (!alive()) {
+            return;
+        }
+        try {
+            chrome.storage.local.set({recording: {active: false}}, () => void chrome.runtime.lastError);
+        } catch {
+            // 上下文失效
+        }
+    }
+
+    // MAIN 逐条上报的录制事件 → background 追加进 recording.json（跨刷新/跨页面累积）。
     window.addEventListener('message', event => {
-        if (event.source !== window || !event.data || event.data.__uiInspector !== 'recording') {
+        if (event.source !== window || !event.data || event.data.__uiInspector !== 'rec-event') {
             return;
         }
         if (!alive()) {
@@ -40,7 +114,7 @@
         }
         try {
             chrome.runtime.sendMessage(
-                {type: 'ingest-recording', recording: event.data.recording},
+                {type: 'rec-event', kind: event.data.kind, item: event.data.item},
                 () => void chrome.runtime.lastError
             );
         } catch {
@@ -48,28 +122,56 @@
         }
     });
 
-    // 录制起停：弹窗写 chrome.storage.recording，这里转成 rec-control 发给 MAIN 的 recorder。
-    function relayRecControl(r) {
-        window.postMessage(
-            {
-                __uiInspectorBridge: 'rec-control',
-                active: !!(r && r.active),
-                console: !!(r && r.console),
-                network: !!(r && r.network),
-            },
-            '*'
-        );
+    function recMsg(msg, cb) {
+        if (!alive()) {
+            return;
+        }
+        try {
+            chrome.runtime.sendMessage(msg, resp => {
+                void chrome.runtime.lastError;
+                if (cb) {
+                    cb(resp);
+                }
+            });
+        } catch {
+            // 上下文失效
+        }
     }
+
     try {
         chrome.storage.local.get({recording: null}, o => {
             if (chrome.runtime.lastError || !o || !o.recording || !o.recording.active) {
                 return;
             }
-            relayRecControl(o.recording); // 页面在录制中途加载：补发开始
+            // 页面在录制中途加载：补发开始、显示提示条，但不重置后端已累积的数据（靠 startedAt 去重）。
+            relayRecControl(o.recording);
+            showBanner();
         });
         chrome.storage.onChanged.addListener((changes, area) => {
-            if (area === 'local' && changes.recording) {
-                relayRecControl(changes.recording.newValue);
+            if (area !== 'local' || !changes.recording) {
+                return;
+            }
+            const r = changes.recording.newValue;
+            const was = changes.recording.oldValue;
+            const nowActive = !!(r && r.active);
+            const wasActive = !!(was && was.active);
+            relayRecControl(r);
+            if (nowActive && !wasActive) {
+                // 新一轮录制：告知后端开新会话（按 startedAt 去重，多标签页不会互相清空）。
+                recMsg({type: 'rec-start', startedAt: (r && r.startedAt) || Date.now(), pageUrl: location.href});
+                showBanner();
+            } else if (!nowActive && wasActive) {
+                // 停止：收起提示条、后端收尾，成功后提示已带入会话。
+                hideBanner();
+                recMsg({type: 'rec-stop', endedAt: Date.now()}, resp => {
+                    if (resp && resp.ok) {
+                        toast('已更新到会话上下文中', 'success');
+                    }
+                });
+            } else if (nowActive) {
+                showBanner();
+            } else {
+                hideBanner();
             }
         });
     } catch {

package/extension/native-host/host.mjs

@@ -42,6 +42,54 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
+// 录制累积：跨刷新/跨页面逐条追加进 recording.json（缓冲在后端，不在页面内存）。
+const REC_CAP = 1000; // 每类事件上限，防爆
+function readRecording() {
+    try {
+        return JSON.parse(readFileSync(recordingFile, 'utf8'));
+    } catch {
+        return null;
+    }
+}
+function writeRecording(rec) {
+    mkdirSync(dirname(recordingFile), {recursive: true});
+    writeFileSync(recordingFile, `${JSON.stringify(rec ?? null, null, 4)}\n`, 'utf8');
+}
+function recStart(startedAt, pageUrl) {
+    const cur = readRecording();
+    // 同一会话（startedAt 相同）重复 start（多标签页）直接忽略，避免互相清空。
+    if (cur && cur.active && cur.startedAt === startedAt) {
+        return;
+    }
+    writeRecording({active: true, startedAt, pageUrl, clicks: [], console: [], network: []});
+}
+function recEvent(kind, item) {
+    const cur = readRecording();
+    if (!cur || !cur.active) {
+        return; // 未在录制，丢弃
+    }
+    const key = kind === 'click' ? 'clicks' : kind === 'console' ? 'console' : kind === 'network' ? 'network' : null;
+    if (!key) {
+        return;
+    }
+    if (!Array.isArray(cur[key])) {
+        cur[key] = [];
+    }
+    if (cur[key].length < REC_CAP) {
+        cur[key].push(item);
+        writeRecording(cur);
+    }
+}
+function recStop(endedAt) {
+    const cur = readRecording();
+    if (!cur) {
+        return;
+    }
+    cur.active = false;
+    cur.endedAt = endedAt || Date.now();
+    writeRecording(cur);
+}
+
 function send(obj) {
     const body = Buffer.from(JSON.stringify(obj), 'utf8');
     const header = Buffer.alloc(4);
@@ -58,9 +106,14 @@ function handle(msg) {
         resp = {ok: true, pending: targets.length};
     } else if (msg && msg.type === 'state') {
         resp = {ok: true, count: readStore().length, status: readStatus()};
-    } else if (msg && msg.type === 'ingest-recording') {
-        mkdirSync(dirname(recordingFile), {recursive: true});
-        writeFileSync(recordingFile, `${JSON.stringify(msg.recording ?? null, null, 4)}\n`, 'utf8');
+    } else if (msg && msg.type === 'rec-start') {
+        recStart(msg.startedAt, msg.pageUrl);
+        resp = {ok: true};
+    } else if (msg && msg.type === 'rec-event') {
+        recEvent(msg.kind, msg.item);
+        resp = {ok: true};
+    } else if (msg && msg.type === 'rec-stop') {
+        recStop(msg.endedAt);
         resp = {ok: true};
     } else {
         resp = {ok: false, error: 'unknown message'};

package/extension/popup.html

@@ -114,18 +114,56 @@
                 color: #fff;
                 border-color: #1f6feb;
             }
+            /* 模式子 tab：与顶层「模式/设置」区分——走胶囊描边风格，选中为浅蓝底+蓝字，不填满。 */
+            .subtabs {
+                display: flex;
+                gap: 6px;
+                margin-bottom: 8px;
+            }
+            .subtab {
+                flex: 0 0 auto;
+                padding: 4px 12px;
+                border: 1px solid #d0d7de;
+                border-radius: 999px;
+                background: #fff;
+                color: #1f2328;
+                cursor: pointer;
+                font: inherit;
+                font-size: 12px;
+            }
+            .subtab.active {
+                background: #ddf4ff;
+                color: #0969da;
+                border-color: #54aeff;
+            }
         </style>
     </head>
     <body>
         <h1>ui-inspector 配置</h1>
 
-        <!-- 增强包模式区：无增强包时保持空；popup.js 读 enhancements.json 后动态填充 tab 与面板。 -->
+        <!-- 顶层 tab：模式 / 设置 -->
         <div
-            id="mode-bar"
-            style="display: none"
+            class="tabs"
+            id="top-tabs"
         >
+            <button
+                class="tab active"
+                data-top="mode"
+            >
+                模式
+            </button>
+            <button
+                class="tab"
+                data-top="settings"
+            >
+                设置
+            </button>
+        </div>
+
+        <!-- 「模式」页：选择 Element + 各增强包模式（popup.js 读 enhancements.json 动态填充子 tab） -->
+        <div id="top-mode">
             <div
-                class="tabs"
+                class="subtabs"
                 id="mode-tabs"
             ></div>
             <section
@@ -137,71 +175,77 @@
             <div id="mode-panes"></div>
         </div>
 
-        <section>
-            <div class="label">生效域名</div>
-            <div class="row">
-                <input
-                    id="domain-input"
-                    type="text"
-                    placeholder="如 https://example.com"
-                />
-                <button
-                    id="add-domain"
-                    class="primary"
-                >
-                    添加
-                </button>
-            </div>
-            <ul id="domain-list"></ul>
-            <div class="hint">添加时浏览器会请求该域名的访问权限，允许后即在该域名注入选取脚本。</div>
-        </section>
-
-        <section>
-            <div class="label">传输通路</div>
-            <label class="radio">
-                <input
-                    type="radio"
-                    name="transport"
-                    value="native"
-                />
-                本地（Native Messaging，默认）
-            </label>
-            <label class="radio">
-                <input
-                    type="radio"
-                    name="transport"
-                    value="http"
-                />
-                远程（HTTP bridge）
-            </label>
-            <div id="bridge-config">
-                <div
-                    class="row"
-                    style="margin-top: 6px"
-                >
+        <!-- 「设置」页：生效域名 + 传输通路 -->
+        <div
+            id="top-settings"
+            style="display: none"
+        >
+            <section>
+                <div class="label">生效域名</div>
+                <div class="row">
                     <input
-                        id="bridge-target"
+                        id="domain-input"
                         type="text"
-                        placeholder="devlocal.oreateai.com:8917"
+                        placeholder="如 https://example.com"
                     />
+                    <button
+                        id="add-domain"
+                        class="primary"
+                    >
+                        添加
+                    </button>
                 </div>
-                <div class="hint">
-                    填开发机 bridge 的完整地址（如
-                    <code>devlocal.oreateai.com:8917</code>
-                    ）。开发机上
-                    <code>ui-inspector install --remote</code>
-                    起 bridge（默认绑 0.0.0.0 供直连）。
+                <ul id="domain-list"></ul>
+                <div class="hint">添加时浏览器会请求该域名的访问权限，允许后即在该域名注入选取脚本。</div>
+            </section>
+
+            <section>
+                <div class="label">传输通路</div>
+                <label class="radio">
+                    <input
+                        type="radio"
+                        name="transport"
+                        value="native"
+                    />
+                    本地（Native Messaging，默认）
+                </label>
+                <label class="radio">
+                    <input
+                        type="radio"
+                        name="transport"
+                        value="http"
+                    />
+                    远程（HTTP bridge）
+                </label>
+                <div id="bridge-config">
+                    <div
+                        class="row"
+                        style="margin-top: 6px"
+                    >
+                        <input
+                            id="bridge-target"
+                            type="text"
+                            placeholder="devlocal.oreateai.com:8917"
+                        />
+                    </div>
+                    <div class="hint">
+                        填开发机 bridge 的完整地址（如
+                        <code>devlocal.oreateai.com:8917</code>
+                        ）。开发机上
+                        <code>ui-inspector install --remote</code>
+                        起 bridge（默认绑 0.0.0.0 供直连）。
+                    </div>
                 </div>
-            </div>
-        </section>
+            </section>
 
-        <button
-            id="save"
-            class="primary"
-        >
-            保存传输设置
-        </button>
-        <div id="msg"></div>
+            <button
+                id="save"
+                class="primary"
+            >
+                保存传输设置
+            </button>
+            <div id="msg"></div>
+        </div>
 
         <script src="popup.js"></script>
     </body>

package/extension/popup.js

@@ -139,12 +139,28 @@ $('domain-input').addEventListener('keydown', e => {
 renderDomains();
 renderTransport();
 
-// ---------- 增强包：通用加载器 ----------
+// ---------- 顶层 tab：模式 / 设置 ----------
+function initTopTabs() {
+    const topTabs = [...document.querySelectorAll('#top-tabs .tab')];
+    const panes = {mode: $('top-mode'), settings: $('top-settings')};
+    for (const b of topTabs) {
+        b.onclick = () => {
+            for (const x of topTabs) {
+                x.classList.toggle('active', x === b);
+            }
+            for (const [key, el] of Object.entries(panes)) {
+                el.style.display = b.dataset.top === key ? 'block' : 'none';
+            }
+        };
+    }
+}
+initTopTabs();
+
+// ---------- 「模式」页：选择 Element + 增强包子 tab ----------
 // 读 extension/enhancements.json（由 `ui-inspector add <名>` 拷贝插件并写入）。
-// 每个插件描述：{id, name, pane, paneJs}。有插件时显示「模式」tab 区：
-//   「选择 Element」固定第一项 + 每个插件一项；点 tab 切换对应面板。
+// 子 tab 第一项固定「选择 Element」，其后每个增强包一项；无增强包时隐藏子 tab 条只留默认提示。
 // 面板 HTML 片段从 enhancements/<id>/<pane> 拉取内嵌，随后加载 enhancements/<id>/<paneJs>。
-async function initEnhancements() {
+async function initModes() {
     let plugins = [];
     try {
         const r = await fetch(chrome.runtime.getURL('enhancements.json'));
@@ -157,9 +173,6 @@ async function initEnhancements() {
     } catch {
         plugins = [];
     }
-    if (!plugins.length) {
-        return; // 基础版：不显示模式 tab
-    }
 
     const tabsEl = $('mode-tabs');
     const panesEl = $('mode-panes');
@@ -167,16 +180,16 @@ async function initEnhancements() {
 
     function makeTab(key, label, active) {
         const b = document.createElement('button');
-        b.className = active ? 'tab active' : 'tab';
+        b.className = active ? 'subtab active' : 'subtab';
         b.textContent = label;
+        b.dataset.mode = key;
         b.onclick = () => switchMode(key);
         tabsEl.appendChild(b);
-        b.dataset.mode = key;
         return b;
     }
 
     function switchMode(key) {
-        for (const b of tabsEl.querySelectorAll('.tab')) {
+        for (const b of tabsEl.querySelectorAll('.subtab')) {
             b.classList.toggle('active', b.dataset.mode === key);
         }
         for (const [k, el] of Object.entries(paneEls)) {
@@ -208,6 +221,12 @@ async function initEnhancements() {
         }
     }
 
-    $('mode-bar').style.display = 'block';
+    // 没有增强包：只有「选择 Element」一个模式，顶层「模式/设置」tab 失去意义——
+    // 隐藏顶层 tab 与模式页，直接展示「设置」面板内容。
+    if (!plugins.length) {
+        $('top-tabs').style.display = 'none';
+        $('top-mode').style.display = 'none';
+        $('top-settings').style.display = 'block';
+    }
 }
-initEnhancements();
+initModes();

package/hooks/inject-ui-inspector.mjs

@@ -34,8 +34,11 @@ function readJson(file, fallback) {
 const parsed = readJson(storeFile, []);
 const list = Array.isArray(parsed) ? parsed : [];
 const recording = readJson(recordingFile, null);
+// 只注入**已停止**的录制（active === false）。录制进行中（跨刷新/跨页面累积）时不消费、不清空，
+// 以免中途给 Comate 发消息把整段会话吞掉。
+const recDone = recording && recording.active === false;
 const hasRec =
-    recording &&
+    recDone &&
     ((recording.clicks && recording.clicks.length) ||
         (recording.console && recording.console.length) ||
         (recording.network && recording.network.length));
@@ -58,25 +61,37 @@ function describe(target, index, total) {
 }
 
 function describeRecording(r) {
-    const secs = Math.round(((r.endedAt || 0) - (r.startedAt || 0) || 0) / 1000);
-    const parts = [`【ui-inspector 录制】用户录制了一段操作（页面 ${r.pageUrl || ''}，约 ${secs}s）：`];
-    if (r.clicks && r.clicks.length) {
-        parts.push(`· 点击 ${r.clicks.length} 次（由先到后）：`);
-        r.clicks.slice(0, 50).forEach((c, i) => {
-            const files = (c.componentChain || []).map(x => x && x.file).filter(Boolean);
-            parts.push(
-                `  ${i + 1}. <${c.tag}> ${JSON.stringify((c.text || '').slice(0, 40))} @ ${c.selector}` +
-                    (files.length ? ` | 源码 ${files.join(' <- ')}` : '')
-            );
+    const base = r.startedAt || 0;
+    const secs = Math.round(((r.endedAt || 0) - base || 0) / 1000);
+    const rel = t => (typeof t === 'number' ? `+${((t - base) / 1000).toFixed(2)}s` : '+?');
+
+    // 把点击 / 控制台 / 网络归并成一条按时间排序的时间线；网络拆成「发起」「完成」两个事件。
+    const events = [];
+    (r.clicks || []).forEach(c => {
+        const files = (c.componentChain || []).map(x => x && x.file).filter(Boolean);
+        events.push({
+            ts: c.ts,
+            text:
+                `点击 <${c.tag}> ${JSON.stringify((c.text || '').slice(0, 40))} @ ${c.selector}` +
+                (files.length ? ` | 源码 ${files.join(' <- ')}` : ''),
         });
-    }
-    if (r.console && r.console.length) {
-        parts.push(`· 控制台 ${r.console.length} 条：`);
-        r.console.slice(0, 50).forEach(l => parts.push(`  [${l.level}] ${String(l.text).slice(0, 300)}`));
-    }
-    if (r.network && r.network.length) {
-        parts.push(`· 同域网络 ${r.network.length} 条：`);
-        r.network.slice(0, 50).forEach(n => parts.push(`  ${n.method} ${n.url} → ${n.status} (${n.ms}ms)`));
+    });
+    (r.console || []).forEach(l => {
+        events.push({ts: l.ts, text: `控制台[${l.level}] ${String(l.text).slice(0, 300)}`});
+    });
+    (r.network || []).forEach(n => {
+        events.push({ts: n.startTs, text: `网络→发起 ${n.method} ${n.url}`});
+        events.push({ts: n.endTs, text: `网络←完成 ${n.method} ${n.url} → ${n.status} (${n.ms}ms)`});
+    });
+    // V8 的 sort 稳定：同一时刻保持插入序（发起在完成之前）。
+    events.sort((a, b) => (a.ts || 0) - (b.ts || 0));
+
+    const parts = [
+        `【ui-inspector 录制】用户录制了一段操作（页面 ${r.pageUrl || ''}，约 ${secs}s，共 ${events.length} 个事件，时间为相对录制起点的偏移）：`,
+    ];
+    events.slice(0, 120).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
+    if (events.length > 120) {
+        parts.push(`  …（其余 ${events.length - 120} 个事件省略）`);
     }
     return parts.join('\n');
 }
@@ -98,11 +113,13 @@ sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'
 );
 
-// 「拿到即消费」：注入后清空 pending 与 recording
+// 「拿到即消费」：注入后清空 pending；录制仅在确实注入（已停止）时清空，进行中的保留。
 try {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, '[]\n', 'utf8');
-    writeFileSync(recordingFile, 'null\n', 'utf8');
+    if (hasRec) {
+        writeFileSync(recordingFile, 'null\n', 'utf8');
+    }
 } catch {
     // 清空失败不影响注入
 }

package/package.json

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