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

package/bridge/server.mjs

@@ -9,6 +9,7 @@ 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');
@@ -186,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));
@@ -235,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) {

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(),
                 },
             });

package/enhancements/recorder/recorder-main.js

@@ -167,17 +167,43 @@
         emit('keydown', {key: e.key, selector: el && el.nodeType === 1 ? cssPath(el) : '', ts: Date.now()});
     }
 
+    // 控制台过滤：黑白名单二选一。每行一条正则（非法跳过）；黑名单命中即剔除，白名单只保留命中。
+    var consoleFilters = [];
+    var consoleFilterMode = 'black';
+    function compileFilters(raw) {
+        const out = [];
+        for (const line of String(raw || '').split('\n')) {
+            const s = line.trim();
+            if (!s) {
+                continue;
+            }
+            try {
+                out.push(new RegExp(s));
+            } catch (e) {
+                // 忽略非法正则
+            }
+        }
+        return out;
+    }
+    function shouldRecordConsole(text) {
+        if (!consoleFilters.length) {
+            // 无正则：黑名单 = 全记录；白名单 = 全不记录（符合白名单语义）
+            return consoleFilterMode !== 'white';
+        }
+        const hit = consoleFilters.some(f => f.test(text));
+        return consoleFilterMode === 'white' ? hit : !hit;
+    }
+
     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(),
