dewee-webchat 0.5.0-beta.2 → 0.5.0-beta.3

package/README.md

@@ -368,6 +368,16 @@ used), `allowInsecureHttp` does not apply, a user switch under `rebindEachReques
 previous user's session at CCP, and logout revokes it through [`handler.revoke`](#signed-in-users).
 The integration's sign-in mode must allow signed-in users.
 
+### Hosted credential requests
+
+Credential requests are off by default and require CCP transport, signed-in identity, and Gateway/CCP
+support enabled for the agent. To opt in, add `credentialRequests: { formOrigin: "https://app.example.com" }`
+to the server handler options, using the exact HTTPS origin of your Dewee-hosted form. Use the ASCII
+punycode form for an internationalized domain. The form is
+opened only after the visitor chooses it; a workspace approval administrator must authenticate there.
+The widget never collects the credential value. Anonymous sessions, direct Gateway transport, and
+an untrusted form origin cannot use this flow. See the [HTTP contract](../../docs/http-contract.md#hosted-credential-requests).
+
 ```ts
 import { createDeweeHandler, optionsFromEnv } from "dewee-webchat/server";
 import { deweeIdentitySdk } from "dewee-webchat/server/identity";

package/dist/{chunk-KXW4EWXA.js → chunk-N7BJKIPT.js}

@@ -21,7 +21,7 @@ function isLinkErrorCode(code) {
 }
 var HEADER_GATEWAY_URL = "x-dewee-gateway-url";
 var HEADER_GATEWAY_TOKEN = "x-dewee-gateway-token";
-var VERSION = "0.5.0-beta.2";
+var VERSION = "0.5.0-beta.3";
 
 // src/actions/page-block.ts
 var ACTION_NAME_RE = /^[a-z][a-z0-9_.-]{0,63}$/;
@@ -135,6 +135,48 @@ function parseJobAccessLaunch(raw) {
   return { bootstrap_url: url.href, launch_token: data.launch_token, expires_at: data.expires_at };
 }
 
+// src/credential-request.ts
+var uuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var statuses = /* @__PURE__ */ new Set(["pending", "applying", "resolved", "cancelled", "expired", "failed"]);
+var record = (v) => v && typeof v === "object" && !Array.isArray(v) ? v : null;
+var text = (v, max) => typeof v === "string" && v.length <= max;
+var date = (v) => text(v, 64) && Number.isFinite(Date.parse(v));
+function parseCredentialRequest(raw, expectedAgent) {
+  const v = record(raw);
+  const target = record(v?.target);
+  if (!v || !target || !text(v.id, 36) || !uuid.test(v.id) || v.schema_version !== "webchat-credential-request.v1" || typeof v.status !== "string" || !statuses.has(v.status) || !text(v.title, 300) || !text(v.purpose, 4e3) || !text(target.type, 100) || !text(target.mode, 100) || !Array.isArray(v.fields) || v.fields.length > 32 || !date(v.expires_at) || v.agent_key !== expectedAgent || v.completion !== "hosted" || typeof v.resumable !== "boolean") return null;
+  const fields = [];
+  for (const item of v.fields) {
+    const f = record(item);
+    if (!f || !text(f.key, 100) || !/^[A-Za-z0-9_.-]+$/.test(f.key) || !text(f.label, 300) || !text(f.kind, 100) || typeof f.required !== "boolean") return null;
+    fields.push({ key: f.key, label: f.label, kind: f.kind, required: f.required });
+  }
+  return {
+    id: v.id,
+    schema_version: "webchat-credential-request.v1",
+    status: v.status,
+    title: v.title,
+    purpose: v.purpose,
+    target: { type: target.type, mode: target.mode },
+    fields,
+    expires_at: v.expires_at,
+    agent_key: expectedAgent,
+    completion: "hosted",
+    resumable: v.resumable
+  };
+}
+function parseCredentialHandoff(raw, expectedId, trustedOrigin) {
+  const v = record(raw);
+  if (!v || v.credential_request_id !== expectedId || !text(v.url, 4096) || !date(v.expires_at) || Date.parse(v.expires_at) <= Date.now()) return null;
+  try {
+    const url = new URL(v.url);
+    if (url.protocol !== "https:" || url.origin !== trustedOrigin || url.username || url.password || url.hash || url.pathname !== "/credential-requests/open" || !/^\?token=[A-Za-z0-9_-]{43}$/.test(url.search)) return null;
+    return { credential_request_id: expectedId, url: url.href, expires_at: v.expires_at };
+  } catch {
+    return null;
+  }
+}
+
 export {
   isIdentityErrorCode,
   ADMISSION_ERROR_CODES,
@@ -152,5 +194,7 @@ export {
   hashManifest,
   buildPageBlock,
   stripPageBlock,
-  parseJobAccessLaunch
+  parseJobAccessLaunch,
+  parseCredentialRequest,
+  parseCredentialHandoff
 };

package/dist/{chunk-XCO4TCKF.js → chunk-Q5RDSRZG.js}

@@ -7,9 +7,11 @@ import {
   isAdmissionErrorCode,
   isIdentityErrorCode,
   isLinkErrorCode,
+  parseCredentialHandoff,
+  parseCredentialRequest,
   parseJobAccessLaunch,
   stripPageBlock
-} from "./chunk-KXW4EWXA.js";
+} from "./chunk-N7BJKIPT.js";
 
 // src/actions/directives.ts
 var DIRECTIVE_LANG = "dewee-action";
