hop2 0.11.12 → 0.11.13

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

@@ -24,6 +24,11 @@ export type ClientInfo = {
   // switcher wall): excluded from presence and client counts, and given a
   // small snapshot so a wall of tiles doesn't pull megabytes per open.
   source?: string;
+  // Stable per-browser-tab identity (device id + tab id). A tab holds one
+  // live connection per room, so a new attach bearing the same key means the
+  // previous connection is dead even if its socket never closed — it is
+  // evicted on the spot instead of haunting presence until TCP notices.
+  deviceKey?: string;
   colorIndex: number;
   cols: number;
   rows: number;
@@ -182,6 +187,7 @@ class ClientState {
   lastActive = now();
   socket: SocketAdapter;
   source: string;
+  deviceKey: string;
   // Declared fit: the size this client's viewport wants, updated by every
   // resize message whether or not it applied. Becomes the PTY size the
   // moment a keystroke makes this client the size owner.
@@ -192,6 +198,7 @@ class ClientState {
     this.id = info.id;
     this.name = info.name;
     this.source = info.source || "";
+    this.deviceKey = info.deviceKey || "";
     this.color = pickPresenceColor(info.colorIndex);
     this.socket = socket;
     this.cols = info.cols;
@@ -361,6 +368,19 @@ export class Room extends EventEmitter {
       this.cleanupTimer = null;
     }
 
+    // Same tab, same room: the newcomer replaces its predecessor. A phone
+    // that dropped off the network never sends a close, so its old
+    // connection would otherwise sit in presence as a second "iPhone"
+    // until TCP gives up on the corpse.
+    if (info.deviceKey) {
+      for (const [id, peer] of [...this.clients]) {
+        if (peer.deviceKey === info.deviceKey && peer.source !== "monitor") {
+          try { peer.socket.close(); } catch { /* already dead */ }
+          this.removeClient(id);
+        }
+      }
+    }
+
     const client = new ClientState(info, socket);
     this.clients.set(client.id, client);
     const created = !this.hasHadClient;

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

@@ -1004,3 +1004,57 @@ describe("Room", () => {
     });
   });
 });
+
+describe("device-key eviction", () => {
+  // The room actively closes the predecessor's socket; a plain FakeSocket
+  // close is indistinguishable from a client-side close, so count them.
+  class TrackingSocket extends FakeSocket {
+    serverCloses = 0;
+    close() {
+      this.serverCloses += 1;
+      super.close();
+    }
+  }
+
+  const makeRoom = (name: string) => {
+    const manager = new RoomManager(() => new FakePty() as any);
+    return manager.getRoom(name, { cols: 80, rows: 24 }, "/tmp");
+  };
+
+  it("a same-key attach replaces the predecessor instead of joining it", () => {
+    const room = makeRoom("evict");
+    const ghost = new TrackingSocket();
+    const fresh = new FakeSocket();
+    room.attachClient({ id: "a", name: "iPhone", colorIndex: 0, cols: 80, rows: 24, deviceKey: "dev1.tab1" }, ghost);
+    room.attachClient({ id: "b", name: "iPhone", colorIndex: 1, cols: 80, rows: 24, deviceKey: "dev1.tab1" }, fresh);
+
+    expect(ghost.serverCloses).toBe(1);
+    const presence = findMessages(fresh, "presence").at(-1) as any;
+    expect(presence.clients.map((c: { id: string }) => c.id)).toEqual(["b"]);
+  });
+
+  it("different tabs from the same device coexist", () => {
+    const room = makeRoom("tabs");
+    const tabA = new TrackingSocket();
+    const tabB = new FakeSocket();
+    room.attachClient({ id: "a", name: "iPhone", colorIndex: 0, cols: 80, rows: 24, deviceKey: "dev1.tab1" }, tabA);
+    room.attachClient({ id: "b", name: "iPhone", colorIndex: 1, cols: 80, rows: 24, deviceKey: "dev1.tab2" }, tabB);
+
+    expect(tabA.serverCloses).toBe(0);
+    const presence = findMessages(tabB, "presence").at(-1) as any;
+    expect(presence.clients.map((c: { id: string }) => c.id).sort()).toEqual(["a", "b"]);
+  });
+
+  it("keyless clients (CLI, older bundles) are never evicted", () => {
+    const room = makeRoom("legacy");
+    const legacy = new TrackingSocket();
+    const keyed = new FakeSocket();
+    room.attachClient({ id: "a", name: "cli", colorIndex: 0, cols: 80, rows: 24 }, legacy);
+    room.attachClient({ id: "b", name: "iPhone", colorIndex: 1, cols: 80, rows: 24, deviceKey: "dev1.tab1" }, keyed);
+    room.attachClient({ id: "c", name: "iPhone", colorIndex: 2, cols: 80, rows: 24, deviceKey: "dev1.tab1" }, new FakeSocket());
+
+    expect(legacy.serverCloses).toBe(0);
+    const presence = findMessages(legacy, "presence").at(-1) as any;
+    expect(presence.clients.map((c: { id: string }) => c.id).sort()).toEqual(["a", "c"]);
+  });
+});

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

