@bakapiano/ccsm 0.8.4 → 0.10.0

package/public/js/state.js

@@ -5,69 +5,199 @@ 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);
-// fold state for the three cards on the Sessions tab
-export const cardFolded       = signal({ favorites: false, sessions: false, recent: 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('#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_FOLD = (k) => `ccsm.fold.${k}`;
+const LS_SIDEBAR_W = 'ccsm.sidebar-width';
+const LS_ACCENT = 'ccsm.accent';
+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';
+
+export const SIDEBAR_MIN = 180;
+export const SIDEBAR_MAX = 400;
+export const SIDEBAR_DEFAULT = 232;
+export const ACCENT_DEFAULT = '#2f6fa3';
 
 export function loadPersisted() {
   sidebarCollapsed.value = localStorage.getItem(LS_SIDEBAR) === 'true';
-  const folds = { ...cardFolded.value };
-  for (const k of Object.keys(folds)) {
-    folds[k] = localStorage.getItem(LS_FOLD(k)) === '1';
+  const w = Number(localStorage.getItem(LS_SIDEBAR_W));
+  if (Number.isFinite(w) && w >= SIDEBAR_MIN && w <= SIDEBAR_MAX) {
+    sidebarWidth.value = w;
   }
-  cardFolded.value = folds;
-
+  applySidebarWidthCssVar();
+  const a = localStorage.getItem(LS_ACCENT);
+  if (isHexColor(a)) accentColor.value = a;
+  applyAccentCssVars();
+  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;
 }
 
+function applySidebarWidthCssVar() {
+  document.documentElement.style.setProperty('--sidebar-w', `${sidebarWidth.value}px`);
+}
+
+export function setSidebarWidth(px) {
+  const clamped = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, Math.round(px)));
+  sidebarWidth.value = clamped;
+  applySidebarWidthCssVar();
+  localStorage.setItem(LS_SIDEBAR_W, String(clamped));
+}
+
+// ── theme accent ────────────────────────────────────────────────
+function isHexColor(s) {
+  return typeof s === 'string' && /^#[0-9a-fA-F]{6}$/.test(s);
+}
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+function rgbToHex({ r, g, b }) {
+  const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+function darken({ r, g, b }, amount) {
+  return { r: r * (1 - amount), g: g * (1 - amount), b: b * (1 - amount) };
+}
+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) };
+}
+function applyAccentCssVars() {
+  const base = accentColor.value;
+  const rgb = hexToRgb(base);
+  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)`;
+  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);
+  root.setProperty('--accent-soft', soft);
+  root.setProperty('--accent-softer', softer);
+  root.setProperty('--bg', bg);
+  root.setProperty('--sidebar-bg', bg);
+  root.setProperty('--sidebar-hover', sidebarHover);
+  root.setProperty('--sidebar-active', sidebarActive);
+  root.setProperty('--border', border);
+  root.setProperty('--border-soft', borderSoft);
+  root.setProperty('--border-strong', borderStrong);
+  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);
+}
+
+export function setAccentColor(hex) {
+  if (!isHexColor(hex)) return;
+  accentColor.value = hex;
+  applyAccentCssVars();
+  localStorage.setItem(LS_ACCENT, hex);
+}
+
 // ── actions ─────────────────────────────────────────────────────
 export function selectTab(name) {
   if (!TAB_HEADINGS[name]) name = 'sessions';
@@ -75,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

@@ -3,7 +3,7 @@
 
 // ccsm postinstall · Windows-only · runs after `npm install -g @bakapiano/ccsm`.
 // Registers the `ccsm://` URL protocol in HKCU so the hosted frontend
-// (https://bakapiano.github.io/cssm/v1/) can fire `<a href="ccsm://start">`
+// (https://bakapiano.github.io/ccsm/v1/) can fire `<a href="ccsm://start">`
 // from its OfflineBanner and have Windows spawn the backend on demand.
 //
 // Best-effort: any failure MUST NOT break npm install. Each step is in