wu-framework 1.1.8 → 1.1.9

package/src/ai/wu-ai-browser.js

@@ -24,12 +24,17 @@
  * // → includes browser_screenshot, browser_click, etc.
  */
 
-// ── Shared capture buffers ──
-const networkLog = [];
-const MAX_NETWORK_LOG = 300;
-const consoleLog = [];
-const MAX_CONSOLE_LOG = 500;
-let interceptorsInstalled = false;
+import {
+  ensureInterceptors,
+  networkLog,
+  consoleLog,
+  captureScreenshot,
+  buildA11yTree,
+  clickElement,
+  typeIntoElement,
+  getFilteredNetwork,
+  getFilteredConsole,
+} from './wu-ai-browser-primitives.js';
 
 /**
  * Register all browser automation actions into a WuAI instance.
@@ -38,12 +43,7 @@ let interceptorsInstalled = false;
  * @param {object} wu - The Wu Framework instance (window.wu)
  */
 export function registerBrowserActions(ai, wu) {
-  // Install interceptors only once
-  if (!interceptorsInstalled) {
-    _installNetworkInterceptor();
-    _installConsoleInterceptor();
-    interceptorsInstalled = true;
-  }
+  ensureInterceptors();
 
   // ════════════════════════════════════════════
   // SCREENSHOT — Canvas API (SVG foreignObject)
@@ -58,66 +58,7 @@ export function registerBrowserActions(ai, wu) {
         required: false,
       },
     },
-    handler: async (params) => {
-      const target = params.selector
-        ? document.querySelector(params.selector)
-        : document.documentElement;
-
-      if (!target) return { error: `Element not found: ${params.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 and inline styles for accurate rendering
-      const clone = target.cloneNode(true);
-      _inlineComputedStyles(target, clone);
-
-      const serializer = new XMLSerializer();
-      const xhtml = serializer.serializeToString(clone);
-
-      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);
-
-      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', 0.8));
-        };
-        img.onerror = () => {
-          URL.revokeObjectURL(url);
-          resolve(null);
-        };
-        img.src = url;
-      });
-
-      if (!dataUrl) return { error: 'Canvas rendering failed' };
-
-      const base64 = dataUrl.split(',')[1];
-      return {
-        width: w,
-        height: h,
-        format: 'png',
-        base64,
-        sizeKB: Math.round((base64.length * 3) / 4 / 1024),
-      };
-    },
+    handler: async (params) => captureScreenshot(params.selector),
     permissions: [],
   });
 
@@ -140,38 +81,11 @@ export function registerBrowserActions(ai, wu) {
       },
     },
     handler: async (params, api) => {
-      let el = null;
-
-      if (params.selector) {
-        el = document.querySelector(params.selector);
-      }
-
-      if (!el && params.text) {
-        const candidates = document.querySelectorAll(
-          'button, a, [role="button"], input[type="submit"], input[type="button"], [data-click], label, [onclick]'
-        );
-        const searchText = params.text.toLowerCase();
-        for (const candidate of candidates) {
-          if (candidate.textContent?.trim().toLowerCase().includes(searchText)) {
-            el = candidate;
-            break;
-          }
-        }
+      const result = clickElement(params.selector, params.text);
+      if (!result.error) {
+        api.emit?.('browser:clicked', { selector: params.selector, text: params.text });
       }
-
-      if (!el) return { error: `Element not found: ${params.selector || `text="${params.text}"`}` };
-
-      el.scrollIntoView({ behavior: 'instant', block: 'center' });
-      el.click();
-
-      const tag = el.tagName?.toLowerCase();
-      const id = el.id ? `#${el.id}` : '';
-      api.emit?.('browser:clicked', { selector: params.selector, text: params.text });
-
-      return {
-        clicked: `${tag}${id}`,
-        text: el.textContent?.trim().slice(0, 100) || '',
-      };
+      return result;
     },
     permissions: ['emitEvents'],
   });
