`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) {
++    if (!container) return;
--      trace("mount aborted: no container ref");
++    // Clear any stale xterm DOM left behind by a previous mount.
--      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.
      container.replaceChildren();
--    let term: Terminal;
++    const term = new Terminal({
--    try {
++      theme: TERMINAL_THEME,
--      term = new Terminal({
++      fontFamily:
--        theme: TERMINAL_THEME,
++        '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
--        fontFamily:
++      fontSize: 13,
--          '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
++      lineHeight: 1.2,
--        fontSize: 13,
++      cursorBlink: true,
--        lineHeight: 1.2,
++      scrollback: 10000,
--        cursorBlink: true,
++      // Required before we can set `term.unicode.activeVersion`.
--        scrollback: 10000,
++      allowProposedApi: true,
--        // 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);
--      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) {
++    } catch {
--      trace("unicode activeVersion failed", { error: String(err) });
++      // Older xterm builds may not have unicode registered — ignore.
--    }
--
--    // 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) });
+     }
      try {
        fit.fit();
--      trace("fit.fit ok", { cols: term.cols, rows: term.rows });
++    } catch {
--    } catch (err) {
++      // No layout yet — ResizeObserver below will retry on first
--      trace("fit.fit failed (will retry via ResizeObserver)", {
++      // real box update.
--        error: String(err),
--      });
+     }
      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
++      // lock guarantees at most one spawn per sessionId.
--      // React 19 StrictMode's double-mount.
        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
++      // Replay on reattach. Chunked inside `writeBase64Chunked`
--      // chunks so a 200 KB scrollback doesn't stall the main
++      // so a ~200 KB scrollback doesn't stall the main thread.
--      // thread for multiple seconds.
        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", {
++          trace("reattach replay failed", { error: String(err) });
--            error: String(err),
--          });
+         }
+       }
--      // Listen for stdout — per-pty event name, so this listener
++      // Per-pty event listener. Only wakes up for our own bytes.
--      // only wakes up for our own terminal's 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) => {
++        void writePty(ptyId, data).catch(() => {
--          trace("write_pty failed", { error: String(err) });
++          /* 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) => {
++        void resizePty(ptyId, cols, rows).catch(() => {
--          trace("resize_pty failed", { error: String(err) });
++          /* 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
++      // Do NOT close the PTY — it must survive unmount so switching
--      // survive this unmount so reattaching later still works. The
++      // back to this session reattaches. Only closeSessionPty and
--      // only teardown paths are `store.closeSessionPty` and the
++      // the window-destroy reaper kill PTYs.
--      // window-destroy reaper in Rust.
        try {
          term.dispose();
--      } catch (err) {
++      } catch {
--        trace("term.dispose threw", { error: String(err) });
++        /* 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]);