wu-framework 1.1.8 → 1.1.9

package/src/core/wu-mcp-bridge.js

@@ -5,14 +5,32 @@
  * commands using wu.* APIs. This is the "eyes and hands" of
  * the MCP server inside the browser.
  *
+ * Security:
+ *   - Optional auth token sent on first message (handshake)
+ *   - All state/event/mount operations check wu.ai permissions
+ *   - Mutating operations emit audit events
+ *   - Read-only operations (status, list_apps, snapshot, console, network) are unrestricted
+ *
  * @example
- * // Auto-connect (called by wu.mcp.connect())
- * import { createMcpBridge } from './wu-mcp-bridge.js';
+ * // Connect with auth token
+ * wu.mcp.connect('ws://localhost:19100', { token: 'my-secret' });
  *
- * const bridge = createMcpBridge(wuInstance);
- * bridge.connect('ws://localhost:3100');
+ * // Connect without auth (development only)
+ * wu.mcp.connect();
  */
 
+import {
+  ensureInterceptors,
+  networkLog,
+  consoleLog,
+  captureScreenshot,
+  buildA11yTree,
+  clickElement,
+  typeIntoElement,
+  getFilteredNetwork,
+  getFilteredConsole,
+} from '../ai/wu-ai-browser-primitives.js';
+
 /**
  * Create the MCP bridge for a Wu instance.
  *
@@ -23,6 +41,8 @@ export function createMcpBridge(wu) {
   let ws = null;
   let reconnectTimer = null;
   let reconnectAttempts = 0;
+  let authenticated = false;
+  let authToken = null;
   const MAX_RECONNECT_ATTEMPTS = 10;
   const RECONNECT_DELAY = 2000;
 
@@ -30,14 +50,6 @@ export function createMcpBridge(wu) {
   const eventLog = [];
   const MAX_EVENT_LOG = 200;
 
-  // Console log capture
-  const consoleLog = [];
-  const MAX_CONSOLE_LOG = 500;
-
-  // Network log capture
-  const networkLog = [];
-  const MAX_NETWORK_LOG = 300;
-
   // Capture events for history
   if (wu.eventBus) {
     wu.eventBus.on('*', (event) => {
@@ -51,22 +63,50 @@ export function createMcpBridge(wu) {
     });
   }
 
-  // Capture console messages
-  _interceptConsole();
+  // Install shared interceptors (idempotent — safe if wu-ai-browser already did it)
+  ensureInterceptors();
 
-  // Capture network requests (fetch + XMLHttpRequest)
-  _interceptNetwork();
+  // ── Permission helpers ──
+
+  /**
+   * Check a permission flag via wu.ai.permissions if available.
+   * Falls back to deny if wu.ai is not initialized.
+   */
+  function _checkPermission(perm) {
+    if (wu.ai && wu.ai.permissions) {
+      return wu.ai.permissions.check(perm);
+    }
+    // If AI module not initialized, deny write operations, allow reads
+    const readPerms = ['readStore', 'executeActions'];
+    return readPerms.includes(perm);
+  }
+
+  /**
+   * Emit an audit event for bridge operations.
+   */
+  function _audit(operation, params, result) {
+    if (wu.eventBus) {
+      wu.eventBus.emit('mcp:bridge:operation', {
+        operation,
+        params,
+        result: result?.error ? { error: result.error } : { success: true },
+        timestamp: Date.now(),
+      }, { appName: 'wu-mcp-bridge' });
+    }
+  }
 
   // ── Command handlers ──
 
   const handlers = {
+    // ── Read-only operations (no permission gates) ──
+
     status() {
       return {
         connected: true,
         framework: 'wu-framework',
         apps: _getAppList(),
         storeKeys: wu.store ? Object.keys(wu.store.get('') || {}) : [],
-        actionsCount: wu.ai?._actions ? Object.keys(wu.ai._actions).length : 0,
+        actionsCount: wu.ai ? wu.ai.tools().length : 0,
         eventLogSize: eventLog.length,
       };
     },
@@ -75,45 +115,55 @@ export function createMcpBridge(wu) {
       return _getAppList();
     },
 
-    navigate({ route }) {
-      if (!route) return { error: 'Route is required' };
-      if (wu.eventBus) {
-        wu.eventBus.emit('shell:navigate', { route });
-      }
-      if (wu.store) {
-        wu.store.set('currentPath', route);
-      }
-      return { navigated: route };
+    list_events({ limit = 20 }) {
+      return eventLog.slice(-limit);
     },
 
-    mount_app({ appName, container }) {
-      if (!appName) return { error: 'appName is required' };
-      try {
-        if (wu.mount) {
-          wu.mount(appName, container);
-          return { mounted: appName, container };
-        }
-        return { error: 'wu.mount not available' };
-      } catch (err) {
-        return { error: err.message };
-      }
+    list_actions() {
+      if (!wu.ai) return { actions: [], note: 'wu.ai not initialized' };
+      const tools = wu.ai.tools();
+      return { actions: tools, count: tools.length };
     },
 
-    unmount_app({ appName }) {
-      if (!appName) return { error: 'appName is required' };
+    snapshot({ appName }) {
       try {
-        if (wu.unmount) {
-          wu.unmount(appName);
-          return { unmounted: appName };
-        }
-        return { error: 'wu.unmount not available' };
+        const target = appName
+          ? document.querySelector(`[data-wu-app="${appName}"]`) || document.querySelector(`#wu-app-${appName}`)
+          : document.body;
+
+        if (!target) return { error: `App "${appName}" not found in DOM` };
+
+        return {
+          app: appName || '(page)',
+          snapshot: buildA11yTree(target, 0, 5),
+          timestamp: Date.now(),
+        };
       } catch (err) {
         return { error: err.message };
       }
     },
 
+    console({ level = 'all', limit = 50 }) {
+      return getFilteredConsole(level, limit);
+    },
+
+    async screenshot({ selector, quality = 0.8 }) {
+      const result = await captureScreenshot(selector, quality);
+      if (!result.error) result.timestamp = Date.now();
+      return result;
+    },
+
+    network({ method, status, limit = 50 }) {
+      return getFilteredNetwork(method, status, limit);
+    },
+
+    // ── Permission-gated operations ──
+
     get_state({ path }) {
       if (!wu.store) return { error: 'wu.store not available' };
+      if (!_checkPermission('readStore')) {
+        return { error: 'Permission denied: readStore is disabled' };
+      }
       const value = wu.store.get(path || '');
       return { path: path || '(root)', value };
     },
@@ -121,293 +171,162 @@ export function createMcpBridge(wu) {
     set_state({ path, value }) {
       if (!wu.store) return { error: 'wu.store not available' };
       if (!path) return { error: 'path is required' };
+      if (!_checkPermission('writeStore')) {
+        _audit('set_state', { path }, { error: 'Permission denied' });
+        return { error: 'Permission denied: writeStore is disabled' };
+      }
       wu.store.set(path, value);
+      _audit('set_state', { path, value }, { success: true });
       return { path, value, updated: true };
     },
 
     emit_event({ event, data }) {
       if (!wu.eventBus) return { error: 'wu.eventBus not available' };
       if (!event) return { error: 'event name is required' };
-      wu.eventBus.emit(event, data);
+      if (!_checkPermission('emitEvents')) {
+        _audit('emit_event', { event }, { error: 'Permission denied' });
+        return { error: 'Permission denied: emitEvents is disabled' };
+      }
+      wu.eventBus.emit(event, data, { appName: 'wu-mcp-bridge' });
+      _audit('emit_event', { event, data }, { success: true });
       return { emitted: event, data };
     },
 
-    list_events({ limit = 20 }) {
-      return eventLog.slice(-limit);
-    },
-
-    list_actions() {
-      if (!wu.ai?._actions) return { actions: [], note: 'wu.ai not initialized or no actions registered' };
-      const actions = Object.entries(wu.ai._actions).map(([name, def]) => ({
-        name,
-        description: def.description || '',
-        parameters: def.parameters ? Object.keys(def.parameters) : [],
-      }));
-      return { actions, count: actions.length };
+    navigate({ route }) {
+      if (!route) return { error: 'Route is required' };
+      if (!_checkPermission('emitEvents')) {
+        _audit('navigate', { route }, { error: 'Permission denied: emitEvents' });
+        return { error: 'Permission denied: emitEvents is disabled' };
+      }
+      if (wu.eventBus) {
+        wu.eventBus.emit('shell:navigate', { route }, { appName: 'wu-mcp-bridge' });
+      }
+      if (wu.store && _checkPermission('writeStore')) {
+        wu.store.set('currentPath', route);
+      }
+      _audit('navigate', { route }, { success: true });
+      return { navigated: route };
     },
 
-    async execute_action({ action, params }) {
-      if (!wu.ai) return { error: 'wu.ai not available' };
-      if (!action) return { error: 'action name is required' };
-
+    mount_app({ appName, container }) {
+      if (!appName) return { error: 'appName is required' };
+      if (!_checkPermission('modifyDOM')) {
+        _audit('mount_app', { appName }, { error: 'Permission denied' });
+        return { error: 'Permission denied: modifyDOM is disabled' };
+      }
       try {
-        // Try to execute via wu.ai action system
-        if (wu.ai._actions && wu.ai._actions[action]) {
-          const handler = wu.ai._actions[action].handler;
-          const result = await handler(params || {}, {
-            emit: (e, d) => wu.eventBus?.emit(e, d),
-            setState: (p, v) => wu.store?.set(p, v),
-            getState: (p) => wu.store?.get(p),
-          });
-          return { action, result };
+        if (wu.mount) {
+          wu.mount(appName, container);
+          _audit('mount_app', { appName, container }, { success: true });
+          return { mounted: appName, container };
         }
-        return { error: `Action "${action}" not found` };
+        return { error: 'wu.mount not available' };
       } catch (err) {
         return { error: err.message };
       }
     },
 
-    snapshot({ appName }) {
-      try {
-        const target = appName
-          ? document.querySelector(`[data-wu-app="${appName}"]`) || document.querySelector(`#wu-app-${appName}`)
-          : document.body;
-
-        if (!target) return { error: `App "${appName}" not found in DOM` };
-
-        const tree = _buildA11yTree(target, 0, 5);
-        return {
-          app: appName || '(page)',
-          snapshot: tree,
-          timestamp: Date.now(),
-        };
-      } catch (err) {
-        return { error: err.message };
+    unmount_app({ appName }) {
+      if (!appName) return { error: 'appName is required' };
+      if (!_checkPermission('modifyDOM')) {
+        _audit('unmount_app', { appName }, { error: 'Permission denied' });
+        return { error: 'Permission denied: modifyDOM is disabled' };
       }
-    },
-
-    console({ level = 'all', limit = 50 }) {
-      const filtered = level === 'all'
-        ? consoleLog
-        : consoleLog.filter((m) => m.level === level);
-      return filtered.slice(-limit);
-    },
-
-    async screenshot({ selector, quality = 0.8 }) {
       try {
-        const target = selector
-          ? document.querySelector(selector)
-          : document.documentElement;
-
-        if (!target) return { error: `Element not found: ${selector}` };
-
-        const rect = target.getBoundingClientRect();
-        const w = Math.ceil(Math.min(rect.width || window.innerWidth, 1920));
-        const h = Math.ceil(Math.min(rect.height || window.innerHeight, 1080));
-
-        // Clone target and inline all computed styles for accurate rendering
-        const clone = target.cloneNode(true);
-        _inlineComputedStyles(target, clone);
-
-        // Serialize to XHTML (required for SVG foreignObject)
-        const serializer = new XMLSerializer();
-        const xhtml = serializer.serializeToString(clone);
-
-        // Build SVG with foreignObject containing the styled DOM
-        const svgStr = [
-          `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">`,
-          '<foreignObject width="100%" height="100%">',
-          `<div xmlns="http://www.w3.org/1999/xhtml" style="width:${w}px;height:${h}px;overflow:hidden;">`,
-          xhtml,
-          '</div>',
-          '</foreignObject>',
-          '</svg>',
-        ].join('');
-
-        const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(svgBlob);
-
-        // Render SVG to Canvas
-        const dataUrl = await new Promise((resolve) => {
-          const img = new Image();
-          img.onload = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = w;
-            canvas.height = h;
-            const ctx = canvas.getContext('2d');
-            ctx.drawImage(img, 0, 0);
-            URL.revokeObjectURL(url);
-            resolve(canvas.toDataURL('image/png', quality));
-          };
-          img.onerror = () => {
-            URL.revokeObjectURL(url);
-            resolve(null);
-          };
-          img.src = url;
-        });
-
-        if (!dataUrl) return { error: 'Canvas rendering failed' };
-
-        // Return base64 without the data:image/png;base64, prefix
-        const base64 = dataUrl.split(',')[1];
-        return {
-          selector: selector || '(page)',
-          width: w,
-          height: h,
-          format: 'png',
-          base64,
-          sizeKB: Math.round((base64.length * 3) / 4 / 1024),
-          timestamp: Date.now(),
-        };
+        if (wu.unmount) {
+          wu.unmount(appName);
+          _audit('unmount_app', { appName }, { success: true });
+          return { unmounted: appName };
+        }
+        return { error: 'wu.unmount not available' };
       } catch (err) {
         return { error: err.message };
       }
     },
 
     click({ selector, text }) {
-      try {
-        let el = null;
-
-        if (selector) {
-          el = document.querySelector(selector);
-        }
-
-        // Fallback: find by visible text content
-        if (!el && text) {
-          const candidates = document.querySelectorAll('button, a, [role="button"], input[type="submit"], [data-click], label');
-          for (const candidate of candidates) {
-            if (candidate.textContent?.trim().toLowerCase().includes(text.toLowerCase())) {
-              el = candidate;
-              break;
-            }
-          }
-        }
-
-        if (!el) return { error: `Element not found: ${selector || `text="${text}"`}` };
-
-        // Scroll into view and click
-        el.scrollIntoView({ behavior: 'instant', block: 'center' });
-        el.click();
-
-        const tag = el.tagName?.toLowerCase();
-        const id = el.id ? `#${el.id}` : '';
-        const cls = el.className && typeof el.className === 'string' ? `.${el.className.split(' ')[0]}` : '';
-        return {
-          clicked: `${tag}${id}${cls}`,
-          text: el.textContent?.trim().slice(0, 80) || '',
-          rect: el.getBoundingClientRect().toJSON(),
-        };
-      } catch (err) {
-        return { error: err.message };
+      if (!_checkPermission('modifyDOM')) {
+        return { error: 'Permission denied: modifyDOM is disabled' };
       }
+      const result = clickElement(selector, text);
+      _audit('click', { selector, text }, result);
+      return result;
     },
 
     type({ selector, text, clear = false, submit = false }) {
-      try {
-        if (!selector) return { error: 'selector is required' };
-        if (text === undefined) return { error: 'text is required' };
-
-        const el = document.querySelector(selector);
-        if (!el) return { error: `Element not found: ${selector}` };
-
-        // Focus the element
-        el.focus();
-
-        // Clear existing value if requested
-        if (clear) {
-          el.value = '';
-          el.dispatchEvent(new Event('input', { bubbles: true }));
-        }
-
-        // Set value and fire events (works with React, Vue, etc.)
-        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-          window.HTMLInputElement.prototype, 'value'
-        )?.set || Object.getOwnPropertyDescriptor(
-          window.HTMLTextAreaElement.prototype, 'value'
-        )?.set;
-
-        if (nativeInputValueSetter) {
-          nativeInputValueSetter.call(el, clear ? text : el.value + text);
-        } else {
-          el.value = clear ? text : el.value + text;
-        }
-
-        // Dispatch events that frameworks listen to
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-
-        // Submit form if requested
-        if (submit) {
-          const form = el.closest('form');
-          if (form) {
-            form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-          } else {
-            el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', bubbles: true }));
-          }
-        }
-
-        return {
-          selector,
-          typed: text,
-          currentValue: el.value?.slice(0, 200),
-          submitted: submit,
-        };
-      } catch (err) {
-        return { error: err.message };
+      if (!_checkPermission('modifyDOM')) {
+        return { error: 'Permission denied: modifyDOM is disabled' };
       }
+      const result = typeIntoElement(selector, text, { clear, submit });
+      _audit('type', { selector, textLength: text?.length }, result);
+      return result;
     },
 
-    network({ method, status, limit = 50 }) {
-      let filtered = networkLog;
-      if (method) filtered = filtered.filter((r) => r.method.toUpperCase() === method.toUpperCase());
-      if (status) {
-        if (status === 'error') {
-          filtered = filtered.filter((r) => r.status === 0 || r.status >= 400);
-        } else {
-          filtered = filtered.filter((r) => String(r.status).startsWith(String(status)));
-        }
-      }
-      return {
-        requests: filtered.slice(-limit),
-        total: networkLog.length,
-        filtered: filtered.length,
-      };
-    },
+    async execute_action({ action, params }) {
+      if (!wu.ai) return { error: 'wu.ai not available' };
+      if (!action) return { error: 'action name is required' };
 
-    eval({ expression }) {
       try {
-        // eslint-disable-next-line no-eval
-        const result = eval(expression);
-        return {
-          expression,
-          result: typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result),
-          type: typeof result,
-        };
+        // Execute through public API (respects permissions, validation, audit)
+        const result = await wu.ai.execute(action, params || {});
+        return { action, ...result };
       } catch (err) {
-        return { error: err.message, expression };
+        return { error: err.message };
       }
     },
   };
 
   // ── WebSocket connection ──
 
-  function connect(url = 'ws://localhost:19100') {
+  function connect(url = 'ws://localhost:19100', options = {}) {
     if (ws && ws.readyState <= 1) {
       console.warn('[wu-mcp-bridge] Already connected or connecting');
       return;
     }
 
+    authToken = options.token || null;
+    authenticated = !authToken; // No token = auto-authenticated (dev mode)
+
     try {
       ws = new WebSocket(url);
 
       ws.onopen = () => {
         console.log('[wu-mcp-bridge] Connected to wu-mcp-server');
         reconnectAttempts = 0;
+
+        // Send auth handshake if token provided
+        if (authToken) {
+          ws.send(JSON.stringify({
+            type: 'auth',
+            token: authToken,
+          }));
+        }
       };
 
       ws.onmessage = async (event) => {
         try {
           const msg = JSON.parse(event.data);
+
+          // Handle auth response
+          if (msg.type === 'auth_result') {
+            authenticated = msg.success === true;
+            if (!authenticated) {
+              console.error('[wu-mcp-bridge] Authentication failed:', msg.reason || 'Invalid token');
+              disconnect();
+            } else {
+              console.log('[wu-mcp-bridge] Authenticated successfully');
+            }
+            return;
+          }
+
+          // Reject commands if not authenticated
+          if (!authenticated) {
+            if (msg.id) {
+              _respond(msg.id, null, 'Not authenticated. Send auth token first.');
+            }
+            return;
+          }
+
           const { id, command, params } = msg;
 
           if (!id || !command) {
@@ -435,7 +354,8 @@ export function createMcpBridge(wu) {
       ws.onclose = () => {
         console.log('[wu-mcp-bridge] Disconnected');
         ws = null;
-        _scheduleReconnect(url);
+        authenticated = false;
+        _scheduleReconnect(url, options);
       };
 
       ws.onerror = () => {
@@ -443,7 +363,7 @@ export function createMcpBridge(wu) {
       };
     } catch (err) {
       console.error('[wu-mcp-bridge] Connection failed:', err.message);
-      _scheduleReconnect(url);
+      _scheduleReconnect(url, options);
     }
   }
 
@@ -457,10 +377,11 @@ export function createMcpBridge(wu) {
       ws.close();
       ws = null;
     }
+    authenticated = false;
   }
 
   function isConnected() {
-    return ws !== null && ws.readyState === 1;
+    return ws !== null && ws.readyState === 1 && authenticated;
   }
 
   // ── Private helpers ──
@@ -471,15 +392,14 @@ export function createMcpBridge(wu) {
     ws.send(JSON.stringify(msg));
   }
 
-  function _scheduleReconnect(url) {
+  function _scheduleReconnect(url, options) {
     if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) return;
     reconnectAttempts++;
     const delay = RECONNECT_DELAY * Math.min(reconnectAttempts, 5);
-    reconnectTimer = setTimeout(() => connect(url), delay);
+    reconnectTimer = setTimeout(() => connect(url, options), delay);
   }
 
   function _getAppList() {
-    // Try to get app info from wu internals
     const apps = [];
 
     if (wu._apps) {
@@ -507,141 +427,5 @@ export function createMcpBridge(wu) {
     return apps;
   }
 
-  function _buildA11yTree(el, depth, maxDepth) {
-    if (depth > maxDepth || !el) return '';
-
-    const indent = '  '.repeat(depth);
-    const tag = el.tagName?.toLowerCase() || '';
-    const role = el.getAttribute?.('role') || '';
-    const ariaLabel = el.getAttribute?.('aria-label') || '';
-    const text = el.childNodes?.length === 1 && el.childNodes[0].nodeType === 3
-      ? el.textContent?.trim().slice(0, 80) : '';
-
-    let line = `${indent}<${tag}`;
-    if (el.id) line += ` id="${el.id}"`;
-    if (role) line += ` role="${role}"`;
-    if (ariaLabel) line += ` aria-label="${ariaLabel}"`;
-    if (el.className && typeof el.className === 'string') {
-      const cls = el.className.trim().slice(0, 60);
-      if (cls) line += ` class="${cls}"`;
-    }
-    line += '>';
-    if (text) line += ` "${text}"`;
-
-    let result = line + '\n';
-
-    // Traverse into shadow DOM if present
-    const root = el.shadowRoot || el;
-    const children = root.children || [];
-
-    for (let i = 0; i < children.length && i < 50; i++) {
-      result += _buildA11yTree(children[i], depth + 1, maxDepth);
-    }
-
-    return result;
-  }
-
-  function _interceptConsole() {
-    const levels = ['log', 'warn', 'error'];
-    for (const level of levels) {
-      const original = console[level];
-      console[level] = (...args) => {
-        consoleLog.push({
-          level,
-          message: args.map((a) => (typeof a === 'object' ? JSON.stringify(a) : String(a))).join(' '),
-          timestamp: Date.now(),
-        });
-        if (consoleLog.length > MAX_CONSOLE_LOG) consoleLog.shift();
-        original.apply(console, args);
-      };
-    }
-  }
-
-  function _interceptNetwork() {
-    // ── Intercept fetch() ──
-    const originalFetch = window.fetch;
-    window.fetch = async function (...args) {
-      const start = Date.now();
-      const req = args[0];
-      const url = typeof req === 'string' ? req : req?.url || '';
-      const method = args[1]?.method || (req?.method) || 'GET';
-
-      try {
-        const response = await originalFetch.apply(window, args);
-        const size = parseInt(response.headers?.get('content-length') || '0', 10);
-        networkLog.push({
-          type: 'fetch', method: method.toUpperCase(), url,
-          status: response.status, statusText: response.statusText,
-          duration: Date.now() - start, size, timestamp: start,
-        });
-        if (networkLog.length > MAX_NETWORK_LOG) networkLog.shift();
-        return response;
-      } catch (err) {
-        networkLog.push({
-          type: 'fetch', method: method.toUpperCase(), url,
-          status: 0, error: err.message,
-          duration: Date.now() - start, timestamp: start,
-        });
-        if (networkLog.length > MAX_NETWORK_LOG) networkLog.shift();
-        throw err;
-      }
-    };
-
-    // ── Intercept XMLHttpRequest ──
-    const origOpen = XMLHttpRequest.prototype.open;
-    const origSend = XMLHttpRequest.prototype.send;
-
-    XMLHttpRequest.prototype.open = function (method, url, ...rest) {
-      this._wuMcp = { method: (method || 'GET').toUpperCase(), url: String(url), start: null };
-      return origOpen.call(this, method, url, ...rest);
-    };
-
-    XMLHttpRequest.prototype.send = function (...args) {
-      if (this._wuMcp) {
-        this._wuMcp.start = Date.now();
-        this.addEventListener('loadend', () => {
-          networkLog.push({
-            type: 'xhr',
-            method: this._wuMcp.method,
-            url: this._wuMcp.url,
-            status: this.status,
-            statusText: this.statusText,
-            duration: Date.now() - this._wuMcp.start,
-            size: parseInt(this.getResponseHeader('content-length') || '0', 10),
-            timestamp: this._wuMcp.start,
-          });
-          if (networkLog.length > MAX_NETWORK_LOG) networkLog.shift();
-        });
-      }
-      return origSend.apply(this, args);
-    };
-  }
-
-  function _inlineComputedStyles(source, clone) {
-    // Copy computed styles from source to clone for accurate Canvas rendering
-    const sourceStyle = window.getComputedStyle(source);
-    const important = ['color', 'background', 'background-color', 'font-family',
-      'font-size', 'font-weight', 'border', 'border-radius', 'padding', 'margin',
-      'display', 'flex-direction', 'align-items', 'justify-content', 'gap',
-      'width', 'height', 'max-width', 'max-height', 'overflow', 'opacity',
-      'box-shadow', 'text-align', 'line-height', 'position', 'top', 'left',
-      'right', 'bottom', 'z-index', 'transform', 'visibility'];
-
-    for (const prop of important) {
-      try {
-        const val = sourceStyle.getPropertyValue(prop);
-        if (val) clone.style?.setProperty(prop, val);
-      } catch (_) { /* skip */ }
-    }
-
-    // Recurse into children (limit depth for performance)
-    const sourceChildren = source.children || [];
-    const cloneChildren = clone.children || [];
-    const max = Math.min(sourceChildren.length, cloneChildren.length, 200);
-    for (let i = 0; i < max; i++) {
-      _inlineComputedStyles(sourceChildren[i], cloneChildren[i]);
-    }
-  }
-
   return { connect, disconnect, isConnected };
 }