@aurigax-ai/ghostty-web 0.3.3 → 0.3.5

package/lib/ghostty.ts

@@ -864,6 +864,11 @@ export class GhosttyTerminal {
     return this.trackLineStart(POINT_ACTIVE, activeY);
   }
 
+  /** Tracks the start of an absolute line (scrollback first). */
+  trackScreenRow(screenY: number): TrackedRow | null {
+    return this.trackLineStart(POINT_SCREEN, screenY);
+  }
+
   /**
    * Whether the terminal may have discarded rows since the last call, which is
    * the only way a tracked row loses its line: libghostty-vt prunes scrollback

package/lib/interfaces.ts

@@ -38,8 +38,10 @@ export interface ITerminalOptions {
   // Phase 1 additions
   convertEol?: boolean; // Convert \n to \r\n (default: false)
   disableStdin?: boolean; // Disable keyboard input (default: false)
+  scrollOnUserInput?: boolean; // Typing or pasting scrolls to the bottom (default: true)
 
   // Scrolling options
+  scrollbar?: boolean; // Draw the built-in scrollbar and let it be dragged (default: true)
   smoothScrollDuration?: number; // Duration in ms for smooth scroll animation (default: 100, 0 = instant)
 
   // Internal: Ghostty WASM instance (optional, for test isolation)

package/lib/terminal.ts

@@ -26,6 +26,7 @@ import {
   type GhosttyTerminalConfig,
   type MouseTrackingMode,
   type SemanticPromptEvent,
+  type TrackedRow,
 } from './ghostty';
 import { getGhostty } from './index';
 import { InputHandler, type MouseTrackingConfig } from './input-handler';
@@ -60,6 +61,12 @@ import { WebglRenderer } from './webgl-renderer';
 // Terminal Class
 // ============================================================================
 
+interface ViewportAnchor {
+  row: TrackedRow;
+  viewportY: number;
+  scrollback: number;
+}
+
 export class Terminal implements ITerminalCore {
   // Public properties (xterm.js compatibility)
   public cols: number;
@@ -202,6 +209,8 @@ export class Terminal implements ITerminalCore {
       renderer: options.renderer ?? 'webgl',
       convertEol: options.convertEol ?? false,
       disableStdin: options.disableStdin ?? false,
+      scrollOnUserInput: options.scrollOnUserInput ?? true,
+      scrollbar: options.scrollbar ?? true,
       smoothScrollDuration: options.smoothScrollDuration ?? 100, // Default: 100ms smooth scroll
       fontWeight: options.fontWeight ?? 'normal',
       fontWeightBold: options.fontWeightBold ?? 'bold',
@@ -291,6 +300,10 @@ export class Terminal implements ITerminalCore {
         this.wasmTerm?.configure({ scrollbackLimit: this.options.scrollback });
         break;
 
+      case 'scrollbar':
+        if (!this.options.scrollbar) this.dropScrollbar();
+        break;
+
       case 'fontSize':
         if (this.renderer) {
           this.renderer.setFontSize(this.options.fontSize);
@@ -510,6 +523,7 @@ export class Terminal implements ITerminalCore {
           }
           // Clear selection when user types
           this.selectionManager?.clearSelection();
+          this.followUserInput();
           this.awaitingEcho = true;
           // Input handler fires data events
           this.dataEmitter.fire(data);
@@ -723,6 +737,8 @@ export class Terminal implements ITerminalCore {
     // preserve selection when new data arrives. Selection is cleared by user actions
     // like clicking or typing, not by incoming data.
 
+    const anchor = this.anchorViewport();
+
     // Write directly to WASM terminal (handles VT parsing internally)
     this.wasmTerm!.write(data);
 
@@ -733,10 +749,7 @@ export class Terminal implements ITerminalCore {
     // Invalidate link cache (content changed)
     this.linkDetector?.invalidateCache();
 
-    // Phase 2: Auto-scroll to bottom on new output (xterm.js behavior)
-    if (this.viewportY !== 0) {
-      this.scrollToBottom();
-    }
+    this.restoreViewport(anchor);
 
     this.afterWrite();
 
@@ -755,6 +768,40 @@ export class Terminal implements ITerminalCore {
     // Render will happen on next animation frame
   }
 
+  private anchorViewport(): ViewportAnchor | null {
+    if (this.viewportY <= 0 || !this.wasmTerm) return null;
+    if (this.scrollAnimationFrame !== undefined && this.targetViewportY === 0) return null;
+    const scrollback = this.wasmTerm.getScrollbackLength();
+    const row = this.wasmTerm.trackScreenRow(scrollback - Math.floor(this.viewportY));
+    if (!row) return null;
+    return { row, viewportY: this.viewportY, scrollback };
+  }
+
+  private restoreViewport(anchor: ViewportAnchor | null): void {
+    if (!anchor) return;
+    const line = anchor.row.line();
+    anchor.row.free();
+    const scrollback = this.getScrollbackLength();
+    const fraction = anchor.viewportY - Math.floor(anchor.viewportY);
+    const viewportY =
+      line === null ? scrollback : Math.max(0, Math.min(scrollback, scrollback - line + fraction));
+    const shift = viewportY - anchor.viewportY;
+    this.viewportY = viewportY;
+    this.targetViewportY =
+      this.scrollAnimationFrame === undefined
+        ? viewportY
+        : Math.max(0, Math.min(scrollback, this.targetViewportY + shift));
+    if (Math.round(scrollback - viewportY) !== Math.round(anchor.scrollback - anchor.viewportY)) {
+      this.fireScroll();
+    }
+  }
+
+  private followUserInput(): void {
+    if (this.options.scrollOnUserInput) {
+      this.scrollToBottom();
+    }
+  }
+
   /**
    * Write data with newline
    */
