wu-framework 1.1.8 → 1.1.9

package/dist/wu-framework.dev.js

@@ -271,6 +271,142 @@ class WuLoader {
   }
 }
 
+/**
+ * 📝 WU-LOGGER: Sistema de logging inteligente para entornos
+ * Controla los logs automáticamente según el entorno
+ */
+
+class WuLogger {
+  constructor() {
+    // Detectar entorno automáticamente
+    this.isDevelopment = this.detectEnvironment();
+    // En desarrollo: warn (menos ruido), en producción: error
+    this.logLevel = this.isDevelopment ? 'warn' : 'error';
+
+    this.levels = {
+      debug: 0,
+      info: 1,
+      warn: 2,
+      error: 3,
+      silent: 4
+    };
+  }
+
+  /**
+   * Detectar si estamos en desarrollo
+   */
+  detectEnvironment() {
+    // Múltiples formas de detectar desarrollo
+    return (
+      // Vite development
+      window.location.hostname === 'localhost' ||
+      window.location.hostname === '127.0.0.1' ||
+      window.location.port !== '' ||
+      // NODE_ENV si está disponible
+      (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') ||
+      // URL params para forzar debug
+      new URLSearchParams(window.location.search).has('wu-debug') ||
+      // Manual override
+      window.WU_DEBUG === true
+    );
+  }
+
+  /**
+   * Configurar nivel de logging
+   */
+  setLevel(level) {
+    this.logLevel = level;
+    return this;
+  }
+
+  /**
+   * Habilitar/deshabilitar development mode
+   */
+  setDevelopment(isDev) {
+    this.isDevelopment = isDev;
+    this.logLevel = isDev ? 'debug' : 'error';
+    return this;
+  }
+
+  /**
+   * Verificar si debemos mostrar el log
+   */
+  shouldLog(level) {
+    return this.levels[level] >= this.levels[this.logLevel];
+  }
+
+  /**
+   * Logging methods
+   */
+  debug(...args) {
+    if (this.shouldLog('debug')) {
+      console.log(...args);
+    }
+  }
+
+  info(...args) {
+    if (this.shouldLog('info')) {
+      console.info(...args);
+    }
+  }
+
+  warn(...args) {
+    if (this.shouldLog('warn')) {
+      console.warn(...args);
+    }
+  }
+
+  error(...args) {
+    if (this.shouldLog('error')) {
+      console.error(...args);
+    }
+  }
+
+  /**
+   * Logging con contexto Wu
+   */
+  wu(level, ...args) {
+    if (this.shouldLog(level)) {
+      const method = level === 'debug' ? 'log' : level;
+      console[method]('[Wu]', ...args);
+    }
+  }
+
+  /**
+   * Helper methods específicos para Wu
+   */
+  wuDebug(...args) { this.wu('debug', ...args); }
+  wuInfo(...args) { this.wu('info', ...args); }
+  wuWarn(...args) { this.wu('warn', ...args); }
+  wuError(...args) { this.wu('error', ...args); }
+}
+
+// Singleton instance
+const logger = new WuLogger();
+
+/**
+ * 🔇 Silenciar todos los logs de Wu Framework
+ * Útil en producción para eliminar todo el ruido
+ */
+function silenceAllLogs() {
+  logger.setLevel('silent');
+}
+
+/**
+ * 🔊 Restaurar logs (nivel debug)
+ */
+function enableAllLogs() {
+  logger.setLevel('debug');
+}
+
+var wuLogger = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  WuLogger: WuLogger,
+  enableAllLogs: enableAllLogs,
+  logger: logger,
+  silenceAllLogs: silenceAllLogs
+});
+
 /**
  * 🎨 WU-STYLE-BRIDGE: SHADOW DOM STYLE SHARING SYSTEM
  *
@@ -301,6 +437,7 @@ class WuLoader {
  *    - Riesgo de colisiones: NINGUNO
  */
 
+
 class WuStyleBridge {
   constructor() {
     this.styleObserver = null;
@@ -329,7 +466,7 @@ class WuStyleBridge {
       cacheEnabled: true
     };
 
-    console.log('[WuStyleBridge] 🎨 Style sharing system initialized');
+    logger.debug('[WuStyleBridge] 🎨 Style sharing system initialized');
   }
 
   /**
@@ -339,7 +476,7 @@ class WuStyleBridge {
    */
   registerFullyIsolatedApp(appName, appUrl) {
     this.fullyIsolatedApps.set(appName, appUrl);
-    console.log(`[WuStyleBridge] 🛡️ Registered fully-isolated app: ${appName} (${appUrl})`);
+    logger.debug(`[WuStyleBridge] 🛡️ Registered fully-isolated app: ${appName} (${appUrl})`);
   }
 
   /**
@@ -437,7 +574,7 @@ class WuStyleBridge {
 
       // Filtrar estilos de apps con fully-isolated (después de obtener viteId para mejor detección)
       if (this.isStyleFromFullyIsolatedApp(style) || (viteId && this.isStyleFromFullyIsolatedApp(viteId))) {
-        console.log(`[WuStyleBridge] 🛡️ Filtered out style from fully-isolated app: ${viteId || 'unknown'}`);
+        logger.debug(`[WuStyleBridge] 🛡️ Filtered out style from fully-isolated app: ${viteId || 'unknown'}`);
         return;
       }
 
@@ -465,7 +602,7 @@ class WuStyleBridge {
       });
     }
 
-    console.log(`[WuStyleBridge] 🔍 Detected ${styles.length} shareable styles`);
+    logger.debug(`[WuStyleBridge] 🔍 Detected ${styles.length} shareable styles`);
     return styles;
   }
 
@@ -521,26 +658,26 @@ class WuStyleBridge {
    */
   async injectStylesIntoShadow(shadowRoot, appName, styleMode) {
     if (!shadowRoot) {
-      console.warn('[WuStyleBridge] ⚠️ No shadow root provided');
+      logger.warn('[WuStyleBridge] ⚠️ No shadow root provided');
       return 0;
     }
 
     // 🛡️ MODO FULLY-ISOLATED: No inyectar ningún estilo compartido
     // Los estilos propios se manejan en wu-sandbox.js con injectOwnStylesToShadow
     if (styleMode === 'fully-isolated') {
-      console.log(`[WuStyleBridge] 🛡️ Style mode "fully-isolated" for ${appName}, skipping shared style injection`);
+      logger.debug(`[WuStyleBridge] 🛡️ Style mode "fully-isolated" for ${appName}, skipping shared style injection`);
       return 0;
     }
 
     // 🔒 MODO ISOLATED: No inyectar estilos externos - usar encapsulamiento nativo de Shadow DOM
     // La app debe manejar sus propios estilos (CSS-in-JS, scoped styles, imports directos)
     if (styleMode === 'isolated') {
-      console.log(`[WuStyleBridge] 🔒 Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation (no external styles)`);
+      logger.debug(`[WuStyleBridge] 🔒 Style mode "isolated" for ${appName}, using native Shadow DOM encapsulation (no external styles)`);
       return 0;
     }
 
     // 🌐 MODO SHARED (default): Inyectar todos los estilos compartidos del documento
-    console.log(`[WuStyleBridge] 🌐 Style mode "shared" for ${appName}, injecting all shared styles...`);
+    logger.debug(`[WuStyleBridge] 🌐 Style mode "shared" for ${appName}, injecting all shared styles...`);
 
     // Detectar estilos del documento
     const styles = this.detectDocumentStyles();
@@ -566,11 +703,11 @@ class WuStyleBridge {
             break;
         }
       } catch (error) {
-        console.warn(`[WuStyleBridge] ⚠️ Failed to inject style:`, error);
+        logger.warn(`[WuStyleBridge] ⚠️ Failed to inject style:`, error);
       }
     }
 
-    console.log(`[WuStyleBridge] ✅ Injected ${injectedCount} shared styles into ${appName}`);
+    logger.debug(`[WuStyleBridge] ✅ Injected ${injectedCount} shared styles into ${appName}`);
     return injectedCount;
   }
 
