claude-code-hub 1.0.3 → 1.2.0

package/lib/ipc.js

@@ -0,0 +1,34 @@
+'use strict';
+
+let seq = 0;
+
+// Resolves with the child's answer to a `type` message over its IPC channel, or null after timeoutMs.
+// The channel does not use TCP, so a loopback connect failure does not stop the answer.
+function ask(child, type, timeoutMs, answerType = type) {
+  if (!child?.connected) return Promise.resolve(null);
+  const id = ++seq;
+  return new Promise((resolve) => {
+    const done = (m) => {
+      clearTimeout(timer);
+      child.off('message', onMessage);
+      resolve(m);
+    };
+    const onMessage = (m) => m?.type === answerType && m.id === id && done(m);
+    const timer = setTimeout(() => done(null), timeoutMs);
+    child.on('message', onMessage);
+    child.send({ type, id }, (err) => err && done(null));
+  });
+}
+
+// Resolves true when the child answers hub:ping within timeoutMs.
+async function ping(child, timeoutMs) {
+  return !!(await ask(child, 'hub:ping', timeoutMs, 'hub:pong'));
+}
+
+// An app that does not mount the SDK server does not answer, so it resolves null.
+async function stats(child, timeoutMs) {
+  const m = await ask(child, 'hub:stats', timeoutMs);
+  return m && { rss: m.rss, cpu: m.cpu };
+}
+
+module.exports = { ping, stats };

package/lib/net-guard.js

@@ -37,11 +37,14 @@ const PORT_RE = /^[0-9]{1,5}$/;
 // port dynamic, so only the host is allowlisted.
 const validPort = (p) => PORT_RE.test(p) && Number(p) >= 1 && Number(p) <= 65535;
 const KEEP_ALIVE_MS = 65000;
+// A whole IPv4 literal: a prefix test would let a rebinding name like 127.evil.com through.
+const LOOPBACK_V4_RE = /^127(?:\.(?:25[0-5]|2[0-4]\d|1?\d?\d)){3}$/;
 
 function isLoopbackAddress(host) {
   if (!host) return false;
-  const h = String(host).toLowerCase();
-  return LOOPBACK_HOSTS.has(h) || h.startsWith('127.');
+  // An Origin or URL host carries an IPv6 literal in brackets.
+  const h = String(host).toLowerCase().replace(/^\[(.*)\]$/, '$1');
+  return LOOPBACK_HOSTS.has(h) || LOOPBACK_V4_RE.test(h);
 }
 
 // Hand-parsed rather than via new URL(), which is far more permissive than we
