@noodleseed/assistant 1.8.0 → 1.9.0

package/README.md

@@ -2,8 +2,8 @@
 
 Customer-branded embedded assistant surfaces for Noodle Seed deployments.
 
-The package exports the canonical `<noodle-assistant>` Web Component, a managed React wrapper from
-`@noodleseed/assistant/react`, a renderer-free React hook from
+The package exports the canonical `<noodle-assistant>` Web Component, a managed React wrapper and secure
+`NoodleAppView` MCP App renderer from `@noodleseed/assistant/react`, a renderer-free React hook from
 `@noodleseed/assistant/react/client`, a DOM-free client from `@noodleseed/assistant/client`, and the
 backend-only `createAssistantSession` helper from `@noodleseed/assistant/server`. Light, dark, and automatic
 themes work without configuration; the component inherits the deployed MCP server's brand kit while slots,
@@ -247,6 +247,30 @@ interaction streams a continuation. `principalKey` is browser-local and never se
 whenever the authenticated user or tenant changes so the hook aborts and clears the previous session and
 transcript.
 
+When the customer-owned transcript should render the linked MCP App itself, pass the typed `data-view`
+payload and the same client to the supported host component:
+
+```tsx
+import { NoodleAppView } from "@noodleseed/assistant/react";
+
+if (part.type === "data-view") {
+  return (
+    <NoodleAppView
+      key={`${part.data.id}:${part.data.resourceUri}`}
+      client={client}
+      view={part.data}
+      theme="dark"
+      onError={(failure) => reportAssistantError(failure)}
+    />
+  );
+}
+```
+
+`NoodleAppView` owns the double iframe and AppBridge. Its lifecycle identity is the supplied client plus
+`view.id` plus `view.resourceUri`: ordinary parent rerenders and fresh view/callback objects retain the
+iframe, while a semantic view replacement or unmount requests standard App teardown and closes the bridge.
+Do not also key an ancestor by the whole view object or a callback.
+
 Outside React, subscribe to the DOM-free AI SDK `UIMessage` state without registering a custom element or
 touching browser storage:
 
@@ -331,11 +355,13 @@ leaves the same input interaction pending so the renderer can submit a corrected
 flow collects all elicited input before its first connector operation.
 
 A completed widget-linked tool emits typed `view_available` data with its call/interaction id, tool,
