claude-code-hub 1.36.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.36.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.33.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/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
@@ -1131,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 {}

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;