claude-code-kanban 7.12.1 → 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/hub-app.json

@@ -5,7 +5,7 @@
   "icon": "columns",
   "run": { "entry": "server.js", "defaultPort": 3541 },
   "publishes": ["session.changed"],
-  "keys": { "keeps": ["ctrl+alt+n", "ctrl+alt+r", "ctrl+alt+s", "ctrl+shift+d", "ctrl+shift+k", "ctrl+shift+l", "ctrl+shift+m", "ctrl+shift+p", "ctrl+shift+z"] },
+  "keys": { "keeps": ["ctrl+alt+1", "ctrl+alt+2", "ctrl+alt+3", "ctrl+alt+4", "ctrl+alt+5", "ctrl+alt+6", "ctrl+alt+7", "ctrl+alt+8", "ctrl+alt+9", "ctrl+alt+n", "ctrl+alt+r", "ctrl+alt+s", "ctrl+shift+d", "ctrl+shift+k", "ctrl+shift+l", "ctrl+shift+m", "ctrl+shift+p", "ctrl+shift+z"] },
   "plugin": {
     "marketplace": "plugin",
     "name": "claude-code-kanban",

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.12.1",
+  "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.8",
+  "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`.
-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 |
 |---|---|---|
@@ -62,6 +67,7 @@ Ready parts in the template's CSS; its body has one of each.
 | Callout | `div.callout` | A warning |
 | Steps | `ol.steps` | What to do next |
 | Tag, dot, legend | `span.tag`, `span.dot`, `.legend > span > i` | Labels and keys |
-| Sources | `div.sources` | Where each claim comes from |
+| Sources | `.sources > ol > li#src-n > code + span`, then `p` | Where each claim comes from: one source per `li`, numbered in order (CSS prints `[n]`), the path or `a` link, and in `span` what it backs; a closing line, such as how estimates are marked, goes in the `p` |
+| Citation | `a.cite[href="#src-n"]` holding `[n]` | An in-text marker that jumps to its source row |
 
 `data-tone` takes `accent`, `info`, `success`, `warning`, `danger` or `muted` on any block, legend keys included.

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

@@ -111,7 +111,8 @@ td.num { text-align: right; font-variant-numeric: tabular-nums; }
 td.c { text-align: center; white-space: nowrap; }
 td.yes { --tone: var(--color-success); } td.no { --tone: var(--color-danger); } td.part { --tone: var(--color-warning); }
 td.yes, td.no, td.part { color: var(--tone); font-weight: 600; background: color-mix(in srgb, var(--tone) 13%, transparent); }
-td.yes::before { content: "● "; } td.part::before { content: "◐ "; } td.no::before { content: "○ "; }
+td.yes::before, td.part::before, td.no::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
+td.yes::before { background: currentColor; } td.part::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
 tr[data-tone] > td:first-child { box-shadow: inset 3px 0 0 var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); }
 
 figure { margin: 0 0 20px; padding: 24px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg-subtle) radial-gradient(color-mix(in srgb, var(--color-text) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px; }
@@ -131,9 +132,18 @@ ol.steps > li { counter-increment: step; position: relative; padding: 2px 0 20px
 ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-mono); color: var(--color-bg); background: var(--color-accent); }
 ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 1px; background: var(--color-border); }
 