@@ -279,6 +279,30 @@ const resolveInitialName = () => {
   return fromParams ?? stored ?? (injected && injected !== "Guest" ? injected : null) ?? "User";
 };
 
+// Stable connection identity: device half persists per browser, tab half per
+// tab. The server evicts a previous connection bearing the same key on
+// attach — a reconnect replaces its own ghost in presence instead of sitting
+// next to it — while two real tabs (different tab halves) coexist.
+const randomKeyPart = () =>
+  (window.crypto?.randomUUID?.() || Math.random().toString(36).slice(2)).replace(/-/g, "").slice(0, 10);
+const resolveDeviceKey = () => {
+  try {
+    let device = localStorage.getItem("hop_device_id");
+    if (!device) {
+      device = randomKeyPart();
+      localStorage.setItem("hop_device_id", device);
+    }
+    let tab = sessionStorage.getItem("hop_tab_id");
+    if (!tab) {
+      tab = randomKeyPart();
+      sessionStorage.setItem("hop_tab_id", tab);
+    }
+    return `${device}.${tab}`;
+  } catch {
+    return ""; // storage unavailable (private mode quota) — no eviction key
+  }
+};
+
 // Per-session "seen" markers, shared with the session manager page via
 // localStorage (same origin). Keyed by internal session name; values are the
 // server's own lastActivityAt/bellSeq so no cross-device clock comparison
