@noodleseed/assistant 1.7.0 → 1.9.0

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

@@ -2,7 +2,7 @@ import {
   AssistantClientError,
   copyAssistantModelContext,
   createAssistantClient
-} from "./chunk-7E5HINN4.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";
@@ -3063,7 +3063,17 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
+function createAssistantAppHostContext(theme) {
+  return {
+    theme,
+    displayMode: "inline",
+    availableDisplayModes: ["inline", "fullscreen"],
+    platform: "web"
+  };
+}
 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 {
@@ -3092,7 +3102,11 @@ function mountAssistantApp(detail, actions, options = {}) {
   if (sandboxUrl) frame.src = sandboxUrl;
   else frame.srcdoc = PROXY_DOCUMENT;
   card.append(frame);
+  let mountedBridge;
+  let mountedTransport;
+  let destroyed = false;
   let initialized = false;
+  let destroyPromise;
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -3104,6 +3118,7 @@ function mountAssistantApp(detail, actions, options = {}) {
   frame.addEventListener(
     "load",
     () => {
+      if (destroyed) return;
       const target = frame.contentWindow;
       if (!target) return;
       const bridge = new DX(
@@ -3117,26 +3132,27 @@ function mountAssistantApp(detail, actions, options = {}) {
           message: { text: {} }
         },
         {
-          hostContext: {
-            displayMode: "inline",
-            availableDisplayModes: ["inline", "fullscreen"],
-            platform: "web"
-          }
+          hostContext: createAssistantAppHostContext(actions.theme)
         }
       );
+      mountedBridge = bridge;
       bridge.onsandboxready = () => {
+        if (destroyed) return;
+        const current = options.getDetail?.() ?? detail;
         void bridge.sendSandboxResourceReady({
-          html: detail.html,
+          html: current.html,
           sandbox: "allow-scripts allow-forms",
-          ...detail.resourceMeta ?? {}
+          ...current.resourceMeta ?? {}
         });
       };
       bridge.onsizechange = ({ height }) => {
+        if (destroyed) return;
         if (typeof height === "number" && Number.isFinite(height)) {
           frame.style.height = `${Math.min(1200, Math.max(120, Math.ceil(height)))}px`;
         }
       };
       bridge.onmessage = async ({ content }) => {
+        if (destroyed) return {};
         const text2 = content.flatMap(
           (part) => part.type === "text" && typeof part.text === "string" ? [part.text] : []
         ).join("\n").trim();
@@ -3144,13 +3160,16 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onupdatemodelcontext = async (update) => {
+        if (destroyed) return {};
         actions.updateModelContext(update);
         return {};
       };
       bridge.onopenlink = async ({ url }) => {
+        if (destroyed) return { isError: true };
+        const current = options.getDetail?.() ?? detail;
         const allowed = isAllowedAppLink(
           url,
-          detail.allowedOpenDomains ?? [],
+          current.allowedOpenDomains ?? [],
           globalThis.location?.href ?? "https://invalid.example"
         );
         if (!allowed) return { isError: true };
@@ -3159,30 +3178,74 @@ function mountAssistantApp(detail, actions, options = {}) {
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
         const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
+        if (destroyed) return { mode: accepted };
         card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
         return { mode: accepted };
       };
-      bridge.oncalltool = async (params) => await actions.client.requestApp("tools/call", params);
-      bridge.onlistresources = async (params) => await actions.client.requestApp("resources/list", params ?? {});
-      bridge.onreadresource = async (params) => await actions.client.requestApp("resources/read", params);
+      bridge.oncalltool = async (params) => {
+        if (destroyed) {
+          return {
+            content: [{ type: "text", text: "App view is closing." }],
+            isError: true
+          };
+        }
+        return await actions.client.requestApp("tools/call", params);
+      };
+      bridge.onlistresources = async (params) => {
+        if (destroyed) {
+          return { resources: [] };
+        }
+        return await actions.client.requestApp("resources/list", params ?? {});
+      };
+      bridge.onreadresource = async (params) => {
+        if (destroyed) {
+          return { contents: [] };
+        }
+        return await actions.client.requestApp("resources/read", params);
+      };
       bridge.oninitialized = () => {
+        if (destroyed) return;
         initialized = true;
         clearTimeout(renderTimer);
-        void bridge.sendToolInput({ arguments: detail.arguments ?? {} });
+        const current = options.getDetail?.() ?? detail;
+        void bridge.sendToolInput({ arguments: current.arguments ?? {} });
         void bridge.sendToolResult({
-          content: [{ type: "text", text: JSON.stringify(detail.result) }],
-          ...typeof detail.result === "object" && detail.result !== null && !Array.isArray(detail.result) ? { structuredContent: detail.result } : {}
+          content: [{ type: "text", text: JSON.stringify(current.result) }],
+          ...typeof current.result === "object" && current.result !== null && !Array.isArray(current.result) ? { structuredContent: current.result } : {}
         });
       };
-      void bridge.connect(new E(target, target)).catch(() => {
-        clearTimeout(renderTimer);
-        card.remove();
+      const transport = new E(target, target);
+      mountedTransport = transport;
+      void bridge.connect(transport).catch(() => {
+        void destroy();
       });
     },
     { once: true }
   );
+  const destroy = () => {
+    if (destroyPromise) return destroyPromise;
+    destroyed = true;
+    clearTimeout(renderTimer);
+    destroyPromise = (async () => {
+      try {
+        if (initialized) {
+          await mountedBridge?.teardownResource({}, { timeout: APP_TEARDOWN_TIMEOUT_MS });
+        }
+      } catch {
+      }
+      await mountedTransport?.close().catch(() => {
+      });
+      card.remove();
+      mountedApps.delete(card);
+    })();
+    return destroyPromise;
+  };
+  mountedApps.set(card, { destroy });
   return card;
 }
+function unmountAssistantApp(card) {
+  return mountedApps.get(card)?.destroy() ?? Promise.resolve();
+}
 
 // src/appearance.ts
 var common = {
@@ -3191,10 +3254,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,
@@ -3301,7 +3364,7 @@ var DEFAULT_APPEARANCE = {
   },
   presentation: {
     panel: {
-      surface: "solid",
+      surface: "glass",
       elevation: "soft",
       border: "subtle"
     },
@@ -6608,8 +6671,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;
     }
@@ -6675,6 +6737,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) {
@@ -6685,6 +6748,7 @@ var AssistantElementEventController = class {
         messages.append(
           createResultCard(this.#completedTool.result, labels.completed, labels.redacted)
         );
+        this.#host.revealLatest();
       }
     }
     this.#proposalCards.get(id)?.remove();
@@ -6722,7 +6786,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 }
@@ -6746,7 +6810,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 }
@@ -6759,6 +6823,7 @@ var AssistantElementEventController = class {
     this.#streamKind = kind;
   }
   #clearStream() {
+    this.#assistantBody?.parentElement?.classList.remove("streaming");
     this.#assistantBody = void 0;
     this.#assistantText = "";
     this.#streamKind = void 0;
@@ -6771,20 +6836,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) {
@@ -6809,6 +6864,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; }
@@ -6822,40 +6978,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; }
@@ -6870,13 +7034,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; }
@@ -6887,7 +7052,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; }
@@ -6896,9 +7061,9 @@ 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))); }
@@ -6907,15 +7072,15 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .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; }
@@ -6925,9 +7090,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); } }
@@ -7246,6 +7412,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;
@@ -7439,6 +7607,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #hostAppearance;
   #appearanceWarningKeys = /* @__PURE__ */ new Set();
   #appearanceStyleSnapshot = /* @__PURE__ */ new Map();
