claude-code-kanban 7.10.0 → 7.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.10.0",
+  "version": "7.11.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.4",
+  "version": "3.7.5",
   "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/visualize/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: visualize
+description: Present a topic as one static 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).
+argument-hint: '[what to present]'
+---
+
+# Visualize
+
+Present this: $ARGUMENTS. With no argument, present the subject of this conversation.
+
+The page is a document to read: every mark is in the HTML, and it works offline with scripts off. 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.
+
+## 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 shapes, arrows and labels; the Fit rule below replaces their card sizes, and label masks fill with `--color-bg-subtle`, the figure's background.
+4. **Check.** Render the page headless (Playwright) in light and in dark, and look at each screenshot. 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.
+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.
+
+## 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. 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; 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.
+
+## Blocks
+
+Ready parts in the template's CSS; its body has one of each.
+
+| Block | Markup | Good for |
+|---|---|---|
+| Kicker | `p.kicker` | Ticket or kind of page |
+| Lead | `p.lead` | The answer; `<b>` takes the accent |
+| Lineup | `.lineup > div > b + span + small` | Every option as a tile: index, name, 2-word verdict |
+| Stat tiles | `.kpis > .kpi > span + b + small` | 1 to 4 headline numbers |
+| Section | `section > p.eyebrow + h2` | CSS numbers the eyebrow |
+| Cards | `.cards > .card > h3 + p.verdict + p + pre + ul` | Trade-offs; `li.pro`, `li.con` |
+| Table | `.table > table`; `td.num`, `td.c`, `tr[data-tone]` | A matrix |
+| Heatmap | `td.yes`, `td.part`, `td.no` | Tinted cells: `yes` the good outcome, `no` the bad, whatever word the cell holds |
+| Figure | `figure > svg + figcaption` | A diagram or a chart |
+| Points | `ul.points > li > b + text` | Findings, each led by its claim |
+| 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 |
+
+`data-tone` takes `accent`, `info`, `success`, `warning`, `danger` or `muted` on any block, legend keys included.

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

