@noodleseed/assistant 1.4.0 → 1.6.0

package/dist/react.cjs

@@ -18330,12 +18330,12 @@ var common = {
   baseFontSize: 15,
   messageFontSize: 15,
   lineHeight: 1.5,
-  panelRadius: 24,
-  cardRadius: 16,
-  inputRadius: 999,
-  buttonRadius: 999,
+  panelRadius: 20,
+  cardRadius: 14,
+  inputRadius: 14,
+  buttonRadius: 12,
   launcherRadius: 999,
-  spacing: 12,
+  spacing: 8,
   backdropBlur: 18,
   motionScale: 1
 };
@@ -18393,7 +18393,7 @@ var DEFAULT_APPEARANCE = {
   layout: {
     mode: "floating",
     position: "bottom-right",
-    panelWidth: 560,
+    panelWidth: 520,
     panelMinHeight: 540,
     panelMaxHeight: 820,
     edgeOffset: 20,
@@ -18420,7 +18420,16 @@ var DEFAULT_APPEARANCE = {
     close: "Close assistant",
     open: "Open assistant",
     confirm: "Confirm",
+    decline: "Don't proceed",
     cancel: "Cancel",
+    confirmationHeading: "Review and confirm",
+    additionalDetails: "Additional details",
+    redacted: "Hidden for security",
+    completed: "Completed",
+    stopped: "Stopped",
+    copy: "Copy",
+    newMessages: "New messages",
+    reconnect: "Reconnect",
     retry: "Try again",
     unavailable: "The assistant is temporarily unavailable.",
     sessionExpired: "Your assistant session expired. Reopen it to continue.",
@@ -18431,7 +18440,7 @@ var DEFAULT_APPEARANCE = {
   },
   presentation: {
     panel: {
-      surface: "glass",
+      surface: "solid",
       elevation: "soft",
       border: "subtle"
     },
@@ -18602,7 +18611,7 @@ function toAssistantClientEvent(event) {
       }
       break;
     case "tool_proposed":
-      if (hasString(value, "id") && hasString(value, "tool") && hasOptionalJson(value.arguments) && hasOptionalString(value.expiresAt) && (value.requiresConfirmation === void 0 || value.requiresConfirmation === true) && hasOptionalTurnId(value)) {
+      if (hasString(value, "id") && hasString(value, "tool") && hasOptionalString(value.title) && hasOptionalString(value.description) && hasOptionalJson(value.arguments) && (value.reviewSchema === void 0 || isRecord(value.reviewSchema)) && hasOptionalString(value.expiresAt) && (value.requiresConfirmation === void 0 || value.requiresConfirmation === true) && hasOptionalTurnId(value)) {
         return event;
       }
       break;
@@ -19581,22 +19590,54 @@ function record2(value) {
 function createInteractionCard(options) {
   const card = document.createElement("section");
   card.className = "tool-proposal";
-  const label = document.createElement("strong");
-  label.textContent = options.tool;
-  card.append(label);
+  card.setAttribute("aria-label", options.labels.heading);
+  const eyebrow = document.createElement("span");
+  eyebrow.className = "proposal-eyebrow";
+  eyebrow.textContent = options.labels.heading;
+  const title = document.createElement("h3");
+  title.textContent = options.title ?? humanizeArgumentName(options.tool);
+  card.append(eyebrow, title);
+  if (options.description) {
+    const description = document.createElement("p");
+    description.className = "proposal-description";
+    description.textContent = options.description;
+    card.append(description);
+  }
   if (options.arguments && Object.keys(options.arguments).length > 0) {
-    card.append(createArgumentList(options.arguments));
+    const { action, ...businessArguments } = options.arguments;
+    if (Object.keys(businessArguments).length > 0) {
+      card.append(createArgumentList(businessArguments, options.reviewSchema, options.labels));
+    }
+    if (action !== void 0) {
+      const technical = document.createElement("details");
+      technical.className = "proposal-details";
+      const summary = document.createElement("summary");
+      summary.textContent = options.labels.details;
+      const properties = record3(options.reviewSchema?.properties);
+      technical.append(summary);
+      const actionObject = record3(action);
+      if (actionObject) {
+        technical.append(
+          createArgumentList(actionObject, record3(properties?.action), options.labels)
+        );
+      } else {
+        const value = document.createElement("div");
+        appendValue(value, action, record3(properties?.action), options.labels);
+        technical.append(value);
+      }
+      card.append(technical);
+    }
   }
   const actions = document.createElement("div");
   actions.className = "proposal-actions";
   const buttons = [];
   for (const [labelText, action] of [
     [options.labels.accept, "accept"],
-    [options.labels.decline, "decline"],
-    [options.labels.cancel, "cancel"]
+    [options.labels.decline, "decline"]
   ]) {
     const button2 = document.createElement("button");
     button2.type = "button";
+    button2.className = `proposal-${action}`;
     button2.textContent = labelText;
     buttons.push(button2);
     button2.addEventListener("click", () => {
@@ -19610,27 +19651,98 @@ function createInteractionCard(options) {
   card.append(actions);
   return card;
 }
-function createArgumentList(arguments_) {
-  const details = document.createElement("dl");
-  details.className = "proposal-arguments";
+function createResultCard(result, label, redactedLabel) {
+  const card = document.createElement("section");
+  card.className = "tool-result";
+  const heading = document.createElement("strong");
+  heading.textContent = label;
+  card.append(heading);
+  const body = document.createElement("div");
+  const labels = {
+    heading: label,
+    accept: "",
+    decline: "",
+    details: "",
+    redacted: redactedLabel
+  };
+  appendValue(body, result, void 0, labels);
+  card.append(body);
+  return card;
+}
+function createArgumentList(arguments_, schema, labels) {
+  const list = document.createElement("dl");
+  list.className = "proposal-arguments";
+  const properties = record3(schema?.properties);
   for (const [name, value] of Object.entries(arguments_)) {
+    const propertySchema = record3(properties?.[name]);
     const term = document.createElement("dt");
-    term.textContent = humanizeArgumentName(name);
+    term.textContent = string4(propertySchema?.title) ?? humanizeArgumentName(name);
+    const help = string4(propertySchema?.description);
+    if (help) {
+      const description2 = document.createElement("small");
+      description2.textContent = help;
+      term.append(description2);
+    }
     const description = document.createElement("dd");
-    description.textContent = formatArgumentValue(value);
-    details.append(term, description);
+    appendValue(description, value, propertySchema, labels);
+    list.append(term, description);
+  }
+  return list;
+}
+function appendValue(parent, value, schema, labels) {
+  if (value === "[REDACTED]") {
+    const hidden = document.createElement("span");
+    hidden.className = "proposal-redacted";
+    hidden.textContent = labels.redacted;
+    parent.append(hidden);
+    return;
+  }
+  if (Array.isArray(value)) {
+    const list = document.createElement("ul");
+    const itemSchema = record3(schema?.items);
+    for (const item of value) {
+      const entry = document.createElement("li");
+      appendValue(entry, item, itemSchema, labels);
+      list.append(entry);
+    }
+    parent.append(list);
+    return;
+  }
+  const objectValue = record3(value);
+  if (objectValue) {
+    parent.append(createArgumentList(objectValue, schema, labels));
+    return;
+  }
+  parent.textContent = formatScalar(value, schema);
+}
+function formatScalar(value, schema) {
+  if (value === null || value === void 0 || value === "") return "Not provided";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "number") return new Intl.NumberFormat().format(value);
+  if (typeof value !== "string") return String(value);
+  if (schema?.format === "date") {
+    const date5 = /* @__PURE__ */ new Date(`${value}T00:00:00`);
+    if (!Number.isNaN(date5.valueOf()))
+      return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date5);
+  }
+  if (schema?.format === "date-time") {
+    const date5 = new Date(value);
+    if (!Number.isNaN(date5.valueOf()))
+      return new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(
+        date5
+      );
   }
-  return details;
+  return value;
 }
 function humanizeArgumentName(value) {
   const words = value.replaceAll(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll(/[_-]+/g, " ");
   return words ? `${words[0]?.toUpperCase() ?? ""}${words.slice(1)}` : value;
 }
-function formatArgumentValue(value) {
-  if (value === null) return "None";
-  if (typeof value === "string") return value;
-  if (typeof value === "number" || typeof value === "boolean") return String(value);
-  return JSON.stringify(value) ?? "";
+function record3(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+}
+function string4(value) {
+  return typeof value === "string" && value.length > 0 ? value : void 0;
 }
 
 // ../../node_modules/.pnpm/dompurify@3.4.11/node_modules/dompurify/dist/purify.es.mjs
@@ -22366,8 +22478,11 @@ var AssistantElementEventController = class {
       if (!this.#streamKind) return;
       this.#appendToolProposal(
         String(data.id ?? ""),
-        String(data.tool ?? ("title" in data ? data.title : void 0) ?? "Action"),
-        isRecord4(data.arguments) ? data.arguments : void 0
+        String(data.tool ?? "action"),
+        isRecord4(data.arguments) ? data.arguments : void 0,
+        typeof data.title === "string" ? data.title : void 0,
+        "description" in data && typeof data.description === "string" ? data.description : void 0,
+        "reviewSchema" in data && isRecord4(data.reviewSchema) ? data.reviewSchema : void 0
       );
       return;
     }
@@ -22405,7 +22520,13 @@ var AssistantElementEventController = class {
   }
   #finishInteraction(id, action) {
     if (this.#completedTool && !this.#assistantBody) {
-      this.#host.appendMessage("assistant", JSON.stringify(this.#completedTool.result ?? {}) ?? "");
+      const messages = this.#host.messages();
+      if (messages) {
+        const labels = this.#host.labels();
+        messages.append(
+          createResultCard(this.#completedTool.result, labels.completed, labels.redacted)
+        );
+      }
     }
     this.#proposalCards.get(id)?.remove();
     this.#proposalCards.delete(id);
@@ -22420,18 +22541,23 @@ var AssistantElementEventController = class {
     this.#clearStream();
     this.#completedTool = void 0;
   }
-  #appendToolProposal(id, tool, arguments_) {
+  #appendToolProposal(id, tool, arguments_, title, description, reviewSchema) {
     const messages = this.#host.messages();
     if (!messages || !id) return;
     this.#proposalCards.get(id)?.remove();
     const labels = this.#host.labels();
     const card = createInteractionCard({
       tool,
+      ...title ? { title } : {},
+      ...description ? { description } : {},
       ...arguments_ ? { arguments: arguments_ } : {},
+      ...reviewSchema ? { reviewSchema } : {},
       labels: {
+        heading: labels.confirmationHeading,
         accept: labels.confirm,
-        decline: "Decline",
-        cancel: labels.cancel
+        decline: labels.decline,
+        details: labels.additionalDetails,
+        redacted: labels.redacted
       },
       respond: (action) => this.#host.respond(id, { action })
     });
@@ -22439,7 +22565,9 @@ var AssistantElementEventController = class {
     this.#proposalCards.set(id, card);
     this.#revealLatestMessage(messages);
     this.#host.element.dispatchEvent(
-      new CustomEvent("assistant-tool-proposed", { detail: { id, tool, arguments: arguments_ } })
+      new CustomEvent("assistant-tool-proposed", {
+        detail: { id, tool, title, description, arguments: arguments_, reviewSchema }
+      })
     );
   }
   #appendInputRequest(id, message, requestedSchema) {
@@ -22490,7 +22618,14 @@ var AssistantElementEventController = class {
   }
   #revealLatestMessage(messages) {
     this.#host.element.setAttribute("has-messages", "");
-    messages.scrollTop = messages.scrollHeight;
+    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;
+    }
   }
 };
 function isRecord4(value) {
@@ -22525,17 +22660,18 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   :host([data-mode="floating"][data-position="bottom-left"]) { right: auto; left: 20px; }
   button { font: inherit; }
   button, textarea, input, select { -webkit-tap-highlight-color: transparent; }
-  .launcher { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: color-mix(in srgb, var(--ns-assistant-panel, var(--ns-assistant-default-panel)) 82%, transparent); box-shadow: 0 4px 20px rgba(0,0,0,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: transform .5s cubic-bezier(.25,1,.5,1), box-shadow .2s ease; }
+  .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-text, var(--ns-assistant-default-text)); background: color-mix(in srgb, var(--ns-assistant-panel, var(--ns-assistant-default-panel)) 88%, transparent); border: 1px solid color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 74%, transparent); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform-origin: bottom right; animation: halo-panel-in .32s 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; 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: 14px 18px; border-bottom: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
+  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; }
   .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: 32px; height: 32px; 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 { 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:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); }
   .welcome { flex: 0 0 auto; padding: 30px 22px 18px; }
   .welcome h2 { margin: 0; font-size: 1.42em; line-height: 1.25; letter-spacing: -.025em; }
@@ -22543,16 +22679,24 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   :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 { padding: 7px 12px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
+  .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: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; overscroll-behavior: contain; scroll-behavior: smooth; }
+  .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::-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.user { display: grid; justify-items: start; gap: 3px; margin-left: auto; padding: 10px 16px 8px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); font-size: .94em; }
+  .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: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 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; }
   .message.user time { margin-top: 0; }
   .markdown { white-space: normal; }
   .markdown p { margin: 0 0 8px; }
@@ -22561,8 +22705,8 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .markdown em, .markdown i { font-style: italic; }
   .markdown a { color: var(--ns-assistant-link, var(--ns-assistant-default-link)); text-decoration: underline; text-underline-offset: 2px; }
   .markdown a:hover { opacity: .8; }
-  .markdown code { padding: 2px 6px; border-radius: 5px; background: var(--ns-assistant-code, var(--ns-assistant-default-code)); font-family: var(--ns-assistant-mono-font-family, var(--ns-assistant-default-mono-font-family)); font-size: .87em; }
-  .markdown pre { margin: 10px 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 10px; background: var(--ns-assistant-code, var(--ns-assistant-default-code)); white-space: pre; }
+  .markdown code { padding: 2px 6px; color: var(--ns-assistant-code-text, inherit); border: 1px solid var(--ns-assistant-code-border, transparent); border-radius: 5px; background: var(--ns-assistant-code, var(--ns-assistant-default-code)); font-family: var(--ns-assistant-mono-font-family, var(--ns-assistant-default-mono-font-family)); font-size: .87em; }
+  .markdown pre { margin: 10px 0; padding: 12px 14px; overflow-x: auto; color: var(--ns-assistant-code-text, inherit); border: 1px solid var(--ns-assistant-code-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: 10px; background: var(--ns-assistant-code, var(--ns-assistant-default-code)); white-space: pre; }
   .markdown pre code { padding: 0; background: transparent; font-size: .86em; }
   .markdown ul, .markdown ol { margin: 8px 0; padding-left: 22px; }
   .markdown li { margin: 3px 0; }
@@ -22571,15 +22715,25 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .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.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: 10px; align-items: start; margin: 8px 0 14px; padding: 12px 14px; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 14px; background: color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 78%, transparent); animation: halo-message-in .2s ease both; }
-  .tool-proposal > strong { font-weight: 650; overflow-wrap: anywhere; }
-  .proposal-arguments { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: .9em; }
+  .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; }
+  .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; }
   .proposal-arguments dt { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
+  .proposal-arguments dt small { display: block; margin-top: 2px; font-size: .85em; line-height: 1.35; }
   .proposal-arguments dd { margin: 0; overflow-wrap: anywhere; }
+  .proposal-details { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .86em; }
+  .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 { padding: 7px 11px; border: 0; border-radius: 999px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); cursor: pointer; }
-  .tool-proposal button:first-of-type { color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .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 .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; }
+  .tool-result { display: grid; gap: 10px; margin: 8px 0 16px; padding: 16px; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: var(--ns-assistant-card-radius, 14px); background: var(--ns-assistant-assistant-message, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); }
+  .tool-result > strong { color: var(--ns-assistant-success, var(--ns-assistant-default-success)); }
   .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; }
