@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/js/state.js

@@ -5,67 +5,86 @@ import { signal, computed } from '@preact/signals';
 
 // ── server-driven data ──────────────────────────────────────────
 export const config       = signal(null);
-export const terminals    = signal([]);
 export const capabilities = signal({ webTerminal: false });
+// `sessions` is the ccsm-persisted list (lib/persistedSessions). Every
+// entry has { id, cliId, cwd, workspace, title, folderId, repos,
+// createdAt, lastActiveAt, status, exitedAt, exitCode, pid }.
 export const sessions     = signal([]);
-export const webTerminals = signal([]);          // active in-page PTY sessions
-export const activeTerminalId = signal(null);    // which one's open in the right pane
-export const recent       = signal([]);
-export const recentTotal  = signal(0);
-export const favorites    = signal({});   // { sessionId: {sessionId, cwd, title, gitBranch, addedAt} }
-export const labels       = signal({});   // { sessionId: customLabel }
+export const folders      = signal([]);   // [{id,name,order,createdAt}]
 export const workspaces   = signal([]);
-export const snapshot     = signal(null);
-export const history      = signal([]);
 export const serverHealth = signal({ state: 'connecting' });
 
 // ── ui state (persisted in localStorage where noted) ───────────
 export const activeTab        = signal('sessions');
+export const activeSessionId  = signal(null);    // the session currently rendered in the right pane
 export const sidebarCollapsed = signal(false);
+// True when viewport is narrow enough that the sidebar is force-collapsed
+// by the responsive layout — the toggle button hides in that case so the
+// user can't try (and fail) to expand it.
+export const sidebarForcedCollapsed = signal(false);
 export const sidebarWidth     = signal(232);     // px when expanded, persisted in localStorage
-export const accentColor      = signal('#b3614a'); // user-chosen brand accent, persisted
-// fold state for the three cards on the Sessions tab
-export const cardFolded       = signal({ favorites: false, sessions: false, recent: false });
+export const accentColor      = signal('#2f6fa3'); // user-chosen brand accent, persisted
+// Per-folder collapse state in the sidebar tree. Stored as a plain object
+// {folderId: true} (true = collapsed). Key 'unsorted' covers the implicit
+// Unsorted bucket.
+export const foldersCollapsed = signal({});
 export const configDirty      = signal(false);
-export const modalOpen        = signal(false);
+// Per-card fold state on pages that use the <Card> component. The card
+// just toggles a key here; persistence is best-effort via localStorage
+// under `ccsm.fold.<key>` (set by toggleCardFold).
+export const cardFolded       = signal({});
 export const clockTick        = signal(Date.now());      // re-ticked each second so fmtAgo refreshes
 export const lastRefreshAt    = signal(0);               // ms timestamp of last successful refreshAll()
 export const installPrompt    = signal(null);            // captured beforeinstallprompt event (PWA install)
-export const isInstalledPwa   = signal(false);           // running inside an installed PWA window (display-mode: standalone+)
-
-// ── pagination ──────────────────────────────────────────────────
-export const sessionsOffset  = signal(0);
-export const sessionsLimit   = signal(10);
-export const favoritesOffset = signal(0);
-export const favoritesLimit  = signal(10);
-export const recentOffset    = signal(0);
-export const recentLimit     = signal(10);
+export const isInstalledPwa   = signal(false);           // running inside an installed PWA window
 
 // ── derived ─────────────────────────────────────────────────────
-export const favoritesList = computed(() =>
-  Object.values(favorites.value).sort((a, b) => (b.addedAt || 0) - (a.addedAt || 0))
-);
+// Group sessions by folder, with a synthetic "unsorted" bucket for those
+// without a folderId. Folders define the rendering order; sessions
+// inside each are sorted by createdAt desc (stable — using lastActiveAt
+// would make rows jump on resume).
+//
+// We pre-create a bucket per declared session.folderId even if the
+// matching folder hasn't loaded yet — that way on first paint sessions
+// don't all collapse into Unsorted and then snap back into their real
+// folder a few ms later when /api/folders resolves.
+export const sessionsByFolder = computed(() => {
+  const groups = new Map();
+  groups.set(null, []);
+  for (const f of folders.value) groups.set(f.id, []);
+  for (const s of sessions.value) {
+    const key = s.folderId || null;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(s);
+  }
+  for (const list of groups.values()) {
+    list.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0));
+  }
+  return groups;
+});
 
 export const TAB_HEADINGS = {
-  sessions:  { title: 'Sessions',  subtitle: 'Live and recently-closed Claude Code sessions on this machine.' },
-  launch:    { title: 'Launch',    subtitle: 'Spin up a new session in a fresh workspace, or restore from snapshot.' },
-  terminals: { title: 'Terminals', subtitle: 'Claude sessions running in this page.' },
+  sessions:  { title: 'Sessions',  subtitle: 'Sessions you started in ccsm.' },
+  launch:    { title: 'Launch',    subtitle: 'Spin up a new session in a fresh workspace.' },
   configure: { title: 'Configure', subtitle: 'Persisted to ~/.ccsm/config.json.' },
-  about:     { title: 'About',     subtitle: 'ccsm — Claude Code Session Manager.' },
+  about:     { title: 'About',     subtitle: 'ccsm — Claude CLI Sessions Manager.' },
 };
 
 // ── persistence helpers (localStorage) ──────────────────────────
 const LS_SIDEBAR = 'ccsm.sidebar-collapsed';
 const LS_SIDEBAR_W = 'ccsm.sidebar-width';
 const LS_ACCENT = 'ccsm.accent';
