claude-code-kanban 7.16.0 → 7.18.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,63 @@ 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(agents) {
+  const active = agents.filter((a) => a.status === 'active');
+  if (!active.length) return '';
   const now = Date.now();
+  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">${formatDuration(agentElapsed(a, now))}</span>
+    </button>`;
+  });
+  return `<div class="panel-section-header"><span>Agents</span><span class="panel-section-count">${active.length}</span></div>${rows.join('')}`;
+}
+
+function renderZenAgents(agents) {
+  const el = zenMode && sessionsList.querySelector('.zen-agents');
+  if (el) el.innerHTML = zenAgentsHtml(agents);
+}
 
-  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 +3481,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 +3519,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 +3536,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 +3933,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,7 +4110,8 @@ function renderSessions() {
         ${renderArtifactsHtml(zenSession.id)}
         ${renderZenBookmarksHtml(zenSession.id)}
       </div>
-      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}`;
+      ${zenSession.hasWorkflow ? renderWorkflowLiveHtml(zenSession.id) : ''}
+      <div class="zen-agents">${zenAgentsHtml(visibleAgents())}</div>`;
     bindLinkedDocsHandlers(sessionsList.querySelector('.linked-docs-section'), zenSession.id);
     artifactsSection.load(zenSession.id);
     scratchFilesSection.load(zenSession.id);
@@ -7503,7 +7550,13 @@ function _findOrphanedKeys(known) {
   const orphaned = [];
   for (const id of pinnedSessionIds) if (!known.has(id)) orphaned.push(`__pinned__${id}`);
   for (const id of stickySessionIds) if (!known.has(id)) orphaned.push(`__sticky__${id}`);
-  const sessionKeyPrefixes = [PINNED_MESSAGES_PREFIX, PAD_EMOJI_PREFIX, PREVIEW_STORAGE_PREFIX, PAD_LINKED_PREFIX];
+  const sessionKeyPrefixes = [
+    PINNED_MESSAGES_PREFIX,
+    PAD_EMOJI_PREFIX,
+    PREVIEW_STORAGE_PREFIX,
+    PAD_LINKED_PREFIX,
+    DROPPED_ARTIFACTS_PREFIX,
+  ];
   for (const key of store.keys()) {
     const pad = _parsePadKey(key);
     if (pad?.kind === 'group') {
@@ -9173,7 +9226,7 @@ function bindPreviewRelativeLinks(bodyEl, baseOf = () => currentPreviewPath) {
     if (isUrlRef(href)) return;
     const cleanHref = href.replace(/#.*$/, '');
     e.preventDefault();
-    openPreviewByPath(cleanHref, isAbsolutePath(href) ? undefined : baseOf(a), openFileInEditor);
+    openPreviewByPath(cleanHref, baseOf(a), openFileInEditor);
   });
   bodyEl.dataset.relLinkBound = '1';
 }
@@ -9675,8 +9728,34 @@ function artifactLabel(a) {
   return a.path ? pathBasename(a.path).replace(/\.html?$/i, '') : 'Artifact';
 }
 
+// The list comes from the transcript on every read, so a dropped artifact is kept out by URL.
+const DROPPED_ARTIFACTS_PREFIX = 'artifacts-dropped-';
+
+function droppedArtifacts(sessionId) {
+  return new Set(readStoredList(DROPPED_ARTIFACTS_PREFIX + sessionId));
+}
+
+function setArtifactDropped(sessionId, url, dropped) {
+  const urls = droppedArtifacts(sessionId);
+  if (dropped) urls.add(url);
+  else urls.delete(url);
+  if (urls.size) store.writeJson(DROPPED_ARTIFACTS_PREFIX + sessionId, [...urls]);
+  else store.removeItem(DROPPED_ARTIFACTS_PREFIX + sessionId);
+  artifactsSection.repaint(sessionId);
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function dropArtifact(sessionId, url) {
+  setArtifactDropped(sessionId, url, true);
+  showToast('Artifact dropped from the list', 'info', {
+    label: 'Undo',
+    onClick: () => setArtifactDropped(sessionId, url, false),
+  });
+}
+
 function artifactsInnerHtml(sessionId) {
-  const list = artifactsSection.get(sessionId);
+  const dropped = droppedArtifacts(sessionId);
+  const list = artifactsSection.get(sessionId).filter((a) => !dropped.has(a.url));
   if (!list.length) return '';
   const items = list
     .map(
@@ -9684,6 +9763,7 @@ function artifactsInnerHtml(sessionId) {
         <a class="artifact-link" href="${escapeHtml(a.url)}" target="_blank" rel="noopener" title="${escapeHtml(a.url)}">${escapeHtml(artifactLabel(a))}</a>
         <span class="row-actions artifact-actions">
           <button type="button" onclick="copyWithFeedback('${escAttrJs(a.url)}', this)" title="Copy link" aria-label="Copy artifact link">${ICON_COPY}</button>
+          <button type="button" class="artifact-remove" onclick="dropArtifact('${escAttrJs(sessionId)}','${escAttrJs(a.url)}')" title="Drop from the list" aria-label="Drop ${escapeHtml(artifactLabel(a))} from the list">&times;</button>
         </span>
       </li>`,
     )