@@ -22588,20 +22742,21 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request input[type="checkbox"] { width: 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; border: 1px solid 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-elevated, var(--ns-assistant-default-elevated)); }
+  .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-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: 48px; margin: 8px 16px 12px; padding: 8px 8px 8px 16px; border: 0; border-radius: 999px; background: var(--ns-assistant-input, var(--ns-assistant-default-input)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 60%, transparent); transition: 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, 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: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: 32px; height: 32px; flex: 0 0 32px; padding: 0; overflow: hidden; color: transparent; background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); font-size: 0; line-height: 0; transition: transform .15s ease, background .15s ease; }
-  .send::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; background: var(--ns-assistant-text, var(--ns-assistant-default-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 { 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::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)); }
+  :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; }
   .legal:empty { display: none; }
@@ -22614,9 +22769,107 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   @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 (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); } }
 </style>`;
 
+// src/host-appearance.ts
+var ROLE_VARIABLES = {
+  canvas: "--ns-assistant-canvas",
+  text: "--ns-assistant-text",
+  mutedText: "--ns-assistant-muted-text",
+  link: "--ns-assistant-link",
+  focus: "--ns-assistant-focus",
+  success: "--ns-assistant-success",
+  warning: "--ns-assistant-warning",
+  danger: "--ns-assistant-danger"
+};
+var SURFACE_VARIABLES = {
+  panel: "--ns-assistant-panel",
+  header: "--ns-assistant-header",
+  assistantMessage: "--ns-assistant-assistant-message",
+  userMessage: "--ns-assistant-user-message",
+  composer: "--ns-assistant-composer",
+  suggestion: "--ns-assistant-suggestion",
+  confirmation: "--ns-assistant-confirmation",
+  primaryButton: "--ns-assistant-primary-button",
+  secondaryButton: "--ns-assistant-secondary-button",
+  launcher: "--ns-assistant-launcher",
+  code: "--ns-assistant-code",
+  app: "--ns-assistant-app"
+};
+var ASSISTANT_APPEARANCE_VARIABLES = [
+  ...Object.values(ROLE_VARIABLES),
+  ...Object.values(SURFACE_VARIABLES).flatMap((name) => [name, `${name}-text`, `${name}-border`])
+];
+function applyHostAppearance(style, appearance, theme, previous = /* @__PURE__ */ new Map()) {
+  for (const [variable, original] of previous) {
+    if (original.value) style.setProperty(variable, original.value, original.priority);
+    else style.removeProperty(variable);
+  }
+  previous.clear();
+  const selected = appearance?.[theme];
+  if (!selected) return [];
+  for (const [role, variable] of Object.entries(ROLE_VARIABLES)) {
+    const value = selected[role];
+    if (typeof value === "string") setManagedProperty(style, previous, variable, value);
+  }
+  for (const [role, variable] of Object.entries(SURFACE_VARIABLES)) {
+    const value = selected[role];
+    if (!value || typeof value !== "object") continue;
+    if (value.surface) setManagedProperty(style, previous, variable, value.surface);
+    if (value.text) setManagedProperty(style, previous, `${variable}-text`, value.text);
+    if (value.border) setManagedProperty(style, previous, `${variable}-border`, value.border);
+  }
+  return contrastWarnings(selected, theme);
+}
+function setManagedProperty(style, previous, variable, value) {
+  previous.set(variable, {
+    value: style.getPropertyValue(variable),
+    priority: style.getPropertyPriority(variable)
+  });
+  style.setProperty(variable, value);
+}
+function contrastWarnings(theme, mode) {
+  const warnings = [];
+  const pairs = [
+    ["panel", theme.panel?.text ?? theme.text, theme.panel?.surface ?? theme.canvas],
+    ["userMessage", theme.userMessage?.text ?? theme.text, theme.userMessage?.surface],
+    ["composer", theme.composer?.text ?? theme.text, theme.composer?.surface],
+    ["confirmation", theme.confirmation?.text ?? theme.text, theme.confirmation?.surface],
+    ["primaryButton", theme.primaryButton?.text, theme.primaryButton?.surface]
+  ];
+  for (const [role, foreground, background] of pairs) {
+    if (!foreground || !background) continue;
+    const ratio = contrastRatio2(foreground, background);
+    if (ratio >= 4.5) continue;
+    warnings.push({
+      code: "low_contrast",
+      theme: mode,
+      role,
+      foreground,
+      background,
+      contrastRatio: Math.round(ratio * 100) / 100,
+      recommendedRatio: 4.5
+    });
+  }
+  return warnings;
+}
+function contrastRatio2(first, second) {
+  const lighter = Math.max(luminance(first), luminance(second));
+  const darker = Math.min(luminance(first), luminance(second));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function luminance(color) {
+  const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+  if (!match) return 1;
+  const values = match.slice(1).map((value) => {
+    const channel = Number.parseInt(value, 16) / 255;
+    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * (values[0] ?? 0) + 0.7152 * (values[1] ?? 0) + 0.0722 * (values[2] ?? 0);
+}
+
 // src/presentation.ts
 function syncAssistantPresentation(host, root, appearance, mode, sessionState) {
   const presentation = appearance.presentation;
@@ -22789,6 +23042,35 @@ function replaceFallback(root, slotName, nodes) {
   slot?.replaceChildren(...nodes);
 }
 
+// src/element-theme.ts
+function applyAssistantElementTheme(input) {
+  const { host, root, appearance, mode } = input;
+  host.setAttribute("data-theme", mode);
+  for (const [name, value] of Object.entries(appearance.theme[mode])) {
+    host.style.setProperty(`--ns-assistant-default-${camelToKebab(name)}`, tokenValue(name, value));
+  }
+  const warnings = applyHostAppearance(host.style, input.hostAppearance, mode, input.styleSnapshot);
+  host.style.setProperty("--ns-assistant-default-panel-width", `${appearance.layout.panelWidth}px`);
+  host.style.setProperty(
+    "--ns-assistant-default-min-height",
+    `${appearance.layout.panelMinHeight}px`
+  );
+  host.style.setProperty(
+    "--ns-assistant-default-max-height",
+    `${appearance.layout.panelMaxHeight}px`
+  );
+  host.style.setProperty("--ns-assistant-default-z-index", String(appearance.layout.zIndex));
+  host.style.setProperty("--ns-assistant-default-edge-offset", `${appearance.layout.edgeOffset}px`);
+  const logo = root?.querySelector(".brand-logo");
+  const logoUrl = appearance.brand.logo[mode];
+  if (logo) {
+    logo.hidden = !logoUrl;
+    if (logoUrl) logo.src = logoUrl;
+  }
+  if (root) syncAssistantPresentation(host, root, appearance, mode, input.sessionState);
+  return warnings;
+}
+
 // src/presentation-styles.ts
 var presentationStyles = `<style>
   :host([data-mode="floating"]) {
@@ -22994,7 +23276,18 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #pendingUserEcho;
   #sessionState = "idle";
   #startOpenApplied = false;
+  #hostAppearance;
+  #appearanceWarningKeys = /* @__PURE__ */ new Set();
+  #appearanceStyleSnapshot = /* @__PURE__ */ new Map();
   sessionEndpoint = "";
+  get appearance() {
+    return this.#hostAppearance;
+  }
+  set appearance(value) {
+    this.#hostAppearance = value;
+    this.#appearanceWarningKeys.clear();
+    if (this.isConnected) this.#applyTheme();
+  }
   #events = new AssistantElementEventController({
     element: this,
     messages: () => this.#messages,
@@ -23010,10 +23303,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       this.#syncAppearance();
       this.#applyStartOpenPolicy();
     },
