relay-companion 0.1.78 → 0.1.80

package/overlay/inbox.html

@@ -170,6 +170,13 @@
   .scroll {
     flex:1 1 auto; min-height:0; width:344px;
     overflow-y:auto; overscroll-behavior:contain;
+    /* The card's open/close animation changes its HEIGHT every frame. Without
+       containment each of those frames re-lays-out every row in this scroller
+       (150+ on a real inbox) — ~60 full reflows a second, which is what made
+       opening judder and delayed the click that starts it. `contain` tells the
+       engine this subtree's layout can't affect (or be affected by) the box
+       around it, so resizing the card no longer touches the rows. */
+    contain:layout paint style;
     padding:0 0 8px;
     transition:opacity .3s var(--settle) .06s;
   }
@@ -603,9 +610,6 @@
     color:#fff; background:var(--accent);
     box-shadow:0 2px 5px -2px color-mix(in srgb, var(--accent) 55%, transparent);
   }
-  .th-item.th-sent-only .th-count {
-    color:var(--muted); background:rgba(31,26,23,.055); box-shadow:none;
-  }
   .th-unread {
     flex:0 0 auto; align-self:center; min-width:7px; height:7px; border-radius:999px;
     background:var(--accent); font-size:0;
@@ -617,9 +621,6 @@
     overflow-wrap:anywhere;
   }
   .th-item.unread .th-title { color:var(--ink); font-weight:500; }
-  /* Conversations you started that have no reply yet sit quietly in the list. */
-  .th-item.th-sent-only .th-party { color:var(--muted); font-weight:500; }
-  .th-item.th-sent-only .th-title { color:var(--muted-2); }
   .th-detail-head { display:flex; align-items:center; gap:9px; padding:10px 16px 8px; border-bottom:1px solid var(--hair-2); }
   .th-back {
     appearance:none; border:0; background:transparent; cursor:pointer; padding:0;
@@ -949,14 +950,25 @@
     for (let i = 0; i < n; i++) { const a = step(W, h), b = step(H, h); moving = moving || a || b; }
     cardEl.style.width = W.v.toFixed(2) + "px";
     cardEl.style.height = H.v.toFixed(2) + "px";
-    publishCardSize(W.v, H.v);
+    // The hit rect only needs to be roughly right DURING the animation (main
+    // re-reads it at the end); sending it every frame was 60 cross-process
+    // messages a second competing with the very frames it describes.
+    publishCardSizeThrottled(W.v, H.v);
     if (moving) raf = requestAnimationFrame(frame);
     else { raf = null; cardEl.style.willChange = ""; publishCardSize(W.t, H.t); }
   }
+  let lastPublishAt = 0;
+  function publishCardSizeThrottled(w, h) {
+    const now = performance.now();
+    if (now - lastPublishAt < 80) return;
+    lastPublishAt = now;
+    publishCardSize(w, h);
+  }
   function springTo(w, h) {
     W.t = w; H.t = h;
     if (REDUCED) { W.v = w; H.v = h; cardEl.style.width = w + "px"; cardEl.style.height = h + "px"; publishCardSize(w, h); return; }
-    cardEl.style.willChange = "width, height";
+    // will-change on width/height buys nothing (they are layout, not composited)
+    // and costs a layer promotion; containment on .scroll is what makes this cheap.
     if (!raf) { lastT = performance.now(); raf = requestAnimationFrame(frame); }
   }
 
@@ -1238,16 +1250,14 @@
   // Counted, not stored as a target: between bursts the state is always re-derived
   // from the live `collapsed`, so it can never drift out of sync with the paths that
   // fold/expand the card on their own (tray open, notification fold, offstage reset).
