@lightworkai.official/debug-capture 0.19.7 → 0.19.9

package/src/submit.ts

@@ -110,7 +110,7 @@ export async function submitBundle(title: string, bundle: DebugBundle): Promise<
   let replay: ReplaySummary | undefined;
   const recording = replayOptions();
   if (recording) {
-    const packed = await packReplay(trimmed.replay, recording.maxBytes);
+    const packed = await packReplay(trimmed.replay, recording.maxBytes, { quality: recording.canvas?.quality });
     replay = packed.summary;
     if ("dataUri" in packed) attachments.push({ dataUri: packed.dataUri, filename: packed.filename });
   }

package/src/types.ts

@@ -188,7 +188,7 @@ export interface ReplayCapture {
  * attachment loads — or say why there is none.
  */
 export interface ReplaySummary {
-  /** Whole seconds covered, when one was attached. */
+  /** Whole seconds covered by what was attached (or, with `omitted`, by what was recorded). */
   seconds?: number;
   events?: number;
   startedAt?: string;
@@ -196,8 +196,20 @@ export interface ReplaySummary {
   /** Size of the attachment as sent, and whether it is gzip. */
   bytes?: number;
   compressed?: boolean;
-  /** The canvas frames were left out to fit under the size cap. */
+  /*
+   * What was given up to fit under the size cap (replayPack), each present
+   * only when it happened.
+   */
+  /** Canvas pictures left out: the canvases play blank. */
   canvasDropped?: boolean;
+  /** Large pictures embedded in the page (a `data:` image, an inlined font) left out. */
+  picturesDropped?: boolean;
+  /** Long text and styles shortened — only when not even one picture of the page fitted otherwise. */
+  simplified?: boolean;
+  /** Only part of the recording went: how long the whole was. `seconds` is what was sent. */
+  recordedSeconds?: number;
+  /** The part sent stops this many seconds before the report was made. */
+  endsEarlySeconds?: number;
   /** Present when the host records but this report carries no replay. */
   omitted?: "too-large" | "empty";
 }

package/src/ui/bubblePlace.ts

@@ -14,13 +14,14 @@
  *   Content that scrolls under is not: a floating button over content is what a floating button is. A host may name
  *   more (`chat.avoid: "<selector>"`) or turn it off (`false`).
  *
- *   THE NEAREST FREE PLACE. Up or down its own side first; the other side when that is nearer than a long climb
- *   (`SWITCH_COST`) — a column the height of the window sends it to the other corner, a FAB lifts it above. When a
- *   nearer place frees up it goes back (`settleSpot`): the tray shut, it is above the toggle again. 0.19.6 stayed
- *   where it had stepped to for the rest of the page, which on the real เอกสาร page left it high on the right over
- *   the viewer's ยังไม่มีการวางตรา once the tray was shut. A shift of less than STAY_MARGIN does not move it — no
- *   jitter as the page settles.
- *
+ *   THE NEAREST FREE PLACE (`placeSpot`). What a place costs is the climb plus the move in from its edge, and
+ *   SWITCH_COST more on the other side. Up or down its own column; or a column further in, just past what stands in
+ *   the way; or the other corner. A FAB lifts it above. A toolbar column as tall as the window puts it just inside the
+ *   toolbar, at the same height. 0.19.7 only knew the two corner columns, so on a short window, with the ERP's tray
+ *   filling the right edge and its sidebar the left, it found no free place and stayed on the tray (the owner's
+ *   screenshot, 11-02). When a nearer place frees up it goes back: the tray shut, it is home again. A shift of less than
+ *   STAY_MARGIN does not move it, so it does not jitter as the page settles.
+
  *   A PAGE'S OWN PLACE. The desk's rules (ปุ่มแชท › ตำแหน่งปุ่ม): pages whose path starts so — hidden there, or
  *   started in a corner at a height. The most specific rule wins; a person who moved it keeps their place.
  *
@@ -76,37 +77,58 @@ export function nearestFreeY(want: number, ranges: readonly [number, number][],
   });
 }
 