@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Page Title</title>
+<style>
+/* Defaults in :where() have zero specificity, so a host that sets the same tokens on :root wins. */
+:where(:root) {
+  color-scheme: light dark;
+  --color-bg: #f7f5f2; --color-bg-subtle: #ece9e4;
+  --color-text: #16130f; --color-text-muted: #5f5a53; --color-border: #d6d1c9;
+  --color-accent: #c4581c;
+  --color-info: #2563eb; --color-success: #1a8a5a; --color-warning: #b07d0a; --color-danger: #c0392b;
+  --color-series-1: #2a78d6; --color-series-2: #c4511c; --color-series-3: #008a72; --color-series-4: #ad6f00;
+  --color-series-5: #c4467a; --color-series-6: #008300; --color-series-7: #4a3aa7; --color-series-8: #d03a3a;
+  --color-ramp-1: #5598e7; --color-ramp-2: #2a78d6; --color-ramp-3: #1c5cab; --color-ramp-4: #104281; --color-ramp-5: #0a2b57;
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
+}
+@media (prefers-color-scheme: dark) {
+  :where(:root) {
+    --color-bg: #16181c; --color-bg-subtle: #101114;
+    --color-text: #f0f1f3; --color-text-muted: #9a9da5; --color-border: #363840;
+    --color-accent: #e86f33;
+    --color-info: #60a5fa; --color-success: #3ecf8e; --color-warning: #f0b429; --color-danger: #ef5350;
+    --color-series-1: #3987e5; --color-series-2: #d95926; --color-series-3: #199e70; --color-series-4: #c98500;
+    --color-series-5: #d55181; --color-series-6: #2a9a2a; --color-series-7: #9085e9; --color-series-8: #e66767;
+    --color-ramp-1: #256abf; --color-ramp-2: #3987e5; --color-ramp-3: #6da7ec; --color-ramp-4: #9ec5f4; --color-ramp-5: #cde2fb;
+  }
+}
+:root { --surface: color-mix(in srgb, var(--color-text) 4%, var(--color-bg)); }
+:where(.dot, .tag) { --tone: var(--color-text-muted); }
+:where(.callout) { --tone: var(--color-accent); }
+[data-tone="accent"] { --tone: var(--color-accent); }
+[data-tone="info"] { --tone: var(--color-info); }
+[data-tone="success"] { --tone: var(--color-success); }
+[data-tone="warning"] { --tone: var(--color-warning); }
+[data-tone="danger"] { --tone: var(--color-danger); }
+[data-tone="muted"] { --tone: var(--color-text-muted); }
+
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 16px/1.65 var(--font-sans); -webkit-text-size-adjust: 100%; }
+main { max-width: 980px; margin: 0 auto; padding: 64px 16px 96px; counter-reset: section; }
+p, li { max-width: 68ch; }
+p { margin: 0 0 14px; }
+ul, ol { margin: 0 0 16px; padding-left: 22px; }
+li { margin: 4px 0; }
+a { color: var(--color-accent); text-underline-offset: 3px; }
+b, strong { font-weight: 600; }
+code { font: .85em var(--font-mono); background: var(--surface); border: 1px solid var(--color-border); border-radius: 5px; padding: 1px 5px; }
+pre { font: 13px/1.6 var(--font-mono); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; overflow-x: auto; }
+pre code { font-size: inherit; background: none; border: 0; padding: 0; }
+.muted { color: var(--color-text-muted); }
+
+.kicker { font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 18px; }
+h1 { font: 400 48px/1.08 var(--font-serif); letter-spacing: -.01em; margin: 0 0 16px; }
+.sub { font-size: 17px; color: var(--color-text-muted); max-width: 46em; margin: 0 0 28px; }
+.lead { font-size: 21px; line-height: 1.5; max-width: 40em; margin: 0 0 32px; }
+.lead b { color: var(--color-accent); }
+
+.lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin: 0 0 40px; }
+.lineup > div { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 12px 10px; background: var(--surface); }
+.lineup b { display: block; font: 400 28px/1 var(--font-serif); color: var(--color-text-muted); }
+.lineup span { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; margin-top: 8px; }
+.lineup small { display: block; font: 11px/1.35 var(--font-mono); color: var(--color-text-muted); margin-top: 4px; }
+.lineup > [data-tone] { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--color-bg)); box-shadow: 0 10px 32px -14px var(--tone); }
+.lineup > [data-tone] b { color: var(--tone); }
+
+section { counter-increment: section; margin-top: 88px; }
+.eyebrow { max-width: none; display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 14px; }
+.eyebrow::before { content: counter(section, decimal-leading-zero); color: var(--color-accent); }
+.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
+h2 { font: 400 32px/1.2 var(--font-serif); letter-spacing: -.005em; max-width: 30em; margin: 0 0 22px; }
+h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 36px 0 10px; }
+
+.callout { border: 1px solid var(--color-border); border-radius: 12px; background: var(--surface); box-shadow: inset 3px 0 0 var(--tone); padding: 16px 20px; margin: 0 0 20px; }
+.callout p { max-width: none; }
+.callout > :last-child { margin-bottom: 0; }
+
+.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
+.kpi { border: 1px solid var(--color-border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
+.kpi > span { display: block; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
+.kpi > b { display: block; font: 400 40px/1.1 var(--font-serif); font-variant-numeric: lining-nums tabular-nums; margin: 8px 0 4px; color: var(--tone, var(--color-text)); }
+.kpi > small { display: block; font-size: 13px; color: var(--color-text-muted); }
+
+.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 0 0 16px; }
+.card { border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 22px; background: var(--surface); }
+.card[data-tone] { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 7%, var(--color-bg)); box-shadow: 0 16px 40px -24px var(--tone); }
+.card h3 { font-size: 14px; margin: 0 0 10px; color: var(--color-text-muted); }
+.card .verdict { font: 400 20px/1.35 var(--font-serif); color: var(--color-text); margin: 0 0 12px; }
+.card > p:not(.verdict), .card ul { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
+.card > p:not(.verdict) { margin: 0 0 12px; }
+.card pre { font-size: 12px; padding: 8px 10px; margin: 0 0 12px; white-space: pre-wrap; }
+.card ul { margin: 0; padding-left: 18px; }
+.card li { margin: 3px 0; }
+li.pro::marker { content: "+  "; color: var(--color-success); font-weight: 700; }
+li.con::marker { content: "−  "; color: var(--color-danger); font-weight: 700; }
+
+.tag { display: inline-block; font: 500 10.5px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 7px; border-radius: 9px; margin-left: 8px; vertical-align: 1px; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
+.dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; font: 600 11px var(--font-mono); color: var(--color-bg); background: var(--tone); }
+
+.table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--surface); }
+table { border-collapse: collapse; width: 100%; font-size: 14px; }
+th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
+tbody tr:last-child > td { border-bottom: 0; }
+th { font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-subtle); }
+td:first-child { white-space: nowrap; font-weight: 500; }
+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: "○ "; }
+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; }
+figure svg { display: block; width: 100%; height: auto; }
+figcaption { font-size: 13px; color: var(--color-text-muted); margin-top: 14px; }
+@media (max-width: 600px) { figure.wide { overflow-x: auto; } figure.wide svg { min-width: 680px; } }
+
+.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 12px var(--font-mono); color: var(--color-text-muted); margin: 0 0 14px; }
+.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; background: var(--tone, var(--color-text-muted)); }
+
+ul.points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 36px; }
+ul.points > li { max-width: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 15px; }
+ul.points > li > b:first-child { display: block; font: 400 19px/1.35 var(--font-serif); color: var(--color-text); margin-bottom: 6px; }
+
+ol.steps { list-style: none; counter-reset: step; padding: 0; }
+ol.steps > li { counter-increment: step; position: relative; padding: 2px 0 20px 48px; }
+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; }
+
+@media (max-width: 600px) {
+  main { padding-top: 36px; }
+  h1 { font-size: 34px; }
+  .lead { font-size: 18px; }
+  h2 { font-size: 25px; }
+  section { margin-top: 64px; }
+  figure { padding: 14px; }
+}
+@media print { main { max-width: none; padding: 0; } figure, .card, .kpi, tr { break-inside: avoid; } .card, .lineup > div { box-shadow: none; } }
+</style>
+</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>
+
+<section>
+  <p class="eyebrow">Overview</p>
+  <h2>Each heading is a claim that can be true or 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>
+  </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>
+</main>
+</body>
+</html>

