hop2 0.11.5 → 0.11.7

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

@@ -497,17 +497,16 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       // tolerance, so no resize is ever asked for and the crop is permanent.
       // Translate so the LAST row is flush with the box bottom; overflow now
       // crops the oldest rows off the top, which is what scrollback is for.
-      // Transform the SCREEN, not `.xterm`. `.xterm` sets overflow:hidden on
-      // itself, so translating it slides an already-clipped window: the rows
-      // outside never appear no matter how far you pan (and a rect-based
-      // measurement is fooled, because getBoundingClientRect reports clipped
-      // geometry as if visible — which is how the first version of this
-      // "fixed" the bottom crop on paper while the pixels stayed hidden).
-      // Moving the screen inside that clip is what actually reveals rows.
+      // WHICH ELEMENT CLIPS, measured rather than assumed (both earlier
+      // attempts got this wrong). `.switcher-focus-term` is the clip: 450px
+      // tall with overflow:hidden. `.xterm` is NOT — it sizes to its content
+      // (475px for a 25-row grid), so its own overflow:hidden clips nothing,
+      // and measuring against it made the overflow compute as ZERO and the
+      // anchor a no-op. Measure the CLIP, move the terminal inside it.
       inner.style.transform = "";
-      screen.style.transformOrigin = "bottom left";
       screen.style.transform = "";
-      const boxRect = inner.getBoundingClientRect(); // .xterm IS the clip
+      inner.style.transformOrigin = "bottom left";
+      const boxRect = box.getBoundingClientRect(); // the clip
       const screenRect = screen.getBoundingClientRect(); // reads after the reset above
       const overflowX = Math.max(0, Math.round(screenRect.width - boxRect.width));
       const overflowY = Math.max(0, Math.round(screenRect.height - boxRect.height));
@@ -519,7 +518,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       const px = pan ? Math.max(-overflowX, Math.min(0, pan.x)) : 0;
       const py = pan ? Math.max(autoY, Math.min(0, pan.y)) : autoY;
       if (pan) panRef.current = { x: px, y: py };
-      if (px !== 0 || py !== 0) screen.style.transform = `translate(${px}px, ${py}px)`;
+      if (px !== 0 || py !== 0) inner.style.transform = `translate(${px}px, ${py}px)`;
       // Only publish on CHANGE: rescale runs from a ResizeObserver, and
       // setting a fresh object every pass would re-render (and re-observe)
       // in a loop.
