Fix terminal zoom geometry and repaint ordering

server/resize.test.mjs

@@ -52,7 +52,7 @@ function view(id, cols, rows, mirror = false) {
       ? new Headless({ cols, rows, scrollback: 20000, allowProposedApi: true })
       : null;
     const v = {
-      bytes: '', frames: [], term,
+      bytes: '', frames: [], events: [], term,
       type: (data) => ws.send(JSON.stringify({ t: 'i', d: data })),
       resize: (nextCols, nextRows) => ws.send(JSON.stringify({ t: 'r', cols: nextCols, rows: nextRows })),
       claim: () => ws.send(JSON.stringify({ t: 'claim' })),
@@ -75,6 +75,7 @@ function view(id, cols, rows, mirror = false) {
         let frame;
         try { frame = JSON.parse(text.slice(CTRL.length)); } catch { return; }
         v.frames.push(frame);
+        v.events.push({ type: 'frame', frame });
         if (term && (frame.t === 'grid' || frame.t === 'restore')) {
           const applyGrid = () => {
             if (frame.reset) { term.reset(); term.clear(); }
@@ -90,6 +91,7 @@ function view(id, cols, rows, mirror = false) {
         }
       } else {
         v.bytes += text;
+        v.events.push({ type: 'data', text });
         if (term) term.write(text);
       }
     });
@@ -144,6 +146,33 @@ try {
     await stop(id);
   }
 
+  // The geometry frame must precede output triggered by SIGWINCH. Otherwise a
+  // TUI's repaint is interpreted at the old size and only reflowed afterward,
+  // which can leave duplicate or displaced rows in a browser emulator.
+  {
+    const id = await session('ordered repaint');
+    const v = await view(id, 100, 30, true);
+    await sleep(500);
+    v.type(`trap 'printf "\\033[2J\\033[HRESIZE-AT-%sx%s\\n" "$COLUMNS" "$LINES"' WINCH\r`);
+    await sleep(400);
+    v.events.length = 0;
+    v.resize(73, 21);
+    const repainted = await waitFor(() => v.events.some((event) => event.type === 'data'
+      && event.text.includes('RESIZE-AT-73x21')));
+    const gridAt = v.events.findIndex((event) => event.type === 'frame'
+      && event.frame.t === 'grid' && event.frame.cols === 73 && event.frame.rows === 21);
+    const repaintAt = v.events.findIndex((event) => event.type === 'data'
+      && event.text.includes('RESIZE-AT-73x21'));
+    check('SIGWINCH repaint arrives after the confirmed grid', repainted && gridAt >= 0 && gridAt < repaintAt,
+      `grid event ${gridAt}, repaint event ${repaintAt}`);
+    if (Headless) {
+      const screen = await v.screenText();
+      check('ordered repaint is rendered once', screen.split('RESIZE-AT-73x21').length - 1 === 1);
+    }
+    v.close();
+    await stop(id);
+  }
+
   // A drag should issue one final resize, not one SIGWINCH per animation frame.
   {
     const id = await session('resize storm');
@@ -161,6 +190,21 @@ try {
     await stop(id);
   }
 
+  // Low zoom on a large/high-DPI panel can legitimately exceed the former
+  // 400x200 cap. The safety bound must not create dead space in that range.
+  {
+    const id = await session('large panel');
+    const v = await view(id, 120, 40);
+    await sleep(300);
+    v.resize(640, 300);
+    const expanded = await waitFor(() => v.lastFrame('grid')?.cols === 640
+      && v.lastFrame('grid')?.rows === 300);
+    check('large low-zoom panel is not clipped to the legacy grid cap', expanded,
+      JSON.stringify(v.lastFrame('grid')));
+    v.close();
+    await stop(id);
+  }
+
   // Reattachment is serialized from Ghostty state, not from a 256 KiB suffix
   // of raw PTY traffic. Both the oldest and newest retained rows must return.
   {

server/src/runner.js

@@ -69,6 +69,12 @@ const SCROLLBACK_BYTES = Number.isFinite(configuredScrollback) && configuredScro
 // fires per animation frame while a window is dragged; coalescing that burst
 // avoids repeatedly reflowing the terminal and repeatedly sending SIGWINCH.
 const RESIZE_SETTLE_MS = Number(process.env.AM_RESIZE_SETTLE_MS || 120);
+// Bound untrusted WebSocket geometry without imposing the old 400x200 ceiling,
+// which left visible dead space on high-DPI displays at low zoom levels.
+const MIN_COLS = 20;
+const MIN_ROWS = 5;
+const MAX_COLS = 1000;
+const MAX_ROWS = 500;
 
 const hosts = new Map(); // session id -> host
 
@@ -151,6 +157,15 @@ function effectiveGrid(host) {
   return host.controller?.want || { cols: host.cols, rows: host.rows };
 }
 
+function preferredGrid(cols, rows, fallback) {
+  const c = Number.isFinite(cols) ? Math.round(cols) : fallback.cols;
+  const r = Number.isFinite(rows) ? Math.round(rows) : fallback.rows;
+  return {
+    cols: Math.max(MIN_COLS, Math.min(MAX_COLS, c)),
+    rows: Math.max(MIN_ROWS, Math.min(MAX_ROWS, r)),
+  };
+}
+
 function notifyGrid(host, reset = false) {
   for (const sub of host.subs) {
     sub.onGrid(host.cols, host.rows, host.controller === sub, host.subs.size, reset);
@@ -172,8 +187,12 @@ function applyGrid(host) {
   host.cols = cols;
   host.rows = rows;
   try { host.vt.resize(cols, rows); } catch {}
-  try { host.pty.resize(cols, rows); } catch {}
+  // Put the geometry frame on every viewer's ordered WebSocket stream before
+  // SIGWINCH can make the foreground application repaint at the new size.
+  // Otherwise those repaint bytes may be interpreted using the old grid and
+  // leave duplicated or displaced rows in the browser emulator.
   notifyGrid(host, false);
+  try { host.pty.resize(cols, rows); } catch {}
   return true;
 }
 
@@ -740,10 +759,7 @@ export function attach(session, cols, rows) {
     onData: () => {},
     onExit: () => {},
     onGrid: () => {},
-    want: {
-      cols: Math.max(20, Math.min(400, Math.round(Number.isFinite(cols) ? cols : host.cols))),
-      rows: Math.max(5, Math.min(200, Math.round(Number.isFinite(rows) ? rows : host.rows))),
-    },
+    want: preferredGrid(cols, rows, host),
   };
   host.subs.add(sub);
   if (!host.controller) host.controller = sub;
@@ -765,10 +781,7 @@ export function attach(session, cols, rows) {
     // controller's request changes the PTY.
     resize: (c, r) => {
       if (!Number.isFinite(c) || !Number.isFinite(r)) return;
-      const want = {
-        cols: Math.max(20, Math.min(400, Math.round(c))),
-        rows: Math.max(5, Math.min(200, Math.round(r))),
-      };
+      const want = preferredGrid(c, r, host);
       const had = sub.want;
       sub.want = want;
       if (had && had.cols === want.cols && had.rows === want.rows) return;

web/src/components/TerminalPane.tsx

@@ -145,7 +145,7 @@ export default function TerminalPane({
 }) {
   const hostRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
-  const localLayoutRef = useRef<() => void>(() => {});
+  const resyncRef = useRef<() => void>(() => {});
   const reconnectRef = useRef<() => void>(() => {});
   const controllerRef = useRef(false);
   // Send a raw byte string to the PTY (for the mobile key-bar: arrows, Esc…).
@@ -199,7 +199,9 @@ export default function TerminalPane({
   useEffect(() => {
     const term = new Terminal({
       fontFamily: "'Geist Mono', ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', monospace",
-      fontSize: 13,
+      // Start at the requested zoom so attachment does not briefly create a
+      // 100% grid and then force an avoidable reflow as the session boots.
+      fontSize: Math.round((13 * zoom) / 100),
       cursorBlink: true,
       scrollback: 20000,
       theme: THEMES[theme],
@@ -299,25 +301,8 @@ export default function TerminalPane({
     // reflow, and it gives the initial size we open the socket with. Every later
     // size change goes through resync() as a REQUEST — see there.
     try { fit.fit(); } catch { /* layout not ready yet */ }
-    let layoutFrame = 0;
-    const syncLocalLayout = () => {
-      cancelAnimationFrame(layoutFrame);
-      layoutFrame = requestAnimationFrame(() => {
-        const box = hostRef.current;
-        const root = box?.querySelector<HTMLElement>('.xterm');
-        const screen = box?.querySelector<HTMLElement>('.xterm-screen');
-        if (!box || !root || !screen) return;
-        const style = getComputedStyle(box);
-        const innerWidth = box.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-        const innerHeight = box.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
-        root.style.width = `${Math.max(innerWidth, Math.ceil(screen.getBoundingClientRect().width))}px`;
-        root.style.height = `${Math.max(innerHeight, Math.ceil(screen.getBoundingClientRect().height))}px`;
-      });
-    };
-    localLayoutRef.current = syncLocalLayout;
-    syncLocalLayout();
     // Re-measure once the webfont is ready (glyph width changes vs the fallback).
-    document.fonts?.ready.then(() => { resync(); syncLocalLayout(); });
+    document.fonts?.ready.then(() => resync());
 
     let closedByUs = false;
     let retry: ReturnType<typeof setTimeout> | null = null;
@@ -386,7 +371,6 @@ export default function TerminalPane({
                   if (m.cols > 0 && m.rows > 0 && (term.cols !== m.cols || term.rows !== m.rows)) {
                     term.resize(m.cols, m.rows);
                   }
-                  syncLocalLayout();
                 } catch { /* ignore */ }
               };
               // Writes are asynchronous. A queued empty write is a barrier so
@@ -435,11 +419,8 @@ export default function TerminalPane({
       if (!box || box.clientWidth < 40 || box.clientHeight < 40) return;
       try {
         const d = fit.proposeDimensions();
-        // Zoom is local presentation, not PTY geometry. Normalize the measured
-        // cells back to the 13px canonical font before sending a preference.
-        const scale = (Number(term.options.fontSize) || 13) / 13;
-        const cols = d ? Math.max(1, Math.floor(d.cols * scale)) : 0;
-        const rows = d ? Math.max(1, Math.floor(d.rows * scale)) : 0;
+        const cols = d ? Math.max(1, d.cols) : 0;
+        const rows = d ? Math.max(1, d.rows) : 0;
         if (cols > 0 && rows > 0) send({ t: 'r', cols, rows });
       } catch { /* layout not ready */ }
     };
@@ -449,6 +430,7 @@ export default function TerminalPane({
       if (resyncTimer) clearTimeout(resyncTimer);
       resyncTimer = setTimeout(() => { resyncTimer = null; requestSize(); }, 80);
     };
+    resyncRef.current = resync;
     const onReturn = () => resync();
     const onVisible = () => { if (!document.hidden) onReturn(); };
     // Typing means the user sees enough to interact — drop the boot cover.
@@ -504,7 +486,6 @@ export default function TerminalPane({
       if (bootTimer) clearTimeout(bootTimer);
       if (bootCheck) clearTimeout(bootCheck);
       if (resyncTimer) clearTimeout(resyncTimer);
-      cancelAnimationFrame(layoutFrame);
       ro.disconnect();
       host.removeEventListener('pointerdown', onPointerDown, true);
       host.removeEventListener('paste', onPaste, true);
@@ -520,7 +501,7 @@ export default function TerminalPane({
       try { ws?.close(); } catch { /* ignore */ }
       term.dispose();
       termRef.current = null;
-      localLayoutRef.current = () => {};
+      resyncRef.current = () => {};
     };
   }, [session.id]);
 
@@ -529,13 +510,14 @@ export default function TerminalPane({
     if (termRef.current) termRef.current.options.theme = THEMES[theme];
   }, [theme]);
 
-  // Zoom changes only this viewer. The canonical terminal rows/columns stay
-  // fixed, and the host becomes a two-dimensional viewport when cells grow.
+  // Font size and PTY geometry move together. The controller asks the server
+  // for the grid that actually fits this pane; the confirmed grid then resizes
+  // every viewer in order with the PTY output stream.
   useEffect(() => {
     const t = termRef.current;
     if (!t) return;
     t.options.fontSize = Math.round((13 * zoom) / 100);
-    localLayoutRef.current();
+    resyncRef.current();
   }, [zoom]);
 
   // Move keyboard focus into the terminal whenever this pane becomes the active

web/src/styles.css

@@ -558,7 +558,7 @@ body {
 .slot.focused { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.35); }
 .slot.focused .pane-head { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
 
-.term-host { flex: 1; min-height: 0; padding: 10px 8px 8px 12px; background: var(--term-bg); overflow: auto; overscroll-behavior: contain; }
+.term-host { flex: 1; min-height: 0; background: var(--term-bg); overflow: hidden; }
 /* The grid is measured against this filler, so it must stay unpadded: FitAddon
    reads the PARENT's computed height and does NOT subtract its padding, so a
    padded parent made the grid count a row that doesn't fit and the bottom line
@@ -588,7 +588,7 @@ body {
 .term-paste .tp-input { width: 100%; box-sizing: border-box; resize: none; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
   background: var(--panel-2); color: var(--text); font-size: 13px; line-height: 1.35; }
 .term-paste .tp-input:focus { outline: none; border-color: var(--accent); }
-.term-host .xterm { min-width: 100%; min-height: 100%; }
+.term-host .xterm { width: 100%; height: 100%; padding: 10px 8px 8px 12px; }
 .xterm .xterm-viewport { scrollbar-width: none; }
 .xterm .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }