claude-code-hub 1.8.0 → 1.10.0

package/lib/apps.js

@@ -4,6 +4,7 @@ const fs = require('node:fs');
 const path = require('node:path');
 const { isContained } = require('./contain');
 const { COMBO_RE } = require('./keymap');
+const { bundledVersion } = require('./plugin-status');
 
 // Built-in apps in their default tab order. The rest of each app comes from its manifest.
 const APPS = [
@@ -65,7 +66,19 @@ function manifestError(m, id, root) {
   if (typeof m.run?.entry !== 'string') return 'run.entry is missing';
   const entry = path.resolve(root, m.run.entry);
   if (entry === path.resolve(root) || !isContained(entry, root)) return 'run.entry is outside the app directory';
-  return providesError(m.provides) ?? publishesError(m.publishes) ?? keysError(m.keys);
+  return providesError(m.provides) ?? publishesError(m.publishes) ?? keysError(m.keys) ?? pluginError(m.plugin, root);
+}
+
+const PLUGIN_ID_RE = /^[\w.-]+@[\w.-]+$/;
+
+function pluginError(plugin, root) {
+  if (plugin === undefined) return null;
+  if (typeof plugin?.id !== 'string' || !PLUGIN_ID_RE.test(plugin.id)) return 'plugin.id is not <name>@<marketplace>';
+  if (typeof plugin.path !== 'string') return 'plugin.path is missing';
+  const dir = path.resolve(root, plugin.path);
+  if (dir === path.resolve(root) || !isContained(dir, root)) return 'plugin.path is outside the app directory';
+  if (typeof plugin.install !== 'string' || !plugin.install) return 'plugin.install is missing';
+  return null;
 }
 
 function keysError(keys) {
@@ -146,8 +159,19 @@ function loadApp(app, { flagPort, hubRoot = HUB_ROOT, resolve = require.resolve,
     log(`${path.join(root, 'hub-app.json')}: ${reason}. ${app.id} is skipped`);
     return null;
   }
+  let version = null;
+  try {
+    version = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')).version ?? null;
+  } catch {}
+  const { plugin } = manifest;
   return {
     id: app.id,
+    version,
+    plugin: plugin && {
+      id: plugin.id,
+      bundled: bundledVersion(path.join(root, plugin.path)),
+      install: plugin.install,
+    },
     entry: path.join(root, manifest.run.entry),
     port: userPort(app, flagPort, log) ?? manifest.run.defaultPort ?? 0,
     name: manifest.name ?? app.id,

package/lib/install.js

@@ -2,18 +2,22 @@
 
 const { execSync } = require('node:child_process');
 const fs = require('node:fs');
-const os = require('node:os');
 const path = require('node:path');
+const { bundledVersion, isDefaultConfigDir } = require('./plugin-status');
 
 const PLUGIN_SRC = path.join(__dirname, '..', 'plugin');
 const MARKETPLACE = 'claude-code-hub';
 const PLUGIN_ID = `claude-code-hub@${MARKETPLACE}`;
+const HUB_PLUGIN = {
+  id: PLUGIN_ID,
+  bundled: bundledVersion(path.join(PLUGIN_SRC, 'plugins', 'claude-code-hub')),
+  install: 'claude-code-hub --install',
+};
 
 // Claude Code keeps .claude.json beside ~/.claude when CLAUDE_CONFIG_DIR is unset but inside the
 // dir when it is set, so the default dir must stay unset rather than be spelled out.
 function claudeEnv(configDir) {
-  const isDefault = path.resolve(configDir) === path.resolve(os.homedir(), '.claude');
-  return isDefault ? process.env : { ...process.env, CLAUDE_CONFIG_DIR: configDir };
+  return isDefaultConfigDir(configDir) ? process.env : { ...process.env, CLAUDE_CONFIG_DIR: configDir };
 }
 
 // `idempotent` when the output names an ok pattern, on exit 0 too: some commands report "already" and succeed.
@@ -86,4 +90,4 @@ function runUninstall({ configDir }) {
   return ok;
 }
 
-module.exports = { runInstall, runUninstall, claudeEnv };
+module.exports = { runInstall, runUninstall, claudeEnv, HUB_PLUGIN };

package/lib/plugin-status.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+
+function readJson(file) {
+  try {
+    return JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch {
+    return null;
+  }
+}
+
+function isDefaultConfigDir(configDir) {
+  return path.resolve(configDir) === path.resolve(os.homedir(), '.claude');
+}
+
+// --dir rather than CLAUDE_CONFIG_DIR=…, so the same line runs in bash, PowerShell and cmd.
+function installCommand(base, configDir) {
+  return isDefaultConfigDir(configDir) ? base : `${base} --dir "${configDir}"`;
+}
+
+// The version in the plugin.json under pluginDir, the folder an app or the hub ships its plugin in.
+function bundledVersion(pluginDir) {
+  return readJson(path.join(pluginDir, '.claude-plugin', 'plugin.json'))?.version ?? null;
+}
+
+// Reads the config dir once and gives a check for each plugin, {id, bundled, install}. The claude CLI
+// records installs in <config dir>/plugins/installed_plugins.json, one entry per scope; a user-scope
+// entry wins, because the installers install at user scope.
+function pluginChecker(configDir) {
+  const installs = readJson(path.join(configDir, 'plugins', 'installed_plugins.json'))?.plugins ?? {};
+  const enabledPlugins = readJson(path.join(configDir, 'settings.json'))?.enabledPlugins ?? {};
+  return ({ id, bundled, install }) => {
+    const entries = Array.isArray(installs[id]) ? installs[id] : [];
+    const entry = entries.find((e) => e?.scope === 'user') ?? entries[0];
+    const installed = typeof entry?.version === 'string' ? entry.version : null;
+    let state = 'ok';
+    if (!installed) state = 'missing';
+    else if (enabledPlugins[id] === false) state = 'disabled';
+    else if (bundled && installed !== bundled) state = 'mismatch';
+    return { id, bundled, installed, state, installCommand: installCommand(install, configDir) };
+  };
+}
+
+module.exports = { pluginChecker, bundledVersion, isDefaultConfigDir };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -46,10 +46,10 @@
   },
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
-    "claude-code-cost": "1.3.0",
-    "claude-code-kanban": "7.4.0",
-    "claude-code-marketplace": "1.4.1",
-    "claude-code-memory-explorer": "1.2.0",
+    "claude-code-cost": "1.3.1",
+    "claude-code-kanban": "7.6.0",
+    "claude-code-marketplace": "1.5.1",
+    "claude-code-memory-explorer": "1.3.1",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/plugin/plugins/claude-code-hub/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Claude Code Hub integration: a skill to build on and extend the hub, with links to its docs, the extension mechanism and custom themes",
   "author": {
     "name": "NikiforovAll"

package/plugin/plugins/claude-code-hub/skills/hub-builder/references/extensibility.md

@@ -60,7 +60,7 @@ After a server change, restart the app: `Ctrl+Alt+A`, select it, `Ctrl+R`. After
 
 ## The manifest
 
-`hub-app.json` declares how to run the app and what it offers: `manifest: 1`, `id`, `name`, `icon` (a Lucide name), `run.entry` (inside the folder; a path into `node_modules` is fine), `run.defaultPort`, `loading.verbs`, `publishes`, `actions.handles`, `provides`. The hub reads it before the app runs and skips the app, with a log line, when it breaks a rule. Page: `extensibility/reference/manifest/`.
+`hub-app.json` declares how to run the app and what it offers: `manifest: 1`, `id`, `name`, `icon` (a Lucide name), `run.entry` (inside the folder; a path into `node_modules` is fine), `run.defaultPort`, `loading.verbs`, `publishes`, `actions.handles`, `provides`, `keys.keeps`, `plugin` (`{id, path, install}` of a Claude Code plugin the app ships; the app launcher shows its state). The hub reads it before the app runs and skips the app, with a log line, when it breaks a rule. Page: `extensibility/reference/manifest/`.
 
 The npm packages of the built-in tools do not ship `hub-app.json`. A patch or fork starts from the tool's manifest in its GitHub repo and changes `id`, `name` and `run.entry`. Page for what each built-in declares: `extensibility/reference/built-in/`.
 

package/public/app.js

@@ -37,6 +37,8 @@ const missed = new Map();
 const MAX_EVENT_CHARS = 16 * 1024;
 // The config dir the hub falls back to (~/.claude). Stays out of the window title.
 let defaultConfigDir = null;
+// The app launcher's footer: the hub version from /api/config and its plugin from /api/apps/stats.
+const hubInfo = { version: null, plugin: null };
 // mode: 'project' (Ctrl+Alt+P), 'configDir' (Ctrl+Alt+W) or 'app' (Ctrl+Alt+A). One widget, three row sources.
 const palette = {
   open: false,
@@ -47,6 +49,7 @@ const palette = {
   sel: 0,
   query: '',
   confirmRestart: null,
+  message: null,
 };
 
 function loadThemeState() {
@@ -229,6 +232,7 @@ async function init() {
   const res = await fetch('/api/config');
   const config = await res.json();
   userKeys = config.keys ?? {};
+  hubInfo.version = config.version ?? null;
   setApps(config.apps);
   defaultConfigDir = config.defaultConfigDir ?? null;
   activeConfigDir = config.activeConfigDir ?? null;
@@ -816,7 +820,9 @@ function relAge(ts) {
 }
 
 async function loadAppStats() {
-  palette.appStats = await sendJson('GET', '/api/apps/stats');
+  const { hub, apps: appStats } = await sendJson('GET', '/api/apps/stats');
+  palette.appStats = appStats;
+  hubInfo.plugin = hub.plugin;
 }
 
 async function loadConfigDirs() {
@@ -920,8 +926,52 @@ function rowButton(className, glyph, key, title, label) {
   return btn;
 }
 
-function setPaletteHint(text) {
-  document.getElementById('palette-hint').textContent = text;
+// The footer shows palette.message, set by an action, else the mode's hint.
+function drawPaletteHint() {
+  const content = palette.message ?? PALETTE_MODES[palette.mode].hint ?? '';
+  document.getElementById('palette-hint').replaceChildren(...[].concat(content));
+}
+
+function setPaletteHint(message) {
+  palette.message = message;
+  drawPaletteHint();
+}
+
+// The plugin in the active config dir: its version, or a ⚠ that copies the install command.
+function pluginNode(p) {
+  const problem = {
+    missing: { label: 'plugin not installed', cause: `${p.id} is not installed in this config dir.` },
+    disabled: {
+      label: `plugin ${p.installed} is off`,
+      cause: `${p.id} ${p.installed} is disabled. Enable it with /plugin in Claude Code.`,
+      noCopy: true,
+    },
+    mismatch: {
+      label: `plugin ${p.installed}`,
+      cause: `${p.id} ${p.installed} is installed, this version ships ${p.bundled}.`,
+    },
+  }[p.state];
+  if (!problem) return el('span', 'ver', `plugin ${p.installed}`);
+  const badge = el('button', 'plugin-warn', `⚠ ${problem.label}`);
+  badge.type = 'button';
+  badge.title = problem.cause;
+  badge.setAttribute('aria-label', problem.cause);
+  if (problem.noCopy) return badge;
+  badge.title += `\nClick to copy: ${p.installCommand}\nThen restart open sessions.`;
+  badge.addEventListener('click', (e) => {
+    e.stopPropagation();
+    copyToHint(p.installCommand);
+  });
+  return badge;
+}
+
+async function copyToHint(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    setPaletteHint(`Copied ${text}`);
+  } catch (err) {
+    setPaletteHint(`Could not copy ${text}: ${err.message}`);
+  }
 }
 
 // The terminal provider answers 409 with a terminal count; the second Ctrl+R on the same app sends force.
@@ -944,16 +994,6 @@ async function restartFromPalette(id) {
   switchTab(id);
 }
 
-async function copyAppUrl(id) {
-  const url = apps[id].url;
-  try {
-    await navigator.clipboard.writeText(url);
-    setPaletteHint(`Copied ${url}`);
-  } catch (err) {
-    setPaletteHint(`Could not copy ${url}: ${err.message}`);
-  }
-}
-
 // `typed` is the trimmed query, `q` its lowercase form for matching.
 const PALETTE_MODES = {
   project: {
@@ -1019,7 +1059,12 @@ const PALETTE_MODES = {
   app: {
     placeholder: 'Search apps...',
     label: 'Switch app',
-    hint: 'Enter switch · Ctrl+C copy the URL · Ctrl+R restart the app',
+    get hint() {
+      const keys = 'Enter switch · Ctrl+C copy the URL · Ctrl+R restart the app';
+      if (!hubInfo.version) return keys;
+      const plugin = hubInfo.plugin ? [pluginNode(hubInfo.plugin), ' · '] : [];
+      return [`Claude Code Hub ${hubInfo.version} · `, ...plugin, keys];
+    },
     empty: 'No matching app',
     rows: (_typed, q) => appRows(q),
     load: loadAppStats,
@@ -1030,6 +1075,8 @@ const PALETTE_MODES = {
     fillRow(li, row, q) {
       li.append(appIcon(row.app), markedSpan('name', row.app.name, q), el('span', 'url', new URL(row.app.url).host));
       const s = palette.appStats?.[row.id];
+      if (s?.version) li.append(el('span', 'ver', s.version));
+      if (s?.plugin) li.append(pluginNode(s.plugin));
       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.`;
@@ -1046,7 +1093,7 @@ const PALETTE_MODES = {
         rowButton('palette-restart', '↻', 'r', 'Restart the app (Ctrl+R)', `Restart ${row.app.name}`),
       );
     },
-    rowKeys: { c: (row) => copyAppUrl(row.id), r: (row) => restartFromPalette(row.id) },
+    rowKeys: { c: (row) => copyToHint(apps[row.id].url), r: (row) => restartFromPalette(row.id) },
     commit(row) {
       closePalette();
       switchTab(row.id);
@@ -1105,10 +1152,11 @@ function openPalette(mode) {
   palette.query = '';
   palette.sel = null;
   palette.confirmRestart = null;
+  palette.message = null;
   input.value = '';
   input.placeholder = spec.placeholder;
   document.querySelector('#palette .palette-box').setAttribute('aria-label', spec.label);
-  setPaletteHint(spec.hint ?? '');
+  drawPaletteHint();
   document.getElementById('palette').hidden = false;
   // Ctrl+Alt+P usually arrives forwarded from a focused iframe. Without inert the sub-app can keep
   // or take focus back, and then Escape is handled inside it — the palette stays open and only the
@@ -1119,7 +1167,9 @@ function openPalette(mode) {
   // Stale-while-revalidate: the cached list renders instantly, recency refreshes when this lands.
   Promise.resolve(spec.load?.())
     .then(() => {
-      if (palette.open && palette.mode === mode) renderPalette();
+      if (!palette.open || palette.mode !== mode) return;
+      drawPaletteHint();
+      renderPalette();
     })
     .catch((err) => {
       if (err.status === 401) showErrorToast('Could not load the list', err);

package/public/index.html

@@ -24,6 +24,7 @@
       --surface-hover: #1f2a4a;
       --text: #e8e8ef;
       --text-dim: #8a8fa3;
+      --warn: #f5a524;
       --shadow: rgba(0, 0, 0, 0.55);
       --ghost-mix: 22%;
     }
@@ -39,6 +40,7 @@
       --surface-hover: #f1f1f4;
       --text: #18181b;
       --text-dim: #71717a;
+      --warn: #8a4b00;
       --shadow: rgba(0, 0, 0, 0.18);
       --ghost-mix: 10%;
     }
@@ -283,11 +285,30 @@
       margin-left: 10px;
       padding: 0 6px;
       border-radius: 4px;
-      color: #f5a524;
-      border: 1px solid #f5a524;
+      color: var(--warn);
+      border: 1px solid var(--warn);
       font-size: 11px;
     }
 
+    .palette-row .ver,
+    .palette-hint .ver {
+      color: var(--text-dim);
+      font-size: 12px;
+    }
+
+    .plugin-warn {
+      padding: 0 6px;
+      border: 1px solid var(--warn);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--warn);
+      font: inherit;
+      font-size: 11px;
+      cursor: pointer;
+    }
+
+    .palette-hint .plugin-warn { border: none; padding: 0; font-size: 12px; }
+
     .palette-row.literal {
       border-top: 1px solid var(--border);
       color: var(--accent);

package/server.js

@@ -19,6 +19,8 @@ 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');
+const { HUB_PLUGIN } = require('./lib/install');
+const { pluginChecker } = require('./lib/plugin-status');
 const { version: HUB_VERSION } = require('./package.json');
 
 function getArg(name) {
@@ -893,6 +895,7 @@ app.get('/api/config', (_req, res) => {
     keys: USER_KEYS,
     activeConfigDir: hubConfig.activeConfigDir,
     defaultConfigDir,
+    version: HUB_VERSION,
   });
 });
 
@@ -999,14 +1002,19 @@ const STATS_TIMEOUT_MS = 1000;
 app.get('/api/apps/stats', async (_req, res) => {
   res.setHeader('Cache-Control', 'no-store');
   const pool = activePool();
+  const check = pluginChecker(hubConfig.activeConfigDir);
+  const plugin = (p) => (p ? check(p) : null);
   const entries = await Promise.all(
     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 }];
+      return [
+        a.id,
+        { ...(await stats(child, STATS_TIMEOUT_MS)), slowMs, version: a.version, plugin: plugin(a.plugin) },
+      ];
     }),
   );
-  res.json(Object.fromEntries(entries));
+  res.json({ hub: { plugin: plugin(HUB_PLUGIN) }, apps: Object.fromEntries(entries) });
 });
 
 // Restarting the terminal provider ends its live terminals, so that takes force: true.