hop2 0.11.4 → 0.11.5

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

@@ -15,7 +15,7 @@ import { WebglAddon } from "@xterm/addon-webgl";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
 import { ContextMenu, type MenuRequest } from "./ContextMenu";
 import { collectTerminalMatches, selectTerminalMatch } from "../utils/terminalSearch";
-import { bufferLooksLikeClaude, createVoiceHold } from "../utils/voiceHold";
+import { createVoiceHold, isClaudeSurface } from "../utils/voiceHold";
 import {
   buildSwitcherModel,
   filterSessionsByOrigin,
@@ -162,7 +162,11 @@ const PREVIEW_BASE_LH = PREVIEW_BASE_FS * 1.3;
 let previewCharW = 0;
 const advanceCache = new Map<number, number>();
 if (typeof document !== "undefined") {
-  document.fonts?.ready?.then(() => { previewCharW = 0; advanceCache.clear(); }).catch(() => { /* no Font API */ });
+  document.fonts?.ready?.then(() => {
+    previewCharW = 0;
+    advanceCache.clear();
+    charHeightCache.clear();
+  }).catch(() => { /* no Font API */ });
 }
 const measureAdvanceAt = (fs: number) => {
   const hit = advanceCache.get(fs);
@@ -196,6 +200,33 @@ const tileLetterSpacing = (fs: number) => {
   return Math.floor(adv * dpr) / dpr - adv;
 };
 
+// Row height, the vertical half of the same story. xterm derives it from the
+// FONT'S natural line box (line-height:normal), not from fontSize — at 12px
+// Menlo that is 14px, so xterm's row is 18px while `fontSize * 1.3` says
+// 15.6. The preview was ~15% short per row: bottom-anchored, so the newest
+// lines looked right and everything above crept — the residual
+// preview → terminal shift on sessions with content up the screen.
+// Rule (probe-measured, exact at every size and dpr):
+//   row = floor(naturalCharHeight × lineHeight × dpr) / dpr
+const charHeightCache = new Map<number, number>();
+const measureCharHeightAt = (fs: number) => {
+  const hit = charHeightCache.get(fs);
+  if (hit) return hit;
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;visibility:hidden;white-space:pre;line-height:normal;font-size:${fs}px`;
+  el.style.fontFamily = "var(--font-terminal)";
+  el.textContent = "W";
+  document.body.appendChild(el);
+  const h = el.getBoundingClientRect().height || fs * 1.2;
+  el.remove();
+  charHeightCache.set(fs, h);
+  return h;
+};
+const tileRowHeight = (fs: number) => {
+  const dpr = (typeof window !== "undefined" && window.devicePixelRatio) || 1;
+  return Math.floor(measureCharHeightAt(fs) * 1.3 * dpr) / dpr;
+};
+
 // ONE font for the whole wall at a given zoom, derived from the box width —
 // never from any session's geometry. Both live tiles and static previews use
 // this, which is what makes the wall read as one surface instead of a
@@ -212,9 +243,11 @@ const previewScaleObserver = typeof ResizeObserver !== "undefined"
         const inner = box.firstElementChild as HTMLElement | null;
         if (!inner) continue;
         const fs2 = tileFontFor(box.clientWidth);
+        const rowH = tileRowHeight(fs2);
         inner.style.fontSize = fs2 + "px";
-        inner.style.lineHeight = Math.round(fs2 * 1.3) + "px";
+        inner.style.lineHeight = rowH + "px";
         inner.style.letterSpacing = tileLetterSpacing(fs2) + "px";
+        inner.style.setProperty("--tile-row-h", rowH + "px");
       }
     })
   : null;
@@ -239,7 +272,12 @@ const ScaledScreen = ({ frame }: { frame: PreviewFrame }) => {
     <div className="switcher-preview-scalebox" ref={boxRef}>
       <div
         className="switcher-preview-screen"
-        style={{ fontSize: PREVIEW_BASE_FS, lineHeight: `${PREVIEW_BASE_LH}px`, letterSpacing: `${tileLetterSpacing(PREVIEW_BASE_FS)}px` }}
+        style={{
+          fontSize: PREVIEW_BASE_FS,
+          lineHeight: `${tileRowHeight(PREVIEW_BASE_FS)}px`,
+          letterSpacing: `${tileLetterSpacing(PREVIEW_BASE_FS)}px`,
+          ["--tile-row-h" as string]: `${tileRowHeight(PREVIEW_BASE_FS)}px`
+        } as React.CSSProperties}
       >
         {renderPreviewRuns(padded)}
       </div>
@@ -312,16 +350,20 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   // "voice doesn't always work".
   const [voiceInterim, setVoiceInterim] = useState<string | null>(null);
   const voiceHoldRef = useRef<ReturnType<typeof createVoiceHold> | null>(null);
+  // Is this tile showing Claude Code? Decides KEY ENCODING (Shift+Enter's
+  // CSI-u) and voice eligibility, so it has to be right on restored
+  // sessions too. The `claudeApp` prop reads the session's foreground
+  // process, which an argv-launched restore reports as the wrapper shell
+  // FOREVER (`shell -lc "claude …; exec shell -l"`) — so it is false for
+  // every session that came back through `hop restore`. The buffer's own
+  // chrome is the honest witness; both callers share it.
+  const looksLikeClaude = () => isClaudeSurface(claudeAppRef.current, termRef.current as never);
   if (!voiceHoldRef.current) {
     voiceHoldRef.current = createVoiceHold({
       send: (data) => sendInputRef.current?.(data),
       notify: (m) => onNoticeRef.current?.(m),
       setOverlay: setVoiceInterim,
-      eligible: () => {
-        if (claudeAppRef.current) return true;
-        const t = termRef.current;
-        return !!t && bufferLooksLikeClaude(t as never);
-      }
+      eligible: () => looksLikeClaude()
     });
   }
 
@@ -329,6 +371,16 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   // find bar. Scope follows focus — ⌘F in a live tile searches THIS session;
   // ⌘F anywhere else is the wall filter, which finds sessions.
   const [find, setFind] = useState<{ query: string; index: number; total: number } | null>(null);
+  // The session's grid does not fit this tile — someone else (a full-screen
+  // client, the CLI, another person) holds the size, and our claim was
+  // declined or never made. The tile then crops silently, which reads as a
+  // rendering bug rather than "this terminal is bigger than this box". Track
+  // the overflow so the tile can SAY so, and let the user pan to the rest.
+  const [offGrid, setOffGrid] = useState<{ x: number; y: number; cols: number; rows: number } | null>(null);
+  const offGridRef = useRef<{ x: number; y: number; cols: number; rows: number } | null>(null);
+  // User's pan offset within the oversized terminal (px, <= 0). Null = follow
+  // the automatic bottom anchor.
+  const panRef = useRef<{ x: number; y: number } | null>(null);
   const findInputRef = useRef<HTMLInputElement | null>(null);
   const findIndexRef = useRef(-1);
   const runTileFind = (query: string, step = 0) => {
@@ -434,8 +486,54 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
         requestAnimationFrame(() => rescaleRef.current());
         return;
       }
-      inner.style.transformOrigin = "bottom left";
+      // BOTTOM-ANCHOR the live terminal, same rule as the preview.
+      //
+      // A session's grid rarely divides evenly into a tile: measured on the
+      // real wall, a 40-row session rendered 475px tall inside a 460px box,
+      // so the last row — Claude's composer, the newest output — sat below
+      // the clip and was simply invisible. Going live didn't help (identical
+      // geometry) and only full screen "fixed" it, by refitting. Autofit
+      // can't save it either: a one-row overflow is well inside the claim
+      // tolerance, so no resize is ever asked for and the crop is permanent.
+      // Translate so the LAST row is flush with the box bottom; overflow now
+      // crops the oldest rows off the top, which is what scrollback is for.
+      // Transform the SCREEN, not `.xterm`. `.xterm` sets overflow:hidden on
+      // itself, so translating it slides an already-clipped window: the rows
+      // outside never appear no matter how far you pan (and a rect-based
+      // measurement is fooled, because getBoundingClientRect reports clipped
+      // geometry as if visible — which is how the first version of this
+      // "fixed" the bottom crop on paper while the pixels stayed hidden).
+      // Moving the screen inside that clip is what actually reveals rows.
       inner.style.transform = "";
+      screen.style.transformOrigin = "bottom left";
+      screen.style.transform = "";
+      const boxRect = inner.getBoundingClientRect(); // .xterm IS the clip
+      const screenRect = screen.getBoundingClientRect(); // reads after the reset above
+      const overflowX = Math.max(0, Math.round(screenRect.width - boxRect.width));
+      const overflowY = Math.max(0, Math.round(screenRect.height - boxRect.height));
+      // Auto anchor: last row flush with the box bottom, left edge shown.
+      const autoY = Math.round(boxRect.bottom - screenRect.bottom);
+      const pan = panRef.current;
+      // A pan is clamped to whatever is actually off-screen right now — the
+      // tile may have been resized since the user dragged.
+      const px = pan ? Math.max(-overflowX, Math.min(0, pan.x)) : 0;
+      const py = pan ? Math.max(autoY, Math.min(0, pan.y)) : autoY;
+      if (pan) panRef.current = { x: px, y: py };
+      if (px !== 0 || py !== 0) screen.style.transform = `translate(${px}px, ${py}px)`;
+      // Only publish on CHANGE: rescale runs from a ResizeObserver, and
+      // setting a fresh object every pass would re-render (and re-observe)
+      // in a loop.
+      const next = overflowX > 1 || overflowY > 1
+        ? { x: overflowX, y: overflowY, cols: term.cols, rows: term.rows }
+        : null;
+      const prev = offGridRef.current;
+      const same = (!next && !prev)
+        || (!!next && !!prev && next.x === prev.x && next.y === prev.y
+            && next.cols === prev.cols && next.rows === prev.rows);
+      if (!same) {
+        offGridRef.current = next;
+        setOffGrid(next);
+      }
     };
     rescaleRef.current = rescale;
     const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(rescale) : null;
@@ -463,8 +561,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
         }
         return false;
       }
+      // Shift+Enter → CSI 13;2u (newline in Claude's composer instead of
+      // submit). Claude parses CSI-u unconditionally but no longer
+      // advertises the kitty protocol at boot, so keyboardEnhanced is
+      // legitimately false — detection of Claude ITSELF is the gate, and it
+      // must survive a restore (see looksLikeClaude). A plain shell would
+      // render raw CSI-u as junk text, so the gate stays.
       if (ev.key === "Enter" && ev.shiftKey && !ev.ctrlKey && !ev.metaKey && !ev.altKey
-          && (kbdEnhancedRef.current || claudeAppRef.current)) {
+          && (kbdEnhancedRef.current || looksLikeClaude())) {
         if (ev.type === "keydown") sendInputRef.current?.("\x1b[13;2u");
         return false;
       }
@@ -479,12 +583,79 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       return true;
     });
     const sub = term.onData((data) => sendInputRef.current?.(data));
+    // ⌥-drag pans an oversized terminal inside its tile. The modifier matters:
+    // a plain drag belongs to the session (text selection, or mouse reports
+    // to a tracking app like Claude), so panning must not steal it.
+    let panning: { sx: number; sy: number; ox: number; oy: number } | null = null;
+    const panBounds = () => {
+      const screen = box.querySelector(".xterm-screen") as HTMLElement | null;
+      const clip = box.querySelector(".xterm") as HTMLElement | null;
+      if (!screen || !clip) return null;
+      const boxRect = clip.getBoundingClientRect(); // same clip rescale uses
+      const scrRect = screen.getBoundingClientRect();
+      return {
+        overflowX: Math.max(0, scrRect.width - boxRect.width),
+        overflowY: Math.max(0, scrRect.height - boxRect.height),
+        autoY: Math.round(boxRect.bottom - scrRect.bottom)
+      };
+    };
+    const onPanDown = (e: PointerEvent) => {
+      if (!e.altKey || e.button !== 0) return;
+      const b = panBounds();
+      if (!b || (b.overflowX < 1 && b.overflowY < 1)) return;
+      const cur = panRef.current || { x: 0, y: b.autoY };
+      panRef.current = cur;
+      panning = { sx: e.clientX, sy: e.clientY, ox: cur.x, oy: cur.y };
+      try { box.setPointerCapture(e.pointerId); } catch { /* not captureable */ }
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const onPanMove = (e: PointerEvent) => {
+      if (!panning) return;
+      panRef.current = {
+        x: panning.ox + (e.clientX - panning.sx),
+        y: panning.oy + (e.clientY - panning.sy)
+      };
+      rescaleRef.current(); // clamps to the current overflow and repaints
+      e.preventDefault();
+    };
+    const endPan = (e: PointerEvent) => {
+      if (!panning) return;
+      panning = null;
+      try { box.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+    };
+    // The natural gesture: a two-finger SIDEWAYS swipe pans a terminal that
+    // is wider than its tile. Horizontal wheel deltas are otherwise unused
+    // here (vertical belongs to scrolling the session), so this costs no
+    // other interaction and needs no modifier. Capture + non-passive because
+    // xterm would otherwise consume the event on a tracking app.
+    const onPanWheel = (e: WheelEvent) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return; // vertical = scroll
+      const b = panBounds();
+      if (!b || b.overflowX < 1) return;
+      const cur = panRef.current || { x: 0, y: b.autoY };
+      panRef.current = { x: cur.x - e.deltaX, y: cur.y };
+      rescaleRef.current();
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    box.addEventListener("wheel", onPanWheel, { capture: true, passive: false });
+    box.addEventListener("pointerdown", onPanDown, true);
+    box.addEventListener("pointermove", onPanMove, true);
+    box.addEventListener("pointerup", endPan, true);
+    box.addEventListener("pointercancel", endPan, true);
+
     const detachFlywheel = attachScrollFlywheel(box, () => termRef.current as never, {
       linesPerNotch: 4,
       lineHeightPx: () => Math.max(1, ((term as never as { _core?: { _renderService?: { dimensions?: { css?: { cell?: { height?: number } } } } } })._core
         ?._renderService?.dimensions?.css?.cell?.height) || PREVIEW_BASE_FS * 1.3)
     });
     return () => {
+      box.removeEventListener("wheel", onPanWheel, { capture: true } as EventListenerOptions);
+      box.removeEventListener("pointerdown", onPanDown, true);
+      box.removeEventListener("pointermove", onPanMove, true);
+      box.removeEventListener("pointerup", endPan, true);
+      box.removeEventListener("pointercancel", endPan, true);
       detachFlywheel();
       ro?.disconnect();
       sub.dispose();
@@ -857,6 +1028,28 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
               {viewers.some((v) => /agent|hopa|\(pane\)/i.test(v.name)) && <b className="viewer-agent">AI</b>}
             </span>
           )}
+          {offGrid && (
+            // Say WHY the tile is cropped. Without this the session just
+            // looks broken; with it, the size is visibly someone else's
+            // choice, and both remedies are one gesture away.
+            <button
+              type="button"
+              className="switcher-tile-offgrid"
+              title={
+                `This session's terminal is ${offGrid.cols}×${offGrid.rows}, larger than the tile`
+                + (driver ? ` — ${driver.name} is using it right now` : viewers.length ? " — another client holds the size" : "")
+                + ".\n⌥-drag to pan. Click to resize the session to fit this tile."
+              }
+              onClick={(e) => {
+                e.stopPropagation();
+                panRef.current = null; // back to the automatic anchor
+                claimRef.current();
+              }}
+            >
+              <span className="offgrid-glyph" aria-hidden="true">⤢</span>
+              {offGrid.cols}×{offGrid.rows}
+            </button>
+          )}
           {find && (
             <span className="switcher-tile-find" onClick={(e) => e.stopPropagation()}>
               <input
@@ -1341,6 +1534,31 @@ 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.
+  useEffect(() => {
+    if (!open || focusedKey || !currentRoom) return;
+    const current = flatNav.find((s) => (s.internalName || s.name) === currentRoom || s.name === currentRoom);
+    if (!current) return;
+    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]);
   // 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.

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

@@ -3482,15 +3482,25 @@ button.primary {
   overflow: hidden;
 }
 .switcher-preview-screen {
+  /* BOTTOM-anchored. Anchored at the top, a screen even slightly taller than
+     its tile had its LAST rows clipped — and the last rows are the composer
+     and the newest output, i.e. the entire reason to look at the tile. The
+     autofit claim can't rescue it either: a one-row overflow is inside the
+     ~15% tolerance, so no resize is ever requested and the crop is
+     permanent. Overflow now eats the OLDEST rows off the top instead. */
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
-  transform-origin: top left;
+  transform-origin: bottom left;
   font-family: var(--font-terminal);
 }
 .switcher-preview-screen .switcher-preview-row {
-  height: 1.3em;
-  line-height: 1.3em;
+  /* --tile-row-h is xterm's OWN row height for this font (derived from the
+     font's natural line box, not fontSize — see tileRowHeight). Matching it
+     is what keeps preview rows on the same baselines the live terminal will
+     use; the 1.3em fallback only applies before the measurement lands. */
+  height: var(--tile-row-h, 1.3em);
+  line-height: var(--tile-row-h, 1.3em);
 }
 
 
@@ -3586,6 +3596,31 @@ button.primary {
   white-space: nowrap;
 }
 
+/* Live-tile: the session's grid is bigger than this tile, so the view is
+   cropped. Same pill vocabulary as the presence chrome — this is status,
+   not an error, because someone else legitimately owns the size. */
+.switcher-live-chrome .switcher-tile-offgrid {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--ink-muted);
+  padding: 0 5px;
+  height: 16px;
+  border: 1px solid color-mix(in srgb, var(--ink-muted) 30%, transparent);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--surface) 80%, transparent);
+  cursor: pointer;
+}
+.switcher-live-chrome .switcher-tile-offgrid:hover {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.switcher-live-chrome .offgrid-glyph {
+  opacity: 0.75;
+}
+
 /* Live-tile: who else is here, and who is driving. */
 .switcher-live-chrome .switcher-live-viewers {
   display: inline-flex;

package/hay/apps/web/src/utils/scrollFlywheel.ts

@@ -24,10 +24,23 @@ type TerminalLike = {
   modes?: { mouseTrackingMode?: string };
 };
 
-// Momentum (and scrollback UI generally) is only honest when the TERMINAL
-// owns scrolling. With mouse tracking on, xterm forwards wheel events to the
-// app (claude scrolls its own transcript) — synthetic glide would scroll the
-// terminal viewport into torn scrollback underneath the app.
+/** Lines this wheel event should move, mirroring xterm's own arithmetic. */
+const wheelLines = (e: WheelEvent, opts: { linesPerNotch: number; lineHeightPx: () => number }) =>
+  e.deltaMode === 1
+    ? e.deltaY * opts.linesPerNotch
+    : (e.deltaY / Math.max(1, opts.lineHeightPx())) * opts.linesPerNotch;
+
+// WHO OWNS THE WHEEL. Momentum (and scrollback UI generally) is only honest
+// when the TERMINAL owns scrolling: the normal buffer, with the app not
+// tracking the mouse. Otherwise the app owns the wheel and we keep our hands
+// off — xterm forwards the notch and the app scrolls its own view.
+//
+// Measured on the live fleet (2026-07-31): every Claude Code session runs
+// ALT-SCREEN (?1049h) with mouse tracking on, so Claude is always in the
+// app-owns-it branch — its transcript is its own to scroll, and there is no
+// local scrollback behind it to move. Do not "improve" this by scrolling
+// locally when tracking is on: a tracking app asked for wheel events, and
+// stealing them breaks the very apps that requested them.
 const terminalOwnsScrolling = (term: TerminalLike) =>
   term.buffer.active.type === "normal" && (term.modes?.mouseTrackingMode ?? "none") === "none";
 
@@ -61,13 +74,14 @@ export const attachScrollFlywheel = (
 ): (() => void) => {
   let vel = 0; // lines/second, signed
   let carry = 0; // fractional-line remainder between frames
+  let synthetic = false; // true while WE re-dispatch a wheel event
   let burst = 0; // wheel events in the current spin
   let lastWheelAt = 0;
   let lastFrameAt = 0;
   let raf = 0;
   let idleTimer = 0;
 
-  const stop = () => {
+  const stopLocal = () => {
     if (raf) cancelAnimationFrame(raf);
     if (idleTimer) window.clearTimeout(idleTimer);
     raf = 0;
@@ -77,6 +91,102 @@ export const attachScrollFlywheel = (
     burst = 0;
   };
 
+  // ---- App-owned scrolling (alt screen / mouse tracking) -------------------
+  // The app scrolls itself, one step per wheel event. We re-dispatch wheel
+  // events to give that stream a natural shape: a notch is worth a few steps,
+  // and a spin coasts to a stop instead of halting dead. Re-dispatching (vs
+  // encoding mouse reports ourselves) keeps xterm the single owner of the
+  // wire format — whatever it sends for a real notch is exactly what it sends
+  // for ours.
+  const APP_STEPS_PER_NOTCH = 3;
+  const APP_MAX_RATE = 90; // steps/sec — fast, still ordered
+  let appVel = 0;
+  let appCarry = 0;
+  let appRaf = 0;
+  let appIdle = 0;
+  let appBurst = 0;
+  let appLastAt = 0;
+  let appTarget: EventTarget | null = null;
+  let appProto: { deltaY: number; clientX: number; clientY: number } | null = null;
+
+  const stopApp = () => {
+    if (appRaf) cancelAnimationFrame(appRaf);
+    if (appIdle) window.clearTimeout(appIdle);
+    appRaf = 0;
+    appIdle = 0;
+    appVel = 0;
+    appCarry = 0;
+    appBurst = 0;
+  };
+
+  const stop = () => { stopLocal(); stopApp(); };
+
+  const dispatchStep = () => {
+    if (!appTarget || !appProto) return;
+    synthetic = true;
+    try {
+      appTarget.dispatchEvent(new WheelEvent("wheel", {
+        deltaY: appProto.deltaY,
+        deltaMode: 0,
+        clientX: appProto.clientX,
+        clientY: appProto.clientY,
+        bubbles: true,
+        cancelable: true
+      }));
+    } catch {
+      /* target detached mid-glide */
+    } finally {
+      synthetic = false;
+    }
+  };
+
+  const appGlide = (t: number) => {
+    appRaf = 0;
+    const term = getTerm();
+    // Mode flipped (app exited, screen switched) or run out of speed.
+    if (!term || terminalOwnsScrolling(term) || Math.abs(appVel) < 4) return stopApp();
+    const dt = lastFrameAt ? Math.min(0.05, (t - lastFrameAt) / 1000) : 0.016;
+    lastFrameAt = t;
+    appCarry += Math.abs(appVel) * dt;
+    let steps = Math.trunc(appCarry);
+    appCarry -= steps;
+    while (steps-- > 0) dispatchStep();
+    appVel *= Math.exp(-dt / 0.35);
+    appRaf = requestAnimationFrame(appGlide);
+  };
+
+  const appWheel = (e: WheelEvent) => {
+    appTarget = e.target;
+    appProto = { deltaY: e.deltaY, clientX: e.clientX, clientY: e.clientY };
+    if (appRaf) { cancelAnimationFrame(appRaf); appRaf = 0; }
+
+    const now = e.timeStamp || performance.now();
+    const gap = now - appLastAt;
+    appLastAt = now;
+    if (gap > 250) appBurst = 0;
+    appBurst += 1;
+
+    // One notch already produced one step (the real event xterm just
+    // forwarded); add the rest so a notch moves like a notch.
+    for (let i = 1; i < APP_STEPS_PER_NOTCH; i++) dispatchStep();
+
+    const rate = APP_STEPS_PER_NOTCH / (Math.min(Math.max(gap, 30), 200) / 1000);
+    const signed = Math.sign(e.deltaY) * rate;
+    appVel = Math.sign(signed) === Math.sign(appVel) ? 0.6 * signed + 0.4 * appVel : signed;
+    appVel = Math.max(-APP_MAX_RATE, Math.min(APP_MAX_RATE, appVel));
+
+    if (appIdle) window.clearTimeout(appIdle);
+    appIdle = window.setTimeout(() => {
+      appIdle = 0;
+      if (appBurst >= 3 && Math.abs(appVel) >= 4) {
+        lastFrameAt = 0;
+        appRaf = requestAnimationFrame(appGlide);
+      } else {
+        stopApp();
+      }
+    }, 80);
+  };
+
   const glide = (t: number) => {
     raf = 0;
     const term = getTerm();
@@ -96,11 +206,24 @@ export const attachScrollFlywheel = (
   };
 
   const onWheel = (e: WheelEvent) => {
+    if (synthetic) return; // our own re-dispatch — never feed it back in
     const term = getTerm();
     if (!term) return;
-    // Alt screen or trackpad: no synthetic inertia, and kill any active glide
-    // (mode may have flipped mid-glide).
-    if (!terminalOwnsScrolling(term) || !isDiscreteWheel(e)) return stop();
+    // App owns the wheel (alt screen, or mouse tracking on — i.e. every
+    // Claude session). We must not scroll locally, but a terminal app moves
+    // one step per wheel event, so a discrete wheel crawls a row at a time.
+    // Give it the SAME feel a native scroll has: amplify each notch into a
+    // few events, then coast with a decaying stream after the spin. The app
+    // still does all the scrolling; we only shape the event rate.
+    if (!terminalOwnsScrolling(term)) {
+      stopLocal();
+      if (isDiscreteWheel(e)) appWheel(e);
+      else stopApp(); // trackpad: the OS already sends a dense glide
+      return;
+    }
+    stopApp();
+    // Trackpad: native inertia already glides; never double it.
+    if (!isDiscreteWheel(e)) return stop();
     if (raf) { cancelAnimationFrame(raf); raf = 0; } // wheel resumes: rebuild, don't glide yet
 
     const now = e.timeStamp || performance.now();
@@ -109,10 +232,7 @@ export const attachScrollFlywheel = (
     if (gap > 250) burst = 0;
     burst += 1;
 
-    const notchLines =
-      e.deltaMode === 1
-        ? e.deltaY * opts.linesPerNotch
-        : (e.deltaY / Math.max(1, opts.lineHeightPx())) * opts.linesPerNotch;
+    const notchLines = wheelLines(e, opts);
     const rate = notchLines / (Math.min(Math.max(gap, 30), 200) / 1000);
     // Same direction: blend toward the new rate. Direction flip: hard reset.
     vel = Math.sign(rate) === Math.sign(vel) ? 0.6 * rate + 0.4 * vel : rate;
@@ -133,12 +253,18 @@ export const attachScrollFlywheel = (
   };
 
   const kill = () => stop();
-  el.addEventListener("wheel", onWheel, { passive: true });
+  // CAPTURE phase, but strictly observational (passive: we never
+  // preventDefault). Capture is REQUIRED: when the app is tracking the
+  // mouse, xterm's own handler calls stopPropagation() on the way out, so a
+  // bubble-phase listener on this ancestor never runs at all — which is why
+  // the app-scroll shaping below silently did nothing. Observing first lets
+  // xterm do exactly what it always did, and lets us add steps around it.
+  el.addEventListener("wheel", onWheel, { capture: true, passive: true });
   el.addEventListener("mousedown", kill, true);
   window.addEventListener("keydown", kill, true);
   return () => {
     stop();
-    el.removeEventListener("wheel", onWheel);
+    el.removeEventListener("wheel", onWheel, { capture: true } as EventListenerOptions);
     el.removeEventListener("mousedown", kill, true);
     window.removeEventListener("keydown", kill, true);
   };

package/hay/apps/web/src/utils/voiceHold.ts

@@ -152,6 +152,19 @@ export const createVoiceHold = (opts: VoiceHoldOptions) => {
   return { handleKey, dispose, isActive: () => active };
 };
 
+/**
+ * Is this surface running Claude Code? Used for KEY ENCODING (Shift+Enter's
+ * CSI-u) and voice eligibility, so it must stay true for RESTORED sessions:
+ * an argv-launched restore (`shell -lc "claude …; exec shell -l"`) reports
+ * the wrapper shell as the foreground process forever, so a process-only
+ * check goes false on every session that came back through `hop restore`.
+ * The terminal's own chrome is the honest second witness.
+ */
+export const isClaudeSurface = (
+  foregroundIsClaude: boolean,
+  terminal: Parameters<typeof bufferLooksLikeClaude>[0] | null | undefined
+): boolean => foregroundIsClaude || (!!terminal && bufferLooksLikeClaude(terminal));
+
 /** Claude chrome scan over a terminal's visible rows — shared eligibility. */
 export const bufferLooksLikeClaude = (t: {
   rows: number;

package/hay/apps/web/test/claudeSurface.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { isClaudeSurface } from "../src/utils/voiceHold";
+
+// A fake xterm buffer showing the given visible rows.
+const term = (rows: string[]) => ({
+  rows: rows.length,
+  buffer: {
+    active: {
+      baseY: 0,
+      getLine: (row: number) =>
+        rows[row] === undefined ? undefined : { translateToString: () => rows[row] }
+    }
+  }
+});
+
+const CLAUDE_SCREEN = [
+  "> summarize this file",
+  "",
+  "⏵⏵ bypass permissions on (shift+tab to cycle)"
+];
+const SHELL_SCREEN = ["jianzhou@MED-GEN-ML-15 hop2 % ls", "hop  hay  scripts", "jianzhou@MED-GEN-ML-15 hop2 %"];
+
+describe("isClaudeSurface", () => {
+  it("trusts the foreground process when it names Claude", () => {
+    expect(isClaudeSurface(true, null)).toBe(true);
+    expect(isClaudeSurface(true, term(SHELL_SCREEN) as never)).toBe(true);
+  });
+
+  // THE regression: `hop restore` launches Claude as the room's argv
+  // (`shell -lc "claude …; exec shell -l"`), so the room reports the WRAPPER
+  // SHELL as its foreground process for the rest of the session's life. A
+  // process-only check therefore reads false on every restored session —
+  // which silently disabled Shift+Enter (CSI 13;2u) in wall tiles, turning
+  // every newline attempt into a submit.
+  it("still recognizes Claude when the process check is blind (restored session)", () => {
+    expect(isClaudeSurface(false, term(CLAUDE_SCREEN) as never)).toBe(true);
+  });
+
+  it("stays false for a plain shell, where raw CSI-u would render as junk", () => {
+    expect(isClaudeSurface(false, term(SHELL_SCREEN) as never)).toBe(false);
+    expect(isClaudeSurface(false, null)).toBe(false);
+    expect(isClaudeSurface(false, undefined)).toBe(false);
+  });
+});