@bakapiano/ccsm 0.11.0 → 0.12.0

package/lib/atomicJson.js

@@ -0,0 +1,48 @@
+'use strict';
+
+// Atomic JSON-file writes + per-file serialization.
+//
+// The naive pattern (`fs.writeFile(path, JSON.stringify(...))`) has two
+// bugs under concurrent callers:
+//
+//   1. fs.writeFile overwrites byte-by-byte but does NOT pre-truncate.
+//      If writer A's serialization is longer than writer B's, and B
+//      finishes second, B writes only its own bytes — A's trailing
+//      bytes stay on disk. Result: `]  }\n]` style JSON corruption.
+//
+//   2. Even with atomic writes, concurrent `load → mutate → save`
+//      sequences lose updates: A and B both read state v0, both write
+//      their own v1 — the later writer wins, the earlier one's edits
+//      vanish.
+//
+// Fixes:
+//
+//   - atomicWriteJson: write to a sibling tmp file, then rename onto
+//     the target. rename is atomic on the same volume (NTFS / POSIX),
+//     so readers see either the old complete file or the new complete
+//     file. No truncation problem.
+//
+//   - withFileLock: serialize all mutators of a given file through a
+//     per-path promise chain. Callers wrap their whole load/mutate/save
+//     in withFileLock(path, fn) and are guaranteed exclusivity.
+
+const fs = require('node:fs/promises');
+
+async function atomicWriteJson(filePath, data) {
+  const tmp = `${filePath}.tmp.${process.pid}.${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+  await fs.writeFile(tmp, JSON.stringify(data, null, 2));
+  await fs.rename(tmp, filePath);
+}
+
+const locks = new Map();
+function withFileLock(filePath, fn) {
+  const prev = locks.get(filePath) || Promise.resolve();
+  const next = prev.then(fn, fn);
+  // Swallow rejections in the chain holder so a single failed mutator
+  // doesn't poison every subsequent caller. The returned `next` still
+  // rejects for THIS caller — only the stored chain is sanitized.
+  locks.set(filePath, next.catch(() => {}));
+  return next;
+}
+
+module.exports = { atomicWriteJson, withFileLock };

package/lib/config.js

@@ -4,6 +4,7 @@ const fs = require('node:fs/promises');
 const fsSync = require('node:fs');
 const path = require('node:path');
 const os = require('node:os');
+const { atomicWriteJson, withFileLock } = require('./atomicJson');
 
 // Data dir lives under ~/.ccsm by default so config survives across upgrades
 // (incl. running from a new npx checkout). Override with CCSM_HOME if you
@@ -159,7 +160,7 @@ async function loadConfig() {
   } catch (e) {
     if (e.code === 'ENOENT') {
       const cfg = { ...DEFAULTS };
-      await fs.writeFile(CONFIG_PATH, JSON.stringify(cfg, null, 2));
+      await atomicWriteJson(CONFIG_PATH, cfg);
       return cfg;
     }
     throw e;
@@ -168,10 +169,12 @@ async function loadConfig() {
 
 async function saveConfig(partial) {
   ensureDataDir();
-  const current = await loadConfig();
-  const next = mergeWithDefaults({ ...current, ...partial });
-  await fs.writeFile(CONFIG_PATH, JSON.stringify(next, null, 2));
-  return next;
+  return withFileLock(CONFIG_PATH, async () => {
+    const current = await loadConfig();
+    const next = mergeWithDefaults({ ...current, ...partial });
+    await atomicWriteJson(CONFIG_PATH, next);
+    return next;
+  });
 }
 
 module.exports = {

package/lib/folders.js

@@ -12,6 +12,7 @@
 const path = require('node:path');
 const fs = require('node:fs/promises');
 const { DATA_DIR } = require('./config');
+const { atomicWriteJson, withFileLock } = require('./atomicJson');
 
 const FILE = path.join(DATA_DIR, 'folders.json');
 
@@ -27,7 +28,7 @@ async function loadAll() {
 }
 
 async function saveAll(list) {
-  await fs.writeFile(FILE, JSON.stringify(list, null, 2));
+  await atomicWriteJson(FILE, list);
 }
 
 function genId() {
@@ -36,61 +37,69 @@ function genId() {
 
 async function create({ name }) {
   if (!name || typeof name !== 'string') throw new Error('name required');
-  const list = await loadAll();
-  const entry = {
-    id: genId(),
-    name: name.trim(),
-    order: list.length,
-    createdAt: Date.now(),
-  };
-  list.push(entry);
-  await saveAll(list);
-  return entry;
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const entry = {
+      id: genId(),
+      name: name.trim(),
+      order: list.length,
+      createdAt: Date.now(),
+    };
+    list.push(entry);
+    await saveAll(list);
+    return entry;
+  });
 }
 
 async function update(id, patch) {
-  const list = await loadAll();
-  const idx = list.findIndex((f) => f.id === id);
-  if (idx < 0) return null;
-  // Allow rename + reorder, ignore other keys.
-  const allowed = {};
-  if (typeof patch.name === 'string') allowed.name = patch.name.trim();
-  if (typeof patch.order === 'number') allowed.order = patch.order;
-  list[idx] = { ...list[idx], ...allowed };
-  await saveAll(list);
-  return list[idx];
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const idx = list.findIndex((f) => f.id === id);
+    if (idx < 0) return null;
+    // Allow rename + reorder, ignore other keys.
+    const allowed = {};
+    if (typeof patch.name === 'string') allowed.name = patch.name.trim();
+    if (typeof patch.order === 'number') allowed.order = patch.order;
+    list[idx] = { ...list[idx], ...allowed };
+    await saveAll(list);
+    return list[idx];
+  });
 }
 
 async function remove(id) {
-  const list = await loadAll();
-  const idx = list.findIndex((f) => f.id === id);
-  if (idx < 0) return false;
-  list.splice(idx, 1);
-  await saveAll(list);
-  return true;
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const idx = list.findIndex((f) => f.id === id);
+    if (idx < 0) return false;
+    list.splice(idx, 1);
+    await saveAll(list);
+    return true;
+  });
 }
 
 async function reorder(idsInOrder) {
   if (!Array.isArray(idsInOrder)) throw new Error('idsInOrder must be array');
-  const list = await loadAll();
-  const byId = new Map(list.map((f) => [f.id, f]));
-  const next = [];
-  idsInOrder.forEach((id, i) => {
-    const f = byId.get(id);
-    if (f) {
-      f.order = i;
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const byId = new Map(list.map((f) => [f.id, f]));
+    const next = [];
+    idsInOrder.forEach((id, i) => {
+      const f = byId.get(id);
+      if (f) {
+        f.order = i;
+        next.push(f);
+        byId.delete(id);
+      }
+    });
+    // Append any folders not mentioned in the new order, preserving original
+    // relative order. Prevents accidentally dropping folders.
+    for (const f of byId.values()) {
+      f.order = next.length;
       next.push(f);
-      byId.delete(id);
     }
+    await saveAll(next);
+    return next;
   });
-  // Append any folders not mentioned in the new order, preserving original
-  // relative order. Prevents accidentally dropping folders.
-  for (const f of byId.values()) {
-    f.order = next.length;
-    next.push(f);
-  }
-  await saveAll(next);
-  return next;
 }
 
 module.exports = { loadAll, create, update, remove, reorder, FILE };

package/lib/jsonStore.js

@@ -12,6 +12,7 @@
 
 const fs = require('node:fs/promises');
 const path = require('node:path');
+const { atomicWriteJson, withFileLock } = require('./atomicJson');
 
 function createKeyedJsonStore({ dataDir, filename, transformValue = (v) => v }) {
   const filePath = path.join(dataDir, filename);
@@ -28,25 +29,29 @@ function createKeyedJsonStore({ dataDir, filename, transformValue = (v) => v })
   }
 
   async function save(map) {
-    await fs.writeFile(filePath, JSON.stringify(map, null, 2));
+    await atomicWriteJson(filePath, map);
   }
 
   async function set(key, value) {
     if (!key) throw new Error('set: key required');
     const next = transformValue(value, key);
     if (next == null) return remove(key);
-    const map = await load();
-    map[key] = next;
-    await save(map);
-    return next;
+    return withFileLock(filePath, async () => {
+      const map = await load();
+      map[key] = next;
+      await save(map);
+      return next;
+    });
   }
 
   async function remove(key) {
-    const map = await load();
-    if (!(key in map)) return false;
-    delete map[key];
-    await save(map);
-    return true;
+    return withFileLock(filePath, async () => {
+      const map = await load();
+      if (!(key in map)) return false;
+      delete map[key];
+      await save(map);
+      return true;
+    });
   }
 
   async function list() {

package/lib/persistedSessions.js

@@ -29,6 +29,7 @@
 const path = require('node:path');
 const fs = require('node:fs/promises');
 const { DATA_DIR } = require('./config');
+const { atomicWriteJson, withFileLock } = require('./atomicJson');
 
 const FILE = path.join(DATA_DIR, 'sessions.json');
 
@@ -44,34 +45,37 @@ async function loadAll() {
 }
 
 async function saveAll(list) {
-  await fs.writeFile(FILE, JSON.stringify(list, null, 2));
+  await atomicWriteJson(FILE, list);
 }
 
 function genId() {
   return 'sess-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
-async function create({ cliId, cwd, workspace, repos = [], folderId = null, title = '', status = 'running', cliSessionId = null }) {
-  const list = await loadAll();
-  const entry = {
-    id: genId(),
-    cliId,
-    cwd,
-    workspace,
-    title,
-    folderId,
-    repos,
-    createdAt: Date.now(),
-    lastActiveAt: Date.now(),
-    status,
-    exitedAt: status === 'exited' ? Date.now() : null,
-    exitCode: null,
-    pid: null,
-    cliSessionId,
-  };
-  list.push(entry);
-  await saveAll(list);
-  return entry;
+async function create(opts) {
+  return withFileLock(FILE, async () => {
+    const { cliId, cwd, workspace, repos = [], folderId = null, title = '', status = 'running', cliSessionId = null } = opts;
+    const list = await loadAll();
+    const entry = {
+      id: genId(),
+      cliId,
+      cwd,
+      workspace,
+      title,
+      folderId,
+      repos,
+      createdAt: Date.now(),
+      lastActiveAt: Date.now(),
+      status,
+      exitedAt: status === 'exited' ? Date.now() : null,
+      exitCode: null,
+      pid: null,
+      cliSessionId,
+    };
+    list.push(entry);
+    await saveAll(list);
+    return entry;
+  });
 }
 
 async function get(id) {
@@ -80,21 +84,25 @@ async function get(id) {
 }
 
 async function update(id, patch) {
-  const list = await loadAll();
-  const idx = list.findIndex((s) => s.id === id);
-  if (idx < 0) return null;
-  list[idx] = { ...list[idx], ...patch };
-  await saveAll(list);
-  return list[idx];
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const idx = list.findIndex((s) => s.id === id);
+    if (idx < 0) return null;
+    list[idx] = { ...list[idx], ...patch };
+    await saveAll(list);
+    return list[idx];
+  });
 }
 
 async function remove(id) {
-  const list = await loadAll();
-  const idx = list.findIndex((s) => s.id === id);
-  if (idx < 0) return false;
-  list.splice(idx, 1);
-  await saveAll(list);
-  return true;
+  return withFileLock(FILE, async () => {
+    const list = await loadAll();
+    const idx = list.findIndex((s) => s.id === id);
+    if (idx < 0) return false;
+    list.splice(idx, 1);
+    await saveAll(list);
+    return true;
+  });
 }
 
 // Convenience helpers used at runtime so callers don't have to do

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "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",
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "start": "node server.js",
-    "dev": "node --watch server.js",
+    "dev": "node scripts/dev.js",
     "postinstall": "node scripts/install.js",
     "preuninstall": "node scripts/uninstall.js"
   },

package/public/css/sidebar.css

@@ -405,10 +405,12 @@ body.is-resizing-sidebar * {
   color: var(--ink);
   display: inline-flex;
   align-items: center;
-  opacity: 0.6;
+  opacity: 0;
   transition: opacity .12s, background .12s;
 }
-.tree-head-action:hover { opacity: 1; background: var(--sidebar-hover); }
+.tree-head:hover .tree-head-action,
+.tree-head-action:focus-visible { opacity: 0.7; }
+.tree-head:hover .tree-head-action:hover { opacity: 1; background: var(--sidebar-hover); }
 .tree-head-action svg { width: 14px; height: 14px; }
 
 /* Folder grouping. Chevron rotates on expand. */
@@ -419,6 +421,17 @@ body.is-resizing-sidebar * {
 .tree-folder[data-dnd-over="true"] > .tree-folder-head {
   box-shadow: 0 -2px 0 var(--accent) inset;
 }
+/* Session being dragged → folder is a drop target. Tint the folder
+   head + outline the whole folder so the user knows where it'll land,
+   independent of whether the folder is expanded or collapsed. */
+.tree-folder.is-session-drop-target {
+  border-radius: 6px;
+  outline: 1px dashed var(--ink-mid);
+  outline-offset: -2px;
+  background: var(--sidebar-hover);
+}
+.tree-session[draggable="true"] { cursor: pointer; }
+.tree-session[draggable="true"]:active { cursor: grabbing; }
 .tree-folder-head[draggable="true"] {
   cursor: grab;
 }
@@ -532,6 +545,11 @@ body.is-resizing-sidebar * {
   background: var(--sidebar-active);
   font-weight: 500;
 }
+/* Status dot · deliberately understated. The earlier version had a
+   green dot + soft glow + expanding halo pulse; in a sidebar with
+   eight running sessions it read as a row of strobing alerts. Now:
+   one 5px dot, no halo, no shadow, no animation. Color alone carries
+   running vs stopped. */
 .tree-dot {
   width: 14px;
   height: 14px;
@@ -539,7 +557,6 @@ body.is-resizing-sidebar * {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  position: relative;
 }
 .tree-dot::after {
   content: "";
@@ -551,31 +568,6 @@ body.is-resizing-sidebar * {
 }
 .tree-session.is-running .tree-dot::after {
   background: var(--green);
-  box-shadow: 0 0 0 3px rgba(74, 138, 74, 0.18);
-}
-/* Pulse halo for running sessions — implemented on .tree-dot (the
-   wrapper) via a second pseudo-element animating opacity + transform,
-   not box-shadow. opacity is composited; box-shadow forces paint every
-   frame, and with N running sessions in the sidebar that adds up. */
-.tree-session.is-running .tree-dot::before {
-  content: "";
-  position: absolute;
-  left: 50%; top: 50%;
-  width: 7px; height: 7px;
-  margin: -3.5px 0 0 -3.5px;
-  border-radius: 50%;
-  background: var(--green);
-  opacity: 0.45;
-  animation: tree-dot-pulse 1.8s ease-in-out infinite;
-  pointer-events: none;
-}
-.tree-session.is-stopped .tree-dot::after {
-  background: var(--ink-faint);
-  box-shadow: none;
-}
-@keyframes tree-dot-pulse {
-  0%, 100% { opacity: 0.45; transform: scale(1); }
-  50%      { opacity: 0;    transform: scale(2.4); }
 }
 .tree-label {
   flex: 1;

package/public/js/components/Sidebar.js

@@ -1,6 +1,7 @@
 import { html } from '../html.js';
+import { signal } from '@preact/signals';
 import {
-  activeTab, sidebarCollapsed, sidebarForcedCollapsed, configDirty, capabilities, serverHealth,
+  activeTab, sidebarCollapsed, sidebarForcedCollapsed, configDirty, capabilities,
   sessions, folders, sessionsByFolder, foldersCollapsed, activeSessionId,
   selectTab, selectSession, toggleSidebar, toggleFolder, setSidebarWidth,
 } from '../state.js';
@@ -12,9 +13,18 @@ import { clockTick } from '../state.js';
 import { useDragSort } from './useDragSort.js';
 import {
   IconLaunch, IconConfigure,
-  IconSidebarToggle, IconPencil, IconClose, IconFolder, IconFolderOpen, BrandMark,
+  IconSidebarToggle, IconPencil, IconClose, IconFolder, IconFolderOpen, IconPlus, BrandMark,
 } from '../icons.js';
 
+// Module-level drag state for session → folder moves. Lives outside the
+// useDragSort hook (which handles same-list folder reorder) so the two
+// don't interfere — session drags and folder drags use disjoint state.
+// Folder key: folder.id for real folders, the literal string 'unsorted'
+// for the implicit top-level Unsorted bucket.
+const draggingSessionId = signal(null);
+const dragOverFolderKey = signal(null);
+const folderKey = (folder) => folder ? folder.id : 'unsorted';
+
 function NavItem({ tab, icon, label, dirty }) {
   const selected = activeTab.value === tab;
   return html`
@@ -108,8 +118,22 @@ function SessionRow({ s }) {
     } catch (e) { setToast(e.message, 'error'); }
   };
 