-/**
- * Where the bubble stands: `want` on its side when free, else the nearest free height there — or the other side's when
- * that is cheaper (SWITCH_COST plus its own move). Nothing free anywhere: `want`, as it was. Pure.
- */
-export function chooseSpot(want: { side: Side; y: number }, free: Record<Side, readonly [number, number][]>, min: number, max: number): { side: Side; y: number } {
-  const other: Side = want.side === "right" ? "left" : "right";
-  const here = nearestFreeY(want.y, free[want.side], min, max);
-  const there = nearestFreeY(want.y, free[other], min, max);
-  if (here === null && there === null) return want;
-  const costHere = here === null ? Infinity : Math.abs(here - want.y);
-  const costThere = there === null ? Infinity : SWITCH_COST + Math.abs(there - want.y);
-  return costHere <= costThere ? { side: want.side, y: here! } : { side: other, y: there! };
+export interface Spot {
+  side: Side;
+  /** From its side's edge, px. */
+  x: number;
+  /** Up from the bottom, px. */
+  y: number;
 }
-
-/** What a place costs against the wish: the climb, and SWITCH_COST more on the other side. */
-const costOf = (spot: { side: Side; y: number }, want: { side: Side; y: number }) => Math.abs(spot.y - want.y) + (spot.side === want.side ? 0 : SWITCH_COST);
+/** The page's boxes across the bubble's column at `x` from `side`'s edge — read off the page, or given in the tests. */
+export type ReadColumn = (side: Side, x: number) => readonly Rect[];
+/** How many columns further in it looks on a side, past what stands in the way. */
+export const MAX_SHIFTS = 3;
 
 /**
- * Where it stands now, given where it stood: the best place (`chooseSpot`), unless where it stands is still free and
- * within STAY_MARGIN of it (`prev` is null when the wish, the page or the person's own place changed). Pure.
+ * Where the bubble stands: `want` when it is free there; else the cheapest free place — up or down its column, a column
+ * further in just past what stands in the way (a toolbar column as tall as the window: just left of it, at the same
+ * height), or the other side's (SWITCH_COST more). What a place costs is the climb plus the move in. A place it already
+ * stands in (`prev`), still free and within STAY_MARGIN of the best, is kept — no jitter as the page settles. Columns
+ * are read only as needed (`read`), and never past the middle of the window. Nothing free anywhere: `want`. Pure.
  */
-export function settleSpot(
-  prev: { side: Side; y: number } | null,
-  want: { side: Side; y: number },
-  free: Record<Side, readonly [number, number][]>,
-  min: number,
-  max: number,
-): { side: Side; y: number } {
-  const best = chooseSpot(want, free, min, max);
-  if (prev && nearestFreeY(prev.y, free[prev.side], min, max) === prev.y && costOf(prev, want) <= costOf(best, want) + STAY_MARGIN) return prev;
-  return best;
+export function placeSpot(want: Spot, read: ReadColumn, view: { w: number; h: number }, size: number, min: number, max: number, prev: Spot | null = null): Spot {
+  const boxes = new Map<string, readonly Rect[]>();
+  const at = (side: Side, x: number) => {
+    const k = `${side}:${x}`;
+    if (!boxes.has(k)) boxes.set(k, read(side, x));
+    return boxes.get(k)!;
+  };
+  const col = (side: Side, x: number) => (side === "right" ? { left: view.w - x - size, right: view.w - x } : { left: x, right: x + size });
+  const ranges = (side: Side, x: number) => blockedRanges(at(side, x), col(side, x), view.h, size);
+  const cost = (s: Spot) => Math.abs(s.y - want.y) + Math.abs(s.x - want.x) + (s.side === want.side ? 0 : SWITCH_COST);
+  const freeAt = (s: Spot) => nearestFreeY(s.y, ranges(s.side, s.x), min, max) === s.y;
+  const keep = (best: Spot) => (prev && (prev.side !== best.side || prev.x !== best.x || prev.y !== best.y) && cost(prev) <= cost(best) + STAY_MARGIN && freeAt(prev) ? prev : best);
+  if (freeAt(want)) return keep(want);
+  let best: Spot | null = null;
+  const other: Side = want.side === "right" ? "left" : "right";
+  for (const side of [want.side, other]) {
+    const away = side === want.side ? 0 : SWITCH_COST;
+    if (best && away >= cost(best)) break;
+    let x = want.x;
+    for (let i = 0; i <= MAX_SHIFTS; i++) {
+      const y = nearestFreeY(want.y, ranges(side, x), min, max);
+      if (y !== null && (!best || cost({ side, x, y }) < cost(best))) best = { side, x, y };
+      // What stands where it wants to be, at this column: the next column in is just past it.
+      const c = col(side, x);
+      const band = { top: view.h - want.y - size - CLEAR, bottom: view.h - want.y + CLEAR };
+      const inWay = at(side, x).filter((r) => r.top < band.bottom && r.bottom > band.top && r.left < c.right && r.right > c.left);
+      if (!inWay.length) break;
+      const next = Math.round(side === "right" ? Math.max(...inWay.map((r) => view.w - r.left + CLEAR)) : Math.max(...inWay.map((r) => r.right + CLEAR)));
+      if (next <= x || next + size > view.w / 2 || (best && away + next - want.x >= cost(best))) break;
+      x = next;
+    }
+  }
+  return best ? keep(best) : want;
 }
 
 /* ── A page's own place: the desk's rules ───────────────────────────────── */
@@ -153,6 +175,8 @@ const OURS = /^LW-/;
 const CONTROL =
   'a[href],button,input,select,textarea,summary,label,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[role="checkbox"],[role="switch"],[role="radio"],[role="option"],[role="slider"],[role="combobox"],[role="textbox"],[contenteditable=""],[contenteditable="true"],[tabindex]:not([tabindex="-1"])';
 const SCROLLS = /(auto|scroll|overlay)/;
+/** A control that takes no press now — no hit test finds it (`disabled:pointer-events-none`), yet it shows, and takes one soon. */
+const DISABLED = 'button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]';
 
 /**
  * The page's pieces the bubble must not cover, for each column — sampled every `step` px down it at three points
@@ -160,7 +184,9 @@ const SCROLLS = /(auto|scroll|overlay)/;
  * - a host's selector (`extra`): what it names, whole, wherever it is;
  * - in a small floating box (its nearest `fixed`, or `sticky` stuck at its edge): what shows there, by its own box —
  *   the control it is part of, else itself;
- * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller;
+ * - in a box as big as the window, or on a page that does not scroll: a control not inside a scroller — a disabled one
+ *   too, found by its own selector, as no hit test reaches it (the ERP's ผลการจำแนก panel on a phone, 11-02: its
+ *   greyed มอบหมายผู้ดำเนินการ was under the bubble);
  * - anything else scrolls with the page, and is not.
  */
 export function scanColumns(cols: readonly { left: number; right: number }[], view: { w: number; h: number }, opts: { step?: number; extra?: string | null } = {}): Rect[][] {
@@ -240,6 +266,8 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
           right: r.right,
         });
     };
