npm - @noodleseed/assistant - Versions diffs - 1.6.0 → 1.8.0 - Mend

@noodleseed/assistant 1.6.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/README.md +78 -20
package/dist/{chunk-UXPKSCID.js → chunk-3YYTUJPJ.js} +2 -2
package/dist/{chunk-NSBPE2FW.js → chunk-5FUTL2UF.js} +6 -1
package/dist/chunk-BLMJHF7U.js +544 -0
package/dist/chunk-BLMJHF7U.js.map +1 -0
package/dist/{chunk-ZKXOX67J.js → chunk-JMBUJSFP.js} +233 -87
package/dist/chunk-JMBUJSFP.js.map +1 -0
package/dist/chunk-RYQBXTLR.js +9089 -0
package/dist/chunk-RYQBXTLR.js.map +1 -0
package/dist/{client-9kup0-ws.d.cts → client-BxoNZkWp.d.cts} +50 -1
package/dist/{client-BRjZMXlk.d.ts → client-ERQCAH_0.d.ts} +50 -1
package/dist/client.cjs +22983 -94
package/dist/client.cjs.map +1 -1
package/dist/client.d.cts +2 -1
package/dist/client.d.ts +2 -1
package/dist/client.js +3 -2
package/dist/index.cjs +10706 -2177
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +3 -2
package/dist/index.d.ts +3 -2
package/dist/index.js +4 -4
package/dist/react/client.cjs +23688 -0
package/dist/react/client.cjs.map +1 -0
package/dist/react/client.d.cts +24 -0
package/dist/react/client.d.ts +24 -0
package/dist/react/client.js +76 -0
package/dist/react/client.js.map +1 -0
package/dist/react.cjs +10706 -2176
package/dist/react.cjs.map +1 -1
package/dist/react.d.cts +2 -1
package/dist/react.d.ts +2 -1
package/dist/react.js +7 -6
package/dist/react.js.map +1 -1
package/dist/server.cjs.map +1 -1
package/dist/server.d.cts +3 -0
package/dist/server.d.ts +3 -0
package/dist/server.js +1 -1
package/dist/server.js.map +1 -1
package/dist/token-Y6KCR3JT.js +70 -0
package/dist/token-Y6KCR3JT.js.map +1 -0
package/dist/token-util-XFYMRPAB.js +6 -0
package/dist/{v4-2UXPDMWJ.js → v4-KBRL3YLO.js} +3 -3
package/dist/v4-KBRL3YLO.js.map +1 -0
package/package.json +14 -3
package/dist/chunk-GTYYQNGT.js +0 -708
package/dist/chunk-GTYYQNGT.js.map +0 -1
package/dist/chunk-ZKXOX67J.js.map +0 -1
/package/dist/{chunk-UXPKSCID.js.map → chunk-3YYTUJPJ.js.map} +0 -0
/package/dist/{chunk-NSBPE2FW.js.map → chunk-5FUTL2UF.js.map} +0 -0
/package/dist/{v4-2UXPDMWJ.js.map → token-util-XFYMRPAB.js.map} +0 -0

package/dist/{chunk-ZKXOX67J.js → chunk-JMBUJSFP.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import {
   AssistantClientError,
   copyAssistantModelContext,
   createAssistantClient
-} from "./chunk-GTYYQNGT.js";
+} from "./chunk-RYQBXTLR.js";
 import {
   _enum,
   _null,
@@ -24,10 +24,10 @@ import {
   string,
   union,
   unknown
-} from "./chunk-UXPKSCID.js";
+} from "./chunk-3YYTUJPJ.js";
 import {
   __require
-} from "./chunk-NSBPE2FW.js";
+} from "./chunk-5FUTL2UF.js";
 // ../../node_modules/.pnpm/@modelcontextprotocol+sdk@1.29.0_zod@4.4.3/node_modules/@modelcontextprotocol/sdk/dist/esm/types.js
 var RELATED_TASK_META_KEY = "io.modelcontextprotocol/related-task";