+  #scroll = new AssistantElementScrollController();
   sessionEndpoint = "";
   get appearance() {
     return this.#hostAppearance;
@@ -7466,6 +7635,7 @@ 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;
@@ -7476,7 +7646,8 @@ var NoodleAssistantElement = class extends HTMLElementBase {
         {
           client,
           sendMessage: (message) => this.sendMessage(message),
-          updateModelContext: (update) => this.updateModelContext(update)
+          updateModelContext: (update) => this.updateModelContext(update),
+          theme: this.#resolvedMode()
         },
         {
           ...sandboxUrl === void 0 ? {} : { sandboxUrl },
@@ -7486,7 +7657,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       if (!view) return;
       messages.append(view);
       this.setAttribute("has-messages", "");
-      messages.scrollTop = messages.scrollHeight;
+      this.#revealLatest();
     }
   });
   connectedCallback() {
@@ -7509,6 +7680,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);
@@ -7791,18 +7963,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 }));
@@ -7919,6 +8083,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");
@@ -7932,11 +8097,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>
@@ -7998,15 +8165,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();
   }
@@ -8032,6 +8195,8 @@ function registerNoodleAssistant() {
 }
 
 export {
+  mountAssistantApp,
+  unmountAssistantApp,
   ASSISTANT_TAG_NAME,
   NoodleAssistantElement,
   registerNoodleAssistant
@@ -8041,4 +8206,4 @@ export {
 dompurify/dist/purify.es.mjs:
   (*! @license DOMPurify 3.4.11 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.11/LICENSE *)
 */
-//# sourceMappingURL=chunk-35A7REQX.js.map
+//# sourceMappingURL=chunk-4B3XXGRP.js.map