+  const onDragStart = (ev) => {
+    draggingSessionId.value = s.id;
+    ev.dataTransfer.effectAllowed = 'move';
+    // Firefox refuses to start a drag without some data set.
+    try { ev.dataTransfer.setData('text/plain', s.id); } catch {}
+  };
+  const onDragEnd = () => {
+    draggingSessionId.value = null;
+    dragOverFolderKey.value = null;
+  };
+
   return html`
     <div class=${`tree-session${isActive ? ' is-active' : ''}${running ? ' is-running' : ' is-stopped'}`}
+         draggable=${true}
+         onDragStart=${onDragStart}
+         onDragEnd=${onDragEnd}
          onClick=${onClick}
          onContextMenu=${onContext}
          title=${`${title}\n${s.cwd}\n${running ? 'running' : 'stopped'} · ${s.cliId}`}>
@@ -124,7 +148,7 @@ function SessionRow({ s }) {
 }
 
 function FolderGroup({ folder, sessionList, dndHandle, dndRow }) {
-  const key = folder ? folder.id : 'unsorted';
+  const key = folderKey(folder);
   const collapsed = !!foldersCollapsed.value[key];
   const name = folder ? folder.name : 'Unsorted';
   const onToggle = () => toggleFolder(folder ? folder.id : null);
@@ -148,8 +172,55 @@ function FolderGroup({ folder, sessionList, dndHandle, dndRow }) {
     catch (e) { setToast(e.message, 'error'); }
   };
 
+  // Session-into-folder drop target. We don't go through useDragSort
+  // because that one is wired for folder-reorder. Folder reorder's
+  // handlers (in dndRow) short-circuit when no folder is being dragged,
+  // and our handlers below short-circuit when no session is being
+  // dragged — so composing both is safe.
+  const draggedSession = draggingSessionId.value
+    ? sessions.value.find((s) => s.id === draggingSessionId.value)
+    : null;
+  const sameFolder = draggedSession
+    && (draggedSession.folderId || null) === (folder ? folder.id : null);
+  const isOver = !sameFolder && dragOverFolderKey.value === key;
+
+  const onSessionDragOver = (ev) => {
+    if (!draggingSessionId.value || sameFolder) return;
+    ev.preventDefault();
+    ev.dataTransfer.dropEffect = 'move';
+    if (dragOverFolderKey.value !== key) dragOverFolderKey.value = key;
+  };
+  const onSessionDragLeave = (ev) => {
+    if (!draggingSessionId.value) return;
+    const rt = ev.relatedTarget;
+    if (rt && ev.currentTarget.contains(rt)) return;
+    if (dragOverFolderKey.value === key) dragOverFolderKey.value = null;
+  };
+  const onSessionDrop = (ev) => {
+    const sid = draggingSessionId.value;
+    draggingSessionId.value = null;
+    dragOverFolderKey.value = null;
+    if (!sid || sameFolder) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    setSessionFolder(sid, folder ? folder.id : null)
+      .then(() => setToast(folder ? `moved to ${folder.name}` : 'moved to Unsorted'))
+      .catch((e) => setToast(e.message, 'error'));
+  };
+
+  // Spread folder-reorder row handlers first, then compose our
+  // session-drop handlers on top so both fire.
+  const { onDragOver: rowOver, onDragLeave: rowLeave, onDrop: rowDrop, ...rowAttrs } = dndRow || {};
+  const composedOver = (ev) => { onSessionDragOver(ev); rowOver?.(ev); };
+  const composedLeave = (ev) => { onSessionDragLeave(ev); rowLeave?.(ev); };
+  const composedDrop = (ev) => { onSessionDrop(ev); rowDrop?.(ev); };
+
   return html`