@@ -3022,10 +3022,17 @@ function GX(X2, Y) {
 // src/app-host.ts
 var PROXY_DOCUMENT = `<!doctype html><meta charset="utf-8"><style>html,body,iframe{border:0;margin:0;width:100%;height:100%;overflow:hidden}body{background:transparent}</style><script>
 let inner;
+const ready={jsonrpc:'2.0',method:'ui/notifications/sandbox-proxy-ready',params:{}};
+// Re-announce until the host acknowledges with the resource: when this document is hosted
+// cross-origin, the first announcement can arrive before the host's load handler is listening.
+const announce=setInterval(()=>parent.postMessage(ready,'*'),120);
+setTimeout(()=>clearInterval(announce),15000);
 addEventListener('message',(event)=>{
   if(event.source===parent){
     const message=event.data;
     if(message?.method==='ui/notifications/sandbox-resource-ready'){
+      clearInterval(announce);
+      if(inner)return;
       inner=document.createElement('iframe');
       inner.setAttribute('sandbox',message.params?.sandbox||'allow-scripts');
       inner.setAttribute('referrerpolicy','no-referrer');
@@ -3038,7 +3045,7 @@ addEventListener('message',(event)=>{
     parent.postMessage(event.data,'*');
   }
 });
-parent.postMessage({jsonrpc:'2.0',method:'ui/notifications/sandbox-proxy-ready',params:{}},'*');
+parent.postMessage(ready,'*');
 </script>`;
 function isAllowedAppLink(value, allowedDomains, baseUrl) {
   try {
@@ -3056,7 +3063,25 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
-function mountAssistantApp(detail, actions) {
+function createAssistantAppHostContext(theme) {
+  return {
+    theme,
+    displayMode: "inline",
+    availableDisplayModes: ["inline", "fullscreen"],
+    platform: "web"
+  };
+}
+var APP_RENDER_TIMEOUT_MS = 1e4;
+function resolveSandboxUrl(value) {
+  if (!value) return void 0;
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "https:" || parsed.protocol === "http:" ? parsed.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function mountAssistantApp(detail, actions, options = {}) {
   if (!detail.html) return void 0;
   const card = document.createElement("section");
   card.className = "noodle-app-card";
@@ -3071,8 +3096,19 @@ function mountAssistantApp(detail, actions) {
   frame.title = detail.title ?? detail.tool;
   frame.setAttribute("sandbox", "allow-scripts");
   frame.setAttribute("referrerpolicy", "no-referrer");
-  frame.srcdoc = PROXY_DOCUMENT;
+  const sandboxUrl = resolveSandboxUrl(options.sandboxUrl);
+  if (sandboxUrl) frame.src = sandboxUrl;
+  else frame.srcdoc = PROXY_DOCUMENT;
   card.append(frame);
+  let initialized = false;
+  const renderTimer = setTimeout(() => {
+    if (initialized || !frame.isConnected) return;
+    const note = document.createElement("div");
+    note.className = "noodle-app-fallback";
+    note.textContent = "This app view could not be displayed.";
+    frame.replaceWith(note);
+    options.onRenderFailure?.({ code: "view_render_timeout", retryable: false });
+  }, APP_RENDER_TIMEOUT_MS);
   frame.addEventListener(
     "load",
     () => {
@@ -3089,11 +3125,7 @@ function mountAssistantApp(detail, actions) {
           message: { text: {} }
         },
         {
-          hostContext: {
-            displayMode: "inline",
-            availableDisplayModes: ["inline", "fullscreen"],
-            platform: "web"
-          }
+          hostContext: createAssistantAppHostContext(actions.theme)
         }
       );
       bridge.onsandboxready = () => {
@@ -3138,13 +3170,18 @@ function mountAssistantApp(detail, actions) {
       bridge.onlistresources = async (params) => await actions.client.requestApp("resources/list", params ?? {});
       bridge.onreadresource = async (params) => await actions.client.requestApp("resources/read", params);
       bridge.oninitialized = () => {
+        initialized = true;
+        clearTimeout(renderTimer);
         void bridge.sendToolInput({ arguments: detail.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 } : {}
         });
       };
-      void bridge.connect(new E(target, target)).catch(() => card.remove());
+      void bridge.connect(new E(target, target)).catch(() => {
+        clearTimeout(renderTimer);
+        card.remove();
+      });
     },
     { once: true }
   );
@@ -3158,10 +3195,10 @@ var common = {
   baseFontSize: 15,
   messageFontSize: 15,
   lineHeight: 1.5,
-  panelRadius: 20,
-  cardRadius: 14,
-  inputRadius: 14,
-  buttonRadius: 12,
+  panelRadius: 24,
+  cardRadius: 16,
+  inputRadius: 999,
+  buttonRadius: 999,
   launcherRadius: 999,
   spacing: 8,
   backdropBlur: 18,
@@ -3268,7 +3305,7 @@ var DEFAULT_APPEARANCE = {
   },
   presentation: {
     panel: {
-      surface: "solid",
+      surface: "glass",
       elevation: "soft",
       border: "subtle"
     },
@@ -6575,8 +6612,7 @@ var AssistantElementEventController = class {
     if (name === "message_started") {
       this.#startStream("message");
       const body = this.#host.appendMessage("user", String(data.message ?? ""));
-      const messages = this.#host.messages();
-      if (body && messages) this.#revealLatestMessage(messages);
+      if (body) this.#host.revealLatest();
       this.#host.element.dispatchEvent(new CustomEvent("assistant-message-started"));
       return;
     }
@@ -6642,6 +6678,7 @@ var AssistantElementEventController = class {
     this.#clearStream();
     this.#completedTool = void 0;
     this.#host.element.removeAttribute("has-messages");
+    this.#host.revealLatest();
     this.#host.element.dispatchEvent(new CustomEvent("assistant-session-reset"));
   }
   #finishInteraction(id, action) {
@@ -6652,6 +6689,7 @@ var AssistantElementEventController = class {
         messages.append(
           createResultCard(this.#completedTool.result, labels.completed, labels.redacted)
         );
+        this.#host.revealLatest();
       }
     }
     this.#proposalCards.get(id)?.remove();
@@ -6689,7 +6727,7 @@ var AssistantElementEventController = class {
     });
     messages.append(card);
     this.#proposalCards.set(id, card);
-    this.#revealLatestMessage(messages);
+    this.#host.revealLatest();
     this.#host.element.dispatchEvent(
       new CustomEvent("assistant-tool-proposed", {
         detail: { id, tool, title, description, arguments: arguments_, reviewSchema }
@@ -6713,7 +6751,7 @@ var AssistantElementEventController = class {
     });
     messages.append(card);
     this.#proposalCards.set(id, card);
-    this.#revealLatestMessage(messages);
+    this.#host.revealLatest();
     this.#host.element.dispatchEvent(
       new CustomEvent("assistant-input-requested", {
         detail: { id, message, requestedSchema }
@@ -6726,6 +6764,7 @@ var AssistantElementEventController = class {
     this.#streamKind = kind;
   }
   #clearStream() {
+    this.#assistantBody?.parentElement?.classList.remove("streaming");
     this.#assistantBody = void 0;
     this.#assistantText = "";
     this.#streamKind = void 0;
@@ -6738,20 +6777,10 @@ var AssistantElementEventController = class {
     const body = this.#assistantBody ?? this.#host.appendMessage("assistant", "");
     this.#assistantBody = body;
     if (!body) return;
+    body.parentElement?.classList.add("streaming");
     body.innerHTML = html2;
-    const messages = this.#host.messages();
-    if (messages) this.#revealLatestMessage(messages);
-  }
-  #revealLatestMessage(messages) {
     this.#host.element.setAttribute("has-messages", "");
-    const distance = messages.scrollHeight - messages.scrollTop - messages.clientHeight;
-    const control = this.#host.element.shadowRoot?.querySelector(".new-messages");
-    if (distance <= 160) {
-      messages.scrollTop = messages.scrollHeight;
-      if (control) control.hidden = true;
-    } else if (control) {
-      control.hidden = false;
-    }
+    this.#host.revealLatest();
   }
 };
 function isRecord(value) {
@@ -6776,6 +6805,107 @@ function queryRequired(root, selector) {
   return element;
 }
+// src/element-scroll-controller.ts
+var AssistantElementScrollController = class {
+  #region;
+  #messages;
+  #control;
+  #mutationObserver;
+  #resizeObserver;
+  #syncScheduled = false;
+  #followingLatest = true;
+  #lastScrollTop = 0;
+  connect(elements) {
+    this.disconnect();
+    this.#region = elements.region;
+    this.#messages = elements.messages;
+    this.#control = elements.control;
+    this.#lastScrollTop = elements.messages.scrollTop;
+    this.#followingLatest = this.#distanceFromBottom() <= 30;
+    elements.messages.addEventListener("scroll", this.#handleScroll, { passive: true });
+    elements.control.addEventListener("click", this.#handleControlClick);
+    if (globalThis.MutationObserver) {
+      this.#mutationObserver = new MutationObserver(() => this.#scheduleContentSync());
+      this.#mutationObserver.observe(elements.messages, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style"]
+      });
+    }
+    if (globalThis.ResizeObserver) {
+      this.#resizeObserver = new ResizeObserver(() => this.#scheduleContentSync());
+      this.#resizeObserver.observe(elements.messages);
+    }
+    this.sync();
+  }
+  disconnect() {
+    this.#messages?.removeEventListener("scroll", this.#handleScroll);
+    this.#control?.removeEventListener("click", this.#handleControlClick);
+    this.#mutationObserver?.disconnect();
+    this.#resizeObserver?.disconnect();
+    this.#region?.removeAttribute("data-can-scroll-up");
+    this.#region?.removeAttribute("data-can-scroll-down");
+    this.#region = void 0;
+    this.#messages = void 0;
+    this.#control = void 0;
+    this.#mutationObserver = void 0;
+    this.#resizeObserver = void 0;
+    this.#syncScheduled = false;
+    this.#followingLatest = true;
+    this.#lastScrollTop = 0;
+  }
+  revealLatest() {
+    if (!this.#messages) return;
+    if (this.#followingLatest || this.#distanceFromBottom() <= 160) {
+      this.scrollToBottom();
+      return;
+    }
+    this.sync();
+  }
+  scrollToBottom() {
+    if (!this.#messages) return;
+    this.#followingLatest = true;
+    this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.sync();
+  }
+  sync() {
+    if (!this.#messages || !this.#region || !this.#control) return;
+    const distance = this.#distanceFromBottom();
+    this.#region.toggleAttribute("data-can-scroll-up", this.#messages.scrollTop > 20);
+    this.#region.toggleAttribute("data-can-scroll-down", distance > 20);
+    this.#control.hidden = distance <= 100;
+  }
+  #handleScroll = () => {
+    if (!this.#messages) return;
+    const distance = this.#distanceFromBottom();
+    const movedUp = this.#messages.scrollTop < this.#lastScrollTop - 5;
+    this.#lastScrollTop = this.#messages.scrollTop;
+    if (movedUp && distance > 50) this.#followingLatest = false;
+    if (distance < 30) this.#followingLatest = true;
+    this.sync();
+  };
+  #handleControlClick = () => {
+    this.scrollToBottom();
+  };
+  #distanceFromBottom() {
+    if (!this.#messages) return 0;
+    return this.#messages.scrollHeight - this.#messages.scrollTop - this.#messages.clientHeight;
+  }
+  #scheduleContentSync() {
+    if (this.#syncScheduled) return;
+    this.#syncScheduled = true;
+    queueMicrotask(() => {
+      this.#syncScheduled = false;
+      if (this.#followingLatest) {
+        this.scrollToBottom();
+      } else {
+        this.sync();
+      }
+    });
+  }
+};
 // src/element-styles.ts
 var ASSISTANT_ELEMENT_STYLES = `<style>
   *, *::before, *::after { box-sizing: border-box; }
@@ -6789,40 +6919,48 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .launcher { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ns-assistant-launcher-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: 999px; color: var(--ns-assistant-launcher-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-launcher, var(--ns-assistant-panel, var(--ns-assistant-default-panel))); box-shadow: 0 8px 28px rgba(0,0,0,.14); cursor: pointer; transition: transform .24s cubic-bezier(.25,1,.5,1), box-shadow .2s ease; }
   .launcher:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 26px rgba(0,0,0,.16); }
   .launcher img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }
-  .panel { display: none; flex-direction: column; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 40px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 40px)); overflow: hidden; color: var(--ns-assistant-panel-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border: 1px solid var(--ns-assistant-panel-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); transform-origin: bottom right; animation: halo-panel-in .28s cubic-bezier(.23,1,.32,1) both; }
+  .panel { display: none; flex-direction: column; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 40px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 40px)); overflow: hidden; color: var(--ns-assistant-panel-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border: 1px solid var(--ns-assistant-panel-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); transform-origin: bottom right; isolation: isolate; animation: halo-panel-in .28s cubic-bezier(.23,1,.32,1) both; }
   :host([open]) .panel { display: flex; }
   .panel { position: relative; }
   :host([open]) .launcher { display: none; }
-  header { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; min-height: 64px; padding: 12px 18px; color: var(--ns-assistant-header-text, inherit); background: var(--ns-assistant-header, transparent); border-bottom: 1px solid var(--ns-assistant-header-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); }
-  header strong { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
+  header { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; min-height: 64px; padding: 12px 18px; color: var(--ns-assistant-header-text, inherit); background: var(--ns-assistant-header, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ns-assistant-header-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))) 78%, transparent); }
+  header strong { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: 0; }
   .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
-  .close, .send { display: grid; place-items: center; border: 0; border-radius: 999px; cursor: pointer; }
-  .close { width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; font-size: 24px; font-weight: 300; line-height: 1; transition: background .15s ease, color .15s ease; }
+  .close, .send { display: grid; place-items: center; border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; }
+  .close { position: relative; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; transition: background .15s ease, color .15s ease, transform .15s ease; }
+  .close::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; }
   .close:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); }
+  .close:active { transform: scale(.96); }
   .welcome { flex: 0 0 auto; padding: 30px 22px 18px; }
-  .welcome h2 { margin: 0; font-size: 1.42em; line-height: 1.25; letter-spacing: -.025em; }
+  .welcome h2 { margin: 0; font-size: 1.35em; line-height: 1.25; letter-spacing: 0; }
   .welcome p { max-width: 42ch; margin: 7px 0 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
   :host([has-messages]) .welcome, :host([has-messages]) .suggested-prompts { display: none; }
   .suggested-prompts { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }
   .suggested-prompts:empty { display: none; }
-  .suggested-prompts button { min-height: 44px; padding: 9px 14px; color: var(--ns-assistant-suggestion-text, var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text))); background: var(--ns-assistant-suggestion, transparent); border: 1px solid var(--ns-assistant-suggestion-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: 12px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
+  .suggested-prompts button { min-height: 44px; padding: 8px 14px; color: var(--ns-assistant-suggestion-text, var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text))); background: var(--ns-assistant-suggestion, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 58%, transparent)); border: 1px solid var(--ns-assistant-suggestion-border, color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 82%, transparent)); border-radius: 999px; cursor: pointer; font-size: .86em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
   .suggested-prompts button:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); transform: translateY(-1px); }
-  .messages { flex: 1 1 auto; min-height: 0; padding: 18px 20px; overflow-y: auto; background: var(--ns-assistant-canvas, transparent); overscroll-behavior: contain; scroll-behavior: smooth; }
+  .messages-region { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
+  .messages-region::before, .messages-region::after { content: ''; position: absolute; right: 0; left: 0; z-index: 1; height: 18px; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
+  .messages-region::before { top: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--ns-assistant-panel, var(--ns-assistant-default-panel)) 92%, transparent), transparent); }
+  .messages-region::after { bottom: 0; background: linear-gradient(to top, color-mix(in srgb, var(--ns-assistant-panel, var(--ns-assistant-default-panel)) 92%, transparent), transparent); }
+  .messages-region[data-can-scroll-up]::before, .messages-region[data-can-scroll-down]::after { opacity: 1; }
+  .messages { flex: 1 1 auto; width: 100%; min-height: 0; padding: 18px 20px 24px; overflow-y: auto; background: var(--ns-assistant-canvas, transparent); overscroll-behavior: contain; scroll-behavior: smooth; }
   .messages::-webkit-scrollbar { width: 6px; }
   .messages::-webkit-scrollbar-thumb { background: var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; }
   .message { width: fit-content; max-width: 88%; margin: 0 0 14px; padding: 0; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: transparent; white-space: pre-wrap; animation: halo-message-in .2s ease both; }
   .message > span, .message > .markdown { overflow-wrap: anywhere; }
   .message .avatar { float: left; width: 24px; height: 24px; margin-right: 9px; border-radius: 50%; object-fit: cover; }
   .message time { display: block; margin-top: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .75em; line-height: 1.2; }
-  .message-copy { min-width: 44px; min-height: 32px; margin-top: 6px; padding: 4px 8px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: .78em; opacity: 0; transition: opacity .15s ease, background .15s ease; }
+  .message-copy { min-width: 44px; min-height: 32px; margin-top: 6px; padding: 4px 10px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; font-size: .78em; opacity: 0; transition: opacity .15s ease, background .15s ease; }
   .message:hover .message-copy, .message:focus-within .message-copy { opacity: 1; }
   .conversation-status { margin: 4px auto 14px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .82em; text-align: center; }
-  .conversation-error { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0 16px; padding: 12px 14px; color: var(--ns-assistant-danger, var(--ns-assistant-default-danger)); border: 1px solid color-mix(in srgb, var(--ns-assistant-danger, var(--ns-assistant-default-danger)) 28%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ns-assistant-danger, var(--ns-assistant-default-danger)) 7%, transparent); }
+  .conversation-error { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0 16px; padding: 12px 14px; color: var(--ns-assistant-danger, var(--ns-assistant-default-danger)); border: 1px solid color-mix(in srgb, var(--ns-assistant-danger, var(--ns-assistant-default-danger)) 28%, transparent); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: color-mix(in srgb, var(--ns-assistant-danger, var(--ns-assistant-default-danger)) 7%, transparent); }
   .conversation-error p { margin: 0; }
-  .conversation-error button { min-height: 44px; padding: 8px 12px; color: var(--ns-assistant-secondary-button-text, inherit); background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: 10px; cursor: pointer; font-weight: 600; }
-  .new-messages { position: absolute; left: 50%; bottom: 82px; z-index: 1; min-height: 36px; padding: 7px 12px; color: var(--ns-assistant-secondary-button-text, inherit); background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: 999px; box-shadow: 0 4px 18px rgba(0,0,0,.12); transform: translateX(-50%); cursor: pointer; }
-  .message.assistant { color: var(--ns-assistant-assistant-message-text, inherit); background: var(--ns-assistant-assistant-message, transparent); border: 1px solid var(--ns-assistant-assistant-message-border, transparent); }
-  .message.user { display: grid; justify-items: start; gap: 3px; margin-left: auto; padding: 10px 16px 8px; color: var(--ns-assistant-user-message-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-user-message, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); border: 1px solid var(--ns-assistant-user-message-border, transparent); font-size: .94em; }
+  .conversation-error button { min-height: 44px; padding: 8px 14px; color: var(--ns-assistant-secondary-button-text, inherit); background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; font-weight: 600; }
+  .new-messages { position: absolute; left: 50%; bottom: 14px; z-index: 2; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-secondary-button-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-secondary-button, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 92%, transparent)); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateX(-50%); cursor: pointer; }
+  .new-messages::before { content: ''; display: block; width: 18px; height: 18px; margin: auto; 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 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='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 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .message.assistant { max-width: 100%; color: var(--ns-assistant-assistant-message-text, inherit); background: var(--ns-assistant-assistant-message, transparent); border: 1px solid var(--ns-assistant-assistant-message-border, transparent); }
+  .message.user { display: grid; max-width: 85%; justify-items: start; gap: 3px; margin-left: auto; padding: 10px 16px 8px; color: var(--ns-assistant-user-message-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-user-message, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); border: 1px solid var(--ns-assistant-user-message-border, transparent); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); font-size: .94em; }
   .message.user time { margin-top: 0; }
   .markdown { white-space: normal; }
   .markdown p { margin: 0 0 8px; }
@@ -6837,13 +6975,14 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .markdown ul, .markdown ol { margin: 8px 0; padding-left: 22px; }
   .markdown li { margin: 3px 0; }
   .markdown blockquote { margin: 10px 0; padding-left: 12px; border-left: 3px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
-  .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 14px 0 7px; line-height: 1.25; letter-spacing: -.015em; }
+  .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 14px 0 7px; line-height: 1.25; letter-spacing: 0; }
   .markdown h1:first-child, .markdown h2:first-child, .markdown h3:first-child { margin-top: 0; }
   .markdown h1 { font-size: 1.3em; } .markdown h2 { font-size: 1.18em; } .markdown h3 { font-size: 1.08em; }
+  .message.assistant.streaming .markdown::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; border-radius: 999px; background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); vertical-align: -.14em; animation: halo-caret-blink 1s steps(2, start) infinite; }
   .message.thinking > span { display: inline-block; color: transparent; background: linear-gradient(90deg, var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)) 25%, var(--ns-assistant-text, var(--ns-assistant-default-text)) 50%, var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)) 75%); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; font-style: italic; font-weight: 500; animation: halo-shimmer 2s linear infinite; }
   .tool-proposal { display: grid; gap: 12px; align-items: start; margin: 8px 0 16px; padding: 18px; color: var(--ns-assistant-confirmation-text, inherit); border: 1px solid var(--ns-assistant-confirmation-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-card-radius, 14px); background: var(--ns-assistant-confirmation, var(--ns-assistant-input, var(--ns-assistant-default-input))); animation: halo-message-in .2s ease both; }
   .proposal-eyebrow { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
-  .tool-proposal h3 { margin: -4px 0 0; font-size: 1.08em; line-height: 1.3; letter-spacing: -.01em; }
+  .tool-proposal h3 { margin: -4px 0 0; font-size: 1.08em; line-height: 1.3; letter-spacing: 0; }
   .proposal-description { margin: -4px 0 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
   .proposal-arguments { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 8px 14px; margin: 0; padding: 12px 0; border-block: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); font-size: .9em; }
   .proposal-arguments .proposal-arguments { grid-column: 1 / -1; padding: 4px 0 0; border: 0; }
@@ -6854,7 +6993,7 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .proposal-details summary { min-height: 36px; padding: 8px 0; cursor: pointer; font-weight: 600; }
   .proposal-details .proposal-arguments { margin-top: 4px; }
   .proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
-  .tool-proposal button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--ns-assistant-secondary-button-border, transparent); border-radius: var(--ns-assistant-button-radius, 12px); color: var(--ns-assistant-secondary-button-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); cursor: pointer; font-weight: 600; }
+  .tool-proposal button { min-height: 44px; padding: 9px 16px; border: 1px solid var(--ns-assistant-secondary-button-border, transparent); border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); color: var(--ns-assistant-secondary-button-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); cursor: pointer; font-weight: 600; }
   .tool-proposal .proposal-accept { color: var(--ns-assistant-primary-button-text, var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text))); background: var(--ns-assistant-primary-button, var(--ns-assistant-accent, var(--ns-assistant-default-accent))); border-color: var(--ns-assistant-primary-button-border, transparent); }
   .tool-proposal button:disabled { opacity: .55; cursor: not-allowed; }
   .tool-proposal button { min-height: 45px; }
@@ -6863,25 +7002,26 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request form { display: grid; gap: 10px; align-items: stretch; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
   .input-request form:focus-within { box-shadow: none; }
   .input-request label { display: grid; gap: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .9em; }
-  .input-request input, .input-request select { width: 100%; padding: 8px 10px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); outline: 0; font: inherit; }
-  .input-request select[multiple] { min-height: 88px; }
-  .input-request input[type="checkbox"] { width: auto; justify-self: start; accent-color: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .input-request input, .input-request select { width: 100%; min-height: 44px; padding: 8px 14px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); outline: 0; font: inherit; }
+  .input-request select[multiple] { min-height: 88px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); }
+  .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; }
-  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, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-input-radius, 14px); background: var(--ns-assistant-composer, var(--ns-assistant-input, var(--ns-assistant-default-input))); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s ease, box-shadow .15s ease; }
+  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; }
   textarea::placeholder { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
   textarea:focus, textarea:focus-visible { outline: none; box-shadow: none; }
   button:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus)); outline-offset: 2px; }
-  .send { position: relative; display: block; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; overflow: hidden; color: transparent; background: var(--ns-assistant-primary-button, var(--ns-assistant-accent, var(--ns-assistant-default-accent))); font-size: 0; line-height: 0; transition: transform .15s ease, background .15s ease; }
+  .send { position: relative; display: block; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; overflow: hidden; color: transparent; border-radius: 999px; background: var(--ns-assistant-primary-button, var(--ns-assistant-accent, var(--ns-assistant-default-accent))); font-size: 0; line-height: 0; transition: transform .15s ease, background .15s ease; }
   .send::before { content: ''; position: absolute; top: 50%; left: 50%; width: 17px; height: 17px; background: var(--ns-assistant-primary-button-text, var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text))); transform: translate(-50%, -50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='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='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
-  .send:hover { transform: scale(1.05); background: var(--ns-assistant-hover, var(--ns-assistant-default-hover)); }
+  .send:hover { transform: scale(1.05); background: var(--ns-assistant-hover, color-mix(in srgb, var(--ns-assistant-primary-button, var(--ns-assistant-accent, var(--ns-assistant-default-accent))) 88%, var(--ns-assistant-primary-button-text, var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text))) 12%)); }
   :host([busy]) .send::before { width: 13px; height: 13px; border-radius: 3px; -webkit-mask: none; mask: none; }
   .send:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
   .legal { display: flex; gap: 12px; justify-content: center; padding: 0 12px 9px; font-size: .75em; }
@@ -6891,9 +7031,10 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   @keyframes halo-panel-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
   @keyframes halo-message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
   @keyframes halo-shimmer { from { background-position: 100% center; } to { background-position: 0 center; } }
+  @keyframes halo-caret-blink { 50% { opacity: 0; } }
   :host([data-density="compact"]) .welcome { padding: 20px 18px 12px; }
-  @media (max-width: 640px) { :host([mobile-fullscreen][open]) { inset: 0; } :host([mobile-fullscreen][open]) .panel { width: 100vw; min-height: 100vh; max-height: 100vh; border: 0; border-radius: 0; } }
-  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .messages { scroll-behavior: auto; } }
+  @media (max-width: 640px) { :host([mobile-fullscreen][open]) { inset: 0; } :host([mobile-fullscreen][open]) .panel { width: 100vw; min-height: 100vh; max-height: 100vh; border: 0; border-radius: 0; } :host([mobile-fullscreen]) header { padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); } :host([mobile-fullscreen]) form { margin-right: max(16px, env(safe-area-inset-right)); margin-bottom: max(16px, env(safe-area-inset-bottom)); margin-left: max(16px, env(safe-area-inset-left)); } :host([mobile-fullscreen]) .legal, :host([mobile-fullscreen]) ::slotted([slot="conversation-footer"]) { padding-bottom: max(10px, env(safe-area-inset-bottom)); } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .messages { scroll-behavior: auto; } .message.assistant.streaming .markdown::after { animation: none; } }
   @media (forced-colors: active) { .message.thinking > span { color: CanvasText; background: none; } }
   @media (hover: none) { .message-copy { opacity: 1; } }
   @media (max-width: 560px) { :host([data-mode="floating"]) { inset: auto 12px 12px; } :host([open]) .panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } }
@@ -7212,6 +7353,8 @@ var presentationStyles = `<style>
     border: var(--ns-assistant-panel-border, var(--ns-assistant-presentation-border));
     border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-presentation-panel-radius, var(--ns-assistant-default-panel-radius)));
     box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-presentation-shadow));
+    backdrop-filter: blur(var(--ns-assistant-backdrop-blur, var(--ns-assistant-default-backdrop-blur)));
+    -webkit-backdrop-filter: blur(var(--ns-assistant-backdrop-blur, var(--ns-assistant-default-backdrop-blur)));
   }
   :host([data-panel-surface="solid"]) .panel {
     backdrop-filter: none;
@@ -7405,6 +7548,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #hostAppearance;
   #appearanceWarningKeys = /* @__PURE__ */ new Set();
   #appearanceStyleSnapshot = /* @__PURE__ */ new Map();
+  #scroll = new AssistantElementScrollController();
   sessionEndpoint = "";
   get appearance() {
     return this.#hostAppearance;
@@ -7432,19 +7576,29 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     labels: () => this.#appearance.labels,
     respond: (id, response) => this.respond(id, response),
     dispatchError: (detail) => this.#dispatchError(detail),
+    revealLatest: () => this.#revealLatest(),
     renderView: (detail) => {
       const messages = this.#messages;
       const client = this.#client;
       if (!messages || !client) return;
-      const view = mountAssistantApp(detail, {
-        client,
-        sendMessage: (message) => this.sendMessage(message),
-        updateModelContext: (update) => this.updateModelContext(update)
-      });
+      const sandboxUrl = client.appSandboxUrl?.();
+      const view = mountAssistantApp(
+        detail,
+        {
+          client,
+          sendMessage: (message) => this.sendMessage(message),
+          updateModelContext: (update) => this.updateModelContext(update),
+          theme: this.#resolvedMode()
+        },
+        {
+          ...sandboxUrl === void 0 ? {} : { sandboxUrl },
+          onRenderFailure: (failure) => this.#dispatchError(failure)
+        }
+      );
       if (!view) return;
       messages.append(view);
       this.setAttribute("has-messages", "");
-      messages.scrollTop = messages.scrollHeight;
+      this.#revealLatest();
     }
   });
   connectedCallback() {
@@ -7467,6 +7621,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#clientEndpoint = "";
     this.#unsubscribeClient = void 0;
     this.#sessionBootstrap = void 0;
+    this.#scroll.disconnect();
     this.#setBusy(false);
     this.#media?.removeEventListener("change", this.#handleSystemTheme);
     document.removeEventListener("keydown", this.#handleDocumentKeydown);
@@ -7749,18 +7904,10 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#messages.append(status);
   }
   #scrollToBottom() {
-    if (this.#messages) this.#messages.scrollTop = this.#messages.scrollHeight;
+    this.#scroll.scrollToBottom();
   }
   #revealLatest() {
-    if (!this.#messages) return;
-    const distance = this.#messages.scrollHeight - this.#messages.scrollTop - this.#messages.clientHeight;
-    const control = this.shadowRoot?.querySelector(".new-messages");
-    if (distance <= 160) {
-      this.#scrollToBottom();
-      if (control) control.hidden = true;
-    } else if (control) {
-      control.hidden = false;
-    }
+    this.#scroll.revealLatest();
   }
   #dispatchError(detail) {
     this.dispatchEvent(new CustomEvent("assistant-error", { detail }));
@@ -7877,6 +8024,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   #render() {
     if (!this.shadowRoot) return;
+    this.#scroll.disconnect();
     const conversation = this.#messages ? [...this.#messages.childNodes] : [];
     const appearance = this.#appearance;
     this.setAttribute("role", "complementary");
@@ -7890,11 +8038,13 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.shadowRoot.innerHTML = `${ASSISTANT_ELEMENT_STYLES}${presentationStyles}
       <button class="launcher" type="button" aria-label="${escapeAttribute(appearance.labels.open)}" aria-controls="assistant-panel" aria-expanded="${String(this.hasAttribute("open"))}"><slot name="launcher-icon"></slot><span class="visually-hidden" data-session-status aria-live="polite" hidden></span></button>
       <section class="panel" id="assistant-panel" role="dialog" aria-label="${escapeAttribute(appearance.brand.name)}">
-        <header><slot name="header-leading"></slot><img class="brand-logo" alt=""><strong></strong><slot name="header-actions"></slot><button class="close" type="button" aria-label="${escapeAttribute(appearance.labels.close)}">\xD7</button></header>
+        <header><slot name="header-leading"></slot><img class="brand-logo" alt=""><strong></strong><slot name="header-actions"></slot><button class="close" type="button" aria-label="${escapeAttribute(appearance.labels.close)}"></button></header>
         <div class="welcome"><slot name="empty-state"></slot></div>
         <div class="suggested-prompts"></div>
-        <div class="messages" aria-live="polite"></div>
-        <button class="new-messages" type="button" hidden></button>
+        <div class="messages-region">
+          <div class="messages" aria-live="polite"></div>
+          <button class="new-messages" type="button" aria-label="${escapeAttribute(appearance.labels.newMessages)}" hidden></button>
+        </div>
         <form><slot name="composer-leading"></slot><textarea rows="1"></textarea><button class="send" type="submit"></button><slot name="composer-trailing"></slot></form>
         <nav class="legal" aria-label="Legal"></nav>
         <slot name="conversation-footer"></slot>
@@ -7956,15 +8106,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       form.requestSubmit();
     });
     const newMessages = queryRequired(this.shadowRoot, ".new-messages");
-    newMessages.textContent = appearance.labels.newMessages;
-    newMessages.addEventListener("click", () => {
-      this.#scrollToBottom();
-      newMessages.hidden = true;
-    });
-    this.#messages?.addEventListener("scroll", () => {
-      if (this.#messages && this.#messages.scrollHeight - this.#messages.scrollTop - this.#messages.clientHeight < 48) {
-        newMessages.hidden = true;
-      }
+    newMessages.setAttribute("aria-label", appearance.labels.newMessages);
+    this.#scroll.connect({
+      region: queryRequired(this.shadowRoot, ".messages-region"),
+      messages: queryRequired(this.shadowRoot, ".messages"),
+      control: newMessages
     });
     this.#applyTheme();
   }
@@ -7999,4 +8145,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-ZKXOX67J.js.map
+//# sourceMappingURL=chunk-JMBUJSFP.js.map