-                        });
+                        const text = Array.prototype.map.call(arguments, fmt).join(' ').slice(0, 2000);
+                        if (shouldRecordConsole(text)) {
+                            emit('console', {level: level, text: text, ts: Date.now()});
+                        }
                     }
                 } catch (e) {
                     // 记录失败不影响原 console
@@ -197,6 +223,75 @@
     }
 
     function startNetwork() {
+        // 请求/响应体字段级截断：解析成 JSON 后保留结构，仅长字符串截断、数组限量、层数限深；
+        // 解析失败（非 JSON 文本）则整段截断 maxTotal。长度上限防撑爆录制文件（可能含敏感信息，仅本地录制用）。
+        function compactJson(text, maxTotal) {
+            var raw = String(text == null ? '' : text);
+            var v;
+            try {
+                v = JSON.parse(raw);
+            } catch (e) {
+                return raw.slice(0, maxTotal);
+            }
+            var trunc = function (val, depth) {
+                if (typeof val === 'string') {
+                    return val.length > 120 ? val.slice(0, 120) + '…' : val;
+                }
+                if (Array.isArray(val)) {
+                    if (depth > 4) {
+                        return '[Array(' + val.length + ')]';
+                    }
+                    var out = val.slice(0, 20).map(function (x) {
+                        return trunc(x, depth + 1);
+                    });
+                    if (val.length > 20) {
+                        out.push('…(' + (val.length - 20) + ' 项省略)');
+                    }
+                    return out;
+                }
+                if (val && typeof val === 'object') {
+                    if (depth > 4) {
+                        return '[Object]';
+                    }
+                    var o = {};
+                    Object.keys(val).forEach(function (k) {
+                        o[k] = trunc(val[k], depth + 1);
+                    });
+                    return o;
+                }
+                return val;
+            };
+            return trunc(v, 0);
+        }
+
+        // 请求体归一成文本：string 原样、URLSearchParams/FormData 拼成 query 形、对象序列化；Blob 不读。
+        function reqTextOf(body) {
+            if (typeof body === 'string') {
+                return body;
+            }
+            try {
+                if (body instanceof URLSearchParams) {
+                    return body.toString();
+                }
+                if (body instanceof FormData) {
+                    var parts = [];
+                    body.forEach(function (val, key) {
+                        parts.push(key + '=' + val);
+                    });
+                    return parts.join('&');
+                }
+                if (body instanceof Blob) {
+                    return '';
+                }
+                if (body) {
+                    return JSON.stringify(body);
+                }
+            } catch (e) {
+                return '';
+            }
+            return '';
+        }
+
         if (window.fetch) {
             saved.fetch = window.fetch;
             window.fetch = function (input, init) {
@@ -205,21 +300,52 @@
                 var t0 = Date.now();
                 var p = saved.fetch.apply(this, arguments);
                 if (on && sameHost(url)) {
+                    var qi = url.indexOf('?');
+                    var query = qi >= 0 ? url.slice(qi + 1) : '';
+                    var reqBody = reqTextOf(init && init.body);
                     p.then(
                         function (r) {
                             var t1 = Date.now();
-                            emit('network', {
+                            var item = {
                                 method: method,
                                 url: url,
                                 status: r.status,
                                 startTs: t0,
                                 endTs: t1,
                                 ms: t1 - t0,
-                            });
+                            };
+                            if (query) {
+                                item.params = query.slice(0, 200);
+                            }
+                            if (reqBody) {
+                                item.reqBody = compactJson(reqBody, 1200);
+                            }
+                            // 用 clone 读响应体，不影响页面拿原始流。
+                            var cloned = null;
+                            try {
+                                cloned = r.clone();
+                            } catch (e) {
+                                cloned = null;
+                            }
+                            if (cloned) {
+                                cloned
+                                    .text()
+                                    .then(function (body) {
+                                        if (on && body) {
+                                            item.resp = compactJson(body, 1200);
+                                        }
+                                        emit('network', item);
+                                    })
+                                    .catch(function () {
+                                        emit('network', item);
+                                    });
+                            } else {
+                                emit('network', item);
+                            }
                         },
                         function () {
                             var t1 = Date.now();
-                            emit('network', {
+                            var item = {
                                 method: method,
                                 url: url,
                                 status: 0,
@@ -227,7 +353,14 @@
                                 endTs: t1,
                                 ms: t1 - t0,
                                 error: true,
-                            });
+                            };
+                            if (query) {
+                                item.params = query.slice(0, 200);
+                            }
+                            if (reqBody) {
+                                item.reqBody = compactJson(reqBody, 1200);
+                            }
+                            emit('network', item);
                         }
                     );
                 }
@@ -240,21 +373,41 @@
             this.__rec = {method: method, url: url, t0: Date.now()};
             return saved.xhrOpen.apply(this, arguments);
         };
-        XMLHttpRequest.prototype.send = function () {
+        XMLHttpRequest.prototype.send = function (body) {
             var xhr = this;
             var info = xhr.__rec;
             if (info) {
+                var reqBody = reqTextOf(body);
                 xhr.addEventListener('loadend', function () {
                     if (on && sameHost(info.url)) {
                         var t1 = Date.now();
-                        emit('network', {
+                        var item = {
                             method: info.method,
                             url: info.url,
                             status: xhr.status,
                             startTs: info.t0,
                             endTs: t1,
                             ms: t1 - info.t0,
-                        });
+                        };
+                        var qi = info.url.indexOf('?');
+                        if (qi >= 0) {
+                            item.params = info.url.slice(qi + 1).slice(0, 200);
+                        }
+                        if (reqBody) {
+                            item.reqBody = compactJson(reqBody, 1200);
+                        }
+                        // 文本型响应才记 body（blob/arraybuffer 等不记）。
+                        try {
+                            if (!xhr.responseType || xhr.responseType === 'text') {
+                                var bodyText = xhr.responseText;
+                                if (bodyText) {
+                                    item.resp = compactJson(bodyText, 1200);
+                                }
+                            }
+                        } catch (e) {
+                            // 读不到就不记
+                        }
+                        emit('network', item);
                     }
                 });
             }
@@ -282,6 +435,9 @@
             return;
         }
         on = {console: !!opts.console, network: !!opts.network};
+        consoleFilters = compileFilters(opts.consoleFilter);
+        consoleFilterMode = opts.consoleFilterMode === 'white' ? 'white' : 'black';
+        startDomWatch();
         document.addEventListener('click', onClick, true);
         document.addEventListener('scroll', onScroll, true);
         document.addEventListener('change', onChange, true);
@@ -295,10 +451,279 @@
         }
     }
 
+    // ---------- 关键 DOM 变化采集 ----------
+    // 三类事件：出现/移除（dom-add/dom-remove）、可见性切换（dom-vis）、文本变化（dom-text）。
+    // 记录对象两档降级：优先「挂 Vue 组件」的节点（开发环境定位源码）；线上无 __file 时退而记录
+    // 「有 id/class 可识别」的节点；两者都没有（裸 div/span）忽略。
+    // 去重/聚合（控量核心）：
+    //   - 同一批增删嵌套只记顶层（isDescendantOf）；
+    //   - 已记录节点的子树后续变化不重复记（recentAdds，弹窗内部内容归入弹窗）；
+    //   - 窗口内同构节点聚合为 ×N（selector 数字索引模板化，列表批量渲染只记一条示例）。
+    // 其余控量：同 key 限流（组件 2s / 无组件 6s）；单次录制最多 DOM_LIMIT 条。
+    var domObserver = null;
+    var domCount = 0;
+    var domLastEmit = {};
+    var DOM_LIMIT = 50;
+    var DOM_THROTTLE = 2000;
+    var ANCESTOR_WINDOW = 1500; // 已记录节点的生效窗口（其子树变化视为内部内容）
+    var AGG_WINDOW = 1000; // 同类节点聚合窗口
+    var recentAdds = []; // [{el, ts}] 最近记过 dom-add 的节点
+    var pendingAggs = {}; // key -> {op, tpl, info, count, ts, timer}
+
+    // 记录对象判定（两档降级）：
+    //   1) 优先「挂 Vue 组件」的节点（有 __vueParentComponent，链上带 __file/__name）——开发环境可定位源码；
+    //   2) 线上无 __file（生产构建不注入），退而记录「有 id/class 可识别」的节点（chain 为空，只描述现象）。
+    //   两者都没有（裸 div/span）→ 返回 null 忽略。
+    function vueInfo(el) {
+        var node = el;
+        while (node && node.nodeType === 1) {
+            if (node.__vueParentComponent) {
+                var chain = [];
+                var inst = node.__vueParentComponent;
+                while (inst && chain.length < 6) {
+                    var t = inst.type || {};
+                    if (t.__file || t.__name || t.name) {
+                        chain.push({name: t.__name || t.name || null, file: t.__file || null});
+                    }
+                    inst = inst.parent;
+                }
+                return {selector: cssPath(node), tag: node.nodeName.toLowerCase(), chain: chain, component: true};
+            }
+            node = node.parentElement;
+        }
+        node = el;
+        while (node && node.nodeType === 1) {
+            if (node.id || (node.getAttribute('class') || '').trim()) {
+                return {selector: cssPath(node), tag: node.nodeName.toLowerCase(), chain: [], component: false};
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
+
+    // 通用控量：超出上限 / 同 key 限流窗口内已发 → 丢弃。无组件链的节点限流更严（3 倍窗口）。
+    // dom-add 时记录节点引用，供 recentAdds 祖先窗口去重（子树后续变化不再重复记）。
+    function pushDom(kind, node, info, extra) {
+        if (!on || domCount >= DOM_LIMIT) {
+            return;
+        }
+        var now = Date.now();
+        var throttle = info.component ? DOM_THROTTLE : DOM_THROTTLE * 3;
+        var key = kind + '|' + info.selector + '|' + (info.component ? 'c' : 'x');
+        if (domLastEmit[key] && now - domLastEmit[key] < throttle) {
+            return;
+        }
+        domLastEmit[key] = now;
+        domCount++;
+        var item = {kind: kind, selector: info.selector, tag: info.tag, componentChain: info.chain, ts: now};
+        if (extra) {
+            Object.keys(extra).forEach(function (k) {
+                item[k] = extra[k];
+            });
+        }
+        if (kind === 'dom-add' && node) {
+            recentAdds.push({el: node, ts: now});
+            if (recentAdds.length > 60) {
+                recentAdds = recentAdds.slice(-60);
+            }
+        }
+        emit(kind, item);
+    }
+
+    // 批量增删：如果 n 是本次 added/removed 里另一个节点的后代，则跳过（父级已代表该变化）。
+    function isDescendantOf(n, set) {
+        var p = n.parentElement;
+        while (p) {
+            if (set.has(p)) {
+                return true;
+            }
+            p = p.parentElement;
+        }
+        return false;
+    }
+
+    // 是否在「最近已记录节点」的子树内——弹窗内部晚到的内容归入弹窗，不重复记。
+    function isInsideRecentAdd(el) {
+        var now = Date.now();
+        recentAdds = recentAdds.filter(function (x) {
+            return now - x.ts < ANCESTOR_WINDOW;
+        });
+        var p = el.parentElement;
+        while (p) {
+            for (var i = 0; i < recentAdds.length; i++) {
+                if (recentAdds[i].el === p) {
+                    return true;
+                }
+            }
+            p = p.parentElement;
+        }
+        return false;
+    }
+
+    // 同类节点聚合：selector 数字索引模板化（.item-3 → .item-*）；AGG_WINDOW 内同模板合并为 ×N。
+    function aggregateDomChange(op, node, info) {
+        var tpl = info.selector.replace(/\d+/g, '*');
+        var key = op + '|' + info.tag + '|' + tpl + '|' + (info.component ? 'c' : 'x');
+        var now = Date.now();
+        var g = pendingAggs[key];
+        if (g && now - g.ts < AGG_WINDOW) {
+            g.count++;
+            g.ts = now;
+            clearTimeout(g.timer);
+            g.timer = setTimeout(function () {
+                flushAgg(g);
+            }, AGG_WINDOW);
+            return;
+        }
+        g = {op: op, tpl: tpl, info: info, count: 1, ts: now, key: key};
+        pendingAggs[key] = g;
+        g.timer = setTimeout(function () {
+            flushAgg(g);
+        }, AGG_WINDOW);
+    }
+
+    function flushAgg(g) {
+        if (!on) {
+            return;
+        }
+        delete pendingAggs[g.key];
+        var kind = g.op === 'add' ? 'dom-add' : 'dom-remove';
+        // 单条不聚合时用原 selector；聚合时用模板 + 示例 + 数量。
+        var extra = {selector: g.count > 1 ? g.tpl : g.info.selector, count: g.count};
+        if (g.count > 1) {
+            extra.sample = g.info.selector;
+        }
+        pushDom(kind, null, g.info, extra);
+    }
+
+    function onMutations(muts) {
+        if (!on) {
+            return;
+        }
+        for (var i = 0; i < muts.length; i++) {
+            var m = muts[i];
+            if (m.type === 'childList') {
+                if (m.addedNodes.length) {
+                    var added = new Set();
+                    for (var j = 0; j < m.addedNodes.length; j++) {
+                        if (m.addedNodes[j].nodeType === 1) {
+                            added.add(m.addedNodes[j]);
+                        }
+                    }
+                    for (var k = 0; k < m.addedNodes.length; k++) {
+                        var n = m.addedNodes[k];
+                        // 顶层过滤：同批嵌套 / 已记录节点的子树（弹窗内部）都不重复记。
+                        if (n.nodeType !== 1 || isDescendantOf(n, added) || isInsideRecentAdd(n)) {
+                            continue;
+                        }
+                        var info = vueInfo(n);
+                        if (info) {
+                            aggregateDomChange('add', n, info);
+                        }
+                    }
+                }
+                if (m.removedNodes.length) {
+                    var removed = new Set();
+                    for (var r = 0; r < m.removedNodes.length; r++) {
+                        if (m.removedNodes[r].nodeType === 1) {
+                            removed.add(m.removedNodes[r]);
+                        }
+                    }
+                    for (var rm = 0; rm < m.removedNodes.length; rm++) {
+                        var rn = m.removedNodes[rm];
+                        if (rn.nodeType !== 1 || isDescendantOf(rn, removed)) {
+                            continue;
+                        }
+                        var rinfo = vueInfo(rn);
+                        if (rinfo) {
+                            aggregateDomChange('remove', rn, rinfo);
+                        }
+                    }
+                }
+            } else if (m.type === 'attributes') {
+                var el = m.target;
+                if (!el || el.nodeType !== 1) {
+                    continue;
+                }
+                var ainfo = vueInfo(el);
+                if (!ainfo) {
+                    continue;
+                }
+                var visible = false;
+                try {
+                    var cs = getComputedStyle(el);
+                    visible = cs.display !== 'none' && cs.visibility !== 'hidden' && !!el.getClientRects().length;
+                } catch (e) {
+                    visible = false;
+                }
+                pushDom('dom-vis', el, ainfo, {visible: visible});
+            } else if (m.type === 'characterData') {
+                var textEl = m.target && m.target.parentElement;
+                if (!textEl || textEl.nodeType !== 1) {
+                    continue;
+                }
+                var tagName = textEl.tagName || '';
+                // 表单值变化由 change 事件覆盖，characterData 只记普通容器文本，避免重复。
+                if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
+                    continue;
+                }
+                var tinfo = vueInfo(textEl);
+                if (!tinfo) {
+                    continue;
+                }
+                // 无组件链的文本变化要求可见（隐藏缓存/模板等不记，控量）。
+                if (!tinfo.component) {
+                    try {
+                        if (!textEl.getClientRects().length) {
+                            continue;
+                        }
+                    } catch (e) {
+                        continue;
+                    }
+                }
+                pushDom('dom-text', textEl, tinfo, {text: String(m.target.data).slice(0, 80)});
+            }
+        }
+    }
+
+    function startDomWatch() {
+        if (domObserver) {
+            return;
+        }
+        domCount = 0;
+        domLastEmit = {};
+        recentAdds = [];
+        pendingAggs = {};
+        domObserver = new MutationObserver(onMutations);
+        domObserver.observe(document, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['style', 'class', 'hidden'],
+        });
+    }
+
+    function stopDomWatch() {
+        if (domObserver) {
+            domObserver.disconnect();
+            domObserver = null;
+        }
+        // 停止时把未到聚合窗口的组 flush 掉，避免丢事件。
+        for (var key in pendingAggs) {
+            var g = pendingAggs[key];
+            clearTimeout(g.timer);
+            flushAgg(g);
+        }
+        pendingAggs = {};
+        recentAdds = [];
+    }
+
     function stop() {
         if (!on) {
             return;
         }
+        stopDomWatch();
         document.removeEventListener('click', onClick, true);
         document.removeEventListener('scroll', onScroll, true);
         document.removeEventListener('change', onChange, true);

package/extension/background.js

@@ -91,6 +91,10 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
+        if (message.type === 'qa-context') {
+            const r = await fetch(`${base}/qa/context`);
+            return await r.json();
+        }
         const r = await fetch(`${base}/state`);
         return await r.json();
     } catch (error) {
@@ -113,7 +117,8 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         msg.type === 'rec-start' ||
         msg.type === 'rec-event' ||
         msg.type === 'rec-stop' ||
-        msg.type === 'figma-capture'
+        msg.type === 'figma-capture' ||
+        msg.type === 'qa-context'
     ) {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse

package/extension/bridge-content.js

@@ -38,6 +38,8 @@
                 active: !!(r && r.active),
                 console: !!(r && r.console),
                 network: !!(r && r.network),
+                consoleFilter: (r && r.consoleFilter) || '',
+                consoleFilterMode: (r && r.consoleFilterMode) === 'white' ? 'white' : 'black',
             },
             '*'
         );

package/extension/native-host/host.mjs

@@ -14,6 +14,7 @@
 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');
@@ -188,6 +189,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 send(obj) {
     const body = Buffer.from(JSON.stringify(obj), 'utf8');
     const header = Buffer.alloc(4);
@@ -216,6 +267,8 @@ function handle(msg) {
     } else if (msg && msg.type === 'figma-capture') {
         figmaCapture(msg.node);
         resp = {ok: true};
+    } else if (msg && msg.type === 'qa-context') {
+        resp = qaContext();
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/extension/popup.html

@@ -175,11 +175,60 @@
             <div id="mode-panes"></div>
         </div>
 
-        <!-- 「设置」页：生效域名 + 传输通路 -->
+        <!-- 「设置」页：RD/QA 模式切换 + 生效域名 + 传输通路 -->
         <div
             id="top-settings"
             style="display: none"
         >
+            <section>
+                <div class="label">模式</div>
+                <label class="radio">
+                    <input
+                        type="radio"
+                        name="appmode"
+                        value="rd"
+                    />
+                    RD（研发）
+                </label>
+                <label class="radio">
+                    <input
+                        type="radio"
+                        name="appmode"
+                        value="qa"
+                    />
+                    QA（测试）
+                </label>
+            </section>
+
+            <!-- QA 模式专属：复制复现信息（RD 模式隐藏） -->
+            <section
+                id="qa-block"
+                style="display: none"
+            >
+                <div class="label">QA：复制复现信息</div>
+                <div class="hint">
+                    录制结束并选中元素后，点下面按钮把「选中元素 + 操作录制（+ Figma 节点）」拼成一段文本复制，
+                    直接粘给开发 / Agent 即可复现问题。
+                </div>
+                <div
+                    class="row"
+                    style="margin-top: 8px"
+                >
+                    <button
+                        id="qa-copy"
+                        class="primary"
+                        style="flex: 1"
+                    >
+                        复制选中元素与录制信息
+                    </button>
+                </div>
+                <div
+                    id="qa-status"
+                    class="hint"
+                    style="margin-top: 4px"
+                ></div>
+            </section>
+
             <section>
                 <div class="label">生效域名</div>
                 <div class="row">
@@ -199,49 +248,52 @@
                 <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"
-                    >
+            <!-- 传输配置（RD 模式显示；QA 模式隐藏——QA 只复制本地上下文，走默认 native 即可） -->
+            <div id="transport-block">
+                <section>
+                    <div class="label">传输通路</div>
+                    <label class="radio">
                         <input
-                            id="bridge-target"
-                            type="text"
-                            placeholder="<remote-ip>:<port>"
+                            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="<remote-ip>:<port>"
+                            />
+                        </div>
+                        <div class="hint">
+                            填开发机 bridge 的完整地址（如
+                            <code>&lt;remote-ip&gt;:&lt;port&gt;</code>
+                            ）
+                        </div>
                     </div>
-                    <div class="hint">
-                        填开发机 bridge 的完整地址（如
-                        <code><\remote-ip>:<\port></code>
-                        ）
-                    </div>
-                </div>
-            </section>
+                </section>
 
-            <button
-                id="save"
-                class="primary"
-            >
-                保存传输设置
-            </button>
+                <button
+                    id="save"
+                    class="primary"
+                >
+                    保存传输设置
+                </button>
+            </div>
             <div id="msg"></div>
         </div>
 

package/extension/popup.js

@@ -3,6 +3,7 @@ const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
     bridgeTarget: '8917',
+    appMode: 'rd', // rd（研发，展示传输配置）/ qa（测试，只展示复制复现信息）
 };
 const PROTECTED = new Set(DEFAULTS.domains); // 默认项不可删、不回收权限
 
@@ -136,6 +137,26 @@ $('domain-input').addEventListener('keydown', e => {
     }
 });
 
+// ---------- 设置页模式：RD（研发）/ QA（测试）----------
+// RD：显示传输通路配置；QA：隐藏传输通路（QA 只复制本地上下文，走默认 native 即可），显示复制复现信息。
+async function renderAppMode() {
+    const {appMode} = await getConfig();
+    const mode = appMode === 'qa' ? 'qa' : 'rd';
+    for (const r of document.querySelectorAll('input[name="appmode"]')) {
+        r.checked = r.value === mode;
+    }
+    $('qa-block').style.display = mode === 'qa' ? 'block' : 'none';
+    $('transport-block').style.display = mode === 'rd' ? 'block' : 'none';
+}
+
+for (const r of document.querySelectorAll('input[name="appmode"]')) {
+    r.addEventListener('change', async () => {
+        await chrome.storage.local.set({appMode: r.value === 'qa' ? 'qa' : 'rd'});
+        await renderAppMode();
+    });
+}
+renderAppMode();
+
 renderDomains();
 renderTransport();
 
@@ -222,11 +243,74 @@ async function initModes() {
     }
 
     // 没有增强包：只有「选择 Element」一个模式，顶层「模式/设置」tab 失去意义——
-    // 隐藏顶层 tab 与模式页，直接展示「设置」面板内容。
+    // 隐藏顶层 tab 与模式页，直接展示「设置」面板内容（QA 模式在设置页里切换）。
     if (!plugins.length) {
         $('top-tabs').style.display = 'none';
         $('top-mode').style.display = 'none';
         $('top-settings').style.display = 'block';
     }
 }
