flower-trellis 0.5.2 → 0.5.4

package/enhancements/common/.common/.claude/skills/craft-rpa/recorder/config.js

@@ -0,0 +1,54 @@
+const DEFAULT_PORT = 7777;
+const DEFAULT_HOST = '0.0.0.0';
+const DEFAULT_CLIENT_HOST = 'localhost';
+const MAX_NETWORK_BODY_BYTES = 20 * 1024 * 1024;
+const MAX_FALLBACK_PAYLOAD_BYTES = 60 * 1024;
+const MAX_OBSERVE_TEXT_BYTES = 64 * 1024;
+const MAX_OBSERVE_ARIA_BYTES = 64 * 1024;
+const MAX_OBSERVE_METADATA_BYTES = 4 * 1024;
+const MAX_OBSERVE_DOM_BYTES = 5 * 1024 * 1024;
+const MAX_OBSERVE_SCREENSHOT_BYTES = 20 * 1024 * 1024;
+const MAX_OBSERVE_ELEMENTS = 500;
+const MAX_OBSERVE_FRAMES = 100;
+
+/**
+ * 解析 recorder 端口，非法值回退到默认端口。
+ *
+ * @param {string|number|undefined} value 候选端口。
+ * @return {number} 可用端口。
+ */
+function resolvePort(value = process.env.CRAFT_RPA_PORT) {
+    const port = Number.parseInt(String(value || ''), 10);
+    return Number.isInteger(port) && port > 0 && port <= 65535 ? port : DEFAULT_PORT;
+}
+
+/**
+ * 返回浏览器或本机客户端访问 logger 的 HTTP origin。
+ *
+ * @param {Object} [options] 配置项。
+ * @param {string} [options.host] 客户端访问主机名。
+ * @param {number} [options.port] logger 端口。
+ * @return {string} HTTP origin。
+ */
+function getLoggerOrigin(options = {}) {
+    const host = options.host || process.env.CRAFT_RPA_CLIENT_HOST || DEFAULT_CLIENT_HOST;
+    const port = resolvePort(options.port);
+    return `http://${host}:${port}`;
+}
+
+module.exports = {
+    DEFAULT_PORT,
+    DEFAULT_HOST,
+    DEFAULT_CLIENT_HOST,
+    MAX_NETWORK_BODY_BYTES,
+    MAX_FALLBACK_PAYLOAD_BYTES,
+    MAX_OBSERVE_TEXT_BYTES,
+    MAX_OBSERVE_ARIA_BYTES,
+    MAX_OBSERVE_METADATA_BYTES,
+    MAX_OBSERVE_DOM_BYTES,
+    MAX_OBSERVE_SCREENSHOT_BYTES,
+    MAX_OBSERVE_ELEMENTS,
+    MAX_OBSERVE_FRAMES,
+    resolvePort,
+    getLoggerOrigin,
+};

package/enhancements/common/.common/.claude/skills/craft-rpa/recorder/dashboard.html

