claude-code-hub 1.27.2 → 1.29.0

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

@@ -0,0 +1,128 @@
+// Claude Code Hub SDK: the runtime of hub mods, shared by client.js and the hub page. mount() and
+// sdk:sync put it in front of client.js; the hub page gets it inside /mods/hub.js.
+// var, not const: the hub page and an app page each load it as a classic script.
+var ClaudeHubModKit = (() => {
+  'use strict';
+
+  // "<mod id>:<name>". The id must be an installed mod's, so two mods cannot share a topic.
+  const TOPIC_RE = /^([a-z0-9-]+):[\w.-]+$/;
+
+  // The page's mod list is in win.ClaudeHubMods, ahead of this file. Each CSS file loads after the
+  // page's own styles; each JS file is a deferred script, so it runs after a deferred app.js, in
+  // list order. ?nomods in the page URL loads none: the safe mode for a mod that breaks the page.
+  function createMods(win) {
+    const doc = win.document;
+    const off = /[?&]nomods(?:[=&]|$)/.test(win.location?.search ?? '');
+    // Only an app's own tab, or the page on its own. A page nested in an app's page (cck's terminal,
+    // a pane) is not what the mod was written for, and ?nomods reaches only the tabs.
+    const nested = win.parent !== win.top;
+    const assets = off || nested ? null : win.ClaudeHubMods;
+    const list = assets?.mods ?? [];
+    const ids = new Set(list.map((m) => m.id));
+    const listeners = new Map();
+    const wrappedNames = new Set();
+    const outbox = new Map();
+    let sender = null;
+    const report = (what, err) => win.console?.error?.(`[hub mod] ${what}:`, err);
+
+    function load() {
+      if (!assets || !doc) return;
+      const js = assets.js ?? [];
+      // Mod code runs with the page's rights. connect-src stops fetch, XHR, WebSocket and beacons to
+      // other hosts; it does not stop image or script loads or navigation, so it guards against a
+      // careless mod, not a hostile one. Consent at install is the real boundary. A wider policy
+      // (script-src, img-src) would break the apps' own inline scripts and remote images.
+      if (js.length) {
+        doc.head.appendChild(
+          Object.assign(doc.createElement('meta'), {
+            httpEquiv: 'Content-Security-Policy',
+            content: "connect-src 'self'",
+          }),
+        );
+      }
+      const tags = [
+        ...(assets.css ?? []).map((href) => Object.assign(doc.createElement('link'), { rel: 'stylesheet', href })),
+        ...js.map((src) => Object.assign(doc.createElement('script'), { src, defer: true })),
+      ];
+      // document.write keeps a parser-inserted script deferred and in order; appendChild needs async off for that.
+      if (!tags.length) return;
+      if (doc.readyState === 'loading') doc.write(tags.map((t) => t.outerHTML).join(''));
+      else
+        for (const t of tags) {
+          if (t.tagName === 'SCRIPT') t.async = false;
+          (t.tagName === 'LINK' ? doc.head : doc.body).appendChild(t);
+        }
+    }
+
+    // fn(original, ...args). When fn throws, the wrapper returns what original returned, and runs
+    // original first if fn had not called it yet, so a broken mod leaves the app as it was.
+    function wrap(name, fn) {
+      const original = win[name];
+      if (typeof original !== 'function') {
+        report(`wrap(${name})`, new Error('the app has no such global function'));
+        return false;
+      }
+      if (wrappedNames.has(name))
+        win.console?.warn?.(`[hub mod] wrap(${name}): two mods wrap it; the later one runs outside the earlier`);
+      wrappedNames.add(name);
+      win[name] = function wrapped(...args) {
+        let called = false;
+        let result;
+        const next = (...a) => {
+          called = true;
+          result = original.apply(this, a.length ? a : args);
+          return result;
+        };
+        try {
+          return fn.call(this, next, ...args);
+        } catch (err) {
+          report(`wrap(${name})`, err);
+          return called ? result : original.apply(this, args);
+        }
+      };
+      return true;
+    }
+
+    function on(event, fn) {
+      if (!listeners.has(event)) listeners.set(event, new Set());
+      listeners.get(event).add(fn);
+      return () => listeners.get(event)?.delete(fn);
+    }
+
+    function emit(event, detail) {
+      for (const fn of listeners.get(event) ?? []) {
+        try {
+          fn(detail);
+        } catch (err) {
+          report(`on(${event})`, err);
+        }
+      }
+    }
+
+    // To the same mod's code on the hub page, as mod.on(topic) there with {app, data}. Before the
+    // hub answers, only the latest data per topic waits.
+    function send(topic, data) {
+      const m = TOPIC_RE.exec(typeof topic === 'string' ? topic : '');
+      if (!m || !ids.has(m[1])) {
+        report(`send(${topic})`, new Error('the topic must be "<mod id>:<name>", with the id of an installed mod'));
+        return false;
+      }
+      if (sender) sender({ type: 'hub:mod', topic, data });
+      else outbox.set(topic, data);
+      return true;
+    }
+
+    function connectSender(fn) {
+      sender = fn;
+      for (const [topic, data] of outbox) fn({ type: 'hub:mod', topic, data });
+      outbox.clear();
+    }
+
+    load();
+    return { mod: { list, wrap, on, emit, send }, connectSender };
+  }
+
+  return { createMods, TOPIC_RE };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = ClaudeHubModKit;

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

@@ -40,17 +40,40 @@ function answerHub() {
   process.channel.unref();
 }
 
-// What an app page loads as /vendor/claude-hub-sdk.js: keys.js, then client.js or stub.js.
+// What an app page loads as /vendor/claude-hub-sdk.js: keys.js, then client.js with mods.js ahead of it, or stub.js.
 function bundle(file) {
   const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
-  return `${read('keys.js')}\n${read(file)}`;
+  const parts = file === 'client.js' ? ['keys.js', 'mods.js', file] : ['keys.js', file];
+  return parts.map(read).join('\n');
+}
+
+// HUB_MODS, fixed for the process's life: {assets, files}. `assets` is the page's mod list as the
+// client reads it; `files` maps each /mods path to the file on disk, and only those are served.
+// The hub builds both (lib/mods.js appModEnv), so the URL format is not repeated here.
+function readMods() {
+  try {
+    const { assets, files } = JSON.parse(process.env.HUB_MODS || '{}');
+    if (assets && typeof assets === 'object' && files && typeof files === 'object')
+      return { assets, files: new Map(Object.entries(files)) };
+  } catch {}
+  return { assets: null, files: new Map() };
 }
 
 // Mount before express.static: the hub's client must win over the app's stub in public/vendor.
 function mount(app) {
   answerHub();
-  const client = bundle('client.js');
+  const { assets, files } = readMods();
+  const prefix = assets ? `self.ClaudeHubMods = ${JSON.stringify(assets)};\n` : '';
+  const client = prefix + bundle('client.js');
   app.get('/vendor/claude-hub-sdk.js', (_req, res) => res.type('js').send(client));
+  if (files.size) {
+    // app.use, not a route pattern, so it works on each app's Express version.
+    app.use('/mods', (req, res, next) => {
+      const abs = files.get(req.path);
+      if (!abs || (req.method !== 'GET' && req.method !== 'HEAD')) return next();
+      res.sendFile(abs, { maxAge: '1y', immutable: true });
+    });
+  }
   app.get('/hub-config', (_req, res) => {
     res.json({ enabled: !!process.env.CLAUDE_HUB, url: process.env.HUB_URL || null });
   });

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

@@ -40,6 +40,7 @@
         forwards: () => false,
         forwardCombos: () => [],
         keyLabel: () => null,
+        voiceCommands: () => [],
         closeGuard() {},
         openExternal(url) {
           win.open(url, '_blank', 'noopener');
@@ -49,7 +50,8 @@
       return hub;
     }
 
-    return { connect, comboOf };
+    const mod = { list: [], wrap: () => false, on: () => off, emit() {}, send: () => false };
+    return { connect, comboOf, mod };
   }
 
   if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub, comboOf };

package/public/app.js

@@ -126,6 +126,9 @@ const HUB_VARS = {
 };
 // The last applied variables, so the loading screen paints in the theme before /api/config lands.
 const PALETTE_KEY = 'hub-palette';
+// /?nomods: the safe mode for a mod that breaks a page. The hub page and every app frame load no mod.
+const NO_MODS = new URLSearchParams(location.search).has('nomods');
+if (NO_MODS) document.querySelector('link[href="/mods/hub.css"]')?.remove();
 
 // Paints the hub's own surfaces (loading screen, palette) in the active theme. The hub relays
 // hub:theme to the sub-apps; this is what makes it apply to the hub's own chrome too.
@@ -133,6 +136,7 @@ function applyHubTheme() {
   const mode = themeState.theme ?? osTheme();
   const root = document.documentElement;
   root.classList.toggle('light', mode === 'light');
+  root.dataset.hubMode = mode;
   // No app has named a theme yet: paint the one every app starts with.
   const theme = activeColorTheme() ?? DEFAULT_COLOR_THEME;
   const key = `${theme}/${mode}`;
@@ -482,15 +486,51 @@ const handledHere = (action) => actions[action]?.app === activeApp;
 const voiceRowsHere = () => voiceCommands.filter((c) => handledHere(c.action));
 const tabName = () => apps[activeApp]?.name ?? 'this tab';
 
+// The voice.context of the app on screen: {title, rows: {action: false to hide the row, or a help text}}.
+function voiceContextHere() {
+  const last = published.get('voice.context');
+  return last?.from === activeApp && isPlainObject(last.payload?.rows) ? last.payload : null;
+}
+
+// With a title, the rows the app marks come first and the rest fold into one "Also" line.
+function voiceHelpRows(here, ctx) {
+  const marks = ctx?.rows ?? {};
+  const shown = here.filter((c) => marks[c.action] !== false);
+  const row = (c) =>
+    helpRow(
+      c.action,
+      `Hub, ${c.say}`,
+      c.param ? `<${c.param}>` : '',
+      typeof marks[c.action] === 'string' ? marks[c.action] : c.help,
+    );
+  if (typeof ctx?.title !== 'string') {
+    const draft = helpRow('session.paste', 'anything else', '', 'Typed into the session as a draft', 'other');
+    return [...shown.map(row), ...(voice.drafts ? [draft] : [])];
+  }
+  const folded = [
+    ...shown.filter((c) => !marks[c.action]),
+    ...(voice.drafts ? [{ action: 'session.paste', say: 'a draft' }] : []),
+  ];
+  const fold = helpRow(
+    folded.map((c) => c.action).join(' '),
+    `Also: ${folded.map((c) => c.say).join(', ')}`,
+    '',
+    '',
+    'other fold',
+  );
+  return [...shown.filter((c) => marks[c.action]).map(row), ...(folded.length ? [fold] : [])];
+}
+
 // Open for the whole hold: what the user can say on this tab, with the row the words match lit.
 function showVoiceHelp() {
   const panel = document.getElementById('voice-help');
   clearTimeout(voice.helpTimer);
-  const rows = voiceRowsHere().map((c) => helpRow(c.action, `Hub, ${c.say}`, `<${c.param}>`, c.help));
-  if (voice.drafts)
-    rows.push(helpRow('session.paste', 'anything else', '', 'Typed into the session as a draft', 'other'));
-  document.getElementById('voice-help-rows').replaceChildren(...rows);
-  document.getElementById('voice-help-title').textContent = `What you can say on ${tabName()}`;
+  const ctx = voiceContextHere();
+  const asks = typeof ctx?.title === 'string';
+  document.getElementById('voice-help-rows').replaceChildren(...voiceHelpRows(voiceRowsHere(), ctx));
+  const title = document.getElementById('voice-help-title');
+  title.replaceChildren(el('span', '', asks ? ctx.title : `What you can say on ${tabName()}`));
+  title.classList.toggle('asks', asks);
   document.getElementById('voice-help-tip').textContent = voice.drafts
     ? 'Enter during the hold sends · Backspace cancels'
     : 'Backspace cancels';
@@ -506,7 +546,7 @@ function hideVoiceHelp(afterMs = 0) {
 
 function markVoiceHelp(action) {
   for (const row of document.getElementById('voice-help-rows').children) {
-    row.classList.toggle('on', row.dataset.action === action);
+    row.classList.toggle('on', row.dataset.action.split(' ').includes(action));
   }
 }
 
@@ -967,7 +1007,13 @@ function loadApp(id, src, { link = false } = {}) {
 // The terminal token rides in the fragment so it never reaches a server log or a Referer.
 function appSrc(id, path = '') {
   const token = apps[id].terminalToken;
-  return apps[id].url + path + (token ? `#t=${token}` : '');
+  let src = apps[id].url + path;
+  const url = NO_MODS && URL.parse(src);
+  if (url) {
+    url.searchParams.set('nomods', '1');
+    src = url.href;
+  }
+  return src + (token ? `#t=${token}` : '');
 }
 
 // From each app's manifest. Before /api/config lands there are none, and the first line is generic.
@@ -1072,6 +1118,9 @@ function welcomeFor(data, appId) {
     actions: [...Object.keys(actions), ...(hubDictates() ? [DICTATE] : [])],
     origins: Object.keys(apps).map(originOf),
     settings: apps[appId]?.settings ?? {},
+    voice: voiceOn
+      ? voiceCommands.filter((c) => actions[c.action]?.app === appId).map(({ say, help }) => ({ say, help }))
+      : [],
   };
 }
 
@@ -1187,6 +1236,9 @@ function listenMessages() {
       openExternal(data);
     } else if (data.type === 'hub:theme') {
       onThemeMessage(data);
+    } else if (data.type === 'hub:mod' && typeof data.topic === 'string') {
+      // From a mod's code in the app (mod.send) to the same mod on this page, which /mods/hub.js loads.
+      window.ClaudeHub?.mod?.emit(data.topic, { app: appId, data: data.data });
     }
   });
 }

package/public/index.html

@@ -544,9 +544,11 @@
     .voice-help {
       position: fixed;
       right: 16px;
-      bottom: 16px;
+      top: 50%;
+      translate: 0 -50%;
       z-index: 30;
       width: min(360px, calc(100vw - 32px));
+      max-height: calc(100vh - 32px);
       overflow: hidden;
       background: var(--surface);
       border: 1px solid var(--border);
@@ -591,6 +593,12 @@
     .voice-help-row.other .say { color: var(--text); }
     .voice-help-row .say i { color: var(--text-dim); font-style: normal; }
     .voice-help-row .what { color: var(--text-dim); font-size: 12px; }
+    .voice-help-row .what:empty { display: none; }
+    .voice-help-row.fold { padding-block: 6px; }
+    .voice-help-row.fold .say { color: var(--text-dim); font-size: 12px; }
+    .voice-help-title::before { flex-shrink: 0; }
+    .voice-help-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .voice-help-title.asks { color: var(--warn); }
     .voice-help-tip { padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
     @media (prefers-reduced-motion: reduce) {
       .voice-help, .voice-help-title::before { animation: none; }
@@ -630,6 +638,7 @@
     .update-toast-close:hover { color: var(--text); }
     .error-toast { z-index: 25; border-left-color: #e5484d; }
   </style>
+  <link rel="stylesheet" href="/mods/hub.css">
 </head>
 <body>
   <div class="iframe-container" id="iframe-container">
@@ -740,5 +749,6 @@
 
   <script src="/sdk/keys.js"></script>
   <script src="/app.js"></script>
+  <script src="/mods/hub.js"></script>
 </body>
 </html>

package/server.js

@@ -1,5 +1,15 @@
 #!/usr/bin/env node
 
+const { HUB_VERSION, checkArgs, printedUrl } = require('./lib/cli');
+
+// Before the other requires: -v and -h answer at once, and a bad flag never reaches the running-hub check,
+// which prints the hub URL with its token.
+const cli = checkArgs(process.argv.slice(2));
+if (cli.exit !== undefined) {
+  (cli.exit ? console.error : console.log)(cli.out);
+  process.exit(cli.exit);
+}
+
 const { spawn } = require('child_process');
 const crypto = require('crypto');
 const express = require('express');
@@ -16,7 +26,8 @@ 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 { readRegistry, themeConfig, modThemes } = require('./lib/themes');
+const { resolveMods, modAssets, appModEnv, readSurface, hubModScript } = require('./lib/mods');
 const { createUpdateCheck } = require('./lib/update-check');
 const { liveHub, removeRecord, writeRecord } = require('./lib/hub-record');
 const { HUB_PLUGIN } = require('./lib/install');
@@ -32,7 +43,6 @@ const {
   MAX_POOL_SIZE,
   settingValues,
 } = require('./lib/settings');
-const { version: HUB_VERSION } = require('./package.json');
 
 function getArg(name) {
   const idx = process.argv.findIndex((a) => a.startsWith(`--${name}`));
@@ -159,6 +169,9 @@ function resolveHubConfig() {
   // Hand-edited only; kept verbatim so a rewrite of the file does not drop it.
   if (saved.terminal && typeof saved.terminal === 'object') config.terminal = saved.terminal;
   if (Array.isArray(saved.apps)) config.apps = saved.apps;
+  if (Array.isArray(saved.addons)) config.addons = saved.addons;
+  if (Array.isArray(saved.mods)) config.mods = saved.mods;
+  if (typeof saved.modsEnabled === 'boolean') config.modsEnabled = saved.modsEnabled;
   if (saved.keys !== undefined) config.keys = saved.keys;
   if (saved.voice && typeof saved.voice === 'object') config.voice = saved.voice;
   copyLive(saved, config);
@@ -206,6 +219,18 @@ if (!ENABLED_APPS.length) {
   console.error(`No enabled app could load (${ids}). The reasons are logged above.`);
   process.exit(1);
 }
+const SURFACES = {
+  hub: readSurface(__dirname),
+  ...Object.fromEntries(ENABLED_APPS.map((a) => [a.id, readSurface(a.root)])),
+};
+const MODS_OFF = process.argv.includes('--no-mods') || hubConfig.modsEnabled === false;
+if (MODS_OFF && hubConfig.mods?.length) console.log('mods are off (--no-mods or modsEnabled: false): no mod loads');
+const MODS = resolveMods(hubConfig, path.dirname(HUB_CONFIG_FILE), {
+  warn: console.log,
+  surfaces: SURFACES,
+  off: MODS_OFF,
+});
+for (const m of MODS) console.log(`mod ${m.id} changes ${Object.keys(m.targets).join(', ')}`);
 const ACTIONS = actionTable(ENABLED_APPS);
 const { keys: USER_KEYS, lines: keyLines } = userKeys(hubConfig.keys, ENABLED_APPS);
 for (const line of keyLines) console.log(`${HUB_CONFIG_FILE}: ${line}`);
@@ -299,6 +324,10 @@ function childEnv(pool, name) {
     ALLOWED_HOSTS: net.ALLOWED_HOSTS,
     HUB_SDK_SERVER,
   };
+  // The app's own process serves its mod files (the SDK's mount), so they load from the app's origin.
+  const mods = appModEnv(MODS, name);
+  if (mods) env.HUB_MODS = mods;
+  else delete env.HUB_MODS;
   if (TERMINAL.enabled && name === TERMINAL_APP.id) {
     env.CCK_TERMINAL = JSON.stringify(TERMINAL);
     env.CCK_TERMINAL_TOKEN = TERMINAL_TOKEN;
@@ -919,6 +948,7 @@ app.use(express.json());
 const THEME_REGISTRY = readRegistry();
 // Read on each /api/config, so an edit applies on the next page load.
 const USER_THEMES_FILE = path.join(HUB_DIR, 'themes.json');
+const MOD_THEMES = modThemes(THEME_REGISTRY, MODS, console.log);
 
 function appsConfig() {
   return Object.fromEntries(
@@ -958,7 +988,7 @@ app.get('/api/update', async (_req, res) => {
 
 app.get('/api/config', (_req, res) => {
   res.json({
-    ...themeConfig(THEME_REGISTRY, { userFile: USER_THEMES_FILE }),
+    ...themeConfig(THEME_REGISTRY, { userFile: USER_THEMES_FILE, extra: MOD_THEMES }),
     apps: appsConfig(),
     actions: ACTIONS,
     keys: USER_KEYS,
@@ -1328,7 +1358,6 @@ app.get('/api/projects', async (_req, res) => {
 });
 
 // Voice control, off unless config.json has voice.enabled; lib/voice loads only then.
-const VOICE_LOG = path.join(HUB_DIR, 'voice.jsonl');
 const voice = hubConfig.voice?.enabled === true ? loadVoice() : null;
 
 function loadVoice() {
@@ -1353,27 +1382,17 @@ const heldOn = (req) => (typeof req.query.app === 'string' ? req.query.app : und
 app.post('/api/voice/text', express.json({ limit: '64kb' }), async (req, res) => {
   if (!voice) return res.status(404).json({ error: 'voice is off' });
   if (typeof req.body?.text !== 'string') return res.status(400).json({ error: 'text is required' });
-  const t0 = Date.now();
-  const r = await voice.text(req.body.text, req.body.final === true, heldOn(req));
-  if (req.body.final === true) logVoice(r, t0, { provider: 'browser' });
-  res.json(r);
+  res.json(await voice.text(req.body.text, req.body.final === true, heldOn(req)));
 });
 
 app.post('/api/voice/:op', async (req, res) => {
   if (!voice) return res.status(404).json({ error: 'voice is off' });
   const { op } = req.params;
   if (!['start', 'stop', 'dictate', 'cancel'].includes(op)) return res.status(404).json({ error: 'unknown op' });
-  const t0 = Date.now();
   const r = await voice[op](heldOn(req));
-  if ((op === 'stop' || op === 'dictate') && r.ok) logVoice(r, t0);
   res.status(r.ok ? 200 : 502).json(r);
 });
 
-function logVoice(r, t0, extra) {
-  const entry = { at: new Date().toISOString(), text: r.text, command: r.command, ms: Date.now() - t0, ...extra };
-  fs.appendFile(VOICE_LOG, `${JSON.stringify(entry)}\n`, () => {});
-}
-
 // Live speech: the page sends mic audio while the key is held, about 5 posts a second, and each
 // answer carries the text so far. 501 sends the page back to /api/voice/start and /stop.
 app.post(
@@ -1385,9 +1404,7 @@ app.post(
     if (!['start', 'audio', 'finish', 'cancel'].includes(op)) return res.status(404).json({ error: 'unknown op' });
     if (!voice.stream) return res.status(501).json({ error: 'no live speech' });
     if (op === 'audio' && !Buffer.isBuffer(req.body)) return res.status(400).json({ error: 'audio is required' });
-    const t0 = Date.now();
     const r = await voice.stream[op](req.body, heldOn(req));
-    if (op === 'finish' && r.ok) logVoice(r, t0, { live: true });
     res.status(r.ok ? 200 : r.unsupported ? 501 : 502).json(r);
   },
 );
@@ -1409,6 +1426,27 @@ app.get('/api/resolve-path', (req, res) => {
 
 const HUB_KEYS_JS = path.join(__dirname, 'packages', 'claude-hub-sdk', 'src', 'keys.js');
 app.get('/sdk/keys.js', (_req, res) => res.sendFile(HUB_KEYS_JS));
+// Public like the rest of the page's styles. Only the files a manifest lists are served.
+const HUB_MOD_ASSETS = modAssets(MODS, 'hub');
+const HUB_MOD_CSS = HUB_MOD_ASSETS.css.map((u) => `@import url("${u}");`).join('\n');
+const HUB_MOD_JS = hubModScript(HUB_MOD_ASSETS);
+app.get('/mods/hub.css', (_req, res) => res.type('css').set('Cache-Control', 'no-cache').send(HUB_MOD_CSS));
+app.get('/mods/hub.js', (_req, res) => res.type('js').set('Cache-Control', 'no-cache').send(HUB_MOD_JS));
+app.get('/mods/:id/*', (req, res, next) => {
+  const abs = HUB_MOD_ASSETS.files.get(`/${req.params.id}/${req.params[0]}`);
+  if (!abs) return next();
+  res.sendFile(abs, { maxAge: '1y', immutable: true });
+});
+// With no hub mod, or under ?nomods, the page leaves out the mod tags: no two extra requests, and
+// no render-blocking stylesheet that safe mode would paint before app.js removes it.
+const HUB_PAGE = path.join(__dirname, 'public', 'index.html');
+const HUB_HAS_MODS = HUB_MOD_ASSETS.css.length > 0 || HUB_MOD_ASSETS.js.length > 0;
+const MOD_TAGS = ['<link rel="stylesheet" href="/mods/hub.css">', '<script src="/mods/hub.js"></script>'];
+app.get(['/', '/index.html'], (req, res, next) => {
+  if (HUB_HAS_MODS && req.query.nomods === undefined) return next();
+  const html = MOD_TAGS.reduce((page, tag) => page.replace(tag, ''), fs.readFileSync(HUB_PAGE, 'utf8'));
+  res.type('html').set('Cache-Control', 'no-cache').send(html);
+});
 app.use(express.static(path.join(__dirname, 'public')));
 
 // Children get HUB_URL at spawn and trust only that origin, so the first pool waits for the port
@@ -1435,7 +1473,7 @@ if (!TRAY_FLAG) {
       listenWithFallback(app, HUB_PORT, onReady, '');
       return;
     }
-    console.log(`Claude Code Hub already runs for ${HUB_DIR} at ${accessUrl(running.port)}`);
+    printUrl(`Claude Code Hub already runs for ${HUB_DIR} at`, running.port);
     if (process.argv.includes('--open')) {
       import('open').then((m) => m.default(accessUrl(running.port))).finally(() => process.exit(0));
     } else {
@@ -1448,8 +1486,13 @@ function accessUrl(port) {
   return `http://localhost:${port}/?token=${HUB_TOKEN}`;
 }
 
+function printUrl(line, port) {
+  const show = process.argv.includes('--show-token') || require('tty').isatty(1);
+  console.log(printedUrl(line, accessUrl(port), { show, tokenFile: HUB_TOKEN_FILE }));
+}
+
 function printBanner(port) {
-  console.log(`Claude Code Hub running at ${accessUrl(port)}`);
+  printUrl('Claude Code Hub running at', port);
   const warning = net.exposureWarning();
   if (warning) console.log(warning);
   console.log('Type "q" or "exit" to stop the server');