@ergoblockchain/sage-widget 0.1.0 → 0.3.0

package/dist/react.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/react/SageActivityFeed.tsx
@@ -12,13 +12,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;
@@ -35,16 +173,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;
+}
 var ONE_MIN = 6e4;
 function SageActivityFeed(props) {
   const {
-    apiBase,
+    apiBase: apiBase2,
     limit = DEFAULT_LIMIT,
     refreshMs = DEFAULT_REFRESH_MS,
     onUpdate,
@@ -71,7 +285,7 @@ function SageActivityFeed(props) {
     async function load() {
       try {
         const data = await fetchSageActivity({
-          apiBase,
+          apiBase: apiBase2,
           limit,
           signal: abort.signal
         });
@@ -96,7 +310,7 @@ function SageActivityFeed(props) {
       if (pollId) clearInterval(pollId);
       clearInterval(tickId);
     };
-  }, [apiBase, limit, refreshMs]);
+  }, [apiBase2, limit, refreshMs]);
   if (children) {
     return /* @__PURE__ */ jsx(Fragment, { children: children({ loading, response, error }) });
   }
@@ -108,7 +322,7 @@ function SageActivityFeed(props) {
         loading,
         events: response?.events ?? [],
         network: response?.network ?? "testnet",
-        apiBase,
+        apiBase: apiBase2,
         now
       }
     ),
