claude-code-hub 1.0.2 → 1.1.0

package/lib/update-check.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const REGISTRY_URL = 'https://registry.npmjs.org/claude-code-hub/latest';
+const RELEASE_URL = 'https://github.com/NikiforovAll/claude-code-hub/releases/tag/v';
+const TIMEOUT_MS = 3000;
+const TTL_MS = 12 * 60 * 60 * 1000;
+
+function parse(v) {
+  const m = /^(\d+)\.(\d+)\.(\d+)(-.+)?$/.exec(String(v));
+  return m && { nums: m.slice(1, 4).map(Number), pre: Boolean(m[4]) };
+}
+
+// A stable release is newer than its own prereleases. A prerelease is never offered.
+function isNewer(latest, current) {
+  const a = parse(latest);
+  const b = parse(current);
+  if (!a || !b || a.pre) return false;
+  for (let i = 0; i < 3; i++) if (a.nums[i] !== b.nums[i]) return a.nums[i] > b.nums[i];
+  return b.pre;
+}
+
+async function fetchLatest() {
+  const res = await fetch(REGISTRY_URL, { signal: AbortSignal.timeout(TIMEOUT_MS) });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return (await res.json()).version;
+}
+
+function createUpdateCheck({ current, enabled = true, fetch = fetchLatest, now = Date.now, ttlMs = TTL_MS }) {
+  let latest = null;
+  let checkedAt = -Infinity;
+  let inflight = null;
+
+  function refresh() {
+    if (!enabled) return Promise.resolve();
+    if (inflight) return inflight;
+    checkedAt = now();
+    inflight = (async () => {
+      latest = await fetch();
+    })()
+      .catch(() => {})
+      .finally(() => {
+        inflight = null;
+      });
+    return inflight;
+  }
+
+  async function update() {
+    if (now() - checkedAt >= ttlMs) refresh();
+    await inflight;
+    return isNewer(latest, current) ? { latest, url: RELEASE_URL + latest } : null;
+  }
+
+  return { refresh, update };
+}
+
+module.exports = { createUpdateCheck, isNewer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -45,10 +45,10 @@
   },
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
-    "claude-code-cost": "1.0.0",
-    "claude-code-kanban": "5.1.1",
-    "claude-code-marketplace": "1.0.0",
-    "claude-code-memory-explorer": "1.0.0",
+    "claude-code-cost": "1.1.0",
+    "claude-code-kanban": "5.2.0",
+    "claude-code-marketplace": "1.1.0",
+    "claude-code-memory-explorer": "1.1.0",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/public/app.js