@@ -846,10 +848,34 @@ var ApiClient = class {
     return this.parse(res);
   }
   async history(agent, conversationId) {
+    return (await this.historyDetails(agent, conversationId)).messages;
+  }
+  async historyDetails(agent, conversationId) {
     const res = await this.signedInRequest(
       async () => this.request(this.url("history", { agent, conversationId }), { headers: await this.headers(true) })
     );
-    return (await this.parse(res)).messages;
+    const data = await this.parse(res);
+    const cards = this.session?.verified && this.config?.credentialFormOrigin && Array.isArray(data.credentialRequests) ? data.credentialRequests.slice(0, 100).map((v) => parseCredentialRequest(v, agent)).filter((v) => v !== null) : [];
+    return { messages: data.messages, credentialRequests: cards };
+  }
+  /** Never retry a credential action under a newly authenticated identity. */
+  async credentialRequest(route, agent, conversationId, credentialRequestId, signal) {
+    const session = await this.ensureSession();
+    const origin = (await this.getConfig()).credentialFormOrigin;
+    if (!session.verified || !origin) throw new ApiError("Credential request is unavailable", 403, "credential_request_unavailable");
+    try {
+      const headers = await this.headers(true);
+      if (this.session !== session) throw new Error("identity changed");
+      const response = await this.request(this.url(route), { method: "POST", headers, body: JSON.stringify({ agent, conversationId, credentialRequestId }), redirect: "error", signal });
+      const data = await this.parse(response);
+      if (this.session !== session) throw new Error("identity changed");
+      const result = route === "credential-request-handoff" ? parseCredentialHandoff(data, credentialRequestId, origin) : parseCredentialRequest(data.credentialRequest, agent);
+      if (!result || "id" in result && result.id !== credentialRequestId) throw new Error("invalid credential request");
+      return result;
+    } catch (error) {
+      const code = error instanceof ApiError && ["credential_requests_unavailable", "credential_request_not_found", "credential_request_not_ready", "credential_request_resumed"].includes(error.code ?? "") ? error.code : "credential_request_unavailable";
+      throw new ApiError("Credential request is unavailable", error instanceof ApiError ? error.status : 0, code);
+    }
   }
   /**
    * Sends a request with the current session. A signed-in session the backend refuses (expired,
@@ -868,7 +894,7 @@ var ApiClient = class {
   async chat(input, onEvent, signal) {
     await this.ensureSession();
     let res = await this.request(this.url("chat"), { method: "POST", headers: await this.headers(true), body: JSON.stringify(input), signal });
-    if (res.status === 401) {
+    if (res.status === 401 && !input.credentialRequestId) {
       const before = this.visitorId();
       this.forgetSession();
       await this.ensureSession();
@@ -895,6 +921,11 @@ var ApiClient = class {
         } catch {
           continue;
         }
+        if (event.type === "credential_request") {
+          const view = this.session?.verified && this.config?.credentialFormOrigin ? parseCredentialRequest(event.credentialRequest, input.agent) : null;
+          if (!view) continue;
+          event = { type: "credential_request", credentialRequest: view };
+        }
         if (event.type === "error" && event.code && RENEW_CODES.has(event.code)) renew = true;
         try {
           onEvent(event);
@@ -1148,7 +1179,8 @@ var en = {
   jobAccessPopupClosed: "The window was closed. Choose Job access again to retry.",
   pageShare: "Share this page with the assistant for this message",
   pageChanged: "The page changed. Review it and choose to share again before sending.",
-  pageUnavailable: "Page details are unavailable. You can send without them."
+  pageUnavailable: "Page details are unavailable. You can send without them.",
+  credential: { open: "Open secure form", cancel: "Cancel request", continue: "Continue conversation", unavailable: "Could not open or update the request. Please try again.", intro: "Enter credentials only on the authenticated Dewee form.", required: "required", optional: "optional", expires: "Expires", status: { pending: "Waiting for you", applying: "Processing", resolved: "Completed", cancelled: "Cancelled", expired: "Expired", failed: "Failed" } }
 };
 var vi = {
   title: "Tr\u1EE3 l\xFD",
@@ -1211,7 +1243,8 @@ var vi = {
   jobAccessPopupClosed: "C\u1EEDa s\u1ED5 \u0111\xE3 \u0111\xF3ng. Ch\u1ECDn Quy\u1EC1n c\xF4ng vi\u1EC7c l\u1EA7n n\u1EEFa \u0111\u1EC3 th\u1EED l\u1EA1i.",
   pageShare: "Chia s\u1EBB trang n\xE0y v\u1EDBi tr\u1EE3 l\xFD trong tin nh\u1EAFn n\xE0y",
   pageChanged: "Trang \u0111\xE3 thay \u0111\u1ED5i. H\xE3y xem l\u1EA1i v\xE0 ch\u1ECDn chia s\u1EBB tr\u01B0\u1EDBc khi g\u1EEDi.",
-  pageUnavailable: "Kh\xF4ng th\u1EC3 \u0111\u1ECDc n\u1ED9i dung trang. B\u1EA1n v\u1EABn c\xF3 th\u1EC3 g\u1EEDi tin nh\u1EAFn."
+  pageUnavailable: "Kh\xF4ng th\u1EC3 \u0111\u1ECDc n\u1ED9i dung trang. B\u1EA1n v\u1EABn c\xF3 th\u1EC3 g\u1EEDi tin nh\u1EAFn.",
+  credential: { open: "M\u1EDF bi\u1EC3u m\u1EABu b\u1EA3o m\u1EADt", cancel: "H\u1EE7y y\xEAu c\u1EA7u", continue: "Ti\u1EBFp t\u1EE5c tr\xF2 chuy\u1EC7n", unavailable: "Ch\u01B0a th\u1EC3 m\u1EDF ho\u1EB7c c\u1EADp nh\u1EADt y\xEAu c\u1EA7u. B\u1EA1n th\u1EED l\u1EA1i nh\xE9.", intro: "Ch\u1EC9 nh\u1EADp th\xF4ng tin x\xE1c th\u1EF1c tr\xEAn bi\u1EC3u m\u1EABu Dewee sau khi \u0111\u0103ng nh\u1EADp.", required: "b\u1EAFt bu\u1ED9c", optional: "t\xF9y ch\u1ECDn", expires: "H\u1EBFt h\u1EA1n", status: { pending: "\u0110ang ch\u1EDD b\u1EA1n", applying: "\u0110ang x\u1EED l\xFD", resolved: "\u0110\xE3 ho\xE0n t\u1EA5t", cancelled: "\u0110\xE3 h\u1EE7y", expired: "\u0110\xE3 h\u1EBFt h\u1EA1n", failed: "Kh\xF4ng th\xE0nh c\xF4ng" } }
 };
 function pickStrings(locale) {
   const l = (locale || (typeof document !== "undefined" ? document.documentElement.lang : "") || (typeof navigator !== "undefined" ? navigator.language : "") || "en").toLowerCase();
@@ -1758,6 +1791,11 @@ details > summary svg.ic { width: 14px; height: 14px; flex: none; }
 .btn.allow { background: var(--dw-accent); border-color: var(--dw-accent); color: var(--dw-accent-contrast); }
 .btn.allow.danger { background: #c2334f; border-color: #c2334f; color: #fff; }
 .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--dw-accent) 45%, transparent); outline-offset: 2px; }
+.credential-request .bubble { overflow-wrap: anywhere; max-width: 100%; }
+.credential-request p { margin: 8px 0; }
+.credential-request .spin { display: inline-block; vertical-align: middle; }
+.credential-request ul { margin: 8px 0; padding-inline-start: 20px; }
+.credential-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 
 /* ---------- composer ---------- */
 .composer { padding: 10px 12px 12px; border-top: 1px solid var(--dw-border); background: var(--dw-bg); }