-    labels: () => ({
-      confirm: this.#appearance.labels.confirm,
-      cancel: this.#appearance.labels.cancel
-    }),
+    labels: () => this.#appearance.labels,
     respond: (id, response) => this.respond(id, response),
     dispatchError: (detail) => this.#dispatchError(detail),
     renderView: (detail) => {
@@ -23074,6 +23364,15 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   focusComposer() {
     this.shadowRoot?.querySelector("textarea")?.focus();
   }
+  /** Stop the active stream without discarding the current composer draft or session. */
+  stop() {
+    if (!this.hasAttribute("busy")) return;
+    this.#conversationGeneration += 1;
+    this.#client?.abort();
+    this.#setBusy(false);
+    this.#appendStatus(this.#appearance.labels.stopped);
+    this.dispatchEvent(new CustomEvent("assistant-stopped"));
+  }
   resetSession() {
     this.#conversationGeneration += 1;
     this.#client?.abort();
@@ -23088,6 +23387,20 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#setBusy(false);
     this.#setSessionState("idle");
   }
+  /** Re-establish the session without replaying a message or interaction decision. */
+  reconnect() {
+    this.#conversationGeneration += 1;
+    this.#client?.abort();
+    this.#unsubscribeClient?.();
+    this.#client = void 0;
+    this.#clientEndpoint = "";
+    this.#unsubscribeClient = void 0;
+    this.#sessionBootstrap = void 0;
+    this.#setBusy(false);
+    this.#setSessionState("loading");
+    this.#primeSession();
+    this.dispatchEvent(new CustomEvent("assistant-reconnecting"));
+  }
   updateContext(context) {
     this.#context = { ...context };
     if (this.#client) {
@@ -23135,6 +23448,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       await this.#ensureClient().sendMessage(message);
     } catch (error51) {
       if (generation !== this.#conversationGeneration) return;
+      if (error51 instanceof AssistantClientError && error51.detail.code === "request_aborted") return;
       this.#dispatchClientError(error51, "turn_failed");
       throw error51;
     } finally {
@@ -23214,26 +23528,31 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #handleClientEvent(event) {
     this.dispatchEvent(new CustomEvent("assistant-event", { detail: event }));
     this.#events.handle(event);
-    if (event.event === "session_started") this.#setSessionState("ready");
+    if (event.event === "session_started") {
+      this.#setSessionState("ready");
+      this.#messages?.querySelector(".conversation-error")?.remove();
+    }
     if (event.event === "session_expired" || event.event === "session_reset") {
       this.#setSessionState("idle");
     }
     if (event.event === "tool_proposed" || event.event === "interaction_proposed" || event.event === "input_requested") {
       this.#removeThinking();
       this.setAttribute("has-messages", "");
-      this.#scrollToBottom();
     }
     if (event.event === "content" || event.event === "message_completed" || event.event === "interaction_completed" || event.event === "error") {
       this.#removeThinking();
-      this.#scrollToBottom();
     }
   }
   #setBusy(busy) {
     this.toggleAttribute("busy", busy);
     const textarea = this.shadowRoot?.querySelector("textarea");
     const send = this.shadowRoot?.querySelector(".send");
-    if (textarea) textarea.disabled = busy;
-    if (send) send.disabled = busy;
+    if (textarea) textarea.disabled = false;
+    if (send) {
+      send.dataset.action = busy ? "stop" : "send";
+      send.textContent = busy ? this.#appearance.labels.stop : this.#appearance.labels.send;
+      send.setAttribute("aria-label", send.textContent);
+    }
     if (!busy) {
       this.#removeThinking();
       return;
@@ -23271,6 +23590,16 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       body.textContent = text2;
     }
     message.append(body);
+    if (role === "assistant" && text2) {
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.className = "message-copy";
+      copy.textContent = this.#appearance.labels.copy;
+      copy.addEventListener("click", () => {
+        void navigator.clipboard?.writeText(text2);
+      });
+      message.append(copy);
+    }
     if (this.#appearance.behavior.showTimestamps) {
       const timestamp = document.createElement("time");
       timestamp.dateTime = (/* @__PURE__ */ new Date()).toISOString();
@@ -23282,12 +23611,31 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     }
     this.#messages.append(message);
     this.setAttribute("has-messages", "");
-    this.#scrollToBottom();
+    this.#revealLatest();
     return body;
   }
+  #appendStatus(text2) {
+    if (!this.#messages) return;
+    const status = document.createElement("p");
+    status.className = "conversation-status";
+    status.setAttribute("role", "status");
+    status.textContent = text2;
+    this.#messages.append(status);
+  }
   #scrollToBottom() {
     if (this.#messages) this.#messages.scrollTop = this.#messages.scrollHeight;
   }
+  #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;
+    }
+  }
   #dispatchError(detail) {
     this.dispatchEvent(new CustomEvent("assistant-error", { detail }));
   }
