@bakapiano/ccsm 0.22.3 → 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 {
@@ -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,60 @@ 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);
+  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();
+      });
     }
-    return dimensions;
+    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 +137,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 +198,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 +213,7 @@ export class TerminalInstance {
     }
 
     this._wireTabVisibilityRefresh(host);
+    this._wireDocumentVisibilityRefresh();
     this._wirePasteHandlers(host);
     this._wireModifiedEnterHandler(host);
     this._wireCompositionHandlers();
@@ -164,19 +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.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 +358,74 @@ export class TerminalInstance {
       this.xterm.write(data);
       return;
     }
-    this.inReplay = true;
+    this._beginReplay();
     this.xterm.write(data, () => {
-      this.inReplay = false;
+      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

@@ -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,21 @@ export class XtermTerminal {
   attachToElement(host) {
     this.host = host;
     this.raw.open(host);
-    this.scheduleLayout();
+    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 +137,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 +156,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 +178,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?.(); }
   }
@@ -194,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 {}
     }
   }
 
@@ -283,3 +328,5 @@ export class XtermTerminal {
     return width > 0 ? width : SCROLLBAR_WIDTH_FALLBACK;
   }
 }
+
+XtermTerminal._suggestedRendererType = undefined;

package/public/js/components/useDragSort.js

@@ -1,67 +1,67 @@
-// Lightweight HTML5 drag-reorder helper.
-//
-// Usage:
-//   const dnd = useDragSort(items.map((i) => i.id), async (nextIds) => {
-//     await reorderFolders(nextIds);
-//   });
-//   items.map((it) => html`
-//     <div ...${dnd.rowProps(it.id)}>
-//       <span ...${dnd.handleProps(it.id)}>⋮⋮</span>
-//       ...
-//     </div>`);
-//
-// rowProps spreads onDragOver / onDrop / data-* on the row container.
-// handleProps spreads draggable + onDragStart on the drag handle. We
-// gate "draggable" on the handle so clicks inside the row don't start a
-// drag and the user can still click rows normally.
-
-import { useRef, useState } from 'preact/hooks';
-
-export function useDragSort(ids, onCommit) {
-  const dragging = useRef(null);
-  const [overId, setOverId] = useState(null);
-
-  const handleProps = (id) => ({
-    draggable: true,
-    onDragStart: (ev) => {
-      dragging.current = id;
-      ev.dataTransfer.effectAllowed = 'move';
-      // Setting some data is required for Firefox to actually start a drag.
-      try { ev.dataTransfer.setData('text/plain', id); } catch {}
-    },
-    onDragEnd: () => { dragging.current = null; setOverId(null); },
-  });
-
-  const rowProps = (id) => ({
-    'data-dnd-id': id,
-    'data-dnd-over': overId === id ? 'true' : undefined,
-    onDragOver: (ev) => {
-      if (dragging.current == null || dragging.current === id) return;
-      ev.preventDefault();
-      ev.dataTransfer.dropEffect = 'move';
-      if (overId !== id) setOverId(id);
-    },
-    onDragLeave: (ev) => {
-      // Only clear if the pointer leaves the row entirely (not when entering a child).
-      const rt = ev.relatedTarget;
-      if (rt && ev.currentTarget.contains(rt)) return;
-      if (overId === id) setOverId(null);
-    },
-    onDrop: (ev) => {
-      ev.preventDefault();
-      const src = dragging.current;
-      dragging.current = null;
-      setOverId(null);
-      if (src == null || src === id) return;
-      const cur = [...ids];
-      const from = cur.indexOf(src);
-      const to = cur.indexOf(id);
-      if (from < 0 || to < 0) return;
-      cur.splice(from, 1);
-      cur.splice(to, 0, src);
-      onCommit?.(cur);
-    },
-  });
-
-  return { handleProps, rowProps, draggingId: dragging.current, overId };
-}
+// Lightweight HTML5 drag-reorder helper.
+//
+// Usage:
+//   const dnd = useDragSort(items.map((i) => i.id), async (nextIds) => {
+//     await reorderFolders(nextIds);
+//   });
+//   items.map((it) => html`
+//     <div ...${dnd.rowProps(it.id)}>
+//       <span ...${dnd.handleProps(it.id)}>⋮⋮</span>
+//       ...
+//     </div>`);
+//
+// rowProps spreads onDragOver / onDrop / data-* on the row container.
+// handleProps spreads draggable + onDragStart on the drag handle. We
+// gate "draggable" on the handle so clicks inside the row don't start a
+// drag and the user can still click rows normally.
+
+import { useRef, useState } from 'preact/hooks';
+
+export function useDragSort(ids, onCommit) {
+  const dragging = useRef(null);
+  const [overId, setOverId] = useState(null);
+
+  const handleProps = (id) => ({
+    draggable: true,
+    onDragStart: (ev) => {
+      dragging.current = id;
+      ev.dataTransfer.effectAllowed = 'move';
+      // Setting some data is required for Firefox to actually start a drag.
+      try { ev.dataTransfer.setData('text/plain', id); } catch {}
+    },
+    onDragEnd: () => { dragging.current = null; setOverId(null); },
+  });
+
+  const rowProps = (id) => ({
+    'data-dnd-id': id,
+    'data-dnd-over': overId === id ? 'true' : undefined,
+    onDragOver: (ev) => {
+      if (dragging.current == null || dragging.current === id) return;
+      ev.preventDefault();
+      ev.dataTransfer.dropEffect = 'move';
+      if (overId !== id) setOverId(id);
+    },
+    onDragLeave: (ev) => {
+      // Only clear if the pointer leaves the row entirely (not when entering a child).
+      const rt = ev.relatedTarget;
+      if (rt && ev.currentTarget.contains(rt)) return;
+      if (overId === id) setOverId(null);
+    },
+    onDrop: (ev) => {
+      ev.preventDefault();
+      const src = dragging.current;
+      dragging.current = null;
+      setOverId(null);
+      if (src == null || src === id) return;
+      const cur = [...ids];
+      const from = cur.indexOf(src);
+      const to = cur.indexOf(id);
+      if (from < 0 || to < 0) return;
+      cur.splice(from, 1);
+      cur.splice(to, 0, src);
+      onCommit?.(cur);
+    },
+  });
+
+  return { handleProps, rowProps, draggingId: dragging.current, overId };
+}