claude-code-kanban 7.17.0 → 7.19.0

package/plugin/plugins/claude-code-kanban/tests/show.test.ts

@@ -1,26 +1,20 @@
 import type { On, ToolCallArgs } from 'claude-code'
-import { expect, test } from 'claude-code/testing'
-import { boardPort, dropSkillLine, shownText, TOOL } from '../hooks/show'
+import { expect, mock, test } from 'claude-code/testing'
+import { boardPort, CLAIM_OFF_TERMINAL, paneText, shownText, TOOL } from '../hooks/show'
 
 const CCK_URL = 'http://127.0.0.1:4100'
 const TERMINAL_ID = 'term-1'
 const TOKEN_FILE = 'C:/cfg/.cck/terminal-tokens/4100.json'
-const LISTING = [
-  'The following skills are available for use with the Skill tool:',
-  '',
-  '- claude-code-kanban:dispatch',
-  '- claude-code-kanban:show',
-  '- claude-code-kanban:kanban: Kanban board CLI',
-  '- meta:show-me: Help the user understand the current topic visually',
-].join('\n')
+const SERVER_FILE = 'C:/cfg/.cck/server.json'
 
 type Reply = { status: number; body: unknown } | Error
 type Request = { url: string; method?: string; headers?: Record<string, string>; body?: unknown }
 
 function engine(on: On, env: Record<string, string>, reply?: Reply) {
-  const registered: string[] = []
+  const registered: { name: string; required: unknown }[] = []
   const requests: Request[] = []
-  const files: Record<string, string> = { [TOKEN_FILE]: '{"token":"tok-abc"}' }
+  const files: Record<string, string> = { [TOKEN_FILE]: '{"token":"tok-abc"}', [SERVER_FILE]: '{"pid":1,"port":4100}' }
+  mock.clock(on)
   on('env.get', (_$, e) => ({ value: { CLAUDE_CONFIG_DIR: 'C:/cfg', ...env }[e.name] }))
   on('fs.read', (_$, e) => {
     const text = files[e.path.replaceAll('\\', '/')]
@@ -30,12 +24,11 @@ function engine(on: On, env: Record<string, string>, reply?: Reply) {
   on('session.id', () => ({ value: 'sid-1' }))
   on('session.start', (_$, e) => ({ cwd: e.cwd }))
   on('tool.register', (_$, e) => {
-    registered.push(e.name)
+    registered.push({ name: e.name, required: (e.inputSchema as { required?: unknown }).required })
     return { value: { tool: `mcp__claude-code-kanban__${e.name}` } }
   })
-  on('prompt.attachment', (_$, e) => ({ text: e.text }))
   on('http.fetch', (_$, e) => {
-    if (!e.url.includes('/show')) return new Promise(() => {})
+    if (!/\/show$|\/api\/panes\//.test(e.url)) return new Promise(() => {})
     const { method, headers, body } = (e.init ?? {}) as Omit<Request, 'url'>
     requests.push({ url: e.url, method, headers, body: typeof body === 'string' ? JSON.parse(body) : body })
     if (!reply) throw new Error('no reply')
@@ -46,10 +39,9 @@ function engine(on: On, env: Record<string, string>, reply?: Reply) {
 }
 
 const GATE = { CCK_URL, CCK_TERMINAL_ID: TERMINAL_ID }
-const listing = { type: 'skill_listing', text: LISTING, origin: { kind: 'engine' } } as const
 const call = (input: Record<string, unknown>) => ({ tool: TOOL, ...input }) as ToolCallArgs
 
-test('helpers: the port of CCK_URL, the answer line, the listing filter', async () => {
+test('helpers: the port of CCK_URL, the answer lines', async () => {
   expect(boardPort('http://127.0.0.1:4100')).toBe('4100')
   expect(boardPort('http://localhost:3541/')).toBe('3541')
   expect(boardPort('http://localhost')).toBe(undefined)
@@ -58,24 +50,67 @@ test('helpers: the port of CCK_URL, the answer line, the listing filter', async
   expect(shownText({ title: 'Plan', key: 'plan', index: 1, count: 1, path: 'C:/s/p1.md' }, true)).toBe(
     'Card "Plan" (plan, 1/1) is ready. Write it to C:/s/p1.md; the card refreshes on each save.',
   )
-  expect(dropSkillLine(LISTING)).toBe(LISTING.replace('- claude-code-kanban:show\n', ''))
-  expect(dropSkillLine('- claude-code-kanban:show: Show a diagram\n- x')).toBe('- x')
+  expect(paneText('Plan', false)).toBe('The board already has a tab for this file; it refreshes on each save.')
 })
 
-test('gate off: no tool, and the skill line is dropped', async ($, on) => {
+test('in the terminal: the overlay tool, file optional', async ($, on) => {
+  const board = engine(on, GATE)
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  expect(board.registered).toEqual([{ name: 'show', required: ['title'] }])
+})
+
+test('outside the terminal: the pane tool, file required', async ($, on) => {
   const board = engine(on, { CCK_URL })
   await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
-  expect(board.registered).toEqual([])
-  const { text } = await $.prompt.attachment(listing)
-  expect(text).toBe(LISTING.replace('- claude-code-kanban:show\n', ''))
+  expect(board.registered).toEqual([{ name: 'show', required: ['title', 'file'] }])
 })
 
-test('gate on: the tool is registered and the skill line stays', async ($, on) => {
-  const board = engine(on, GATE)
+test('outside the terminal: a file post adds a show pane on the board of server.json', async ($, on) => {
+  const board = engine(on, {}, { status: 200, body: { pane: { id: 'p1' }, added: true } })
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  const res = await $.tool.call(call({ title: 'Plan', file: 'C:/s/plan.html' }))
+  expect(res.result).toBe(paneText('Plan', true))
+  expect(board.requests).toEqual([
+    {
+      url: 'http://127.0.0.1:4100/api/panes/sid-1',
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: { target: 'C:/s/plan.html', title: 'Plan', show: true },
+    },
+  ])
+})
+
+test('outside the terminal: the same file again answers that the tab exists', async ($, on) => {
+  engine(on, {}, { status: 200, body: { pane: { id: 'p1' }, added: false } })
   await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
-  expect(board.registered).toEqual(['show'])
-  const { text } = await $.prompt.attachment(listing)
-  expect(text).toBe(LISTING)
+  const res = await $.tool.call(call({ title: 'Plan', file: 'C:/s/plan.html' }))
+  expect(res.result).toBe(paneText('Plan', false))
+})
+
+test('outside the terminal: a claim sends nothing and asks for a file', async ($, on) => {
+  const board = engine(on, {})
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  const res = await $.tool.call(call({ title: 'Plan' }))
+  expect(res.result).toBe(CLAIM_OFF_TERMINAL)
+  expect(board.requests).toEqual([])
+})
+
+test('outside the terminal: no board, no request, an error that says so', async ($, on) => {
+  // CCK_URL keeps the doorbell on its open poll: without a board it sleeps, and the unload rejects that sleep.
+  const board = engine(on, { CCK_URL })
+  delete board.files[SERVER_FILE]
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  const res = await $.tool.call(call({ title: 'Plan', file: 'C:/s/plan.md' }))
+  expect(res.deny).toContain('not running')
+  expect(board.requests).toEqual([])
+})
+
+test('outside the terminal: a board refusal reaches the model with its text', async ($, on) => {
+  const error = 'Not a previewable text, markdown, HTML or image file'
+  engine(on, {}, { status: 400, body: { error } })
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  const res = await $.tool.call(call({ title: 'Zip', file: 'C:/s/a.zip' }))
+  expect(res.deny).toBe(error)
 })
 
 test('a -p run gets no tool', async ($, on) => {

package/public/app.js

@@ -571,6 +571,9 @@ function sessionBarClass(s) {
 function isActiveSession(s) {
   return !isWaitingSession(s) && (s.inProgress > 0 || s.hasRecentLog || s.hasRunningAgents);
 }
+function sessionState(s) {
+  return isWaitingSession(s) ? 'waiting' : isActiveSession(s) ? 'working' : 'idle';
+}
 // hasRecentLog carries the server's registry-idle correction: an open-but-idle
 // terminal keeps touching its JSONL, so mtime alone is not proof of activity.
 function isSessionLive(s) {
@@ -815,6 +818,7 @@ async function fetchTasks(sessionId) {
 //#region TIMINGS
 const WAITING_TTL_MS = 30 * 60 * 1000;
 const AGENT_LOG_MAX = 8;
+const ZEN_AGENTS_MAX = 5;
 const LIVE_INDICATOR_MS = 10 * 1000;
 const JUST_NOW_MS = 60 * 1000;
 //#endregion
@@ -3397,17 +3401,73 @@ function formatDuration(ms) {
 //#endregion
 
 //#region AGENTS
-function renderAgentFooter() {
-  const footer = document.getElementById('agent-footer');
-  const content = document.getElementById('agent-footer-content');
-  const label = document.getElementById('agent-footer-label');
+function agentTypeParts(a) {
+  const raw = a.type || 'unknown';
+  const colonIdx = raw.indexOf(':');
+  return colonIdx > 0
+    ? { raw, ns: raw.substring(0, colonIdx + 1), name: raw.substring(colonIdx + 1) }
+    : { raw, ns: '', name: raw };
+}
+
+function agentTaskText(a) {
+  if (a.description) return a.description;
+  const prompt = stripAnsi(stripTeammateWrapper((a.prompt || '').trim())).replace(/[\r\n]+/g, ' ');
+  return prompt || agentTypeParts(a).name;
+}
+
+function agentElapsed(a, now) {
+  return a.status === 'stopped' && a.stoppedAt
+    ? new Date(a.stoppedAt).getTime() - new Date(a.startedAt || a.stoppedAt).getTime()
+    : now - new Date(a.startedAt || a.updatedAt).getTime();
+}
+
+function agentIdentHtml(a) {
+  const { raw, ns, name } = agentTypeParts(a);
+  const fullModel = agentModel(a);
+  const model = shortModelName(fullModel);
+  const modelHtml = model
+    ? `<span class="agent-card-model" title="${escapeHtml(fullModel)}">${escapeHtml(model)}</span><span class="agent-ident-sep">·</span>`
+    : '';
+  return `${modelHtml}<span class="agent-type-name" title="${escapeHtml(raw)}">${ns ? `<span class="agent-type-ns">${escapeHtml(ns)}</span>` : ''}${escapeHtml(name)}</span>`;
+}
+
+// The count names every running agent; the rows stop at ZEN_AGENTS_MAX, and the Agents Log
+// below the board lists the rest.
+function zenAgentsHtml(active) {
+  if (!active.length) return '';
+  const rows = active.slice(0, ZEN_AGENTS_MAX).map((a) => {
+    const task = truncateAtWord(agentTaskText(a), 200);
+    return `<button type="button" class="zen-agent" title="${escapeHtml(task)}" onclick="showAgentModal('${escAttrJs(a.agentId)}')">
+      <span class="agent-dot active"></span>
+      <span class="zen-agent-text"><span class="zen-agent-task">${escapeHtml(task)}</span><span class="agent-ident-row">${agentIdentHtml(a)}</span></span>
+      <span class="zen-agent-time"></span>
+    </button>`;
+  });
+  return `<div class="panel-section-header"><span>Agents</span><span class="panel-section-count">${active.length}</span></div>${rows.join('')}`;
+}
+
+// The 1 s duration tick calls this. Rewriting the rows each time would drop the focus of a row,
+// so the rows are rewritten only when they change and the times are set in place.
+function renderZenAgents(agents) {
+  const el = zenMode && sessionsList.querySelector('.zen-agents');
+  if (!el) return;
+  const active = agents.filter((a) => a.status === 'active');
+  const html = zenAgentsHtml(active);
+  if (html !== el.dataset.shape) {
+    el.dataset.shape = html;
+    el.innerHTML = html;
+  }
   const now = Date.now();
+  el.querySelectorAll('.zen-agent-time').forEach((t, i) => {
+    t.textContent = formatDuration(agentElapsed(active[i], now));
+  });
+}
 
-  const agents = currentAgents;
-  // Filter shutdown ghosts: for same-type agents, keep if they overlapped (parallel)
-  // or started >30s after previous stopped (legitimate re-spawn). Filter the rest.
+// Filter shutdown ghosts: for same-type agents, keep if they overlapped (parallel)
+// or started >30s after previous stopped (legitimate re-spawn). Filter the rest.
+function visibleAgents() {
   const byType = {};
-  for (const a of agents) {
+  for (const a of currentAgents) {
     const groupKey = a.agentName || a.type;
     if (!byType[groupKey]) byType[groupKey] = [];
     byType[groupKey].push(a);
@@ -3431,13 +3491,21 @@ function renderAgentFooter() {
   }
   // Sort: active/idle first, then by updatedAt desc
   const statusOrder = { active: 0, idle: 1, stopped: 2 };
-  const visible = filtered
-    .sort(
-      (a, b) =>
-        (statusOrder[a.status] ?? 2) - (statusOrder[b.status] ?? 2) ||
-        new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0),
-    )
-    .slice(0, AGENT_LOG_MAX);
+  return filtered.sort(
+    (a, b) =>
+      (statusOrder[a.status] ?? 2) - (statusOrder[b.status] ?? 2) ||
+      new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0),
+  );
+}
+
+function renderAgentFooter() {
+  const footer = document.getElementById('agent-footer');
+  const content = document.getElementById('agent-footer-content');
+  const label = document.getElementById('agent-footer-label');
+  const now = Date.now();
+  const agents = visibleAgents();
+  renderZenAgents(agents);
+  const visible = agents.slice(0, AGENT_LOG_MAX);
 
   const permFresh = isWaitingFresh();
 
@@ -3461,23 +3529,14 @@ function renderAgentFooter() {
     permHtml +
     visible
       .map((a) => {
-        const elapsed =
-          a.status === 'stopped' && a.stoppedAt
-            ? new Date(a.stoppedAt).getTime() - new Date(a.startedAt || a.stoppedAt).getTime()
-            : now - new Date(a.startedAt || a.updatedAt).getTime();
+        const elapsed = agentElapsed(a, now);
         const statusText =
           a.status === 'stopped'
             ? `stopped · ${formatDuration(elapsed)}`
             : a.status === 'idle'
               ? `idle · ${formatDuration(elapsed)}`
               : `active · ${formatDuration(elapsed)}`;
-        const descText = a.description || '';
-        const promptTrimmed = stripAnsi(stripTeammateWrapper((a.prompt || '').trim())).replace(/[\r\n]+/g, ' ');
-        const rawType = a.type || 'unknown';
-        const colonIdx = rawType.indexOf(':');
-        const typeNs = colonIdx > 0 ? rawType.substring(0, colonIdx + 1) : '';
-        const typeName = colonIdx > 0 ? rawType.substring(colonIdx + 1) : rawType;
-        const displayText = descText || promptTrimmed || typeName;
+        const displayText = agentTaskText(a);
         const taskHtml = `<div class="agent-task" title="${escapeHtml(displayText)}">${escapeHtml(displayText)}</div>`;
         const agentNameVal = a.agentName || null;
         const nameColor = agentNameVal ? getOwnerColor(agentNameVal) : null;
@@ -3487,15 +3546,10 @@ function renderAgentFooter() {
         const agentColor = resolveNamedColor(a.color);
         const colorStyle = agentColor ? ` style="border-left:3px solid ${agentColor.color}"` : '';
         const selectedClass = a.agentId === currentAgentModalId ? ' selected' : '';
-        const fullModel = agentModel(a);
-        const cardModel = shortModelName(fullModel);
-        const modelHtml = cardModel
-          ? `<span class="agent-card-model" title="${escapeHtml(fullModel)}">${escapeHtml(cardModel)}</span><span class="agent-ident-sep">·</span>`
-          : '';
         return `<div class="agent-card${selectedClass}" data-agent-id="${escapeHtml(a.agentId)}"${colorStyle} onclick="showAgentModal('${escAttrJs(a.agentId)}')">
           ${agentLogButton(a.agentId, 'agent-card-log-btn')}
           ${taskHtml}
-          <div class="agent-ident-row">${modelHtml}<span class="agent-type-name" title="${escapeHtml(rawType)}">${typeNs ? `<span class="agent-type-ns">${escapeHtml(typeNs)}</span>` : ''}${escapeHtml(typeName)}</span>${nameBadgeHtml}</div>
+          <div class="agent-ident-row">${agentIdentHtml(a)}${nameBadgeHtml}</div>
           <div class="agent-status-row"><span class="agent-dot ${a.status}"></span><span class="agent-status">${statusText}</span></div>
         </div>`;
       })
@@ -3889,6 +3943,8 @@ function renderSessions() {
   // and still offers everything, or there would be no way to switch sessions without leaving zen.
   // Group zen renders only its subtree's buckets, so it takes every session unfiltered.
   const zenSession = zenMode && currentSessionId ? sessions.find((s) => s.id === currentSessionId) : null;
+  sessionsList.classList.toggle('zen', !!zenSession);
+  sessionsList.dataset.zenState = zenSession ? sessionState(zenSession) : '';
   let filteredSessions;
   if (zenGroup) filteredSessions = applyStableSessionOrder(sessions);
   else if (zenMode) filteredSessions = zenSession ? [zenSession] : [];
@@ -4064,11 +4120,14 @@ function renderSessions() {
         ${renderArtifactsHtml(zenSession.id)}
         ${renderZenBookmarksHtml(zenSession.id)}
       </div>
-      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}`;
+      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}
+      <div class="zen-agents"></div>`;
+    renderZenAgents(visibleAgents());
     bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
     artifactsSection.load(zenSession.id);
     scratchFilesSection.load(zenSession.id);
     if (zenSession.hasWorkflow) pollWorkflowLive(zenSession.id);
+    restoreSessionCursor();
     return;
   }
 
@@ -4317,7 +4376,10 @@ function renderSessions() {
     const tail = sectioned ? sectionHtml(SECTION_SESSIONS, 'Sessions', true, restHtml, sgRest.length === 0) : restHtml;
     sessionsList.innerHTML = html + sgSectionHtml(true) + tail + outsideHtml;
   }
+  restoreSessionCursor();
+}
 
+function restoreSessionCursor() {
   const navItems = getNavigableItems();
   const allSessions = getSessionItems();
   const activeIdx = allSessions.findIndex((el) => el.classList.contains('active'));
@@ -7902,6 +7964,21 @@ document.addEventListener('keydown', (e) => {
     toggleZenMode();
     return;
   }
+  if (e.key === '$' && plainShift) {
+    e.preventDefault();
+    openCost(contextSessionId());
+    return;
+  }
+  if (matchKey(e, 'KeyM')) {
+    e.preventDefault();
+    openMarketplace(contextSessionId());
+    return;
+  }
+  if (ClaudeHub.comboOf(e) === 'ctrl+m') {
+    e.preventDefault();
+    openMemory(contextSessionId());
+    return;
+  }
   if (e.key === '.' || e.key === '>') {
     const sid = sessionsList.querySelector('.kb-selected')?.dataset.sessionId || currentSessionId;
     if (sid) {
@@ -8042,23 +8119,6 @@ document.addEventListener('keydown', (e) => {
     else toggleScratchpad();
     return;
   }
-  if (e.key === '$' && !e.ctrlKey && !e.altKey && !e.metaKey) {
-    e.preventDefault();
-    openCost(contextSid);
-    return;
-  }
-  if (matchKey(e, 'KeyM')) {
-    e.preventDefault();
-    const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    openMarketplace(mSession?.project);
-    return;
-  }
-  if (ClaudeHub.comboOf(e) === 'ctrl+m') {
-    e.preventDefault();
-    const mSession = contextSid ? sessions.find((s) => s.id === contextSid) : null;
-    openMemory(mSession?.project);
-    return;
-  }
   if (ClaudeHub.comboOf(e) === 'ctrl+d') {
     e.preventDefault();
     dismissContextSession();
@@ -8662,7 +8722,9 @@ const ZOOM_CLAIMS = ['ctrlKey', 'metaKey'].flatMap((mod) =>
 // first keeps it, and text fields keep every key.
 const PANE_CLAIMS = [
   ...['\\', '[', ']', 'ContextMenu', 'Escape'].map((key) => ({ key, code: '' })),
-  ...['|', '{', '}', 'F10'].map((key) => ({ shiftKey: true, key, code: '' })),
+  ...['|', '{', '}', 'F10', '$'].map((key) => ({ shiftKey: true, key, code: '' })),
+  { key: 'Unidentified', code: 'KeyM' },
+  { ctrlKey: true, key: 'm', code: '' },
   ...['BracketLeft', 'BracketRight', 'KeyW'].map((code) => ({ altKey: true, key: 'Unidentified', code })),
   ...['KeyL', 'KeyM', 'KeyP', 'KeyS', 'KeyZ'].map((code) => ({ shiftKey: true, key: 'Unidentified', code })),
   ...'123456789'.split('').map((n) => ({ ctrlKey: true, altKey: true, key: 'Unidentified', code: `Digit${n}` })),
@@ -9150,7 +9212,7 @@ function createPreviewFrame(className, srcdoc, sandbox = 'allow-scripts allow-po
   frame.setAttribute('referrerpolicy', 'no-referrer');
   frame.srcdoc = srcdoc;
   bridgedFrames.add(frame);
-  frame.addEventListener('load', () => sendBridgeClaimsAll([frame], keyClaims()));
+  frame.addEventListener('load', () => sendBridgeClaimsAll([frame], bridgeClaims(keyClaims())));
   return frame;
 }
 
@@ -10228,7 +10290,7 @@ function setupEventSource() {
       // Alone, the page would open a tab without a user gesture, which the browser blocks; the
       // CLI prints the link instead.
       if (data.type === 'session:cost' && hub.inHub) {
-        openCost(data.id, data.agent);
+        openCost(data.id, { agent: data.agent, pane: false });
       }
 
       if (data.type === 'session:pin') {
@@ -11569,6 +11631,12 @@ function toggleZenMode() {
   if (!leavingSessionZen) fetchSessions(false);
 }
 
+function applyHubSettings(s) {
+  sessionsList.classList.toggle('zen-centered', s.zenCentered === true);
+  if (s.zenPattern) sessionsList.dataset.zenPattern = s.zenPattern;
+  else delete sessionsList.dataset.zenPattern;
+}
+
 function renderZenState() {
   const btn = document.getElementById('zen-mode-btn');
   if (!btn) return;
@@ -13095,31 +13163,33 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
-function openCost(sessionId, agentId) {
-  if (sessionId && agentId && hub.can('agent.cost'))
-    return hub.invoke('agent.cost', { session: sessionId, agent: agentId });
-  hub.invoke('session.cost', sessionId ? { session: sessionId } : {});
+// Opens the app in a pane of `sid` and brings the pane into view. With no session, or `pane: false`
+// (a Shift-click), the hub switches to the app's tab instead.
+async function openAppAction(action, params, sid, { pane = true, label }) {
+  if (!sid || !pane) return hub.invoke(action, params);
+  const { url } = await hub.invoke(action, params, { open: 'pane' });
+  if (!url) return;
+  const onScreen = await postPane(sid, { target: url, title: label });
+  if (onScreen !== null) revealPane(sid, onScreen);
 }
 
-function openMarketplace(projectPath) {
-  hub.invoke('project.plugins', projectPath ? { project: projectPath } : {});
+function openCost(sid, { agent, pane } = {}) {
+  const opts = { pane, label: 'Cost' };
+  if (sid && agent && hub.can('agent.cost')) return openAppAction('agent.cost', { session: sid, agent }, sid, opts);
+  return openAppAction('session.cost', sid ? { session: sid } : {}, sid, opts);
 }
 
-function openMemory(projectPath) {
-  hub.invoke('project.memory', projectPath ? { project: projectPath } : {});
+function openProjectApp(action, label, sid, { pane } = {}) {
+  const project = sessions.find((s) => s.id === sid)?.project;
+  return openAppAction(action, project ? { project } : {}, sid, { pane, label });
 }
+const openMarketplace = (sid, opts) => openProjectApp('project.plugins', 'Marketplace', sid, opts);
+const openMemory = (sid, opts) => openProjectApp('project.memory', 'Memory', sid, opts);
 
-function openForInfoModalProject(open) {
-  const s = sessions.find((x) => x.id === _infoModalSessionId);
-  if (s?.project) open(s.project);
-}
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function openMarketplaceForInfoModal() {
-  openForInfoModalProject(openMarketplace);
-}
-// biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function openMemoryForInfoModal() {
-  openForInfoModalProject(openMemory);
+function openAppForInfoModal(open, e) {
+  closeTeamModal();
+  open(_infoModalSessionId, { pane: !e.shiftKey });
 }
 
 //#endregion
@@ -13830,6 +13900,11 @@ async function loadPaneView(sid, pane, view, scroll) {
     frame.setAttribute('referrerpolicy', 'no-referrer');
     frame.title = pane.title;
     frame.src = pane.target;
+    frame.addEventListener('load', () => {
+      view.classList.remove('keys-bridged');
+      frame.hostKeysSig = null;
+      pushTerminalClaims();
+    });
     view.appendChild(frame);
     view.insertAdjacentHTML('beforeend', paneUrlBarHtml());
     // Framed at once; a refusal found by the probe swaps the frame for the card.
@@ -15521,23 +15596,49 @@ function bridgeClaims(claims) {
   return { ...claims, keys: [...claims.keys, ...ZOOM_CLAIMS, ...PANE_CLAIMS, ...review] };
 }
 
-function sendBridgeClaimsAll(frames, claims) {
-  const base = bridgeClaims(claims);
+function sendBridgeClaimsAll(frames, base) {
   const rest = frames.filter((f) => f !== showState.frame);
   sendBridgeClaims(rest, base);
   if (rest.length < frames.length)
     sendBridgeClaims([showState.frame], { ...base, keys: [...base.keys, ...SHOW_CLAIMS] });
 }
 
+// A hub app in a URL pane runs the SDK, which hands back these keys (hub protocol §5.2). Only keys with
+// Ctrl, Alt or Meta: the page keeps Escape, brackets and its own letter keys.
+function sendHostKeys(frames, bridged) {
+  const keys = bridged.keys.filter((k) => k.ctrlKey || k.altKey || k.metaKey);
+  const sig = JSON.stringify(keys);
+  for (const f of frames) {
+    const origin = URL.parse(f.src)?.origin;
+    if (!origin || origin === 'null' || f.hostKeysSig === sig) continue;
+    f.hostKeysSig = sig;
+    f.contentWindow?.postMessage({ type: 'hub:hostKeys', keys }, origin);
+  }
+}
+
+const urlPaneFrames = () => [...paneViews.querySelectorAll('.pane-url-frame')];
+
+window.addEventListener('message', (e) => {
+  const type = e.data?.type;
+  if (type !== 'hub:hostKey' && type !== 'hub:hostReady') return;
+  const frame = urlPaneFrames().find((f) => f.contentWindow === e.source);
+  if (!frame || URL.parse(frame.src)?.origin !== e.origin) return;
+  if (type === 'hub:hostReady') frame.parentElement.classList.add('keys-bridged');
+  else replayKey(e.data, frame);
+});
+
 function pushTerminalClaims() {
   if (terminalClaimsQueued) return;
   terminalClaimsQueued = true;
   queueMicrotask(() => {
     terminalClaimsQueued = false;
     const bridged = bridgedFrameEls();
-    if (!termFrame.inited && !kanbotState.inited && !bridged.length) return;
+    const urlFrames = urlPaneFrames();
+    if (!termFrame.inited && !kanbotState.inited && !bridged.length && !urlFrames.length) return;
     const claims = keyClaims();
-    sendBridgeClaimsAll(bridged, claims);
+    const base = bridgeClaims(claims);
+    sendBridgeClaimsAll(bridged, base);
+    sendHostKeys(urlFrames, base);
     const sig = JSON.stringify(claims);
     sendFrameClaims(kanbotState, claims, sig, postToKanbotFrame);
     sendFrameClaims(termFrame, claims, sig, terminalFrameSend);
@@ -16067,17 +16168,18 @@ async function terminalFetch(url, method, body) {
   return res.status === 401 && (await refreshTerminalToken()) ? send() : res;
 }
 
-const TERMINAL_STATE_LABEL = { busy: 'working', wait: 'waiting', idle: 'idle' };
+const TERMINAL_DOT_STATE = { working: 'busy', waiting: 'wait', idle: 'idle' };
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 async function endAllTerminals() {
   const items = [...document.querySelectorAll('#terminal-manager-body [data-end]')].map((b) => {
     const id = b.dataset.end;
     const session = sessions.find((s) => s.id === id);
-    const state = !session ? 'idle' : isWaitingSession(session) ? 'wait' : isActiveSession(session) ? 'busy' : 'idle';
+    const label = session ? sessionState(session) : 'idle';
+    const state = TERMINAL_DOT_STATE[label];
     const started = Number(b.dataset.started);
     const meta = [
-      TERMINAL_STATE_LABEL[state],
+      label,
       started && `up ${formatDuration(Date.now() - started)}`,
       formatTerminalProc(terminalProcStats[id]),
     ]
@@ -16775,9 +16877,13 @@ function withHeadFirst(content, head) {
   return content.slice(0, cut) + inject + content.slice(cut);
 }
 
+// The board's scrollbar rules do not reach into a frame, which would show the OS default.
+// Grey, not a board token, because the page paints its own background.
+const FRAME_SCROLLBAR_CSS = ':where(html){scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent}';
+
 // A whole document gets the tokens and base styles first in its head, so its own styles win.
 function showSrcdoc(content, restoreY) {
-  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}</style>`;
+  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}${FRAME_SCROLLBAR_CSS}</style>`;
   const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${modalZoom});</script>${REVIEW_BRIDGE_TAG}`;
   if (!/^\s*(<!doctype|<html)/i.test(content)) {
     return `<!doctype html><html><head><meta charset="utf-8">${head}</head><body>${content}${bridge}</body></html>`;
@@ -16788,7 +16894,7 @@ function showSrcdoc(content, restoreY) {
 // An HTML file preview gets only the tokens, first in its head: its own :root rules win, and
 // a page that declares its defaults in :where(:root) follows the board theme.
 function themedSrcdoc(content) {
-  const head = `<style id="cck-tokens">:root{${showTokenCss()}}</style>`;
+  const head = `<style id="cck-tokens">:root{${showTokenCss()}}${FRAME_SCROLLBAR_CSS}</style>`;
   return withHeadFirst(content, head) + THEME_BRIDGE_TAG + REVIEW_BRIDGE_TAG;
 }
 
@@ -16941,10 +17047,15 @@ async function openShowInPane() {
 }
 
 // `onScreen` is postPane's result: null failed, true is already in view unless the terminal covers it.
+function revealPane(sid, onScreen) {
+  if (onScreen && !wantsTerminal()) syncPanes();
+  else if (sid === currentSessionId && wantsTerminal()) toggleTerminal();
+  else openSession(sid);
+}
+
 function toastPaneAdded(sid, onScreen, label) {
   if (onScreen === null || (onScreen && !wantsTerminal())) return;
-  const open = () => (sid === currentSessionId && wantsTerminal() ? toggleTerminal() : openSession(sid));
-  showToast(`${label} added as a pane`, 'success', { label: 'Open', onClick: open });
+  showToast(`${label} added as a pane`, 'success', { label: 'Open', onClick: () => revealPane(sid, false) });
 }
 
 function showCommand(cmd) {
@@ -18105,6 +18216,7 @@ hub.onActive((active) => {
   pushTerminalClaims();
 });
 hub.onStatus(pushTerminalClaims);
+hub.onSettings(applyHubSettings);
 
 // session.changed goes out once the switch settles, so arrowing through the list sends one event.
 let publishTimer = 0;

package/public/index.html

@@ -557,13 +557,13 @@
           <button id="session-info-sticky-btn" class="icon-btn" style="display:none" title="Sticky pin — always show in the list" onclick="toggleSessionSticky(_infoModalSessionId); updateStickyBtnState()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>
           </button>
-          <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
+          <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost (Shift: Cost tab)" onclick="openAppForInfoModal(openCost, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
           </button>
-          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace" onclick="openMarketplaceForInfoModal()">
+          <button id="session-info-marketplace-btn" class="icon-btn" style="display:none" title="Open in Marketplace (Shift: Marketplace tab)" onclick="openAppForInfoModal(openMarketplace, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
           </button>
-          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory" onclick="openMemoryForInfoModal()">
+          <button id="session-info-memory-btn" class="icon-btn" style="display:none" title="Open in Memory (Shift: Memory tab)" onclick="openAppForInfoModal(openMemory, event)">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
           </button>
           <button class="modal-close" aria-label="Close dialog" onclick="closeTeamModal()">