hop2 0.11.7 → 0.11.9

package/demo/capture/capture.mjs

@@ -1,6 +1,6 @@
 // Sanitized live-footage capture driver for the hop product video (dark theme).
 // Usage: node demo/capture/capture.mjs <clip>   where clip in:
-//   01-sessions | 02-agent-live | 02b-desktop-terminal | 03-phone-live |
+//   00-wall | 01-sessions | 02-agent-live | 02b-desktop-terminal | 03-phone-live |
 //   04-phone-switcher | 05-presence | 06-math | 07-theme
 //
 // Run demo/capture/setup-sessions.mjs and demo/capture/spawn-aurora.mjs first
@@ -112,7 +112,12 @@ async function sanitizeContext(context) {
         const resp = await route.fetch();
         let json;
         try { json = await resp.json(); } catch { return await route.fulfill({ response: resp }); }
-        json.sessions = (json.sessions || []).filter((s) => ALLOWED.includes(s.name));
+        json.sessions = (json.sessions || []).filter((s) => ALLOWED.includes(s.name))
+          // The rig creates its sessions through the terminal API, which the
+          // origin classifier (correctly) marks agent-created — but the wall
+          // defaults to the USER scope, so the whole demo cast would be
+          // hidden behind the Agent toggle. They PLAY user sessions.
+          .map((s) => ({ ...s, createdBy: "user" }));
         json.active = (json.active || []).filter((n) => ALLOWED.includes(n));
         json.starting = (json.starting || []).filter((n) => ALLOWED.includes(n));
         json.aliases = {};
@@ -598,6 +603,48 @@ try {
     await sleep(2400);
     await saveVideo(page, "07-theme", trimFor(t0, marker));
 
+  } else if (clip === "00-wall") {
+    // THE signature shot of the switcher-first era: the wall is the product.
+    // Live tiles ticking, folders, the briefing card up top, filter-to-find,
+    // click = engage in place, ⌘⏎ = the one deliberate door into full screen.
+    // The briefing is staged by ROUTE INTERCEPTION — no file ever touches
+    // hay-web/assets, so nothing sanitization-sensitive can leak or linger.
+    const { ctx, page, t0 } = await newRecordedPage(browser, {
+      css: "try{localStorage.setItem('hay_tile_zoom','6');localStorage.setItem('hay_theme','dark');}catch(e){}"
+    });
+    await ctx.route("**/assets/digest.json", (route) =>
+      route.fulfill({
+        contentType: "application/json",
+        body: JSON.stringify({
+          generated_at: new Date().toISOString(),
+          summary: "Nebula finished the ingest refactor; Polaris is mid-benchmark; Aurora wants a review.",
+          items: [
+            { session: "Nebula", headline: "Ingest refactor landed — 41s → 9s on the sample day", urgency: "info" },
+            { session: "Polaris", headline: "Benchmark sweep 60% done, no regressions so far", urgency: "info" },
+            { session: "Aurora", headline: "Wants review: error-handling change in the exporter", urgency: "attention" }
+          ]
+        })
+      })
+    );
+    await page.goto(`${state.localUrl}/s/Lyra2/?view=wall`, { waitUntil: "networkidle", timeout: 30000 });
+    await sleep(3500);
+    await assertDark(page, "00-wall");
+    const marker = Date.now();
+    await sleep(2600); // the wall breathing: tiles tick, briefing reads
+    // Find-by-typing: the filter narrows the wall live.
+    const filterBox = page.locator(".switcher-filter").first();
+    await filterBox.click();
+    await page.keyboard.type("neb", { delay: 160 });
+    await sleep(1600);
+    for (let i = 0; i < 3; i++) { await page.keyboard.press("Backspace"); await sleep(120); }
+    await sleep(900);
+    // Click a session: it engages IN PLACE — the wall never yanks you away.
+    await page.locator(".switcher-card", { hasText: "Nebula" }).first().click();
+    await sleep(3200);
+    // ⌘⏎ — the one deliberate door into full screen.
+    await page.keyboard.press("Meta+Enter");
+    await sleep(3400);
+    await saveVideo(page, "00-wall", trimFor(t0, marker));
   } else if (clip === "01-sessions") {
     const { page, t0 } = await newRecordedPage(browser, {});
     await page.goto(`${state.localUrl}/sessions`, { waitUntil: "networkidle", timeout: 30000 });

package/demo/product-video-v2.md

@@ -0,0 +1,64 @@
+# Product video v2 — the switcher-first cut
+
+The March cut opened on a session *list* and treated full screen as the
+product. That is backwards now: **the wall is the product**, full screen is a
+deliberate mode, and three new stories exist — the briefing, hop-ios, and
+HopBoard dictation. Target: ~60s, captioned, no voiceover.
+
+## Shot list
+
+Captured with the sanitized rig (`demo/capture/`) unless marked PHONE.
+Dark theme throughout; captions succinct, not salesy.
+
+1. **00-wall** (10–13s) — CAPTURED, `demo-output/footage/live/00-wall.webm`
+   The wall breathing: live tiles ticking, briefing card up top, filter
+   narrows live, click engages a session in place, ⌘⏎ enters full screen.
+   Caption: `Every terminal, one wall. Sessions are the home screen.`
+2. **01-briefing** (5s) — crop/zoom of the briefing card reading itself.
+   Caption: `A briefing, not a backlog — what happened while you were away.`
+   (Staged via route interception in the 00-wall clip; can reuse frames.)
+3. **02-agent-live** (8s) — existing rig clip, still valid: an agent working
+   in a session while you watch and type into the same terminal.
+   Caption: `Agents work in real terminals. Watch, steer, take over.`
+4. **03-phone-live** (6s) — existing rig clip (mobile web).
+   Caption: `The same fleet from your phone.`
+5. **04-mobile** (6s) — `docs/hero-mobile.svg` as a Ken-Burns still
+   (slow push-in, left phone then right phone). Covers BOTH hop-ios and
+   HopBoard in the house illustration style (same canvas/typography as
+   hero-overview.svg). Caption: none needed — the annotations are in
+   the frame. UPGRADE PATH: real device footage replaces this still
+   whenever it gets filmed; the storyboard slot and timing stay.
+   Why not simulator footage: simctl has no tap injection (driving the
+   app means running Orion's XCUITest rig inside their repo), system
+   dialogs (Apple ID sign-in) land on camera, and HopBoard specifically
+   cannot be real there — keyboard-extension + mic pipeline + Whisper on
+   the Neural Engine don't function in the simulator, so the 1–3s
+   transcription moment would have to be staged. The dictation demo's
+   honesty is its point; an illustration is honest, a fake capture isn't.
+7. **06-close** (3s) — wall again, one tile ringing its attention bell,
+   cursor moves to it. Caption: `hop — github.com/jzthree/hop`.
+
+## Rig notes (what changed since March)
+
+- New clip `00-wall` in `capture.mjs`; briefing is staged by intercepting
+  `/assets/digest.json` — nothing written to disk, nothing to leak.
+- The rig's sessions are created through the terminal API, so the origin
+  classifier marks them agent-created and the wall's default USER scope
+  would hide the entire cast — the network filter now presents them as
+  user sessions (`createdBy: "user"` rewrite).
+- The legacy `01-sessions` clip targets the old `/sessions` hub page.
+  Superseded by `00-wall`; keep the code until the v2 edit is locked.
+
+## Phone footage checklist (only you can film these)
+
+- iPhone, dark mode, notifications off, screen-record at 60fps.
+- hop-ios: open on the wall, scroll it once, tap a tile, type one short
+  line (keyboard feel is the shot), open the briefing.
+- HopBoard: in Notes or a claude session, tap mic key, speak one sentence
+  ("route the exporter errors into the retry queue"), stop, let the text
+  land. Keep the orange mic indicator in frame — it is the privacy story.
+
+## Assembly
+
+`stitch-demo-video.mjs` concatenates WebM → MP4 as before. Captions get
+burned in at edit time (same as March cut) — keep each on screen ≥2.5s.

package/docs/hero-mobile.svg

@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="980" height="620" viewBox="0 0 980 620" role="img" aria-label="hop on the phone: the native iOS app showing the session wall with a morning briefing and live terminal tiles, and HopBoard, a system-wide keyboard with on-device Whisper dictation — audio never leaves the phone.">
+  <defs>
+    <linearGradient id="canvasM" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#16171c"/>
+      <stop offset="1" stop-color="#101116"/>
+    </linearGradient>
+    <filter id="shadowM" x="-20%" y="-20%" width="140%" height="160%">
+      <feDropShadow dx="0" dy="6" stdDeviation="14" flood-color="#000000" flood-opacity="0.45"/>
+    </filter>
+    <clipPath id="phoneA"><rect x="120" y="96" width="250" height="470" rx="28"/></clipPath>
+    <clipPath id="phoneB"><rect x="612" y="96" width="250" height="470" rx="28"/></clipPath>
+  </defs>
+
+  <!-- canvas -->
+  <rect x="0.5" y="0.5" width="979" height="619" rx="18" fill="url(#canvasM)" stroke="#272831"/>
+
+  <!-- kicker -->
+  <text x="490" y="44" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="12.5" letter-spacing="0.14em" fill="#8d909b">THE FLEET IN YOUR POCKET — NATIVE APP, AND A KEYBOARD THAT LISTENS ON-DEVICE</text>
+
+  <!-- ═══════════ ① hop-ios: the wall, native ═══════════ -->
+  <g filter="url(#shadowM)">
+    <rect x="120" y="96" width="250" height="470" rx="28" fill="#0b0b0e" stroke="#33343c" stroke-width="2"/>
+  </g>
+  <g clip-path="url(#phoneA)" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace">
+    <!-- dynamic island -->
+    <rect x="205" y="106" width="80" height="16" rx="8" fill="#000000"/>
+    <!-- app header -->
+    <text x="136" y="146" fill="#e6e6eb" font-weight="700" font-size="13">Sessions</text>
+    <text x="354" y="146" text-anchor="end" fill="#8d909b" font-size="10">4 live</text>
+    <!-- briefing card -->
+    <rect x="132" y="158" width="226" height="86" rx="10" fill="#17181f" stroke="#2c2d36"/>
+    <text x="142" y="176" font-size="9.5"><tspan fill="#a78bfa" font-weight="700">✦ Briefing</tspan><tspan fill="#8d909b">&#160;&#160;7:30am</tspan></text>
+    <text x="142" y="192" fill="#c9cad3" font-size="9">Nebula landed the ingest refactor</text>
+    <text x="142" y="205" fill="#c9cad3" font-size="9">overnight — 41s → 9s. Polaris is</text>
+    <text x="142" y="218" fill="#c9cad3" font-size="9">mid-benchmark, no regressions.</text>
+    <text x="142" y="235" font-size="9"><tspan fill="#f0883e">●</tspan><tspan fill="#e6e6eb">&#160;Aurora wants a review</tspan></text>
+    <!-- tile: Nebula -->
+    <rect x="132" y="254" width="226" height="92" rx="10" fill="#101116" stroke="#2c2d36"/>
+    <text x="142" y="270" font-size="9.5"><tspan fill="#28c840">●</tspan><tspan fill="#e6e6eb" font-weight="700">&#160;Nebula</tspan></text>
+    <text x="142" y="288" fill="#8d909b" font-size="8.5">✓ tests: 47 passed</text>
+    <text x="142" y="301" fill="#8d909b" font-size="8.5">transform src/hooks/usePresence.ts</text>
+    <text x="142" y="314" fill="#8d909b" font-size="8.5">128 modules in 296ms</text>
+    <text x="142" y="334" font-size="8.5"><tspan fill="#6e7079">❯</tspan><tspan fill="#c9cad3">&#160;</tspan></text>
+    <rect x="152" y="326" width="5" height="10" fill="#a78bfa" opacity="0.85"/>
+    <!-- tile: Polaris with bell -->
+    <rect x="132" y="356" width="226" height="70" rx="10" fill="#101116" stroke="#7c3aed"/>
+    <text x="142" y="372" font-size="9.5"><tspan fill="#a78bfa">◉</tspan><tspan fill="#e6e6eb" font-weight="700">&#160;Polaris</tspan><tspan fill="#f0883e">&#160;· needs you</tspan></text>
+    <text x="142" y="390" fill="#8d909b" font-size="8.5">rollout wave 3/4 complete</text>
+    <text x="142" y="403" fill="#8d909b" font-size="8.5">continue to wave 4/4? (y/n)</text>
+    <!-- keyboard hint strip -->
+    <rect x="132" y="436" width="226" height="30" rx="8" fill="#17181f" stroke="#2c2d36"/>
+    <text x="245" y="455" text-anchor="middle" fill="#8d909b" font-size="9">esc · tab · ctrl · ↑ ↓ · ⌘K</text>
+    <!-- home indicator -->
+    <rect x="205" y="546" width="80" height="4" rx="2" fill="#33343c"/>
+  </g>
+  <text x="245" y="592" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="11" fill="#c9cad3"><tspan fill="#a78bfa" font-weight="700">①</tspan> native app — the wall, the briefing, push when a session rings</text>
+
+  <!-- connective arrow -->
+  <g stroke="#3d3e49" stroke-width="1.5" fill="none">
+    <path d="M 386 330 C 450 330 530 330 596 330" stroke-dasharray="4 5"/>
+  </g>
+  <text x="491" y="318" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="10" fill="#8d909b">same fleet · same daemon</text>
+
+  <!-- ═══════════ ② HopBoard: dictation keyboard ═══════════ -->
+  <g filter="url(#shadowM)">
+    <rect x="612" y="96" width="250" height="470" rx="28" fill="#0b0b0e" stroke="#33343c" stroke-width="2"/>
+  </g>
+  <g clip-path="url(#phoneB)" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace">
+    <rect x="697" y="106" width="80" height="16" rx="8" fill="#000000"/>
+    <!-- orange mic indicator -->
+    <circle cx="789" cy="114" r="3.5" fill="#ff9f0a"/>
+    <!-- a claude session being dictated into -->
+    <text x="628" y="150" font-size="9.5"><tspan fill="#28c840">●</tspan><tspan fill="#e6e6eb" font-weight="700">&#160;Aurora</tspan><tspan fill="#8d909b">&#160;· full screen</tspan></text>
+    <text x="628" y="172" fill="#8d909b" font-size="8.5">⏺ Exporter errors now surface in</text>
+    <text x="628" y="185" fill="#8d909b" font-size="8.5">  the retry queue with backoff.</text>
+    <rect x="624" y="200" width="226" height="42" rx="8" fill="#17181f" stroke="#2c2d36"/>
+    <text x="634" y="217" font-size="9"><tspan fill="#6e7079">❯</tspan><tspan fill="#e6e6eb">&#160;route the exporter errors into</tspan></text>
+    <text x="634" y="231" font-size="9"><tspan fill="#e6e6eb">  the retry queue</tspan></text>
+    <rect x="762" y="222" width="5" height="11" fill="#a78bfa" opacity="0.85"/>
+    <!-- transcribing pill -->
+    <rect x="624" y="252" width="226" height="24" rx="12" fill="#1c1420" stroke="#7c3aed"/>
+    <text x="737" y="268" text-anchor="middle" font-size="9"><tspan fill="#a78bfa">●</tspan><tspan fill="#c9cad3">&#160;whisper large-v3-turbo · on-device · 1.4s</tspan></text>
+    <!-- keyboard -->
+    <rect x="612" y="290" width="250" height="276" fill="#141419"/>
+    <g fill="#232430">
+      <rect x="624" y="302" width="20" height="30" rx="5"/><rect x="648" y="302" width="20" height="30" rx="5"/><rect x="672" y="302" width="20" height="30" rx="5"/><rect x="696" y="302" width="20" height="30" rx="5"/><rect x="720" y="302" width="20" height="30" rx="5"/><rect x="744" y="302" width="20" height="30" rx="5"/><rect x="768" y="302" width="20" height="30" rx="5"/><rect x="792" y="302" width="20" height="30" rx="5"/><rect x="816" y="302" width="20" height="30" rx="5"/><rect x="838" y="302" width="12" height="30" rx="5"/>
+      <rect x="636" y="338" width="20" height="30" rx="5"/><rect x="660" y="338" width="20" height="30" rx="5"/><rect x="684" y="338" width="20" height="30" rx="5"/><rect x="708" y="338" width="20" height="30" rx="5"/><rect x="732" y="338" width="20" height="30" rx="5"/><rect x="756" y="338" width="20" height="30" rx="5"/><rect x="780" y="338" width="20" height="30" rx="5"/><rect x="804" y="338" width="20" height="30" rx="5"/><rect x="828" y="338" width="22" height="30" rx="5"/>
+      <rect x="624" y="374" width="30" height="30" rx="5"/><rect x="660" y="374" width="20" height="30" rx="5"/><rect x="684" y="374" width="20" height="30" rx="5"/><rect x="708" y="374" width="20" height="30" rx="5"/><rect x="732" y="374" width="20" height="30" rx="5"/><rect x="756" y="374" width="20" height="30" rx="5"/><rect x="780" y="374" width="20" height="30" rx="5"/><rect x="806" y="374" width="44" height="30" rx="5"/>
+    </g>
+    <!-- mic key, active -->
+    <rect x="624" y="410" width="52" height="34" rx="7" fill="#7c3aed"/>
+    <text x="650" y="432" text-anchor="middle" fill="#ffffff" font-size="13">🎙</text>
+    <rect x="682" y="410" width="120" height="34" rx="7" fill="#232430"/>
+    <text x="742" y="431" text-anchor="middle" fill="#8d909b" font-size="9">space</text>
+    <rect x="808" y="410" width="42" height="34" rx="7" fill="#232430"/>
+    <text x="829" y="431" text-anchor="middle" fill="#8d909b" font-size="9">⏎</text>
+    <!-- waveform -->
+    <g stroke="#a78bfa" stroke-width="2" stroke-linecap="round">
+      <line x1="662" y1="470" x2="662" y2="482"/><line x1="672" y1="464" x2="672" y2="488"/><line x1="682" y1="458" x2="682" y2="494"/><line x1="692" y1="466" x2="692" y2="486"/><line x1="702" y1="472" x2="702" y2="480"/><line x1="712" y1="462" x2="712" y2="490"/><line x1="722" y1="468" x2="722" y2="484"/><line x1="732" y1="456" x2="732" y2="496"/><line x1="742" y1="466" x2="742" y2="486"/><line x1="752" y1="472" x2="752" y2="480"/><line x1="762" y1="460" x2="762" y2="492"/><line x1="772" y1="468" x2="772" y2="484"/><line x1="782" y1="474" x2="782" y2="478"/><line x1="792" y1="464" x2="792" y2="488"/><line x1="802" y1="470" x2="802" y2="482"/>
+    </g>
+    <text x="737" y="518" text-anchor="middle" fill="#8d909b" font-size="9">hold to speak · release to insert</text>
+    <rect x="697" y="546" width="80" height="4" rx="2" fill="#33343c"/>
+  </g>
+  <text x="737" y="592" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-size="11" fill="#c9cad3"><tspan fill="#a78bfa" font-weight="700">②</tspan> HopBoard — on-device Whisper dictation; audio never leaves the phone</text>
+</svg>

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

@@ -175,6 +175,10 @@ const toPresence = (client: ClientState): PresenceClient => ({
 });
 
 class ClientState {
+  // True from attach until this client's serialized snapshot has been sent.
+  // Output broadcasts are withheld meanwhile (see broadcast) and delivered
+  // as catch-up appended to the snapshot itself.
+  awaitingSnapshot = false;
   id: string;
   name: string;
   color: string;
@@ -438,9 +442,22 @@ export class Room extends EventEmitter {
     // the web full screen's ~384KB request wants the grid's full depth.
     const serializedScrollback = replayRequest !== null && replayRequest <= 131_072 ? 200 : undefined;
     if (gridForAttach) {
+      // Everything already in the ring at THIS moment will be in the
+      // serialized screen; everything after it will not (grid writes queue
+      // behind the serialize marker). Mute output to this client until the
+      // snapshot goes out, then hand it the exact delta from this cursor.
+      client.awaitingSnapshot = true;
+      const catchUpFrom = this.outputStart + this.outputBytes;
       gridForAttach.serialize((serialized) => {
-        if (this.ended || !this.clients.has(client.id) || !socket.isOpen()) return;
+        if (this.ended || !this.clients.has(client.id) || !socket.isOpen()) {
+          client.awaitingSnapshot = false;
+          return;
+        }
         if (serialized === null) {
+          // Raw fallback reads the ring as it stands NOW — everything the
+          // mute withheld is inside it. Unmute first so nothing new slips
+          // into the erased-by-reset gap either (raw has no RIS).
+          client.awaitingSnapshot = false;
           sendRawSnapshot();
           wiggle();
           return;
@@ -453,14 +470,19 @@ export class Room extends EventEmitter {
         // read the separate flags — ends up in the app's actual modes.
         const modeSeq = (this.mouseReporting ? "\x1b[?1002h" + (this.mouseSgr ? "\x1b[?1006h" : "") : "")
           + (this.cursorHidden ? "\x1b[?25l" : "");
+        // Catch-up: output that arrived while the snapshot was being
+        // serialized. Appended INSIDE the snapshot payload so snapshot and
+        // delta land as one atomic parse — no frame between reset and delta.
+        const catchUp = this.getOutputSince(catchUpFrom);
         socket.send(JSON.stringify({
           type: "snapshot",
           // In-band RIS: every client applies the serialized screen onto a
           // clean slate, including ones that don't reset on their own.
-          data: "\x1bc" + serialized + modeSeq,
+          data: "\x1bc" + serialized + modeSeq + (catchUp.reset ? "" : catchUp.data),
           capped: this.outputBytes > SERIALIZED_CAPPED_HINT_BYTES,
           ...snapshotFlags()
         } satisfies ServerMessage));
+        client.awaitingSnapshot = false;
         // No wiggle: the serialized grid IS the current screen.
       }, serializedScrollback);
     } else {
@@ -923,7 +945,16 @@ export class Room extends EventEmitter {
 
   private broadcast(message: ServerMessage) {
     const payload = JSON.stringify(message);
+    const isOutput = (message as { type?: string }).type === "output";
     for (const client of this.clients.values()) {
+      // A client whose serialized snapshot is still being prepared must not
+      // receive live output yet: the snapshot opens with an in-band RIS, so
+      // output sent before it would be ERASED by it — and the serialized
+      // grid does not contain those bytes either (they queued behind the
+      // serialize marker). That silent loss was 'the screen is stale until
+      // the app repaints' on every attach that raced live output. The
+      // withheld bytes are delivered as catch-up appended to the snapshot.
+      if (isOutput && client.awaitingSnapshot) continue;
       if (client.socket.isOpen()) {
         client.socket.send(payload);
       }

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

@@ -780,6 +780,36 @@ describe("Room", () => {
       expect(snapshot.capped).toBe(true);
     });
 
+    // THE ordering bug behind 'text doesn't update until I scroll' surviving
+    // the serialized-attach fix: serialization is ASYNC, the client is already
+    // in the broadcast list, so live output landed before the snapshot — and
+    // the snapshot's in-band RIS then erased it, while the serialized grid
+    // didn't contain those bytes either (they queue behind the serialize
+    // marker). Output during the window must be withheld and delivered as
+    // catch-up inside the snapshot payload itself.
+    it("output racing the serialize is withheld and appended to the snapshot", async () => {
+      const { room, pty } = await setup("race");
+      pty().emit("\x1b[2J\x1b[1;1Hpre-attach content\r\n");
+      const socket = new FakeSocket();
+      room.attachClient(
+        { id: "racer", name: "Racer", colorIndex: 0, cols: 80, rows: 24, replayBytes: 65536 },
+        socket
+      );
+      // Arrives while the snapshot is still serializing (same tick).
+      pty().emit("LATE-MARKER-XYZ\r\n");
+      const snapshot = await waitForSnapshot(socket);
+      const messages = readMessages(socket);
+      const snapIdx = messages.findIndex((m) => m.type === "snapshot");
+      const outputBefore = messages.slice(0, snapIdx).filter((m) => m.type === "output");
+      expect(outputBefore).toHaveLength(0);
+      expect(String(snapshot.data)).toContain("LATE-MARKER-XYZ");
+      // After the snapshot the stream flows live again, no duplication.
+      pty().emit("AFTER-MARKER\r\n");
+      const after = readMessages(socket).filter((m) => m.type === "output");
+      expect(after.some((m) => String(m.data).includes("AFTER-MARKER"))).toBe(true);
+      expect(after.some((m) => String(m.data).includes("LATE-MARKER-XYZ"))).toBe(false);
+    });
+
     it("replay=0 means no snapshot at all — live stream only", async () => {
       const { room, pty } = await setup("claim");
       pty().emit("some prior output\r\n");

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

@@ -1102,11 +1102,43 @@ const App = () => {
     const t = termRef.current;
     if (!t) return;
     try {
+      // refresh() alone re-renders from the SAME GPU texture atlas, so it
+      // cannot fix the failure people actually hit: cells that draw blank
+      // because their glyphs are missing or stale in the atlas (font-size
+      // changes and context restores are the usual triggers). Rebuild the
+      // atlas first — the theme-change path has always done this, and it is
+      // the local equivalent of what a scroll achieves by making the app
+      // repaint from scratch.
+      const withAtlas = t as unknown as { clearTextureAtlas?: () => void };
+      if (typeof withAtlas.clearTextureAtlas === "function") withAtlas.clearTextureAtlas();
       t.refresh(0, t.rows - 1);
     } catch { /* terminal disposed mid-flight */ }
   };
   const forceRepaintRef = useRef(forceRepaint);
   forceRepaintRef.current = forceRepaint;
+
+  // The explicit "redraw" — what a scroll does, on demand. Local half:
+  // rebuild the glyph atlas and repaint (forceRepaint). Remote half: when
+  // the app owns the mouse (claude, vim), send a net-zero wheel pair so the
+  // APP repaints from scratch — that remote repaint is the thing scrolling
+  // actually provides, and no amount of local refreshing can substitute for
+  // it when rows never arrived. Manual only: it injects input, so it must
+  // never run on a timer.
+  const redrawSession = () => {
+    forceRepaintRef.current();
+    const t = termRef.current;
+    if (!t || !remoteMouseReportingRef.current) return;
+    const col = 1 + Math.floor((t.cols || 2) / 2);
+    const row = 1 + Math.floor((t.rows || 2) / 2);
+    // Order matters: UP then DOWN ends where the view started. (Down first
+    // is a no-op at the bottom, and the up then leaves the app scrolled.)
+    const pair = remoteMouseSgrRef.current
+      ? `\x1b[<64;${col};${row}M\x1b[<65;${col};${row}M`
+      : "";
+    if (pair) handleUserInputRef.current?.(pair);
+  };
+  const redrawSessionRef = useRef(redrawSession);
+  redrawSessionRef.current = redrawSession;
   // Mirror of the switcher-open state for callbacks that outlive a render.
   const switcherOpenRef = useRef(false);
   switcherOpenRef.current = switcherOpen;
@@ -3697,6 +3729,17 @@ const App = () => {
                         : "Locked"}
                 </span>
               </div>
+              <div className="drawer-row">
+                <label>Redraw</label>
+                <button
+                  type="button"
+                  className="quick-btn"
+                  title="Repaint the screen — rebuilds local glyphs and, in apps like Claude, asks the app itself to repaint (what a scroll does)"
+                  onClick={() => redrawSessionRef.current()}
+                >
+                  Redraw screen
+                </button>
+              </div>
               <div className="drawer-row">
                 <label>Typing</label>
                 <div className="view-mode-buttons">
@@ -3942,6 +3985,15 @@ const App = () => {
                           {isMacPlatform ? "⌘/" : "Ctrl+Shift+/"} keys
                         </button>
                       )}
+                      <button
+                        type="button"
+                        className="footer-find-toggle"
+                        aria-label="Redraw the screen"
+                        title="Repaint the screen — rebuilds local glyphs and, in apps like Claude, asks the app itself to repaint (what a scroll does)"
+                        onClick={() => redrawSessionRef.current()}
+                      >
+                        redraw
+                      </button>
                       <span title={sortedPresence.map((c) => c.name).join(", ")}>
                         {(() => {
                           // Someone else typing is the fact worth surfacing —

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import type { SwitcherSession } from "../utils/switcherModel";
+
+// The briefing, on the desktop wall — the same digest.json the iOS app
+// renders, written by the host-side agent (hop-ios tools/digest.mjs) into the
+// directory the daemon serves under /assets/. This card is deliberately
+// self-contained: one fetch, localStorage for dismissed/read state, no new
+// endpoints, and the same reading contract as the phone — the summary is the
+// headline, every story shows in full under its session DATELINE, unread
+// stories carry a dot that opening clears.
+
+type DigestItem = {
+  session: string;
+  headline: string;
+  why?: string;
+  urgency?: string;
+};
+
+type Digest = {
+  generated_at?: string;
+  summary?: string;
+  items?: DigestItem[];
+};
+
+const READ_KEY = "hop_digest_read";        // "<stamp>|a,b,c" — self-pruning
+const DISMISS_KEY = "hop_digest_dismissed"; // "<stamp>"
+
+const readSet = (stamp: string): Set<string> => {
+  try {
+    const raw = localStorage.getItem(READ_KEY) || "";
+    const [s, list] = raw.split("|");
+    if (s !== stamp || !list) return new Set();
+    return new Set(list.split(",").filter(Boolean));
+  } catch { return new Set(); }
+};
+
+const urgencyClass = (u?: string) =>
+  u === "needs-you" ? "needs" : u === "blocked" ? "blocked" : u === "finished" ? "done" : "fyi";
+
+export const DigestCard = ({ sessions, onOpen }: {
+  sessions: SwitcherSession[];
+  onOpen: (session: SwitcherSession) => void;
+}) => {
+  const [digest, setDigest] = useState<Digest | null>(null);
+  const [dismissed, setDismissed] = useState(() => {
+    try { return localStorage.getItem(DISMISS_KEY) || ""; } catch { return ""; }
+  });
+  const [read, setRead] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = () => {
+      fetch("/assets/digest.json", { cache: "no-store" })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((d: Digest | null) => {
+          if (cancelled || !d?.summary) return;
+          setDigest(d);
+          setRead(readSet(d.generated_at || ""));
+        })
+        .catch(() => { /* absent is the normal state until the job runs */ });
+    };
+    load();
+    // A briefing written while this tab sat open should appear on return.
+    const onVis = () => { if (!document.hidden) load(); };
+    document.addEventListener("visibilitychange", onVis);
+    return () => { cancelled = true; document.removeEventListener("visibilitychange", onVis); };
+  }, []);
+
+  if (!digest?.summary) return null;
+  const stamp = digest.generated_at || "";
+  if (dismissed === stamp) return null;
+  const items = digest.items || [];
+
+  const markRead = (session: string) => {
+    const next = new Set(read);
+    next.add(session);
+    setRead(next);
+    try { localStorage.setItem(READ_KEY, stamp + "|" + [...next].sort().join(",")); } catch { /* private mode */ }
+  };
+
+  // The daemon folds case when a name addresses a session; match it.
+  const find = (internalName: string) =>
+    sessions.find((s) => (s.internalName || s.name) === internalName)
+      || sessions.find((s) => (s.internalName || s.name).toLowerCase() === internalName.toLowerCase());
+
+  return (
+    <div className="digest-card">
+      <div className="digest-head">
+        <span className="digest-badge">✦ Briefing</span>
+        <button className="digest-dismiss" title="Dismiss briefing"
+          onClick={() => { setDismissed(stamp); try { localStorage.setItem(DISMISS_KEY, stamp); } catch { /* ok */ } }}>
+          ×
+        </button>
+      </div>
+      <div className="digest-summary">{digest.summary}</div>
+      {items.map((item) => {
+        const target = find(item.session);
+        const name = target ? (target.displayName || target.name) : item.session;
+        return (
+          <button
+            key={item.session + item.headline}
+            className={"digest-item " + urgencyClass(item.urgency) + (read.has(item.session) ? " read" : "")}
+            onClick={() => {
+              markRead(item.session);
+              if (target) onOpen(target);
+            }}
+          >
+            <span className="digest-dateline">
+              {!read.has(item.session) && <span className="digest-dot" />}
+              {name}
+            </span>
+            <span className="digest-headline">{item.headline}</span>
+            {item.why ? <span className="digest-why">{item.why}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -27,6 +27,7 @@ import {
   type SwitcherSortMode
 } from "../utils/switcherModel";
 import { scanKeyboardProtocol } from "../utils/keyboardProtocol";
+import { DigestCard } from "./DigestCard";
 
 // Full-screen, in-app session switcher (mobile-first). Hot sessions — current,
 // attention, most recent — are preview cards; the tail is compact rows grouped
@@ -483,6 +484,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       const wanted = tileFontFor(boxW);
       if (Math.abs(wanted - font) >= 0.25) {
         term.options.fontSize = wanted;
+        // A font-size change invalidates the GPU glyph atlas. Without an
+        // explicit rebuild, already-drawn cells can keep pointing at stale
+        // slots and paint BLANK until something forces re-rasterisation —
+        // which is exactly the "renders wrong until I scroll" report, and
+        // why a plain refresh() never cured it. The wall changes font size
+        // on every zoom and resize, so this is the hottest trigger there is.
+        const withAtlas = term as unknown as { clearTextureAtlas?: () => void };
+        if (typeof withAtlas.clearTextureAtlas === "function") withAtlas.clearTextureAtlas();
         requestAnimationFrame(() => rescaleRef.current());
         return;
       }
@@ -1584,31 +1593,33 @@ export const SessionSwitcher = ({
     flatNav.forEach((s, i) => m.set(sessionKey(s), i));
     return m;
   }, [flatNav]);
-  // Opening the wall focuses the session the app is ON. A deep link like
-  // /s/<name>/?view=wall names a session, so landing on the wall with
-  // nothing focused (and the keyboard sitting on the FIRST card) loses the
-  // one thing the URL asked for. The old name works too — the room id is
-  // the internal name, so a renamed session still resolves. This is not an
-  // "accidental" focus: arriving here is the user's explicit act, and it
-  // focuses in place rather than entering full screen.
+  // Opening the wall focuses the session the app is ON — once. A deep link
+  // like /s/<name>/?view=wall names a session, so landing with nothing
+  // focused loses what the URL asked for.
+  //
+  // ONCE is load-bearing: flatNav changes on every filter keystroke, so an
+  // unguarded effect re-anchored the selection to the current session while
+  // you typed — and ⌘⏎ then opened THAT instead of the match you were
+  // looking at. Filtering owns the selection (top match); this only seeds it.
+  const initialFocusDoneRef = useRef(false);
+  useEffect(() => { if (!open) initialFocusDoneRef.current = false; }, [open]);
   useEffect(() => {
     if (!open || focusedKey || !currentRoom) return;
+    if (initialFocusDoneRef.current || filter) return;
     const current = flatNav.find((s) => (s.internalName || s.name) === currentRoom || s.name === currentRoom);
     if (!current) return;
+    initialFocusDoneRef.current = true;
     const key = sessionKey(current);
     setFocusedKey(key);
     const idx = navIndexByKey.get(key);
     if (typeof idx === "number") {
       setKbdIndex(idx);
-      // ...and bring it into view. A deep link can name a session sitting
-      // far down a long wall; focusing a card the user cannot see is the
-      // same as not focusing it. Deferred a frame so the card exists.
       requestAnimationFrame(() => {
         document.querySelector(`[data-nav-index="${idx}"]`)?.scrollIntoView({ block: "center" });
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentRoom, flatNav, navIndexByKey]);
+  }, [open, currentRoom, flatNav, navIndexByKey, filter, focusedKey]);
   // Latest visual order, for reorderManual (defined earlier in the component).
   // Every session in the current scope, in manual order — the canonical list
   // reordering works against, regardless of what the filter is showing.
@@ -2657,6 +2668,12 @@ export const SessionSwitcher = ({
         )}
       </div>
       <div className="switcher-scroll" ref={scrollRef} onContextMenu={openWallMenu}>
+        {/* The host agent's briefing — same digest.json the phone renders.
+            Hidden while filtering: search is about one session, the briefing
+            is about the fleet. */}
+        {model.mode !== "filter" && (
+          <DigestCard sessions={sessions} onOpen={handleTap} />
+        )}
         {model.mode === "filter" ? (
           // Matches keep their terminal previews: search results are preview
           // cards at the current zoom, same as the wall — the screen content