@@ -1796,6 +1834,7 @@ textarea::placeholder { color: var(--dw-muted); }
 
 // src/widget/element.ts
 var DEFAULT_COOLDOWN_MS = 5e3;
+var CREDENTIAL_GONE_CODES = /* @__PURE__ */ new Set(["credential_requests_unavailable", "credential_request_not_found"]);
 var BOOL_ATTRS = ["show-reasoning", "show-tool-calls", "allow-agent-switch", "open", "persist", "hide-branding", "launcher-avatar", "dom-actions"];
 var ATTRS = [
   "endpoint",
@@ -1878,6 +1917,11 @@ var DeweeChatElement = class extends ElementBase {
   messages = [];
   running = null;
   jobAccessLaunch = null;
+  credentialCards = /* @__PURE__ */ new Map();
+  credentialGeneration = 0;
+  credentialBusy = /* @__PURE__ */ new Set();
+  credentialPopups = /* @__PURE__ */ new Map();
+  credentialRequestsInFlight = /* @__PURE__ */ new Set();
   activated = false;
   probedPage = false;
   strings = pickStrings();
@@ -2057,6 +2101,7 @@ var DeweeChatElement = class extends ElementBase {
   }
   /** One request/response with the agent. */
   async runTurn(message, hidden, attachment) {
+    const generation = this.credentialGeneration;
     this.pushMessage({ role: "user", content: message, hidden });
     const reply = { role: "assistant", content: "", status: "streaming", startedAt: Date.now() };
     this.pushMessage(reply);
@@ -2064,7 +2109,9 @@ var DeweeChatElement = class extends ElementBase {
     this.emit("dewee:send", { message, agent: this.agentId, conversationId: this.conversationId, auto: hidden || void 0 });
     try {
       await this.client().ensureSession();
-      await this.client().chat({ ...this.chatBody(message), ...attachment ? { page_context: attachment } : {} }, (e) => this.onStreamEvent(reply, e), this.running.signal);
+      await this.client().chat({ ...this.chatBody(message), ...attachment ? { page_context: attachment } : {} }, (e) => {
+        if (generation === this.credentialGeneration) this.onStreamEvent(reply, e);
+      }, this.running.signal);
       if (reply.status === "streaming") reply.status = "done";
     } catch (e) {
       if (e.name === "AbortError") {
@@ -2192,6 +2239,8 @@ var DeweeChatElement = class extends ElementBase {
    */
   async renewSession() {
     this.stop();
+    this.clearCredentials();
+    this.renderLog();
     try {
       await this.client().renewSession();
     } catch (e) {
@@ -2284,6 +2333,7 @@ var DeweeChatElement = class extends ElementBase {
   /** Starts a fresh conversation with the current agent. */
   newConversation() {
     this.stop();
+    this.clearCredentials();
     this.conversationId = randomConversationId();
     if (this.config.persist !== false) store2.set(this.convKey(), this.conversationId);
     this.messages = [];
@@ -2300,6 +2350,7 @@ var DeweeChatElement = class extends ElementBase {
     }
   }
   disconnectedCallback() {
+    this.clearCredentials();
     this.pageGeneration++;
     this.sharedPage = void 0;
     this.els.pageChoice.checked = false;
@@ -2644,6 +2695,8 @@ var DeweeChatElement = class extends ElementBase {
     await this.loadConversation();
   }
   async loadConversation() {
+    this.clearCredentials();
+    const generation = this.credentialGeneration;
     const persist = this.config.persist !== false;
     const saved = persist ? store2.get(this.convKey()) : null;
     this.conversationId = saved || randomConversationId();
@@ -2652,8 +2705,10 @@ var DeweeChatElement = class extends ElementBase {
     this.renderLog();
     if (!saved) return;
     try {
-      const history = await this.client().history(this.agentId, this.conversationId);
-      this.messages = decorateHistory(history.map((m) => ({ ...m, status: "done" })));
+      const history = await this.client().historyDetails(this.agentId, this.conversationId);
+      if (generation !== this.credentialGeneration) return;
+      this.messages = decorateHistory(history.messages.map((m) => ({ ...m, status: "done" })));
+      for (const card of history.credentialRequests) this.credentialCards.set(card.id, card);
       this.renderLog();
     } catch {
     }
@@ -2664,8 +2719,202 @@ var DeweeChatElement = class extends ElementBase {
     log.replaceChildren();
     if (!this.messages.length) log.appendChild(this.renderWelcome());
     for (const m of this.messages) log.appendChild(this.renderMessage(m));
+    for (const card of this.credentialCards.values()) log.appendChild(this.renderCredential(card));
     log.scrollTop = log.scrollHeight;
   }
+  clearCredentials() {
+    this.credentialGeneration++;
+    for (const id of this.credentialPopups.keys()) this.closeCredentialPopup(id);
+    for (const request of this.credentialRequestsInFlight) request.abort();
+    this.credentialRequestsInFlight.clear();
+    this.credentialCards.clear();
+    this.credentialBusy.clear();
+  }
+  closeCredentialPopup(id) {
+    const active = this.credentialPopups.get(id);
+    if (!active) return;
+    this.credentialPopups.delete(id);
+    if (active.timer) clearTimeout(active.timer);
+    active.controller.abort();
+    try {
+      active.popup.close();
+    } catch {
+    }
+  }
+  discardCredential(id) {
+    this.closeCredentialPopup(id);
+    this.credentialCards.delete(id);
+  }
+  credentialButton(card, label, run, disabled = false) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn";
+    button.textContent = label;
+    button.disabled = disabled || this.credentialBusy.has(card.id);
+    button.addEventListener("click", run);
+    return button;
+  }
+  renderCredential(card) {
+    const root = document.createElement("section");
+    root.className = "msg assistant credential-request";
+    const bubble = document.createElement("div");
+    bubble.className = "bubble";
+    const title = document.createElement("strong");
+    title.textContent = card.title;
+    const purpose = document.createElement("p");
+    purpose.textContent = card.purpose;
+    const intro = document.createElement("p");
+    intro.textContent = this.strings.credential.intro;
+    const destination = document.createElement("p");
+    destination.textContent = [card.target.type, card.target.mode].filter(Boolean).join(" \xB7 ");
+    const status = document.createElement("p");
+    status.setAttribute("role", "status");
+    const effective = card.status === "pending" && Date.parse(card.expires_at) <= Date.now() ? "expired" : card.status;
+    if (this.credentialBusy.has(card.id)) {
+      root.setAttribute("aria-busy", "true");
+      const spinner = document.createElement("span");
+      spinner.className = "spin";
+      spinner.setAttribute("aria-hidden", "true");
+      status.append(spinner, ` ${this.strings.credential.status.applying}`);
+    } else status.textContent = this.strings.credential.status[effective];
+    const list = document.createElement("ul");
+    for (const field of card.fields) {
+      const li = document.createElement("li");
+      li.textContent = `${field.label} (${field.required ? this.strings.credential.required : this.strings.credential.optional})`;
+      list.appendChild(li);
+    }
+    const expiry = document.createElement("p");
+    expiry.textContent = `${this.strings.credential.expires}: ${new Date(card.expires_at).toLocaleString()}`;
+    const actions = document.createElement("div");
+    actions.className = "credential-actions";
+    if (effective === "pending") {
+      actions.append(
+        this.credentialButton(card, this.strings.credential.open, () => {
+          void this.openCredential(card);
+        }, this.credentialPopups.has(card.id)),
+        this.credentialButton(card, this.strings.credential.cancel, () => {
+          void this.updateCredential(card, "credential-request-cancel");
+        })
+      );
+    }
+    if (card.resumable) actions.append(this.credentialButton(card, this.strings.credential.continue, () => {
+      void this.resumeCredential(card);
+    }));
+    bubble.append(title, purpose, destination, list, intro, expiry, status, actions);
+    root.appendChild(bubble);
+    return root;
+  }
+  async updateCredential(card, route) {
+    if (!this.credentialCards.has(card.id) || this.credentialBusy.has(card.id)) return;
+    const generation = this.credentialGeneration, agent = this.agentId, conversation = this.conversationId;
+    const controller = new AbortController();
+    this.credentialRequestsInFlight.add(controller);
+    this.credentialBusy.add(card.id);
+    this.renderLog();
+    try {
+      const result = await this.client().credentialRequest(route, agent, conversation, card.id, controller.signal);
+      if (generation !== this.credentialGeneration || !("id" in result)) return;
+      this.credentialCards.set(result.id, result);
+      if (route === "credential-request-cancel") this.closeCredentialPopup(card.id);
+    } catch (error) {
+      if (generation === this.credentialGeneration && error instanceof ApiError && CREDENTIAL_GONE_CODES.has(error.code ?? "")) this.discardCredential(card.id);
+      else if (generation === this.credentialGeneration && route !== "credential-request") this.showNotice(this.strings.credential.unavailable);
+    } finally {
+      this.credentialRequestsInFlight.delete(controller);
+      if (generation === this.credentialGeneration) {
+        this.credentialBusy.delete(card.id);
+        this.renderLog();
+      }
+    }
+  }
+  async openCredential(card) {
+    if (this.credentialCards.get(card.id) !== card || this.credentialBusy.has(card.id) || this.credentialPopups.has(card.id)) return;
+    let popup;
+    try {
+      popup = window.open("about:blank", `dewee-credential-${crypto.randomUUID()}`, "popup,width=720,height=800");
+    } catch {
+      popup = null;
+    }
+    if (!popup) {
+      this.showNotice(this.strings.credential.unavailable);
+      return;
+    }
+    const generation = this.credentialGeneration, agent = this.agentId, conversation = this.conversationId;
+    const active = { popup, controller: new AbortController(), timer: void 0 };
+    this.credentialPopups.set(card.id, active);
+    this.credentialBusy.add(card.id);
+    this.renderLog();
+    try {
+      popup.opener = null;
+      const result = await this.client().credentialRequest("credential-request-handoff", agent, conversation, card.id, active.controller.signal);
+      if (generation !== this.credentialGeneration || popup.closed || !("url" in result)) throw new Error("cancelled");
+      const meta = popup.document.createElement("meta");
+      meta.name = "referrer";
+      meta.content = "no-referrer";
+      popup.document.head.append(meta);
+      popup.location.replace(result.url);
+      const poll = async () => {
+        if (generation !== this.credentialGeneration) return;
+        const before = this.credentialCards.get(card.id);
+        if (before && (before.status === "pending" || before.status === "applying")) await this.updateCredential(before, "credential-request");
+        const current = this.credentialCards.get(card.id);
+        if (generation === this.credentialGeneration && !popup.closed && current && Date.parse(current.expires_at) > Date.now() && this.credentialPopups.get(card.id) === active) {
+          if (current.status === "pending" || current.status === "applying") active.timer = setTimeout(poll, 4e3);
+          else {
+            this.closeCredentialPopup(card.id);
+            this.renderLog();
+          }
+        } else {
+          if (this.credentialPopups.get(card.id) === active) this.closeCredentialPopup(card.id);
+          if (generation === this.credentialGeneration) this.renderLog();
+        }
+      };
+      active.timer = setTimeout(poll, 4e3);
+    } catch {
+      if (this.credentialPopups.get(card.id) === active) this.closeCredentialPopup(card.id);
+      if (generation === this.credentialGeneration) this.showNotice(this.strings.credential.unavailable);
+    } finally {
+      if (generation === this.credentialGeneration) {
+        this.credentialBusy.delete(card.id);
+        this.renderLog();
+      }
+    }
+  }
+  async resumeCredential(card) {
+    if (this.credentialCards.get(card.id) !== card || this.running || this.credentialBusy.has(card.id)) return;
+    const generation = this.credentialGeneration, agent = this.agentId, conversation = this.conversationId;
+    const reply = { role: "assistant", content: "", status: "streaming", startedAt: Date.now() };
+    const controller = new AbortController();
+    this.credentialBusy.add(card.id);
+    this.pushMessage(reply);
+    this.setRunning(controller);
+    try {
+      await this.client().chat({ message: "", agent, conversationId: conversation, credentialRequestId: card.id }, (event) => {
+        if (generation === this.credentialGeneration) this.onStreamEvent(reply, event);
+      }, this.running.signal);
+      if (reply.status === "streaming") reply.status = "done";
+      if (generation === this.credentialGeneration) {
+        this.credentialBusy.delete(card.id);
+        await this.updateCredential(card, "credential-request");
+      }
+    } catch (error) {
+      if (generation === this.credentialGeneration) {
+        this.messages = this.messages.filter((message) => message !== reply);
+        if (error instanceof ApiError && CREDENTIAL_GONE_CODES.has(error.code ?? "")) this.discardCredential(card.id);
+        else if (error instanceof ApiError && error.code === "credential_request_resumed") {
+          this.credentialBusy.delete(card.id);
+          await this.updateCredential(card, "credential-request");
+        } else this.showNotice(this.strings.credential.unavailable);
+      }
+    } finally {
+      if (this.running === controller) this.setRunning(null);
+      if (generation === this.credentialGeneration) {
+        this.credentialBusy.delete(card.id);
+        this.updateMessage(reply);
+        this.renderLog();
+      }
+    }
+  }
   renderWelcome() {
     const c = this.config;
     const s = this.strings;
@@ -2852,6 +3101,10 @@ var DeweeChatElement = class extends ElementBase {
         t.isError = e.isError;
         break;
       }
+      case "credential_request":
+        this.credentialCards.set(e.credentialRequest.id, e.credentialRequest);
+        this.renderLog();
+        break;
       case "done":
         this.finishThinking(m);
         if (e.content && e.content.length >= m.content.length) m.content = e.content;