@noodleseed/assistant 1.22.0 → 1.23.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { d as AssistantViewAvailableDetail, f as AssistantClientEvent, a as AssistantContext, e as AssistantModelContextUpdate, A as AssistantPageContext, h as AssistantInteractionResponse } from './client-BZ7xPwfW.cjs';
-export { g as AssistantErrorDetail, i as AssistantEvent, j as AssistantViewAvailableEvent } from './client-BZ7xPwfW.cjs';
+import { a as AssistantViewAvailableDetail, g as AssistantClientEvent, c as AssistantContext, f as AssistantModelContextUpdate, b as AssistantPageContext, h as AssistantInteractionResponse } from './client-uo57Swlm.cjs';
+export { e as AssistantErrorDetail, i as AssistantEvent, j as AssistantViewAvailableEvent } from './client-uo57Swlm.cjs';
 import './appearance-Cc-eqSbp.cjs';
 import 'ai';
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { d as AssistantViewAvailableDetail, f as AssistantClientEvent, a as AssistantContext, e as AssistantModelContextUpdate, A as AssistantPageContext, h as AssistantInteractionResponse } from './client-BkJlpN5N.js';
-export { g as AssistantErrorDetail, i as AssistantEvent, j as AssistantViewAvailableEvent } from './client-BkJlpN5N.js';
+import { a as AssistantViewAvailableDetail, g as AssistantClientEvent, c as AssistantContext, f as AssistantModelContextUpdate, b as AssistantPageContext, h as AssistantInteractionResponse } from './client-Bp_VKpMg.js';
+export { e as AssistantErrorDetail, i as AssistantEvent, j as AssistantViewAvailableEvent } from './client-Bp_VKpMg.js';
 import './appearance-Cc-eqSbp.js';
 import 'ai';
 

package/dist/index.js

@@ -2,8 +2,10 @@ import {
   ASSISTANT_TAG_NAME,
   NoodleAssistantElement,
   registerNoodleAssistant
-} from "./chunk-6TT3R555.js";
-import "./chunk-ZPZHPXIQ.js";
+} from "./chunk-X7UQDIGS.js";
+import "./chunk-XKTUXFGX.js";
+import "./chunk-IBDP6PXQ.js";
+import "./chunk-P223CYPO.js";
 import "./chunk-3YYTUJPJ.js";
 import "./chunk-5FUTL2UF.js";
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ASSISTANT_TAG_NAME,\n  NoodleAssistantElement,\n  registerNoodleAssistant,\n} from './element.js';\nexport type { AssistantViewAvailableDetail, AssistantViewAvailableEvent } from './events.js';\nexport type {\n  AssistantAppearance,\n  AssistantAppearanceTheme,\n  AssistantAppearanceWarning,\n  AssistantSurfaceAppearance,\n} from './host-appearance.js';\nexport type { AssistantErrorDetail, AssistantEvent } from './transport.js';\n\nimport { registerNoodleAssistant } from './element.js';\n\nregisterNoodleAssistant();\n"],"mappings":";;;;;;;;;;AAgBA,wBAAwB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ASSISTANT_TAG_NAME,\n  NoodleAssistantElement,\n  registerNoodleAssistant,\n} from './element.js';\nexport type { AssistantViewAvailableDetail, AssistantViewAvailableEvent } from './events.js';\nexport type {\n  AssistantAppearance,\n  AssistantAppearanceTheme,\n  AssistantAppearanceWarning,\n  AssistantSurfaceAppearance,\n} from './host-appearance.js';\nexport type { AssistantErrorDetail, AssistantEvent } from './transport.js';\n\nimport { registerNoodleAssistant } from './element.js';\n\nregisterNoodleAssistant();\n"],"mappings":";;;;;;;;;;;;AAgBA,wBAAwB;","names":[]}

package/dist/react/client.d.cts

@@ -1,4 +1,4 @@
-import { A as AssistantPageContext, a as AssistantContext, C as CreateAssistantClientOptions, b as AssistantChatState, c as AssistantClient } from '../client-BZ7xPwfW.cjs';
+import { b as AssistantPageContext, c as AssistantContext, C as CreateAssistantClientOptions, d as AssistantChatState, A as AssistantClient } from '../client-uo57Swlm.cjs';
 import '../appearance-Cc-eqSbp.cjs';
 import 'ai';
 

package/dist/react/client.d.ts

@@ -1,4 +1,4 @@
-import { A as AssistantPageContext, a as AssistantContext, C as CreateAssistantClientOptions, b as AssistantChatState, c as AssistantClient } from '../client-BkJlpN5N.js';
+import { b as AssistantPageContext, c as AssistantContext, C as CreateAssistantClientOptions, d as AssistantChatState, A as AssistantClient } from '../client-Bp_VKpMg.js';
 import '../appearance-Cc-eqSbp.js';
 import 'ai';
 

