fix(desktop): keep terminal rendering responsive

Author: Sg312

apps/desktop/src/main/terminal/session.ts

@@ -47,6 +47,18 @@ const FLUSH_INTERVAL_MS = 8
  */
 const PAUSE_HIGH_WATER_CHARS = 512 * 1024
 
+/**
+ * How far a retained buffer may overshoot its limit before being trimmed.
+ *
+ * Trimming to the exact limit means copying the entire buffer on every chunk
+ * once it is full — a quarter of a megabyte per chunk, hundreds of times a
+ * second under heavy output, on the process that also feeds the renderer.
+ * That copying is what makes the panel stutter while something is printing.
+ * Letting the buffer overshoot and trimming in one go amortizes it to a single
+ * copy per slack-sized batch.
+ */
+const TRIM_SLACK_CHARS = 64_000
+
 /** Control keys mapped to the bytes a terminal actually sends. */
 const CONTROL_KEY_BYTES: Record<TerminalControlKey, string> = {
   'ctrl-c': '\u0003',
@@ -534,7 +546,7 @@ export class TerminalSession {
       this.trackAltScreen(text)
       this.emulator.write(text)
       this.scrollback += text
-      if (this.scrollback.length > MAX_SCROLLBACK_CHARS) {
+      if (this.scrollback.length > MAX_SCROLLBACK_CHARS + TRIM_SLACK_CHARS) {
         this.scrollback = this.scrollback.slice(-MAX_SCROLLBACK_CHARS)
       }
       if (this.pendingCommand?.capturing) {
@@ -614,7 +626,10 @@ export class TerminalSession {
       pending.output += text
       return
     }
-    pending.overflow = (pending.overflow + text).slice(-MAX_CAPTURE_CHARS)
+    pending.overflow += text
+    if (pending.overflow.length > MAX_CAPTURE_CHARS + TRIM_SLACK_CHARS) {
+      pending.overflow = pending.overflow.slice(-MAX_CAPTURE_CHARS)
+    }
   }
 
   /**

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/terminal-session/terminal-session.tsx

@@ -78,6 +78,30 @@ const DARK_THEME = {
   brightWhite: '#f0f6fc',
 }
 
+/**
+ * Loads the WebGL renderer and drops it if its context dies.
+ *
+ * WebGL is a large win on heavy output, but the context can be lost long after
+ * it loads: a GPU process restart, a driver hiccup, the window moving between
+ * GPUs, or simply too many live contexts — each terminal tab holds its own and
+ * the browser silently drops the oldest past its limit. An addon left loaded
+ * after that keeps painting a dead surface while the buffer moves on, which is
+ * what makes rows freeze or tear mid-scroll. Disposing falls back to xterm's
+ * DOM renderer: slower, but it cannot go stale.
+ *
+ * There is no canvas tier because `@xterm/addon-canvas` has no release for
+ * xterm 6 — every published version, latest beta included, peers on xterm 5.
+ */
+function attachWebglRenderer(terminal: Terminal): void {
+  try {
+    const webgl = new WebglAddon()
+    webgl.onContextLoss(() => webgl.dispose())
+    terminal.loadAddon(webgl)
+  } catch {
+    // No usable WebGL on this machine; the DOM renderer stays in place.
+  }
+}
+
 /**
  * One terminal's xterm instance.
  *
@@ -116,13 +140,7 @@ function TerminalView({ terminalId, active }: { terminalId: string; active: bool
     terminal.unicode.activeVersion = '11'
 
     terminal.open(host)
-    // WebGL is a big win on heavy output but is unavailable in some GPU
-    // configurations; the DOM renderer is a correct, slower fallback.
-    try {
-      terminal.loadAddon(new WebglAddon())
-    } catch {
-      // Canvas/DOM renderer remains in place.
-    }
+    attachWebglRenderer(terminal)
 
     terminalRef.current = terminal
     fitRef.current = fit
@@ -151,9 +169,8 @@ function TerminalView({ terminalId, active }: { terminalId: string; active: bool
     // widths — which is the flickering, scrolling, newline-spewing mess. Only
     // the size the drag settles on is worth telling the PTY about.
     //
-    // Hidden tabs are skipped because `invisible` keeps layout: without this
-    // every background terminal would repaint through the same sequence, for a
-    // resize nobody is watching. They refit when activated.
+    // Hidden tabs are skipped because they measure 0x0, and fitting that would
+    // resize their PTY to nonsense. They refit on activation.
     let resizeTimer: ReturnType<typeof setTimeout> | null = null
     const observer = new ResizeObserver(() => {
       if (resizeTimer) clearTimeout(resizeTimer)
@@ -205,7 +222,13 @@ function TerminalView({ terminalId, active }: { terminalId: string; active: bool
     return () => cancelAnimationFrame(frame)
   }, [active])
 
-  return <div ref={hostRef} className={cn('absolute inset-0 px-2 py-1', !active && 'invisible')} />
+  // An inactive tab is `display: none`, not merely invisible. xterm watches its
+  // element with an IntersectionObserver and pauses rendering once it stops
+  // intersecting — which `visibility: hidden` never does, since it still
+  // occupies its box. Left that way, every background terminal keeps painting
+  // output nobody is looking at, out of the active terminal's frame budget.
+  // xterm re-measures and does a full refresh when the element comes back.
+  return <div ref={hostRef} className={cn('absolute inset-0 px-2 py-1', !active && 'hidden')} />
 }
 
 /**