@lightworkai.official/debug-capture 0.17.4 → 0.19.0

package/dist/live.d.ts

@@ -13,7 +13,14 @@ export declare function liveSocketUrl(host: string, ticket: string): string;
 export declare function answerPath(call: Pick<RingingCall, "id" | "ticketId">): string;
 /** Is this a call ringing for the person at this widget? */
 export declare function ringsHere(call: Pick<RingingCall, "status" | "side">): boolean;
+type LiveFrame = {
+    type?: string;
+    [k: string]: unknown;
+};
+export declare function onLiveFrame(fn: (frame: LiveFrame) => void): () => void;
+export declare function hostToken(): Promise<string | null>;
 /** Start listening for calls. Idempotent; a no-op without identity, or with `ring: false`. */
 export declare function startLiveRing(): void;
 /** Let go — the socket, the card, the timers. For a host that unmounts, and for the tests. */
 export declare function stopLiveRing(): void;
+export {};

package/dist/server.d.ts

@@ -14,11 +14,15 @@ export interface SupportProfileFact {
     label: string;
     value: string;
 }
-/** Whoever the host has authenticated. Email is the account key. */
+/**
+ * Whoever the host has authenticated. Email is the account key — or, for someone the host knows but holds no email
+ * for (a CIB officer with none in the ERP, 2026-10-27: every report they ever sent landed anonymous, nobody could call
+ * them back), the host's own id alone.
+ */
 export interface SupportUser {
-    /** The host's own id for this person, recorded so a changed email still matches. */
+    /** The host's own id for this person, recorded so a changed email still matches — the key when there is no email. */
     id?: string | null;
-    email: string;
+    email?: string | null;
     name?: string | null;
     /** What the host knows about their work — most important first. Optional; bounded on the way in. */
     profile?: SupportProfileFact[] | null;

package/dist/server.mjs

@@ -23,17 +23,18 @@ function cleanProfile(profile) {
 var DEFAULT_TTL_SECONDS = 120;
 var b64 = (value) => Buffer.from(JSON.stringify(value), "utf8").toString("base64url");
 function createSupportToken(options) {
-  const email = options.user.email?.trim().toLowerCase();
-  if (!email || !email.includes("@"))
-    throw new Error("createSupportToken: a real email is required");
+  const email = options.user.email?.trim().toLowerCase() || null;
+  const id = options.user.id?.trim() || null;
+  if (email ? !email.includes("@") : !id)
+    throw new Error("createSupportToken: a real email, or the host's own id for this person, is required");
   if (!options.secret || options.secret.length < 16) {
     throw new Error("createSupportToken: the realm's reporter secret is missing or too short");
   }
   const now = Math.floor(Date.now() / 1000);
   const expiresIn = Math.min(Math.max(Math.floor(options.ttlSeconds ?? DEFAULT_TTL_SECONDS), 30), 12 * 60 * 60);
   const body = `${b64({ alg: "HS256", typ: "JWT" })}.${b64({
-    sub: options.user.id?.trim() || email,
-    email,
+    sub: id ?? email,
+    ...email ? { email } : {},
     name: options.user.name?.trim() || null,
     ...cleanProfile(options.user.profile) ? { profile: cleanProfile(options.user.profile) } : {},
     jti: randomUUID(),
@@ -59,7 +60,7 @@ function supportTokenHandler(options) {
       return json({ error: "Support identity is not configured" }, 503);
     }
     const user = await options.user();
-    if (!user?.email)
+    if (!user?.email?.trim() && !user?.id?.trim())
       return json({ error: "Unauthorized" }, 401);
     try {
       const { token, expiresIn } = createSupportToken({ secret, user, ttlSeconds: options.ttlSeconds });

package/dist/types.d.ts

@@ -80,6 +80,8 @@ export interface DebugReason {
     type: DebugReasonType;
     message?: string;
     stack?: string;
+    /** Opened from แชทกับทีม's panel (แจ้งปัญหาพร้อมภาพหน้าจอ): the report is linked to the person's chat. */
+    fromChat?: boolean;
 }
 /** A failed data-layer query the host chose to report (react-query, Apollo, …). */
 export interface ErroredQuery {

package/dist/ui/chatBubble.d.ts

@@ -0,0 +1,12 @@
+/** The panel's address: the support host's page, told the realm, signing in by hand-off (no token in the address). */
+export declare function supportFrameUrl(host: string, realmKey: string): string;
+/** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
+export declare function badgeText(n: number): string;
+/** Open the panel — from the bubble, or from the host app's own button (`openSupportChat`). */
+export declare function openSupportChat(): void;
+/** Fold the panel — it stays loaded, so the chat is there as it was the next time. */
+export declare function closeSupportChat(refocus?: boolean): void;
+/** The bubble, once — hidden until the host's token says somebody is signed in. */
+export declare function mountSupportChat(): void;
+/** Take it away — for a host that unmounts, and for the tests. */
+export declare function unmountSupportChat(): void;

package/dist/ui/strings.d.ts

@@ -120,5 +120,9 @@ export interface Strings {
     ringAnswering: string;
     /** The frame could not come up: answer in a new tab instead. */
     ringFallback: string;
+    /** แชทกับทีม's bubble (ui/chatBubble): its name, the panel's, and what waits — `chatUnread` carries `{n}`. */
+    chatOpen: string;
+    chatTitle: string;
+    chatUnread: string;
 }
 export declare function strings(locale: "th" | "en" | undefined): Strings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.17.4",
+  "version": "0.19.0",
   "description": "Report-a-problem widget: rolling network/console/action capture, optional rrweb session replay, annotated screenshot, and submission to a Lightwork Support host",
   "type": "module",
   "module": "./dist/index.mjs",

package/src/config.ts

@@ -111,6 +111,17 @@ export interface DebugCaptureConfig {
   /** Anything else worth recording — feature flags, build id, tenant. */
   extra?: () => Record<string, unknown>;
 
+  /**
+   * แชทกับทีม — a chat bubble at the bottom right: the person asks the support desk anything, no report needed, and
+   * follows what they filed (เรื่องของฉัน) in the same panel. The desk answers from สนทนา › แชท and can open a เรื่อง
+   * from it; แจ้งปัญหาพร้อมภาพหน้าจอ in the panel opens this library's report, linked to the chat.
+   *
+   * Off unless set. Needs `identity` — a chat is a person's, and is read back: with no signed-in person the bubble is
+   * not shown. `true` puts it at the bottom right; `{ position: "left" }` at the bottom left; `offset` moves it in from
+   * the corner (px) for a host that already has something there.
+   */
+  chat?: boolean | ChatOptions;
+
   capture?: CaptureOptions;
   redact?: RedactOptions;
 
@@ -209,6 +220,22 @@ export interface ToastNotice {
   action?: { label: string; onClick: () => void };
 }
 
+/** Where แชทกับทีม's bubble sits (`chat`). */
+export interface ChatOptions {
+  /** Which bottom corner — the right unless said. */
+  position?: "right" | "left";
+  /** In from that corner, in px — for a host that already has something there. */
+  offset?: { x?: number; y?: number };
+}
+
+/** The bubble's place, from `chat`: null when it is off. */
+export function chatPlace(chat: DebugCaptureConfig["chat"]): { side: "right" | "left"; x: number; y: number } | null {
+  if (!chat) return null;
+  const o = chat === true ? {} : chat;
+  const n = (v: unknown, d: number) => (typeof v === "number" && Number.isFinite(v) && v >= 0 && v < 2000 ? v : d);
+  return { side: o.position === "left" ? "left" : "right", x: n(o.offset?.x, 16), y: n(o.offset?.y, 16) };
+}
+
 export interface CaptureOptions {
   /** Rolling buffer sizes. */
   maxRequests?: number;

package/src/embed.ts

@@ -9,7 +9,9 @@
  *           data-app-version="1.4.2"
  *           data-environment="production"
  *           data-modules='{"/saraban":"งานสารบรรณ","/asset":"งานพัสดุ"}'
- *           data-replay="60"></script>
+ *           data-replay="60"
+ *           data-identity-url="/api/support-token"
+ *           data-chat="right"></script>
  *
  * `data-replay` records the last N seconds of the page for a report (see
  * `replay` in config.ts). The recorder is `rrweb-record.mjs`, shipped beside
@@ -20,6 +22,7 @@ import { moduleResolver, type ModuleMap } from "./modules";
 import { installDebugCapture } from "./install";
 import { launch } from "./reporter";
 import { setRecorderLoader } from "./capture/replay";
+import { openSupportChat } from "./ui/chatBubble";
 
 const script = document.currentScript as HTMLScriptElement | null;
 const data = script?.dataset ?? {};
@@ -65,6 +68,12 @@ if (data.host && data.realmKey) {
     module: moduleResolver(parseModules(data.modules)),
     locale: data.locale === "en" ? "en" : "th",
     ...(data.replay !== undefined ? { replay: { seconds: Number(data.replay) || undefined } } : {}),
+    /*
+     * Who is signed in (`identity`): the host's own endpoint answering its user's support token as text — the call's
+     * ring and แชทกับทีม need it. `data-chat`: the bubble, "left" for the bottom left.
+     */
+    ...(data.identityUrl ? { identity: () => fetch(data.identityUrl!, { credentials: "include" }).then((r) => (r.ok ? r.text() : null)).catch(() => null) } : {}),
+    ...(data.chat !== undefined && data.chat !== "false" ? { chat: data.chat === "left" ? { position: "left" as const } : true } : {}),
   });
   /*
    * In <head>, the script runs before there is a <body> — and installing then
@@ -78,3 +87,5 @@ if (data.host && data.realmKey) {
 // The only handle a no-bundler page gets. Call it from a button's onclick —
 // directly, so the click is still the active gesture when screen capture asks.
 (window as unknown as { lwReportProblem: typeof launch }).lwReportProblem = launch;
+// แชทกับทีม's panel, for a page with its own chat button.
+(window as unknown as { lwOpenSupportChat: typeof openSupportChat }).lwOpenSupportChat = openSupportChat;

package/src/index.ts

@@ -73,5 +73,11 @@ export type { Strings as ReporterStrings } from "./ui/strings";
  */
 export { openSupportPortal, supportPortalUrl, NoIdentityError } from "./portal";
 export type { OpenPortalOptions } from "./portal";
+/*
+ * แชทกับทีม (0.19): `chat` in the config mounts the bubble on install; a host with its own button opens and closes
+ * the same panel. The panel is the support host's page, framed — as the tickets are, maintained where they live.
+ */
+export { openSupportChat, closeSupportChat, mountSupportChat, unmountSupportChat, supportFrameUrl, badgeText } from "./ui/chatBubble";
+export type { ChatOptions } from "./config";
 
 export type * from "./types";

package/src/install.ts

@@ -15,6 +15,7 @@ import { showToast } from "./ui/toast";
 import { defineReporterElement, REPORTER_TAG } from "./ui/element";
 import { loadRequestTypes } from "./requests";
 import { startLiveRing } from "./live";
+import { mountSupportChat } from "./ui/chatBubble";
 
 let armed = false;
 
@@ -78,4 +79,14 @@ export function installDebugCapture(options: InstallOptions = {}): void {
    */
   if (idle) idle(() => startLiveRing(), { timeout: 8000 });
   else setTimeout(() => startLiveRing(), 3000);
+
+  /*
+   * แชทกับทีม's bubble (`chat`), once the page has settled — it shows itself only for a signed-in person (the host's
+   * token answers), and the person's socket above tells its badge when the desk writes.
+   */
+  if (getConfig().chat) {
+    if (!getConfig().identity) console.warn("[debug-capture] `chat` needs `identity` — a chat is a signed-in person's; the bubble is not shown");
+    else if (idle) idle(() => mountSupportChat(), { timeout: 4000 });
+    else setTimeout(() => mountSupportChat(), 1500);
+  }
 }

package/src/live.ts

@@ -74,7 +74,20 @@ export function ringsHere(call: Pick<RingingCall, "status" | "side">): boolean {
   return call.status === "ringing" && (call.side === "reporter" || call.side === undefined || call.side === null);
 }
 
-async function hostToken(): Promise<string | null> {
+/*
+ * What else the person's socket says — แชทกับทีม's bubble hears the desk answer here (ui/chatBubble): `chat-changed`,
+ * `ticket-changed`, `chat-seen`. One socket for the ring and the bubble.
+ */
+type LiveFrame = { type?: string; [k: string]: unknown };
+const frameListeners = new Set<(frame: LiveFrame) => void>();
+export function onLiveFrame(fn: (frame: LiveFrame) => void): () => void {
+  frameListeners.add(fn);
+  return () => frameListeners.delete(fn);
+}
+/** Calls ring here — unless the host said `ring: false` (the socket may still be open for the chat's bubble). */
+const ringOn = () => getConfig().ring !== false;
+
+export async function hostToken(): Promise<string | null> {
   const provider = getConfig().identity;
   if (!provider) return null;
   try {
@@ -97,7 +110,8 @@ async function post(path: string, token: string): Promise<Response> {
 export function startLiveRing(): void {
   if (started || typeof window === "undefined" || typeof WebSocket === "undefined") return;
   const config = getConfig();
-  if (!config.identity || config.ring === false) return;
+  // The ring, or แชทกับทีม's bubble — either needs the person's socket.
+  if (!config.identity || (config.ring === false && !config.chat)) return;
   started = true;
   stopped = false;
   warmUp(config.host);
@@ -147,7 +161,7 @@ async function connect(): Promise<void> {
   tokenless = 0;
   let res: Response;
   try {
-    res = await post("ingest/live-ticket", token);
+    res = await post(getConfig().chat ? "ingest/live-ticket?chat=1" : "ingest/live-ticket", token);
   } catch {
     return schedule();
   }
@@ -164,11 +178,12 @@ async function connect(): Promise<void> {
     return schedule();
   }
   // Calls off for this desk: no socket at all.
-  if (!out.calls || !out.ticket) {
+  // Calls off and no chat asked for: no socket at all. Calls off with the chat's bubble: the socket, no ring.
+  if (!out.ticket) {
     stopped = true;
     return;
   }
-  if (out.call) hear(out.call);
+  if (out.calls && out.call && ringOn()) hear(out.call);
   const ws = new WebSocket(liveSocketUrl(getConfig().host, out.ticket));
   socket = ws;
   ws.onopen = () => {
@@ -183,7 +198,13 @@ async function connect(): Promise<void> {
   ws.onmessage = (e) => {
     try {
       const frame = JSON.parse(String(e.data)) as { type?: string; call?: RingingCall | string; op?: unknown };
-      if (frame.type === "call-state" && frame.call && typeof frame.call === "object") hear(frame.call);
+      if (frame.type === "chat-changed" || frame.type === "ticket-changed" || frame.type === "chat-seen") {
+        for (const fn of frameListeners) fn(frame as LiveFrame);
+        return;
+      }
+      if (frame.type === "call-state" && frame.call && typeof frame.call === "object") {
+        if (ringOn()) hear(frame.call);
+      }
       // The team's marks on this page, shared from the portal's call (§21) — read again, never drawn as received.
       else if (frame.type === "call-ink" && typeof frame.call === "string") {
         const op = readInkOp(frame.op);

package/src/server.ts

@@ -34,11 +34,15 @@ export interface SupportProfileFact {
   value: string;
 }
 
-/** Whoever the host has authenticated. Email is the account key. */
+/**
+ * Whoever the host has authenticated. Email is the account key — or, for someone the host knows but holds no email
+ * for (a CIB officer with none in the ERP, 2026-10-27: every report they ever sent landed anonymous, nobody could call
+ * them back), the host's own id alone.
+ */
 export interface SupportUser {
-  /** The host's own id for this person, recorded so a changed email still matches. */
+  /** The host's own id for this person, recorded so a changed email still matches — the key when there is no email. */
   id?: string | null;
-  email: string;
+  email?: string | null;
   name?: string | null;
   /** What the host knows about their work — most important first. Optional; bounded on the way in. */
   profile?: SupportProfileFact[] | null;
@@ -95,8 +99,9 @@ export function createSupportToken(options: {
   user: SupportUser;
   ttlSeconds?: number;
 }): { token: string; expiresIn: number } {
-  const email = options.user.email?.trim().toLowerCase();
-  if (!email || !email.includes("@")) throw new Error("createSupportToken: a real email is required");
+  const email = options.user.email?.trim().toLowerCase() || null;
+  const id = options.user.id?.trim() || null;
+  if (email ? !email.includes("@") : !id) throw new Error("createSupportToken: a real email, or the host's own id for this person, is required");
   if (!options.secret || options.secret.length < 16) {
     throw new Error("createSupportToken: the realm's reporter secret is missing or too short");
   }
@@ -105,9 +110,10 @@ export function createSupportToken(options: {
   const expiresIn = Math.min(Math.max(Math.floor(options.ttlSeconds ?? DEFAULT_TTL_SECONDS), 30), 12 * 60 * 60);
   const body = `${b64({ alg: "HS256", typ: "JWT" })}.${b64({
     // The host's own id when it has one, so the same person is recognised even
-    // if their email later changes. The email stands in when it does not.
-    sub: options.user.id?.trim() || email,
-    email,
+    // if their email later changes. The email stands in when it does not; with
+    // no email the id is the whole of who they are, and the claim is left out.
+    sub: id ?? email,
+    ...(email ? { email } : {}),
     name: options.user.name?.trim() || null,
     // Only when there is one: an older support desk ignores the claim, a newer one records it.
     ...(cleanProfile(options.user.profile) ? { profile: cleanProfile(options.user.profile) } : {}),
@@ -184,7 +190,8 @@ export function supportTokenHandler(options: {
     }
 
     const user = await options.user();
-    if (!user?.email) return json({ error: "Unauthorized" }, 401);
+    // Nobody — or somebody the host cannot name by an email or an id of its own.
+    if (!user?.email?.trim() && !user?.id?.trim()) return json({ error: "Unauthorized" }, 401);
 
     try {
       const { token, expiresIn } = createSupportToken({ secret, user, ttlSeconds: options.ttlSeconds });

package/src/submit.ts

@@ -182,6 +182,8 @@ export async function submitBundle(title: string, bundle: DebugBundle): Promise<
       ...(replay ? { replay } : {}),
     },
     attachments,
+    // From แชทกับทีม's panel: linked to the person's chat with the desk (a known person only — the desk checks).
+    ...(trimmed.reason.fromChat ? { fromChat: true } : {}),
   };
 
   // The widget ingest mounts at the ROOT of the support app, beside the

package/src/types.ts

@@ -88,6 +88,8 @@ export interface DebugReason {
   type: DebugReasonType;
   message?: string;
   stack?: string;
+  /** Opened from แชทกับทีม's panel (แจ้งปัญหาพร้อมภาพหน้าจอ): the report is linked to the person's chat. */
+  fromChat?: boolean;
 }
 
 /** A failed data-layer query the host chose to report (react-query, Apollo, …). */

package/src/ui/callFrame.ts

@@ -357,5 +357,5 @@ function place(): void {
   if (placed && !narrow) {
     const p = clampTo(placed, box, viewOf());
     Object.assign(s, { left: `${p.x}px`, top: `${p.y}px`, right: "", bottom: "" });
-  } else Object.assign(s, { left: narrow ? `${MARGIN / 2}px` : "", top: "", right: narrow ? "" : `${MARGIN / 2}px`, bottom: `${MARGIN / 2}px` });
+  } else Object.assign(s, { left: narrow ? `${MARGIN / 2}px` : "", top: "", right: narrow ? "" : `${MARGIN / 2}px`, bottom: `calc(${MARGIN / 2}px + var(--lw-chat-lift, 0px))` });
 }

package/src/ui/chatBubble.ts

@@ -0,0 +1,247 @@
+/**
+ * แชทกับทีม — the chat bubble (the support desk's docs/SUPPORT-CHAT-PLAN.md phase 4). `chat` in the config puts a round
+ * button at the bottom right of the host app; pressed, a panel above it: the support host's own page
+ * (`/embed/support`), framed — the person's chat with the desk and their เรื่อง, each thread in the panel. One chat,
+ * one thread, one editor for the bubble and the portal alike: nothing of it is drawn here but the button and the box.
+ *
+ *   the badge   what still waits for the person — the desk's lines in the chat and their เรื่อง's replies — read with
+ *               the host's token before the panel was ever opened (/ingest/support-unread), again when the person's
+ *               socket says the desk wrote (live.ts `onLiveFrame`), and from the panel itself while it is open
+ *   sign-in     the panel asks (`hello`); the host's token goes to it by postMessage, to the support host's origin only
+ *   แจ้งปัญหา…  in the panel: the panel folds and this library's report opens — its screen, its page — linked to the chat
+ *   the corner  the call's card and frame sit above the bubble (`--lw-chat-lift`)
+ *
+ * Shown only for a signed-in person (`identity` answers a token): a chat is someone's, and is read back.
+ */
+import { chatPlace, getConfig } from "../config";
+import { hostToken, onLiveFrame } from "../live";
+import { launch } from "../reporter";
+import { strings } from "./strings";
+
+const HOST_TAG = "lw-support-chat";
+const FRAME = "lw-support-frame";
+const HOST = "lw-support-host";
+const SIZE = 56;
+const GAP = 12;
+
+const ICON = `<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`;
+
+const CSS = `
+:host { all: initial; }
+.bubble {
+  position: fixed; z-index: 2147483000; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%;
+  display: grid; place-items: center; border: 0; cursor: pointer; padding: 0;
+  background: #00468f; color: #fff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
+  transition: transform 150ms ease, background 150ms ease;
+  font-family: "Inter Variable", "Noto Sans Thai Variable", "IBM Plex Sans Thai", -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
+}
+.bubble:hover { background: #003a78; transform: translateY(-1px); }
+.bubble:focus-visible { outline: 3px solid rgba(0, 70, 143, 0.35); outline-offset: 3px; }
+.badge {
+  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
+  border-radius: 10px; background: #dc2626; color: #fff; font: 700 11px/20px "Inter Variable", -apple-system, sans-serif;
+  text-align: center; box-shadow: 0 0 0 2px #fff;
+}
+.badge[hidden] { display: none; }
+.panel {
+  position: fixed; z-index: 2147483001; width: min(380px, calc(100vw - 32px)); height: min(640px, calc(100vh - ${SIZE + GAP + 32}px));
+  border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e8e8ec;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); animation: in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.panel[hidden] { display: none; }
+.panel iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
+@keyframes in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+@media (max-width: 639px) {
+  .panel { inset: 0 !important; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
+  .open .bubble { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { .panel { animation: none; } .bubble { transition: none; } }
+`;
+
+let root: HTMLElement | null = null;
+let shadow: ShadowRoot | null = null;
+let panel: HTMLDivElement | null = null;
+let frame: HTMLIFrameElement | null = null;
+let bubble: HTMLButtonElement | null = null;
+let badge: HTMLSpanElement | null = null;
+let isOpen = false;
+let unread = 0;
+
+const base = (host: string) => (host.endsWith("/") ? host : `${host}/`);
+const hostOrigin = () => {
+  try {
+    return new URL(getConfig().host).origin;
+  } catch {
+    return "*";
+  }
+};
+
+/** The panel's address: the support host's page, told the realm, signing in by hand-off (no token in the address). */
+export function supportFrameUrl(host: string, realmKey: string): string {
+  const url = new URL("embed/support", base(host));
+  url.searchParams.set("realm", realmKey);
+  url.searchParams.set("hand", "1");
+  return url.toString();
+}
+
+/** The badge's number: `99+` past 99; nothing at 0. Pure, for the tests. */
+export function badgeText(n: number): string {
+  return n <= 0 ? "" : n > 99 ? "99+" : String(n);
+}
+
+function setBadge(n: number): void {
+  unread = Math.max(0, Math.floor(n) || 0);
+  if (!badge || !bubble) return;
+  const t = strings(getConfig().locale);
+  badge.textContent = badgeText(unread);
+  badge.hidden = unread === 0;
+  bubble.setAttribute("aria-label", unread ? `${t.chatOpen} · ${t.chatUnread.replace("{n}", String(unread))}` : t.chatOpen);
+}
+
+let asking: Promise<void> | null = null;
+/** What waits for the person, read with the host's token — no token: nobody is signed in, and there is no bubble. */
+async function refreshUnread(): Promise<void> {
+  asking ??= (async () => {
+    try {
+      const token = await hostToken();
+      if (!token) return void show(false);
+      const config = getConfig();
+      const res = await fetch(new URL("ingest/support-unread", base(config.host)).toString(), { headers: { "x-realm-key": config.realmKey, authorization: `Bearer ${token}` } });
+      // A support host from before the chat, or a token it does not accept: no bubble rather than one that cannot open.
+      if (res.status === 404 || res.status === 401 || res.status === 403) return void show(false);
+      if (!res.ok) return;
+      show(true);
+      const out = (await res.json()) as { total?: number };
+      if (!isOpen) setBadge(typeof out.total === "number" ? out.total : 0);
+    } catch {
+      /* the next nudge asks again */
+    } finally {
+      asking = null;
+    }
+  })();
+  return asking;
+}
+
+function show(on: boolean): void {
+  if (!root) return;
+  root.style.display = on ? "" : "none";
+  // The call's card and frame sit above the bubble while it is there (ring.ts, callFrame.ts).
+  const place = chatPlace(getConfig().chat);
+  if (on && place?.side === "right") document.documentElement.style.setProperty("--lw-chat-lift", `${SIZE + GAP}px`);
+  else document.documentElement.style.removeProperty("--lw-chat-lift");
+}
+
+function post(message: Record<string, unknown>): void {
+  frame?.contentWindow?.postMessage({ source: HOST, ...message }, hostOrigin());
+}
+
+async function onFrame(e: MessageEvent): Promise<void> {
+  if (!frame || e.source !== frame.contentWindow) return;
+  const d = e.data as { source?: unknown; type?: unknown; total?: unknown } | null;
+  if (!d || d.source !== FRAME) return;
+  if (d.type === "hello") {
+    const token = await hostToken();
+    if (token) post({ type: "token", token });
+    return;
+  }
+  if (d.type === "ready") return post({ type: isOpen ? "shown" : "hidden" });
+  if (d.type === "close") return closeSupportChat();
+  if (d.type === "unread" && typeof d.total === "number") return setBadge(d.total);
+  if (d.type === "report") {
+    // The panel folds, and the report opens over the page it is about — linked to the chat (ingest `fromChat`).
+    closeSupportChat(false);
+    launch({ type: "manual", fromChat: true });
+  }
+}
+
+const onMessage = (e: MessageEvent) => void onFrame(e);
+
+function onKey(e: KeyboardEvent): void {
+  if (isOpen && e.key === "Escape") closeSupportChat();
+}
+
+/** Open the panel — from the bubble, or from the host app's own button (`openSupportChat`). */
+export function openSupportChat(): void {
+  if (!root || !panel || !shadow) mountSupportChat();
+  if (!panel) return;
+  const config = getConfig();
+  if (!frame) {
+    frame = document.createElement("iframe");
+    frame.src = supportFrameUrl(config.host, config.realmKey);
+    frame.title = strings(config.locale).chatTitle;
+    frame.setAttribute("allow", "clipboard-write");
+    panel.append(frame);
+  }
+  isOpen = true;
+  panel.hidden = false;
+  shadow?.querySelector(".wrap")?.classList.add("open");
+  bubble?.setAttribute("aria-expanded", "true");
+  post({ type: "shown" });
+  frame.focus();
+}
+
+/** Fold the panel — it stays loaded, so the chat is there as it was the next time. */
+export function closeSupportChat(refocus = true): void {
+  if (!panel) return;
+  isOpen = false;
+  panel.hidden = true;
+  shadow?.querySelector(".wrap")?.classList.remove("open");
+  bubble?.setAttribute("aria-expanded", "false");
+  post({ type: "hidden" });
+  if (refocus) bubble?.focus();
+  void refreshUnread();
+}
+
+let stopFrames: (() => void) | null = null;
+let lastFocusAsk = 0;
+function onFocus(): void {
+  // A person coming back to the tab: what came while they were away — at most twice a minute.
+  if (Date.now() - lastFocusAsk < 30_000) return;
+  lastFocusAsk = Date.now();
+  void refreshUnread();
+}
+
+/** The bubble, once — hidden until the host's token says somebody is signed in. */
+export function mountSupportChat(): void {
+  if (root || typeof document === "undefined") return;
+  const config = getConfig();
+  const place = chatPlace(config.chat);
+  if (!place || !config.identity) return;
+  const t = strings(config.locale);
+  root = document.createElement(HOST_TAG);
+  root.style.display = "none";
+  shadow = root.attachShadow({ mode: "open" });
+  const side = place.side;
+  shadow.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="panel" role="dialog" aria-label="${t.chatTitle}" hidden></div><button type="button" class="bubble" aria-expanded="false" aria-haspopup="dialog" aria-label="${t.chatOpen}" title="${t.chatOpen}">${ICON}<span class="badge" hidden></span></button></div>`;
+  panel = shadow.querySelector(".panel");
+  bubble = shadow.querySelector(".bubble");
+  badge = shadow.querySelector(".badge");
+  Object.assign(bubble!.style, { [side]: `${place.x}px`, bottom: `${place.y}px` });
+  Object.assign(panel!.style, { [side]: `${place.x}px`, bottom: `${place.y + SIZE + GAP}px` });
+  bubble!.addEventListener("click", () => (isOpen ? closeSupportChat() : openSupportChat()));
+  document.body.append(root);
+  window.addEventListener("message", onMessage);
+  document.addEventListener("keydown", onKey);
+  window.addEventListener("focus", onFocus);
+  // The desk wrote, or opened a เรื่อง, or read: the badge asks again — while the panel is open, the panel tells it.
+  let settle: ReturnType<typeof setTimeout> | undefined;
+  stopFrames = onLiveFrame(() => {
+    if (isOpen) return;
+    clearTimeout(settle);
+    settle = setTimeout(() => void refreshUnread(), 500);
+  });
+  void refreshUnread();
+}
+
+/** Take it away — for a host that unmounts, and for the tests. */
+export function unmountSupportChat(): void {
+  stopFrames?.();
+  stopFrames = null;
+  window.removeEventListener("message", onMessage);
+  document.removeEventListener("keydown", onKey);
+  window.removeEventListener("focus", onFocus);
+  root?.remove();
+  root = shadow = panel = frame = bubble = badge = null;
+  isOpen = false;
+  document.documentElement.style.removeProperty("--lw-chat-lift");
+}

package/src/ui/ring.ts

@@ -26,14 +26,14 @@ const HOST_TAG = "lw-call-ring";
 const CSS = `
 :host { all: initial; }
 .card {
-  position: fixed; right: 16px; bottom: 16px; z-index: 2147483002;
+  position: fixed; right: 16px; bottom: calc(16px + var(--lw-chat-lift, 0px)); z-index: 2147483002;
   width: min(352px, calc(100vw - 32px)); box-sizing: border-box;
   padding: 16px; border-radius: 16px; background: #fff; color: #1a1a1e;
   border: 1px solid #e8e8ec; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   font-family: "Inter Variable", "Noto Sans Thai Variable", "IBM Plex Sans Thai", -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
   animation: in 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-@media (max-width: 639px) { .card { right: 8px; left: 8px; bottom: 8px; width: auto; } }
+@media (max-width: 639px) { .card { right: 8px; left: 8px; bottom: calc(8px + var(--lw-chat-lift, 0px)); width: auto; } }
 .head { display: flex; align-items: center; gap: 12px; }
 .icon {
   position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;