@bakapiano/ccsm 0.17.0 → 0.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "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/css/feedback.css

@@ -302,82 +302,20 @@
   50%      { box-shadow: 0 0 0 4px rgba(26, 24, 21, 0); }
 }
 
-/* ── Health overlay · full-screen modal while backend is down ─────── */
-.health-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(26, 24, 21, 0.48);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: health-fade-in 0.2s ease-out;
-}
-@keyframes health-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-.health-card {
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 36px 44px;
-  max-width: 420px;
-  text-align: center;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
-  font-family: var(--body);
-}
+/* HealthOverlay reuses .offline-overlay / .offline-card above. The
+   only extra is the spinner shown during the "Checking…" phase — sized
+   to fill the .offline-brand slot in place of the BrandMark logo. */
 .health-spinner {
-  width: 22px;
-  height: 22px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent, #4a73a5);
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--border);
+  border-top-color: var(--ink);
   border-radius: 50%;
-  margin: 0 auto 14px;
   animation: health-spin 0.8s linear infinite;
 }
 @keyframes health-spin {
   to { transform: rotate(360deg); }
 }
-.health-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--red, #b73f3f);
-  margin: 0 auto 14px;
-}
-.health-title {
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: -0.005em;
-  color: var(--ink);
-  margin-bottom: 6px;
-}
-.health-meta {
-  font-size: 12.5px;
-  color: var(--ink-mid);
-  line-height: 1.4;
-  margin-bottom: 14px;
-}
-.health-start {
-  display: inline-block;
-  margin-top: 4px;
-  text-decoration: none;
-}
-.health-hint {
-  font-size: 11.5px;
-  color: var(--ink-muted);
-  margin-top: 14px;
-}
-.health-hint code {
-  font-family: var(--mono);
-  background: var(--bg);
-  padding: 1px 5px;
-  border-radius: 3px;
-  border: 1px solid var(--border);
-}
 
 /* ── Keybinding recorder modal ───────────────────────────────────── */
 .kbd-recorder-overlay {

package/public/js/components/App.js

@@ -3,7 +3,6 @@ import { activeTab } from '../state.js';
 import { Sidebar } from './Sidebar.js';
 import { Toast } from './Toast.js';
 import { DialogHost } from './DialogHost.js';
-import { OfflineBanner } from './OfflineBanner.js';
 import { HealthOverlay } from './HealthOverlay.js';
 import { SessionsPage } from '../pages/SessionsPage.js';
 import { LaunchPage } from '../pages/LaunchPage.js';
@@ -29,7 +28,6 @@ export function App() {
           ${tab === 'about'     ? html`<${Panel} name="about"><${AboutPage}     /></${Panel}>` : null}
         </div>
       </main>
-      <${OfflineBanner} />
       <${Toast} />
       <${DialogHost} />
       <${HealthOverlay} />

package/public/js/components/EntityFormModal.js

@@ -26,7 +26,19 @@ export function EntityFormModal({
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState(null);
 
-  const isReadOnly = (key) => readOnlyKeys.includes(key);
+  // A field is read-only if its key is in the static `readOnlyKeys`
+  // prop OR its own `readOnly` predicate (called with the current
+  // draft) returns true. The predicate lets a field react to other
+  // fields' values — e.g. lock newSessionIdArgs once a known `type`
+  // is picked, since those args are an integration contract with the
+  // upstream CLI, not a user knob.
+  const isReadOnly = (field) => {
+    if (readOnlyKeys.includes(field.key)) return true;
+    if (typeof field.readOnly === 'function') {
+      try { return !!field.readOnly(draft); } catch { return false; }
+    }
+    return !!field.readOnly;
+  };
 
   const submit = async (ev) => {
     ev?.preventDefault?.();
@@ -61,7 +73,7 @@ export function EntityFormModal({
             <span class="entity-field-label">${f.label}</span>
             ${f.type === 'select' ? html`
               <select class="input" value=${draft[f.key] || ''}
-                      disabled=${isReadOnly(f.key)}
+                      disabled=${isReadOnly(f)}
                       onChange=${(e) => {
                         const next = { ...draft, [f.key]: e.target.value };
                         const sideEffects = f.onChange?.(e.target.value, next);
@@ -71,13 +83,13 @@ export function EntityFormModal({
                   <option value=${opt.value}>${opt.label}</option>`)}
               </select>
             ` : f.type === 'iconRadio' ? html`
-              <div class=${`icon-radio${isReadOnly(f.key) ? ' is-disabled' : ''}`}>
+              <div class=${`icon-radio${isReadOnly(f) ? ' is-disabled' : ''}`}>
                 ${(f.options || []).map((opt) => html`
                   <button type="button" key=${opt.value}
                           class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
-                          disabled=${isReadOnly(f.key)}
+                          disabled=${isReadOnly(f)}
                           onClick=${() => {
-                            if (isReadOnly(f.key)) return;
+                            if (isReadOnly(f)) return;
                             const next = { ...draft, [f.key]: opt.value };
                             const sideEffects = f.onChange?.(opt.value, next);
                             setDraft(sideEffects ? { ...next, ...sideEffects } : next);
@@ -89,20 +101,20 @@ export function EntityFormModal({
             ` : f.type === 'checkbox' ? html`
               <span class="entity-checkbox-row">
                 <input type="checkbox" checked=${!!draft[f.key]}
-                       disabled=${isReadOnly(f.key)}
+                       disabled=${isReadOnly(f)}
                        onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
-                ${f.hint ? html`<span class="entity-field-hint">${f.hint}</span>` : null}
+                ${f.hint ? html`<span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
               </span>
             ` : html`
               <input type=${f.type || 'text'}
                      class=${`input${f.mono ? ' mono' : ''}`}
                      placeholder=${f.placeholder || ''}
                      value=${draft[f.key] || ''}
-                     readonly=${isReadOnly(f.key)}
+                     readonly=${isReadOnly(f)}
                      onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
-                     autoFocus=${f.autoFocus && !isReadOnly(f.key)} />`}
+                     autoFocus=${f.autoFocus && !isReadOnly(f)} />`}
             ${f.hint && f.type !== 'checkbox' ? html`
-              <span class="entity-field-hint">${f.hint}</span>` : null}
+              <span class="entity-field-hint">${typeof f.hint === 'function' ? f.hint(draft) : f.hint}</span>` : null}
           </label>`)}
         ${testResult ? html`
           <div class=${`entity-test-result ${testResult.ok ? 'is-ok' : 'is-fail'}`}>

package/public/js/components/HealthOverlay.js

@@ -20,6 +20,7 @@ import { html } from '../html.js';
 import { useEffect } from 'preact/hooks';
 import { serverHealth, hasBootedOnline } from '../state.js';
 import { pollHealth, refreshAll } from '../api.js';
+import { BrandMark } from '../icons.js';
 
 const THRESHOLD = 3;     // failures before we switch from "checking" to "not running"
 const FAST_POLL_MS = 1500;
@@ -28,11 +29,6 @@ export function HealthOverlay() {
   const h = serverHealth.value;
   const offline = h.state === 'offline';
   const count = h.failureCount || 0;
-
-  // Don't render the overlay during the very first connect attempt
-  // (before we've ever been online) — main.js shows nothing prominent
-  // there anyway, and the modal flashing on every page load is
-  // annoying. Only show after we've seen the backend at least once.
   const everSeen = hasBootedOnline.value;
 
   useEffect(() => {
@@ -41,9 +37,6 @@ export function HealthOverlay() {
     return () => clearInterval(id);
   }, [offline]);
 
-  // When the backend comes back online after we've shown the overlay,
-  // refresh all derived state once — sessions/folders/workspaces may
-  // have changed during the outage (post-restart, post-upgrade).
   useEffect(() => {
     if (!offline && everSeen) {
       refreshAll().catch(() => {});
@@ -54,27 +47,44 @@ export function HealthOverlay() {
 
   const showStart = count >= THRESHOLD;
 
+  // Reuses the .offline-overlay / .offline-card classes so the card
+  // layout (brand mark, big title, copy, primary action button,
+  // collapsible npm-install fallback) matches what the OfflineBanner
+  // used to render. HealthOverlay differs only in the two states:
+  // early polls show a spinner + "Checking…" instead of the static
+  // "Backend not running" card.
   return html`
-    <div class="health-overlay" role="dialog" aria-modal="true" aria-live="polite">
-      <div class="health-card">
+    <div class="offline-overlay" role="dialog" aria-modal="true" aria-live="polite">
+      <div class="offline-card">
+        <div class="offline-brand">${
+          showStart
+            ? html`<${BrandMark} />`
+            : html`<div class="health-spinner" aria-hidden="true"></div>`
+        }</div>
         ${!showStart ? html`
-          <div class="health-spinner" aria-hidden="true"></div>
-          <div class="health-title">Checking backend health…</div>
-          <div class="health-meta">
-            ${count === 0 ? 'Connecting…' : `${count} attempt${count > 1 ? 's' : ''}`}
-          </div>
+          <h1 class="offline-title">Checking backend health…</h1>
+          <p class="offline-copy">
+            ${count === 0 ? 'Probing localhost:7777.' : `${count} attempt${count > 1 ? 's' : ''}. Hang tight.`}
+          </p>
         ` : html`
-          <div class="health-dot" aria-hidden="true"></div>
-          <div class="health-title">Backend not running</div>
-          <div class="health-meta">
-            ${count} failed pings. Wake the backend manually below — we won't auto-restart.
-          </div>
-          <a class="action primary health-start" href="ccsm://start">
-            Start backend
-          </a>
-          <div class="health-hint">
-            Or run <code>ccsm</code> in a terminal.
+          <h1 class="offline-title">Backend not running</h1>
+          <p class="offline-copy">
+            ccsm's local backend isn't reachable. Wake it manually below — we won't
+            auto-restart. Windows may ask once for permission; tick <em>Always allow</em>
+            to silence future prompts.
+          </p>
+          <div class="offline-actions">
+            <a class="action primary big" href="ccsm://start">Start backend</a>
           </div>
+          <details class="offline-fallback">
+            <summary>Don't have ccsm installed?</summary>
+            <div class="offline-fallback-body">
+              <p>Install once via npm, then come back here:</p>
+              <pre><code>npm i -g @bakapiano/ccsm</code></pre>
+              <p>Or run a one-shot trial without installing:</p>
+              <pre><code>npx @bakapiano/ccsm</code></pre>
+            </div>
+          </details>
         `}
       </div>
     </div>`;

package/public/js/pages/ConfigurePage.js

@@ -42,30 +42,51 @@ function cliFieldsFor({ creating } = {}) {
       { value: 'copilot', label: 'GitHub Copilot', icon: html`<${IconCopilotColor} />` },
       { value: 'other',   label: 'Other',          icon: html`<${IconTerminal} />` },
     ],
-      // When user picks a type while creating, prefill command + resumeArgs.
-      // For edit mode we don't override what the user already has.
-      onChange: creating ? (v, next) => {
+      // Type-change side effects. For known types we force the
+      // integration args (newSessionIdArgs / resumeIdArgs) to the
+      // canonical template — those fields are locked anyway so
+      // there's no value in leaving stale strings around. For
+      // type='other' we leave existing args alone so the user can
+      // keep editing them. Name + command are only prefilled when
+      // creating (don't clobber a saved CLI's name on edit).
+      onChange: (v, next) => {
         const d = CLI_TYPE_DEFAULTS[v];
         if (!d) return null;
-        const patch = { resumeIdArgs: d.resumeIdArgs, newSessionIdArgs: d.newSessionIdArgs };
-        if (!next.command || !next.command.trim()) patch.command = d.command || '';
-        if (!next.name || !next.name.trim()) {
-          patch.name = v === 'claude' ? 'Claude Code'
-                     : v === 'codex' ? 'OpenAI Codex'
-                     : v === 'copilot' ? 'GitHub Copilot'
-                     : '';
+        const patch = {};
+        if (v !== 'other') {
+          patch.resumeIdArgs = d.resumeIdArgs;
+          patch.newSessionIdArgs = d.newSessionIdArgs;
+        }
+        if (creating) {
+          if (!next.command || !next.command.trim()) patch.command = d.command || '';
+          if (!next.name || !next.name.trim()) {
+            patch.name = v === 'claude' ? 'Claude Code'
+                       : v === 'codex' ? 'OpenAI Codex'
+                       : v === 'copilot' ? 'GitHub Copilot'
+                       : '';
+          }
         }
         return patch;
-      } : undefined,
+      },
     },
     { key: 'name', label: 'Name', placeholder: 'My CLI', required: true },
     { key: 'command', label: 'Command', mono: true, placeholder: 'ccp / claude / ...', required: true },
     { key: 'args', label: 'Args (space-separated)', mono: true, placeholder: '',
       hint: 'Used on every launch.' },
     { key: 'newSessionIdArgs', label: 'New session id args', mono: true, placeholder: '--session-id <id>',
-      hint: 'ccsm pre-generates a UUID and substitutes it for <id> on first launch — the upstream CLI session id is known immediately.' },
+      // Lock for known types — those args are an integration contract
+      // with the upstream CLI, not a user knob. Only Type=Other allows
+      // a custom value (for hand-rolled CLIs ccsm doesn't ship a
+      // template for).
+      readOnly: (d) => d.type && d.type !== 'other',
+      hint: (d) => d.type && d.type !== 'other'
+        ? `Locked to the canonical flags for ${d.type}. Change Type to "Other" to override.`
+        : 'ccsm pre-generates a UUID and substitutes it for <id> on first launch — the upstream CLI session id is known immediately.' },
     { key: 'resumeIdArgs', label: 'Resume by id args', mono: true, placeholder: '--resume <id>',
-      hint: 'Used on every resume. Substitutes <id> with the captured session UUID.' },
+      readOnly: (d) => d.type && d.type !== 'other',
+      hint: (d) => d.type && d.type !== 'other'
+        ? `Locked to the canonical flags for ${d.type}. Change Type to "Other" to override.`
+        : 'Used on every resume. Substitutes <id> with the captured session UUID.' },
     { key: 'shell', label: 'Shell', type: 'select', default: 'direct', options: [
       { value: 'direct', label: 'direct (real .exe / .cmd)' },
       { value: 'pwsh',   label: 'pwsh (PowerShell aliases & functions)' },

package/scripts/dev.js

@@ -38,6 +38,52 @@ if (!fs.existsSync(configPath)) {
   }, null, 2));
 }
 
+// Mirror pages-root assets into public/ so the dev server can serve
+// them at the URL paths the deployed site uses (manifest at
+// /manifest.webmanifest, setup page at /setup/). Both mirror files
+// are .gitignored — they exist only for local preview.
+//
+// The manifest is rewritten with a "ccsm-dev" identity so the PWA
+// installed from dev shows up separately in Chrome's installed-apps
+// list and Start Menu, instead of conflicting with the prod CCSM
+// install.
+const REPO_ROOT = path.join(__dirname, '..');
+const PAGES_ROOT = path.join(REPO_ROOT, 'pages-root');
+const PUBLIC_DIR = path.join(REPO_ROOT, 'public');
+
+function mirrorSetup() {
+  try {
+    const src = path.join(PAGES_ROOT, 'setup');
+    const dst = path.join(PUBLIC_DIR, 'setup');
+    fs.mkdirSync(dst, { recursive: true });
+    for (const f of fs.readdirSync(src)) {
+      fs.copyFileSync(path.join(src, f), path.join(dst, f));
+    }
+  } catch (e) { console.warn('[dev] setup mirror failed:', e.message); }
+}
+function writeDevManifest() {
+  try {
+    const src = path.join(PAGES_ROOT, 'manifest.webmanifest');
+    const m = JSON.parse(fs.readFileSync(src, 'utf8'));
+    m.id = '/?ccsm-dev';
+    m.name = 'CCSM dev';
+    m.short_name = 'CCSM dev';
+    // Dev runs at host root (localhost:7788/), so scope + start_url
+    // anchor at `/` not `./` (which would resolve relative to the
+    // manifest URL — same result here, but explicit is clearer).
+    m.scope = '/';
+    m.start_url = '/';
+    // Drop related_applications self-reference — its URL points at
+    // the prod GH Pages manifest, not this dev one. Leaving it in
+    // would let prod's getInstalledRelatedApps() detect dev installs
+    // as if they were prod, which is the opposite of what we want.
+    delete m.related_applications;
+    fs.writeFileSync(path.join(PUBLIC_DIR, 'manifest.webmanifest'), JSON.stringify(m, null, 2));
+  } catch (e) { console.warn('[dev] manifest mirror failed:', e.message); }
+}
+mirrorSetup();
+writeDevManifest();
+
 const env = {
   ...process.env,
   CCSM_HOME: DEV_HOME,

package/scripts/install.js

@@ -130,29 +130,24 @@ try {
   warn('the hosted frontend\'s "Start ccsm" button will not be able to launch the backend. You can still run `ccsm` manually in a terminal.');
 }
 
-// Auto-launch ccsm after install so the user lands directly in the app
-// without needing a second command. Detached + windowsHide so the npm
-// install command returns immediately. Skip if CCSM_NO_AUTOLAUNCH=1 is
-// set (CI, headless setups).
+// Open the hosted setup guide. The page walks the user through the
+// remaining one-time setup (allow ccsm:// protocol, firewall, install
+// as PWA) and Step 1's "Try ccsm://start" button doubles as ccsm
+// auto-launch — so we don't need a separate spawn here. Set
+// CCSM_NO_AUTOLAUNCH=1 to skip (CI, headless setups).
 if (process.env.CCSM_NO_AUTOLAUNCH !== '1') {
   try {
-    const { spawn } = require('node:child_process');
-    // Spawn `node bin/ccsm.js` directly — NOT ccsm.cmd. On Windows,
-    // child_process.spawn() with shell:false refuses .cmd files (throws
-    // EINVAL); using shell:true would flash a console window. Going
-    // through node + the JS entrypoint sidesteps both problems and
-    // matches exactly what the .cmd shim would have invoked.
-    const launcherJs = path.join(__dirname, '..', 'bin', 'ccsm.js');
-    const child = spawn(process.execPath, [launcherJs], {
-      detached: true,
-      stdio: 'ignore',
-      windowsHide: true,
-    });
-    child.unref();
-    log('launching ccsm now · check for the chromeless window');
+    // `start` on Windows opens the default browser without attaching a
+    // console. Run via cmd.exe /c since `start` is a cmd builtin.
+    require('node:child_process').spawn(
+      'cmd.exe',
+      ['/d', '/s', '/c', 'start', '', 'https://bakapiano.github.io/ccsm/setup/'],
+      { detached: true, stdio: 'ignore', windowsHide: true }
+    ).unref();
+    log('opened setup guide · https://bakapiano.github.io/ccsm/setup/');
     log('(set CCSM_NO_AUTOLAUNCH=1 to skip this on future installs)');
   } catch (e) {
-    warn(`auto-launch failed · ${e.message}`);
+    warn(`setup guide open failed · ${e.message}`);
     warn('run `ccsm` manually to start.');
   }
 }