claude-code-hub 0.37.0 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -9,6 +9,8 @@
   "scripts": {
     "start": "node server.js",
     "dev": "node server.js --open",
+    "update": "bash scripts/update-submodules.sh",
+    "update:check": "bash scripts/update-submodules.sh --check",
     "lint": "npx @biomejs/biome check public/app.js server.js && npm run check:escaping && npm run check:security-lib",
     "lint:fix": "npx @biomejs/biome check --fix public/app.js server.js",
     "prepare": "husky",
@@ -37,10 +39,10 @@
   },
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
-    "claude-code-cost": "^0.23.0",
-    "claude-code-kanban": "^4.26.0",
-    "claude-code-marketplace": "^0.18.0",
-    "claude-code-memory-explorer": "^0.14.0",
+    "claude-code-cost": "^0.23.1",
+    "claude-code-kanban": "^4.27.0",
+    "claude-code-marketplace": "^0.19.0",
+    "claude-code-memory-explorer": "^0.14.1",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/public/app.js

@@ -3,9 +3,13 @@ let activeApp = null;
 const iframes = {};
 const loadedApps = new Set();
 let allowedOrigins = new Set();
-// {theme: 'dark'|'light', colorTheme: '<id>'} — survives hub reloads so
-// late-loading iframes and fresh sessions get the last chosen theme.
+// {theme: 'dark'|'light', colorTheme: '<id>', colorThemes: {<configDir>: '<id>'}} — survives hub
+// reloads so late-loading iframes and fresh sessions get the last chosen theme. Light/dark is
+// global; the color theme is per config dir, and colorTheme is the last one picked anywhere, which
+// a dir that has never been themed inherits.
 const themeState = loadThemeState();
+// Keys themeState.colorThemes. Null until /api/config lands, so the first paint uses the fallback.
+let activeConfigDir = null;
 // {project, encoded, name} — the current project scope. Deliberately NOT persisted, unlike
 // hub-theme: starting unset means there is nothing to race against each sub-app's own
 // project self-restore on boot. Once set it never returns to null.