@@ -205,50 +119,14 @@ export function registerBrowserActions(ai, wu) {
       },
     },
     handler: async (params, api) => {
-      const el = document.querySelector(params.selector);
-      if (!el) return { error: `Element not found: ${params.selector}` };
-
-      el.focus();
-
-      if (params.clear) {
-        el.value = '';
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-      }
-
-      // Use native setter to trigger framework reactivity (React, Vue, etc.)
-      const nativeSetter = Object.getOwnPropertyDescriptor(
-        window.HTMLInputElement.prototype, 'value'
-      )?.set || Object.getOwnPropertyDescriptor(
-        window.HTMLTextAreaElement.prototype, 'value'
-      )?.set;
-
-      const newValue = params.clear ? params.text : (el.value || '') + params.text;
-      if (nativeSetter) {
-        nativeSetter.call(el, newValue);
-      } else {
-        el.value = newValue;
-      }
-
-      el.dispatchEvent(new Event('input', { bubbles: true }));
-      el.dispatchEvent(new Event('change', { bubbles: true }));
-
-      if (params.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 }));
-        }
+      const result = typeIntoElement(params.selector, params.text, {
+        clear: params.clear,
+        submit: params.submit,
+      });
+      if (!result.error) {
+        api.emit?.('browser:typed', { selector: params.selector, length: params.text.length });
       }
-
-      api.emit?.('browser:typed', { selector: params.selector, length: params.text.length });
-
-      return {
-        selector: params.selector,
-        typed: params.text,
-        currentValue: el.value?.slice(0, 200),
-        submitted: !!params.submit,
-      };
+      return result;
     },
     permissions: ['emitEvents'],
   });
@@ -378,7 +256,7 @@ export function registerBrowserActions(ai, wu) {
 
       if (!target) return { error: `Element not found: ${params.selector}` };
 
-      const tree = _buildA11yTree(target, 0, params.depth || 5);
+      const tree = buildA11yTree(target, 0, params.depth || 5);
       return { snapshot: tree };
     },
     permissions: [],
@@ -428,25 +306,7 @@ export function registerBrowserActions(ai, wu) {
         required: false,
       },
     },
-    handler: async (params) => {
-      let filtered = networkLog;
-      if (params.method) {
-        filtered = filtered.filter((r) => r.method === params.method.toUpperCase());
-      }
-      if (params.status) {
-        if (params.status === 'error') {
-          filtered = filtered.filter((r) => r.status === 0 || r.status >= 400);
-        } else {
-          filtered = filtered.filter((r) => String(r.status).startsWith(params.status));
-        }
-      }
-      const limit = params.limit || 30;
-      return {
-        requests: filtered.slice(-limit),
-        total: networkLog.length,
-        showing: Math.min(filtered.length, limit),
-      };
-    },
+    handler: async (params) => getFilteredNetwork(params.method, params.status, params.limit),
     permissions: [],
   });
 
@@ -468,17 +328,7 @@ export function registerBrowserActions(ai, wu) {
         required: false,
       },
     },
-    handler: async (params) => {
-      const filtered = params.level
-        ? consoleLog.filter((m) => m.level === params.level)
-        : consoleLog;
-      const limit = params.limit || 30;
-      return {
-        messages: filtered.slice(-limit),
-        total: consoleLog.length,
-        showing: Math.min(filtered.length, limit),
-      };
-    },
+    handler: async (params) => getFilteredConsole(params.level, params.limit),
     permissions: [],
   });
 
@@ -526,138 +376,5 @@ export function registerBrowserActions(ai, wu) {
   });
 }
 