@@ -1347,7 +1347,7 @@ body::before {
         <span id="last-update"></span>
     </div>
     <div class="center" id="filter-info">显示 0 / 0</div>
-    <div class="right" id="endpoint-info">localhost:7777 · session.jsonl</div>
+    <div class="right" id="endpoint-info">本机 recorder · session.jsonl</div>
 </footer>
 
 <div class="toast" id="toast"></div>
@@ -1358,6 +1358,7 @@ body::before {
    初次进入：优先读取 localStorage；没有则跟随系统 prefers-color-scheme
 ============================================================ */
 const THEME_KEY = 'recorder-theme';
+document.getElementById('endpoint-info').textContent = `${location.host} · session.jsonl`;
 
 /**
  * 应用主题到 <html> 上
@@ -1394,7 +1395,7 @@ const state = {
     events: [],              // 全部已收事件，按 serverTime 顺序
     pages: [],               // 浏览器当前打开的 tab 列表
     activeTabIdx: 0,         // 当前活跃 tab（focus 后更新）
-    lastSeen: '',            // 增量拉取游标（最后一条 serverTime）
+    lastCursor: 0,           // 增量拉取游标（logger 生成的单调序号）
     filter: 'all',           // kind 过滤
     search: '',              // 关键词搜索
     paused: false,           // 是否暂停轮询
@@ -1506,7 +1507,7 @@ async function pollOnce() {
     if (state.paused) return;
     try {
         const [eventsResp, pagesResp] = await Promise.all([
-            fetch(state.lastSeen ? `/events?since=${encodeURIComponent(state.lastSeen)}` : '/events'),
+            fetch(state.lastCursor ? `/events?cursor=${encodeURIComponent(state.lastCursor)}` : '/events'),
             fetch('/control/pages').catch(() => null),
         ]);
 
@@ -1516,7 +1517,7 @@ async function pollOnce() {
         if (events.length > 0) {
             const startIdx = state.events.length;
             state.events.push(...events);
-            state.lastSeen = events[events.length - 1].serverTime || state.lastSeen;
+            state.lastCursor = events[events.length - 1]._cursor || state.lastCursor;
             // 标记本批为"新事件"用于入场动画
             for (let i = 0; i < events.length; i++) {
                 state.newEventIdxs.add(startIdx + i);
@@ -1846,10 +1847,15 @@ function selectEvent(idx) {
     if (e.kind === 'network') {
         const items = [];
         items.push(['METHOD', e.method || '?']);
-        items.push(['STATUS', String(e.status || 'ERR')]);
+        items.push(['STATUS', String(e.status ?? 'ERR')]);
         if (e.requestUrl) items.push(['URL', e.requestUrl]);
         if (e.durationMs) items.push(['DURATION', e.durationMs + ' ms']);
-        if (e.error) items.push(['ERROR', e.error]);
+        if (e.source) items.push(['SOURCE', e.source]);
+        if (e.requestContentType) items.push(['REQUEST TYPE', e.requestContentType]);
+        if (e.requestSize !== undefined) items.push(['REQUEST SIZE', e.requestSize + ' bytes']);
+        if (e.responseContentType) items.push(['RESPONSE TYPE', e.responseContentType]);
+        if (e.responseSize !== undefined) items.push(['RESPONSE SIZE', e.responseSize + ' bytes']);
+        if (e.failure?.errorText || e.error) items.push(['ERROR', e.failure?.errorText || e.error]);
         html += `
             <div class="detail-section">
                 <div class="section-label">请求信息</div>
@@ -1912,7 +1918,7 @@ async function doControl(path, body) {
         const resp = await fetch('/control/' + path, opts);
         if (!resp.ok) {
             const err = await resp.json().catch(() => ({}));
-            throw new Error(err.error || `HTTP ${resp.status}`);
+            throw new Error(err.error?.message || err.error || `HTTP ${resp.status}`);
         }
         return await resp.json();
     } catch (e) {
@@ -2010,17 +2016,14 @@ $('btn-export').onclick = () => {
         toast('暂无事件可导出');
         return;
     }
-    const jsonl = state.events.map(e => JSON.stringify(e)).join('\n');
-    const blob = new Blob([jsonl], { type: 'application/x-ndjson' });
     const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
+    a.href = '/session';
     a.download = `recorder-${new Date().toISOString().replace(/[:.]/g, '-')}.jsonl`;
     a.click();
-    URL.revokeObjectURL(a.href);
-    toast(`⬇  已导出 ${state.events.length} 条事件`, 'success');
+    toast(`已请求导出完整 JSONL（${state.events.length} 条摘要）`, 'success');
 };
 
-// 清空显示（仅前端，磁盘文件不变；保留 lastSeen 以免刷出旧事件）
+// 清空显示（仅前端，磁盘文件不变；保留 lastCursor 以免刷出旧事件）
 $('btn-clear').onclick = () => {
     if (!confirm('清空当前显示？\n\n磁盘文件不受影响，只有新事件会出现。')) return;
     state.events = [];

package/enhancements/common/.common/.claude/skills/craft-rpa/recorder/inject.js

@@ -2,7 +2,7 @@
  * 浏览器端事件监听注入脚本 —— RPA 增强版
  *
  * 通过 Playwright 的 addInitScript 在每个页面加载前注入。
- * 监听用户的所有交互、网络请求、路由变化和异常，实时 POST 给本地 logger。
+ * 监听用户交互、路由变化和异常，优先通过 Playwright binding 写入本地 logger。
  *
  * RPA 友好的元素详情包括：
  *   - 多种选择器策略（id / data-testid / aria / role+name / text / css / xpath）
@@ -18,7 +18,7 @@
  *   1. 幂等：window.__loggerInjected 防重复绑定。
  *   2. 跳过 about:blank：浏览器内嵌的空白 iframe 没有有用事件，避免噪音。
  *   3. 批量+延迟发送：500ms 或攒满 10 条触发一次 flush。
- *   4. 页面卸载兜底：beforeunload / pagehide 时 sendBeacon 强制刷出。
+ *   4. 传输主路径：Playwright binding；不可用时才用 sendBeacon / 原生 fetch 回退。
  *   5. 敏感字段标记：命中 password / 含 password|secret|token|captcha 字段名的元素在 target.sensitive=true；
  *      value 默认透传原值（RPA 流程参考所需）；设 REDACT_SENSITIVE=true 才替换成 [REDACTED len=N]。
  */
@@ -34,7 +34,10 @@
 
     // ============ 常量 ============
 
-    const LOGGER = 'http://localhost:7777/log';
+    const CONFIG = globalThis.__CRAFT_RPA_CONFIG__ || {};
+    const LOGGER = CONFIG.loggerUrl || 'http://localhost:7777/log';
+    const MAX_FALLBACK_PAYLOAD_BYTES = CONFIG.maxFallbackPayloadBytes || 60 * 1024;
+    const NATIVE_FETCH = typeof window.fetch === 'function' ? window.fetch.bind(window) : null;
 
     /** 会话 ID：用于把同一个页面 / SPA 流程的事件串起来。整页跳转会产生新的 sessionId（属正常） */
     const SESSION_ID =
@@ -92,35 +95,98 @@
     }
 
     /**
-     * 把队列里的事件全部发送
-     * 优先 sendBeacon（卸载时也能发），失败时退回 fetch keepalive
+     * 通过 HTTP 回退发送事件，并按 keepalive/beacon 的实际限制拆批。
+     *
+     * @param {Object[]} events 待发送事件。
+     */
+    function sendHttpFallback(events) {
+        const batches = [];
+        let current = [];
+        for (const event of events) {
+            const candidate = current.concat(event);
+            const candidateBody = JSON.stringify(candidate);
+            if (new TextEncoder().encode(candidateBody).length <= MAX_FALLBACK_PAYLOAD_BYTES) {
+                current = candidate;
+                continue;
+            }
+            if (current.length > 0) batches.push(current);
+            const singleBody = JSON.stringify([event]);
+            if (new TextEncoder().encode(singleBody).length <= MAX_FALLBACK_PAYLOAD_BYTES) {
+                current = [event];
+            } else {
+                console.warn('[inject] dropped oversized fallback event:', event.kind, event.type);
+                current = [{
+                    sessionId: SESSION_ID,
+                    clientTime: new Date().toISOString(),
+                    url: location.href,
+                    frame: getFrameContext(),
+                    kind: 'error',
+                    type: 'transport.drop',
+                    message: 'fallback event exceeded payload limit',
+                    droppedKind: event.kind,
+                    droppedType: event.type,
+                }];
+            }
+        }
+        if (current.length > 0) batches.push(current);
+
+        for (const batch of batches) {
+            const body = JSON.stringify(batch);
+            try {
+                const sent = navigator.sendBeacon
+                    ? navigator.sendBeacon(LOGGER, new Blob([body], { type: 'application/json' }))
+                    : false;
+                if (!sent && NATIVE_FETCH) {
+                    void NATIVE_FETCH(LOGGER, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body,
+                        keepalive: true,
+                    }).catch(error => {
+                        console.warn('[inject] fallback fetch failed:', error.message);
+                    });
+                } else if (!sent) {
+                    console.warn('[inject] fallback transport unavailable:', batch.length, 'events');
+                }
+            } catch (e) {
+                // 回退失败只能写浏览器控制台，不能把异常抛进业务页面。
+                console.warn('[inject] fallback transport failed:', e.message);
+            }
+        }
+    }
+
+    /**
+     * 把队列里的事件发送到 Playwright binding，失败或卸载时走 HTTP 回退。
+     *
+     * @param {{unloading?:boolean}} [options] 卸载阶段必须使用同步发起的回退通道。
      */