-const LS_FOLD = (k) => `ccsm.fold.${k}`;
+const LS_FOLDERS_COLLAPSED = 'ccsm.folders-collapsed';
+// Last-known sidebar tree, rehydrated on boot to keep the first paint
+// stable. The next refreshAll() overwrites these from the server, so
+// stale entries self-heal within ~5s without any explicit invalidation.
+const LS_FOLDERS_CACHE = 'ccsm.folders-cache';
+const LS_SESSIONS_CACHE = 'ccsm.sessions-cache';
 
-// Resizable sidebar width (when not collapsed). Clamp range matches the
-// CSS min/max — too narrow truncates labels, too wide eats main content.
 export const SIDEBAR_MIN = 180;
 export const SIDEBAR_MAX = 400;
 export const SIDEBAR_DEFAULT = 232;
-export const ACCENT_DEFAULT = '#b3614a';
+export const ACCENT_DEFAULT = '#2f6fa3';
 
 export function loadPersisted() {
   sidebarCollapsed.value = localStorage.getItem(LS_SIDEBAR) === 'true';
@@ -75,23 +94,36 @@ export function loadPersisted() {
   }
   applySidebarWidthCssVar();
   const a = localStorage.getItem(LS_ACCENT);
-  if (isHexColor(a)) {
-    accentColor.value = a;
-  }
+  if (isHexColor(a)) accentColor.value = a;
   applyAccentCssVars();
-  const folds = { ...cardFolded.value };
-  for (const k of Object.keys(folds)) {
-    folds[k] = localStorage.getItem(LS_FOLD(k)) === '1';
-  }
-  cardFolded.value = folds;
-
+  try {
+    const raw = localStorage.getItem(LS_FOLDERS_COLLAPSED);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed === 'object') foldersCollapsed.value = parsed;
+    }
+  } catch {}
+  // Rehydrate the sidebar tree from the last seen server state so
+  // the first paint matches the user's last view. refreshAll() arrives
+  // ~50–500ms later and overwrites with fresh data.
+  try {
+    const raw = localStorage.getItem(LS_FOLDERS_CACHE);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) folders.value = parsed;
+    }
+  } catch {}
+  try {
+    const raw = localStorage.getItem(LS_SESSIONS_CACHE);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) sessions.value = parsed;
+    }
+  } catch {}
   const hash = location.hash.slice(1);
   if (TAB_HEADINGS[hash]) activeTab.value = hash;
 }
 
-// Push the current sidebar width into the CSS custom property so the grid
-// in layout.css picks it up. Called on load and whenever the user drags
-// the handle.
 function applySidebarWidthCssVar() {
   document.documentElement.style.setProperty('--sidebar-w', `${sidebarWidth.value}px`);
 }
@@ -104,9 +136,6 @@ export function setSidebarWidth(px) {
 }
 
 // ── theme accent ────────────────────────────────────────────────
-// We expose 4 derived CSS vars: --accent, --accent-deep, --accent-soft,
-// --accent-softer. The user only picks the base; deep/soft are computed
-// (darken / rgba alpha) so things stay self-consistent.
 function isHexColor(s) {
   return typeof s === 'string' && /^#[0-9a-fA-F]{6}$/.test(s);
 }
@@ -119,17 +148,8 @@ function rgbToHex({ r, g, b }) {
   return `#${h(r)}${h(g)}${h(b)}`;
 }
 function darken({ r, g, b }, amount) {
-  // amount 0..1; pull each channel toward 0
   return { r: r * (1 - amount), g: g * (1 - amount), b: b * (1 - amount) };
 }
-function lighten({ r, g, b }, amount) {
-  // amount 0..1; pull each channel toward 255
-  return { r: r + (255 - r) * amount, g: g + (255 - g) * amount, b: b + (255 - b) * amount };
-}
-// Mix the accent into white at a tiny ratio to get a faint warm/cool tint
-// for surfaces. `t` controls strength (0 = pure white, 1 = pure accent).
-// Surfaces use very low t (0.02–0.08) so the page reads as "white with
-// a hint of the brand color" rather than colored.
 function mixWithWhite({ r, g, b }, t) {
   return { r: r * t + 255 * (1 - t), g: g * t + 255 * (1 - t), b: b * t + 255 * (1 - t) };
 }
@@ -139,23 +159,19 @@ function applyAccentCssVars() {
   const deep = rgbToHex(darken(rgb, 0.2));
   const soft = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.10)`;
   const softer = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.04)`;
