fix(site): use WebGL renderer for terminal (#9320)

site/package.json

@@ -105,6 +105,7 @@
     "xterm-addon-fit": "0.7.0",
     "xterm-addon-unicode11": "0.5.0",
     "xterm-addon-web-links": "0.8.0",
+    "xterm-addon-webgl": "0.15.0",
     "yup": "1.2.0"
   },
   "devDependencies": {

site/pnpm-lock.yaml

@@ -231,6 +231,9 @@ dependencies:
   xterm-addon-web-links:
     specifier: 0.8.0
     version: 0.8.0(xterm@5.2.1)
+  xterm-addon-webgl:
+    specifier: 0.15.0
+    version: 0.15.0(xterm@5.2.1)
   yup:
     specifier: 1.2.0
     version: 1.2.0
@@ -14221,6 +14224,14 @@ packages:
       xterm: 5.2.1
     dev: false
 
+  /xterm-addon-webgl@0.15.0(xterm@5.2.1):
+    resolution: {integrity: sha512-ZLcqogMFHr4g/YRhcCh3xE8tTklnyut/M+O/XhVsFBRB/YCvYhPdLQ5/AQk54V0wjWAQpa8CF3W8DVR9OqyMCg==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.2.1
+    dev: false
+
   /xterm@5.2.1:
     resolution: {integrity: sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA==}
     dev: false

site/src/AppRouter.tsx

@@ -322,7 +322,7 @@ export const AppRouter: FC = () => {
             {/* Terminal and CLI auth pages don't have the dashboard layout */}
             <Route
               path="/:username/:workspace/terminal"
-              element={<TerminalPage renderer="canvas" />}
+              element={<TerminalPage renderer="webgl" />}
             />
             <Route path="cli-auth" element={<CliAuthenticationPage />} />
           </Route>

site/src/pages/TerminalPage/TerminalPage.tsx

@@ -7,7 +7,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom"
 import { colors } from "theme/colors"
 import { v4 as uuidv4 } from "uuid"
 import * as XTerm from "xterm"
-import { CanvasAddon } from "xterm-addon-canvas"
+import { WebglAddon } from "xterm-addon-webgl"
 import { FitAddon } from "xterm-addon-fit"
 import { WebLinksAddon } from "xterm-addon-web-links"
 import { Unicode11Addon } from "xterm-addon-unicode11"
@@ -58,7 +58,7 @@ const useTerminalWarning = ({ agent }: { agent?: WorkspaceAgent }) => {
 }
 
 type TerminalPageProps = React.PropsWithChildren<{
-  renderer: "canvas" | "dom"
+  renderer: "webgl" | "dom"
 }>
 
 const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
@@ -187,8 +187,8 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
       },
     })
     // DOM is the default renderer.
-    if (renderer === "canvas") {
-      terminal.loadAddon(new CanvasAddon())
+    if (renderer === "webgl") {
+      terminal.loadAddon(new WebglAddon())
     }
     const fitAddon = new FitAddon()
     setFitAddon(fitAddon)