@bakapiano/ccsm 0.22.5 → 0.22.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.22.5",
+  "version": "0.22.6",
   "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/css/layout.css

@@ -152,25 +152,26 @@ body.is-resizing-sidebar .app {
   gap: var(--s-2);
   flex-shrink: 0;
 }
-.session-title-text {
-  font-weight: 500;
-  font-size: 13px;
-  letter-spacing: -0.005em;
-  color: var(--ink);
-  flex-shrink: 0;
-}
-.session-title-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--ink-muted);
-  font-size: 11.5px;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.session-title-meta .mono {
-  font-family: var(--mono);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 40vw;
-}
+.session-title-text {
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: 0;
+  color: var(--ink);
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: min(32ch, 36vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-title-cwd {
+  color: var(--ink-muted);
+  font-size: 11.5px;
+  font-family: var(--mono);
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: min(72ch, 52vw);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/public/css/terminals.css

@@ -383,17 +383,11 @@
   height: 18px;
   margin-right: 5px;
   border-radius: 3px;
-  opacity: 0;
+  opacity: 1;
   flex: 0 0 auto;
   cursor: pointer;
 }
-.session-tab:hover .session-tab-close,
-.session-tab.is-active .session-tab-close,
-.session-tab:focus-within .session-tab-close {
-  opacity: .72;
-}
 .session-tab-close:hover {
-  opacity: 1;
   background: rgba(255, 255, 255, 0.12);
 }
 .session-tab-close svg {

package/public/js/components/TerminalInstance.js

@@ -205,15 +205,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);

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/pages/SessionsPage.js

@@ -146,7 +146,6 @@ export function SessionsPage() {
   const id = activeSessionId.value;
   const list = sessions.value;
   const session = id ? list.find((s) => s.id === id) : null;
-  const runningSessions = list.filter((s) => s.status === 'running');
   const [resumeError, setResumeError] = useState(null);
   const [actionBusy, setActionBusy] = useState(false);
   const [openTerminalIds, setOpenTerminalIds] = useState(() => new Set());
@@ -175,24 +174,24 @@ export function SessionsPage() {
   }, [session?.id, session?.status, session?.cliId, session?.manualStopped, retryNonce]);
 
   useEffect(() => {
-    const runningIds = new Set(runningSessions.map((s) => s.id));
+    const existingIds = new Set(list.map((s) => s.id));
     setOpenTerminalIds((prev) => {
       const next = new Set();
       let changed = false;
       for (const sid of prev) {
-        if (runningIds.has(sid)) {
+        if (existingIds.has(sid)) {
           next.add(sid);
         } else {
           changed = true;
         }
       }
-      if (session?.status === 'running' && !next.has(session.id)) {
+      if (session?.id && existingIds.has(session.id) && !next.has(session.id)) {
         next.add(session.id);
         changed = true;
       }
       return changed || next.size !== prev.size ? next : prev;
     });
-  }, [list, session?.id, session?.status]);
+  }, [list, session?.id]);
 
   if (!session) return null;
 
@@ -202,12 +201,13 @@ export function SessionsPage() {
     ? (config.value?.clis || []).filter((c) => c.id !== cli.id && c.type === cli.type)
     : [];
   const running = session.status === 'running';
-  const retainedSessions = Array.from(openTerminalIds)
+  const openSessions = Array.from(openTerminalIds)
     .map((sid) => list.find((s) => s.id === sid))
-    .filter((s) => s && s.status === 'running');
-  const terminalSessions = running && !retainedSessions.some((s) => s.id === session.id)
-    ? [...retainedSessions, session]
-    : retainedSessions;
+    .filter(Boolean);
+  const tabSessions = session && !openSessions.some((s) => s.id === session.id)
+    ? [...openSessions, session]
+    : openSessions;
+  const terminalSessions = tabSessions.filter((s) => s.status === 'running');
   const title = session.title || session.workspace || session.id.slice(0, 12);
 
   const onCloseTab = (sid) => {
@@ -219,8 +219,8 @@ export function SessionsPage() {
     });
 
     if (sid !== session.id) return;
-    const currentIndex = terminalSessions.findIndex((s) => s.id === sid);
-    const remaining = terminalSessions.filter((s) => s.id !== sid);
+    const currentIndex = tabSessions.findIndex((s) => s.id === sid);
+    const remaining = tabSessions.filter((s) => s.id !== sid);
     const replacement = currentIndex >= 0
       ? remaining[Math.min(currentIndex, remaining.length - 1)] || remaining[remaining.length - 1]
       : remaining[0];
@@ -233,14 +233,14 @@ export function SessionsPage() {
   };
 
   const onReorderTabs = (orderedIds) => {
-    const runningIds = new Set(runningSessions.map((s) => s.id));
+    const existingIds = new Set(list.map((s) => s.id));
     setOpenTerminalIds((prev) => {
       const nextIds = [];
       for (const sid of orderedIds) {
-        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+        if (existingIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
       }
       for (const sid of prev) {
-        if (runningIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
+        if (existingIds.has(sid) && !nextIds.includes(sid)) nextIds.push(sid);
       }
       return new Set(nextIds);
     });
@@ -317,21 +317,14 @@ export function SessionsPage() {
     } catch (e) { setToast(e.message, 'error'); }
   };
 
-  return html`
-    <${PageTitleBar} title=${html`
-        <span class="session-title-text">${title}</span>
-        <span class="session-title-meta">
-          <span class="mono">${session.cwd}</span>
-          <span>·</span>
-          <span>${cli ? cli.name : session.cliId}</span>
-          ${session.repos.length ? html`<span>·</span><span>${session.repos.join(', ')}</span>` : null}
-          <span>·</span>
-          <span>${running ? 'running' : (resumeError ? 'resume failed' : (session.manualStopped ? 'stopped' : 'resuming…'))}</span>
-        </span>
+  return html`
+    <${PageTitleBar} title=${html`
+        <span class="session-title-text" title=${title}>${title}</span>
+        <span class="session-title-cwd" title=${session.cwd}>${session.cwd}</span>
       `} />
     <${SessionTabs}
       activeId=${session.id}
-      openSessions=${terminalSessions}
+      openSessions=${tabSessions}
       onActivate=${(sid) => selectSession(sid)}
       onClose=${onCloseTab}
       onReorder=${onReorderTabs}