hop2 0.11.58 → 0.11.59

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

@@ -18,8 +18,8 @@ import { relativeTime } from "../utils/switcherModel";
 // - 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.
 //
@@ -200,15 +200,14 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
   });
   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.
+  // reader, not a mode of its own: a sheet over the page in a narrow dock, a
+  // rail beside it where there is room — either way only when you ask.
+  // Hidden until asked for, everywhere: the page is what you opened Views
+  // to see. Beside the page it stays as you left it (remembered).
   const [railOpen, setRailOpen] = useState<boolean>(() => {
-    try { return localStorage.getItem(RAIL_KEY) !== "0"; } catch { return true; }
+    try { return localStorage.getItem(RAIL_KEY) === "1"; } catch { return false; }
   });
   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 +280,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;
@@ -697,22 +687,3 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     </>
   );
 };
-
-/**
- * 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

@@ -4670,38 +4670,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 +4684,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";
 
@@ -16,7 +16,10 @@ let store: Record<string, string> = {};
 beforeEach(() => {
   // jsdom's own localStorage is only partially implemented here, and the
   // seen-markers are the whole point of these cases.
-  store = {};
+  // The index rail is hidden until asked and the choice is remembered; most
+  // cases below read rows from it, so they start with it open, the way a
+  // reader who opened it once would. The reader-first case clears this.
+  store = { hop_views_rail: "1" };
   vi.stubGlobal("localStorage", {
     getItem: (key: string) => (key in store ? store[key] : null),
     setItem: (key: string, value: string) => { store[key] = value; },
@@ -57,8 +60,9 @@ 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();
+    delete store.hop_views_rail; // a first-time reader: nothing remembered
     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 +74,10 @@ 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 not shown until asked — the page is the point. ☰ opens
+    // it beside the page; a plain click on a row turns the page.
+    expect(document.querySelector(".views-list")).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Show the index" }));
     const row = screen.getByText("views-test.html").closest("a") as HTMLAnchorElement;
     expect(row.getAttribute("target")).toBe("_blank");
     fireEvent.click(row);
@@ -123,24 +130,11 @@ describe("ViewsPanel", () => {
     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.59",
   "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": {