package/public/app.js

@@ -8570,6 +8570,8 @@ function reviewBridge(textBefore, headingBefore, rangeAt, comboOf, fieldSelector
       marks.delete(e.data.id);
     } else if (type === 'reveal' && range) {
       range.startContainer.parentElement?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    } else if (type === 'scrollTo') {
+      requestAnimationFrame(() => scrollTo(e.data.x, e.data.y));
     }
   });
 }
@@ -8583,6 +8585,23 @@ const REVIEW_BRIDGE_TAG = `<script>(${reviewBridge})(${reviewTextBefore}, ${revi
 // not drive the board.
 const bridgedFrames = new WeakSet();
 const paneFrameScroll = new WeakMap();
+const hiddenPaneFrames = new WeakSet();
+
+// Chrome resets a frame's scroll to 0 while the frame is display:none and does not give it back.
+function restorePaneFrameScroll(view, shown) {
+  const frame = view.querySelector(':scope > iframe[srcdoc]');
+  if (!frame) return;
+  if (!shown) {
+    hiddenPaneFrames.add(frame);
+  } else if (hiddenPaneFrames.delete(frame)) {
+    const s = paneFrameScroll.get(frame);
+    if (s) postPaneScroll(frame, s);
+  }
+}
+
+function postPaneScroll(frame, { x, y }) {
+  frame.contentWindow?.postMessage({ type: `${REVIEW_MSG}scrollTo`, x: Number(x) || 0, y: Number(y) || 0 }, '*');
+}
 
 function bridgedFrameEls() {
   return [...document.querySelectorAll('iframe[srcdoc]')].filter((f) => bridgedFrames.has(f));
@@ -9100,7 +9119,7 @@ function renderHtmlPreview(bodyEl, content) {
   bodyEl.innerHTML = '';
   // After the document's end the parser still adds the script to <body>, and it runs after
   // the page's own scripts.
-  bodyEl.appendChild(createPreviewFrame('preview-html-frame', content + REVIEW_BRIDGE_TAG));
+  bodyEl.appendChild(createPreviewFrame('preview-html-frame themed-frame', themedSrcdoc(content)));
 }
 
 function isAbsolutePath(p) {
@@ -13409,7 +13428,8 @@ function syncPanes() {
   const boardSide = split ? splitSideOf(split, 'board') : null;
   sessionView.classList.toggle('pane-mode', split ? !boardSide : !!pane);
   sessionView.classList.toggle('split-mode', !!split);
-  if (!layout || wantsTerminal()) closePanePop();
+  const term = wantsTerminal();
+  if (!layout || term) closePanePop();
   // key → side ('' unsplit). The focused side mounts last, so the frame limit evicts it last.
   const sides = new Map();
   if (split) {
@@ -13427,14 +13447,15 @@ function syncPanes() {
     el.classList.toggle('on', side !== undefined);
     markPaneSide(el, side, el.dataset.key === focusKey);
     if (paneLineWanted.size && side !== undefined) applyPaneLine(el);
+    restorePaneFrameScroll(el, side !== undefined && !term);
   }
   const boardWasSplit = boardInSplit();
   markPaneSide(paneBoard, boardSide, !!boardSide && !pane);
   if (boardWasSplit !== !!boardSide) applyAgentFooterCollapsed();
-  placeSessionLog(wantsTerminal() ? null : boardSide);
+  placeSessionLog(term ? null : boardSide);
   // Off screen, a framed page keeps focus and takes keys the user aims at the board.
   const focused = document.activeElement;
-  if (paneViews.contains(focused) && (wantsTerminal() || !focused.closest('.pane-view.on'))) focused.blur();
+  if (paneViews.contains(focused) && (term || !focused.closest('.pane-view.on'))) focused.blur();
   syncPaneReview();
   if (!layout) return;
   for (const b of document.querySelectorAll('.pane-tool')) b.disabled = !pane;
@@ -13611,19 +13632,16 @@ async function loadPaneView(sid, pane, view, scroll) {
   }
   const data = await getJson('/api/preview', null, { query: { path: pane.target } });
   if (data?.kind === 'html') {
-    // The frame's origin is opaque, so the page restores its own scroll on load.
-    const restore = scroll
-      ? `<script>addEventListener('load',()=>requestAnimationFrame(()=>scrollTo(${Number(scroll.x) || 0},${Number(scroll.y) || 0})))</script>`
-      : '';
     // A show card's own zoom follows the text zoom (showBridge), so its frame is not .modal-zoomable.
     const [cls, doc] = pane.show
       ? ['pane-frame show-pane-frame', showSrcdoc(data.content, scroll?.y)]
-      : ['pane-frame modal-zoomable', data.content + REVIEW_BRIDGE_TAG + restore];
+      : ['pane-frame modal-zoomable themed-frame', themedSrcdoc(data.content)];
     const frame = createPreviewFrame(cls, doc);
     frame.title = pane.title;
     // Focus given before the document loads stays on the frame element, out of the document's keys.
     frame.addEventListener('load', () => {
       if (document.activeElement === frame) frame.contentWindow?.focus();
+      if (scroll && !pane.show) postPaneScroll(frame, scroll);
     });
     view.appendChild(frame);
     attachPaneReview(view, sid, fileReviewOpts(data.path, data.kind, frame, frame));
@@ -13842,8 +13860,13 @@ function syncPaneReview() {
 
 function unmountPane(sid, paneId) {
   const key = `${sid}/${paneId}`;
-  paneFrames.get(key)?.remove();
+  const view = paneFrames.get(key);
+  const hadFocus = view?.contains(document.activeElement);
+  view?.remove();
   paneFrames.delete(key);
+  // Chrome leaves the window without focus when a focused frame is removed, so no key reaches
+  // the board until a click. Only when it had focus: under the hub, cck may be off screen.
+  if (hadFocus) window.focus();
 }
 
 function selectPane(id) {
@@ -13906,6 +13929,7 @@ function closeFocusedPane() {
   const id = focusedPaneId();
   if (!id || id === 'board') return false;
   closePane(id);
+  focusActivePane();
   return true;
 }
 
@@ -16352,22 +16376,49 @@ function showTokens() {
   return out;
 }
 
-// A whole document gets the tokens and base styles first in its head, so its own styles win.
-function showSrcdoc(content, restoreY) {
-  const tokens = Object.entries(showTokens())
+function showTokenCss() {
+  return Object.entries(showTokens())
     .map(([k, v]) => `${k}:${v}`)
     .join(';');
-  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${tokens}}${SHOW_FRAME_BASE}</style>`;
+}
+
+function withHeadFirst(content, head) {
+  const at = /<head[^>]*>/i.exec(content) || /<html[^>]*>/i.exec(content) || /<!doctype[^>]*>/i.exec(content);
+  const inject = at?.[0].toLowerCase().startsWith('<head') ? head : `<head>${head}</head>`;
+  const cut = at ? at.index + at[0].length : 0;
+  return content.slice(0, cut) + inject + content.slice(cut);
+}
+
+// A whole document gets the tokens and base styles first in its head, so its own styles win.
+function showSrcdoc(content, restoreY) {
+  const head = `<meta http-equiv="Content-Security-Policy" content="${SHOW_CSP}"><style>:root{${showTokenCss()}}${SHOW_FRAME_BASE}</style>`;
   const bridge = `<script>(${showBridge})(${Math.max(0, Math.round(restoreY) || 0)}, ${modalZoom});</script>${REVIEW_BRIDGE_TAG}`;
   if (!/^\s*(<!doctype|<html)/i.test(content)) {
     return `<!doctype html><html><head><meta charset="utf-8">${head}</head><body>${content}${bridge}</body></html>`;
   }
-  const at = /<head[^>]*>/i.exec(content) || /<html[^>]*>/i.exec(content);
-  const inject = at?.[0].toLowerCase().startsWith('<head') ? head : `<head>${head}</head>`;
-  const cut = at ? at.index + at[0].length : 0;
-  return content.slice(0, cut) + inject + content.slice(cut) + bridge;
+  return withHeadFirst(content, head) + bridge;
+}
+
+// An HTML file preview gets only the tokens, first in its head: its own :root rules win, and
+// a page that declares its defaults in :where(:root) follows the board theme.
+function themedSrcdoc(content) {
+  const head = `<style id="cck-tokens">:root{${showTokenCss()}}</style>`;
+  return withHeadFirst(content, head) + THEME_BRIDGE_TAG + REVIEW_BRIDGE_TAG;
 }
 
