Xterm sizing adjustments (#439)

better size handling for canvas display

Author: matthewlouisbrockman

bun.lock

@@ -95,7 +95,6 @@
     "@vercel/otel": "^2.1.2",
     "@vercel/speed-insights": "^1.2.0",
     "@xterm/addon-canvas": "^0.7.0",
-    "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "cheerio": "^1.0.0",

package.json

@@ -1,7 +1,7 @@
 'use client'
 
-import { type CommandHandle, type Sandbox } from 'e2b'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import type { CommandHandle, Sandbox } from 'e2b'
+import { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react'
 import type { SandboxManagementAuth } from '@/core/shared/sandbox-management-auth'
 import {
   DEFAULT_CWD,
@@ -192,7 +192,7 @@ export default function DashboardTerminal({
 
   const resizePty = useCallback((size: { cols: number; rows: number }) => {
     if (sandboxRef.current && pidRef.current) {
-      void sandboxRef.current.pty.resize(pidRef.current, size)
+      void sandboxRef.current.pty.resize(pidRef.current, size).catch(() => {})
     }
   }, [])
 
@@ -378,7 +378,7 @@ export default function DashboardTerminal({
         })
         ptyRef.current = pty
         pidRef.current = pty.pid
-        resizeTerminal()
+        resizeTerminal({ force: true })
         setStatus('ready')
         appendOutput(`PTY ${pty.pid} attached.\r\n`)
         focusTerminal()
@@ -555,38 +555,37 @@ export default function DashboardTerminal({
     }
   }, [autoStart, launchTarget, queueTerminalCommand, status])
 
-  useEffect(() => {
-    const handlePageHide = (event: PageTransitionEvent) => {
-      if (event.persisted) return
+  const handlePageHide = useEffectEvent((event: PageTransitionEvent) => {
+    if (event.persisted) return
 
-      abortCurrentStart()
-      void closeTerminal()
-    }
+    abortCurrentStart()
+    void closeTerminal()
+  })
 
-    const handlePageShow = (event: PageTransitionEvent) => {
-      if (!event.persisted || !ptyRef.current) return
+  const handlePageShow = useEffectEvent((event: PageTransitionEvent) => {
+    if (!event.persisted || !ptyRef.current) return
 
-      resizeTerminal()
-      focusTerminal()
-    }
+    resizeTerminal({ force: true })
+    focusTerminal()
+  })
+
+  const handleTerminalUnmount = useEffectEvent(() => {
+    startGenerationRef.current += 1
+    isStartingRef.current = false
+    clearPendingInput()
+    void closeTerminal()
+  })
 
+  useEffect(() => {
     window.addEventListener('pagehide', handlePageHide)
     window.addEventListener('pageshow', handlePageShow)
 
     return () => {
       window.removeEventListener('pagehide', handlePageHide)
       window.removeEventListener('pageshow', handlePageShow)
-      abortCurrentStart()
-      clearPendingInput()
-      void closeTerminal()
+      handleTerminalUnmount()
     }
-  }, [
-    abortCurrentStart,
-    clearPendingInput,
-    closeTerminal,
-    focusTerminal,
-    resizeTerminal,
-  ])
+  }, [])
 
   return (
     <>

src/features/dashboard/terminal/dashboard-terminal.tsx

@@ -12,6 +12,21 @@ const MAX_CELL_WIDTH_PX = 16
 const MIN_CELL_HEIGHT_PX = 8
 const MAX_CELL_HEIGHT_PX = 40
 
+type XTermWithRenderDimensions = XTerm & {
+  _core?: {
+    _renderService?: {
+      dimensions?: {
+        css?: {
+          cell?: {
+            width?: number
+            height?: number
+          }
+        }
+      }
+    }
+  }
+}
+
 function getElementSize(element: Element | null) {
   if (!element) return undefined
 
@@ -21,18 +36,41 @@ function getElementSize(element: Element | null) {
   return rect
 }
 
+function getRenderCellSize(terminal: XTerm | null) {
+  const cell = (terminal as XTermWithRenderDimensions | null)?._core
+    ?._renderService?.dimensions?.css?.cell
+
+  if (!cell?.width && !cell?.height) return undefined
+
+  return {
+    width: cell.width,
+    height: cell.height,
+  }
+}
+
 function getMeasuredCellSize(terminal: XTerm | null) {
+  const renderCellSize = getRenderCellSize(terminal)
   const measureElement = terminal?.element?.querySelector(
     '.xterm-char-measure-element'
   )
   const rowElement = terminal?.element?.querySelector('.xterm-rows > div')
+  const helperTextArea = terminal?.element?.querySelector(
+    '.xterm-helper-textarea'
+  )
   const measuredCharSize = getElementSize(measureElement ?? null)
   const rowSize = getElementSize(rowElement ?? null)
+  const helperSize = getElementSize(helperTextArea ?? null)
 
-  if (!measuredCharSize && !rowSize) return undefined
+  if (!renderCellSize && !measuredCharSize && !rowSize && !helperSize) {
+    return undefined
+  }
 
-  const measuredWidth = measuredCharSize?.width
-  const measuredHeight = rowSize?.height ?? measuredCharSize?.height
+  const measuredWidth = renderCellSize?.width ?? measuredCharSize?.width
+  const measuredHeight =
+    renderCellSize?.height ??
+    rowSize?.height ??
+    measuredCharSize?.height ??
+    helperSize?.height
 
   return {
     width:
@@ -78,9 +116,6 @@ export function calculateTerminalSize(
 
   return {
     cols: Math.max(MIN_TERMINAL_COLS, Math.floor(availableWidth / cellWidth)),
-    rows: Math.max(
-      MIN_TERMINAL_ROWS,
-      Math.floor(availableHeight / cellHeight) - 1
-    ),
+    rows: Math.max(MIN_TERMINAL_ROWS, Math.floor(availableHeight / cellHeight)),
   }
 }