@@ -102,7 +105,7 @@ function getFlag(name) {
 }
 
 /**
- * @param {{appName?: string}} [config]
+ * @param {{appName?: string, selfFramedPaths?: string[]}} [config]
  */
 function createNetGuard(config = {}) {
   const appName = config.appName || 'This app';
@@ -216,9 +219,18 @@ function createNetGuard(config = {}) {
     CSP = "frame-ancestors 'none'";
   }
 
-  function frameGuard(_req, res, next) {
+  // Alone, these pages may be framed by this app's own port under its loopback names, for a page
+  // that frames itself from its other name to get its own renderer process.
+  const selfFramed = new Set(config.selfFramedPaths || []);
+
+  function frameGuard(req, res, next) {
     res.setHeader('X-Content-Type-Options', 'nosniff');
     res.setHeader('Referrer-Policy', 'no-referrer');
+    if (!hubOrigin && selfFramed.has(req.path)) {
+      const port = req.socket.localPort;
+      res.setHeader('Content-Security-Policy', `frame-ancestors 'self' http://localhost:${port} http://127.0.0.1:${port}`);
+      return next();
+    }
     res.setHeader('Content-Security-Policy', CSP);
     if (!hubOrigin) res.setHeader('X-Frame-Options', 'DENY');
     next();
@@ -232,7 +244,10 @@ function createNetGuard(config = {}) {
    * the OS resolver orders A/AAAA records - binding only 127.0.0.1 breaks hosts
    * where `localhost` resolves to ::1, and vice versa. Doing it on the *resolved*
    * port means every existing URL, startup banner and postMessage origin is
-   * unchanged. Failures are swallowed: it is an optimization, not a requirement.
+   * unchanged. A family the host does not have is skipped. A port that another
+   * process holds on the other family is treated as busy: the primary closes and
+   * emits EADDRINUSE (port 0 picks another random port instead), because that process would answer `localhost:<port>` (and a
+   * cross-site frame on it) in our name. onReady waits for the second bind.
    *
    * Returns the primary server, so callers keep attaching their own 'error'
    * handler for the EADDRINUSE fallback.
@@ -259,18 +274,30 @@ function createNetGuard(config = {}) {
     };
     const server = makeServer(app);
     let secondary = null;
+    let randomTries = 0;
 
     server.on('listening', () => {
-      actualPort = server.address().port;
-      if (!EXPOSED) {
-        const otherFamily = BIND_HOST.includes(':') ? '127.0.0.1' : '::1';
-        try {
-          secondary = makeServer(app);
-          secondary.on('error', () => {}); // that family may not exist on this host
-          secondary.listen({ host: otherFamily, port: actualPort, ipv6Only: otherFamily === '::1' });
-        } catch { /* best effort */ }
+      const boundPort = server.address().port;
+      actualPort = boundPort;
+      // Not actualPort: the hub listens several servers through one guard, and another one can bind
+      // while this one waits for its second family.
+      const ready = () => { if (onReady) onReady(boundPort); };
+      if (EXPOSED) return ready();
+      const otherFamily = BIND_HOST.includes(':') ? '127.0.0.1' : '::1';
+      try {
+        secondary = makeServer(app);
+        secondary.once('listening', ready);
+        secondary.on('error', (err) => {
+          if (err.code !== 'EADDRINUSE') return ready();
+          // A caller asking for port 0 has no fallback of its own, so it gets another random port here.
+          if (port === 0 && ++randomTries < 5) return server.close(() => server.listen(0, BIND_HOST));
+          server.close();
+          server.emit('error', err);
+        });
+        secondary.listen({ host: otherFamily, port: boundPort, ipv6Only: otherFamily === '::1' });
+      } catch {
+        ready();
       }
-      if (onReady) onReady(actualPort);
     });
     server.on('close', () => { try { if (secondary) secondary.close(); } catch { /* already gone */ } });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.0.3",
+  "version": "1.2.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.2.0",
+    "claude-code-kanban": "5.3.0",
+    "claude-code-marketplace": "1.2.0",
+    "claude-code-memory-explorer": "1.1.1",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/packages/claude-hub-sdk/src/client.js

@@ -334,6 +334,8 @@
         },
         // For an element that eats keys before the document sees them, like a terminal.
         forwards,
+        // The combos forwards() matches, for a frame that tests keys with ClaudeHub.comboOf on its own.
+        forwardCombos: () => (forward ? [...forward] : []),
         closeGuard(on) {
           post({ type: 'hub:closeGuard', on: !!on });
         },
@@ -363,7 +365,7 @@
       return hub;
     }
 
-    return { connect };
+    return { connect, comboOf };
   }
 
   if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub, comboOf };

package/packages/claude-hub-sdk/src/server.js

@@ -5,12 +5,34 @@ const path = require('node:path');
 // The hub hands this file to each app it spawns (HUB_SDK_SERVER), so it runs the hub's version, not
 // one the app shipped. An app run alone never loads it.
 
+// The app's own process only: a process-tree walk needs an OS call that costs more than the number
+// is worth. CPU is sampled over a short window when asked, so nothing runs between asks, and asks
+// that overlap share one sample.
+const STATS_SAMPLE_MS = 250;
+let statsSample = null;
+
+function sampleStats() {
+  statsSample ??= new Promise((resolve) => {
+    const cpu0 = process.cpuUsage();
+    const t0 = process.hrtime.bigint();
+    setTimeout(() => {
+      const cpu = process.cpuUsage(cpu0);
+      const elapsedUs = Number(process.hrtime.bigint() - t0) / 1000;
+      statsSample = null;
+      resolve({ rss: process.memoryUsage.rss(), cpu: Math.round(((cpu.user + cpu.system) / elapsedUs) * 100) });
+    }, STATS_SAMPLE_MS);
+  });
+  return statsSample;
+}
+
 // The hub spawns each app with an IPC channel. A loopback connect can fail while the app is fine,
 // so before the hub replaces an app it asks over the channel, which does not go through TCP.
 function answerHub() {
   if (!process.channel) return;
   process.on('message', (m) => {
     if (m?.type === 'hub:ping') process.send({ type: 'hub:pong', id: m.id });
+    if (m?.type === 'hub:stats')
+      sampleStats().then((s) => process.connected && process.send({ type: 'hub:stats', id: m.id, ...s }));
   });
   process.on('disconnect', () => process.exit(0));
   // Listeners ref the channel. The app's own server keeps it alive, not the hub.

package/packages/claude-hub-sdk/src/stub.js

@@ -3,6 +3,15 @@
 ((root) => {
   'use strict';
 
+  // A copy of client.js comboOf(); a test checks they match.
+  function comboOf(e) {
+    const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
+    const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+    const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
+    const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
+    return [...mods, key].filter(Boolean).join('+');
+  }
+
   function createClaudeHub(win) {
     let hub = null;
     const off = () => {};
@@ -32,6 +41,7 @@
         },
         can: (action) => !!standaloneFn(action),
         forwards: () => false,
+        forwardCombos: () => [],
         closeGuard() {},
         openExternal(url) {
           win.open(url, '_blank', 'noopener');
@@ -41,9 +51,9 @@
       return hub;
     }
 
-    return { connect };
+    return { connect, comboOf };
   }
 
-  if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub };
+  if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub, comboOf };
   else root.ClaudeHub = createClaudeHub(root);
 })(typeof window !== 'undefined' ? window : globalThis);

