pinecall-runtime 0.1.6__py3-none-any.whl

pinecall/public/widget/pinecall-widget.js

@@ -0,0 +1,853 @@
+// <pinecall-widget>: a floating button that connects a visitor to a Pinecall agent by phone,
+// browser voice call, or chat.
+//
+// The page's own server mints visit tokens and relays the call log with the org's API key, so
+// the key never reaches the browser. The same endpoints serve every agent of the org.
+//
+//   <script type="module" src="/pinecall/pinecall-widget.js"></script>
+//   <pinecall-widget agent="bidfire-sales" name="Sam" company="BidFire"
+//                    token-url="/pinecall/token.php" log-url="/pinecall/log.php"></pinecall-widget>
+//
+// Attributes:
+//   agent       required · the agent's slug
+//   token-url   required · mints visit tokens (POST {agent, scope}). Alternatively set the
+//               `tokenProvider` property to (scope, agent) => Promise<token JSON>
+//   log-url     optional · lists phone calls and relays a call's log (GET ?agent=&list=1,
+//               GET ?agent=&call=). Enables log-based transcripts, the live phone call under
+//               "Call us" and the tools toggle; without it, text comes from LiveKit text streams
+//   code-url    optional · requests a call code (POST {agent}); your server calls the gateway's
+//               POST /v1/codes with the org key. Or set `codeProvider` to (agent) => Promise<code
+//               JSON>. "Call us" then shows the number and a 4-digit code, and follows only the
+//               call that enters it; no log-url needed
+//   gateway     optional · where codes and call logs are read; defaults to this file's origin,
+//               or cloud.pinecall.io when served from jsDelivr
+//   phone       optional · number for "Call us" without a code; with neither, "Call us" is hidden
+//   name        optional · display name, "Assistant" by default
+//   company     optional · shown under the name
+//   tagline     optional · line under the name, e.g. "books your technician"
+//   label       optional · button text, "Talk to <name>" by default
+//   greeting    optional · plain-text first message, shown before any call starts
+//   autostart   optional · open straight into a voice call; the microphone is requested in the
+//               same click that opens the panel
+//   position    optional · bottom-right (default), bottom-left, top-right, top-left, or inline
+//               (rendered where the tag is, in the page flow)
+//   theme       optional · auto (default, follows the browser), light, or dark
+//
+// Styling: the font is inherited. These custom properties apply in both themes: --pc-accent,
+// --pc-accent-soft, --pc-ink, --pc-muted, --pc-line, --pc-radius, --pc-offset, --pc-font,
+// --pc-font-size, --pc-z. Parts: `button` and `panel`, e.g. pinecall-widget::part(button).
+//
+// Events on the tag: pinecall:open, pinecall:started {call, scope}, pinecall:ended {call}.
+//
+// Uses LiveKit's client SDK from a CDN; no build step.
+
+import { ParticipantKind, Room, RoomEvent, Track } from "https://cdn.jsdelivr.net/npm/livekit-client@2/+esm";
+
+const TRANSCRIPTION = "lk.transcription";
+const CHAT = "lk.chat";
+const SEGMENT_ID = "lk.segment_id";
+const TRANSCRIPTION_FINAL = "lk.transcription_final";
+const TOOLS_SETTING = "pinecall-widget:show-tools";
+// Default gateway: the origin that served this file, or Pinecall's when served from the CDN.
+const SERVED_FROM = new URL(import.meta.url).origin;
+const A_GATEWAY = SERVED_FROM.includes("jsdelivr.net") ? "https://cloud.pinecall.io" : SERVED_FROM;
+// Must match the entry types a log-url relay requests.
+const LOG_TYPES = "call.started,user.transcript,agent.transcript,turn.user,turn.agent,tool.call,tool.result,call.ended";
+
+/** Format a NANP number as +1 XXX XXX XXXX; other numbers are returned unchanged. */
+function spaced(number) {
+  const nanp = /^\+1(\d{3})(\d{3})(\d{4})$/.exec(number);
+  return nanp ? `+1 ${nanp[1]} ${nanp[2]} ${nanp[3]}` : number;
+}
+
+// Dark palette for `theme="dark"` and for `auto` under prefers-color-scheme: dark. Page-set custom
+// properties still take precedence.
+const DARK = `
+    color-scheme: dark;
+    color: var(--pc-ink, #e5e7eb);
+    --_soft: var(--pc-accent-soft, color-mix(in srgb, var(--_accent) 22%, #17181c));
+    --_accent-ink: color-mix(in srgb, var(--_accent) 55%, #fff);
+    --_line: var(--pc-line, #2c2f36);
+    --_muted: var(--pc-muted, #9ca3af);
+    --_surface: #17181c;
+    --_raised: #24262c;
+    --_field: #3a3d45;
+    --_live: #4ade80;
+    --_failed: #f87171;
+    --_danger-line: #7f1d1d;
+    --_shadow: rgba(0, 0, 0, .5);
+`;
+
+const STYLE = `
+  :host {
+    all: initial;
+    display: contents;
+    color-scheme: light;
+    font-family: var(--pc-font, inherit);
+    font-size: var(--pc-font-size, 15px);
+    line-height: 1.45;
+    color: var(--pc-ink, #1f2937);
+    --_accent: var(--pc-accent, #6d28d9);
+    --_accent-ink: var(--_accent);
+    --_soft: var(--pc-accent-soft, #f5f3ff);
+    --_line: var(--pc-line, #e5e7eb);
+    --_muted: var(--pc-muted, #6b7280);
+    --_surface: #fff;
+    --_raised: #f3f4f6;
+    --_field: #d1d5db;
+    --_live: #16a34a;
+    --_failed: #dc2626;
+    --_danger-line: #fecaca;
+    --_shadow: rgba(17, 24, 39, .18);
+    --_radius: var(--pc-radius, 14px);
+    --_offset: var(--pc-offset, 20px);
+    --_z: var(--pc-z, 2147483000);
+  }
+  :host([theme="dark"]) { ${DARK} }
+  @media (prefers-color-scheme: dark) { :host(:not([theme="light"])) { ${DARK} } }
+  :host([position="inline"]) { display: inline-block; }
+  * { box-sizing: border-box; }
+  .fab { position: fixed; right: var(--_offset); bottom: var(--_offset); z-index: var(--_z); display: inline-flex; align-items: center; gap: 8px;
+         padding: 11px 16px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: inherit; font-weight: 500;
+         background: var(--_accent); box-shadow: 0 6px 18px var(--_shadow); transition: transform .12s, box-shadow .12s; }
+  .fab:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--_shadow); }
+  .fab svg { width: 18px; height: 18px; }
+  .panel { position: fixed; right: var(--_offset); bottom: calc(var(--_offset) + 60px); z-index: var(--_z); width: min(380px, calc(100vw - 2 * var(--_offset)));
+           height: auto; max-height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--_surface); color: inherit;
+           border-radius: var(--_radius); overflow: hidden; box-shadow: 0 16px 40px var(--_shadow); border: 1px solid var(--_line); }
+  .panel.wide { width: min(480px, calc(100vw - 2 * var(--_offset))); height: min(760px, calc(100vh - 110px)); }
+  .panel[hidden] { display: none; }
+  :host([position="bottom-left"]) .fab, :host([position="bottom-left"]) .panel { right: auto; left: var(--_offset); }
+  :host([position="top-right"]) .fab { bottom: auto; top: var(--_offset); }
+  :host([position="top-right"]) .panel { bottom: auto; top: calc(var(--_offset) + 60px); }
+  :host([position="top-left"]) .fab { right: auto; bottom: auto; left: var(--_offset); top: var(--_offset); }
+  :host([position="top-left"]) .panel { right: auto; bottom: auto; left: var(--_offset); top: calc(var(--_offset) + 60px); }
+  :host([position="inline"]) .fab { position: static; }
+  @media (max-width: 520px) {
+    .panel.wide { right: 0; bottom: 0; left: 0; top: auto; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
+  }
+  header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; flex: 0 0 auto;
+           border-bottom: 1px solid var(--_line); }
+  header h2 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+  header h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_accent); }
+  header p { margin: 2px 0 0; font-size: 13px; color: var(--_muted); }
+  header button { border: 0; background: transparent; color: var(--_muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
+  header button:hover { color: inherit; }
+  .body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
+  .option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
+            border: 1px solid var(--_line); border-radius: calc(var(--_radius) - 2px); background: var(--_surface); color: inherit; font: inherit; text-decoration: none; }
+  .option:hover { border-color: var(--_accent); background: var(--_soft); }
+  .option .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--_soft); color: var(--_accent-ink); flex: 0 0 36px; }
+  .option .icon svg { width: 18px; height: 18px; }
+  .option b { display: block; font-weight: 500; }
+  .option span { display: block; font-size: 13px; color: var(--_muted); }
+  .number { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: calc(var(--_radius) - 2px); background: var(--_soft); }
+  .number b { font-size: 20px; font-weight: 500; letter-spacing: .01em; }
+  .number a { font: inherit; font-weight: 500; padding: 9px 14px; border-radius: 10px; background: var(--_accent); color: #fff; text-decoration: none; }
+  .dial { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; }
+  .step { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start; }
+  .step .n { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
+             background: var(--_soft); color: var(--_accent-ink); }
+  .step .say { font-size: 14px; font-weight: 500; line-height: 26px; }
+  .step .say small { font-weight: 400; color: var(--_muted); font-size: 13px; }
+  .step .number { padding: 10px 10px 10px 14px; }
+  .number a { display: inline-flex; align-items: center; gap: 6px; }
+  .number a svg { width: 15px; height: 15px; }
+  .digits { display: flex; gap: 8px; }
+  .digits span { width: 52px; height: 60px; display: grid; place-items: center; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums;
+                 border: 1.5px solid color-mix(in srgb, var(--_accent) 30%, var(--_line)); border-radius: 12px; background: var(--_surface); }
+  .waiting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
+  .waiting .status { display: inline-flex; align-items: center; gap: 8px; }
+  .waiting .status:not(.failed)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_accent); animation: pc-pulse 1.4s ease-in-out infinite; }
+  .expires { font-size: 12px; color: var(--_muted); padding: 3px 9px; border-radius: 999px; background: var(--_raised); font-variant-numeric: tabular-nums; }
+  .soon { display: grid; place-items: center; text-align: center; padding: 18px; font-size: 13px; color: var(--_muted);
+          border: 1.5px dashed var(--_line); border-radius: calc(var(--_radius) - 2px); flex: 1 1 auto; min-height: 110px; }
+  @keyframes pc-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
+  @media (prefers-reduced-motion: reduce) { .waiting .status::before { animation: none; } }
+  .lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; overflow-y: auto; min-height: 120px; }
+  .lines li { padding: 8px 12px; border-radius: 12px; max-width: 88%; font-size: 14px; }
+  .lines li.agent { background: var(--_soft); align-self: flex-start; border-bottom-left-radius: 4px; }
+  .lines li.user { background: var(--_raised); align-self: flex-end; border-bottom-right-radius: 4px; }
+  .lines li.interim { opacity: .55; }
+  .lines li.mark { background: none; color: var(--_muted); font: 12px/1.4 ui-monospace, Menlo, monospace; max-width: 100%; padding: 2px 8px; }
+  .lines li.mark[hidden] { display: none; }
+  .status { font-size: 13px; color: var(--_muted); }
+  .status.live { color: var(--_live); }
+  .status.failed { color: var(--_failed); }
+  .row { display: flex; gap: 8px; flex: 0 0 auto; }
+  input[type=text] { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--_field); border-radius: 10px; outline: none; color: inherit; background: var(--_surface); }
+  input[type=text]:focus { border-color: var(--_accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 20%, transparent); }
+  .btn { font: inherit; font-weight: 500; padding: 9px 14px; border: 0; border-radius: 10px; cursor: pointer; background: var(--_accent); color: #fff; }
+  .btn.quiet { background: var(--_raised); color: inherit; }
+  .btn.danger { background: var(--_surface); color: var(--_failed); border: 1px solid var(--_danger-line); }
+  .btn[disabled] { opacity: .5; cursor: default; }
+  footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--_line); flex: 0 0 auto; }
+  footer .right { display: flex; align-items: center; gap: 12px; }
+  .back { border: 0; background: transparent; color: var(--_accent-ink); font: inherit; cursor: pointer; padding: 0; }
+  .toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--_muted); cursor: pointer; user-select: none; }
+  .toggle input { accent-color: var(--_accent); }
+  .greeting { margin: 0; padding: 10px 14px; border-radius: 12px; border-bottom-left-radius: 4px; align-self: flex-start;
+              max-width: 88%; font-size: 14px; background: var(--_soft); white-space: pre-line; }
+`;
+
+const ICONS = {
+  spark: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M5.6 18.4l2.1-2.1m8.6-8.6 2.1-2.1"/><circle cx="12" cy="12" r="3"/></svg>`,
+  phone: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>`,
+  mic: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>`,
+  chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v11H8l-4 4z"/></svg>`,
+};
+
+/**
+ * Renders one call's log as a transcript: caller turns, agent turns and tool calls in log order.
+ * The tools toggle shows or hides tool entries without redrawing.
+ */
+class Transcript {
+  constructor(list, showTools) {
+    this.list = list;
+    this.showTools = showTools;
+    this.stream = null;
+    this.lines = new Map();
+    this.hearing = null;
+    this.seen = 0;
+    this.onAgent = null;
+    this.onEnd = null;
+  }
+
+  follow(url, attempt = 0) {
+    this.stop();
+    if (attempt === 0) {
+      this.list.replaceChildren();
+      this.lines.clear();
+      this.hearing = null;
+      this.seen = 0;
+    }
+    const stream = new EventSource(url);
+    this.stream = stream;
+    // A new EventSource has no Last-Event-ID, so a reconnect replays the log from the start;
+    // skip entries by seq to avoid drawing them twice.
+    const on = (type, draw) =>
+      stream.addEventListener(type, (event) => {
+        // Not `lastEventId`: an event without an id inherits the previous one's.
+        const seq = JSON.parse(event.data).seq;
+        if (typeof seq === "number") {
+          if (seq <= this.seen) return;
+          this.seen = seq;
+        }
+        draw(event);
+      });
+    const data = (event) => JSON.parse(event.data).data ?? {};
+    stream.onerror = () => {
+      if (stream.readyState !== EventSource.CLOSED) return;
+      stream.close();
+      if (this.stream === stream && attempt < 10) setTimeout(() => this.follow(url, attempt + 1), 1000);
+    };
+    // Settle the line on the final transcript; `turn.user` arrives later, after end-of-utterance.
+    on("user.transcript", (event) => {
+      const heard = data(event);
+      if (!this.hearing) this.hearing = this.line("user interim", "");
+      this.hearing.textContent = heard.text ?? "";
+      if (heard.final) this.hearing.className = "user";
+      this.scroll();
+    });
+    on("turn.user", (event) => {
+      const item = this.hearing ?? this.line("user", "");
+      item.className = "user";
+      item.textContent = data(event).text ?? "";
+      this.hearing = null;
+    });
+    on("agent.transcript", (event) => {
+      const word = data(event);
+      this.spoken(`speech_${word.speech_id}`, word.text ?? "", word.start);
+      this.onAgent?.();
+    });
+    on("turn.agent", (event) => {
+      const turn = data(event);
+      this.said(`speech_${turn.speech_id}`, turn.text ?? "", true);
+      this.onAgent?.();
+    });
+    on("tool.call", (event) => {
+      const tool = data(event);
+      this.mark(`→ ${tool.name}(${JSON.stringify(tool.arguments ?? {})})`);
+    });
+    on("tool.result", (event) => {
+      const result = data(event);
+      this.mark(`← ${result.name}: ${result.error ?? JSON.stringify(result.output ?? "").slice(0, 120)}`);
+    });
+    on("call.ended", (event) => {
+      this.mark(`— ended: ${data(event).reason ?? ""}`, true);
+      this.stop();
+      this.onEnd?.();
+    });
+  }
+
+  /** Show typed text immediately, greyed until the log's `turn.user` confirms it. */
+  typed(text) {
+    this.hearing = this.line("user interim", text);
+  }
+
+  /** Remove the pending typed line after a failed send. */
+  untyped() {
+    this.hearing?.remove();
+    this.hearing = null;
+  }
+
+  stop() {
+    this.stream?.close();
+    this.stream = null;
+    for (const item of this.lines.values()) item.pace?.timers.forEach(clearTimeout);
+  }
+
+  /**
+   * Show one agent word in sync with playback. Words arrive before they play, with a start time
+   * relative to the speech; that offset is counted from the first word's arrival. Untimed words
+   * show immediately.
+   */
+  spoken(key, text, start) {
+    let item = this.lines.get(key);
+    if (!item) {
+      item = this.line("agent interim", "");
+      this.lines.set(key, item);
+      item.pace = { anchor: performance.now(), last: 0, timers: [] };
+    }
+    const pace = item.pace;
+    const show = () => {
+      item.textContent += text;
+      this.scroll();
+    };
+    const due = typeof start === "number" ? Math.max(pace.anchor + start * 1000, pace.last) : performance.now();
+    pace.last = due;
+    const wait = due - performance.now();
+    if (wait <= 0) show();
+    else pace.timers.push(setTimeout(show, wait));
+  }
+
+  /** Replace the pending words with the final text of the agent's turn. */
+  said(key, text, final) {
+    let item = this.lines.get(key);
+    if (!item) {
+      item = this.line("agent", "");
+      this.lines.set(key, item);
+    }
+    item.pace?.timers.forEach(clearTimeout);
+    item.pace = null;
+    item.className = `agent${final ? "" : " interim"}`;
+    item.textContent = text;
+    this.scroll();
+  }
+
+  mark(text, always = false) {
+    const item = this.line("mark", text);
+    if (!always) {
+      item.dataset.tool = "1";
+      item.hidden = !this.showTools();
+    }
+  }
+
+  line(className, text) {
+    const item = document.createElement("li");
+    item.className = className;
+    item.textContent = text;
+    this.list.append(item);
+    this.scroll();
+    return item;
+  }
+
+  tools(shown) {
+    for (const item of this.list.querySelectorAll("li[data-tool]")) item.hidden = !shown;
+  }
+
+  scroll() {
+    this.list.scrollTop = this.list.scrollHeight;
+  }
+}
+
+class PinecallWidget extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.room = null;
+    this.streamLines = new Map();
+    this.transcript = null;
+    this.phonePoll = null;
+    this.codeWait = null;
+    this.codeClock = null;
+  }
+
+  /** The log-url with this agent's query appended. */
+  log(query) {
+    return `${this.logUrl}${this.logUrl.includes("?") ? "&" : "?"}agent=${encodeURIComponent(this.agent)}&${query}`;
+  }
+
+  connectedCallback() {
+    this.agent = this.getAttribute("agent") ?? "";
+    this.name = this.getAttribute("name") ?? "Assistant";
+    this.company = this.getAttribute("company") ?? "";
+    this.tagline = this.getAttribute("tagline") ?? "";
+    this.phone = this.getAttribute("phone") ?? "";
+    this.logUrl = this.getAttribute("log-url") ?? "";
+    this.codeUrl = this.getAttribute("code-url") ?? "";
+    this.gateway = (this.getAttribute("gateway") ?? A_GATEWAY).replace(/\/+$/, "");
+    this.greeting = this.getAttribute("greeting") ?? "";
+    // Present means on, unless the value is "false".
+    this.autostart = this.hasAttribute("autostart") && this.getAttribute("autostart") !== "false";
+    const label = this.getAttribute("label") ?? `Talk to ${this.name}`;
+    this.shadowRoot.innerHTML = `
+      <style>${STYLE}</style>
+      <button class="fab" part="button">${ICONS.spark}<span>${label}</span></button>
+      <section class="panel" part="panel" hidden>
+        <header>
+          <div><h2>${this.name}</h2><p>${[this.company, this.tagline].filter(Boolean).join(" · ")}</p></div>
+          <button class="close" aria-label="Close">×</button>
+        </header>
+        <div class="body"></div>
+        <footer></footer>
+      </section>`;
+    this.$ = (selector) => this.shadowRoot.querySelector(selector);
+    this.$(".fab").addEventListener("click", () => (this.autostart ? this.start() : this.toggle()));
+    this.$(".close").addEventListener("click", () => this.hide());
+    this.menu();
+  }
+
+  toggle() {
+    const panel = this.$(".panel");
+    if (panel.hidden) {
+      panel.hidden = false;
+      this.dispatchEvent(new CustomEvent("pinecall:open"));
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * `autostart`: request the microphone inside the opening click (browsers require a user
+   * gesture), then release it; the room later gets its own track. On refusal, show the menu
+   * with the reason.
+   */
+  async start() {
+    const panel = this.$(".panel");
+    if (!panel.hidden) return this.hide();
+    panel.hidden = false;
+    this.dispatchEvent(new CustomEvent("pinecall:open"));
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach((track) => track.stop());
+    } catch (refused) {
+      this.menu();
+      this.notice(`The microphone was not allowed (${refused.name ?? "refused"}): chat instead, or allow it and try again.`);
+      return;
+    }
+    await this.conversation("talk");
+  }
+
+  async hide() {
+    await this.leave();
+    this.$(".panel").hidden = true;
+    this.menu();
+  }
+
+  showTools() {
+    try {
+      return localStorage.getItem(TOOLS_SETTING) === "1";
+    } catch {
+      return false;
+    }
+  }
+
+  // ── views ─────────────────────────────────────────────────────────────────────
+
+  menu() {
+    this.$(".panel").classList.remove("wide");
+    const body = this.$(".body");
+    body.innerHTML = `
+      ${this.greeting ? `<p class="greeting"></p>` : ""}
+      ${this.byCode() ? `<button class="option call"><span class="icon">${ICONS.phone}</span>
+        <span><b>Call us</b><span>From your phone, and follow the call here</span></span></button>`
+      : this.phone ? `<button class="option call"><span class="icon">${ICONS.phone}</span>
+        <span><b>Call us</b><span>${this.phone}</span></span></button>` : ""}
+      <button class="option talk"><span class="icon">${ICONS.mic}</span>
+        <span><b>Talk in your browser</b><span>Speak with ${this.name} now, no phone needed</span></span></button>
+      <button class="option chat"><span class="icon">${ICONS.chat}</span>
+        <span><b>Chat</b><span>Type, and ${this.name} answers</span></span></button>`;
+    this.$("footer").innerHTML = `<span class="status">${[this.company, `${this.name} answers right away`].filter(Boolean).join(" · ")}</span>`;
+    // Set as text, never HTML.
+    const greeting = body.querySelector(".greeting");
+    if (greeting) greeting.textContent = this.greeting;
+    body.querySelector(".call")?.addEventListener("click", () => this.callUs());
+    body.querySelector(".talk").addEventListener("click", () => this.conversation("talk"));
+    body.querySelector(".chat").addEventListener("click", () => this.conversation("chat"));
+  }
+
+  /** Footer for non-menu views: back, the tools toggle (with a log), and new/end for calls and chats. */
+  footer(end, scope = null) {
+    const footer = this.$("footer");
+    footer.innerHTML = `
+      <button class="back">‹ Back</button>
+      <span class="right">
+        ${this.logUrl ? `<label class="toggle"><input type="checkbox" ${this.showTools() ? "checked" : ""}> Show tools</label>` : ""}
+        ${scope ? `<button class="btn quiet again">${scope === "talk" ? "New call" : "New chat"}</button>` : ""}
+        ${end ? `<button class="btn danger end">${end}</button>` : ""}
+      </span>`;
+    footer.querySelector(".back").addEventListener("click", async () => {
+      await this.leave();
+      this.menu();
+    });
+    footer.querySelector(".toggle input")?.addEventListener("change", (event) => {
+      try {
+        localStorage.setItem(TOOLS_SETTING, event.target.checked ? "1" : "0");
+      } catch {
+        // storage unavailable; the toggle still works for this page
+      }
+      this.transcript?.tools(event.target.checked);
+    });
+    footer.querySelector(".end")?.addEventListener("click", () => this.leave(true));
+    footer.querySelector(".again")?.addEventListener("click", () => this.again(scope));
+  }
+
+  /** Hang up the current session and start a new one on a fresh token. */
+  async again(scope) {
+    await this.leave();
+    await this.conversation(scope);
+  }
+
+  /** Whether "Call us" uses a code. */
+  byCode() {
+    return Boolean(this.codeUrl || this.codeProvider);
+  }
+
+  /** Fetch {code, number, expires_at, code_token} from `codeProvider` or `code-url`. */
+  async askCode() {
+    if (this.codeProvider) return this.codeProvider(this.agent);
+    const answer = await fetch(this.codeUrl, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ agent: this.agent }),
+    });
+    const said = await answer.json().catch(() => ({}));
+    if (!answer.ok) throw new Error(said.detail ?? `code: HTTP ${answer.status}`);
+    return said;
+  }
+
+  /**
+   * "Call us" with a code: long-poll the gateway with the code token (up to 25 s per request)
+   * until a call claims it, then follow that call's log with the returned log token.
+   */
+  async callByCode() {
+    this.$(".panel").classList.add("wide");
+    const body = this.$(".body");
+    body.innerHTML = `<span class="status">Getting your code…</span><ul class="lines"></ul>`;
+    this.footer(null);
+    let code;
+    try {
+      code = await this.askCode();
+      if (!(typeof code?.code === "string" && typeof code.number === "string" && typeof code.code_token === "string"))
+        throw new Error("the code endpoint answered with something this widget does not know");
+    } catch (refused) {
+      this.status(refused.message, "failed");
+      return;
+    }
+    const tel = code.number.replace(/[^\d+]/g, "");
+    body.innerHTML = `
+      <div class="dial">
+        <div class="step">
+          <span class="n">1</span><span class="say">Call ${this.name}</span>
+          <div class="number"><b></b><a>${ICONS.phone}Call</a></div>
+        </div>
+        <div class="step">
+          <span class="n">2</span><span class="say">Key this code on your phone <small>· any time during the call</small></span>
+          <div class="digits" role="img"></div>
+        </div>
+        <div class="waiting"><span class="status"></span><span class="expires"></span></div>
+      </div>
+      <div class="soon">Your conversation shows up here, live, the moment the code is keyed.</div>
+      <ul class="lines" hidden></ul>`;
+    // From the application's server: set as text, never HTML.
+    body.querySelector(".number b").textContent = spaced(code.number);
+    body.querySelector(".number a").href = `tel:${tel}`;
+    const digits = body.querySelector(".digits");
+    for (const digit of String(code.code)) digits.append(Object.assign(document.createElement("span"), { textContent: digit }));
+    digits.setAttribute("aria-label", `the code: ${String(code.code).split("").join(" ")}`);
+    this.status("Waiting for your call");
+    const expires = body.querySelector(".expires");
+    const waiting = () => {
+      const left = Math.max(0, Math.floor(code.expires_at - Date.now() / 1000));
+      expires.textContent = `expires in ${Math.floor(left / 60)}:${String(left % 60).padStart(2, "0")}`;
+    };
+    waiting();
+    this.codeClock = setInterval(waiting, 1000);
+    const stop = new AbortController();
+    this.codeWait = stop;
+    const asked = `${this.gateway}/v1/codes/${encodeURIComponent(code.code)}?wait=1&token=${encodeURIComponent(code.code_token)}`;
+    while (!stop.signal.aborted) {
+      let standing;
+      try {
+        const answer = await fetch(asked, { signal: stop.signal });
+        // Retry on 5xx and network errors; any other status is final.
+        if (answer.status >= 500) throw new Error(`code: HTTP ${answer.status}`);
+        standing = await answer.json();
+        if (!answer.ok) throw Object.assign(new Error(standing.detail ?? `code: HTTP ${answer.status}`), { final: true });
+      } catch (failed) {
+        if (stop.signal.aborted) return;
+        if (failed.final) return this.codeFailed(failed.message);
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        continue;
+      }
+      if (standing.status === "claimed") return this.followClaimed(standing);
+      if (standing.status === "expired") return this.codeFailed("The code expired.", true);
+    }
+  }
+
+  /** Follow the claimed call's log from the gateway. */
+  followClaimed(standing) {
+    clearInterval(this.codeClock);
+    this.codeClock = null;
+    this.$(".body .dial")?.remove();
+    this.$(".body .soon")?.remove();
+    const lines = this.$(".body .lines");
+    lines.hidden = false;
+    lines.insertAdjacentHTML("beforebegin", `<span class="status"></span>`);
+    this.status(`Live: ${this.name} is on the line.`, "live");
+    this.transcript = new Transcript(lines, () => this.showTools());
+    const call = encodeURIComponent(standing.call);
+    this.transcript.follow(
+      `${this.gateway}/v1/calls/${call}/events?types=${LOG_TYPES}&after=0&token=${encodeURIComponent(standing.log_token)}`,
+    );
+    this.transcript.mark("☎ your call", true);
+  }
+
+  /** Show why the code failed; offer a new one if it expired. */
+  codeFailed(said, again = false) {
+    clearInterval(this.codeClock);
+    this.codeClock = null;
+    this.status(said, "failed");
+    if (again) this.notice("Get a new code", () => this.callByCode());
+  }
+
+  /** "Call us": the number and the live call from log-url, or the code flow when configured. */
+  callUs() {
+    if (this.byCode()) return this.callByCode();
+    this.$(".panel").classList.add("wide");
+    const tel = this.phone.replace(/[^\d+]/g, "");
+    this.$(".body").innerHTML = `
+      <div class="number"><b>${this.phone}</b><a href="tel:${tel}">Call</a></div>
+      <span class="status">${this.logUrl ? "Waiting for your call…" : `Call the number and ${this.name} picks up.`}</span>
+      <ul class="lines"></ul>`;
+    this.footer(null);
+    if (!this.logUrl) return;
+    this.transcript = new Transcript(this.$(".lines"), () => this.showTools());
+    const openedAt = Date.now() / 1000 - 5;
+    let showing = null;
+    const poll = async () => {
+      try {
+        const answer = await fetch(this.log("list=1"));
+        if (!answer.ok) throw new Error(`log: HTTP ${answer.status}`);
+        const { calls } = await answer.json();
+        const live = calls.find((call) => call.live);
+        this.status(live ? `Live: ${this.name} is on the line.` : "Waiting for your call…", live ? "live" : "");
+        const current = live ?? calls.find((call) => (call.started_at ?? 0) >= openedAt);
+        if (current && showing !== current.call) {
+          showing = current.call;
+          this.transcript.follow(this.log(`call=${encodeURIComponent(current.call)}`));
+          this.transcript.mark(`☎ a call from ${current.from}`, true);
+        }
+      } catch (failed) {
+        this.status(failed.message, "failed");
+      }
+    };
+    // Poll every second while the phone rings.
+    poll();
+    this.phonePoll = setInterval(poll, 1000);
+  }
+
+  async conversation(scope) {
+    this.$(".panel").classList.add("wide");
+    const body = this.$(".body");
+    body.innerHTML = `
+      ${this.greeting ? `<p class="greeting"></p>` : ""}
+      <span class="status">Connecting…</span>
+      <ul class="lines"></ul>
+      ${scope === "chat" ? `<div class="row"><input type="text" placeholder="Type a message and press Enter" autocomplete="off"><button class="btn send">Send</button></div>` : ""}`;
+    body.querySelector(".greeting")?.replaceChildren(document.createTextNode(this.greeting));
+    this.footer(scope === "talk" ? "Hang up" : "End chat", scope);
+    if (scope === "chat") {
+      const input = body.querySelector("input");
+      const send = async () => {
+        const text = input.value.trim();
+        if (!text) return;
+        input.value = "";
+        const pending = this.logUrl ? null : `typed_${Date.now()}`;
+        if (pending) this.draw(pending, "user interim", text, false);
+        try {
+          if (!this.room) await this.open("chat");
+          this.transcript?.typed(text);
+          await this.send(text);
+          if (pending) this.draw(pending, "user", text, true);
+        } catch (failed) {
+          this.transcript?.untyped();
+          if (pending) this.streamLines.get(pending)?.remove();
+          input.value = text;
+          this.status(failed.message, "failed");
+        }
+        input.focus();
+      };
+      body.querySelector(".send").addEventListener("click", send);
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") send();
+      });
+    }
+    try {
+      await this.open(scope);
+    } catch (failed) {
+      this.status(failed.message, "failed");
+    }
+  }
+
+  // ── room ──────────────────────────────────────────────────────────────────────
+
+  async token(scope) {
+    // `tokenProvider(scope, agent)` replaces token-url for pages that mint tokens themselves.
+    if (typeof this.tokenProvider === "function") return this.tokenProvider(scope, this.agent);
+    const url = this.getAttribute("token-url");
+    if (!url) throw new Error("pinecall-widget: token-url is missing");
+    if (!this.agent) throw new Error("pinecall-widget: agent is missing");
+    const answer = await fetch(url, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ agent: this.agent, scope }),
+    });
+    const minted = await answer.json().catch(() => ({}));
+    if (!answer.ok) throw new Error(minted.detail ?? `token endpoint: HTTP ${answer.status}`);
+    return minted;
+  }
+
+  async open(scope) {
+    await this.leave();
+    this.streamLines.clear();
+    const minted = await this.token(scope);
+    const room = new Room();
+    this.room = room;
+    this.greeted = new Promise((resolve) => {
+      this.onGreeted = resolve;
+    });
+    if (this.logUrl) {
+      this.transcript = new Transcript(this.$(".lines"), () => this.showTools());
+      this.transcript.onAgent = () => this.onGreeted?.();
+      this.transcript.onEnd = () => this.status("Ended.");
+    } else {
+      room.registerTextStreamHandler(TRANSCRIPTION, (reader, from) => this.read(reader, from.identity));
+    }
+    room.on(RoomEvent.TrackSubscribed, (track) => {
+      if (scope !== "talk" || track.kind !== Track.Kind.Audio) return;
+      const element = track.attach();
+      element.style.display = "none";
+      this.shadowRoot.append(element);
+    });
+    room.on(RoomEvent.TrackUnsubscribed, (track) => track.detach().forEach((element) => element.remove()));
+    room.on(RoomEvent.Disconnected, () => {
+      // A replaced room disconnects after the new session is shown; only emit its end event.
+      if (this.room === room) {
+        this.room = null;
+        this.status("Ended.");
+      }
+      this.dispatchEvent(new CustomEvent("pinecall:ended", { detail: { call: minted.call } }));
+    });
+    await room.connect(minted.server_url, minted.participant_token);
+    // The call exists only after the join, so follow its log now.
+    if (this.logUrl) this.transcript.follow(this.log(`call=${encodeURIComponent(minted.call)}`));
+    this.$(".body .greeting")?.remove();
+    if (scope === "talk") {
+      await room.localParticipant.setMicrophoneEnabled(true);
+      // Autoplay may be blocked: with `autostart` the user gesture is several awaits back.
+      if (!room.canPlaybackAudio) this.notice("Tap to hear the agent", () => room.startAudio());
+    }
+    this.status(scope === "talk" ? `Live. ${this.name} is listening.` : "Live.", "live");
+    this.dispatchEvent(new CustomEvent("pinecall:started", { detail: { call: minted.call, scope } }));
+    return minted.call;
+  }
+
+  async send(text) {
+    if (!this.room) throw new Error("not connected");
+    // Text sent before the agent joins is lost; wait for the greeting (max 8 s).
+    await Promise.race([this.greeted, new Promise((resolve) => setTimeout(resolve, 8000))]);
+    await this.room.localParticipant.sendText(text, { topic: CHAT });
+  }
+
+  /**
+   * Leave the room, log stream and phone poll. On hang-up (`ended`) keep reading the log so the
+   * final turns still show, and do not wait for the disconnect.
+   */
+  async leave(ended = false) {
+    const room = this.room;
+    this.room = null;
+    clearInterval(this.phonePoll);
+    this.phonePoll = null;
+    this.codeWait?.abort();
+    this.codeWait = null;
+    clearInterval(this.codeClock);
+    this.codeClock = null;
+    if (ended) {
+      this.status("Hanging up…");
+      const end = this.$("footer .end");
+      if (end) end.disabled = true;
+      const input = this.$(".body input");
+      if (input) input.disabled = true;
+    } else {
+      this.transcript?.stop();
+      this.transcript = null;
+    }
+    await Promise.race([room?.disconnect(), new Promise((resolve) => setTimeout(resolve, 3000))]);
+    if (ended) this.status("Ended.");
+  }
+
+  // ── transcripts from LiveKit text streams (no log-url) ────────────────────────
+
+  async read(reader, identity) {
+    const id = reader.info.attributes?.[SEGMENT_ID] ?? reader.info.id;
+    const who = this.room?.remoteParticipants.get(identity)?.kind === ParticipantKind.AGENT ? "agent" : "user";
+    if (who === "agent") this.onGreeted?.();
+    let text = "";
+    for await (const chunk of reader) {
+      text += chunk;
+      this.draw(id, who, text, false);
+    }
+    this.draw(id, who, text, reader.info.attributes?.[TRANSCRIPTION_FINAL] === "true");
+  }
+
+  draw(id, who, text, final) {
+    const list = this.$(".lines");
+    if (!list) return;
+    let line = this.streamLines.get(id);
+    if (!line) {
+      line = document.createElement("li");
+      this.streamLines.set(id, line);
+      list.append(line);
+    }
+    line.className = `${who}${final ? "" : " interim"}`;
+    line.textContent = text;
+    list.scrollTop = list.scrollHeight;
+  }
+
+  /** Show a notice under the status, as a button when `tap` is given. */
+  notice(text, tap) {
+    const body = this.$(".body");
+    if (!body) return;
+    const line = document.createElement(tap ? "button" : "span");
+    line.className = tap ? "btn quiet" : "status failed";
+    line.textContent = text;
+    if (tap) {
+      line.addEventListener("click", async () => {
+        await tap();
+        line.remove();
+      });
+    }
+    body.prepend(line);
+  }
+
+  status(text, tone = "") {
+    const status = this.$(".body .status");
+    if (!status) return;
+    status.textContent = text;
+    status.className = `status ${tone}`;
+  }
+}
+
+if (!customElements.get("pinecall-widget")) customElements.define("pinecall-widget", PinecallWidget);