claude-code-hub 1.34.0 → 1.36.0

package/public/index.html

@@ -25,6 +25,7 @@
       --text: #e8e8ef;
       --text-dim: #8a8fa3;
       --warn: #f5a524;
+      --ok: #3fb950;
       --shadow: rgba(0, 0, 0, 0.55);
       --ghost-mix: 22%;
     }
@@ -41,6 +42,7 @@
       --text: #18181b;
       --text-dim: #71717a;
       --warn: #8a4b00;
+      --ok: #1a7f37;
       --shadow: rgba(0, 0, 0, 0.18);
       --ghost-mix: 10%;
     }
@@ -413,6 +415,28 @@
     .settings-bar h3 { font-size: 14px; font-weight: 600; }
     .settings-bar kbd { margin-left: auto; }
 
+    #settings .palette-box { width: min(820px, 94vw); }
+    #settings-body:has(> .set-nav) { display: grid; grid-template-columns: 150px 1fr; min-height: 360px; }
+
+    .set-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 8px 6px;
+      border-right: 1px solid var(--border);
+    }
+
+    .settings-box .set-nav button {
+      border: none;
+      border-radius: 6px;
+      background: none;
+      padding: 6px 10px;
+      text-align: left;
+      color: var(--text-dim);
+    }
+
+    .set-pane { min-width: 0; }
+
     .set-sec { padding: 6px 0; border-bottom: 1px solid var(--border); }
     .set-sec:last-child { border-bottom: none; }
 
@@ -450,6 +474,103 @@
       cursor: pointer;
     }
 
