`71832a5`

perf: drop webgl addon + trim per-mount tracing

Authored by

espadonne 1 month ago

SHA: 71832a5b6bf24bea95cbd2c5e1d5c15788dd9bce
Parents: d88a74d
Tree: 3da696c

1 changed file

Status	File	+	-
M	`src/components/TerminalPane.tsx`	42	91

src/components/TerminalPane.tsxmodified

  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.
++
  const trace = (msg: string, extra?: Record<string, unknown>) => {
    const payload = extra ? `${msg} ${JSON.stringify(extra)}` : msg;
    // eslint-disable-next-line no-console
    useEffect(() => {
      const container = containerRef.current;
 -    if (!container) {
 -      trace("mount aborted: no container ref");
 -      return;
 -    }
 -    trace("mount begin", { sessionId, cwd, claudeArgs });
+-
 -    // React 19 StrictMode double-invokes effects (mount → cleanup →
 -    // mount). If a previous effect already appended xterm DOM to
 -    // this container, wipe it before opening a fresh Terminal so
 -    // we don't stack renderer layers and confuse layout math.
 +    if (!container) return;
 +    // Clear any stale xterm DOM left behind by a previous mount.
      container.replaceChildren();
 -    let term: Terminal;
 -    try {
 -      term = new Terminal({
 +    const term = new Terminal({
        theme: TERMINAL_THEME,
        fontFamily:
          '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
        // Required before we can set `term.unicode.activeVersion`.
        allowProposedApi: true,
      });
 -    } catch (err) {
 -      trace("new Terminal threw", { error: String(err) });
 -      throw err;
 -    }
      const fit = new FitAddon();
      term.loadAddon(fit);
      term.loadAddon(new WebLinksAddon());
      term.loadAddon(new Unicode11Addon());
 -    try {
      term.open(container);
 -      trace("term.open ok", { cols: term.cols, rows: term.rows });
 -    } catch (err) {
 -      trace("term.open threw", { error: String(err) });
 -      throw err;
 -    }
+-
 -    // Set activeVersion AFTER open() — the unicode subsystem walks
 -    // through `term.unicode` which requires the core to be mounted.
 -    // Swallow errors so a bad unicode activation never crashes the
 -    // whole pane.
      try {
        term.unicode.activeVersion = "11";
 -    } catch (err) {
 -      trace("unicode activeVersion failed", { error: String(err) });
 -    }
+-
 -    // WebGL must be loaded AFTER open(). If WebGL init throws (e.g.
 -    // headless / no GPU context), swallow it — xterm falls back to
 -    // canvas rendering automatically.
 -    try {
 -      term.loadAddon(new WebglAddon());
 -      trace("webgl addon loaded");
 -    } catch (err) {
 -      trace("webgl addon failed, using canvas fallback", { error: String(err) });
 +    } catch {
 +      // Older xterm builds may not have unicode registered — ignore.
+     }
      try {
        fit.fit();
 -      trace("fit.fit ok", { cols: term.cols, rows: term.rows });
 -    } catch (err) {
 -      trace("fit.fit failed (will retry via ResizeObserver)", {
 -        error: String(err),
 -      });
 +    } catch {
 +      // No layout yet — ResizeObserver below will retry on first
 +      // real box update.
+     }
      let ptyId: string | null = null;
      const attach = async () => {
        // Resolve a ptyId — either reattach to an already-running
        // subprocess or dedupe-safely spawn a new one. The spawn
 -      // lock guarantees at most one spawn per sessionId even under
 -      // React 19 StrictMode's double-mount.
 +      // lock guarantees at most one spawn per sessionId.
        const existing = useSessionStore.getState().ptyIds.get(sessionId);
        const reattach = !!existing;
        let resolved: string;
            term.rows,
          );
        } catch (err) {
 -        trace("spawn_pty failed", { error: String(err) });
          if (!cancelled) {
            term.write(
 -            `\r\n\x1b[31m[claudex] spawn_pty failed: ${formatErr(err)}\x1b[0m\r\n`,
 +            `\r\n\x1b[31m[claudex] spawn_pty failed: ${formatErr(err)}\x1b[0m\r\n\x1b[90m${cwd}\x1b[0m\r\n`,
            );
+         }
          return;
        if (cancelled) return;
        ptyId = resolved;
 -      // On reattach, replay the ring buffer into xterm in paced
 -      // chunks so a 200 KB scrollback doesn't stall the main
 -      // thread for multiple seconds.
 +      // Replay on reattach. Chunked inside `writeBase64Chunked`
 +      // so a ~200 KB scrollback doesn't stall the main thread.
        if (reattach) {
 -        trace("reattach path", { ptyId: resolved });
          try {
            const snapshot = await getPtyBuffer(resolved);
            if (cancelled) return;
            if (snapshot.length > 0) writeBase64Chunked(term, snapshot);
 -          trace("ring buffer replayed", { bytes: snapshot.length });
          } catch (err) {
 -          trace("get_pty_buffer failed during reattach", {
 -            error: String(err),
 -          });
 +          trace("reattach replay failed", { error: String(err) });
+         }
+       }
 -      // Listen for stdout — per-pty event name, so this listener
 -      // only wakes up for our own terminal's bytes.
 +      // Per-pty event listener. Only wakes up for our own bytes.
        try {
          const pid = resolved;
          const un = await onPtyData(pid, (ev: PtyDataEvent) => {
          trace("onPtyData listen failed", { error: String(err) });
+       }
 -      // Wire keystrokes → PTY writer.
        const dataDispose = term.onData((data) => {
          if (!ptyId) return;
 -        void writePty(ptyId, data).catch((err) => {
 -          trace("write_pty failed", { error: String(err) });
 +        void writePty(ptyId, data).catch(() => {
 +          /* silent — the next keystroke will retry */
          });
        });
        disposeListeners.push(() => dataDispose.dispose());
 -      // Propagate xterm resize events (triggered by fit.fit() or
 -      // container ResizeObserver) down to the PTY master so
 -      // claude's TUI redraws properly.
        const resizeDispose = term.onResize(({ cols, rows }) => {
          if (!ptyId) return;
 -        void resizePty(ptyId, cols, rows).catch((err) => {
 -          trace("resize_pty failed", { error: String(err) });
 +        void resizePty(ptyId, cols, rows).catch(() => {
 +          /* silent — harmless if the backend dropped the pty */
          });
        });
        disposeListeners.push(() => resizeDispose.dispose());
      ro.observe(container);
      return () => {
 -      trace("unmount", { sessionId, ptyId });
        cancelled = true;
        ro.disconnect();
        if (unlistenData) unlistenData();
        for (const d of disposeListeners) d();
        disposeListeners = [];
 -      // NOTE: intentionally NOT calling closePty — the PTY must
 -      // survive this unmount so reattaching later still works. The
 -      // only teardown paths are `store.closeSessionPty` and the
 -      // window-destroy reaper in Rust.
 +      // Do NOT close the PTY — it must survive unmount so switching
 +      // back to this session reattaches. Only closeSessionPty and
 +      // the window-destroy reaper kill PTYs.
        try {
          term.dispose();
 -      } catch (err) {
 -        trace("term.dispose threw", { error: String(err) });
 +      } catch {
 +        /* disposed twice — harmless */
+       }
 -      // Clear container so a re-mount on the same ref (React 19
 -      // StrictMode) starts from a clean slate.
        container.replaceChildren();
      };
 -    // Mount-once per sessionId; claudeArgs and cwd are baked in
 -    // at spawn time and don't change while mounted. Remount via
 -    // `key={sessionId}` if the caller needs a fresh terminal.
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [sessionId]);