@ergoblockchain/sage-widget 0.1.0 → 0.3.0

package/dist/vanilla.cjs

@@ -9,13 +9,151 @@ var DEFAULT_REFRESH_MS = 6e4;
 async function fetchSageActivity(opts = {}) {
   const base = opts.apiBase ?? DEFAULT_API_BASE;
   const limit = Math.min(Math.max(opts.limit ?? DEFAULT_LIMIT, 1), 25);
-  const url = `${base}/api/sage/activity?limit=${limit}`;
+  const url = `${trimSlash(base)}/api/sage/activity?limit=${limit}`;
   const res = await fetch(url, { signal: opts.signal });
   if (!res.ok) {
     throw new Error(`sage activity ${res.status}`);
   }
   return await res.json();
 }
+async function fetchSageQuote(opts) {
+  const res = await fetch(`${apiBase(opts)}/api/sage/quote`, {
+    method: "POST",
+    headers: jsonHeaders(opts),
+    body: JSON.stringify({
+      question: opts.question,
+      history: opts.history ?? []
+    }),
+    signal: opts.signal
+  });
+  const body = await parseJson(res);
+  if (!res.ok) throw new Error(readError(body, `sage quote ${res.status}`));
+  return body;
+}
+async function verifySagePayment(opts) {
+  const res = await fetch(`${apiBase(opts)}/api/sage/verify-payment`, {
+    method: "POST",
+    headers: jsonHeaders(opts),
+    body: JSON.stringify({
+      quote: opts.quote,
+      question: opts.question,
+      noteBoxId: opts.noteBoxId
+    }),
+    signal: opts.signal
+  });
+  const body = await parseJson(res);
+  if (!res.ok) throw new Error(readError(body, `sage verify-payment ${res.status}`));
+  return body;
+}
+async function fetchSageReceipt(id, opts = {}) {
+  const res = await fetch(`${apiBase(opts)}/api/sage/receipt/${encodeURIComponent(id)}`, {
+    headers: requestHeaders(opts),
+    signal: opts.signal
+  });
+  const body = await parseJson(res);
+  if (!res.ok) throw new Error(readError(body, `sage receipt ${res.status}`));
+  return body;
+}
+function createSagePaymentIntent(opts) {
+  const base = trimSlash(opts.apiBase ?? DEFAULT_API_BASE);
+  return {
+    type: "sage.payment_intent.v1",
+    network: opts.network ?? "ergo-testnet",
+    createdAt: opts.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+    question: opts.question,
+    ...opts.tenant?.id || opts.tenant?.label ? { tenant: { id: opts.tenant.id, label: opts.tenant.label } } : {},
+    quote: opts.quote,
+    amountErg: opts.quote.price,
+    receiverAddress: opts.quote.receiverAddress,
+    reserveBoxId: opts.quote.reserveBoxId,
+    taskHash: opts.quote.taskHash,
+    expiresAt: opts.quote.expiresAt,
+    deadline: opts.quote.deadline,
+    verifyEndpoint: `${base}/api/sage/verify-payment`,
+    receiptEndpointTemplate: `${base}/api/sage/receipt/{receiptId}`
+  };
+}
+function serializeSagePaymentIntent(intent) {
+  return JSON.stringify(intent, null, 2);
+}
+async function streamSageChat(opts) {
+  const res = await fetch(`${apiBase(opts)}/api/sage/chat`, {
+    method: "POST",
+    headers: jsonHeaders(opts),
+    body: JSON.stringify({
+      messages: opts.messages,
+      ...opts.paymentToken ? { paymentToken: opts.paymentToken } : {}
+    }),
+    signal: opts.signal
+  });
+  if (res.status === 402) {
+    const body = await parseJson(res);
+    return {
+      ok: false,
+      status: res.status,
+      text: "",
+      paymentRequired: body
+    };
+  }
+  if (!res.ok) {
+    const body = await parseJson(res);
+    return {
+      ok: false,
+      status: res.status,
+      text: "",
+      error: readError(body, `sage chat ${res.status}`)
+    };
+  }
+  if (!res.body) {
+    return { ok: false, status: res.status, text: "", error: "Sage chat stream missing body" };
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let text = "";
+  let tier;
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const parts = buffer.split("\n\n");
+    buffer = parts.pop() ?? "";
+    for (const part of parts) {
+      const event = parseSseEvent(part);
+      if (!event) continue;
+      if (event.type === "delta") text += event.text;
+      if (event.type === "tier") tier = event.tier;
+      opts.onEvent?.(event);
+      if (event.type === "error") {
+        return {
+          ok: false,
+          status: res.status,
+          text,
+          tier,
+          error: event.message
+        };
+      }
+    }
+  }
+  if (buffer.trim()) {
+    const event = parseSseEvent(buffer);
+    if (event) {
+      if (event.type === "delta") text += event.text;
+      if (event.type === "tier") tier = event.tier;
+      opts.onEvent?.(event);
+      if (event.type === "error") {
+        return {
+          ok: false,
+          status: res.status,
+          text,
+          tier,
+          error: event.message
+        };
+      }
+    }
+  }
+  return { ok: true, status: res.status, text, tier };
+}
 function nanoToErg(nano) {
   if (!nano || nano <= 0) return "0";
   const erg = nano / 1e9;
@@ -32,16 +170,92 @@ function relativeTime(ms, now = Date.now()) {
   const day = Math.floor(hr / 24);
   return `${day}d ago`;
 }
-function receiptUrl(txId, apiBase = DEFAULT_API_BASE) {
-  return `${apiBase}/r/sage/${txId}`;
+function receiptUrl(txId, apiBase2 = DEFAULT_API_BASE) {
+  return `${trimSlash(apiBase2)}/r/sage/${txId}`;
 }
 function explorerUrl(txId, network = "testnet") {
   return network === "testnet" ? `https://testnet.ergoplatform.com/transactions/${txId}` : `https://explorer.ergoplatform.com/transactions/${txId}`;
 }
+function apiBase(opts) {
+  return trimSlash(opts.apiBase ?? DEFAULT_API_BASE);
+}
+function trimSlash(value) {
+  return value.replace(/\/+$/, "");
+}
+function requestHeaders(opts) {
+  return {
+    ...opts.tenant?.id ? { "x-sage-tenant-id": opts.tenant.id } : {},
+    ...opts.tenant?.headers ?? {},
+    ...opts.headers ?? {}
+  };
+}
+function jsonHeaders(opts) {
+  return {
+    "content-type": "application/json",
+    ...requestHeaders(opts)
+  };
+}
+async function parseJson(res) {
+  const text = await res.text();
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return { error: text };
+  }
+}
+function readError(body, fallback) {
+  if (body && typeof body === "object" && "error" in body) {
+    const error = body.error;
+    if (typeof error === "string") return error;
+  }
+  return fallback;
+}
+function parseSseEvent(raw) {
+  let eventName = "message";
+  let data = "";
+  for (const line of raw.split("\n")) {
+    if (line.startsWith("event:")) eventName = line.slice("event:".length).trim();
+    if (line.startsWith("data:")) data += line.slice("data:".length).trim();
+  }
+  if (!data) return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(data);
+  } catch {
+    return null;
+  }
+  if (eventName === "tier") {
+    const tier = parsed.tier === "premium" ? "premium" : "free";
+    return {
+      type: "tier",
+      tier,
+      ...typeof parsed.model === "string" ? { model: parsed.model } : {}
+    };
+  }
+  if (eventName === "delta" && typeof parsed.text === "string") {
+    return { type: "delta", text: parsed.text };
+  }
+  if (eventName === "done") {
+    return {
+      type: "done",
+      ...typeof parsed.stopReason === "string" ? { stopReason: parsed.stopReason } : {},
+      ...typeof parsed.inputTokens === "number" ? { inputTokens: parsed.inputTokens } : {},
+      ...typeof parsed.outputTokens === "number" ? { outputTokens: parsed.outputTokens } : {}
+    };
+  }
+  if (eventName === "error") {
+    return {
+      type: "error",
+      message: typeof parsed.message === "string" ? parsed.message : "Sage stream error"
+    };
+  }
+  return null;
+}
 
 // src/vanilla/mountSageFeed.ts
 function mountSageFeed(target, opts = {}) {
-  const apiBase = opts.apiBase;
+  const apiBase2 = opts.apiBase;
   const limit = opts.limit ?? DEFAULT_LIMIT;
   const refreshMs = opts.refreshMs ?? DEFAULT_REFRESH_MS;
   let cancelled = false;
@@ -79,7 +293,7 @@ function mountSageFeed(target, opts = {}) {
       list.textContent = "No activity yet \u2014 be the first to ask Sage a paid query.";
       applyStyles(list, emptyStyle);
     } else {
-      events.forEach((evt) => list.appendChild(renderRow(evt, response.network, apiBase)));
+      events.forEach((evt) => list.appendChild(renderRow(evt, response.network, apiBase2)));
     }
     root.appendChild(list);
   }
