`534d88d`

perf: restore webgl renderer + raf-debounce resize cascade

Authored by

espadonne 1 month ago

SHA: 534d88dfabf28a119054154020773abbf6e29318
Parents: 73c634b
Tree: dfdc2a0

1 changed file

Status	File	+	-
M	`src/components/TerminalPane.tsx`	45	24

src/components/TerminalPane.tsxmodified

  import {
    getPtyBuffer,
 -  logFrontend,
    onPtyData,
    resizePty,
    spawnPty,
  import { FitAddon } from "@xterm/addon-fit";
  import { Unicode11Addon } from "@xterm/addon-unicode11";
  import { WebLinksAddon } from "@xterm/addon-web-links";
 +import { WebglAddon } from "@xterm/addon-webgl";
  import { Terminal } from "@xterm/xterm";
 -// NOTE: WebglAddon is intentionally NOT loaded. The macOS webview
 -// has a very low limit on live WebGL contexts (~8) and rapid
 -// session switching blows past that limit every few clicks,
 -// stalling the main thread for seconds while the GPU driver
 -// tears contexts down. The default DOM renderer is fast enough
 -// for our single-terminal use case and has zero init cost per
 -// mount. Revisit if we ever want to render multi-pane tmux.
+-
 +// Dev-only trace. Writes to the devtools console; does NOT forward
 +// to Rust tracing because each logFrontend call is an IPC round
 +// trip on the UI thread, and per-mount chatter is exactly the
 +// kind of noise that piles up on rapid interactions.
  const trace = (msg: string, extra?: Record<string, unknown>) => {
 -  const payload = extra ? `${msg} ${JSON.stringify(extra)}` : msg;
 -  // eslint-disable-next-line no-console
 -  console.debug("[TerminalPane]", payload);
 -  void logFrontend("debug", "TerminalPane", payload);
 +  if (import.meta.env.DEV) {
 +    // eslint-disable-next-line no-console
 +    console.debug("[TerminalPane]", msg, extra ?? "");
 +  }
  };
  /** Module-level dedup lock for concurrent spawn attempts on the
      try {
        term.unicode.activeVersion = "11";
      } catch {
 -      // Older xterm builds may not have unicode registered — ignore.
 +      /* unicode not registered — ignore */
 +    }
++
 +    // WebGL renderer. Must be loaded AFTER open(). The DOM renderer
 +    // fallback creates/updates a span per terminal cell on every
 +    // redraw, which chokes the main thread during claude's TUI
 +    // spinner animations and token streaming — that's what was
 +    // producing the mouse-move beachballs. Earlier we removed this
 +    // because React StrictMode's double-invoke created two WebGL
 +    // contexts per mount and blew past the webview's context
 +    // cap; with StrictMode off, exactly one context per mount,
 +    // disposed cleanly on unmount.
 +    try {
 +      term.loadAddon(new WebglAddon());
 +    } catch (err) {
 +      trace("webgl addon failed, falling back to DOM renderer", {
 +        error: String(err),
 +      });
+     }
      try {
        fit.fit();
      } catch {
 -      // No layout yet — ResizeObserver below will retry on first
 -      // real box update.
 +      /* no layout yet — ResizeObserver below will retry */
+     }
      let ptyId: string | null = null;
      void attach();
 -    // Keep the terminal in sync with its container's box. ResizeObserver
 -    // fires whenever the parent pane grows or shrinks (window resize,
 -    // splitter drag, etc.).
 +    // rAF-debounce the resize cascade. ResizeObserver can fire
 +    // many times per frame during a panel drag; xterm's fit.fit()
 +    // is a moderately expensive layout pass and each successful
 +    // fit emits an `onResize` event which triggers a `resizePty`
 +    // IPC call → Rust ioctl. Coalescing to at most once per frame
 +    // is free correctness AND a big main-thread win under drag.
 +    let rafHandle: number | null = null;
      const ro = new ResizeObserver(() => {
 -      try {
 -        fit.fit();
 -      } catch {
 -        // Container has no layout — harmless to ignore.
 -      }
 +      if (rafHandle !== null) return;
 +      rafHandle = requestAnimationFrame(() => {
 +        rafHandle = null;
 +        try {
 +          fit.fit();
 +        } catch {
 +          /* container has no layout — retry on next resize */
 +        }
 +      });
      });
      ro.observe(container);
      return () => {
        cancelled = true;
        ro.disconnect();
 +      if (rafHandle !== null) cancelAnimationFrame(rafHandle);
        if (unlistenData) unlistenData();
        for (const d of disposeListeners) d();
        disposeListeners = [];