-// ── Private: Inline computed styles for Canvas rendering ──
-
-function _inlineComputedStyles(source, clone) {
-  const props = ['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'];
-
-  try {
-    const style = window.getComputedStyle(source);
-    for (const prop of props) {
-      const val = style.getPropertyValue(prop);
-      if (val) clone.style?.setProperty(prop, val);
-    }
-  } catch (_) { /* skip */ }
-
-  const srcKids = source.children || [];
-  const cloneKids = clone.children || [];
-  const max = Math.min(srcKids.length, cloneKids.length, 200);
-  for (let i = 0; i < max; i++) {
-    _inlineComputedStyles(srcKids[i], cloneKids[i]);
-  }
-}
-
-// ── Private: Build accessibility tree ──
-
-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';
-  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;
-}
-
-// ── Private: Network interceptor ──
-
-function _installNetworkInterceptor() {
-  // 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').toUpperCase();
-
-    try {
-      const response = await originalFetch.apply(window, args);
-      const size = parseInt(response.headers?.get('content-length') || '0', 10);
-      networkLog.push({
-        type: 'fetch', method, 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, 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._wuAi = { method: (method || 'GET').toUpperCase(), url: String(url) };
-    return origOpen.call(this, method, url, ...rest);
-  };
-
-  XMLHttpRequest.prototype.send = function (...args) {
-    if (this._wuAi) {
-      this._wuAi.start = Date.now();
-      this.addEventListener('loadend', () => {
-        networkLog.push({
-          type: 'xhr', method: this._wuAi.method, url: this._wuAi.url,
-          status: this.status, statusText: this.statusText,
-          duration: Date.now() - this._wuAi.start,
-          size: parseInt(this.getResponseHeader('content-length') || '0', 10),
-          timestamp: this._wuAi.start,
-        });
-        if (networkLog.length > MAX_NETWORK_LOG) networkLog.shift();
-      });
-    }
-    return origSend.apply(this, args);
-  };
-}
-
-// ── Private: Console interceptor ──
-
-function _installConsoleInterceptor() {
-  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);
-    };
-  }
-}
+// All private helpers (buildA11yTree, inlineComputedStyles, interceptors)
+// are now in wu-ai-browser-primitives.js — single source of truth.

package/src/ai/wu-ai-conversation.js

@@ -26,6 +26,8 @@ const DEFAULT_CONFIG = {
   systemPrompt: null,        // string or function returning string
   temperature: undefined,
   maxTokens: undefined,
+  namespaceTTL: 30 * 60_000, // 30 min — auto-expire inactive namespaces (0 = disabled)
+  gcInterval: 5 * 60_000,    // 5 min — how often to sweep for expired namespaces
 };
 
 // ─── Conversation Namespace ──────────────────────────────────────
@@ -90,6 +92,7 @@ export class WuAIConversation {
     this._config = { ...DEFAULT_CONFIG };
     this._namespaces = new Map();
     this._activeRequests = new Map(); // namespace → promise
+    this._lastGcRun = Date.now();
   }
 
   /**
@@ -110,6 +113,7 @@ export class WuAIConversation {
    * @param {object} [options.templateVars] - Variables for template interpolation
    * @param {number} [options.temperature] - Override temperature
    * @param {number} [options.maxTokens] - Override max tokens
+   * @param {string|object} [options.responseFormat] - Request JSON output ('json' or { type: 'json_schema', schema, name? })
    * @param {AbortSignal} [options.signal] - External abort signal
    * @returns {Promise<{ content: string, tool_results?: Array, usage?: object, namespace: string }>}
    */
@@ -158,6 +162,8 @@ export class WuAIConversation {
           tools: tools.length > 0 ? tools : undefined,
           temperature: options.temperature ?? this._config.temperature,
           maxTokens: options.maxTokens ?? this._config.maxTokens,
+          responseFormat: options.responseFormat,
+          provider: options.provider,
           signal,
         });
 