@@ -118,7 +332,7 @@ function mountSageFeed(target, opts = {}) {
     abort = new AbortController();
     try {
       const data = await fetchSageActivity({
-        apiBase,
+        apiBase: apiBase2,
         limit,
         signal: abort.signal
       });
@@ -255,9 +469,644 @@ var emptyStyle = {
   fontSize: "11px"
 };
 
+// src/vanilla/mountSagePaymentWidget.ts
+function mountSagePaymentWidget(target, opts = {}) {
+  const apiBase2 = opts.apiBase ?? DEFAULT_API_BASE;
+  let destroyed = false;
+  let messages = [...opts.initialMessages ?? []];
+  let phase = "idle";
+  let inputValue = "";
+  let noteBoxId = "";
+  let activeQuestion = "";
+  let quoteResponse = null;
+  let paymentIntent = null;
+  let receipt = null;
+  let receiptBundle = null;
+  let error = null;
+  let tier = null;
+  const root = document.createElement("section");
+  root.setAttribute("data-sage-payment-widget", "true");
+  applyStyles2(root, rootStyle2);
+  target.appendChild(root);
+  async function send(questionRaw) {
+    const question = questionRaw.trim();
+    if (!question || isBusy()) return;
+    activeQuestion = question;
+    inputValue = "";
+    noteBoxId = "";
+    quoteResponse = null;
+    paymentIntent = null;
+    receipt = null;
+    receiptBundle = null;
+    error = null;
+    tier = null;
+    const userMessage = { role: "user", content: question };
+    messages = [...messages, userMessage];
+    opts.onMessage?.(userMessage, messages);
+    transition("quoting");
+    render();
+    try {
+      const quote = await fetchSageQuote({
+        apiBase: apiBase2,
+        tenant: opts.tenant,
+        question,
+        history: messages.slice(0, -1)
+      });
+      if (destroyed) return;
+      opts.onQuote?.(quote);
+      if (quote.premium) {
+        if (!quote.quote) throw new Error("Sage marked this question premium but did not return a quote.");
+        quoteResponse = quote;
+        paymentIntent = createSagePaymentIntent({
+          apiBase: apiBase2,
+          tenant: opts.tenant,
+          question,
+          quote: quote.quote
+        });
+        opts.onPaymentIntent?.(paymentIntent);
+        transition("payment_required");
+        render();
+        return;
+      }
+      await streamAnswer(messages);
+    } catch (err) {
+      fail(err);
+    }
+  }
+  async function verifyAndContinue() {
+    const quote = quoteResponse?.quote;
+    const note = noteBoxId.trim();
+    if (!quote || !activeQuestion || !note || isBusy()) return;
+    transition("verifying");
+    error = null;
+    render();
+    let verified;
+    try {
+      verified = await verifySagePayment({
+        apiBase: apiBase2,
+        tenant: opts.tenant,
+        quote,
+        question: activeQuestion,
+        noteBoxId: note
+      });
+    } catch (err) {
+      transition("payment_required");
+      fail(err, false);
+      return;
+    }
+    if (destroyed) return;
+    receipt = verified;
+    opts.onReceipt?.(verified);
+    quoteResponse = null;
+    paymentIntent = null;
+    noteBoxId = "";
+    transition("streaming");
+    try {
+      receiptBundle = await fetchSageReceipt(verified.receiptId, { apiBase: apiBase2, tenant: opts.tenant });
+      opts.onReceiptBundle?.(receiptBundle);
+      emitStatus("streaming");
+    } catch (bundleErr) {
+      opts.onError?.(bundleErr);
+    }
+    try {
+      await streamAnswer(messages, verified.paymentToken);
+    } catch (err) {
+      fail(err);
+    }
+  }
+  async function streamAnswer(baseMessages, paymentToken) {
+    transition("streaming");
+    messages = [...baseMessages, { role: "assistant", content: "" }];
+    render();
+    let text = "";
+    const result = await streamSageChat({
+      apiBase: apiBase2,
+      tenant: opts.tenant,
+      messages: baseMessages,
+      paymentToken,
+      onEvent(event) {
+        if (destroyed) return;
+        if (event.type === "tier") {
+          tier = event.tier;
+          opts.onTier?.(event.tier);
+          render();
+        }
+        if (event.type === "delta") {
+          text += event.text;
+          messages = [...baseMessages, { role: "assistant", content: text }];
+          render();
+        }
+      }
+    });
+    if (destroyed) return;
+    if (!result.ok) {
+      if (result.paymentRequired) {
+        const quote = await fetchSageQuote({
+          apiBase: apiBase2,
+          tenant: opts.tenant,
+          question: activeQuestion,
+          history: baseMessages.slice(0, -1)
+        });
+        opts.onQuote?.(quote);
+        quoteResponse = quote;
+        paymentIntent = quote.quote ? createSagePaymentIntent({
+          apiBase: apiBase2,
+          tenant: opts.tenant,
+          question: activeQuestion,
+          quote: quote.quote
+        }) : null;
+        if (paymentIntent) opts.onPaymentIntent?.(paymentIntent);
+        transition("payment_required");
+        render();
+        return;
+      }
+      throw new Error(result.error ?? "Sage chat failed.");
+    }
+    if (result.text && result.text !== text) {
+      messages = [...baseMessages, { role: "assistant", content: result.text }];
+    }
+    transition("idle");
+    render();
+  }
+  async function launchWallet() {
+    if (!paymentIntent || !opts.walletLauncher || isBusy()) return;
+    error = null;
+    try {
+      const result = await opts.walletLauncher(paymentIntent);
+      if (result?.ok === false) {
+        throw new Error(result.error ?? "Wallet flow did not produce a Note.");
+      }
+      if (result?.noteBoxId) noteBoxId = result.noteBoxId;
+    } catch (err) {
+      error = err instanceof Error ? err.message : "Wallet flow failed.";
+      opts.onError?.(err);
+    }
+    render();
+  }
+  function render() {
+    root.innerHTML = "";
+    const header = document.createElement("header");
+    applyStyles2(header, headerStyle2);
+    const titleWrap = document.createElement("div");
+    const eyebrow = document.createElement("div");
+    eyebrow.textContent = opts.tenant?.label ?? "Ergo agent economy";
+    applyStyles2(eyebrow, eyebrowStyle);
+    const title = document.createElement("h2");
+    title.textContent = opts.title ?? "Ask Sage";
+    applyStyles2(title, titleStyle);
+    titleWrap.append(eyebrow, title);
+    const badge = document.createElement("span");
+    badge.textContent = tier ? tier.toUpperCase() : "SAGE";
+    applyStyles2(badge, badgeStyle);
+    header.append(titleWrap, badge);
+    root.appendChild(header);
+    const log = document.createElement("div");
+    applyStyles2(log, messagesStyle);
+    if (messages.length === 0) {
+      const empty = document.createElement("div");
+      empty.textContent = "Free questions answer immediately. Premium questions return an Accord Note quote.";
+      applyStyles2(empty, emptyStyle2);
+      log.appendChild(empty);
+    } else {
+      messages.forEach((message) => {
+        const bubble = document.createElement("div");
+        bubble.textContent = message.content || (message.role === "assistant" && phase === "streaming" ? "Thinking..." : "");
+        applyStyles2(bubble, message.role === "user" ? userBubbleStyle : assistantBubbleStyle);
+        log.appendChild(bubble);
+      });
+    }
+    root.appendChild(log);
+    if (quoteResponse?.quote) {
+      root.appendChild(renderPaymentPanel(quoteResponse.quote));
+    }
+    if (receipt) {
+      const a = document.createElement("a");
+      a.href = receipt.receiptUrl;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.textContent = `Receipt: ${shortId(receipt.receiptId)}${receiptBundle ? ` \xB7 ${receiptBundle.completeness}` : ""}`;
+      applyStyles2(a, receiptStyle);
+      root.appendChild(a);
+    }
+    if (error) {
+      const err = document.createElement("div");
+      err.textContent = error;
+      applyStyles2(err, errorStyle);
+      root.appendChild(err);
+    }
+    const form = document.createElement("form");
+    applyStyles2(form, formStyle);
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      void send(inputValue);
+    });
+    const input = document.createElement("input");
+    input.value = inputValue;
+    input.placeholder = opts.placeholder ?? "Ask Sage about Ergo or agent payments...";
+    input.disabled = isBusy();
+    input.addEventListener("input", () => {
+      inputValue = input.value;
+      button.disabled = !inputValue.trim() || isBusy();
+    });
+    applyStyles2(input, inputStyle);
+    const button = document.createElement("button");
+    button.type = "submit";
+    button.textContent = phase === "quoting" ? "Quoting..." : phase === "streaming" ? "Streaming..." : "Send";
+    button.disabled = isBusy();
+    applyStyles2(button, sendButtonStyle);
+    form.append(input, button);
+    root.appendChild(form);
+  }
+  function renderPaymentPanel(quote) {
+    const panel = document.createElement("div");
+    applyStyles2(panel, paymentStyle);
+    const top = document.createElement("div");
+    applyStyles2(top, paymentHeaderStyle);
+    const strong = document.createElement("strong");
+    strong.textContent = "Payment required";
+    const price = document.createElement("span");
+    price.textContent = `${quote.price} ERG testnet`;
+    top.append(strong, price);
+    panel.appendChild(top);
+    const helper = document.createElement("p");
+    helper.textContent = opts.paymentInstructions?.helperText ?? "Issue an Ergo testnet Note for this quote, then paste the created Note box id.";
+    applyStyles2(helper, helperStyle);
+    if (opts.paymentInstructions?.walletUrl) {
+      const link = document.createElement("a");
+      link.href = opts.paymentInstructions.walletUrl;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.textContent = " Wallet guide";
+      applyStyles2(link, inlineLinkStyle);
+      helper.appendChild(link);
+    }
+    panel.appendChild(helper);
+    panel.append(
+      field("Quote", quote.quoteId),
+      field("Receiver", quote.receiverAddress),
+      field("Reserve box", quote.reserveBoxId),
+      field("Task hash", quote.taskHash)
+    );
+    const testnetWarning = opts.testnetWarning === false ? null : opts.testnetWarning ?? "Testnet proof flow. The widget never signs funds; connect your own reviewed wallet layer before handling real value.";
+    if (testnetWarning) {
+      const warning = document.createElement("div");
+      warning.textContent = testnetWarning;
+      applyStyles2(warning, warningStyle);
+      panel.appendChild(warning);
+    }
+    if (opts.showPaymentIntent !== false && paymentIntent) {
+      const intent = document.createElement("div");
+      applyStyles2(intent, intentStyle);
+      const intentTop = document.createElement("div");
+      applyStyles2(intentTop, intentHeaderStyle);
+      const label2 = document.createElement("strong");
+      label2.textContent = "Payment intent";
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.textContent = "Copy JSON";
+      copy.addEventListener("click", () => copyText(serializeSagePaymentIntent(paymentIntent)));
+      applyStyles2(copy, copyButtonStyle);
+      intentTop.append(label2, copy);
+      const code = document.createElement("code");
+      code.textContent = serializeSagePaymentIntent(paymentIntent);
+      applyStyles2(code, intentCodeStyle);
+      intent.append(intentTop, code);
+      panel.appendChild(intent);
+    }
+    if (opts.walletLauncher && paymentIntent) {
+      const wallet = document.createElement("button");
+      wallet.type = "button";
+      wallet.textContent = opts.paymentInstructions?.walletLauncherLabel ?? "Open wallet flow";
+      wallet.disabled = isBusy();
+      wallet.addEventListener("click", () => void launchWallet());
+      applyStyles2(wallet, secondaryButtonStyle);
+      panel.appendChild(wallet);
+    }
+    const label = document.createElement("label");
+    label.textContent = opts.paymentInstructions?.noteBoxLabel ?? "Note box id";
+    applyStyles2(label, labelStyle2);
+    const input = document.createElement("input");
+    input.value = noteBoxId;
+    input.placeholder = "Paste 64-char Ergo box id";
+    input.disabled = isBusy();
+    input.addEventListener("input", () => {
+      noteBoxId = input.value;
+      verify.disabled = !noteBoxId.trim() || isBusy();
+    });
+    applyStyles2(input, inputStyle);
+    label.appendChild(input);
+    panel.appendChild(label);
+    const verify = document.createElement("button");
+    verify.type = "button";
+    verify.textContent = phase === "verifying" ? "Verifying..." : "Verify payment";
+    verify.disabled = !noteBoxId.trim() || isBusy();
+    verify.addEventListener("click", () => void verifyAndContinue());
+    applyStyles2(verify, primaryButtonStyle);
+    panel.appendChild(verify);
+    return panel;
+  }
+  function field(labelText, value) {
+    const row = document.createElement("div");
+    applyStyles2(row, fieldStyle);
+    const label = document.createElement("span");
+    label.textContent = labelText;
+    applyStyles2(label, fieldLabelStyle);
+    const code = document.createElement("code");
+    code.textContent = value;
+    applyStyles2(code, fieldValueStyle);
+    const copy = document.createElement("button");
+    copy.type = "button";
+    copy.textContent = "Copy";
+    copy.addEventListener("click", () => copyText(value));
+    applyStyles2(copy, copyButtonStyle);
+    row.append(label, code, copy);
+    return row;
+  }
+  function isBusy() {
+    return phase === "quoting" || phase === "verifying" || phase === "streaming";
+  }
+  function fail(err, setErrorPhase = true) {
+    error = err instanceof Error ? err.message : "Sage request failed.";
+    if (setErrorPhase) transition("error");
+    else emitStatus(phase);
+    opts.onError?.(err);
+    render();
+  }
+  function transition(next) {
+    phase = next;
+    opts.onPhase?.(next);
+    emitStatus(next);
+  }
+  function emitStatus(next) {
+    opts.onStatus?.({
+      phase: next,
+      tier,
+      quote: quoteResponse?.quote ?? null,
+      paymentIntent,
+      receipt,
+      receiptBundle,
+      error,
+      messages,
+      activeQuestion: activeQuestion || null
+    });
+  }
+  render();
+  return {
+    send,
+    destroy() {
+      destroyed = true;
+      root.remove();
+    },
+    current: () => messages,
+    status: () => ({
+      phase,
+      tier,
+      quote: quoteResponse?.quote ?? null,
+      paymentIntent,
+      receipt,
+      receiptBundle,
+      error,
+      messages,
+      activeQuestion: activeQuestion || null
+    })
+  };
+}
+function applyStyles2(el, styles) {
+  Object.assign(el.style, styles);
+}
+function shortId(value) {
+  return value.length > 18 ? `${value.slice(0, 10)}...${value.slice(-8)}` : value;
+}
+function copyText(value) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    void navigator.clipboard.writeText(value);
+  }
+}
+var rootStyle2 = {
+  background: "#070707",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,.1)",
+  borderRadius: "8px",
+  padding: "16px",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  boxSizing: "border-box",
+  width: "100%",
+  maxWidth: "520px"
+};
+var headerStyle2 = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  gap: "12px",
+  marginBottom: "12px"
+};
+var eyebrowStyle = {
+  color: "#fb923c",
+  fontSize: "11px",
+  letterSpacing: ".16em",
+  textTransform: "uppercase",
+  marginBottom: "4px"
+};
+var titleStyle = {
+  fontSize: "18px",
+  lineHeight: "1.2",
+  margin: "0"
+};
+var badgeStyle = {
+  color: "#0f172a",
+  background: "#fdba74",
+  borderRadius: "4px",
+  padding: "4px 7px",
+  fontSize: "10px",
+  fontWeight: "800",
+  letterSpacing: ".12em"
+};
+var messagesStyle = {
+  minHeight: "180px",
+  maxHeight: "360px",
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: "8px",
+  padding: "12px 0"
+};
+var emptyStyle2 = {
+  color: "#94a3b8",
+  border: "1px dashed rgba(148,163,184,.28)",
+  borderRadius: "6px",
+  padding: "12px",
+  fontSize: "13px"
+};
+var bubbleBase = {
+  borderRadius: "6px",
+  padding: "9px 10px",
+  fontSize: "14px",
+  lineHeight: "1.45",
+  whiteSpace: "pre-wrap"
+};
+var userBubbleStyle = {
+  ...bubbleBase,
+  alignSelf: "flex-end",
+  maxWidth: "88%",
+  background: "#fb923c",
+  color: "#111827"
+};
+var assistantBubbleStyle = {
+  ...bubbleBase,
+  alignSelf: "flex-start",
+  maxWidth: "92%",
+  background: "rgba(255,255,255,.07)",
+  color: "#e5e7eb"
+};
+var paymentStyle = {
+  border: "1px solid rgba(251,146,60,.35)",
+  background: "rgba(251,146,60,.08)",
+  borderRadius: "8px",
+  padding: "12px",
+  display: "grid",
+  gap: "8px"
+};
+var paymentHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  color: "#fed7aa",
+  fontSize: "13px"
+};
+var helperStyle = {
+  color: "#fdba74",
+  fontSize: "12px",
+  lineHeight: "1.45",
+  margin: "0"
+};
+var inlineLinkStyle = {
+  color: "#67e8f9",
+  textDecoration: "none"
+};
+var labelStyle2 = {
+  display: "grid",
+  gap: "6px",
+  color: "#cbd5e1",
+  fontSize: "12px"
+};
+var fieldStyle = {
+  display: "grid",
+  gridTemplateColumns: "minmax(70px, 88px) minmax(0, 1fr) auto",
+  alignItems: "center",
+  gap: "8px",
+  fontSize: "12px"
+};
+var fieldLabelStyle = {
+  color: "#94a3b8"
+};
+var fieldValueStyle = {
+  color: "#f8fafc",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontSize: "11px"
+};
+var copyButtonStyle = {
+  border: "1px solid rgba(255,255,255,.16)",
+  background: "rgba(255,255,255,.06)",
+  color: "#f8fafc",
+  borderRadius: "4px",
+  padding: "4px 7px",
+  cursor: "pointer"
+};
+var formStyle = {
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 1fr) auto",
+  gap: "8px",
+  marginTop: "12px"
+};
+var inputStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  border: "1px solid rgba(255,255,255,.16)",
+  background: "#050505",
+  color: "#f8fafc",
+  borderRadius: "6px",
+  padding: "10px 11px",
+  fontSize: "14px"
+};
+var sendButtonStyle = {
+  border: "0",
+  background: "#fb923c",
+  color: "#111827",
+  borderRadius: "6px",
+  padding: "0 14px",
+  fontWeight: "800",
+  cursor: "pointer"
+};
+var primaryButtonStyle = {
+  ...sendButtonStyle,
+  padding: "10px 12px"
+};
+var secondaryButtonStyle = {
+  border: "1px solid rgba(103,232,249,.28)",
+  background: "rgba(103,232,249,.08)",
+  color: "#cffafe",
+  borderRadius: "6px",
+  padding: "10px 12px",
+  fontWeight: "800",
+  cursor: "pointer"
+};
+var warningStyle = {
+  color: "#fde68a",
+  background: "rgba(245,158,11,.1)",
+  border: "1px solid rgba(245,158,11,.24)",
+  borderRadius: "6px",
+  padding: "8px 9px",
+  fontSize: "12px",
+  lineHeight: "1.45"
+};
+var intentStyle = {
+  border: "1px solid rgba(255,255,255,.12)",
+  background: "rgba(255,255,255,.04)",
+  borderRadius: "6px",
+  padding: "10px",
+  display: "grid",
+  gap: "8px"
+};
+var intentHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: "8px",
+  color: "#e2e8f0",
+  fontSize: "12px"
+};
+var intentCodeStyle = {
+  display: "block",
+  maxHeight: "130px",
+  overflow: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  color: "#cbd5e1",
+  fontSize: "10px",
+  lineHeight: "1.45"
+};
+var receiptStyle = {
+  display: "block",
+  marginTop: "10px",
+  color: "#67e8f9",
+  fontSize: "13px",
+  textDecoration: "none"
+};
+var errorStyle = {
+  color: "#fecaca",
+  background: "rgba(239,68,68,.12)",
+  border: "1px solid rgba(239,68,68,.25)",
+  borderRadius: "6px",
+  padding: "10px",
+  marginTop: "10px",
+  fontSize: "13px"
+};
+
 exports.DEFAULT_API_BASE = DEFAULT_API_BASE;
 exports.DEFAULT_LIMIT = DEFAULT_LIMIT;
 exports.DEFAULT_REFRESH_MS = DEFAULT_REFRESH_MS;
 exports.mountSageFeed = mountSageFeed;
+exports.mountSagePaymentWidget = mountSagePaymentWidget;
 //# sourceMappingURL=vanilla.cjs.map
 //# sourceMappingURL=vanilla.cjs.map