-    function flush() {
+    function flush(options = {}) {
         if (queue.length === 0) return;
         const batch = queue.splice(0);
         if (flushTimer) {
             clearTimeout(flushTimer);
             flushTimer = null;
         }
-        const body = JSON.stringify(batch);
         try {
-            if (navigator.sendBeacon) {
-                navigator.sendBeacon(LOGGER, new Blob([body], { type: 'application/json' }));
-            } else {
-                fetch(LOGGER, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body,
-                    keepalive: true,
+            if (options.unloading) {
+                sendHttpFallback(batch);
+                return;
+            }
+            if (typeof window.__craftRpaAppendEvents === 'function') {
+                void Promise.resolve(window.__craftRpaAppendEvents(batch)).catch(error => {
+                    console.warn('[inject] binding transport failed:', error.message);
+                    sendHttpFallback(batch);
                 });
+            } else {
+                sendHttpFallback(batch);
             }
         } catch (e) {
-            // 发送失败不抛出，避免影响业务页面
+            sendHttpFallback(batch);
         }
     }
 
-    window.addEventListener('beforeunload', flush);
-    window.addEventListener('pagehide', flush);
+    window.addEventListener('beforeunload', () => flush({ unloading: true }));
+    window.addEventListener('pagehide', () => flush({ unloading: true }));
 
     // ============ 上下文：iframe / 视口 ============
 
@@ -653,66 +719,6 @@
         });
     }, true);
 