@@ -282,102 +288,113 @@ export class WuAIConversation {
     this._permissions.rateLimiter.recordStart(ns.name);
 
     try {
-      const tools = this._actions.getToolSchemas();
-      let fullContent = '';
-
-      // Accumulator for streaming tool call deltas
-      const toolCallAccumulator = new Map(); // index → { id, name, args }
-
-      for await (const chunk of this._provider.stream(ns.getMessages(), {
-        tools: tools.length > 0 ? tools : undefined,
-        temperature: options.temperature ?? this._config.temperature,
-        maxTokens: options.maxTokens ?? this._config.maxTokens,
-        signal,
-      })) {
-        if (chunk.type === 'text') {
-          fullContent += chunk.content;
-          yield chunk;
-        } else if (chunk.type === 'tool_call_start') {
-          // Start accumulating a new tool call
-          toolCallAccumulator.set(toolCallAccumulator.size, {
-            id: chunk.id,
-            name: chunk.name,
-            args: '',
-          });
-        } else if (chunk.type === 'tool_call_delta') {
-          // Accumulate arguments delta
-          const idx = chunk.index ?? (toolCallAccumulator.size - 1);
-          const acc = toolCallAccumulator.get(idx);
-          if (acc) {
-            if (chunk.id) acc.id = chunk.id;
-            if (chunk.name) acc.name = chunk.name;
-            acc.args += chunk.argumentsDelta || '';
-          } else {
-            // New tool call via OpenAI format
-            toolCallAccumulator.set(idx, {
-              id: chunk.id || `tc_${idx}`,
-              name: chunk.name || '',
-              args: chunk.argumentsDelta || '',
-            });
-          }
-        } else if (chunk.type === 'done') {
-          // If we accumulated tool calls, execute them
-          if (toolCallAccumulator.size > 0) {
-            const toolCalls = [];
-            for (const [, acc] of toolCallAccumulator) {
-              let parsedArgs = {};
-              try { parsedArgs = JSON.parse(acc.args); } catch { /* empty args */ }
-              toolCalls.push({ id: acc.id, name: acc.name, arguments: parsedArgs });
-            }
-
-            // Add assistant message with tool calls
-            ns.addMessage({ role: 'assistant', content: fullContent, tool_calls: toolCalls });
+      // Tool call loop — mirrors send() behavior (up to maxToolRounds)
+      let rounds = 0;
+      const maxRounds = this._config.maxToolRounds;
 
-            // Execute each tool call
-            this._permissions.loopProtection.enter(traceId);
-            for (const tc of toolCalls) {
-              const result = await this._actions.execute(tc.name, tc.arguments, {
-                traceId, depth: 1, callId: tc.id,
-              });
+      while (rounds <= maxRounds) {
+        const tools = this._actions.getToolSchemas();
+        let fullContent = '';
+        const toolCallAccumulator = new Map(); // index → { id, name, args }
+        let streamEnded = false;
 
-              yield {
-                type: 'tool_result',
-                tool: tc.name,
-                result: result.success ? result.result : { error: result.reason },
-                success: result.success,
-              };
-
-              ns.addMessage({
-                role: 'tool',
-                content: JSON.stringify(result.success ? result.result : { error: result.reason }),
-                tool_call_id: tc.id,
+        for await (const chunk of this._provider.stream(ns.getMessages(), {
+          tools: tools.length > 0 ? tools : undefined,
+          temperature: options.temperature ?? this._config.temperature,
+          maxTokens: options.maxTokens ?? this._config.maxTokens,
+          responseFormat: options.responseFormat,
+          provider: options.provider,
+          signal,
+        })) {
+          if (chunk.type === 'text') {
+            fullContent += chunk.content;
+            yield chunk;
+          } else if (chunk.type === 'tool_call_start') {
+            toolCallAccumulator.set(toolCallAccumulator.size, {
+              id: chunk.id,
+              name: chunk.name,
+              args: '',
+            });
+          } else if (chunk.type === 'tool_call_delta') {
+            const idx = chunk.index ?? (toolCallAccumulator.size - 1);
+            const acc = toolCallAccumulator.get(idx);
+            if (acc) {
+              if (chunk.id) acc.id = chunk.id;
+              if (chunk.name) acc.name = chunk.name;
+              acc.args += chunk.argumentsDelta || '';
+            } else {
+              toolCallAccumulator.set(idx, {
+                id: chunk.id || `tc_${idx}`,
+                name: chunk.name || '',
+                args: chunk.argumentsDelta || '',
               });
             }
-            this._permissions.loopProtection.exit(traceId);
+          } else if (chunk.type === 'done') {
+            streamEnded = true;
+            break; // exit inner loop, handle tool calls below
+          } else if (chunk.type === 'usage') {
+            yield chunk;
+          } else if (chunk.type === 'error') {
+            yield chunk;
+          }
+        }
 
-            // After tool execution in streaming, yield done — caller can re-stream if needed
-            yield { type: 'tool_calls_done', count: toolCalls.length };
-          } else {
-            // No tool calls — add assistant message and finish
+        // No tool calls → final response, we're done
+        if (toolCallAccumulator.size === 0) {
+          if (fullContent) {
             ns.addMessage({ role: 'assistant', content: fullContent });
           }
-
           this._permissions.circuitBreaker.recordSuccess();
           yield { type: 'done' };
           return;
-        } else if (chunk.type === 'usage') {
-          yield chunk;
-        } else if (chunk.type === 'error') {
-          yield chunk;
         }
-      }
 
-      // Stream ended without explicit 'done' chunk
-      if (fullContent) {
-        ns.addMessage({ role: 'assistant', content: fullContent });
+        // Tool calls detected — execute them
+        rounds++;
+        if (rounds > maxRounds) {
+          const msg = `[wu-ai] Tool call loop limit (${maxRounds}) reached in streaming namespace '${ns.name}'`;
+          logger.wuWarn(msg);
+          yield { type: 'error', error: msg };
+          yield { type: 'done' };
+          return;
+        }
+
+        // Parse accumulated tool calls
+        const toolCalls = [];
+        for (const [, acc] of toolCallAccumulator) {
+          let parsedArgs = {};
+          try { parsedArgs = JSON.parse(acc.args); } catch { /* empty args */ }
+          toolCalls.push({ id: acc.id, name: acc.name, arguments: parsedArgs });
+        }
+
+        // Add assistant message with tool calls to history
+        ns.addMessage({ role: 'assistant', content: fullContent, tool_calls: toolCalls });
+
+        // Execute each tool call
+        this._permissions.loopProtection.enter(traceId);
+        for (const tc of toolCalls) {
+          const result = await this._actions.execute(tc.name, tc.arguments, {
+            traceId, depth: rounds, callId: tc.id,
+          });
+
+          yield {
+            type: 'tool_result',
+            tool: tc.name,
+            result: result.success ? result.result : { error: result.reason },
+            success: result.success,
+          };
+
+          ns.addMessage({
+            role: 'tool',
+            content: JSON.stringify(result.success ? result.result : { error: result.reason }),
+            tool_call_id: tc.id,
+          });
+        }
+        this._permissions.loopProtection.exit(traceId);
+
+        yield { type: 'tool_calls_done', count: toolCalls.length };
+        // Loop continues → re-stream with tool results in history
       }
-      this._permissions.circuitBreaker.recordSuccess();
-      yield { type: 'done' };
 
     } catch (err) {
       this._permissions.circuitBreaker.recordFailure();
@@ -473,10 +490,52 @@ export class WuAIConversation {
 
   _getOrCreateNamespace(name) {
     const nsName = name || this._config.defaultNamespace;
+
+    // Lazy GC sweep — only runs periodically, not on every access
+    this._maybeGcSweep();
+
     if (!this._namespaces.has(nsName)) {
       this._namespaces.set(nsName, new ConversationNamespace(nsName));
     }
-    return this._namespaces.get(nsName);
+    const ns = this._namespaces.get(nsName);
+    ns.lastActivity = Date.now();
+    return ns;
+  }
+
+  /**
+   * Sweep expired namespaces. Called lazily on access, throttled by gcInterval.
+   * Never deletes the default namespace or namespaces with active requests.
+   */
+  _maybeGcSweep() {
+    const ttl = this._config.namespaceTTL;
+    const interval = this._config.gcInterval;
+    if (!ttl || ttl <= 0) return; // GC disabled
+
+    const now = Date.now();
+    if (now - this._lastGcRun < interval) return; // Not time yet
+    this._lastGcRun = now;
+
+    const cutoff = now - ttl;
+    const toDelete = [];
+
+    for (const [name, ns] of this._namespaces) {
+      // Never GC the default namespace
+      if (name === this._config.defaultNamespace) continue;
+      // Don't GC namespaces with active abort controllers (in-flight request)
+      if (ns._abortController) continue;
+      // Expired?
+      if (ns.lastActivity < cutoff) {
+        toDelete.push(name);
+      }
+    }
+
+    for (const name of toDelete) {
+      this._namespaces.delete(name);
+    }
+
+    if (toDelete.length > 0) {
+      logger.wuDebug(`[wu-ai] GC sweep: removed ${toDelete.length} expired namespace(s): ${toDelete.join(', ')}`);
+    }
   }
 
   async _buildSystemPrompt(options) {