@bakapiano/ccsm 0.15.4 → 0.16.0

package/CLAUDE.md

@@ -445,6 +445,13 @@ achieves the same thing without leaving the browser.
 
 ### Release process
 
+**Do not release or push without explicit permission from the user.**
+This means: don't run `git push`, don't run `npm version`, don't run
+`gh release edit --draft=false`, don't commit + tag in one breath
+because "the fix is ready". Wait for the user to say so. The instinct
+to ship is wrong here — a half-baked release on the public npm registry
+is much worse than a few minutes of waiting.
+
 Three artifacts ship per release: a git tag, a GitHub Release, and an
 npm publish. The whole thing is CI-driven — you never `npm publish`
 locally — but it requires you to drive three steps in order:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.15.4",
+  "version": "0.16.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",

package/public/js/keybindings.js

@@ -0,0 +1,152 @@
+// Global keyboard shortcuts.
+//
+// Stored in localStorage under `ccsm.keybindings` as `{ action: combo }`.
+// Combos are strings like "Ctrl+Alt+ArrowDown" — order doesn't matter
+// at parse time but we normalize when emitting so the UI shows a stable
+// representation.
+//
+// The terminal grabs most keys for itself; we use Ctrl+Alt as the
+// default modifier set because xterm.js / claude / pwsh basically
+// never bind those combos.
+
+import { signal } from '@preact/signals';
+import { activeSessionId, sessions, folders, sessionsByFolder, selectSession } from './state.js';
+
+export const ACTIONS = {
+  'session-next': { label: 'Next session', defaultCombo: 'Ctrl+Alt+ArrowDown' },
+  'session-prev': { label: 'Previous session', defaultCombo: 'Ctrl+Alt+ArrowUp' },
+};
+
+const LS_KEY = 'ccsm.keybindings';
+
+function defaults() {
+  const out = {};
+  for (const [id, def] of Object.entries(ACTIONS)) out[id] = def.defaultCombo;
+  return out;
+}
+
+function load() {
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    if (!raw) return defaults();
+    const saved = JSON.parse(raw);
+    return { ...defaults(), ...saved };
+  } catch { return defaults(); }
+}
+
+export const keybindings = signal(load());
+
+export function setBinding(actionId, combo) {
+  if (!ACTIONS[actionId]) return;
+  const next = { ...keybindings.value, [actionId]: combo };
+  keybindings.value = next;
+  try { localStorage.setItem(LS_KEY, JSON.stringify(next)); } catch {}
+}
+
+export function resetBinding(actionId) {
+  const def = ACTIONS[actionId]?.defaultCombo;
+  if (!def) return;
+  setBinding(actionId, def);
+}
+
+// Normalize a keydown event into a canonical combo string. Order:
+// Ctrl, Alt, Shift, Meta — then the key. Letter keys are uppercased.
+// Arrow keys retain "ArrowUp" / "ArrowDown" form.
+export function comboFromEvent(ev) {
+  if (!ev) return '';
+  const parts = [];
+  if (ev.ctrlKey) parts.push('Ctrl');
+  if (ev.altKey) parts.push('Alt');
+  if (ev.shiftKey) parts.push('Shift');
+  if (ev.metaKey) parts.push('Meta');
+  // Skip pure-modifier keydowns — those happen when the user presses
+  // just Ctrl/Alt/Shift/Meta on its own and we'd record a useless
+  // "Ctrl" combo. The recorder UI uses this; the matcher doesn't.
+  if (['Control', 'Alt', 'Shift', 'Meta'].includes(ev.key)) return '';
+  let key = ev.key;
+  if (/^[a-z]$/.test(key)) key = key.toUpperCase();
+  parts.push(key);
+  return parts.join('+');
+}
+
+// Build a flat list of sessions in the order they appear in the
+// sidebar — folder order first, then sessions within each folder,
+// then the unsorted bucket. Mirrors Sidebar's render order so
+// Next/Prev moves "down then up" visually.
+function flatSidebarOrder() {
+  const grouped = sessionsByFolder.value;
+  const out = [];
+  for (const f of folders.value) {
+    const list = grouped.get(f.id) || [];
+    for (const s of list) out.push(s.id);
+  }
+  for (const s of grouped.get(null) || []) out.push(s.id);
+  return out;
+}
+
+function moveSelection(delta) {
+  const ids = flatSidebarOrder();
+  if (ids.length === 0) return;
+  const cur = activeSessionId.value;
+  const idx = cur ? ids.indexOf(cur) : -1;
+  let next;
+  if (idx < 0) {
+    next = delta > 0 ? ids[0] : ids[ids.length - 1];
+  } else {
+    next = ids[(idx + delta + ids.length) % ids.length];
+  }
+  if (next) selectSession(next);
+}
+
+const HANDLERS = {
+  'session-next': () => moveSelection(+1),
+  'session-prev': () => moveSelection(-1),
+};
+
+// Should we suppress shortcut handling because the user is typing into
+// an input / textarea? Terminal's xterm hidden textarea counts too,
+// but we deliberately let our Ctrl+Alt combos through there because
+// the terminal child process never uses them.
+function shouldSuppress(target) {
+  if (!target) return false;
+  const tag = (target.tagName || '').toLowerCase();
+  if (tag === 'input' || tag === 'textarea') {
+    // Exception: xterm's helper textarea is a hidden input — we want
+    // shortcuts to fire there.
+    if (target.classList?.contains('xterm-helper-textarea')) return false;
+    return true;
+  }
+  if (target.isContentEditable) return true;
+  return false;
+}
+
+let installed = false;
+export function installGlobalKeybindings() {
+  if (installed) return;
+  installed = true;
+  window.addEventListener('keydown', (ev) => {
+    if (shouldSuppress(ev.target)) return;
+    const combo = comboFromEvent(ev);
+    if (!combo) return;
+    const map = keybindings.value;
+    for (const [action, expected] of Object.entries(map)) {
+      if (expected === combo && HANDLERS[action]) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        HANDLERS[action]();
+        return;
+      }
+    }
+  }, true);
+}
+
+// Pretty-print a combo for display in Settings. Replace verbose key
+// names with shorter symbols where it helps.
+export function formatCombo(combo) {
+  if (!combo) return '(unset)';
+  return combo
+    .replace(/ArrowUp/g, '↑')
+    .replace(/ArrowDown/g, '↓')
+    .replace(/ArrowLeft/g, '←')
+    .replace(/ArrowRight/g, '→');
+}