@@ -11055,9 +11135,14 @@ function toRelativeIfUnder(filePath, baseDir) {
   return fp.slice(bd.length + 1);
 }
 
+// DOMPurify's default list plus `file:` and drive paths (`C:/x` reads as a scheme), so a link to a
+// local file survives and opens in the preview.
+const MARKDOWN_URI =
+  /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix|file):|[a-z]:[\\/]|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+
 function renderMarkdown(text) {
   if (typeof DOMPurify !== 'undefined' && typeof marked !== 'undefined') {
-    return DOMPurify.sanitize(marked.parse(text));
+    return DOMPurify.sanitize(marked.parse(text), { ALLOWED_URI_REGEXP: MARKDOWN_URI });
   }
   return `<pre style="white-space:pre-wrap;margin:0;">${escapeHtml(text)}</pre>`;
 }
@@ -11531,6 +11616,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;
@@ -15377,6 +15468,12 @@ function terminalInitOptions(themeOptions) {
   };
 }
 
+function openTerminalLink(href) {
+  if (typeof href === 'string' && isLocalHref(href)) return openLocalHref(href);
+  const url = linkUrl(href);
+  if (url) hub.openExternal(url);
+}
+
 function onTerminalFrameMessage(t, m) {
   const socket = termState.socket;
   const current = socket && m.socketId === socket.id;
@@ -15396,6 +15493,7 @@ function onTerminalFrameMessage(t, m) {
       reconnectTerminal();
     }
   } else if (t === 'key') replayKey(m, document.getElementById('terminal-key-proxy'));
+  else if (t === 'link') openTerminalLink(m.href);
   // Chrome does not always fire focusin on the iframe element when its content takes focus.
   else if (t === 'focused') terminalHadFocus = terminalPaneFocused();
   else if (t === 'opening') {
@@ -16022,17 +16120,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]),
     ]
@@ -16730,9 +16829,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>`;
@@ -16743,7 +16846,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;
 }
 
@@ -18060,6 +18163,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;
@@ -18092,13 +18196,6 @@ function publishSession() {
   );
 }
 
-// The help modal stops click propagation, so the document handler below never sees this link.
-// The service worker can pair a cached page that lacks the link with this script.
-document.getElementById('help-docs')?.addEventListener('click', (e) => {
-  e.preventDefault();
-  hub.openExternal(e.currentTarget.href);
-});
-
 function webUrl(href) {
   let url;
   try {
@@ -18109,17 +18206,38 @@ function webUrl(href) {
   return url.protocol === 'http:' || url.protocol === 'https:' ? url : null;
 }
 
-document.addEventListener('click', (e) => {
-  const a = e.target.closest?.('a[href]');
-  if (!a) return;
-  const href = a.getAttribute('href');
-  if (!href) return;
-  const url = webUrl(href);
-  if (!url || url.origin === window.location.origin) return;
-  e.preventDefault();
-  e.stopPropagation();
-  hub.openExternal(url.href);
-});
+function isLocalHref(href) {
+  return /^file:/i.test(href) || (isAbsolutePath(href) && !href.startsWith('//'));
+}
+
+function openLocalHref(href) {
+  openPreviewByPath(href.replace(/#.*$/, ''), undefined, openFileInEditor);
+}
+
+// Capture, because the modals stop a click's propagation, and stopped here so a link in a message
+// preview does not also open the row. Under the hub the SDK has already opened a web link
+// outside (defaultPrevented), and leaves a link to a hub app alone.
+document.addEventListener(
+  'click',
+  (e) => {
+    if (e.button !== 0) return;
+    const href = e.target.closest?.('a[href]')?.getAttribute('href');
+    if (!href) return;
+    const url = webUrl(href);
+    const external = url && url.origin !== window.location.origin;
+    if (e.defaultPrevented) {
+      if (external) e.stopPropagation();
+      return;
+    }
+    const local = isLocalHref(href);
+    if (!local && (!external || hub.inHub)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (local) openLocalHref(href);
+    else hub.openExternal(url.href);
+  },
+  true,
+);
 
 (function initHubTheme() {
   const getTheme = () => (document.body.classList.contains('light') ? 'light' : 'dark');