Use canvas renderer to fix stuck/ghost cursor in panes

The DOM renderer draws the cursor as a separate layered element; under
the Claude TUI's rapid cursor hide/show plus cursorBlink it leaves a
stale white block frozen where the cursor used to be. Load
@xterm/addon-canvas (composites the cursor into the text surface) with a
try/catch that falls back to the DOM renderer on init failure. Canvas
over WebGL because tiletopia runs many panes and WebView2 caps live
WebGL contexts (~16).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-28 21:31:59 +01:00
parent df159056a1
commit 07bba99eb5
2 changed files with 19 additions and 0 deletions

View file

@ -2,6 +2,7 @@ import { useRef, useEffect } from "react";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import { WebLinksAddon } from "@xterm/addon-web-links";
import { CanvasAddon } from "@xterm/addon-canvas";
import type { UnlistenFn } from "@tauri-apps/api/event";
import {
readText as clipboardReadText,
@ -149,6 +150,23 @@ export default function XtermPane({
);
term.open(container);
// Use the canvas renderer instead of xterm's default DOM renderer.
// The DOM renderer draws the cursor as a separate layered element and,
// under the Claude TUI's rapid hide/show (\x1b[?25l/h) + cursorBlink,
// leaves a stale cursor block frozen where the cursor used to be (the
// "stuck white marker"). The canvas renderer composites the cursor into
// the same surface as the text, so hide/show transitions clear cleanly.
// Chosen over the WebGL addon because tiletopia runs many panes at once
// and Chromium/WebView2 caps live WebGL contexts (~16) — canvas has no
// such hard limit. Loaded after open() so the core renderer exists.
try {
term.loadAddon(new CanvasAddon());
} catch (e) {
// If canvas init fails for any reason, xterm falls back to the DOM
// renderer on its own — degrade gracefully rather than blank the pane.
console.warn("CanvasAddon load failed; using DOM renderer:", e);
}
// Initial size — fit before asking the PTY for its dimensions.
fit.fit();