comate-ui-inspector 0.1.5-alpha.4 → 0.1.5-alpha.6

package/enhancements/recorder/recorder-main.js

@@ -1,8 +1,10 @@
 /*
- * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**
- *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
- *   - console.log/info/warn/error
- *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/发起与完成时间）
+ * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**常见用户事件
+ *   - 点击 click（含 Vue 组件源码链，和选择模式同源）
+ *   - 滚动 scroll（trailing 防抖，记一段滚动的落点）
+ *   - 表单变更 change（密码脱敏）、表单提交 submit、操作键 keydown（仅 Enter/Escape）
+ *   - console.log/info/warn/error（可选）
+ *   - 同域名下的 fetch / XMLHttpRequest（可选，含发起与完成时间）
  * 每个事件即时 postMessage 出去，经 bridge→background→host/bridge 追加进 recording.json。
  * 这样页面刷新/跳转也不丢数据：缓冲在后端，不在页面内存，录制可跨页面连续进行。
  * 本脚本自身无状态缓冲；未开始录制时完全惰性，不打补丁、无开销。
@@ -92,6 +94,73 @@
         });
     }
 
+    // 滚动：高频事件，trailing 防抖 300ms，只记一段滚动结束时的落点。
+    var scrollTimer = null;
+    var lastScroll = null;
+    function onScroll(e) {
+        if (!on) {
+            return;
+        }
+        var t = e.target;
+        var winLevel = t === document || t === window || t === document.documentElement || t === document.body;
+        var x = winLevel ? window.scrollX || window.pageXOffset || 0 : t.scrollLeft;
+        var y = winLevel ? window.scrollY || window.pageYOffset || 0 : t.scrollTop;
+        lastScroll = {
+            selector: winLevel ? '(window)' : cssPath(t),
+            x: Math.round(x),
+            y: Math.round(y),
+            ts: Date.now(),
+        };
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+        }
+        scrollTimer = setTimeout(function () {
+            scrollTimer = null;
+            if (on && lastScroll) {
+                emit('scroll', lastScroll);
+                lastScroll = null;
+            }
+        }, 300);
+    }
+
+    // 表单值变更（提交态：blur / 回车 / 选择后触发，天然去抖）；密码脱敏，其余截断。
+    function onChange(e) {
+        if (!on) {
+            return;
+        }
+        var el = e.target;
+        if (!el || el.nodeType !== 1) {
+            return;
+        }
+        var type = (el.getAttribute && (el.getAttribute('type') || '')).toLowerCase();
+        var val;
+        if (type === 'password') {
+            val = '••••••';
+        } else if (type === 'checkbox' || type === 'radio') {
+            val = el.checked ? 'checked' : 'unchecked';
+        } else {
+            val = String(el.value == null ? '' : el.value).slice(0, 100);
+        }
+        emit('change', {selector: cssPath(el), tag: el.nodeName.toLowerCase(), type: type || undefined, value: val, ts: Date.now()});
+    }
+
+    function onSubmit(e) {
+        if (!on) {
+            return;
+        }
+        var el = e.target;
+        emit('submit', {selector: el && el.nodeType === 1 ? cssPath(el) : '(form)', ts: Date.now()});
+    }
+
+    // 只记有意义的操作键（Enter / Escape），避免逐字记录输入内容（噪声 + 隐私）。
+    function onKeydown(e) {
+        if (!on || (e.key !== 'Enter' && e.key !== 'Escape')) {
+            return;
+        }
+        var el = e.target;
+        emit('keydown', {key: e.key, selector: el && el.nodeType === 1 ? cssPath(el) : '', ts: Date.now()});
+    }
+
     function startConsole() {
         ['log', 'info', 'warn', 'error'].forEach(function (level) {
             saved['c_' + level] = console[level];
@@ -133,11 +202,26 @@
                     p.then(
                         function (r) {
                             var t1 = Date.now();
-                            emit('network', {method: method, url: url, status: r.status, startTs: t0, endTs: t1, ms: t1 - t0});
+                            emit('network', {
+                                method: method,
+                                url: url,
+                                status: r.status,
+                                startTs: t0,
+                                endTs: t1,
+                                ms: t1 - t0,
+                            });
                         },
                         function () {
                             var t1 = Date.now();
-                            emit('network', {method: method, url: url, status: 0, startTs: t0, endTs: t1, ms: t1 - t0, error: true});
+                            emit('network', {
+                                method: method,
+                                url: url,
+                                status: 0,
+                                startTs: t0,
+                                endTs: t1,
+                                ms: t1 - t0,
+                                error: true,
+                            });
                         }
                     );
                 }
@@ -193,6 +277,10 @@
         }
         on = {console: !!opts.console, network: !!opts.network};
         document.addEventListener('click', onClick, true);
+        document.addEventListener('scroll', onScroll, true);
+        document.addEventListener('change', onChange, true);
+        document.addEventListener('submit', onSubmit, true);
+        document.addEventListener('keydown', onKeydown, true);
         if (on.console) {
             startConsole();
         }
@@ -206,6 +294,14 @@
             return;
         }
         document.removeEventListener('click', onClick, true);
+        document.removeEventListener('scroll', onScroll, true);
+        document.removeEventListener('change', onChange, true);
+        document.removeEventListener('submit', onSubmit, true);
+        document.removeEventListener('keydown', onKeydown, true);
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+            scrollTimer = null;
+        }
         stopConsole();
         stopNetwork();
         on = null;

package/extension/background.js

@@ -99,7 +99,13 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (!msg || typeof msg.type !== 'string') {
         return;
     }
-    if (msg.type === 'ingest' || msg.type === 'state' || msg.type === 'rec-start' || msg.type === 'rec-event' || msg.type === 'rec-stop') {
+    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/inspector-main.js

@@ -27,6 +27,202 @@
         'opacity:0;transition:opacity 0.15s;pointer-events:none;';
     document.body.appendChild(hint);
 
+    // 右侧列表弹窗：有选中元素时列出全部已选，支持逐条删除。pointer-events 开（要点删除按钮），
+    // 但需在选取逻辑里把它自身排除，避免 Alt 点面板又被当成选元素。
+    var panel = document.createElement('div');
+    panel.id = 'oreate-ui-inspector-panel';
+    panel.style.cssText =
+        'position:fixed;top:16px;right:16px;width:260px;max-height:60vh;overflow:auto;z-index:2147483646;' +
+        'display:none;background:#111;color:#fff;border-radius:8px;padding:10px 10px 8px;' +
+        'font:12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.3);';
+    var panelHead = document.createElement('div');
+    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 panelClear = document.createElement('button');
+    panelClear.textContent = '清空';
+    panelClear.style.cssText =
+        'border:none;background:#2f2f2f;color:#fff;border-radius:4px;padding:2px 8px;cursor:pointer;font:inherit;';
+    panelClear.onclick = function () {
+        clearSelection();
+        postSelection();
+        renderPanel();
+        showHint('已清空全部选中');
+    };
+    panelHead.appendChild(panelCount);
+    panelHead.appendChild(panelClear);
+    var panelList = document.createElement('div');
+    panel.appendChild(panelHead);
+    panel.appendChild(panelList);
+    document.body.appendChild(panel);
+
+    // 顶部左侧「层级选择」面包屑：悬停元素时列出 标签 + 其 Vue 组件祖先（含 __file），点一级即选中那一层。
+    var crumbBar = document.createElement('div');
+    crumbBar.id = 'oreate-ui-inspector-crumbs';
+    crumbBar.style.cssText =
+        'position:fixed;top:16px;left:16px;max-width:60vw;z-index:2147483646;display:none;flex-wrap:wrap;' +
+        'align-items:center;gap:4px;background:#111;color:#fff;border-radius:8px;padding:6px 8px;' +
+        'font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.3);';
+    document.body.appendChild(crumbBar);
+
+    // 该元素是否属于本插件自身 UI（面板/面包屑/overlay/hint），选取时要跳过。
+    function isOwnUi(el) {
+        return (
+            !!el &&
+            (el === overlay ||
+                el === hint ||
+                el === panel ||
+                panel.contains(el) ||
+                el === crumbBar ||
+                crumbBar.contains(el))
+        );
+    }
+
+    // DOM 树上下级导航状态：navPath 从叶子往上累积，navIdx 当前停在哪一层（0 = 叶子）。
+    var navPath = [];
+    var navIdx = 0;
+
+    function renderPanel() {
+        if (!selected.length) {
+            panel.style.display = 'none';
+            return;
+        }
+        panel.style.display = 'block';
+        panelCount.textContent = '已选中 ' + selected.length + ' 个';
+        panelList.textContent = '';
+        renumber();
+        selected.forEach(function (item, i) {
+            var info = item.info || {};
+            var files = (info.componentChain || []).map(function (c) {
+                return c && c.file;
+            }).filter(Boolean);
+            var row = document.createElement('div');
+            row.style.cssText =
+                'display:flex;align-items:flex-start;gap:6px;padding:6px 0;border-top:1px solid #2a2a2a;';
+            var meta = document.createElement('div');
+            meta.style.cssText = 'flex:1;min-width:0;';
+            var title = document.createElement('div');
+            title.style.cssText = 'font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+            title.textContent =
+                i + 1 + '. <' + (info.tag || '?') + '>' + (info.text ? ' ' + info.text.slice(0, 20) : '');
+            var sub = document.createElement('div');
+            sub.style.cssText = 'color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+            sub.textContent = files.length ? files[0].split('/').pop() : info.selector || '';
+            sub.title = files.length ? files.join(' <- ') : info.selector || '';
+            meta.appendChild(title);
+            meta.appendChild(sub);
+            var del = document.createElement('button');
+            del.textContent = '删除';
+            del.style.cssText =
+                'flex:none;border:none;background:none;color:#ff6b6b;cursor:pointer;padding:0 2px;font:inherit;';
+            del.onclick = function () {
+                removeAt(i);
+            };
+            row.appendChild(meta);
+            row.appendChild(del);
+            panelList.appendChild(row);
+        });
+    }
+
+    function removeAt(i) {
+        if (i < 0 || i >= selected.length) {
+            return;
+        }
+        selected[i].box.remove();
+        selected.splice(i, 1);
+        postSelection();
+        renderPanel();
+        showHint(selected.length ? '已删除（当前 ' + selected.length + ' 个）' : '已删除全部选中');
+    }
+
+    // 取元素的 Vue 组件祖先链，并带上每层组件的根 DOM 元素（可能没有，fragment 时为 null）。
+    function componentChainEls(el) {
+        var out = [];
+        var inst = el && el.__vueParentComponent;
+        while (inst && out.length < 8) {
+            var type = inst.type || {};
+            var file = type.__file || null;
+            var name = type.__name || type.name || null;
+            var node = (inst.vnode && inst.vnode.el) || (inst.subTree && inst.subTree.el) || null;
+            if (file || name) {
+                out.push({name: name, file: file, el: node && node.nodeType === 1 ? node : null});
+            }
+            inst = inst.parent;
+        }
+        return out;
+    }
+
+    // 渲染「层级选择」面包屑：叶子标签 + 组件祖先；带 DOM 元素的可点击，点击即选中那一层。
+    function renderBreadcrumb(el) {
+        if (!active || !el) {
+            crumbBar.style.display = 'none';
+            return;
+        }
+        var crumbs = [{label: '<' + el.nodeName.toLowerCase() + '>', el: el}];
+        componentChainEls(el).forEach(function (c) {
+            crumbs.push({label: c.name || (c.file ? c.file.split('/').pop() : '组件'), el: c.el, file: c.file});
+        });
+        crumbBar.textContent = '';
+        var tip = document.createElement('span');
+        tip.textContent = '层级：';
+        tip.style.cssText = 'color:#9aa0a6;';
+        crumbBar.appendChild(tip);
+        crumbs.forEach(function (c, i) {
+            if (i) {
+                var sep = document.createElement('span');
+                sep.textContent = '›';
+                sep.style.cssText = 'color:#555;';
+                crumbBar.appendChild(sep);
+            }
+            var btn = document.createElement(c.el ? 'button' : 'span');
+            btn.textContent = c.label;
+            btn.title = c.file || '';
+            btn.style.cssText = c.el
+                ? 'border:none;background:#2f2f2f;color:#fff;border-radius:4px;padding:2px 6px;cursor:pointer;font:inherit;'
+                : 'color:#9aa0a6;';
+            if (c.el) {
+                btn.onclick = function () {
+                    toggleSelect(c.el);
+                };
+            }
+            crumbBar.appendChild(btn);
+        });
+        crumbBar.style.display = 'flex';
+    }
+
+    // 悬停到页面元素：重置导航路径并高亮，刷新面包屑。
+    function setHover(el) {
+        navPath = [el];
+        navIdx = 0;
+        current = el;
+        moveOverlay(el);
+        renderBreadcrumb(el);
+    }
+    // ↑ 选父级：按需把父节点压入 navPath，再上移一层。
+    function navUp() {
+        if (navIdx === navPath.length - 1) {
+            var p = navPath[navIdx] && navPath[navIdx].parentElement;
+            if (!p || p === document.body || p === document.documentElement || isOwnUi(p)) {
+                return;
+            }
+            navPath.push(p);
+        }
+        navIdx++;
+        current = navPath[navIdx];
+        moveOverlay(current);
+        renderBreadcrumb(current);
+    }
+    // ↓ 回子级：沿来时路径下移一层。
+    function navDown() {
+        if (navIdx === 0) {
+            return;
+        }
+        navIdx--;
+        current = navPath[navIdx];
+        moveOverlay(current);
+        renderBreadcrumb(current);
+    }
+
     function showHint(text) {
         window.clearTimeout(showStatus._t);
         hint.style.background = '#111';
@@ -113,10 +309,26 @@
         box.style.cssText =
             'position:fixed;z-index:2147483645;pointer-events:none;border:2px solid #16a34a;' +
             'background:rgba(22,163,74,0.10);border-radius:4px;';
+        var badge = document.createElement('div');
+        badge.className = 'oreate-sel-badge';
+        badge.style.cssText =
+            'position:absolute;left:-2px;top:-2px;transform:translateY(-100%);background:#16a34a;color:#fff;' +
+            'font:11px/1.5 sans-serif;padding:0 6px;border-radius:4px 4px 4px 0;white-space:nowrap;';
+        box.appendChild(badge);
         document.body.appendChild(box);
         return box;
     }
 
+    // 按当前选中顺序刷新每个高亮框上的数字角标（删除中间项后序号会重排）。
+    function renumber() {
+        for (var i = 0; i < selected.length; i++) {
+            var b = selected[i].box.querySelector('.oreate-sel-badge');
+            if (b) {
+                b.textContent = String(i + 1);
+            }
+        }
+    }
+
     function placeBox(box, el) {
         var rect = el.getBoundingClientRect();
         box.style.left = rect.left + 'px';
@@ -130,12 +342,34 @@
         return el && el.isConnected && el.getClientRects().length > 0;
     }
 
-    // 每帧跟随元素位置；同时剔除已消失（被删除/隐藏）的选中项，连同高亮框一起移除。
+    // 解析选中项当前对应的真实元素：优先用已记引用；若框架重渲染把节点换掉了（引用失效），
+    // 用当初记录的 CSS 选择器回查找回，避免「还在页面上却被当成消失」而误删。
+    function resolveEl(item) {
+        if (item.el && item.el.isConnected) {
+            return item.el;
+        }
+        var sel = item.info && item.info.selector;
+        if (sel) {
+            try {
+                var found = document.querySelector(sel);
+                if (found) {
+                    item.el = found;
+                    return found;
+                }
+            } catch (e) {
+                // 选择器非法，忽略
+            }
+        }
+        return null;
+    }
+
+    // 跟随元素位置；剔除真正消失（引用失效且选择器也找不回）的选中项，连同高亮框一起移除。
     function repositionBoxes() {
         var removed = 0;
         for (var i = selected.length - 1; i >= 0; i--) {
-            if (isRendered(selected[i].el)) {
-                placeBox(selected[i].box, selected[i].el);
+            var el = resolveEl(selected[i]);
+            if (el && isRendered(el)) {
+                placeBox(selected[i].box, el);
             } else {
                 selected[i].box.remove();
                 selected.splice(i, 1);
@@ -144,6 +378,7 @@
         }
         if (removed) {
             postSelection();
+            renderPanel();
             showHint(
                 selected.length
                     ? '有选中元素已消失，已移除（当前 ' + selected.length + ' 个）'
@@ -152,11 +387,45 @@
         }
     }
 
+    // 事件驱动重定位：scroll/resize/ResizeObserver/MutationObserver 触发，用 rAF 合并成每帧一次，
+    // 再加一个 500ms 轮询兜底（纯 CSS 动画位移这类不触发上述事件的情况）。替代原来每帧常开的 rAF。
+    var repoScheduled = false;
+    function scheduleReposition() {
+        if (repoScheduled || !selected.length) {
+            return;
+        }
+        repoScheduled = true;
+        window.requestAnimationFrame(function () {
+            repoScheduled = false;
+            if (selected.length) {
+                repositionBoxes();
+            }
+        });
+    }
+    var sizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(scheduleReposition) : null;
+    function observeSelected() {
+        if (!sizeObserver) {
+            return;
+        }
+        sizeObserver.disconnect();
+        for (var i = 0; i < selected.length; i++) {
+            if (selected[i].el) {
+                try {
+                    sizeObserver.observe(selected[i].el);
+                } catch (e) {
+                    // 已脱离文档，忽略
+                }
+            }
+        }
+    }
+
     function clearSelection() {
         for (var i = 0; i < selected.length; i++) {
             selected[i].box.remove();
         }
         selected = [];
+        observeSelected();
+        renderPanel();
     }
 
     function indexOfEl(el) {
@@ -192,6 +461,8 @@
             selected.push({el: el, info: collect(el), box: box});
             showHint('已选中 ' + selected.length + ' 个，可继续选，或回对话写意见');
         }
+        observeSelected();
+        renderPanel();
         postSelection();
     }
     window.addEventListener(
@@ -199,14 +470,24 @@
         function (e) {
             if (e.key === 'Alt' && !active) {
                 active = true;
-                showHint('选择模式：点击元素可多选，再点取消；松开 Alt 退出。点不动时按 Enter 选中当前悬停元素');
+                showHint('选择模式：Alt 点选可多选；↑/↓ 选上一级/下一级；Enter 选中当前悬停；松开 Alt 退出');
             }
             // 有些元素会吞掉 click（preventDefault/覆盖层），改用 Enter 选中当前 hover 的元素
-            if (e.key === 'Enter' && active && current && current !== overlay && current !== hint) {
+            if (e.key === 'Enter' && active && current && !isOwnUi(current)) {
                 e.preventDefault();
                 e.stopPropagation();
                 toggleSelect(current);
             }
+            // ↑/↓ 在 DOM 树上下级之间切换当前高亮元素（只在按住 Alt 的选择模式下拦截）
+            if (active && current && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.key === 'ArrowUp') {
+                    navUp();
+                } else {
+                    navDown();
+                }
+            }
         },
         true
     );
@@ -216,6 +497,7 @@
             if (e.key === 'Alt') {
                 active = false;
                 overlay.style.display = 'none';
+                crumbBar.style.display = 'none';
             }
         },
         true
@@ -227,9 +509,13 @@
                 return;
             }
             var el = document.elementFromPoint(e.clientX, e.clientY);
-            if (el && el !== current && el !== overlay && el !== hint) {
-                current = el;
-                moveOverlay(el);
+            // 悬停在插件自身 UI（面板/面包屑）上：不高亮，也不清空当前，便于点面包屑或删除按钮。
+            if (isOwnUi(el)) {
+                overlay.style.display = 'none';
+                return;
+            }
+            if (el && el !== current) {
+                setHover(el);
             }
         },
         true
@@ -240,26 +526,32 @@
             if (!active || !e.altKey) {
                 return;
             }
+            var el = document.elementFromPoint(e.clientX, e.clientY);
+            // 点到面板（如「删除」按钮）：放行默认行为，别 preventDefault/选取。
+            if (isOwnUi(el)) {
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
-            var el = document.elementFromPoint(e.clientX, e.clientY);
-            if (el && el !== overlay && el !== hint) {
+            if (el) {
                 toggleSelect(el);
             }
         },
         true
     );
 
-    window.addEventListener('scroll', repositionBoxes, true);
-    window.addEventListener('resize', repositionBoxes, true);
-
-    // 每帧跟随并清理：元素被删/隐藏后，repositionBoxes 会移除它的高亮框（scroll/resize 不一定触发）。
-    (function raf() {
+    // 事件驱动的位置跟随（替代每帧常开 rAF）：滚动/缩放 + ResizeObserver + DOM 变更，合并到每帧一次；
+    // 再加 500ms 轮询兜底，覆盖纯 CSS 位移这类不触发上述事件的情况。
+    window.addEventListener('scroll', scheduleReposition, true);
+    window.addEventListener('resize', scheduleReposition, true);
+    if (typeof MutationObserver !== 'undefined') {
+        new MutationObserver(scheduleReposition).observe(document.documentElement, {childList: true, subtree: true});
+    }
+    window.setInterval(function () {
         if (selected.length) {
             repositionBoxes();
         }
-        window.requestAnimationFrame(raf);
-    })();
+    }, 500);
 
     // bridge-content 轮询回发的消息：cleared（撤高亮）/ status（toast 提示）
     window.addEventListener('message', function (event) {

package/hooks/inject-ui-inspector.mjs

@@ -33,16 +33,14 @@ function readJson(file, fallback) {
     }
 }
 
-// 读 append-only 事件流，按类型归并
+// 读 append-only 事件流，返回有序的 {kind, item} 列表（各类用户事件混在一起，按写入顺序）。
 function readEvents() {
-    const clicks = [];
-    const con = [];
-    const network = [];
+    const out = [];
     let text = '';
     try {
         text = readFileSync(eventsFile, 'utf8');
     } catch {
-        return {clicks, console: con, network};
+        return out;
     }
     for (const line of text.split('\n')) {
         if (!line.trim()) {
@@ -54,18 +52,11 @@ function readEvents() {
         } catch {
             continue;
         }
-        if (!ev || !ev.item) {
-            continue;
-        }
-        if (ev.kind === 'click') {
-            clicks.push(ev.item);
-        } else if (ev.kind === 'console') {
-            con.push(ev.item);
-        } else if (ev.kind === 'network') {
-            network.push(ev.item);
+        if (ev && ev.kind && ev.item) {
+            out.push(ev);
         }
     }
-    return {clicks, console: con, network};
+    return out;
 }
 
 const parsed = readJson(storeFile, []);
@@ -74,9 +65,8 @@ const meta = readJson(recordingFile, null);
 // 只注入**已停止**的录制（active === false）。录制进行中（跨刷新/跨页面累积）时不消费、不清空，
 // 以免中途给 Comate 发消息把整段会话吞掉。
 const recDone = meta && meta.active === false;
-const events = recDone ? readEvents() : {clicks: [], console: [], network: []};
-const recording = recDone ? {...meta, ...events} : null;
-const hasRec = recDone && (events.clicks.length || events.console.length || events.network.length);
+const recEvents = recDone ? readEvents() : [];
+const hasRec = recDone && recEvents.length > 0;
 
 if (!list.length && !hasRec) {
     emit({decision: 'allow'});
@@ -95,38 +85,49 @@ function describe(target, index, total) {
         .join('\n');
 }
 
-function describeRecording(r) {
-    const base = r.startedAt || 0;
-    const secs = Math.round(((r.endedAt || 0) - base || 0) / 1000);
+// 把各类用户事件（点击/滚动/输入/提交/按键/控制台/网络）归并成一条按时间排序的时间线。
+function describeRecording(meta, evs) {
+    const base = meta.startedAt || 0;
+    const secs = Math.round(((meta.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(' <- ')}` : ''),
-        });
-    });
-    (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 lines = [];
+    for (const ev of evs) {
+        const it = ev.item || {};
+        if (ev.kind === 'click') {
+            const files = (it.componentChain || []).map(x => x && x.file).filter(Boolean);
+            lines.push({
+                ts: it.ts,
+                text:
+                    `点击 <${it.tag}> ${JSON.stringify((it.text || '').slice(0, 40))} @ ${it.selector}` +
+                    (files.length ? ` | 源码 ${files.join(' <- ')}` : ''),
+            });
+        } else if (ev.kind === 'scroll') {
+            lines.push({ts: it.ts, text: `滚动 ${it.selector} → (${it.x}, ${it.y})`});
+        } else if (ev.kind === 'change') {
+            lines.push({ts: it.ts, text: `输入/变更 <${it.tag}> @ ${it.selector} = ${JSON.stringify(String(it.value ?? '').slice(0, 60))}`});
+        } else if (ev.kind === 'submit') {
+            lines.push({ts: it.ts, text: `提交表单 @ ${it.selector}`});
+        } else if (ev.kind === 'keydown') {
+            lines.push({ts: it.ts, text: `按键 ${it.key}${it.selector ? ` @ ${it.selector}` : ''}`});
+        } else if (ev.kind === 'console') {
+            lines.push({ts: it.ts, text: `控制台[${it.level}] ${String(it.text).slice(0, 300)}`});
+        } else if (ev.kind === 'network') {
+            lines.push({ts: it.startTs, text: `网络→发起 ${it.method} ${it.url}`});
+            lines.push({ts: it.endTs, text: `网络←完成 ${it.method} ${it.url} → ${it.status} (${it.ms}ms)`});
+        } else {
+            lines.push({ts: it.ts, text: `${ev.kind} ${JSON.stringify(it).slice(0, 120)}`});
+        }
+    }
+    // V8 的 sort 稳定：同一时刻保持插入序（如网络发起在完成之前）。
+    lines.sort((a, b) => (a.ts || 0) - (b.ts || 0));
 
     const parts = [
-        `【ui-inspector 录制】用户录制了一段操作（页面 ${r.pageUrl || ''}，约 ${secs}s，共 ${events.length} 个事件，时间为相对录制起点的偏移）：`,
+        `【ui-inspector 录制】用户录制了一段操作（页面 ${meta.pageUrl || ''}，约 ${secs}s，共 ${lines.length} 个事件，时间为相对录制起点的偏移）：`,
     ];
-    events.slice(0, 120).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
-    if (events.length > 120) {
-        parts.push(`  …（其余 ${events.length - 120} 个事件省略）`);
+    lines.slice(0, 160).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
+    if (lines.length > 160) {
+        parts.push(`  …（其余 ${lines.length - 160} 个事件省略）`);
     }
     return parts.join('\n');
 }
@@ -142,7 +143,7 @@ if (list.length) {
     );
 }
 if (hasRec) {
-    sections.push(describeRecording(recording));
+    sections.push(describeRecording(meta, recEvents));
 }
 sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'

package/package.json

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

package/extension/enhancements/recorder/pane.html

@@ -1,28 +0,0 @@
-<label class="radio">
-    <input
-        type="checkbox"
-        id="rec-console"
-        checked
-    />
-    录制控制台输出
-</label>
-<label class="radio">
-    <input
-        type="checkbox"
-        id="rec-network"
-        checked
-    />
-    录制网络请求
-</label>
-<button
-    id="rec-toggle"
-    class="primary"
-    style="margin-top: 6px"
->
-    开始录制
-</button>
-<div
-    id="rec-status"
-    class="hint"
-></div>
-<div class="hint">录制点击的元素（含组件源码）+ 勾选项；停止后在下次发消息时自动带给 Agent。</div>

package/extension/enhancements/recorder/pane.js

@@ -1,38 +0,0 @@
-/*
- * 录制增强包的弹窗面板逻辑（随 pane.html 一起由 popup.js 注入后加载）。
- * 自包含：读写 chrome.storage.local.recording {active,console,network,startedAt}，
- * bridge-content 监听该键的变化，驱动 MAIN 世界的 recorder-main.js 起停。
- */
-(function () {
-    const byId = id => document.getElementById(id);
-
-    async function refresh() {
-        const {recording} = await chrome.storage.local.get({recording: null});
-        const active = !!(recording && recording.active);
-        byId('rec-toggle').textContent = active ? '停止录制' : '开始录制';
-        byId('rec-status').textContent = active ? '录制中…（操作页面后点停止）' : '';
-        byId('rec-console').disabled = active;
-        byId('rec-network').disabled = active;
-    }
-
-    byId('rec-toggle').onclick = async () => {
-        const {recording} = await chrome.storage.local.get({recording: null});
-        if (recording && recording.active) {
-            await chrome.storage.local.set({recording: {active: false}});
-            refresh();
-        } else {
-            await chrome.storage.local.set({
-                recording: {
-                    active: true,
-                    console: byId('rec-console').checked,
-                    network: byId('rec-network').checked,
-                    startedAt: Date.now(),
-                },
-            });
-            // 开始录制后关闭 popup，让用户直接去页面操作；页面顶部会出现「正在录制」提示条。
-            window.close();
-        }
-    };
-
-    refresh();
-})();

