hop2 0.11.8 → 0.11.10

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/CHANGELOG.md

@@ -32,6 +32,9 @@
 
 ### Bug Fixes
 
+#### Web terminal
+- **Claude screens render completely on attach without a scroll**: Hop now starts its authoritative screen grid when a session enters alternate-screen or mouse-reporting TUI mode, before startup rows can fall out of a bounded replay tail. Full-screen attaches use that serialized screen, and direct snapshot paints re-arm one delayed repaint in case the browser misses the first WebGL frame.
+
 #### Session restore
 - **`hop restore` actually restores now (Claude conversations included), from the SessionStart-hook records**: restore built its candidate list from the workspace-scoped session store, which is only populated when a workspace is active — and no workspace is ever activated in normal use, so `restore` found nothing and silently restored zero sessions. It now sources candidates directly from the durable per-session records the SessionStart hook writes (`~/.hop2/claude-sessions/<name>.json` = `{ sessionId, cwd }`), which survive a crash/reboot and carry the exact conversation id. So after a restart, `hop restore` recreates each session in its directory and resumes its Claude conversation with `claude --resume <id>` — no manual capture step. Sessions already live are skipped (idempotent), and `hop restore` now starts the daemon itself if it isn't running, so post-reboot recovery is a single command. `--dry-run` previews the plan. Records are pruned when a session is deleted, so restore never resurrects a session you intentionally closed (and if an unwanted one does come back, deleting it once keeps it gone).
 - **`hopx_agent_turn` no longer runs non-UI input twice**: in `readable_raw` mode (and `auto` resolving to it — i.e. a plain shell or any non-alternate-screen agent), a synchronous turn pre-sent the input and *then* sent it again via the combined send+wait, so a command driven through `hopx_agent_turn` executed twice. The pre-send is now done only for the paths that need it (the `ui` branch and async turns, which return before the combined call); non-UI synchronous turns let the single send+wait do the send. UI and async turns are unchanged.

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

@@ -175,6 +175,11 @@ 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;
+  snapshotCatchUp: string[] = [];
   id: string;
   name: string;
   color: string;
@@ -257,10 +262,15 @@ export class Room extends EventEmitter {
   // connect created the room, so its hello carries created=true.
   private hasHadClient = false;
   // Authoritative screen state for serialized attach (see screenGrid.ts).
-  // Created lazily once the headless deps load; hydrated from the retained
-  // ring at creation so bytes that arrived earlier are never missing.
+  // Start it as soon as a TUI advertises alternate-screen or mouse mode, so
+  // rows painted once at startup cannot age out of a bounded replay tail.
+  // Plain shells stay lazy and pay no grid cost until somebody attaches.
   private grid: ScreenGrid | null = null;
   private gridHydrated = false;
+  private gridStartPending = false;
+  private gridUnavailable = false;
+  private gridPendingSeed: string[] | null = null;
+  private gridPendingSeedBytes = 0;
 
   constructor(id: string, ptyFactory: PtyFactory, initialSize: { cols: number; rows: number }, options: RoomCreateOptions) {
     super();
@@ -293,6 +303,7 @@ export class Room extends EventEmitter {
       this.lastActivityAt = now();
       this.appendOutput(data);
       this.updateTerminalState(data);
+      this.startTuiGrid();
       this.answerTerminalQueriesIfHeadless(data);
       this.broadcast({ type: "output", data });
       this.emit("pty_output", { roomId: this.id, data, timestamp: now() });
@@ -438,9 +449,23 @@ 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, retaining the exact withheld chunks for catch-up.
+      client.awaitingSnapshot = true;
+      client.snapshotCatchUp = [];
       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;
+          client.snapshotCatchUp = [];
+          return;
+        }
         if (serialized === null) {
+          // Raw fallback reads the ring as it stands NOW. Unmute first so
+          // nothing new slips into the handoff (raw has no in-band RIS).
+          client.awaitingSnapshot = false;
+          client.snapshotCatchUp = [];
           sendRawSnapshot();
           wiggle();
           return;
@@ -453,14 +478,20 @@ 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 = client.snapshotCatchUp.join("");
         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,
           capped: this.outputBytes > SERIALIZED_CAPPED_HINT_BYTES,
           ...snapshotFlags()
         } satisfies ServerMessage));
