wu-framework 1.1.6 → 1.1.8

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

@@ -0,0 +1,647 @@
+/**
+ * WU-MCP Bridge (Browser Side)
+ *
+ * Connects to the wu-mcp-server via WebSocket and executes
+ * commands using wu.* APIs. This is the "eyes and hands" of
+ * the MCP server inside the browser.
+ *
+ * @example
+ * // Auto-connect (called by wu.mcp.connect())
+ * import { createMcpBridge } from './wu-mcp-bridge.js';
+ *
+ * const bridge = createMcpBridge(wuInstance);
+ * bridge.connect('ws://localhost:3100');
+ */
+
+/**
+ * Create the MCP bridge for a Wu instance.
+ *
+ * @param {object} wu - The Wu Framework instance (window.wu)
+ * @returns {object} Bridge API: { connect, disconnect, isConnected }
+ */
+export function createMcpBridge(wu) {
+  let ws = null;
+  let reconnectTimer = null;
+  let reconnectAttempts = 0;
+  const MAX_RECONNECT_ATTEMPTS = 10;
+  const RECONNECT_DELAY = 2000;
+
+  // Event log for wu_list_events
+  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) => {
+      eventLog.push({
+        name: event.name,
+        data: event.data,
+        timestamp: event.timestamp || Date.now(),
+        source: event.source || 'unknown',
+      });
+      if (eventLog.length > MAX_EVENT_LOG) eventLog.shift();
+    });
+  }
+
+  // Capture console messages
+  _interceptConsole();
+
+  // Capture network requests (fetch + XMLHttpRequest)
+  _interceptNetwork();
+
+  // ── Command handlers ──
+
+  const handlers = {
+    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,
+        eventLogSize: eventLog.length,
+      };
+    },
+
+    list_apps() {
+      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 };
+    },
+
+    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 };
+      }
+    },
+
+    unmount_app({ appName }) {
+      if (!appName) return { error: 'appName is required' };
+      try {
+        if (wu.unmount) {
+          wu.unmount(appName);
+          return { unmounted: appName };
+        }
+        return { error: 'wu.unmount not available' };
+      } catch (err) {
+        return { error: err.message };
+      }
+    },
+
+    get_state({ path }) {
+      if (!wu.store) return { error: 'wu.store not available' };
+      const value = wu.store.get(path || '');
+      return { path: path || '(root)', value };
+    },
+
+    set_state({ path, value }) {
+      if (!wu.store) return { error: 'wu.store not available' };
+      if (!path) return { error: 'path is required' };
+      wu.store.set(path, value);
+      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);
+      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 };
+    },
+
+    async execute_action({ action, params }) {
+      if (!wu.ai) return { error: 'wu.ai not available' };
+      if (!action) return { error: 'action name is required' };
+
+      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 };
+        }
+        return { error: `Action "${action}" not found` };
+      } 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 };
+      }
+    },
+
+    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(),
+        };
+      } 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 };
+      }
+    },
+
+    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 };
+      }
+    },
+
+    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,
+      };
+    },
+
+    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,
+        };
+      } catch (err) {
+        return { error: err.message, expression };
+      }
+    },
+  };
+
+  // ── WebSocket connection ──
+
+  function connect(url = 'ws://localhost:19100') {
+    if (ws && ws.readyState <= 1) {
+      console.warn('[wu-mcp-bridge] Already connected or connecting');
+      return;
+    }
+
+    try {
+      ws = new WebSocket(url);
+
+      ws.onopen = () => {
+        console.log('[wu-mcp-bridge] Connected to wu-mcp-server');
+        reconnectAttempts = 0;
+      };
+
+      ws.onmessage = async (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          const { id, command, params } = msg;
+
+          if (!id || !command) {
+            console.warn('[wu-mcp-bridge] Invalid message:', msg);
+            return;
+          }
+
+          const handler = handlers[command];
+          if (!handler) {
+            _respond(id, null, `Unknown command: ${command}`);
+            return;
+          }
+
+          try {
+            const result = await handler(params || {});
+            _respond(id, result);
+          } catch (err) {
+            _respond(id, null, err.message);
+          }
+        } catch (err) {
+          console.error('[wu-mcp-bridge] Failed to handle message:', err);
+        }
+      };
+
+      ws.onclose = () => {
+        console.log('[wu-mcp-bridge] Disconnected');
+        ws = null;
+        _scheduleReconnect(url);
+      };
+
+      ws.onerror = () => {
+        // onclose will fire after this
+      };
+    } catch (err) {
+      console.error('[wu-mcp-bridge] Connection failed:', err.message);
+      _scheduleReconnect(url);
+    }
+  }
+
+  function disconnect() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    reconnectAttempts = MAX_RECONNECT_ATTEMPTS; // prevent reconnect
+    if (ws) {
+      ws.close();
+      ws = null;
+    }
+  }
+
+  function isConnected() {
+    return ws !== null && ws.readyState === 1;
+  }
+
+  // ── Private helpers ──
+
+  function _respond(id, result, error) {
+    if (!ws || ws.readyState !== 1) return;
+    const msg = error ? { id, error } : { id, result };
+    ws.send(JSON.stringify(msg));
+  }
+
+  function _scheduleReconnect(url) {
+    if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) return;
+    reconnectAttempts++;
+    const delay = RECONNECT_DELAY * Math.min(reconnectAttempts, 5);
+    reconnectTimer = setTimeout(() => connect(url), delay);
+  }
+
+  function _getAppList() {
+    // Try to get app info from wu internals
+    const apps = [];
+
+    if (wu._apps) {
+      for (const [name, app] of Object.entries(wu._apps)) {
+        apps.push({
+          name,
+          mounted: app.mounted || app.isMounted || false,
+          url: app.url || app.info?.url || '',
+          status: app.status || app.info?.status || 'unknown',
+        });
+      }
+    }
+
+    // Fallback: scan DOM for wu-app elements
+    if (apps.length === 0) {
+      document.querySelectorAll('[data-wu-app]').forEach((el) => {
+        apps.push({
+          name: el.getAttribute('data-wu-app'),
+          mounted: true,
+          container: `#${el.id || '(no-id)'}`,
+        });
+      });
+    }
+
+    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 };
+}