@@ -23295,9 +23643,27 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (error51 instanceof AssistantClientError && error51.detail.code === "session_failed") {
       this.#setSessionState("error");
     }
-    this.#dispatchError(
-      error51 instanceof AssistantClientError ? error51.detail : { code: fallbackCode, retryable: false }
+    const detail = error51 instanceof AssistantClientError ? error51.detail : { code: fallbackCode, retryable: false };
+    this.#appendRecoveryError(
+      detail.code === "session_expired" ? this.#appearance.labels.sessionExpired : this.#appearance.labels.unavailable
     );
+    this.#dispatchError(detail);
+  }
+  #appendRecoveryError(message) {
+    if (!this.#messages) return;
+    this.#messages.querySelector(".conversation-error")?.remove();
+    const error51 = document.createElement("section");
+    error51.className = "conversation-error";
+    error51.setAttribute("role", "alert");
+    const text2 = document.createElement("p");
+    text2.textContent = message;
+    const retry = document.createElement("button");
+    retry.type = "button";
+    retry.textContent = this.#appearance.labels.reconnect;
+    retry.addEventListener("click", () => this.reconnect());
+    error51.append(text2, retry);
+    this.#messages.append(error51);
+    this.#revealLatest();
   }
   #resolvedMode() {
     const configured = this.getAttribute("theme") ?? this.#appearance.theme.defaultMode;
