@noodleseed/assistant 1.22.0 → 1.24.0

package/dist/index.cjs

@@ -22112,11 +22112,11 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
-function createAssistantAppHostContext(theme) {
+function createAssistantAppHostContext(theme, allowFullscreen = false, displayMode = "inline") {
   return {
     theme,
-    displayMode: "inline",
-    availableDisplayModes: ["inline", "fullscreen"],
+    displayMode: allowFullscreen && displayMode === "fullscreen" ? "fullscreen" : "inline",
+    availableDisplayModes: allowFullscreen ? ["inline", "fullscreen"] : ["inline"],
     platform: "web"
   };
 }
@@ -22142,6 +22142,13 @@ function mountAssistantApp(detail, actions, options = {}) {
     title.textContent = detail.title;
     card.append(title);
   }
+  const exitFullscreen = document.createElement("button");
+  exitFullscreen.className = "noodle-app-fullscreen-exit";
+  exitFullscreen.type = "button";
+  exitFullscreen.setAttribute("aria-label", "Exit fullscreen");
+  exitFullscreen.title = "Exit fullscreen";
+  exitFullscreen.hidden = true;
+  card.append(exitFullscreen);
   const frame = document.createElement("iframe");
   frame.className = "noodle-app-frame";
   frame.title = detail.title ?? detail.tool;
@@ -22155,8 +22162,31 @@ function mountAssistantApp(detail, actions, options = {}) {
   let mountedTransport;
   let destroyed = false;
   let initialized = false;
-  let hostContext = createAssistantAppHostContext(actions.theme);
+  let currentTheme = actions.theme;
+  let displayMode = "inline";
+  let hostContext = createAssistantAppHostContext(
+    currentTheme,
+    options.allowFullscreen === true,
+    displayMode
+  );
   let destroyPromise;
+  const applyDisplayMode = (requestedMode) => {
+    displayMode = requestedMode === "fullscreen" && options.allowFullscreen === true ? "fullscreen" : "inline";
+    card.toggleAttribute("data-fullscreen", displayMode === "fullscreen");
+    exitFullscreen.hidden = displayMode !== "fullscreen";
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+    return displayMode;
+  };
+  exitFullscreen.addEventListener("click", () => {
+    if (destroyed) return;
+    applyDisplayMode("inline");
+    frame.focus();
+  });
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -22214,6 +22244,11 @@ function mountAssistantApp(detail, actions, options = {}) {
         actions.updateModelContext(update);
         return {};
       };
+      bridge.onrequestteardown = () => {
+        if (destroyed) return;
+        options.onTeardownRequest?.();
+        void destroy();
+      };
       bridge.onopenlink = async ({ url: url2 }) => {
         if (destroyed) return { isError: true };
         const current = options.getDetail?.() ?? detail;
@@ -22227,10 +22262,8 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
-        const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
-        if (destroyed) return { mode: accepted };
-        card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
-        return { mode: accepted };
+        if (destroyed) return { mode: displayMode };
+        return { mode: applyDisplayMode(mode) };
       };
       bridge.oncalltool = async (params) => {
         if (destroyed) {
@@ -22275,7 +22308,12 @@ function mountAssistantApp(detail, actions, options = {}) {
   );
   const updateTheme = (theme) => {
     if (destroyed) return;
-    hostContext = createAssistantAppHostContext(theme);
+    currentTheme = theme;
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
     if (initialized) mountedBridge?.setHostContext(hostContext);
   };
   const destroy = () => {
@@ -22410,6 +22448,7 @@ var DEFAULT_APPEARANCE = {
     copy: "Copy",
     newMessages: "New messages",
     reconnect: "Reconnect",
+    newConversation: "New conversation",
     retry: "Try again",
     unavailable: "The assistant is temporarily unavailable.",
     sessionExpired: "Your assistant session expired. Reopen it to continue.",
@@ -28119,6 +28158,27 @@ function appInteractionStopped(action) {
   };
 }
 
+// src/conversation-recovery.ts
+function appendConversationRecovery(input) {
+  if (!input.messages) return;
+  input.messages.querySelector(".conversation-error")?.remove();
+  const error51 = document.createElement("section");
+  error51.className = "conversation-error";
+  error51.setAttribute("role", input.action ? "alert" : "status");
+  const text3 = document.createElement("p");
+  text3.textContent = input.message;
+  error51.append(text3);
+  if (input.action) {
+    const button2 = document.createElement("button");
+    button2.type = "button";
+    button2.textContent = input.action.label;
+    button2.addEventListener("click", input.action.run);
+    error51.append(button2);
+  }
+  input.messages.append(error51);
+  input.revealLatest();
+}
+
 // src/input-request-card.ts
 function createInputRequestCard(options) {
   const card = document.createElement("section");
@@ -31724,6 +31784,29 @@ var AssistantElementScrollController = class {
   }
 };
 
+// src/app-view-styles.ts
+var ASSISTANT_APP_VIEW_CSS = `
+  .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, var(--ns-app-view-border, #d1d5db)))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius, 12px)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
+  .noodle-app-fullscreen-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text, var(--ns-app-view-muted, #6b7280))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: 999px; background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer; font: inherit; transition: color .15s ease, background .15s ease, transform .15s ease; }
+  .noodle-app-fullscreen-exit[hidden] { display: none; }
+  .noodle-app-fullscreen-exit::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .noodle-app-fullscreen-exit:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text, inherit)); background: var(--ns-assistant-hover, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-fullscreen-exit:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus, #2563eb)); outline-offset: 2px; }
+  .noodle-app-fullscreen-exit:active { transform: scale(.96); }
+  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
+  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, var(--ns-app-view-muted, #6b7280))); }
+  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel, var(--ns-app-view-surface, #fff))); }
+  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+`;
+var ASSISTANT_APP_VIEW_STYLES = `<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  :host { --ns-app-view-surface: #fff; --ns-app-view-border: #d1d5db; --ns-app-view-muted: #6b7280; display: block; min-width: 0; color: #111827; color-scheme: light; font: inherit; }
+  :host([data-theme="dark"]) { --ns-app-view-surface: #17191f; --ns-app-view-border: #343741; --ns-app-view-muted: #a7adb8; color: #f3f4f6; color-scheme: dark; }
+  :host([hidden]) { display: none; }
+  ${ASSISTANT_APP_VIEW_CSS}
+</style>`;
+
 // src/element-styles.ts
 var ASSISTANT_ELEMENT_STYLES = `<style>
   *, *::before, *::after { box-sizing: border-box; }
@@ -31826,12 +31909,7 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request input[type="checkbox"] { width: auto; min-height: auto; justify-self: start; accent-color: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
   .input-request input:focus-visible, .input-request select:focus-visible { border-color: var(--ns-assistant-focus, var(--ns-assistant-default-focus)); box-shadow: 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   .input-request .proposal-actions { margin-top: 2px; }
-  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); }
-  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
-  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
-  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, #6b7280)); }
-  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); }
-  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+  ${ASSISTANT_APP_VIEW_CSS}
   form { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 56px; margin: 8px 16px 16px; padding: 6px 6px 6px 16px; color: var(--ns-assistant-composer-text, inherit); border: 1px solid var(--ns-assistant-composer-border, color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 86%, transparent)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); background: var(--ns-assistant-composer, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 92%, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.035); transition: border-color .15s ease, box-shadow .15s ease; }
   form:focus-within { box-shadow: inset 0 0 0 1px var(--ns-assistant-focus, var(--ns-assistant-default-focus)), 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   textarea { flex: 1; min-height: 24px; max-height: 120px; resize: none; padding: 0; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; line-height: 24px; }
@@ -32787,33 +32865,28 @@ var NoodleAssistantElement = class extends HTMLElementBase {
       this.#setSessionState("error");
     }
     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,
+    const startNewConversation = detail.serviceCode === "session_turn_budget_exhausted";
+    const reconnect = detail.retryable !== false || detail.serviceCode === void 0;
+    const recoveryAction = startNewConversation ? {
+      label: this.#appearance.labels.newConversation,
+      run: () => this.#startNewConversation()
+    } : reconnect ? { label: this.#appearance.labels.reconnect, run: () => this.reconnect() } : void 0;
+    appendConversationRecovery({
+      messages: this.#messages,
+      message: detail.code === "session_expired" ? this.#appearance.labels.sessionExpired : this.#appearance.labels.unavailable,
       // A spent or switched-off daily budget offers no retry. Reconnecting cannot succeed, and every
       // open tab trying is exactly the load the cap was set to refuse — so the button goes, not just
       // the alarming words. A spent *session* keeps it: reconnect mints a fresh one, which is the fix.
-      detail.retryable !== false || detail.serviceCode === void 0
-    );
+      ...recoveryAction === void 0 ? {} : { action: recoveryAction },
+      revealLatest: () => this.#revealLatest()
+    });
     this.#dispatchError(detail);
   }
-  #appendRecoveryError(message, offerRetry = true) {
-    if (!this.#messages) return;
-    this.#messages.querySelector(".conversation-error")?.remove();
-    const error51 = document.createElement("section");
-    error51.className = "conversation-error";
-    error51.setAttribute("role", offerRetry ? "alert" : "status");
-    const text3 = document.createElement("p");
-    text3.textContent = message;
-    error51.append(text3);
-    if (offerRetry) {
-      const retry = document.createElement("button");
-      retry.type = "button";
-      retry.textContent = this.#appearance.labels.reconnect;
-      retry.addEventListener("click", () => this.reconnect());
-      error51.append(retry);
-    }
-    this.#messages.append(error51);
-    this.#revealLatest();
+  #startNewConversation() {
+    this.resetSession();
+    this.#setSessionState("loading");
+    this.#primeSession();
+    this.dispatchEvent(new CustomEvent("assistant-new-conversation"));
   }
   #resolvedMode() {
     const configured = this.getAttribute("theme") ?? this.#appearance.theme.defaultMode;