@lightworkai.official/debug-capture 0.17.2 → 0.17.3

package/dist/ui/callFrame.d.ts

@@ -55,3 +55,4 @@ export declare function callFrameFor(): string | null;
 /** Open the call's frame — once per call; the same call again changes nothing. Shown when it says it is ready. */
 export declare function openCallFrame(src: string, id: string, h: FrameHandlers, readyWithinMs?: number, token?: Promise<string | null> | null): void;
 export declare function closeCallFrame(): void;
+export declare function nameTabAtRest(handle: string, readableBy: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "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/live.ts

@@ -25,7 +25,9 @@
 import { getConfig } from "./config";
 import { preparePortalUrl } from "./portal";
 import { hideRing, quietRing, ringAnswering, ringFallback, ringOpened, ringShownFor, showRing, type RingHandlers } from "./ui/ring";
-import { answerInFrame, callFrameFor, closeCallFrame, frameUrl, openCallFrame, voiceInFrame } from "./ui/callFrame";
+import { answerInFrame, callFrameFor, closeCallFrame, frameUrl, nameTabAtRest, openCallFrame, voiceInFrame } from "./ui/callFrame";
+import { readInkOp } from "./ink";
+import { inkOnPage, removeInkLayer } from "./ui/inkOverlay";
 
 export interface RingingCall {
   id: string;
@@ -99,6 +101,11 @@ export function startLiveRing(): void {
   started = true;
   stopped = false;
   warmUp(config.host);
+  try {
+    nameTabAtRest(`lw-tab:${tabId()}`, new URL(config.host).origin);
+  } catch {
+    /* not a host we can name */
+  }
   void connect();
 }
 
@@ -166,6 +173,8 @@ async function connect(): Promise<void> {
   socket = ws;
   ws.onopen = () => {
     retry = 0;
+    // Which tab this is (§21): the call's marks for a screen shared from here reach it on this socket.
+    ws.send(JSON.stringify({ type: "tab", id: tabId() }));
     clearInterval(pinger);
     pinger = setInterval(() => {
       if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "ping" }));
@@ -173,8 +182,16 @@ async function connect(): Promise<void> {
   };
   ws.onmessage = (e) => {
     try {
-      const frame = JSON.parse(String(e.data)) as { type?: string; call?: RingingCall };
-      if (frame.type === "call-state" && frame.call) hear(frame.call);
+      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);
+      // 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);
+        if (op) {
+          inkCall = frame.call;
+          inkOnPage(op);
+        }
+      }
     } catch {
       /* not ours to read */
     }
@@ -254,8 +271,37 @@ function frameFor(call: RingingCall): void {
 }
 const portalWay = (call: RingingCall): RingHandlers => ({ open: () => answer(call), decline: () => void decline(call) });
 
+/** This tab's own id (§21), kept across its reloads — what its name says, and what its socket says. */
+let ownTabId: string | null = null;
+function tabId(): string {
+  if (ownTabId) return ownTabId;
+  try {
+    ownTabId = sessionStorage.getItem(TAB_KEY);
+  } catch {
+    /* no storage: a new id each load */
+  }
+  if (!ownTabId || !/^[A-Za-z0-9_-]{8,40}$/.test(ownTabId)) {
+    const bytes = new Uint8Array(12);
+    crypto.getRandomValues(bytes);
+    ownTabId = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+    try {
+      sessionStorage.setItem(TAB_KEY, ownTabId);
+    } catch {
+      /* this load only */
+    }
+  }
+  return ownTabId;
+}
+const TAB_KEY = "lw-tab-id";
+/** The call whose marks are on this page (§21): they go with it. */
+let inkCall: string | null = null;
+
 /** The support host's word on a call: ringing here shows the card (and its frame); anything else takes the card away — the frame stays, it IS the call. */
 function hear(call: RingingCall): void {
+  if (!LIVE_STATES.has(call.status) && inkCall === call.id && callFrameFor() !== call.id) {
+    inkCall = null;
+    removeInkLayer();
+  }
   if (!ringsHere(call)) {
     hideRing(call.id);
     // Answered in this tab's frame, then the page reloaded: the frame comes back and takes the call back.

package/src/ui/callFrame.ts

@@ -169,7 +169,7 @@ iframe.on { visibility: visible; }`;
 }
 
 export function closeCallFrame(): void {
-  if (host) nameTab(null);
+  if (host) nameTab(resting?.handle ?? null, resting?.readableBy);
   removeInkLayer();
   clearTimeout(readyTimer);
   window.removeEventListener("message", onMessage);
@@ -250,15 +250,26 @@ function onMessage(e: MessageEvent): void {
  * browser without Capture Handle simply has no name to give, and the call says it cannot tell.
  */
 type CaptureHandleConfig = { handle?: string; exposeOrigin?: boolean; permittedOrigins?: string[] };
-function nameTab(handle: string | null): void {
+function nameTab(handle: string | null, readableBy = origin): void {
   const md = (typeof navigator === "undefined" ? undefined : navigator.mediaDevices) as (MediaDevices & { setCaptureHandleConfig?: (c: CaptureHandleConfig) => void }) | undefined;
   try {
-    md?.setCaptureHandleConfig?.(handle ? { handle, exposeOrigin: false, permittedOrigins: [origin] } : {});
+    md?.setCaptureHandleConfig?.(handle && readableBy ? { handle, exposeOrigin: false, permittedOrigins: [readableBy] } : {});
   } catch {
     /* not a top-level page, or not this browser */
   }
 }
 
+/**
+ * The tab's name between calls (0.17.3, the support host's §21): `lw-tab:<id>` — so a call answered on the support
+ * host's portal, with THIS tab shared, can tell it is a tab of ours and have the team's marks drawn here (through the
+ * live socket). A call's frame names the tab for its call while it lasts, and gives this name back when it goes.
+ */
+let resting: { handle: string; readableBy: string } | null = null;
+export function nameTabAtRest(handle: string, readableBy: string): void {
+  resting = { handle, readableBy };
+  if (!host?.isConnected) nameTab(handle, readableBy);
+}
+
 /** The corner moved by its top line: from where the press began, by how far the pointer went on the screen. */
 function onDrag(m: FrameMessage): void {
   if (!frame || layout !== "card" || typeof m.x !== "number" || typeof m.y !== "number") return;