-    <div class="tree-folder" ...${dndRow || {}}>
+    <div class=${`tree-folder${isOver ? ' is-session-drop-target' : ''}`}
+         ...${rowAttrs}
+         onDragOver=${composedOver}
+         onDragLeave=${composedLeave}
+         onDrop=${composedDrop}>
       <button class=${`tree-folder-head${collapsed ? '' : ' is-open'}`} onClick=${onToggle}
               ...${dndHandle || {}}>
         <span class="tree-folder-icon">
@@ -194,6 +265,9 @@ function SessionTree() {
     <div class="tree">
       <div class="tree-head">
         <span class="tree-head-label">Sessions</span>
+        <button class="tree-head-action" title="New folder" onClick=${onNewFolder}>
+          <${IconPlus} />
+        </button>
       </div>
       ${orderedFolders.map((f) => html`
         <${FolderGroup} key=${f.id} folder=${f}
@@ -236,9 +310,6 @@ export function Sidebar() {
                 onClick=${() => selectTab('about')}>
           <span class="brand-mark"><${BrandMark} /></span>
           <span class="brand-name">CCSM<span class="brand-dot">.</span></span>
-          ${serverHealth.value.version ? html`
-            <span class="brand-version">v${serverHealth.value.version}</span>
-          ` : null}
         </button>
       </div>
 

package/public/js/main.js

@@ -3,32 +3,24 @@
 // the mount root.
 
 import { render } from 'preact';
-import { effect } from '@preact/signals';
 import { html } from './html.js';
-import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed, serverHealth } from './state.js';
+import { loadPersisted, clockTick, lastRefreshAt, installPrompt, isInstalledPwa, sidebarForcedCollapsed } from './state.js';
 import { httpBase } from './backend.js';
 import { loadConfig, refreshAll, loadSessions, loadFolders, loadWorkspaces, pollHealth } from './api.js';
 import { setToast } from './toast.js';
 import { App } from './components/App.js';
 
 loadPersisted();
-// Window/tab title tracks the live backend version — "CCSM v0.10.1" once
-// /api/health responds, "CCSM" before then. A MutationObserver guards
-// against Chromium standalone builds that occasionally try to inject the
-// URL into the title bar; it accepts any "CCSM..." string we set and
-// resets anything else.
-function desiredTitle() {
-  const v = serverHealth.value.version;
-  return v ? `CCSM v${v}` : 'CCSM';
-}
-let expected = desiredTitle();
+// 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();
 new MutationObserver(lockTitle).observe(
   document.querySelector('title') || document.head,
   { childList: true, subtree: true, characterData: true }
 );
-effect(() => { expected = desiredTitle(); lockTitle(); });
 render(html`<${App} />`, document.getElementById('app'));
 
 // PWA install affordance — Chromium fires `beforeinstallprompt` when the

package/scripts/dev.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+'use strict';
+
+// Dev launcher · fully isolates from the user's prod ccsm install.
+//
+// Why: many contributors run the published `@bakapiano/ccsm` package
+// for their day-to-day work (port 7777, ~/.ccsm). If `npm run dev`
+// reused the same data dir + port, every hot-reload would clobber the
+// live sessions.json. So dev gets its own:
+//
+//   - CCSM_HOME   → ~/.ccsm-dev/   (separate config.json, sessions.json, folders.json)
+//   - port        → 7788           (no contention with prod 7777)
+//   - workDir     → ~/ccsm-workspaces-dev (separate workspace tree)
+//   - no browser auto-open (we're iterating in an already-open tab)
+//
+// Run via `npm run dev`. The first launch seeds a starter config; later
+// launches leave it alone so dev's own customisations stick.
+
+const path = require('node:path');
+const os = require('node:os');
+const fs = require('node:fs');
+const { spawn } = require('node:child_process');
+
+const DEV_HOME = path.join(os.homedir(), '.ccsm-dev');
+const DEV_PORT = '7788';
+const DEV_WORKDIR = path.join(os.homedir(), 'ccsm-workspaces-dev');
+
+fs.mkdirSync(DEV_HOME, { recursive: true });
+
+// Seed a fresh dev config the first time. Subsequent runs leave the
+// existing file alone — the dev's own UI edits persist across restarts.
+const configPath = path.join(DEV_HOME, 'config.json');
+if (!fs.existsSync(configPath)) {
+  fs.writeFileSync(configPath, JSON.stringify({
+    port: Number(DEV_PORT),
+    workDir: DEV_WORKDIR,
+    repos: [],
+  }, null, 2));
+}
+
+const env = {
+  ...process.env,
+  CCSM_HOME: DEV_HOME,
+  CCSM_PORT: DEV_PORT,
+  CCSM_NO_BROWSER: '1',
+};
+
+const serverPath = path.join(__dirname, '..', 'server.js');
+const child = spawn(process.execPath, ['--watch', serverPath], {
+  env,
+  stdio: 'inherit',
+});
+
+const forward = (sig) => () => child.kill(sig);
+process.on('SIGINT', forward('SIGINT'));
+process.on('SIGTERM', forward('SIGTERM'));
+child.on('exit', (code, signal) => {
+  process.exit(signal ? 1 : (code ?? 0));
+});

package/server.js

@@ -203,8 +203,9 @@ function spawnCliSession({ cli, cwd, sessionId, meta, extraArgs = [] }) {
     ? prefixArgs
     : [...prefixArgs, ...(cli.args || []), ...extraArgs];
   // Merge user-scope PATH from registry into the env we hand the PTY.
-  const env = { ...process.env, ...(cli.env || {}) };
-  if (mergedUserPath) env.PATH = mergedUserPath;
+  // spawnEnv() also strips duplicate path-case keys so our override
+  // doesn't get shadowed by the inherited `Path` from process.env.
+  const env = spawnEnv(cli.env);
   const trySpawn = (executable) => webTerminal.spawn({
     id: sessionId,
     command: executable,
@@ -328,6 +329,26 @@ function buildMergedUserPath() {
 }
 mergedUserPath = buildMergedUserPath();
 
+// Hand back a fresh env for spawning a child, with PATH overridden by
+// our merged user PATH and any duplicate case variants of "path"
+// stripped first. Windows env lookup is case-insensitive but the env
+// block we hand CreateProcess is an ordered byte buffer — if both
+// `Path` (inherited from process.env, OS canonical case) and `PATH`
+// (our override) are present, Windows resolves to whichever comes
+// first in the block. Node's Object.keys preserves insertion order,
+// so the inherited `Path` would win and our merged override silently
+// disappear. Strip all path-shaped keys first, then add the merge.
+function spawnEnv(extraEnv = {}) {
+  const env = { ...process.env, ...extraEnv };
+  if (process.platform === 'win32') {
+    for (const k of Object.keys(env)) {
+      if (k.toLowerCase() === 'path') delete env[k];
+    }
+  }
+  if (mergedUserPath) env.PATH = mergedUserPath;
+  return env;
+}
+
 // ---- config ----
 
 // Per-CLI install probe. Looks up the command on PATH using `where` (win)