@@ -229,6 +229,80 @@ async function init() {
   listenKeys();
   bindPalette();
   registerSW();
+  bindErrorToast();
+  showUpdateToast();
+}
+
+// One key, overwritten by each dismissal: a dismissed version stays hidden until a newer one ships.
+const UPDATE_DISMISSED_KEY = 'hub-update-dismissed';
+const UPDATE_TOAST_MS = 10_000;
+
+async function showUpdateToast() {
+  let info;
+  try {
+    info = await sendJson('GET', '/api/update');
+  } catch {
+    return;
+  }
+  const latest = info.update?.latest;
+  let dismissed = null;
+  try {
+    dismissed = localStorage.getItem(UPDATE_DISMISSED_KEY);
+  } catch {}
+  if (!latest || latest === dismissed) return;
+  const toast = document.getElementById('update-toast');
+  document.getElementById('update-latest').textContent = latest;
+  document.getElementById('update-current').textContent = info.version;
+  document.getElementById('update-notes').href = info.update.url;
+  let timer = 0;
+  const hide = () => {
+    clearTimeout(timer);
+    toast.classList.add('leaving');
+    setTimeout(() => (toast.hidden = true), 200);
+  };
+  const arm = () => (timer = setTimeout(hide, UPDATE_TOAST_MS));
+  toast.addEventListener('mouseenter', () => clearTimeout(timer));
+  toast.addEventListener('mouseleave', arm);
+  document.getElementById('update-close').addEventListener('click', hide);
+  document.getElementById('update-skip').addEventListener('click', () => {
+    try {
+      localStorage.setItem(UPDATE_DISMISSED_KEY, latest);
+    } catch {}
+    hide();
+  });
+  toast.hidden = false;
+  arm();
+}
+
+const ERROR_TOAST_MS = 8_000;
+let errorToastTimer = 0;
+
+function hideErrorToast() {
+  clearTimeout(errorToastTimer);
+  const toast = document.getElementById('error-toast');
+  toast.classList.add('leaving');
+  setTimeout(() => (toast.hidden = true), 200);
+}
+
+// A 401 means the hub_token cookie no longer matches the token file. Opening /?token=… sets a new
+// cookie; reloading lands on the locked page, where the token can be pasted instead.
+function showErrorToast(action, err) {
+  const unauthorized = err.status === 401;
+  document.getElementById('error-title').textContent = unauthorized ? `${action}: hub token rejected` : action;
+  document.getElementById('error-detail').textContent = unauthorized
+    ? `This browser has an old hub token. Open the link the hub printed in the terminal (${location.origin}/?token=…) to renew it.`
+    : err.message;
+  document.getElementById('error-actions').hidden = !unauthorized;
+  const toast = document.getElementById('error-toast');
+  toast.classList.remove('leaving');
+  toast.hidden = false;
+  clearTimeout(errorToastTimer);
+  if (!unauthorized) errorToastTimer = setTimeout(hideErrorToast, ERROR_TOAST_MS);
+}
+
+function bindErrorToast() {
+  document.getElementById('error-close').addEventListener('click', hideErrorToast);
+  document.getElementById('error-reload').addEventListener('click', () => location.reload());
 }
 
 // The hub has no visible chrome, so the window/tab title is the only place the active config dir