+
+// ---------- QA 模式：把选中元素 + 录制信息复制成上下文文本（设置页 QA 区块）----------
+const qaBtn = $('qa-copy');
+const qaStatus = $('qa-status');
+
+function qaSet(text, ok) {
+    qaStatus.textContent = text;
+    qaStatus.style.color = ok === false ? '#cf222e' : ok ? '#1a7f37' : '#656d76';
+}
+
+function fallbackCopy(text) {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;';
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+        ok = document.execCommand('copy');
+    } catch {
+        ok = false;
+    }
+    ta.remove();
+    return ok;
+}
+
+function copyText(text) {
+    return new Promise(resolve => {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard
+                .writeText(text)
+                .then(() => resolve(true))
+                .catch(() => resolve(fallbackCopy(text)));
+        } else {
+            resolve(fallbackCopy(text));
+        }
+    });
+}
+
+qaBtn.onclick = () => {
+    qaSet('读取中…');
+    chrome.runtime.sendMessage({type: 'qa-context'}, resp => {
+        if (chrome.runtime.lastError || !resp || !resp.ok) {
+            qaSet((resp && resp.error) || '读取失败：确认已装 host/bridge（或远程 bridge 在跑）', false);
+            return;
+        }
+        const c = resp.counts || {};
+        const total = (c.elements || 0) + (c.recEvents || 0) + (c.figma || 0);
+        if (!total || !resp.text) {
+            qaSet('还没有内容：先「录制并停止」，或 Alt 选中元素', false);
+            return;
+        }
+        copyText(resp.text).then(ok => {
+            const parts = [
+                `${c.elements || 0} 个元素`,
+                `${c.recEvents || 0} 条录制事件`,
+                c.figma ? `${c.figma} 个 figma 节点` : null,
+            ].filter(Boolean);
+            qaSet(ok ? `已复制（${parts.join(' + ')}），可直接粘贴给开发/Agent` : '复制失败，请重试', ok);
+        });
+    });
+};
+
 initModes();

