@noodleseed/assistant 1.20.0 → 1.22.0

package/dist/index.cjs

@@ -27030,6 +27030,12 @@ var AssistantChatStateStore = class {
       case "interaction_started":
         this.#beginInteraction(event.data.id);
         return;
+      case "resume_started":
+        this.#status = "submitted";
+        this.#error = void 0;
+        this.#startOperation();
+        this.#notify();
+        return;
       case "content":
         this.#writeText(event.data.delta);
         return;
@@ -27285,6 +27291,78 @@ function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+// src/client-errors.ts
+async function refusalCode(response) {
+  try {
+    const body = await response.clone().json();
+    const code = body.code;
+    return typeof code === "string" ? code : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var UNRETRYABLE_SERVICE_CODES = /* @__PURE__ */ new Set([
+  "daily_turn_budget_exhausted",
+  "daily_session_budget_exhausted"
+]);
+var AssistantClientError = class extends Error {
+  detail;
+  constructor(detail, message, options) {
+    super(message, options);
+    this.name = "AssistantClientError";
+    this.detail = detail;
+  }
+};
+function parseSession(value) {
+  if (!isRecord2(value) || !isRecord2(value.endpoints)) {
+    throw clientError("session_failed", "Assistant session response is invalid", true);
+  }
+  const interactions = value.endpoints.interactions;
+  const apps = value.endpoints.apps;
+  const sandbox = value.endpoints.sandbox;
+  if (typeof value.token !== "string" || typeof value.expiresAt !== "string" || typeof value.endpoints.turns !== "string" || typeof value.endpoints.toolConfirmations !== "string" || interactions !== void 0 && typeof interactions !== "string" || apps !== void 0 && typeof apps !== "string" || sandbox !== void 0 && typeof sandbox !== "string") {
+    throw clientError("session_failed", "Assistant session response is invalid", true);
+  }
+  return {
+    token: value.token,
+    expiresAt: value.expiresAt,
+    endpoints: {
+      turns: value.endpoints.turns,
+      toolConfirmations: value.endpoints.toolConfirmations,
+      ...typeof interactions === "string" ? { interactions } : {},
+      ...typeof apps === "string" ? { apps } : {},
+      ...typeof sandbox === "string" ? { sandbox } : {}
+    },
+    ...isRecord2(value.configuration) ? { configuration: value.configuration } : {},
+    ...isRecord2(value.resume) && typeof value.resume.tool === "string" ? { resume: { tool: value.resume.tool } } : {}
+  };
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function readStableErrorCode(response) {
+  let value;
+  try {
+    value = await response.json();
+  } catch {
+    return void 0;
+  }
+  if (!isRecord2(value) || typeof value.code !== "string") return void 0;
+  return /^[A-Za-z0-9_.-]{1,64}$/.test(value.code) ? value.code : void 0;
+}
+function clientError(code, message, retryable, status, options, serviceCode) {
+  return new AssistantClientError(
+    {
+      code,
+      ...status === void 0 ? {} : { status },
+      retryable,
+      ...serviceCode === void 0 ? {} : { serviceCode }
+    },
+    message,
+    options
+  );
+}
+
 // src/events.ts
 function toAssistantClientEvent(event) {
   const value = event.data;
@@ -27300,12 +27378,12 @@ function toAssistantClientEvent(event) {
       }
       break;
     case "tool_proposed":
-      if (hasString(value, "id") && hasString(value, "tool") && hasOptionalString(value.title) && hasOptionalString(value.description) && hasOptionalJson(value.arguments) && (value.reviewSchema === void 0 || isRecord2(value.reviewSchema)) && 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 || isRecord3(value.reviewSchema)) && hasOptionalString(value.expiresAt) && (value.requiresConfirmation === void 0 || value.requiresConfirmation === true) && hasOptionalTurnId(value)) {
         return event;
       }
       break;
     case "input_requested":
-      if (hasString(value, "id") && hasString(value, "message") && isRecord2(value.requestedSchema) && hasString(value, "expiresAt") && hasOptionalTurnId(value)) {
+      if (hasString(value, "id") && hasString(value, "message") && isRecord3(value.requestedSchema) && hasString(value, "expiresAt") && hasOptionalTurnId(value)) {
         return event;
       }
       break;
@@ -27349,7 +27427,7 @@ function toAssistantClientEvent(event) {
   return { event: "unrecognized", data: { name: event.event, payload: value } };
 }
 function isViewAvailableDetail(value) {
-  return hasString(value, "id") && hasString(value, "tool") && typeof value.resourceUri === "string" && value.resourceUri.startsWith("ui://") && hasOptionalString(value.title) && (value.replayed === void 0 || value.replayed === true) && isJsonValue(value.result, 0) && hasOptionalJson(value.arguments) && hasOptionalString(value.html) && (value.resourceMeta === void 0 || isRecord2(value.resourceMeta)) && (value.allowedOpenDomains === void 0 || Array.isArray(value.allowedOpenDomains) && value.allowedOpenDomains.every(isHttpsUrl)) && hasOptionalTurnId(value);
+  return hasString(value, "id") && hasString(value, "tool") && typeof value.resourceUri === "string" && value.resourceUri.startsWith("ui://") && hasOptionalString(value.title) && (value.replayed === void 0 || value.replayed === true) && isJsonValue(value.result, 0) && hasOptionalJson(value.arguments) && hasOptionalString(value.html) && (value.resourceMeta === void 0 || isRecord3(value.resourceMeta)) && (value.allowedOpenDomains === void 0 || Array.isArray(value.allowedOpenDomains) && value.allowedOpenDomains.every(isHttpsUrl)) && hasOptionalTurnId(value);
 }
 function isHttpsUrl(value) {
   if (typeof value !== "string") return false;
@@ -27382,11 +27460,11 @@ function isJsonValue(value, depth) {
   if (Array.isArray(value)) {
     return value.length <= 256 && value.every((entry) => isJsonValue(entry, depth + 1));
   }
-  if (!isRecord2(value)) return false;
+  if (!isRecord3(value)) return false;
   const entries2 = Object.entries(value);
   return entries2.length <= 256 && entries2.every(([, entry]) => isJsonValue(entry, depth + 1));
 }
-function isRecord2(value) {
+function isRecord3(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
@@ -27516,15 +27594,15 @@ function parseFrame(frame) {
   if (event === "done" && !isValidDonePayload(parsed)) {
     throw invalidStream("assistant event stream contained an invalid done event");
   }
-  return { event, data: isRecord3(parsed) ? parsed : { value: parsed } };
+  return { event, data: isRecord4(parsed) ? parsed : { value: parsed } };
 }
 function normalizeLineEndings(input) {
   return input.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
 }
 function isValidDonePayload(value) {
-  return isRecord3(value) && (value.turnId === void 0 || typeof value.turnId === "string" && value.turnId.length > 0);
+  return isRecord4(value) && (value.turnId === void 0 || typeof value.turnId === "string" && value.turnId.length > 0);
 }
-function isRecord3(value) {
+function isRecord4(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function invalidStream(message, cause) {
@@ -27535,27 +27613,6 @@ function isAbortError2(error51) {
 }
 
 // src/client.ts
-async function refusalCode(response) {
-  try {
-    const body = await response.clone().json();
-    const code = body.code;
-    return typeof code === "string" ? code : void 0;
-  } catch {
-    return void 0;
-  }
-}
-var UNRETRYABLE_SERVICE_CODES = /* @__PURE__ */ new Set([
-  "daily_turn_budget_exhausted",
-  "daily_session_budget_exhausted"
-]);
-var AssistantClientError = class extends Error {
-  detail;
-  constructor(detail, message, options) {
-    super(message, options);
-    this.name = "AssistantClientError";
-    this.detail = detail;
-  }
-};
 var DefaultAssistantClient = class {
   #source;
   #fetch;
@@ -27590,12 +27647,50 @@ var DefaultAssistantClient = class {
   hasSession() {
     return this.#session !== void 0;
   }
+  /** Whether a request holds the single-flight slot, so callers can refuse before mutating UI. */
+  isBusy() {
+    return this.#active !== void 0;
+  }
   async connect() {
     if (this.#session) return;
     await this.#singleFlight(async (signal) => {
-      if (!this.#session) await this.#createSession(signal);
+      if (this.#session) return;
+      const session = await this.#createSession(signal);
+      if (session.resume) {
+        try {
+          await this.#runChatOperation(signal, () => this.#resumeTurn(session, signal));
+        } catch {
+        }
+      }
     });
   }
+  /** POST the one-shot resume trigger; a 409 means nothing was pending, which renders as silence. */
+  async #resumeTurn(session, signal) {
+    const response = await this.#request(
+      session.endpoints.turns,
+      {
+        method: "POST",
+        headers: authorizedHeaders(session.token, "text/event-stream"),
+        body: JSON.stringify({ resume: true }),
+        signal
+      },
+      "turn_failed"
+    );
+    if (response.status === 409) return;
+    if (!response.ok) {
+      throw clientError(
+        "turn_failed",
+        `Assistant turn failed (${response.status})`,
+        false,
+        response.status,
+        void 0,
+        await refusalCode(response)
+      );
+    }
+    this.#emit({ event: "resume_started", data: { tool: session.resume?.tool ?? "" } });
+    await this.#consume(response);
+    this.#emit({ event: "message_completed", data: {} });
+  }
   async sendMessage(text3) {
     const message = text3.trim();
     if (!message) return;
@@ -28000,10 +28095,10 @@ function authorizedHeaders(token, accept) {
   };
 }
 function parseAppInteraction(value) {
-  if (!isRecord4(value) || !isRecord4(value.interaction)) return void 0;
+  if (!isRecord2(value) || !isRecord2(value.interaction)) return void 0;
   const event = value.interaction.event;
   const data = value.interaction.data;
-  if (event !== "tool_proposed" && event !== "input_requested" || !isRecord4(data)) {
+  if (event !== "tool_proposed" && event !== "input_requested" || !isRecord2(data)) {
     return void 0;
   }
   const parsed = toAssistantClientEvent({ event, data });
@@ -28023,54 +28118,6 @@ function appInteractionStopped(action) {
     isError: true
   };
 }
-function parseSession(value) {
-  if (!isRecord4(value) || !isRecord4(value.endpoints)) {
-    throw clientError("session_failed", "Assistant session response is invalid", true);
-  }
-  const interactions = value.endpoints.interactions;
-  const apps = value.endpoints.apps;
-  const sandbox = value.endpoints.sandbox;
-  if (typeof value.token !== "string" || typeof value.expiresAt !== "string" || typeof value.endpoints.turns !== "string" || typeof value.endpoints.toolConfirmations !== "string" || interactions !== void 0 && typeof interactions !== "string" || apps !== void 0 && typeof apps !== "string" || sandbox !== void 0 && typeof sandbox !== "string") {
-    throw clientError("session_failed", "Assistant session response is invalid", true);
-  }
-  return {
-    token: value.token,
-    expiresAt: value.expiresAt,
-    endpoints: {
-      turns: value.endpoints.turns,
-      toolConfirmations: value.endpoints.toolConfirmations,
-      ...typeof interactions === "string" ? { interactions } : {},
-      ...typeof apps === "string" ? { apps } : {},
-      ...typeof sandbox === "string" ? { sandbox } : {}
-    },
-    ...isRecord4(value.configuration) ? { configuration: value.configuration } : {}
-  };
-}
-function isRecord4(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-async function readStableErrorCode(response) {
-  let value;
-  try {
-    value = await response.json();
-  } catch {
-    return void 0;
-  }
-  if (!isRecord4(value) || typeof value.code !== "string") return void 0;
-  return /^[A-Za-z0-9_.-]{1,64}$/.test(value.code) ? value.code : void 0;
-}
-function clientError(code, message, retryable, status, options, serviceCode) {
-  return new AssistantClientError(
-    {
-      code,
-      ...status === void 0 ? {} : { status },
-      retryable,
-      ...serviceCode === void 0 ? {} : { serviceCode }
-    },
-    message,
-    options
-  );
-}
 
 // src/input-request-card.ts
 function createInputRequestCard(options) {
@@ -31255,6 +31302,11 @@ var AssistantElementEventController = class {
       this.#completedTool = void 0;
       return;
     }
+    if (name21 === "resume_started") {
+      this.#startStream("message");
+      this.#host.element.dispatchEvent(new CustomEvent("assistant-message-started"));
+      return;
+    }
     if (name21 === "interaction_completed") {
       if (this.#streamKind !== "interaction") return;
       this.#finishInteraction(String(data.id ?? ""), String(data.action ?? "accept"));
@@ -31473,6 +31525,36 @@ function queryRequired(root, selector) {
   if (!element) throw new Error(`assistant renderer is missing ${selector}`);
   return element;
 }
+function assistantElementMarkup(appearance, open, styles) {
+  return `${styles}
+      <button class="launcher" type="button" aria-label="${escapeAttribute(appearance.labels.open)}" aria-controls="assistant-panel" aria-expanded="${String(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)}"></button></header>
+        <div class="welcome"><slot name="empty-state"></slot></div>
+        <div class="suggested-prompts"></div>
+        <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>
+      </section>`;
+}
+function appendLegalLinks(legal, appearance) {
+  for (const [label, href] of [
+    ["Privacy", appearance.privacyUrl],
+    ["Terms", appearance.termsUrl]
+  ]) {
+    if (!href) continue;
+    const link = document.createElement("a");
+    link.href = href;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = label;
+    legal.append(link);
+  }
+}
 
 // src/element-page-context-controller.ts
 var AssistantElementPageContextController = class {
@@ -31514,6 +31596,33 @@ var AssistantElementPageContextController = class {
   }
 };
 
+// src/element-presentation-gate.ts
+var AssistantElementPresentationGate = class {
+  #host;
+  #primeSession;
+  #focusComposer;
+  constructor(host, primeSession, focusComposer) {
+    this.#host = host;
+    this.#primeSession = primeSession;
+    this.#focusComposer = focusComposer;
+  }
+  syncOpenState() {
+    const open = this.#host.hasAttribute("open");
+    const presentationReady = this.#host.hasAttribute("data-presentation-ready");
+    const launcher = this.#host.shadowRoot?.querySelector(".launcher");
+    launcher?.setAttribute("aria-expanded", String(open && presentationReady));
+    launcher?.setAttribute("aria-busy", String(open && !presentationReady));
+    if (launcher) launcher.disabled = open && !presentationReady;
+    if (open && this.#host.isConnected) this.#primeSession();
+  }
+  reveal() {
+    if (this.#host.hasAttribute("data-presentation-ready")) return;
+    this.#host.setAttribute("data-presentation-ready", "");
+    this.syncOpenState();
+    if (this.#host.hasAttribute("open")) queueMicrotask(this.#focusComposer);
+  }
+};
+
 // src/element-scroll-controller.ts
 var AssistantElementScrollController = class {
   #region;
@@ -31629,9 +31738,10 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .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; isolation: isolate; animation: halo-panel-in .28s cubic-bezier(.23,1,.32,1) both; }
-  :host([open]) .panel { display: flex; }
+  :host([open][data-presentation-ready]) .panel { display: flex; }
   .panel { position: relative; }
-  :host([open]) .launcher { display: none; }
+  :host([open][data-presentation-ready]) .launcher { display: none; }
+  :host([open]:not([data-presentation-ready])) .launcher { cursor: progress; opacity: .72; transform: 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 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; }
@@ -32257,9 +32367,16 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #automaticPageContext = new AssistantElementPageContextController(
     () => !this.#pageContext
   );
+  #presentationGate = new AssistantElementPresentationGate(
+    this,
+    () => this.#primeSession(),
+    () => this.focusComposer()
+  );
   #pendingUserEcho;
   #sessionState = "idle";
   #startOpenApplied = false;
+  #readyDispatched = false;
+  #turnInFlight = false;
   #hostAppearance;
   #appearanceWarningKeys = /* @__PURE__ */ new Set();
   #appearanceStyleSnapshot = /* @__PURE__ */ new Map();
@@ -32325,20 +32442,24 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (!this.sessionEndpoint) this.sessionEndpoint = this.getAttribute("session-endpoint") ?? "";
     if (!this.embedId) this.embedId = this.getAttribute("embed-id") ?? "";
     if (!this.serviceUrl) this.serviceUrl = this.getAttribute("service-url") ?? "";
+    if (!this.sessionEndpoint && !this.embedId) this.#presentationGate.reveal();
     this.#media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
     this.#media?.addEventListener("change", this.#handleSystemTheme);
     document.addEventListener("keydown", this.#handleDocumentKeydown);
     document.addEventListener("pointerdown", this.#handleDocumentPointerDown);
     if (this.#appearance.behavior.startOpen) this.#applyStartOpenPolicy();
     this.#render();
-    this.dispatchEvent(new CustomEvent("assistant-ready"));
+    if (!this.#readyDispatched) {
+      this.#readyDispatched = true;
+      this.dispatchEvent(new CustomEvent("assistant-ready"));
+    }
     if (this.hasAttribute("start-open")) {
       this.setAttribute("open", "");
       this.#startOpenApplied = true;
     } else if (!this.embedId) {
       this.#primeSession();
     }
-    this.#syncOpenState();
+    this.#presentationGate.syncOpenState();
   }
   disconnectedCallback() {
     this.#conversationGeneration += 1;
@@ -32356,7 +32477,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   attributeChangedCallback(name21) {
     if (name21 === "theme") this.#applyTheme();
-    if (name21 === "open") this.#syncOpenState();
+    if (name21 === "open") this.#presentationGate.syncOpenState();
   }
   open() {
     this.setAttribute("open", "");
@@ -32445,7 +32566,14 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   async sendMessage(text3) {
     const message = text3.trim();
     if (!message) return;
+    if (this.#turnInFlight) {
+      throw new AssistantClientError(
+        { code: "request_in_progress", retryable: true },
+        "an assistant request is already in progress"
+      );
+    }
     const generation = this.#conversationGeneration;
+    this.#turnInFlight = true;
     this.#pendingUserEcho = message;
     this.#appendMessage("user", message);
     this.#setBusy(true);
@@ -32462,6 +32590,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       this.#dispatchClientError(error51, "turn_failed");
       throw error51;
     } finally {
+      this.#turnInFlight = false;
       if (this.#pendingUserEcho === message) this.#pendingUserEcho = void 0;
       if (generation === this.#conversationGeneration) this.#setBusy(false);
     }
@@ -32530,6 +32659,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #primeSession() {
     if (!this.sessionEndpoint && !this.embedId) return;
     if (this.#sessionBootstrap || this.#client?.hasSession()) return;
+    if (this.#client?.isBusy?.() === true) return;
     if (this.embedId && !this.#pageContext) void this.#automaticPageContext.refresh();
     const client = this.#ensureClient();
     const generation = this.#conversationGeneration;
@@ -32537,6 +32667,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     const bootstrap = client.connect().catch((error51) => {
       if (generation !== this.#conversationGeneration || this.#client !== client) return;
       this.#dispatchClientError(error51, "session_failed");
+      this.#presentationGate.reveal();
     }).finally(() => {
       if (this.#sessionBootstrap === bootstrap) this.#sessionBootstrap = void 0;
     });
@@ -32546,6 +32677,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dispatchEvent(new CustomEvent("assistant-event", { detail: event }));
     this.#events.handle(event);
     if (event.event === "session_started") {
+      this.#presentationGate.reveal();
       this.#setSessionState("ready");
       this.#messages?.querySelector(".conversation-error")?.remove();
     }
@@ -32559,6 +32691,8 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (event.event === "content" || event.event === "message_completed" || event.event === "interaction_completed" || event.event === "error") {
       this.#removeThinking();
     }
+    if (event.event === "resume_started") this.#setBusy(true);
+    if (event.event === "message_completed" || event.event === "error") this.#setBusy(false);
   }
   #setBusy(busy) {
     this.toggleAttribute("busy", busy);
@@ -32713,11 +32847,6 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#sessionState = state;
     syncAssistantSessionVisualState(this, this.shadowRoot, state, this.#appearance);
   }
-  #syncOpenState() {
-    const open = this.hasAttribute("open");
-    this.shadowRoot?.querySelector(".launcher")?.setAttribute("aria-expanded", String(open));
-    if (open && this.isConnected) this.#primeSession();
-  }
   #closeAndRestoreFocus() {
     this.close();
     this.shadowRoot?.querySelector(".launcher")?.focus();
@@ -32767,7 +32896,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     queryRequired(this.shadowRoot, "header").hidden = !appearance.behavior.showHeader;
     const legal = queryRequired(this.shadowRoot, ".legal");
     legal.replaceChildren();
-    this.#appendLegalLinks(legal);
+    appendLegalLinks(legal, this.#appearance);
     this.#applyTheme();
   }
   #render() {
@@ -32783,20 +32912,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dataset.position = appearance.layout.position;
     this.dataset.density = appearance.layout.density;
     this.toggleAttribute("mobile-fullscreen", appearance.layout.mobileFullscreen);
-    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)}"></button></header>
-        <div class="welcome"><slot name="empty-state"></slot></div>
-        <div class="suggested-prompts"></div>
-        <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>
-      </section>`;
+    this.shadowRoot.innerHTML = assistantElementMarkup(
+      appearance,
+      this.hasAttribute("open"),
+      `${ASSISTANT_ELEMENT_STYLES}${presentationStyles}`
+    );
     queryRequired(this.shadowRoot, "strong").textContent = appearance.brand.name;
     const logo = queryRequired(this.shadowRoot, ".brand-logo");
     const logoUrl = appearance.brand.logo[this.#resolvedMode()];
@@ -32823,7 +32943,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (!appearance.behavior.showHeader)
       queryRequired(this.shadowRoot, "header").hidden = true;
     const legal = queryRequired(this.shadowRoot, ".legal");
-    this.#appendLegalLinks(legal);
+    appendLegalLinks(legal, this.#appearance);
     this.#messages = this.shadowRoot.querySelector(".messages") ?? void 0;
     this.#messages?.append(...conversation);
     this.#thinking = this.#messages?.querySelector(".thinking") ?? void 0;
@@ -32862,20 +32982,6 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     });
     this.#applyTheme();
   }
-  #appendLegalLinks(legal) {
-    for (const [label, href] of [
-      ["Privacy", this.#appearance.privacyUrl],
-      ["Terms", this.#appearance.termsUrl]
-    ]) {
-      if (!href) continue;
-      const link = document.createElement("a");
-      link.href = href;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      link.textContent = label;
-      legal.append(link);
-    }
-  }
 };
 function registerNoodleAssistant() {
   if (globalThis.customElements && !customElements.get(ASSISTANT_TAG_NAME)) {