@@ -680,7 +754,7 @@ async function removeConfigDir(dirPath) {
   try {
     palette.configDirs = await sendJson('DELETE', '/api/config-dirs', { path: dirPath });
   } catch (err) {
-    console.warn('remove config dir failed:', err.message);
+    showErrorToast('Could not remove config dir', err);
     return;
   }
   if (dirPath in themeState.colorThemes) {
@@ -951,7 +1025,10 @@ function openPalette(mode) {
     .then(() => {
       if (palette.open && palette.mode === mode) renderPalette();
     })
-    .catch((err) => console.warn(`${mode} list unavailable:`, err.message));
+    .catch((err) => {
+      if (err.status === 401) showErrorToast('Could not load the list', err);
+      else console.warn(`${mode} list unavailable:`, err.message);
+    });
 }
 
 function closePalette() {
@@ -1015,7 +1092,7 @@ async function commitConfigDir(row) {
     try {
       target = (await withPaletteBusy(() => sendJson('POST', '/api/config-dirs', { path: row.path }))).path;
     } catch (err) {
-      console.warn('add config dir failed:', err.message);
+      showErrorToast('Could not add config dir', err);
       return;
     }
   }
@@ -1033,7 +1110,7 @@ async function commitConfigDir(row) {
     applyHubTheme();
     reloadIframes();
   } catch (err) {
-    console.warn('config dir switch failed:', err.message);
+    showErrorToast('Could not switch config dir', err);
     hideLoading();
   }
 }

package/public/index.html

@@ -322,6 +322,61 @@
     }
 
     .palette-hint:empty { display: none; }
+
+    .update-toast {
+      position: fixed;
+      right: 16px;
+      bottom: 16px;
+      z-index: 15;
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      width: min(440px, calc(100vw - 32px));
+      padding: 16px 18px;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--accent);
+      border-radius: 8px;
+      box-shadow: 0 10px 32px var(--shadow);
+      color: var(--text);
+      font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .update-toast[hidden] { display: none; }
+    .update-toast.leaving { opacity: 0; transform: translateY(8px); }
+    .update-toast-body { flex: 1; min-width: 0; }
+    .update-toast-title { font-weight: 600; font-size: 15px; }
+    .update-toast-meta { color: var(--text-dim); }
+    .update-toast code { display: block; margin-top: 8px; color: var(--accent); user-select: all; }
+    .update-toast a { color: var(--accent); }
+    .update-toast-actions { margin-top: 12px; }
+
+    .update-toast-skip {
+      padding: 5px 12px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--text-dim);
+      font: inherit;
+      font-size: 13px;
+      cursor: pointer;
+    }
+
+    .update-toast-skip:hover { color: var(--text); background: var(--surface-hover); }
+
+    .update-toast-close {
+      border: none;
+      background: none;
+      color: var(--text-dim);
+      font: inherit;
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+    }
+
+    .update-toast-close:hover { color: var(--text); }
+    .error-toast { z-index: 25; border-left-color: #e5484d; }
   </style>
 </head>
 <body>
@@ -382,6 +437,29 @@
     </div>
   </div>
 
+  <div class="update-toast" id="update-toast" role="status" hidden>
+    <div class="update-toast-body">
+      <div class="update-toast-title">Claude Code Hub <span id="update-latest"></span> is available</div>
+      <div class="update-toast-meta">You have <span id="update-current"></span> · <a id="update-notes" target="_blank" rel="noopener">Release notes</a></div>
+      <code>npm i -g claude-code-hub@latest</code>
+      <div class="update-toast-actions">
+        <button class="update-toast-skip" id="update-skip" type="button">Skip this version</button>
+      </div>
+    </div>
+    <button class="update-toast-close" id="update-close" type="button" aria-label="Close">×</button>
+  </div>
+
+  <div class="update-toast error-toast" id="error-toast" role="alert" hidden>
+    <div class="update-toast-body">
+      <div class="update-toast-title" id="error-title"></div>
+      <div class="update-toast-meta" id="error-detail"></div>
+      <div class="update-toast-actions" id="error-actions" hidden>
+        <button class="update-toast-skip" id="error-reload" type="button">Paste token instead</button>
+      </div>
+    </div>
+    <button class="update-toast-close" id="error-close" type="button" aria-label="Close">×</button>
+  </div>
+
   <script src="/app.js"></script>
 </body>
 </html>

package/server.js

@@ -15,6 +15,8 @@ const { createNetGuard, KEEP_ALIVE_MS } = require('./lib/net-guard');
 const { ping } = require('./lib/ping');
 const { killChild } = require('./lib/kill-child');
 const { readRegistry, themeConfig } = require('./lib/themes');
+const { createUpdateCheck } = require('./lib/update-check');
+const { version: HUB_VERSION } = require('./package.json');
 
 function getArg(name) {
   const idx = process.argv.findIndex((a) => a.startsWith(`--${name}`));
@@ -842,6 +844,16 @@ function appsConfig() {
   );
 }
 
+// A git checkout updates through git, not npm.
+const updateCheck = createUpdateCheck({
+  current: HUB_VERSION,
+  enabled: !process.env.CLAUDE_HUB_NO_UPDATE_CHECK && !fs.existsSync(path.join(__dirname, '.git')),
+});
+
+app.get('/api/update', async (_req, res) => {
+  res.json({ version: HUB_VERSION, update: await updateCheck.update() });
+});
+
 app.get('/api/config', (_req, res) => {
   res.json({
     ...themeConfig(THEME_REGISTRY, { userFile: USER_THEMES_FILE }),
@@ -993,6 +1005,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 const onReady = (actual) => {
   hubPort = actual;
   ensurePool(hubConfig.activeConfigDir);
+  updateCheck.refresh();
   printBanner(actual);
   if (process.argv.includes('--open')) {
     import('open').then((m) => m.default(accessUrl(actual)));