-.sources { margin-top: 88px; padding-top: 16px; border-top: 1px solid var(--color-border); font: 12px/1.7 var(--font-mono); color: var(--color-text-muted); }
-.sources p { max-width: none; }
-.sources code { font-size: inherit; background: none; border: 0; padding: 0; }
+.sources { margin-top: 88px; padding-top: 16px; border-top: 1px solid var(--color-border); font: 13px/20px var(--font-sans); color: var(--color-text-muted); }
+.sources::before { content: "Sources"; display: block; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
+.sources ol { list-style: none; counter-reset: src; padding: 0; margin: 0; }
+.sources li { counter-increment: src; position: relative; max-width: none; margin: 0; padding: 4px 8px 4px calc(5ch + 8px); border-radius: 6px; scroll-margin-top: 24px; }
+.sources li::before { content: "[" counter(src) "]"; position: absolute; left: 8px; font: 12.5px/20px var(--font-mono); }
+.sources li:target { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
+.sources li > span { margin-left: 10px; }
+.sources code { font-size: 12.5px; color: var(--color-text); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
+.sources a { overflow-wrap: anywhere; }
+.sources > p { max-width: none; margin: 12px 0 0; padding-left: 8px; }
+a.cite { font: 500 .8em var(--font-mono); text-decoration: none; white-space: nowrap; }
+a.cite:hover { text-decoration: underline; }
 
 @media (max-width: 600px) {
   main { padding-top: 36px; }
@@ -148,68 +158,22 @@ ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1
 </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 [1]</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.</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 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"><p>Sources: [1] <code>path/to/file.md</code> · [2] <a href="https://example.com">Title</a>. Estimates are marked as estimates.</p></div>
+<div class="sources">
+  <ol>
+    <li id="src-1"><code>path/to/file.ts:42</code><span>what it backs</span></li>
+  </ol>
+</div>
 </main>
 </body>
 </html>

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.
@@ -3918,7 +3927,7 @@ function renderSessions() {
   const renderSessionCard = (session) => {
     if (session.placeholder) return renderPlaceholderCard(session, childDepth.get(session.id));
     const total = session.taskCount;
-    const percent = total > 0 ? Math.round((session.completed / total) * 100) : 0;
+    const pct = (n) => Math.round((n / total) * 100);
     const isActive = session.id === currentSessionId && viewMode === 'session';
     const isLive = isSessionLive(session);
     const sessionName = sessionDisplayName(session);
@@ -3951,7 +3960,7 @@ function renderSessions() {
     const sid = escAttrJs(session.id);
     const progressHtml =
       total > 0
-        ? `<div class="session-progress" title="${escapeHtml(session.completed)} of ${total} tasks done"><div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div><span class="progress-text">${session.completed}/${total}</span></div>`
+        ? `<div class="session-progress" title="${escapeHtml(`${session.pending} pending, ${session.inProgress} in progress, ${session.completed} completed`)}"><div class="progress-bar"><div class="progress-fill done" style="width: ${pct(session.completed)}%"></div>${session.inProgress > 0 ? `<div class="progress-fill wip" style="width: ${pct(session.inProgress)}%"></div>` : ''}</div><span class="progress-text">${session.completed + session.inProgress}/${total}</span></div>`
         : '';
     const metricsHtml = progressHtml + (showCtx ? renderContextBar(session) : '');
     return `
@@ -6391,6 +6400,12 @@ const SHORTCUT_TABS = [
         title: 'Tabs',
         rows: [
           { keys: ['[', ']'], label: 'Previous / next tab (a split counts as one)' },
+          {
+            keys: ['Ctrl', 'Alt', '1…9'],
+            combo: true,
+            yields: 'ctrl+alt+1',
+            label: 'Go to tab or group N (the board is 1)',
+          },
           { keys: ['Alt', '[ / ]'], combo: true, label: 'Change the tab in the focused side of a split' },
           { keys: ['|'], label: 'Split with the tab before it / unsplit (or drag a tab onto a side)' },
           { keys: ['{', '}'], label: 'Focus left / right side of a split' },
@@ -6542,6 +6557,8 @@ function termKbd() {
 function helpKeys(row, mac = IS_MAC, keyLabel = hub.keyLabel) {
   const live = row.action && keyLabel(row.action);
   if (live) return live;
+  // `yields`: the row's key gives way when the hub binds that combo.
+  if (row.yields && hub.forwardCombos().includes(row.yields)) return [];
   if (!mac) return row.keys;
   if (row.hubMod) return ['⌃', '⌥', ...row.keys.filter((k) => k !== 'Ctrl' && k !== 'Alt')];
   return row.keys.map((k) => MAC_KEYS[k] || k);
@@ -7548,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) {
@@ -7825,6 +7845,12 @@ document.addEventListener('keydown', (e) => {
     }
     return;
   }
+  // The hub binds Ctrl+Alt+digit on macOS for its app keys.
+  if (hubModDown(e) && /^Digit[1-9]$/.test(e.code) && !hub.forwards(e) && selectPaneByNumber(Number(e.code.slice(5)))) {
+    e.preventDefault();
+    focusActivePane();
+    return;
+  }
   if (altOnly && e.code === 'KeyW' && closeFocusedPane()) {
     e.preventDefault();
     return;
@@ -8631,6 +8657,7 @@ const PANE_CLAIMS = [
   ...['|', '{', '}', 'F10'].map((key) => ({ shiftKey: true, key, 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}` })),
 ];
 
 // Ctrl+D and Alt+Enter act on the show card (showCardKey); other pages keep them. Alt+W and Esc are in PANE_CLAIMS.
@@ -10163,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);
       }
@@ -12953,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 } : {});
 }
 
