@noodleseed/assistant 1.20.0 → 1.22.0

package/README.md

@@ -222,7 +222,10 @@ instead of `sessionEndpoint` — the two are mutually exclusive, and a public em
 ```
 
 A public embed opens its session on **first open**, never on mount — every mount would otherwise spend
-one of the surface's daily admission budget. Add `signIn: true` to the surface and it becomes **mixed**:
+one of the surface's daily admission budget. While that first session is resolving, the launcher remains as
+a loading affordance and the panel stays hidden. The panel's first visible frame therefore already carries
+the deployment's compiled name, labels, presentation, and light/dark brand tokens instead of flashing the
+built-in defaults. Add `signIn: true` to the surface and it becomes **mixed**:
 anonymous visitors start immediately, and identity-dependent capabilities raise the sign-in flow below.
 Before shipping, preflight the host with `noodle assistant embed --check --surface public` (or `mixed`) —
 it verifies `script-src` too, the one CSP directive whose failure runs no widget code at all.
@@ -246,7 +249,14 @@ const session = await createAssistantSession({
 });
 ```
 
-The visitor keeps the same conversation with a new token; the anonymous token dies at that moment.
+The visitor keeps the same conversation with a new token; the anonymous token dies at that moment —
+and by default **the assistant answers the pending question itself**: the service re-attempts the
+intercepted tool under the signed-in principal and streams the result as the session's first turn,
+so the panel's first content after sign-in is the answer the visitor asked for. It is one-shot
+(consumed by that turn, or mooted the moment the visitor types first), confirm-gated tools stop at
+their normal confirmation card — sign-in is never implicit consent for a write — and the turn counts
+against the surface's daily budget like any other. Pass `resume: false` beside the ticket if your
+application provides its own post-login affordance.
 `signInTicket` and `context` are mutually exclusive — an elevation continues an existing session.
 `routing` IS accepted here, and this is the moment to send it: elevation is the first authenticated
 exchange, so it is the only chance a routed connector's session gets its backend-verified customer
@@ -494,6 +504,21 @@ element.addEventListener("assistant-view-available", (event) => {
 });
 ```
 
+#### Readiness and call ordering
+
+`assistant-ready` fires **once per element lifetime**, when the element's shadow DOM is rendered and its
+imperative API (`sendMessage`, `confirmTool`, …) is callable. It does **not** mean a session exists — that
+is the `assistant-event` with `event: 'session_started'`. A DOM move (router reparent, portal) re-runs the
+element's connection lifecycle but never re-fires the event. The React wrapper's `onReady` mirrors this:
+at most once per component instance, whether the element upgraded before or after the component mounted;
+the first callback identity wins, and a `console.debug('[noodle-assistant] ready')` breadcrumb marks the
+moment for field diagnosis.
+
+`sendMessage` awaits an in-flight eager session exchange and never opens a second session — a message sent
+while the panel is still connecting is delivered on the session that exchange produces. It does **not**
+queue: a `sendMessage` issued while another send or response is in flight rejects with a retryable
+`request_in_progress` error before touching the transcript.
+
 Assistant text renders as provider deltas arrive. If a turn finds an expired session, the component calls
 the same authenticated session endpoint and retries that unprocessed message once. Confirmations never
 replay across sessions. React applications may observe recovery and structured failures:

package/dist/{chunk-DLUINP4W.js → chunk-6TT3R555.js}

@@ -4,7 +4,7 @@ import {
   copyAssistantPageContext,
   createAssistantClient,
   sessionSourceKey
-} from "./chunk-52XT7BLR.js";
+} from "./chunk-ZPZHPXIQ.js";
 import {
   _enum,
   _null,
@@ -6824,6 +6824,11 @@ var AssistantElementEventController = class {
       this.#completedTool = void 0;
       return;
     }
+    if (name === "resume_started") {
+      this.#startStream("message");
+      this.#host.element.dispatchEvent(new CustomEvent("assistant-message-started"));
+      return;
+    }
     if (name === "interaction_completed") {
       if (this.#streamKind !== "interaction") return;
       this.#finishInteraction(String(data.id ?? ""), String(data.action ?? "accept"));
@@ -7042,6 +7047,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 {
@@ -7083,6 +7118,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;
@@ -7198,9 +7260,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; }
@@ -7826,9 +7889,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();
@@ -7894,20 +7964,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;
@@ -7925,7 +7999,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   attributeChangedCallback(name) {
     if (name === "theme") this.#applyTheme();
-    if (name === "open") this.#syncOpenState();
+    if (name === "open") this.#presentationGate.syncOpenState();
   }
   open() {
     this.setAttribute("open", "");
@@ -8014,7 +8088,14 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   async sendMessage(text2) {
     const message = text2.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);
@@ -8031,6 +8112,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       this.#dispatchClientError(error, "turn_failed");
       throw error;
     } finally {
+      this.#turnInFlight = false;
       if (this.#pendingUserEcho === message) this.#pendingUserEcho = void 0;
       if (generation === this.#conversationGeneration) this.#setBusy(false);
     }
@@ -8099,6 +8181,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;
@@ -8106,6 +8189,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     const bootstrap = client.connect().catch((error) => {
       if (generation !== this.#conversationGeneration || this.#client !== client) return;
       this.#dispatchClientError(error, "session_failed");
+      this.#presentationGate.reveal();
     }).finally(() => {
       if (this.#sessionBootstrap === bootstrap) this.#sessionBootstrap = void 0;
     });
@@ -8115,6 +8199,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();
     }
@@ -8128,6 +8213,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);
@@ -8282,11 +8369,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();
@@ -8336,7 +8418,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() {
@@ -8352,20 +8434,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()];
@@ -8392,7 +8465,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;
@@ -8431,20 +8504,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)) {
@@ -8465,4 +8524,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-DLUINP4W.js.map
+//# sourceMappingURL=chunk-6TT3R555.js.map