hop2 0.11.1 → 0.11.2

package/.github/workflows/publish.yml

@@ -64,8 +64,12 @@ jobs:
           node-version: 22
           registry-url: https://registry.npmjs.org
 
-      # Trusted publishing needs npm >= 11.5.1; the runner's bundled npm is older.
-      - run: npm install -g npm@latest
+      # Trusted publishing needs npm >= 11.5.1 and the runner ships older.
+      # Pinned to the 11.x line rather than @latest: npm 12 requires Node
+      # >= 22.22, so `npm@latest` breaks the moment npm raises its engine
+      # floor above whatever Node this workflow pins — which is exactly how
+      # the first nebula-notebook publish failed.
+      - run: npm install -g npm@^11
 
       # Nothing new since the last nightly? Then there is nothing to publish —
       # quiet days should not mint versions. npm records the commit each

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

@@ -28,6 +28,12 @@ export type ClientInfo = {
   // Optional per-connection cap for the join snapshot (clamped to the
   // room-level bound). Monitors request ~64KB.
   replayBytes?: number;
+  // False = skip the equal-size attach "wiggle" (the −1/+1 column repaint
+  // nudge). Wall tiles decline it: they arrive already showing the current
+  // grid (the daemon's headless screen, complete — not a raw byte tail), so
+  // the nudge's two SIGWINCHes only produce a visible reflow of the running
+  // app at the exact moment the tile goes live — the "twitch".
+  nudge?: boolean;
 };
 
 export type RoomCreateOptions = {
@@ -371,6 +377,7 @@ export class Room extends EventEmitter {
     // anyway; when sizes are EQUAL nothing would repaint, so nudge: a one-
     // column wiggle (tmux's redraw trick) makes full-screen apps repaint.
     if (
+      info.nudge !== false &&
       client.cols === this.activeCols &&
       client.rows === this.activeRows &&
       this.activeCols > 4 &&

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

@@ -100,6 +100,27 @@ describe("Room", () => {
     expect(capturedOptions?.shell).toBe("/bin/zsh");
   });
 
+  it("an equal-size attach nudges a repaint unless the client declines", () => {
+    let ptyInstance: FakePty | null = null;
+    const factory: PtyFactory = () => {
+      ptyInstance = new FakePty() as unknown as FakePty;
+      return ptyInstance as any;
+    };
+    const manager = new RoomManager(factory);
+    const room = manager.getRoom("wiggle", { cols: 80, rows: 24 }, "/tmp");
+
+    // Default attach at the PTY's exact size: the −1 wiggle fires (the
+    // bounce-back half is on a timer; the first resize is the evidence).
+    room.attachClient({ id: "a", name: "Alex", colorIndex: 0, cols: 80, rows: 24 }, new FakeSocket());
+    expect(ptyInstance!.resizes.some((r: { cols: number }) => r.cols === 79)).toBe(true);
+
+    // A wall tile declines (nudge: false): it already shows the current
+    // grid, and the wiggle's SIGWINCH reflow is the click-twitch. No resize.
+    const before = ptyInstance!.resizes.length;
+    room.attachClient({ id: "b", name: "Tile", colorIndex: 1, cols: 80, rows: 24, nudge: false }, new FakeSocket());
+    expect(ptyInstance!.resizes.length).toBe(before);
+  });
+
   it("broadcasts pty output to all clients", () => {
     let ptyInstance: FakePty | null = null;
     const factory: PtyFactory = () => {

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

@@ -375,6 +375,9 @@ const App = () => {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loadingSessions, setLoadingSessions] = useState(false);
   const [sessionsError, setSessionsError] = useState(false);
+  // Server-owned folders (Manual mode). Kept in App because the sessions
+  // fetch already carries them.
+  const [folders, setFolders] = useState<Array<{ id: string; name: string }>>([]);
   // Attention plumbing: tab-title alert for a bell in the attached session
   // while the tab is hidden; inline editors for display name / rename / create.
   const [titleAlert, setTitleAlert] = useState(false);
@@ -1132,6 +1135,16 @@ const App = () => {
   // Rooms the user asked full history for: their next connect replays the
   // server maximum instead of the fast bounded snapshot.
   const deepReplayRoomsRef = useRef(new Set<string>());
+  // Guards for the automatic deep-history load. The buffer sits at viewport
+  // 0 during every attach write (the terminal is reset before the snapshot
+  // lands), so "y === 0" alone misfired the reload DURING attach on any
+  // session busy enough to have a capped snapshot — which then restored the
+  // viewport to old-top with follow-mode off: terminal parked above the
+  // bottom, new output invisible until a manual scroll. The trigger now
+  // requires a real gesture: a transition from scrolled-up to top, after the
+  // snapshot has settled.
+  const lastViewportYRef = useRef(0);
+  const snapshotSettledAtRef = useRef(0);
   const snapshotWasCappedRef = useRef(false);
   // Set while an automatic deep-history reload is in flight: carries the old
   // buffer length so the post-reload snapshot can restore the reading
@@ -1309,7 +1322,14 @@ const App = () => {
             && (termRef.current.cols !== cols || termRef.current.rows !== rows)) {
           try { termRef.current.resize(cols, rows); } catch { /* keep local size */ }
         }
-        termRef.current.write(screen.data, () => termRef.current?.refresh(0, (termRef.current?.rows ?? 1) - 1));
+        termRef.current.write(screen.data, () => {
+          const t = termRef.current;
+          if (!t) return;
+          // Pin to the newest line — the fast paint is a stand-in for the
+          // snapshot and must land where the snapshot would.
+          t.scrollToBottom();
+          t.refresh(0, t.rows - 1);
+        });
       })
       .catch(() => { /* fast paint is best-effort */ });
 
@@ -1454,13 +1474,21 @@ const App = () => {
               if (pendingRestore) {
                 // The user was reading at the top of the OLD buffer; that
                 // content now sits newLen - oldLen lines down. Land there,
-                // not at the bottom — the reload should be invisible.
+                // not at the bottom — the reload should be invisible. (This
+                // used to fall through to scrollToBottom anyway, yanking the
+                // view away from the spot it had just restored.)
                 const line = Math.max(0, t.buffer.active.length - pendingRestore.oldLen);
                 t.scrollToLine(line);
-                userScrolledUpRef.current = true;
+                userScrolledUpRef.current = line < Math.max(0, t.buffer.active.length - t.rows);
+              } else {
+                t.scrollToBottom();
+                userScrolledUpRef.current = false;
               }
-              t.scrollToBottom();
               t.refresh(0, t.rows - 1);
+              // The snapshot has fully landed: only from here on can a
+              // viewport-top event mean a user gesture.
+              lastViewportYRef.current = t.buffer.active.viewportY;
+              snapshotSettledAtRef.current = performance.now();
             });
           } else {
             writeToTerminal(message.data);
@@ -1735,6 +1763,15 @@ const App = () => {
 
     // Prevent browser from intercepting common terminal shortcuts
     terminal.attachCustomKeyEventHandler((event) => {
+      // ⌘⏎ leaves full screen for the wall — the mirror of ⌘⏎ on a wall
+      // tile entering it. One chord toggles the mode from either side.
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
+        if (event.type === 'keydown') {
+          event.preventDefault();
+          setSwitcherOpen(true);
+        }
+        return false;
+      }
       // Long-press SPACE = voice input (Claude sessions, when the browser has
       // SpeechRecognition). First press types its space with zero latency;
       // holding past the threshold erases it and dictates until release.
@@ -1865,12 +1902,14 @@ const App = () => {
     const onBufferScroll = () => {
       const { y, base } = scrollState();
       userScrolledUpRef.current = y < base;
-      // Hitting the very TOP of a bounded-replay buffer means the user wants
-      // more history than the fast snapshot carried — offer the full reload.
       // Top of a capped snapshot: the user wants more history than the fast
-      // snapshot carried. Load it AUTOMATICALLY — a "load full history"
-      // button was chrome for something the scroll gesture already said.
-      if (y === 0 && snapshotWasCappedRef.current) {
+      // snapshot carried — load it automatically. "The user wants" must mean
+      // a real gesture: arriving at 0 FROM above, on a settled snapshot.
+      const cameFromAbove = lastViewportYRef.current > 0;
+      const settled = snapshotSettledAtRef.current > 0
+        && performance.now() - snapshotSettledAtRef.current > 600;
+      lastViewportYRef.current = y;
+      if (y === 0 && cameFromAbove && settled && snapshotWasCappedRef.current) {
         const room = activeSessionRoomRef.current;
         if (room && !deepReplayRoomsRef.current.has(room)) {
           deepReplayRoomsRef.current.add(room);
@@ -2337,7 +2376,7 @@ const App = () => {
           const row = Math.floor(((tapStartY - rect.top) / rect.height) * term.rows);
           if (col >= 0 && col < term.cols && row >= 0 && row < term.rows) {
             const url = extractUrlAtCell(term.buffer.active.viewportY + row, col);
-            if (url) setLinkPrompt(url);
+            if (url) setLinkPrompt({ url, x: tapStartX, y: tapStartY });
           }
         }
       }
@@ -2512,6 +2551,32 @@ const App = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [switcherOpen]);
 
+  // THE RENDER INVARIANT, enforced continuously instead of per-transition.
+  // Three rounds of patching individual transitions (wall close, tab
+  // visibility, context loss, attach paths) each fixed the reproduced case
+  // and missed a sibling — the class kept coming back as "renders only
+  // after I scroll". Scrolling "fixed" it because a viewport move repaints
+  // everything; so enforce what scrolling incidentally provides:
+  //   while following, the newest line is on screen — and the screen is
+  //   repainted from the buffer every tick, no matter which code path
+  //   forgot to.
+  // A full refresh of ~50 rows at 0.7Hz is microseconds on the GPU renderer
+  // and cheap on the DOM one; correctness beats elegance here.
+  useEffect(() => {
+    if (!session) return;
+    const id = window.setInterval(() => {
+      if (document.hidden || switcherOpenRef.current) return;
+      const t = termRef.current;
+      if (!t) return;
+      try {
+        const buf = t.buffer.active;
+        if (!userScrolledUpRef.current && buf.viewportY < buf.baseY) t.scrollToBottom();
+        t.refresh(0, t.rows - 1);
+      } catch { /* disposed mid-tick */ }
+    }, 1400);
+    return () => window.clearInterval(id);
+  }, [session]);
+
   // Tab or window coming back to the foreground: same stale-frame risk as
   // the wall closing, from browser throttling rather than our own hiding.
   useEffect(() => {
@@ -2629,7 +2694,8 @@ const App = () => {
           tagline: typeof s.tagline === "string" ? s.tagline : undefined,
           parked: s.parked === true,
           archived: s.archived === true,
-          hasLocalCli: s.hasLocalCli === true
+          hasLocalCli: s.hasLocalCli === true,
+          folderId: typeof s.folderId === "string" ? s.folderId : null
         });
       }
 
@@ -2701,6 +2767,11 @@ const App = () => {
       // Drop a response superseded by a newer fetch started while this was
       // in flight (see the sequence-guard note above).
       if (seq !== fetchSeqRef.current) return;
+      setFolders(Array.isArray(data.folders)
+        ? data.folders
+            .filter((f: { id?: string; name?: string }) => f && f.id && f.name)
+            .map((f: { id: string; name: string }) => ({ id: String(f.id), name: String(f.name) }))
+        : []);
       setSessions(list);
       setSessionsError(false);
       sessionListLoadedRef.current = true;
@@ -3151,7 +3222,7 @@ const App = () => {
   // layer disables native pointer events on terminal text, and remote apps
   // can't open the phone's browser — claude login prints a URL that was
   // otherwise un-tappable.)
-  const [linkPrompt, setLinkPrompt] = useState<string | null>(null);
+  const [linkPrompt, setLinkPrompt] = useState<{ url: string; x: number; y: number } | null>(null);
   // Passkey nudge: biometric sign-in works but is invisible — the login page
   // only offers Touch ID / Face ID once a credential exists for this
   // hostname, so a user who never opened the settings drawer never learns it
@@ -3421,6 +3492,7 @@ const App = () => {
             sessions={sessions}
             currentRoom={null}
             dismissable={false}
+            folders={folders}
             onClose={() => {}}
             onSwitch={(next) => {
               window.location.href = buildSessionPath(next.displayName || next.name);
@@ -4075,6 +4147,7 @@ const App = () => {
             onNotice={showToast}
             tileWsBase={resolveWsUrl()}
             onFocusSession={focusSessionInPlace}
+            folders={folders}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
             onOpenSettings={() => {
@@ -4145,23 +4218,34 @@ const App = () => {
             </div>
           )}
           {linkPrompt && (
-            <div className="link-prompt" role="dialog" aria-label="Open link">
-              <span className="link-prompt-url">{linkPrompt}</span>
+            <div
+              className="context-menu link-menu"
+              role="menu"
+              aria-label="Open link"
+              style={{
+                left: Math.max(8, Math.min(linkPrompt.x, window.innerWidth - 268)),
+                top: Math.max(8, Math.min(linkPrompt.y + 10, window.innerHeight - 150))
+              }}
+            >
+              <span className="context-menu-title">{linkPrompt.url}</span>
               <button
                 type="button"
-                className="link-prompt-open"
+                role="menuitem"
+                className="context-menu-item"
                 onClick={() => {
-                  window.open(linkPrompt, "_blank", "noopener");
+                  window.open(linkPrompt.url, "_blank", "noopener");
                   setLinkPrompt(null);
                 }}
               >
-                Open
+                <span>Open link</span>
               </button>
               <button
                 type="button"
+                role="menuitem"
+                className="context-menu-item"
                 onClick={async () => {
                   try {
-                    await navigator.clipboard.writeText(linkPrompt);
+                    await navigator.clipboard.writeText(linkPrompt.url);
                     showToast("Link copied");
                   } catch {
                     showToast("Clipboard denied — long-press the URL text instead");
@@ -4169,9 +4253,18 @@ const App = () => {
                   setLinkPrompt(null);
                 }}
               >
-                Copy
+                <span>Copy link</span>
+              </button>
+              <div className="context-menu-separator" role="separator" />
+              <button
+                type="button"
+                role="menuitem"
+                className="context-menu-item"
+                onClick={() => setLinkPrompt(null)}
+              >
+                <span>Cancel</span>
+                <kbd>esc</kbd>
               </button>
-              <button type="button" aria-label="Dismiss" onClick={() => setLinkPrompt(null)}>✕</button>
             </div>
           )}
           {isMobile && (

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

@@ -0,0 +1,109 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+// One context menu for the whole app.
+//
+// Right-click is a shortcut to the actions a surface already has — it must
+// never be the ONLY way to reach something, and it must never invent a
+// different vocabulary from the buttons beside it. So this renders the same
+// items a surface's visible affordances expose, in the same order, with the
+// same words.
+//
+// Deliberately NOT applied to the terminal: there, right-click already means
+// something (paste on Linux/Windows, the native copy/paste menu everywhere),
+// and mouse-reporting apps — Claude, vim, less — receive button events the
+// moment tracking is on. Overriding it would either steal a click the app
+// asked for or replace a menu people rely on with a worse one.
+
+export type MenuItem =
+  | { kind?: "item"; label: string; onSelect: () => void; danger?: boolean; hint?: string; disabled?: boolean }
+  | { kind: "separator" };
+
+export type MenuRequest = { x: number; y: number; items: MenuItem[] } | null;
+
+const isItem = (i: MenuItem): i is Extract<MenuItem, { kind?: "item" }> => i.kind !== "separator";
+
+export const ContextMenu = ({ request, onClose }: { request: MenuRequest; onClose: () => void }) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
+  const [active, setActive] = useState(0);
+
+  // Clamp into the viewport BEFORE paint: a menu opened near an edge would
+  // otherwise flash off-screen and jump.
+  useLayoutEffect(() => {
+    if (!request) { setPos(null); return; }
+    const el = ref.current;
+    const w = el?.offsetWidth || 200;
+    const h = el?.offsetHeight || 200;
+    const pad = 8;
+    setPos({
+      left: Math.max(pad, Math.min(request.x, window.innerWidth - w - pad)),
+      top: Math.max(pad, Math.min(request.y, window.innerHeight - h - pad))
+    });
+    setActive(request.items.findIndex(isItem));
+  }, [request]);
+
+  useEffect(() => {
+    if (!request) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") { e.preventDefault(); onClose(); return; }
+      const idxs = request.items.map((it, i) => (isItem(it) && !it.disabled ? i : -1)).filter((i) => i >= 0);
+      if (idxs.length === 0) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const at = idxs.indexOf(active);
+        const next = e.key === "ArrowDown"
+          ? idxs[(at + 1 + idxs.length) % idxs.length]
+          : idxs[(at - 1 + idxs.length) % idxs.length];
+        setActive(next);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const item = request.items[active];
+        if (item && isItem(item) && !item.disabled) { onClose(); item.onSelect(); }
+      }
+    };
+    // Capture so a menu click never also reaches the surface underneath.
+    const onDown = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) onClose();
+    };
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener("mousedown", onDown, true);
+    window.addEventListener("resize", onClose);
+    window.addEventListener("blur", onClose);
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("mousedown", onDown, true);
+      window.removeEventListener("resize", onClose);
+      window.removeEventListener("blur", onClose);
+    };
+  }, [request, active, onClose]);
+
+  if (!request) return null;
+  return (
+    <div
+      ref={ref}
+      className="context-menu"
+      role="menu"
+      style={pos ? { left: pos.left, top: pos.top } : { left: -9999, top: -9999 }}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      {request.items.map((item, i) =>
+        isItem(item) ? (
+          <button
+            key={item.label + i}
+            type="button"
+            role="menuitem"
+            className={"context-menu-item" + (item.danger ? " danger" : "") + (i === active ? " active" : "")}
+            disabled={item.disabled}
+            onMouseEnter={() => setActive(i)}
+            onClick={() => { onClose(); item.onSelect(); }}
+          >
+            <span>{item.label}</span>
+            {item.hint && <kbd>{item.hint}</kbd>}
+          </button>
+        ) : (
+          <div key={"sep" + i} className="context-menu-separator" role="separator" />
+        )
+      )}
+    </div>
+  );
+};