package/dist/react/client.js

@@ -1,7 +1,8 @@
 "use client";
 import {
   createAssistantClient
-} from "../chunk-ZPZHPXIQ.js";
+} from "../chunk-IBDP6PXQ.js";
+import "../chunk-P223CYPO.js";
 import "../chunk-3YYTUJPJ.js";
 import "../chunk-5FUTL2UF.js";
 

package/dist/react/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react-client.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  type AssistantChatState,\n  type AssistantClient,\n  type AssistantContext,\n  type AssistantModelContextUpdate,\n  type AssistantPageContext,\n  type CreateAssistantClientOptions,\n  createAssistantClient,\n} from './client.js';\n\nexport type UseNoodleAssistantOptions<\n  TPageContext extends AssistantPageContext = AssistantContext,\n> = CreateAssistantClientOptions<TPageContext> & {\n  /**\n   * Browser-local identity for the authenticated principal/tenant.\n   * Changing it discards the previous in-memory session and transcript; it is never sent to Noodle.\n   */\n  readonly principalKey: string;\n};\n\nexport type UseNoodleAssistantResult<TPageContext extends AssistantPageContext = AssistantContext> =\n  AssistantChatState & {\n    /** Canonical controller for turns, interactions, context, Apps requests, and aborts. */\n    readonly client: AssistantClient<TPageContext>;\n  };\n\ninterface AssistantReactStore {\n  readonly getSnapshot: () => AssistantChatState;\n  readonly subscribe: (listener: () => void) => () => void;\n}\n\nconst useCommittedLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * Subscribe a customer-owned React renderer to the DOM-free assistant client.\n *\n * The hook owns only client lifetime and React state projection. Session exchange, transport,\n * retries, interaction continuations, and transcript construction remain client responsibilities.\n */\nexport function useNoodleAssistant<TPageContext extends AssistantPageContext = AssistantContext>(\n  options: UseNoodleAssistantOptions<TPageContext>,\n): UseNoodleAssistantResult<TPageContext> {\n  const optionsRef = useRef(options);\n  const { fetch: injectedFetch, principalKey, sessionEndpoint, embedId, serviceUrl } = options;\n\n  const client = useMemo(() => {\n    if (!principalKey.trim()) throw new Error('principalKey is required');\n    // The two mounts are spelled out rather than spread from one object: the exclusive union is what\n    // stops a caller passing both, and a spread would collapse it back into an ambiguous shape.\n    const behavior = {\n      ...(injectedFetch ? { fetch: injectedFetch } : {}),\n      clientContext: () => readProvider(optionsRef.current.clientContext),\n      pageContext: () => readProvider(optionsRef.current.pageContext),\n    };\n    return embedId !== undefined\n      ? createAssistantClient<TPageContext>({\n          embedId,\n          ...(serviceUrl !== undefined ? { serviceUrl } : {}),\n          ...behavior,\n        })\n      : createAssistantClient<TPageContext>({\n          sessionEndpoint: sessionEndpoint ?? '',\n          ...behavior,\n        });\n  }, [injectedFetch, principalKey, sessionEndpoint, embedId, serviceUrl]);\n  const store = useMemo(() => createAssistantReactStore(client), [client]);\n  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n  const synchronized = useRef<\n    | {\n        readonly client: AssistantClient<TPageContext>;\n        readonly context: AssistantContext | undefined;\n        readonly modelContext: AssistantModelContextUpdate | undefined;\n      }\n    | undefined\n  >(undefined);\n\n  useCommittedLayoutEffect(() => {\n    optionsRef.current = options;\n    const previous = synchronized.current;\n    if (previous?.client === client) {\n      if (previous.context !== options.context) {\n        client.updateContext(options.context ?? {});\n      }\n      if (previous.modelContext !== options.modelContext) {\n        client.updateModelContext(options.modelContext ?? {});\n      }\n    } else {\n      if (options.context !== undefined) client.updateContext(options.context);\n      if (options.modelContext !== undefined) client.updateModelContext(options.modelContext);\n    }\n    synchronized.current = {\n      client,\n      context: options.context,\n      modelContext: options.modelContext,\n    };\n  }, [client, options]);\n\n  useCommittedLayoutEffect(\n    () => () => {\n      client.abort();\n      client.resetSession();\n    },\n    [client],\n  );\n\n  return useMemo(() => ({ client, ...state }), [client, state]);\n}\n\nfunction createAssistantReactStore<TPageContext extends AssistantPageContext>(\n  client: AssistantClient<TPageContext>,\n): AssistantReactStore {\n  let snapshot = client.getChatState();\n  return {\n    getSnapshot: () => snapshot,\n    subscribe(listener) {\n      let subscribing = true;\n      const unsubscribe = client.subscribeChat((next) => {\n        snapshot = next;\n        if (!subscribing) listener();\n      });\n      subscribing = false;\n      return unsubscribe;\n    },\n  };\n}\n\nfunction readProvider<T>(value: T | (() => T | undefined) | undefined): T | undefined {\n  return typeof value === 'function' ? (value as () => T | undefined)() : value;\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,WAAW,iBAAiB,SAAS,QAAQ,4BAA4B;AAgClF,IAAM,2BAA2B,OAAO,WAAW,cAAc,YAAY;AAQtE,SAAS,mBACd,SACwC;AACxC,QAAM,aAAa,OAAO,OAAO;AACjC,QAAM,EAAE,OAAO,eAAe,cAAc,iBAAiB,SAAS,WAAW,IAAI;AAErF,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,CAAC,aAAa,KAAK,EAAG,OAAM,IAAI,MAAM,0BAA0B;AAGpE,UAAM,WAAW;AAAA,MACf,GAAI,gBAAgB,EAAE,OAAO,cAAc,IAAI,CAAC;AAAA,MAChD,eAAe,MAAM,aAAa,WAAW,QAAQ,aAAa;AAAA,MAClE,aAAa,MAAM,aAAa,WAAW,QAAQ,WAAW;AAAA,IAChE;AACA,WAAO,YAAY,SACf,sBAAoC;AAAA,MAClC;AAAA,MACA,GAAI,eAAe,SAAY,EAAE,WAAW,IAAI,CAAC;AAAA,MACjD,GAAG;AAAA,IACL,CAAC,IACD,sBAAoC;AAAA,MAClC,iBAAiB,mBAAmB;AAAA,MACpC,GAAG;AAAA,IACL,CAAC;AAAA,EACP,GAAG,CAAC,eAAe,cAAc,iBAAiB,SAAS,UAAU,CAAC;AACtE,QAAM,QAAQ,QAAQ,MAAM,0BAA0B,MAAM,GAAG,CAAC,MAAM,CAAC;AACvE,QAAM,QAAQ,qBAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,WAAW;AACxF,QAAM,eAAe,OAOnB,MAAS;AAEX,2BAAyB,MAAM;AAC7B,eAAW,UAAU;AACrB,UAAM,WAAW,aAAa;AAC9B,QAAI,UAAU,WAAW,QAAQ;AAC/B,UAAI,SAAS,YAAY,QAAQ,SAAS;AACxC,eAAO,cAAc,QAAQ,WAAW,CAAC,CAAC;AAAA,MAC5C;AACA,UAAI,SAAS,iBAAiB,QAAQ,cAAc;AAClD,eAAO,mBAAmB,QAAQ,gBAAgB,CAAC,CAAC;AAAA,MACtD;AAAA,IACF,OAAO;AACL,UAAI,QAAQ,YAAY,OAAW,QAAO,cAAc,QAAQ,OAAO;AACvE,UAAI,QAAQ,iBAAiB,OAAW,QAAO,mBAAmB,QAAQ,YAAY;AAAA,IACxF;AACA,iBAAa,UAAU;AAAA,MACrB;AAAA,MACA,SAAS,QAAQ;AAAA,MACjB,cAAc,QAAQ;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB;AAAA,IACE,MAAM,MAAM;AACV,aAAO,MAAM;AACb,aAAO,aAAa;AAAA,IACtB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,QAAQ,OAAO,EAAE,QAAQ,GAAG,MAAM,IAAI,CAAC,QAAQ,KAAK,CAAC;AAC9D;AAEA,SAAS,0BACP,QACqB;AACrB,MAAI,WAAW,OAAO,aAAa;AACnC,SAAO;AAAA,IACL,aAAa,MAAM;AAAA,IACnB,UAAU,UAAU;AAClB,UAAI,cAAc;AAClB,YAAM,cAAc,OAAO,cAAc,CAAC,SAAS;AACjD,mBAAW;AACX,YAAI,CAAC,YAAa,UAAS;AAAA,MAC7B,CAAC;AACD,oBAAc;AACd,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,SAAS,aAAgB,OAA6D;AACpF,SAAO,OAAO,UAAU,aAAc,MAA8B,IAAI;AAC1E;","names":[]}
+{"version":3,"sources":["../../src/react-client.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  type AssistantChatState,\n  type AssistantClient,\n  type AssistantContext,\n  type AssistantModelContextUpdate,\n  type AssistantPageContext,\n  type CreateAssistantClientOptions,\n  createAssistantClient,\n} from './client.js';\n\nexport type UseNoodleAssistantOptions<\n  TPageContext extends AssistantPageContext = AssistantContext,\n> = CreateAssistantClientOptions<TPageContext> & {\n  /**\n   * Browser-local identity for the authenticated principal/tenant.\n   * Changing it discards the previous in-memory session and transcript; it is never sent to Noodle.\n   */\n  readonly principalKey: string;\n};\n\nexport type UseNoodleAssistantResult<TPageContext extends AssistantPageContext = AssistantContext> =\n  AssistantChatState & {\n    /** Canonical controller for turns, interactions, context, Apps requests, and aborts. */\n    readonly client: AssistantClient<TPageContext>;\n  };\n\ninterface AssistantReactStore {\n  readonly getSnapshot: () => AssistantChatState;\n  readonly subscribe: (listener: () => void) => () => void;\n}\n\nconst useCommittedLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * Subscribe a customer-owned React renderer to the DOM-free assistant client.\n *\n * The hook owns only client lifetime and React state projection. Session exchange, transport,\n * retries, interaction continuations, and transcript construction remain client responsibilities.\n */\nexport function useNoodleAssistant<TPageContext extends AssistantPageContext = AssistantContext>(\n  options: UseNoodleAssistantOptions<TPageContext>,\n): UseNoodleAssistantResult<TPageContext> {\n  const optionsRef = useRef(options);\n  const { fetch: injectedFetch, principalKey, sessionEndpoint, embedId, serviceUrl } = options;\n\n  const client = useMemo(() => {\n    if (!principalKey.trim()) throw new Error('principalKey is required');\n    // The two mounts are spelled out rather than spread from one object: the exclusive union is what\n    // stops a caller passing both, and a spread would collapse it back into an ambiguous shape.\n    const behavior = {\n      ...(injectedFetch ? { fetch: injectedFetch } : {}),\n      clientContext: () => readProvider(optionsRef.current.clientContext),\n      pageContext: () => readProvider(optionsRef.current.pageContext),\n    };\n    return embedId !== undefined\n      ? createAssistantClient<TPageContext>({\n          embedId,\n          ...(serviceUrl !== undefined ? { serviceUrl } : {}),\n          ...behavior,\n        })\n      : createAssistantClient<TPageContext>({\n          sessionEndpoint: sessionEndpoint ?? '',\n          ...behavior,\n        });\n  }, [injectedFetch, principalKey, sessionEndpoint, embedId, serviceUrl]);\n  const store = useMemo(() => createAssistantReactStore(client), [client]);\n  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n  const synchronized = useRef<\n    | {\n        readonly client: AssistantClient<TPageContext>;\n        readonly context: AssistantContext | undefined;\n        readonly modelContext: AssistantModelContextUpdate | undefined;\n      }\n    | undefined\n  >(undefined);\n\n  useCommittedLayoutEffect(() => {\n    optionsRef.current = options;\n    const previous = synchronized.current;\n    if (previous?.client === client) {\n      if (previous.context !== options.context) {\n        client.updateContext(options.context ?? {});\n      }\n      if (previous.modelContext !== options.modelContext) {\n        client.updateModelContext(options.modelContext ?? {});\n      }\n    } else {\n      if (options.context !== undefined) client.updateContext(options.context);\n      if (options.modelContext !== undefined) client.updateModelContext(options.modelContext);\n    }\n    synchronized.current = {\n      client,\n      context: options.context,\n      modelContext: options.modelContext,\n    };\n  }, [client, options]);\n\n  useCommittedLayoutEffect(\n    () => () => {\n      client.abort();\n      client.resetSession();\n    },\n    [client],\n  );\n\n  return useMemo(() => ({ client, ...state }), [client, state]);\n}\n\nfunction createAssistantReactStore<TPageContext extends AssistantPageContext>(\n  client: AssistantClient<TPageContext>,\n): AssistantReactStore {\n  let snapshot = client.getChatState();\n  return {\n    getSnapshot: () => snapshot,\n    subscribe(listener) {\n      let subscribing = true;\n      const unsubscribe = client.subscribeChat((next) => {\n        snapshot = next;\n        if (!subscribing) listener();\n      });\n      subscribing = false;\n      return unsubscribe;\n    },\n  };\n}\n\nfunction readProvider<T>(value: T | (() => T | undefined) | undefined): T | undefined {\n  return typeof value === 'function' ? (value as () => T | undefined)() : value;\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,WAAW,iBAAiB,SAAS,QAAQ,4BAA4B;AAgClF,IAAM,2BAA2B,OAAO,WAAW,cAAc,YAAY;AAQtE,SAAS,mBACd,SACwC;AACxC,QAAM,aAAa,OAAO,OAAO;AACjC,QAAM,EAAE,OAAO,eAAe,cAAc,iBAAiB,SAAS,WAAW,IAAI;AAErF,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,CAAC,aAAa,KAAK,EAAG,OAAM,IAAI,MAAM,0BAA0B;AAGpE,UAAM,WAAW;AAAA,MACf,GAAI,gBAAgB,EAAE,OAAO,cAAc,IAAI,CAAC;AAAA,MAChD,eAAe,MAAM,aAAa,WAAW,QAAQ,aAAa;AAAA,MAClE,aAAa,MAAM,aAAa,WAAW,QAAQ,WAAW;AAAA,IAChE;AACA,WAAO,YAAY,SACf,sBAAoC;AAAA,MAClC;AAAA,MACA,GAAI,eAAe,SAAY,EAAE,WAAW,IAAI,CAAC;AAAA,MACjD,GAAG;AAAA,IACL,CAAC,IACD,sBAAoC;AAAA,MAClC,iBAAiB,mBAAmB;AAAA,MACpC,GAAG;AAAA,IACL,CAAC;AAAA,EACP,GAAG,CAAC,eAAe,cAAc,iBAAiB,SAAS,UAAU,CAAC;AACtE,QAAM,QAAQ,QAAQ,MAAM,0BAA0B,MAAM,GAAG,CAAC,MAAM,CAAC;AACvE,QAAM,QAAQ,qBAAqB,MAAM,WAAW,MAAM,aAAa,MAAM,WAAW;AACxF,QAAM,eAAe,OAOnB,MAAS;AAEX,2BAAyB,MAAM;AAC7B,eAAW,UAAU;AACrB,UAAM,WAAW,aAAa;AAC9B,QAAI,UAAU,WAAW,QAAQ;AAC/B,UAAI,SAAS,YAAY,QAAQ,SAAS;AACxC,eAAO,cAAc,QAAQ,WAAW,CAAC,CAAC;AAAA,MAC5C;AACA,UAAI,SAAS,iBAAiB,QAAQ,cAAc;AAClD,eAAO,mBAAmB,QAAQ,gBAAgB,CAAC,CAAC;AAAA,MACtD;AAAA,IACF,OAAO;AACL,UAAI,QAAQ,YAAY,OAAW,QAAO,cAAc,QAAQ,OAAO;AACvE,UAAI,QAAQ,iBAAiB,OAAW,QAAO,mBAAmB,QAAQ,YAAY;AAAA,IACxF;AACA,iBAAa,UAAU;AAAA,MACrB;AAAA,MACA,SAAS,QAAQ;AAAA,MACjB,cAAc,QAAQ;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB;AAAA,IACE,MAAM,MAAM;AACV,aAAO,MAAM;AACb,aAAO,aAAa;AAAA,IACtB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,QAAQ,OAAO,EAAE,QAAQ,GAAG,MAAM,IAAI,CAAC,QAAQ,KAAK,CAAC;AAC9D;AAEA,SAAS,0BACP,QACqB;AACrB,MAAI,WAAW,OAAO,aAAa;AACnC,SAAO;AAAA,IACL,aAAa,MAAM;AAAA,IACnB,UAAU,UAAU;AAClB,UAAI,cAAc;AAClB,YAAM,cAAc,OAAO,cAAc,CAAC,SAAS;AACjD,mBAAW;AACX,YAAI,CAAC,YAAa,UAAS;AAAA,MAC7B,CAAC;AACD,oBAAc;AACd,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,SAAS,aAAgB,OAA6D;AACpF,SAAO,OAAO,UAAU,aAAc,MAA8B,IAAI;AAC1E;","names":[]}

package/dist/react.cjs

@@ -22112,11 +22112,11 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
-function createAssistantAppHostContext(theme) {
+function createAssistantAppHostContext(theme, allowFullscreen = false, displayMode = "inline") {
   return {
     theme,
-    displayMode: "inline",
-    availableDisplayModes: ["inline", "fullscreen"],
+    displayMode: allowFullscreen && displayMode === "fullscreen" ? "fullscreen" : "inline",
+    availableDisplayModes: allowFullscreen ? ["inline", "fullscreen"] : ["inline"],
     platform: "web"
   };
 }
@@ -22142,6 +22142,13 @@ function mountAssistantApp(detail, actions, options = {}) {
     title.textContent = detail.title;
     card.append(title);
   }
+  const exitFullscreen = document.createElement("button");
+  exitFullscreen.className = "noodle-app-fullscreen-exit";
+  exitFullscreen.type = "button";
+  exitFullscreen.setAttribute("aria-label", "Exit fullscreen");
+  exitFullscreen.title = "Exit fullscreen";
+  exitFullscreen.hidden = true;
+  card.append(exitFullscreen);
   const frame = document.createElement("iframe");
   frame.className = "noodle-app-frame";
   frame.title = detail.title ?? detail.tool;
@@ -22155,8 +22162,31 @@ function mountAssistantApp(detail, actions, options = {}) {
   let mountedTransport;
   let destroyed = false;
   let initialized = false;
-  let hostContext = createAssistantAppHostContext(actions.theme);
+  let currentTheme = actions.theme;
+  let displayMode = "inline";
+  let hostContext = createAssistantAppHostContext(
+    currentTheme,
+    options.allowFullscreen === true,
+    displayMode
+  );
   let destroyPromise;
+  const applyDisplayMode = (requestedMode) => {
+    displayMode = requestedMode === "fullscreen" && options.allowFullscreen === true ? "fullscreen" : "inline";
+    card.toggleAttribute("data-fullscreen", displayMode === "fullscreen");
+    exitFullscreen.hidden = displayMode !== "fullscreen";
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+    return displayMode;
+  };
+  exitFullscreen.addEventListener("click", () => {
+    if (destroyed) return;
+    applyDisplayMode("inline");
+    frame.focus();
+  });
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -22214,6 +22244,11 @@ function mountAssistantApp(detail, actions, options = {}) {
         actions.updateModelContext(update);
         return {};
       };
+      bridge.onrequestteardown = () => {
+        if (destroyed) return;
+        options.onTeardownRequest?.();
+        void destroy();
+      };
       bridge.onopenlink = async ({ url: url2 }) => {
         if (destroyed) return { isError: true };
         const current = options.getDetail?.() ?? detail;
@@ -22227,10 +22262,8 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
-        const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
-        if (destroyed) return { mode: accepted };
-        card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
-        return { mode: accepted };
+        if (destroyed) return { mode: displayMode };
+        return { mode: applyDisplayMode(mode) };
       };
       bridge.oncalltool = async (params) => {
         if (destroyed) {
@@ -22275,7 +22308,12 @@ function mountAssistantApp(detail, actions, options = {}) {
   );
   const updateTheme = (theme) => {
     if (destroyed) return;
-    hostContext = createAssistantAppHostContext(theme);
+    currentTheme = theme;
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
     if (initialized) mountedBridge?.setHostContext(hostContext);
   };
   const destroy = () => {
@@ -31727,6 +31765,29 @@ var AssistantElementScrollController = class {
   }
 };
 
+// src/app-view-styles.ts
+var ASSISTANT_APP_VIEW_CSS = `
+  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius, 12px)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
+  .noodle-app-fullscreen-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text, var(--ns-app-view-muted, #6b7280))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: 999px; background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer; font: inherit; transition: color .15s ease, background .15s ease, transform .15s ease; }
+  .noodle-app-fullscreen-exit[hidden] { display: none; }
+  .noodle-app-fullscreen-exit::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .noodle-app-fullscreen-exit:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text, inherit)); background: var(--ns-assistant-hover, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-fullscreen-exit:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus, #2563eb)); outline-offset: 2px; }
+  .noodle-app-fullscreen-exit:active { transform: scale(.96); }
+  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
+  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, var(--ns-app-view-muted, #6b7280))); }
+  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel, var(--ns-app-view-surface, #fff))); }
+  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+`;
+var ASSISTANT_APP_VIEW_STYLES = `<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  :host { --ns-app-view-surface: #fff; --ns-app-view-border: #d1d5db; --ns-app-view-muted: #6b7280; display: block; min-width: 0; color: #111827; color-scheme: light; font: inherit; }
+  :host([data-theme="dark"]) { --ns-app-view-surface: #17191f; --ns-app-view-border: #343741; --ns-app-view-muted: #a7adb8; color: #f3f4f6; color-scheme: dark; }
+  :host([hidden]) { display: none; }
+  ${ASSISTANT_APP_VIEW_CSS}
+</style>`;
+
 // src/element-styles.ts
 var ASSISTANT_ELEMENT_STYLES = `<style>
   *, *::before, *::after { box-sizing: border-box; }
@@ -31829,12 +31890,7 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request input[type="checkbox"] { width: auto; min-height: auto; justify-self: start; accent-color: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
   .input-request input:focus-visible, .input-request select:focus-visible { border-color: var(--ns-assistant-focus, var(--ns-assistant-default-focus)); box-shadow: 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   .input-request .proposal-actions { margin-top: 2px; }
-  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); }
-  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
-  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
-  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, #6b7280)); }
-  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); }
-  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+  ${ASSISTANT_APP_VIEW_CSS}
   form { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 56px; margin: 8px 16px 16px; padding: 6px 6px 6px 16px; color: var(--ns-assistant-composer-text, inherit); border: 1px solid var(--ns-assistant-composer-border, color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 86%, transparent)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); background: var(--ns-assistant-composer, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 92%, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.035); transition: border-color .15s ease, box-shadow .15s ease; }
   form:focus-within { box-shadow: inset 0 0 0 1px var(--ns-assistant-focus, var(--ns-assistant-default-focus)), 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   textarea { flex: 1; min-height: 24px; max-height: 120px; resize: none; padding: 0; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; line-height: 24px; }
@@ -32994,52 +33050,208 @@ function registerNoodleAssistant() {
 
 // src/react-app-view.ts
 var import_react = require("react");
-function NoodleAppView({
-  client,
-  view,
-  theme = "light",
-  className,
-  onError
-}) {
-  const container = (0, import_react.useRef)(null);
-  const mounted = (0, import_react.useRef)(null);
-  const current = (0, import_react.useRef)({ view, theme, onError });
-  const viewId = view.id;
-  const resourceUri = view.resourceUri;
-  (0, import_react.useEffect)(() => {
-    current.current = { view, theme, onError };
-  });
-  (0, import_react.useEffect)(() => {
-    const host = container.current;
-    if (!host) return;
-    const initialView = { ...current.current.view, id: viewId, resourceUri };
+
+// src/app-view-element.ts
+var APP_VIEW_TAG_NAME = "noodle-app-view";
+var HTMLElementBase2 = globalThis.HTMLElement ?? class {
+};
+function viewIdentity(view) {
+  return `${view.id}\0${view.resourceUri}`;
+}
+var NoodleAppViewElement = class extends HTMLElementBase2 {
+  static observedAttributes = ["allow-fullscreen", "theme"];
+  #allowFullscreen = false;
+  #client;
+  #view;
+  #theme = "light";
+  #container;
+  #mounted;
+  #mountedClient;
+  #mountedAllowFullscreen = false;
+  #mountedIdentity;
+  #requestedTeardown;
+  get client() {
+    return this.#client;
+  }
+  /** Allow the hosted App to request fullscreen. Disabled by default. */
+  get allowFullscreen() {
+    return this.#allowFullscreen;
+  }
+  set allowFullscreen(value) {
+    const next = value === true;
+    if (next === this.#allowFullscreen) return;
+    this.#allowFullscreen = next;
+    this.toggleAttribute("allow-fullscreen", next);
+    this.#reconcile();
+  }
+  set client(value) {
+    if (value === this.#client) return;
+    this.#client = value;
+    this.#reconcile();
+  }
+  get view() {
+    return this.#view;
+  }
+  set view(value) {
+    this.#view = value;
+    this.#reconcile();
+  }
+  get theme() {
+    return this.#theme;
+  }
+  set theme(value) {
+    const next = value === "dark" ? "dark" : "light";
+    const changed = next !== this.#theme;
+    this.#theme = next;
+    if (this.getAttribute("data-theme") !== next) this.setAttribute("data-theme", next);
+    if (changed && this.#mounted) updateAssistantAppTheme(this.#mounted, next);
+  }
+  connectedCallback() {
+    this.#ensureContainer();
+    this.#upgradeProperty("allowFullscreen");
+    this.#upgradeProperty("client");
+    this.#upgradeProperty("theme");
+    this.#upgradeProperty("view");
+    this.#reconcile();
+  }
+  disconnectedCallback() {
+    this.#requestedTeardown = void 0;
+    this.#releaseMount();
+  }
+  attributeChangedCallback(name21, _previous, value) {
+    if (name21 === "allow-fullscreen") this.allowFullscreen = value !== null;
+    if (name21 === "theme") this.theme = value === "dark" ? "dark" : "light";
+  }
+  #ensureContainer() {
+    if (this.#container) return this.#container;
+    const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    root.innerHTML = ASSISTANT_APP_VIEW_STYLES;
+    const container = document.createElement("div");
+    container.className = "noodle-app-mount";
+    container.setAttribute("part", "mount");
+    root.append(container);
+    this.#container = container;
+    return container;
+  }
+  #upgradeProperty(name21) {
+    const property = Object.getOwnPropertyDescriptor(this, name21);
+    if (!property) return;
+    Reflect.deleteProperty(this, name21);
+    Reflect.set(this, name21, property.value);
+  }
+  #releaseMount() {
+    const mounted = this.#mounted;
+    this.#mounted = void 0;
+    this.#mountedClient = void 0;
+    this.#mountedAllowFullscreen = false;
+    this.#mountedIdentity = void 0;
+    this.#container?.replaceChildren();
+    if (mounted) void unmountAssistantApp(mounted);
+  }
+  #reconcile() {
+    if (!this.isConnected) return;
+    const client = this.#client;
+    const detail = this.#view;
+    const identity = detail ? viewIdentity(detail) : void 0;
+    if (this.#mounted) {
+      if (client === this.#mountedClient && identity === this.#mountedIdentity && this.#allowFullscreen === this.#mountedAllowFullscreen) {
+        return;
+      }
+      this.#releaseMount();
+    }
+    if (this.#requestedTeardown && (client !== this.#requestedTeardown.client || identity !== this.#requestedTeardown.identity)) {
+      this.#requestedTeardown = void 0;
+    }
+    if (!client || !detail?.html || !identity || this.#requestedTeardown) return;
+    const initialHtml = detail.html;
     const sandboxUrl = client.appSandboxUrl?.();
-    const card = mountAssistantApp(
-      initialView,
+    let card;
+    card = mountAssistantApp(
+      detail,
       {
         client,
         sendMessage: (message) => client.sendMessage(message),
         updateModelContext: (update) => client.updateModelContext(update),
-        theme: current.current.theme
+        theme: this.#theme
       },
       {
+        allowFullscreen: this.#allowFullscreen,
         ...sandboxUrl ? { sandboxUrl } : {},
-        getDetail: () => current.current.view,
-        onRenderFailure: (failure) => current.current.onError?.(failure)
+        getDetail: () => {
+          const latest = this.#view;
+          if (this.#client !== client || !latest || viewIdentity(latest) !== identity)
+            return detail;
+          return latest.html ? latest : { ...latest, html: initialHtml };
+        },
+        onRenderFailure: (failure) => {
+          this.dispatchEvent(
+            new CustomEvent("assistant-error", {
+              detail: failure,
+              bubbles: true,
+              composed: true
+            })
+          );
+        },
+        onTeardownRequest: () => {
+          if (this.#mounted !== card) return;
+          this.#mounted = void 0;
+          this.#mountedClient = void 0;
+          this.#mountedIdentity = void 0;
+          this.#requestedTeardown = { client, identity };
+        }
       }
     );
     if (!card) return;
-    mounted.current = card;
-    host.replaceChildren(card);
+    this.#mounted = card;
+    this.#mountedClient = client;
+    this.#mountedAllowFullscreen = this.#allowFullscreen;
+    this.#mountedIdentity = identity;
+    this.#ensureContainer().replaceChildren(card);
+  }
+};
+
+// src/app-view.ts
+function registerNoodleAppView() {
+  if (!globalThis.customElements?.get(APP_VIEW_TAG_NAME)) {
+    globalThis.customElements?.define(APP_VIEW_TAG_NAME, NoodleAppViewElement);
+  }
+}
+registerNoodleAppView();
+
+// src/react-app-view.ts
+function NoodleAppView({
+  client,
+  view,
+  theme = "light",
+  allowFullscreen = false,
+  className,
+  onError
+}) {
+  const elementRef = (0, import_react.useRef)(null);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  onErrorRef.current = onError;
+  (0, import_react.useEffect)(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const handleError = (event) => {
+      onErrorRef.current?.(event.detail);
+    };
+    element.addEventListener("assistant-error", handleError);
+    registerNoodleAppView();
     return () => {
-      if (mounted.current === card) mounted.current = null;
-      void unmountAssistantApp(card);
+      element.removeEventListener("assistant-error", handleError);
     };
-  }, [client, resourceUri, viewId]);
+  }, []);
   (0, import_react.useEffect)(() => {
-    if (mounted.current) updateAssistantAppTheme(mounted.current, theme);
-  }, [theme]);
-  return (0, import_react.createElement)("div", { ref: container, className });
+    const element = elementRef.current;
+    if (!element) return;
+    if (element.client !== client) element.view = void 0;
+    element.allowFullscreen = allowFullscreen;
+    element.client = client;
+    element.theme = theme;
+    element.view = view;
+  }, [allowFullscreen, client, theme, view]);
+  return (0, import_react.createElement)(APP_VIEW_TAG_NAME, { ref: elementRef, class: className });
 }
 
 // src/react.ts