@bakapiano/ccsm 0.11.0 → 0.13.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/lib/webTerminal.js

@@ -84,6 +84,12 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {},
     if (entry.onDataExtra) { try { entry.onDataExtra(data); } catch {} }
   });
   proc.onExit(({ exitCode, signal }) => {
+    // If a respawn replaced us in the pool (same entryId, new entry
+    // object), do not touch persistedSessions or schedule a delete —
+    // those belong to the new entry now. Without this guard, a slow-
+    // dying old PTY would fire markExited on the same sessionId and
+    // clobber the new spawn's markRunning state.
+    if (sessions.get(entryId) !== entry) return;
     entry.exitCode = exitCode;
     entry.exitedAt = Date.now();
     const frame = JSON.stringify({ type: 'exit', code: exitCode, signal });
@@ -91,8 +97,18 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {},
       try { ws.send(frame); } catch {}
     }
     if (entry.onExitExtra) { try { entry.onExitExtra({ exitCode, signal }); } catch {} }
-    setTimeout(() => sessions.delete(entryId), 30_000);
+    setTimeout(() => {
+      if (sessions.get(entryId) === entry) sessions.delete(entryId);
+    }, 30_000);
   });
+  // If a previous entry exists under the same id (respawn), kill its
+  // pty so we don't have zombie claude.exe processes hanging on. The
+  // onExit guard above ensures its callback no-ops once we've taken
+  // over the slot.
+  const prev = sessions.get(entryId);
+  if (prev && !prev.exitedAt) {
+    try { prev.pty.kill(); } catch {}
+  }
   sessions.set(entryId, entry);
   return entry;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.11.0",
+  "version": "0.13.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/css/widgets.css

@@ -980,6 +980,38 @@
   gap: 6px;
   margin-top: 4px;
 }