package/extension/enhancements/recorder/plugin.json

@@ -1,7 +0,0 @@
-{
-    "id": "recorder",
-    "name": "录制",
-    "main": ["recorder-main.js"],
-    "pane": "pane.html",
-    "paneJs": "pane.js"
-}

package/extension/enhancements/recorder/recorder-main.js

@@ -1,224 +0,0 @@
-/*
- * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**
- *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
- *   - console.log/info/warn/error
- *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/发起与完成时间）
- * 每个事件即时 postMessage 出去，经 bridge→background→host/bridge 追加进 recording.json。
- * 这样页面刷新/跳转也不丢数据：缓冲在后端，不在页面内存，录制可跨页面连续进行。
- * 本脚本自身无状态缓冲；未开始录制时完全惰性，不打补丁、无开销。
- */
-(function () {
-    if (window.__oreateRecorder) {
-        return;
-    }
-    window.__oreateRecorder = true;
-
-    var on = null; // 录制中：{console, network}；未录制：null
-    var saved = {}; // 被打补丁的原函数
-
-    function cssPath(el) {
-        var parts = [];
-        var node = el;
-        while (node && node.nodeType === 1 && parts.length < 6) {
-            var seg = node.nodeName.toLowerCase();
-            if (node.id) {
-                parts.unshift(seg + '#' + node.id);
-                break;
-            }
-            var cls = (node.getAttribute('class') || '').trim().split(/\s+/).filter(Boolean).slice(0, 2);
-            if (cls.length) {
-                seg += '.' + cls.join('.');
-            }
-            parts.unshift(seg);
-            node = node.parentElement;
-        }
-        return parts.join(' > ');
-    }
-
-    function componentChain(el) {
-        var chain = [];
-        var instance = el.__vueParentComponent;
-        while (instance && chain.length < 6) {
-            var type = instance.type || {};
-            var file = type.__file || null;
-            var name = type.__name || type.name || null;
-            if (file || name) {
-                chain.push({name: name, file: file});
-            }
-            instance = instance.parent;
-        }
-        return chain;
-    }
-
-    function fmt(a) {
-        if (typeof a === 'string') {
-            return a;
-        }
-        try {
-            return JSON.stringify(a);
-        } catch (e) {
-            return String(a);
-        }
-    }
-
-    function sameHost(url) {
-        try {
-            return new URL(url, location.href).host === location.host;
-        } catch (e) {
-            return false;
-        }
-    }
-
-    // 逐条上报：kind = click | console | network
-    function emit(kind, item) {
-        window.postMessage({__uiInspector: 'rec-event', kind: kind, item: item}, '*');
-    }
-
-    function onClick(e) {
-        if (!on) {
-            return;
-        }
-        var el = e.target;
-        if (!el || el.nodeType !== 1) {
-            return;
-        }
-        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(),
-        });
-    }
-
-    function startConsole() {
-        ['log', 'info', 'warn', 'error'].forEach(function (level) {
-            saved['c_' + level] = console[level];
-            console[level] = function () {
-                try {
-                    if (on) {
-                        emit('console', {
-                            level: level,
-                            text: Array.prototype.map.call(arguments, fmt).join(' ').slice(0, 2000),
-                            ts: Date.now(),
-                        });
-                    }
-                } catch (e) {
-                    // 记录失败不影响原 console
-                }
-                return saved['c_' + level].apply(console, arguments);
-            };
-        });
-    }
-
-    function stopConsole() {
-        ['log', 'info', 'warn', 'error'].forEach(function (level) {
-            if (saved['c_' + level]) {
-                console[level] = saved['c_' + level];
-                delete saved['c_' + level];
-            }
-        });
-    }
-
-    function startNetwork() {
-        if (window.fetch) {
-            saved.fetch = window.fetch;
-            window.fetch = function (input, init) {
-                var url = typeof input === 'string' ? input : (input && input.url) || '';
-                var method = (init && init.method) || (input && input.method) || 'GET';
-                var t0 = Date.now();
-                var p = saved.fetch.apply(this, arguments);
-                if (on && sameHost(url)) {
-                    p.then(
-                        function (r) {
-                            var t1 = Date.now();
-                            emit('network', {method: method, url: url, status: r.status, startTs: t0, endTs: t1, ms: t1 - t0});
-                        },
-                        function () {
-                            var t1 = Date.now();
-                            emit('network', {method: method, url: url, status: 0, startTs: t0, endTs: t1, ms: t1 - t0, error: true});
-                        }
-                    );
-                }
-                return p;
-            };
-        }
-        saved.xhrOpen = XMLHttpRequest.prototype.open;
-        saved.xhrSend = XMLHttpRequest.prototype.send;
-        XMLHttpRequest.prototype.open = function (method, url) {
-            this.__rec = {method: method, url: url, t0: Date.now()};
-            return saved.xhrOpen.apply(this, arguments);
-        };
-        XMLHttpRequest.prototype.send = function () {
-            var xhr = this;
-            var info = xhr.__rec;
-            if (info) {
-                xhr.addEventListener('loadend', function () {
-                    if (on && sameHost(info.url)) {
-                        var t1 = Date.now();
-                        emit('network', {
-                            method: info.method,
-                            url: info.url,
-                            status: xhr.status,
-                            startTs: info.t0,
-                            endTs: t1,
-                            ms: t1 - info.t0,
-                        });
-                    }
-                });
-            }
-            return saved.xhrSend.apply(this, arguments);
-        };
-    }
-
-    function stopNetwork() {
-        if (saved.fetch) {
-            window.fetch = saved.fetch;
-            delete saved.fetch;
-        }
-        if (saved.xhrOpen) {
-            XMLHttpRequest.prototype.open = saved.xhrOpen;
-            delete saved.xhrOpen;
-        }
-        if (saved.xhrSend) {
-            XMLHttpRequest.prototype.send = saved.xhrSend;
-            delete saved.xhrSend;
-        }
-    }
-
-    function start(opts) {
-        if (on) {
-            return;
-        }
-        on = {console: !!opts.console, network: !!opts.network};
-        document.addEventListener('click', onClick, true);
-        if (on.console) {
-            startConsole();
-        }
-        if (on.network) {
-            startNetwork();
-        }
-    }
-
-    function stop() {
-        if (!on) {
-            return;
-        }
-        document.removeEventListener('click', onClick, true);
-        stopConsole();
-        stopNetwork();
-        on = null;
-    }
-
-    window.addEventListener('message', function (ev) {
-        if (ev.source !== window || !ev.data || ev.data.__uiInspectorBridge !== 'rec-control') {
-            return;
-        }
-        if (ev.data.active) {
-            start({console: !!ev.data.console, network: !!ev.data.network});
-        } else {
-            stop();
-        }
-    });
-})();

package/extension/enhancements.json

@@ -1,11 +0,0 @@
-[
-    {
-        "id": "recorder",
-        "name": "录制",
-        "main": [
-            "recorder-main.js"
-        ],
-        "pane": "pane.html",
-        "paneJs": "pane.js"
-    }
-]