@bakapiano/ccsm 0.22.5 → 0.22.7

package/public/js/components/TerminalInstance.js

@@ -24,6 +24,8 @@ export class TerminalInstance {
     this.lastLayoutDimensions = null;
     this.lastSentDimensions = null;
     this.pendingLayoutFrame = null;
+    this.themeRefreshTimer = null;
+    this.pendingThemeRefresh = false;
     this.layoutRetryTimers = new Set();
     this.disposables = [];
     this.helperTextarea = null;
@@ -61,6 +63,8 @@ export class TerminalInstance {
 
   applyTheme() {
     this.xterm.applyResolvedTheme();
+    this.xterm.forceRedraw();
+    this._scheduleThemeRefreshForCli();
   }
 
   focus() {
@@ -116,6 +120,10 @@ export class TerminalInstance {
     if (nextVisible) {
       this.resizeDebouncer.flush();
       this.scheduleLayout({ immediate: true, retries: true, forceRedraw: true });
+      if (this.pendingThemeRefresh) {
+        this.pendingThemeRefresh = false;
+        this._scheduleThemeRefreshForCli();
+      }
     }
     return didChange;
   }
@@ -123,6 +131,9 @@ export class TerminalInstance {
   dispose() {
     this.closedByUs = true;
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    if (this.themeRefreshTimer) clearTimeout(this.themeRefreshTimer);
+    this.themeRefreshTimer = null;
+    this.pendingThemeRefresh = false;
     this._cancelScheduledLayout();
     this.resizeDebouncer.dispose();
     for (const dispose of this.disposables.splice(0)) {
@@ -205,15 +216,6 @@ export class TerminalInstance {
     ro.observe(host);
     this.disposables.push(() => ro.disconnect());
 
-    const vv = window.visualViewport;
-    const onVisualResize = () => this.scheduleLayout({ retries: true });
-    vv?.addEventListener?.('resize', onVisualResize);
-    vv?.addEventListener?.('scroll', onVisualResize);
-    this.disposables.push(() => {
-      vv?.removeEventListener?.('resize', onVisualResize);
-      vv?.removeEventListener?.('scroll', onVisualResize);
-    });
-
     const onHostClick = () => this.xterm.focus();
     if (this.xterm.isMobile) {
       host.addEventListener('click', onHostClick);
@@ -349,6 +351,23 @@ export class TerminalInstance {
     }
   }
 
+  _scheduleThemeRefreshForCli() {
+    if (this.cliType !== 'codex') return;
+    if (!this.isVisible) {
+      this.pendingThemeRefresh = true;
+      return;
+    }
+    if (this.themeRefreshTimer) clearTimeout(this.themeRefreshTimer);
+    // Codex caches terminal default colours for its composer. A focus-in
+    // event makes it re-query OSC 10/11, which our handlers answer from the
+    // just-applied xterm theme.
+    this.themeRefreshTimer = setTimeout(() => {
+      this.themeRefreshTimer = null;
+      if (this.closedByUs || this.cliType !== 'codex' || !this.isVisible) return;
+      this._sendFrame({ type: 'input', data: '\x1b[I' });
+    }, 40);
+  }
+
   _sendResize(cols, rows, force = false) {
     if (!(cols > 0 && rows > 0)) return;
     if (!force

package/public/js/components/XtermTerminal.js

@@ -61,6 +61,8 @@ export class XtermTerminal {
     this.webglAddon = null;
     this.webglContextLossDisposable = null;
     this.refreshDimensionListeners = new Set();
+    this.resizeScrollState = null;
+    this.resizeScrollStateTimer = null;
     this.host = null;
 
     this.raw = new Terminal({
@@ -151,7 +153,7 @@ export class XtermTerminal {
     if (!proposed) return null;
 
     if (proposed.cols !== this.raw.cols || proposed.rows !== this.raw.rows) {
-      try { this.raw.resize(proposed.cols, proposed.rows); } catch {}
+      this._resizeRaw(proposed.cols, proposed.rows);
     }
     lastKnownGridDimensions = proposed;
     return proposed;
@@ -163,7 +165,7 @@ export class XtermTerminal {
 
   resize(cols, rows) {
     if (!(cols > 0 && rows > 0)) return;
-    try { this.raw.resize(cols, rows); } catch {}
+    this._resizeRaw(cols, rows);
     lastKnownGridDimensions = { cols: this.raw.cols, rows: this.raw.rows };
   }
 
@@ -217,6 +219,9 @@ export class XtermTerminal {
   }
 
   dispose() {
+    if (this.resizeScrollStateTimer) clearTimeout(this.resizeScrollStateTimer);
+    this.resizeScrollState = null;
+    this.resizeScrollStateTimer = null;
     if (this.host?.xterm === this.raw) {
       try { delete this.host.xterm; } catch { this.host.xterm = undefined; }
     }
@@ -268,6 +273,61 @@ export class XtermTerminal {
     }
   }
 
+  _resizeRaw(cols, rows) {
+    const scrollState = this._scrollStateForResize();
+    try { this.raw.resize(cols, rows); } catch {}
+    this._restoreScrollStateIfNeeded(scrollState);
+    requestAnimationFrame(() => this._restoreScrollStateIfNeeded(scrollState));
+    setTimeout(() => this._restoreScrollStateIfNeeded(scrollState), 150);
+    setTimeout(() => this._restoreScrollStateIfNeeded(scrollState), 350);
+  }
+
+  _scrollStateForResize() {
+    const state = this._captureScrollState();
+    if (state?.viewportY > 0) {
+      this._rememberResizeScrollState(state);
+      return state;
+    }
+    return this.resizeScrollState;
+  }
+
+  _rememberResizeScrollState(state) {
+    this.resizeScrollState = state;
+    if (this.resizeScrollStateTimer) clearTimeout(this.resizeScrollStateTimer);
+    this.resizeScrollStateTimer = setTimeout(() => {
+      this.resizeScrollState = null;
+      this.resizeScrollStateTimer = null;
+    }, 500);
+  }
+
+  _captureScrollState() {
+    const buffer = this.raw?.buffer?.active;
+    if (!buffer) return null;
+    return {
+      viewportY: buffer.viewportY,
+      baseY: buffer.baseY,
+      atBottom: buffer.viewportY >= buffer.baseY,
+    };
+  }
+
+  _restoreScrollStateIfNeeded(state) {
+    if (!state || !(state.viewportY > 0)) return;
+    const buffer = this.raw?.buffer?.active;
+    if (!buffer) return;
+
+    if (state.atBottom) {
+      if (buffer.viewportY < buffer.baseY) {
+        try { this.raw.scrollToBottom(); } catch {}
+      }
+      return;
+    }
+
+    const target = Math.min(state.viewportY, buffer.baseY);
+    if (target > 0 && buffer.viewportY !== target) {
+      try { this.raw.scrollToLine(target); } catch {}
+    }
+  }
+
   _installSelectionCopyGuard() {
     this.raw.attachCustomKeyEventHandler((ev) => {
       if (ev.type === 'keydown'

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 };
+}

package/public/js/dialog.js

@@ -1,67 +1,67 @@
-// Promise-based confirm/prompt rendered through DialogHost. The stack
-// signal lets us nest dialogs if ever needed; .close() pops by id.
-
-import { signal } from '@preact/signals';
-import { html } from './html.js';
-
-export const dialogs = signal([]);
-let nextId = 1;
-
-function push(entry) {
-  return new Promise((resolve) => {
-    const id = nextId++;
-    const close = (action, host) => {
-      dialogs.value = dialogs.value.filter((d) => d.id !== id);
-      resolve(entry.onResolve(action, host));
-    };
-    dialogs.value = [...dialogs.value, { id, ...entry, close }];
-  });
-}
-
-const CLOSE_X = html`
-  <button class="modal-close" type="button" aria-label="Close" data-action="cancel">
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-      <line x1="3" y1="3" x2="13" y2="13"/>
-      <line x1="13" y1="3" x2="3" y2="13"/>
-    </svg>
-  </button>`;
-
-export function ccsmConfirm(message, opts = {}) {
-  const { title = 'Confirm', okLabel = 'Confirm', cancelLabel = 'Cancel', danger = false } = opts;
-  return push({
-    render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title}</h2>${CLOSE_X}</header>
-      <div class="modal-body"><p class="dialog-msg">${message}</p></div>
-      <footer class="modal-foot">
-        <button class="action" data-action="cancel">${cancelLabel}</button>
-        <button class=${`action ${danger ? 'danger' : 'primary'}`} data-action="ok">${okLabel}</button>
-      </footer>
-    </div>`,
-    onResolve: (action) => action === 'ok' || action === 'enter',
-  });
-}
-
-export function ccsmPrompt(message, defaultValue = '', opts = {}) {
-  const { title, okLabel = 'Save', cancelLabel = 'Cancel', placeholder = '' } = opts;
-  return push({
-    render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title || message}</h2>${CLOSE_X}</header>
-      <div class="modal-body">
-        ${title ? html`<p class="dialog-msg">${message}</p>` : null}
-        <input type="text" class="input" placeholder=${placeholder} value=${defaultValue} />
-      </div>
-      <footer class="modal-foot">
-        <button class="action" data-action="cancel">${cancelLabel}</button>
-        <button class="action primary" data-action="ok">${okLabel}</button>
-      </footer>
-    </div>`,
-    initialFocus: (host) => {
-      const inp = host.querySelector('input');
-      if (inp) { inp.focus(); inp.select(); }
-    },
-    onResolve: (action, host) => {
-      const inp = host?.querySelector('input');
-      return (action === 'ok' || action === 'enter') ? (inp?.value ?? '') : null;
-    },
-  });
-}
+// Promise-based confirm/prompt rendered through DialogHost. The stack
+// signal lets us nest dialogs if ever needed; .close() pops by id.
+
+import { signal } from '@preact/signals';
+import { html } from './html.js';
+
+export const dialogs = signal([]);
+let nextId = 1;
+
+function push(entry) {
+  return new Promise((resolve) => {
+    const id = nextId++;
+    const close = (action, host) => {
+      dialogs.value = dialogs.value.filter((d) => d.id !== id);
+      resolve(entry.onResolve(action, host));
+    };
+    dialogs.value = [...dialogs.value, { id, ...entry, close }];
+  });
+}
+
+const CLOSE_X = html`
+  <button class="modal-close" type="button" aria-label="Close" data-action="cancel">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="3" y1="3" x2="13" y2="13"/>
+      <line x1="13" y1="3" x2="3" y2="13"/>
+    </svg>
+  </button>`;
+
+export function ccsmConfirm(message, opts = {}) {
+  const { title = 'Confirm', okLabel = 'Confirm', cancelLabel = 'Cancel', danger = false } = opts;
+  return push({
+    render: () => html`<div class="modal modal-dialog">
+      <header class="modal-head"><h2>${title}</h2>${CLOSE_X}</header>
+      <div class="modal-body"><p class="dialog-msg">${message}</p></div>
+      <footer class="modal-foot">
+        <button class="action" data-action="cancel">${cancelLabel}</button>
+        <button class=${`action ${danger ? 'danger' : 'primary'}`} data-action="ok">${okLabel}</button>
+      </footer>
+    </div>`,
+    onResolve: (action) => action === 'ok' || action === 'enter',
+  });
+}
+
+export function ccsmPrompt(message, defaultValue = '', opts = {}) {
+  const { title, okLabel = 'Save', cancelLabel = 'Cancel', placeholder = '' } = opts;
+  return push({
+    render: () => html`<div class="modal modal-dialog">
+      <header class="modal-head"><h2>${title || message}</h2>${CLOSE_X}</header>
+      <div class="modal-body">
+        ${title ? html`<p class="dialog-msg">${message}</p>` : null}
+        <input type="text" class="input" placeholder=${placeholder} value=${defaultValue} />
+      </div>
+      <footer class="modal-foot">
+        <button class="action" data-action="cancel">${cancelLabel}</button>
+        <button class="action primary" data-action="ok">${okLabel}</button>
+      </footer>
+    </div>`,
+    initialFocus: (host) => {
+      const inp = host.querySelector('input');
+      if (inp) { inp.focus(); inp.select(); }
+    },
+    onResolve: (action, host) => {
+      const inp = host?.querySelector('input');
+      return (action === 'ok' || action === 'enter') ? (inp?.value ?? '') : null;
+    },
+  });
+}