claude-code-hub 1.3.2 → 1.3.4

package/lib/port-health.js

@@ -0,0 +1,34 @@
+'use strict';
+
+// Some loopback ports on Windows answer with TCP retransmit delays (0.3 s, 0.9 s, 2 s, 4.5 s ...)
+// while the app behind them is idle; a restart moves the app to a fresh port and the delays go.
+// A probe pairs an HTTP request with an IPC ping sent at the same moment: a slow HTTP answer with a
+// fast pong is the port, both slow is a busy app.
+const SLOW_HTTP_MS = 300;
+const FAST_IPC_MS = 100;
+const STRIKES = 3;
+const WINDOW_MS = 5 * 60_000;
+
+// Keyed by the child process: a restart brings a new child on a new port, so its strikes start over.
+function createPortHealth({ now = Date.now } = {}) {
+  const strikesOf = new WeakMap();
+
+  function recent(child) {
+    const since = now() - WINDOW_MS;
+    return (strikesOf.get(child) ?? []).filter((s) => s.at >= since);
+  }
+
+  function record(child, { httpMs, ipcMs }) {
+    if (httpMs < SLOW_HTTP_MS || ipcMs == null || ipcMs >= FAST_IPC_MS) return;
+    strikesOf.set(child, [...recent(child), { at: now(), ms: Math.round(httpMs) }]);
+  }
+
+  function flagged(child) {
+    const strikes = recent(child);
+    return strikes.length < STRIKES ? null : { worstMs: Math.max(...strikes.map((s) => s.ms)) };
+  }
+
+  return { record, flagged };
+}
+
+module.exports = { createPortHealth, STRIKES, WINDOW_MS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -263,8 +263,7 @@ async function showUpdateToast() {
   let timer = 0;
   const hide = () => {
     clearTimeout(timer);
-    toast.classList.add('leaving');
-    setTimeout(() => (toast.hidden = true), 200);
+    hideToast(toast);
   };
   const arm = () => (timer = setTimeout(hide, UPDATE_TOAST_MS));
   toast.addEventListener('mouseenter', () => clearTimeout(timer));
@@ -276,18 +275,43 @@ async function showUpdateToast() {
     } catch {}
     hide();
   });
-  toast.hidden = false;
+  showToast(toast);
   arm();
 }
 
+function showToast(toast) {
+  toast.classList.remove('leaving');
+  toast.hidden = false;
+}
+
+// A show during the fade cancels the hide.
+function hideToast(toast) {
+  toast.classList.add('leaving');
+  setTimeout(() => {
+    if (toast.classList.contains('leaving')) toast.hidden = true;
+  }, 200);
+}
+
+// Null on success. A 409 with live terminals asks for force: true on the next call.
+async function requestRestart(id, force) {
+  try {
+    await sendJson('POST', `/api/apps/${encodeURIComponent(id)}/restart`, { force });
+    return null;
+  } catch (err) {
+    const name = apps[id]?.name ?? id;
+    const n = err.status === 409 && err.data?.terminals;
+    if (!n) return { message: `${name} did not restart: ${err.message}` };
+    const them = n === 1 ? 'it' : 'them';
+    return { terminals: n, message: `${name} has ${n} live terminal${n === 1 ? '' : 's'}. A restart ends ${them}.` };
+  }
+}
+
 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);
+  hideToast(document.getElementById('error-toast'));
 }
 
 // A 401 means the hub_token cookie no longer matches the token file. Opening /?token=… sets a new
