claude-code-hub 1.35.0 → 1.37.0

package/features/voice/feature.json

@@ -20,7 +20,7 @@
   "listing": {
     "tagline": "Hold a key and speak: start a session or send a prompt with no Enter press",
     "description": "Hold Ctrl+Shift+Space, speak and let go. \"New session, fix the flaky test\" opens the New session dialog with that prompt, and anything else goes to the session on screen as a prompt and is submitted. Kanban's New session microphone uses the same speech to text. Hex does the speech to text on your machine; without it, the browser's speech recognition does it.",
-    "tags": ["voice", "experimental"],
+    "tags": ["voice"],
     "screenshots": [
       {
         "url": "https://nikiforovall.blog/claude-code-hub/shots/extensions/voice-demo.webp",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -47,7 +47,7 @@
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
     "claude-code-cost": "1.6.2",
-    "claude-code-kanban": "7.32.0",
+    "claude-code-kanban": "7.34.0",
     "claude-code-marketplace": "1.7.3",
     "claude-code-memory-explorer": "1.3.6",
     "express": "^4.21.0",

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

@@ -101,7 +101,7 @@
       } catch (_) {}
     }
 
-    function connect({ standalone = {} } = {}) {
+    function connect({ standalone = {}, plainHostKeys = [] } = {}) {
       if (hub) return hub;
       const topics = new Map();
       const activeFns = new Set();
@@ -275,7 +275,11 @@
         const m = e.data;
         if (!framed || e.source !== win.parent || win.parent === win.top) return;
         if (m?.type !== 'hub:hostKeys' || !Array.isArray(m.keys)) return;
-        if (!hostKeys) win.parent.postMessage({ type: 'hub:hostReady' }, e.origin);
+        if (!hostKeys)
+          win.parent.postMessage(
+            { type: 'hub:hostReady', ...(plainHostKeys.length && { plainKeys: plainHostKeys }) },
+            e.origin,
+          );
         hostOrigin = e.origin;
         hostKeys = new Set(m.keys.map((k) => keySigs(k)[0]));
       }

package/public/app.js

@@ -249,6 +249,7 @@ function onPublish(appId, { topic, payload }) {
       ? { ...payload, encoded: encodeProjectPath(payload.project), projectName: basename(payload.project) }
       : payload;
   published.set(topic, { from: appId, payload: event });
+  if (topic === 'attention.changed') onAttention(appId, event);
   for (const id of Object.keys(iframes)) {
     if (id === appId) continue;
     if (id === activeApp) sendTopic(id, topic, event);
@@ -317,6 +318,7 @@ async function init() {
   bindSetup();
   registerSW();
   bindErrorToast();
+  bindAttentionToast();
   showUpdateToast();
   if (!config.onboarding) maybeShowSetup();
   reloadOnHubRestart();
@@ -1010,8 +1012,108 @@ function bindErrorToast() {
 // 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".
-function applyTitle(dir) {
-  document.title = dir && dir !== defaultConfigDir ? basename(dir) : 'Claude Code Hub';
+function applyTitle(dir = titleDir) {
+  titleDir = dir;
+  const name = dir && dir !== defaultConfigDir ? basename(dir) : 'Claude Code Hub';
+  const n = attentionCount();
+  document.title = n ? `(${n}) ${name}` : name;
+}
+
+// attention.changed lists the sessions whose terminal reports blocked. With no tab strip, the
+// count goes in the window title and the installed app's taskbar badge. A session that newly
+// blocks while its app is off screen gets a toast, at most once per ATTENTION_GAP_MS each,
+// and none from the first payload, so a reload does not toast what was already waiting. The
+// toast goes when its app comes on screen or the session stops waiting.
+const ATTENTION_KINDS = { permission: 'Permission', question: 'Question', auth: 'Sign-in' };
+const ATTENTION_ICONS = {
+  permission: [['path', { d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' }]],
+  question: [
+    ['circle', { cx: 12, cy: 12, r: 10 }],
+    ['path', { d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' }],
+    ['path', { d: 'M12 17h.01' }],
+  ],
+  auth: [
+    ['circle', { cx: 7.5, cy: 15.5, r: 5.5 }],
+    ['path', { d: 'm21 2-9.6 9.6' }],
+    ['path', { d: 'm15.5 7.5 3 3L22 7l-3-3' }],
+  ],
+  other: [
+    ['path', { d: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' }],
+    ['path', { d: 'M10.3 21a1.94 1.94 0 0 0 3.4 0' }],
+  ],
+};
+const ATTENTION_TOAST_MS = 8000;
+const ATTENTION_GAP_MS = 30_000;
+let titleDir = null;
+const attention = new Map();
+const attentionToasted = new Map();
+let attentionTimer = 0;
+
+const attentionCount = () => [...attention.values()].reduce((n, list) => n + list.length, 0);
+
+function onAttention(appId, payload) {
+  const list = Array.isArray(payload?.blocked) ? payload.blocked : [];
+  const blocked = list
+    .filter((b) => isPlainObject(b) && typeof b.id === 'string' && b.id.length <= 64 && typeof b.name === 'string')
+    .slice(0, 20)
+    .map((b) => ({
+      id: b.id,
+      name: b.name.slice(0, 120),
+      kind: Object.hasOwn(ATTENTION_KINDS, b.kind) ? b.kind : null,
+    }));
+  const seeded = attention.has(appId);
+  const before = new Set(attention.get(appId)?.map((b) => b.id));
+  attention.set(appId, blocked);
+  applyTitle();
+  const total = attentionCount();
+  if (total) navigator.setAppBadge?.(total).catch(() => {});
+  else navigator.clearAppBadge?.().catch(() => {});
+  const now = Date.now();
+  for (const [id, at] of attentionToasted) if (now - at > ATTENTION_GAP_MS) attentionToasted.delete(id);
+  const fresh = blocked.find((b) => !before.has(b.id) && !attentionToasted.has(b.id));
+  const toast = document.getElementById('attention-toast');
+  if (toast.dataset.app === appId && !blocked.some((b) => b.id === toast.dataset.session)) hideAttentionToast();
+  if (!seeded || !fresh || appId === activeApp) return;
+  attentionToasted.set(fresh.id, now);
+  showAttentionToast(appId, fresh, blocked.length - 1);
+}
+
+function hideAttentionToast() {
+  clearTimeout(attentionTimer);
+  const toast = document.getElementById('attention-toast');
+  if (!toast.hidden) hideToast(toast);
+}
+
+function showAttentionToast(appId, b, others) {
+  const toast = document.getElementById('attention-toast');
+  document
+    .getElementById('attention-icon')
+    .replaceChildren(lucideSvg(ATTENTION_ICONS[b.kind] ?? ATTENTION_ICONS.other));
+  document.getElementById('attention-title').textContent = b.name;
+  document.getElementById('attention-kind').textContent = ATTENTION_KINDS[b.kind] ?? 'Needs you';
+  document.getElementById('attention-detail').textContent = `waiting in ${apps[appId]?.name ?? appId}`;
+  document.getElementById('attention-more').textContent = others > 0 ? `+${others} more waiting` : '';
+  toast.dataset.app = appId;
+  toast.dataset.session = b.id;
+  const timer = document.getElementById('attention-timer');
+  timer.style.animation = 'none';
+  void timer.offsetWidth;
+  timer.style.animation = '';
+  clearTimeout(attentionTimer);
+  attentionTimer = setTimeout(hideAttentionToast, ATTENTION_TOAST_MS);
+  showToast(toast);
+}
+
+function bindAttentionToast() {
+  const toast = document.getElementById('attention-toast');
+  toast.style.setProperty('--attention-ms', `${ATTENTION_TOAST_MS}ms`);
+  toast.addEventListener('mouseenter', () => clearTimeout(attentionTimer));
+  toast.addEventListener('mouseleave', () => (attentionTimer = setTimeout(hideAttentionToast, ATTENTION_TOAST_MS / 2)));
+  document.getElementById('attention-close').addEventListener('click', hideAttentionToast);
+  document.getElementById('attention-open').addEventListener('click', () => {
+    hideAttentionToast();
+    onInvoke({ id: 'attention', action: 'session.open', params: { session: toast.dataset.session } }, () => {});
+  });
 }
 
 // After a config-dir switch every child is a new process, possibly on a new port. Reloading each
@@ -1111,8 +1213,9 @@ function addIframe(id) {
   document.getElementById('iframe-container').appendChild(iframes[id]);
 }
 
+// A deferredStart app's first page load starts it, so its frame waits until the tab opens.
 function buildIframes() {
-  for (const id of tabIds()) addIframe(id);
+  for (const id of tabIds()) if (!apps[id].deferredStart) addIframe(id);
 }
 
 const TAB_KEY = 'hub-tab';
@@ -1130,6 +1233,7 @@ function switchTab(appId) {
   if (!iframes[appId]) addIframe(appId);
   if (appId !== activeApp) previousApp = activeApp;
   activeApp = appId;
+  if (document.getElementById('attention-toast').dataset.app === appId) hideAttentionToast();
   try {
     localStorage.setItem(TAB_KEY, appId);
   } catch {}
@@ -1656,6 +1760,19 @@ const APP_ICONS = {
     ['path', { d: 'M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3' }],
     ['path', { d: 'M12 12V8' }],
   ],
+  'notebook-pen': [
+    ['path', { d: 'M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4' }],
+    ['path', { d: 'M2 6h4' }],
+    ['path', { d: 'M2 10h4' }],
+    ['path', { d: 'M2 14h4' }],
+    ['path', { d: 'M2 18h4' }],
+    [
+      'path',
+      {
+        d: 'M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z',
+      },
+    ],
+  ],
   puzzle: [
     [
       'path',

package/public/index.html

@@ -654,6 +654,77 @@
     }
 
     .update-toast[hidden] { display: none; }
+    .attention-toast {
+      width: min(380px, calc(100vw - 32px));
+      padding: 14px 14px 16px;
+      gap: 12px;
+      overflow: hidden;
+      border-left-color: var(--warn);
+      animation: attention-in 0.22s ease-out;
+    }
+    .attention-icon {
+      flex: none;
+      display: grid;
+      place-items: center;
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--warn) 16%, transparent);
+      color: var(--warn);
+    }
+    .attention-icon svg { width: 18px; height: 18px; }
+    .attention-name {
+      font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .attention-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 3px;
+      color: var(--text-dim);
+      font-size: 12px;
+    }
+    .attention-kind {
+      padding: 0 7px;
+      border: 1px solid currentColor;
+      border-radius: 9px;
+      color: var(--warn);
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 16px;
+    }
+    .attention-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
+    .attention-open {
+      padding: 5px 12px;
+      border: none;
+      border-radius: 6px;
+      background: var(--accent);
+      color: #fff;
+      font: 600 12px system-ui, -apple-system, "Segoe UI", sans-serif;
+      cursor: pointer;
+    }
+    .attention-open:hover { filter: brightness(1.08); }
+    .attention-more { color: var(--text-dim); font-size: 12px; }
+    .attention-timer {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: var(--warn);
+      opacity: 0.5;
+      transform-origin: left;
+      animation: attention-timer var(--attention-ms, 8s) linear forwards;
+    }
+    .attention-toast:hover .attention-timer { animation-play-state: paused; }
+    @keyframes attention-in { from { opacity: 0; transform: translateY(8px); } }
+    @keyframes attention-timer { to { transform: scaleX(0); } }
+    @media (prefers-reduced-motion: reduce) {
+      .attention-toast, .attention-timer { animation: none; }
+    }
     .voice-pill {
       position: fixed;
       left: 50%;
@@ -873,6 +944,20 @@
     <button class="update-toast-close" id="update-close" type="button" aria-label="Close">×</button>
   </div>
 
+  <div class="update-toast attention-toast" id="attention-toast" role="status" hidden>
+    <span class="attention-icon" id="attention-icon" aria-hidden="true"></span>
+    <div class="update-toast-body">
+      <div class="attention-name" id="attention-title"></div>
+      <div class="attention-meta"><span class="attention-kind" id="attention-kind"></span><span id="attention-detail"></span></div>
+      <div class="attention-actions">
+        <button class="attention-open" id="attention-open" type="button">Open session</button>
+        <span class="attention-more" id="attention-more"></span>
+      </div>
+    </div>
+    <button class="update-toast-close" id="attention-close" type="button" aria-label="Close">×</button>
+    <span class="attention-timer" id="attention-timer"></span>
+  </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>

package/server.js

@@ -330,6 +330,11 @@ function childEnv(pool, name) {
   const mods = appModEnv(MODS, name);
   if (mods) env.HUB_MODS = mods;
   else delete env.HUB_MODS;
+  // A setting the app's server needs before any page connects, such as cck's terminal host for
+  // the terminals it restores at start. A change later reaches the app through its pages.
+  const settings = appValues.get(name);
+  if (settings) env.HUB_APP_SETTINGS = JSON.stringify(settings);
+  else delete env.HUB_APP_SETTINGS;
   if (TERMINAL.enabled && name === TERMINAL_APP.id) {
     env.CCK_TERMINAL = JSON.stringify(TERMINAL);
     env.CCK_TERMINAL_TOKEN = TERMINAL_TOKEN;
@@ -397,6 +402,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);
@@ -406,9 +412,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);
@@ -448,7 +466,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);
@@ -819,6 +837,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());
@@ -963,6 +982,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];
@@ -999,7 +1019,7 @@ app.get('/api/config', (_req, res) => {
     configDirSwitch: configDirSwitch(hubConfig),
     voice: voice && { provider: voice.provider, auto: voice.auto, commands: voice.commands },
     version: HUB_VERSION,
-    onboarding: hubConfig.onboarding ?? null,
+    onboarding: process.env.CLAUDE_HUB_NO_ONBOARDING ? 'skipped' : (hubConfig.onboarding ?? null),
   });
 });