-  let pendingToggles = 0;
-  function reconcileCollapsed() {
-    const odd = pendingToggles % 2 === 1;
-    pendingToggles = 0;
-    if (odd) setCollapsed(!collapsed);
-  }
+  // Applied SYNCHRONOUSLY on the tap. The old path deferred to requestAnimationFrame
+  // to coalesce bursts, but a renderer busy laying out the list could deliver that
+  // frame late — the click appeared to do nothing, which is precisely the complaint
+  // it was meant to prevent. Coalescing is no longer needed: springTo only RETARGETS
+  // the running spring, so a burst of taps moves the target rather than queuing
+  // animations, and parity stays correct because each tap toggles exactly once.
   function requestToggle() {
-    pendingToggles += 1;
-    if (pendingToggles > 1) return; // reconcile already scheduled
-    requestAnimationFrame(reconcileCollapsed);
+    setCollapsed(!collapsed);
   }
   window.addEventListener("mouseup", () => {
     if (!dragging) return;
@@ -1577,21 +1587,34 @@
     // expand-card open actions); anything with replies — or that only exists on
     // the sent side — renders as a conversation row that drills into the thread.
     const byId = new Map(allRows.map((r) => [r.id, r]));
-    const threads = buildThreads();
-    relaysEmptyEl.classList.toggle("gone", threads.length > 0);
+    // Relays is an INBOX: it lists conversations someone sent you. A thread with
+    // no inbound message is something you sent and nobody has answered — that
+    // belongs in Sent, not here. (Once a reply arrives the whole exchange,
+    // including your side of it, appears here as one conversation.)
+    const allThreads = buildThreads().filter((t) => (t.msgs || []).some((m) => m.direction === "in"));
+    relaysEmptyEl.classList.toggle("gone", allThreads.length > 0);
     const seen = prevRelayIds;
+    // WINDOWED RENDER. Rebuilding every conversation cost ~21ms of blocking
+    // main-thread work on a real inbox (150 rows, 134KB of HTML) — longer than
+    // a frame, so any rebuild landing during the open/close animation dropped
+    // frames, and one landing on a click delayed the click itself. Only the
+    // rows a person can actually see are built; scrolling extends the window.
+    // Nothing is hidden: reaching the end reveals the next page.
+    const windowSize = Math.max(RENDER_WINDOW, renderedThreadCount);
+    const threads = allThreads.slice(0, windowSize);
+    renderedThreadCount = threads.length;
+    hasMoreThreads = allThreads.length > threads.length;
     relaysListEl.innerHTML = threads.map((t) => {
       const inbound = t.msgs.filter((m) => m.direction === "in");
       if (t.msgs.length === 1 && inbound.length === 1 && byId.has(inbound[0].id)) {
         return relayRowHtml(byId.get(inbound[0].id), seen);
       }
-      const sentOnly = inbound.length === 0;
       return `
-      <div class="th-item${t.unreadCount ? " unread" : ""}${sentOnly ? " th-sent-only" : ""} deletable" role="button" tabindex="0" data-thread="${esc(t.threadId)}" data-party="${esc(t.party)}">
+      <div class="th-item${t.unreadCount ? " unread" : ""} deletable" role="button" tabindex="0" data-thread="${esc(t.threadId)}" data-party="${esc(t.party)}">
         ${threadDeleteButton(t)}
         <span class="th-top">
           ${t.unreadCount ? '<span class="th-unread"></span>' : ""}
-          <span class="th-party">${sentOnly ? "To " : ""}${esc(t.party)}</span>
+          <span class="th-party">${esc(t.party)}</span>
           ${t.msgs.length > 1 ? `<span class="th-count">${t.msgs.length}</span>` : ""}
           <span class="th-time">${esc(timeAgo(t.latest.at))}</span>
         </span>
@@ -1605,6 +1628,19 @@
     }
   }
 
+  // Grow the window as the user scrolls toward the end. Cheap: each extension
+  // renders one more page rather than the whole inbox.
+  const RENDER_WINDOW = 25;
+  let renderedThreadCount = 0;
+  let hasMoreThreads = false;
+  scrollEl.addEventListener("scroll", () => {
+    if (!hasMoreThreads || activeView !== "relays") return;
+    const nearEnd = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 240;
+    if (!nearEnd) return;
+    renderedThreadCount += RENDER_WINDOW;
+    renderRelays();
+  }, { passive: true });
+
   // Preview plus the two host-open actions, as one small text-first menu.
   // Preview is the primary, non-navigation path; the other actions hand the
   // relay to a current or fresh host session.
@@ -3071,6 +3107,43 @@
     else if (activeView === "sent") renderSent();
   }, 60000);
 
+  // ---------- self-diagnosis ----------
+  // A frame gap this long is not "slow", it is a visible freeze: the card stops
+  // moving and clicks appear dead. Record what the UI was doing so the next real
+  // occurrence on a real machine identifies its own cause (~/.relay/perf.log).
+  const STALL_MS = 250;
+  let lastRenderCostMs = 0;
+  (function watchFrames() {
+    let last = performance.now();
+    function tick(now) {
+      const gap = now - last;
+      last = now;
+      if (gap > STALL_MS && window.relay.reportStall) {
+        window.relay.reportStall({
+          ms: gap,
+          kind: "frame",
+          rows: relaysListEl ? relaysListEl.children.length : 0,
+          animating: Boolean(raf),
+          collapsed,
+          lastRenderMs: lastRenderCostMs,
+        });
+      }
+      requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
+  })();
+  // Time the list rebuild itself, so a stall report says whether rendering caused it.
+  const __renderRelays = renderRelays;
+  renderRelays = function timedRenderRelays(...args) {
+    const t0 = performance.now();
+    const out = __renderRelays.apply(this, args);
+    lastRenderCostMs = performance.now() - t0;
+    if (lastRenderCostMs > STALL_MS && window.relay.reportStall) {
+      window.relay.reportStall({ ms: lastRenderCostMs, kind: "render", rows: relaysListEl ? relaysListEl.children.length : 0, collapsed });
+    }
+    return out;
+  };
+
   // LAST statement on purpose: every listener above is registered, so main may
   // now deliver queued arrivals without a single one being dropped (FM-1).
   if (window.relay.rendererReady) window.relay.rendererReady();

package/overlay/main.cjs

@@ -3019,6 +3019,50 @@ ipcMain.on("relay:setFocusable", (_e, focusable) => {
 // It only publishes the card's current SIZE (origin is fixed by the top-right anchor)
 // so main can derive the clickable rect. Stale sizes are safe: the rect is clamped to
 // the expanded card, and a size arriving late only shifts the hit edge by a few px.
+// Self-diagnosing stalls. Sandbox benchmarks kept showing a healthy pill while
+// the real one felt frozen for seconds, so the product records its own hitches:
+// the renderer reports any frame gap or click-to-response delay over the
+// threshold, main appends one line to ~/.relay/perf.log with what was happening.
+// The next real freeze explains itself instead of needing a reproduction.
+const PERF_LOG_PATH = path.join(
+  process.env.RELAY_CONFIG_DIR || path.join(os.homedir(), ".relay"),
+  "perf.log",
+);
+ipcMain.on("relay:stall", (_e, info) => {
+  try {
+    const d = info && typeof info === "object" ? info : {};
+    const line = JSON.stringify({
+      at: new Date().toISOString(),
+      where: "renderer",
+      ms: Math.round(Number(d.ms) || 0),
+      kind: String(d.kind || "frame").slice(0, 24),
+      rows: Number(d.rows) || 0,
+      animating: d.animating === true,
+      collapsed: d.collapsed === true,
+      lastRenderMs: Math.round(Number(d.lastRenderMs) || 0),
+      version: pillVersion(),
+    });
+    fs.appendFileSync(PERF_LOG_PATH, `${line}\n`);
+  } catch {}
+});
+// Main-process side of the same detector: a blocked main loop delays the click
+// hit-test and every IPC the renderer is waiting on.
+{
+  let lastTick = Date.now();
+  setInterval(() => {
+    const now = Date.now();
+    const drift = now - lastTick - 500;
+    lastTick = now;
+    if (drift < 400) return;
+    try {
+      fs.appendFileSync(
+        PERF_LOG_PATH,
+        `${JSON.stringify({ at: new Date().toISOString(), where: "main", ms: Math.round(drift), version: pillVersion() })}\n`,
+      );
+    } catch {}
+  }, 500).unref?.();
+}
+
 ipcMain.on("relay:cardSize", (_e, w, h) => {
   if (!Number.isFinite(w) || !Number.isFinite(h)) return;
   cardSize = { w, h };

package/overlay/preload.cjs

@@ -79,4 +79,7 @@ contextBridge.exposeInMainWorld("relay", {
   // Fired as the renderer script's last statement: every listener above is
   // registered, so main may deliver arrivals without dropping them.
   rendererReady: () => ipcRenderer.send("relay:rendererReady"),
+  // Self-diagnosis: the renderer reports its own hitches so a real freeze on a
+  // real machine writes evidence instead of needing a live reproduction.
+  reportStall: (info) => ipcRenderer.send("relay:stall", info || {}),
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-companion",
-  "version": "0.1.78",
+  "version": "0.1.80",
   "description": "Relay companion for ordinary messages, with dormant coordination features available only by explicit opt-in.",
   "type": "module",
   "bin": {