@noodleseed/assistant 1.8.0 → 1.10.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,32 @@ 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={resolvedTheme}
+      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. Pass the embedding application's
+resolved `"light"` or `"dark"` theme; later changes are published through MCP Apps host context without
+replacing the iframe.
+
 Outside React, subscribe to the DOM-free AI SDK `UIMessage` state without registering a custom element or
 touching browser storage:
 
@@ -331,11 +357,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) => {
@@ -367,10 +395,19 @@ exact control over assistant-specific roles:
 ```tsx
 <NoodleAssistant
   sessionEndpoint="/api/assistant/session"
+  theme={resolvedTheme}
   appearance={{
     light: {
-      panel: { surface: "#FFFFFF", text: "#101828", border: "#E4E7EC" },
-      composer: { surface: "#F9FAFB", text: "#101828", border: "#D0D5DD" },
+      panel: {
+        surface: "var(--app-surface)",
+        text: "var(--app-text)",
+        border: "var(--app-border)",
+      },
+      composer: {
+        surface: "var(--app-input)",
+        text: "var(--app-text)",
+        border: "var(--app-border)",
+      },
       confirmation: { surface: "#F8FAFC", text: "#101828", border: "#CBD5E1" },
       primaryButton: { surface: "#635BFF", text: "#FFFFFF" },
     },
@@ -379,11 +416,38 @@ exact control over assistant-specific roles:
 />
 ```
 
-The same object is available as `element.appearance`. It covers canvas, panel, header, assistant/user
-messages, composer, suggestions, confirmation, primary/secondary buttons, launcher, code, and MCP App frame
-roles in light and dark modes. Exact colors are preserved; insufficient contrast emits the typed
-`assistant-appearance-warning` event. Stable public CSS variables remain available for stylesheet-based
-integration:
+The same object is available as `element.appearance`. CSS custom properties inherit through the assistant
+host into its shadow tree, so `var(--app-token)` references reuse the embedding application's existing
+tokens without copying literal colors. Exact parseable literal colors are preserved and checked;
+insufficient contrast emits the typed `assistant-appearance-warning` event. Contrast for unresolved CSS
+references remains the host application's responsibility.
+
+The complete typed appearance role map is:
+
+| Appearance role | Public CSS custom properties |
+| --- | --- |
+| `canvas` | `--ns-assistant-canvas` |
+| `text` | `--ns-assistant-text` |
+| `mutedText` | `--ns-assistant-muted-text` |
+| `link` | `--ns-assistant-link` |
+| `focus` | `--ns-assistant-focus` |
+| `success` | `--ns-assistant-success` |
+| `warning` | `--ns-assistant-warning` |
+| `danger` | `--ns-assistant-danger` |
+| `panel` | `--ns-assistant-panel`, `--ns-assistant-panel-text`, `--ns-assistant-panel-border` |
+| `header` | `--ns-assistant-header`, `--ns-assistant-header-text`, `--ns-assistant-header-border` |
+| `assistantMessage` | `--ns-assistant-assistant-message`, `--ns-assistant-assistant-message-text`, `--ns-assistant-assistant-message-border` |
+| `userMessage` | `--ns-assistant-user-message`, `--ns-assistant-user-message-text`, `--ns-assistant-user-message-border` |
+| `composer` | `--ns-assistant-composer`, `--ns-assistant-composer-text`, `--ns-assistant-composer-border` |
+| `suggestion` | `--ns-assistant-suggestion`, `--ns-assistant-suggestion-text`, `--ns-assistant-suggestion-border` |
+| `confirmation` | `--ns-assistant-confirmation`, `--ns-assistant-confirmation-text`, `--ns-assistant-confirmation-border` |
+| `primaryButton` | `--ns-assistant-primary-button`, `--ns-assistant-primary-button-text`, `--ns-assistant-primary-button-border` |
+| `secondaryButton` | `--ns-assistant-secondary-button`, `--ns-assistant-secondary-button-text`, `--ns-assistant-secondary-button-border` |
+| `launcher` | `--ns-assistant-launcher`, `--ns-assistant-launcher-text`, `--ns-assistant-launcher-border` |
+| `code` | `--ns-assistant-code`, `--ns-assistant-code-text`, `--ns-assistant-code-border` |
+| `app` | `--ns-assistant-app`, `--ns-assistant-app-text`, `--ns-assistant-app-border` |
+
+Stable public CSS variables also remain available directly for stylesheet-based integration:
 
 ```css
 noodle-assistant {
@@ -401,6 +465,11 @@ defaults. The public slots are `launcher-icon`,
 embedding-page integration API, not a way to put HTML or callbacks in deployment configuration. Internal
 shadow-DOM selectors and classes are not public API.
 
+`theme="auto"` follows the browser's operating-system color preference. When the embedding application has
+its own theme toggle, pass its resolved `"light"` or `"dark"` value to `NoodleAssistant` and every
+`NoodleAppView`. Updates change the assistant in place and notify mounted MCP Apps through standard host
+context.
+
 Server branding controls customer name, themed logo/mark/avatar assets, semantic light/dark colors, density,
 radius, typography, and automatic theme. `embeddedAssistant(...)` controls floating/inline/drawer layout,
 position and dimensions, mobile and launcher/header/avatar/timestamp behavior, visible labels, suggested

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-RSNMY27B.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,12 @@ 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 hostContext = createAssistantAppHostContext(actions.theme);
+  let destroyPromise;
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -3112,6 +3119,7 @@ function mountAssistantApp(detail, actions, options = {}) {
   frame.addEventListener(
     "load",
     () => {
+      if (destroyed) return;
       const target = frame.contentWindow;
       if (!target) return;
       const bridge = new DX(
@@ -3125,22 +3133,27 @@ function mountAssistantApp(detail, actions, options = {}) {
           message: { text: {} }
         },
         {
-          hostContext: createAssistantAppHostContext(actions.theme)
+          hostContext
         }
       );
+      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 +3161,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 +3179,83 @@ 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 ?? {} });
+        bridge.setHostContext(hostContext);
+        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 updateTheme = (theme) => {
+    if (destroyed) return;
+    hostContext = createAssistantAppHostContext(theme);
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+  };
+  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, updateTheme });
   return card;
 }
+function updateAssistantAppTheme(card, theme) {
+  mountedApps.get(card)?.updateTheme(theme);
+}
+function unmountAssistantApp(card) {
+  return mountedApps.get(card)?.destroy() ?? Promise.resolve();
+}
 
 // src/appearance.ts
 var common = {
@@ -7109,7 +7178,7 @@ function contrastWarnings(theme, mode) {
   for (const [role, foreground, background] of pairs) {
     if (!foreground || !background) continue;
     const ratio = contrastRatio2(foreground, background);
-    if (ratio >= 4.5) continue;
+    if (ratio === void 0 || ratio >= 4.5) continue;
     warnings.push({
       code: "low_contrast",
       theme: mode,
@@ -7123,13 +7192,16 @@ function contrastWarnings(theme, mode) {
   return warnings;
 }
 function contrastRatio2(first, second) {
-  const lighter = Math.max(luminance(first), luminance(second));
-  const darker = Math.min(luminance(first), luminance(second));
+  const firstLuminance = luminance(first);
+  const secondLuminance = luminance(second);
+  if (firstLuminance === void 0 || secondLuminance === void 0) return void 0;
+  const lighter = Math.max(firstLuminance, secondLuminance);
+  const darker = Math.min(firstLuminance, secondLuminance);
   return (lighter + 0.05) / (darker + 0.05);
 }
 function luminance(color) {
   const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
-  if (!match) return 1;
+  if (!match) return void 0;
   const values = match.slice(1).map((value) => {
     const channel = Number.parseInt(value, 16) / 255;
     return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
@@ -7962,6 +8034,9 @@ var NoodleAssistantElement = class extends HTMLElementBase {
         })
       );
     }
+    for (const app of this.shadowRoot?.querySelectorAll(".noodle-app-card") ?? []) {
+      updateAssistantAppTheme(app, mode);
+    }
   }
   #setSessionState(state) {
     this.#sessionState = state;
@@ -8136,6 +8211,9 @@ function registerNoodleAssistant() {
 }
 
 export {
+  mountAssistantApp,
+  updateAssistantAppTheme,
+  unmountAssistantApp,
   ASSISTANT_TAG_NAME,
   NoodleAssistantElement,
   registerNoodleAssistant
@@ -8145,4 +8223,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-RSNMY27B.js.map