@@ -23305,43 +23671,24 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   #applyTheme() {
     const mode = this.#resolvedMode();
-    this.setAttribute("data-theme", mode);
-    const tokens = this.#appearance.theme[mode];
-    for (const [name, value] of Object.entries(tokens)) {
-      this.style.setProperty(
-        `--ns-assistant-default-${camelToKebab(name)}`,
-        tokenValue(name, value)
+    for (const warning of applyAssistantElementTheme({
+      host: this,
+      root: this.shadowRoot,
+      appearance: this.#appearance,
+      hostAppearance: this.#hostAppearance,
+      mode,
+      sessionState: this.#sessionState,
+      styleSnapshot: this.#appearanceStyleSnapshot
+    })) {
+      const key = `${warning.theme}:${warning.role}:${warning.foreground}:${warning.background}`;
+      if (this.#appearanceWarningKeys.has(key)) continue;
+      this.#appearanceWarningKeys.add(key);
+      this.dispatchEvent(
+        new CustomEvent("assistant-appearance-warning", {
+          detail: warning
+        })
       );
     }
-    this.style.setProperty(
-      "--ns-assistant-default-panel-width",
-      `${this.#appearance.layout.panelWidth}px`
-    );
-    this.style.setProperty(
-      "--ns-assistant-default-min-height",
-      `${this.#appearance.layout.panelMinHeight}px`
-    );
-    this.style.setProperty(
-      "--ns-assistant-default-max-height",
-      `${this.#appearance.layout.panelMaxHeight}px`
-    );
-    this.style.setProperty(
-      "--ns-assistant-default-z-index",
-      String(this.#appearance.layout.zIndex)
-    );
-    this.style.setProperty(
-      "--ns-assistant-default-edge-offset",
-      `${this.#appearance.layout.edgeOffset}px`
-    );
-    const logo = this.shadowRoot?.querySelector(".brand-logo");
-    const logoUrl = this.#appearance.brand.logo[mode];
-    if (logo) {
-      logo.hidden = !logoUrl;
-      if (logoUrl) logo.src = logoUrl;
-    }
-    if (this.shadowRoot) {
-      syncAssistantPresentation(this, this.shadowRoot, this.#appearance, mode, this.#sessionState);
-    }
   }
   #setSessionState(state) {
     this.#sessionState = state;
@@ -23421,6 +23768,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
         <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>
         <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>
@@ -23463,6 +23811,10 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     const form = queryRequired(this.shadowRoot, "form");
     form.addEventListener("submit", (event) => {
       event.preventDefault();
+      if (this.hasAttribute("busy")) {
+        this.stop();
+        return;
+      }
       const value = textarea.value;
       textarea.value = "";
       textarea.style.height = "auto";
@@ -23477,6 +23829,17 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       event.preventDefault();
       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;
+      }
+    });
     this.#applyTheme();
   }
   #appendLegalLinks(legal) {
@@ -23517,12 +23880,15 @@ var NoodleAssistantWithRef = (0, import_react.forwardRef)(
       const error51 = (event) => props.onError?.(event.detail);
       const expired = () => props.onSessionExpired?.();
       const assistantEvent = (event) => props.onEvent?.(event.detail);
+      const appearanceWarning = (event) => props.onAppearanceWarning?.(event.detail);
       element.addEventListener("assistant-ready", ready);
       element.addEventListener("assistant-error", error51);
       element.addEventListener("assistant-session-expired", expired);
       element.addEventListener("assistant-event", assistantEvent);
+      element.addEventListener("assistant-appearance-warning", appearanceWarning);
       registerNoodleAssistant();
       element.sessionEndpoint = props.sessionEndpoint;
+      element.appearance = props.appearance;
       if (props.context) element.updateContext(props.context);
       if (props.pageContext) element.updatePageContext(props.pageContext);
       if (props.modelContext) element.updateModelContext(props.modelContext);
@@ -23532,11 +23898,14 @@ var NoodleAssistantWithRef = (0, import_react.forwardRef)(
         element.removeEventListener("assistant-error", error51);
         element.removeEventListener("assistant-session-expired", expired);
         element.removeEventListener("assistant-event", assistantEvent);
+        element.removeEventListener("assistant-appearance-warning", appearanceWarning);
       };
     }, [
       props.context,
+      props.appearance,
       props.modelContext,
       props.onError,
+      props.onAppearanceWarning,
       props.onEvent,
       props.onReady,
       props.onSessionExpired,