@@ -13237,6 +13272,7 @@ function setActivePaneId(sid, id) {
   if (getActivePaneId(sid) === id) return;
   paneActive = savePaneState(PANE_ACTIVE_KEY, paneActive, sid, id === 'board' ? null : id);
   notePairFocus(sid, id);
+  noteGroupFocus(sid, id);
 }
 
 // {[sessionId]: [{l, r, f}]}; sides are pane ids or 'board', `f` the side focused
@@ -13297,18 +13333,75 @@ function neighborPair(sid, id, pairs) {
   return i > 0 ? { l: free[i - 1], r: id } : { l: id, r: free[1] };
 }
 
-// The strip in order, as {ids, pair}: a lone tab, or a pair at the place of its first tab.
-function paneStripItems(sid) {
+// {[sessionId]: [{id, name, color, ids, closed, last}]}; `ids` are pane ids, `last` the one shown
+// last. Like pairs, groups live in this browser tab only. A group shows at the place of its first
+// tab, so grouping leaves the server's order alone; a drag saves the order on screen.
+const PANE_GROUPS_KEY = 'pane-groups';
+const PANE_GROUP_COLORS = ['blue', 'purple', 'teal', 'orange', 'yellow', 'pink', 'green', 'red'];
+let paneGroups = loadPaneState(PANE_GROUPS_KEY);
+
+// Tabs that are gone, or in an earlier group, drop out, and so do groups left empty.
+function getPaneGroups(sid) {
+  if (!paneGroups[sid]) return [];
+  const live = new Set(paneLayout(sid).panes.map((p) => p.id));
+  const taken = new Set();
+  const groups = [];
+  for (const g of paneGroups[sid]) {
+    const ids = g.ids.filter((id) => live.has(id) && !taken.has(id));
+    for (const id of ids) taken.add(id);
+    const color = PANE_GROUP_COLORS.includes(g.color) ? g.color : PANE_GROUP_COLORS[0];
+    if (ids.length) groups.push({ id: g.id, name: g.name || '', color, ids, closed: !!g.closed, last: g.last });
+  }
+  return groups;
+}
+
+function setPaneGroups(sid, groups) {
+  paneGroups = savePaneState(PANE_GROUPS_KEY, paneGroups, sid, groups.length ? groups : null);
+}
+
+// A pair is in the group of either side, and the board is in none.
+function groupOfTabs(groups, ids) {
+  return ids.includes('board') ? null : groups.find((g) => ids.some((t) => g.ids.includes(t))) || null;
+}
+
+function noteGroupFocus(sid, id) {
+  const pair = pairOf(sid, id);
+  const group = groupOfTabs(getPaneGroups(sid), pair ? [pair.l, pair.r] : [id]);
+  if (group && (group.closed || group.last !== id)) updatePaneGroup(sid, group.id, { closed: false, last: id });
+}
+
+// The strip as the number keys count it, {group, items}: a group is one stop, open or collapsed.
+// An item is {ids, pair, group}: a lone tab, or a pair at the place of its first tab. A group's
+// items follow its first one.
+function paneStripStops(sid) {
   const pairs = getPanePairs(sid);
-  const items = [];
+  const groups = getPaneGroups(sid);
+  const stops = [];
+  const groupStops = new Map();
+  const seen = new Set();
   for (const id of paneTabIds(sid)) {
     const pair = pairs.find((p) => splitSideOf(p, id)) || null;
-    if (!pair) items.push({ ids: [id], pair });
-    else if (!items.some((it) => it.pair === pair)) items.push({ ids: [pair.l, pair.r], pair });
+    if (pair && seen.has(pair)) continue;
+    if (pair) seen.add(pair);
+    const ids = pair ? [pair.l, pair.r] : [id];
+    const group = groupOfTabs(groups, ids);
+    const item = { ids, pair, group };
+    const stop = group && groupStops.get(group);
+    if (stop) stop.items.push(item);
+    else {
+      stops.push({ group, items: [item] });
+      if (group) groupStops.set(group, stops.at(-1));
+    }
   }
-  return items;
+  return stops;
 }
 
+const paneStripItems = (sid) => paneStripStops(sid).flatMap((s) => s.items);
+
+// The items a click or a key can reach: a collapsed group hides its tabs.
+const isOpenItem = (it) => !it.group?.closed;
+const openStripItems = (sid) => paneStripItems(sid).filter(isOpenItem);
+
 function unpairPanes(sid, pair, keep) {
   setPanePairs(sid, withoutTabs(getPanePairs(sid), pair.l));
   if (keep) setActivePaneId(sid, keep);
@@ -13502,7 +13595,7 @@ function paneMenuLabel(pane, label) {
 
 function renderPaneTabs(sid, layout, split) {
   // A rebuild mid-drag removes the dragged tab, and then no dragend fires. Mid-rename it drops the input.
-  if (paneDragId || paneRenameId) return;
+  if (paneDragId || stripRename) return;
   const active = getActivePaneId(sid);
   const state = (id) => (active === id ? ' on' : split && splitSideOf(split, id) ? ' shown' : '');
   const tab = (id, cls, inner, tip) =>
@@ -13531,9 +13624,17 @@ function renderPaneTabs(sid, layout, split) {
     pair
       ? `<div class="pane-pair${pair === split ? ' on' : ''}">${ids.map(tabHtml).join('<span class="pane-pair-sep"></span>')}</div>`
       : tabHtml(ids[0]);
-  const [pinned, ...rest] = paneStripItems(sid).map(itemHtml);
-  const pin = pinned + (rest.length ? '<span class="pane-sep"></span>' : '');
-  const html = rest.join('');
+  const groupHtml = (g, items) => {
+    const n = items.flatMap((it) => it.ids).length;
+    const tip = g.closed ? `Expand group (${n} tabs)` : 'Collapse group';
+    const label =
+      (g.name ? `<span>${escapeHtml(g.name)}</span>` : '') +
+      (g.closed ? `<span class="pane-group-count">${n}</span>` : '');
+    return `<div class="pane-group${g.closed ? ' closed' : ''}" style="${paneGroupStyle(g.color)}"><button class="pane-group-chip" data-group="${escapeHtml(g.id)}" title="${escapeHtml(tip)}">${label}</button>${g.closed ? '' : items.map(itemHtml).join('')}</div>`;
+  };
+  const [first, ...rest] = paneStripStops(sid);
+  const pin = itemHtml(first.items[0]) + (rest.length ? '<span class="pane-sep"></span>' : '');
+  const html = rest.map(({ group, items }) => (group ? groupHtml(group, items) : itemHtml(items[0]))).join('');
   // syncPanes runs on every task refresh and search keystroke; skip the rebuild and the reflows.
   if (pin + html === paneTabsHtml) return;
   paneTabsHtml = pin + html;
@@ -13901,17 +14002,90 @@ function cyclePane(step) {
   return true;
 }
 
+function selectStripItem({ ids, pair }) {
+  selectPane(pair ? pair[pair.f || 'l'] : ids[0]);
+}
+
+function selectPaneByNumber(n) {
+  const sid = paneSessionId();
+  if (!sid || wantsTerminal()) return false;
+  const stop = paneStripStops(sid)[n - 1];
+  if (stop) selectStripItem(stop.items.find((it) => it.ids.includes(stop.group?.last)) || stop.items[0]);
+  return true;
+}
+
 function cyclePaneStrip(step) {
   const sid = paneSessionId();
   if (!sid || wantsTerminal()) return false;
   const active = getActivePaneId(sid);
-  const items = paneStripItems(sid);
+  const items = openStripItems(sid);
   const i = items.findIndex((it) => it.ids.includes(active));
-  const { ids, pair } = items[(i + step + items.length) % items.length];
-  selectPane(pair ? pair[pair.f || 'l'] : ids[0]);
+  selectStripItem(items[(i + step + items.length) % items.length]);
   return true;
 }
 
+function updatePaneGroup(sid, groupId, change) {
+  const groups = getPaneGroups(sid);
+  const group = groups.find((g) => g.id === groupId);
+  if (!group) return;
+  Object.assign(group, change);
+  setPaneGroups(sid, groups);
+}
+
+// `to` is a group id, 'new', or null to take the tab out of its group. A split moves as one.
+function groupPaneTab(id, to) {
+  const sid = paneSessionId();
+  const item = sid && paneStripItems(sid).find((it) => it.ids.includes(id));
+  if (!item || item.ids.includes('board')) return;
+  const groups = getPaneGroups(sid);
+  for (const g of groups) g.ids = g.ids.filter((t) => !item.ids.includes(t));
+  let target = groups.find((g) => g.id === to);
+  if (to === 'new') {
+    const used = new Set(groups.filter((g) => g.ids.length).map((g) => g.color));
+    const color =
+      PANE_GROUP_COLORS.find((c) => !used.has(c)) || PANE_GROUP_COLORS[groups.length % PANE_GROUP_COLORS.length];
+    target = { id: `g${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`, name: '', color, ids: [] };
+    groups.push(target);
+  }
+  if (target) Object.assign(target, { ids: [...target.ids, ...item.ids], closed: false });
+  setPaneGroups(sid, groups);
+  syncPanes();
+  if (to === 'new') beginPaneGroupRename(target.id);
+}
+
+// A collapsed group cannot hold the tab on screen, so collapsing it moves to the next open item.
+function togglePaneGroup(groupId) {
+  const sid = paneSessionId();
+  const group = sid && getPaneGroups(sid).find((g) => g.id === groupId);
+  if (!group) return;
+  const closing = !group.closed;
+  updatePaneGroup(sid, groupId, { closed: closing });
+  const items = paneStripItems(sid);
+  const i = items.findIndex((it) => it.ids.includes(getActivePaneId(sid)));
+  if (!closing || items[i]?.group?.id !== groupId) {
+    syncPanes();
+    return;
+  }
+  selectStripItem(items.slice(i).find(isOpenItem) || items.slice(0, i).findLast(isOpenItem));
+}
+
+function ungroupPanes(groupId) {
+  const sid = paneSessionId();
+  if (!sid) return;
+  setPaneGroups(
+    sid,
+    getPaneGroups(sid).filter((g) => g.id !== groupId),
+  );
+  syncPanes();
+}
+
+function colorPaneGroup(groupId, color) {
+  const sid = paneSessionId();
+  if (!sid) return;
+  updatePaneGroup(sid, groupId, { color });
+  syncPanes();
+}
+
 function isMenuKey(e) {
   return e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey);
 }
@@ -14057,44 +14231,105 @@ async function deleteBoardTasks(onlyCompleted) {
   await refreshCurrentView();
 }
 
-let paneRenameId = null;
+// The save function of the tab or group name being edited.
+let stripRename = null;
+
+function beginStripRename(el, { className, value, label, maxLength, save }) {
+  stripRename = save;
+  const input = document.createElement('input');
+  input.className = `strip-rename ${className}`;
+  input.value = value;
+  if (maxLength) input.maxLength = maxLength;
+  input.setAttribute('aria-label', label);
+  el.replaceWith(input);
+  input.focus();
+  input.select();
+}
+
+async function endStripRename(input, save) {
+  const onSave = stripRename;
+  if (!onSave) return;
+  stripRename = null;
+  paneTabsHtml = '';
+  if (save) await onSave(input.value.trim());
+  syncPanes();
+}
 
 function beginPaneRename(id) {
   const pane = paneById(id);
   const tab = paneStrip.querySelector(`.pane-tab[data-pane="${CSS.escape(id)}"]`);
   const title = tab?.querySelector('.pane-title');
   if (!pane || !title) return;
-  paneRenameId = id;
   tab.draggable = false;
-  const input = document.createElement('input');
-  input.className = 'pane-title-input';
-  input.value = pane.title;
-  input.setAttribute('aria-label', 'Pane title');
-  title.replaceWith(input);
-  input.focus();
-  input.select();
+  beginStripRename(title, {
+    className: 'pane-title-input',
+    value: pane.title,
+    label: 'Pane title',
+    save: async (text) => {
+      const sid = paneSessionId();
+      if (!sid || !paneById(id) || text === paneById(id).title) return;
+      const res = await paneRequest('PATCH', apiPath`/api/panes/${sid}/${id}`, { title: text });
+      if (res.error) showToast(res.error, 'error');
+      else applyPaneLayout(sid, res.layout);
+    },
+  });
 }
 
-async function endPaneRename(input, save) {
-  const id = paneRenameId;
-  if (!id) return;
-  paneRenameId = null;
-  paneTabsHtml = '';
+const PANE_GROUP_NAME_MAX = 40;
+
+function beginPaneGroupRename(groupId) {
   const sid = paneSessionId();
-  const pane = paneById(id);
-  const title = input.value.trim();
-  if (save && sid && pane && title !== pane.title) {
-    const res = await paneRequest('PATCH', apiPath`/api/panes/${sid}/${id}`, {
-      title,
-    });
-    if (res.error) showToast(res.error, 'error');
-    else applyPaneLayout(sid, res.layout);
-  }
-  syncPanes();
+  const group = sid && getPaneGroups(sid).find((g) => g.id === groupId);
+  const chip = paneStrip.querySelector(`[data-group="${CSS.escape(groupId)}"]`);
+  if (!group || !chip) return;
+  beginStripRename(chip, {
+    className: 'pane-group-input',
+    value: group.name,
+    label: 'Group name',
+    maxLength: PANE_GROUP_NAME_MAX,
+    save: (name) => updatePaneGroup(sid, groupId, { name: name.slice(0, PANE_GROUP_NAME_MAX) }),
+  });
 }
 
-const paneMenuItem = (act, label) =>
-  `<button class="pane-menu-item" role="menuitem" data-pane-act="${escapeHtml(act)}">${label}</button>`;
+const paneMenuItem = (act, label, arg) =>
+  `<button class="pane-menu-item" role="menuitem" data-pane-act="${escapeHtml(act)}"${arg == null ? '' : ` data-arg="${escapeHtml(arg)}"`}>${label}</button>`;
+const paneGroupStyle = (color) => escapeHtml(`--g: var(--owner-${color})`);
+const paneGroupDot = (g) => `<span class="pane-menu-dot" style="${paneGroupStyle(g.color)}"></span>`;
+
+function paneGroupMenuItems(id) {
+  const sid = paneSessionId();
+  const item = paneStripItems(sid).find((it) => it.ids.includes(id));
+  if (!item || item.ids.includes('board')) return '';
+  const others = getPaneGroups(sid).filter((g) => g.id !== item.group?.id);
+  return (
+    paneMenuItem('group', 'Add to new group', 'new') +
+    others
+      .map((g) => paneMenuItem('group', `Add to ${paneGroupDot(g)}${escapeHtml(g.name || 'unnamed group')}`, g.id))
+      .join('') +
+    (item.group ? paneMenuItem('group', 'Remove from group', '') : '')
+  );
+}
+
+function openPaneGroupMenu(x, y, groupId) {
+  const sid = paneSessionId();
+  const group = sid && getPaneGroups(sid).find((g) => g.id === groupId);
+  if (!group) return;
+  const swatches = PANE_GROUP_COLORS.map(
+    (c) =>
+      `<button class="pane-menu-item pane-menu-swatch${c === group.color ? ' on' : ''}" role="menuitemradio" aria-checked="${escapeHtml(String(c === group.color))}" aria-label="${escapeHtml(c)}" title="${escapeHtml(c)}" data-pane-act="groupColor" data-arg="${escapeHtml(c)}" style="${paneGroupStyle(c)}"></button>`,
+  ).join('');
+  showPaneMenu(
+    x,
+    y,
+    group.id,
+    'Group actions',
+    `<div class="pane-menu-label">${escapeHtml(group.name || 'Unnamed group')}</div>` +
+      paneMenuItem('groupRename', 'Rename') +
+      paneMenuItem('groupToggle', group.closed ? 'Expand' : 'Collapse') +
+      `<div class="pane-menu-swatches">${swatches}</div>` +
+      paneMenuItem('ungroup', 'Ungroup'),
+  );
+}
 
 function openPaneMenu(x, y, id) {
   if (id === 'board') {
@@ -14127,6 +14362,7 @@ function openPaneMenu(x, y, id) {
         : paneMenuItem('link', paneIsLinked(pane) ? 'Remove from linked documents' : 'Add to linked documents')) +
       paneMenuItem('rename', 'Rename') +
       paneMenuItem('reload', 'Reload') +
+      paneGroupMenuItems(pane.id) +
       paneMenuItem('close', 'Close pane'),
   );
   return true;
@@ -14169,6 +14405,11 @@ const PANE_MENU_ACTIONS = {
   rename: beginPaneRename,
   reload: reloadPane,
   close: closePane,
+  group: (id, to) => groupPaneTab(id, to || null),
+  groupRename: beginPaneGroupRename,
+  groupToggle: togglePaneGroup,
+  groupColor: colorPaneGroup,
+  ungroup: ungroupPanes,
   deleteCompleted: () => deleteBoardTasks(true),
   deleteAll: () => deleteBoardTasks(false),
 };
@@ -14358,18 +14599,23 @@ function closePanePop() {
 }
 
 paneStrip.addEventListener('keydown', (e) => {
-  const input = e.target.closest?.('.pane-title-input');
+  const input = e.target.closest?.('.strip-rename');
   if (input && (e.key === 'Enter' || e.key === 'Escape')) {
     e.preventDefault();
-    endPaneRename(input, e.key === 'Enter');
+    endStripRename(input, e.key === 'Enter');
   }
 });
 paneStrip.addEventListener('focusout', (e) => {
-  const input = e.target.closest?.('.pane-title-input');
-  if (input) endPaneRename(input, true);
+  const input = e.target.closest?.('.strip-rename');
+  if (input) endStripRename(input, true);
 });
 paneStrip.addEventListener('click', (e) => {
-  if (e.target.closest('.pane-title-input')) return;
+  if (e.target.closest('.strip-rename')) return;
+  const chip = e.target.closest('[data-group]');
+  if (chip) {
+    togglePaneGroup(chip.dataset.group);
+    return;
+  }
   const close = e.target.closest('[data-close]');
   if (close) {
     closePane(close.dataset.close);
@@ -14385,16 +14631,19 @@ paneStrip.addEventListener('auxclick', (e) => {
   if (e.button === 1 && tab && tab.dataset.pane !== 'board') closePane(tab.dataset.pane);
 });
 paneStrip.addEventListener('contextmenu', (e) => {
+  const chip = e.target.closest('[data-group]');
   const tab = e.target.closest('.pane-tab');
-  if (!tab) return;
+  if (!chip && !tab) return;
   e.preventDefault();
-  openPaneMenu(e.clientX, e.clientY, tab.dataset.pane);
+  if (chip) openPaneGroupMenu(e.clientX, e.clientY, chip.dataset.group);
+  else openPaneMenu(e.clientX, e.clientY, tab.dataset.pane);
 });
 document.addEventListener('click', (e) => {
   const menu = document.getElementById('pane-menu');
   if (!menu) return;
-  const act = e.target.closest('.pane-menu-item')?.dataset.paneAct;
-  if (act) PANE_MENU_ACTIONS[act](menu.dataset.pane);
+  const item = e.target.closest('.pane-menu-item');
+  const act = item?.dataset.paneAct;
+  if (act) PANE_MENU_ACTIONS[act](menu.dataset.pane, item.dataset.arg);
   if (act) closePaneMenu();
   else if (!menu.contains(e.target)) closePaneMenu(true);
 });
@@ -14470,15 +14719,18 @@ paneStrip.addEventListener('dragstart', (e) => {
 });
 
 // A split shows as one strip item, so a drop moves the dragged tab's whole item; the first item
-// holds the board and stays put. Elsewhere on the strip, a split tab's drop ends its split.
+// holds the board and stays put. A moved item joins the group it lands in, and a drop on a
+// group's chip adds it to that group. Elsewhere on the strip, a split tab's drop ends its split.
 function paneDropAction(e) {
   const sid = paneSessionId();
   const tab = e.target.closest?.('.pane-tab');
+  const chip = e.target.closest?.('[data-group]');
   if (!sid || !paneDragId) return null;
-  if (tab) {
+  if (chip || tab) {
     const [fixed, ...movable] = paneStripItems(sid);
     const itemOf = (id) => movable.find((it) => it.ids.includes(id));
     const from = itemOf(paneDragId);
+    if (chip) return from ? { kind: 'group', sid, el: chip, group: chip.dataset.group } : null;
     const to = itemOf(tab.dataset.pane);
     if (from && to && from !== to) {
       const el = to.pair ? tab.closest('.pane-pair') : tab;
@@ -14492,9 +14744,11 @@ function paneDropAction(e) {
 
 function markPaneDrop(action) {
   paneStrip.classList.toggle('drop-hot', action?.kind === 'unpair');
-  for (const el of paneStrip.querySelectorAll('.pane-tab, .pane-pair')) {
-    el.classList.toggle('drop-before', el === action?.el && !action.after);
-    el.classList.toggle('drop-after', el === action?.el && action.after);
+  for (const el of paneStrip.querySelectorAll('.pane-tab, .pane-pair, .pane-group-chip')) {
+    const on = el === action?.el;
+    el.classList.toggle('drop-in', on && action.kind === 'group');
+    el.classList.toggle('drop-before', on && action.kind === 'move' && !action.after);
+    el.classList.toggle('drop-after', on && action.kind === 'move' && action.after);
   }
 }
 
@@ -14521,11 +14775,15 @@ paneStrip.addEventListener('drop', (e) => {
   if (!action) return;
   e.preventDefault();
   const { sid, pair } = action;
+  const id = paneDragId;
   const shown = pair && !!splitSideOf(pair, getActivePaneId(sid));
-  const keep = shown ? pair[otherSide(splitSideOf(pair, paneDragId))] : null;
+  const keep = shown ? pair[otherSide(splitSideOf(pair, id))] : null;
   endPaneDrag();
-  if (action.kind === 'move') movePaneItem(action);
-  else unpairPanes(sid, pair, keep);
+  if (action.kind === 'group') groupPaneTab(id, action.group);
+  else if (action.kind === 'move') {
+    if (action.from.group?.id !== action.to.group?.id) groupPaneTab(id, action.to.group?.id ?? null);
+    movePaneItem(action);
+  } else unpairPanes(sid, pair, keep);
 });
 paneDrop.addEventListener('dragover', (e) => {
   if (!paneDragId) return;

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

@@ -1204,7 +1204,6 @@ body.booting .boot-splash {
 
 /* The live-workflow bar takes the muted fill too: its card already carries a pulsing
    accent dot, and a second accent bar under it shouts. */
-.session-item:not(.active) .progress-fill,
 .wf-live-bar .progress-fill {
   background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
 }
@@ -1216,6 +1215,14 @@ body.booting .boot-splash {
   font-variant-numeric: tabular-nums;
 }
 
+.session-progress .progress-bar {
+  display: flex;
+}
+
+.progress-fill.done {
+  background: var(--success);
+}
+
 .context-bar-labels {
   display: flex;
   justify-content: space-between;
@@ -4489,6 +4496,75 @@ body.show-resizing iframe {
   background: var(--border);
 }
 
+.pane-group {
+  position: relative;
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+}
+
+/* Over the tabs, so a tab's own background does not hide it. */
+.pane-group:not(.closed)::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 1px;
+  z-index: 1;
+  height: 2px;
+  background: var(--g);
+  pointer-events: none;
+}
+
+.pane-group-chip,
+.pane-group-input {
+  flex: none;
+  align-self: center;
+  height: 18px;
+  margin: 0 2px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.pane-group-chip {
+  min-width: 14px;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: var(--g);
+  color: var(--bg-deep);
+  cursor: pointer;
+}
+
+.pane-group-chip:hover {
+  filter: brightness(1.12);
+}
+
+.pane-group-count {
+  font-weight: 400;
+  opacity: 0.75;
+}
+
+.pane-group-count:not(:first-child) {
+  margin-left: 6px;
+}
+
+.pane-group-chip.drop-in {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+.pane-group-input {
+  width: 110px;
+  color: var(--text-primary);
+  background: var(--bg-deep);
+  box-shadow: inset 0 0 0 1px var(--g);
+  outline: none;
+}
+
 .pane-strip.drop-hot {
   background: var(--accent-dim);
 }
@@ -7547,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 {
@@ -10441,4 +10521,32 @@ pre.mermaid[data-mermaid-error]::before {
   color: var(--text-primary);
   font-weight: 600;
 }
+.pane-menu-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--g);
+}
+.pane-menu-swatches {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+}
+.pane-menu-item.pane-menu-swatch {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border-radius: 50%;
+  background: var(--g);
+}
+.pane-menu-item.pane-menu-swatch:hover,
+.pane-menu-item.pane-menu-swatch:focus-visible,
+.pane-menu-swatch.on {
+  background: var(--g);
+  box-shadow:
+    0 0 0 2px var(--bg-elevated),
+    0 0 0 3px var(--text-primary);
+}
 /* #endregion */

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 });