+    #setup { padding-top: 6vh; }
+
+    .setup-box {
+      width: min(860px, 94vw);
+      max-height: 88vh;
+      border-radius: 14px;
+      box-shadow: 0 28px 80px var(--shadow);
+      font-size: 14px;
+    }
+
+    .setup-hero {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      padding: 28px 32px 22px;
+      border-bottom: 1px solid var(--border);
+      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
+    }
+
+    .setup-hero img { width: 56px; height: 56px; flex: none; }
+    .setup-hero h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
+    .setup-hero p { margin-top: 4px; color: var(--text-dim); font-size: 13px; }
+    .setup-hero kbd { margin-left: auto; align-self: flex-start; }
+
+    .setup-meter { display: flex; align-items: center; gap: 14px; padding: 18px 32px 6px; }
+    .setup-lead { flex: none; color: var(--text-dim); font-size: 13px; }
+    .setup-lead b { color: var(--text); }
+    .setup-progress { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
+    .setup-progress > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
+
+    .setup-steps { display: grid; gap: 10px; list-style: none; padding: 12px 24px 24px; }
+
+    .setup-step {
+      display: grid;
+      grid-template-columns: 36px 1fr auto;
+      gap: 4px 16px;
+      align-items: center;
+      padding: 16px 18px;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+
+    .setup-step.current {
+      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+      background: color-mix(in srgb, var(--accent) 7%, transparent);
+    }
+
+    .setup-step.done { opacity: 0.75; }
+
+    .setup-mark {
+      grid-row: span 2;
+      align-self: start;
+      display: grid;
+      place-items: center;
+      width: 36px;
+      height: 36px;
+      border: 2px solid var(--border);
+      border-radius: 50%;
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-dim);
+    }
+
+    .setup-step.done .setup-mark { border-color: var(--accent); background: var(--accent); color: var(--bg); }
+    .setup-step.current .setup-mark { border-color: var(--accent); color: var(--accent); }
+    .setup-title { font-size: 16px; font-weight: 700; }
+    .setup-step.done .setup-title { font-weight: 600; }
+    .setup-desc { grid-column: 2 / -1; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
+    .setup-tag { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-weight: 500; color: var(--text-dim); vertical-align: 2px; }
+
+    .setup-list { grid-column: 2 / -1; display: grid; gap: 6px; margin-top: 10px; }
+
+    .setup-item {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 4px 12px;
+      align-items: center;
+      padding: 8px 12px;
+      border-radius: 6px;
+      background: var(--bg);
+      font-size: 13px;
+    }
+
+    .setup-item code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+    .setup-item .set-help { grid-column: 1 / -1; }
+    .setup-item a { color: var(--accent); font-size: 12px; }
+    .setup-notice { padding: 8px 12px; border-left: 3px solid var(--warn); background: var(--bg); border-radius: 6px; font-size: 13px; }
+    .setup-ok { color: var(--text-dim); font-size: 12px; }
+    .setup-ok.good { color: var(--ok); font-weight: 600; }
+    .setup-out { grid-column: 2 / -1; max-height: 160px; overflow: auto; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; white-space: pre-wrap; }
+
+    .setup-box .settings-foot { padding: 14px 32px; align-items: center; font-size: 13px; }
+    .setup-box button { padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; }
+    .setup-box .setup-item button { padding: 3px 10px; font-size: 12px; }
+    .settings-box.setup-box button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+    .settings-box.setup-box button.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
+
     .settings-box button:hover:not(:disabled) { color: var(--text); }
     .settings-box button:disabled { opacity: 0.4; cursor: default; }
 
@@ -469,7 +590,8 @@
 
     .seg button { border-color: transparent; }
 
-    .seg button.on {
+    .seg button.on,
+    .settings-box .set-nav button[aria-selected="true"] {
       background: color-mix(in srgb, var(--accent) 18%, transparent);
       color: var(--text);
       font-weight: 600;
@@ -486,6 +608,14 @@
     .set-apps th { color: var(--text-dim); font-size: 11px; font-weight: 400; }
     .set-apps td:first-child { font-weight: 600; }
 
+    .keys-table tr.recording td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
+    .key-btns { display: flex; gap: 4px; }
+    .key-tag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--text-dim); }
+    .key-combo { display: inline-flex; align-items: center; gap: 6px; }
+    .key-local { color: var(--text-dim); font-size: 11px; }
+    .key-prompt { color: var(--accent); font-weight: 600; }
+    .key-keeps { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 10px; }
+
     .settings-foot { display: flex; gap: 12px; }
 
     .settings-foot .set-keys { margin-left: auto; }
@@ -707,12 +837,36 @@
     </div>
   </div>
 
+  <div class="palette" id="shortcuts" hidden>
+    <div class="palette-box settings-box" role="dialog" aria-modal="true" aria-labelledby="shortcuts-title" tabindex="-1">
+      <div class="settings-bar"><h3 id="shortcuts-title">Keyboard shortcuts</h3><kbd>Esc</kbd></div>
+      <div id="shortcuts-body"></div>
+      <div class="palette-hint settings-foot" id="shortcuts-foot"></div>
+    </div>
+  </div>
+
+  <div class="palette" id="setup" hidden>
+    <div class="palette-box settings-box setup-box" role="dialog" aria-modal="true" aria-labelledby="setup-title" tabindex="-1">
+      <div class="setup-hero">
+        <img src="/icons/icon-192.svg" alt="">
+        <div>
+          <h3 id="setup-title">Welcome to Claude Code Hub</h3>
+          <p id="setup-sub">A few quick steps make the hub feel like a desktop app.</p>
+        </div>
+        <kbd>Esc</kbd>
+      </div>
+      <div id="setup-body"></div>
+      <div class="palette-hint settings-foot" id="setup-foot"></div>
+    </div>
+  </div>
+
   <div class="update-toast" id="update-toast" role="status" hidden>
     <div class="update-toast-body">
       <div class="update-toast-title">Claude Code Hub <span id="update-latest"></span> is available</div>
       <div class="update-toast-meta">You have <span id="update-current"></span> · <a id="update-notes" target="_blank" rel="noopener">Release notes</a></div>
-      <code>npm i -g claude-code-hub@latest</code>
+      <code id="update-command"></code>
       <div class="update-toast-actions">
+        <button class="update-toast-skip" id="update-review" type="button">Review update…</button>
         <button class="update-toast-skip" id="update-skip" type="button">Skip this version</button>
       </div>
     </div>

package/server.js

@@ -33,6 +33,7 @@ const { liveHub, removeRecord, writeRecord } = require('./lib/hub-record');
 const { HUB_PLUGIN } = require('./lib/install');
 const { pluginChecker } = require('./lib/plugin-status');
 const { readConfig, serializeConfig, writeConfigFile } = require('./lib/hub-config');
+const { ONBOARDING, findConfigDirs, pluginsToInstall, setupStatus } = require('./lib/onboarding');
 const {
   appSettings,
   appsShape,
@@ -174,6 +175,7 @@ function resolveHubConfig() {
   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;
+  if (ONBOARDING.includes(saved.onboarding)) config.onboarding = saved.onboarding;
   copyLive(saved, config);
   const savedPrevious = typeof saved.previousConfigDir === 'string' ? canonical(saved.previousConfigDir) : null;
   if (dirs.includes(savedPrevious) && savedPrevious !== active) config.previousConfigDir = savedPrevious;
@@ -232,7 +234,7 @@ const MODS = resolveMods(hubConfig, path.dirname(HUB_CONFIG_FILE), {
 });
 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);
+let { keys: userKeyMap, lines: keyLines } = userKeys(hubConfig.keys, ENABLED_APPS);
 for (const line of keyLines) console.log(`${HUB_CONFIG_FILE}: ${line}`);
 // The first enabled app in tab order that declares the capability in its manifest.
 const provider = (cap) => ENABLED_APPS.find((a) => a.provides[cap]);
@@ -395,6 +397,7 @@ async function restartApp(pool, app) {
   const { id } = app;
   pool.restarts[id] = [];
   pool.stopped.delete(id);
+  pool.deferred.delete(id);
   await killApp(pool, id);
   if (pool.retired) return false;
   const child = spawnOne(pool, app);
@@ -404,9 +407,21 @@ async function restartApp(pool, app) {
 
 async function stopApp(pool, { id }) {
   pool.stopped.add(id);
+  pool.deferred.delete(id);
   await killApp(pool, id);
 }
 
+// A deferredStart app that nothing has started yet starts on its first page load: its tab, a pane,
+// an action. One the user stopped stays stopped.
+function startOnDemand(name) {
+  const pool = activePool();
+  if (!pool?.deferred.delete(name)) return;
+  console.log(`[${name}] starting on first open`);
+  pool.stopped.delete(name);
+  const target = ENABLED_APPS.find((a) => a.id === name);
+  spawnOne(pool, target);
+}
+
 // Out of pool.children before the kill, so the exit handler does not restart it.
 async function killApp(pool, id) {
   const old = pool.children.get(id);
@@ -446,7 +461,7 @@ async function ensurePool(dir) {
   pool = pools.get(dir);
   if (pool) return pool.ready;
   const stopped = new Set(ENABLED_APPS.filter((a) => a.deferredStart).map((a) => a.id));
-  pool = { dir, children: new Map(), ports: {}, restarts: {}, stopped, retired: false };
+  pool = { dir, children: new Map(), ports: {}, restarts: {}, stopped, deferred: new Set(stopped), retired: false };
   pools.set(dir, pool);
   spawnChildren(pool);
   const ready = [...pool.children.values()].map((c) => c.ready);
@@ -817,6 +832,7 @@ function proxyHandler(name) {
     if (body === undefined) return;
     // One deadline for the whole request, not one per attempt: a retry must not re-spend the wait.
     const budget = { deadline: Date.now() + (isNavigation(req) ? NAV_PORT_WAIT_MS : API_PORT_WAIT_MS) };
+    if (isNavigation(req)) startOnDemand(name);
     // One listener for the request, however many attempts it takes.
     let current = null;
     res.once('close', () => current?.destroy());
@@ -961,6 +977,7 @@ function appsConfig() {
         publishes: a.publishes,
       };
       if (a.hidden) entry.hidden = true;
+      if (a.deferredStart) entry.deferredStart = true;
       if (a.settings.length) entry.settings = appValues.get(a.id);
       if (TERMINAL_TOKEN && a.id === TERMINAL_APP.id) entry.terminalToken = TERMINAL_TOKEN;
       return [a.id, entry];
@@ -991,12 +1008,13 @@ app.get('/api/config', (_req, res) => {
     ...themeConfig(THEME_REGISTRY, { userFile: USER_THEMES_FILE, extra: MOD_THEMES }),
     apps: appsConfig(),
     actions: ACTIONS,
-    keys: USER_KEYS,
+    keys: userKeyMap,
     activeConfigDir: hubConfig.activeConfigDir,
     defaultConfigDir,
     configDirSwitch: configDirSwitch(hubConfig),
     voice: voice && { provider: voice.provider, auto: voice.auto, commands: voice.commands },
     version: HUB_VERSION,
+    onboarding: process.env.CLAUDE_HUB_NO_ONBOARDING ? 'skipped' : (hubConfig.onboarding ?? null),
   });
 });
 
@@ -1129,6 +1147,9 @@ function settingsView(saved) {
       ...(SETTING_SCHEMAS[a.id] && { settings: settingsOf(a.id) }),
     })),
     restartNeeded: appsShape(apps) !== RUNNING_APPS,
+    keys: userKeyMap,
+    keyWarnings: keyLines,
+    keeps: ENABLED_APPS.filter((a) => a.keeps.length).map((a) => ({ id: a.id, name: appName(a), combos: a.keeps })),
   };
 }
 
@@ -1156,17 +1177,127 @@ app.post('/api/settings', (req, res) => {
   }
   const saved = readSettingsConfig(res);
   if (!saved) return;
-  const r = applySettings(saved, req.body, CONFIG_BASE, SETTING_SCHEMAS);
+  const r = applySettings(saved, req.body, CONFIG_BASE, SETTING_SCHEMAS, ENABLED_APPS);
   if (r.error) {
     res.status(400).json({ error: r.error });
     return;
   }
   writeHubConfig(r.config);
   copyLive(r.config, hubConfig);
+  if (req.body.keys !== undefined) ({ keys: userKeyMap, lines: keyLines } = userKeys(r.config.keys, ENABLED_APPS));
   loadAppValues(r.config);
   res.json(settingsView(r.config));
 });
 
+// The setup checklist runs the same commands a user would type, in a child hub process: --install and
+// ext install call the claude CLI with execSync, and the tray flags start the tray and exit.
+const SETUP_PLUGINS = [
+  { ...HUB_PLUGIN, name: 'Hub skill', args: ['--install'] },
+  ...ENABLED_APPS.filter((a) => a.plugin).map((a) => ({ ...a.plugin, name: a.name, args: ['ext', 'install', a.id] })),
+];
+const SETUP_TIMEOUT_MS = 120_000;
+let setupBusy = false;
+
+function runHub(args) {
+  return new Promise((resolve) => {
+    const child = spawn(process.execPath, [__filename, ...args, '--hub-dir', HUB_DIR], {
+      env: process.env,
+      stdio: ['ignore', 'pipe', 'pipe'],
+      windowsHide: true,
+      timeout: SETUP_TIMEOUT_MS,
+    });
+    let output = '';
+    const add = (d) => (output += d);
+    child.stdout.on('data', add);
+    child.stderr.on('data', add);
+    child.on('error', (e) => resolve({ ok: false, output: e.message }));
+    child.on('close', (code) => resolve({ ok: code === 0, output: output.trim() }));
+  });
+}
+
+async function currentSetup() {
+  const { trayState } = require('./lib/tray');
+  return setupStatus({
+    tray: await trayState({ hubDir: HUB_DIR }),
+    configDirs: hubConfig.configDirs,
+    activeConfigDir: hubConfig.activeConfigDir,
+    candidates: findConfigDirs({ home: os.homedir(), known: hubConfig.configDirs, hubDir: HUB_DIR }),
+    plugins: SETUP_PLUGINS,
+  });
+}
+
+async function setupJob(res, job) {
+  if (setupBusy) {
+    res.status(409).json({ error: 'Another setup step is running' });
+    return;
+  }
+  setupBusy = true;
+  try {
+    const r = await job();
+    res.status(r.ok ? 200 : 500).json({ ...r, setup: await currentSetup() });
+  } finally {
+    setupBusy = false;
+  }
+}
+
+app.get('/api/setup', async (_req, res) => {
+  res.setHeader('Cache-Control', 'no-store');
+  res.json(await currentSetup());
+});
+
+app.post('/api/setup', (req, res) => {
+  const value = req.body?.onboarding;
+  if (!ONBOARDING.includes(value)) {
+    res.status(400).json({ error: `onboarding must be one of ${ONBOARDING.join(', ')}` });
+    return;
+  }
+  const saved = readSettingsConfig(res);
+  if (!saved) return;
+  hubConfig.onboarding = value;
+  writeHubConfig({ ...saved, onboarding: value });
+  res.json({ onboarding: value });
+});
+
+app.post('/api/setup/tray', (_req, res) => {
+  const appId = getArg('app-id');
+  setupJob(res, () => runHub(['--autostart', '--port', String(hubPort), ...(appId ? ['--app-id', appId] : [])]));
+});
+
+async function installPlugins(dir) {
+  const outputs = [];
+  let pending = pluginsToInstall(dir, SETUP_PLUGINS);
+  while (pending.length) {
+    const next = pending[0];
+    const r = await runHub([...next.args, '--dir', dir]);
+    outputs.push(r.output);
+    pending = pluginsToInstall(dir, SETUP_PLUGINS);
+    if (!r.ok || pending[0]?.id === next.id) return { dir, ok: false, output: outputs.join('\n') };
+  }
+  return { dir, ok: true, output: outputs.join('\n') };
+}
+
+app.post('/api/setup/plugins', (req, res) => {
+  const all = req.body?.all === true;
+  const dir = req.body?.dir;
+  if (!all && !hubConfig.configDirs.includes(dir)) {
+    res.status(404).json({ error: 'Unknown config dir; add it first' });
+    return;
+  }
+  setupJob(res, async () => {
+    const dirs = all ? hubConfig.configDirs.filter((d) => pluginsToInstall(d, SETUP_PLUGINS).length) : [dir];
+    const results = [];
+    for (const d of dirs) results.push(await installPlugins(d));
+    return {
+      ok: results.every((r) => r.ok),
+      output: results
+        .filter((r) => r.output)
+        .map((r) => `${r.dir}\n${r.output}`)
+        .join('\n\n'),
+      results: results.map(({ dir, ok }) => ({ dir, ok })),
+    };
+  });
+});
+
 // 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;