@bakapiano/ccsm 0.17.9 → 0.17.11

package/package.json

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

@@ -98,12 +98,15 @@ body.is-resizing-sidebar .app {
 }
 
 /* Per-page title strip — height matches the sidebar collapse-toggle
-   (28px) so the topmost row of the window reads as one unified band. */
+   (28px) so the topmost row of the window reads as one unified band.
+   Title on the left, actions slot on the right. The WCO padding-right
+   reservation (wco.css) shifts actions inward so they clear the OS
+   window controls overlay. */
 .page-title-bar {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: var(--s-3);
   height: calc(40px * var(--anti-zoom, 1));
   min-height: calc(40px * var(--anti-zoom, 1));

package/public/css/terminals.css

@@ -226,55 +226,146 @@
   min-height: 0;
   height: 100%;
   margin: 0 calc(-1 * var(--s-4));
-  /* Cancel the tab-panel gap above so the terminal sits flush under the
-     title bar with no white band. */
-  margin-top: calc(-1 * var(--s-4));
   background: var(--bg-elev);
   overflow: hidden;
 }
-.session-actions {
+
+/* Session tabs · sits between the page-title-bar and the session-pane.
+   One row of small tab buttons; the active one has a darker bg + accent
+   underline. Last child is a "+" button that bounces to /launch. The
+   strip is full-bleed (matches .session-pane horizontal extents). */
+.session-tabs {
   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));
+  height: 30px;
   flex-shrink: 0;
