Replace xterm.js with ghostty-web

dgageot · dgageot · commit 5117be7ca6c8 · 2026-03-10T13:53:26.000+01:00
Switch terminal emulator from @xterm/xterm to ghostty-web (WASM-based Ghostty port) loaded via ES module importmap from jsDelivr CDN. Include a workaround for coder/ghostty-web#136: forward wheel events with cell coordinates when mouse tracking is active, so scrolling in tmux panes and other multi-region TUIs works correctly. Assisted-By: docker-agent
diff --git a/pkg/board/static/app.js b/pkg/board/static/app.js
@@ -1,3 +1,8 @@
+import { init, Terminal as GhosttyTerminal, FitAddon } from 'ghostty-web';
+
+// Initialize ghostty-web WASM (must complete before creating terminals)
+const ghosttyReady = init();
+
 // --- Theme ---
 
 function getPreferredTheme() {
@@ -263,15 +268,17 @@ async function handleCardAction(e) {
 let activeTerm = null;
 let activeSocket = null;
 
-function openTerminal(sessionName, title) {
+async function openTerminal(sessionName, title) {
   const dialog = document.getElementById("terminal-dialog");
   const container = document.getElementById("terminal-container");
   document.getElementById("terminal-title").textContent = title;
 
   closeTerminal();
   dialog.showModal();
 
-  const term = new Terminal({
+  await ghosttyReady;
+
+  const term = new GhosttyTerminal({
     cursorBlink: true,
     fontSize: 13,
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace",
@@ -306,11 +313,21 @@ function openTerminal(sessionName, title) {
         },
   });
 
-  const fitAddon = new FitAddon.FitAddon();
+  const fitAddon = new FitAddon();
   term.loadAddon(fitAddon);
   term.open(container);
   activeTerm = term;
 
+  // PR #136 fix: forward wheel events with coordinates when mouse tracking
+  // is active, so tmux panes and other TUI split views scroll correctly.
+  term.attachCustomWheelEventHandler((e) => {
+    if (term.hasMouseTracking()) {
+      term.inputHandler?.handleWheel(e);
+      return true;
+    }
+    return false;
+  });
+
   requestAnimationFrame(() => {
     fitAddon.fit();
 
diff --git a/pkg/board/static/index.html b/pkg/board/static/index.html
@@ -5,9 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Docker Agent Board</title>
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "ghostty-web": "https://cdn.jsdelivr.net/npm/ghostty-web@next/dist/ghostty-web.js"
+      }
+    }
+  </script>
 </head>
 <body>
   <header class="app-header">
diff --git a/pkg/board/static/style.css b/pkg/board/static/style.css
@@ -530,8 +530,10 @@ dialog.dialog-terminal[open] {
   overflow: hidden;
   padding: 4px;
 
-  & .xterm {
+  & canvas {
+    display: block;
     height: 100%;
+    width: 100%;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -530,8 +530,10 @@ dialog.dialog-terminal[open] {`
`530`	`530`	`overflow: hidden;`
`531`	`531`	`padding: 4px;`
`532`	`532`
`533`		`- & .xterm {`
	`533`	`+ & canvas {`
	`534`	`+ display: block;`
`534`	`535`	`height: 100%;`
	`536`	`+ width: 100%;`
`535`	`537`	`}`
`536`	`538`	`}`
`537`	`539`