@@ -782,6 +829,7 @@ export class Terminal implements ITerminalCore {
       return;
     }
 
+    this.followUserInput();
     this.awaitingEcho = true;
 
     // Check if terminal has bracketed paste mode enabled
@@ -809,6 +857,7 @@ export class Terminal implements ITerminalCore {
     }
 
     if (wasUserInput) {
+      this.followUserInput();
       this.awaitingEcho = true;
       // Trigger onData event as if user typed it
       this.dataEmitter.fire(data);
@@ -839,8 +888,11 @@ export class Terminal implements ITerminalCore {
       this.cols = cols;
       this.rows = rows;
 
+      const anchor = this.anchorViewport();
+
       // Resize WASM terminal (may reallocate buffers, invalidating TypedArray views)
       this.wasmTerm!.resize(cols, rows);
+      this.restoreViewport(anchor);
       this.refreshMarkers(false);
 
       // Resize renderer
@@ -1104,6 +1156,7 @@ export class Terminal implements ITerminalCore {
    */
   public scrollToBottom(): void {
     this.wake();
+    this.stopScrollAnimation();
     if (this.viewportY !== 0) {
       this.viewportY = 0;
       this.fireScroll();
@@ -1114,6 +1167,15 @@ export class Terminal implements ITerminalCore {
     }
   }
 
+  private stopScrollAnimation(): void {
+    if (this.scrollAnimationFrame !== undefined) {
+      cancelAnimationFrame(this.scrollAnimationFrame);
+    }
+    this.scrollAnimationFrame = undefined;
+    this.scrollAnimationStartTime = undefined;
+    this.targetViewportY = 0;
+  }
+
   /** Scrolls so that absolute buffer line `line` (0 = oldest scrollback line) is at the top, like xterm.js. */
   public scrollToLine(line: number): void {
     const scrollbackLength = this.getScrollbackLength();
@@ -1250,11 +1312,7 @@ export class Terminal implements ITerminalCore {
     this.cancelRenderLoop();
     this.writeQueue.length = 0;
 
-    // Stop smooth scroll animation
-    if (this.scrollAnimationFrame) {
-      cancelAnimationFrame(this.scrollAnimationFrame);
-      this.scrollAnimationFrame = undefined;
-    }
+    this.stopScrollAnimation();
 
     // Clear mouse move throttle timeout
     if (this.mouseMoveThrottleTimeout) {
@@ -1774,7 +1832,7 @@ export class Terminal implements ITerminalCore {
     if (!this.canvas || !this.renderer || !this.wasmTerm) return;
 
     const scrollbackLength = this.wasmTerm.getScrollbackLength();
-    if (scrollbackLength === 0) return; // No scrollbar if no scrollback
+    if (scrollbackLength === 0 || !this.options.scrollbar) return;
 
     const rect = this.canvas.getBoundingClientRect();
     const mouseX = e.clientX - rect.left;
@@ -1885,6 +1943,7 @@ export class Terminal implements ITerminalCore {
    * Show scrollbar with fade-in and schedule auto-hide
    */
   private showScrollbar(): void {
+    if (!this.options.scrollbar) return;
     this.wake();
     // Clear any existing hide timeout
     if (this.scrollbarHideTimeout) {
@@ -1910,6 +1969,19 @@ export class Terminal implements ITerminalCore {
     }
   }
 
+  private dropScrollbar(): void {
+    this.wake();
+    if (this.scrollbarHideTimeout) {
+      window.clearTimeout(this.scrollbarHideTimeout);
+      this.scrollbarHideTimeout = undefined;
+    }
+    this.isDraggingScrollbar = false;
+    this.scrollbarDragStart = null;
+    this.scrollbarVisible = false;
+    this.scrollbarOpacity = 0;
+    this.draw(true, 0);
+  }
+
   /**
    * Hide scrollbar with fade-out
    */
@@ -1932,6 +2004,7 @@ export class Terminal implements ITerminalCore {
     this.wake();
     const startTime = Date.now();
     const animate = () => {
+      if (!this.options.scrollbar) return;
       const elapsed = Date.now() - startTime;
       const progress = Math.min(elapsed / this.SCROLLBAR_FADE_DURATION_MS, 1);
       this.scrollbarOpacity = progress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurigax-ai/ghostty-web",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Ghostty's terminal engine (libghostty-vt) in the browser: WebAssembly build, an xterm.js-shaped API and WebGL and canvas renderers. A hard fork of coder/ghostty-web.",
   "type": "module",
   "main": "./lib/index.ts",