@agent-native/core 0.113.0 → 0.114.0

package/src/extensions/html-shell.ts

@@ -0,0 +1,803 @@
+import { buildSessionReplayIframeBootstrap } from "./session-replay-iframe.js";
+
+const EXTENSION_IFRAME_CSP_BASE =
+  "default-src 'none'; script-src 'self' https://cdn.jsdelivr.net 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src 'self'; img-src 'self' data: blob:; media-src 'self' data: blob:; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none';";
+
+export const EXTENSION_FRAME_ANCESTORS = [
+  "'self'",
+  "https://agent-native.com",
+  "https://*.agent-native.com",
+  "http://localhost:*",
+  "http://127.0.0.1:*",
+  "https://*.claudemcpcontent.com",
+  "https://*.web-sandbox.oaiusercontent.com",
+].join(" ");
+
+export const EXTENSION_IFRAME_CSP = `${EXTENSION_IFRAME_CSP_BASE} frame-ancestors ${EXTENSION_FRAME_ANCESTORS};`;
+
+export const EXTENSION_IFRAME_META_CSP = EXTENSION_IFRAME_CSP_BASE;
+
+/**
+ * SECURITY — EXTENSION CONTENT IS UNTRUSTED.
+ *
+ * `${content}` (line ~Body) interpolates raw HTML/JS authored by a user. This
+ * file is the boundary between framework-controlled HTML and user-controlled
+ * HTML. Two non-negotiable invariants for every change here:
+ *
+ *   1. The iframe MUST be rendered with a `sandbox` attribute that does NOT
+ *      include `allow-same-origin`. The viewer (`ExtensionViewer.tsx`,
+ *      `EmbeddedExtension.tsx`) normalizes the sandbox through
+ *      `normalizeAgentNativeExtensionSandbox()`, which permits scripts, forms,
+ *      popups, and downloads but strips `allow-same-origin`. Adding
+ *      `allow-same-origin` would give the extension full DOM access to the
+ *      parent window via cross-frame script.
+ *
+ *   2. Every reachable parent action must treat the postMessage payload as
+ *      hostile. The bridge in `iframe-bridge.ts` enforces a path allowlist,
+ *      header sanitization, and method allowlist; do not relax those gates
+ *      for "convenience" in this file or any caller.
+ *
+ * For the trust model rationale, see audit 05-tools-sandbox.md (C1) and the
+ * `extensions` skill. When in doubt, fail closed.
+ *
+ * BACKWARDS COMPAT — the iframe injects helpers under both their canonical
+ * `extension*` names (`extensionFetch`, `extensionData`, `extensionId`,
+ * `extensionBinding`) AND legacy `tool*` aliases (`toolFetch`, `toolData`,
+ * `toolId`, `toolBinding`) so existing user-authored extension bodies that
+ * pre-date the rename keep working. Same for layout opt-ins:
+ * `data-extension-layout="full-bleed"` / `data-extension-padding="none"` /
+ * class `agent-native-extension-bleed` / CSS var
+ * `--agent-native-extension-padding` are canonical; the `data-tool-*`,
+ * `agent-native-tool-bleed`, and `--agent-native-tool-padding` variants are
+ * accepted as aliases.
+ */
+
+export interface ExtensionRenderBinding {
+  /** Email of the user who authored / owns the extension. */
+  authorEmail: string;
+  /** Email of the user currently viewing/running the extension. */
+  viewerEmail: string;
+  /** True when viewer === author. */
+  isAuthor: boolean;
+  /**
+   * Resolved role for the viewer ("owner" | "admin" | "editor" | "viewer").
+   *
+   * TODO(security, audit H4): the host-side bridge does not yet gate any
+   * helper based on this value — every viewer gets the same powers as the
+   * author. The role is plumbed through so a follow-up PR can constrain
+   * `appAction` / `dbExec` / `extensionFetch` for non-author viewers (and
+   * eventually require an explicit consent step before running a shared
+   * extension, audit C1). For now this is metadata only.
+   */
+  role: "owner" | "admin" | "editor" | "viewer";
+  /** Where the extension definition came from. Database extensions are the default. */
+  source?: "database" | "local-files";
+  /**
+   * Fine-grained helper permissions for local file extensions. Database-backed
+   * extensions keep using the role table in the parent bridge.
+   */
+  permissions?: {
+    appActions?: string[];
+    extensionData?: boolean;
+    sql?: boolean;
+    externalFetch?: boolean;
+  };
+}
+
+export function buildExtensionHtml(
+  content: string,
+  themeVars: string,
+  isDark: boolean,
+  extensionId?: string,
+  binding?: ExtensionRenderBinding,
+): string {
+  const extensionIdJson = JSON.stringify(extensionId ?? "");
+  const extensionIdAttr = escapeHtmlAttribute(extensionId ?? "");
+  const bindingJson = JSON.stringify(
+    binding ?? {
+      authorEmail: "",
+      viewerEmail: "",
+      isAuthor: true,
+      role: "owner",
+    },
+  );
+
+  return `<!DOCTYPE html>
+<html lang="en"${isDark ? ' class="dark"' : ""}>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="Content-Security-Policy" content="${EXTENSION_IFRAME_META_CSP}" />
+  ${binding && !binding.isAuthor ? `<meta name="agent-native-extension-author" content="${escapeHtmlAttribute(binding.authorEmail)}" />` : ""}
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap" rel="stylesheet" />
+  <script>
+    var _extensionErrors = [];
+    var _extensionErrorDetails = [];
+    var _consoleLogs = [];
+    var _networkLogs = [];
+
+    var _origConsole = { log: console.log, warn: console.warn, error: console.error, info: console.info };
+    function _wrapConsole(level, orig) {
+      return function() {
+        var args = Array.prototype.slice.call(arguments);
+        var msg = args.map(function(a) {
+          try { return typeof a === 'object' ? JSON.stringify(a) : String(a); }
+          catch(e) { return String(a); }
+        }).join(' ');
+        if (_consoleLogs.length >= 50) _consoleLogs.shift();
+        _consoleLogs.push({ level: level, message: msg });
+        orig.apply(console, arguments);
+      };
+    }
+    console.log = _wrapConsole('log', _origConsole.log);
+    console.warn = _wrapConsole('warn', _origConsole.warn);
+    console.error = _wrapConsole('error', _origConsole.error);
+    console.info = _wrapConsole('info', _origConsole.info);
+
+    function _collectError(message, stack) {
+      if (!message) return;
+      if (message === 'Script error.' || message === 'Script error') message = 'Runtime error';
+      if (_extensionErrors.indexOf(message) !== -1) return;
+      _extensionErrors.push(message);
+      _extensionErrorDetails.push({ message: message, stack: stack || '' });
+      _renderErrorToast();
+    }
+
+    function _renderErrorToast() {
+      var toast = document.getElementById('__extension-error-toast');
+      if (!toast) return;
+      var msg = document.getElementById('__extension-error-msg');
+      if (!msg || _extensionErrors.length === 0) return;
+      if (_extensionErrors.length === 1) {
+        msg.textContent = _extensionErrors[0];
+      } else {
+        msg.textContent = _extensionErrors.length + ' errors — ' + _extensionErrors[_extensionErrors.length - 1];
+      }
+      toast.style.display = 'block';
+    }
+
+    window.addEventListener('error', function(event) {
+      var msg = event.message || '';
+      if (msg.indexOf('Alpine Expression Error') === 0) return;
+      var stack = event.error && event.error.stack ? event.error.stack : '';
+      _collectError(msg, stack);
+    });
+
+    window.addEventListener('unhandledrejection', function(event) {
+      var msg = event.reason && event.reason.message ? event.reason.message : String(event.reason);
+      var stack = event.reason && event.reason.stack ? event.reason.stack : '';
+      _collectError(msg, stack);
+    });
+  </script>
+  <!--
+    SECURITY: pinned to exact patch versions + SRI integrity hashes. A
+    malicious republish of @tailwindcss/browser@4.x or alpinejs@3.x would
+    otherwise inject code into every extension. To bump these versions:
+      1. npm view @tailwindcss/browser version  (or alpinejs)
+      2. curl -sL https://cdn.jsdelivr.net/npm/@tailwindcss/browser@<v> \\
+         | openssl dgst -sha384 -binary | openssl base64 -A
+      3. Update the URL + integrity hash below in lockstep.
+  -->
+  <script
+    src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.4"
+    integrity="sha384-yNSZBFvuOWcmww494a9+1zNuvgUGEXoWkein7cxP8wHUTi3iXCU4vJ7hr3tzBCml"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    defer
+    src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js"
+    integrity="sha384-WPtu0YHhJ3arcykfnv1JgUffWDSKRnqnDeTpJUbOc2os2moEmLkIdaeR0trPN4be"
+    crossorigin="anonymous"
+  ></script>
+  <style>${themeVars}</style>
+  <style type="text/tailwindcss">
+    @custom-variant dark (&:where(.dark, .dark *));
+    @theme {
+      --color-border: hsl(var(--border));
+      --color-input: hsl(var(--input));
+      --color-ring: hsl(var(--ring));
+      --color-background: hsl(var(--background));
+      --color-foreground: hsl(var(--foreground));
+      --color-primary: hsl(var(--primary));
+      --color-primary-foreground: hsl(var(--primary-foreground));
+      --color-secondary: hsl(var(--secondary));
+      --color-secondary-foreground: hsl(var(--secondary-foreground));
+      --color-destructive: hsl(var(--destructive));
+      --color-destructive-foreground: hsl(var(--destructive-foreground));
+      --color-muted: hsl(var(--muted));
+      --color-muted-foreground: hsl(var(--muted-foreground));
+      --color-accent: hsl(var(--accent));
+      --color-accent-foreground: hsl(var(--accent-foreground));
+      --color-popover: hsl(var(--popover));
+      --color-popover-foreground: hsl(var(--popover-foreground));
+      --color-card: hsl(var(--card));
+      --color-card-foreground: hsl(var(--card-foreground));
+      --color-sidebar: hsl(var(--sidebar-background));
+      --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+      --color-sidebar-primary: hsl(var(--sidebar-primary));
+      --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+      --color-sidebar-accent: hsl(var(--sidebar-accent));
+      --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+      --color-sidebar-border: hsl(var(--sidebar-border));
+      --color-sidebar-ring: hsl(var(--sidebar-ring));
+      --radius-lg: var(--radius);
+      --radius-md: calc(var(--radius) - 2px);
+      --radius-sm: calc(var(--radius) - 4px);
+    }
+  </style>
+	  <style>
+	    *, *::before, *::after { border-color: hsl(var(--border)); }
+	    html, body {
+	      /* Transparent so the iframe inherits the host surface (dashboard panel,
+	         sidebar, chat) instead of painting the browser's default white canvas.
+	         The dark class still flips the theme vars; content paints its own
+	         bg-background / bg-card surfaces. */
+	      background: transparent;
+	    }
+	    body {
+	      --agent-native-extension-padding: clamp(16px, 2vw, 24px);
+	      /* Legacy alias for pre-rename extension content (do not remove). */
+	      --agent-native-tool-padding: var(--agent-native-extension-padding);
+	      box-sizing: border-box;
+	      color: hsl(var(--foreground));
+	      font-family: 'Inter', sans-serif;
+	      margin: 0;
+	      min-height: 100vh;
+	      padding: var(--agent-native-extension-padding);
+	    }
+	    body:has(> [data-extension-layout="full-bleed"]),
+	    body:has(> [data-extension-padding="none"]),
+	    body:has(> .agent-native-extension-bleed),
+	    /* Legacy aliases (do not remove). */
+	    body:has(> [data-tool-layout="full-bleed"]),
+	    body:has(> [data-tool-padding="none"]),
+	    body:has(> .agent-native-tool-bleed) {
+	      padding: 0;
+	    }
+	  </style>
+	  <script>
+	    var _extensionRequestSeq = 0;
+	    var _extensionPendingRequests = {};
+
+	    window.addEventListener('message', function(event) {
+	      if (event.source !== window.parent) return;
+	      var message = event.data || {};
+	      if (
+	        message.type !== 'agent-native-extension-response' &&
+	        message.type !== 'agent-native-tool-response'
+	      ) return;
+	      var pending = _extensionPendingRequests[message.requestId];
+	      if (!pending) return;
+	      delete _extensionPendingRequests[message.requestId];
+	      if (message.error) {
+	        pending.reject(new Error(message.error));
+	      } else {
+	        pending.resolve(message.response);
+	      }
+	    });
+
+	    function hostRequest(path, options) {
+	      options = options || {};
+	      return new Promise(function(resolve, reject) {
+	        var requestId = 'extension-req-' + (++_extensionRequestSeq);
+	        _extensionPendingRequests[requestId] = { resolve: resolve, reject: reject };
+	        window.parent.postMessage({
+	          type: 'agent-native-extension-request',
+	          requestId: requestId,
+	          path: path,
+	          options: {
+	            method: options.method || 'GET',
+	            headers: options.headers || {},
+	            body: options.body,
+	          },
+	        }, '*');
+	        setTimeout(function() {
+	          var pending = _extensionPendingRequests[requestId];
+	          if (!pending) return;
+	          delete _extensionPendingRequests[requestId];
+	          pending.reject(new Error('Extension host request timed out'));
+	        }, 30000);
+	      });
+	    }
+
+	    var _origHostRequest = hostRequest;
+	    hostRequest = function(path, options) {
+	      var entry = { path: path, method: (options && options.method) || 'GET' };
+	      return _origHostRequest(path, options).then(function(res) {
+	        entry.ok = res.ok;
+	        entry.status = res.status;
+	        if (!res.ok && res.body) {
+	          try { entry.error = typeof res.body === 'string' ? res.body.slice(0, 200) : JSON.stringify(res.body).slice(0, 200); } catch(e) {}
+	        }
+	        if (_networkLogs.length >= 20) _networkLogs.shift();
+	        _networkLogs.push(entry);
+	        return res;
+	      }, function(err) {
+	        entry.ok = false;
+	        entry.error = err.message;
+	        if (_networkLogs.length >= 20) _networkLogs.shift();
+	        _networkLogs.push(entry);
+	        throw err;
+	      });
+	    };
+
+	    function extensionFetch(url, options) {
+	      var opts = options || {};
+	      return hostRequest('/_agent-native/extensions/proxy', {
+	        method: 'POST',
+	        headers: { 'Content-Type': 'application/json' },
+	        body: JSON.stringify({
+	          url: url,
+          method: opts.method || 'GET',
+          headers: opts.headers,
+          body: opts.body,
+        }),
+	      }).then(function(res) {
+	        var data = res.body;
+	          if (data.error && data.status === undefined) {
+	            throw new Error(data.error);
+	          }
+          return {
+            ok: data.status >= 200 && data.status < 300,
+            status: data.status,
+	            json: function() { return Promise.resolve(data.body); },
+	            text: function() { return Promise.resolve(typeof data.body === 'string' ? data.body : JSON.stringify(data.body)); },
+	          };
+	      });
+	    }
+
+	    function _appendActionQuery(path, params) {
+	      var search = new URLSearchParams();
+	      params = params || {};
+	      Object.keys(params).forEach(function(key) {
+	        var value = params[key];
+	        if (value === undefined || value === null) return;
+	        if (Array.isArray(value)) {
+	          value.forEach(function(item) {
+	            if (item !== undefined && item !== null) {
+	              search.append(key, String(item));
+	            }
+	          });
+	          return;
+	        }
+	        search.set(key, String(value));
+	      });
+	      var qs = search.toString();
+	      return qs ? path + '?' + qs : path;
+	    }
+
+	    function _methodHintFromActionResponse(res) {
+	      if (!res || res.status !== 405) return null;
+	      var body = res.body || {};
+	      var message = typeof body === 'string' ? body : body.error;
+	      if (!message) return null;
+	      var match = String(message).match(/Use (GET|POST|PUT|PATCH|DELETE|HEAD)\\.?/i);
+	      return match ? match[1].toUpperCase() : null;
+	    }
+
+	    async function appAction(name, params) {
+	      params = params || {};
+	      if (name === 'navigate') {
+	        var navRes = await hostRequest('/_agent-native/application-state/navigate', {
+	          method: 'PUT',
+	          headers: { 'Content-Type': 'application/json' },
+	          body: JSON.stringify(params),
+	        });
+	        if (!navRes.ok) {
+	          var navErr = navRes.body || { error: navRes.statusText };
+	          throw new Error(navErr.error || 'Navigation failed: ' + navRes.status);
+	        }
+	        return navRes.body;
+	      }
+	      var path = '/_agent-native/actions/' + encodeURIComponent(name);
+	      var res = await hostRequest(path, {
+	        method: 'POST',
+	        headers: { 'Content-Type': 'application/json' },
+	        body: JSON.stringify(params),
+	      });
+
+	      var retryMethod = _methodHintFromActionResponse(res);
+	      if (!res.ok && retryMethod && retryMethod !== 'POST') {
+	        var retryPath = path;
+	        var retryOptions = {
+	          method: retryMethod,
+	          headers: { 'Content-Type': 'application/json' },
+	        };
+	        if (retryMethod === 'GET' || retryMethod === 'HEAD') {
+	          retryPath = _appendActionQuery(path, params);
+	        } else {
+	          retryOptions.body = JSON.stringify(params);
+	        }
+	        res = await hostRequest(retryPath, retryOptions);
+	      }
+
+	      if (!res.ok) {
+	        var err = res.body || {};
+	        var rawError = typeof err === 'string' ? err : err.error;
+	        var message = (typeof rawError === 'string' && rawError.trim())
+	          ? rawError
+	          : (res.status === 404
+	            ? "Action '" + name + "' is not available over HTTP (404). It may be agent-only (http: false); expose it with an HTTP-mounted action to call it from an extension."
+	            : "Action '" + name + "' failed (" + (res.status || 'network error') + ")");
+	        throw new Error(message);
+	      }
+	      return res.body;
+	    }
+
+    var mcp = {
+      listTools: function(serverId) {
+        var params = serverId ? { serverId: String(serverId) } : {};
+        return appAction('list-mcp-tools', params);
+      },
+      callTool: function(serverId, toolName, args) {
+        if (!serverId || !toolName) {
+          return Promise.reject(new Error('MCP serverId and toolName are required'));
+        }
+        return appAction('call-mcp-tool', {
+          serverId: String(serverId),
+          toolName: String(toolName),
+          arguments: args || {},
+        });
+      },
+    };
+
+    var providerApi = {
+      catalog: function(params) {
+        return appAction('provider-api-catalog', params || {});
+      },
+      docs: function(params) {
+        return appAction('provider-api-docs', params || {});
+      },
+    };
+
+    async function appFetch(path, options) {
+	      options = options || {};
+	      var res = await hostRequest(path, {
+	        ...options,
+	        headers: {
+	          'Content-Type': 'application/json',
+	          ...(options.headers || {}),
+	        },
+	      });
+	      if (!res.ok) {
+	        var err = typeof res.body === 'object' && res.body ? res.body : { error: res.statusText };
+	        throw new Error(err.error || 'Request failed: ' + res.status);
+	      }
+	      return res.body;
+	    }
+
+	    function sendToChat(message, options) {
+	      options = options || {};
+	      var text = typeof message === 'string' ? message : JSON.stringify(message);
+	      window.parent.postMessage({
+	        type: 'agent-native-send-to-chat',
+	        message: text,
+	        context: options.context,
+	        submit: options.submit !== false,
+	        openSidebar: options.openSidebar !== false,
+	      }, '*');
+	      return { ok: true };
+	    }
+
+	    function inlineUiOutputKey() {
+	      var safeId = String(_extensionId || 'unknown').replace(/[^A-Za-z0-9_:-]/g, '') || 'unknown';
+	      return 'inline-ui:' + safeId + ':output';
+	    }
+
+	    async function outputToUi(value, options) {
+	      options = options || {};
+	      var key = inlineUiOutputKey();
+	      var payload = {
+	        value: value,
+	        updatedAt: new Date().toISOString(),
+	        extensionId: _extensionId,
+	        source: 'inline-ui',
+	      };
+	      if (options.label !== undefined) payload.label = options.label;
+	      if (options.context !== undefined) payload.context = options.context;
+	      if (options.meta !== undefined) payload.meta = options.meta;
+	      var output = await appFetch('/_agent-native/application-state/' + key, {
+	        method: 'PUT',
+	        headers: { 'X-Request-Source': 'inline-ui' },
+	        body: JSON.stringify(payload),
+	      });
+	      try {
+	        window.parent.postMessage({
+	          type: 'agent-native-ui-output',
+	          extensionId: _extensionId,
+	          key: key,
+	          value: value,
+	          output: output,
+	        }, '*');
+	      } catch (_) {}
+	      return { ok: true, key: key, output: output };
+	    }
+
+    async function dbQuery(sql, args) {
+      var body = { sql: sql };
+      if (args) body.args = args;
+      return appFetch('/_agent-native/extensions/sql/query', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+    }
+
+    async function dbExec(sql, args) {
+      var body = { sql: sql };
+      if (args) body.args = args;
+      return appFetch('/_agent-native/extensions/sql/exec', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+    }
+
+    var _extensionId = ${extensionIdJson};
+    var _extensionBinding = ${bindingJson};
+    window.extensionBinding = _extensionBinding;
+    // Legacy alias for extension bodies authored before the rename.
+    window.toolBinding = _extensionBinding;
+    // SECURITY (audit H4): announce the resolved binding to the parent so the
+    // host bridge can gate dangerous helpers based on viewer role. Sent
+    // BEFORE the user-authored content has a chance to run, so a malicious
+    // extension body cannot suppress or rewrite the announcement. The parent
+    // ignores subsequent announcements for the same iframe; see
+    // ExtensionViewer.tsx / EmbeddedExtension.tsx.
+    try {
+      window.parent.postMessage(
+        {
+          type: 'agent-native-extension-binding',
+          extensionId: _extensionId,
+          binding: _extensionBinding,
+        },
+        '*',
+      );
+    } catch (_) {}
+    // SECURITY: when the viewer is not the author of this extension, emit a
+    // clear console warning. The bridge currently runs every helper with the
+    // viewer's session — a malicious shared extension can call any action,
+    // read any owned table row in scope, and resolve any user-scope secret.
+    // A full consent step is tracked as TODO C1 in audit 05-tools-sandbox.md.
+    if (_extensionBinding && !_extensionBinding.isAuthor) {
+      try {
+        console.warn(
+          '[agent-native] Shared extension — running with viewer\\'s session. ' +
+            'Author: ' + (_extensionBinding.authorEmail || '<unknown>') + '. ' +
+            'Bridge calls (appAction, dbExec, extensionFetch) execute under ' +
+            'your account; they are gated by your permissions, not the ' +
+            'author\\'s. Do not run untrusted shared extensions.',
+        );
+      } catch (_) {}
+    }
+
+    var extensionData = {
+	      async list(collection, opts) {
+	        var limit = (opts && opts.limit) || 100;
+	        var scope = (opts && opts.scope) || 'user';
+	        var res = await hostRequest('/_agent-native/extensions/data/' + _extensionId + '/' + encodeURIComponent(collection) + '?limit=' + limit + '&scope=' + scope);
+	        if (!res.ok) throw new Error('Failed to list extension data');
+	        return res.body;
+	      },
+      async get(collection, id, opts) {
+        var scope = (opts && opts.scope) || 'user';
+        var items = await this.list(collection, { scope: scope });
+        return (items || []).find(function(item) { return item.id === id; }) || null;
+      },
+      async set(collection, id, data, opts) {
+	        var scope = (opts && opts.scope) || 'user';
+	        var res = await hostRequest('/_agent-native/extensions/data/' + _extensionId + '/' + encodeURIComponent(collection), {
+	          method: 'POST',
+	          headers: { 'Content-Type': 'application/json' },
+	          body: JSON.stringify({ id: id, data: data, scope: scope }),
+	        });
+	        if (!res.ok) throw new Error('Failed to save extension data');
+	        return res.body;
+	      },
+	      async remove(collection, id, opts) {
+	        var scope = (opts && opts.scope) || 'user';
+	        var res = await hostRequest('/_agent-native/extensions/data/' + _extensionId + '/' + encodeURIComponent(collection) + '/' + encodeURIComponent(id) + '?scope=' + scope, {
+	          method: 'DELETE',
+	        });
+	        if (!res.ok) throw new Error('Failed to delete extension data');
+	        return res.body;
+	      },
+	    };
+
+	    // Legacy aliases — extension bodies authored before the rename use
+	    // toolFetch, toolData, toolId. Keep these working forever.
+	    var toolFetch = extensionFetch;
+	    var toolData = extensionData;
+	    var _toolId = _extensionId;
+	    window.agentNative = Object.assign(window.agentNative || {}, {
+	      extensionId: _extensionId,
+	      extensionBinding: _extensionBinding,
+	      appAction: appAction,
+	      appFetch: appFetch,
+	      dbQuery: dbQuery,
+	      dbExec: dbExec,
+	      extensionFetch: extensionFetch,
+	      extensionData: extensionData,
+	      data: extensionData,
+	      mcp: mcp,
+	      providerApi: providerApi,
+	      connectors: Object.assign({}, (window.agentNative && window.agentNative.connectors) || {}, {
+	        mcp: mcp,
+	        providerApi: providerApi,
+	      }),
+	      sendToChat: sendToChat,
+	      chat: Object.assign({}, (window.agentNative && window.agentNative.chat) || {}, {
+	        send: sendToChat,
+	      }),
+	      ui: Object.assign({}, (window.agentNative && window.agentNative.ui) || {}, {
+	        output: outputToUi,
+	      }),
+	    });
+	    window.sendToAgentChat = sendToChat;
+	  </script>
+	  <style>
+	    #__extension-error-toast {
+	      display: none;
+	      position: fixed;
+	      bottom: 16px;
+	      right: 16px;
+	      max-width: 420px;
+	      background: hsl(var(--destructive));
+	      color: hsl(var(--destructive-foreground));
+	      border: 1px solid hsl(var(--destructive) / .6);
+	      border-radius: calc(var(--radius, .5rem) + 2px);
+	      padding: 12px 16px;
+	      font-size: 13px;
+	      line-height: 1.4;
+	      font-family: 'Inter', sans-serif;
+	      z-index: 9999;
+	      box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.1);
+	      animation: __toast-in 0.2s ease-out;
+	    }
+	    @keyframes __toast-in {
+	      from { opacity: 0; transform: translateY(8px); }
+	      to { opacity: 1; transform: translateY(0); }
+	    }
+	  </style>
+	  <script>
+	    // Extension-point slot context: when an extension is rendered embedded
+	    // inside an ExtensionSlot, the host pushes a context object via
+	    // postMessage. Extensions read it synchronously via window.slotContext
+	    // or subscribe to changes via window.onSlotContext(fn). When rendered
+	    // full-page (no ?slot= param), slotContext stays null and extensions
+	    // branch on that.
+	    window.slotContext = null;
+	    var _slotContextSubscribers = [];
+	    window.onSlotContext = function(fn) {
+	      _slotContextSubscribers.push(fn);
+	      if (window.slotContext !== null) {
+	        try { fn(window.slotContext); } catch(_) {}
+	      }
+	      return function() {
+	        _slotContextSubscribers = _slotContextSubscribers.filter(function(f) { return f !== fn; });
+	      };
+	    };
+	    window.addEventListener('message', function(event) {
+	      if (event.source !== window.parent) return;
+	      var msg = event.data;
+	      if (!msg || msg.type !== 'agent-native-slot-context') return;
+	      window.slotContext = msg.context || {};
+	      _slotContextSubscribers.forEach(function(fn) {
+	        try { fn(window.slotContext); } catch(_) {}
+	      });
+	    });
+
+	    // Auto-resize iframe renders. Persisted extension slots include ?slot=;
+	    // transient inline chat UI uses srcdoc, so detect that by parent frame.
+	    // The host listens for agent-native-extension-resize and adjusts height.
+	    if (new URLSearchParams(location.search).get('slot') || window.parent !== window) {
+	      var _lastH = 0;
+	      var _reportHeight = function() {
+	        var h = Math.max(
+	          document.documentElement.scrollHeight,
+	          document.body ? document.body.scrollHeight : 0,
+	        );
+	        if (h !== _lastH) {
+	          _lastH = h;
+	          window.parent.postMessage({ type: 'agent-native-extension-resize', height: h }, '*');
+	        }
+	      };
+	      if (typeof ResizeObserver !== 'undefined') {
+	        var _ro = new ResizeObserver(_reportHeight);
+	        document.addEventListener('DOMContentLoaded', function() {
+	          _ro.observe(document.documentElement);
+	          if (document.body) _ro.observe(document.body);
+	        });
+	      }
+	      // Initial reports — Alpine takes a tick to render after DOMContentLoaded.
+	      setTimeout(_reportHeight, 50);
+	      setTimeout(_reportHeight, 250);
+	    }
+
+	    window.addEventListener('message', function(event) {
+	      if (event.source !== window.parent) return;
+	      var msg = event.data;
+	      if (!msg || msg.type !== 'agent-native-theme-update') return;
+	      var root = document.documentElement;
+	      if (msg.isDark !== undefined) {
+	        if (msg.isDark) root.classList.add('dark');
+	        else root.classList.remove('dark');
+	      }
+	      var vars = msg.vars || {};
+	      for (var key in vars) {
+	        if (vars.hasOwnProperty(key)) {
+	          root.style.setProperty(key, vars[key]);
+	        }
+	      }
+	    });
+
+	    document.addEventListener('keydown', function(e) {
+	      if ((e.metaKey || e.ctrlKey) && !e.altKey) {
+	        var key = (e.key || '').toLowerCase();
+	        if (key === 'c' || key === 'v' || key === 'x' || key === 'a' || key === 'z' || key === 'y') return;
+	        e.preventDefault();
+	        e.stopPropagation();
+	        window.parent.postMessage({
+	          type: 'agent-native-extension-keydown',
+	          key: e.key, code: e.code,
+	          metaKey: e.metaKey, ctrlKey: e.ctrlKey,
+	          shiftKey: e.shiftKey, altKey: e.altKey,
+	        }, '*');
+	        return;
+	      }
+	      if (e.key === 'Escape') {
+	        window.parent.postMessage({
+	          type: 'agent-native-extension-keydown',
+	          key: e.key, code: e.code,
+	          metaKey: false, ctrlKey: false,
+	          shiftKey: false, altKey: false,
+	        }, '*');
+	      }
+	    });
+
+	    document.addEventListener('DOMContentLoaded', function() {
+	      _renderErrorToast();
+	      var fixBtn = document.getElementById('__extension-error-fix');
+	      if (fixBtn) {
+	        fixBtn.addEventListener('click', function() {
+	          window.parent.postMessage({
+	            type: 'agent-native-extension-error-fix',
+	            errors: _extensionErrors,
+	            errorDetails: _extensionErrorDetails,
+	            consoleLogs: _consoleLogs.slice(-30),
+	            networkLogs: _networkLogs.slice(-15)
+	          }, '*');
+	          document.getElementById('__extension-error-toast').style.display = 'none';
+	        });
+	      }
+	      var dismissBtn = document.getElementById('__extension-error-dismiss');
+	      if (dismissBtn) {
+	        dismissBtn.addEventListener('click', function() {
+	          document.getElementById('__extension-error-toast').style.display = 'none';
+	        });
+	      }
+	    });
+	  </script>
+	${buildSessionReplayIframeBootstrap()}
+	</head>
+	<body${extensionId ? ` data-extension-id="${extensionIdAttr}" data-tool-id="${extensionIdAttr}"` : ""} class="text-foreground">
+	${content}
+	<div id="__extension-error-toast">
+	  <div style="display:flex;align-items:flex-start;gap:8px;">
+	    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-top:1px;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+	    <span id="__extension-error-msg" style="flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;"></span>
+	    <button id="__extension-error-fix" style="cursor:pointer;border:none;background:rgba(255,255,255,.9);color:hsl(0 84.2% 40%);font-size:12px;font-weight:500;padding:4px 12px;border-radius:4px;flex-shrink:0;">Fix</button>
+	    <button id="__extension-error-dismiss" style="cursor:pointer;border:none;background:transparent;color:inherit;font-size:16px;padding:2px 6px;opacity:0.7;flex-shrink:0;">&#215;</button>
+	  </div>
+	</div>
+	</body>
+	</html>`;
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}