hop2 0.11.49 → 0.11.51

package/hay/apps/web/src/App.tsx

@@ -16,6 +16,7 @@ import { collectTerminalMatches, selectTerminalMatch } from "./utils/terminalSea
 import { createVoiceHold, speechRecognitionCtor } from "./utils/voiceHold";
 import { tabTitle } from "./utils/tabTitle";
 import { remoteAppOwnsScreen } from "./utils/echoGuard";
+import { urlAtCell, cellAtPoint } from "./utils/urlAtCell";
 import { scanKeyboardProtocol } from "./utils/keyboardProtocol";
 import { originalPathHint, pasteableUploadPaths } from "./utils/fileDrop";
 import { MobileKeyboard } from "./components/MobileKeyboard";
@@ -1058,9 +1059,19 @@ const App = () => {
   // behind). Poll our own index.html for the bundle it now names; when it
   // differs from the one running, reload — but only while the tab is HIDDEN
   // and the terminal has no buffered input, so nobody ever sees it happen.
+  // A window that is never hidden — a dedicated hop window left open on a
+  // second display — never reloaded at all, and ran fixes-old code for days
+  // ("the bell is still ringing" was a window on a bundle from before bells
+  // went silent). Such a tab now gets told once per new bundle, and reloads
+  // itself after a quarter hour with no keystroke, click or wheel in it: a
+  // terminal reconnects and lands where it was, so an idle reload costs the
+  // user nothing they were doing.
   const staleBundleRef = useRef(false);
+  const STALE_IDLE_RELOAD_MS = 15 * 60 * 1000;
   useEffect(() => {
     let disposed = false;
+    let noticedFor: string | null = null;
+    let lastUserInputAt = Date.now();
     const loadedBundle = (() => {
       try { return new URL(import.meta.url).pathname.split("/").pop() || null; }
       catch { return null; }
@@ -1071,18 +1082,28 @@ const App = () => {
         const res = await fetch("/", { cache: "no-store" });
         const html = await res.text();
         const current = (html.match(/assets\/(index-[^"']+\.js)/) || [])[1];
-        if (!disposed && current && current !== loadedBundle) staleBundleRef.current = true;
+        if (!disposed && current && current !== loadedBundle) {
+          staleBundleRef.current = true;
+          if (noticedFor !== current && !document.hidden) {
+            noticedFor = current;
+            pushNoticeRef.current?.("hop was updated — reload to pick it up (this tab reloads itself when hidden or idle)");
+          }
+        }
       } catch { /* offline — try again next tick */ }
     };
     const maybeReload = () => {
-      if (staleBundleRef.current && document.hidden) window.location.reload();
+      if (!staleBundleRef.current) return;
+      if (document.hidden || Date.now() - lastUserInputAt > STALE_IDLE_RELOAD_MS) window.location.reload();
     };
+    const touch = () => { lastUserInputAt = Date.now(); };
     const interval = window.setInterval(() => { void check().then(maybeReload); }, 5 * 60 * 1000);
     document.addEventListener("visibilitychange", maybeReload);
+    for (const ev of ["keydown", "pointerdown", "wheel", "touchstart"] as const) window.addEventListener(ev, touch, { passive: true });
     return () => {
       disposed = true;
       window.clearInterval(interval);
       document.removeEventListener("visibilitychange", maybeReload);
+      for (const ev of ["keydown", "pointerdown", "wheel", "touchstart"] as const) window.removeEventListener(ev, touch);
     };
   }, []);
 
@@ -2089,7 +2110,16 @@ const App = () => {
     // window.open inside the click handler keeps the popup-blocker happy.
     terminal.loadAddon(new WebLinksAddon((event, uri) => {
       event.preventDefault();
-      window.open(uri, "_blank", "noopener");
+      // Prefer the whole URL when the addon saw only the first row of one a
+      // TUI hard-broke at the right edge (see utils/urlAtCell).
+      let target = uri;
+      const screen = containerRef.current?.querySelector(".xterm-screen") as HTMLElement | null;
+      const cell = screen ? cellAtPoint(screen, containerRef.current?.querySelector(".xterm-rows") as HTMLElement | null, terminal.cols, terminal.rows, event.clientX, event.clientY) : null;
+      if (cell) {
+        const joined = extractUrlAtCell(terminal.buffer.active.viewportY + cell.row, cell.col);
+        if (joined && joined.startsWith(uri) && joined.length > uri.length) target = joined;
+      }
+      window.open(target, "_blank", "noopener");
     }));
     terminal.open(containerRef.current);
 
@@ -3743,29 +3773,16 @@ const App = () => {
 
   // Reconstruct the URL under a tapped cell. Wrapped rows are joined into the
   // logical line first — OAuth URLs span many screen rows.
+  // Shared with the wall tiles (utils/urlAtCell): joins soft-wrapped rows
+  // and the hard breaks a TUI makes at the right edge.
   const extractUrlAtCell = useCallback((bufferRow: number, col: number): string | null => {
     const term = termRef.current;
     if (!term) return null;
     const buf = term.buffer.active;
-    let start = bufferRow;
-    while (start > 0 && buf.getLine(start)?.isWrapped) start--;
-    let text = "";
-    let offset = -1;
-    for (let r = start; r < buf.length; r++) {
-      const line = buf.getLine(r);
-      if (!line || (r > start && !line.isWrapped)) break;
-      if (r === bufferRow) offset = text.length + Math.min(col, term.cols - 1);
-      text += line.translateToString(false);
-    }
-    if (offset < 0) return null;
-    const urlRe = /https?:\/\/[^\s"'`<>]+/g;
-    let m: RegExpExecArray | null;
-    while ((m = urlRe.exec(text)) !== null) {
-      if (offset >= m.index && offset <= m.index + m[0].length) {
-        return m[0].replace(/[.,;:!?)\]}]+$/, "");
-      }
-    }
-    return null;
+    return urlAtCell(
+      (i) => { const l = buf.getLine(i); return l ? { text: l.translateToString(false), wrapped: l.isWrapped } : null; },
+      buf.length, term.cols, bufferRow, col
+    );
   }, []);
 
   // Enroll this device's platform authenticator (Touch ID / Face ID) as a

package/hay/apps/web/src/components/SessionSwitcher.tsx

@@ -13,6 +13,7 @@ import {
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { urlAtCell, cellAtPoint } from "../utils/urlAtCell";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
 import { ContextMenu, type MenuRequest } from "./ContextMenu";
 import { CwdField } from "./CwdField";
@@ -363,6 +364,33 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   const rescaleRef = useRef<() => void>(() => {});
   // Wired by the live effect; watch mode leaves them null so keys go nowhere.
   const sendInputRef = useRef<((data: string) => void) | null>(null);
+  // When the link addon last opened something from this tile — so the click
+  // that follows its mouseup does not open the same URL a second time.
+  const lastLinkOpenAtRef = useRef(0);
+  // The URL under a viewport point, reassembled across the rows it spans
+  // (utils/urlAtCell): Codex hard-breaks long URLs at the tile's edge, and
+  // the addon only joins rows the terminal itself wrapped.
+  const urlAtPoint = (clientX: number, clientY: number): string | null => {
+    const term = termRef.current;
+    const screen = boxRef.current?.querySelector(".xterm-screen") as HTMLElement | null;
+    if (!term || !screen) return null;
+    const rowsEl = boxRef.current?.querySelector(".xterm-rows") as HTMLElement | null;
+    const cell = cellAtPoint(screen, rowsEl, term.cols, term.rows, clientX, clientY);
+    const buf = term.buffer.active;
+    const url = cell ? urlAtCell(
+      (i) => { const l = buf.getLine(i); return l ? { text: l.translateToString(false), wrapped: l.isWrapped } : null; },
+      buf.length, term.cols, buf.viewportY + cell.row, cell.col
+    ) : null;
+    // Diagnostics for "clicking a link in a tile does nothing" reports:
+    // localStorage.hay_debug_links=1 prints what the click resolved to.
+    try {
+      if (localStorage.getItem("hay_debug_links")) {
+        const line = cell ? buf.getLine(buf.viewportY + cell.row) : null;
+        console.log("[links]", JSON.stringify({ cell, cols: term.cols, rows: term.rows, viewportY: buf.viewportY, len: buf.length, domRows: rowsEl?.children.length ?? null, line: line ? line.translateToString(false).slice(0, 90) : null, url }));
+      }
+    } catch { /* diagnostics only */ }
+    return url;
+  };
   const kbdEnhancedRef = useRef(false);
   // Throttle gate for typing-driven size ownership (below) — same 500ms
   // budget as the full-screen terminal's fit-on-type, and for the same
@@ -482,7 +510,12 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     // stops the card from treating the click as a switch.
     term.loadAddon(new WebLinksAddon((event, uri) => {
       event.preventDefault();
-      window.open(uri, "_blank", "noopener");
+      // Prefer the whole URL when the addon saw only the first row of a
+      // hard-broken one (its match ends at the tile's right edge).
+      const joined = urlAtPoint(event.clientX, event.clientY);
+      const target = joined && joined.startsWith(uri) && joined.length > uri.length ? joined : uri;
+      lastLinkOpenAtRef.current = Date.now();
+      window.open(target, "_blank", "noopener");
     }));
     term.open(box);
     termRef.current = term;
@@ -1070,7 +1103,22 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       // bottom-anchored screen otherwise shows the CARD's background as a
       // pale strip — the "space on top".
       style={{ background: (theme as { background?: string } | undefined)?.background }}
-      onClick={live ? (e) => e.stopPropagation() : undefined}
+      onClick={(e) => {
+        if (live) {
+          e.stopPropagation();
+          // The addon opened it on mouseup. Otherwise a URL the addon could
+          // not see as one — a continuation row of a hard break — is ours.
+          if (Date.now() - lastLinkOpenAtRef.current < 600) return;
+          const url = urlAtPoint(e.clientX, e.clientY);
+          if (url) window.open(url, "_blank", "noopener");
+          return;
+        }
+        // Not live yet: the click bubbles and focuses the tile as before,
+        // AND a URL under it opens — the first click on a link is not a dud
+        // that merely wakes the tile.
+        const url = urlAtPoint(e.clientX, e.clientY);
+        if (url) window.open(url, "_blank", "noopener");
+      }}
       onPointerDown={live ? (e) => e.stopPropagation() : undefined}
     >
       <div className="switcher-focus-term" ref={boxRef} />
@@ -2657,11 +2705,22 @@ export const SessionSwitcher = ({
 
   const now = Date.now();
 
+  // WHY the bell rang, so an amber dot on a Codex session — which rings at
+  // the end of every turn — reads "finished", not "needs your input".
+  const bellWhy = (s: SwitcherSession) => {
+    switch (s.attentionReason) {
+      case "ask": return s.attentionNote ? `Asking: ${s.attentionNote}` : "Asking you something";
+      case "finished": return "Finished a turn (bell)";
+      case "view": return s.attentionNote ? `Published: ${s.attentionNote}` : "Published a view";
+      case "working": return "Still working — rang mid-turn, nothing needs you yet";
+      default: return "Bell rung since last viewed";
+    }
+  };
   const dots = (s: SwitcherSession) =>
     (s.bellUnseen || s.unread) && (
       <span
         className={`attention-dot ${s.bellUnseen ? "bell" : "output"}`}
-        title={s.bellUnseen ? "Bell rung since last viewed" : "New output since last viewed"}
+        title={s.bellUnseen ? bellWhy(s) : "New output since last viewed"}
       />
     );
 

package/hay/apps/web/src/utils/urlAtCell.ts

@@ -0,0 +1,119 @@
+// The URL under a terminal cell, reassembled across the rows it spans.
+//
+// xterm's web-links addon joins rows only when the terminal itself wrapped
+// them (the `isWrapped` flag). A TUI that lays out its own text — Codex,
+// ratatui apps generally — breaks a long URL at the column boundary with a
+// HARD break: each row is positioned on its own, nothing is flagged wrapped,
+// and the addon sees two unrelated lines. In a wide full-screen terminal the
+// URL fits one row and clicks work; in a narrow tile it breaks and the same
+// click opens a truncated fragment or nothing. So this joins a row that runs
+// to the right edge with the row below when the continuation looks like the
+// rest of a URL, and searches the joined text for the URL covering the cell.
+
+export type CellLine = { text: string; wrapped: boolean };
+
+/**
+ * The (row, col) under a viewport point. With the DOM renderer each row is
+ * an element, so the row comes from whichever one contains the point —
+ * exact even when the terminal is scaled, cropped, or bottom-anchored
+ * inside a tile, where dividing the screen's height by `rows` was off by
+ * enough to land on the wrong line. Canvas/WebGL renderers keep no row
+ * elements; those fall back to the proportional split.
+ */
+export const cellAtPoint = (
+  screen: HTMLElement,
+  rowsEl: HTMLElement | null,
+  cols: number,
+  rows: number,
+  clientX: number,
+  clientY: number
+): { row: number; col: number } | null => {
+  const sr = screen.getBoundingClientRect();
+  if (clientX < sr.left || clientX >= sr.right) return null;
+  const col = Math.floor(((clientX - sr.left) / sr.width) * cols);
+  const kids = rowsEl ? Array.from(rowsEl.children) as HTMLElement[] : [];
+  if (kids.length) {
+    const row = kids.findIndex((el) => { const r = el.getBoundingClientRect(); return clientY >= r.top && clientY < r.bottom; });
+    return row < 0 ? null : { row, col };
+  }
+  if (clientY < sr.top || clientY >= sr.bottom) return null;
+  return { row: Math.floor(((clientY - sr.top) / sr.height) * rows), col };
+};
+
+const URL_CHAR = /^[A-Za-z0-9._~:/?#@!$&'()*+,;=%-]/;
+const URL_RE = /https?:\/\/[^\s"'`<>]+/g;
+
+/**
+ * Does `next` read as the hard-broken continuation of `prev` at width `cols`?
+ * Three signs together: `prev` runs to the right edge, the URL on it is what
+ * reaches the edge (not prose that happens to end there), and the first
+ * token of `next` looks like more URL — punctuation a URL carries, or a
+ * token too long for a word. "Then the agent continued." after a URL that
+ * ends at the edge is prose, and stays separate.
+ */
+const hardContinues = (prev: CellLine | null, next: CellLine | null, cols: number) => {
+  if (!prev || !next) return false;
+  const prevText = prev.text.replace(/\s+$/, "");
+  if (prevText.length < cols - 1) return false;
+  let endsInUrl = false;
+  URL_RE.lastIndex = 0;
+  let m: RegExpExecArray | null;
+  while ((m = URL_RE.exec(prevText)) !== null) endsInUrl = m.index + m[0].length >= prevText.length;
+  if (!endsInUrl) return false;
+  const token = next.text.replace(/^\s+/, "").split(/\s/)[0] || "";
+  return token.length > 0 && URL_CHAR.test(token) && (/[/?=&%#._-]/.test(token) || token.length > 12);
+};
+
+/**
+ * @param getLine buffer accessor (absolute row → line, or null)
+ * @param length  buffer length (rows)
+ * @param cols    terminal width
+ * @param bufferRow / col  the cell clicked
+ */
+export const urlAtCell = (
+  getLine: (row: number) => CellLine | null,
+  length: number,
+  cols: number,
+  bufferRow: number,
+  col: number
+): string | null => {
+  const at = (r: number) => (r >= 0 && r < length ? getLine(r) : null);
+  if (!at(bufferRow)) return null;
+  // Walk up to the logical start: soft wraps, or hard continuations.
+  let start = bufferRow;
+  let hops = 0;
+  while (start > 0 && hops < 6) {
+    const cur = at(start);
+    const prev = at(start - 1);
+    if (!cur || !prev) break;
+    if (cur.wrapped || hardContinues(prev, cur, cols)) { start--; hops++; } else break;
+  }
+  // Walk down, joining; hard continuations drop their indentation.
+  let text = "";
+  let offset = -1;
+  let r = start;
+  let joined = 0;
+  while (r < length && joined < 8) {
+    const line = at(r);
+    if (!line) break;
+    if (r > start) {
+      const prev = at(r - 1);
+      if (!(line.wrapped || hardContinues(prev, line, cols))) break;
+    }
+    const lead = line.wrapped || r === start ? 0 : line.text.length - line.text.replace(/^\s+/, "").length;
+    const piece = line.text.slice(lead);
+    if (r === bufferRow) offset = text.length + Math.max(0, Math.min(col, cols - 1) - lead);
+    text += piece;
+    r++;
+    joined++;
+  }
+  if (offset < 0) return null;
+  let m: RegExpExecArray | null;
+  URL_RE.lastIndex = 0;
+  while ((m = URL_RE.exec(text)) !== null) {
+    if (offset >= m.index && offset <= m.index + m[0].length) {
+      return m[0].replace(/[.,;:!?)\]}]+$/, "");
+    }
+  }
+  return null;
+};

package/hay/apps/web/test/urlAtCell.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { urlAtCell } from "../src/utils/urlAtCell";
+
+const COLS = 42;
+const pad = (s: string) => s.padEnd(COLS, " ");
+const buf = (rows: Array<[string, boolean?]>) => {
+  const lines = rows.map(([text, wrapped]) => ({ text: pad(text), wrapped: !!wrapped }));
+  return { get: (r: number) => lines[r] ?? null, length: lines.length };
+};
+
+describe("urlAtCell", () => {
+  it("finds a URL on one row and trims trailing punctuation", () => {
+    const b = buf([["see https://example.com/a/b, then"]]);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 10)).toBe("https://example.com/a/b");
+    expect(urlAtCell(b.get, b.length, COLS, 0, 2)).toBeNull();
+  });
+
+  it("joins rows the terminal soft-wrapped (isWrapped), like the addon does", () => {
+    const b = buf([["https://example.com/0123456789012345678901"], ["23456789/tail ok", true]]);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 5)).toBe("https://example.com/012345678901234567890123456789/tail");
+    expect(urlAtCell(b.get, b.length, COLS, 1, 3)).toBe("https://example.com/012345678901234567890123456789/tail");
+  });
+
+  it("joins a HARD break a TUI made at the right edge (Codex): no wrapped flag, continuation indented", () => {
+    // Row 0 fills the width; row 1 is positioned by the app with an indent.
+    const b = buf([["https://auth.example.com/authorize?client="], ["  abcdef&state=xyz"]]);
+    expect(b.get(0)!.text.replace(/\s+$/, "").length).toBe(COLS);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 12)).toBe("https://auth.example.com/authorize?client=abcdef&state=xyz");
+    // A click on the continuation row resolves to the same URL.
+    expect(urlAtCell(b.get, b.length, COLS, 1, 6)).toBe("https://auth.example.com/authorize?client=abcdef&state=xyz");
+  });
+
+  it("does not glue an unrelated next row onto a URL that merely ends at the edge", () => {
+    const b = buf([["https://example.com/0123456789012345678901"], ["Then the agent continued."]]);
+    expect(b.get(0)!.text.replace(/\s+$/, "").length).toBe(COLS);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 5)).toBe("https://example.com/0123456789012345678901");
+  });
+
+  it("a long unpunctuated remainder still joins; a short word does not", () => {
+    const b = buf([["https://example.com/0123456789012345678901"], ["  abcdefghijklmnop rest"]]);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 5)).toBe("https://example.com/0123456789012345678901abcdefghijklmnop");
+    const c = buf([["https://example.com/0123456789012345678901"], ["  docs are here"]]);
+    expect(urlAtCell(c.get, c.length, COLS, 0, 5)).toBe("https://example.com/0123456789012345678901");
+  });
+
+  it("returns null with no URL under the cell", () => {
+    const b = buf([["nothing here"]]);
+    expect(urlAtCell(b.get, b.length, COLS, 0, 3)).toBeNull();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hop2",
-  "version": "0.11.49",
+  "version": "0.11.51",
   "description": "🐰 Hop into your terminal from anywhere. Secure remote shell access with 2FA via Cloudflare Tunnel. Next-gen rewrite with native terminal sharing.",
   "main": "hop",
   "bin": {