@@ -1464,7 +1488,7 @@ const App = () => {
     const hex = (c?: string) => (c || "").replace("#", "").slice(0, 6);
     const url = `${wsUrl}?room=${encodeURIComponent(nextSession.room)}&name=${encodeURIComponent(
       nextSession.name
-    )}&cols=${cols}&rows=${rows}&replay=${replay}&bg=${hex(surface.background)}&fg=${hex(surface.foreground)}`;
+    )}&cols=${cols}&rows=${rows}&replay=${replay}&bg=${hex(surface.background)}&fg=${hex(surface.foreground)}&device=${encodeURIComponent(resolveDeviceKey())}`;
 
     wsRef.current?.close();
     setStatus("connecting");

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

@@ -1651,6 +1651,10 @@ export const SessionSwitcher = ({
     if (!deepSearch || deepSearch.status !== "done" || deepSearch.q !== filter.trim()) return [];
     const seen = new Set<string>();
     if (model.mode === "filter") model.rows.forEach((r) => seen.add(sessionKey(r)));
+    else if (model.mode === "manual") {
+      model.rows.forEach((r) => seen.add(sessionKey(r)));
+      model.folders.forEach((f) => f.rows.forEach((r) => seen.add(sessionKey(r))));
+    }
     extraContentMatches.forEach((m) => seen.add(sessionKey(m.session)));
     const out: Array<{ session: SwitcherSession; snippet: string }> = [];
     for (const m of deepSearch.rows) {
@@ -1669,7 +1673,7 @@ export const SessionSwitcher = ({
       if (model.mode === "filter") return [...model.rows, ...extraContentMatches.map((m) => m.session), ...extraDeepMatches.map((m) => m.session)];
       // Folder rows come first because that is their visual order; keyboard
       // ↑/↓ and Enter must traverse what the eye sees, foldered included.
-      if (model.mode === "manual") return [...model.folders.flatMap((f) => f.rows), ...model.rows, ...extraContentMatches.map((m) => m.session)];
+      if (model.mode === "manual") return [...model.folders.flatMap((f) => f.rows), ...model.rows, ...extraContentMatches.map((m) => m.session), ...extraDeepMatches.map((m) => m.session)];
       if (model.mode === "project") return model.groups.flatMap((g) => g.rows);
       return [...model.hero, ...model.groups.flatMap((g) => g.rows)];
     },
@@ -2579,6 +2583,50 @@ export const SessionSwitcher = ({
   const sheetSession = sheet?.session;
   const sheetAgentPermitted = sheetSession?.agentPermitted === true;
 
+  // Content/history hits plus the full-history row, rendered below whatever
+  // the mode showed. Manual mode keeps its own branch under a query (filtering
+  // narrows the user's order in place), so this tail must ride along there
+  // too — search reaches past the name tier in every mode, not just Recent.
+  const searchTail = filter.trim() ? (
+    <>
+      {extraContentMatches.length > 0 && (
+        <section className="switcher-group">
+          <h3 className="switcher-group-label">found in terminal output{contentTruncated ? " · most recent sessions only" : ""}</h3>
+          <div className="switcher-grid">
+            {extraContentMatches.map(({ session: s, snippet }) => renderCard(s, snippet))}
+          </div>
+        </section>
+      )}
+      {extraDeepMatches.length > 0 && (
+        <section className="switcher-group">
+          <h3 className="switcher-group-label">found in full history</h3>
+          <div className="switcher-grid">
+            {extraDeepMatches.map(({ session: s, snippet }) => renderCard(s, snippet))}
+          </div>
+        </section>
+      )}
+      {filter.trim().length >= 3 && (
+        <div className="switcher-deep-row">
+          {!deepSearch ? (
+            <button type="button" className="switcher-deep-btn" onClick={runDeepSearch}>
+              Search full history for “{filter.trim()}”
+            </button>
+          ) : deepSearch.status === "loading" ? (
+            <span className="switcher-deep-note">searching full history…</span>
+          ) : deepSearch.status === "unavailable" ? (
+            <span className="switcher-deep-note">full-history search unavailable on this host</span>
+          ) : (
+            <span className="switcher-deep-note">
+              {extraDeepMatches.length > 0
+                ? `${extraDeepMatches.length} more in full history`
+                : "nothing further back matches"}
+            </span>
+          )}
+        </div>
+      )}
+    </>
+  ) : null;
+
   return (
     <div
       // tile-dense: too narrow for inline actions. tile-micro: too short for
@@ -2766,46 +2814,12 @@ export const SessionSwitcher = ({
           // cards at the current zoom, same as the wall — the screen content
           // is usually WHY you're looking for the session.
           <>
-            {model.rows.length === 0 && extraContentMatches.length === 0 ? (
+            {model.rows.length === 0 && extraContentMatches.length === 0 && extraDeepMatches.length === 0 ? (
               <div className="switcher-empty">No sessions match “{filter.trim()}”</div>
             ) : (
               <div className="switcher-grid">{model.rows.map((s) => renderCard(s))}</div>
             )}
-            {extraContentMatches.length > 0 && (
-              <section className="switcher-group">
-                <h3 className="switcher-group-label">found in terminal output{contentTruncated ? " · most recent sessions only" : ""}</h3>
-                <div className="switcher-grid">
-                  {extraContentMatches.map(({ session: s, snippet }) => renderCard(s, snippet))}
-                </div>
-              </section>
-            )}
-            {extraDeepMatches.length > 0 && (
-              <section className="switcher-group">
-                <h3 className="switcher-group-label">found in full history</h3>
-                <div className="switcher-grid">
-                  {extraDeepMatches.map(({ session: s, snippet }) => renderCard(s, snippet))}
-                </div>
-              </section>
-            )}
-            {filter.trim().length >= 3 && (
-              <div className="switcher-deep-row">
-                {!deepSearch ? (
-                  <button type="button" className="switcher-deep-btn" onClick={runDeepSearch}>
-                    Search full history for “{filter.trim()}”
-                  </button>
-                ) : deepSearch.status === "loading" ? (
-                  <span className="switcher-deep-note">searching full history…</span>
-                ) : deepSearch.status === "unavailable" ? (
-                  <span className="switcher-deep-note">full-history search unavailable on this host</span>
-                ) : (
-                  <span className="switcher-deep-note">
-                    {extraDeepMatches.length > 0
-                      ? `${extraDeepMatches.length} more in full history`
-                      : "nothing further back matches"}
-                  </span>
-                )}
-              </div>
-            )}
+            {searchTail}
           </>
         ) : model.mode === "project" ? (
           <>
@@ -2831,7 +2845,9 @@ export const SessionSwitcher = ({
         ) : model.mode === "manual" ? (
           <>
             {model.rows.length === 0 && model.folders.every((f) => f.rows.length === 0) ? (
-              <div className="switcher-empty">{filter.trim() ? "No matches" : "No sessions"}</div>
+              extraContentMatches.length === 0 && extraDeepMatches.length === 0 && (
+                <div className="switcher-empty">{filter.trim() ? "No matches" : "No sessions"}</div>
+              )
             ) : (
               <>
                 <p className="switcher-hint">
@@ -2908,6 +2924,7 @@ export const SessionSwitcher = ({
                 <div className="switcher-grid">{model.rows.map((s) => renderCard(s))}</div>
               </>
             )}
+            {searchTail}
           </>
         ) : (
           <>

package/hay/apps/web/test/SessionSwitcher.test.tsx

@@ -325,4 +325,16 @@ describe("manual folders in the wall", () => {
     expect(screen.getByText("inside")).toBeTruthy();
     expect(screen.getByText("Filed")).toBeTruthy();
   });
+
+  it("a query in manual mode still offers the full-history search", () => {
+    // Manual keeps its own render branch under a query (narrow-in-place), so
+    // the search tail — content hits + the deep button — must ride along or
+    // manual-mode users never see anything past the name tier.
+    render(<SessionSwitcher {...props} sessions={withFolder} folders={folders} open />);
+    fireEvent.click(screen.getByRole("button", { name: "Manual" }));
+    const input = document.querySelector(".switcher-top input") as HTMLInputElement
+      || document.querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "outsid" } });
+    expect(screen.getByRole("button", { name: /Search full history for/ })).toBeTruthy();
+  });
 });