@bakapiano/ccsm 0.17.2 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "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/pages/AboutPage.js

@@ -1,8 +1,6 @@
 import { html } from '../html.js';
-import { useEffect, useState } from 'preact/hooks';
 import { serverHealth, installPrompt, isInstalledPwa } from '../state.js';
 import { setToast } from '../toast.js';
-import { api } from '../api.js';
 import { Card } from '../components/Card.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { BrandMark, IconGithub, IconExternal } from '../icons.js';
@@ -43,119 +41,11 @@ function InstallCard() {
     </${Card}>`;
 }
 
-function UpgradeCard() {
-  const [info, setInfo] = useState(null);    // { current, latest, updateAvailable, fetchedAt, error? }
-  const [checking, setChecking] = useState(true);
-  const [upgrading, setUpgrading] = useState(false);
-
-  const refresh = async (force = false) => {
-    setChecking(true);
-    try {
-      const r = await api('GET', '/api/version' + (force ? '?refresh=1' : ''));
-      setInfo(r);
-    } catch (e) {
-      setInfo({ error: e.message });
-    } finally {
-      setChecking(false);
-    }
-  };
-  useEffect(() => { refresh(false); }, []);
-
-  const onUpgrade = async () => {
-    if (!info?.updateAvailable) return;
-    setUpgrading(true);
-    try {
-      const r = await api('POST', '/api/upgrade', { target: 'latest' });
-      setToast(`upgrading to v${info.latest} · backend will restart`);
-      if (r?.helperUrl) {
-        setTimeout(() => { location.href = r.helperUrl; }, 300);
-      } else if (r?.closeFrontend) {
-        setTimeout(() => { try { window.close(); } catch {} }, 400);
-      }
-    } catch (e) {
-      setUpgrading(false);
-      setToast(e.message, 'error');
-    }
-  };
-
-  // Dev-only sandbox test path: reinstall the SAME version into a
-  // throwaway prefix under ~/.ccsm-dev/test-install. Exercises the
-  // whole helper UI + SSE + lockfile flow without touching the user's
-  // global install. respawn=false keeps the helper showing "done"
-  // until it self-exits.
-  const onTestUpgrade = async () => {
-    if (!info?.current) return;
-    setUpgrading(true);
-    try {
-      const r = await api('POST', '/api/upgrade', {
-        target: info.current,
-        installPrefix: 'C:\\Users\\jiannanli\\.ccsm-dev\\test-install',
-        respawn: false,
-      });
-      setToast(`test upgrade · reinstalling v${info.current} to sandbox`);
-      if (r?.helperUrl) {
-        setTimeout(() => { location.href = r.helperUrl; }, 300);
-      }
-    } catch (e) {
-      setUpgrading(false);
-      setToast(e.message, 'error');
-    }
-  };
-
-  const current = info?.current || serverHealth.value.version || '';
-  const latest  = info?.latest;
-  const updateAvailable = !!info?.updateAvailable;
-
-  return html`
-    <${Card} title="Version">
-      <div class="about-version-row">
-        <div>
-          <div class="about-version-line">
-            Installed · <span class="mono">v${current || '?'}</span>
-          </div>
-          ${latest && !updateAvailable ? html`
-            <div class="muted-text" style="margin-top:4px">You're on the latest release.</div>
-          ` : null}
-          ${updateAvailable ? html`
-            <div class="about-update-line">
-              Update available · <span class="mono">v${latest}</span>
-            </div>
-          ` : null}
-          ${info?.error ? html`
-            <div class="muted-text" style="margin-top:4px">Couldn't reach npm registry.</div>
-          ` : null}
-        </div>
-        <div class="about-version-actions">
-          <button class="action subtle" onClick=${() => refresh(true)} disabled=${checking || upgrading}>
-            ${checking ? 'Checking…' : 'Check'}
-          </button>
-          ${updateAvailable ? html`
-            <button class="action primary" onClick=${onUpgrade} disabled=${upgrading}>
-              ${upgrading ? 'Upgrading…' : `Upgrade to v${latest}`}
-            </button>
-          ` : null}
-          ${info?.devMode && !updateAvailable ? html`
-            <button class="action subtle" onClick=${onTestUpgrade} disabled=${upgrading}
-                    title="Reinstall to a sandbox prefix to exercise the updater UI without touching prod">
-              ${upgrading ? 'Testing…' : 'Test upgrade flow'}
-            </button>
-          ` : null}
-        </div>
-      </div>
-      ${upgrading ? html`
-        <p class="muted-text" style="margin-top:var(--s-3)">
-          Running <code>npm i -g @bakapiano/ccsm@latest</code>. The backend will restart automatically — you'll see the "Backend not running" screen briefly.
-        </p>
-      ` : null}
-    </${Card}>`;
-}
-
 export function AboutPage() {
   const version = serverHealth.value.version;
 
   return html`
     <${PageTitleBar} title="About" />
-    <${UpgradeCard} />
     <${InstallCard} />
     <${Card} title="ccsm">
       <div class="about-block">
@@ -193,5 +83,8 @@ export function AboutPage() {
           <dd>MIT</dd>
         </dl>
       </div>
-    </${Card}>`;
+    </${Card}>
+    <p class="muted-text" style="margin-top: var(--s-3); text-align:center;">
+      Looking for upgrade controls? They moved to <strong>Settings → General → Version</strong>.
+    </p>`;
 }

package/public/js/pages/ConfigurePage.js

@@ -5,7 +5,7 @@
 import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import {
-  config, configDirty, accentColor, folders, workspaces,
+  config, configDirty, accentColor, folders, workspaces, serverHealth,
   setAccentColor, ACCENT_DEFAULT,
 } from '../state.js';
 import {
@@ -169,6 +169,10 @@ export function ConfigurePage() {
           <span class="label">Theme accent</span>
           <${AccentPicker} />
         </div>
+        <div class="field">
+          <span class="label">Version</span>
+          <${VersionField} />
+        </div>
         <div class="field">
           <span class="label">Backend</span>
           <${RestartButton} />
@@ -450,6 +454,67 @@ const PRESETS = [
   { name: 'Crimson',       hex: '#b73f3f' },
 ];
 
+function VersionField() {
+  const [info, setInfo] = useState(null);
+  const [checking, setChecking] = useState(true);
+  const [upgrading, setUpgrading] = useState(false);
+
+  const refresh = async (force = false) => {
+    setChecking(true);
+    try {
+      const r = await api('GET', '/api/version' + (force ? '?refresh=1' : ''));
+      setInfo(r);
+    } catch (e) {
+      setInfo({ error: e.message });
+    } finally {
+      setChecking(false);
+    }
+  };
+  useEffect(() => { refresh(false); }, []);
+
+  const onUpgrade = async () => {
+    if (!info?.updateAvailable) return;
+    setUpgrading(true);
+    try {
+      const r = await api('POST', '/api/upgrade', { target: 'latest' });
+      setToast(`upgrading to v${info.latest} · backend will restart`);
+      if (r?.helperUrl) {
+        setTimeout(() => { location.href = r.helperUrl; }, 300);
+      } else if (r?.closeFrontend) {
+        setTimeout(() => { try { window.close(); } catch {} }, 400);
+      }
+    } catch (e) {
+      setUpgrading(false);
+      setToast(e.message, 'error');
+    }
+  };
+
+  const current = info?.current || serverHealth.value.version || '';
+  const latest  = info?.latest;
+  const updateAvailable = !!info?.updateAvailable;
+
+  const hint = info?.error
+    ? "Couldn't reach npm registry."
+    : updateAvailable ? `Update available · v${latest}`
+    : latest ? "You're on the latest release."
+    : 'Checks npm registry (cached 30 min).';
+
+  return html`
+    <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+      <span class="mono">v${current || '?'}</span>
+      ${updateAvailable ? html`
+        <button class="action primary" disabled=${upgrading} onClick=${onUpgrade}>
+          ${upgrading ? 'Upgrading…' : `Upgrade to v${latest}`}
+        </button>
+      ` : null}
+      <button class="action" disabled=${checking || upgrading} onClick=${() => refresh(true)}>
+        ${checking ? 'Checking…' : 'Check for updates'}
+      </button>
+      <span class="hint">${hint}</span>
+    </div>
+  `;
+}
+
 function RestartButton() {
   const [busy, setBusy] = useState(false);
   const onClick = async () => {

package/scripts/upgrade-helper.js

@@ -537,6 +537,12 @@ httpServer.listen(HELPER_PORT, '127.0.0.1', () => {
   setPhase('installing');
   pushLine('info', `Running: npm i -g @bakapiano/ccsm@${target}${installPrefix ? ` --prefix=${installPrefix}` : ''}`);
 
+  // Extra settle: gracefulShutdown only waits for the server pid, but
+  // node-pty grandchildren (winpty-agent / conpty) need a beat longer
+  // to release file locks on node_modules/node-pty/build/Release/*.node.
+  // Without this beat, npm hits EBUSY/EPERM renaming the package dir.
+  await sleep(2000);
+
   const isWin = process.platform === 'win32';
   const arg = `@bakapiano/ccsm@${target}`;
   const npmArgs = ['i', '-g'];
@@ -555,26 +561,58 @@ httpServer.listen(HELPER_PORT, '127.0.0.1', () => {
     exeArgs = npmArgs;
   }
 
-  const npmExit = await new Promise((resolve) => {
-    const child = spawn(exe, exeArgs, { windowsHide: true });
-    const pipe = (stream, label) => {
-      let leftover = '';
-      stream.on('data', (chunk) => {
-        const text = leftover + chunk.toString();
-        const lines = text.split(/\r?\n/);
-        leftover = lines.pop() || '';
-        for (const line of lines) if (line) pushLine(label, line);
+  // Postinstall opens the hosted setup guide by default — fine on a
+  // first npm i, but during an in-app upgrade the user is already in
+  // the updater UI and a fresh tab to /setup/ is just noise.
+  const npmEnv = { ...process.env, CCSM_NO_AUTOLAUNCH: '1' };
+
+  const LOCK_PATTERN = /\b(EBUSY|EPERM|ENOTEMPTY|EEXIST|ELOCKED|locked|in use|cannot rename|operation not permitted)\b/i;
+
+  async function runNpmOnce() {
+    let sawLockError = false;
+    const exit = await new Promise((resolve) => {
+      const child = spawn(exe, exeArgs, { windowsHide: true, env: npmEnv });
+      const pipe = (stream, label) => {
+        let leftover = '';
+        stream.on('data', (chunk) => {
+          const text = leftover + chunk.toString();
+          const lines = text.split(/\r?\n/);
+          leftover = lines.pop() || '';
+          for (const line of lines) {
+            if (!line) continue;
+            if (LOCK_PATTERN.test(line)) sawLockError = true;
+            pushLine(label, line);
+          }
+        });
+        stream.on('end', () => { if (leftover) pushLine(label, leftover); });
+      };
+      pipe(child.stdout, 'stdout');
+      pipe(child.stderr, 'stderr');
+      child.on('error', (e) => {
+        pushLine('stderr', `spawn error: ${e.message}`);
+        resolve(-1);
       });
-      stream.on('end', () => { if (leftover) pushLine(label, leftover); });
-    };
-    pipe(child.stdout, 'stdout');
-    pipe(child.stderr, 'stderr');
-    child.on('error', (e) => {
-      pushLine('stderr', `spawn error: ${e.message}`);
-      resolve(-1);
+      child.on('exit', (code) => resolve(code));
     });
-    child.on('exit', (code) => resolve(code));
-  });
+    return { exit, sawLockError };
+  }
+
+  let npmExit = -1;
+  // Up to 3 attempts: original + 2 retries with growing backoff. Only
+  // retry when the failure looks like a file-lock issue from straggling
+  // child handles, never on a clean nonzero exit (auth, 404, etc).
+  const backoffs = [3000, 6000];
+  let attempt = 0;
+  while (true) {
+    attempt++;
+    const { exit, sawLockError } = await runNpmOnce();
+    npmExit = exit;
+    if (exit === 0) break;
+    if (!sawLockError || attempt > backoffs.length) break;
+    const wait = backoffs[attempt - 1];
+    pushLine('info', `npm failed with what looks like a file lock; retrying in ${Math.round(wait/1000)}s (attempt ${attempt + 1})…`);
+    await sleep(wait);
+  }
 
   if (npmExit !== 0) {
     errorMsg = `npm exited with code ${npmExit}`;