@bakapiano/ccsm 0.22.3 → 0.22.5

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 {
@@ -18,19 +19,36 @@ export class TerminalInstance {
     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) {
@@ -45,19 +63,68 @@ export class TerminalInstance {
     this.xterm.applyResolvedTheme();
   }
 
-  layout(width, height) {
-    const dimensions = (width > 0 && height > 0)
-      ? this.xterm.layout(width, height)
-      : this.xterm.layoutFromElement();
-    if (dimensions) {
-      this._sendResize(dimensions.cols, dimensions.rows);
+  focus() {
+    this.xterm.focus();
+  }
+
+  blur() {
+    this.xterm.blur();
+  }
+
+  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;
     }
-    return dimensions;
+
+    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 {}
     }
@@ -78,8 +145,7 @@ export class TerminalInstance {
       }
       this.everOpened = true;
       this.attempts = 0;
-      this.layout();
-      this.xterm.scheduleLayout();
+      this.scheduleLayout({ immediate: true, retries: true });
       this._sendResize(this.xterm.cols, this.xterm.rows, true);
     };
     ws.onmessage = (ev) => {
@@ -140,7 +206,7 @@ export class TerminalInstance {
     this.disposables.push(() => ro.disconnect());
 
     const vv = window.visualViewport;
-    const onVisualResize = () => this.xterm.scheduleLayout();
+    const onVisualResize = () => this.scheduleLayout({ retries: true });
     vv?.addEventListener?.('resize', onVisualResize);
     vv?.addEventListener?.('scroll', onVisualResize);
     this.disposables.push(() => {
@@ -155,6 +221,7 @@ export class TerminalInstance {
     }
 
     this._wireTabVisibilityRefresh(host);
+    this._wireDocumentVisibilityRefresh();
     this._wirePasteHandlers(host);
     this._wireModifiedEnterHandler(host);
     this._wireCompositionHandlers();
@@ -164,19 +231,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.scheduleLayout();
-          this.layout();
-          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;
@@ -294,12 +366,77 @@ export class TerminalInstance {
       this.xterm.write(data);
       return;
     }
-    this.inReplay = true;
+    this._beginReplay();
     this.xterm.write(data, () => {
-      this.inReplay = false;
+      this._endReplay();
+      if (this.isVisible) {
+        this.scheduleLayout({ immediate: true, retries: true, forceRedraw: true });
+      }
     });
   }
 
+  _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/TerminalView.js

@@ -8,7 +8,7 @@ import { themeMode } from '../state.js';
 import { TerminalKeyBar } from './TerminalKeyBar.js';
 import { TerminalInstance } from './TerminalInstance.js';
 
-export function TerminalView({ terminalId, cliType }) {
+export function TerminalView({ terminalId, cliType, visible = true }) {
   const hostRef = useRef(null);
   const instanceRef = useRef(null);
   const [displaced, setDisplaced] = useState(false);
@@ -38,6 +38,8 @@ export function TerminalView({ terminalId, cliType }) {
     });
     instanceRef.current = instance;
     instance.attachToElement(host);
+    instance.setVisible(visible);
+    if (visible) instance.focus();
 
     return () => {
       if (instanceRef.current === instance) instanceRef.current = null;
@@ -49,6 +51,17 @@ export function TerminalView({ terminalId, cliType }) {
     instanceRef.current?.setCliType(cliType);
   }, [cliType, terminalId, reattachNonce]);
 
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (!instance) return;
+    instance.setVisible(visible);
+    if (visible) {
+      instance.focus();
+    } else {
+      instance.blur();
+    }
+  }, [visible, terminalId, reattachNonce]);
+
   if (!terminalId) {
     return html`<div class="terminal-empty">Select a terminal on the left, or launch a new one.</div>`;
   }
@@ -80,6 +93,6 @@ export function TerminalView({ terminalId, cliType }) {
   return html`
     <${Fragment}>
       <div key="host" ref=${hostRef} class="terminal-host"></div>
-      <${TerminalKeyBar} send=${sendInput} cliType=${cliType} />
+      ${visible ? html`<${TerminalKeyBar} send=${sendInput} cliType=${cliType} />` : null}
     </${Fragment}>`;
 }

package/public/js/components/XtermTerminal.js

@@ -59,6 +59,8 @@ export class XtermTerminal {
     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({
@@ -82,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() {
@@ -97,14 +99,22 @@ export class XtermTerminal {
   attachToElement(host) {
     this.host = host;
     this.raw.open(host);
-    this.scheduleLayout();
+    host.xterm = this.raw;
+    this._enableWebglRenderer();
     try {
       document.fonts?.ready?.then(() => {
-        if (this.host === host) this.scheduleLayout();
+        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;
@@ -128,15 +138,6 @@ export class XtermTerminal {
     try { this.raw.write('\x1b[?25l'); } catch {}
   }
 
-  scheduleLayout() {
-    this.layoutFromElement();
-    requestAnimationFrame(() => {
-      this.layoutFromElement();
-      setTimeout(() => this.layoutFromElement(), 60);
-      setTimeout(() => this.layoutFromElement(), 200);
-    });
-  }
-
   layoutFromElement() {
     if (!this.host) return null;
     const rect = this.host.getBoundingClientRect();
@@ -156,6 +157,16 @@ export class XtermTerminal {
     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() {
     try { this.fitAddon.fit(); } catch {}
   }
@@ -168,6 +179,11 @@ export class XtermTerminal {
     try { this.raw.clearTextureAtlas?.(); } catch {}
   }
 
+  forceRedraw() {
+    this.clearTextureAtlas();
+    this.refresh();
+  }
+
   write(data, callback) {
     try { this.raw.write(data, callback); } catch { callback?.(); }
   }
@@ -180,6 +196,14 @@ export class XtermTerminal {
     try { this.raw.focus(); } catch {}
   }
 
+  blur() {
+    try {
+      if (this.helperTextarea && document.activeElement === this.helperTextarea) {
+        this.helperTextarea.blur();
+      }
+    } catch {}
+  }
+
   onData(listener) {
     return this.raw.onData(listener);
   }
@@ -193,21 +217,54 @@ export class XtermTerminal {
   }
 
   dispose() {
+    if (this.host?.xterm === this.raw) {
+      try { delete this.host.xterm; } catch { this.host.xterm = undefined; }
+    }
     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 {}
     }
   }
 
@@ -283,3 +340,5 @@ export class XtermTerminal {
     return width > 0 ? width : SCROLLBAR_WIDTH_FALLBACK;
   }
 }
+
+XtermTerminal._suggestedRendererType = undefined;