@@ -299,9 +323,7 @@ function showErrorToast(action, err) {
     ? `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;
+  showToast(document.getElementById('error-toast'));
   clearTimeout(errorToastTimer);
   if (!unauthorized) errorToastTimer = setTimeout(hideErrorToast, ERROR_TOAST_MS);
 }
@@ -864,20 +886,17 @@ function setPaletteHint(text) {
 
 // The terminal provider answers 409 with a terminal count; the second Ctrl+R on the same app sends force.
 async function restartFromPalette(id) {
-  const name = apps[id]?.name ?? id;
   const force = palette.confirmRestart === id;
   palette.confirmRestart = null;
-  setPaletteHint(`Restarting ${name}…`);
-  try {
-    await withPaletteBusy(() => sendJson('POST', `/api/apps/${encodeURIComponent(id)}/restart`, { force }));
-  } catch (err) {
-    if (err.status === 409 && err.data?.terminals) {
-      palette.confirmRestart = id;
-      const n = err.data.terminals;
-      setPaletteHint(
-        `${name} has ${n} live terminal${n === 1 ? '' : 's'}. A restart ends ${n === 1 ? 'it' : 'them'}. Press Ctrl+R again to restart.`,
-      );
-    } else setPaletteHint(`${name} did not restart: ${err.message}`);
+  setPaletteHint(`Restarting ${apps[id]?.name ?? id}…`);
+  const failed = await withPaletteBusy(() => requestRestart(id, force));
+  if (failed?.terminals) {
+    palette.confirmRestart = id;
+    setPaletteHint(`${failed.message} Press Ctrl+R again to restart.`);
+    return;
+  }
+  if (failed) {
+    setPaletteHint(failed.message);
     return;
   }
   closePalette();
@@ -961,7 +980,12 @@ const PALETTE_MODES = {
     fillRow(li, row, q) {
       li.append(appIcon(row.app), markedSpan('name', row.app.name, q));
       const s = palette.appStats?.[row.id];
-      const stats = el('span', 'stats', s ? `${Math.round(s.rss / 1048576)} MB · ${s.cpu}%` : '');
+      if (s?.slowMs) {
+        const badge = el('span', 'slow', 'slow port');
+        badge.title = `Its port delays requests by up to ${(s.slowMs / 1000).toFixed(1)} s. Restart (Ctrl+R) moves it to a new port.`;
+        li.append(badge);
+      }
+      const stats = el('span', 'stats', s?.rss ? `${Math.round(s.rss / 1048576)} MB · ${s.cpu}%` : '');
       stats.title = 'Memory and CPU of the app process. Child processes are not counted. 100% is one core.';
       li.append(stats);
       const key = row.id === activeApp ? 'active' : row.index < 9 ? `Alt+${row.index + 1}` : '';

package/public/index.html

@@ -272,6 +272,15 @@
 
     .palette-row .stats + .age { margin-left: 0; }
 
+    .palette-row .slow {
+      margin-left: 10px;
+      padding: 0 6px;
+      border-radius: 4px;
+      color: #f5a524;
+      border: 1px solid #f5a524;
+      font-size: 11px;
+    }
+
     .palette-row.literal {
       border-top: 1px solid var(--border);
       color: var(--accent);

package/server.js

@@ -14,6 +14,7 @@ const { stripCookie } = require('./lib/cookies');
 const { createNetGuard, KEEP_ALIVE_MS } = require('./lib/net-guard');
 const { ping, stats } = require('./lib/ipc');
 const { killChild } = require('./lib/kill-child');
+const { createPortHealth } = require('./lib/port-health');
 const { readRegistry, themeConfig } = require('./lib/themes');
 const { createUpdateCheck } = require('./lib/update-check');
 const { liveHub, removeRecord, writeRecord } = require('./lib/hub-record');
@@ -952,12 +953,53 @@ app.post('/api/config-dirs/activate', async (req, res) => {
   res.json({ apps: appsConfig() });
 });
 
+// The stalls hit a few percent of requests, so each round sends several probes per app.
+const HEALTH_INTERVAL_MS = 30_000;
+const HEALTH_PROBES = 5;
+const HEALTH_TIMEOUT_MS = 5000;
+const portHealth = createPortHealth();
+let healthRunning = false;
+
+async function msUntil(promise) {
+  const t = performance.now();
+  await promise;
+  return performance.now() - t;
+}
+
+async function probeApp(id) {
+  const port = activePool()?.ports[id];
+  for (let i = 0; port && i < HEALTH_PROBES; i++) {
+    const child = currentChild(id, port);
+    if (!child) return;
+    const answered = fetch(`http://127.0.0.1:${port}/hub-config`, { signal: AbortSignal.timeout(HEALTH_TIMEOUT_MS) })
+      .then((r) => r.arrayBuffer())
+      .catch(() => {});
+    const pong = ping(child, PING_TIMEOUT_MS);
+    const [httpMs, ipcMs, ponged] = await Promise.all([msUntil(answered), msUntil(pong), pong]);
+    portHealth.record(child, { httpMs, ipcMs: ponged ? ipcMs : null });
+  }
+}
+
+async function checkPortHealth() {
+  if (healthRunning) return;
+  healthRunning = true;
+  try {
+    await Promise.all(ENABLED_APPS.map((a) => probeApp(a.id)));
+  } finally {
+    healthRunning = false;
+  }
+}
+
 const STATS_TIMEOUT_MS = 1000;
 app.get('/api/apps/stats', async (_req, res) => {
   res.setHeader('Cache-Control', 'no-store');
   const pool = activePool();
   const entries = await Promise.all(
-    ENABLED_APPS.map(async (a) => [a.id, await stats(pool?.children.get(a.id), STATS_TIMEOUT_MS)]),
+    ENABLED_APPS.map(async (a) => {
+      const child = pool?.children.get(a.id);
+      const slowMs = (child && portHealth.flagged(child)?.worstMs) ?? null;
+      return [a.id, { ...(await stats(child, STATS_TIMEOUT_MS)), slowMs }];
+    }),
   );
   res.json(Object.fromEntries(entries));
 });
@@ -1050,6 +1092,7 @@ const onReady = (actual) => {
   writeRecord(HUB_DIR, actual);
   ensurePool(hubConfig.activeConfigDir);
   updateCheck.refresh();
+  setInterval(checkPortHealth, HEALTH_INTERVAL_MS).unref();
   printBanner(actual);
   if (process.argv.includes('--open')) {
     import('open').then((m) => m.default(accessUrl(actual)));