-`ui://` resource identity, optional title, and bounded/redacted public result. This is an availability
-signal, not proof of rendering. Map the identity to a component already trusted by your application; never
-fetch the `ui://` URI, inject `part.data.html`, or assign it to `srcdoc`. The standard element alone mounts
-the service-supplied document through its double-iframe MCP Apps host, and it also forwards the same detail
-as a DOM event:
+`ui://` resource identity, optional title, bounded/redacted public result, and—on current services—the
+self-contained App document. This is an availability signal, not proof of rendering. A customer-owned React
+renderer either mounts the actual App with `NoodleAppView` or deliberately substitutes a component already
+trusted by the application and selected by `resourceUri`/tool. The JSON `result` is data for a native
+component; serializing it is not a rendering of the linked App. Never fetch the `ui://` URI, inject
+`part.data.html`, or assign it to `srcdoc` yourself. The standard element also forwards the same detail as a
+DOM event:
 
 ```ts
 element.addEventListener("assistant-view-available", (event) => {

package/dist/{appearance-DowzFJjh.d.cts → appearance-Cc-eqSbp.d.cts}

@@ -133,4 +133,4 @@ interface AssistantLabels {
     readonly sessionError: string;
 }
 
-export type { AssistantThemeMode as A, AssistantConfiguration as a };
+export type { AssistantConfiguration as A, AssistantThemeMode as a };

package/dist/{appearance-DowzFJjh.d.ts → appearance-Cc-eqSbp.d.ts}

@@ -133,4 +133,4 @@ interface AssistantLabels {
     readonly sessionError: string;
 }
 
-export type { AssistantThemeMode as A, AssistantConfiguration as a };
+export type { AssistantConfiguration as A, AssistantThemeMode as a };

package/dist/{chunk-JMBUJSFP.js → chunk-4B3XXGRP.js}

@@ -3072,6 +3072,8 @@ function createAssistantAppHostContext(theme) {
   };
 }
 var APP_RENDER_TIMEOUT_MS = 1e4;
+var APP_TEARDOWN_TIMEOUT_MS = 1e3;
+var mountedApps = /* @__PURE__ */ new WeakMap();
 function resolveSandboxUrl(value) {
   if (!value) return void 0;
   try {
@@ -3100,7 +3102,11 @@ function mountAssistantApp(detail, actions, options = {}) {
   if (sandboxUrl) frame.src = sandboxUrl;
   else frame.srcdoc = PROXY_DOCUMENT;
   card.append(frame);
+  let mountedBridge;
+  let mountedTransport;
+  let destroyed = false;
   let initialized = false;
+  let destroyPromise;
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -3112,6 +3118,7 @@ function mountAssistantApp(detail, actions, options = {}) {
   frame.addEventListener(
     "load",
     () => {
+      if (destroyed) return;
       const target = frame.contentWindow;
       if (!target) return;
       const bridge = new DX(
@@ -3128,19 +3135,24 @@ function mountAssistantApp(detail, actions, options = {}) {
           hostContext: createAssistantAppHostContext(actions.theme)
         }
       );
+      mountedBridge = bridge;
       bridge.onsandboxready = () => {
+        if (destroyed) return;
+        const current = options.getDetail?.() ?? detail;
         void bridge.sendSandboxResourceReady({
-          html: detail.html,
+          html: current.html,
           sandbox: "allow-scripts allow-forms",
-          ...detail.resourceMeta ?? {}
+          ...current.resourceMeta ?? {}
         });
       };
       bridge.onsizechange = ({ height }) => {
+        if (destroyed) return;
         if (typeof height === "number" && Number.isFinite(height)) {
           frame.style.height = `${Math.min(1200, Math.max(120, Math.ceil(height)))}px`;
         }
       };
       bridge.onmessage = async ({ content }) => {
+        if (destroyed) return {};
         const text2 = content.flatMap(
           (part) => part.type === "text" && typeof part.text === "string" ? [part.text] : []
         ).join("\n").trim();
@@ -3148,13 +3160,16 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onupdatemodelcontext = async (update) => {
+        if (destroyed) return {};
         actions.updateModelContext(update);
         return {};
       };
       bridge.onopenlink = async ({ url }) => {
+        if (destroyed) return { isError: true };
+        const current = options.getDetail?.() ?? detail;
         const allowed = isAllowedAppLink(
           url,
-          detail.allowedOpenDomains ?? [],
+          current.allowedOpenDomains ?? [],
           globalThis.location?.href ?? "https://invalid.example"
         );
         if (!allowed) return { isError: true };
@@ -3163,30 +3178,74 @@ function mountAssistantApp(detail, actions, options = {}) {
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
         const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
+        if (destroyed) return { mode: accepted };
         card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
         return { mode: accepted };
       };
-      bridge.oncalltool = async (params) => await actions.client.requestApp("tools/call", params);
-      bridge.onlistresources = async (params) => await actions.client.requestApp("resources/list", params ?? {});
-      bridge.onreadresource = async (params) => await actions.client.requestApp("resources/read", params);
+      bridge.oncalltool = async (params) => {
+        if (destroyed) {
+          return {
+            content: [{ type: "text", text: "App view is closing." }],
+            isError: true
+          };
+        }
+        return await actions.client.requestApp("tools/call", params);
+      };
+      bridge.onlistresources = async (params) => {
+        if (destroyed) {
+          return { resources: [] };
+        }
+        return await actions.client.requestApp("resources/list", params ?? {});
+      };
+      bridge.onreadresource = async (params) => {
+        if (destroyed) {
+          return { contents: [] };
+        }
+        return await actions.client.requestApp("resources/read", params);
+      };
       bridge.oninitialized = () => {
+        if (destroyed) return;
         initialized = true;
         clearTimeout(renderTimer);
-        void bridge.sendToolInput({ arguments: detail.arguments ?? {} });
+        const current = options.getDetail?.() ?? detail;
+        void bridge.sendToolInput({ arguments: current.arguments ?? {} });
         void bridge.sendToolResult({
-          content: [{ type: "text", text: JSON.stringify(detail.result) }],
-          ...typeof detail.result === "object" && detail.result !== null && !Array.isArray(detail.result) ? { structuredContent: detail.result } : {}
+          content: [{ type: "text", text: JSON.stringify(current.result) }],
+          ...typeof current.result === "object" && current.result !== null && !Array.isArray(current.result) ? { structuredContent: current.result } : {}
         });
       };
-      void bridge.connect(new E(target, target)).catch(() => {
-        clearTimeout(renderTimer);
-        card.remove();
+      const transport = new E(target, target);
+      mountedTransport = transport;
+      void bridge.connect(transport).catch(() => {
+        void destroy();
       });
     },
     { once: true }
   );
+  const destroy = () => {
+    if (destroyPromise) return destroyPromise;
+    destroyed = true;
+    clearTimeout(renderTimer);
+    destroyPromise = (async () => {
+      try {
+        if (initialized) {
+          await mountedBridge?.teardownResource({}, { timeout: APP_TEARDOWN_TIMEOUT_MS });
+        }
+      } catch {
+      }
+      await mountedTransport?.close().catch(() => {
+      });
+      card.remove();
+      mountedApps.delete(card);
+    })();
+    return destroyPromise;
+  };
+  mountedApps.set(card, { destroy });
   return card;
 }
+function unmountAssistantApp(card) {
+  return mountedApps.get(card)?.destroy() ?? Promise.resolve();
+}
 
 // src/appearance.ts
 var common = {
@@ -8136,6 +8195,8 @@ function registerNoodleAssistant() {
 }
 
 export {
+  mountAssistantApp,
+  unmountAssistantApp,
   ASSISTANT_TAG_NAME,
   NoodleAssistantElement,
   registerNoodleAssistant
@@ -8145,4 +8206,4 @@ export {
 dompurify/dist/purify.es.mjs:
   (*! @license DOMPurify 3.4.11 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.11/LICENSE *)
 */
-//# sourceMappingURL=chunk-JMBUJSFP.js.map
+//# sourceMappingURL=chunk-4B3XXGRP.js.map