package/hooks/inject-ui-inspector.mjs

@@ -13,6 +13,7 @@
 import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
+import {describeElement, describeRecording, describeFigma} from '../lib/context-text.mjs';
 
 // 共享落盘：读用户主目录下的 pending / recording（与 host / bridge / mcp 同一路径），一份代码可服务多个仓库。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
@@ -77,95 +78,8 @@ if (!list.length && !hasRec && !hasFigma) {
     emit({decision: 'allow'});
 }
 
-function describe(target, index, total) {
-    const files = (target.componentChain || []).map(item => item && item.file).filter(Boolean);
-    const head = total > 1 ? `【元素 ${index + 1}/${total}】` : '';
-    return [
-        head + (files.length ? `组件源码（由近及远）: ${files.join(' <- ')}` : '组件源码: 未捕获（不在 Vue 组件树内）'),
-        `  CSS 选择器: ${target.selector || '(无)'}`,
-        `  标签/文本: <${target.tag || '?'}> ${JSON.stringify((target.text || '').slice(0, 120))}`,
-        target.pageUrl ? `  页面: ${target.pageUrl}` : '',
-    ]
-        .filter(Boolean)
-        .join('\n');
-}
-
-// 把各类用户事件（点击/滚动/输入/提交/按键/控制台/网络）归并成一条按时间排序的时间线。
-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 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 录制】用户录制了一段操作（页面 ${meta.pageUrl || ''}，约 ${secs}s，共 ${lines.length} 个事件，时间为相对录制起点的偏移）：`,
-    ];
-    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');
-}
-
-// figma「带入对话」节点：把每个节点的 F2C HTML 结构铺开，供 Agent 据此生成代码。
-function describeFigma(nodes) {
-    const parts = [
-        `【ui-inspector Figma】用户在 Figma 选中并带入了 ${nodes.length} 个节点，请据下面的结构（F2C 导出的 HTML）生成对应前端代码：`,
-    ];
-    nodes.forEach((entry, i) => {
-        const n = (entry && entry.node) || {};
-        const html = String(n.html || '').slice(0, 20000);
-        parts.push(`—— 节点 ${i + 1}：${n.name || ''}（id ${n.nodeId || '?'}，${n.type || ''}）——`);
-        parts.push(html || '(无 HTML)');
-        if ((n.html || '').length > 20000) {
-            parts.push('…（结构过长已截断）');
-        }
-        const imgs = Array.isArray(n.images) ? n.images.filter(im => im && im.file) : [];
-        if (imgs.length) {
-            parts.push(
-                `  该节点含 ${imgs.length} 张图片，已导出为本地 PNG（HTML 里的图片是占位路径没有字节，请用下面的真实文件；可用 Read 工具查看图片内容，按「名称」与 HTML 占位 src 对应）：`
-            );
-            imgs.forEach(im => {
-                const dim = im.width && im.height ? ` ${im.width}x${im.height}` : '';
-                parts.push(`    - ${im.name || '(未命名)'}（id ${im.id || '?'}${dim}）: ${im.file}`);
-            });
-        }
-    });
-    return parts.join('\n');
-}
+// describe 系列（describeElement / describeRecording / describeFigma）统一在 ../lib/context-text.mjs，
+// 与 QA 模式（host/bridge 的 qa-context）共用同一份文案，保证注入与复制输出一致。
 
 const sections = [];
 if (list.length) {
@@ -173,7 +87,7 @@ if (list.length) {
     sections.push(
         [
             `【ui-inspector】用户在页面上选中了 ${total} 个元素，接下来这条消息是针对它们的修改意见：`,
-            list.map((entry, index) => describe(entry?.target ?? {}, index, total)).join('\n'),
+            list.map((entry, index) => describeElement(entry?.target ?? {}, index, total)).join('\n'),
         ].join('\n')
     );
 }

package/lib/context-text.mjs

@@ -0,0 +1,164 @@
+/*
+ * ui-inspector 上下文格式化（共享）：把「选中元素 / 录制时间线 / figma 节点」拼成给 Agent 的文本。
+ *
+ * 三个消费方共用同一份文案逻辑，保证输出一致：
+ *   - hooks/inject-ui-inspector.mjs（Comate 注入）
+ *   - extension/native-host/host.mjs、bridge/server.mjs（QA 模式：测试人员复制上下文）
+ * 纯函数，无 IO；本文件不得 import 除 node 内置外的模块。
+ */
+
+// 单个 DOM 选中元素的描述（与 hook 注入格式一致）。
+export function describeElement(target, index, total) {
+    const files = (target.componentChain || []).map(item => item && item.file).filter(Boolean);
+    const head = total > 1 ? `【元素 ${index + 1}/${total}】` : '';
+    return [
+        head + (files.length ? `组件源码（由近及远）: ${files.join(' <- ')}` : '组件源码: 未捕获（不在 Vue 组件树内）'),
+        `  CSS 选择器: ${target.selector || '(无)'}`,
+        `  标签/文本: <${target.tag || '?'}> ${JSON.stringify((target.text || '').slice(0, 120))}`,
+        target.pageUrl ? `  页面: ${target.pageUrl}` : '',
+    ]
+        .filter(Boolean)
+        .join('\n');
+}
+
+// 把各类用户事件（点击/滚动/输入/提交/按键/控制台/网络）归并成一条按时间排序的时间线。
+export 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 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}`});
+            // 请求参数/请求体属于「发起」阶段，附在发起事件下（同 ts 保持插入序）。
+            if (it.params) {
+                lines.push({ts: it.startTs, text: `  请求参数: ${String(it.params).slice(0, 200)}`});
+            }
+            if (it.reqBody) {
+                const b = typeof it.reqBody === 'string' ? it.reqBody : JSON.stringify(it.reqBody, null, 1);
+                lines.push({ts: it.startTs, text: `  请求体: ${b.slice(0, 400)}${b.length > 400 ? '…' : ''}`});
+            }
+            const done = `网络←完成 ${it.method} ${it.url} → ${it.status} (${it.ms}ms)`;
+            lines.push({ts: it.endTs, text: done});
+            // 响应体属于「完成」阶段（采集端已字段级截断，保留结构、只截长值）。
+            if (it.resp) {
+                const b = typeof it.resp === 'string' ? it.resp : JSON.stringify(it.resp, null, 1);
+                lines.push({ts: it.endTs, text: `  响应体: ${b.slice(0, 600)}${b.length > 600 ? '…' : ''}`});
+            }
+        } else if (ev.kind === 'dom-add' || ev.kind === 'dom-remove') {
+            const files = (it.componentChain || []).map(x => x && x.file).filter(Boolean);
+            const count = it.count > 1 ? ` ×${it.count}` : '';
+            const sample = it.sample ? ` (示例: ${it.sample})` : '';
+            lines.push({
+                ts: it.ts,
+                text:
+                    `DOM${ev.kind === 'dom-add' ? '+' : '-'} <${it.tag}> ${it.selector}${count}${sample}` +
+                    (files.length ? ` (${files[0].split('/').pop()})` : ''),
+            });
+        } else if (ev.kind === 'dom-vis') {
+            const files = (it.componentChain || []).map(x => x && x.file).filter(Boolean);
+            lines.push({
+                ts: it.ts,
+                text: `可见性 ${it.visible ? '显示' : '隐藏'} <${it.tag}> ${it.selector}` + (files.length ? ` (${files[0].split('/').pop()})` : ''),
+            });
+        } else if (ev.kind === 'dom-text') {
+            const files = (it.componentChain || []).map(x => x && x.file).filter(Boolean);
+            lines.push({
+                ts: it.ts,
+                text: `文本变化 <${it.tag}> ${it.selector} = ${JSON.stringify(it.text ?? '')}` + (files.length ? ` (${files[0].split('/').pop()})` : ''),
+            });
+        } 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 录制】用户录制了一段操作（页面 ${meta.pageUrl || ''}，约 ${secs}s，共 ${lines.length} 个事件，时间为相对录制起点的偏移）：`,
+    ];
+    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');
+}
+
+// figma「带入对话」节点：把每个节点的 F2C HTML 结构铺开，供 Agent 据此生成代码。
+export function describeFigma(nodes) {
+    const parts = [
+        `【ui-inspector Figma】用户在 Figma 选中并带入了 ${nodes.length} 个节点，请据下面的结构（F2C 导出的 HTML）生成对应前端代码：`,
+    ];
+    nodes.forEach((entry, i) => {
+        const n = (entry && entry.node) || {};
+        const html = String(n.html || '').slice(0, 20000);
+        parts.push(`—— 节点 ${i + 1}：${n.name || ''}（id ${n.nodeId || '?'}，${n.type || ''}）——`);
+        parts.push(html || '(无 HTML)');
+        if ((n.html || '').length > 20000) {
+            parts.push('…（结构过长已截断）');
+        }
+        const imgs = Array.isArray(n.images) ? n.images.filter(im => im && im.file) : [];
+        if (imgs.length) {
+            parts.push(
+                `  该节点含 ${imgs.length} 张图片，已导出为本地 PNG（HTML 里的图片是占位路径没有字节，请用下面的真实文件；可用 Read 工具查看图片内容，按「名称」与 HTML 占位 src 对应）：`
+            );
+            imgs.forEach(im => {
+                const dim = im.width && im.height ? ` ${im.width}x${im.height}` : '';
+                parts.push(`    - ${im.name || '(未命名)'}（id ${im.id || '?'}${dim}）: ${im.file}`);
+            });
+        }
+    });
+    return parts.join('\n');
+}
+
+// 把三份数据拼成上下文 sections（不含 Comate 特有尾部话术，调用方自加）。
+// list = pending.json 的选中元素条目（entry.target）；meta/evs = 已停止的录制；figmaNodes = figma-pending.json 条目。
+export function buildContextSections(list, meta, evs, figmaNodes) {
+    const sections = [];
+    if (Array.isArray(list) && list.length) {
+        const total = list.length;
+        sections.push(
+            [
+                `【ui-inspector】用户在页面上选中了 ${total} 个元素：`,
+                list.map((entry, index) => describeElement(entry?.target ?? {}, index, total)).join('\n'),
+            ].join('\n')
+        );
+    }
+    if (meta && evs && evs.length) {
+        sections.push(describeRecording(meta, evs));
+    }
+    if (Array.isArray(figmaNodes) && figmaNodes.length) {
+        sections.push(describeFigma(figmaNodes));
+    }
+    return sections;
+}
+
+// QA 场景的完整文本：sections + 通用说明，测试人员复制后粘给开发/Agent 使用。
+export function buildQaContextText(list, meta, evs, figmaNodes) {
+    const sections = buildContextSections(list, meta, evs, figmaNodes);
+    sections.push('以上为测试环境采集的复现信息（选中元素 + 操作录制），请据此定位并修复问题。');
+    return sections.join('\n\n');
+}

package/package.json

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