package/public/js/main.js

@@ -9,8 +9,10 @@ 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';
+import { installGlobalKeybindings } from './keybindings.js';
 
 loadPersisted();
+installGlobalKeybindings();
 // Window/tab title pinned to "CCSM". A MutationObserver guards against
 // Chromium standalone builds that occasionally try to inject the URL
 // into the title bar.

package/public/js/pages/ConfigurePage.js

@@ -17,11 +17,12 @@ import {
 } from '../api.js';
 import { setToast } from '../toast.js';
 import { ccsmConfirm } from '../dialog.js';
+import { keybindings, setBinding, resetBinding, ACTIONS, formatCombo, comboFromEvent } from '../keybindings.js';
 import { Card } from '../components/Card.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { EntityFormModal } from '../components/EntityFormModal.js';
 import { useDragSort } from '../components/useDragSort.js';
-import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
+import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
 
 // Type → smart defaults. Choosing a type in the form auto-fills resumeArgs
 // (and command if blank) so users don't need to remember the per-CLI flag.
@@ -251,6 +252,11 @@ export function ConfigurePage() {
       <${WorkspaceList} />
     </${Section}>
 
+    <${Section} title="Keyboard shortcuts"
+                meta="Click a binding to record a new combo. Press Esc to cancel.">
+      <${KeybindingsList} />
+    </${Section}>
+
     </div>
 
     ${edit?.kind === 'cli-new' ? html`
@@ -511,3 +517,73 @@ function AccentPicker() {
         </div>` : null}
     </div>`;
 }
+
+
+// ── Keyboard shortcuts ───────────────────────────────────────────────
+const ACTION_ICONS = {
+  'session-next': IconChevronDown,
+  'session-prev': IconChevronUp,
+};
+
+function KeybindingsList() {
+  const map = keybindings.value;
+  const [recording, setRecording] = useState(null); // actionId or null
+
+  // While recording, swallow every keydown globally and feed it into
+  // comboFromEvent. We use the capture phase so the global shortcut
+  // listener never sees the keys and never fires actions mid-record.
+  useEffect(() => {
+    if (!recording) return;
+    const onKey = (ev) => {
+      if (ev.key === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
+        setRecording(null);
+        return;
+      }
+      const combo = comboFromEvent(ev);
+      if (!combo) return; // pure-modifier keydown, keep listening
+      ev.preventDefault();
+      ev.stopPropagation();
+      setBinding(recording, combo);
+      setRecording(null);
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [recording]);
+
+  return html`
+    <div class="entity-list">
+      ${Object.entries(ACTIONS).map(([id, def]) => {
+        const combo = map[id];
+        const isRec = recording === id;
+        const isCustom = combo !== def.defaultCombo;
+        const Icon = ACTION_ICONS[id] || IconTerminal;
+        const badges = [{
+          label: isRec ? 'press keys…' : formatCombo(combo),
+          tone: isRec ? 'warn' : 'accent',
+        }];
+        return html`
+          <div class="entity-row" key=${id}>
+            <span class="entity-row-icon"><${Icon} /></span>
+            <span class="entity-row-main">
+              <span class="entity-row-primary">
+                ${def.label}
+                ${badges.map((b) => html`
+                  <span class=${`entity-row-badge tone-${b.tone}`}>${b.label}</span>`)}
+              </span>
+              <span class="entity-row-secondary">
+                <span class="mono">${id}</span> · default <span class="mono">${formatCombo(def.defaultCombo)}</span>
+              </span>
+            </span>
+            <span class="entity-row-actions">
+              <button class="entity-row-action" title=${isRec ? 'Cancel (Esc)' : 'Rebind'}
+                      onClick=${() => setRecording(isRec ? null : id)}><${IconPencil} /></button>
+              ${isCustom ? html`
+                <button class="entity-row-action" title="Reset to default"
+                        onClick=${() => resetBinding(id)}><${IconRefresh} /></button>` : null}
+            </span>
+          </div>`;
+      })}
+    </div>`;
+}