@@ -24,11 +28,19 @@ const palette = {
 };
 
 function loadThemeState() {
+  let state;
   try {
-    return JSON.parse(localStorage.getItem('hub-theme')) ?? {};
+    state = JSON.parse(localStorage.getItem('hub-theme')) ?? {};
   } catch {
-    return {};
+    state = {};
   }
+  if (!state.colorThemes || typeof state.colorThemes !== 'object') state.colorThemes = {};
+  return state;
+}
+
+// The color theme of the active config dir, falling back to the last one picked anywhere.
+function activeColorTheme() {
+  return themeState.colorThemes[activeConfigDir] ?? themeState.colorTheme;
 }
 
 function osTheme() {
@@ -38,7 +50,7 @@ function osTheme() {
 // Sub-apps disagree on their first-run default (marketplace follows the OS, the rest start dark),
 // so an unset theme resolves to the OS preference here and reaches every iframe on load.
 function themeMessage() {
-  return { type: 'hub:theme', theme: themeState.theme ?? osTheme(), colorTheme: themeState.colorTheme };
+  return { type: 'hub:theme', theme: themeState.theme ?? osTheme(), colorTheme: activeColorTheme() };
 }
 
 // {<themeId>: {dark, light}} from /api/config, which derives it from scripts/themes.json — the same
@@ -51,7 +63,7 @@ let themeAccents = {};
 function applyHubTheme() {
   const mode = themeState.theme ?? osTheme();
   document.documentElement.classList.toggle('light', mode === 'light');
-  const pair = themeAccents[themeState.colorTheme];
+  const pair = themeAccents[activeColorTheme()];
   if (pair) document.documentElement.style.setProperty('--accent', pair[mode]);
 }
 
@@ -123,6 +135,7 @@ async function init() {
   const config = await res.json();
   setApps(config.apps);
   defaultConfigDir = config.defaultConfigDir ?? null;
+  activeConfigDir = config.activeConfigDir ?? null;
   applyTitle(config.activeConfigDir);
   themeAccents = config.themeAccents ?? {};
   applyHubTheme();
@@ -236,10 +249,13 @@ function listenMessages() {
       // Legacy senders pass only {theme}; colorTheme is optional and sticky.
       if (data.theme !== 'light' && data.theme !== 'dark') return;
       const hasColor = typeof data.colorTheme === 'string' && /^[a-z0-9-]{0,32}$/.test(data.colorTheme);
-      const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== themeState.colorTheme);
+      const changed = data.theme !== themeState.theme || (hasColor && data.colorTheme !== activeColorTheme());
       if (!changed) return;
       themeState.theme = data.theme;
-      if (hasColor) themeState.colorTheme = data.colorTheme;
+      if (hasColor) {
+        themeState.colorTheme = data.colorTheme;
+        if (activeConfigDir) themeState.colorThemes[activeConfigDir] = data.colorTheme;
+      }
       localStorage.setItem('hub-theme', JSON.stringify(themeState));
       applyHubTheme();
       broadcast(themeMessage(), e.source);
@@ -254,18 +270,30 @@ function handleForwardedKey(d) {
   const alt = typeof d.alt === 'boolean' ? d.alt : true;
   const ctrl = typeof d.alt === 'boolean' ? d.ctrl : d.key.startsWith('Arrow');
   if (!alt || d.shift === true) return;
+  const k = bindingKey(d);
   if (!ctrl) {
-    if (/^[1-9]$/.test(d.key)) switchByIndex(Number(d.key) - 1);
+    if (/^[1-9]$/.test(k)) switchByIndex(Number(k) - 1);
     return;
   }
-  if (d.key === 'ArrowLeft') cycleTab(-1);
-  else if (d.key === 'ArrowRight') cycleTab(1);
-  else if (PALETTE_KEYS[d.key.toLowerCase()]) togglePalette(PALETTE_KEYS[d.key.toLowerCase()]);
+  if (k === 'ArrowLeft') cycleTab(-1);
+  else if (k === 'ArrowRight') cycleTab(1);
+  else if (PALETTE_KEYS[k]) togglePalette(PALETTE_KEYS[k]);
 }
 
 // Ctrl+Alt+<letter> bindings. Sub-app shims forward every letter, so this is the one keymap.
 const PALETTE_KEYS = { p: 'project', w: 'configDir' };
 
+// macOS composes Option+<key> into a character — Option+1 is '¡', Option+P is 'π' — and holding
+// Control does not undo it, so e.key alone cannot carry these bindings there. e.code is the
+// physical key, which is wrong for non-US layouts, hence only as a fallback. Takes a real
+// KeyboardEvent or a forwarded {key, code} payload; a payload without code degrades to key.
+function bindingKey(e) {
+  const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
+  if (/^[a-z1-9]$/.test(lower)) return lower;
+  const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+  return m ? m[1].toLowerCase() : e.key;
+}
+
 function cycleTab(delta) {
   const ids = Object.keys(apps);
   const idx = ids.indexOf(activeApp);
@@ -280,11 +308,13 @@ function switchByIndex(idx) {
 
 function listenKeys() {
   document.addEventListener('keydown', (e) => {
-    // Matches both cases: with Ctrl+Alt held, some layouts report AltGr-shifted characters.
-    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey && PALETTE_KEYS[e.key.toLowerCase()]) {
-      e.preventDefault();
-      togglePalette(PALETTE_KEYS[e.key.toLowerCase()]);
-      return;
+    if (e.ctrlKey && e.altKey && !e.shiftKey && !e.metaKey) {
+      const mode = PALETTE_KEYS[bindingKey(e)];
+      if (mode) {
+        e.preventDefault();
+        togglePalette(mode);
+        return;
+      }
     }
     // While the palette is open the input owns the keyboard — don't let tab shortcuts fire
     // mid-path (Alt+digit especially, since Windows paths contain digits). Escape still closes:
@@ -297,10 +327,10 @@ function listenKeys() {
       return;
     }
     if (e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
-      const digit = parseInt(e.key, 10);
-      if (digit >= 1 && digit <= 9) {
+      const k = bindingKey(e);
+      if (/^[1-9]$/.test(k)) {
         e.preventDefault();
-        switchByIndex(digit - 1);
+        switchByIndex(Number(k) - 1);
         return;
       }
     }
@@ -431,6 +461,10 @@ async function removeConfigDir(dirPath) {
     console.warn('remove config dir failed:', err.message);
     return;
   }
+  if (dirPath in themeState.colorThemes) {
+    delete themeState.colorThemes[dirPath];
+    localStorage.setItem('hub-theme', JSON.stringify(themeState));
+  }
   if (palette.open && palette.mode === 'configDir') renderPalette();
 }
 
@@ -644,7 +678,10 @@ async function commitConfigDir(row) {
     setApps((await sendJson('POST', '/api/config-dirs/activate', { path: target })).apps);
     // The palette renders from this cache before its refetch lands, and initialSel keys off it.
     palette.configDirs.active = target;
+    activeConfigDir = target;
     applyTitle(target);
+    // Each iframe gets the new dir's color theme from its load handler; this repaints the palette.
+    applyHubTheme();
     reloadIframes();
   } catch (err) {
     console.warn('config dir switch failed:', err.message);
@@ -705,8 +742,15 @@ function bindPalette() {
     palette.sel = Number(li.dataset.idx);
     commitPalette();
   });
+  // Vimium eats Escape inside a text input and only blurs it, so the page never sees the key —
+  // losing focus is the one signal left. Busy disables the input and Alt+Tab blurs the window;
+  // neither is a dismissal.
+  input.addEventListener('blur', () => {
+    if (palette.open && !input.disabled && document.hasFocus()) closePalette();
+  });
   document.getElementById('palette').addEventListener('mousedown', (e) => {
     if (e.target.id === 'palette') closePalette();
+    else if (e.target !== input) e.preventDefault();
   });
 }
 

package/public/index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="theme-color" content="#1a1a2e">
   <link rel="manifest" href="/manifest.json">
+  <!-- A manifest alone does not set the favicon: without these, app windows,
+       shortcuts and the history list fall back to /favicon.ico and then to whatever
+       icon localhost was last seen with, which is a sub-app's. -->
+  <link rel="icon" type="image/svg+xml" href="/icons/icon-192.svg">
+  <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+  <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
+  <link rel="apple-touch-icon" href="/icons/icon-192.png">
   <title>Claude Code Hub</title>
   <style>
     :root {

package/server.js

@@ -24,6 +24,12 @@ const MEMORY_PORT = parseInt(getArg('memory-port') || '3544', 10);
 
 const POOL_SIZE = Math.max(1, parseInt(getArg('pool-size') || '3', 10));
 const DEFAULT_PORTS = { marketplace: MARKETPLACE_PORT, kanban: KANBAN_PORT, cost: COST_PORT, memory: MEMORY_PORT };
+const RESTART_DELAY_MS = 500;
+// A rate window, not a total: a child may die and recover all session, but one that cannot stay up
+// stops being restarted. A consecutive counter cannot express that — anything that starts at all
+// clears it, so a child that starts and dies forever restarts forever.
+const MAX_RESTARTS = 5;
+const RESTART_WINDOW_MS = 60_000;
 
 // One child set per config dir, kept alive after a switch so switching back is instant. Map
 // insertion order doubles as LRU: activating a dir re-inserts it at the end.
@@ -138,24 +144,44 @@ function spawnApp(pool, name, cmd, args) {
   child.stderr.on('data', (d) => process.stderr.write(`[${name}] ${d}`));
   child.on('exit', (code) => {
     console.log(`[${name}] exited (code ${code})`);
+    // The port dies with the child and the OS may hand it to a stranger, so stop dialing it.
+    delete pool.ports[name];
     markReady();
+    if (pool.retired || pool.children.get(name) !== child) return;
+    // Nothing else would ever bring this app back: a pool is only rebuilt when its dir is
+    // re-activated.
+    const recent = (pool.restarts[name] || []).filter((t) => Date.now() - t < RESTART_WINDOW_MS);
+    if (recent.length >= MAX_RESTARTS) {
+      console.log(`[${name}] gave up after ${MAX_RESTARTS} restarts in ${RESTART_WINDOW_MS / 1000}s`);
+      return;
+    }
+    recent.push(Date.now());
+    pool.restarts[name] = recent;
+    setTimeout(() => {
+      if (pool.retired) return;
+      console.log(`[${name}] restarting (${recent.length}/${MAX_RESTARTS})`);
+      spawnApp(pool, name, cmd, args);
+    }, RESTART_DELAY_MS).unref();
   });
 
-  pool.children.push(child);
+  pool.children.set(name, child);
   return child;
 }
 
-function killPool(pool) {
-  for (const child of pool.children) {
-    if (child.exitCode !== null || child.killed) continue;
-    if (process.platform === 'win32') {
-      spawn('taskkill', ['/pid', String(child.pid), '/f', '/t'], { stdio: 'ignore' });
-    } else {
-      child.kill();
-    }
+function killChild(child) {
+  if (child.exitCode !== null || child.killed) return;
+  if (process.platform === 'win32') {
+    spawn('taskkill', ['/pid', String(child.pid), '/f', '/t'], { stdio: 'ignore' });
+  } else {
+    child.kill();
   }
 }
 
+function killPool(pool) {
+  pool.retired = true;
+  for (const child of pool.children.values()) killChild(child);
+}
+
 function killAll() {
   for (const pool of pools.values()) killPool(pool);
 }
@@ -183,10 +209,11 @@ async function ensurePool(dir) {
     console.log(`Evicting children for ${oldestDir}`);
     dropPool(oldestDir);
   }
-  pool = { dir, children: [], ports: {} };
+  pool = { dir, children: new Map(), ports: {}, restarts: {}, retired: false };
   pools.set(dir, pool);
   spawnChildren(pool);
-  pool.ready = withTimeout(Promise.all(pool.children.map((c) => c.ready)), 20000).then(() => pool);
+  const ready = [...pool.children.values()].map((c) => c.ready);
+  pool.ready = withTimeout(Promise.all(ready), 20000).then(() => pool);
   return pool.ready;
 }
 
@@ -265,33 +292,165 @@ function rewriteOrigin(origin, publicPort, childPort) {
 
 const proxyAgent = new http.Agent({ keepAlive: true, maxSockets: 64 });
 
-// Host is forwarded untouched so the child's hostGuard still sees what the browser sent. Origin is
-// the one header the child cannot judge on its own: its guard compares the port to its own
-// ephemeral one, so the public-port spelling is mapped to the child's; anything else passes
-// through as-is and the child rejects it.
-function proxyHandler(name) {
-  return (req, res) => {
-    const childPort = activePool()?.ports[name];
-    if (!childPort) {
-      res.writeHead(503, { 'Retry-After': '1' });
-      res.end(`${name} is starting`);
-      return;
-    }
-    const headers = { ...req.headers };
-    if (headers.origin) headers.origin = rewriteOrigin(headers.origin, publicPorts[name], childPort);
+// Two failures look the same from here and both recover on their own: a pooled socket the child
+// closed under us, and a child that is restarting. The port is re-read per attempt, so a replay
+// reaches the replacement child rather than the ephemeral port that died with the old one.
+const RETRYABLE = new Set(['ECONNRESET', 'EPIPE', 'ECONNABORTED', 'ECONNREFUSED', 'ETIMEDOUT']);
+const MAX_ATTEMPTS = 3;
+const ATTEMPT_DELAY_MS = 250;
+// A connect to a freshly-bound loopback port is sometimes black-holed on Windows (the child shows
+// as LISTENING and answers nothing) and the OS gives up only after ~20s. This caps the connect
+// alone, never the response: a sub-app handler may legitimately take minutes on a cold scan, and
+// capping time-to-first-byte would kill that request, replay it, and then kill a healthy child.
+const CONNECT_TIMEOUT_MS = 3000;
+// A restart costs about a second, so a document load waits it out instead of showing an error.
+const NAV_PORT_WAIT_MS = 10000;
+const API_PORT_WAIT_MS = 2000;
+
+const delay = (ms) => new Promise((r) => setTimeout(r, ms).unref());
+
+// An iframe document load, as opposed to the sub-app's own fetch/XHR.
+function isNavigation(req) {
+  if (req.headers['sec-fetch-mode']) return req.headers['sec-fetch-mode'] === 'navigate';
+  return (req.headers.accept || '').includes('text/html');
+}
+
+// Races the child's own ready promise rather than polling it, so a restarted app starts serving the
+// moment it prints its port instead of on the next tick.
+async function waitForPort(name, deadline) {
+  for (;;) {
+    const pool = activePool();
+    const port = pool?.ports[name];
+    if (port) return port;
+    const remaining = deadline - Date.now();
+    if (remaining <= 0) return null;
+    await Promise.race([pool?.children.get(name)?.ready, delay(Math.min(remaining, 250))]);
+  }
+}
+
+const escapeHtml = (s) => String(s).replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+
+// A document load that fails gets a page that reloads itself — the reload the user would do by
+// hand. The cap is small because the server already waited NAV_PORT_WAIT_MS before serving this,
+// and each reload re-spends that wait. sessionStorage throws when site data is blocked, and a page
+// whose only job is to reload must still reload there.
+function retryPage(name, detail) {
+  return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml(name)}</title>
+<style>:root{color-scheme:light dark}body{font:14px system-ui,sans-serif;margin:0;display:grid;place-items:center;height:100vh}
+div{text-align:center;opacity:.7}code{font-size:12px;opacity:.6}</style>
+</head><body><div><p id="m">${escapeHtml(name)} is restarting…</p><p><code>${escapeHtml(detail)}</code></p></div>
+<script>
+let n = 0;
+const k = 'hub-retry:' + location.pathname;
+try { n = +(sessionStorage.getItem(k) || 0); sessionStorage.setItem(k, n + 1); } catch {}
+if (n < 3) setTimeout(() => location.reload(), 1000);
+else { try { sessionStorage.removeItem(k); } catch {} document.getElementById('m').textContent = 'not responding'; }
+</script></body></html>`;
+}
+
+function sendUnavailable(req, res, name, status, detail) {
+  if (res.destroyed || res.headersSent) return;
+  if (isNavigation(req)) {
+    res.writeHead(status, { 'Retry-After': '1', 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(retryPage(name, detail));
+    return;
+  }
+  // The sub-app's own callers hand the body to .json(): plain text surfaces as a SyntaxError
+  // instead of the reason.
+  res.writeHead(status, { 'Retry-After': '1', 'Content-Type': 'application/json' });
+  res.end(JSON.stringify({ error: detail }));
+}
+
+// A pooled socket the child closed under us is normal and recovers on the next attempt. A port that
+// never completes a connect does not, so the child is replaced and the respawn gives it a new one.
+function replaceChild(name, childPort, err) {
+  const pool = activePool();
+  const child = pool?.children.get(name);
+  if (!child || pool.ports[name] !== childPort) return;
+  console.log(`[${name}] unreachable at 127.0.0.1:${childPort} (${err.code}) - replacing it`);
+  delete pool.ports[name];
+  killChild(child);
+}
+
+// Fires only while the socket is still connecting, so a slow handler is never interrupted.
+function capConnect(upstream, name, childPort) {
+  upstream.on('socket', (socket) => {
+    if (!socket.connecting) return;
+    const timer = setTimeout(() => {
+      const err = new Error(`no connect to ${name} at 127.0.0.1:${childPort}`);
+      err.code = 'ETIMEDOUT';
+      upstream.destroy(err);
+    }, CONNECT_TIMEOUT_MS);
+    const clear = () => clearTimeout(timer);
+    socket.once('connect', clear);
+    upstream.once('close', clear);
+  });
+}
+
+// Resolves null once the response is committed (or the client is gone), or the error when nothing
+// has been written yet and the caller may still retry.
+function forward(name, req, res, childPort, headers, replayable, onUpstream) {
+  return new Promise((resolve) => {
     const upstream = http.request(
       { host: '127.0.0.1', port: childPort, method: req.method, path: req.url, headers, agent: proxyAgent },
       (u) => {
         res.writeHead(u.statusCode, u.headers);
         u.pipe(res);
+        resolve(null);
       },
     );
+    onUpstream(upstream);
+    capConnect(upstream, name, childPort);
     upstream.on('error', (err) => {
-      if (!res.headersSent) res.writeHead(502);
-      res.end(err.message);
+      if (res.headersSent) {
+        res.end();
+        resolve(null);
+        return;
+      }
+      resolve(err);
     });
-    res.on('close', () => upstream.destroy());
-    req.pipe(upstream);
+    if (replayable) upstream.end();
+    else req.pipe(upstream);
+  });
+}
+
+// Host is forwarded untouched so the child's hostGuard still sees what the browser sent. Origin is
+// the one header the child cannot judge on its own: its guard compares the port to its own
+// ephemeral one, so the public-port spelling is mapped to the child's; anything else passes
+// through as-is and the child rejects it.
+function proxyHandler(name) {
+  return async (req, res) => {
+    const headers = { ...req.headers };
+    // req is consumed by the first attempt, so only a request with no body can be re-sent. Waiting
+    // for a port is not a replay — nothing has been sent yet — so every method gets the same wait.
+    const replayable = req.method === 'GET' || req.method === 'HEAD' || req.method === 'OPTIONS';
+    // One deadline for the whole request, not one per attempt: a retry must not re-spend the wait.
+    const deadline = Date.now() + (isNavigation(req) ? NAV_PORT_WAIT_MS : API_PORT_WAIT_MS);
+    // One listener for the request, however many attempts it takes.
+    let current = null;
+    res.once('close', () => current?.destroy());
+
+    for (let attempt = 1; !res.destroyed; attempt++) {
+      const childPort = await waitForPort(name, deadline);
+      if (!childPort) {
+        sendUnavailable(req, res, name, 503, `${name} is starting`);
+        return;
+      }
+      if (req.headers.origin) {
+        headers.origin = rewriteOrigin(req.headers.origin, publicPorts[name], childPort);
+      }
+      const err = await forward(name, req, res, childPort, headers, replayable, (u) => {
+        current = u;
+      });
+      if (!err) return;
+      if (!replayable || attempt >= MAX_ATTEMPTS || !RETRYABLE.has(err.code)) {
+        // A port that ate every attempt is not coming back; anything less is a transient close.
+        if (attempt >= MAX_ATTEMPTS) replaceChild(name, childPort, err);
+        sendUnavailable(req, res, name, 502, err.message);
+        return;
+      }
+      await delay(ATTEMPT_DELAY_MS);
+    }
   };
 }
 
@@ -421,7 +580,8 @@ app.post('/api/config-dirs/activate', async (req, res) => {
 // once its banner has been scraped (see spawnApp).
 app.get('/api/projects', async (_req, res) => {
   res.setHeader('Cache-Control', 'no-store');
-  const kanbanPort = activePool()?.ports.kanban;
+  // Waits like the proxy does, so the palette is not the one thing that hard-fails during a restart.
+  const kanbanPort = await waitForPort('kanban', Date.now() + API_PORT_WAIT_MS);
   if (!kanbanPort) {
     res.status(503).json({ error: 'kanban is starting' });
     return;