@@ -589,9 +588,8 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     let panning: { sx: number; sy: number; ox: number; oy: number } | null = null;
     const panBounds = () => {
       const screen = box.querySelector(".xterm-screen") as HTMLElement | null;
-      const clip = box.querySelector(".xterm") as HTMLElement | null;
-      if (!screen || !clip) return null;
-      const boxRect = clip.getBoundingClientRect(); // same clip rescale uses
+      if (!screen) return null;
+      const boxRect = box.getBoundingClientRect(); // same clip rescale uses
       const scrRect = screen.getBoundingClientRect();
       return {
         overflowX: Math.max(0, scrRect.width - boxRect.width),
@@ -1094,7 +1092,20 @@ export const SessionSwitcher = ({
   onToggleKeyboard,
   onFind
 }: Props) => {
-  const [filter, setFilter] = useState("");
+  // View state survives a REFRESH but not a new tab: sessionStorage, not
+  // localStorage. Reloading the page (or hop reconnecting) used to dump the
+  // filter you had typed, the tile you had focused, and where you were
+  // scrolled — none of which is shareable state that belongs in the URL,
+  // and all of which you expect to still be there afterwards.
+  const [filter, setFilter] = useState(() => {
+    try { return sessionStorage.getItem("hay_switcher_filter") || ""; } catch { return ""; }
+  });
+  useEffect(() => {
+    try {
+      if (filter) sessionStorage.setItem("hay_switcher_filter", filter);
+      else sessionStorage.removeItem("hay_switcher_filter");
+    } catch { /* private mode */ }
+  }, [filter]);
   const [originScope, setOriginScope] = useState<SessionOriginScope>("user");
   // Tile zoom: bigger tiles show more of each terminal preview.
   const [zoom, setZoom] = useState(() => {
@@ -1109,6 +1120,37 @@ export const SessionSwitcher = ({
   // Grid content width, kept fresh across viewport/panel resizes — it decides
   // how far the zoom ladder is climbable on THIS screen.
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  // Where you were scrolled on the wall, restored once the cards exist.
+  const scrollRestoredRef = useRef(false);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      try { sessionStorage.setItem("hay_switcher_scroll", String(el.scrollTop)); } catch { /* private mode */ }
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [open]);
+  useEffect(() => {
+    if (!open || scrollRestoredRef.current) return;
+    let saved = 0;
+    try { saved = Number(sessionStorage.getItem("hay_switcher_scroll") || 0); } catch { /* private mode */ }
+    if (!saved) { scrollRestoredRef.current = true; return; }
+    // Cards mount over a couple of frames; retry briefly until the wall is
+    // tall enough for the offset to mean anything.
+    let tries = 0;
+    const tick = () => {
+      const el = scrollRef.current;
+      if (!el) return;
+      if (el.scrollHeight > el.clientHeight + saved || tries++ > 20) {
+        el.scrollTop = saved;
+        scrollRestoredRef.current = true;
+        return;
+      }
+      requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  }, [open]);
   const [gridWidth, setGridWidth] = useState(0);
   useEffect(() => {
     if (!open) return;
@@ -1351,7 +1393,15 @@ export const SessionSwitcher = ({
   const [sheet, setSheet] = useState<Sheet | null>(null);
   // The wall's single interactive tile. Cleared on close / zooming below the
   // interactive threshold.
-  const [focusedKey, setFocusedKey] = useState<string | null>(null);
+  const [focusedKey, setFocusedKey] = useState<string | null>(() => {
+    try { return sessionStorage.getItem("hay_switcher_focus"); } catch { return null; }
+  });
+  useEffect(() => {
+    try {
+      if (focusedKey) sessionStorage.setItem("hay_switcher_focus", focusedKey);
+      else sessionStorage.removeItem("hay_switcher_focus");
+    } catch { /* private mode */ }
+  }, [focusedKey]);
   useEffect(() => { if (!open) setFocusedKey(null); }, [open]);
   useEffect(() => { if (!interactiveTiles) setFocusedKey(null); }, [interactiveTiles]);
   const [renameDraft, setRenameDraft] = useState("");
@@ -1599,14 +1649,30 @@ export const SessionSwitcher = ({
 
   // Every visit starts on user-owned sessions. Agent sessions stay one toggle
   // away without competing for the default view.
+  const restoredFilterRef = useRef<string>((() => {
+    try { return sessionStorage.getItem("hay_switcher_filter") || ""; } catch { return ""; }
+  })());
+  const openedOnceRef = useRef(false);
   useLayoutEffect(() => {
-    if (open) {
-      setOriginScope("user");
-      setFilter("");
-      setSheet(null);
-      setCreating(false);
-      setCreateDraft("");
+    if (!open) return;
+    // OPENING the wall resets it — but a page that LOADS with the wall
+    // already up is not an open, it is a refresh, and it must keep the
+    // filter/focus/scroll it restored. Without this the reset ran on mount
+    // and wiped the restore a frame after it happened.
+    if (!openedOnceRef.current) {
+      openedOnceRef.current = true;
+      if (restoredFilterRef.current) {
+        setSheet(null);
+        setCreating(false);
+        setCreateDraft("");
+        return;
+      }
     }
+    setOriginScope("user");
+    setFilter("");
+    setSheet(null);
+    setCreating(false);
+    setCreateDraft("");
   }, [open]);
 
 
@@ -2142,6 +2208,31 @@ export const SessionSwitcher = ({
       });
       const data = await res.json().catch(() => ({} as { name?: string; error?: string }));
       if (!res.ok || !data.name) {
+        // A name collision is the common failure, and "already in use" alone
+        // leaves the user hunting: the holder may be filed in another folder,
+        // or be an agent-created session they never opened. Name it, say
+        // where it lives, and put it on screen — the answer to "it doesn't
+        // work" should be the session that was in the way.
+        const taken = res.status === 409
+          ? wallSessions.find((s) => (s.displayName || s.name).toLowerCase() === next.toLowerCase())
+          : null;
+        if (taken) {
+          const home = folders.find((f) => f.id === taken.folderId);
+          onNotice(`"${taken.displayName || taken.name}" already exists${home ? ` in ${home.name}` : ""} — showing it`);
+          setCreating(false);
+          setCreateDraft("");
+          setCreateInFolder(null);
+          const key = sessionKey(taken);
+          setFocusedKey(key);
+          const idx = navIndexByKey.get(key);
+          if (typeof idx === "number") {
+            setKbdIndex(idx);
+            requestAnimationFrame(() => {
+              document.querySelector(`[data-nav-index="${idx}"]`)?.scrollIntoView({ block: "center" });
+            });
+          }
+          return;
+        }
         onNotice(data.error || "Failed to create session");
         return;
       }

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

@@ -32,6 +32,10 @@ const props = {
 };
 
 beforeEach(() => {
+  // The wall persists filter/focus/scroll in sessionStorage so a REFRESH
+  // keeps your view. Tests share one jsdom, so a filter typed in one case
+  // would restore into the next and silently empty the wall.
+  sessionStorage.clear();
   const values = new Map<string, string>();
   vi.stubGlobal("localStorage", {
     getItem: (key: string) => values.get(key) ?? null,