+    /** The frames as big as the window met down this column (null: a page that does not scroll) — their disabled controls are looked for below. */
+    const frames = new Set<Element | null>();
     const xs = [col.left + 6, (col.left + col.right) / 2, col.right - 6];
     for (let y = step / 2; y < view.h; y += step) {
       for (const x of xs) {
@@ -268,10 +296,23 @@ export function scanColumns(cols: readonly { left: number; right: number }[], vi
           continue;
         }
         // The page itself — a scrolling page, or what is in a frame as big as the window: only a control that stays put.
+        if (!scrolled && (float || !pageScrolls)) frames.add(float);
         if (scrolled || !own || big(own.getBoundingClientRect())) continue;
         keep(own);
       }
     }
+    for (const frame of frames) {
+      for (const el of (frame ?? body)?.querySelectorAll(DISABLED) ?? []) {
+        const r = el.getBoundingClientRect();
+        if (!r.width || !r.height || r.right <= col.left || r.left >= col.right || big(r) || style(el).visibility === "hidden") continue;
+        const pin = pins.get(el) ?? (pins.set(el, pinOf(el)), pins.get(el)!);
+        if (pin.float !== frame || pin.scrolled || pin.opacity < 0.05) continue;
+        // Not under another layer: what is on top at its middle (in this column) is it, or the frame's piece around it.
+        const on = topAt(Math.min(Math.max((r.left + r.right) / 2, col.left + 6), col.right - 6), (r.top + r.bottom) / 2);
+        if (on && on !== el && !el.contains(on) && !on.contains(el)) continue;
+        keep(el);
+      }
+    }
     return out;
   });
 }