package/public/app.js

@@ -118,10 +118,10 @@ function applyHubTheme() {
   for (const [name, value] of Object.entries(vars ?? {})) root.style.setProperty(name, value);
 }
 
-// Claude's on-disk project-directory name. Matches memory/server.js encodeProjectPath. The hub
+// Claude's on-disk project-directory name: every non-alphanumeric character becomes a dash. The hub
 // owns this transform so cost never has to convert anything; the inverse is lossy and not needed.
 function encodeProjectPath(p) {
-  return p.replace(/\\/g, '/').replace(/:/g, '-').replace(/\//g, '-');
+  return p.replace(/[^a-zA-Z0-9]/g, '-');
 }
 
 function basename(p) {
@@ -154,8 +154,14 @@ function sendTopic(appId, topic, payload) {
   if (liveApps.get(appId)?.has(topic)) postTo(appId, { type: 'hub:event', topic, payload });
 }
 
-function setProject(absPath) {
-  projectState = { project: absPath, encoded: encodeProjectPath(absPath), name: basename(absPath) };
+// `worktrees` are the linked worktrees the projects provider folded into this repo.
+function setProject(absPath, worktrees = []) {
+  projectState = {
+    project: absPath,
+    encoded: encodeProjectPath(absPath),
+    name: basename(absPath),
+    worktrees: worktrees.map((p) => ({ path: p, encoded: encodeProjectPath(p) })),
+  };
   for (const id of Object.keys(iframes)) sendProject(id);
 }
 
@@ -229,6 +235,7 @@ async function init() {
   listenKeys();
   bindPalette();
   registerSW();
+  bindErrorToast();
   showUpdateToast();
 }
 
@@ -273,6 +280,37 @@ async function showUpdateToast() {
   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
 // shows. Only a non-default dir is named, and by basename alone — the PWA window prepends the
 // manifest name, so a product name here would read as "Claude Code Hub - .claude-eom · Hub".
@@ -612,6 +650,8 @@ async function loadProjects() {
       path: p.path,
       name: basename(p.path),
       parent: parentOf(p.path),
+      worktrees: p.worktrees ?? [],
+      worktreeNames: (p.worktrees ?? []).map((w) => basename(w).toLowerCase()),
       ts: p.modifiedAt ? Date.parse(p.modifiedAt) : 0,
     }))
     .sort((a, b) => b.ts - a.ts);
@@ -644,6 +684,7 @@ function projectRows(projects, q) {
     const path = p.path.toLowerCase();
     if (path.split(/[/\\]/).includes(q)) return PATH_RANK;
     if (path.includes(q)) return PATH_RANK + 1;
+    if (p.worktreeNames.some((w) => w.includes(q))) return PATH_RANK + 2;
     return -1;
   };
   let out = projects.map((p) => ({ p, rank: rankOf(p) })).filter((x) => x.rank >= 0);
@@ -712,6 +753,10 @@ function relAge(ts) {
   return `${Math.round(m / 1440)}d`;
 }
 
+async function loadAppStats() {
+  palette.appStats = await sendJson('GET', '/api/apps/stats');
+}
+
 async function loadConfigDirs() {
   palette.configDirs = await sendJson('GET', '/api/config-dirs');
 }
@@ -722,7 +767,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) {
@@ -908,12 +953,17 @@ const PALETTE_MODES = {
     hint: 'Enter switch · Ctrl+R restart the app',
     empty: 'No matching app',
     rows: (_typed, q) => appRows(q),
+    load: loadAppStats,
     initialSel(rows) {
       const prev = rows.findIndex((r) => r.id === previousApp);
       return prev < 0 ? 0 : prev;
     },
     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}%` : '');
+      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}` : '';
       li.append(el('span', 'age', key));
       li.append(rowButton('palette-restart', '↻', 'r', 'Restart the app (Ctrl+R)', `Restart ${row.app.name}`));
@@ -993,7 +1043,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() {
@@ -1025,7 +1078,7 @@ async function commitProject(row) {
   const absPath = row.kind === 'project' ? row.path : await resolveTypedPath(row.path);
   if (!absPath) return;
   closePalette();
-  setProject(absPath);
+  setProject(absPath, row.p?.worktrees);
 }
 
 async function sendJson(method, url, body) {
@@ -1057,7 +1110,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;
     }
   }
@@ -1075,7 +1128,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

@@ -264,6 +264,14 @@
       padding-left: 10px;
     }
 
+    .palette-row .stats {
+      color: var(--text-dim);
+      margin-left: auto;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .palette-row .stats + .age { margin-left: 0; }
+
     .palette-row.literal {
       border-top: 1px solid var(--border);
       color: var(--accent);
@@ -376,6 +384,7 @@
     }
 
     .update-toast-close:hover { color: var(--text); }
+    .error-toast { z-index: 25; border-left-color: #e5484d; }
   </style>
 </head>
 <body>
@@ -448,6 +457,17 @@
     <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

@@ -12,7 +12,7 @@ const { actionTable } = require('./lib/actions');
 const { selectApps, loadApp, conflicts } = require('./lib/apps');
 const { stripCookie } = require('./lib/cookies');
 const { createNetGuard, KEEP_ALIVE_MS } = require('./lib/net-guard');
-const { ping } = require('./lib/ping');
+const { ping, stats } = require('./lib/ipc');
 const { killChild } = require('./lib/kill-child');
 const { readRegistry, themeConfig } = require('./lib/themes');
 const { createUpdateCheck } = require('./lib/update-check');
@@ -926,6 +926,16 @@ app.post('/api/config-dirs/activate', async (req, res) => {
   res.json({ apps: appsConfig() });
 });
 
+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)]),
+  );
+  res.json(Object.fromEntries(entries));
+});
+
 // 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) => {

package/lib/ping.js

@@ -1,23 +0,0 @@
-'use strict';
-
-let seq = 0;
-
-// Resolves true when the child answers hub:ping over its IPC channel within timeoutMs. The channel
-// does not use TCP, so a loopback connect failure does not stop the answer.
-function ping(child, timeoutMs) {
-  if (!child?.connected) return Promise.resolve(false);
-  const id = ++seq;
-  return new Promise((resolve) => {
-    const done = (ok) => {
-      clearTimeout(timer);
-      child.off('message', onMessage);
-      resolve(ok);
-    };
-    const onMessage = (m) => m?.type === 'hub:pong' && m.id === id && done(true);
-    const timer = setTimeout(() => done(false), timeoutMs);
-    child.on('message', onMessage);
-    child.send({ type: 'hub:ping', id }, (err) => err && done(false));
-  });
-}
-
-module.exports = { ping };