claude-code-hub 1.3.2 → 1.3.3

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.3",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -236,6 +236,7 @@ async function init() {
   bindPalette();
   registerSW();
   bindErrorToast();
+  bindSlowToast();
   showUpdateToast();
 }
 
@@ -263,8 +264,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 +276,110 @@ 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);
+}
+
+// The stalls belong to the port, so a dismissal holds while the app stays on it.
+const SLOW_POLL_MS = 30_000;
+const slowDismissed = new Map();
+const slowToast = { id: null, port: 0, confirm: false, busy: false };
+
+function hideSlowToast() {
+  slowToast.id = null;
+  hideToast(document.getElementById('slow-toast'));
+}
+
+function renderSlowToast(app) {
+  const restart = document.getElementById('slow-restart');
+  document.getElementById('slow-title').textContent = `${app.name} answers slowly`;
+  document.getElementById('slow-detail').textContent =
+    `Its port delays requests by up to ${(app.worstMs / 1000).toFixed(1)} s. A restart moves it to a new port.`;
+  restart.textContent = 'Restart';
+  restart.disabled = false;
+  slowToast.id = app.id;
+  slowToast.port = app.port;
+  slowToast.confirm = false;
+  showToast(document.getElementById('slow-toast'));
+}
+
+async function pollSlowApps() {
+  if (document.hidden || slowToast.busy) return;
+  let slow;
+  try {
+    ({ slow } = await sendJson('GET', '/api/apps/health'));
+  } catch {
+    return;
+  }
+  if (slowToast.id && !slow.some((a) => a.id === slowToast.id)) hideSlowToast();
+  const next = slow.find((a) => slowDismissed.get(a.id) !== a.port);
+  if (next && next.id !== slowToast.id) renderSlowToast(next);
+}
+
+// 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}.` };
+  }
+}
+
+async function restartSlowApp() {
+  const { id } = slowToast;
+  if (!id) return;
+  const restart = document.getElementById('slow-restart');
+  slowToast.busy = true;
+  restart.disabled = true;
+  restart.textContent = 'Restarting…';
+  const failed = await requestRestart(id, slowToast.confirm);
+  slowToast.busy = false;
+  if (!failed) {
+    hideSlowToast();
+    replaceIframe(id);
+    return;
+  }
+  slowToast.confirm = !!failed.terminals;
+  document.getElementById('slow-detail').textContent = failed.message;
+  restart.textContent = failed.terminals ? 'Restart anyway' : 'Restart';
+  restart.disabled = false;
+}
+
+function bindSlowToast() {
+  document.getElementById('slow-restart').addEventListener('click', restartSlowApp);
+  document.getElementById('slow-close').addEventListener('click', () => {
+    if (slowToast.id) slowDismissed.set(slowToast.id, slowToast.port);
+    hideSlowToast();
+  });
+  setInterval(pollSlowApps, SLOW_POLL_MS);
+  document.addEventListener('visibilitychange', pollSlowApps);
+  pollSlowApps();
+}
+
 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 +391,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 +954,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();

package/public/index.html

@@ -385,6 +385,7 @@
 
     .update-toast-close:hover { color: var(--text); }
     .error-toast { z-index: 25; border-left-color: #e5484d; }
+    .slow-toast { z-index: 20; border-left-color: #f5a524; }
   </style>
 </head>
 <body>
@@ -457,6 +458,17 @@
     <button class="update-toast-close" id="update-close" type="button" aria-label="Close">×</button>
   </div>
 
+  <div class="update-toast slow-toast" id="slow-toast" role="status" hidden>
+    <div class="update-toast-body">
+      <div class="update-toast-title" id="slow-title"></div>
+      <div class="update-toast-meta" id="slow-detail"></div>
+      <div class="update-toast-actions">
+        <button class="update-toast-skip" id="slow-restart" type="button">Restart</button>
+      </div>
+    </div>
+    <button class="update-toast-close" id="slow-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>

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');
@@ -962,6 +963,54 @@ app.get('/api/apps/stats', async (_req, res) => {
   res.json(Object.fromEntries(entries));
 });
 
+// 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;
+  }
+}
+
+app.get('/api/apps/health', (_req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  const pool = activePool();
+  const slow = [];
+  for (const a of ENABLED_APPS) {
+    const f = pool?.children.has(a.id) && portHealth.flagged(pool.children.get(a.id));
+    if (f) slow.push({ id: a.id, name: a.name, port: pool.ports[a.id], worstMs: f.worstMs });
+  }
+  res.json({ slow });
+});
+
 // Restarting the terminal provider ends its live terminals, so that takes force: true.
 const restarting = new Set();
 app.post('/api/apps/:id/restart', async (req, res) => {
@@ -1050,6 +1099,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)));