package/src/ui/chatBubble.ts

@@ -18,7 +18,7 @@ import { chatPlace, getConfig } from "../config";
 import { hostToken, onLiveFrame } from "../live";
 import { openSupportPortal } from "../portal";
 import { launch } from "../reporter";
-import { blockedRanges, nearestFreeY, placeFor, scanColumns, settleSpot, type PlaceRule, type Side } from "./bubblePlace";
+import { blockedRanges, placeFor, placeSpot, scanColumns, type PlaceRule, type Rect, type Side } from "./bubblePlace";
 import { followHostFont, OWN_FONTS } from "./hostFont";
 import { strings } from "./strings";
 
@@ -354,13 +354,27 @@ function savePlace(): void {
 const pagePath = () => window.location?.pathname ?? "/";
 /** Where it stands now — `spot` (or the page's rule), moved clear of the page's floating controls. */
 let shown: BubbleSpot | null = null;
-/** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (settleSpot). */
+/** What `shown` was chosen for — the page and the wish; while they hold, a free `shown` is kept (placeSpot's prev). */
 let shownFor = "";
 /**
- * The heights each side's column rules out, as last read off the page — null: not read yet, or not stepping aside. A
- * side is null when it was not read: its own place was free, so the other corner could not be better.
+ * The page's boxes across each column read since the last look, for the window size they were read at — null: not
+ * looked at yet, or not stepping aside. `placeSpot` asks for columns as it needs them; one not read is read then.
  */
-let blocked: Record<Side, [number, number][] | null> | null = null;
+let columns: { w: number; h: number; boxes: Map<string, Rect[]> } | null = null;
+/** What the last placing saw at home and chose — a look that changes neither is "nothing new" (queueRescan). */
+let placedSig = "";
+function readColumn(side: Side, x: number): Rect[] {
+  const v = view();
+  if (!columns || columns.w !== v.w || columns.h !== v.h) columns = { w: v.w, h: v.h, boxes: new Map() };
+  const k = `${side}:${x}`;
+  let boxes = columns.boxes.get(k);
+  if (!boxes) {
+    const col = side === "right" ? { left: v.w - x - SIZE, right: v.w - x } : { left: x, right: x + SIZE };
+    boxes = scanColumns([col], v, { extra: avoidSetting().extra })[0] ?? [];
+    columns.boxes.set(k, boxes);
+  }
+  return boxes;
+}
 /** Hidden on this page by the desk's rule (ซ่อนปุ่มแชทในหน้านี้). */
 let ruleHidden = false;
 
@@ -377,29 +391,19 @@ function wanted(): BubbleSpot {
   if (movedByHand || !rule || rule.show === "hide") return spot;
   return { side: rule.show, x: spot.x, y: rule.y };
 }
-/** Read the page's floating controls across both corners' columns — then place again. */
+/** Look at the page afresh — its columns read again as placing asks for them — and place again. */
 function rescan(): void {
   if (!bubble) return;
-  const { on, extra } = avoidSetting();
-  if (!on) {
-    blocked = null;
+  if (!avoidSetting().on) {
+    columns = null;
     return layout();
   }
+  const before = placedSig;
   const v = view();
-  const x = spot.x;
-  const cols: Record<Side, { left: number; right: number }> = { right: { left: v.w - x - SIZE, right: v.w - x }, left: { left: x, right: x + SIZE } };
-  const read = (side: Side) => blockedRanges(scanColumns([cols[side]], v, { extra })[0] ?? [], cols[side], v.h, SIZE);
-  // Its own side first; the other corner is read only when the place it wants there is taken (half the hit tests).
-  const want = wanted();
-  const wantY = clampBubbleY(want.y, v.h);
-  const other: Side = want.side === "right" ? "left" : "right";
-  const here = read(want.side);
-  const there = nearestFreeY(wantY, here, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) === wantY ? null : read(other);
-  const next = { [want.side]: here, [other]: there } as Record<Side, [number, number][] | null>;
-  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
-  calm = JSON.stringify([next.right, next.left]) === JSON.stringify(blocked && [blocked.right, blocked.left]) ? Math.min(calm + 1, CALM_STEPS) : 0;
-  blocked = next;
+  columns = { w: v.w, h: v.h, boxes: new Map() };
   layout();
+  // Nothing new where it could stand: the page is looked at less often while that holds (queueRescan).
+  calm = placedSig === before ? Math.min(calm + 1, CALM_STEPS) : 0;
 }
 /*
  * How often the page is read (a read is a column or two of hit tests). A page that keeps changing — a clock, a
@@ -474,7 +478,7 @@ function watchPage(on: boolean): void {
       });
       if (theirs) queueRescan();
     });
-    watcher.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-expanded"] });
+    watcher.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "open", "aria-expanded", "disabled", "aria-disabled"] });
   }
   for (const t of ACTED) window.addEventListener(t, onPageActed, { capture: true, passive: true });
   // A toolbar's own opening ends after the press; a sticky bar sticks as the page scrolls.
@@ -500,11 +504,12 @@ function layout(): void {
   // While the panel is open it stays where it was opened from — never moved under the person's eyes.
   const wish = `${pagePath()}|${want.side}|${want.x}|${wantY}`;
   const prev = shown && shownFor === wish ? shown : null;
-  // A side not read is free here: it was left unread because the wish's own place was free, and that place wins.
-  const read = blocked && avoidSetting().on ? { right: blocked.right ?? [], left: blocked.left ?? [] } : null;
-  const free = !isOpen || !shown ? (read ? settleSpot(prev, { side: want.side, y: wantY }, read, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN)) : { side: want.side, y: wantY }) : shown;
-  shown = { side: free.side, x: want.x, y: free.y };
+  const home = { side: want.side, x: want.x, y: wantY };
+  const placing = !!columns && avoidSetting().on;
+  const free = !isOpen || !shown ? (placing ? placeSpot(home, readColumn, v, SIZE, MARGIN, Math.max(MARGIN, v.h - SIZE - MARGIN), prev) : home) : shown;
+  shown = { side: free.side, x: free.x, y: free.y };
   shownFor = wish;
+  if (placing) placedSig = JSON.stringify([blockedRanges(readColumn(home.side, home.x), home.side === "right" ? { left: v.w - home.x - SIZE, right: v.w - home.x } : { left: home.x, right: home.x + SIZE }, v.h, SIZE), shown]);
   const at = shown;
   const y = at.y;
   const other = at.side === "right" ? "left" : "right";
@@ -779,7 +784,8 @@ export function unmountSupportChat(): void {
   calm = 0;
   shown = null;
   shownFor = "";
-  blocked = null;
+  columns = null;
+  placedSig = "";
   ruleHidden = false;
   followHere(false);
   root?.remove();