hop2 0.11.10 → 0.11.11

package/hay/CHANGELOG.md

@@ -34,6 +34,7 @@
 
 #### Web terminal
 - **Claude screens render completely on attach without a scroll**: Hop now starts its authoritative screen grid when a session enters alternate-screen or mouse-reporting TUI mode, before startup rows can fall out of a bounded replay tail. Full-screen attaches use that serialized screen, and direct snapshot paints re-arm one delayed repaint in case the browser misses the first WebGL frame.
+- **Resizing another desktop view no longer leaves a terminal unable to reach the live bottom**: Hop now reconciles xterm's follow state after every geometry change and keeps authoritative screen resizes ordered behind the output that preceded them.
 
 #### Session restore
 - **`hop restore` actually restores now (Claude conversations included), from the SessionStart-hook records**: restore built its candidate list from the workspace-scoped session store, which is only populated when a workspace is active — and no workspace is ever activated in normal use, so `restore` found nothing and silently restored zero sessions. It now sources candidates directly from the durable per-session records the SessionStart hook writes (`~/.hop2/claude-sessions/<name>.json` = `{ sessionId, cwd }`), which survive a crash/reboot and carry the exact conversation id. So after a restart, `hop restore` recreates each session in its directory and resumes its Claude conversation with `claude --resume <id>` — no manual capture step. Sessions already live are skipped (idempotent), and `hop restore` now starts the daemon itself if it isn't running, so post-reboot recovery is a single command. `--dry-run` previews the plan. Records are pruned when a session is deleted, so restore never resurrects a session you intentionally closed (and if an unwanted one does come back, deleting it once keeps it gone).

package/hay/apps/server/src/rooms.ts

