hop2 0.11.58 → 0.11.60

package/demo/capture/capture.mjs

@@ -34,7 +34,7 @@ import { getHopState, sleep } from "../hop-demo-lib.mjs";
 import { chromium, devices } from "../../hay/node_modules/playwright/index.mjs";
 import { NATIVE_CSS_INIT } from "./native-css.mjs";
 import {
-  CHROME, FFMPEG, OUT, VID_TMP, ALLOWED, SCREEN_FORBIDDEN, TERMINALS_PATH, REPORT_HTML, REPO_ROOT, WIPE, loadTerminals
+  CHROME, FFMPEG, OUT, VID_TMP, ALLOWED, SCREEN_FORBIDDEN, TERMINALS_PATH, REPORT_HTML, REPO_ROOT, WIPE, castName, loadTerminals
 } from "./capture-env.mjs";
 
 const state = getHopState();
@@ -979,6 +979,76 @@ try {
     await sleep(3200);
     await saveVideo(page, "16-drop", trimFor(t0, marker));
 
+  } else if (clip === "08-math-hover") {
+    // LaTeX in the output renders on hover: the pointer rests on a formula,
+    // the KaTeX tooltip appears, a click pins it, the pointer moves on to a
+    // second formula. Full screen, on Lyra, from a wiped prompt.
+    //
+    // Size discipline: typing through the API makes the API client the size
+    // owner, at ITS size — the page would then follow that grid scaled, and
+    // xterm maps the mouse through unscaled cell metrics, so a hover misses.
+    // So the page claims first (a click), the API client is resized to the
+    // page's grid, and only then does the API type: the PTY never changes
+    // size again and the page renders 1:1.
+    const lyra = requireTerminalId(castName("Lyra"));
+    const key = terminals[castName("Lyra")]?.sessionName || castName("Lyra");
+    const authH = { Authorization: `Bearer ${state.sessionSecret}` };
+    const grid = async () => {
+      const sc = await (await fetch(`${state.localUrl}/api/sessions/screen?name=${encodeURIComponent(key)}`, { headers: authH })).json();
+      return sc;
+    };
+    const { page, t0 } = await newRecordedPage(browser, {
+      css: "try{localStorage.removeItem('hay_pane_tree');localStorage.setItem('hay_view_mode','fit');localStorage.setItem('hay_theme','dark');}catch(e){}"
+    });
+    await gotoSession(page, castName("Lyra"));
+    await sleep(2200);
+    await page.mouse.click(960, 700);           // the page takes the size
+    await sleep(1500);
+    const g0 = await grid();
+    await apiResize(lyra, g0.cols, g0.rows);   // the API client agrees with it
+    await sleep(600);
+    await apiWrite(lyra, WIPE + "; clear\r");
+    await sleep(1200);
+    await assertDark(page, "08-math-hover");
+    const marker = Date.now();
+    await sleep(900);
+    const line = "printf '%s\\n' 'Closed form: $x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$ and the series \\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6} converge.'";
+    await typeSlow(lyra, line, 22);
+    await sleep(300); await apiWrite(lyra, "\r");
+    await sleep(1400);
+    const strip = (t) => (t || "").replace(/\x1b\[[0-9;?]*[A-Za-z]|\x1b\][^\x07]*\x07|\x1bc|\r/g, "");
+    let sc = null, rows = [], row = -1, col = -1, col2 = -1;
+    for (let attempt = 0; attempt < 16 && row < 0; attempt++) {
+      sc = await grid();
+      rows = strip(sc.data || "").split("\n");
+      for (let i = 0; i < rows.length; i++) {
+        const c = rows[i].indexOf("\\frac");
+        if (c >= 0 && !/printf/.test(rows[i])) { row = i; col = c + 2; col2 = rows[i].indexOf("\\sum") + 2; break; }
+      }
+      if (row < 0) await sleep(500);
+    }
+    if (row < 0) throw new Error("ABORT 08: formula not on screen — rows: " + JSON.stringify(rows.filter((r) => r.trim()).slice(0, 4)));
+    const g = await page.evaluate(() => { const s = document.querySelector(".xterm-screen").getBoundingClientRect(); return { left: s.left, top: s.top, w: s.width, h: s.height }; });
+    const cw = g.w / sc.cols, ch = g.h / sc.rows;
+    const x1 = g.left + (col + 0.5) * cw, x2 = g.left + (col2 + 0.5) * cw, y = g.top + (row + 0.5) * ch;
+    console.error(`08: grid ${sc.cols}x${sc.rows} screen ${g.w.toFixed(0)}x${g.h.toFixed(0)} → row ${row} at y ${y.toFixed(0)}, cols ${col}/${col2}`);
+    await page.mouse.move(x1 - 120, y + 60, { steps: 10 });
+    await sleep(500);
+    await page.mouse.move(x1, y, { steps: 18 });   // the tooltip appears
+    await sleep(900);
+    console.error("08: tooltip visible:", await page.evaluate(() => { const t = document.querySelector(".math-tip"); return !!t && !t.hidden; }));
+    await page.screenshot({ path: path.join(VID_TMP, "08-hover-check.png") });
+    await sleep(1700);
+    await page.mouse.down(); await page.mouse.up();  // pin it
+    await sleep(1800);
+    await page.keyboard.press("Escape");
+    await sleep(400);
+    await page.mouse.move(x2, y, { steps: 24 });     // the second formula
+    await sleep(2800);
+    await page.mouse.move(x2, y + 200, { steps: 12 });
+    await sleep(1200);
+    await saveVideo(page, "08-math-hover", trimFor(t0, marker));
+
   } else if (clip === "debug-sheet") {
     // Diagnostic: open Aurora's card menu on the wall, keep a frame, list
     // every visible control. No recording kept.

package/demo/product-video-v3.md

@@ -1,4 +1,13 @@
-# Product video v3 — what shipped since August
+# Product video v3 — footage for the Remotion master
+
+**The production video lives in `~/Code/hop-video`** (a Remotion project: the
+July master `out/hop_master_v2*.mp4`, storyboard in `STORYBOARD.md`). This
+directory is the *capture rig* that films the footage it uses. The
+`assemble-video.mjs` cut described below is a rough stitch for review, not
+the product video — the v3 master is rendered from Remotion
+(`npm run render:v3 && npm run mix:v3` there) with the clips listed here
+copied into `footage/live/`.
+
 
 The v2 cut (August) opened on the wall and closed on the phone illustration.
 Since then the product grew four stories worth filming — a three-choice
@@ -44,7 +53,7 @@ card appears on the wall while codex starts reading the transcript. The
 illustration that follows explains what just happened (fork vs hand-off,
 filed beside its source), the way `hero-overview.svg` explains the runtime.
 
-## Producing it
+## Producing it (the rough stitch — for review only)
 
 ```bash
 export PATH=/opt/homebrew/bin:$PATH

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

@@ -44,7 +44,7 @@ import {
   type PaneNode,
   type Side
 } from "./utils/paneTree";
-import { ViewsPanel, ViewsPull, hasUnseenViews, loadViewsSeen } from "./components/ViewsPanel";
+import { ViewsPanel, hasUnseenViews, loadViewsSeen } from "./components/ViewsPanel";
 import type { ViewsSummary } from "./utils/switcherModel";
 
 const createRoomId = () => `room-${Math.random().toString(36).slice(2, 7)}`;
@@ -4069,7 +4069,6 @@ const App = () => {
     const seen = loadViewsSeen();
     return sessions.filter((s) => hasUnseenViews(s.internalName || s.name, s.views?.latestAt, seen)).length;
   }, [sessions, viewsOpen]);
-  const totalViews = useMemo(() => sessions.reduce((n, s) => n + (s.views?.count || 0), 0), [sessions]);
 
   const sessionStyle = isMobile
     ? ({ "--mobile-keyboard-height": `${keyboardVisible ? keyboardHeight : 0}px` } as CSSProperties)
@@ -4159,9 +4158,21 @@ const App = () => {
               onClick={() => setViewsOpen({ session: session.room, dock: true })}
             >
               Views
-              {unseenViewSessions > 0
-                ? <span className="views-entry-count fresh" aria-label={`New views in ${unseenViewSessions} session${unseenViewSessions === 1 ? "" : "s"}`}>{unseenViewSessions} new</span>
-                : totalViews > 0 ? <span className="views-entry-count">{totalViews}</span> : null}
+              {(() => {
+                // This session's own results — the entry is per session, as
+                // the panel it opens is. Fresh when it published since you
+                // last looked; otherwise how many it has.
+                // session.room is whatever the URL carried — the display
+                // name on a directly-loaded page, the internal one after a
+                // switch — so match either, like the panel does.
+                const lc = session.room.toLowerCase();
+                const mine = sessions.find((x) => (x.internalName || "").toLowerCase() === lc
+                  || (x.name || "").toLowerCase() === lc || (x.displayName || "").toLowerCase() === lc);
+                const n = mine?.views?.count || 0;
+                const fresh = !!mine && n > 0 && hasUnseenViews(mine.internalName || mine.name, mine.views?.latestAt, loadViewsSeen());
+                return fresh ? <span className="views-entry-count fresh" aria-label="New views">{n} new</span>
+                  : n > 0 ? <span className="views-entry-count">{n}</span> : null;
+              })()}
             </button>
             <button
               type="button"
@@ -4998,14 +5009,6 @@ const App = () => {
           {toast && <div className="terminal-toast" role="status" aria-live="polite">{toast}</div>}
         </main>
       )}
-      {/* The drawer pull on the right edge: the front door to Views on every
-          desktop surface — the wall, the hub and a full-screen session — and
-          the one place a new result announces itself in large type. Scoped to
-          the session you are in; fleet-wide from the wall and the hub. */}
-      {!isMobile && !viewsOpen && (!!session || isEmbeddedInHop()) && (
-        <ViewsPull count={totalViews} fresh={unseenViewSessions}
-                   onOpen={() => setViewsOpen(switcherOpen || !session ? { dock: true } : { session: session.room, dock: true })} />
-      )}
       {/* Outside the mode ternary on purpose: Views opens from the hub, from a
           session, and from over the switcher, and it must outlive a switch. */}
       {viewsOpen && (

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

@@ -2954,7 +2954,7 @@ export const SessionSwitcher = ({
               onClick={(e) => { e.stopPropagation(); onOpenViews(key); }}
               onPointerDown={(e) => e.stopPropagation()}
             >
-              ◧ {s.views.count}
+              ◧ <span className="views-word">Views · </span>{s.views.count}
             </button>
           )}
           {waitingOnUser(preview) && (

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

@@ -7,19 +7,19 @@ import { relativeTime } from "../utils/switcherModel";
 // this client was to catch the printed URL before it scrolled out of the
 // viewport.
 //
-// ONE SHAPE: a reader. Opening Views lands you IN the newest result (the
-// scoped session's, or the fleet's), with ‹ › to step through the rest and
-// an index you can pull open beside or over the page. There is no separate
-// "list mode" to click through first — the list was a detour on the way to
-// the thing you came to read.
+// ONE SHAPE: a reader with its index beside it. Opening Views lands you IN
+// the newest result (the scoped session's, or the fleet's), the list of
+// everything published on the left, ‹ › to step through it. Both in one
+// window, like a mail client — there is no separate "list mode" to click
+// through first.
 //
 // Two placements of that one shape:
 //
 // - DOCK (the default on a desk-sized window): a right-side drawer with NO
 //   backdrop, so the wall or the terminal beside it stays visible, live and
 //   INTERACTIVE — you read the plot while the session that produced it keeps
-//   streaming, and you can still type. Opened from the ◧ Views pull on the
-//   right edge, the topbar, a card's ◧ chip, or ⌘⇧V.
+//   streaming, and you can still type. Per session: opened from the session's
+//   own Views button, a card's ◧ chip, or ⌘⇧V.
 // - MODAL (windows too narrow for a drawer): the same reader, centred, with
 //   the index beside the page.
 //
@@ -168,11 +168,11 @@ const previewSrc = (item: ViewItem) =>
     : hrefFor(item);
 
 const RAIL_KEY = "hop_views_rail";
-// Wide enough to read a report AND keep the index beside it; still leaves a
-// usable terminal on a 1440 display. The drag handle remembers a choice.
-const DEFAULT_DOCK_W = 620;
+// Wide enough for the index beside a readable page; on a 1440 display that
+// still leaves 680px of terminal. The drag handle remembers a choice.
+const DEFAULT_DOCK_W = 760;
 const clampDockW = (w: number) =>
-  Math.max(380, Math.min(Math.round(window.innerWidth * 0.7), w));
+  Math.max(560, Math.min(Math.round(window.innerWidth * 0.75), w));
 
 export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Props) => {
   const [items, setItems] = useState<ViewItem[] | null>(null);
@@ -199,16 +199,13 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     return clampDockW(Number.isFinite(stored) && stored > 0 ? stored : DEFAULT_DOCK_W);
   });
   const panelRef = useRef<HTMLDivElement | null>(null);
-  // The index (the list of everything published) is a companion to the
-  // reader, not a mode of its own. BESIDE the page where there is room, it
-  // stays open unless you hide it (remembered). OVER the page — a narrow
-  // dock — it is a sheet you pull when you want it and never on open, so
-  // the drawer always lands on the result itself.
+  // The index (the list of everything published) sits BESIDE the page, in
+  // the same window, like a mail client: the list on the left, the result on
+  // the right, both visible at once. ☰ hides it for a wider page, and that
+  // choice is remembered.
   const [railOpen, setRailOpen] = useState<boolean>(() => {
     try { return localStorage.getItem(RAIL_KEY) !== "0"; } catch { return true; }
   });
-  const [indexOpen, setIndexOpen] = useState(false);
-  const widened = useRef(false);
   const now = Date.now();
 
   // The scope arrives as whatever identifier the opener HAD — the URL's
@@ -281,15 +278,6 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items, flatRows]);
 
-  // A session that has published nothing yet is not a dead end: widen to the
-  // fleet once, automatically, and let the scope toggle say so. Once only —
-  // a reader who narrows back to the session meant it.
-  useEffect(() => {
-    if (!items || widened.current || !resolvedSession || showAll) return;
-    if (flatRows.length === 0 && items.length > 0) { widened.current = true; setShowAll(true); }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items, flatRows, resolvedSession, showAll]);
-
   const at = preview ? flatRows.findIndex((r) => r.path === preview.path) : -1;
   const step = (dir: 1 | -1) => {
     if (!flatRows.length) return;
@@ -322,10 +310,8 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
       if (event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();
-        // The index OVER the page is the one layer to back out of; the
-        // reader itself is the panel, so the next Escape closes it.
-        if (railOverlay && indexOpen) setIndexOpen(false);
-        else onClose();
+        // The reader IS the panel: Escape closes it.
+        onClose();
         return;
       }
       const dir = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1
@@ -339,7 +325,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClose, preview, flatRows, docked, indexOpen, dockW]);
+  }, [onClose, preview, flatRows, docked]);
 
   // Opening the panel IS the act of seeing what it shows.
   useEffect(() => {
@@ -376,7 +362,6 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     if (!canPreview()) return;   // narrow: the anchor's new tab is right
     event.preventDefault();
     setPreview(item);
-    setIndexOpen(false);
   };
 
   const copyLink = (item: ViewItem) => {
@@ -444,13 +429,8 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     el.addEventListener("pointerup", onUp);
   };
 
-  // Where the index lives: beside the page when the panel is wide enough for
-  // both, over it otherwise (a 620px dock with a 240px rail leaves 380px of
-  // page — enough for a plot, not for a report).
-  const railOverlay = docked ? dockW < 900 : false;
-  const railVisible = (railOverlay ? indexOpen : railOpen) && flatRows.length > 0;
+  const railVisible = railOpen && flatRows.length > 0;
   const toggleRail = () => {
-    if (railOverlay) { setIndexOpen((v) => !v); return; }
     setRailOpen((v) => {
       try { localStorage.setItem(RAIL_KEY, v ? "0" : "1"); } catch { /* private mode */ }
       return !v;
@@ -596,7 +576,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     <div className="views-nav">
       <button type="button" className={"views-act views-rail-toggle" + (railVisible ? " on" : "")}
               aria-label={railVisible ? "Hide the index" : "Show the index"} aria-pressed={railVisible}
-              title={railVisible ? "Hide the index" : "Everything published"}
+              title={railVisible ? "Hide the index (a wider page)" : "Show the index beside the page"}
               onClick={toggleRail}>☰</button>
       <button type="button" className="views-act" aria-label="Previous view" title="Previous (←)"
               disabled={at <= 0} onClick={() => step(-1)}>‹</button>
@@ -648,7 +628,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
       {!docked && <div className="views-backdrop" onClick={onClose} />}
       <div className={"views-panel" + (docked ? " docked" : "")
              + (flatRows.length > 0 ? " reading" : "")
-             + (railVisible ? (railOverlay ? " rail-over" : " rail-side") : "")}
+             + (railVisible ? " rail-side" : "")}
            style={docked ? { width: dockW } : undefined}
            role="dialog" aria-label="Published views"
            ref={panelRef} tabIndex={-1}>
@@ -683,36 +663,12 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
         </div>
         {nav}
         <div className="views-body">
-          {railVisible && !railOverlay && list}
+          {railVisible && list}
           <div className="views-preview">
             {empty || (canPreview() ? page : list)}
           </div>
-          {railVisible && railOverlay && (
-            <div className="views-index" role="region" aria-label="Everything published">
-              {list}
-            </div>
-          )}
         </div>
       </div>
     </>
   );
 };
-
-/**
- * The drawer pull: a tab on the right edge of the page that opens Views. It
- * is the affordance a 32px icon in a toolbar never was — big enough to find
- * without looking, and it wears the count so a new result is visible from
- * across the room.
- */
-export const ViewsPull = ({ count, fresh, onOpen }: { count: number; fresh: number; onOpen: () => void }) => (
-  <button type="button"
-          className={"views-pull" + (fresh > 0 ? " fresh" : "")}
-          aria-label={`Views: ${count} published${fresh > 0 ? `, new in ${fresh} session${fresh === 1 ? "" : "s"}` : ""}`}
-          title="Results agents published with hop view (⌘⇧V)"
-          onClick={onOpen}>
-    <span className="views-pull-glyph" aria-hidden="true">◧</span>
-    <span className="views-pull-label">Views</span>
-    {fresh > 0 ? <span className="views-pull-count fresh">{fresh} new</span>
-      : count > 0 ? <span className="views-pull-count">{count}</span> : null}
-  </button>
-);

package/hay/apps/web/src/styles.css

@@ -4511,17 +4511,12 @@ body.pane-dragging { user-select: none; }
   padding-right: 10px;
   margin-right: 12px;
 }
-.views-panel.docked.rail-side .views-list { flex-basis: 240px; }
-/* The index OVER the page (a narrow dock): a sheet under the nav bar. */
-.views-index {
-  position: absolute; inset: 0; z-index: 2;
-  display: flex; flex-direction: column;
-  background: var(--panel);
-  border: 1px solid var(--line); border-radius: 10px;
-  padding: 8px 10px;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
-}
-.views-index .views-list { flex: 1; }
+.views-panel.docked.rail-side .views-list { flex-basis: 232px; }
+/* In the rail the title owns the row: the per-row actions would crowd it
+   to three letters, and the reader's bar carries the same actions for the
+   page that is open. (Still in the DOM — a screen reader finds them.) */
+.views-panel.rail-side .views-row .views-acts { display: none; }
+.views-panel.rail-side .views-row.selected { background: color-mix(in srgb, var(--accent, #7c5cff) 16%, transparent); }
 .views-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 /* The reader's bar: index toggle · ‹ n/N › · title · actions. */
 .views-nav {
@@ -4670,38 +4665,6 @@ body.pane-dragging { user-select: none; }
   width: 5px; height: 5px; border-radius: 3px;
   background: var(--accent, #7c5cff);
 }
-/* The drawer pull: a tab on the right edge, mid-height, above the wall
-   (600) and its sheets (620), below the Views panel (730) it opens. Big by
-   design — this is the front door to Views, not a toolbar icon. */
-.views-pull {
-  position: fixed;
-  right: 0; top: 50%;
-  transform: translateY(-50%);
-  z-index: 700;
-  display: flex; flex-direction: column; align-items: center; gap: 6px;
-  width: 44px; padding: 14px 0 12px;
-  border: 1px solid var(--line); border-right: none;
-  border-radius: 12px 0 0 12px;
-  background: var(--panel);
-  color: var(--ink-muted);
-  box-shadow: -6px 0 22px rgba(0, 0, 0, 0.22);
-  cursor: pointer;
-  transition: width 0.12s ease, color 0.12s ease;
-}
-.views-pull:hover { color: var(--ink); border-color: var(--accent, #7c5cff); width: 48px; }
-.views-pull.fresh { color: var(--ink); border-color: var(--accent, #7c5cff); }
-.views-pull-glyph { font-size: 18px; line-height: 1; color: var(--accent, #7c5cff); }
-.views-pull-label {
-  writing-mode: vertical-rl; transform: rotate(180deg);
-  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
-}
-.views-pull-count {
-  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
-  padding: 2px 5px; border-radius: 6px;
-  background: var(--bg-alt); color: var(--ink-muted);
-  writing-mode: vertical-rl; transform: rotate(180deg);
-}
-.views-pull-count.fresh { background: var(--accent, #7c5cff); color: #fff; }
 /* Labelled entry points beat a 16px glyph: the wall's header and the
    topbar both say the word, and wear the count. */
 .views-entry-count {
@@ -4716,12 +4679,24 @@ body.pane-dragging { user-select: none; }
    an inline dot would shove the icon off-centre, so it rides the corner. */
 .switcher-action { position: relative; }
 .switcher-action .views-chip-dot { position: absolute; top: 5px; right: 5px; }
+/* A session's results are worth a real button on its card, not an 8px
+   chip: the word, the count, a hit target a thumb can find. */
 .switcher-chip.views {
-  border: none;
+  border: 1px solid var(--line);
   cursor: pointer;
   font-family: inherit;
   line-height: 1.2;
+  font-size: 10.5px;
+  padding: 3px 8px;
+  border-radius: 7px;
+  color: var(--ink);
+  background: var(--panel);
+  white-space: nowrap;
 }
+.switcher-chip.views:hover { border-color: var(--accent, #7c5cff); }
+/* Dense zooms have no room for the word beside the name — the name owns
+   the row (same rule as the inline actions); the glyph and count stay. */
+.switcher-overlay.tile-dense .switcher-chip.views .views-word { display: none; }
 .switcher-chip.views.fresh {
   background: color-mix(in srgb, var(--accent, #7c5cff) 22%, transparent);
   color: var(--accent, #7c5cff);

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

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { ViewsPanel, ViewsPull, hasUnseenViews, loadViewsSeen } from "../src/components/ViewsPanel";
+import { ViewsPanel, hasUnseenViews, loadViewsSeen } from "../src/components/ViewsPanel";
 import { SessionSwitcher } from "../src/components/SessionSwitcher";
 import type { SwitcherSession } from "../src/utils/switcherModel";
 
@@ -58,7 +58,7 @@ describe("ViewsPanel", () => {
   it("opens STRAIGHT INTO the newest result; a row click switches the page; the row stays a real link", async () => {
     const onClose = vi.fn();
     render(<ViewsPanel onClose={onClose} />);
-    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    await waitFor(() => expect(document.querySelector("iframe.views-frame")).toBeTruthy());
     // jsdom's window is 1024 wide — the desk case, where the page exists.
     // No click needed: the newest item is already the page.
     let frame = document.querySelector("iframe.views-frame") as HTMLIFrameElement;
@@ -70,7 +70,9 @@ describe("ViewsPanel", () => {
     // browser's PDF viewer, which is half of what the pane is for.
     expect(frame.hasAttribute("sandbox")).toBe(false);
     expect(screen.getByText("1 / 3")).toBeTruthy();
-    // The index sits beside the page; a plain click on a row turns the page.
+    // The index is beside the page from the start — both in one window; a
+    // plain click on a row turns the page.
+    expect(document.querySelector(".views-panel.rail-side .views-list")).toBeTruthy();
     const row = screen.getByText("views-test.html").closest("a") as HTMLAnchorElement;
     expect(row.getAttribute("target")).toBe("_blank");
     fireEvent.click(row);
@@ -88,7 +90,7 @@ describe("ViewsPanel", () => {
     expect(onClose).toHaveBeenCalled();
   });
 
-  it("docked: the page is open at once, the index rides OVER it on demand, and keys are focus-scoped", async () => {
+  it("docked: the page is open at once with the index beside it, and keys are focus-scoped", async () => {
     // The dock only exists on wide windows; jsdom defaults to 1024.
     vi.stubGlobal("innerWidth", 1280);
     const onClose = vi.fn();
@@ -111,36 +113,23 @@ describe("ViewsPanel", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(onClose).not.toHaveBeenCalled();
 
-    // A 620px dock has no room for the index beside the page: ☰ lays it
-    // OVER the page, and Esc from the panel backs that one layer out.
-    fireEvent.click(screen.getByRole("button", { name: "Show the index" }));
-    expect(document.querySelector(".views-index .views-list")).toBeTruthy();
-    expect(document.querySelector("iframe.views-frame")).toBeTruthy(); // the page stays under it
-    fireEvent.keyDown(panel, { key: "Escape" });
-    expect(document.querySelector(".views-index")).toBeNull();
-    // The next Esc from the panel closes it.
+    // The index sits beside the page in the dock too; ☰ hides it for a
+    // wider page and the choice is remembered.
+    expect(document.querySelector(".views-panel.rail-side .views-list")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Hide the index" }));
+    expect(document.querySelector(".views-list")).toBeNull();
+    expect(store.hop_views_rail).toBe("0");
+    expect(document.querySelector("iframe.views-frame")).toBeTruthy();
+    // Esc from the panel closes it.
     fireEvent.keyDown(panel, { key: "Escape" });
     expect(onClose).toHaveBeenCalled();
   });
 
-  it("a session that has published nothing widens to the fleet by itself", async () => {
+  it("a session that has published nothing says so — it never widens by itself", async () => {
     render(<ViewsPanel session="Nowhere" onClose={() => {}} />);
-    await waitFor(() => expect(document.querySelector("iframe.views-frame")).toBeTruthy());
-    expect(screen.getByRole("tab", { name: "all" }).getAttribute("aria-selected")).toBe("true");
-    expect(screen.getByText("1 / 3")).toBeTruthy();
-  });
-
-  it("the drawer pull says the word and wears the count", () => {
-    const onOpen = vi.fn();
-    const { rerender } = render(<ViewsPull count={7} fresh={0} onOpen={onOpen} />);
-    const pull = screen.getByRole("button", { name: "Views: 7 published" });
-    expect(pull.textContent).toContain("Views");
-    expect(pull.textContent).toContain("7");
-    fireEvent.click(pull);
-    expect(onOpen).toHaveBeenCalled();
-    rerender(<ViewsPull count={7} fresh={2} onOpen={onOpen} />);
-    expect(screen.getByRole("button", { name: "Views: 7 published, new in 2 sessions" }).className).toContain("fresh");
-    expect(screen.getByText("2 new")).toBeTruthy();
+    await waitFor(() => expect(screen.getByText(/Nothing published yet by this session/)).toBeTruthy());
+    expect(screen.getByRole("tab", { name: "all" }).getAttribute("aria-selected")).toBe("false");
+    expect(document.querySelector("iframe.views-frame")).toBeNull();
   });
 
   it("scoped open can widen to the fleet without reopening", async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hop2",
-  "version": "0.11.58",
+  "version": "0.11.60",
   "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": {