@@ -138,22 +352,22 @@ function List({
   loading,
   events,
   network,
-  apiBase,
+  apiBase: apiBase2,
   now
 }) {
   if (loading) return /* @__PURE__ */ jsx("div", { style: emptyStyle, children: "Loading\u2026" });
   if (events.length === 0)
     return /* @__PURE__ */ jsx("div", { style: emptyStyle, children: "No activity yet \u2014 be the first to ask Sage a paid query." });
-  return /* @__PURE__ */ jsx("div", { children: events.map((evt) => /* @__PURE__ */ jsx(Row, { evt, network, apiBase, now }, evt.txId)) });
+  return /* @__PURE__ */ jsx("div", { children: events.map((evt) => /* @__PURE__ */ jsx(Row, { evt, network, apiBase: apiBase2, now }, evt.txId)) });
 }
 function Row({
   evt,
   network,
-  apiBase,
+  apiBase: apiBase2,
   now
 }) {
   const isSettle = evt.type === "settlement";
-  const href = isSettle ? receiptUrl(evt.txId, apiBase) : explorerUrl(evt.txId, network);
+  const href = isSettle ? receiptUrl(evt.txId, apiBase2) : explorerUrl(evt.txId, network);
   const amount = isSettle ? evt.paymentNanoErg ?? evt.inflowNanoErg : evt.inflowNanoErg;
   const chipStyle = isSettle ? chipSettleStyle : chipIssueStyle;
   const chipText = isSettle ? "Settled" : evt.type === "issuance" ? "Issued" : "Transfer";
@@ -291,7 +505,575 @@ var errorStyle = {
   ...emptyStyle,
   color: "#f87171"
 };
+function SagePaymentWidget(props) {
+  const {
+    apiBase: apiBase2 = DEFAULT_API_BASE,
+    tenant,
+    initialMessages = [],
+    placeholder = "Ask Sage about Ergo or agent payments...",
+    paymentInstructions,
+    showPaymentIntent = true,
+    testnetWarning = "Testnet proof flow. The widget never signs funds; connect your own reviewed wallet layer before handling real value.",
+    className,
+    style,
+    title = "Ask Sage"
+  } = props;
+  const [messages, setMessages] = useState(initialMessages);
+  const [input, setInput] = useState("");
+  const [phase, setPhase] = useState("idle");
+  const [quoteResponse, setQuoteResponse] = useState(null);
+  const [paymentIntent, setPaymentIntent] = useState(null);
+  const [activeQuestion, setActiveQuestion] = useState("");
+  const [noteBoxId, setNoteBoxId] = useState("");
+  const [receipt, setReceipt] = useState(null);
+  const [receiptBundle, setReceiptBundle] = useState(null);
+  const [error, setError] = useState(null);
+  const [tier, setTier] = useState(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const busy = phase === "quoting" || phase === "verifying" || phase === "streaming";
+  const apiOpts = useMemo(() => ({ apiBase: apiBase2, tenant }), [apiBase2, tenant]);
+  async function submit(e) {
+    e.preventDefault();
+    const question = input.trim();
+    if (!question || busy) return;
+    const userMessage = { role: "user", content: question };
+    const nextMessages = [...messages, userMessage];
+    setMessages(nextMessages);
+    props.onMessage?.(userMessage, nextMessages);
+    setInput("");
+    setError(null);
+    setReceipt(null);
+    setReceiptBundle(null);
+    setQuoteResponse(null);
+    setPaymentIntent(null);
+    setActiveQuestion(question);
+    setNoteBoxId("");
+    setTier(null);
+    transition("quoting");
+    try {
+      const quote2 = await fetchSageQuote({
+        ...apiOpts,
+        question,
+        history: messages
+      });
+      props.onQuote?.(quote2);
+      if (quote2.premium) {
+        if (!quote2.quote) throw new Error("Sage marked this question premium but did not return a quote.");
+        const intent = createSagePaymentIntent({
+          ...apiOpts,
+          question,
+          quote: quote2.quote
+        });
+        setPaymentIntent(intent);
+        setQuoteResponse(quote2);
+        props.onPaymentIntent?.(intent);
+        transition("payment_required", { quote: quote2.quote, paymentIntent: intent });
+        return;
+      }
+      await streamAnswer(nextMessages, void 0, question);
+    } catch (err) {
+      fail(err);
+    }
+  }
+  async function verifyAndContinue() {
+    const quote2 = quoteResponse?.quote;
+    const note = noteBoxId.trim();
+    if (!quote2 || !activeQuestion || !note || busy) return;
+    setError(null);
+    transition("verifying");
+    let verified;
+    try {
+      verified = await verifySagePayment({
+        ...apiOpts,
+        quote: quote2,
+        question: activeQuestion,
+        noteBoxId: note
+      });
+    } catch (err) {
+      transition("payment_required");
+      fail(err, false);
+      return;
+    }
+    if (!mountedRef.current) return;
+    setReceipt(verified);
+    props.onReceipt?.(verified);
+    setQuoteResponse(null);
+    setPaymentIntent(null);
+    setNoteBoxId("");
+    transition("streaming", { quote: null, paymentIntent: null, receipt: verified });
+    try {
+      const bundle = await fetchSageReceipt(verified.receiptId, apiOpts);
+      if (!mountedRef.current) return;
+      setReceiptBundle(bundle);
+      props.onReceiptBundle?.(bundle);
+      emitStatus("streaming", { quote: null, paymentIntent: null, receipt: verified, receiptBundle: bundle });
+    } catch (bundleErr) {
+      props.onError?.(bundleErr);
+    }
+    try {
+      await streamAnswer(messages, verified.paymentToken, activeQuestion);
+    } catch (err) {
+      fail(err);
+    }
+  }
+  async function streamAnswer(baseMessages, paymentToken, fallbackQuestion) {
+    transition("streaming");
+    let text = "";
+    const placeholderMessage = { role: "assistant", content: "" };
+    setMessages([...baseMessages, placeholderMessage]);
+    const result = await streamSageChat({
+      ...apiOpts,
+      messages: baseMessages,
+      paymentToken,
+      onEvent(event) {
+        if (!mountedRef.current) return;
+        if (event.type === "tier") {
+          setTier(event.tier);
+          props.onTier?.(event.tier);
+          emitStatus("streaming", { tier: event.tier, messages: baseMessages });
+        }
+        if (event.type === "delta") {
+          text += event.text;
+          setMessages([...baseMessages, { role: "assistant", content: text }]);
+        }
+      }
+    });
+    if (!result.ok) {
+      if (result.paymentRequired) {
+        const question = fallbackQuestion ?? lastUserQuestion(baseMessages) ?? activeQuestion;
+        const quote2 = await fetchSageQuote({
+          ...apiOpts,
+          question,
+          history: baseMessages.slice(0, -1)
+        });
+        if (!mountedRef.current) return;
+        props.onQuote?.(quote2);
+        setQuoteResponse(quote2);
+        setActiveQuestion(question);
+        const intent = quote2.quote ? createSagePaymentIntent({ ...apiOpts, question, quote: quote2.quote }) : null;
+        setPaymentIntent(intent);
+        if (intent) props.onPaymentIntent?.(intent);
+        transition("payment_required", { quote: quote2.quote ?? null, paymentIntent: intent });
+        return;
+      }
+      throw new Error(result.error ?? "Sage chat failed.");
+    }
+    if (!mountedRef.current) return;
+    if (result.text && result.text !== text) {
+      setMessages([...baseMessages, { role: "assistant", content: result.text }]);
+    }
+    transition("idle");
+  }
+  function fail(err, setErrorPhase = true) {
+    const message = err instanceof Error ? err.message : "Sage request failed.";
+    setError(message);
+    if (setErrorPhase) transition("error", { error: message });
+    else emitStatus(phase, { error: message });
+    props.onError?.(err);
+  }
+  function transition(next, overrides = {}) {
+    setPhase(next);
+    props.onPhase?.(next);
+    emitStatus(next, overrides);
+  }
+  function emitStatus(nextPhase, overrides = {}) {
+    const has = (key) => Object.prototype.hasOwnProperty.call(overrides, key);
+    props.onStatus?.({
+      phase: nextPhase,
+      tier: has("tier") ? overrides.tier ?? null : tier,
+      quote: has("quote") ? overrides.quote ?? null : quoteResponse?.quote ?? null,
+      paymentIntent: has("paymentIntent") ? overrides.paymentIntent ?? null : paymentIntent,
+      receipt: has("receipt") ? overrides.receipt ?? null : receipt,
+      receiptBundle: has("receiptBundle") ? overrides.receiptBundle ?? null : receiptBundle,
+      error: has("error") ? overrides.error ?? null : error,
+      messages: overrides.messages ?? messages,
+      activeQuestion: has("activeQuestion") ? overrides.activeQuestion ?? null : activeQuestion || null
+    });
+  }
+  const quote = quoteResponse?.quote;
+  const showPaymentPanel = quote && !receipt;
+  async function copyPaymentIntent() {
+    if (!paymentIntent) return;
+    await copyText(serializeSagePaymentIntent(paymentIntent));
+  }
+  async function launchWallet() {
+    if (!paymentIntent || !props.walletLauncher || busy) return;
+    setError(null);
+    try {
+      const result = await props.walletLauncher(paymentIntent);
+      if (result?.ok === false) {
+        throw new Error(result.error ?? "Wallet flow did not produce a Note.");
+      }
+      if (result?.noteBoxId) setNoteBoxId(result.noteBoxId);
+    } catch (err) {
+      fail(err, false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("section", { className, style: { ...rootStyle2, ...style }, children: [
+    /* @__PURE__ */ jsxs("header", { style: headerStyle2, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: eyebrowStyle, children: tenant?.label ?? "Ergo agent economy" }),
+        /* @__PURE__ */ jsx("h2", { style: titleStyle, children: title })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: badgeStyle, children: tier ? tier.toUpperCase() : "SAGE" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: messagesStyle, "aria-live": "polite", children: messages.length === 0 ? /* @__PURE__ */ jsx("div", { style: emptyStyle2, children: "Free questions answer immediately. Premium questions return an Accord Note quote." }) : messages.map((message, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: message.role === "user" ? userBubbleStyle : assistantBubbleStyle,
+        children: message.content || (message.role === "assistant" && phase === "streaming" ? "Thinking..." : "")
+      },
+      `${message.role}-${index}`
+    )) }),
+    showPaymentPanel ? /* @__PURE__ */ jsxs("div", { style: paymentStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: paymentHeaderStyle, children: [
+        /* @__PURE__ */ jsx("strong", { children: "Payment required" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          quote.price,
+          " ERG testnet"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { style: helperStyle, children: [
+        paymentInstructions?.helperText ?? "Issue an Ergo testnet Note for this quote, then paste the created Note box id.",
+        paymentInstructions?.walletUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("a", { href: paymentInstructions.walletUrl, target: "_blank", rel: "noopener noreferrer", style: inlineLinkStyle, children: "Wallet guide" })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Quote", value: quote.quoteId }),
+      /* @__PURE__ */ jsx(Field, { label: "Receiver", value: quote.receiverAddress, copy: true }),
+      /* @__PURE__ */ jsx(Field, { label: "Reserve box", value: quote.reserveBoxId, copy: true }),
+      /* @__PURE__ */ jsx(Field, { label: "Task hash", value: quote.taskHash, copy: true }),
+      testnetWarning ? /* @__PURE__ */ jsx("div", { style: warningStyle, children: testnetWarning }) : null,
+      showPaymentIntent && paymentIntent ? /* @__PURE__ */ jsxs("div", { style: intentStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: intentHeaderStyle, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Payment intent" }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: copyButtonStyle, onClick: copyPaymentIntent, children: "Copy JSON" })
+        ] }),
+        /* @__PURE__ */ jsx("code", { style: intentCodeStyle, children: serializeSagePaymentIntent(paymentIntent) })
+      ] }) : null,
+      props.walletLauncher && paymentIntent ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: launchWallet,
+          disabled: busy,
+          style: secondaryButtonStyle,
+          children: paymentInstructions?.walletLauncherLabel ?? "Open wallet flow"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("label", { style: labelStyle2, children: [
+        paymentInstructions?.noteBoxLabel ?? "Note box id",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: noteBoxId,
+            onChange: (e) => setNoteBoxId(e.currentTarget.value),
+            placeholder: "Paste 64-char Ergo box id",
+            style: inputStyle,
+            disabled: busy
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: verifyAndContinue,
+          disabled: !noteBoxId.trim() || busy,
+          style: primaryButtonStyle,
+          children: phase === "verifying" ? "Verifying..." : "Verify payment"
+        }
+      )
+    ] }) : null,
+    receipt ? /* @__PURE__ */ jsxs("div", { style: receiptPanelStyle, children: [
+      /* @__PURE__ */ jsxs("a", { href: receipt.receiptUrl, target: "_blank", rel: "noopener noreferrer", style: receiptStyle, children: [
+        "Receipt: ",
+        shortId(receipt.receiptId),
+        receiptBundle ? ` \xB7 ${receiptBundle.completeness}` : ""
+      ] }),
+      /* @__PURE__ */ jsx("a", { href: receipt.receiptApiUrl, target: "_blank", rel: "noopener noreferrer", style: receiptApiStyle, children: "machine-readable JSON" })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx("div", { style: errorStyle2, children: error }) : null,
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, style: formStyle, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: input,
+          onChange: (e) => setInput(e.currentTarget.value),
+          placeholder,
+          disabled: busy,
+          style: inputStyle
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: !input.trim() || busy, style: sendButtonStyle, children: phase === "quoting" ? "Quoting..." : phase === "streaming" ? "Streaming..." : "Send" })
+    ] })
+  ] });
+}
+function Field({ label, value, copy = false }) {
+  return /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+    /* @__PURE__ */ jsx("span", { style: fieldLabelStyle, children: label }),
+    /* @__PURE__ */ jsx("code", { style: fieldValueStyle, children: value }),
+    copy ? /* @__PURE__ */ jsx("button", { type: "button", style: copyButtonStyle, onClick: () => copyText(value), children: "Copy" }) : null
+  ] });
+}
+async function copyText(value) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    await navigator.clipboard.writeText(value);
+  }
+}
+function shortId(value) {
+  return value.length > 18 ? `${value.slice(0, 10)}...${value.slice(-8)}` : value;
+}
+function lastUserQuestion(messages) {
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    const message = messages[i];
+    if (message?.role === "user" && message.content.trim()) return message.content.trim();
+  }
+  return null;
+}
+var rootStyle2 = {
+  background: "#070707",
+  color: "#f8fafc",
+  border: "1px solid rgba(255,255,255,.1)",
+  borderRadius: 8,
+  padding: 16,
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  boxSizing: "border-box",
+  width: "100%",
+  maxWidth: 520
+};
+var headerStyle2 = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  gap: 12,
+  marginBottom: 12
+};
+var eyebrowStyle = {
+  color: "#fb923c",
+  fontSize: 11,
+  letterSpacing: ".16em",
+  textTransform: "uppercase",
+  marginBottom: 4
+};
+var titleStyle = {
+  fontSize: 18,
+  lineHeight: 1.2,
+  margin: 0
+};
+var badgeStyle = {
+  color: "#0f172a",
+  background: "#fdba74",
+  borderRadius: 4,
+  padding: "4px 7px",
+  fontSize: 10,
+  fontWeight: 800,
+  letterSpacing: ".12em"
+};
+var messagesStyle = {
+  minHeight: 180,
+  maxHeight: 360,
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  padding: "12px 0"
+};
+var emptyStyle2 = {
+  color: "#94a3b8",
+  border: "1px dashed rgba(148,163,184,.28)",
+  borderRadius: 6,
+  padding: 12,
+  fontSize: 13
+};
+var bubbleBase = {
+  borderRadius: 6,
+  padding: "9px 10px",
+  fontSize: 14,
+  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: 8,
+  padding: 12,
+  display: "grid",
+  gap: 8
+};
+var paymentHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  color: "#fed7aa",
+  fontSize: 13
+};
+var helperStyle = {
+  color: "#fdba74",
+  fontSize: 12,
+  lineHeight: 1.45,
+  margin: 0
+};
+var inlineLinkStyle = {
+  color: "#67e8f9",
+  textDecoration: "none"
+};
+var labelStyle2 = {
+  display: "grid",
+  gap: 6,
+  color: "#cbd5e1",
+  fontSize: 12
+};
+var fieldStyle = {
+  display: "grid",
+  gridTemplateColumns: "minmax(70px, 88px) minmax(0, 1fr) auto",
+  alignItems: "center",
+  gap: 8,
+  fontSize: 12
+};
+var fieldLabelStyle = {
+  color: "#94a3b8"
+};
+var fieldValueStyle = {
+  color: "#f8fafc",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  fontSize: 11
+};
+var copyButtonStyle = {
+  border: "1px solid rgba(255,255,255,.16)",
+  background: "rgba(255,255,255,.06)",
+  color: "#f8fafc",
+  borderRadius: 4,
+  padding: "4px 7px",
+  cursor: "pointer"
+};
+var formStyle = {
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 1fr) auto",
+  gap: 8,
+  marginTop: 12
+};
+var inputStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  border: "1px solid rgba(255,255,255,.16)",
+  background: "#050505",
+  color: "#f8fafc",
+  borderRadius: 6,
+  padding: "10px 11px",
+  fontSize: 14
+};
+var sendButtonStyle = {
+  border: 0,
+  background: "#fb923c",
+  color: "#111827",
+  borderRadius: 6,
+  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: 6,
+  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: 6,
+  padding: "8px 9px",
+  fontSize: 12,
+  lineHeight: 1.45
+};
+var intentStyle = {
+  border: "1px solid rgba(255,255,255,.12)",
+  background: "rgba(255,255,255,.04)",
+  borderRadius: 6,
+  padding: 10,
+  display: "grid",
+  gap: 8
+};
+var intentHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: 8,
+  color: "#e2e8f0",
+  fontSize: 12
+};
+var intentCodeStyle = {
+  display: "block",
+  maxHeight: 130,
+  overflow: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  color: "#cbd5e1",
+  fontSize: 10,
+  lineHeight: 1.45
+};
+var receiptStyle = {
+  display: "inline-flex",
+  color: "#67e8f9",
+  fontSize: 13,
+  textDecoration: "none"
+};
+var receiptPanelStyle = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: 10,
+  marginTop: 10,
+  border: "1px solid rgba(103,232,249,.22)",
+  background: "rgba(103,232,249,.07)",
+  borderRadius: 6,
+  padding: "9px 10px"
+};
+var receiptApiStyle = {
+  color: "#cbd5e1",
+  fontSize: 12,
+  textDecoration: "none"
+};
+var errorStyle2 = {
+  color: "#fecaca",
+  background: "rgba(239,68,68,.12)",
+  border: "1px solid rgba(239,68,68,.25)",
+  borderRadius: 6,
+  padding: 10,
+  marginTop: 10,
+  fontSize: 13
+};
 
-export { DEFAULT_API_BASE, DEFAULT_LIMIT, DEFAULT_REFRESH_MS, SageActivityFeed };
+export { DEFAULT_API_BASE, DEFAULT_LIMIT, DEFAULT_REFRESH_MS, SageActivityFeed, SagePaymentWidget };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map