+        client.awaitingSnapshot = false;
+        client.snapshotCatchUp = [];
         // No wiggle: the serialized grid IS the current screen.
       }, serializedScrollback);
     } else {
@@ -542,16 +573,23 @@ export class Room extends EventEmitter {
 
   private updateTerminalState(data: string) {
     const combined = this.controlSequenceTail + data;
+    const tailLength = this.controlSequenceTail.length;
+    const risIndex = combined.lastIndexOf("\x1bc");
+    // Only process a RIS that ends in this chunk; one entirely inside the
+    // carry tail was already applied on the preceding call. Modes before the
+    // last new RIS are reset, while later sequences in the same chunk win.
+    const hasNewRis = risIndex !== -1 && risIndex + 2 > tailLength;
+    const stateInput = hasNewRis ? combined.slice(risIndex + 2) : combined;
 
     // Parse CSI mode sequences (cursor visibility, alternate screen)
     const regex = /\x1b\[\?([0-9;]*)([hl])/g;
     let match: RegExpExecArray | null;
-    let nextAlternate = this.alternateScreen;
-    let nextCursorHidden = this.cursorHidden;
+    let nextAlternate = hasNewRis ? false : this.alternateScreen;
+    let nextCursorHidden = hasNewRis ? false : this.cursorHidden;
 
-    let nextMouseReporting = this.mouseReporting;
-    let nextMouseSgr = this.mouseSgr;
-    while ((match = regex.exec(combined)) !== null) {
+    let nextMouseReporting = hasNewRis ? false : this.mouseReporting;
+    let nextMouseSgr = hasNewRis ? false : this.mouseSgr;
+    while ((match = regex.exec(stateInput)) !== null) {
       const params = match[1].split(";").filter(Boolean);
       const mode = match[2];
       for (const param of params) {
@@ -571,10 +609,10 @@ export class Room extends EventEmitter {
 
     // Enhanced keyboard reporting: kitty keyboard protocol (CSI >flags u push /
     // CSI <n u pop / CSI =flags u set) and xterm modifyOtherKeys (CSI >4;n m).
-    let nextKeyboardEnhanced = this.keyboardEnhanced;
+    let nextKeyboardEnhanced = hasNewRis ? false : this.keyboardEnhanced;
     const kbdRegex = /\x1b\[([<>=])[0-9;:]*u|\x1b\[>([0-9;]*)m/g;
     let kbdMatch: RegExpExecArray | null;
-    while ((kbdMatch = kbdRegex.exec(combined)) !== null) {
+    while ((kbdMatch = kbdRegex.exec(stateInput)) !== null) {
       if (kbdMatch[1] !== undefined) {
         nextKeyboardEnhanced = kbdMatch[1] !== "<"; // push/set = on, pop = off
       } else {
@@ -923,7 +961,19 @@ 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) {
+        client.snapshotCatchUp.push((message as { data: string }).data);
+        continue;
+      }
       if (client.socket.isOpen()) {
         client.socket.send(payload);
       }
@@ -1021,13 +1071,38 @@ export class Room extends EventEmitter {
     }
   }
 
-  // Grids are LAZY: created on the first serialized attach, not on output,
-  // so a room nobody ever opens (agent fleets) pays no grid memory at all.
-  // Creation hydrates from a bounded ring tail — deep enough to contain any
-  // app's last full repaint plus every update since, which is all screen
-  // correctness needs; serialized scrollback is bounded anyway.
+  // Incremental TUIs paint some rows once and then update other regions for
+  // hours. Reconstructing their first grid from any bounded tail can therefore
+  // omit cells until the app happens to repaint (for example, on scroll).
+  // Begin tracking at TUI entry; dependency loading is shared and normally
+  // finishes first, but the callback covers a TUI that starts immediately.
+  private startTuiGrid() {
+    if (!SERIALIZED_ATTACH_ENABLED || this.grid || this.gridStartPending || this.gridUnavailable || this.ended) return;
+    if (!this.alternateScreen && !this.mouseReporting) return;
+    if (screenGridsAvailable()) {
+      this.gridUnavailable = this.ensureGrid() === null;
+      return;
+    }
+    this.gridStartPending = true;
+    this.gridPendingSeed = [this.tailOutput(MAX_BUFFER_SIZE)];
+    this.gridPendingSeedBytes = this.gridPendingSeed[0].length;
+    void loadScreenGridDeps().then((available) => {
+      this.gridStartPending = false;
+      this.gridUnavailable = !available;
+      const seed = this.gridPendingSeed?.join("") ?? "";
+      this.gridPendingSeed = null;
+      this.gridPendingSeedBytes = 0;
+      if (available && !this.ended) {
+        this.gridUnavailable = this.ensureGrid(seed) === null;
+      }
+    });
+  }
+
+  // Plain-shell grids remain lazy until the first serialized attach. Creation
+  // hydrates from a bounded ring tail; append-only shell output is safely
+  // reconstructible from that tail, unlike the incremental TUI path above.
   private static readonly GRID_HYDRATE_BYTES = 2_000_000;
-  private ensureGrid(): ScreenGrid | null {
+  private ensureGrid(seed?: string): ScreenGrid | null {
     if (!SERIALIZED_ATTACH_ENABLED || this.ended) return this.grid;
     if (!this.grid && screenGridsAvailable()) {
       this.grid = createScreenGrid(this.activeCols, this.activeRows);
@@ -1036,8 +1111,8 @@ export class Room extends EventEmitter {
         if (this.outputBytes > 0) {
           // Cut at a line boundary (same trick as boundSnapshotReplay) so a
           // slice landing mid-escape-sequence can't garble the parse head.
-          let tail = this.tailOutput(Room.GRID_HYDRATE_BYTES);
-          if (this.outputBytes > tail.length) {
+          let tail = seed ?? this.tailOutput(Room.GRID_HYDRATE_BYTES);
+          if (seed === undefined && this.outputBytes > tail.length) {
             const nl = tail.indexOf("\n");
             if (nl !== -1 && nl < 8192) tail = tail.slice(nl + 1);
           }
@@ -1051,6 +1126,20 @@ export class Room extends EventEmitter {
   /** O(1) append; trims whole chunks from the head past MAX_BUFFER_SIZE. */
   private appendOutput(data: string) {
     if (!data) return;
+    if (this.gridPendingSeed) {
+      this.gridPendingSeed.push(data);
+      this.gridPendingSeedBytes += data.length;
+      while (this.gridPendingSeed.length > 1
+          && this.gridPendingSeedBytes - this.gridPendingSeed[0].length >= MAX_BUFFER_SIZE) {
+        this.gridPendingSeedBytes -= this.gridPendingSeed[0].length;
+        this.gridPendingSeed.shift();
+      }
+      if (this.gridPendingSeed.length === 1 && this.gridPendingSeedBytes > MAX_BUFFER_SIZE) {
+        const tail = this.gridPendingSeed[0].slice(-MAX_BUFFER_SIZE);
+        this.gridPendingSeed[0] = tail;
+        this.gridPendingSeedBytes = tail.length;
+      }
+    }
     this.outputChunks.push(data);
     this.outputBytes += data.length;
     while (this.outputChunks.length > 1 && this.outputBytes - this.outputChunks[0].length >= MAX_BUFFER_SIZE) {

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

@@ -766,6 +766,25 @@ describe("Room", () => {
       expect(snapshot.mouseReporting).toBe(true);
     });
 
+    it("tracks TUI rows before they age out of the grid hydration tail", async () => {
+      const { room, pty } = await setup("early-grid");
+      pty().emit("\x1b[?1002h\x1b[?1006h");
+      pty().emit("\x1b[2J\x1b[1;1HROW1-EARLY-GRID-MARKER");
+      // Repaint only row 20 for more than the lazy grid's 2MB hydration
+      // window. A grid first created at attach would have no row 1 to send.
+      const updateBatch = ("\x1b[20;1H\x1b[K" + "x".repeat(60)).repeat(64);
+      for (let i = 0; i < 500; i++) pty().emit(updateBatch);
+
+      const socket = new FakeSocket();
+      room.attachClient(
+        { id: "late", name: "Late", colorIndex: 0, cols: 80, rows: 24, replayBytes: 65536 },
+        socket
+      );
+      const snapshot = await waitForSnapshot(socket);
+      expect(String(snapshot.data)).toContain("ROW1-EARLY-GRID-MARKER");
+      expect(room.getPreviewSource(2_000_000).output).not.toContain("ROW1-EARLY-GRID-MARKER");
+    });
+
     it("flags a serialized snapshot as capped when deeper raw history exists", async () => {
       const { room, pty } = await setup("capped");
       const big = "\x1b[20;1H" + "y".repeat(4096);
@@ -780,6 +799,74 @@ 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("retains catch-up larger than the incremental preview limit", async () => {
+      const { room, pty } = await setup("large-race");
+      pty().emit("\x1b[?1002h\x1b[2J\x1b[1;1Hbefore large catch-up");
+      const socket = new FakeSocket();
+      room.attachClient(
+        { id: "large-racer", name: "Large Racer", colorIndex: 0, cols: 80, rows: 24, replayBytes: 65536 },
+        socket
+      );
+      // Larger than getOutputSince's 1MB default: cursor-based catch-up used
+      // to reset here and silently drop every withheld byte.
+      const late = "x".repeat(1_100_000) + "LARGE-CATCHUP-MARKER";
+      pty().emit(late);
+      const snapshot = await waitForSnapshot(socket);
+      expect(String(snapshot.data)).toContain("LARGE-CATCHUP-MARKER");
+      const live = readMessages(socket).filter((m) => m.type === "output");
+      expect(live.some((m) => String(m.data).includes("LARGE-CATCHUP-MARKER"))).toBe(false);
+    });
+
+    it("clears tracked private modes when the app sends RIS", async () => {
+      const { room, pty } = await setup("ris-modes");
+      pty().emit("\x1b[?1049h\x1b[?1002h\x1b[?1006h\x1b[?25l\x1b[>1u");
+      // Split ESC c across chunks to cover the control-sequence carry path.
+      pty().emit("\x1b");
+      pty().emit("c\x1b[2J\x1b[1;1HAFTER-RIS");
+      const socket = new FakeSocket();
+      room.attachClient(
+        { id: "after-ris", name: "After RIS", colorIndex: 0, cols: 80, rows: 24, replayBytes: 65536 },
+        socket
+      );
+      const snapshot = await waitForSnapshot(socket);
+      expect(String(snapshot.data)).toContain("AFTER-RIS");
+      expect(snapshot.alternateScreen).toBe(false);
+      expect(snapshot.mouseReporting).toBe(false);
+      expect(snapshot.mouseSgr).toBe(false);
+      expect(snapshot.cursorHidden).toBe(false);
+      expect(snapshot.keyboardEnhanced).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");