-    // ============ 网络请求拦截 ============
-
-    const origFetch = window.fetch;
-    window.fetch = async function (...args) {
-        const [input, init = {}] = args;
-        const url = typeof input === 'string' ? input : input.url;
-        const method = init.method || (typeof input !== 'string' && input.method) || 'GET';
-        const start = performance.now();
-        try {
-            const resp = await origFetch.apply(this, args);
-            send({
-                kind: 'network',
-                type: 'fetch',
-                method,
-                requestUrl: url,
-                status: resp.status,
-                durationMs: Math.round(performance.now() - start),
-            });
-            return resp;
-        } catch (err) {
-            send({
-                kind: 'network',
-                type: 'fetch',
-                method,
-                requestUrl: url,
-                error: err.message,
-                durationMs: Math.round(performance.now() - start),
-            });
-            throw err;
-        }
-    };
-
-    const OrigXHR = window.XMLHttpRequest;
-    window.XMLHttpRequest = function () {
-        const xhr = new OrigXHR();
-        let _method, _url, _start;
-        const origOpen = xhr.open;
-        xhr.open = function (method, url, ...rest) {
-            _method = method;
-            _url = url;
-            return origOpen.call(this, method, url, ...rest);
-        };
-        const origSend = xhr.send;
-        xhr.send = function (...args) {
-            _start = performance.now();
-            xhr.addEventListener('loadend', () => {
-                send({
-                    kind: 'network',
-                    type: 'xhr',
-                    method: _method,
-                    requestUrl: _url,
-                    status: xhr.status,
-                    durationMs: Math.round(performance.now() - _start),
-                });
-            });
-            return origSend.apply(this, args);
-        };
-        return xhr;
-    };
-
     // ============ SPA 路由 ============
 
     ['pushState', 'replaceState'].forEach(type => {