@bakapiano/ccsm 0.22.2 → 0.22.4

package/public/js/components/TerminalInstance.js

@@ -3,6 +3,7 @@
 // resize propagation, paste handling, and browser/mobile lifecycle hooks.
 
 import { wsBase, getToken, getDeviceId } from '../backend.js';
+import { TerminalResizeDebouncer } from './TerminalResizeDebouncer.js';
 import { XtermTerminal } from './XtermTerminal.js';
 
 export class TerminalInstance {
@@ -17,18 +18,37 @@ export class TerminalInstance {
     this.reconnectTimer = null;
     this.attempts = 0;
     this.everOpened = false;
+    this.inReplay = false;
+    this.replayDepth = 0;
+    this.isVisible = false;
+    this.lastLayoutDimensions = null;
+    this.lastSentDimensions = null;
+    this.pendingLayoutFrame = null;
+    this.layoutRetryTimers = new Set();
     this.disposables = [];
     this.helperTextarea = null;
+    this.resizeDebouncer = new TerminalResizeDebouncer({
+      isVisible: () => this.isVisible,
+      getXterm: () => this.xterm,
+      resizeBoth: (cols, rows) => this._applyResize(cols, rows),
+      resizeX: (cols) => this._applyResize(cols, this.xterm.rows),
+      resizeY: (rows) => this._applyResize(this.xterm.cols, rows),
+    });
+    const refreshDisposable = this.xterm.onDidRequestRefreshDimensions(() => {
+      this.scheduleLayout({ immediate: this.isVisible, retries: true });
+    });
+    this.disposables.push(() => refreshDisposable.dispose());
   }
 
   attachToElement(host) {
     this.host = host;
     this.xterm.attachToElement(host);
     this._registerColorOscHandlers();
-    this._connect();
     this._wireXtermEvents();
     this._wireDomLifecycle();
-    this.xterm.focus();
+    this.setVisible(this._isHostVisible());
+    this._connect();
+    if (this.isVisible) this.xterm.focus();
   }
 
   sendInput(data) {
@@ -43,9 +63,60 @@ export class TerminalInstance {
     this.xterm.applyResolvedTheme();
   }
 
+  layout(width, height, immediate = false) {
+    const layoutDimensions = this._resolveLayoutDimensions(width, height);
+    if (!layoutDimensions) return null;
+
+    this.lastLayoutDimensions = layoutDimensions;
+    const proposed = this.xterm.proposeDimensions(layoutDimensions.width, layoutDimensions.height);
+    if (!proposed) return null;
+
+    this.resizeDebouncer.resize(proposed.cols, proposed.rows, immediate);
+    return proposed;
+  }
+
+  scheduleLayout(options = {}) {
+    const { immediate = false, retries = false, forceRedraw = false } =
+      typeof options === 'boolean' ? { immediate: options } : options;
+    if (this.closedByUs) return null;
+
+    if (immediate) {
+      this._cancelScheduledLayout();
+      const result = this.layout(undefined, undefined, true);
+      if (forceRedraw) this.xterm.forceRedraw();
+      if (retries) this._scheduleLayoutRetries(forceRedraw);
+      return result;
+    }
+
+    if (this.pendingLayoutFrame === null) {
+      this.pendingLayoutFrame = requestAnimationFrame(() => {
+        this.pendingLayoutFrame = null;
+        this.layout();
+        if (forceRedraw) this.xterm.forceRedraw();
+      });
+    }
+    if (retries) this._scheduleLayoutRetries(forceRedraw);
+    return null;
+  }
+
+  setVisible(visible) {
+    const nextVisible = !!visible;
+    const didChange = this.isVisible !== nextVisible;
+    this.isVisible = nextVisible;
+    this.host?.classList.toggle('active', nextVisible);
+
+    if (nextVisible) {
+      this.resizeDebouncer.flush();
+      this.scheduleLayout({ immediate: true, retries: true, forceRedraw: true });
+    }
+    return didChange;
+  }
+
   dispose() {
     this.closedByUs = true;
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this._cancelScheduledLayout();
+    this.resizeDebouncer.dispose();
     for (const dispose of this.disposables.splice(0)) {
       try { dispose(); } catch {}
     }
@@ -66,14 +137,14 @@ export class TerminalInstance {
       }
       this.everOpened = true;
       this.attempts = 0;
-      this.xterm.scheduleFit();
-      this._sendFrame({ type: 'resize', cols: this.xterm.cols, rows: this.xterm.rows });
+      this.scheduleLayout({ immediate: true, retries: true });
+      this._sendResize(this.xterm.cols, this.xterm.rows, true);
     };
     ws.onmessage = (ev) => {
       let frame;
       try { frame = JSON.parse(ev.data); } catch { return; }
       if (frame.type === 'output') {
-        this.xterm.write(frame.data);
+        this._writeProcessData(frame.data, !!frame.replay);
       } else if (frame.type === 'exit') {
         this.xterm.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
       }
@@ -101,10 +172,11 @@ export class TerminalInstance {
 
   _wireXtermEvents() {
     const dataDisposable = this.xterm.onData((data) => {
+      if (this.inReplay) return;
       this._sendFrame({ type: 'input', data });
     });
     const resizeDisposable = this.xterm.onResize(({ cols, rows }) => {
-      this._sendFrame({ type: 'resize', cols, rows });
+      this._sendResize(cols, rows);
     });
     this.disposables.push(
       () => dataDisposable.dispose(),
@@ -114,12 +186,19 @@ export class TerminalInstance {
 
   _wireDomLifecycle() {
     const host = this.host;
-    const ro = new ResizeObserver(() => this.xterm.fit());
+    const ro = new ResizeObserver((entries) => {
+      const box = entries[0]?.contentRect;
+      if (box) {
+        this.layout(box.width, box.height);
+      } else {
+        this.layout();
+      }
+    });
     ro.observe(host);
     this.disposables.push(() => ro.disconnect());
 
     const vv = window.visualViewport;
-    const onVisualResize = () => this.xterm.scheduleFit();
+    const onVisualResize = () => this.scheduleLayout({ retries: true });
     vv?.addEventListener?.('resize', onVisualResize);
     vv?.addEventListener?.('scroll', onVisualResize);
     this.disposables.push(() => {
@@ -134,6 +213,7 @@ export class TerminalInstance {
     }
 
     this._wireTabVisibilityRefresh(host);
+    this._wireDocumentVisibilityRefresh();
     this._wirePasteHandlers(host);
     this._wireModifiedEnterHandler(host);
     this._wireCompositionHandlers();
@@ -143,18 +223,24 @@ export class TerminalInstance {
     const panel = host.closest('.tab-panel');
     if (!panel) return;
     const panelMo = new MutationObserver(() => {
-      if (panel.hasAttribute('data-active')) {
-        requestAnimationFrame(() => {
-          this.xterm.clearTextureAtlas();
-          this.xterm.scheduleFit();
-          this.xterm.refresh();
-        });
-      }
+      this.setVisible(this._isHostVisible());
     });
     panelMo.observe(panel, { attributes: true, attributeFilter: ['data-active'] });
     this.disposables.push(() => panelMo.disconnect());
   }
 
+  _wireDocumentVisibilityRefresh() {
+    const onVisibilityChange = () => {
+      this.setVisible(!document.hidden && this._isHostVisible());
+    };
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    window.addEventListener('focus', onVisibilityChange);
+    this.disposables.push(
+      () => document.removeEventListener('visibilitychange', onVisibilityChange),
+      () => window.removeEventListener('focus', onVisibilityChange),
+    );
+  }
+
   _wirePasteHandlers(host) {
     const isOurs = () => {
       const ae = document.activeElement;
@@ -235,6 +321,7 @@ export class TerminalInstance {
   _registerColorOscHandlers() {
     const answerColorOsc = (code, getHex) => (data) => {
       if (data !== '?') return false;
+      if (this.inReplay) return true;
       const hex = getHex();
       const ch = (i) => parseInt(hex.slice(i, i + 2), 16);
       const w = (v) => (v * 257).toString(16).padStart(4, '0');
@@ -254,6 +341,91 @@ export class TerminalInstance {
     }
   }
 
+  _sendResize(cols, rows, force = false) {
+    if (!(cols > 0 && rows > 0)) return;
+    if (!force
+        && this.lastSentDimensions
+        && this.lastSentDimensions.cols === cols
+        && this.lastSentDimensions.rows === rows) {
+      return;
+    }
+    this.lastSentDimensions = { cols, rows };
+    this._sendFrame({ type: 'resize', cols, rows });
+  }
+
+  _writeProcessData(data, replay) {
+    if (!replay) {
+      this.xterm.write(data);
+      return;
+    }
+    this._beginReplay();
+    this.xterm.write(data, () => {
+      this._endReplay();
+    });
+  }
+
+  _beginReplay() {
+    this.replayDepth++;
+    this.inReplay = true;
+  }
+
+  _endReplay() {
+    this.replayDepth = Math.max(0, this.replayDepth - 1);
+    this.inReplay = this.replayDepth > 0;
+  }
+
+  _applyResize(cols, rows) {
+    if (this.closedByUs) return;
+    if (!(cols > 0 && rows > 0)) return;
+    this.xterm.resize(cols, rows);
+    this._sendResize(this.xterm.cols, this.xterm.rows);
+  }
+
+  _resolveLayoutDimensions(width, height) {
+    if (width > 0 && height > 0) {
+      return { width, height };
+    }
+    if (!this.host) return null;
+    const rect = this.host.getBoundingClientRect();
+    const resolvedWidth = rect.width || this.host.clientWidth;
+    const resolvedHeight = rect.height || this.host.clientHeight;
+    if (!(resolvedWidth > 0 && resolvedHeight > 0)) return null;
+    return { width: resolvedWidth, height: resolvedHeight };
+  }
+
+  _scheduleLayoutRetries(forceRedraw = false) {
+    this._clearLayoutRetryTimers();
+    for (const delay of [60, 200]) {
+      const timer = setTimeout(() => {
+        this.layoutRetryTimers.delete(timer);
+        this.layout(undefined, undefined, true);
+        if (forceRedraw) this.xterm.forceRedraw();
+      }, delay);
+      this.layoutRetryTimers.add(timer);
+    }
+  }
+
+  _cancelScheduledLayout() {
+    if (this.pendingLayoutFrame !== null) {
+      cancelAnimationFrame(this.pendingLayoutFrame);
+      this.pendingLayoutFrame = null;
+    }
+    this._clearLayoutRetryTimers();
+  }
+
+  _clearLayoutRetryTimers() {
+    for (const timer of this.layoutRetryTimers) clearTimeout(timer);
+    this.layoutRetryTimers.clear();
+  }
+
+  _isHostVisible() {
+    if (!this.host || !this.host.isConnected || document.hidden) return false;
+    const panel = this.host.closest('.tab-panel');
+    if (panel && !panel.hasAttribute('data-active')) return false;
+    const style = window.getComputedStyle(this.host);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+  }
+
   _wsUrl() {
     const tok = getToken();
     const dev = getDeviceId();

package/public/js/components/TerminalResizeDebouncer.js

@@ -0,0 +1,126 @@
+const START_DEBOUNCING_THRESHOLD = 200;
+const DEBOUNCE_RESIZE_X_DELAY = 100;
+
+export class TerminalResizeDebouncer {
+  constructor({ isVisible, getXterm, resizeBoth, resizeX, resizeY }) {
+    this.isVisible = isVisible;
+    this.getXterm = getXterm;
+    this.resizeBoth = resizeBoth;
+    this.resizeX = resizeX;
+    this.resizeY = resizeY;
+    this.latestX = 0;
+    this.latestY = 0;
+    this.resizeXTimer = null;
+    this.resizeXIdle = null;
+    this.resizeYIdle = null;
+    this.disposed = false;
+  }
+
+  resize(cols, rows, immediate = false) {
+    if (this.disposed) return;
+    this.latestX = cols;
+    this.latestY = rows;
+
+    const xterm = this.getXterm();
+    const normalBufferLength = xterm?.normalBufferLength ?? 0;
+    if (immediate || normalBufferLength < START_DEBOUNCING_THRESHOLD) {
+      this._clearPending();
+      this.resizeBoth(cols, rows);
+      return;
+    }
+
+    if (!this.isVisible()) {
+      this._scheduleIdleResizeX();
+      this._scheduleIdleResizeY();
+      return;
+    }
+
+    this._cancelIdleResizeY();
+    this.resizeY(rows);
+    this._scheduleDebouncedResizeX();
+  }
+
+  flush() {
+    if (this.disposed) return;
+    if (!this._hasPending()) return;
+    this._clearPending();
+    this.resizeBoth(this.latestX, this.latestY);
+  }
+
+  dispose() {
+    this.disposed = true;
+    this._clearPending();
+  }
+
+  _hasPending() {
+    return this.resizeXTimer !== null || this.resizeXIdle !== null || this.resizeYIdle !== null;
+  }
+
+  _clearPending() {
+    this._cancelDebouncedResizeX();
+    this._cancelIdleResizeX();
+    this._cancelIdleResizeY();
+  }
+
+  _scheduleDebouncedResizeX() {
+    this._cancelIdleResizeX();
+    if (this.resizeXTimer !== null) clearTimeout(this.resizeXTimer);
+    this.resizeXTimer = setTimeout(() => {
+      this.resizeXTimer = null;
+      if (!this.disposed) this.resizeX(this.latestX);
+    }, DEBOUNCE_RESIZE_X_DELAY);
+  }
+
+  _cancelDebouncedResizeX() {
+    if (this.resizeXTimer !== null) {
+      clearTimeout(this.resizeXTimer);
+      this.resizeXTimer = null;
+    }
+  }
+
+  _scheduleIdleResizeX() {
+    this._cancelDebouncedResizeX();
+    if (this.resizeXIdle !== null) return;
+    this.resizeXIdle = this._requestIdle(() => {
+      this.resizeXIdle = null;
+      if (!this.disposed) this.resizeX(this.latestX);
+    });
+  }
+
+  _scheduleIdleResizeY() {
+    if (this.resizeYIdle !== null) return;
+    this.resizeYIdle = this._requestIdle(() => {
+      this.resizeYIdle = null;
+      if (!this.disposed) this.resizeY(this.latestY);
+    });
+  }
+
+  _cancelIdleResizeX() {
+    if (this.resizeXIdle !== null) {
+      this._cancelIdle(this.resizeXIdle);
+      this.resizeXIdle = null;
+    }
+  }
+
+  _cancelIdleResizeY() {
+    if (this.resizeYIdle !== null) {
+      this._cancelIdle(this.resizeYIdle);
+      this.resizeYIdle = null;
+    }
+  }
+
+  _requestIdle(callback) {
+    if (window.requestIdleCallback) {
+      return { kind: 'idle', id: window.requestIdleCallback(callback) };
+    }
+    return { kind: 'timeout', id: setTimeout(callback, 50) };
+  }
+
+  _cancelIdle(handle) {
+    if (handle.kind === 'idle') {
+      window.cancelIdleCallback?.(handle.id);
+    } else {
+      clearTimeout(handle.id);
+    }
+  }
+}

package/public/js/components/XtermTerminal.js

@@ -9,6 +9,10 @@ import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { WebglAddon } from '@xterm/addon-webgl';
 import { isDarkTheme } from '../state.js';
 
+const DEFAULT_COLS = 80;
+const DEFAULT_ROWS = 24;
+const SCROLLBAR_WIDTH_FALLBACK = 14;
+
 // Dark xterm theme - VSCode's Dark+ terminal palette, verbatim (see
 // microsoft/vscode src/.../terminal/common/terminalColorRegistry.ts).
 const THEME_DARK = {
@@ -47,18 +51,24 @@ const THEME_LIGHT = {
 
 export const themeFor = (dark) => (dark ? THEME_DARK : THEME_LIGHT);
 
+let lastKnownGridDimensions = { cols: DEFAULT_COLS, rows: DEFAULT_ROWS };
+
 export class XtermTerminal {
   constructor() {
     this.isMobile = window.matchMedia('(max-width: 640px)').matches;
     this.currentTheme = themeFor(isDarkTheme());
     this.fitAddon = new FitAddon();
     this.webglAddon = null;
+    this.webglContextLossDisposable = null;
+    this.refreshDimensionListeners = new Set();
     this.host = null;
 
     this.raw = new Terminal({
       fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
       fontSize: this.isMobile ? 11 : 13,
       lineHeight: 1.2,
+      cols: lastKnownGridDimensions.cols,
+      rows: lastKnownGridDimensions.rows,
       cursorBlink: true,
       cursorStyle: 'bar',
       scrollback: 5000,
@@ -74,12 +84,12 @@ export class XtermTerminal {
     this.raw.loadAddon(this.fitAddon);
     this.raw.loadAddon(new WebLinksAddon());
     this.raw.loadAddon(new ClipboardAddon());
-    this._loadRendererAddon();
     this._installSelectionCopyGuard();
   }
 
   get cols() { return this.raw.cols; }
   get rows() { return this.raw.rows; }
+  get normalBufferLength() { return this.raw.buffer?.normal?.length ?? 0; }
   get theme() { return this.currentTheme; }
   get parser() { return this.raw.parser; }
   get helperTextarea() {
@@ -89,14 +99,21 @@ export class XtermTerminal {
   attachToElement(host) {
     this.host = host;
     this.raw.open(host);
-    this.scheduleFit();
+    this._enableWebglRenderer();
     try {
       document.fonts?.ready?.then(() => {
-        if (this.host === host) this.scheduleFit();
+        if (this.host === host) this._fireRequestRefreshDimensions();
       });
     } catch {}
   }
 
+  onDidRequestRefreshDimensions(listener) {
+    this.refreshDimensionListeners.add(listener);
+    return {
+      dispose: () => this.refreshDimensionListeners.delete(listener),
+    };
+  }
+
   applyResolvedTheme() {
     const theme = themeFor(isDarkTheme());
     this.currentTheme = theme;
@@ -120,13 +137,33 @@ export class XtermTerminal {
     try { this.raw.write('\x1b[?25l'); } catch {}
   }
 
-  scheduleFit() {
-    this.fit();
-    requestAnimationFrame(() => {
-      this.fit();
-      setTimeout(() => this.fit(), 60);
-      setTimeout(() => this.fit(), 200);
-    });
+  layoutFromElement() {
+    if (!this.host) return null;
+    const rect = this.host.getBoundingClientRect();
+    return this.layout(rect.width, rect.height);
+  }
+
+  layout(width, height) {
+    if (!(width > 0 && height > 0)) return null;
+
+    const proposed = this._proposeDimensions(width, height);
+    if (!proposed) return null;
+
+    if (proposed.cols !== this.raw.cols || proposed.rows !== this.raw.rows) {
+      try { this.raw.resize(proposed.cols, proposed.rows); } catch {}
+    }
+    lastKnownGridDimensions = proposed;
+    return proposed;
+  }
+
+  proposeDimensions(width, height) {
+    return this._proposeDimensions(width, height);
+  }
+
+  resize(cols, rows) {
+    if (!(cols > 0 && rows > 0)) return;
+    try { this.raw.resize(cols, rows); } catch {}
+    lastKnownGridDimensions = { cols: this.raw.cols, rows: this.raw.rows };
   }
 
   fit() {
@@ -141,8 +178,13 @@ export class XtermTerminal {
     try { this.raw.clearTextureAtlas?.(); } catch {}
   }
 
+  forceRedraw() {
+    this.clearTextureAtlas();
+    this.refresh();
+  }
+
   write(data, callback) {
-    try { this.raw.write(data, callback); } catch {}
+    try { this.raw.write(data, callback); } catch { callback?.(); }
   }
 
   reset() {
@@ -167,20 +209,50 @@ export class XtermTerminal {
 
   dispose() {
     this.host = null;
+    this._disposeWebglRenderer(false);
+    this.refreshDimensionListeners.clear();
     try { this.raw.dispose(); } catch {}
   }
 
-  _loadRendererAddon() {
+  _shouldLoadWebgl() {
+    return !this.isMobile && XtermTerminal._suggestedRendererType !== 'dom';
+  }
+
+  _enableWebglRenderer() {
     // Keep the current mobile guard: @xterm/addon-webgl@0.18 can mis-measure
     // glyph atlases on fractional mobile DPRs.
-    if (this.isMobile) return;
+    if (!this.raw.element || !this._shouldLoadWebgl()) return;
+    this._disposeWebglRenderer(false);
     try {
       const webgl = new WebglAddon();
       this.webglAddon = webgl;
-      webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
+      this.webglContextLossDisposable = webgl.onContextLoss(() => {
+        console.warn('[ccsm] WebGL context lost, using DOM renderer');
+        this._disposeWebglRenderer();
+      });
       this.raw.loadAddon(webgl);
+      this._fireRequestRefreshDimensions();
     } catch (e) {
+      XtermTerminal._suggestedRendererType = 'dom';
+      this._disposeWebglRenderer(false);
       console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+      this._fireRequestRefreshDimensions();
+    }
+  }
+
+  _disposeWebglRenderer(requestRefresh = true) {
+    try { this.webglContextLossDisposable?.dispose(); } catch {}
+    this.webglContextLossDisposable = null;
+    if (this.webglAddon) {
+      try { this.webglAddon.dispose(); } catch {}
+      this.webglAddon = null;
+    }
+    if (requestRefresh) this._fireRequestRefreshDimensions();
+  }
+
+  _fireRequestRefreshDimensions() {
+    for (const listener of this.refreshDimensionListeners) {
+      try { listener(); } catch {}
     }
   }
 
@@ -195,4 +267,66 @@ export class XtermTerminal {
       return true;
     });
   }
+
+  _proposeDimensions(width, height) {
+    const cell = this._cellDimensions();
+    if (!cell) return null;
+
+    const elementStyle = this.raw.element
+      ? window.getComputedStyle(this.raw.element)
+      : null;
+    const px = (v) => Number.parseFloat(v || '0') || 0;
+    const horizontalPadding = elementStyle
+      ? px(elementStyle.paddingLeft) + px(elementStyle.paddingRight)
+      : 0;
+    const verticalPadding = elementStyle
+      ? px(elementStyle.paddingTop) + px(elementStyle.paddingBottom)
+      : 0;
+    const scrollbarWidth = this._scrollbarWidth();
+
+    const availableWidth = Math.max(0, width - horizontalPadding - scrollbarWidth);
+    const availableHeight = Math.max(0, height - verticalPadding);
+    if (!(availableWidth > 0 && availableHeight > 0)) return null;
+
+    const dpr = window.devicePixelRatio || 1;
+    const scaledWidth = availableWidth * dpr;
+    const scaledCellWidth = cell.width * dpr;
+    const scaledHeight = availableHeight * dpr;
+    const scaledCellHeight = Math.ceil(cell.height * dpr);
+
+    return {
+      cols: Math.max(1, Math.floor(scaledWidth / scaledCellWidth)),
+      rows: Math.max(1, Math.floor(scaledHeight / scaledCellHeight)),
+    };
+  }
+
+  _cellDimensions() {
+    const cell = this.raw?._core?._renderService?.dimensions?.css?.cell;
+    if (cell?.width > 0 && cell?.height > 0) {
+      return { width: cell.width, height: cell.height };
+    }
+
+    const proposed = (() => {
+      try { return this.fitAddon.proposeDimensions?.(); } catch { return null; }
+    })();
+    if (proposed?.cols > 0 && proposed?.rows > 0 && this.host) {
+      const rect = this.host.getBoundingClientRect();
+      return {
+        width: rect.width / proposed.cols,
+        height: rect.height / proposed.rows,
+      };
+    }
+    return null;
+  }
+
+  _scrollbarWidth() {
+    const core = this.raw?._core;
+    const width =
+      core?._viewport?.scrollBarWidth ??
+      core?.viewport?.scrollBarWidth ??
+      0;
+    return width > 0 ? width : SCROLLBAR_WIDTH_FALLBACK;
+  }
 }
+
+XtermTerminal._suggestedRendererType = undefined;