@bakapiano/ccsm 0.17.3 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.17.3",
+  "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 () => {