@bakapiano/ccsm 0.22.2 → 0.22.3

package/lib/webTerminal.js

@@ -122,13 +122,15 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {},
 // Strip ANSI sequences from history that would cause spurious
 // terminal-to-host responses if a fresh xterm.js re-parses the replay.
 // Specifically: device-attribute / device-status queries (CSI c, CSI 0c,
-// CSI >0c, CSI 5n, CSI 6n, …) — the original xterm already answered
-// them, but on attach we replay everything; without scrubbing, the new
-// xterm answers them too, the reply goes through our onData→PTY pipe,
-// the CLI sees garbage bytes in its stdin, and echoes them back as
-// visible junk like `[?12;2c`.
+// CSI >0c, CSI 5n, CSI 6n, …) and OSC 10/11 default color queries. The
+// original xterm already answered them, but on attach we replay everything;
+// without scrubbing, the new xterm answers them too, the reply goes through
+// our onData→PTY pipe, the CLI sees garbage bytes in its stdin, and echoes
+// them back as visible junk like `[?12;2c` or `]11;rgb:…`.
 function scrubReplayResponses(history) {
   return history
+    // OSC 10/11 ; ? ST/BEL  (default foreground/background color queries)
+    .replace(/\x1b\](?:10|11);\?(?:\x07|\x1b\\)/g, '')
     // CSI [ ? Ps c   (primary DA query)
     .replace(/\x1b\[[?>0-9]*c/g, '')
     // CSI [ Ps n     (device status / cursor position queries)
@@ -157,7 +159,7 @@ function attach(id, ws) {
   entry.sockets.clear();
   entry.sockets.add(ws);
   if (entry.history) {
-    try { ws.send(JSON.stringify({ type: 'output', data: scrubReplayResponses(entry.history) })); } catch {}
+    try { ws.send(JSON.stringify({ type: 'output', data: scrubReplayResponses(entry.history), replay: true })); } catch {}
   }
   if (entry.exitedAt) {
     try { ws.send(JSON.stringify({ type: 'exit', code: entry.exitCode })); } catch {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "Claude Code Session Manager — Windows web UI to manage many concurrent claude sessions: live list, snapshot/restore, focus existing window, new session in an isolated workspace with repo clones",
   "license": "MIT",
   "main": "server.js",

package/public/js/components/TerminalInstance.js

@@ -17,6 +17,8 @@ export class TerminalInstance {
     this.reconnectTimer = null;
     this.attempts = 0;
     this.everOpened = false;
+    this.inReplay = false;
+    this.lastSentDimensions = null;
     this.disposables = [];
     this.helperTextarea = null;
   }
@@ -43,6 +45,16 @@ 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);
+    }
+    return dimensions;
+  }
+
   dispose() {
     this.closedByUs = true;
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
@@ -66,14 +78,15 @@ 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.layout();
+      this.xterm.scheduleLayout();
+      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 +114,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 +128,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.xterm.scheduleLayout();
     vv?.addEventListener?.('resize', onVisualResize);
     vv?.addEventListener?.('scroll', onVisualResize);
     this.disposables.push(() => {
@@ -146,7 +167,8 @@ export class TerminalInstance {
       if (panel.hasAttribute('data-active')) {
         requestAnimationFrame(() => {
           this.xterm.clearTextureAtlas();
-          this.xterm.scheduleFit();
+          this.xterm.scheduleLayout();
+          this.layout();
           this.xterm.refresh();
         });
       }
@@ -235,6 +257,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 +277,29 @@ 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.inReplay = true;
+    this.xterm.write(data, () => {
+      this.inReplay = false;
+    });
+  }
+
   _wsUrl() {
     const tok = getToken();
     const dev = getDeviceId();

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,6 +51,8 @@ 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;
@@ -59,6 +65,8 @@ export class XtermTerminal {
       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,
@@ -89,10 +97,10 @@ export class XtermTerminal {
   attachToElement(host) {
     this.host = host;
     this.raw.open(host);
-    this.scheduleFit();
+    this.scheduleLayout();
     try {
       document.fonts?.ready?.then(() => {
-        if (this.host === host) this.scheduleFit();
+        if (this.host === host) this.scheduleLayout();
       });
     } catch {}
   }
@@ -120,15 +128,34 @@ export class XtermTerminal {
     try { this.raw.write('\x1b[?25l'); } catch {}
   }
 
-  scheduleFit() {
-    this.fit();
+  scheduleLayout() {
+    this.layoutFromElement();
     requestAnimationFrame(() => {
-      this.fit();
-      setTimeout(() => this.fit(), 60);
-      setTimeout(() => this.fit(), 200);
+      this.layoutFromElement();
+      setTimeout(() => this.layoutFromElement(), 60);
+      setTimeout(() => this.layoutFromElement(), 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;
+  }
+
   fit() {
     try { this.fitAddon.fit(); } catch {}
   }
@@ -142,7 +169,7 @@ export class XtermTerminal {
   }
 
   write(data, callback) {
-    try { this.raw.write(data, callback); } catch {}
+    try { this.raw.write(data, callback); } catch { callback?.(); }
   }
 
   reset() {
@@ -195,4 +222,64 @@ 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;
+  }
 }