@bakapiano/ccsm 0.17.8 → 0.17.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.17.8",
+  "version": "0.17.10",
   "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

@@ -105,7 +105,11 @@ body.is-resizing-sidebar .app {
   align-items: center;
   justify-content: flex-start;
   gap: var(--s-3);
-  height: 40px;
+  height: calc(40px * var(--anti-zoom, 1));
+  min-height: calc(40px * var(--anti-zoom, 1));
+  max-height: calc(40px * var(--anti-zoom, 1));
+  flex-shrink: 0;
+  box-sizing: border-box;
   margin: 0 calc(-1 * var(--s-4)) 0;
   padding: 0 var(--s-5);
   /* Replace the hard inset shadow rule with a soft gradient fade — gives

package/public/css/terminals.css

@@ -232,6 +232,49 @@
   background: var(--bg-elev);
   overflow: hidden;
 }
+.session-actions {
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 0;
+  height: calc(24px * var(--anti-zoom, 1));
+  min-height: calc(24px * var(--anti-zoom, 1));
+  max-height: calc(24px * var(--anti-zoom, 1));
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 0;
+  background: var(--accent);
+  border-top: 0;
+}
+.session-actions .action {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.85);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background-color .12s, color .12s;
+}
+.session-actions .action:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+}
+.session-actions .action.danger:hover {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.22);
+}
+.session-actions .action svg {
+  width: 13px;
+  height: 13px;
+  stroke-width: 1.75;
+}
 .session-pane-head {
   display: flex;
   align-items: center;

package/public/css/wco.css

@@ -55,15 +55,6 @@ body.is-app .page-subtitle {
 body.is-app .sidebar { padding-top: 0; }
 body.is-app .main    { padding-top: 0; }
 
-/* Reserve room on the right of page-title-bar so its action buttons don't
-   slide under the floating OS controls. 150px covers Windows controls
-   (~46px each × 3) with breathing room; macOS traffic lights are on the
-   left so this padding is harmless there. WCO override below uses the
-   precise env() value when available. */
-body.is-app .page-title-bar {
-  padding-right: calc(var(--s-4) + 150px);
-}
-
 body.is-app .page-title,
 body.is-app .page-subtitle {
   display: none;
@@ -75,24 +66,77 @@ body.is-app .page-head {
   min-height: 28px;
 }
 
-/* PWA / WCO / --app= mode: shrink the top band to 32px so its mid-line
-   matches the OS-floated close/max/min icons (which sit in a fixed ~32px
-   bar at y=0 and can't be moved). Outside app mode we keep the roomier
-   40px band — see sidebar.css / layout.css. */
-body.is-app .page-title-bar,
-body.is-app .sidebar-top {
-  height: 32px;
-  min-height: 32px;
+/* Standalone PWA (browser still paints its own title bar above our
+   document): suppress our duplicate chrome — the brand mark + collapse
+   row at top-left of the sidebar AND the page-title-bar header — since
+   the OS title bar already shows the app name and serves as the visual
+   header. With sidebar-top hidden, the nav tabs (Sessions/Launch/…)
+   float up to start at the very top of the sidebar column. A 1px
+   border-top across the whole app grid gives the OS title bar something
+   to rest against instead of bleeding straight into our content. */
+body.is-app:not(.is-wco) .sidebar-top {
+  display: none;
 }
-body.is-app .sidebar-brand,
-body.is-app .sidebar-brand-button,
-body.is-app .collapse-toggle {
-  height: 32px;
-  min-height: 32px;
+body.is-app:not(.is-wco) .page-title-bar {
+  display: none;
+}
+body.is-app:not(.is-wco) .app {
+  /* Hairline separator under the OS title bar. Painted as an inset
+     box-shadow rather than a border so it doesn't change .app's box
+     model — a real border-top added 1px to .app's height, and the
+     grid's implicit row auto-sized off content (.main reporting 720)
+     rather than the (now 719px) container, so .main overflowed the
+     viewport by exactly 1px and put a permanent vertical scrollbar
+     down the right of the terminal page. Inset shadow draws the same
+     line with zero layout cost. */
+  box-shadow: inset 0 1px 0 var(--border);
+}
+/* With page-title-bar hidden, session-pane's `margin-top: calc(-1 *
+   var(--s-4))` — designed to flush it against the (now invisible)
+   title-bar — would otherwise yank the terminal up into the OS title-bar
+   border. Zero the margin AND drop session-pane's `height: 100%` so flex
+   does all the height math; otherwise the height: 100% double-counts and
+   creates dead space at the bottom. */
+body.is-app:not(.is-wco) .session-pane {
+  margin-top: 0;
+  height: auto;
+}
+/* Settings page · with the title-bar hidden in standalone its content
+   would otherwise butt straight against the OS title-bar border. Give
+   it back a little breathing room (Sessions / Launch / About don't
+   need this — they have their own top chrome or flush-to-edge intent). */
+body.is-app:not(.is-wco) [data-panel="configure"] {
+  padding-top: var(--s-4);
+}
+
+/* WCO mode only: the browser has hidden its own title bar and floats OS
+   controls (min/max/close) over our content top-right. Our 34px top band
+   IS the title bar in that case — it gets shrunk to match the OS control
+   strip height, and reserves a right-side padding so action buttons don't
+   slide under those floating controls. 150px covers Windows controls
+   (~46px × 3) with breathing room; the env() override below uses the
+   precise titlebar-area-width when the browser exposes it.
+   In plain standalone PWA (browser still paints its own title bar above
+   our document), none of this applies — our page-title-bar behaves like
+   a normal 40px page header from layout.css. */
+body.is-wco .page-title-bar {
+  padding-right: calc(var(--s-4) + 150px);
+}
+body.is-wco .page-title-bar,
+body.is-wco .sidebar-top {
+  height: calc(34px * var(--anti-zoom, 1));
+  min-height: calc(34px * var(--anti-zoom, 1));
+  max-height: calc(34px * var(--anti-zoom, 1));
+}
+body.is-wco .sidebar-brand,
+body.is-wco .sidebar-brand-button,
+body.is-wco .collapse-toggle {
+  height: 34px;
+  min-height: 34px;
 }
 
 @media (display-mode: window-controls-overlay) {
-  body.is-app .page-title-bar {
+  body.is-wco .page-title-bar {
     padding-right: calc(var(--s-4) + 100vw - env(titlebar-area-width, 100vw));
   }
 }

package/public/js/main.js

@@ -3,8 +3,9 @@
 // the mount root.
 
 import { render } from 'preact';
+import { effect } from '@preact/signals';
 import { html } from './html.js';
-import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed } from './state.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed, activeTab, activeSessionId, sessions, TAB_HEADINGS } from './state.js';
 import { httpBase } from './backend.js';
 import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
 import { setToast } from './toast.js';
@@ -13,12 +14,29 @@ import { installGlobalKeybindings } from './keybindings.js';
 
 loadPersisted();
 installGlobalKeybindings();
-// Window/tab title pinned to "CCSM". A MutationObserver guards against
-// Chromium standalone builds that occasionally try to inject the URL
-// into the title bar.
-const expected = 'CCSM';
-function lockTitle() { if (document.title !== expected) document.title = expected; }
-lockTitle();
+// Window/tab title — reactive. In standalone PWA mode we hide our own
+// .page-title-bar and the browser-drawn OS title bar takes its place,
+// so document.title is what the user actually sees as the header. It
+// mirrors what would have been in our hidden header: session title +
+// cwd on the Sessions tab, the page heading elsewhere.
+// MutationObserver guards against Chromium standalone builds that
+// occasionally try to inject the URL into the title bar.
+let desiredTitle = 'CCSM';
+function lockTitle() { if (document.title !== desiredTitle) document.title = desiredTitle; }
+function computeTitle() {
+  const tab = activeTab.value;
+  if (tab === 'sessions') {
+    const id = activeSessionId.value;
+    const s  = id ? sessions.value.find((x) => x.id === id) : null;
+    if (s) {
+      const name = s.title || s.workspace || s.id.slice(0, 12);
+      return `${name} · ${s.cwd} · CCSM`;
+    }
+    return 'Sessions · CCSM';
+  }
+  return `${TAB_HEADINGS[tab]?.title || 'CCSM'} · CCSM`;
+}
+effect(() => { desiredTitle = computeTitle(); lockTitle(); });
 new MutationObserver(lockTitle).observe(
   document.querySelector('title') || document.head,
   { childList: true, subtree: true, characterData: true }
@@ -48,12 +66,23 @@ mq.addEventListener('change', () => { isInstalledPwa.value = mq.matches; });
 // (display-mode: browser) gets it. Used by wco.css to gate user-select
 // on drag regions so chromeless --app= windows can be dragged by
 // clicking the page title, while normal tabs still allow text select.
+//
+// "is-wco" is the stricter case: window-controls-overlay mode where the
+// browser hides its title bar entirely and only floats OS controls in
+// the top-right. In that mode our .page-title-bar IS the title bar and
+// needs the 34px height + padding-right reservation. In plain standalone
+// PWA (browser still paints its own title bar above our content), we
+// don't need any of that — page-title-bar can behave like a regular tab.
 function applyIsAppClass() {
   const isApp = !matchMedia('(display-mode: browser)').matches;
+  const isWco = matchMedia('(display-mode: window-controls-overlay)').matches;
   document.body.classList.toggle('is-app', isApp);
+  document.body.classList.toggle('is-wco', isWco);
 }
 applyIsAppClass();
 matchMedia('(display-mode: browser)').addEventListener('change', applyIsAppClass);
+matchMedia('(display-mode: window-controls-overlay)').addEventListener('change', applyIsAppClass);
+matchMedia('(display-mode: standalone)').addEventListener('change', applyIsAppClass);
 
 // Force-collapse the sidebar on narrow viewports. Mirrors the responsive
 // CSS so JS state (toggle visibility, tree-render gating) agrees with the
@@ -63,6 +92,20 @@ function applyNarrow() { sidebarForcedCollapsed.value = narrowMq.matches; }
 applyNarrow();
 narrowMq.addEventListener('change', applyNarrow);
 
+// Counter-zoom for chrome bars (page-title-bar, session-actions). Browser
+// page zoom (Ctrl+wheel) scales every CSS px including our header heights;
+// without this, the header gets visually taller at 150%+ which the user
+// usually doesn't want. We detect zoom via outerWidth/innerWidth and write
+// 1/zoom into --anti-zoom so the CSS can `calc(40px * var(--anti-zoom))`
+// each bar back to a constant on-screen height.
+function syncAntiZoom() {
+  const z = window.outerWidth / window.innerWidth || 1;
+  const inv = Math.max(0.4, Math.min(1, 1 / z));   // clamp: never grow > 100%
+  document.documentElement.style.setProperty('--anti-zoom', String(inv));
+}
+syncAntiZoom();
+window.addEventListener('resize', syncAntiZoom);
+
 (async () => {
   // Version-mismatch guard runs FIRST. If the user's backend has been
   // upgraded since this per-version frontend was loaded, bounce back to

package/public/js/pages/SessionsPage.js

@@ -11,7 +11,7 @@ import { setToast } from '../toast.js';
 import { ccsmConfirm, ccsmPrompt } from '../dialog.js';
 import { TerminalView } from '../components/TerminalView.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
-import { IconPencil, IconClose } from '../icons.js';
+import { IconPencil, IconClose, IconBranch } from '../icons.js';
 import { fmtAgo } from '../util.js';
 
 export function SessionsPage() {
@@ -69,6 +69,7 @@ export function SessionsPage() {
     setResumeError(null);
     setRetryNonce((n) => n + 1);
   };
+  const onFork = () => { setToast('Fork is not wired up yet'); };
 
   return html`
     <${PageTitleBar} title=${html`
@@ -97,5 +98,21 @@ export function SessionsPage() {
               `}
             </div>`}
       </div>
+      <div class="session-actions">
+        ${/* Fork button — wired but disabled; turn back on once the
+           --fork-session / codex fork / copilot fs-copy integrations
+           are in place. See discussion 2026-05-27. */ ''}
+        ${false ? html`
+          <button class="action subtle" onClick=${onFork} title="Fork session">
+            <${IconBranch} /> Fork
+          </button>
+        ` : null}
+        <button class="action subtle" onClick=${onRename} title="Rename session">
+          <${IconPencil} /> Rename
+        </button>
+        <button class="action subtle danger" onClick=${onDelete} title="Delete session">
+          <${IconClose} /> Delete
+        </button>
+      </div>
     </div>`;
 }