+// Runs inside the preview as source text, so it must not close over anything outside its own body.
+// It rewrites the injected rule, not inline styles, so the page's own :root still wins after a switch.
+function themeBridge(prefix) {
+  addEventListener('message', (e) => {
+    if (e.source !== parent || e.data?.type !== `${prefix}tokens`) return;
+    const rule = document.getElementById('cck-tokens')?.sheet?.cssRules[0];
+    if (!rule) return;
+    for (const [k, v] of Object.entries(e.data.tokens)) rule.style.setProperty(k, v);
+  });
+}
+
+const THEME_BRIDGE_TAG = `<script>(${themeBridge})(${JSON.stringify(SHOW_MSG)});</script>`;
+
 // Runs inside the card as source text, so it must not close over anything outside its own body.
 // Keys and links go through reviewBridge, which the card loads next to this.
 function showBridge(restoreY, textZoom) {
@@ -16432,15 +16483,26 @@ window.addEventListener('message', (e) => {
 });
 
 // The same body attributes the terminal theme watches; a markdown card follows the board's CSS.
+// The body's style also changes on every drag, so a push with the same tokens is dropped.
+let sentTokens = '';
 new MutationObserver(() => {
-  postToShowFrames(() => ({ type: `${SHOW_MSG}tokens`, tokens: showTokens() }));
+  postToShowFrames(() => {
+    const tokens = showTokens();
+    const key = JSON.stringify(tokens);
+    if (key === sentTokens) return null;
+    sentTokens = key;
+    return { type: `${SHOW_MSG}tokens`, tokens };
+  });
 }).observe(document.body, { attributes: true, attributeFilter: ['class', 'data-color-theme', 'style'] });
 
 // Builds the message only when a frame is there, because showTokens forces a style recalc.
 function postToShowFrames(makeMsg) {
-  const frames = [showState.frame, ...document.querySelectorAll('.show-pane-frame')].filter((f) => f?.contentWindow);
+  const frames = [showState.frame, ...document.querySelectorAll('.show-pane-frame, .themed-frame')].filter(
+    (f) => f?.contentWindow,
+  );
   if (!frames.length) return;
   const msg = makeMsg();
+  if (!msg) return;
   for (const f of frames) f.contentWindow.postMessage(msg, '*');
 }