@bakapiano/ccsm 0.5.0 → 0.8.3

package/lib/focus.js

@@ -32,6 +32,7 @@ using System;
 using System.Collections.Generic;
 using System.Runtime.InteropServices;
 using System.Text;
+using System.Threading;
 public class CcsmWin {
     [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr h);
     [DllImport("user32.dll")] public static extern void SwitchToThisWindow(IntPtr h, bool t);
@@ -46,8 +47,27 @@ public class CcsmWin {
     [DllImport("user32.dll")] public static extern bool EnumWindows(EnumWindowsProc cb, IntPtr p);
     [DllImport("user32.dll", CharSet=CharSet.Auto)] public static extern int GetWindowText(IntPtr h, StringBuilder s, int max);
     [DllImport("user32.dll")] public static extern int GetWindowTextLength(IntPtr h);
+    [DllImport("user32.dll")] public static extern bool GetWindowRect(IntPtr h, out RECT rect);
+    [DllImport("user32.dll")] public static extern bool SetWindowPos(IntPtr h, IntPtr after, int x, int y, int cx, int cy, uint flags);
+    [DllImport("user32.dll")] public static extern bool GetCursorPos(out POINT lpPoint);
+    [DllImport("user32.dll")] public static extern IntPtr MonitorFromPoint(POINT pt, uint dwFlags);
+    [DllImport("user32.dll")] public static extern bool GetMonitorInfo(IntPtr hMonitor, ref MONITORINFO mi);
+    [DllImport("user32.dll")] public static extern bool MoveWindow(IntPtr h, int x, int y, int w, int hgt, bool repaint);
     public delegate bool EnumWindowsProc(IntPtr h, IntPtr p);
 
+    [StructLayout(LayoutKind.Sequential)]
+    public struct RECT { public int Left, Top, Right, Bottom; }
+    [StructLayout(LayoutKind.Sequential)]
+    public struct POINT { public int X, Y; }
+    [StructLayout(LayoutKind.Sequential)]
+    public struct MONITORINFO {
+        public uint cbSize;
+        public RECT rcMonitor;
+        public RECT rcWork;
+        public uint dwFlags;
+    }
+    const uint MONITOR_DEFAULTTONEAREST = 0x00000002;
+
     public static List<object> EnumVisibleTopLevel() {
         var results = new List<object>();
         EnumWindows((h, l) => {
@@ -64,7 +84,54 @@ public class CcsmWin {
         return results;
     }
 
-    public static bool Activate(IntPtr h) {
+    // SWP flags
+    const uint SWP_NOSIZE = 0x0001;
+    const uint SWP_NOZORDER = 0x0004;
+    const uint SWP_NOACTIVATE = 0x0010;
+    const uint SWP_ASYNCWINDOWPOS = 0x4000;
+    const uint SWP_FLAGS = SWP_NOSIZE | SWP_NOZORDER | SWP_NOACTIVATE | SWP_ASYNCWINDOWPOS;
+
+    // Horizontal shake — small left/right offsets so the user's eye snaps
+    // to the activated window. ~220ms total.
+    public static void Jiggle(IntPtr h) {
+        RECT rc;
+        if (!GetWindowRect(h, out rc)) return;
+        int x = rc.Left;
+        int y = rc.Top;
+        int[] dx = new int[] { 8, -8, 6, -6, 0 };
+        foreach (int d in dx) {
+            SetWindowPos(h, IntPtr.Zero, x + d, y, 0, 0, SWP_FLAGS);
+            Thread.Sleep(38);
+        }
+    }
+
+    // Move the window to the center of whichever monitor the cursor is on.
+    // Preserves window size. Returns true if it moved.
+    public static bool MoveToCursorScreenCenter(IntPtr h) {
+        RECT wr;
+        if (!GetWindowRect(h, out wr)) return false;
+        int ww = wr.Right - wr.Left;
+        int wh = wr.Bottom - wr.Top;
+
+        POINT cursor;
+        if (!GetCursorPos(out cursor)) return false;
+        IntPtr hMon = MonitorFromPoint(cursor, MONITOR_DEFAULTTONEAREST);
+        if (hMon == IntPtr.Zero) return false;
+
+        MONITORINFO mi = new MONITORINFO();
+        mi.cbSize = (uint)Marshal.SizeOf(typeof(MONITORINFO));
+        if (!GetMonitorInfo(hMon, ref mi)) return false;
+
+        // Use the work area (excludes taskbar) so a centered window isn't
+        // pushed under the taskbar.
+        int sw = mi.rcWork.Right - mi.rcWork.Left;
+        int sh = mi.rcWork.Bottom - mi.rcWork.Top;
+        int nx = mi.rcWork.Left + (sw - ww) / 2;
+        int ny = mi.rcWork.Top + (sh - wh) / 2;
+        return MoveWindow(h, nx, ny, ww, wh, true);
+    }
+
+    public static bool Activate(IntPtr h, bool moveToCenter) {
         if (IsIconic(h)) ShowWindowAsync(h, 9);
         keybd_event(0x12, 0, 0, UIntPtr.Zero);
         keybd_event(0x12, 0, 0x0002, UIntPtr.Zero);
@@ -77,6 +144,8 @@ public class CcsmWin {
         bool ok = SetForegroundWindow(h);
         SwitchToThisWindow(h, true);
         if (attached) AttachThreadInput(c, t, false);
+        if (moveToCenter) MoveToCursorScreenCenter(h);
+        Jiggle(h);
         return ok;
     }
 }
@@ -84,6 +153,7 @@ public class CcsmWin {
 
 $mode = $env:CCSM_FOCUS_MODE
 $arg  = $env:CCSM_FOCUS_ARG
+$moveToCenter = $env:CCSM_FOCUS_CENTER -eq '1'
 
 if ($mode -eq 'list') {
     $procName = $arg -replace '\.exe$',''
@@ -109,7 +179,7 @@ if ($mode -eq 'list') {
 if ($mode -eq 'focus-hwnd') {
     $hwndInt = [int64]$arg
     $hwnd = [IntPtr]::new($hwndInt)
-    $ok = [CcsmWin]::Activate($hwnd)
+    $ok = [CcsmWin]::Activate($hwnd, $moveToCenter)
     Write-Output (ConvertTo-Json @{ ok = $true; activated = $ok; hwnd = $hwndInt } -Compress)
     exit 0
 }
@@ -132,7 +202,7 @@ if ($mode -eq 'focus-pid') {
         Write-Output (ConvertTo-Json @{ ok = $false; error = "no window handle found for pid $arg"; chain = $chain } -Compress -Depth 5)
         exit 1
     }
-    $activated = [CcsmWin]::Activate($hwnd)
+    $activated = [CcsmWin]::Activate($hwnd, $moveToCenter)
     Write-Output (ConvertTo-Json @{
         ok = $true; activated = $activated
         hwnd = $hwnd.ToInt64()
@@ -148,7 +218,7 @@ Write-Output (ConvertTo-Json @{ ok = $false; error = "unknown CCSM_FOCUS_MODE: $
 exit 1
 `;
 
-function runPsHelper(mode, arg) {
+function runPsHelper(mode, arg, opts = {}) {
   return new Promise((resolve, reject) => {
     const encoded = Buffer.from(FOCUS_HELPER_PS, 'utf16le').toString('base64');
     const child = spawn(
@@ -156,7 +226,12 @@ function runPsHelper(mode, arg) {
       ['-NoProfile', '-ExecutionPolicy', 'Bypass', '-EncodedCommand', encoded],
       {
         windowsHide: true,
-        env: { ...process.env, CCSM_FOCUS_MODE: mode, CCSM_FOCUS_ARG: String(arg) },
+        env: {
+          ...process.env,
+          CCSM_FOCUS_MODE: mode,
+          CCSM_FOCUS_ARG: String(arg),
+          CCSM_FOCUS_CENTER: opts.moveToCenter ? '1' : '0',
+        },
       }
     );
     let out = '';
@@ -186,10 +261,10 @@ function runPsHelper(mode, arg) {
 
 // ---- public API ----
 
-async function focusByPid(pid) {
+async function focusByPid(pid, opts = {}) {
   const n = Number(pid);
   if (!Number.isInteger(n) || n <= 0) throw new Error(`focusByPid: invalid pid ${pid}`);
-  return await runPsHelper('focus-pid', n);
+  return await runPsHelper('focus-pid', n, opts);
 }
 
 // Strip the leading wt status glyph + whitespace ("✳ ", "⠐ ", "⠠ " etc) so
@@ -205,9 +280,10 @@ function cleanWtTitle(t) {
 // window regardless of which tab the session is actually in. Instead we
 // list all wt windows and match by tab title against the session's AI
 // title / cwd basename.
-async function focusBySession({ pid, sessionId, title, cwd }) {
+async function focusBySession({ pid, sessionId, title, cwd, moveToCenter = false }) {
   const procName = 'WindowsTerminal.exe';
   const cands = await listWindowsOf(procName);
+  const opts = { moveToCenter };
 
   const cleanedTitle = title ? cleanWtTitle(title) : '';
   const cwdBase = cwd ? require('node:path').basename(cwd) : '';
@@ -216,7 +292,7 @@ async function focusBySession({ pid, sessionId, title, cwd }) {
   if (cleanedTitle) {
     const exact = cands.filter((w) => cleanWtTitle(w.title) === cleanedTitle);
     if (exact.length === 1) {
-      const r = await focusByHwnd(exact[0].hwnd);
+      const r = await focusByHwnd(exact[0].hwnd, opts);
       return { ...r, matchedBy: 'title-exact', hwnd: exact[0].hwnd, windowTitle: exact[0].title };
     }
   }
@@ -225,7 +301,7 @@ async function focusBySession({ pid, sessionId, title, cwd }) {
   if (cleanedTitle) {
     const subs = cands.filter((w) => w.title.includes(cleanedTitle));
     if (subs.length === 1) {
-      const r = await focusByHwnd(subs[0].hwnd);
+      const r = await focusByHwnd(subs[0].hwnd, opts);
       return { ...r, matchedBy: 'title-substring', hwnd: subs[0].hwnd, windowTitle: subs[0].title };
     }
   }
@@ -234,7 +310,7 @@ async function focusBySession({ pid, sessionId, title, cwd }) {
   if (cwdBase) {
     const byCwd = cands.filter((w) => w.title.includes(cwdBase));
     if (byCwd.length === 1) {
-      const r = await focusByHwnd(byCwd[0].hwnd);
+      const r = await focusByHwnd(byCwd[0].hwnd, opts);
       return { ...r, matchedBy: 'cwd-basename', hwnd: byCwd[0].hwnd, windowTitle: byCwd[0].title };
     }
   }
@@ -243,14 +319,14 @@ async function focusBySession({ pid, sessionId, title, cwd }) {
   //    canonical MainWindowHandle — may be the wrong window when wt is
   //    multi-window single-process, but better than nothing).
   if (pid) {
-    const r = await focusByPid(pid);
+    const r = await focusByPid(pid, opts);
     return { ...r, matchedBy: 'pid-fallback', ambiguous: true };
   }
   return { ok: false, error: 'no match by title/cwd and no pid given', matchedBy: 'none' };
 }
 
-async function focusByHwnd(hwnd) {
-  return await runPsHelper('focus-hwnd', hwnd);
+async function focusByHwnd(hwnd, opts = {}) {
+  return await runPsHelper('focus-hwnd', hwnd, opts);
 }
 
 async function listWindowsOf(processName) {

package/lib/jsonStore.js

@@ -0,0 +1,60 @@
+'use strict';
+
+// Factory for a keyed-JSON store under $DATA_DIR. Both favorites and labels
+// have the same shape: a JSON object keyed by sessionId, written atomically
+// on each mutation, with ENOENT swallowed to empty.
+//
+//   const store = createKeyedJsonStore({ filename: 'foo.json', transformValue: (v) => ... })
+//   await store.load()        → object
+//   await store.set(key, v)   → returns the stored value (or null if removed)
+//   await store.remove(key)   → returns true if it existed
+//   await store.list()        → array of values
+
+const fs = require('node:fs/promises');
+const path = require('node:path');
+
+function createKeyedJsonStore({ dataDir, filename, transformValue = (v) => v }) {
+  const filePath = path.join(dataDir, filename);
+
+  async function load() {
+    try {
+      const raw = await fs.readFile(filePath, 'utf8');
+      const obj = JSON.parse(raw);
+      return obj && typeof obj === 'object' && !Array.isArray(obj) ? obj : {};
+    } catch (e) {
+      if (e.code === 'ENOENT') return {};
+      throw e;
+    }
+  }
+
+  async function save(map) {
+    await fs.writeFile(filePath, JSON.stringify(map, null, 2));
+  }
+
+  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;
+  }
+
+  async function remove(key) {
+    const map = await load();
+    if (!(key in map)) return false;
+    delete map[key];
+    await save(map);
+    return true;
+  }
+
+  async function list() {
+    const map = await load();
+    return Object.values(map);
+  }
+
+  return { load, save, set, remove, list, filePath };
+}
+
+module.exports = { createKeyedJsonStore };

package/lib/labels.js

@@ -0,0 +1,29 @@
+'use strict';
+
+// User-defined display titles for sessions, keyed by sessionId at
+// $DATA_DIR/labels.json. Frontend overlays the label on top of the
+// AI-generated title when rendering live / recent / favorites.
+
+const path = require('node:path');
+const { DATA_DIR } = require('./config');
+const { createKeyedJsonStore } = require('./jsonStore');
+
+const MAX_LEN = 200;
+
+const store = createKeyedJsonStore({
+  dataDir: DATA_DIR,
+  filename: 'labels.json',
+  // Empty / null label triggers a remove via the factory contract.
+  transformValue: (v) => {
+    const trimmed = String(v || '').trim().slice(0, MAX_LEN);
+    return trimmed || null;
+  },
+});
+
+module.exports = {
+  loadLabels: store.load,
+  saveLabels: store.save,
+  setLabel: store.set,
+  removeLabel: store.remove,
+  LABELS_PATH: store.filePath,
+};

package/lib/webTerminal.js

@@ -0,0 +1,173 @@
+'use strict';
+
+// ccsm in-process PTY pool. Used by the "web terminal" launch path:
+// claude (or any cmd) runs as a child of ccsm and its stdio is bridged
+// to one or more WebSocket clients via xterm.js in the browser.
+//
+// Lifecycle: a PTY entry is created by spawn(), broadcasts every output
+// chunk to all attached sockets, keeps a rolling history ring so a fresh
+// connection can replay recent output. attach() wires a websocket to an
+// entry, kill() ends a PTY explicitly, list() returns metadata for UI.
+//
+// node-pty is optional (Windows native binary). If it failed to load,
+// `available` is false and spawn() throws — server.js gates the
+// /api/sessions/web route on this flag so install failures degrade
+// gracefully to wt-only mode.
+
+const path = require('node:path');
+
+let pty = null;
+let loadError = null;
+try {
+  pty = require('node-pty');
+} catch (e) {
+  loadError = e;
+}
+
+const HISTORY_BYTES = 256 * 1024;
+
+// Map<id, { id, pty, history, sockets:Set<ws>, meta }>
+const sessions = new Map();
+
+function genId() {
+  return 'web-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+}
+
+// Spawn a new PTY. `command` and `args` are passed straight to node-pty.
+// `meta` is whatever the caller wants surfaced to the UI (title, cwd, etc).
+// Throws if node-pty isn't available.
+function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {} }) {
+  if (!pty) {
+    const err = new Error('node-pty is not available · ' + (loadError && loadError.message || 'unknown'));
+    err.code = 'PTY_UNAVAILABLE';
+    throw err;
+  }
+  const id = genId();
+  const proc = pty.spawn(command, args, {
+    name: 'xterm-256color',
+    cols, rows,
+    cwd: cwd ? path.resolve(cwd) : process.cwd(),
+    env: { ...process.env, ...(env || {}) },
+  });
+  const entry = {
+    id,
+    pty: proc,
+    history: '',
+    sockets: new Set(),
+    meta: { ...meta, startedAt: Date.now(), command, args, cwd: cwd || process.cwd(), pid: proc.pid },
+    exitCode: null,
+    exitedAt: null,
+  };
+  proc.onData((data) => {
+    // Append to ring; truncate to last HISTORY_BYTES so memory stays bounded.
+    entry.history = (entry.history + data);
+    if (entry.history.length > HISTORY_BYTES) {
+      entry.history = entry.history.slice(-HISTORY_BYTES);
+    }
+    const frame = JSON.stringify({ type: 'output', data });
+    for (const ws of entry.sockets) {
+      try { ws.send(frame); } catch {}
+    }
+  });
+  proc.onExit(({ exitCode, signal }) => {
+    entry.exitCode = exitCode;
+    entry.exitedAt = Date.now();
+    const frame = JSON.stringify({ type: 'exit', code: exitCode, signal });
+    for (const ws of entry.sockets) {
+      try { ws.send(frame); } catch {}
+    }
+    // Keep the entry around briefly so a reconnecting client can see the
+    // exit code + final transcript, then drop it. 30s is enough for a UI
+    // re-render but won't hoard memory forever.
+    setTimeout(() => sessions.delete(id), 30_000);
+  });
+  sessions.set(id, entry);
+  return entry;
+}
+
+// Wire a websocket to a session. Replays history immediately so the
+// client sees recent context; then forwards input/resize messages from
+// the client to the PTY and broadcast outputs back via onData above.
+function attach(id, ws) {
+  const entry = sessions.get(id);
+  if (!entry) {
+    try { ws.close(4404, 'no such terminal'); } catch {}
+    return;
+  }
+  entry.sockets.add(ws);
+  if (entry.history) {
+    try { ws.send(JSON.stringify({ type: 'output', data: entry.history })); } catch {}
+  }
+  if (entry.exitedAt) {
+    try { ws.send(JSON.stringify({ type: 'exit', code: entry.exitCode })); } catch {}
+  } else {
+    try { ws.send(JSON.stringify({ type: 'attached', meta: entry.meta })); } catch {}
+  }
+
+  ws.on('message', (msg) => {
+    let event;
+    try { event = JSON.parse(msg.toString()); } catch { return; }
+    if (entry.exitedAt) return;  // PTY is dead, ignore further input
+    switch (event.type) {
+      case 'input':
+        if (typeof event.data === 'string') entry.pty.write(event.data);
+        break;
+      case 'resize':
+        if (Number(event.cols) > 0 && Number(event.rows) > 0) {
+          try { entry.pty.resize(Number(event.cols), Number(event.rows)); } catch {}
+        }
+        break;
+      case 'kill':
+        kill(id);
+        break;
+    }
+  });
+
+  ws.on('close', () => {
+    entry.sockets.delete(ws);
+  });
+}
+
+function kill(id) {
+  const entry = sessions.get(id);
+  if (!entry || entry.exitedAt) return false;
+  try { entry.pty.kill(); } catch {}
+  return true;
+}
+
+// Public summary for the frontend. Don't leak the pty / sockets objects.
+function describe(entry) {
+  return {
+    id: entry.id,
+    meta: entry.meta,
+    attached: entry.sockets.size,
+    exitedAt: entry.exitedAt,
+    exitCode: entry.exitCode,
+  };
+}
+
+function list() {
+  return Array.from(sessions.values()).map(describe);
+}
+
+function get(id) {
+  const e = sessions.get(id);
+  return e ? describe(e) : null;
+}
+
+function killAll() {
+  for (const e of sessions.values()) {
+    try { e.pty.kill(); } catch {}
+  }
+}
+
+module.exports = {
+  available: !!pty,
+  loadError,
+  spawn,
+  attach,
+  kill,
+  list,
+  get,
+  killAll,
+};

package/lib/workspace.js

@@ -191,10 +191,14 @@ async function cloneRepoInto({ workspacePath, repo, onProgress, onLine }) {
       `Target ${target} exists but is not a git clone — refusing to overwrite`
     );
   }
-  await runGit(['clone', '--progress', repo.url, repo.name], workspacePath, {
-    onProgress,
-    onLine,
-  });
+  // -c core.longpaths=true defeats Windows' default 260-char MAX_PATH so deep
+  // repo trees (e.g. nested doc / .github skill paths) can check out
+  // successfully. The flag only applies to this single git invocation.
+  await runGit(
+    ['-c', 'core.longpaths=true', 'clone', '--progress', repo.url, repo.name],
+    workspacePath,
+    { onProgress, onLine }
+  );
   return { repo: repo.name, action: 'cloned', path: target };
 }
 

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.5.0",
+  "version": "0.8.3",
   "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",
   "bin": {
-    "ccsm": "./server.js"
+    "ccsm": "./bin/ccsm.js"
   },
   "files": [
     "server.js",
+    "bin/",
     "lib/",
     "public/",
+    "scripts/",
     "README.md",
     "CLAUDE.md"
   ],
   "scripts": {
     "start": "node server.js",
-    "dev": "node --watch server.js"
+    "dev": "node --watch server.js",
+    "postinstall": "node scripts/install.js",
+    "preuninstall": "node scripts/uninstall.js"
   },
   "dependencies": {
     "express": "^4.21.2"
   },
+  "optionalDependencies": {
+    "node-pty": "^1.0.0",
+    "ws": "^8.18.0"
+  },
   "engines": {
     "node": ">=20"
   },

package/public/css/base.css

@@ -0,0 +1,82 @@
+/* Reset, root typography, global accents, scrollbars, inline code/kbd. */
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+[hidden] { display: none !important; }
+
+html {
+  /* Reserve the scrollbar lane so the layout never shifts horizontally
+     when content grows past one viewport. Both columns of scroll-gutter
+     stay symmetric (Firefox/Chromium both honor this). */
+  scrollbar-gutter: stable;
+}
+html, body {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 14px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection { background: var(--ink); color: var(--bg-elev); }
+
+code, .kbd {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  padding: 1px 5px;
+  background: var(--bg);
+  border: 1px solid var(--border-soft);
+  border-radius: 4px;
+  color: var(--ink-mid);
+}
+
+/* Fixed scrollbar look so it doesn't fade in/out or shift width on focus.
+   WebKit (Edge/Chrome): pseudo-elements. Firefox: scrollbar-* properties. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 8px;
+  border: 2px solid var(--bg);
+  /* Forced minimum height so dragging the thumb is always practical even on
+     very long pages. */
+  min-height: 32px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
+::-webkit-scrollbar-corner { background: transparent; }
+
+.row { display: flex; align-items: center; }
+.gap-row { gap: var(--s-3); flex-wrap: wrap; }
+.divider-dot { color: var(--ink-faint); padding: 0 var(--s-1); }
+
+.muted-text { color: var(--ink-muted); font-size: 12.5px; }
+.muted-text strong { color: var(--ink-mid); font-weight: 600; }
+
+.post-result {
+  margin-top: var(--s-3);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+
+.empty {
+  padding: var(--s-12) var(--s-6);
+  text-align: center;
+  font-size: 13px;
+  color: var(--ink-muted);
+}
+.empty code {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink-mid);
+  background: var(--bg);
+  padding: 1px 5px;
+  border-radius: 4px;
+}