claude-code-kanban 7.13.0 → 7.14.0

package/cli.js

@@ -141,6 +141,17 @@ const COMMANDS = {
         examples: ['claude-code-kanban session open $CLAUDE_SESSION_ID'],
         run: runSessionOpenCli,
       },
+      cost: {
+        summary: 'Show a session (or one subagent) in the Cost app',
+        usage: 'claude-code-kanban session cost <id> [--agent <agent id>]',
+        flags: {
+          '<id>': 'Full session id, or a unique prefix',
+          '--agent <agent id>': 'A subagent of the session (agent-…), as claude-code-cost session prints it',
+        },
+        notes: 'Under the hub the board switches to the Cost tab. The command also prints the cost link, for a board that runs alone.',
+        examples: ['claude-code-kanban session cost 3fa9c1 --agent agent-a10ff42'],
+        run: runSessionCostCli,
+      },
       view: {
         summary: 'Show full session stats (metadata + context window + cost) and the transcript path',
         usage: 'claude-code-kanban session view <id> [--json]',
@@ -943,6 +954,29 @@ async function runSessionOpenCli(args) {
   } catch (e) { reportCliError(e); return 1; }
 }
 
+const AGENT_ID_RE = /^agent-[\w-]+$/;
+
+async function runSessionCostCli(args) {
+  const entry = COMMANDS.session.verbs.cost;
+  const [idArg] = positionals(args, ['--agent']);
+  if (!idArg) {
+    printLeafHelp(entry);
+    return 1;
+  }
+  const agent = getArgValue(args, 'agent');
+  const agentGiven = args.some((a) => a === '--agent' || a.startsWith('--agent='));
+  if (agentGiven && !AGENT_ID_RE.test(agent || '')) return usageError(entry, '--agent takes an agent-… id.');
+  const resolved = await resolveSessionByIdOrPrefix(idArg);
+  if (!resolved) return 1;
+  try {
+    const out = await cliPostJson('/api/session/cost', { id: resolved.id, ...(agent && { agent }) }, 'Cost');
+    if (!out) return 1;
+    console.log(out.delivered ? 'Sent to the board: it opens the Cost tab.' : 'No hub board page is open to show it.');
+    if (out.url) console.log(`Cost view: ${out.url}`);
+    return out.delivered || out.url ? 0 : 1;
+  } catch (e) { reportCliError(e); return 1; }
+}
+
 async function runSessionPinCli(args) {
   const idArg = args.find(a => !a.startsWith('--'));
   if (!idArg) {
@@ -1521,4 +1555,4 @@ async function runSkillsGetCli(args) {
   return 0;
 }
 
-module.exports = { runCli, topHelp, COMMANDS, SERVER_FLAGS };
+module.exports = { runCli, topHelp, COMMANDS, SERVER_FLAGS, AGENT_ID_RE };

package/lib/kanbot.js

@@ -4,6 +4,7 @@ const fs = require('node:fs');
 const path = require('node:path');
 const { encodeProjectDirName } = require('./claude-dir');
 const { MODELS } = require('./terminal');
+const { isPidAlive } = require('./live-sessions');
 const { topHelp } = require('../cli');
 
 const PLUGIN_DIR = path.join(__dirname, '..', 'kanbot');
@@ -19,15 +20,56 @@ function kanbotModel(cfg) {
   return MODELS.has(model) ? model : null;
 }
 
-function writeHelpPrompt(cwd, boardUrl) {
+function costSection(costCli) {
+  if (!costCli) return '';
+  return [
+    '\n# Costs\n',
+    `\`${costCli} help\` lists the commands for Claude Code costs: by day, model, project, session and subagent.`,
+    'To show a session, or one of its subagents, to the user: `claude-code-kanban session cost <id> [--agent <agent id>]`.\n',
+  ].join('\n');
+}
+
+function writeHelpPrompt(cwd, boardUrl, costCli) {
   const file = path.join(cwd, 'cli-help.md');
   const board = boardUrl ? `This board runs at ${boardUrl}; \`$CCK_URL\` holds the same URL, so the CLI talks to it.\n\n` : '';
-  fs.writeFileSync(file, `# claude-code-kanban CLI\n\n${board}\`claude-code-kanban help\` prints:\n\n\`\`\`\n${topHelp()}\n\`\`\`\n`);
+  fs.writeFileSync(file, `# claude-code-kanban CLI\n\n${board}\`claude-code-kanban help\` prints:\n\n\`\`\`\n${topHelp()}\n\`\`\`\n${costSection(costCli)}`);
   return file;
 }
 
-function kanbotArgs(cwd, claudeDir, boardUrl) {
-  return ['--plugin-dir', PLUGIN_DIR, '--agent', AGENT, '--append-system-prompt-file', writeHelpPrompt(cwd, boardUrl), '--add-dir', claudeDir];
+function kanbotArgs(cwd, claudeDir, boardUrl, costCli) {
+  return ['--plugin-dir', PLUGIN_DIR, '--agent', AGENT, '--append-system-prompt-file', writeHelpPrompt(cwd, boardUrl, costCli), '--add-dir', claudeDir];
+}
+
+// A claude-code-cost before its CLI starts a dashboard on any command, so a bin on PATH counts only
+// when its package has lib/cli.js. npm puts the package next to a Windows shim, and a POSIX bin is
+// a symlink to server.js.
+function costPackageHasCli(bin) {
+  const dirs = [path.join(path.dirname(bin), 'node_modules', 'claude-code-cost')];
+  try {
+    dirs.push(path.dirname(fs.realpathSync(bin)));
+  } catch {}
+  return dirs.some((d) => fs.existsSync(path.join(d, 'lib', 'cli.js')));
+}
+
+// The hub gives cck no cost URL. The cost server of this config dir records itself in server.json
+// ({pid, port, script}); a killed one leaves the file behind.
+function readCostServer(claudeDir) {
+  let rec;
+  try {
+    rec = JSON.parse(fs.readFileSync(path.join(claudeDir, '.cost', 'server.json'), 'utf8'));
+  } catch {
+    return null;
+  }
+  if (!Number.isInteger(rec?.pid) || !Number.isInteger(rec?.port) || !isPidAlive(rec.pid)) return null;
+  return { url: `http://localhost:${rec.port}`, script: typeof rec.script === 'string' ? rec.script : null };
+}
+
+// Under the hub the CLI is not on PATH, so the running cost server names its own script.
+function findCostCli({ claudeDir, which }) {
+  const script = readCostServer(claudeDir)?.script;
+  if (script) return `node "${script.replace(/\\/g, '/')}"`;
+  const bin = which('claude-code-cost');
+  return bin && costPackageHasCli(bin) ? 'claude-code-cost' : null;
 }
 
 function createKanbot({ cckDir, projectsDir }) {
@@ -70,10 +112,10 @@ function createKanbot({ cckDir, projectsDir }) {
       sessionId = id;
       ownIds.add(id);
     },
-    startSpec({ model = null, boardUrl = null } = {}) {
+    startSpec({ model = null, boardUrl = null, costCli = null } = {}) {
       fs.mkdirSync(cwd, { recursive: true });
       sessionId = newestTranscript();
-      const extraArgs = kanbotArgs(cwd, path.dirname(cckDir), boardUrl);
+      const extraArgs = kanbotArgs(cwd, path.dirname(cckDir), boardUrl, costCli);
       // Not restored on a cck restart: a restore would bring it back without the agent args.
       return { cwd, name: 'kanbot', model, extraArgs, restore: false, ...(sessionId && { resume: sessionId }) };
     },
@@ -83,4 +125,4 @@ function createKanbot({ cckDir, projectsDir }) {
   };
 }
 
-module.exports = { kanbotOn, kanbotModel, createKanbot, KANBOT_AGENT: AGENT, KANBOT_PLUGIN_DIR: PLUGIN_DIR };
+module.exports = { kanbotOn, kanbotModel, createKanbot, findCostCli, readCostServer, KANBOT_AGENT: AGENT, KANBOT_PLUGIN_DIR: PLUGIN_DIR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.13.0",
+  "version": "7.14.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "type": "commonjs",

package/plugin/plugins/claude-code-kanban/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "claude-code-kanban",
-  "version": "3.7.9",
+  "version": "3.7.11",
   "description": "claude-code-kanban dashboard integration: agent activity tracking, context and cost tracking, board moves and reviews delivered to the session, and skills to drive the board from a session"
 }

package/plugin/plugins/claude-code-kanban/skills/kanban/SKILL.md

@@ -16,7 +16,7 @@ This session id is `${CLAUDE_SESSION_ID}`. `--session` defaults to it through `$
 |---|---|
 | `doc` | `link`, `unlink` a file or URL to the session · `list` its links · `preview` a file in a modal |
 | `pane` | `add` a URL or a local file as a background tab · `rm` · `list` |
-| `session` | `list` · `search <text>` · `open <id>` focuses it · `view <id>` stats and transcript path · `plan <id>` · `agents <id>` · `pin <id>` · `group <id> <group>`, `ungroup <id>` in the sidebar |
+| `session` | `list` · `search <text>` · `open <id>` focuses it · `view <id>` stats and transcript path · `plan <id>` · `agents <id>` · `cost <id> [--agent <agent id>]` opens its costs · `pin <id>` · `group <id> <group>`, `ungroup <id>` in the sidebar |
 | `group` | `list` the sidebar groups, by name and id · `create <name>` · `rename <group> <name>` · `rm <group>` · `prune` the empty ones |
 | `task` | `list` for a session, a project or the whole board |
 | `project` | `list` |

package/plugin/plugins/claude-code-kanban/skills/visualize/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: visualize
-description: Present a topic as one self-contained HTML page — findings, options and a pick, a system overview. Use when the user asks to visualize something, or when an answer outgrows chat (options plus a pick, a diagram plus a table).
+description: Present a topic as one self-contained HTML page whose form fits the content — a diagram of a system, a chart of numbers over time, a model the reader can change, a comparison with a pick. Use when the user asks to visualize something, or when an answer outgrows chat.
 argument-hint: '[what to present]'
 ---
 
@@ -8,30 +8,35 @@ argument-hint: '[what to present]'
 
 Present this: $ARGUMENTS. With no argument, present the subject of this conversation.
 
-The page is a document to read: its text and static exhibits are in the HTML, and it works offline. Two leading words run through it: the **pick** is the option the page recommends (on a page with no options, its main path), and an **exhibit** is the one table, figure or block that proves a section's claim.
+The page is a document to read: its text and static exhibits are in the HTML, and it works offline. Two leading words run through it: the **pick** is the option the page recommends, and an **exhibit** is the one table, figure or block that proves a section's claim. A page with no options has no pick: never invent one to recommend.
+
+The content sets the page's shape. The template gives the theme and a bare frame; [blocks.html](blocks.html) holds ready parts that share the theme, and a page takes only the parts its content has.
 
 ## Steps
 
-1. **Copy.** `cp` [template.html](template.html) from this skill's base directory to the output path. Edit the `<title>` and inside `<main>`; the `<style>` block stays byte for byte, and your own CSS goes in a second `<style>` after it.
-2. **Write the story.** The `<h1>`, the lead and the `<h2>`s alone carry the whole point:
-   1. `.kicker`, then `<title>` and `<h1>`: a name of 2 to 5 words. `.sub`: the question, in one line.
-   2. `.lead`: the answer in 1 or 2 sentences, the pick in `<b>`.
-   3. Sections. Each `<h2>` is a claim that can be false ("A breaker alone trips again on release", not "Breaker"), with one exhibit and at most 2 short paragraphs under it.
-   4. Close with what to do next and `.sources`, one `li` per source. Each `[n]` in the text is an `a.cite` to its row.
-3. **Invent each exhibit.** Ask what form makes this claim obvious at a glance, then build that, the template's blocks or something new: a slope chart, an annotated timeline, small multiples, a cutaway, a ranked strip, a map. The Blocks table is a palette of ready parts, not a menu to choose from. Before you draw an SVG, read the matching guide in the `show` skill — [chart](../show/references/chart.md), [diagram](../show/references/diagram.md) and its type file, [mockup](../show/references/mockup.md) — for patterns: shapes, arrows and labels. Their sizes and directions are for cards; on a page, the Principles below set them. Label masks fill with `--color-bg-subtle`, the figure's background. When the source or the request has a value the reader would want to change, or states one after another, the exhibit can be interactive: a slider or toggle that computes the figure again, a stepper through states, or a model that runs over time. Use the simplest one that proves the claim, and follow [Interactive exhibits](#interactive-exhibits). Never add a control on an input you made up: a claim that rests on fixed facts gets a static exhibit.
-4. **Check.** Render the page in light and in dark, and look at each render, not the source. Done when no text is clipped, no arrow crosses a label, `scrollWidth` equals `clientWidth`, and, when the topic comes from a source such as a file or a conversation, every section and number of it is named where it landed on the page or reported to the user as left out. For an interactive exhibit, also: no console errors, and the numbers the text states are the ones the exhibit shows at its default settings.
-5. **Show.** When `$CCK_URL` is set, the session runs in the cck board: run `claude-code-kanban pane add <page> --title '<h1>'` and tell the user the page waits in that tab. Else give the user the page path.
+1. **Choose the form.** Before you open the template, name the content's shape (a system, a process, a timeline, a comparison, numbers that change, a set of findings) and the page's main exhibit: the one picture a reader remembers. State both in one line. The form makes the claim obvious at a glance. When the content has parts that connect, steps in order or states that change, the main exhibit is a diagram. Else a chart, an annotated timeline, small multiples, a working model or a ready part, whichever proves the claim.
+2. **Copy.** `cp` [template.html](template.html) from this skill's base directory to the output path. Edit the `<title>` and inside `<main>`. Leave the template's `<style>` block as it is, because it holds the theme tokens, and put your own CSS in a second `<style>` after it.
+3. **Write the story.** The `<h1>`, the lead and the `<h2>`s alone carry the whole point. A page has a title, a lead, sections and, when it cites, sources; every other part is there only when the content has that shape:
+   1. `<title>` and `<h1>`: a name of 2 to 5 words. `.kicker` and `.sub` (the question, in one line) when they add something.
+   2. `.lead`: the answer, short enough that a reader who stops here has it. When the page has a pick, name it in `<b>`; else `<b>` holds the main finding, or nothing.
+   3. A lineup when the page compares options, stat tiles when it has a few headline numbers.
+   4. Sections. Each `<h2>` is a claim that can be false ("A breaker alone trips again on release", not "Breaker"), with one exhibit and the short text that supports it.
+   5. Close with what to do next, when there is a next step, and `.sources`, one `li` per source. Each `[n]` in the text is an `a.cite` to its row.
+4. **Build each exhibit.** Each section's claim gets the form that makes it obvious, as in step 1: a slope chart, an annotated timeline, small multiples, a cutaway, a ranked strip, a map, or a ready part. Before you draw an SVG, read the matching guide in the `show` skill — [chart](../show/references/chart.md), [diagram](../show/references/diagram.md) and its type file, [mockup](../show/references/mockup.md) — for patterns: shapes, arrows and labels. Their sizes and directions are for cards; on a page, the Principles below set them. Label masks fill with `--color-bg-subtle`, the figure's background. When the source or the request has a value the reader would want to change, or states one after another, the exhibit is interactive: a slider or toggle that computes the figure again, a stepper through states, or a model that runs over time. Use the simplest one that proves the claim, and follow [Interactive exhibits](#interactive-exhibits). Never add a control on an input you made up: a claim that rests on fixed facts gets a static exhibit.
+5. **Check.** Render the page in light and in dark, and look at each render, not the source. Done when a reader who sees only a thumbnail can tell what the page is about, no text is clipped, no arrow crosses a label, `scrollWidth` equals `clientWidth`, and, when the topic comes from a source such as a file or a conversation, every section and number of it is named where it landed on the page or reported to the user as left out. For an interactive exhibit, also: no console errors, and the numbers the text states are the ones the exhibit shows at its default settings.
+6. **Show.** When `$CCK_URL` is set, the session runs in the cck board: run `claude-code-kanban pane add <page> --title '<h1>'` and tell the user the page waits in that tab. Else give the user the page path.
 
 ## Principles
 
 Every exhibit, ready or new, keeps these:
 
-- **Accent marks the pick**, one or two marks per exhibit: its tile, card, row, node, or the one bar or point in a chart. In a chart that compares options, the pick's series keeps its series color and the accent goes on its label or end point. The rest stays muted. Status colors mean status.
+- **Accent marks the pick**, one or two marks per exhibit: its tile, card, row, node, or the one bar or point in a chart. In a chart that compares options, the pick's series keeps its series color and the accent goes on its label or end point. With no pick, the accent marks the one thing the claim is about, or nothing. The rest stays muted. Status colors mean status.
 - **Chart data takes series colors**: `--color-series-1` for the main series, `--color-text-muted` or `--color-series-3` for a second, up to 8 series; skip `--color-series-2`, which is the accent's hue; past that, fold the tail into "Other" or split into small multiples. The accent can sit close to `--color-danger`, so a whole data series in it reads as an alarm.
 - **Tokens color everything**: `var(--color-*)`, tints by `color-mix(in srgb, var(--color-accent) 12%, var(--color-bg))`. Then the page follows light, dark and a host's theme with no script.
 - **Fit**: an SVG has a `viewBox` up to 960 wide, no `width` attribute, text of 12 units or more. A flow runs left to right when it has 6 steps or fewer.
 - **Remove test**: each node, arrow, label and decoration stays only if removing it loses meaning. A diagram past 9 nodes or 12 arrows splits into an overview and a detail. Each SVG has `role="img"` and `aria-labelledby` pointing at its `<title>`, with a per-figure id prefix.
 - **Real**: real names, numbers and `file:line`, estimates and invented data marked, each claim cited. Repeated marks, such as small multiples, are generated while you write the page.
+- **Structure follows the content**: the sections, their order and the parts in them come from the data and the question, so two pages on different topics have different shapes. A part the content does not call for stays out: stat tiles with no headline numbers, next steps nobody asked for, a lineup with no options.
 
 ## Interactive exhibits
 
@@ -45,7 +50,7 @@ Every exhibit, ready or new, keeps these:
 
 ## Blocks
 
-Ready parts in the template's CSS; its body has one of each.
+Ready parts in the template's CSS. [blocks.html](blocks.html) shows the markup of each; read the rows you use, in the order the story needs.
 
 | Block | Markup | Good for |
 |---|---|---|

package/plugin/plugins/claude-code-kanban/skills/visualize/blocks.html

@@ -0,0 +1,68 @@
+<!-- Markup of each ready part; the CSS is in template.html. Copy a part only when the content has its shape. -->
+
+<!-- Kicker and sub -->
+<p class="kicker">Ticket or context · kind of page</p>
+<p class="sub">The question this page answers.</p>
+
+<!-- Lineup: a page that compares options; data-tone="accent" on the pick -->
+<div class="lineup">
+  <div data-tone="accent"><b>1</b><span>Option A</span><small>the pick</small></div>
+  <div><b>2</b><span>Option B</span><small>too static</small></div>
+</div>
+
+<!-- Stat tiles: a few headline numbers -->
+<div class="kpis">
+  <div class="kpi"><span>Errors in 7 days</span><b>133.5K</b><small>26% of minutes <a class="cite" href="#src-1">[1]</a></small></div>
+  <div class="kpi" data-tone="danger"><span>Peak after release</span><b>30,000</b><small>RU per minute, estimate</small></div>
+</div>
+
+<!-- Section with a label -->
+<section>
+  <p class="eyebrow">Overview</p>
+  <h2>A heading is a claim that can be false</h2>
+</section>
+
+<!-- Cards: trade-offs of options -->
+<div class="cards">
+  <div class="card" data-tone="accent">
+    <h3><span class="dot" data-tone="accent">1</span>Option A<span class="tag" data-tone="accent">pick</span></h3>
+    <p class="verdict">The verdict, in one line.</p>
+    <p>What it is. <a class="cite" href="#src-2">[2]</a></p>
+    <pre>on 429: wait, then retry</pre>
+    <ul><li class="pro">A strong point.</li><li class="con">A weak point.</li></ul>
+  </div>
+</div>
+
+<!-- Table and heatmap cells -->
+<div class="table"><table>
+  <thead><tr><th>Option</th><th>Global</th><th>Lines</th></tr></thead>
+  <tbody>
+    <tr data-tone="accent"><td><span class="dot" data-tone="accent">1</span>Option A</td><td class="c yes">yes</td><td class="num">1,229</td></tr>
+    <tr><td><span class="dot">2</span>Option B</td><td class="c part">partial</td><td class="num">640</td></tr>
+    <tr><td><span class="dot">3</span>Option C</td><td class="c no">no</td><td class="num">300</td></tr>
+  </tbody>
+</table></div>
+
+<!-- Points: findings, each led by its claim -->
+<ul class="points">
+  <li><b>A point leads with its claim.</b> The support.</li>
+  <li><b>Points sit side by side.</b> They wrap to one column on a phone.</li>
+</ul>
+
+<!-- Callout -->
+<div class="callout" data-tone="warning"><p>A warning.</p></div>
+
+<!-- Steps: what to do next -->
+<ol class="steps"><li>First action.</li><li>Second action.</li></ol>
+
+<!-- Legend -->
+<div class="legend"><span><i data-tone="accent"></i>Pick</span><span><i></i>Other</span></div>
+
+<!-- Sources with a closing line -->
+<div class="sources">
+  <ol>
+    <li id="src-1"><code>logs/errors-7d.csv</code><span>error count and share of minutes</span></li>
+    <li id="src-2"><a href="https://example.com">Title of the page</a><span>the retry on 429</span></li>
+  </ol>
+  <p>Estimates are marked as estimates.</p>
+</div>

package/plugin/plugins/claude-code-kanban/skills/visualize/template.html

@@ -158,75 +158,21 @@ a.cite:hover { text-decoration: underline; }
 </head>
 <body>
 <main>
-<p class="kicker">Ticket or context · kind of page</p>
 <h1>Page Title</h1>
-<p class="sub">The question this page answers.</p>
-<p class="lead">The answer in one or two sentences, with <b>the pick</b> named, so a reader who stops here has it.</p>
-
-<div class="lineup">
-  <div data-tone="accent"><b>1</b><span>Option A</span><small>the pick</small></div>
-  <div><b>2</b><span>Option B</span><small>too static</small></div>
-  <div><b>3</b><span>Option C</span><small>separate project</small></div>
-</div>
-
-<div class="kpis">
-  <div class="kpi"><span>Errors in 7 days</span><b>133.5K</b><small>26% of minutes <a class="cite" href="#src-1">[1]</a></small></div>
-  <div class="kpi" data-tone="danger"><span>Peak after release</span><b>30,000</b><small>RU per minute, estimate</small></div>
-</div>
+<p class="lead">The answer, with <b>the main finding</b> named.</p>
 
 <section>
-  <p class="eyebrow">Overview</p>
-  <h2>Each heading is a claim that can be true or false</h2>
+  <h2>A heading is a claim that can be false</h2>
   <figure class="wide">
-    <svg viewBox="0 0 900 200" role="img" aria-labelledby="f1-t"><title id="f1-t">What the diagram shows</title></svg>
-    <figcaption>One sentence: what to notice.</figcaption>
+    <svg viewBox="0 0 900 200" role="img" aria-labelledby="f1-t"><title id="f1-t">What the figure shows</title></svg>
+    <figcaption>What to notice.</figcaption>
   </figure>
 </section>
 
-<section>
-  <p class="eyebrow">Options</p>
-  <h2>Cards lead with the verdict</h2>
-  <div class="cards">
-    <div class="card" data-tone="accent">
-      <h3><span class="dot" data-tone="accent">1</span>Option A<span class="tag" data-tone="accent">pick</span></h3>
-      <p class="verdict">The verdict, in one line.</p>
-      <p>What it is, in one sentence. <a class="cite" href="#src-2">[2]</a></p>
-      <pre>on 429: wait, then retry</pre>
-      <ul><li class="pro">A strong point.</li><li class="con">A weak point.</li></ul>
-    </div>
-  </div>
-</section>
-
-<section>
-  <p class="eyebrow">Compare</p>
-  <h2>A table holds the matrix</h2>
-  <div class="table"><table>
-    <thead><tr><th>Option</th><th>Global</th><th>Lines</th></tr></thead>
-    <tbody>
-      <tr data-tone="accent"><td><span class="dot" data-tone="accent">1</span>Option A</td><td class="c yes">yes</td><td class="num">1,229</td></tr>
-      <tr><td><span class="dot">2</span>Option B</td><td class="c part">partial</td><td class="num">640</td></tr>
-      <tr><td><span class="dot">3</span>Option C</td><td class="c no">no</td><td class="num">300</td></tr>
-    </tbody>
-  </table></div>
-  <ul class="points">
-    <li><b>A point leads with its claim.</b> One or two sentences of support.</li>
-    <li><b>Points sit side by side.</b> They wrap to one column on a phone.</li>
-  </ul>
-</section>
-
-<section>
-  <p class="eyebrow">Next</p>
-  <h2>Steps say what to do next</h2>
-  <ol class="steps"><li>First action.</li><li>Second action.</li></ol>
-</section>
-
 <div class="sources">
   <ol>
-    <li id="src-1"><code>logs/errors-7d.csv</code><span>error count and share of minutes</span></li>
-    <li id="src-2"><code>services/api/src/middleware/rate-limit/retry-after-handler.ts:42</code><span>the retry on 429</span></li>
-    <li id="src-3"><a href="https://example.com">Title of the page</a><span>line counts in the table</span></li>
+    <li id="src-1"><code>path/to/file.ts:42</code><span>what it backs</span></li>
   </ol>
-  <p>Estimates are marked as estimates.</p>
 </div>
 </main>
 </body>

package/public/app.js

@@ -2604,9 +2604,18 @@ function replyLocateHint(timestamp, sid) {
   return `If that reply is not in your context, it is in ${transcript}, the assistant entry with timestamp ${timestamp}.`;
 }
 
+let msgDetailFromTerminal = false;
+
 function closeMsgDetailModal() {
   unmountMsgReview();
   hideModalOverlay('msg-detail-modal');
+  // A task later, so a modal opened right after this one (View Agent) keeps the focus.
+  if (msgDetailFromTerminal) {
+    setTimeout(() => {
+      if (!isAnyModalOpen() && wantsTerminal()) focusTerminalPane();
+    });
+  }
+  msgDetailFromTerminal = false;
   msgDetailFollowLatest = false;
   waitingDetailAutoOpened = false;
   // Drop the message highlight on close, mirroring task-card behavior.
@@ -7556,16 +7565,19 @@ function shiftOnly(e, code) {
   return e.code === code && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey;
 }
 
+// xterm runs in another process, so blur() in the board leaves it focused and the modal's arrow keys go
+// to it. Focusing a board element takes the focus.
 function toggleLastMessage() {
   if (document.getElementById('msg-detail-modal').classList.contains('visible')) {
     closeMsgDetailModal();
-  } else if (isWaitingFresh()) {
-    msgDetailFollowLatest = true;
-    showWaitingDetail();
-  } else if (currentMessages.length) {
-    msgDetailFollowLatest = true;
-    showMsgDetail(currentMessages.length - 1);
+    return;
   }
+  if (!isWaitingFresh() && !currentMessages.length) return;
+  msgDetailFromTerminal = terminalPaneFocused();
+  msgDetailFollowLatest = true;
+  if (isWaitingFresh()) showWaitingDetail();
+  else showMsgDetail(currentMessages.length - 1);
+  if (msgDetailFromTerminal) document.querySelector('#msg-detail-modal .msg-detail-dialog').focus();
 }
 
 function dismissSessionFromList(sid) {
@@ -10178,6 +10190,12 @@ function setupEventSource() {
         handleSessionOpenEvent(data);
       }
 
+      // 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);
+      }
+
       if (data.type === 'session:pin') {
         handleSessionPinEvent(data);
       }
@@ -12968,7 +12986,9 @@ function openFolderInEditor(folder, file) {
   postAndToast('/api/open-folder', body, 'folder');
 }
 
-function openCost(sessionId) {
+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 } : {});
 }
 

package/public/index.html

@@ -430,7 +430,7 @@
 
   <!-- Message Detail Modal -->
   <div id="msg-detail-modal" class="modal-overlay" onclick="closeMsgDetailModal()">
-    <div class="modal msg-detail-dialog review-host" onclick="event.stopPropagation()">
+    <div class="modal msg-detail-dialog review-host" tabindex="-1" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title" id="msg-detail-title">Message</h3>
         <div style="display:flex;gap:4px;align-items:center;">

package/public/style.css

@@ -7623,6 +7623,10 @@ body.light .msg-assistant .msg-text {
   overflow-y: auto;
 }
 
+.modal.msg-detail-dialog:focus {
+  outline: none;
+}
+
 /* Before .modal.fullscreen on purpose: at equal specificity the later
    fullscreen rule must win, same as for every other per-modal size. */
 .modal.msg-detail-dialog {

package/server.js

@@ -48,7 +48,8 @@ const { buildDecision, decisionFileName, isDecisionFile, approvalsFrom, boardRef
 const { getClaudeDir, getArgValue, storageNamespace, isDefaultClaudeDir } = require('./lib/claude-dir');
 const { readTerminalConfig } = require('./lib/terminal');
 const { createTerminalClient } = require('./lib/terminal-client');
-const { kanbotOn, kanbotModel, createKanbot } = require('./lib/kanbot');
+const { kanbotOn, kanbotModel, createKanbot, findCostCli, readCostServer } = require('./lib/kanbot');
+const { AGENT_ID_RE } = require('./cli');
 const { createShowStore, mountShowRoutes, showBodyParser, SHOW_PATH } = require('./lib/show');
 const { readLiveSessions, isPidAlive, noteReplacedSessions } = require('./lib/live-sessions');
 const { createProcStats } = require('./lib/proc-stats');
@@ -3526,6 +3527,7 @@ async function ensureKanbot() {
   const started = await terminal.startNew(kanbot.startSpec({
     model: kanbotModelSetting(),
     boardUrl: `http://127.0.0.1:${boardPort}`,
+    costCli: findCostCli({ claudeDir: CLAUDE_DIR, which: whichSync }),
   }));
   if (started.error) return started;
   kanbot.ptyId = started.id;
@@ -3799,7 +3801,7 @@ async function confirmKind(absPath, kind) {
 }
 
 // Whole files are pushed into a modal, so anything huge freezes the tab regardless of kind.
-const PREVIEW_MAX_BYTES = 8 * 1024 * 1024;
+const PREVIEW_MAX_BYTES = 16 * 1024 * 1024;
 // Source in a modal is for reading, not for scrolling a generated bundle.
 const PREVIEW_TEXT_MAX_BYTES = 2 * 1024 * 1024;
 
@@ -3989,6 +3991,19 @@ app.post('/api/session/open', async (req, res) => {
   }
 });
 
+app.post('/api/session/cost', (req, res) => {
+  const { id, agent } = req.body || {};
+  if (!id || typeof id !== 'string') return res.status(400).json({ error: 'id is required' });
+  if (agent !== undefined && (typeof agent !== 'string' || !AGENT_ID_RE.test(agent))) {
+    return res.status(400).json({ error: 'agent must be an agent-… id' });
+  }
+  broadcast({ type: 'session:cost', id, ...(agent && { agent }) });
+  const query = new URLSearchParams({ view: 'detail', session: id, ...(agent && { agent }) });
+  const costUrl = COST_URL || readCostServer(CLAUDE_DIR)?.url;
+  // A page opens the Cost tab only under the hub.
+  res.json({ delivered: process.env.CLAUDE_HUB ? clients.size : 0, url: costUrl ? `${new URL(`?${query}`, costUrl)}` : null });
+});
+
 // #region SESSION_PINS
 function broadcastPins(changed) {
   for (const { id, state } of changed) broadcast({ type: 'session:pin', id, state });