-  // Surface tints derived from the accent. Each surface keeps its
-  // relative brightness from the original palette (cream → white → cream
-  // hover → cream active) but its hue follows the chosen accent. Mixed
-  // weights chosen to roughly match the warm copper defaults:
-  //   --bg        was #faf9f5  → t≈0.04
-  //   --bg-elev   was #ffffff  → t=0    (kept pure white)
-  //   --sidebar-hover  was #f0ece0  → t≈0.10
-  //   --sidebar-active was #e8e3d5  → t≈0.15
-  //   --border         was #e8e3d5  → t≈0.15
-  //   --border-soft    was #ece8da  → t≈0.12
-  //   --border-strong  was #d4cdb8  → t≈0.25
   const bg           = rgbToHex(mixWithWhite(rgb, 0.04));
   const sidebarHover = rgbToHex(mixWithWhite(rgb, 0.10));
   const sidebarActive= rgbToHex(mixWithWhite(rgb, 0.15));
   const border       = rgbToHex(mixWithWhite(rgb, 0.15));
   const borderSoft   = rgbToHex(mixWithWhite(rgb, 0.12));
   const borderStrong = rgbToHex(mixWithWhite(rgb, 0.25));
+  // UI chrome (sidebar bg, dividers, footer strip) — themed too but
+  // visibly darker than the main bg so sidebar/main read as distinct.
+  // Border colors stay deliberately desaturated so dividers don't shout
+  // the brand color back at the user.
+  const uiBg         = rgbToHex(mixWithWhite(rgb, 0.10));
+  const uiBorder     = '#d8d4c6';     // theme-independent neutral
+  const uiBorderSoft = '#e6e2d4';     // theme-independent neutral
   const root = document.documentElement.style;
   root.setProperty('--accent', base);
   root.setProperty('--accent-deep', deep);
@@ -168,10 +184,9 @@ function applyAccentCssVars() {
   root.setProperty('--border', border);
   root.setProperty('--border-soft', borderSoft);
   root.setProperty('--border-strong', borderStrong);
-  // --bg-elev stays pure white so cards "lift" off the tinted surface.
-  // Sync the meta theme-color to the tinted surface so the OS title bar
-  // matches what the user sees (was previously the raw accent — too
-  // saturated).
+  root.setProperty('--ui-bg', uiBg);
+  root.setProperty('--ui-border', uiBorder);
+  root.setProperty('--ui-border-soft', uiBorderSoft);
   const meta = document.querySelector('meta[name="theme-color"]');
   if (meta) meta.setAttribute('content', bg);
 }
@@ -190,13 +205,27 @@ export function selectTab(name) {
   if (location.hash !== `#${name}`) window.history.replaceState(null, '', `#${name}`);
 }
 
+export function selectSession(id) {
+  activeSessionId.value = id;
+  activeTab.value = 'sessions';
+  if (location.hash !== '#sessions') window.history.replaceState(null, '', '#sessions');
+}
+
 export function toggleSidebar() {
+  if (sidebarForcedCollapsed.value) return;
   sidebarCollapsed.value = !sidebarCollapsed.value;
   localStorage.setItem(LS_SIDEBAR, String(sidebarCollapsed.value));
 }
 
+export function toggleFolder(folderId) {
+  const key = folderId || 'unsorted';
+  const next = { ...foldersCollapsed.value, [key]: !foldersCollapsed.value[key] };
+  foldersCollapsed.value = next;
+  localStorage.setItem(LS_FOLDERS_COLLAPSED, JSON.stringify(next));
+}
+
 export function toggleCardFold(key) {
   const next = { ...cardFolded.value, [key]: !cardFolded.value[key] };
   cardFolded.value = next;
-  localStorage.setItem(LS_FOLD(key), next[key] ? '1' : '0');
+  try { localStorage.setItem(`ccsm.fold.${key}`, next[key] ? '1' : '0'); } catch {}
 }

package/public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "ccsm — Claude CLI Sessions Manager",
-  "short_name": "ccsm",
+  "name": "CCSM",
+  "short_name": "CCSM",
   "description": "Single pane over every live claude session on this machine.",
   "start_url": "./",
   "scope": "./",

package/scripts/install.js

@@ -116,11 +116,16 @@ try {
 if (process.env.CCSM_NO_AUTOLAUNCH !== '1') {
   try {
     const { spawn } = require('node:child_process');
-    const child = spawn(ccsmCmd, [], {
+    // Spawn `node bin/ccsm.js` directly — NOT ccsm.cmd. On Windows,
+    // child_process.spawn() with shell:false refuses .cmd files (throws
+    // EINVAL); using shell:true would flash a console window. Going
+    // through node + the JS entrypoint sidesteps both problems and
+    // matches exactly what the .cmd shim would have invoked.
+    const launcherJs = path.join(__dirname, '..', 'bin', 'ccsm.js');
+    const child = spawn(process.execPath, [launcherJs], {
       detached: true,
       stdio: 'ignore',
       windowsHide: true,
-      shell: false,
     });
     child.unref();
     log('launching ccsm now · check for the chromeless window');