-  box-sizing: border-box;
-  padding: 0;
-  background: var(--accent);
-  border-top: 0;
+  padding: 0 2px 0 0;
+  /* Negative bottom margin cancels the tab-panel's gap to the
+     session-pane underneath, so the strip sits flush against the
+     terminal. Negative horizontal margin cancels .main's padding so
+     the strip is full-bleed like the terminal underneath. */
+  margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
+  background: #2d2a26;
+  border-bottom: 0;
+}
+.session-tabs-list {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
-.session-actions .action {
-  display: inline-flex;
+.session-tabs-right {
+  display: 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;
+  flex-shrink: 0;
+  padding-right: 2px;
+}
+/* Close the gap to the page-title-bar above — only when there IS one.
+   In standalone PWA the title-bar is display:none and .session-tabs is
+   the first tab-panel child; a negative margin-top there would push
+   the strip up over the OS title-bar border. */
+.page-title-bar + .session-tabs {
+  margin-top: calc(-1 * var(--s-4));
+}
+.session-tab {
+  appearance: none;
+  background: #423d37;
   border: 0;
-  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;          /* overlap container border-bottom */
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: inherit;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.65);
   cursor: pointer;
+  max-width: 200px;
+  min-width: 0;
   transition: background-color .12s, color .12s;
 }
-.session-actions .action:hover {
+.session-tab:hover { background: #4f4942; color: #fff; }
+.session-tab.is-active {
+  background: var(--ink);
   color: #fff;
-  background: rgba(255, 255, 255, 0.14);
+  border-bottom-color: var(--ink);
 }
-.session-actions .action.danger:hover {
+.session-tab-icon { display: inline-flex; flex-shrink: 0; }
+.session-tab-icon svg { width: 14px; height: 14px; }
+.session-tab-icon img { width: 14px; height: 14px; }
+.session-tab-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.session-tab-meta { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
+.session-tab.is-active .session-tab-meta { color: rgba(255, 255, 255, 0.6); }
+.session-tab-add {
+  background: transparent;
+  max-width: none;
+  padding: 0 8px;
   color: #fff;
-  background: rgba(0, 0, 0, 0.22);
 }
-.session-actions .action svg {
-  width: 13px;
-  height: 13px;
-  stroke-width: 1.75;
+.session-tab-add:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+.session-tab-add svg { width: 14px; height: 14px; }
+
+/* Kebab in the page-title-bar (top-right). Compact 24px square so it
+   doesn't dominate the masthead. In WCO mode the title-bar already
+   reserves padding-right for OS controls, so this slides cleanly to
+   the left of them. */
+.session-menu-btn {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color .12s, color .12s;
+}
+.session-menu-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+.session-menu-btn svg { width: 16px; height: 16px; }
+
+.session-menu {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
+.session-menu-item {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 7px 10px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--ink);
+  cursor: pointer;
+  text-align: left;
+}
+.session-menu-item:hover { background: var(--bg); }
+.session-menu-item.danger { color: var(--danger, #b73f3f); }
+.session-menu-item.danger:hover { background: rgba(183, 63, 63, 0.08); }
+.session-menu-item svg { width: 14px; height: 14px; }
+
 .session-pane-head {
   display: flex;
   align-items: center;

package/public/css/wco.css

@@ -80,8 +80,34 @@ body.is-app:not(.is-wco) .sidebar-top {
 body.is-app:not(.is-wco) .page-title-bar {
   display: none;
 }
+/* terminals.css uses `.page-title-bar + .session-tabs { margin-top: -s-4 }`
+   to flush the tab strip against the in-page title-bar. Adjacent-sibling
+   selectors match by DOM order regardless of display, so the rule still
+   pulls session-tabs up by 16px even when the title-bar is hidden — the
+   top half of the tabs ends up clipped above the viewport / under the OS
+   title bar. Reset to 0 in standalone PWA. */
+body.is-app:not(.is-wco) .page-title-bar + .session-tabs {
+  margin-top: 0;
+}
 body.is-app:not(.is-wco) .app {
-  border-top: 1px solid var(--border);
+  /* Hairline separator under the OS title bar. Has to sit ABOVE the
+     sidebar's own background — an inset box-shadow on .app gets covered
+     by .sidebar (which paints var(--ui-bg) across its full area inside
+     .app), so the line was invisible. An absolutely-positioned ::before
+     paints over both columns; it's outside the grid track so it doesn't
+     reintroduce the 1px overflow that a real `border-top: 1px` did. */
+  position: relative;
+}
+body.is-app:not(.is-wco) .app::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--border);
+  z-index: 10;
+  pointer-events: none;
 }
 /* With page-title-bar hidden, session-pane's `margin-top: calc(-1 *
    var(--s-4))` — designed to flush it against the (now invisible)
@@ -93,13 +119,20 @@ 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"] {
+/* Settings + Launch · with the in-page title-bar hidden in standalone
+   mode, their content would otherwise butt straight against the OS
+   title-bar border. Give a little breathing room. Sessions has its
+   own full-bleed terminal pane; About has its own hero header. */
+body.is-app:not(.is-wco) [data-panel="configure"],
+body.is-app:not(.is-wco) [data-panel="launch"] {
   padding-top: var(--s-4);
 }
+/* Sidebar nav rows (New Session / Settings) also need a top gap in
+   standalone — body.is-app zeros .sidebar's padding-top so the in-page
+   title-bar can sit flush, but with that title-bar gone in standalone
+   mode the nav buttons end up jammed against the OS title-bar border.
+   Restore a small inset so they read as a real nav, not as overflow. */
+body.is-app:not(.is-wco) .sidebar { padding-top: var(--s-3); }
 
 /* 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
@@ -116,16 +149,39 @@ body.is-wco .page-title-bar {
 }
 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));
+  /* env(titlebar-area-height) is Chromium's reported safe-area height, but
+     in practice Edge on Windows often paints the OS controls overlay a few
+     px taller than that value — so sizing our top band to exactly env()
+     leaves a sliver of the strip BELOW (session-tabs) still under the
+     overlay and the kebab gets clipped. Take the max with 40px so we
+     always reserve at least the default page-title-bar height regardless
+     of what env() reports. Matches non-WCO modes too. */
+  height: calc(max(40px, env(titlebar-area-height, 40px)) * var(--anti-zoom, 1));
+  min-height: calc(max(40px, env(titlebar-area-height, 40px)) * var(--anti-zoom, 1));
+  max-height: calc(max(40px, env(titlebar-area-height, 40px)) * 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;
+  height: max(40px, env(titlebar-area-height, 40px));
+  min-height: max(40px, env(titlebar-area-height, 40px));
 }
+/* terminals.css uses the .tab-panel's gap (s-4) plus a -s-4 margin-top on
+   .session-tabs to close that gap, so the tab strip visually flushes
+   against the page-title-bar above. In WCO the negative margin pulls the
+   tabs row UP by 16px — i.e. its top edge lands ABOVE the OS overlay's
+   bottom edge, and the kebab inside gets clipped by the floating window
+   controls. Cancel both the gap and the negative margin here so the tabs
+   row sits at exactly y=titlebar-area-height (flush below the overlay)
+   without losing flushness against the title-bar. */
+body.is-wco .tab-panel { gap: 0; }
+body.is-wco .page-title-bar + .session-tabs { margin-top: 0; }
+/* terminals.css also gives .session-tabs `margin-bottom: -s-4` to close
+   the gap to session-pane below — but with tab-panel gap now 0 in WCO
+   that negative margin pulls session-pane UP 16px instead, overlapping
+   the bottom of the tab labels (kebab + tab text get clipped from
+   below). Zero it out too. */
+body.is-wco .session-tabs { margin-bottom: 0; }
 
 @media (display-mode: window-controls-overlay) {
   body.is-wco .page-title-bar {

package/public/js/icons.js

@@ -125,6 +125,11 @@ export const IconBranch = ic('0 0 24 24', html`
   <circle cx="6" cy="18" r="3"/>
   <path d="M18 9a9 9 0 0 1-9 9"/>
 `, 18);
+export const IconMoreVert = ic('0 0 24 24', html`
+  <circle cx="12" cy="5" r="1.6" fill="currentColor" stroke="none"/>
+  <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/>
+  <circle cx="12" cy="19" r="1.6" fill="currentColor" stroke="none"/>
+`, 16);
 
 // Brand-colored CLI marks. These use external SVG assets (full color),
 // rendered as <img> so the gradients / fills in the file are preserved.

package/public/js/main.js

@@ -92,8 +92,7 @@ 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;
+// Counter-zoom for the page-title-bar. 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))`

package/public/js/pages/SessionsPage.js

@@ -1,19 +1,79 @@
 // Sessions page · the main pane. Shows the terminal for the currently
 // selected session (activeSessionId), with a thin header providing
-// session metadata + rename/delete actions. When a session is selected
-// but not running we auto-resume it — no manual button.
+// session metadata + a session-tabs strip (future multi-tab support)
+// and a kebab menu top-right for per-session actions. When a session is
+// selected but not running we auto-resume it — no manual button.
 
 import { html } from '../html.js';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { activeSessionId, sessions, config, selectTab, selectSession, clockTick } from '../state.js';
 import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle } from '../api.js';
 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, IconBranch } from '../icons.js';
+import { Popover } from '../components/Popover.js';
+import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal } from '../icons.js';
 import { fmtAgo } from '../util.js';
 
+function SessionTabs({ activeId, onActivate, onNew, kebab }) {
+  // For now we only show the currently active session as a single tab —
+  // other open sessions are hidden, and the "+ new" affordance is parked
+  // until multi-tab UX lands.
+  const active = activeId ? sessions.value.find((s) => s.id === activeId) : null;
+  if (!active) return null;
+  const open = [active];
+  return html`
+    <div class="session-tabs" role="tablist">
+      <div class="session-tabs-list">
+        ${open.map((s) => {
+          const cli = (config.value?.clis || []).find((c) => c.id === s.cliId);
+          const Icon = IconForCliType(cli?.type) || IconTerminal;
+          const t = s.title || s.workspace || s.id.slice(0, 12);
+          const isActive = s.id === activeId;
+          return html`
+            <button key=${s.id}
+                    role="tab"
+                    aria-selected=${isActive}
+                    class=${`session-tab${isActive ? ' is-active' : ''}`}
+                    onClick=${() => onActivate(s.id)}
+                    title=${`${t} · ${s.cwd}`}>
+              <span class="session-tab-icon"><${Icon} /></span>
+              <span class="session-tab-label">${t}</span>
+              ${s.status !== 'running' ? html`<span class="session-tab-meta">·</span>` : null}
+            </button>`;
+        })}
+        ${/* <button class="session-tab session-tab-add" onClick=${onNew} title="New session">
+          <${IconPlus} />
+        </button> */ null}
+      </div>
+      ${kebab ? html`<div class="session-tabs-right">${kebab}</div>` : null}
+    </div>`;
+}
+
+function SessionMenu({ session, onRename, onDelete }) {
+  const [open, setOpen] = useState(false);
+  const anchor = useRef(null);
+  return html`
+    <button class="session-menu-btn" ref=${anchor}
+            aria-label="Session actions" title="Session actions"
+            onClick=${() => setOpen((v) => !v)}>
+      <${IconMoreVert} />
+    </button>
+    ${open ? html`
+      <${Popover} anchor=${anchor} align="right" width=${180}
+                  onClose=${() => setOpen(false)}>
+        <div class="session-menu">
+          <button class="session-menu-item" onClick=${() => { setOpen(false); onRename(); }}>
+            <${IconPencil} /> Rename
+          </button>
+          <button class="session-menu-item danger" onClick=${() => { setOpen(false); onDelete(); }}>
+            <${IconClose} /> Delete
+          </button>
+        </div>
+      </${Popover}>` : null}`;
+}
+
 export function SessionsPage() {
   clockTick.value; // resubscribe fmtAgo
   const id = activeSessionId.value;
@@ -49,6 +109,11 @@ export function SessionsPage() {
   const running = session.status === 'running';
   const title = session.title || session.workspace || session.id.slice(0, 12);
 
+  const onRetry = () => {
+    clearResumeFailure(session.id);
+    setResumeError(null);
+    setRetryNonce((n) => n + 1);
+  };
   const onRename = async () => {
     const next = await ccsmPrompt('Rename session', title, { okLabel: 'Save' });
     if (next === null) return;
@@ -64,12 +129,6 @@ export function SessionsPage() {
       activeSessionId.value = null;
     } catch (e) { setToast(e.message, 'error'); }
   };
-  const onRetry = () => {
-    clearResumeFailure(session.id);
-    setResumeError(null);
-    setRetryNonce((n) => n + 1);
-  };
-  const onFork = () => { setToast('Fork is not wired up yet'); };
 
   return html`
     <${PageTitleBar} title=${html`
@@ -82,8 +141,12 @@ export function SessionsPage() {
           <span>·</span>
           <span>${running ? 'running' : (resumeError ? 'resume failed' : 'resuming…')}</span>
         </span>
-      `}>
-    </${PageTitleBar}>
+      `} />
+    <${SessionTabs}
+      activeId=${session.id}
+      onActivate=${(sid) => selectSession(sid)}
+      onNew=${() => selectTab('launch')}
+      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} />`} />
     <div class="session-pane">
       <div class="session-pane-body">
         ${running
@@ -98,21 +161,5 @@ 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>`;
 }