@@ -583,7 +720,7 @@ class WuStyleBridge {
     // Verificar si ya existe
     const existing = shadowRoot.querySelector(`link[href="${style.href}"]`);
     if (existing) {
-      console.log(`[WuStyleBridge] ⏭️ Style already exists: ${style.library || style.href}`);
+      logger.debug(`[WuStyleBridge] ⏭️ Style already exists: ${style.library || style.href}`);
       return;
     }
 
@@ -597,7 +734,7 @@ class WuStyleBridge {
     // Insertar al principio del shadow root (antes de otros estilos)
     shadowRoot.insertBefore(link, shadowRoot.firstChild);
 
-    console.log(`[WuStyleBridge] 🔗 Injected link: ${style.library || style.href}`);
+    logger.debug(`[WuStyleBridge] 🔗 Injected link: ${style.library || style.href}`);
   }
 
   /**
@@ -611,7 +748,7 @@ class WuStyleBridge {
     if (viteId) {
       const existing = shadowRoot.querySelector(`style[data-wu-vite-id="${viteId}"]`);
       if (existing) {
-        console.log(`[WuStyleBridge] ⏭️ Inline style already exists: ${viteId}`);
+        logger.debug(`[WuStyleBridge] ⏭️ Inline style already exists: ${viteId}`);
         return;
       }
     }
@@ -628,7 +765,7 @@ class WuStyleBridge {
     // Insertar al principio del shadow root
     shadowRoot.insertBefore(styleTag, shadowRoot.firstChild);
 
-    console.log(`[WuStyleBridge] 📝 Injected inline style: ${style.library || viteId}`);
+    logger.debug(`[WuStyleBridge] 📝 Injected inline style: ${style.library || viteId}`);
   }
 
   /**
@@ -645,7 +782,7 @@ class WuStyleBridge {
 
       // Verificar si ya existe
       if (shadowRoot.adoptedStyleSheets.includes(style.sheet)) {
-        console.log(`[WuStyleBridge] ⏭️ Adopted stylesheet already exists`);
+        logger.debug(`[WuStyleBridge] ⏭️ Adopted stylesheet already exists`);
         return;
       }
 
@@ -654,9 +791,9 @@ class WuStyleBridge {
         style.sheet
       ];
 
-      console.log(`[WuStyleBridge] 📋 Injected adopted stylesheet`);
+      logger.debug(`[WuStyleBridge] 📋 Injected adopted stylesheet`);
     } catch (error) {
-      console.warn(`[WuStyleBridge] ⚠️ Failed to inject adopted stylesheet:`, error);
+      logger.warn(`[WuStyleBridge] ⚠️ Failed to inject adopted stylesheet:`, error);
     }
   }
 
@@ -690,7 +827,7 @@ class WuStyleBridge {
       }
 
       if (hasStyleChanges && callback) {
-        console.log('[WuStyleBridge] 🔄 Style changes detected');
+        logger.debug('[WuStyleBridge] 🔄 Style changes detected');
         callback();
       }
     });
@@ -701,7 +838,7 @@ class WuStyleBridge {
       subtree: true
     });
 
-    console.log('[WuStyleBridge] 👀 Observing style changes');
+    logger.debug('[WuStyleBridge] 👀 Observing style changes');
   }
 
   /**
@@ -714,7 +851,7 @@ class WuStyleBridge {
       ...config
     };
 
-    console.log('[WuStyleBridge] ⚙️ Configuration updated:', this.config);
+    logger.debug('[WuStyleBridge] ⚙️ Configuration updated:', this.config);
   }
 
   /**
@@ -726,7 +863,7 @@ class WuStyleBridge {
       this.styleObserver = null;
     }
 
-    console.log('[WuStyleBridge] 🧹 StyleBridge cleaned up');
+    logger.debug('[WuStyleBridge] 🧹 StyleBridge cleaned up');
   }
 
   /**
@@ -748,206 +885,70 @@ class WuStyleBridge {
 }
 
 /**
- * 📝 WU-LOGGER: Sistema de logging inteligente para entornos
- * Controla los logs automáticamente según el entorno
+ * WU-PROXY-SANDBOX: Hardened JavaScript Isolation
+ *
+ * ES6 Proxy-based sandbox with side-effect tracking:
+ * - Timer hijacking (setTimeout, setInterval, requestAnimationFrame)
+ * - Event listener tracking (window + document addEventListener)
+ * - DOM scoping (querySelector/querySelectorAll → shadow root)
+ * - Storage scoping (localStorage/sessionStorage → prefixed keys)
+ *
+ * All tracked side effects are automatically cleaned up on deactivate().
  */
 
-class WuLogger {
-  constructor() {
-    // Detectar entorno automáticamente
-    this.isDevelopment = this.detectEnvironment();
-    // En desarrollo: warn (menos ruido), en producción: error
-    this.logLevel = this.isDevelopment ? 'warn' : 'error';
 
-    this.levels = {
-      debug: 0,
-      info: 1,
-      warn: 2,
-      error: 3,
-      silent: 4
-    };
-  }
+class WuProxySandbox {
+  constructor(appName) {
+    this.appName = appName;
+    this.proxy = null;
+    this.fakeWindow = Object.create(null);
+    this.active = false;
+    this.modifiedKeys = new Set();
 
-  /**
-   * Detectar si estamos en desarrollo
-   */
-  detectEnvironment() {
-    // Múltiples formas de detectar desarrollo
-    return (
-      // Vite development
-      window.location.hostname === 'localhost' ||
-      window.location.hostname === '127.0.0.1' ||
-      window.location.port !== '' ||
-      // NODE_ENV si está disponible
-      (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') ||
-      // URL params para forzar debug
-      new URLSearchParams(window.location.search).has('wu-debug') ||
-      // Manual override
-      window.WU_DEBUG === true
-    );
-  }
+    // --- Side-effect tracking ---
+    this._timers = new Set();
+    this._intervals = new Set();
+    this._rafs = new Set();
+    this._eventListeners = []; // [{target, event, handler, options}]
 
-  /**
-   * Configurar nivel de logging
-   */
-  setLevel(level) {
-    this.logLevel = level;
-    return this;
-  }
+    // --- DOM & Storage scoping ---
+    this._container = null;
+    this._shadowRoot = null;
+    this._scopedDocument = null;
+    this._scopedLocalStorage = null;
+    this._scopedSessionStorage = null;
 
-  /**
-   * Habilitar/deshabilitar development mode
-   */
-  setDevelopment(isDev) {
-    this.isDevelopment = isDev;
-    this.logLevel = isDev ? 'debug' : 'error';
-    return this;
+    // --- Window patching state ---
+    this._patched = false;
+    this._originals = null;
   }
 
   /**
-   * Verificar si debemos mostrar el log
+   * Set the DOM scope for this sandbox.
+   * Must be called before activate() for DOM scoping to work.
+   * @param {HTMLElement} container - App container element
+   * @param {ShadowRoot} shadowRoot - Shadow root containing the container
    */
-  shouldLog(level) {
-    return this.levels[level] >= this.levels[this.logLevel];
+  setContainer(container, shadowRoot) {
+    this._container = container;
+    this._shadowRoot = shadowRoot;
   }
 
   /**
-   * Logging methods
+   * Activate the sandbox. Creates the Proxy and starts tracking.
+   * @returns {Proxy} The sandboxed window proxy
    */
-  debug(...args) {
-    if (this.shouldLog('debug')) {
-      console.log(...args);
-    }
-  }
+  activate() {
+    if (this.active) return this.proxy;
 
-  info(...args) {
-    if (this.shouldLog('info')) {
-      console.info(...args);
-    }
-  }
+    const self = this;
 
-  warn(...args) {
-    if (this.shouldLog('warn')) {
-      console.warn(...args);
-    }
-  }
-
-  error(...args) {
-    if (this.shouldLog('error')) {
-      console.error(...args);
-    }
-  }
-
-  /**
-   * Logging con contexto Wu
-   */
-  wu(level, ...args) {
-    if (this.shouldLog(level)) {
-      const method = level === 'debug' ? 'log' : level;
-      console[method]('[Wu]', ...args);
-    }
-  }
-
-  /**
-   * Helper methods específicos para Wu
-   */
-  wuDebug(...args) { this.wu('debug', ...args); }
-  wuInfo(...args) { this.wu('info', ...args); }
-  wuWarn(...args) { this.wu('warn', ...args); }
-  wuError(...args) { this.wu('error', ...args); }
-}
-
-// Singleton instance
-const logger = new WuLogger();
-
-/**
- * 🔇 Silenciar todos los logs de Wu Framework
- * Útil en producción para eliminar todo el ruido
- */
-function silenceAllLogs() {
-  logger.setLevel('silent');
-}
-
-/**
- * 🔊 Restaurar logs (nivel debug)
- */
-function enableAllLogs() {
-  logger.setLevel('debug');
-}
-
-var wuLogger = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  WuLogger: WuLogger,
-  enableAllLogs: enableAllLogs,
-  logger: logger,
-  silenceAllLogs: silenceAllLogs
-});
-
-/**
- * WU-PROXY-SANDBOX: Hardened JavaScript Isolation
- *
- * ES6 Proxy-based sandbox with side-effect tracking:
- * - Timer hijacking (setTimeout, setInterval, requestAnimationFrame)
- * - Event listener tracking (window + document addEventListener)
- * - DOM scoping (querySelector/querySelectorAll → shadow root)
- * - Storage scoping (localStorage/sessionStorage → prefixed keys)
- *
- * All tracked side effects are automatically cleaned up on deactivate().
- */
-
-
-class WuProxySandbox {
-  constructor(appName) {
-    this.appName = appName;
-    this.proxy = null;
-    this.fakeWindow = Object.create(null);
-    this.active = false;
-    this.modifiedKeys = new Set();
-
-    // --- Side-effect tracking ---
-    this._timers = new Set();
-    this._intervals = new Set();
-    this._rafs = new Set();
-    this._eventListeners = []; // [{target, event, handler, options}]
-
-    // --- DOM & Storage scoping ---
-    this._container = null;
-    this._shadowRoot = null;
-    this._scopedDocument = null;
-    this._scopedLocalStorage = null;
-    this._scopedSessionStorage = null;
-
-    // --- Window patching state ---
-    this._patched = false;
-    this._originals = null;
-  }
-
-  /**
-   * Set the DOM scope for this sandbox.
-   * Must be called before activate() for DOM scoping to work.
-   * @param {HTMLElement} container - App container element
-   * @param {ShadowRoot} shadowRoot - Shadow root containing the container
-   */
-  setContainer(container, shadowRoot) {
-    this._container = container;
-    this._shadowRoot = shadowRoot;
-  }
-
-  /**
-   * Activate the sandbox. Creates the Proxy and starts tracking.
-   * @returns {Proxy} The sandboxed window proxy
-   */
-  activate() {
-    if (this.active) return this.proxy;
-
-    const self = this;
-
-    this.proxy = new Proxy(window, {
-      get(target, prop) {
-        // 1. App's own isolated globals
-        if (prop in self.fakeWindow) {
-          return self.fakeWindow[prop];
-        }
+    this.proxy = new Proxy(window, {
+      get(target, prop) {
+        // 1. App's own isolated globals
+        if (prop in self.fakeWindow) {
+          return self.fakeWindow[prop];
+        }
 
         // 2. Intercepted APIs
         const intercepted = self._intercept(prop, target);
@@ -3419,8 +3420,7 @@ class WuCache {
       maxItems: options.maxItems || 100,
       defaultTTL: options.defaultTTL || 3600000, // 1 hour
       persistent: options.persistent !== false,
-      storage: options.storage || 'memory',
-      compression: options.compression || false
+      storage: options.storage || 'memory'
     };
 
     // 🔐 Rate limiting configuration
@@ -4788,11 +4788,14 @@ const createPlugin = (config) => {
     permissions: config.permissions || ['events'],
     install: config.install,
     uninstall: config.uninstall,
+    beforeInit: config.beforeInit,
+    afterInit: config.afterInit,
     beforeMount: config.beforeMount,
     afterMount: config.afterMount,
     beforeUnmount: config.beforeUnmount,
     afterUnmount: config.afterUnmount,
-    onError: config.onError
+    onError: config.onError,
+    onDestroy: config.onDestroy
   };
 };
 
@@ -7443,7 +7446,7 @@ class WuCore {
 
   /**
    * Registrar una aplicacion
-   * @param {Object} appConfig - { name, url }
+   * @param {Object} appConfig - { name, url, keepAlive, sandbox, container, ... }
    */
   async registerApp(appConfig) {
     const { name, url } = appConfig;
@@ -7455,10 +7458,9 @@ class WuCore {
       const manifestData = await this.manifest.load(url);
       this.manifests.set(name, manifestData);
 
-      // Registrar la app
+      // Registrar la app — preserve all config fields (keepAlive, sandbox, container, etc.)
       this.apps.set(name, {
-        name,
-        url,
+        ...appConfig,
         manifest: manifestData,
         status: 'registered'
       });
@@ -8733,6 +8735,24 @@ class OpenAIAdapter extends BaseAdapter {
     if (options.temperature !== undefined) body.temperature = options.temperature;
     if (options.maxTokens) body.max_tokens = options.maxTokens;
     if (options.stream) body.stream = true;
+
+    // Structured output / JSON mode
+    if (options.responseFormat) {
+      const rf = options.responseFormat;
+      if (rf === 'json' || rf?.type === 'json_object') {
+        body.response_format = { type: 'json_object' };
+      } else if (rf?.type === 'json_schema') {
+        body.response_format = {
+          type: 'json_schema',
+          json_schema: {
+            name: rf.name || 'response',
+            schema: rf.schema,
+            strict: rf.strict !== false,
+          },
+        };
+      }
+    }
+
     return body;
   }
 
@@ -8852,6 +8872,26 @@ class AnthropicAdapter extends BaseAdapter {
     if (systemMsgs.length) {
       body.system = systemMsgs.map(m => m.content).join('\n\n');
     }
+
+    // Structured output / JSON mode (Anthropic has no native support)
+    // Strategy: augment system prompt + prefill assistant turn with '{'
+    if (options.responseFormat) {
+      const rf = options.responseFormat;
+      const jsonInstruction = '\n\nYou MUST respond with valid JSON only. No markdown, no explanation.';
+
+      if (rf === 'json' || rf?.type === 'json_object') {
+        body.system = (body.system || '') + jsonInstruction;
+      } else if (rf?.type === 'json_schema') {
+        const schemaStr = JSON.stringify(rf.schema, null, 2);
+        body.system = (body.system || '') +
+          jsonInstruction +
+          `\n\nYour response MUST conform to this JSON schema:\n${schemaStr}`;
+      }
+
+      // Prefill assistant message with '{' to force JSON output
+      body.messages.push({ role: 'assistant', content: '{' });
+    }
+
     if (options.tools?.length) {
       body.tools = options.tools.map(t => ({
         name: t.name,
@@ -8952,6 +8992,17 @@ class OllamaAdapter extends BaseAdapter {
     }
     if (options.temperature !== undefined) body.options = { temperature: options.temperature };
     if (options.stream !== undefined) body.stream = options.stream;
+
+    // Structured output / JSON mode
+    if (options.responseFormat) {
+      const rf = options.responseFormat;
+      if (rf === 'json' || rf?.type === 'json_object') {
+        body.format = 'json';
+      } else if (rf?.type === 'json_schema') {
+        body.format = rf.schema;
+      }
+    }
+
     return body;
   }
 
@@ -9076,9 +9127,7 @@ class WuAIProvider {
    * @returns {Promise<{ content: string, tool_calls?: Array, usage?: object }>}
    */
   async send(messages, options = {}) {
-    this._ensureActive();
-    const adapter = this._active;
-    const config = this._activeConfig;
+    const { adapter, config } = this._resolveProvider(options.provider);
 
     // Custom adapter: call user function directly
     if (adapter.isCustom && adapter._sendFn) {
@@ -9102,7 +9151,25 @@ class WuAIProvider {
     });
 
     const data = await response.json();
-    return adapter.parseResponse(data);
+    const result = adapter.parseResponse(data);
+
+    // Anthropic prefill compensation: we prepended '{' to force JSON,
+    // so the response content is the continuation — restore the full JSON
+    if (adapter instanceof AnthropicAdapter && options.responseFormat && result.content) {
+      result.content = '{' + result.content;
+    }
+
+    // Validate JSON when responseFormat was requested
+    if (options.responseFormat && result.content) {
+      try {
+        result.parsed = JSON.parse(result.content);
+      } catch {
+        result.parseError = 'Response is not valid JSON';
+        logger.wuDebug('[wu-ai] responseFormat requested but LLM returned invalid JSON');
+      }
+    }
+
+    return result;
   }
 
   /**
@@ -9113,9 +9180,7 @@ class WuAIProvider {
    * @yields {StreamChunk}
    */
   async *stream(messages, options = {}) {
-    this._ensureActive();
-    const adapter = this._active;
-    const config = this._activeConfig;
+    const { adapter, config } = this._resolveProvider(options.provider);
 
     // Custom adapter: call user generator directly
     if (adapter.isCustom && adapter._streamFn) {
@@ -9147,6 +9212,10 @@ class WuAIProvider {
     const decoder = new TextDecoder();
     let buffer = '';
 
+    // Anthropic prefill compensation for streaming:
+    // emit the '{' we used as prefill before the first real chunk
+    let needsPrefill = adapter instanceof AnthropicAdapter && !!options.responseFormat;
+
     try {
       while (true) {
         const { done, value } = await reader.read();
@@ -9161,7 +9230,13 @@ class WuAIProvider {
           if (!trimmed) continue;
 
           const chunk = adapter.parseStreamChunk(trimmed);
-          if (chunk) yield chunk;
+          if (chunk) {
+            if (needsPrefill && chunk.type === 'text') {
+              chunk.content = '{' + chunk.content;
+              needsPrefill = false;
+            }
+            yield chunk;
+          }
           if (chunk?.type === 'done') return;
         }
       }
@@ -9197,10 +9272,13 @@ class WuAIProvider {
           }
         }
 
-        // 4xx (except 429) — don't retry
-        throw new Error(`[wu-ai] Request failed: ${response.status} ${response.statusText}`);
+        // 4xx (except 429) — don't retry, fail immediately
+        const clientError = new Error(`[wu-ai] Request failed: ${response.status} ${response.statusText}`);
+        clientError._noRetry = true;
+        throw clientError;
       } catch (err) {
         if (err.name === 'AbortError') throw err;
+        if (err._noRetry) throw err; // 4xx — don't retry
         lastError = err;
         if (attempt < this._retryConfig.maxRetries) {
           const delay = this._retryConfig.baseDelayMs * Math.pow(2, attempt);
@@ -9224,6 +9302,25 @@ class WuAIProvider {
     return endpoint;
   }
 
+  /**
+   * Resolve which provider/adapter to use for a request.
+   * Supports per-call selection: options.provider = 'anthropic'
+   *
+   * @param {string} [providerName] - Optional provider name override
+   * @returns {{ adapter: BaseAdapter, config: object }}
+   */
+  _resolveProvider(providerName) {
+    if (providerName) {
+      const entry = this._providers.get(providerName);
+      if (!entry) {
+        throw new Error(`[wu-ai] Provider '${providerName}' not registered. Available: ${[...this._providers.keys()].join(', ')}`);
+      }
+      return { adapter: entry.adapter, config: entry.config };
+    }
+    this._ensureActive();
+    return { adapter: this._active, config: this._activeConfig };
+  }
+
   _ensureActive() {
     if (!this._active) {
       throw new Error(
@@ -9828,6 +9925,34 @@ function validateParams(params, schema) {
   return { valid: errors.length === 0, errors };
 }
 
+// ─── Context Budget ──────────────────────────────────────────────
+
+/**
+ * Estimate token count from character count.
+ * Rough heuristic: 1 token ≈ 4 chars for English, ≈ 2 chars for CJK.
+ *
+ * @param {string} text
+ * @param {number} [charRatio=4]
+ * @returns {number}
+ */
+function estimateTokens(text, charRatio = 4) {
+  return Math.ceil(text.length / charRatio);
+}
+
+/**
+ * Truncate text to fit within a token budget.
+ *
+ * @param {string} text
+ * @param {number} maxTokens
+ * @param {number} [charRatio=4]
+ * @returns {string}
+ */
+function truncateToTokenBudget(text, maxTokens, charRatio = 4) {
+  const maxChars = maxTokens * charRatio;
+  if (text.length <= maxChars) return text;
+  return text.slice(0, maxChars) + '\n...[truncated to fit token budget]';
+}
+
 /**
  * WU-AI-CONTEXT: Automatic context collector for LLMs
  *
@@ -10445,6 +10570,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 ──────────────────────────────────────
@@ -10509,6 +10636,7 @@ class WuAIConversation {
     this._config = { ...DEFAULT_CONFIG };
     this._namespaces = new Map();
     this._activeRequests = new Map(); // namespace → promise
+    this._lastGcRun = Date.now();
   }
 
   /**
@@ -10529,6 +10657,7 @@ 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 }>}
    */
@@ -10577,6 +10706,8 @@ 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,
         });
 
@@ -10701,102 +10832,113 @@ 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();
@@ -10892,10 +11034,52 @@ 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) {
@@ -11368,51 +11552,1961 @@ class WuAITriggers {
 }
 
 /**
- * WU-AI Browser Actions
+ * WU-AI-AGENT: Autonomous agent loop (Paradigm 3)
  *
- * Registers browser automation tools into wu.ai so any LLM provider
- * (OpenAI, Claude, Gemini, Ollama, etc.) can autonomously see and
- * control the page — no human intervention required.
+ * The agent is the third paradigm of wu.ai:
+ *   Paradigm 1 — App sends messages to LLM (conversation)
+ *   Paradigm 2 — External LLM calls into app (tools/WebMCP)
+ *   Paradigm 3 — AI as autonomous director (this file)
  *
- * Tools registered:
- *   browser_screenshot  — Capture page/element as PNG (Canvas API)
- *   browser_click       — Click element by selector or visible text
- *   browser_type        — Type into inputs (React/Vue/framework compatible)
- *   browser_snapshot    — Get accessibility tree of the DOM
- *   browser_navigate    — Navigate SPA routes
- *   browser_network     — View captured HTTP requests (fetch + XHR)
- *   browser_console     — View captured console messages
- *   browser_info        — Get page state: apps, store, URL, viewport
- *   browser_select      — Select option in dropdowns
- *   browser_scroll      — Scroll page or element
+ * The agent receives a goal and iterates: send to LLM, execute tool calls,
+ * observe results, repeat — until the goal is achieved or limits are hit.
+ * It is an async generator, yielding each step so the caller can observe,
+ * log, render, or intervene at any point.
  *
- * @example
- * // Auto-registered when wu.ai initializes
- * // Any LLM connected via wu.ai.provider can now use these tools:
- * const tools = wu.ai.tools();
- * // → includes browser_screenshot, browser_click, etc.
+ * This is a foundation, not a planner. It does not decompose goals into
+ * sub-tasks or maintain a world model. It trusts the LLM to drive the
+ * loop and uses the [DONE] marker or tool-call cessation as termination
+ * signals. More sophisticated planning belongs in userland, composed
+ * on top of this primitive.
+ *
+ * Key features:
+ * - Async generator yielding step results (observable, composable)
+ * - Human-in-the-loop via shouldContinue callback
+ * - Abort support via AbortController
+ * - Permission preflight before every step
+ * - Event emission on start, step, done, error
+ * - Auto-generated system prompt describing agent role and tools
+ * - Configurable step limit (default 10)
  */
 
-// ── Shared capture buffers ──
-const networkLog = [];
-const MAX_NETWORK_LOG = 300;
-const consoleLog = [];
-const MAX_CONSOLE_LOG = 500;
-let interceptorsInstalled = false;
 
-/**
- * Register all browser automation actions into a WuAI instance.
- *
+// ─── Constants ──────────────────────────────────────────────────
+
+const DONE_MARKER = '[DONE]';
+
+const DEFAULT_MAX_STEPS = 10;
+
+const AGENT_NAMESPACE_PREFIX = 'agent:';
+
+// ─── Step Result Types ──────────────────────────────────────────
+
+/**
+ * @typedef {object} AgentStepResult
+ * @property {number} step - Step number (1-indexed)
+ * @property {'thinking'|'tool_call'|'done'|'blocked'|'aborted'|'interrupted'} type
+ * @property {string} [content] - LLM text response for this step
+ * @property {Array} [toolResults] - Tool execution results (if tools were called)
+ * @property {object} [usage] - Token usage for this step
+ * @property {string} [reason] - Reason for termination (done/blocked/aborted)
+ * @property {number} elapsed - Time in ms for this step
+ */
+
+// ─── Agent Class ────────────────────────────────────────────────
+
+class WuAIAgent {
+  /**
+   * @param {object} deps - Injected dependencies (same pattern as other wu-ai modules)
+   * @param {import('./wu-ai-conversation.js').WuAIConversation} deps.conversation - Conversation manager
+   * @param {import('./wu-ai-actions.js').WuAIActions} deps.actions - Action registry
+   * @param {import('./wu-ai-context.js').WuAIContext} deps.context - Context collector
+   * @param {import('./wu-ai-permissions.js').WuAIPermissions} deps.permissions - Permission system
+   * @param {object} deps.eventBus - WuEventBus instance
+   */
+  constructor({ conversation, actions, context, permissions, eventBus }) {
+    this._conversation = conversation;
+    this._actions = actions;
+    this._context = context;
+    this._permissions = permissions;
+    this._eventBus = eventBus;
+
+    this._config = {
+      maxSteps: DEFAULT_MAX_STEPS,
+      systemPrompt: null,
+    };
+
+    this._activeRuns = new Map();  // runId -> AbortController
+    this._stats = {
+      totalRuns: 0,
+      totalSteps: 0,
+      completedRuns: 0,
+      abortedRuns: 0,
+      errorRuns: 0,
+    };
+  }
+
+  /**
+   * Post-init configuration.
+   *
+   * @param {object} config
+   * @param {number} [config.maxSteps] - Default max steps for all runs
+   * @param {string|Function} [config.systemPrompt] - Default agent system prompt
+   */
+  configure(config) {
+    if (config.maxSteps !== undefined) this._config.maxSteps = config.maxSteps;
+    if (config.systemPrompt !== undefined) this._config.systemPrompt = config.systemPrompt;
+  }
+
+  /**
+   * Run the agent loop toward a goal.
+   *
+   * The generator yields after each LLM round. The caller can inspect
+   * the result, update UI, or break out of the loop to abort early.
+   *
+   * Termination conditions (checked in order):
+   *   1. AbortController signal fired
+   *   2. shouldContinue() returns false (human-in-the-loop gate)
+   *   3. Permission preflight denied
+   *   4. LLM response contains [DONE] marker
+   *   5. LLM stops requesting tool calls (after previously requesting them)
+   *   6. maxSteps reached
+   *
+   * @param {string} goal - Natural language description of what to achieve
+   * @param {object} [options]
+   * @param {number} [options.maxSteps] - Override max steps for this run
+   * @param {string} [options.provider] - Use a specific registered provider
+   * @param {string} [options.namespace] - Conversation namespace (auto-generated if omitted)
+   * @param {string|Function} [options.systemPrompt] - Override system prompt
+   * @param {Function} [options.onStep] - Callback invoked after each step: (stepResult) => void
+   * @param {Function} [options.shouldContinue] - Async gate: (stepResult) => boolean. Return false to stop.
+   * @param {AbortSignal} [options.signal] - External abort signal
+   * @param {number} [options.temperature] - LLM temperature
+   * @param {number} [options.maxTokens] - LLM max tokens per step
+   * @yields {AgentStepResult}
+   */
+  async *run(goal, options = {}) {
+    const maxSteps = options.maxSteps ?? this._config.maxSteps;
+    const namespace = options.namespace || this._generateNamespace();
+    const runId = this._generateRunId();
+
+    // Abort controller: merge external signal with our own
+    const controller = new AbortController();
+    this._activeRuns.set(runId, controller);
+
+    if (options.signal) {
+      if (options.signal.aborted) {
+        controller.abort();
+      } else {
+        options.signal.addEventListener('abort', () => controller.abort(), { once: true });
+      }
+    }
+
+    this._stats.totalRuns++;
+
+    // Build the agent system prompt
+    const systemPrompt = await this._buildAgentSystemPrompt(goal, options);
+
+    // Emit start event
+    this._eventBus.emit('ai:agent:start', {
+      runId,
+      goal,
+      namespace,
+      maxSteps,
+    }, { appName: 'wu-ai' });
+
+    logger.wuInfo(`[wu-ai] Agent run started: "${goal.slice(0, 80)}${goal.length > 80 ? '...' : ''}" (max ${maxSteps} steps)`);
+
+    let step = 0;
+    let previousHadToolCalls = false;
+    let finalReason = 'max_steps';
+
+    try {
+      // Inject the goal as the first user message via conversation.send
+      // The loop sends the goal on step 1, then follow-up prompts on subsequent steps.
+
+      while (step < maxSteps) {
+        step++;
+        const stepStart = Date.now();
+
+        // ── 1. Check abort ──
+        if (controller.signal.aborted) {
+          const result = this._buildStepResult(step, 'aborted', {
+            reason: 'Aborted by caller',
+            elapsed: Date.now() - stepStart,
+          });
+          this._stats.abortedRuns++;
+          finalReason = 'aborted';
+          this._emitStep(runId, result);
+          yield result;
+          return;
+        }
+
+        // ── 2. Permission preflight ──
+        const traceId = this._permissions.loopProtection.createTraceId();
+        const preflight = this._permissions.preflight({
+          namespace,
+          depth: step,
+          traceId,
+        });
+
+        if (!preflight.allowed) {
+          const result = this._buildStepResult(step, 'blocked', {
+            reason: preflight.reason,
+            elapsed: Date.now() - stepStart,
+          });
+          finalReason = 'blocked';
+          this._emitStep(runId, result);
+          yield result;
+          return;
+        }
+
+        // ── 3. Compose the message for this step ──
+        const message = step === 1
+          ? goal
+          : 'Continue working toward the goal. If you are done, include [DONE] in your response.';
+
+        // ── 4. Send to conversation (handles tool call loops internally) ──
+        let response;
+        try {
+          response = await this._conversation.send(message, {
+            namespace,
+            systemPrompt,
+            provider: options.provider,
+            temperature: options.temperature,
+            maxTokens: options.maxTokens,
+            signal: controller.signal,
+          });
+        } catch (err) {
+          if (err.name === 'AbortError' || controller.signal.aborted) {
+            const result = this._buildStepResult(step, 'aborted', {
+              reason: 'Aborted during LLM call',
+              elapsed: Date.now() - stepStart,
+            });
+            this._stats.abortedRuns++;
+            finalReason = 'aborted';
+            this._emitStep(runId, result);
+            yield result;
+            return;
+          }
+          throw err;
+        }
+
+        const elapsed = Date.now() - stepStart;
+        this._stats.totalSteps++;
+
+        const hasToolResults = response.tool_results && response.tool_results.length > 0;
+        const content = response.content || '';
+
+        // ── 5. Check for DONE marker ──
+        if (content.includes(DONE_MARKER)) {
+          const result = this._buildStepResult(step, 'done', {
+            content: content.replace(DONE_MARKER, '').trim(),
+            toolResults: response.tool_results,
+            usage: response.usage,
+            reason: 'Goal completed (DONE marker)',
+            elapsed,
+          });
+          finalReason = 'done';
+          this._stats.completedRuns++;
+          this._emitStep(runId, result);
+          if (options.onStep) await this._safeCallback(options.onStep, result);
+          yield result;
+          return;
+        }
+
+        // ── 6. Check for tool-call cessation ──
+        // If the LLM was previously calling tools but stopped, it has
+        // settled on a final answer. This is the implicit completion signal.
+        const currentHasToolCalls = hasToolResults;
+        if (previousHadToolCalls && !currentHasToolCalls) {
+          const result = this._buildStepResult(step, 'done', {
+            content,
+            toolResults: response.tool_results,
+            usage: response.usage,
+            reason: 'Goal completed (no further tool calls)',
+            elapsed,
+          });
+          finalReason = 'done';
+          this._stats.completedRuns++;
+          this._emitStep(runId, result);
+          if (options.onStep) await this._safeCallback(options.onStep, result);
+          yield result;
+          return;
+        }
+
+        previousHadToolCalls = currentHasToolCalls;
+
+        // ── 7. Yield the step result ──
+        const stepType = hasToolResults ? 'tool_call' : 'thinking';
+        const result = this._buildStepResult(step, stepType, {
+          content,
+          toolResults: response.tool_results,
+          usage: response.usage,
+          elapsed,
+        });
+
+        this._emitStep(runId, result);
+        if (options.onStep) await this._safeCallback(options.onStep, result);
+        yield result;
+
+        // ── 8. Human-in-the-loop gate ──
+        if (options.shouldContinue) {
+          let shouldGo;
+          try {
+            shouldGo = await options.shouldContinue(result);
+          } catch {
+            shouldGo = false;
+          }
+
+          if (!shouldGo) {
+            const interrupted = this._buildStepResult(step, 'interrupted', {
+              content,
+              reason: 'Stopped by shouldContinue callback',
+              elapsed: 0,
+            });
+            finalReason = 'interrupted';
+            this._emitStep(runId, interrupted);
+            yield interrupted;
+            return;
+          }
+        }
+      }
+
+      // ── Max steps reached ──
+      const maxStepResult = this._buildStepResult(step, 'done', {
+        reason: `Max steps (${maxSteps}) reached`,
+        elapsed: 0,
+      });
+      finalReason = 'max_steps';
+      yield maxStepResult;
+
+    } catch (err) {
+      this._stats.errorRuns++;
+      finalReason = 'error';
+
+      logger.wuWarn(`[wu-ai] Agent run error: ${err.message}`);
+
+      this._eventBus.emit('ai:agent:error', {
+        runId,
+        goal,
+        namespace,
+        step,
+        error: err.message,
+      }, { appName: 'wu-ai' });
+
+      throw err;
+    } finally {
+      // Clean up
+      this._activeRuns.delete(runId);
+
+      // Delete auto-generated agent namespaces to prevent memory leaks
+      // User-provided namespaces are preserved (the user owns their lifecycle)
+      if (!options.namespace && namespace.startsWith(AGENT_NAMESPACE_PREFIX)) {
+        this._conversation.deleteNamespace(namespace);
+      }
+
+      this._eventBus.emit('ai:agent:done', {
+        runId,
+        goal,
+        namespace,
+        totalSteps: step,
+        reason: finalReason,
+      }, { appName: 'wu-ai' });
+
+      logger.wuDebug(`[wu-ai] Agent run finished: ${finalReason} after ${step} step(s)`);
+    }
+  }
+
+  /**
+   * Abort an active agent run by runId.
+   *
+   * @param {string} runId - The run ID to abort
+   */
+  abort(runId) {
+    const controller = this._activeRuns.get(runId);
+    if (controller) {
+      controller.abort();
+      logger.wuDebug(`[wu-ai] Agent run aborted: ${runId}`);
+    }
+  }
+
+  /**
+   * Abort all active agent runs.
+   */
+  abortAll() {
+    for (const [runId, controller] of this._activeRuns) {
+      controller.abort();
+    }
+    this._activeRuns.clear();
+  }
+
+  /**
+   * Get IDs of currently active runs.
+   *
+   * @returns {string[]}
+   */
+  getActiveRuns() {
+    return [...this._activeRuns.keys()];
+  }
+
+  /**
+   * Get agent statistics.
+   *
+   * @returns {object}
+   */
+  getStats() {
+    return {
+      ...this._stats,
+      activeRuns: this._activeRuns.size,
+      config: { ...this._config },
+    };
+  }
+
+  /**
+   * Destroy the agent, aborting all active runs.
+   */
+  destroy() {
+    this.abortAll();
+    this._stats = {
+      totalRuns: 0,
+      totalSteps: 0,
+      completedRuns: 0,
+      abortedRuns: 0,
+      errorRuns: 0,
+    };
+  }
+
+  // ─── Private ──────────────────────────────────────────────────
+
+  /**
+   * Build the agent-specific system prompt. This tells the LLM it is
+   * operating as an autonomous agent with a goal, available tools, and
+   * the [DONE] completion protocol.
+   */
+  async _buildAgentSystemPrompt(goal, options) {
+    // Explicit override takes precedence
+    const basePrompt = options.systemPrompt
+      ?? this._config.systemPrompt
+      ?? null;
+
+    if (basePrompt) {
+      const resolved = typeof basePrompt === 'function'
+        ? await basePrompt(goal)
+        : basePrompt;
+      return resolved;
+    }
+
+    // Auto-generate from context and tools
+    const parts = [];
+
+    parts.push(
+      'You are an autonomous AI agent connected to a live web application via Wu Framework.',
+      'You have been given a goal and must work step-by-step to achieve it.',
+      '',
+      'PROTOCOL:',
+      '- Each message you send is one "step" in your execution.',
+      '- You may call tools to read or modify application state.',
+      '- After each step, you will be prompted to continue.',
+      '- When the goal is fully achieved, include the marker [DONE] in your response.',
+      '- If you determine the goal cannot be achieved, include [DONE] and explain why.',
+      '- Be concise. Each step should make meaningful progress.',
+      '',
+    );
+
+    // Collect context if available
+    if (this._context) {
+      try {
+        await this._context.collect();
+        const snapshot = this._context.getSnapshot();
+        if (snapshot?._mountedApps?.length) {
+          parts.push(`MOUNTED APPS: ${snapshot._mountedApps.join(', ')}`, '');
+        }
+        if (snapshot?._store && Object.keys(snapshot._store).length > 0) {
+          parts.push(`APPLICATION STATE:\n${JSON.stringify(snapshot._store, null, 2)}`, '');
+        }
+      } catch {
+        // Context collection is best-effort
+      }
+    }
+
+    // List available tools
+    const tools = this._actions.getToolSchemas();
+    if (tools.length > 0) {
+      parts.push('AVAILABLE TOOLS:');
+      for (const tool of tools) {
+        const paramKeys = tool.parameters?.properties
+          ? Object.keys(tool.parameters.properties).join(', ')
+          : 'none';
+        parts.push(`- ${tool.name}(${paramKeys}): ${tool.description}`);
+      }
+      parts.push('');
+    }
+
+    parts.push(`GOAL: ${goal}`);
+
+    return parts.join('\n');
+  }
+
+  /**
+   * Build a normalized step result object.
+   *
+   * @param {number} step
+   * @param {string} type
+   * @param {object} data
+   * @returns {AgentStepResult}
+   */
+  _buildStepResult(step, type, data = {}) {
+    return {
+      step,
+      type,
+      content: data.content ?? null,
+      toolResults: data.toolResults ?? null,
+      usage: data.usage ?? null,
+      reason: data.reason ?? null,
+      elapsed: data.elapsed ?? 0,
+    };
+  }
+
+  /**
+   * Emit an ai:agent:step event.
+   */
+  _emitStep(runId, result) {
+    this._eventBus.emit('ai:agent:step', {
+      runId,
+      ...result,
+    }, { appName: 'wu-ai' });
+  }
+
+  /**
+   * Safely invoke a callback, swallowing errors so the agent loop
+   * is never broken by a faulty onStep handler.
+   */
+  async _safeCallback(fn, ...args) {
+    try {
+      const result = fn(...args);
+      if (result && typeof result.then === 'function') {
+        await result;
+      }
+    } catch (err) {
+      logger.wuDebug(`[wu-ai] Agent callback error: ${err.message}`);
+    }
+  }
+
+  /**
+   * Generate a unique namespace for an agent run.
+   */
+  _generateNamespace() {
+    return AGENT_NAMESPACE_PREFIX + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 6);
+  }
+
+  /**
+   * Generate a unique run ID.
+   */
+  _generateRunId() {
+    return 'run_' + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 8);
+  }
+}
+
+/**
+ * WU-AI Browser Primitives
+ *
+ * Shared browser capabilities used by both wu-ai-browser.js (Paradigm 1/2)
+ * and wu-mcp-bridge.js (Paradigm 3). Single source of truth to avoid
+ * duplicating interceptors, DOM traversal, and Canvas rendering.
+ */
+
+// ── Shared capture buffers (singleton) ──
+
+const networkLog = [];
+const MAX_NETWORK_LOG = 300;
+const consoleLog = [];
+const MAX_CONSOLE_LOG = 500;
+
+let _interceptorsInstalled = false;
+
+/**
+ * Install network + console interceptors (idempotent — only runs once).
+ */
+function ensureInterceptors() {
+  if (_interceptorsInstalled) return;
+  _installNetworkInterceptor();
+  _installConsoleInterceptor();
+  _interceptorsInstalled = true;
+}
+
+/**
+ * Build an accessibility tree representation of a DOM element.
+ * Traverses into Shadow DOM if present.
+ */
+function buildA11yTree(el, depth = 0, maxDepth = 5) {
+  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;
+}
+
+/**
+ * Recursively inline computed styles from source to clone 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]);
+  }
+}
+
+/**
+ * Capture a screenshot of a DOM element via Canvas API (SVG foreignObject).
+ * @returns {Promise<{ width, height, format, base64, sizeKB } | { error: string }>}
+ */
+async function captureScreenshot(selector, quality = 0.8) {
+  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));
+
+  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', quality));
+    };
+    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),
+  };
+}
+
+/**
+ * Click an element by CSS selector or visible text content.
+ * @returns {{ clicked, text } | { error }}
+ */
+function clickElement(selector, text) {
+  let el = null;
+
+  if (selector) {
+    el = document.querySelector(selector);
+  }
+
+  if (!el && text) {
+    const candidates = document.querySelectorAll(
+      'button, a, [role="button"], input[type="submit"], input[type="button"], [data-click], label, [onclick]'
+    );
+    const searchText = text.toLowerCase();
+    for (const candidate of candidates) {
+      if (candidate.textContent?.trim().toLowerCase().includes(searchText)) {
+        el = candidate;
+        break;
+      }
+    }
+  }
+
+  if (!el) return { error: `Element not found: ${selector || `text="${text}"`}` };
+
+  el.scrollIntoView({ behavior: 'instant', block: 'center' });
+  el.click();
+
+  const tag = el.tagName?.toLowerCase();
+  const id = el.id ? `#${el.id}` : '';
+  return {
+    clicked: `${tag}${id}`,
+    text: el.textContent?.trim().slice(0, 100) || '',
+    rect: el.getBoundingClientRect().toJSON?.() || null,
+  };
+}
+
+/**
+ * Type into an input, textarea, or contenteditable element.
+ * Works with React, Vue, Angular, and other frameworks.
+ * @returns {{ selector, typed, currentValue, submitted } | { error }}
+ */
+function typeIntoElement(selector, text, { clear = false, submit = false } = {}) {
+  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}` };
+
+  el.focus();
+
+  if (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 = clear ? text : (el.value || '') + 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 (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,
+  };
+}
+
+/**
+ * Filter and return network log entries.
+ */
+function getFilteredNetwork(method, status, limit = 30) {
+  let filtered = networkLog;
+  if (method) {
+    filtered = filtered.filter((r) => r.method === 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,
+    showing: Math.min(filtered.length, limit),
+  };
+}
+
+/**
+ * Filter and return console log entries.
+ */
+function getFilteredConsole(level, limit = 30) {
+  const filtered = level && level !== 'all'
+    ? consoleLog.filter((m) => m.level === level)
+    : consoleLog;
+  return {
+    messages: filtered.slice(-limit),
+    total: consoleLog.length,
+    showing: Math.min(filtered.length, limit),
+  };
+}
+
+// ── Private: Interceptors ──
+
+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);
+  };
+}
+
+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);
+    };
+  }
+}
+
+/**
+ * WU-AI-ORCHESTRATE: Cross-Micro-App AI Coordination (Paradigm 4)
+ *
+ * The fourth paradigm of wu.ai:
+ *   Paradigm 1 — App sends messages to LLM (conversation)
+ *   Paradigm 2 — External LLM calls into app (tools/WebMCP)
+ *   Paradigm 3 — AI as autonomous director (agent loop)
+ *   Paradigm 4 — AI as microfrontend glue (this file)
+ *
+ * The Problem:
+ *   In microfrontend architectures, apps are isolated by design.
+ *   Cross-app coordination requires manual wiring through events
+ *   and shared state. As apps grow, wiring becomes n² complexity.
+ *
+ * The Solution:
+ *   Each micro-app declares its capabilities to the AI layer.
+ *   The AI understands the semantic meaning of each capability
+ *   and can resolve natural-language intents by calling the right
+ *   actions across the right apps — without tight coupling.
+ *
+ * Key Concepts:
+ *   - Capability: An action scoped to a specific micro-app
+ *     Registered as 'appName:actionName', cleaned up on unmount.
+ *   - Intent: A natural-language cross-app request resolved in
+ *     a single conversation turn with an orchestrator system prompt.
+ *   - Capability Map: The AI's understanding of system topology —
+ *     which apps exist and what each can do.
+ *
+ * This module does NOT replace actions, triggers, or agents.
+ * It enriches them with cross-app topology awareness.
+ *
+ * API (accessible via wu.ai):
+ *   wu.ai.capability(app, name, config)   → Register app-scoped capability
+ *   wu.ai.intent(description, options)    → Resolve cross-app intent
+ *   wu.ai.removeApp(appName)              → Cleanup on unmount
+ *   wu.ai.workflow(name, config)          → Register reusable AI workflow
+ *   wu.ai.runWorkflow(name, params, opts) → Execute a registered workflow
+ */
+
+
+// ─── Constants ──────────────────────────────────────────────────
+
+const INTENT_NAMESPACE_PREFIX = 'intent:';
+
+// ─── Deterministic Step Actions ─────────────────────────────────
+
+/**
+ * Execute a single deterministic workflow step.
+ * No AI needed — directly calls browser primitives.
+ *
+ * @param {object} step - Step definition
+ * @param {string} step.action - 'click' | 'type' | 'navigate' | 'wait' | 'emit' | 'setState'
+ * @param {object} params - Interpolated params
+ * @returns {{ success: boolean, detail?: string, error?: string }}
+ */
+function executeDeterministicStep(step, eventBus, store) {
+  switch (step.action) {
+    case 'click': {
+      const result = clickElement(step.selector, step.text);
+      if (result.error) return { success: false, error: result.error };
+      return { success: true, detail: `Clicked: ${step.selector || step.text}` };
+    }
+
+    case 'type': {
+      const result = typeIntoElement(step.selector, step.value, {
+        clear: step.clear ?? true,
+        submit: step.submit ?? false,
+      });
+      if (result.error) return { success: false, error: result.error };
+      return { success: true, detail: `Typed "${step.value}" into ${step.selector}` };
+    }
+
+    case 'navigate': {
+      if (eventBus && step.section) {
+        eventBus.emit('nav:section', { section: step.section }, { appName: 'wu-ai' });
+        return { success: true, detail: `Navigated to section: ${step.section}` };
+      }
+      if (step.selector) {
+        const result = clickElement(step.selector, step.text);
+        if (result.error) return { success: false, error: result.error };
+        return { success: true, detail: `Navigated via click: ${step.selector}` };
+      }
+      return { success: false, error: 'navigate requires "section" or "selector"' };
+    }
+
+    case 'wait': {
+      // Wait is handled by the runner (delay + optional selector poll)
+      return { success: true, detail: `Wait: ${step.ms || 0}ms` };
+    }
+
+    case 'emit': {
+      if (!eventBus) return { success: false, error: 'eventBus not available' };
+      eventBus.emit(step.event, step.data || {}, { appName: 'wu-ai' });
+      return { success: true, detail: `Emitted: ${step.event}` };
+    }
+
+    case 'setState': {
+      if (!store) return { success: false, error: 'store not available' };
+      store.set(step.path, step.value);
+      return { success: true, detail: `Set state: ${step.path}` };
+    }
+
+    default:
+      return { success: false, error: `Unknown action: ${step.action}` };
+  }
+}
+
+/**
+ * Wait for a selector to appear in the DOM (with timeout).
+ *
+ * @param {string} selector
+ * @param {number} timeout - ms
+ * @returns {Promise<boolean>}
+ */
+function waitForSelector(selector, timeout = 5000) {
+  return new Promise((resolve) => {
+    if (document.querySelector(selector)) {
+      resolve(true);
+      return;
+    }
+
+    const interval = 100;
+    let elapsed = 0;
+    const timer = setInterval(() => {
+      elapsed += interval;
+      if (document.querySelector(selector)) {
+        clearInterval(timer);
+        resolve(true);
+      } else if (elapsed >= timeout) {
+        clearInterval(timer);
+        resolve(false);
+      }
+    }, interval);
+  });
+}
+
+/**
+ * Simple delay.
+ */
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// ─── WuAIOrchestrate ────────────────────────────────────────────
+
+class WuAIOrchestrate {
+  /**
+   * @param {object} deps
+   * @param {import('./wu-ai-actions.js').WuAIActions} deps.actions
+   * @param {import('./wu-ai-conversation.js').WuAIConversation} deps.conversation
+   * @param {import('./wu-ai-context.js').WuAIContext} deps.context
+   * @param {import('./wu-ai-permissions.js').WuAIPermissions} deps.permissions
+   * @param {object} deps.eventBus
+   */
+  constructor({ actions, conversation, context, permissions, eventBus, agent, store }) {
+    this._actions = actions;
+    this._conversation = conversation;
+    this._context = context;
+    this._permissions = permissions;
+    this._eventBus = eventBus;
+    this._agent = agent; // WuAIAgent — for workflow execution
+    this._store = store; // WuStore — for deterministic setState steps
+
+    // appName → Map<actionName, { description, qualifiedName }>
+    this._capabilities = new Map();
+
+    // name → { goal, steps, parameters, provider, ... }
+    this._workflows = new Map();
+
+    this._config = {
+      defaultProvider: null,
+      defaultTemperature: 0.3, // lower temp for orchestration
+    };
+
+    this._stats = {
+      totalIntents: 0,
+      resolvedIntents: 0,
+      failedIntents: 0,
+      workflowsRegistered: 0,
+      workflowsExecuted: 0,
+    };
+  }
+
+  /**
+   * Post-init configuration.
+   *
+   * @param {object} config
+   * @param {string} [config.defaultProvider] - Default provider for intents
+   * @param {number} [config.defaultTemperature] - Default temperature for intents
+   */
+  configure(config) {
+    if (config.defaultProvider !== undefined) this._config.defaultProvider = config.defaultProvider;
+    if (config.defaultTemperature !== undefined) this._config.defaultTemperature = config.defaultTemperature;
+  }
+
+  // ─── Capability Registration ────────────────────────────────────
+
+  /**
+   * Register a capability scoped to a micro-app.
+   *
+   * Under the hood this registers a normal action with the qualified
+   * name 'appName:actionName' so the LLM can call it directly.
+   * The capability map is tracked separately for lifecycle management
+   * (removeApp) and system prompt enrichment.
+   *
+   * @param {string} appName - The micro-app name (e.g., 'orders', 'dashboard')
+   * @param {string} actionName - The capability name (e.g., 'getRecent', 'updateKPIs')
+   * @param {object} config - Same as wu.ai.action() config:
+   *   { description, parameters, handler, confirm?, permissions?, dangerous? }
+   */
+  register(appName, actionName, config) {
+    if (!appName || !actionName) {
+      throw new Error('[wu-ai] capability() requires both appName and actionName');
+    }
+    if (!config || typeof config.handler !== 'function') {
+      throw new Error(`[wu-ai] capability '${appName}:${actionName}' must have a handler function`);
+    }
+
+    const qualifiedName = `${appName}:${actionName}`;
+
+    // Track in capability map
+    if (!this._capabilities.has(appName)) {
+      this._capabilities.set(appName, new Map());
+    }
+    this._capabilities.get(appName).set(actionName, {
+      description: config.description || actionName,
+      qualifiedName,
+    });
+
+    // Register as a normal action with enriched description
+    this._actions.register(qualifiedName, {
+      ...config,
+      description: `[${appName}] ${config.description || actionName}`,
+    });
+
+    logger.wuDebug(`[wu-ai] Capability registered: ${qualifiedName}`);
+  }
+
+  /**
+   * Remove a single capability.
+   *
+   * @param {string} appName
+   * @param {string} actionName
+   */
+  unregister(appName, actionName) {
+    const appCaps = this._capabilities.get(appName);
+    if (!appCaps) return;
+
+    const qualifiedName = `${appName}:${actionName}`;
+    appCaps.delete(actionName);
+    this._actions.unregister(qualifiedName);
+
+    // Clean up empty app entry
+    if (appCaps.size === 0) {
+      this._capabilities.delete(appName);
+    }
+  }
+
+  /**
+   * Remove all capabilities for a micro-app (unmount cleanup).
+   *
+   * Call this when a micro-app is unmounted to prevent stale
+   * capabilities from appearing in the AI's capability map.
+   *
+   * @param {string} appName
+   * @returns {number} Number of capabilities removed
+   */
+  removeApp(appName) {
+    const appCaps = this._capabilities.get(appName);
+    if (!appCaps) return 0;
+
+    let removed = 0;
+    for (const [actionName] of appCaps) {
+      const qualifiedName = `${appName}:${actionName}`;
+      this._actions.unregister(qualifiedName);
+      removed++;
+    }
+
+    this._capabilities.delete(appName);
+
+    logger.wuDebug(`[wu-ai] All capabilities removed for app '${appName}' (${removed})`);
+
+    this._eventBus.emit('ai:app:removed', {
+      appName,
+      capabilitiesRemoved: removed,
+    }, { appName: 'wu-ai' });
+
+    return removed;
+  }
+
+  // ─── Capability Map ─────────────────────────────────────────────
+
+  /**
+   * Get the full capability map grouped by app.
+   *
+   * Used for system prompt enrichment and debugging.
+   *
+   * @returns {object} { appName: [{ action, description }], ... }
+   */
+  getCapabilityMap() {
+    const map = {};
+    for (const [appName, actions] of this._capabilities) {
+      map[appName] = [];
+      for (const [, meta] of actions) {
+        map[appName].push({
+          action: meta.qualifiedName,
+          description: meta.description,
+        });
+      }
+    }
+    return map;
+  }
+
+  /**
+   * Get app names that have registered capabilities.
+   *
+   * @returns {string[]}
+   */
+  getRegisteredApps() {
+    return [...this._capabilities.keys()];
+  }
+
+  /**
+   * Check if an app has registered capabilities.
+   *
+   * @param {string} appName
+   * @returns {boolean}
+   */
+  hasApp(appName) {
+    return this._capabilities.has(appName);
+  }
+
+  /**
+   * Get the total number of registered capabilities across all apps.
+   *
+   * @returns {number}
+   */
+  getTotalCapabilities() {
+    let count = 0;
+    for (const actions of this._capabilities.values()) {
+      count += actions.size;
+    }
+    return count;
+  }
+
+  // ─── Intent Resolution ──────────────────────────────────────────
+
+  /**
+   * Resolve a cross-app intent in a single conversation turn.
+   *
+   * The AI receives:
+   *   - The full capability map (what each app can do)
+   *   - Current application state (via context)
+   *   - Mounted apps list
+   *   - All registered tools (capabilities are tools)
+   *
+   * Unlike agent(), this is NOT a multi-step autonomous loop.
+   * The LLM resolves the intent in one logical request (which may
+   * include multiple tool calls within the conversation's tool-call
+   * loop, but conceptually is a single turn).
+   *
+   * Unlike send(), the namespace is ephemeral and auto-cleaned,
+   * and the system prompt is auto-built with the capability map.
+   *
+   * @param {string} description - Natural language intent
+   *   e.g., "Show me the top customer by order count"
+   *   e.g., "Update dashboard stats and notify the topbar"
+   * @param {object} [options]
+   * @param {string[]} [options.plan] - Optional action sequence hint.
+   *   The AI uses this as guidance but can deviate if needed.
+   *   e.g., ['orders:getRecent', 'customers:lookup']
+   * @param {string} [options.provider] - LLM provider override
+   * @param {number} [options.temperature] - Temperature override
+   * @param {number} [options.maxTokens] - Max tokens override
+   * @param {AbortSignal} [options.signal] - Abort signal
+   * @param {string|object} [options.responseFormat] - Response format
+   * @returns {Promise<{
+   *   content: string,
+   *   tool_results: Array,
+   *   usage: object|null,
+   *   resolved: boolean,
+   *   appsInvolved: string[]
+   * }>}
+   */
+  async resolve(description, options = {}) {
+    if (!description || typeof description !== 'string') {
+      throw new Error('[wu-ai] intent() requires a description string');
+    }
+
+    this._stats.totalIntents++;
+    const namespace = this._generateNamespace();
+
+    // Collect fresh context before building the prompt
+    if (this._context) {
+      try {
+        await this._context.collect();
+      } catch {
+        // Context collection is best-effort
+      }
+    }
+
+    const systemPrompt = this._buildOrchestratorPrompt(options);
+
+    this._eventBus.emit('ai:intent:start', {
+      description: description.slice(0, 200),
+      namespace,
+      capabilities: this.getTotalCapabilities(),
+    }, { appName: 'wu-ai' });
+
+    try {
+      const response = await this._conversation.send(description, {
+        namespace,
+        systemPrompt,
+        provider: options.provider || this._config.defaultProvider,
+        temperature: options.temperature ?? this._config.defaultTemperature,
+        maxTokens: options.maxTokens,
+        signal: options.signal,
+        responseFormat: options.responseFormat,
+      });
+
+      const toolResults = response.tool_results || [];
+      const appsInvolved = this._extractInvolvedApps(toolResults);
+      const resolved = !!(response.content);
+
+      if (resolved) {
+        this._stats.resolvedIntents++;
+      } else {
+        this._stats.failedIntents++;
+      }
+
+      const result = {
+        content: response.content || '',
+        tool_results: toolResults,
+        usage: response.usage || null,
+        resolved,
+        appsInvolved,
+      };
+
+      this._eventBus.emit('ai:intent:resolved', {
+        description: description.slice(0, 200),
+        resolved,
+        appsInvolved,
+      }, { appName: 'wu-ai' });
+
+      return result;
+    } catch (err) {
+      this._stats.failedIntents++;
+
+      this._eventBus.emit('ai:intent:error', {
+        description: description.slice(0, 200),
+        error: err.message,
+      }, { appName: 'wu-ai' });
+
+      throw err;
+    } finally {
+      // Always clean up the ephemeral namespace
+      this._conversation.deleteNamespace(namespace);
+    }
+  }
+
+  // ─── System Prompt Builder ──────────────────────────────────────
+
+  /**
+   * Build the orchestrator system prompt with full capability map.
+   *
+   * This method is also available to other modules (triggers, agents)
+   * that want capability-aware system prompts.
+   *
+   * @param {object} [options]
+   * @param {string[]} [options.plan] - Optional action sequence hint
+   * @returns {string}
+   */
+  buildOrchestratorPrompt(options = {}) {
+    return this._buildOrchestratorPrompt(options);
+  }
+
+  /** @private */
+  _buildOrchestratorPrompt(options = {}) {
+    const parts = [];
+
+    parts.push(
+      'You are an AI orchestrator for a microfrontend application.',
+      'Multiple independent apps are mounted, each with specific capabilities.',
+      'Resolve cross-app requests by calling the right capabilities in the right order.',
+      '',
+      'RULES:',
+      '- Call capabilities (tools) to gather data or trigger actions.',
+      '- You may call multiple capabilities from different apps if needed.',
+      '- Synthesize results into a clear, actionable response.',
+      '- If a required app is not available or lacks a capability, explain what is missing.',
+      '',
+    );
+
+    // Capability map
+    const capMap = this.getCapabilityMap();
+    const appNames = Object.keys(capMap);
+
+    if (appNames.length > 0) {
+      parts.push('CAPABILITY MAP:');
+      for (const appName of appNames) {
+        parts.push(`  ${appName}:`);
+        for (const cap of capMap[appName]) {
+          parts.push(`    - ${cap.action}: ${cap.description}`);
+        }
+      }
+      parts.push('');
+    } else {
+      parts.push(
+        'NOTE: No app capabilities are registered. Answer based on available context only.',
+        '',
+      );
+    }
+
+    // Optional plan hint
+    if (options.plan && options.plan.length > 0) {
+      parts.push(
+        'SUGGESTED PLAN (follow this unless a better approach is evident):',
+      );
+      for (let i = 0; i < options.plan.length; i++) {
+        parts.push(`  ${i + 1}. ${options.plan[i]}`);
+      }
+      parts.push('');
+    }
+
+    // Context snapshot (state, mounted apps)
+    const snapshot = this._context?.getSnapshot();
+    if (snapshot?._mountedApps?.length) {
+      parts.push(`MOUNTED APPS: ${snapshot._mountedApps.join(', ')}`, '');
+    }
+    if (snapshot?._store && Object.keys(snapshot._store).length > 0) {
+      parts.push(
+        'CURRENT STATE:',
+        JSON.stringify(snapshot._store, null, 2),
+        '',
+      );
+    }
+
+    return parts.join('\n');
+  }
+
+  // ─── Workflows ─────────────────────────────────────────────────
+
+  /**
+   * Register a reusable AI workflow.
+   *
+   * A workflow is a named, parameterized recipe that the AI agent
+   * follows step by step. Think of it as a macro: you define it once,
+   * then run it whenever you need with different parameters.
+   *
+   * The AI receives the steps as instructions and uses browser actions
+   * (screenshot, click, type) plus any registered capabilities/actions
+   * to execute them. You can watch every step in real time.
+   *
+   * @param {string} name - Workflow name (e.g., 'register-user')
+   * @param {object} config
+   * @param {string} config.description - What this workflow does
+   * @param {string[]} config.steps - Step-by-step instructions for the AI
+   * @param {object} [config.parameters] - Parameter definitions for interpolation
+   *   e.g., { name: { type: 'string', required: true }, email: { type: 'string' } }
+   * @param {number} [config.maxSteps=15] - Max agent steps allowed
+   * @param {string} [config.provider] - LLM provider to use
+   * @param {number} [config.temperature] - Temperature (default: 0.2 for precision)
+   *
+   * @example
+   * // ── AI Mode (default): steps are natural language ──
+   * wu.ai.workflow('register-user', {
+   *   description: 'Register a new user in the system',
+   *   steps: [
+   *     'Navigate to the Customers section',
+   *     'Click the "Add Customer" button',
+   *     'Fill in the name field with {{name}}',
+   *     'Click Submit',
+   *   ],
+   *   parameters: { name: { type: 'string', required: true } },
+   * });
+   *
+   * // ── Deterministic Mode: steps are exact actions, NO AI NEEDED ──
+   * wu.ai.workflow('register-user', {
+   *   mode: 'deterministic',
+   *   description: 'Register a new user',
+   *   steps: [
+   *     { action: 'navigate', section: 'customers' },
+   *     { action: 'click', selector: '#add-customer-btn' },
+   *     { action: 'type', selector: '#name', value: '{{name}}' },
+   *     { action: 'type', selector: '#email', value: '{{email}}' },
+   *     { action: 'click', selector: '#submit-btn' },
+   *     { action: 'wait', selector: '.success-message', timeout: 5000 },
+   *   ],
+   *   parameters: {
+   *     name: { type: 'string', required: true },
+   *     email: { type: 'string', required: true },
+   *   },
+   * });
+   */
+  registerWorkflow(name, config) {
+    if (!name) {
+      throw new Error('[wu-ai] workflow() requires a name');
+    }
+    if (!config || !config.steps || !Array.isArray(config.steps) || config.steps.length === 0) {
+      throw new Error(`[wu-ai] workflow '${name}' must have a non-empty steps array`);
+    }
+
+    // Detect mode: if steps are objects with 'action', it's deterministic
+    const mode = config.mode || (
+      config.steps.length > 0 && typeof config.steps[0] === 'object' && config.steps[0].action
+        ? 'deterministic'
+        : 'ai'
+    );
+
+    this._workflows.set(name, {
+      description: config.description || name,
+      steps: config.steps,
+      mode,
+      parameters: config.parameters || {},
+      maxSteps: config.maxSteps ?? 15,
+      provider: config.provider || null,
+      temperature: config.temperature ?? 0.2,
+    });
+
+    this._stats.workflowsRegistered++;
+
+    logger.wuDebug(`[wu-ai] Workflow registered: '${name}' (${config.steps.length} steps)`);
+  }
+
+  /**
+   * Execute a registered workflow with parameters.
+   *
+   * Returns an async generator (like agent) — you iterate over it
+   * to observe each step in real time.
+   *
+   * @param {string} name - Workflow name
+   * @param {object} [params={}] - Parameters to interpolate into steps
+   *   e.g., { name: 'Juan Pérez', email: 'juan@test.com' }
+   * @param {object} [options={}]
+   * @param {Function} [options.onStep] - Callback per step
+   * @param {Function} [options.shouldContinue] - Human-in-the-loop gate
+   * @param {AbortSignal} [options.signal] - Abort signal
+   * @returns {AsyncGenerator<AgentStepResult>}
+   *
+   * @example
+   * for await (const step of wu.ai.runWorkflow('register-user', {
+   *   name: 'Juan Pérez',
+   *   email: 'juan@test.com',
+   * })) {
+   *   console.log(`Paso ${step.step}: ${step.content}`);
+   *   if (step.type === 'done') console.log('Workflow completado!');
+   * }
+   *
+   * // With human approval per step:
+   * for await (const step of wu.ai.runWorkflow('register-user', params, {
+   *   shouldContinue: (step) => confirm(`¿Continuar? ${step.content?.slice(0, 60)}`),
+   * })) {
+   *   renderStep(step);
+   * }
+   */
+  async *executeWorkflow(name, params = {}, options = {}) {
+    const workflow = this._workflows.get(name);
+    if (!workflow) {
+      throw new Error(`[wu-ai] Workflow '${name}' is not registered`);
+    }
+
+    // Validate required parameters
+    for (const [paramName, paramConfig] of Object.entries(workflow.parameters)) {
+      if (paramConfig.required && (params[paramName] === undefined || params[paramName] === null)) {
+        throw new Error(`[wu-ai] Workflow '${name}' requires parameter '${paramName}'`);
+      }
+    }
+
+    this._stats.workflowsExecuted++;
+
+    // Branch on mode
+    if (workflow.mode === 'deterministic') {
+      yield* this._executeDeterministic(name, workflow, params, options);
+    } else {
+      yield* this._executeWithAgent(name, workflow, params, options);
+    }
+  }
+
+  /**
+   * Execute workflow using the AI agent (natural language steps).
+   * @private
+   */
+  async *_executeWithAgent(name, workflow, params, options) {
+    if (!this._agent) {
+      throw new Error('[wu-ai] Agent module not available for workflow execution');
+    }
+
+    // Interpolate parameters into string steps
+    const interpolatedSteps = workflow.steps.map(step => {
+      let result = step;
+      for (const [key, value] of Object.entries(params)) {
+        result = result.replace(new RegExp(`\\{\\{${key}\\}\\}`, 'g'), String(value));
+      }
+      return result;
+    });
+
+    const goal = this._buildWorkflowGoal(workflow, interpolatedSteps, params);
+
+    this._eventBus.emit('ai:workflow:start', {
+      workflow: name,
+      mode: 'ai',
+      params,
+      steps: interpolatedSteps.length,
+    }, { appName: 'wu-ai' });
+
+    let finalStep = null;
+
+    try {
+      yield* this._agent.run(goal, {
+        maxSteps: workflow.maxSteps,
+        provider: options.provider || workflow.provider || this._config.defaultProvider,
+        temperature: workflow.temperature ?? 0.2,
+        onStep: (step) => {
+          finalStep = step;
+          if (options.onStep) options.onStep(step);
+        },
+        shouldContinue: options.shouldContinue,
+        signal: options.signal,
+      });
+    } finally {
+      this._eventBus.emit('ai:workflow:done', {
+        workflow: name,
+        params,
+        totalSteps: finalStep?.step || 0,
+        result: finalStep?.type || 'unknown',
+      }, { appName: 'wu-ai' });
+    }
+  }
+
+  /**
+   * Execute workflow deterministically — NO AI NEEDED.
+   * Steps are exact actions: { action: 'click', selector: '#btn' }
+   * @private
+   */
+  async *_executeDeterministic(name, workflow, params, options) {
+    // Interpolate parameters into step values
+    const steps = workflow.steps.map(step => {
+      const interpolated = { ...step };
+      for (const [key, value] of Object.entries(params)) {
+        const pattern = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
+        for (const field of ['value', 'selector', 'text', 'section', 'event', 'path']) {
+          if (typeof interpolated[field] === 'string') {
+            interpolated[field] = interpolated[field].replace(pattern, String(value));
+          }
+        }
+      }
+      return interpolated;
+    });
+
+    this._eventBus?.emit('ai:workflow:start', {
+      workflow: name,
+      mode: 'deterministic',
+      params,
+      steps: steps.length,
+    }, { appName: 'wu-ai' });
+
+    let lastStep = null;
+
+    try {
+      for (let i = 0; i < steps.length; i++) {
+        const step = steps[i];
+        const stepNum = i + 1;
+        const startTime = Date.now();
+
+        // Check abort
+        if (options.signal?.aborted) {
+          const result = {
+            step: stepNum,
+            type: 'aborted',
+            content: 'Workflow aborted',
+            reason: 'Aborted by caller',
+            elapsed: 0,
+          };
+          lastStep = result;
+          yield result;
+          return;
+        }
+
+        // Handle 'wait' specially — it's async
+        if (step.action === 'wait') {
+          if (step.selector) {
+            const found = await waitForSelector(step.selector, step.timeout || 5000);
+            const elapsed = Date.now() - startTime;
+            const result = {
+              step: stepNum,
+              type: found ? 'action' : 'error',
+              content: found
+                ? `Waited for "${step.selector}" — found`
+                : `Timeout waiting for "${step.selector}"`,
+              elapsed,
+            };
+            lastStep = result;
+            if (options.onStep) options.onStep(result);
+            yield result;
+            if (!found) return; // stop on timeout
+          } else if (step.ms) {
+            await delay(step.ms);
+            const result = {
+              step: stepNum,
+              type: 'action',
+              content: `Waited ${step.ms}ms`,
+              elapsed: step.ms,
+            };
+            lastStep = result;
+            if (options.onStep) options.onStep(result);
+            yield result;
+          }
+          continue;
+        }
+
+        // Execute the step
+        const execResult = executeDeterministicStep(step, this._eventBus, this._store);
+        const elapsed = Date.now() - startTime;
+
+        const stepResult = {
+          step: stepNum,
+          type: execResult.success ? 'action' : 'error',
+          content: execResult.success ? execResult.detail : execResult.error,
+          elapsed,
+        };
+
+        lastStep = stepResult;
+        if (options.onStep) options.onStep(stepResult);
+        yield stepResult;
+
+        // Human-in-the-loop gate
+        if (options.shouldContinue) {
+          let shouldGo;
+          try {
+            shouldGo = await options.shouldContinue(stepResult);
+          } catch {
+            shouldGo = false;
+          }
+          if (!shouldGo) {
+            const interrupted = {
+              step: stepNum,
+              type: 'interrupted',
+              content: 'Stopped by user',
+              reason: 'shouldContinue returned false',
+              elapsed: 0,
+            };
+            lastStep = interrupted;
+            yield interrupted;
+            return;
+          }
+        }
+
+        // Stop on error
+        if (!execResult.success) return;
+
+        // Small delay between steps for UI to update
+        if (i < steps.length - 1) {
+          await delay(step.delay ?? 200);
+        }
+      }
+
+      // All steps completed
+      const done = {
+        step: steps.length,
+        type: 'done',
+        content: `Workflow "${name}" completed (${steps.length} steps)`,
+        reason: 'All steps executed',
+        elapsed: 0,
+      };
+      lastStep = done;
+      if (options.onStep) options.onStep(done);
+      yield done;
+
+    } finally {
+      this._eventBus?.emit('ai:workflow:done', {
+        workflow: name,
+        mode: 'deterministic',
+        params,
+        totalSteps: lastStep?.step || 0,
+        result: lastStep?.type || 'unknown',
+      }, { appName: 'wu-ai' });
+    }
+  }
+
+  /**
+   * Check if a workflow is registered.
+   *
+   * @param {string} name
+   * @returns {boolean}
+   */
+  hasWorkflow(name) {
+    return this._workflows.has(name);
+  }
+
+  /**
+   * Get a workflow definition.
+   *
+   * @param {string} name
+   * @returns {object|null}
+   */
+  getWorkflow(name) {
+    const w = this._workflows.get(name);
+    if (!w) return null;
+    return {
+      description: w.description,
+      steps: [...w.steps],
+      mode: w.mode,
+      parameters: { ...w.parameters },
+      maxSteps: w.maxSteps,
+    };
+  }
+
+  /**
+   * Remove a registered workflow.
+   *
+   * @param {string} name
+   */
+  removeWorkflow(name) {
+    this._workflows.delete(name);
+  }
+
+  /**
+   * Get all workflow names.
+   *
+   * @returns {string[]}
+   */
+  getWorkflowNames() {
+    return [...this._workflows.keys()];
+  }
+
+  /** @private */
+  _buildWorkflowGoal(workflow, steps, params) {
+    const parts = [];
+
+    parts.push(
+      `WORKFLOW: ${workflow.description}`,
+      '',
+      'You must follow these steps IN ORDER. Use browser tools (screenshot, click, type)',
+      'to interact with the application. After each step, take a screenshot to verify.',
+      '',
+      'STEPS:',
+    );
+
+    for (let i = 0; i < steps.length; i++) {
+      parts.push(`  ${i + 1}. ${steps[i]}`);
+    }
+
+    parts.push(
+      '',
+      'After completing all steps successfully, respond with [DONE].',
+      'If a step fails, explain what went wrong.',
+    );
+
+    // Add capability context if available
+    const capMap = this.getCapabilityMap();
+    const appNames = Object.keys(capMap);
+    if (appNames.length > 0) {
+      parts.push('', 'AVAILABLE APP CAPABILITIES:');
+      for (const appName of appNames) {
+        for (const cap of capMap[appName]) {
+          parts.push(`  - ${cap.action}: ${cap.description}`);
+        }
+      }
+    }
+
+    return parts.join('\n');
+  }
+
+  // ─── Stats & Lifecycle ──────────────────────────────────────────
+
+  getStats() {
+    return {
+      ...this._stats,
+      registeredApps: this.getRegisteredApps(),
+      totalCapabilities: this.getTotalCapabilities(),
+      capabilityMap: this.getCapabilityMap(),
+      workflows: this.getWorkflowNames(),
+      config: { ...this._config },
+    };
+  }
+
+  destroy() {
+    // Remove all capabilities from the action registry
+    for (const [appName, actions] of this._capabilities) {
+      for (const [actionName] of actions) {
+        this._actions.unregister(`${appName}:${actionName}`);
+      }
+    }
+    this._capabilities.clear();
+    this._workflows.clear();
+
+    this._stats = {
+      totalIntents: 0,
+      resolvedIntents: 0,
+      failedIntents: 0,
+      workflowsRegistered: 0,
+      workflowsExecuted: 0,
+    };
+  }
+
+  // ─── Private Helpers ────────────────────────────────────────────
+
+  /**
+   * Extract app names from tool results based on qualified action names.
+   * e.g., tool name 'orders:getRecent' → app 'orders'
+   */
+  _extractInvolvedApps(toolResults) {
+    if (!toolResults || !Array.isArray(toolResults)) return [];
+    const apps = new Set();
+    for (const result of toolResults) {
+      const name = result.name || result.tool || '';
+      const colonIdx = name.indexOf(':');
+      if (colonIdx > 0) {
+        apps.add(name.slice(0, colonIdx));
+      }
+    }
+    return [...apps];
+  }
+
+  _generateNamespace() {
+    return INTENT_NAMESPACE_PREFIX + Date.now().toString(36) +
+      '_' + Math.random().toString(36).slice(2, 6);
+  }
+}
+
+/**
+ * WU-AI Browser Actions
+ *
+ * Registers browser automation tools into wu.ai so any LLM provider
+ * (OpenAI, Claude, Gemini, Ollama, etc.) can autonomously see and
+ * control the page — no human intervention required.
+ *
+ * Tools registered:
+ *   browser_screenshot  — Capture page/element as PNG (Canvas API)
+ *   browser_click       — Click element by selector or visible text
+ *   browser_type        — Type into inputs (React/Vue/framework compatible)
+ *   browser_snapshot    — Get accessibility tree of the DOM
+ *   browser_navigate    — Navigate SPA routes
+ *   browser_network     — View captured HTTP requests (fetch + XHR)
+ *   browser_console     — View captured console messages
+ *   browser_info        — Get page state: apps, store, URL, viewport
+ *   browser_select      — Select option in dropdowns
+ *   browser_scroll      — Scroll page or element
+ *
+ * @example
+ * // Auto-registered when wu.ai initializes
+ * // Any LLM connected via wu.ai.provider can now use these tools:
+ * const tools = wu.ai.tools();
+ * // → includes browser_screenshot, browser_click, etc.
+ */
+
+
+/**
+ * Register all browser automation actions into a WuAI instance.
+ *
  * @param {object} ai - The WuAI instance (wu.ai)
  * @param {object} wu - The Wu Framework instance (window.wu)
  */
 function registerBrowserActions(ai, wu) {
-  // Install interceptors only once
-  if (!interceptorsInstalled) {
-    _installNetworkInterceptor();
-    _installConsoleInterceptor();
-    interceptorsInstalled = true;
-  }
+  ensureInterceptors();
 
   // ════════════════════════════════════════════
   // SCREENSHOT — Canvas API (SVG foreignObject)
@@ -11427,66 +13521,7 @@ 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: [],
   });
 
@@ -11509,38 +13544,11 @@ 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'],
   });
@@ -11574,50 +13582,14 @@ 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'],
   });
@@ -11747,7 +13719,7 @@ 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: [],
@@ -11791,31 +13763,13 @@ function registerBrowserActions(ai, wu) {
         description: 'Filter: "2" (2xx success), "4" (4xx errors), "5" (5xx errors), "error" (all failures)',
         required: false,
       },
-      limit: {
-        type: 'number',
-        description: 'Max requests to return (default: 30)',
-        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),
-      };
+      limit: {
+        type: 'number',
+        description: 'Max requests to return (default: 30)',
+        required: false,
+      },
     },
+    handler: async (params) => getFilteredNetwork(params.method, params.status, params.limit),
     permissions: [],
   });
 
@@ -11837,17 +13791,7 @@ 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: [],
   });
 
@@ -11895,141 +13839,8 @@ 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.
 
 /**
  * WU-AI: Central orchestrator for AI integration
@@ -12039,19 +13850,35 @@ function _installConsoleInterceptor() {
  *
  * Architecture:
  *   WuAI (this file)
- *     ├── WuAIProvider      → BYOL provider management
- *     ├── WuAIPermissions   → Security, rate limiting, circuit breaker
- *     ├── WuAIContext        → Auto context collection for LLM
- *     ├── WuAIActions        → Tool/action registry and execution
- *     ├── WuAIConversation   → Multi-turn conversation manager
- *     └── WuAITriggers       → Event-to-AI bridge (reactive AI)
+ *     ├── WuAIProvider         → BYOL provider management (OpenAI, Anthropic, Ollama, Custom)
+ *     ├── WuAIPermissions      → 4-layer security (perms, rate limit, circuit breaker, loop guard)
+ *     ├── WuAIContext           → Auto context collection with token budget
+ *     ├── WuAIActions           → Tool/action registry and sandboxed execution
+ *     ├── WuAIConversation      → Multi-turn conversation manager with namespaces
+ *     ├── WuAITriggers          → Event-to-AI reactive bridge
+ *     ├── WuAIAgent             → Autonomous agent loop (goal → steps → done)
+ *     ├── WuAIOrchestrate       → Cross-micro-app AI coordination (capabilities + intents)
+ *     └── BrowserPrimitives     → Shared screenshot, click, type, a11y tree, interceptors
+ *
+ * Four Paradigms:
+ *   1. App → LLM    send/stream/json → conversation with tool loops
+ *   2. LLM → App    tools/execute/expose → external agents call into the app
+ *   3. AI Director  agent(goal) → autonomous multi-step loop
+ *   4. MF Glue      capability/intent → cross-app coordination via AI
  *
  * Public API (accessible via wu.ai):
  *   wu.ai.provider(name, config)   → Register LLM provider
  *   wu.ai.send(message, opts)      → Send message (non-streaming)
  *   wu.ai.stream(message, opts)    → Send message (streaming)
+ *   wu.ai.json(message, schema?)   → Send and get parsed JSON back
+ *   wu.ai.agent(goal, opts)        → Run autonomous agent loop
  *   wu.ai.action(name, config)     → Register an action/tool
  *   wu.ai.trigger(name, config)    → Register an event trigger
+ *   wu.ai.capability(app, name, c) → Register app-scoped capability
+ *   wu.ai.intent(desc, opts)       → Resolve cross-app intent
+ *   wu.ai.removeApp(appName)       → Remove app capabilities (unmount)
+ *   wu.ai.workflow(name, config)   → Register reusable AI workflow
+ *   wu.ai.runWorkflow(name, params)→ Execute workflow (async generator)
  *   wu.ai.context.configure(...)   → Configure context collection
  *   wu.ai.abort(namespace?)        → Abort active request
  *
@@ -12150,10 +13977,38 @@ class WuAI {
       this._modules.triggers.configure(config.triggers);
     }
 
+    // 7. Agent (depends on conversation, actions, context, permissions, eventBus)
+    this._modules.agent = new WuAIAgent({
+      conversation: this._modules.conversation,
+      actions: this._modules.actions,
+      context: this._modules.context,
+      permissions: this._modules.permissions,
+      eventBus: this._eventBus,
+    });
+    if (config.agent) {
+      this._modules.agent.configure(config.agent);
+    }
+
+    // 8. Orchestrate — Paradigm 4: AI as microfrontend glue
+    //    Agent ref is passed so workflows can delegate to the agent loop
+    //    Store ref is passed for deterministic setState steps
+    this._modules.orchestrate = new WuAIOrchestrate({
+      actions: this._modules.actions,
+      conversation: this._modules.conversation,
+      context: this._modules.context,
+      permissions: this._modules.permissions,
+      eventBus: this._eventBus,
+      agent: this._modules.agent,
+      store: this._store,
+    });
+    if (config.orchestrate) {
+      this._modules.orchestrate.configure(config.orchestrate);
+    }
+
     this._initialized = true;
     logger.wuInfo('[wu-ai] Initialized');
 
-    // 7. Browser automation actions (screenshot, click, type, network, etc.)
+    // 9. Browser automation actions (screenshot, click, type, network, etc.)
     // Must be AFTER _initialized = true to prevent recursive init loop
     if (typeof window !== 'undefined') {
       registerBrowserActions(this, this._core);
@@ -12202,7 +14057,12 @@ class WuAI {
    * Send a message to the LLM and get a complete response.
    *
    * @param {string} message - User message
-   * @param {object} [options] - { namespace, systemPrompt, templateVars, temperature, maxTokens, signal }
+   * @param {object} [options] - { namespace, systemPrompt, templateVars, temperature, maxTokens, provider, responseFormat, signal }
+   * @param {string} [options.provider] - Use a specific registered provider (e.g., 'anthropic', 'openai')
+   * @param {string|object} [options.responseFormat] - Request JSON output.
+   *   - `'json'` — simple JSON mode (OpenAI: json_object, Ollama: format:"json", Anthropic: prompt injection)
+   *   - `{ type: 'json_schema', schema: {...}, name?: string }` — structured output with JSON Schema
+   *     (OpenAI: native json_schema mode, Ollama: schema in format, Anthropic: schema in system prompt)
    * @returns {Promise<{ content: string, tool_results?: Array, usage?: object, namespace: string }>}
    *
    * @example
@@ -12211,6 +14071,21 @@ class WuAI {
    *
    * // With namespace for separate conversation
    * const response = await wu.ai.send('Analyze this chart', { namespace: 'analytics' });
+   *
+   * // Use a specific provider for this message
+   * const response = await wu.ai.send('Translate this', { provider: 'anthropic' });
+   *
+   * // Simple JSON mode
+   * const response = await wu.ai.send('List 5 colors', { responseFormat: 'json' });
+   *
+   * // Structured output with JSON Schema
+   * const response = await wu.ai.send('List 5 colors', {
+   *   responseFormat: {
+   *     type: 'json_schema',
+   *     schema: { type: 'object', properties: { colors: { type: 'array', items: { type: 'string' } } } },
+   *     name: 'color_list',
+   *   },
+   * });
    */
   async send(message, options = {}) {
     this._ensureInit();
@@ -12235,6 +14110,71 @@ class WuAI {
     yield* this._modules.conversation.stream(message, options);
   }
 
+  /**
+   * Send a message and get a parsed JSON response.
+   * Shortcut for send() with responseFormat + automatic JSON.parse().
+   *
+   * @param {string} message - User message
+   * @param {object} [options] - All send() options plus:
+   * @param {object} [options.schema] - JSON Schema for structured output
+   * @param {string} [options.schemaName='response'] - Schema name (required by OpenAI)
+   * @returns {Promise<{ data: object|null, raw: string, error?: string, usage?: object, namespace: string }>}
+   *
+   * @example
+   * // Simple JSON (no schema)
+   * const { data } = await wu.ai.json('List 5 colors as a JSON array');
+   * // data = ["red", "blue", ...]
+   *
+   * // With schema
+   * const { data } = await wu.ai.json('List 5 colors', {
+   *   schema: { type: 'object', properties: { colors: { type: 'array', items: { type: 'string' } } } },
+   * });
+   * // data = { colors: ["red", "blue", ...] }
+   *
+   * // With schema + provider
+   * const { data } = await wu.ai.json('List 5 colors', {
+   *   schema: mySchema,
+   *   provider: 'openai',
+   *   temperature: 0,
+   * });
+   */
+  async json(message, options = {}) {
+    this._ensureInit();
+
+    const { schema, schemaName, ...rest } = options;
+
+    let responseFormat;
+    if (schema) {
+      responseFormat = { type: 'json_schema', schema, name: schemaName || 'response' };
+    } else {
+      responseFormat = options.responseFormat || 'json';
+    }
+
+    const response = await this._modules.conversation.send(message, { ...rest, responseFormat });
+
+    // The provider already attempts parse and sets response.parsed / response.parseError
+    let data = null;
+    let error;
+
+    if (response.parsed !== undefined) {
+      data = response.parsed;
+    } else if (response.content) {
+      try {
+        data = JSON.parse(response.content);
+      } catch {
+        error = 'LLM response is not valid JSON';
+      }
+    }
+
+    return {
+      data,
+      raw: response.content || '',
+      error: error || response.parseError,
+      usage: response.usage,
+      namespace: response.namespace,
+    };
+  }
+
   /**
    * Abort active request(s).
    *
@@ -12311,18 +14251,211 @@ class WuAI {
    *   },
    * });
    */
-  trigger(name, config) {
+  trigger(name, config) {
+    this._ensureInit();
+    this._modules.triggers.register(name, config);
+    return this;
+  }
+
+  /**
+   * Fire a trigger manually.
+   */
+  async fireTrigger(name, eventData) {
+    this._ensureInit();
+    return this._modules.triggers.fire(name, eventData);
+  }
+
+  // ─── Agent (Paradigm 3: Autonomous AI) ─────────────────────────
+
+  /**
+   * Run an autonomous agent that pursues a goal using available tools.
+   * Returns an async generator that yields step-by-step results.
+   *
+   * @param {string} goal - What the agent should accomplish
+   * @param {object} [options]
+   * @param {number} [options.maxSteps=10] - Maximum autonomous steps
+   * @param {string} [options.provider] - Which LLM provider to use
+   * @param {string} [options.namespace] - Conversation namespace
+   * @param {string} [options.systemPrompt] - Override system prompt
+   * @param {Function} [options.onStep] - Callback per step: (stepResult) => void
+   * @param {Function} [options.shouldContinue] - Human-in-the-loop: (stepResult) => boolean|Promise<boolean>
+   * @param {AbortSignal} [options.signal] - Abort signal
+   * @returns {AsyncGenerator<AgentStepResult>}
+   *
+   * @example
+   * // Basic usage
+   * for await (const step of wu.ai.agent('Find all orders above $100 and summarize them')) {
+   *   console.log(`Step ${step.step}: ${step.content?.slice(0, 100)}`);
+   *   if (step.done) console.log('Agent finished!');
+   * }
+   *
+   * // With human-in-the-loop
+   * for await (const step of wu.ai.agent('Reorganize the product catalog', {
+   *   shouldContinue: (step) => confirm(`Continue? Step ${step.step}: ${step.content?.slice(0, 50)}`),
+   * })) {
+   *   updateUI(step);
+   * }
+   */
+  async *agent(goal, options = {}) {
+    this._ensureInit();
+    yield* this._modules.agent.run(goal, options);
+  }
+
+  // ─── Paradigm 4: AI as Microfrontend Glue ─────────────────────
+
+  /**
+   * Register a capability scoped to a specific micro-app.
+   *
+   * Each micro-app calls this to declare what it can do. The AI uses
+   * the capability map to resolve cross-app intents.
+   *
+   * @param {string} appName - The micro-app name (e.g., 'orders', 'dashboard')
+   * @param {string} actionName - The capability name (e.g., 'getRecent', 'updateKPIs')
+   * @param {object} config - Same as wu.ai.action() config:
+   *   { description, parameters, handler, confirm?, permissions?, dangerous? }
+   *
+   * @example
+   * // In orders micro-app (React):
+   * wu.ai.capability('orders', 'getRecent', {
+   *   description: 'Get the N most recent orders',
+   *   parameters: { limit: { type: 'number' } },
+   *   handler: async (params) => fetchOrders({ limit: params.limit || 10 }),
+   * });
+   *
+   * // In dashboard micro-app (Svelte):
+   * wu.ai.capability('dashboard', 'updateKPIs', {
+   *   description: 'Refresh the KPI cards with latest data',
+   *   handler: async () => { refreshKPIs(); return { updated: true }; },
+   * });
+   */
+  capability(appName, actionName, config) {
+    this._ensureInit();
+    this._modules.orchestrate.register(appName, actionName, config);
+    return this;
+  }
+
+  /**
+   * Resolve a cross-app intent in a single conversation turn.
+   *
+   * The AI receives the full capability map (what each app can do),
+   * current application state, and mounted apps. It resolves the
+   * intent by calling the right capabilities across app boundaries.
+   *
+   * @param {string} description - Natural language intent
+   * @param {object} [options]
+   * @param {string[]} [options.plan] - Optional action sequence hint
+   * @param {string} [options.provider] - LLM provider override
+   * @param {number} [options.temperature] - Temperature override
+   * @param {number} [options.maxTokens] - Max tokens override
+   * @param {AbortSignal} [options.signal] - Abort signal
+   * @param {string|object} [options.responseFormat] - Response format
+   * @returns {Promise<{ content: string, tool_results: Array, usage: object|null, resolved: boolean, appsInvolved: string[] }>}
+   *
+   * @example
+   * // Simple cross-app query
+   * const result = await wu.ai.intent('Show me the top customer by order count');
+   * // AI calls orders:getRecent → aggregates → returns answer
+   *
+   * // With plan hint
+   * const result = await wu.ai.intent('Update all views after a new order', {
+   *   plan: ['orders:getRecent', 'dashboard:updateKPIs', 'analytics:refresh'],
+   * });
+   *
+   * // With JSON response
+   * const result = await wu.ai.intent('Get order stats by status', {
+   *   responseFormat: 'json',
+   * });
+   */
+  async intent(description, options = {}) {
+    this._ensureInit();
+    return this._modules.orchestrate.resolve(description, options);
+  }
+
+  /**
+   * Remove all capabilities for a micro-app.
+   * Call this when a micro-app is unmounted to prevent stale
+   * capabilities from appearing in the AI's capability map.
+   *
+   * @param {string} appName - The micro-app name
+   *
+   * @example
+   * // In unmount lifecycle:
+   * wu.ai.removeApp('orders');
+   */
+  removeApp(appName) {
+    this._ensureInit();
+    this._modules.orchestrate.removeApp(appName);
+    return this;
+  }
+
+  /**
+   * Register a reusable AI workflow — a named, step-by-step recipe
+   * that the AI agent follows using browser automation.
+   *
+   * @param {string} name - Workflow name (e.g., 'register-user')
+   * @param {object} config
+   * @param {string} config.description - What this workflow does
+   * @param {string[]} config.steps - Step-by-step instructions
+   *   Use {{paramName}} for parameter interpolation.
+   * @param {object} [config.parameters] - Parameter definitions
+   * @param {number} [config.maxSteps=15] - Max agent steps
+   * @param {string} [config.provider] - LLM provider
+   *
+   * @example
+   * wu.ai.workflow('register-user', {
+   *   description: 'Register a new user in the system',
+   *   steps: [
+   *     'Navigate to the Customers section',
+   *     'Click the "Add Customer" button',
+   *     'Type "{{name}}" into the name field',
+   *     'Type "{{email}}" into the email field',
+   *     'Click Submit',
+   *     'Verify the success message appears',
+   *   ],
+   *   parameters: {
+   *     name: { type: 'string', required: true },
+   *     email: { type: 'string', required: true },
+   *   },
+   * });
+   */
+  workflow(name, config) {
     this._ensureInit();
-    this._modules.triggers.register(name, config);
+    this._modules.orchestrate.registerWorkflow(name, config);
     return this;
   }
 
   /**
-   * Fire a trigger manually.
+   * Execute a registered workflow. Returns an async generator
+   * so you can observe each step in real time.
+   *
+   * @param {string} name - Workflow name
+   * @param {object} [params={}] - Parameters to fill into the steps
+   * @param {object} [options={}]
+   * @param {Function} [options.onStep] - Callback per step
+   * @param {Function} [options.shouldContinue] - Human-in-the-loop gate
+   * @param {AbortSignal} [options.signal] - Abort signal
+   * @returns {AsyncGenerator<AgentStepResult>}
+   *
+   * @example
+   * // Run and watch every step
+   * for await (const step of wu.ai.runWorkflow('register-user', {
+   *   name: 'Juan Pérez',
+   *   email: 'juan@test.com',
+   * })) {
+   *   console.log(`Step ${step.step}: ${step.content}`);
+   *   if (step.type === 'done') console.log('Workflow complete!');
+   * }
+   *
+   * // With human approval per step
+   * for await (const step of wu.ai.runWorkflow('register-user', params, {
+   *   shouldContinue: (s) => confirm(`Continue? ${s.content?.slice(0, 60)}`),
+   * })) {
+   *   renderStep(step);
+   * }
    */
-  async fireTrigger(name, eventData) {
+  async *runWorkflow(name, params = {}, options = {}) {
     this._ensureInit();
-    return this._modules.triggers.fire(name, eventData);
+    yield* this._modules.orchestrate.executeWorkflow(name, params, options);
   }
 
   // ─── Context ───────────────────────────────────────────────────
@@ -12461,6 +14594,8 @@ class WuAI {
       actions: this._modules.actions.getStats(),
       conversation: this._modules.conversation.getStats(),
       triggers: this._modules.triggers.getStats(),
+      agent: this._modules.agent.getStats(),
+      orchestrate: this._modules.orchestrate.getStats(),
     };
   }
 
@@ -12470,6 +14605,8 @@ class WuAI {
   destroy() {
     if (!this._initialized) return;
 
+    this._modules.orchestrate.destroy();
+    this._modules.agent.destroy();
     this._modules.conversation.abortAll();
     this._modules.triggers.destroy();
     this._modules = {};
@@ -12495,6 +14632,8 @@ class WuAI {
     if (config.context) this._modules.context.configure(config.context);
     if (config.conversation) this._modules.conversation.configure(config.conversation);
     if (config.triggers) this._modules.triggers.configure(config.triggers);
+    if (config.agent) this._modules.agent.configure(config.agent);
+    if (config.orchestrate) this._modules.orchestrate.configure(config.orchestrate);
   }
 }
 
@@ -12505,14 +14644,21 @@ class WuAI {
  * 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();
  */
 
+
 /**
  * Create the MCP bridge for a Wu instance.
  *
@@ -12523,6 +14669,8 @@ 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;
 
@@ -12530,14 +14678,6 @@ 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) => {
@@ -12551,22 +14691,50 @@ function createMcpBridge(wu) {
     });
   }
 
-  // Capture console messages
-  _interceptConsole();
+  // Install shared interceptors (idempotent — safe if wu-ai-browser already did it)
+  ensureInterceptors();
+
+  // ── 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);
+  }
 
-  // Capture network requests (fetch + XMLHttpRequest)
-  _interceptNetwork();
+  /**
+   * 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,
       };
     },
@@ -12575,45 +14743,55 @@ 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 };
     },
@@ -12621,293 +14799,162 @@ 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 }, { });
       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 }, { });
       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 }, { });
+      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) {
@@ -12935,7 +14982,8 @@ function createMcpBridge(wu) {
       ws.onclose = () => {
         console.log('[wu-mcp-bridge] Disconnected');
         ws = null;
-        _scheduleReconnect(url);
+        authenticated = false;
+        _scheduleReconnect(url, options);
       };
 
       ws.onerror = () => {
@@ -12943,7 +14991,7 @@ function createMcpBridge(wu) {
       };
     } catch (err) {
       console.error('[wu-mcp-bridge] Connection failed:', err.message);
-      _scheduleReconnect(url);
+      _scheduleReconnect(url, options);
     }
   }
 
@@ -12957,10 +15005,11 @@ 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 ──
@@ -12971,15 +15020,14 @@ 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) {
@@ -13007,142 +15055,6 @@ 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 };
 }
 
@@ -13241,12 +15153,12 @@ if (typeof window !== 'undefined') {
   if (!wu.mcp) {
     let _mcpBridge = null;
     wu.mcp = {
-      async connect(url = 'ws://localhost:19100') {
+      async connect(url = 'ws://localhost:19100', options = {}) {
         if (!_mcpBridge) {
           const { createMcpBridge } = await Promise.resolve().then(function () { return wuMcpBridge; });
           _mcpBridge = createMcpBridge(wu);
         }
-        _mcpBridge.connect(url);
+        _mcpBridge.connect(url, options);
       },
       disconnect() {
         _mcpBridge?.disconnect();
@@ -13302,5 +15214,5 @@ const clearOverrides = () => wu.clearOverrides();
 const usePlugin = (plugin, opts) => wu.pluginSystem.use(plugin, opts);
 const useHook = (phase, middleware, opts) => wu.hooks.use(phase, middleware, opts);
 
-export { WuAI, WuAIActions, WuAIContext, WuAIConversation, WuAIPermissions, WuAIProvider, WuAITriggers, WuApp, WuCache, WuCore, WuErrorBoundary, WuEventBus, WuHtmlParser, WuIframeSandbox, WuLifecycleHooks, WuLoader, WuLoadingStrategy, WuManifest, WuOverrides, WuPerformance, WuPluginSystem, WuPrefetch, WuProxySandbox, WuSandbox, WuScriptExecutor, WuSnapshotSandbox, WuStore, WuStyleBridge, app, clearOverrides, createConditionalHook, createGuardHook, createMcpBridge, createPlugin, createSimpleHook, createTimedHook, createTransformHook, wu_default as default, define, destroy, emit, enableAllLogs, endMeasure, generatePerformanceReport, getOverrides, getState, hide, init, isHidden, mount, off, on, onStateChange, once, override, prefetch, prefetchAll, registerBrowserActions, removeOverride, setState, show, silenceAllLogs, startMeasure, store, unmount, useHook, usePlugin, wu };
+export { WuAI, WuAIActions, WuAIAgent, WuAIContext, WuAIConversation, WuAIOrchestrate, WuAIPermissions, WuAIProvider, WuAITriggers, WuApp, WuCache, WuCore, WuErrorBoundary, WuEventBus, WuHtmlParser, WuIframeSandbox, WuLifecycleHooks, WuLoader, WuLoadingStrategy, WuManifest, WuOverrides, WuPerformance, WuPluginSystem, WuPrefetch, WuProxySandbox, WuSandbox, WuScriptExecutor, WuSnapshotSandbox, WuStore, WuStyleBridge, app, buildA11yTree, buildToolSchemas, captureScreenshot, clearOverrides, clickElement, createConditionalHook, createGuardHook, createMcpBridge, createPlugin, createSimpleHook, createTimedHook, createTransformHook, wu_default as default, define, destroy, emit, enableAllLogs, endMeasure, ensureInterceptors, estimateTokens, generatePerformanceReport, getFilteredConsole, getFilteredNetwork, getOverrides, getState, hide, init, interpolate, isHidden, mount, normalizeParameters, off, on, onStateChange, once, override, prefetch, prefetchAll, redactSensitive, registerBrowserActions, removeOverride, sanitizeForPrompt, setState, show, silenceAllLogs, startMeasure, store, truncateToTokenBudget, typeIntoElement, unmount, useHook, usePlugin, validateParams, wu };
 //# sourceMappingURL=wu-framework.dev.js.map