+.entity-test-button { margin-right: auto; }
+
+.entity-test-result {
+  margin-top: 4px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12.5px;
+}
+.entity-test-result.is-ok    { border-color: rgba(74, 138, 74, 0.4); background: rgba(74, 138, 74, 0.06); }
+.entity-test-result.is-fail  { border-color: rgba(183, 63, 63, 0.4); background: rgba(183, 63, 63, 0.06); }
+.entity-test-summary {
+  font-family: var(--body);
+  font-weight: 500;
+  color: var(--ink);
+}
+.entity-test-result.is-fail .entity-test-summary { color: var(--red); }
+.entity-test-out {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-mid);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 120px;
+  overflow-y: auto;
+}
+.entity-test-out.is-stderr { color: var(--ink-muted); border-top: 1px dashed var(--border); padding-top: 4px; }
 
 .icon-radio {
   display: grid;

package/public/js/api.js

@@ -28,11 +28,11 @@ export async function loadConfig() {
 export async function updateCli(id, patch) {
   const cfg = S.config.value || (await api('GET', '/api/config'));
   const target = (cfg.clis || []).find((c) => c.id === id);
-  // Built-in CLIs lock down identity-defining fields. UI already greys these
-  // out; we belt-and-braces here so a tampered request from elsewhere
-  // can't change them either.
+  // Built-in CLIs lock down structural fields (id + builtin flag) but
+  // allow command edits — users routinely need to point at an absolute
+  // path (e.g. C:\Users\you\.local\bin\claude.exe) or a wrapper script
+  // when the bare name isn't on the spawn-time PATH.
   if (target?.builtin) {
-    delete patch.command;
     delete patch.id;
     delete patch.builtin;
   }
@@ -52,6 +52,14 @@ export async function updateCli(id, patch) {
   return id;
 }
 
+// Probe a (possibly-unsaved) CLI config: spawn its command with
+// `--version`, capture output, see if it looks like the claimed type.
+// `args` is intentionally ignored server-side — runtime flags can
+// disturb a quick probe.
+export async function testCli({ command, shell, type }) {
+  return api('POST', '/api/clis/test', { command, shell, type });
+}
+
 export async function deleteCli(id) {
   const cfg = S.config.value || (await api('GET', '/api/config'));
   const target = (cfg.clis || []).find((c) => c.id === id);

package/public/js/components/EntityFormModal.js

@@ -18,10 +18,13 @@ import { Modal } from './Modal.js';
 export function EntityFormModal({
   title, fields, initial = {}, submitLabel = 'Save',
   readOnlyKeys = [],
-  onSubmit, onClose, danger,
+  onSubmit, onClose, onTest, testLabel = 'Test',
+  danger,
 }) {
   const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
   const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
 
   const isReadOnly = (key) => readOnlyKeys.includes(key);
 
@@ -36,6 +39,20 @@ export function EntityFormModal({
     finally { setSaving(false); }
   };
 
+  const runTest = async () => {
+    if (!onTest) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const r = await onTest(draft);
+      setTestResult(r);
+    } catch (e) {
+      setTestResult({ ok: false, spawnError: String(e?.message || e) });
+    } finally {
+      setTesting(false);
+    }
+  };
+
   return html`
     <${Modal} title=${title} onClose=${onClose} width=${440}>
       <form class="entity-form" onSubmit=${submit}>
@@ -87,7 +104,26 @@ export function EntityFormModal({
             ${f.hint && f.type !== 'checkbox' ? html`
               <span class="entity-field-hint">${f.hint}</span>` : null}
           </label>`)}
+        ${testResult ? html`
+          <div class=${`entity-test-result ${testResult.ok ? 'is-ok' : 'is-fail'}`}>
+            <div class="entity-test-summary">
+              ${testResult.ok ? '✓' : '✗'} ${testResult.ok ? 'works' : 'failed'}
+              ${typeof testResult.exitCode === 'number' ? html` · exit ${testResult.exitCode}` : null}
+              ${typeof testResult.durationMs === 'number' ? html` · ${testResult.durationMs}ms` : null}
+              ${testResult.timedOut ? html` · timed out` : null}
+              ${testResult.matchedType === true ? html` · type matches ${testResult.expectedType}` : null}
+              ${testResult.matchedType === false ? html` · type mismatch (expected ${testResult.expectedType})` : null}
+            </div>
+            ${testResult.spawnError ? html`<pre class="entity-test-out">${testResult.spawnError}</pre>` : null}
+            ${testResult.stdout ? html`<pre class="entity-test-out">${testResult.stdout}</pre>` : null}
+            ${testResult.stderr ? html`<pre class="entity-test-out is-stderr">${testResult.stderr}</pre>` : null}
+          </div>` : null}
         <div class="entity-form-actions">
+          ${onTest ? html`
+            <button type="button" class="action small subtle entity-test-button"
+                    disabled=${testing} onClick=${runTest}>
+              ${testing ? 'Testing…' : testLabel}
+            </button>` : null}
           <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
           <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
                   disabled=${saving}>

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`
@@ -46,47 +56,6 @@ function SessionRow({ s }) {
     }
   };
 
-  const onContext = async (ev) => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    // Quick menu: Rename / Move / Delete. We use sequential prompts
-    // to avoid building a real context-menu component for now.
-    const action = await ccsmPrompt(
-      `${title} · ${running ? 'running' : 'stopped'}\nType: rename / move / delete / resume / cancel`,
-      'cancel', { title: s.id, okLabel: 'OK' });
-    if (!action) return;
-    const verb = action.trim().toLowerCase();
-    if (verb === 'rename') {
-      const next = await ccsmPrompt('New title', title, { title: 'Rename session', okLabel: 'Save' });
-      if (next === null) return;
-      try { await setSessionTitle(s.id, next.trim()); setToast('renamed'); }
-      catch (e) { setToast(e.message, 'error'); }
-    } else if (verb === 'move') {
-      // Move to a folder by name
-      const folderNames = folders.value.map((f) => f.name).join(', ');
-      const target = await ccsmPrompt(
-        `Move to which folder? (empty = Unsorted)\nExisting: ${folderNames || '(none)'}`,
-        '', { title: 'Move', okLabel: 'Move' });
-      if (target === null) return;
-      const t = target.trim();
-      const folder = t ? folders.value.find((f) => f.name.toLowerCase() === t.toLowerCase()) : null;
-      if (t && !folder) { setToast(`no folder named "${t}"`, 'error'); return; }
-      try { await setSessionFolder(s.id, folder ? folder.id : null); setToast('moved'); }
-      catch (e) { setToast(e.message, 'error'); }
-    } else if (verb === 'delete') {
-      const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
-        title: 'Delete session', okLabel: 'Delete', danger: true });
-      if (!ok) return;
-      try {
-        await deleteSession(s.id);
-        if (activeSessionId.value === s.id) activeSessionId.value = null;
-      } catch (e) { setToast(e.message, 'error'); }
-    } else if (verb === 'resume' && !running) {
-      try { await resumeSession(s.id); selectSession(s.id); }
-      catch (e) { setToast(e.message, 'error'); }
-    }
-  };
-
   const onRenameClick = async (ev) => {
     ev.preventDefault();
     ev.stopPropagation();
@@ -108,10 +77,23 @@ 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}`}>
       <span class=${`tree-dot ${running ? 'is-running' : 'is-stopped'}`}></span>
       <span class="tree-label">${title}</span>
@@ -124,7 +106,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 +130,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 +223,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 +268,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/components/TerminalView.js

@@ -86,6 +86,22 @@ export function TerminalView({ terminalId }) {
     } catch (e) {
       console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
     }
+    // Ctrl+C with a selection: by default xterm.js sends \x03 AND the
+    // browser's own copy event fires — so the user gets "selection
+    // copied to clipboard" AND the running CLI gets SIGINT. Mirror
+    // VSCode/Windows Terminal behaviour: when there's a selection,
+    // suppress \x03 and let the copy event do its thing. With no
+    // selection, Ctrl+C still sends \x03 normally.
+    term.attachCustomKeyEventHandler((ev) => {
+      if (ev.type === 'keydown'
+          && ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey
+          && ev.key.toLowerCase() === 'c'
+          && term.hasSelection()) {
+        return false;
+      }
+      return true;
+    });
+
     const host = hostRef.current;
     term.open(host);
     // Defer fit one tick so the container has measured layout

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/public/js/pages/ConfigurePage.js

@@ -10,7 +10,7 @@ import {
 } from '../state.js';
 import {
   api, loadConfig, loadWorkspaces, loadFolders,
-  createCli, updateCli, deleteCli, setDefaultCli,
+  createCli, updateCli, deleteCli, setDefaultCli, testCli,
   createRepo, updateRepo, deleteRepo,
   createFolder, renameFolder, deleteFolder, reorderFolders,
   deleteWorkspace,
@@ -252,6 +252,7 @@ export function ConfigurePage() {
     ${edit?.kind === 'cli-new' ? html`
       <${EntityFormModal} title="New CLI" fields=${cliFieldsFor({ creating: true })}
         onClose=${close} submitLabel="Create"
+        onTest=${(v) => testCli({ command: v.command, shell: v.shell, type: v.type })}
         onSubmit=${async (v) => {
           try { await createCli(v); setToast(`created CLI · ${v.name}`); }
           catch (e) { setToast(e.message, 'error'); throw e; }
@@ -259,7 +260,7 @@ export function ConfigurePage() {
 
     ${edit?.kind === 'cli-edit' ? html`
       <${EntityFormModal} title=${`Edit ${edit.payload.name}`} fields=${cliFieldsFor()}
-        readOnlyKeys=${edit.payload.builtin ? ['type', 'command'] : []}
+        readOnlyKeys=${edit.payload.builtin ? ['type'] : []}
         initial=${{
           ...edit.payload,
           args: (edit.payload.args || []).join(' '),
@@ -267,6 +268,7 @@ export function ConfigurePage() {
           resumeIdArgs: (edit.payload.resumeIdArgs || []).join(' '),
         }}
         onClose=${close}
+        onTest=${(v) => testCli({ command: v.command, shell: v.shell, type: v.type })}
         onSubmit=${async (v) => {
           try {
             const patch = {
@@ -275,8 +277,6 @@ export function ConfigurePage() {
               resumeArgs: typeof v.resumeArgs === 'string' ? v.resumeArgs.split(/\s+/).filter(Boolean) : v.resumeArgs,
               resumeIdArgs: typeof v.resumeIdArgs === 'string' ? v.resumeIdArgs.split(/\s+/).filter(Boolean) : v.resumeIdArgs,
             };
-            // command is locked on builtins — drop any tampered value.
-            if (edit.payload.builtin) delete patch.command;
             await updateCli(edit.payload.id, patch);
             setToast('saved');
           } catch (e) { setToast(e.message, 'error'); throw e; }

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)
@@ -372,7 +393,92 @@ app.put('/api/config', asyncH(async (req, res) => {
   res.json(decorateConfigWithProbes(cfg));
 }));
 
-// ---- CLIs ----
+// ---- CLI probe / test ----
+//
+// Run the user's configured command with `--version` and report back
+// stdout/stderr + whether the output looks like the claimed CLI type.
+// Used by the Configure page "Test" button so the user can verify the
+// command resolves + actually launches the right tool BEFORE saving.
+// Body: { command, args?, shell?, type? }. args is ignored for the
+// version probe — we always append `--version` directly so the user's
+// runtime args (e.g. --dangerously-skip-permissions) don't perturb the
+// quick probe.
+app.post('/api/clis/test', asyncH(async (req, res) => {
+  const { spawn } = require('node:child_process');
+  const body = req.body || {};
+  const command = String(body.command || '').trim();
+  const shell = ['direct', 'pwsh', 'cmd'].includes(body.shell) ? body.shell : 'direct';
+  const type = ['claude', 'codex', 'copilot', 'other'].includes(body.type) ? body.type : 'other';
+  if (!command) return res.status(400).json({ error: 'command required' });
+
+  // Build the test exec. Same shell-wrapping rules as resolveCommand,
+  // but we force `--version` as the only arg and we DROP `-NoExit`
+  // from the pwsh wrapper so pwsh terminates after printing.
+  let exe, args;
+  const cmd = command.replace(/^\.[\\\/]/, '');
+  const versionArg = '--version';
+  if (shell === 'pwsh') {
+    const joined = `& ${/[\s'"\`$]/.test(cmd) ? `'${cmd.replace(/'/g, "''")}'` : cmd} ${versionArg}`;
+    exe = 'pwsh.exe';
+    args = ['-NoLogo', '-Command', joined];
+  } else if (shell === 'cmd') {
+    exe = process.env.ComSpec || 'cmd.exe';
+    args = ['/d', '/s', '/c', `${cmd} ${versionArg}`];
+  } else if (path.isAbsolute(cmd)) {
+    const ext = path.extname(cmd).toLowerCase();
+    if (ext === '.cmd' || ext === '.bat') {
+      exe = process.env.ComSpec || 'cmd.exe';
+      args = ['/d', '/s', '/c', cmd, versionArg];
+    } else if (ext === '.ps1') {
+      exe = 'powershell.exe';
+      args = ['-NoProfile', '-ExecutionPolicy', 'Bypass', '-File', cmd, versionArg];
+    } else {
+      exe = cmd;
+      args = [versionArg];
+    }
+  } else {
+    exe = process.env.ComSpec || 'cmd.exe';
+    args = ['/d', '/s', '/c', cmd, versionArg];
+  }
+
+  const t0 = Date.now();
+  let stdout = '';
+  let stderr = '';
+  let exitCode = null;
+  let timedOut = false;
+  let spawnError = null;
+  try {
+    const child = spawn(exe, args, { env: spawnEnv(), windowsHide: true });
+    const killer = setTimeout(() => { timedOut = true; try { child.kill(); } catch {} }, 5000);
+    child.stdout.on('data', (d) => { stdout += d.toString(); if (stdout.length > 8192) stdout = stdout.slice(0, 8192); });
+    child.stderr.on('data', (d) => { stderr += d.toString(); if (stderr.length > 8192) stderr = stderr.slice(0, 8192); });
+    exitCode = await new Promise((resolve, reject) => {
+      child.on('exit', (code) => { clearTimeout(killer); resolve(code); });
+      child.on('error', (err) => { clearTimeout(killer); reject(err); });
+    });
+  } catch (e) {
+    spawnError = String(e && e.message || e);
+  }
+  const durationMs = Date.now() - t0;
+
+  const out = (stdout + '\n' + stderr).toLowerCase();
+  const PATTERNS = {
+    claude:  /claude/,
+    codex:   /codex|openai/,
+    copilot: /copilot/,
+  };
+  const matchedType = type === 'other' ? null : (PATTERNS[type] ? PATTERNS[type].test(out) : null);
+  const ok = !spawnError && !timedOut && exitCode === 0;
+  res.json({
+    ok, exitCode, durationMs, timedOut, spawnError,
+    stdout: stdout.trim(),
+    stderr: stderr.trim(),
+    matchedType,
+    expectedType: type,
+    spawned: { exe, args },
+  });
+}));
+
 // ---- folders ----
 
 app.get('/api/folders', asyncH(async (_req, res) => {