@runtypelabs/persona 3.21.3 → 3.22.0

package/dist/theme-editor.js

@@ -1613,9 +1613,29 @@ function normalizeColorValue(value) {
 function isValidHex(value) {
   return /^#[0-9A-Fa-f]{6}$/.test(value);
 }
+function rgbToHex(value) {
+  const match = value.trim().toLowerCase().match(/^rgba?\(([^)]+)\)$/);
+  if (!match) return null;
+  const parts = match[1].split(",").map((p) => p.trim());
+  if (parts.length < 3) return null;
+  const channel = (raw) => {
+    const isPct = raw.endsWith("%");
+    const n = parseFloat(isPct ? raw.slice(0, -1) : raw);
+    if (!Number.isFinite(n)) return NaN;
+    return Math.max(0, Math.min(255, Math.round(isPct ? n / 100 * 255 : n)));
+  };
+  const r = channel(parts[0]);
+  const g = channel(parts[1]);
+  const b = channel(parts[2]);
+  if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b)) return null;
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
 function wcagContrastRatio(hex1, hex2) {
   const luminance = (hex) => {
-    const norm = normalizeColorValue(hex);
+    var _a;
+    const normalized = normalizeColorValue(hex);
+    const norm = normalized.startsWith("rgb") ? (_a = rgbToHex(normalized)) != null ? _a : "#000000" : normalized;
     const channels = [1, 3, 5].map((i) => {
       const v = parseInt(norm.slice(i, i + 2), 16) / 255;
       return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
@@ -1627,7 +1647,9 @@ function wcagContrastRatio(hex1, hex2) {
   return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
 }
 function hexToHsl(hex) {
-  const normalized = normalizeColorValue(hex);
+  var _a;
+  const normalizedValue = normalizeColorValue(hex);
+  const normalized = normalizedValue.startsWith("rgb") ? (_a = rgbToHex(normalizedValue)) != null ? _a : "#000000" : normalizedValue;
   const r = parseInt(normalized.slice(1, 3), 16) / 255;
   const g = parseInt(normalized.slice(3, 5), 16) / 255;
   const b = parseInt(normalized.slice(5, 7), 16) / 255;
@@ -3319,6 +3341,337 @@ var resolveSanitizer = (option) => {
   return createDefaultSanitizer();
 };
 
+// src/webmcp-bridge.ts
+var DEFAULT_TOOL_TIMEOUT_MS = 3e4;
+var WEBMCP_TOOL_PREFIX = "webmcp:";
+var log = {
+  warn(message, ...rest) {
+    if (typeof console !== "undefined" && typeof console.warn === "function") {
+      console.warn(`[Persona/WebMCP] ${message}`, ...rest);
+    }
+  }
+};
+var WebMcpBridge = class {
+  constructor(config) {
+    this.config = config;
+    /** `true` once the polyfill has been (idempotently) installed. */
+    this.installed = false;
+    /** Memoizes the one-shot async install so concurrent callers share it. */
+    this.readyPromise = null;
+    /**
+     * Warn-once latch for a present-but-incompatible `document.modelContext`
+     * (some other / older WebMCP polyfill squatting the global). `getModelContext`
+     * is hit on every snapshot + execute, so we log the diagnostic only once.
+     */
+    this.incompatibleContextWarned = false;
+    var _a;
+    this.confirmHandler = (_a = config.onConfirm) != null ? _a : null;
+    this.timeoutMs = DEFAULT_TOOL_TIMEOUT_MS;
+  }
+  /**
+   * Override the confirm handler post-construction. Used by `ui.ts` to wire
+   * the in-panel approval bubble after the client has been built (the widget
+   * lifecycle constructs the client before the panel renders).
+   */
+  setConfirmHandler(handler) {
+    this.confirmHandler = handler;
+  }
+  /**
+   * `true` when the bridge can both snapshot the registry AND execute returned
+   * tool calls — i.e. the polyfill is installed and `document.modelContext`
+   * exposes the consumer surface (`getTools` / `executeTool`). Native browsers
+   * that ship `document.modelContext` satisfy this too.
+   *
+   * Synchronous and best-effort: returns `false` until the lazy install has
+   * resolved (see `ensureReady`). The snapshot/execute paths await readiness
+   * themselves, so this is purely an advisory check for callers.
+   */
+  isOperational() {
+    if (this.config.enabled !== true) return false;
+    if (!this.installed) return false;
+    return this.getModelContext() !== null;
+  }
+  /**
+   * Per-turn snapshot for `dispatch.clientTools[]`. Returns the JSON-only
+   * surface — `execute` stays client-side, reached later via `executeToolCall`.
+   *
+   * Async because the strict polyfill's `getTools()` is async. Both payload
+   * builders in `client.ts` already `await`, so this adds no new ceremony.
+   */
+  async snapshotForDispatch() {
+    await this.ensureReady();
+    if (this.config.enabled !== true) return [];
+    const mc = this.getModelContext();
+    if (!mc) return [];
+    let infos;
+    try {
+      infos = await mc.getTools();
+    } catch (err) {
+      log.warn("getTools() threw \u2014 shipping an empty WebMCP snapshot.", err);
+      return [];
+    }
+    const pageOrigin = typeof location !== "undefined" ? location.origin : "";
+    return infos.filter((info) => this.passesClientAllowlist(info.name)).map((info) => {
+      const def = {
+        name: info.name,
+        description: info.description,
+        origin: "webmcp",
+        ...pageOrigin ? { pageOrigin } : {}
+      };
+      const schema = parseSchema(info.inputSchema);
+      if (schema) def.parametersSchema = schema;
+      return def;
+    });
+  }
+  /**
+   * Execute a `webmcp:<name>` tool call returned by the agent and return the
+   * normalized MCP-shaped result for `/resume`.
+   *
+   * Failure modes — all return `{ isError: true, content: [...] }` rather than
+   * throwing, so the dispatch can resume cleanly:
+   *   - bridge not operational
+   *   - tool not in registry (e.g. unmounted between snapshot and call)
+   *   - tool excluded by the client allowlist
+   *   - user declined the confirm gate
+   *   - `execute()` threw or failed schema validation
+   *   - `execute()` exceeded the 30s timeout
+   *   - `signal` fired (session-level `cancel()`)
+   *
+   * When `signal` is provided, abort is honored at three points: before the
+   * confirm bubble renders, after the user approves but before `execute()`
+   * runs, and (via a combined `AbortController`) during `execute()` itself.
+   * Honoring abort BEFORE the confirm prevents a late approval after `cancel()`
+   * from firing a host-page side effect with no matching `/resume`.
+   */
+  async executeToolCall(wireToolName, args, signal) {
+    await this.ensureReady();
+    if (this.config.enabled !== true) {
+      return errorResult(
+        "WebMCP is not enabled on this widget."
+      );
+    }
+    const mc = this.getModelContext();
+    if (!mc) {
+      const present = typeof document !== "undefined" && Boolean(document.modelContext);
+      return errorResult(
+        present ? "WebMCP is not operational: document.modelContext is present but does not expose the strict getTools()/executeTool() surface (likely a different or older WebMCP polyfill)." : "WebMCP bridge is not operational on this page (document.modelContext not available)."
+      );
+    }
+    const bareName = stripWebMcpPrefix(wireToolName);
+    let infos;
+    try {
+      infos = await mc.getTools();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      return errorResult(`Failed to read WebMCP registry: ${message}`);
+    }
+    const info = infos.find((candidate) => candidate.name === bareName);
+    if (!info) {
+      return errorResult(
+        `WebMCP tool not registered on this page: ${bareName}`
+      );
+    }
+    if (!this.passesClientAllowlist(bareName)) {
+      return errorResult(
+        `WebMCP tool not allowed by client allowlist: ${bareName}`
+      );
+    }
+    if (signal == null ? void 0 : signal.aborted) {
+      return errorResult("Aborted by cancel()");
+    }
+    const gateInfo = {
+      toolName: bareName,
+      args,
+      description: info.description,
+      reason: "gate"
+    };
+    if (!await this.requestConfirm(gateInfo)) {
+      return errorResult("User declined the tool call.");
+    }
+    if (signal == null ? void 0 : signal.aborted) {
+      return errorResult("Aborted by cancel()");
+    }
+    const controller = new AbortController();
+    let timedOut = false;
+    const timer = setTimeout(() => {
+      timedOut = true;
+      controller.abort();
+    }, this.timeoutMs);
+    const onAbort = () => controller.abort();
+    if (signal) {
+      if (signal.aborted) controller.abort();
+      else signal.addEventListener("abort", onAbort, { once: true });
+    }
+    try {
+      const raw = await mc.executeTool(info, safeStringifyArgs(args), {
+        signal: controller.signal
+      });
+      return normalizeSerializedResult(raw);
+    } catch (err) {
+      if (timedOut) {
+        return errorResult(
+          `WebMCP tool '${bareName}' timed out after ${this.timeoutMs}ms`
+        );
+      }
+      if (signal == null ? void 0 : signal.aborted) {
+        return errorResult("Aborted by cancel()");
+      }
+      const message = err instanceof Error ? err.message : String(err);
+      return errorResult(message);
+    } finally {
+      clearTimeout(timer);
+      if (signal) signal.removeEventListener("abort", onAbort);
+    }
+  }
+  /**
+   * Lazily install `@mcp-b/webmcp-polyfill` the first time the bridge needs the
+   * registry. Idempotent and memoized. Dynamic import keeps the polyfill out of
+   * the main bundle and prevents it from installing `document.modelContext` for
+   * widget consumers that never enable WebMCP.
+   *
+   * Producer pages should still install the polyfill themselves (or import it)
+   * before registering tools — Persona's install is a fallback, and a page that
+   * registers tools at load before Persona's first dispatch needs the global to
+   * already exist.
+   */
+  ensureReady() {
+    if (this.config.enabled !== true) return Promise.resolve();
+    if (!this.readyPromise) {
+      this.readyPromise = this.install();
+    }
+    return this.readyPromise;
+  }
+  async install() {
+    try {
+      const mod = await import("@mcp-b/webmcp-polyfill");
+      mod.initializeWebMCPPolyfill();
+      this.installed = true;
+    } catch (err) {
+      log.warn(
+        "Failed to load @mcp-b/webmcp-polyfill \u2014 WebMCP consumption disabled.",
+        err
+      );
+      this.installed = false;
+    }
+  }
+  /**
+   * Read the consumer surface off `document.modelContext`, returning `null`
+   * when it is absent or doesn't expose the producer-preview API we rely on.
+   */
+  getModelContext() {
+    if (typeof document === "undefined") return null;
+    const mc = document.modelContext;
+    if (!mc || typeof mc !== "object") {
+      return null;
+    }
+    const core = mc;
+    if (typeof core.getTools !== "function" || typeof core.executeTool !== "function") {
+      if (!this.incompatibleContextWarned) {
+        this.incompatibleContextWarned = true;
+        log.warn(
+          "document.modelContext is present but does not expose getTools()/executeTool() \u2014 WebMCP consumption is disabled. Another (incompatible or older) WebMCP polyfill likely installed document.modelContext before Persona. Remove it, or use a polyfill implementing the strict standard surface (e.g. @mcp-b/webmcp-polyfill)."
+        );
+      }
+      return null;
+    }
+    return mc;
+  }
+  async requestConfirm(info) {
+    var _a;
+    const handler = (_a = this.confirmHandler) != null ? _a : defaultBrowserConfirmHandler;
+    try {
+      return await handler(info);
+    } catch (err) {
+      log.warn(
+        `Confirm handler threw for WebMCP tool '${info.toolName}'; declining.`,
+        err
+      );
+      return false;
+    }
+  }
+  passesClientAllowlist(toolName) {
+    const list = this.config.allowlist;
+    if (!list || list.length === 0) return true;
+    return list.some((pattern) => matchesGlob(toolName, pattern));
+  }
+};
+var stripWebMcpPrefix = (name) => name.startsWith(WEBMCP_TOOL_PREFIX) ? name.slice(WEBMCP_TOOL_PREFIX.length) : name;
+var isWebMcpToolName = (name) => name.startsWith(WEBMCP_TOOL_PREFIX);
+var matchesGlob = (name, pattern) => {
+  if (pattern === "*") return true;
+  const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&");
+  const regex = new RegExp("^" + escaped.replace(/\*/g, ".*") + "$");
+  return regex.test(name);
+};
+var parseSchema = (raw) => {
+  if (raw === void 0 || raw === "") return void 0;
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed !== null && typeof parsed === "object" ? parsed : void 0;
+  } catch {
+    return void 0;
+  }
+};
+var normalizeSerializedResult = (raw) => {
+  if (raw === null || raw === void 0) {
+    return { content: [{ type: "text", text: "" }] };
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { content: [{ type: "text", text: raw }] };
+  }
+  if (parsed !== null && typeof parsed === "object" && Array.isArray(parsed.content)) {
+    return parsed;
+  }
+  const text = typeof parsed === "string" ? parsed : safeStringify(parsed);
+  return { content: [{ type: "text", text }] };
+};
+var errorResult = (message) => ({
+  isError: true,
+  content: [{ type: "text", text: message }]
+});
+var defaultBrowserConfirmHandler = async (info) => {
+  if (typeof window === "undefined" || typeof window.confirm !== "function") {
+    return false;
+  }
+  const argsPreview = previewArgs(info.args);
+  const prompt = `Allow the AI to call ${info.toolName}` + (argsPreview ? `
+
+Arguments:
+${argsPreview}` : "") + (info.description ? `
+
+${info.description}` : "");
+  return window.confirm(prompt);
+};
+var previewArgs = (args) => {
+  if (args === void 0 || args === null) return "";
+  try {
+    const json = JSON.stringify(args, null, 2);
+    return json.length > 500 ? json.slice(0, 500) + "\u2026" : json;
+  } catch {
+    return String(args);
+  }
+};
+var safeStringifyArgs = (args) => {
+  if (args === void 0) return "{}";
+  try {
+    const json = JSON.stringify(args);
+    return json === void 0 ? "{}" : json;
+  } catch {
+    return "{}";
+  }
+};
+var safeStringify = (value) => {
+  if (value === void 0) return "";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
 // src/utils/formatting.ts
 import { parse as parsePartialJson, STR, OBJ } from "partial-json";
 var unescapeJsonString = (str) => {
@@ -3753,7 +4106,7 @@ var AgentWidgetClient = class {
     // Client token mode properties
     this.clientSession = null;
     this.sessionInitPromise = null;
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     this.apiUrl = (_a = config.apiUrl) != null ? _a : DEFAULT_ENDPOINT;
     this.headers = {
       "Content-Type": "application/json",
@@ -3766,6 +4119,7 @@ var AgentWidgetClient = class {
     this.customFetch = config.customFetch;
     this.parseSSEEvent = config.parseSSEEvent;
     this.getHeaders = config.getHeaders;
+    this.webMcpBridge = ((_d = config.webmcp) == null ? void 0 : _d.enabled) === true ? new WebMcpBridge(config.webmcp) : null;
   }
   /**
    * Set callback for capturing raw SSE events
@@ -3773,6 +4127,39 @@ var AgentWidgetClient = class {
   setSSEEventCallback(callback) {
     this.onSSEEvent = callback;
   }
+  /**
+   * WebMCP: wire (or replace) the confirm-bubble handler. Called from
+   * `ui.ts` once the widget panel is built and the approval-bubble
+   * chrome is ready to render.
+   */
+  setWebMcpConfirmHandler(handler) {
+    var _a;
+    (_a = this.webMcpBridge) == null ? void 0 : _a.setConfirmHandler(handler);
+  }
+  /**
+   * WebMCP: `true` when the bridge installed the polyfill and can both
+   * snapshot the page registry and execute returned `webmcp:*` tool calls.
+   * `false` for any guard miss (no `document.modelContext`, polyfill not yet
+   * installed, or `config.webmcp.enabled` not set).
+   */
+  isWebMcpOperational() {
+    var _a;
+    return ((_a = this.webMcpBridge) == null ? void 0 : _a.isOperational()) === true;
+  }
+  /**
+   * WebMCP: execute a returned `webmcp:<name>` tool call against the page's
+   * registry and return the normalized MCP-shaped result for `/resume`. The
+   * bridge handles confirm-bubble gating, the 30s timeout, error
+   * normalization, and `signal`-driven abort — callers never see throws.
+   *
+   * Returns `null` when WebMCP is not enabled on this client (signal to the
+   * session that it should fall back to the legacy local-tool resume path,
+   * if any).
+   */
+  executeWebMcpToolCall(wireToolName, args, signal) {
+    if (!this.webMcpBridge) return null;
+    return this.webMcpBridge.executeToolCall(wireToolName, args, signal);
+  }
   /**
    * Get the current SSE event callback (used to preserve across client recreation)
    */
@@ -3797,7 +4184,7 @@ var AgentWidgetClient = class {
   getClientApiUrl(endpoint) {
     var _a;
     const baseUrl = ((_a = this.config.apiUrl) == null ? void 0 : _a.replace(/\/+$/, "").replace(/\/v1\/dispatch$/, "")) || DEFAULT_CLIENT_API_BASE;
-    return endpoint === "init" ? `${baseUrl}/v1/client/init` : `${baseUrl}/v1/client/chat`;
+    return `${baseUrl}/v1/client/${endpoint}`;
   }
   /**
    * Get the current client session (if any)
@@ -4070,7 +4457,10 @@ var AgentWidgetClient = class {
         // Include metadata/context from middleware if present (excluding sessionId)
         ...sanitizedMetadata && Object.keys(sanitizedMetadata).length > 0 && { metadata: sanitizedMetadata },
         ...basePayload.inputs && Object.keys(basePayload.inputs).length > 0 && { inputs: basePayload.inputs },
-        ...basePayload.context && { context: basePayload.context }
+        ...basePayload.context && { context: basePayload.context },
+        // Forward per-turn WebMCP tools snapshotted by buildPayload(). The
+        // client-token chat endpoint accepts the same shape as /v1/dispatch.
+        ...basePayload.clientTools && basePayload.clientTools.length > 0 && { clientTools: basePayload.clientTools }
       };
       if (this.debug) {
         console.debug("[AgentWidgetClient] client token dispatch", chatRequest);
@@ -4292,18 +4682,31 @@ var AgentWidgetClient = class {
    * (client-executed) tools. Used by the built-in `ask_user_question`
    * answer-pill sheet, but generic enough for any LOCAL tool.
    *
-   * Posts to the upstream `/resume` endpoint (the dispatch URL with
-   * `/dispatch` replaced by `/resume` — works for both direct-to-Runtype
-   * and the persona proxy) and returns the raw Response so the caller can
-   * pipe its SSE body through `connectStream()`.
+   * Routes by mode:
+   *  - **client-token mode**: POST `${apiBase}/v1/client/resume` (the
+   *    session-authenticated sibling of `/v1/client/chat`; runtypelabs/core#3889),
+   *    with the active `sessionId` in the body and no Bearer key — a browser
+   *    client-token page holds no secret. `clientTools` are already persisted
+   *    server-side from the dispatch turn, so only `toolOutputs` is re-sent.
+   *  - **dispatch / proxy mode**: POST `${apiUrl}/resume` — Runtype mounts
+   *    resume as a child of `/v1/dispatch`, so the URL is `${apiUrl}/resume`,
+   *    and proxies follow the same shape (`/api/chat/dispatch/resume`).
+   *
+   * Returns the raw Response so the caller can pipe its SSE body through
+   * `connectStream()`.
    *
    * @param executionId - The paused execution id carried on `step_await`.
-   * @param toolOutputs - Map keyed by tool name → the tool's result value.
+   * @param toolOutputs - Map keyed by per-call `toolCallId` (core#3878),
+   *   falling back to tool name for legacy servers → the tool's result value.
    */
   async resumeFlow(executionId, toolOutputs, options) {
     var _a, _b;
-    const trimmed = ((_a = this.config.apiUrl) == null ? void 0 : _a.replace(/\/+$/, "")) || DEFAULT_CLIENT_API_BASE;
-    const url = `${trimmed}/resume`;
+    const isClientToken = this.isClientTokenMode();
+    const url = isClientToken ? this.getClientApiUrl("resume") : `${((_a = this.config.apiUrl) == null ? void 0 : _a.replace(/\/+$/, "")) || DEFAULT_CLIENT_API_BASE}/resume`;
+    let resumeSessionId;
+    if (isClientToken) {
+      resumeSessionId = (await this.initSession()).sessionId;
+    }
     let headers = {
       "Content-Type": "application/json",
       ...this.headers
@@ -4311,17 +4714,23 @@ var AgentWidgetClient = class {
     if (this.getHeaders) {
       Object.assign(headers, await this.getHeaders());
     }
+    const body = {
+      executionId,
+      toolOutputs,
+      streamResponse: (_b = options == null ? void 0 : options.streamResponse) != null ? _b : true
+    };
+    if (resumeSessionId) {
+      body.sessionId = resumeSessionId;
+    }
     return fetch(url, {
       method: "POST",
       headers,
-      body: JSON.stringify({
-        executionId,
-        toolOutputs,
-        streamResponse: (_b = options == null ? void 0 : options.streamResponse) != null ? _b : true
-      })
+      body: JSON.stringify(body),
+      signal: options == null ? void 0 : options.signal
     });
   }
   async buildAgentPayload(messages) {
+    var _a;
     if (!this.config.agent) {
       throw new Error("Agent configuration required for agent mode");
     }
@@ -4330,10 +4739,10 @@ var AgentWidgetClient = class {
       const timeB = new Date(b.createdAt).getTime();
       return timeA - timeB;
     }).map((message) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       return {
         role: message.role,
-        content: (_c = (_b = (_a = message.contentParts) != null ? _a : message.llmContent) != null ? _b : message.rawContent) != null ? _c : message.content,
+        content: (_c = (_b = (_a2 = message.contentParts) != null ? _a2 : message.llmContent) != null ? _b : message.rawContent) != null ? _c : message.content,
         createdAt: message.createdAt
       };
     });
@@ -4346,6 +4755,10 @@ var AgentWidgetClient = class {
         ...this.config.agentOptions
       }
     };
+    const webMcpSnapshot = await ((_a = this.webMcpBridge) == null ? void 0 : _a.snapshotForDispatch());
+    if (webMcpSnapshot && webMcpSnapshot.length > 0) {
+      payload.clientTools = webMcpSnapshot;
+    }
     if (this.contextProviders.length) {
       const contextAggregate = {};
       await Promise.all(
@@ -4372,16 +4785,17 @@ var AgentWidgetClient = class {
     return payload;
   }
   async buildPayload(messages) {
+    var _a;
     const normalizedMessages = messages.slice().filter(hasValidContent).sort((a, b) => {
       const timeA = new Date(a.createdAt).getTime();
       const timeB = new Date(b.createdAt).getTime();
       return timeA - timeB;
     }).map((message) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       return {
         role: message.role,
         // Priority: contentParts (multi-modal) > llmContent (explicit LLM content) > rawContent (structured parsers) > content (display)
-        content: (_c = (_b = (_a = message.contentParts) != null ? _a : message.llmContent) != null ? _b : message.rawContent) != null ? _c : message.content,
+        content: (_c = (_b = (_a2 = message.contentParts) != null ? _a2 : message.llmContent) != null ? _b : message.rawContent) != null ? _c : message.content,
         createdAt: message.createdAt
       };
     });
@@ -4389,6 +4803,10 @@ var AgentWidgetClient = class {
       messages: normalizedMessages,
       ...this.config.flowId && { flowId: this.config.flowId }
     };
+    const webMcpSnapshot = await ((_a = this.webMcpBridge) == null ? void 0 : _a.snapshotForDispatch());
+    if (webMcpSnapshot && webMcpSnapshot.length > 0) {
+      payload.clientTools = webMcpSnapshot;
+    }
     if (this.contextProviders.length) {
       const contextAggregate = {};
       await Promise.all(
@@ -4419,7 +4837,11 @@ var AgentWidgetClient = class {
           config: this.config
         });
         if (result && typeof result === "object") {
-          return result;
+          const next = result;
+          if (payload.clientTools !== void 0 && !("clientTools" in next)) {
+            next.clientTools = payload.clientTools;
+          }
+          return next;
         }
       } catch (error) {
         if (typeof console !== "undefined") {
@@ -5056,7 +5478,8 @@ var AgentWidgetClient = class {
             toolContext.byCall.delete(callKey);
           }
         } else if (payloadType === "step_await" && payload.awaitReason === "local_tool_required" && payload.toolName) {
-          const toolId = (_X = payload.toolId) != null ? _X : `local-${nextSequence()}`;
+          const toolCallId = typeof payload.toolCallId === "string" && payload.toolCallId.length > 0 ? payload.toolCallId : void 0;
+          const toolId = (_X = toolCallId != null ? toolCallId : payload.toolId) != null ? _X : `local-${nextSequence()}`;
           const toolMessage = ensureToolMessage(toolId);
           const tool = (_Y = toolMessage.toolCall) != null ? _Y : { id: toolId, status: "pending" };
           tool.name = payload.toolName;
@@ -5070,7 +5493,11 @@ var AgentWidgetClient = class {
           toolMessage.agentMetadata = {
             ...toolMessage.agentMetadata,
             executionId: (_ca = payload.executionId) != null ? _ca : (_ba = toolMessage.agentMetadata) == null ? void 0 : _ba.executionId,
-            awaitingLocalTool: true
+            awaitingLocalTool: true,
+            // Only set when the server emitted a real per-call id; its presence
+            // is what tells session.ts to batch + key `/resume` by id rather
+            // than by tool name (which can't represent two same-tool calls).
+            ...toolCallId ? { webMcpToolCallId: toolCallId } : {}
           };
           emitMessage(toolMessage);
         } else if (payloadType === "text_start") {
@@ -7019,6 +7446,15 @@ function isVoiceSupported(config) {
 }
 
 // src/session.ts
+function buildDispatchErrorContent(error, override) {
+  const err = error instanceof Error ? error : new Error(String(error));
+  if (typeof override === "string") return override;
+  if (typeof override === "function") return override(err);
+  const base = "Sorry \u2014 I couldn't reach the assistant. The chat service didn't respond. Please check that your proxy or backend is running and reachable, then try again.";
+  return err.message ? `${base}
+
+_Details: ${err.message}_` : base;
+}
 var AgentWidgetSession = class _AgentWidgetSession {
   constructor(config = {}, callbacks) {
     this.config = config;
@@ -7033,6 +7469,62 @@ var AgentWidgetSession = class _AgentWidgetSession {
     this.agentExecution = null;
     this.artifacts = /* @__PURE__ */ new Map();
     this.selectedArtifactId = null;
+    // WebMCP dedupe — keys are `${executionId}:${toolCallId}` so they're
+    // naturally scoped to a single dispatch. A later dispatch (new executionId)
+    // that happens to recycle a `toolCall.id` never collides with prior entries,
+    // and a stale re-emit from an in-flight prior dispatch stays blocked because
+    // its executionId is still in the set.
+    //
+    //   webMcpInflightKeys  — currently executing; cleared on completion of
+    //                         EITHER /resume success OR /resume throw. Blocks
+    //                         concurrent re-fire during the resolve round-trip.
+    //   webMcpResolvedKeys  — /resume HTTP returned 2xx; not cleared on a new
+    //                         dispatch (executionId scoping makes that
+    //                         unnecessary). Blocks stale step_await re-emits
+    //                         for the same execution.
+    //
+    // If `/resume` throws (network error, server 5xx), we DO want a retry path:
+    // the dispatch is recoverable. Such a tool stays in neither set, so a
+    // subsequent re-emit will re-trigger.
+    this.webMcpInflightKeys = /* @__PURE__ */ new Set();
+    this.webMcpResolvedKeys = /* @__PURE__ */ new Set();
+    // Per-resolve AbortControllers, kept in a set so multiple `webmcp:*`
+    // step_await resolves in one turn never abort one another. The shared
+    // `this.abortController` is intentionally NOT used by resolveWebMcpToolCall:
+    // in a CHAINED turn (tool A → /resume → tool B, where the server emits B's
+    // step_await inside A's resume SSE stream) the shared controller is still
+    // piping A's resume stream — the very stream that just delivered B. Aborting
+    // it mid-chain (the prior shared-controller pre-abort) tore that stream down,
+    // so B never reached execute() and its /resume was never POSTed, pausing the
+    // dispatch forever. cancel(), clearMessages(), hydrateMessages(), and
+    // sendMessage() iterate this set to tear every in-flight resolve down on a
+    // real stop / new turn.
+    this.webMcpResolveControllers = /* @__PURE__ */ new Set();
+    // Bumped on every teardown / new-turn boundary (cancel, clearMessages,
+    // hydrateMessages, sendMessage). A resolveWebMcpToolCall deferred via
+    // queueMicrotask captures the epoch at queue time and bails if it changed,
+    // so a resolve queued just before a teardown can't escape it by installing a
+    // fresh controller after the set was already cleared.
+    this.webMcpEpoch = 0;
+    // WebMCP native approval-bubble gate. When no custom `webmcp.onConfirm` is
+    // supplied, the bridge's confirm handler routes here: we inject an
+    // approval-variant message and park the bridge on a Promise that resolves
+    // when the user clicks Approve/Deny (see requestWebMcpApproval /
+    // resolveWebMcpApproval). Resolvers are keyed by the approval message id.
+    this.webMcpApprovalResolvers = /* @__PURE__ */ new Map();
+    this.webMcpApprovalSeq = 0;
+    // Parallel local-tool batching (core#3878). A single model turn can emit
+    // multiple `step_await(local_tool_required)` events for ONE paused
+    // executionId — including two PARALLEL calls to the SAME tool ("add SHOE-001
+    // and SHOE-007"). Those collapse to an identical `toolId`/`index` and differ
+    // only by the per-call `webMcpToolCallId`. We collect all awaits for an
+    // executionId that arrive in the same stream tick, then post ONE `/resume`
+    // keyed by `webMcpToolCallId` — NOT one `/resume` per tool keyed by name
+    // (which collides for same-tool calls, and whose concurrent posts on one
+    // execution raced → the second 404'd → the turn hung). Keyed by executionId;
+    // `seen` dedupes duplicate step_await re-emits within a batch. Cleared on
+    // every teardown via `abortWebMcpResolves`.
+    this.webMcpAwaitBatches = /* @__PURE__ */ new Map();
     // Voice support
     this.voiceProvider = null;
     this.voiceActive = false;
@@ -7044,17 +7536,21 @@ var AgentWidgetSession = class _AgentWidgetSession {
     // so browser TTS doesn't double-speak them
     this.ttsSpokenMessageIds = /* @__PURE__ */ new Set();
     this.handleEvent = (event) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (event.type === "message") {
         this.upsertMessage(event.message);
-        if ((_a = event.message.agentMetadata) == null ? void 0 : _a.executionId) {
+        const tc = event.message.toolCall;
+        if (((_a = event.message.agentMetadata) == null ? void 0 : _a.awaitingLocalTool) === true && (tc == null ? void 0 : tc.name) && isWebMcpToolName(tc.name)) {
+          this.enqueueWebMcpAwait(event.message);
+        }
+        if ((_b = event.message.agentMetadata) == null ? void 0 : _b.executionId) {
           if (!this.agentExecution) {
             this.agentExecution = {
               executionId: event.message.agentMetadata.executionId,
               agentId: "",
-              agentName: (_b = event.message.agentMetadata.agentName) != null ? _b : "",
+              agentName: (_c = event.message.agentMetadata.agentName) != null ? _c : "",
               status: "running",
-              currentIteration: (_c = event.message.agentMetadata.iteration) != null ? _c : 0,
+              currentIteration: (_d = event.message.agentMetadata.iteration) != null ? _d : 0,
               maxTurns: 0
             };
           } else if (event.message.agentMetadata.iteration !== void 0) {
@@ -7066,20 +7562,30 @@ var AgentWidgetSession = class _AgentWidgetSession {
         if (event.status === "connecting") {
           this.setStreaming(true);
         } else if (event.status === "idle" || event.status === "error") {
-          this.setStreaming(false);
-          this.abortController = null;
-          if (((_d = this.agentExecution) == null ? void 0 : _d.status) === "running") {
-            this.agentExecution.status = event.status === "error" ? "error" : "complete";
+          if (this.webMcpResolveControllers.size === 0) {
+            this.setStreaming(false);
+            this.abortController = null;
+          }
+          const webMcpPending = this.webMcpAwaitBatches.size > 0 || this.webMcpResolveControllers.size > 0;
+          if (((_e = this.agentExecution) == null ? void 0 : _e.status) === "running") {
+            if (event.status === "error") {
+              this.agentExecution.status = "error";
+            } else if (!webMcpPending) {
+              this.agentExecution.status = "complete";
+            }
           }
+          this.scheduleWebMcpBatchFlush();
         }
       } else if (event.type === "error") {
         this.setStatus("error");
-        this.setStreaming(false);
-        this.abortController = null;
-        if (((_e = this.agentExecution) == null ? void 0 : _e.status) === "running") {
+        if (this.webMcpResolveControllers.size === 0) {
+          this.setStreaming(false);
+          this.abortController = null;
+        }
+        if (((_f = this.agentExecution) == null ? void 0 : _f.status) === "running") {
           this.agentExecution.status = "error";
         }
-        (_g = (_f = this.callbacks).onError) == null ? void 0 : _g.call(_f, event.error);
+        (_h = (_g = this.callbacks).onError) == null ? void 0 : _h.call(_g, event.error);
       } else if (event.type === "artifact_start" || event.type === "artifact_delta" || event.type === "artifact_update" || event.type === "artifact_complete") {
         this.applyArtifactStreamEvent(event);
       }
@@ -7094,6 +7600,7 @@ var AgentWidgetSession = class _AgentWidgetSession {
     });
     this.messages = this.sortMessages(this.messages);
     this.client = new AgentWidgetClient(config);
+    this.wireDefaultWebMcpConfirm();
     for (const rec of (_b = config.initialArtifacts) != null ? _b : []) {
       this.artifacts.set(rec.id, { ...rec, status: "complete" });
     }
@@ -7451,9 +7958,13 @@ var AgentWidgetSession = class _AgentWidgetSession {
     return this.client.submitNPSFeedback(rating, comment);
   }
   updateConfig(next) {
+    this.abortWebMcpResolves();
+    this.webMcpInflightKeys.clear();
+    this.webMcpResolvedKeys.clear();
     const prevSSECallback = this.client.getSSEEventCallback();
     this.config = { ...this.config, ...next };
     this.client = new AgentWidgetClient(this.config);
+    this.wireDefaultWebMcpConfirm();
     if (prevSSECallback) {
       this.client.setSSEEventCallback(prevSSECallback);
     }
@@ -7659,6 +8170,7 @@ var AgentWidgetSession = class _AgentWidgetSession {
     if (!input && (!(options == null ? void 0 : options.contentParts) || options.contentParts.length === 0)) return;
     this.stopSpeaking();
     (_a = this.abortController) == null ? void 0 : _a.abort();
+    this.abortWebMcpResolves();
     const userMessageId = generateUserMessageId();
     const assistantMessageId = generateAssistantMessageId();
     const userMessage = {
@@ -7692,15 +8204,21 @@ var AgentWidgetSession = class _AgentWidgetSession {
     } catch (error) {
       const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("aborted") || error.message.includes("abort"));
       if (!isAbortError) {
-        const fallback = {
-          id: assistantMessageId,
-          // Use the pre-generated ID for fallback too
-          role: "assistant",
-          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-          content: "It looks like the proxy isn't returning a real response yet. Here's a sample message so you can continue testing locally.",
-          sequence: this.nextSequence()
-        };
-        this.appendMessage(fallback);
+        const content = buildDispatchErrorContent(
+          error,
+          this.config.errorMessage
+        );
+        if (content) {
+          const fallback = {
+            id: assistantMessageId,
+            // Use the pre-generated ID for fallback too
+            role: "assistant",
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            content,
+            sequence: this.nextSequence()
+          };
+          this.appendMessage(fallback);
+        }
       }
       this.setStatus("idle");
       this.setStreaming(false);
@@ -7745,21 +8263,32 @@ var AgentWidgetSession = class _AgentWidgetSession {
         this.handleEvent
       );
     } catch (error) {
-      const fallback = {
-        id: assistantMessageId,
-        role: "assistant",
-        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-        content: "It looks like the proxy isn't returning a real response yet. Here's a sample message so you can continue testing locally.",
-        sequence: this.nextSequence()
-      };
-      this.appendMessage(fallback);
+      const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("aborted") || error.message.includes("abort"));
+      if (!isAbortError) {
+        const content = buildDispatchErrorContent(
+          error,
+          this.config.errorMessage
+        );
+        if (content) {
+          const fallback = {
+            id: assistantMessageId,
+            role: "assistant",
+            createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+            content,
+            sequence: this.nextSequence()
+          };
+          this.appendMessage(fallback);
+        }
+      }
       this.setStatus("idle");
       this.setStreaming(false);
       this.abortController = null;
-      if (error instanceof Error) {
-        (_c = (_b = this.callbacks).onError) == null ? void 0 : _c.call(_b, error);
-      } else {
-        (_e = (_d = this.callbacks).onError) == null ? void 0 : _e.call(_d, new Error(String(error)));
+      if (!isAbortError) {
+        if (error instanceof Error) {
+          (_c = (_b = this.callbacks).onError) == null ? void 0 : _c.call(_b, error);
+        } else {
+          (_e = (_d = this.callbacks).onError) == null ? void 0 : _e.call(_d, new Error(String(error)));
+        }
       }
     }
   }
@@ -7792,14 +8321,92 @@ var AgentWidgetSession = class _AgentWidgetSession {
       );
     } catch (error) {
       this.setStatus("error");
-      this.setStreaming(false);
-      this.abortController = null;
+      if (this.webMcpResolveControllers.size === 0) {
+        this.setStreaming(false);
+        this.abortController = null;
+      }
       (_c = (_b = this.callbacks).onError) == null ? void 0 : _c.call(
         _b,
         error instanceof Error ? error : new Error(String(error))
       );
     }
   }
+  /**
+   * Install the native approval-bubble confirm handler on the WebMCP bridge
+   * when the integrator hasn't supplied a custom `webmcp.onConfirm`. Without
+   * this, the bridge falls back to a blunt `window.confirm`. Safe to call
+   * repeatedly (e.g. after the client is re-created in `updateConfig`).
+   */
+  wireDefaultWebMcpConfirm() {
+    const webmcp = this.config.webmcp;
+    if ((webmcp == null ? void 0 : webmcp.enabled) === true && !webmcp.onConfirm) {
+      this.client.setWebMcpConfirmHandler(
+        (info) => this.requestWebMcpApproval(info)
+      );
+    }
+  }
+  /**
+   * Default WebMCP confirm gate: render Persona's native in-panel approval
+   * bubble and resolve when the user clicks Approve/Deny. Returns immediately
+   * with `true` when `webmcp.autoApprove(info)` opts the tool out of the gate
+   * (e.g. a read-only catalog search), so no bubble is shown. The bridge
+   * awaits this Promise before executing the page tool.
+   */
+  requestWebMcpApproval(info) {
+    var _a, _b, _c;
+    try {
+      if (((_b = (_a = this.config.webmcp) == null ? void 0 : _a.autoApprove) == null ? void 0 : _b.call(_a, info)) === true) {
+        return Promise.resolve(true);
+      }
+    } catch {
+    }
+    const approval = {
+      id: `webmcp-${++this.webMcpApprovalSeq}`,
+      status: "pending",
+      agentId: "",
+      executionId: "",
+      toolName: info.toolName,
+      toolType: "webmcp",
+      description: (_c = info.description) != null ? _c : `Allow the assistant to run ${info.toolName}?`,
+      parameters: info.args
+    };
+    const approvalMessageId = `approval-${approval.id}`;
+    this.upsertMessage({
+      id: approvalMessageId,
+      role: "assistant",
+      content: "",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      streaming: false,
+      variant: "approval",
+      approval
+    });
+    return new Promise((resolve) => {
+      this.webMcpApprovalResolvers.set(approvalMessageId, resolve);
+    });
+  }
+  /**
+   * Resolve a pending WebMCP approval bubble (from the Approve/Deny click in
+   * `ui.ts`). Updates the bubble to its resolved state and unblocks the
+   * bridge Promise parked in `requestWebMcpApproval`. No-op if already
+   * resolved (double-click, re-render).
+   */
+  resolveWebMcpApproval(approvalMessageId, decision) {
+    const resolve = this.webMcpApprovalResolvers.get(approvalMessageId);
+    if (!resolve) return;
+    this.webMcpApprovalResolvers.delete(approvalMessageId);
+    const existing = this.messages.find((m) => m.id === approvalMessageId);
+    if (existing == null ? void 0 : existing.approval) {
+      this.upsertMessage({
+        ...existing,
+        approval: {
+          ...existing.approval,
+          status: decision,
+          resolvedAt: Date.now()
+        }
+      });
+    }
+    resolve(decision === "approved");
+  }
   /**
    * Resolve a tool approval request (approve or deny).
    * Updates the approval message status, calls the API (or custom onDecision),
@@ -8041,10 +8648,378 @@ var AgentWidgetSession = class _AgentWidgetSession {
       }
     }
   }
+  /**
+   * Collect a `webmcp:*` LOCAL-tool `step_await` into a per-executionId batch
+   * and schedule a single deferred flush. Parallel calls (core#3878) emit
+   * several `step_await`s for ONE paused execution within the same stream tick;
+   * buffering them and flushing once lets us post ONE `/resume` keyed by the
+   * per-call `webMcpToolCallId` rather than racing N name-keyed resumes on the
+   * same execution (which 404'd on the second and hung the turn).
+   *
+   * Deferred via `queueMicrotask` (epoch-guarded) for the same reason the old
+   * direct resolve was: handleEvent must return first so the dispatch's
+   * `connectStream` sees end-of-stream and releases the shared abortController
+   * before a resolve grabs it.
+   *
+   * Awaits without an `executionId` or `toolCall.id` can't be batched (no key)
+   * — route them straight to the single-call path, which surfaces the malformed
+   * wire shape via `onError` / an `isError` resume.
+   */
+  enqueueWebMcpAwait(toolMessage) {
+    var _a, _b;
+    const executionId = (_a = toolMessage.agentMetadata) == null ? void 0 : _a.executionId;
+    const callId = (_b = toolMessage.toolCall) == null ? void 0 : _b.id;
+    if (!executionId || !callId) {
+      const queuedEpoch = this.webMcpEpoch;
+      queueMicrotask(() => {
+        if (queuedEpoch !== this.webMcpEpoch) return;
+        void this.resolveWebMcpToolCall(toolMessage);
+      });
+      return;
+    }
+    let batch = this.webMcpAwaitBatches.get(executionId);
+    if (!batch) {
+      batch = { snapshots: [], seen: /* @__PURE__ */ new Set() };
+      this.webMcpAwaitBatches.set(executionId, batch);
+    }
+    if (batch.seen.has(callId)) return;
+    batch.seen.add(callId);
+    batch.snapshots.push(toolMessage);
+  }
+  /**
+   * Flush every buffered local-tool await batch, one `/resume` per executionId.
+   * Called once a stream ends (`status: idle` / `error`) — by then all parallel
+   * `step_await`s the stream carried have been collected, even if split across
+   * SSE chunks. Deferred via `queueMicrotask` (epoch-guarded) so the idle
+   * handler returns first and the stream's end-of-stream teardown (streaming /
+   * abortController) settles before a resolve grabs them — the same ordering the
+   * single-call resolve always relied on.
+   */
+  scheduleWebMcpBatchFlush() {
+    if (this.webMcpAwaitBatches.size === 0) return;
+    const queuedEpoch = this.webMcpEpoch;
+    queueMicrotask(() => {
+      if (queuedEpoch !== this.webMcpEpoch) return;
+      for (const executionId of [...this.webMcpAwaitBatches.keys()]) {
+        this.flushWebMcpAwaitBatch(executionId);
+      }
+    });
+  }
+  /**
+   * Run a buffered batch of local-tool awaits for one executionId. Size 1
+   * (single call, or distinct-tool turns that happened to arrive alone) takes
+   * the original single-call path; size >1 (parallel calls) takes the batched
+   * path that posts ONE `/resume`. The batch is removed from the map up front
+   * so any later sibling re-emit (e.g. from a re-pause) forms a fresh batch
+   * rather than mutating one already in flight.
+   */
+  flushWebMcpAwaitBatch(executionId) {
+    const batch = this.webMcpAwaitBatches.get(executionId);
+    if (!batch) return;
+    this.webMcpAwaitBatches.delete(executionId);
+    const { snapshots } = batch;
+    if (snapshots.length === 1) {
+      void this.resolveWebMcpToolCall(snapshots[0]);
+    } else if (snapshots.length > 1) {
+      void this.resolveWebMcpToolCallBatch(executionId, snapshots);
+    }
+  }
+  /**
+   * Resolve TWO OR MORE parallel local-tool awaits sharing one paused
+   * executionId with a SINGLE `/resume` (core#3878). Each call is executed
+   * against the page registry concurrently — every gated call renders its own
+   * native approval bubble, and a sibling's confirm Promise never blocks
+   * another's execution. Outputs are keyed by per-call `webMcpToolCallId`
+   * (server prefers it over tool name; name-keying remains the fallback for
+   * legacy single/distinct-tool turns), so two calls to the SAME tool no longer
+   * collide. The server is tolerant: any call we omit (declined-after-abort,
+   * dedupe, exec failure) simply re-pauses and is retried on its re-emit.
+   *
+   * Mirrors `resolveWebMcpToolCall`'s dedupe / abort / streaming machinery, but
+   * shares one resume POST and marks every resolved key on that POST's HTTP OK.
+   */
+  async resolveWebMcpToolCallBatch(executionId, snapshots) {
+    var _a, _b, _c;
+    const claimedKeys = [];
+    const controllers = [];
+    const resumeController = new AbortController();
+    this.webMcpResolveControllers.add(resumeController);
+    this.setStreaming(true);
+    const executed = await Promise.all(
+      snapshots.map(async (toolMessage) => {
+        var _a2, _b2, _c2, _d, _e, _f, _g;
+        const wireToolName = (_a2 = toolMessage.toolCall) == null ? void 0 : _a2.name;
+        const callId = (_b2 = toolMessage.toolCall) == null ? void 0 : _b2.id;
+        if (!wireToolName || !callId) return null;
+        const dedupeKey = `${executionId}:${callId}`;
+        if (this.webMcpInflightKeys.has(dedupeKey) || this.webMcpResolvedKeys.has(dedupeKey)) {
+          return null;
+        }
+        this.webMcpInflightKeys.add(dedupeKey);
+        claimedKeys.push(dedupeKey);
+        this.upsertMessage({
+          ...toolMessage,
+          agentMetadata: {
+            ...toolMessage.agentMetadata,
+            awaitingLocalTool: false
+          }
+        });
+        const controller = new AbortController();
+        this.webMcpResolveControllers.add(controller);
+        controllers.push(controller);
+        const resumeKey = (_d = (_c2 = toolMessage.agentMetadata) == null ? void 0 : _c2.webMcpToolCallId) != null ? _d : wireToolName;
+        const execPromise = this.client.executeWebMcpToolCall(
+          wireToolName,
+          (_e = toolMessage.toolCall) == null ? void 0 : _e.args,
+          controller.signal
+        );
+        let output;
+        if (!execPromise) {
+          output = {
+            isError: true,
+            content: [
+              { type: "text", text: "WebMCP not enabled on this widget." }
+            ]
+          };
+        } else {
+          try {
+            output = await execPromise;
+          } catch (error) {
+            const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("aborted") || error.message.includes("abort"));
+            if (!isAbortError) {
+              (_g = (_f = this.callbacks).onError) == null ? void 0 : _g.call(
+                _f,
+                error instanceof Error ? error : new Error(String(error))
+              );
+            }
+            this.webMcpInflightKeys.delete(dedupeKey);
+            return null;
+          }
+        }
+        if (controller.signal.aborted) {
+          this.webMcpInflightKeys.delete(dedupeKey);
+          return null;
+        }
+        return { dedupeKey, resumeKey, output };
+      })
+    );
+    try {
+      const ready = executed.filter(
+        (r) => r !== null
+      );
+      if (ready.length === 0) return;
+      const toolOutputs = {};
+      for (const r of ready) {
+        toolOutputs[r.resumeKey] = r.output;
+      }
+      const response = await this.client.resumeFlow(executionId, toolOutputs, {
+        signal: resumeController.signal
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        throw new Error((_a = errorData == null ? void 0 : errorData.error) != null ? _a : `Resume failed: ${response.status}`);
+      }
+      for (const r of ready) {
+        this.webMcpResolvedKeys.add(r.dedupeKey);
+      }
+      if (response.body) {
+        await this.connectStream(response.body, { allowReentry: true });
+      }
+    } catch (error) {
+      const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("aborted") || error.message.includes("abort"));
+      if (!isAbortError) {
+        (_c = (_b = this.callbacks).onError) == null ? void 0 : _c.call(
+          _b,
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+    } finally {
+      for (const key of claimedKeys) {
+        this.webMcpInflightKeys.delete(key);
+      }
+      for (const controller of controllers) {
+        this.webMcpResolveControllers.delete(controller);
+      }
+      this.webMcpResolveControllers.delete(resumeController);
+      if (this.webMcpResolveControllers.size === 0 && !this.abortController) {
+        this.setStreaming(false);
+      }
+    }
+  }
+  /**
+   * Resolve a paused `webmcp:*` LOCAL tool call by executing it against the
+   * host page's tool registry and posting the result to `/resume`.
+   *
+   * Triggered automatically from `handleEvent` when a `step_await`-derived
+   * message arrives with a `webmcp:` prefix — the user does not click a
+   * pill; the bridge's confirm-bubble gate is the only interactive surface.
+   *
+   * Idempotent on the message's `toolCall.id`: re-emits of the same step_await
+   * (e.g. from message coalescing) won't double-fire `tool.execute`. Failure
+   * modes — declined, timed out, throw, unknown tool — all resolve into a
+   * `{ isError: true, content: [...] }` payload that resumes the dispatch
+   * cleanly so the agent can recover.
+   */
+  async resolveWebMcpToolCall(toolMessage) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    const executionId = (_a = toolMessage.agentMetadata) == null ? void 0 : _a.executionId;
+    const wireToolName = (_b = toolMessage.toolCall) == null ? void 0 : _b.name;
+    const toolCallId = (_c = toolMessage.toolCall) == null ? void 0 : _c.id;
+    if (!executionId) {
+      (_e = (_d = this.callbacks).onError) == null ? void 0 : _e.call(
+        _d,
+        new Error(
+          "WebMCP step_await missing executionId \u2014 dispatch left paused."
+        )
+      );
+      return;
+    }
+    if (!wireToolName) return;
+    if (!toolCallId) {
+      const malformedKey = `${executionId}:__no_tool_id__:${wireToolName}`;
+      if (this.webMcpInflightKeys.has(malformedKey) || this.webMcpResolvedKeys.has(malformedKey)) {
+        return;
+      }
+      this.webMcpInflightKeys.add(malformedKey);
+      try {
+        await this.resumeWithToolOutput(executionId, wireToolName, {
+          isError: true,
+          content: [
+            {
+              type: "text",
+              text: "WebMCP step_await missing toolCall.id \u2014 cannot execute the page tool."
+            }
+          ]
+        });
+        this.webMcpResolvedKeys.add(malformedKey);
+      } catch (error) {
+        (_g = (_f = this.callbacks).onError) == null ? void 0 : _g.call(
+          _f,
+          error instanceof Error ? error : new Error(String(error))
+        );
+      } finally {
+        this.webMcpInflightKeys.delete(malformedKey);
+      }
+      return;
+    }
+    const dedupeKey = `${executionId}:${toolCallId}`;
+    if (this.webMcpInflightKeys.has(dedupeKey) || this.webMcpResolvedKeys.has(dedupeKey)) {
+      return;
+    }
+    this.webMcpInflightKeys.add(dedupeKey);
+    this.upsertMessage({
+      ...toolMessage,
+      agentMetadata: {
+        ...toolMessage.agentMetadata,
+        awaitingLocalTool: false
+      }
+    });
+    const resolveController = new AbortController();
+    this.webMcpResolveControllers.add(resolveController);
+    const { signal } = resolveController;
+    this.setStreaming(true);
+    const args = (_h = toolMessage.toolCall) == null ? void 0 : _h.args;
+    const execPromise = this.client.executeWebMcpToolCall(
+      wireToolName,
+      args,
+      signal
+    );
+    try {
+      let resumeOutput;
+      if (!execPromise) {
+        resumeOutput = {
+          isError: true,
+          content: [
+            { type: "text", text: "WebMCP not enabled on this widget." }
+          ]
+        };
+      } else {
+        resumeOutput = await execPromise;
+      }
+      if (signal.aborted) {
+        return;
+      }
+      const resumeKey = (_j = (_i = toolMessage.agentMetadata) == null ? void 0 : _i.webMcpToolCallId) != null ? _j : wireToolName;
+      await this.resumeWithToolOutput(executionId, resumeKey, resumeOutput, {
+        onHttpOk: () => {
+          this.webMcpResolvedKeys.add(dedupeKey);
+        },
+        signal
+      });
+    } catch (error) {
+      const isAbortError = error instanceof Error && (error.name === "AbortError" || error.message.includes("aborted") || error.message.includes("abort"));
+      if (!isAbortError) {
+        (_l = (_k = this.callbacks).onError) == null ? void 0 : _l.call(
+          _k,
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+    } finally {
+      this.webMcpInflightKeys.delete(dedupeKey);
+      this.webMcpResolveControllers.delete(resolveController);
+      if (this.webMcpResolveControllers.size === 0 && !this.abortController) {
+        this.setStreaming(false);
+      }
+    }
+  }
+  /**
+   * POST `/resume` with a SINGLE tool's output and pipe the resulting SSE
+   * stream back through `connectStream`. Shared by every single-call local-tool
+   * resolve path (ask_user_question and single WebMCP calls). Parallel WebMCP
+   * calls use `resolveWebMcpToolCallBatch`, which posts one resume for many.
+   *
+   * `resumeKey` is the `toolOutputs` map key: the per-call `webMcpToolCallId`
+   * for WebMCP (core#3878), or the tool name for ask_user_question / legacy
+   * servers. `onHttpOk` runs synchronously between the HTTP-status check and the
+   * stream pipe; it lets the WebMCP resolve path commit the dedupe flag at
+   * "server accepted the answer" rather than "stream finished cleanly".
+   */
+  async resumeWithToolOutput(executionId, resumeKey, output, options) {
+    var _a, _b;
+    const response = await this.client.resumeFlow(
+      executionId,
+      { [resumeKey]: output },
+      { signal: options == null ? void 0 : options.signal }
+    );
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error((_a = errorData == null ? void 0 : errorData.error) != null ? _a : `Resume failed: ${response.status}`);
+    }
+    (_b = options == null ? void 0 : options.onHttpOk) == null ? void 0 : _b.call(options);
+    if (response.body) {
+      await this.connectStream(response.body, { allowReentry: true });
+    } else if (this.webMcpResolveControllers.size === 0) {
+      this.setStreaming(false);
+      this.abortController = null;
+    }
+  }
+  /**
+   * Tear down every in-flight WebMCP resolve and advance the epoch. Each
+   * resolve owns a dedicated AbortController (chained/parallel resolves don't
+   * share one), so we abort them individually; the aborts propagate into the
+   * bridge's execute race and into each `/resume` fetch signal. Bumping
+   * `webMcpEpoch` strands any resolve still deferred in a queued microtask —
+   * it captured the prior epoch and bails before installing a fresh
+   * controller, so it can't escape this teardown. Called from every stop /
+   * new-turn boundary (cancel, clearMessages, hydrateMessages, sendMessage).
+   */
+  abortWebMcpResolves() {
+    for (const controller of this.webMcpResolveControllers) {
+      controller.abort();
+    }
+    this.webMcpResolveControllers.clear();
+    for (const approvalMessageId of [...this.webMcpApprovalResolvers.keys()]) {
+      this.resolveWebMcpApproval(approvalMessageId, "denied");
+    }
+    this.webMcpAwaitBatches.clear();
+    this.webMcpEpoch++;
+  }
   cancel() {
     var _a;
     (_a = this.abortController) == null ? void 0 : _a.abort();
     this.abortController = null;
+    this.abortWebMcpResolves();
+    this.webMcpInflightKeys.clear();
     this.stopSpeaking();
     this.stopVoicePlayback();
     this.setStreaming(false);
@@ -8055,9 +9030,12 @@ var AgentWidgetSession = class _AgentWidgetSession {
     this.stopSpeaking();
     (_a = this.abortController) == null ? void 0 : _a.abort();
     this.abortController = null;
+    this.abortWebMcpResolves();
     this.messages = [];
     this.agentExecution = null;
     this.clearArtifactState();
+    this.webMcpInflightKeys.clear();
+    this.webMcpResolvedKeys.clear();
     this.setStreaming(false);
     this.setStatus("idle");
     this.callbacks.onMessagesChanged([...this.messages]);
@@ -8174,6 +9152,9 @@ var AgentWidgetSession = class _AgentWidgetSession {
     var _a;
     (_a = this.abortController) == null ? void 0 : _a.abort();
     this.abortController = null;
+    this.abortWebMcpResolves();
+    this.webMcpInflightKeys.clear();
+    this.webMcpResolvedKeys.clear();
     this.messages = this.sortMessages(
       messages.map((message) => {
         var _a2;
@@ -8303,7 +9284,7 @@ var AgentWidgetSession = class _AgentWidgetSession {
       return;
     }
     this.messages = this.messages.map((existing, idx) => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       if (idx !== index) return existing;
       const merged = { ...existing, ...withSequence };
       if (((_a = existing.agentMetadata) == null ? void 0 : _a.askUserQuestionAnswered) === true && withSequence.agentMetadata) {
@@ -8318,6 +9299,18 @@ var AgentWidgetSession = class _AgentWidgetSession {
           awaitingLocalTool: false
         };
       }
+      const reTcName = (_b = withSequence.toolCall) == null ? void 0 : _b.name;
+      const reExecId = (_c = withSequence.agentMetadata) == null ? void 0 : _c.executionId;
+      const reTcId = (_d = withSequence.toolCall) == null ? void 0 : _d.id;
+      if (reTcName && isWebMcpToolName(reTcName) && reExecId && reTcId && ((_e = withSequence.agentMetadata) == null ? void 0 : _e.awaitingLocalTool) === true) {
+        const reKey = `${reExecId}:${reTcId}`;
+        if (this.webMcpInflightKeys.has(reKey) || this.webMcpResolvedKeys.has(reKey)) {
+          merged.agentMetadata = {
+            ...(_f = merged.agentMetadata) != null ? _f : {},
+            awaitingLocalTool: false
+          };
+        }
+      }
       return merged;
     });
     this.messages = this.sortMessages(this.messages);
@@ -8955,9 +9948,60 @@ var morphMessages = (container, newContent, options = {}) => {
   });
 };
 
+// src/utils/composer-history.ts
+var INITIAL_HISTORY_STATE = {
+  index: -1,
+  draft: ""
+};
+function navigateComposerHistory(input) {
+  const { direction, history, currentValue, atStart, state } = input;
+  const inHistory = state.index !== -1;
+  if (history.length === 0) {
+    return { handled: false, state };
+  }
+  if (direction === "up") {
+    if (!inHistory && !atStart) {
+      return { handled: false, state };
+    }
+    if (!inHistory) {
+      const index = history.length - 1;
+      return {
+        handled: true,
+        value: history[index],
+        state: { index, draft: currentValue }
+      };
+    }
+    if (state.index > 0) {
+      const index = state.index - 1;
+      return {
+        handled: true,
+        value: history[index],
+        state: { index, draft: state.draft }
+      };
+    }
+    return { handled: true, state };
+  }
+  if (!inHistory) {
+    return { handled: false, state };
+  }
+  if (state.index < history.length - 1) {
+    const index = state.index + 1;
+    return {
+      handled: true,
+      value: history[index],
+      state: { index, draft: state.draft }
+    };
+  }
+  return {
+    handled: true,
+    value: state.draft,
+    state: { ...INITIAL_HISTORY_STATE }
+  };
+}
+
 // src/utils/message-fingerprint.ts
 function computeMessageFingerprint(message, configVersion) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
   return [
     message.id,
     message.role,
@@ -8974,8 +10018,10 @@ function computeMessageFingerprint(message, configVersion) {
     (_v = (_u = (_t = (_s = message.toolCall) == null ? void 0 : _s.chunks) == null ? void 0 : _t[message.toolCall.chunks.length - 1]) == null ? void 0 : _u.slice(-32)) != null ? _v : "",
     typeof ((_w = message.toolCall) == null ? void 0 : _w.args) === "string" ? message.toolCall.args.length : ((_x = message.toolCall) == null ? void 0 : _x.args) ? JSON.stringify(message.toolCall.args).length : 0,
     (_A = (_z = (_y = message.reasoning) == null ? void 0 : _y.chunks) == null ? void 0 : _z.length) != null ? _A : 0,
-    (_C = (_B = message.contentParts) == null ? void 0 : _B.length) != null ? _C : 0,
-    (_D = message.stopReason) != null ? _D : "",
+    (_E = (_D = (_C = (_B = message.reasoning) == null ? void 0 : _B.chunks) == null ? void 0 : _C[message.reasoning.chunks.length - 1]) == null ? void 0 : _D.length) != null ? _E : 0,
+    (_I = (_H = (_G = (_F = message.reasoning) == null ? void 0 : _F.chunks) == null ? void 0 : _G[message.reasoning.chunks.length - 1]) == null ? void 0 : _H.slice(-32)) != null ? _I : "",
+    (_K = (_J = message.contentParts) == null ? void 0 : _J.length) != null ? _K : 0,
+    (_L = message.stopReason) != null ? _L : "",
     configVersion
   ].join("\0");
 }
@@ -11501,11 +12547,11 @@ var createTypingIndicator = () => {
   container.appendChild(srOnly);
   return container;
 };
-var renderLoadingIndicatorWithFallback = (location, customRenderer, widgetConfig) => {
+var renderLoadingIndicatorWithFallback = (location2, customRenderer, widgetConfig) => {
   const context = {
     config: widgetConfig != null ? widgetConfig : {},
     streaming: true,
-    location,
+    location: location2,
     defaultRenderer: createTypingIndicator
   };
   if (customRenderer) {
@@ -16128,7 +17174,7 @@ function buildDropOverlay(dropCfg) {
   return overlay;
 }
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V;
   if (mount == null) {
     throw new Error(
       'createAgentExperience: mount must be a non-null HTMLElement (e.g. pass document.getElementById("my-root") after the node exists).'
@@ -16884,7 +17930,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         btn.style.cursor = "not-allowed";
       });
     }
-    session.resolveApproval(approvalMessage.approval, decision);
+    if (approvalMessage.approval.toolType === "webmcp") {
+      session.resolveWebMcpApproval(messageId, decision);
+    } else {
+      session.resolveApproval(approvalMessage.approval, decision);
+    }
   });
   let artifactPaneApi = null;
   let artifactPanelResizeObs = null;
@@ -19219,17 +20269,77 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
     textarea.value = "";
     textarea.style.height = "auto";
+    resetHistoryNavigation();
     session.sendMessage(value, { contentParts });
     if (hasAttachments) {
       attachmentManager.clearAttachments();
     }
   };
-  const handleInputEnter = (event) => {
+  const historyNavigationEnabled = () => {
+    var _a2;
+    return ((_a2 = config.features) == null ? void 0 : _a2.composerHistory) !== false;
+  };
+  let composerHistoryState = { ...INITIAL_HISTORY_STATE };
+  let suppressHistoryReset = false;
+  const resetHistoryNavigation = () => {
+    composerHistoryState = { ...INITIAL_HISTORY_STATE };
+  };
+  const getUserMessageHistory = () => session.getMessages().filter((message) => message.role === "user").map((message) => {
+    var _a2;
+    return (_a2 = message.content) != null ? _a2 : "";
+  }).filter((text) => text.length > 0);
+  const applyHistoryValue = (value) => {
+    if (!textarea) return;
+    suppressHistoryReset = true;
+    textarea.value = value;
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    suppressHistoryReset = false;
+    const end = textarea.value.length;
+    textarea.setSelectionRange(end, end);
+  };
+  const handleComposerInput = () => {
+    if (suppressHistoryReset) return;
+    resetHistoryNavigation();
+  };
+  const handleComposerKeydown = (event) => {
+    if (!textarea) return;
+    if (historyNavigationEnabled() && (event.key === "ArrowUp" || event.key === "ArrowDown") && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && !event.isComposing) {
+      const atStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0;
+      const result = navigateComposerHistory({
+        direction: event.key === "ArrowUp" ? "up" : "down",
+        history: getUserMessageHistory(),
+        currentValue: textarea.value,
+        atStart,
+        state: composerHistoryState
+      });
+      composerHistoryState = result.state;
+      if (result.handled) {
+        event.preventDefault();
+        if (result.value !== void 0) {
+          applyHistoryValue(result.value);
+        }
+        return;
+      }
+    }
     if (event.key === "Enter" && !event.shiftKey) {
+      if (session.isStreaming()) {
+        event.preventDefault();
+        return;
+      }
+      resetHistoryNavigation();
       event.preventDefault();
       sendButton.click();
     }
   };
+  const handleEscStop = (event) => {
+    if (event.key !== "Escape" || event.isComposing) return;
+    if (!session.isStreaming()) return;
+    if (!event.composedPath().includes(container)) return;
+    session.cancel();
+    resetHistoryNavigation();
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
   const handleInputPaste = async (event) => {
     var _a2;
     if (((_a2 = config.attachments) == null ? void 0 : _a2.enabled) !== true || !attachmentManager) return;
@@ -19902,8 +21012,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   if (composerForm) {
     composerForm.addEventListener("submit", handleSubmit);
   }
-  textarea == null ? void 0 : textarea.addEventListener("keydown", handleInputEnter);
+  textarea == null ? void 0 : textarea.addEventListener("keydown", handleComposerKeydown);
+  textarea == null ? void 0 : textarea.addEventListener("input", handleComposerInput);
   textarea == null ? void 0 : textarea.addEventListener("paste", handleInputPaste);
+  const escStopDoc = (_P = mount.ownerDocument) != null ? _P : document;
+  escStopDoc.addEventListener("keydown", handleEscStop, true);
   const ATTACHMENT_DROP_ACTIVE_CLASS = "persona-attachment-drop-active";
   let attachmentFileDragDepth = 0;
   const clearAttachmentDropVisual = () => {
@@ -19963,8 +21076,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (composerForm) {
       composerForm.removeEventListener("submit", handleSubmit);
     }
-    textarea == null ? void 0 : textarea.removeEventListener("keydown", handleInputEnter);
+    textarea == null ? void 0 : textarea.removeEventListener("keydown", handleComposerKeydown);
+    textarea == null ? void 0 : textarea.removeEventListener("input", handleComposerInput);
     textarea == null ? void 0 : textarea.removeEventListener("paste", handleInputPaste);
+    escStopDoc.removeEventListener("keydown", handleEscStop, true);
   });
   destroyCallbacks.push(() => {
     container.removeEventListener("dragenter", handleAttachmentDragEnterCapture, attachmentDropCapture);
@@ -19989,7 +21104,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O2, _P2, _Q2, _R2, _S2, _T2, _U2, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O2, _P2, _Q2, _R2, _S2, _T2, _U2, _V2, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -20263,7 +21378,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         }
       }
       const layoutShowTitle = (_T2 = (_S2 = config.layout) == null ? void 0 : _S2.header) == null ? void 0 : _T2.showTitle;
-      const layoutShowSubtitle = (_V = (_U2 = config.layout) == null ? void 0 : _U2.header) == null ? void 0 : _V.showSubtitle;
+      const layoutShowSubtitle = (_V2 = (_U2 = config.layout) == null ? void 0 : _U2.header) == null ? void 0 : _V2.showSubtitle;
       if (headerTitle) {
         headerTitle.style.display = layoutShowTitle === false ? "none" : "";
       }
@@ -21188,6 +22303,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (!(approvalMessage == null ? void 0 : approvalMessage.approval)) {
         throw new Error(`Approval not found: ${approvalId}`);
       }
+      if (approvalMessage.approval.toolType === "webmcp") {
+        session.resolveWebMcpApproval(approvalMessage.id, decision);
+        return;
+      }
       return session.resolveApproval(approvalMessage.approval, decision);
     },
     getMessages() {
@@ -21289,7 +22408,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   };
-  const shouldExposeDebugApi = ((_P = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _P : false) || Boolean(config.debug);
+  const shouldExposeDebugApi = ((_Q = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _Q : false) || Boolean(config.debug);
   if (shouldExposeDebugApi && typeof window !== "undefined") {
     const previousDebug = window.AgentWidgetBrowser;
     const debugApi = {
@@ -21392,9 +22511,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const voiceKey = `${persistConfig.keyPrefix}widget-voice`;
     const voiceModeKey = `${persistConfig.keyPrefix}widget-voice-mode`;
     if (storage) {
-      const wasOpen = ((_Q = persistConfig.persist) == null ? void 0 : _Q.openState) && storage.getItem(openKey) === "true";
-      const wasVoiceActive = ((_R = persistConfig.persist) == null ? void 0 : _R.voiceState) && storage.getItem(voiceKey) === "true";
-      const wasInVoiceMode = ((_S = persistConfig.persist) == null ? void 0 : _S.voiceState) && storage.getItem(voiceModeKey) === "true";
+      const wasOpen = ((_R = persistConfig.persist) == null ? void 0 : _R.openState) && storage.getItem(openKey) === "true";
+      const wasVoiceActive = ((_S = persistConfig.persist) == null ? void 0 : _S.voiceState) && storage.getItem(voiceKey) === "true";
+      const wasInVoiceMode = ((_T = persistConfig.persist) == null ? void 0 : _T.voiceState) && storage.getItem(voiceModeKey) === "true";
       if (wasOpen) {
         setTimeout(() => {
           controller.open();
@@ -21411,7 +22530,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }, 100);
         }, 0);
       }
-      if ((_T = persistConfig.persist) == null ? void 0 : _T.openState) {
+      if ((_U = persistConfig.persist) == null ? void 0 : _U.openState) {
         eventBus.on("widget:opened", () => {
           storage.setItem(openKey, "true");
         });
@@ -21419,7 +22538,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           storage.setItem(openKey, "false");
         });
       }
-      if ((_U = persistConfig.persist) == null ? void 0 : _U.voiceState) {
+      if ((_V = persistConfig.persist) == null ? void 0 : _V.voiceState) {
         eventBus.on("voice:state", (event) => {
           storage.setItem(voiceKey, event.active ? "true" : "false");
         });
@@ -22570,6 +23689,1054 @@ function createThemePreview(container, initialOptions) {
     }
   };
 }
+
+// src/theme-editor/webmcp/types.ts
+function toolResult(payload) {
+  return {
+    content: [{ type: "text", text: JSON.stringify(payload, null, 2) }],
+    structuredContent: payload
+  };
+}
+
+// src/theme-editor/webmcp/coerce.ts
+var CSS_NAMED_COLORS = {
+  black: "#000000",
+  white: "#ffffff",
+  red: "#ff0000",
+  green: "#008000",
+  lime: "#00ff00",
+  blue: "#0000ff",
+  yellow: "#ffff00",
+  cyan: "#00ffff",
+  aqua: "#00ffff",
+  magenta: "#ff00ff",
+  fuchsia: "#ff00ff",
+  silver: "#c0c0c0",
+  gray: "#808080",
+  grey: "#808080",
+  maroon: "#800000",
+  olive: "#808000",
+  purple: "#800080",
+  teal: "#008080",
+  navy: "#000080",
+  orange: "#ffa500",
+  pink: "#ffc0cb",
+  hotpink: "#ff69b4",
+  gold: "#ffd700",
+  indigo: "#4b0082",
+  violet: "#ee82ee",
+  brown: "#a52a2a",
+  beige: "#f5f5dc",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  coral: "#ff7f50",
+  salmon: "#fa8072",
+  tomato: "#ff6347",
+  crimson: "#dc143c",
+  turquoise: "#40e0d0",
+  lavender: "#e6e6fa",
+  plum: "#dda0dd",
+  orchid: "#da70d6",
+  tan: "#d2b48c",
+  chocolate: "#d2691e",
+  sienna: "#a0522d",
+  slategray: "#708090",
+  slategrey: "#708090",
+  steelblue: "#4682b4",
+  royalblue: "#4169e1",
+  dodgerblue: "#1e90ff",
+  skyblue: "#87ceeb",
+  lightblue: "#add8e6",
+  midnightblue: "#191970",
+  forestgreen: "#228b22",
+  seagreen: "#2e8b57",
+  limegreen: "#32cd32",
+  olivedrab: "#6b8e23",
+  darkgreen: "#006400",
+  emerald: "#50c878",
+  mint: "#3eb489",
+  goldenrod: "#daa520",
+  firebrick: "#b22222",
+  darkred: "#8b0000",
+  indianred: "#cd5c5c",
+  deeppink: "#ff1493",
+  mediumpurple: "#9370db",
+  rebeccapurple: "#663399",
+  darkviolet: "#9400d3",
+  slateblue: "#6a5acd",
+  cornflowerblue: "#6495ed",
+  teal2: "#008080",
+  charcoal: "#36454f",
+  graphite: "#3b3b3b",
+  transparent: "transparent"
+};
+var RGB_RE = /^rgba?\(\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*(,\s*(0|1|0?\.\d+|\d{1,3}%)\s*)?\)$/;
+function isValidRgb(value) {
+  return RGB_RE.test(value);
+}
+function coerceColor(input) {
+  if (typeof input !== "string" || input.trim() === "") {
+    throw new Error('Color must be a non-empty string (e.g. "#2563eb" or "blue").');
+  }
+  const trimmed = input.trim().toLowerCase();
+  const named = CSS_NAMED_COLORS[trimmed];
+  if (named) return named;
+  const normalized = normalizeColorValue(trimmed);
+  if (isValidHex(normalized) || normalized === "transparent" || isValidRgb(normalized)) {
+    return normalized;
+  }
+  throw new Error(
+    `"${input}" is not a recognized color. Pass a hex value like "#ef4444" or a CSS color name (e.g. ${Object.keys(
+      CSS_NAMED_COLORS
+    ).slice(0, 6).join(", ")}).`
+  );
+}
+var ROLE_FAMILY_NAMES = ROLE_FAMILIES.map(
+  (f) => f === "gray" ? "neutral" : f
+);
+var FAMILY_SYNONYMS = {
+  ...Object.fromEntries(ROLE_FAMILY_NAMES.map((f) => [f, f])),
+  gray: "neutral",
+  grey: "neutral"
+};
+function coerceFamily(input, allowNeutral = true) {
+  const key = String(input != null ? input : "").trim().toLowerCase();
+  const family = FAMILY_SYNONYMS[key];
+  if (!family || !allowNeutral && family === "neutral") {
+    const valid = allowNeutral ? "primary, secondary, accent, neutral" : "primary, secondary, accent";
+    throw new Error(`Unknown color family "${input}". Valid families: ${valid}.`);
+  }
+  return family;
+}
+function coerceIntensity(input) {
+  const key = String(input != null ? input : "solid").trim().toLowerCase();
+  if (key === "solid" || key === "soft") return key;
+  throw new Error(`Unknown intensity "${input}". Valid intensities: solid, soft.`);
+}
+function coerceScheme(input) {
+  const key = String(input != null ? input : "").trim().toLowerCase();
+  if (key === "light" || key === "dark" || key === "auto") return key;
+  if (key === "system") return "auto";
+  throw new Error(`Unknown color scheme "${input}". Valid: light, dark, auto.`);
+}
+var ROUNDNESS_SYNONYMS = {
+  sharp: "sharp",
+  square: "sharp",
+  none: "sharp",
+  default: "default",
+  normal: "default",
+  rounded: "rounded",
+  round: "rounded",
+  soft: "rounded",
+  pill: "pill",
+  circle: "pill",
+  full: "pill"
+};
+function coerceRoundnessStyle(input) {
+  const key = String(input != null ? input : "").trim().toLowerCase();
+  const style = ROUNDNESS_SYNONYMS[key];
+  if (!style) {
+    throw new Error(`Unknown roundness "${input}". Valid: sharp, default, rounded, pill.`);
+  }
+  return style;
+}
+function coerceRadius(input) {
+  if (typeof input === "number" && Number.isFinite(input)) {
+    return `${input}px`;
+  }
+  if (typeof input === "string" && input.trim() !== "") {
+    const trimmed = input.trim();
+    if (trimmed === "9999px" || /^(100%|9999px)$/.test(trimmed)) return "9999px";
+    const parsed = parseCssValue(trimmed);
+    return formatCssValue(parsed.value, parsed.unit);
+  }
+  throw new Error('Radius must be a number (px) or a CSS length string like "0.5rem".');
+}
+function refsFromTypographyField(fieldId) {
+  for (const section of STYLE_SECTIONS) {
+    const field = section.fields.find((f) => f.id === fieldId);
+    if (field == null ? void 0 : field.options) {
+      const map = {};
+      for (const opt of field.options) {
+        const key = opt.value.split(".").pop();
+        if (key) map[key] = opt.value;
+      }
+      return map;
+    }
+  }
+  return {};
+}
+var FAMILY_BASE = refsFromTypographyField("typo-font-family");
+var SIZE_BASE = refsFromTypographyField("typo-font-size");
+var WEIGHT_BASE = refsFromTypographyField("typo-font-weight");
+var LINE_BASE = refsFromTypographyField("typo-line-height");
+var FONT_FAMILY_REFS = {
+  ...FAMILY_BASE,
+  monospace: FAMILY_BASE.mono
+};
+var FONT_SIZE_REFS = {
+  ...SIZE_BASE,
+  small: SIZE_BASE.sm,
+  md: SIZE_BASE.base,
+  medium: SIZE_BASE.base,
+  large: SIZE_BASE.lg
+};
+var FONT_WEIGHT_REFS = {
+  ...WEIGHT_BASE,
+  "400": WEIGHT_BASE.normal,
+  "500": WEIGHT_BASE.medium,
+  "600": WEIGHT_BASE.semibold,
+  "700": WEIGHT_BASE.bold
+};
+var LINE_HEIGHT_REFS = {
+  ...LINE_BASE,
+  "1.25": LINE_BASE.tight,
+  "1.5": LINE_BASE.normal,
+  "1.625": LINE_BASE.relaxed
+};
+function coerceTypographyRef(input, refs, label) {
+  const key = String(input != null ? input : "").trim().toLowerCase();
+  const ref = refs[key];
+  if (!ref) {
+    const valid = [...new Set(Object.values(refs).map((r) => r.split(".").pop()))].join(", ");
+    throw new Error(`Unknown ${label} "${input}". Valid: ${valid}.`);
+  }
+  return ref;
+}
+
+// src/theme-editor/webmcp/summary.ts
+var RADIUS_PATH_PREFIX = "theme.palette.radius.";
+function buildRadiusPresets() {
+  var _a;
+  const presets = {
+    pill: { sm: "9999px", md: "9999px", lg: "9999px", xl: "9999px", full: "9999px" }
+  };
+  for (const section of STYLE_SECTIONS) {
+    for (const preset of (_a = section.presets) != null ? _a : []) {
+      const match = preset.id.match(/^radius-(\w+)$/);
+      if (!match) continue;
+      const radius = {};
+      for (const [path, value] of Object.entries(preset.values)) {
+        if (path.startsWith(RADIUS_PATH_PREFIX) && typeof value === "string") {
+          radius[path.slice(RADIUS_PATH_PREFIX.length)] = value;
+        }
+      }
+      presets[match[1]] = radius;
+    }
+  }
+  return presets;
+}
+var RADIUS_PRESETS = buildRadiusPresets();
+var RADIUS_KEYS = ["sm", "md", "lg", "xl", "full"];
+function resolveColor(state, path, prefix = "theme", depth = 0) {
+  if (depth > 6) return null;
+  const raw = state.get(`${prefix}.${path}`);
+  if (typeof raw !== "string" || raw === "") {
+    return prefix === "darkTheme" ? resolveColor(state, path, "theme", depth) : null;
+  }
+  if (raw.startsWith("#") || raw.startsWith("rgb") || raw === "transparent") return raw;
+  if (raw.startsWith("palette.") || raw.startsWith("semantic.") || raw.startsWith("components.")) {
+    return resolveColor(state, raw, prefix, depth + 1);
+  }
+  return null;
+}
+function refSuffix(state, path) {
+  const raw = state.get(path);
+  if (typeof raw !== "string") return "unknown";
+  const parts = raw.split(".");
+  return parts[parts.length - 1] || String(raw);
+}
+function roleKey(roleId) {
+  return roleId.replace(/^role-/, "");
+}
+function detectRoundness(radius) {
+  for (const [style, preset] of Object.entries(RADIUS_PRESETS)) {
+    if (RADIUS_KEYS.every((k) => radius[k] === preset[k])) return style;
+  }
+  return "custom";
+}
+function buildSummary(state) {
+  var _a, _b;
+  const radius = {};
+  for (const k of RADIUS_KEYS) {
+    radius[k] = String((_a = state.get(`theme.palette.radius.${k}`)) != null ? _a : "");
+  }
+  const roles = {};
+  for (const role of ALL_ROLES) {
+    roles[roleKey(role.roleId)] = detectRoleAssignment(
+      (p) => state.get(`theme.${p}`),
+      role
+    );
+  }
+  return {
+    brand: {
+      primary: asColor(state.get("theme.palette.colors.primary.500")),
+      secondary: asColor(state.get("theme.palette.colors.secondary.500")),
+      accent: asColor(state.get("theme.palette.colors.accent.500"))
+    },
+    roles,
+    typography: {
+      fontFamily: refSuffix(state, "theme.semantic.typography.fontFamily"),
+      fontSize: refSuffix(state, "theme.semantic.typography.fontSize"),
+      fontWeight: refSuffix(state, "theme.semantic.typography.fontWeight"),
+      lineHeight: refSuffix(state, "theme.semantic.typography.lineHeight")
+    },
+    roundness: { style: detectRoundness(radius), radius },
+    colorScheme: String((_b = state.get("colorScheme")) != null ? _b : "light"),
+    history: {
+      index: state.getHistoryIndex(),
+      canUndo: state.canUndo(),
+      canRedo: state.canRedo()
+    }
+  };
+}
+function asColor(value) {
+  return typeof value === "string" && value !== "" ? value : null;
+}
+var CONTRAST_PAIRS = [
+  { key: "user-message", label: "User message text", fg: "components.message.user.text", bg: "components.message.user.background" },
+  { key: "assistant-message", label: "Assistant message text", fg: "components.message.assistant.text", bg: "components.message.assistant.background" },
+  { key: "header", label: "Header title", fg: "components.header.titleForeground", bg: "components.header.background" },
+  { key: "primary-button", label: "Primary button label", fg: "components.button.primary.foreground", bg: "components.button.primary.background" },
+  { key: "input", label: "Input placeholder", fg: "components.input.placeholder", bg: "components.input.background" },
+  { key: "link", label: "Link text", fg: "components.markdown.link.foreground", bg: "semantic.colors.background" },
+  { key: "scroll", label: "Scroll-to-bottom icon", fg: "components.scrollToBottom.foreground", bg: "components.scrollToBottom.background" },
+  { key: "body", label: "Body text on background", fg: "semantic.colors.text", bg: "semantic.colors.background" },
+  { key: "surface", label: "Body text on surface", fg: "semantic.colors.text", bg: "semantic.colors.surface" }
+];
+function roleContrastPairKeys(role) {
+  const targets = new Set(role.targets.map((t) => t.path));
+  return CONTRAST_PAIRS.filter((p) => targets.has(p.fg) || targets.has(p.bg)).map((p) => p.key);
+}
+var CONTRAST_THRESHOLDS = { AA: 4.5, AAA: 7 };
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+function suggestShade(state, fgPath, bgHex, threshold, prefix) {
+  const raw = state.get(`${prefix}.${fgPath}`);
+  if (typeof raw !== "string") return null;
+  const m = raw.match(/^palette\.colors\.(\w+)\.(\d+)$/);
+  if (!m) return null;
+  const family = m[1];
+  const currentIdx = SHADE_KEYS.indexOf(m[2]);
+  let best = null;
+  let bestDistance = Infinity;
+  SHADE_KEYS.forEach((shade, idx) => {
+    const hex = state.get(`${prefix}.palette.colors.${family}.${shade}`);
+    if (typeof hex !== "string" || !(hex.startsWith("#") || hex.startsWith("rgb"))) return;
+    if (wcagContrastRatio(hex, bgHex) >= threshold) {
+      const distance = currentIdx >= 0 ? Math.abs(idx - currentIdx) : idx;
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = `palette.colors.${family}.${shade}`;
+      }
+    }
+  });
+  return best;
+}
+function runContrastChecks(state, level = "AA", variant = "both", pairKeys) {
+  const threshold = CONTRAST_THRESHOLDS[level];
+  const variants = variant === "both" ? ["light", "dark"] : [variant];
+  const pairs = pairKeys ? CONTRAST_PAIRS.filter((p) => pairKeys.includes(p.key)) : CONTRAST_PAIRS;
+  const checks = [];
+  for (const v of variants) {
+    const prefix = v === "light" ? "theme" : "darkTheme";
+    for (const pair of pairs) {
+      const fg = resolveColor(state, pair.fg, prefix);
+      const bg = resolveColor(state, pair.bg, prefix);
+      if (!fg || !bg) continue;
+      const ratio = round2(wcagContrastRatio(fg, bg));
+      const passes = ratio >= threshold;
+      const check = {
+        pair: pair.key,
+        label: pair.label,
+        variant: v,
+        fg,
+        bg,
+        ratio,
+        threshold,
+        passes
+      };
+      if (!passes) {
+        const suggestion = suggestShade(state, pair.fg, bg, threshold, prefix);
+        if (suggestion) check.suggestion = suggestion;
+      }
+      checks.push(check);
+    }
+  }
+  return { level, checks, failures: checks.filter((c) => !c.passes) };
+}
+function quickContrastWarnings(state, pairKeys, variant = "light", level = "AA") {
+  if (pairKeys.length === 0) return [];
+  const report = runContrastChecks(state, level, variant, pairKeys);
+  return report.failures.map((f) => ({
+    code: "contrast",
+    pair: f.pair,
+    variant: f.variant,
+    ratio: f.ratio,
+    threshold: f.threshold,
+    message: `${f.label} (${f.variant}) has a contrast ratio of ${f.ratio}:1, below the ${level} threshold of ${f.threshold}:1${f.suggestion ? `. Try ${f.suggestion} for the foreground.` : "."}`
+  }));
+}
+
+// src/theme-editor/webmcp/tools.ts
+var ROLE_ALIASES = {};
+for (const role of ALL_ROLES) {
+  const key = roleKey(role.roleId);
+  ROLE_ALIASES[key] = role;
+  ROLE_ALIASES[role.roleId] = role;
+}
+Object.assign(ROLE_ALIASES, {
+  surface: ROLE_ALIASES["surfaces"],
+  background: ROLE_ALIASES["surfaces"],
+  backgrounds: ROLE_ALIASES["surfaces"],
+  user: ROLE_ALIASES["user-messages"],
+  "user-message": ROLE_ALIASES["user-messages"],
+  assistant: ROLE_ALIASES["assistant-messages"],
+  "assistant-message": ROLE_ALIASES["assistant-messages"],
+  actions: ROLE_ALIASES["primary-actions"],
+  buttons: ROLE_ALIASES["primary-actions"],
+  composer: ROLE_ALIASES["input"],
+  links: ROLE_ALIASES["links-focus"],
+  focus: ROLE_ALIASES["links-focus"],
+  border: ROLE_ALIASES["borders"],
+  dividers: ROLE_ALIASES["borders"],
+  scroll: ROLE_ALIASES["scroll-to-bottom"]
+});
+function coerceRole(input) {
+  const key = String(input != null ? input : "").trim().toLowerCase();
+  const role = ROLE_ALIASES[key];
+  if (!role) {
+    const valid = ALL_ROLES.map((r) => roleKey(r.roleId)).join(", ");
+    throw new Error(`Unknown role "${input}". Valid roles: ${valid}.`);
+  }
+  return role;
+}
+function buildFieldIndex() {
+  const index = /* @__PURE__ */ new Map();
+  const addSections = (sections) => {
+    for (const section of sections) {
+      for (const field of section.fields) {
+        if (!index.has(field.id)) index.set(field.id, field);
+      }
+    }
+  };
+  for (const tab of ALL_TABS) addSections(tab.sections);
+  for (const group of CONFIGURE_SUB_GROUPS) addSections(group.sections);
+  return index;
+}
+var FEATURE_PATHS = {
+  voice: "voiceRecognition.enabled",
+  artifacts: "features.artifacts.enabled",
+  attachments: "attachments.enabled",
+  toolCalls: "features.showToolCalls",
+  reasoning: "features.showReasoning",
+  feedback: "messageActions.enabled"
+};
+var LAYOUT_PATHS = {
+  avatars: "layout.messages.avatar.show",
+  timestamps: "layout.messages.timestamp.show",
+  showHeader: "layout.showHeader",
+  messageStyle: "layout.messages.layout"
+};
+var LAUNCHER_POSITIONS = ["bottom-right", "bottom-left", "top-right", "top-left"];
+var MESSAGE_STYLES = ["bubble", "flat", "minimal"];
+var COPY_PATHS = {
+  title: "copy.welcomeTitle",
+  subtitle: "copy.welcomeSubtitle",
+  placeholder: "copy.inputPlaceholder",
+  sendLabel: "copy.sendButtonLabel"
+};
+function createThemeEditorTools(state, options) {
+  var _a;
+  let editTarget = (_a = options == null ? void 0 : options.editTarget) != null ? _a : "both";
+  let fieldIndex = null;
+  const rec = (input) => input && typeof input === "object" ? input : {};
+  const expandScoped = (themeRelPath, value, target = editTarget) => {
+    const out = {};
+    if (target === "light" || target === "both") out[`theme.${themeRelPath}`] = value;
+    if (target === "dark" || target === "both") out[`darkTheme.${themeRelPath}`] = value;
+    return out;
+  };
+  const filterByEditTarget = (writes) => {
+    if (editTarget === "both") return writes;
+    const out = {};
+    for (const [k, v] of Object.entries(writes)) {
+      if (editTarget === "light" && k.startsWith("theme.")) out[k] = v;
+      else if (editTarget === "dark" && k.startsWith("darkTheme.")) out[k] = v;
+    }
+    return out;
+  };
+  const warnVariant = () => editTarget === "dark" ? "dark" : "light";
+  const result = (applied, warnings = []) => toolResult({ ok: true, summary: buildSummary(state), warnings, applied });
+  const getThemeOverview = {
+    name: "get_theme_overview",
+    title: "Get current theme & what is editable",
+    description: "Read the current widget theme (brand colors, per-role color assignments, typography, roundness, color scheme, undo/redo state), the available presets, and the high-level levers you can change. Call this FIRST before editing.",
+    annotations: { readOnlyHint: true },
+    inputSchema: {
+      type: "object",
+      properties: {
+        verbosity: {
+          type: "string",
+          enum: ["summary", "full"],
+          description: "Use 'full' to also include the field-id index for set_theme_fields."
+        }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const { verbosity } = rec(input);
+      const payload = {
+        summary: buildSummary(state),
+        availableRoles: ALL_ROLES.map((r) => ({
+          role: roleKey(r.roleId),
+          helper: r.helper
+        })),
+        availableFamilies: ROLE_FAMILY_NAMES,
+        presets: THEME_EDITOR_PRESETS.map((p) => {
+          var _a2;
+          return {
+            id: p.id,
+            name: p.name,
+            description: p.description,
+            tags: (_a2 = p.tags) != null ? _a2 : []
+          };
+        }),
+        tools: [
+          { tool: "set_brand_colors", hint: "Recolor the palette (primary/secondary/accent) \u2014 auto-generates shade scales." },
+          { tool: "assign_color_role", hint: "Recolor a region (header, user/assistant messages, actions, input, links, borders, surfaces, scroll) with a family + intensity." },
+          { tool: "set_typography", hint: "Set font family, size, weight, line height." },
+          { tool: "set_roundness", hint: "Set corner roundness (sharp/default/rounded/pill) or granular radii." },
+          { tool: "set_color_scheme", hint: "Set light/dark/auto and which variant edits target." },
+          { tool: "apply_preset", hint: "Apply a complete built-in preset." },
+          { tool: "configure_widget", hint: "Toggle launcher position, features, and layout." },
+          { tool: "set_copy_and_suggestions", hint: "Set welcome copy, placeholder, and suggestion chips." },
+          { tool: "set_theme_fields", hint: "Advanced escape hatch: set any field by id or dot-path." },
+          { tool: "check_contrast", hint: "Audit WCAG contrast across key text/background pairs." },
+          { tool: "manage_session", hint: "Undo, redo, reset, or export the theme." }
+        ]
+      };
+      if (verbosity === "full") {
+        fieldIndex != null ? fieldIndex : fieldIndex = buildFieldIndex();
+        payload.fieldIndex = Array.from(fieldIndex.values()).map((f) => {
+          var _a2;
+          return {
+            id: f.id,
+            path: f.path,
+            type: f.type,
+            label: f.label,
+            options: (_a2 = f.options) == null ? void 0 : _a2.map((o) => o.value)
+          };
+        });
+      }
+      return toolResult(payload);
+    }
+  };
+  const setBrandColors = {
+    name: "set_brand_colors",
+    title: "Set brand colors",
+    description: 'Set one or more brand colors (primary, secondary, accent). Each color auto-generates a full 50\u2013950 shade scale and applies to the light and dark themes (per the current edit target). Accepts hex ("#2563eb", "2563eb", "#18f"), rgb()/rgba() ("rgb(37, 99, 235)"), or CSS color names ("blue", "slateblue").',
+    inputSchema: {
+      type: "object",
+      properties: {
+        primary: { type: "string", description: "Hex, rgb()/rgba(), or CSS color name." },
+        secondary: { type: "string", description: "Hex, rgb()/rgba(), or CSS color name." },
+        accent: { type: "string", description: "Hex, rgb()/rgba(), or CSS color name." }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const families = ["primary", "secondary", "accent"];
+      const writes = {};
+      const applied = {};
+      for (const family of families) {
+        if (args[family] === void 0) continue;
+        const base = coerceColor(args[family]);
+        applied[family] = base;
+        const scale = generateColorScale(base);
+        for (const shade of SHADE_KEYS) {
+          const value = scale[shade];
+          if (value === void 0) continue;
+          Object.assign(writes, expandScoped(`palette.colors.${family}.${shade}`, value));
+        }
+      }
+      if (Object.keys(applied).length === 0) {
+        throw new Error("Provide at least one of: primary, secondary, accent.");
+      }
+      state.setBatch(writes);
+      const warnings = quickContrastWarnings(
+        state,
+        ["primary-button", "user-message"],
+        warnVariant()
+      );
+      return result(applied, warnings);
+    }
+  };
+  const assignColorRole = {
+    name: "assign_color_role",
+    title: "Assign a color family to an interface role",
+    description: "Recolor a semantic region of the widget by choosing a palette family and intensity. One call writes all related tokens (background, text, border, icon) consistently. Roles: header, user-messages, assistant-messages, primary-actions, input, links, borders, surfaces, scroll-to-bottom. Families: primary, secondary, accent, neutral. Intensity: solid (bold) or soft (tinted).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        role: { type: "string", description: 'Interface role, e.g. "header" or "user-messages".' },
+        family: { type: "string", enum: ROLE_FAMILY_NAMES },
+        intensity: { type: "string", enum: ["solid", "soft"], description: "Defaults to 'solid'." }
+      },
+      required: ["role", "family"],
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const role = coerceRole(args.role);
+      const family = coerceFamily(args.family, true);
+      const intensity = coerceIntensity(args.intensity);
+      const writes = filterByEditTarget(resolveRoleAssignment(family, intensity, role));
+      const tokensWritten = Object.keys(writes).length;
+      state.setBatch(writes);
+      const warnings = quickContrastWarnings(state, roleContrastPairKeys(role), warnVariant());
+      return result(
+        { role: roleKey(role.roleId), family, intensity, tokensWritten },
+        warnings
+      );
+    }
+  };
+  const setTypography = {
+    name: "set_typography",
+    title: "Set typography",
+    description: "Set font family, base size, weight, and line height in one call. fontFamily: sans|serif|mono. fontSize: xs|sm|base|lg|xl. fontWeight: normal|medium|semibold|bold (or 400\u2013700). lineHeight: tight|normal|relaxed (or 1.25/1.5/1.625).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        fontFamily: { type: "string" },
+        fontSize: { type: "string" },
+        fontWeight: { type: ["string", "number"] },
+        lineHeight: { type: ["string", "number"] }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const writes = {};
+      const applied = {};
+      const apply = (key, refs) => {
+        var _a2;
+        if (args[key] === void 0) return;
+        const ref = coerceTypographyRef(args[key], refs, key);
+        applied[key] = (_a2 = ref.split(".").pop()) != null ? _a2 : ref;
+        Object.assign(writes, expandScoped(`semantic.typography.${key}`, ref));
+      };
+      apply("fontFamily", FONT_FAMILY_REFS);
+      apply("fontSize", FONT_SIZE_REFS);
+      apply("fontWeight", FONT_WEIGHT_REFS);
+      apply("lineHeight", LINE_HEIGHT_REFS);
+      if (Object.keys(applied).length === 0) {
+        throw new Error("Provide at least one of: fontFamily, fontSize, fontWeight, lineHeight.");
+      }
+      state.setBatch(writes);
+      return result(applied);
+    }
+  };
+  const setRoundness = {
+    name: "set_roundness",
+    title: "Set corner roundness",
+    description: "Set overall corner roundness with a keyword (sharp, default, rounded, pill) which maps the full radius scale, OR pass granular radius values. Provide at least one of `style` or `radius`.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        style: { type: "string", enum: ["sharp", "default", "rounded", "pill"] },
+        radius: {
+          type: "object",
+          description: "Granular overrides (px number or CSS length).",
+          properties: {
+            sm: { type: ["string", "number"] },
+            md: { type: ["string", "number"] },
+            lg: { type: ["string", "number"] },
+            xl: { type: ["string", "number"] },
+            full: { type: ["string", "number"] }
+          },
+          additionalProperties: false
+        }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const writes = {};
+      const applied = {};
+      if (args.style !== void 0) {
+        const style = coerceRoundnessStyle(args.style);
+        applied.style = style;
+        for (const [key, value] of Object.entries(RADIUS_PRESETS[style])) {
+          Object.assign(writes, expandScoped(`palette.radius.${key}`, value));
+        }
+      }
+      if (args.radius !== void 0) {
+        const radius = rec(args.radius);
+        const overrides = {};
+        for (const key of ["sm", "md", "lg", "xl", "full"]) {
+          if (radius[key] === void 0) continue;
+          const value = coerceRadius(radius[key]);
+          overrides[key] = value;
+          Object.assign(writes, expandScoped(`palette.radius.${key}`, value));
+        }
+        applied.radius = overrides;
+      }
+      if (Object.keys(writes).length === 0) {
+        throw new Error("Provide `style` (sharp|default|rounded|pill) or a `radius` object.");
+      }
+      state.setBatch(writes);
+      return result(applied);
+    }
+  };
+  const setColorScheme = {
+    name: "set_color_scheme",
+    title: "Set color scheme",
+    description: "Set the shipped widget color scheme (light, dark, or auto/follow-system). Optionally set `editTarget` to choose which theme variant subsequent styling edits write to (light, dark, or both \u2014 default both).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        scheme: { type: "string", enum: ["light", "dark", "auto"] },
+        editTarget: { type: "string", enum: ["light", "dark", "both"] }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const applied = {};
+      if (args.scheme !== void 0) {
+        const scheme = coerceScheme(args.scheme);
+        state.set("colorScheme", scheme);
+        applied.scheme = scheme;
+      }
+      if (args.editTarget !== void 0) {
+        const t = String(args.editTarget).trim().toLowerCase();
+        if (t !== "light" && t !== "dark" && t !== "both") {
+          throw new Error(`Unknown editTarget "${args.editTarget}". Valid: light, dark, both.`);
+        }
+        editTarget = t;
+        applied.editTarget = t;
+      }
+      if (Object.keys(applied).length === 0) {
+        throw new Error("Provide `scheme` and/or `editTarget`.");
+      }
+      return toolResult({ ok: true, summary: buildSummary(state), warnings: [], applied, editTarget });
+    }
+  };
+  const applyPreset = {
+    name: "apply_preset",
+    title: "Apply a built-in theme preset",
+    description: "Apply a complete built-in preset, replacing theme tokens. Call get_theme_overview to list preset ids.",
+    inputSchema: {
+      type: "object",
+      properties: { presetId: { type: "string" } },
+      required: ["presetId"],
+      additionalProperties: false
+    },
+    execute(input) {
+      const { presetId } = rec(input);
+      const preset = getThemeEditorPreset(String(presetId != null ? presetId : ""));
+      if (!preset) {
+        const valid = THEME_EDITOR_PRESETS.map((p) => p.id).join(", ");
+        throw new Error(`Unknown preset "${presetId}". Valid presets: ${valid}.`);
+      }
+      const theme = createTheme(preset.theme, { validate: false });
+      const config = { ...state.getConfig() };
+      if (preset.darkTheme) {
+        config.darkTheme = createTheme(preset.darkTheme, { validate: false });
+      }
+      if (preset.toolCall) config.toolCall = preset.toolCall;
+      state.setFullConfig(config, theme);
+      const warnings = quickContrastWarnings(state, ["body", "assistant-message"], "light");
+      return result({ appliedPreset: { id: preset.id, name: preset.name } }, warnings);
+    }
+  };
+  const configureWidget = {
+    name: "configure_widget",
+    title: "Configure launcher, features, and layout",
+    description: "Toggle non-theme widget configuration. launcherPosition: bottom-right|bottom-left|top-right|top-left. features: { voice, artifacts, attachments, toolCalls, reasoning, feedback } booleans. layout: { avatars, timestamps, showHeader } booleans and messageStyle: bubble|flat|minimal.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        launcherPosition: { type: "string", enum: LAUNCHER_POSITIONS },
+        features: {
+          type: "object",
+          properties: {
+            voice: { type: "boolean" },
+            artifacts: { type: "boolean" },
+            attachments: { type: "boolean" },
+            toolCalls: { type: "boolean" },
+            reasoning: { type: "boolean" },
+            feedback: { type: "boolean" }
+          },
+          additionalProperties: false
+        },
+        layout: {
+          type: "object",
+          properties: {
+            avatars: { type: "boolean" },
+            timestamps: { type: "boolean" },
+            showHeader: { type: "boolean" },
+            messageStyle: { type: "string", enum: MESSAGE_STYLES }
+          },
+          additionalProperties: false
+        }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      var _a2, _b, _c;
+      const args = rec(input);
+      const writes = {};
+      const applied = {};
+      if (args.launcherPosition !== void 0) {
+        const pos = String(args.launcherPosition);
+        if (!LAUNCHER_POSITIONS.includes(pos)) {
+          throw new Error(`Unknown launcherPosition "${pos}". Valid: ${LAUNCHER_POSITIONS.join(", ")}.`);
+        }
+        writes["launcher.position"] = pos;
+        applied.launcherPosition = pos;
+      }
+      const features = rec(args.features);
+      for (const [key, path] of Object.entries(FEATURE_PATHS)) {
+        if (features[key] === void 0) continue;
+        writes[path] = Boolean(features[key]);
+        (_a2 = applied.features) != null ? _a2 : applied.features = {};
+        applied.features[key] = Boolean(features[key]);
+      }
+      const layout = rec(args.layout);
+      for (const [key, path] of Object.entries(LAYOUT_PATHS)) {
+        if (layout[key] === void 0) continue;
+        if (key === "messageStyle") {
+          const style = String(layout[key]);
+          if (!MESSAGE_STYLES.includes(style)) {
+            throw new Error(`Unknown messageStyle "${style}". Valid: ${MESSAGE_STYLES.join(", ")}.`);
+          }
+          writes[path] = style;
+          (_b = applied.layout) != null ? _b : applied.layout = {};
+          applied.layout[key] = style;
+        } else {
+          writes[path] = Boolean(layout[key]);
+          (_c = applied.layout) != null ? _c : applied.layout = {};
+          applied.layout[key] = Boolean(layout[key]);
+        }
+      }
+      if (Object.keys(writes).length === 0) {
+        throw new Error("Provide launcherPosition, features, and/or layout.");
+      }
+      state.setBatch(writes);
+      return result(applied);
+    }
+  };
+  const setCopyAndSuggestions = {
+    name: "set_copy_and_suggestions",
+    title: "Set welcome copy and suggestion chips",
+    description: "Set the widget welcome copy and suggestion chips. title/subtitle are the welcome card text; placeholder is the input placeholder; sendLabel is the send button label; suggestions is an array of suggestion-chip strings (replaces the existing list).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        title: { type: "string" },
+        subtitle: { type: "string" },
+        placeholder: { type: "string" },
+        sendLabel: { type: "string" },
+        suggestions: { type: "array", items: { type: "string" } }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const writes = {};
+      const applied = {};
+      for (const [key, path] of Object.entries(COPY_PATHS)) {
+        if (args[key] === void 0) continue;
+        writes[path] = String(args[key]);
+        applied[key] = String(args[key]);
+      }
+      if (args.suggestions !== void 0) {
+        if (!Array.isArray(args.suggestions)) {
+          throw new Error("`suggestions` must be an array of strings.");
+        }
+        const chips = args.suggestions.filter((s) => typeof s === "string");
+        writes["suggestionChips"] = chips;
+        applied.suggestions = chips;
+      }
+      if (Object.keys(writes).length === 0) {
+        throw new Error("Provide at least one of: title, subtitle, placeholder, sendLabel, suggestions.");
+      }
+      state.setBatch(writes);
+      return result(applied);
+    }
+  };
+  const setThemeFields = {
+    name: "set_theme_fields",
+    title: "Set theme fields by id or path (advanced)",
+    description: 'Advanced escape hatch: set individual editor fields by field id (see get_theme_overview verbosity:"full") \u2014 theme field ids follow the current edit target (light/dark/both) \u2014 or by raw dot-path (theme.* / darkTheme.* / a config path), which is written as-is. Use only when a higher-level tool does not cover the need. Values are validated against the field metadata.',
+    inputSchema: {
+      type: "object",
+      properties: {
+        updates: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              field: { type: "string", description: "Field id or dot-path." },
+              value: { type: ["string", "number", "boolean"] }
+            },
+            required: ["field", "value"],
+            additionalProperties: false
+          }
+        }
+      },
+      required: ["updates"],
+      additionalProperties: false
+    },
+    execute(input) {
+      var _a2;
+      const { updates } = rec(input);
+      if (!Array.isArray(updates) || updates.length === 0) {
+        throw new Error("`updates` must be a non-empty array of { field, value }.");
+      }
+      fieldIndex != null ? fieldIndex : fieldIndex = buildFieldIndex();
+      const writes = {};
+      const report = [];
+      for (const raw of updates) {
+        const entry = rec(raw);
+        const fieldKey = String((_a2 = entry.field) != null ? _a2 : "");
+        try {
+          const def = fieldIndex.get(fieldKey);
+          const path = def ? def.path : fieldKey;
+          if (!def && !/^(theme|darkTheme)\.|\./.test(path)) {
+            throw new Error(
+              `Unknown field "${fieldKey}". Pass a known field id or a dot-path (e.g. theme.palette.radius.md).`
+            );
+          }
+          const value = coerceFieldValue(def, entry.value);
+          if (def && path.startsWith("theme.")) {
+            const scoped = expandScoped(path.slice("theme.".length), value);
+            Object.assign(writes, scoped);
+            report.push({ field: fieldKey, resolvedPath: Object.keys(scoped), ok: true });
+          } else {
+            writes[path] = value;
+            report.push({ field: fieldKey, resolvedPath: path, ok: true });
+          }
+        } catch (err) {
+          report.push({ field: fieldKey, ok: false, error: err.message });
+        }
+      }
+      const okWrites = report.filter((r) => r.ok);
+      if (Object.keys(writes).length > 0) state.setBatch(writes);
+      return toolResult({
+        ok: okWrites.length > 0,
+        summary: buildSummary(state),
+        warnings: [],
+        applied: { updates: report }
+      });
+    }
+  };
+  const checkContrast = {
+    name: "check_contrast",
+    title: "Check accessibility contrast",
+    description: "Run WCAG contrast checks over the key text/background pairs (message text, header title, input/body text, primary button). Returns each ratio, whether it passes, and a suggested foreground shade for failures.",
+    annotations: { readOnlyHint: true },
+    inputSchema: {
+      type: "object",
+      properties: {
+        level: { type: "string", enum: ["AA", "AAA"], description: "Defaults to 'AA'." },
+        variant: { type: "string", enum: ["light", "dark", "both"], description: "Defaults to 'both'." }
+      },
+      additionalProperties: false
+    },
+    execute(input) {
+      const args = rec(input);
+      const level = args.level === "AAA" ? "AAA" : "AA";
+      const variant = args.variant === "light" || args.variant === "dark" ? args.variant : "both";
+      const report = runContrastChecks(state, level, variant);
+      return toolResult({
+        level: report.level,
+        passing: report.checks.length - report.failures.length,
+        total: report.checks.length,
+        checks: report.checks,
+        failures: report.failures
+      });
+    }
+  };
+  const manageSession = {
+    name: "manage_session",
+    title: "Undo, redo, reset, or export the theme",
+    description: 'Session action. "undo"/"redo" step through edit history; "reset" restores defaults; "export" returns the embeddable theme snapshot (config + theme JSON) with no side effects.',
+    inputSchema: {
+      type: "object",
+      properties: { action: { type: "string", enum: ["undo", "redo", "reset", "export"] } },
+      required: ["action"],
+      additionalProperties: false
+    },
+    execute(input) {
+      const { action } = rec(input);
+      switch (action) {
+        case "undo":
+          state.undo();
+          return result({ action: "undo" });
+        case "redo":
+          state.redo();
+          return result({ action: "redo" });
+        case "reset":
+          state.resetToDefaults();
+          return result({ action: "reset" });
+        case "export":
+          return toolResult({ ok: true, snapshot: state.exportSnapshot() });
+        default:
+          throw new Error(`Unknown action "${action}". Valid: undo, redo, reset, export.`);
+      }
+    }
+  };
+  return [
+    getThemeOverview,
+    setBrandColors,
+    assignColorRole,
+    setTypography,
+    setRoundness,
+    setColorScheme,
+    applyPreset,
+    configureWidget,
+    setCopyAndSuggestions,
+    setThemeFields,
+    checkContrast,
+    manageSession
+  ];
+}
+function coerceFieldValue(def, value) {
+  if (!def) return value;
+  switch (def.type) {
+    case "color":
+      return def.parseValue ? def.parseValue(coerceColor(value)) : coerceColor(value);
+    case "toggle":
+      return typeof value === "boolean" ? value : value === "true" || value === 1;
+    case "slider": {
+      const num = Number(value);
+      if (!Number.isFinite(num)) throw new Error(`"${def.id}" expects a number.`);
+      if (def.slider) {
+        const { min, max } = def.slider;
+        if (num < min || num > max) {
+          throw new Error(`"${def.id}" must be between ${min} and ${max}.`);
+        }
+      }
+      return def.parseValue ? def.parseValue(num) : num;
+    }
+    case "select": {
+      const str = String(value);
+      if (def.options && !def.options.some((o) => o.value === str)) {
+        throw new Error(
+          `"${def.id}" must be one of: ${def.options.map((o) => o.value).join(", ")}.`
+        );
+      }
+      return def.parseValue ? def.parseValue(str) : str;
+    }
+    default:
+      return def.parseValue ? def.parseValue(value) : value;
+  }
+}
 export {
   ADVANCED_TOKENS_SECTION,
   ALL_ROLES,
@@ -22583,6 +24750,8 @@ export {
   COMPONENT_SHAPE_SECTIONS,
   CONFIGURE_SECTIONS,
   CONFIGURE_SUB_GROUPS,
+  CONTRAST_PAIRS,
+  CSS_NAMED_COLORS,
   DEVICE_DIMENSIONS,
   HOME_SUGGESTION_CHIPS,
   INTERFACE_ROLES_SECTION,
@@ -22590,6 +24759,7 @@ export {
   MOCK_WORKSPACE_CONTENT,
   PALETTE_SECTION,
   PREVIEW_STORAGE_ADAPTER,
+  RADIUS_PRESETS,
   ROLE_ASSISTANT_MESSAGES,
   ROLE_BORDERS,
   ROLE_FAMILIES,
@@ -22621,11 +24791,19 @@ export {
   buildPreviewConfigWithMessages,
   buildShellCss,
   buildSrcdoc,
+  buildSummary,
   buildTranscriptStreamFrames,
+  coerceColor,
+  coerceFamily,
+  coerceIntensity,
+  coerceRadius,
+  coerceRoundnessStyle,
+  coerceScheme,
   convertFromPx,
   convertToPx,
   createPreviewMessages,
   createPreviewTranscriptEntry,
+  createThemeEditorTools,
   createThemePreview,
   detectRoleAssignment,
   escapeHtml2 as escapeHtml,
@@ -22642,9 +24820,13 @@ export {
   paletteColorPath,
   parseCssValue,
   presetStreamsText,
+  quickContrastWarnings,
   resolveRoleAssignment,
   resolveThemeColorPath,
+  rgbToHex,
+  runContrastChecks,
   scopeSection,
   tokenRefDisplayName,
+  toolResult,
   wcagContrastRatio
 };