@@ -575,11 +575,12 @@ export class Room extends EventEmitter {
     const combined = this.controlSequenceTail + data;
     const tailLength = this.controlSequenceTail.length;
     const risIndex = combined.lastIndexOf("\x1bc");
-    // Only process a RIS that ends in this chunk; one entirely inside the
-    // carry tail was already applied on the preceding call. Modes before the
-    // last new RIS are reset, while later sequences in the same chunk win.
+    // Only reset tracked state for a RIS that ends in this chunk; one entirely
+    // inside the carry tail was already applied on the preceding call. Always
+    // ignore bytes before the last RIS so carried pre-reset mode enables cannot
+    // be parsed again on the next chunk.
     const hasNewRis = risIndex !== -1 && risIndex + 2 > tailLength;
-    const stateInput = hasNewRis ? combined.slice(risIndex + 2) : combined;
+    const stateInput = risIndex !== -1 ? combined.slice(risIndex + 2) : combined;
 
     // Parse CSI mode sequences (cursor visibility, alternate screen)
     const regex = /\x1b\[\?([0-9;]*)([hl])/g;
@@ -1214,6 +1215,29 @@ export class Room extends EventEmitter {
     return { cols: this.activeCols, rows: this.activeRows, output: this.tailOutput(maxBytes) };
   }
 
+  /**
+   * The room's current screen, serialized — IDENTICAL in geometry and bytes
+   * to what a live attach snapshots. Previews painted from this cannot
+   * disagree with the terminal a click turns them into: that disagreement
+   * (daemon-side grids rendering at their own capped size while the room ran
+   * at another) was the preview → terminal size change. Modes ride in-band
+   * like the attach path so cursor/mouse state present identically too.
+   */
+  serializeScreen(
+    callback: (result: { data: string; cols: number; rows: number } | null) => void,
+    scrollback = 200
+  ) {
+    if (this.outputBytes === 0) { callback(null); return; }
+    const grid = this.ensureGrid();
+    if (!grid) { callback(null); return; }
+    grid.serialize((serialized) => {
+      if (serialized === null) { callback(null); return; }
+      const modeSeq = (this.mouseReporting ? "\x1b[?1002h" + (this.mouseSgr ? "\x1b[?1006h" : "") : "")
+        + (this.cursorHidden ? "\x1b[?25l" : "");
+      callback({ data: "\x1bc" + serialized + modeSeq, cols: this.activeCols, rows: this.activeRows });
+    }, scrollback);
+  }
+
   /**
    * Incremental output for a persistent consumer-side screen parser (the
    * daemon's preview grids). `since` is an absolute cursor from a previous
@@ -1353,6 +1377,16 @@ export class RoomManager {
     return room ? room.getPreviewSource(maxBytes) : null;
   }
 
+  serializeRoomScreen(
+    id: string,
+    callback: (result: { data: string; cols: number; rows: number } | null) => void,
+    scrollback?: number
+  ) {
+    const room = this.rooms.get(id);
+    if (!room) { callback(null); return; }
+    room.serializeScreen(callback, scrollback);
+  }
+
   getRoomOutputSince(id: string, since?: number, maxBytes?: number) {
     const room = this.rooms.get(id);
     return room ? room.getOutputSince(since, maxBytes) : null;

package/hay/apps/server/src/screenGrid.ts

@@ -117,7 +117,17 @@ export const createScreenGrid = (cols: number, rows: number): ScreenGrid | null
     },
     resize(nextCols: number, nextRows: number) {
       if (disposed) return;
-      try { term.resize(Math.max(2, nextCols), Math.max(1, nextRows)); } catch { /* keep old size */ }
+      const cols = Math.max(2, nextCols);
+      const rows = Math.max(1, nextRows);
+      try {
+        // xterm parses write() asynchronously. Queue the resize behind every
+        // earlier byte so room order stays PTY output → SIGWINCH, while later
+        // writes naturally queue behind this callback's synchronous resize.
+        term.write("", () => {
+          if (disposed) return;
+          try { term.resize(cols, rows); } catch { /* keep old size */ }
+        });
+      } catch { /* keep old size */ }
     },
     serialize(callback: (data: string | null) => void, scrollback: number = GRID_SCROLLBACK) {
       if (disposed) { callback(null); return; }

package/hay/apps/server/test/rooms.test.ts

@@ -709,7 +709,7 @@ describe("Room", () => {
   });
 
   describe("serialized attach", () => {
-    const setup = async (roomId: string) => {
+    const setup = async (roomId: string, initialSize = { cols: 80, rows: 24 }) => {
       const { loadScreenGridDeps } = await import("../src/screenGrid");
       expect(await loadScreenGridDeps()).toBe(true);
       let ptyInstance: FakePty | null = null;
@@ -718,7 +718,7 @@ describe("Room", () => {
         return ptyInstance as any;
       };
       const manager = new RoomManager(factory);
-      const room = manager.getRoom(roomId, { cols: 80, rows: 24 }, "/tmp");
+      const room = manager.getRoom(roomId, initialSize, "/tmp");
       return { room, pty: () => ptyInstance! };
     };
 
@@ -785,6 +785,34 @@ describe("Room", () => {
       expect(room.getPreviewSource(2_000_000).output).not.toContain("ROW1-EARLY-GRID-MARKER");
     });
 
+    it("parses queued screen output before applying a later resize", async () => {
+      const { room, pty } = await setup("ordered-grid-resize", { cols: 80, rows: 60 });
+      const owner = new FakeSocket();
+      room.attachClient(
+        { id: "owner", name: "Owner", colorIndex: 0, cols: 80, rows: 60, replayBytes: 0, nudge: false },
+        owner
+      );
+      const rows = Array.from({ length: 60 }, (_, i) => {
+        const row = String(i + 1).padStart(2, "0");
+        return `\x1b[${i + 1};1HROW-${row}`;
+      }).join("");
+      pty().emit("\x1b[?1049h\x1b[2J" + rows);
+
+      // PTY order is old-size output, then SIGWINCH. The headless grid used
+      // to resize synchronously while its earlier write was still queued,
+      // clamping rows 25-59 away before a late attach serialized the screen.
+      owner.emitMessage({ type: "resize", cols: 80, rows: 25, user: true });
+      const late = new FakeSocket();
+      room.attachClient(
+        { id: "late", name: "Late", colorIndex: 1, cols: 80, rows: 25, replayBytes: 65536 },
+        late
+      );
+      const snapshot = await waitForSnapshot(late);
+      for (let row = 36; row <= 60; row++) {
+        expect(String(snapshot.data)).toContain(`ROW-${String(row).padStart(2, "0")}`);
+      }
+    });
+
     it("flags a serialized snapshot as capped when deeper raw history exists", async () => {
       const { room, pty } = await setup("capped");
       const big = "\x1b[20;1H" + "y".repeat(4096);
@@ -853,6 +881,9 @@ describe("Room", () => {
       // Split ESC c across chunks to cover the control-sequence carry path.
       pty().emit("\x1b");
       pty().emit("c\x1b[2J\x1b[1;1HAFTER-RIS");
+      // A later chunk must not reparse mode enables that remain before RIS in
+      // the control-sequence carry buffer.
+      pty().emit("plain");
       const socket = new FakeSocket();
       room.attachClient(
         { id: "after-ris", name: "After RIS", colorIndex: 0, cols: 80, rows: 24, replayBytes: 65536 },
@@ -867,6 +898,30 @@ describe("Room", () => {
       expect(snapshot.keyboardEnhanced).toBe(false);
     });
 
+    // The preview → terminal size change, killed at the root: a preview must
+    // be painted from the SAME grid, at the SAME geometry, as the snapshot a
+    // live attach would receive.
+    it("serializeScreen matches the live room's geometry and carries modes", async () => {
+      const { room, pty } = await setup("faithful");
+      pty().emit("\x1b[?1002h\x1b[?1006h");
+      pty().emit("\x1b[2J\x1b[1;1HFAITHFUL-MARKER");
+      const result = await new Promise((resolve) => room.serializeScreen(resolve));
+      expect(result).not.toBeNull();
+      expect((result as any).cols).toBe(80);
+      expect((result as any).rows).toBe(24);
+      expect(String((result as any).data).startsWith("\x1bc")).toBe(true);
+      expect(String((result as any).data)).toContain("FAITHFUL-MARKER");
+      expect(String((result as any).data)).toContain("\x1b[?1002h");
+      // After a size claim, the serialized geometry follows the room.
+      const socket = new FakeSocket();
+      room.attachClient({ id: "typer", name: "T", colorIndex: 0, cols: 100, rows: 30 }, socket);
+      socket.emitMessage({ type: "input", data: "x" });
+      socket.emitMessage({ type: "resize", cols: 100, rows: 30 });
+      const after = await new Promise((resolve) => room.serializeScreen(resolve));
+      expect((after as any).cols).toBe(100);
+      expect((after as any).rows).toBe(30);
+    });
+
     it("replay=0 means no snapshot at all — live stream only", async () => {
       const { room, pty } = await setup("claim");
       pty().emit("some prior output\r\n");

package/hay/apps/web/scripts/run-e2e.mjs

@@ -113,6 +113,59 @@ const runE2E = async () => {
     const switchedBuffer = await page1.evaluate(() => window.__hay?.getBufferText() || "");
     assert.ok(!switchedBuffer.includes("shared"), `old room output survived session switch: ${JSON.stringify(switchedBuffer)}`);
 
+    // A resize can collapse scrollback to y=base=0 without xterm emitting an
+    // onScroll event. App follow-mode must reconcile that state before the
+    // next real room output grows below a viewport parked at 0.
+    const followAfterResize = await page1.evaluate(async () => {
+      const terminal = window.__hay.terminal;
+      const write = (data) => new Promise((resolve) => terminal.write(data, resolve));
+      terminal.reset();
+      terminal.resize(20, 5);
+      await write(Array.from({ length: 20 }, (_, i) => `old-${i}\r\n`).join(""));
+      terminal.scrollLines(-2);
+      const before = {
+        y: terminal.buffer.active.viewportY,
+        base: terminal.buffer.active.baseY
+      };
+      terminal.resize(20, 30);
+      const afterResize = {
+        y: terminal.buffer.active.viewportY,
+        base: terminal.buffer.active.baseY
+      };
+      return { before, afterResize };
+    });
+    assert.ok(followAfterResize.before.y < followAfterResize.before.base, "follow-latch setup did not scroll above bottom");
+    assert.deepEqual(followAfterResize.afterResize, { y: 0, base: 0 }, "resize did not collapse the test scrollback");
+
+    // Deliver the new rows through the room, so this covers App's actual
+    // output/follow path rather than xterm's behavior for a direct test write.
+    await page1.evaluate(async ({ roomName, data }) => {
+      const peer = new WebSocket(
+        `ws://${location.host}/ws?room=${encodeURIComponent(roomName)}&name=FollowPeer&cols=20&rows=30`
+      );
+      await new Promise((resolve, reject) => {
+        peer.onopen = resolve;
+        peer.onerror = reject;
+      });
+      window.__followPeer = peer;
+      peer.send(JSON.stringify({ type: "input", data }));
+    }, {
+      roomName: freshRoom,
+      data: Array.from({ length: 15 }, (_, i) => `new-${i}\r\n`).join("")
+    });
+    await page1.waitForFunction(() => window.__hay.terminal.buffer.active.baseY > 0);
+    followAfterResize.afterWrite = await page1.evaluate(() => ({
+      y: window.__hay.terminal.buffer.active.viewportY,
+      base: window.__hay.terminal.buffer.active.baseY
+    }));
+    await page1.evaluate(() => window.__followPeer?.close());
+    assert.ok(followAfterResize.afterWrite.base > 0, "follow-latch test did not regrow scrollback");
+    assert.equal(
+      followAfterResize.afterWrite.y,
+      followAfterResize.afterWrite.base,
+      `terminal stopped following after resize: ${JSON.stringify(followAfterResize)}`
+    );
+
     const roomLock = `e2e-${Date.now()}-lock`;
     const context2 = await browser.newContext({ viewport: { width: 1280, height: 720 } });
     const page3 = await context2.newPage();

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

@@ -519,6 +519,10 @@ const App = () => {
   const shouldReconnectRef = useRef(true);
   const connectNonceRef = useRef(0);
   const userScrolledUpRef = useRef(false);
+  // A resize can collapse a previously scrolled viewport to y=base=0 without
+  // clearing xterm's internal user-scroll state. The next output must repair
+  // follow mode after xterm has actually grown the buffer again.
+  const followAfterResizeRef = useRef(false);
   // Set by every write into the terminal; the render watchdog only spends a
   // refresh when something actually changed since its last tick.
   const outputSinceTickRef = useRef(true);
@@ -1272,9 +1276,14 @@ const App = () => {
 
     // Filter focus reporting sequences that can leak as visible text
     const filtered = data.replace(/\x1b\[I/g, '').replace(/\x1b\[O/g, '');
+    const repairFollowAfterResize = followAfterResizeRef.current;
     termRef.current.write(filtered, () => {
+      if (repairFollowAfterResize) {
+        followAfterResizeRef.current = false;
+        userScrolledUpRef.current = false;
+      }
       // Auto-scroll to bottom unless the user has explicitly scrolled up
-      if (!userScrolledUpRef.current) {
+      if (repairFollowAfterResize || !userScrolledUpRef.current) {
         termRef.current?.scrollToBottom();
       }
     });
@@ -1319,6 +1328,12 @@ const App = () => {
     activeSizeRef.current = null;
     optimisticEchoRef.current.reset();
     userScrolledUpRef.current = false;
+    followAfterResizeRef.current = false;
+    // reset() can emit onScroll(0). Clear the previous room's history guards
+    // first so that event cannot masquerade as a real scroll-to-top gesture.
+    lastViewportYRef.current = 0;
+    snapshotSettledAtRef.current = 0;
+    snapshotWasCappedRef.current = false;
     termRef.current?.reset();
 
     // Fast first paint: the daemon can serialize the session's CURRENT
@@ -1944,6 +1959,30 @@ const App = () => {
       syncOverlayScrollbar();
     };
     terminal.onScroll(onBufferScroll);
+    // xterm does not always emit onScroll when a resize collapses scrollback.
+    // Its public y/base can then say "bottom" while both our follow flag and
+    // xterm's private user-scroll latch remain stuck above it. Reconcile every
+    // resize from buffer truth and remember to repair follow mode after the
+    // next write has regrown the buffer (scrollToBottom is a no-op at 0/0).
+    terminal.onResize(() => {
+      // onResize fires inside xterm's resize transaction, before its private
+      // user-scroll latch has fully settled. Reconcile just after resize()
+      // returns, still ahead of terminal writes queued later in the turn.
+      queueMicrotask(() => {
+        if (termRef.current !== terminal) return;
+        const { y, base } = scrollState();
+        lastViewportYRef.current = y;
+        if (y >= base) {
+          userScrolledUpRef.current = false;
+          followAfterResizeRef.current = true;
+          terminal.scrollToBottom();
+        } else {
+          userScrolledUpRef.current = true;
+          followAfterResizeRef.current = false;
+        }
+        syncOverlayScrollbar();
+      });
+    });
     // Buffer growth while following doesn't always fire onScroll — a light
     // interval keeps the thumb honest.
     const overlayInterval = window.setInterval(syncOverlayScrollbar, 700);

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

@@ -11,7 +11,6 @@ import {
 } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
-import { WebglAddon } from "@xterm/addon-webgl";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
 import { ContextMenu, type MenuRequest } from "./ContextMenu";
 import { collectTerminalMatches, selectTerminalMatch } from "../utils/terminalSearch";
@@ -829,24 +828,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     // terminal has had it all along, which is most of why a live tile felt
     // less responsive than full screen. Only the live tile: browsers cap
     // concurrent WebGL contexts (~16) and a wall can hold more tiles.
-    let webgl: WebglAddon | null = null;
-    let webglWanted = true;
-    const loadGpu = () => {
-      // Deferred until the first live snapshot has painted: the renderer
-      // swap is itself a visible flash, so it happens once the tile already
-      // shows the same pixels it will re-render — invisible in practice.
-      if (!webglWanted || webgl) return;
-      try {
-        webgl = new WebglAddon();
-        webgl.onContextLoss(() => { webgl?.dispose(); webgl = null; });
-        term.loadAddon(webgl);
-        term.refresh(0, term.rows - 1);
-      } catch {
-        try { webgl?.dispose(); } catch { /* half-constructed */ }
-        webgl = null;
-        webglWanted = false;
-      }
-    };
+    // ONE renderer for the wall, in BOTH modes. WebGL used to load only when
+    // a tile went live, so the flip changed glyph quantization mid-swap (the
+    // WebGL renderer floors cell widths to device pixels; the DOM renderer
+    // doesn't) — a size change no metric-matching could fully erase, plus a
+    // browser cap of ~16 WebGL contexts a big wall can exceed, plus the
+    // texture-atlas blank-cell class. Tiles are small; the DOM renderer is
+    // plenty, and preview → live becomes the SAME renderer painting the same
+    // bytes at the same geometry. Full screen keeps WebGL.
     setConn("live");
     const sep = wsBase.includes("?") ? "&" : "?";
     const wsUrl = () =>
@@ -903,7 +892,6 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
               term.scrollToBottom();
               term.refresh(0, term.rows - 1);
               rescaleRef.current();
-              requestAnimationFrame(loadGpu);
             });
             kbdEnhancedRef.current = typeof m.keyboardEnhanced === "boolean"
               ? m.keyboardEnhanced
@@ -978,8 +966,6 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     const focusTimer = window.setTimeout(() => { if (terminalMayTakeFocus()) term.focus(); }, 50);
     return () => {
       disposed = true;
-      try { webgl?.dispose(); } catch { /* already gone */ }
-      webgl = null;
       window.clearTimeout(focusTimer);
       window.clearTimeout(reconnectTimer);
       document.removeEventListener("visibilitychange", onVisibility);