claude-code-kanban 7.10.0 → 7.12.0

package/lib/agent-log.js

@@ -0,0 +1,17 @@
+'use strict';
+
+// A message to a stopped subagent spawns it again under the same id, and the plugin appends
+// another start line. Each start line begins a new run, so nothing of the run before it shows.
+function foldAgentLines(raw) {
+  let merged = {};
+  for (const line of raw.split(/\r?\n/)) {
+    if (!line.trim()) continue;
+    let obj;
+    try { obj = JSON.parse(line); } catch (_) { continue; }
+    if (obj.event === 'start') merged = {};
+    Object.assign(merged, obj);
+  }
+  return merged;
+}
+
+module.exports = { foldAgentLines };

package/lib/show.js

@@ -6,6 +6,7 @@ const crypto = require('node:crypto');
 const fs = require('node:fs');
 const path = require('node:path');
 const express = require('express');
+const { startFolder } = require('./folder-dialog');
 const { httpError } = require('./http-error');
 
 const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -24,14 +25,15 @@ function isLabel(v) {
 // A string is a reason the body is refused.
 function parsePost(body) {
   if (!body || typeof body !== 'object' || Array.isArray(body)) return 'body must be a JSON object';
-  const { sessionId, title, key, kind = 'markdown', content, file } = body;
+  const { sessionId, title, key, kind = 'markdown', content, file, base } = body;
   if (typeof sessionId !== 'string' || !UUID_RE.test(sessionId)) return 'invalid sessionId';
   if (!isLabel(title)) return `title must be a non-empty string of at most ${MAX_LABEL} characters`;
   if (key != null && !isLabel(key)) return `key must be a non-empty string of at most ${MAX_LABEL} characters`;
   if (!Object.hasOwn(EXT, kind)) return 'kind must be markdown or html';
   if (content != null) return 'content is not accepted: call show with only title and key to get a file to write the card into';
   if (file != null && (typeof file !== 'string' || !path.isAbsolute(file))) return 'file must be an absolute path';
-  return { sessionId, title, key: key ?? null, kind, file: file ?? null };
+  if (base != null && !startFolder(base)) return 'base must be an absolute path to an existing folder';
+  return { sessionId, title, key: key ?? null, kind, file: file ?? null, base: base ?? null };
 }
 
 function writeAtomic(file, text) {
@@ -193,7 +195,7 @@ function createShowStore(o) {
   // `kind` of a file post is the one readPreviewFile gave when it was posted. A post without a file
   // is a claim: cck names the file and the session writes it. cck does not create it, because
   // Claude Code's Write refuses to overwrite a file the session has not read.
-  function post(terminalId, { sessionId, title, key, kind, file }) {
+  function post(terminalId, { sessionId, title, key, kind, file, base }) {
     const dir = folder(sessionId);
     if (!dir) throw httpError(409, 'no transcript found for that session');
     fs.mkdirSync(dir, { recursive: true });
@@ -210,7 +212,7 @@ function createShowStore(o) {
       seen.delete(id);
     }
     if (!old) at = posts.length;
-    const entry = { id, title, key, kind, file, updatedAt: new Date(now()).toISOString() };
+    const entry = { id, title, key, kind, file, base, updatedAt: new Date(now()).toISOString() };
     posts[at] = entry;
     writeIndex(dir, sessionId, posts);
     bind(terminalId, sessionId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.10.0",
+  "version": "7.12.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.8",
   "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/hooks/activity.ts

@@ -1,4 +1,4 @@
-import type { EngineInterface, Register, ToolCallArgs } from 'claude-code'
+import type { AgentSpawnInput, EngineInterface, Register, ToolCallArgs } from 'claude-code'
 import { cckRoot } from './context'
 
 // Mods cannot delete files. The server reads any status but "waiting" as no ask.
@@ -148,21 +148,24 @@ async function markStopped($: EngineInterface) {
   await $.fs.write(`${await sessionDir($)}/_stop.json`, '')
 }
 
-// The name map lets TeammateIdle, which names the teammate, find its agent id.
-async function agentStarted($: EngineInterface, agentId: string, type: string, model: string, name?: string) {
+// The name map lets TeammateIdle, which names the teammate, find its agent id. The prompt is on
+// the start line because a resume runs a new prompt, and the server's own lookup finds the first.
+async function agentStarted($: EngineInterface, e: AgentSpawnInput, agentId: string, model: string) {
   const dir = await sessionDir($)
   const ts = new Date().toISOString()
   await Promise.all([
     appendLine($, `${dir}/${agentId}.jsonl`, {
       agentId,
-      type,
+      type: e.subagentType,
       model,
       event: 'start',
       status: 'active',
+      ...(e.prompt && { prompt: e.prompt }),
+      ...(e.description && { description: e.description }),
       startedAt: ts,
       updatedAt: ts,
     }),
-    $.fs.write(`${dir}/_name-${name ?? type}.id`, agentId),
+    $.fs.write(`${dir}/_name-${e.name ?? e.subagentType}.id`, agentId),
   ])
 }
 
@@ -249,7 +252,7 @@ export const register: Register = on => {
   })
   on('agent.spawn', async ($, e, next) => {
     const result = await next(e)
-    if (result.agentId) await agentStarted($, result.agentId, e.subagentType, result.model, e.name)
+    if (result.agentId) await agentStarted($, e, result.agentId, result.model)
     return result
   })
   // An interrupted turn fires no Stop hook, so it does not mark the session unread either.

package/plugin/plugins/claude-code-kanban/hooks/show.ts

@@ -4,7 +4,7 @@ import { cckRoot } from './context'
 export const TOOL = 'mcp__claude-code-kanban__show'
 export const SKILL_LINE = /^\s*-\s*claude-code-kanban:show(?=:|\s*$)/
 
-type ShowInput = { title: string; key?: string; kind?: 'markdown' | 'html'; file?: string }
+type ShowInput = { title: string; key?: string; kind?: 'markdown' | 'html'; file?: string; base?: string }
 type Shown = { title: string; key?: string | null; index: number; count: number; path?: string | null }
 
 export function boardPort(cckUrl: string) {
@@ -67,8 +67,8 @@ async function post($: EngineInterface, input: ShowInput) {
   if (!t) return { deny: 'The overlay needs a Claude Code session started in the cck terminal.' }
   const token = await terminalToken($, t.url)
   if (!token) return { deny: `No terminal token for the cck server at ${t.url}. It must run with the terminal enabled.` }
-  const { title, key, kind, file } = input
-  const body = JSON.stringify({ sessionId: await $.session.id(), title, key, kind, file })
+  const { title, key, kind, file, base } = input
+  const body = JSON.stringify({ sessionId: await $.session.id(), title, key, kind, file, base })
   let res: Awaited<ReturnType<EngineInterface['http']['fetch']>>
   try {
     res = await $.http.fetch(`${t.url}/api/terminals/${encodeURIComponent(t.terminalId)}/show`, {
@@ -103,6 +103,11 @@ export const register: Register = on => {
             },
             file: { type: 'string', description: 'Absolute path of an existing markdown, HTML, image or text file' },
             key: { type: 'string', description: 'Card name: the same key replaces the card in place and keeps its file' },
+            base: {
+              type: 'string',
+              description:
+                "Absolute path of the folder that the card's path:line links resolve against, usually the repo root. Always pass it with a call stack. Without it, links resolve against the session cwd, which is wrong for a worktree or another repo",
+            },
           },
           required: ['title'],
         },

package/plugin/plugins/claude-code-kanban/skills/show/references/explain.md

@@ -38,7 +38,9 @@ The board draws the tree lines, links, focus and folds from this notation:
 - The fence tag is `callstack`.
 - Caller on top. Indent each callee 2 spaces under its caller; the board turns the spaces into tree lines. Several roots are fine.
 - One frame per line: the function or method name as one identifier, spelled as in the code.
-- The note goes after 2 or more spaces: a `path:line` relative to the project root, which the board links, or a few words. Line the notes up in one column.
+- The note goes after 2 or more spaces: a `path:line` relative to the card's `base`, which the board links, or a few words. Line the notes up in one column.
+- Post every card with a call stack with `base`: the absolute path of the repo root that holds the files. Without it, links resolve against the session cwd, which is a different checkout when you work in a worktree or another repo.
+- Write the full relative path on each linked frame. A bare file name (`place.ts:40`) or a bare line (`:40`) never resolves.
 - A `*` after the name, with one space, marks the frame to look at. One per stack.
 - `+` or `-` in the first column marks a frame the change adds or removes. In a stack with any `+` or `-`, every other line starts with one space.
 

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

@@ -0,0 +1,67 @@
+---
+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).
+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: 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.
+
+## 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.
+
+## 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.
+- **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.
+
+## Interactive exhibits
+
+- An exhibit is the figure, its controls and the outputs they drive. The script draws the figure and writes only inside its exhibit; the text outside it is static HTML.
+- Keep it small to edit: all inputs in one state object, one draw function that builds every figure from that state, and controls that only change state and call draw. Keep the computation apart from the drawing.
+- Declare controls and presets in the markup, next to the text that names each scenario, and read them in one place. A new scenario is then one line of HTML.
+- Colors come from the tokens on every draw, in canvas too, so a theme change needs no extra code.
+- Nothing runs while the reader does nothing, except a running model that is on screen.
+- Numbers from a model are marked as model numbers.
+- The script goes at the end of `<body>`; its CSS goes in the second `<style>`.
+
+## 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/plugin/plugins/claude-code-kanban/tests/activity.test.ts

@@ -272,6 +272,31 @@ test('a subagent stop with an empty answer leaves lastMessage out', async ($, on
   expect('lastMessage' in stop).toBe(false)
 })
 
+test('a resumed subagent appends a start line with the new task', async ($, on) => {
+  const files: Record<string, string> = {}
+  engine(on, files)
+
+  await $.agent.spawn(spawn('general-purpose'))
+  await $.turn.complete(turn({ agentId: 'a1', answer: 'first answer' }))
+  await $.agent.spawn({ ...spawn('general-purpose'), prompt: 'second task', description: '' })
+
+  const all = lines(files[`${SESSION}/a1.jsonl`])
+  expect(all.map((l) => l.event)).toEqual(['start', 'stop', 'start'])
+  expect(all[2]).toMatchObject({ status: 'active', prompt: 'second task' })
+  expect('description' in all[2]).toBe(false)
+})
+
+test('a first spawn records its prompt and description', async ($, on) => {
+  const files: Record<string, string> = {}
+  engine(on, files)
+
+  await $.agent.spawn(spawn('general-purpose'))
+
+  const [start] = lines(files[`${SESSION}/a1.jsonl`])
+  expect(start).toMatchObject({ prompt: 'p', description: 'd' })
+  expect('lastMessage' in start).toBe(false)
+})
+
 test('a finished loop that was never spawned writes nothing', async ($, on) => {
   const { writes } = engine(on, {})
 

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

@@ -102,6 +102,13 @@ test('posts the body with the terminal token and answers with the position', asy
   ])
 })
 
+test('sends the base for the card links', async ($, on) => {
+  const board = engine(on, GATE, { status: 200, body: { id: 'p1', title: 'Stack', key: 'stack', index: 1, count: 1, path: 'C:/s/p1.md' } })
+  await $.session.start({ cwd: 'C:/proj', surface: 'terminal', isInteractive: true })
+  await $.tool.call(call({ title: 'Stack', key: 'stack', base: 'C:/proj-worktree' }))
+  expect(board.requests[0]?.body).toEqual({ sessionId: 'sid-1', title: 'Stack', key: 'stack', base: 'C:/proj-worktree' })
+})
+
 test('a claim sends no file and answers with the file to write', async ($, on) => {
   const path = 'C:/s/.cck/show/p1.md'
   const board = engine(on, GATE, { status: 200, body: { id: 'p1', title: 'Plan', key: 'plan', index: 1, count: 1, path } })

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;
 }
 
@@ -15997,7 +16021,7 @@ const showState = {
   path: null,
 };
 let showSize = store.readJson(SHOW_SIZE_KEY);
-// Terminal id → { closed?, collapsed?, expanded? }; no entry when no flag is set. Ids gone from the terminal list are pruned.
+// Terminal id → { closed?, collapsed?, expanded? }; a terminal with no entry yet starts collapsed. Ids gone from the terminal list are pruned.
 const showViews = store.readJson(SHOW_VIEW_KEY, {});
 // Older boards stored the string 'collapsed' or 'expanded'.
 for (const [tid, v] of Object.entries(showViews)) if (typeof v === 'string') showViews[tid] = { [v]: true };
@@ -16090,17 +16114,20 @@ function forgetEndedTerminals() {
   if (!runningTerminals.has(showState.lookup)) showState.lookup = null;
 }
 
-function setShowView(tid, view) {
+// `post` is the id of the card on screen; a view without one keeps the saved id, so an empty list
+// while a terminal's posts load does not forget it.
+function setShowView(tid, view, post) {
   const set = SHOW_VIEW_FLAGS.filter((f) => view[f]);
-  const old = showViews[tid] || {};
-  if (SHOW_VIEW_FLAGS.every((f) => !!old[f] === set.includes(f))) return;
-  if (set.length) showViews[tid] = Object.fromEntries(set.map((f) => [f, true]));
-  else delete showViews[tid];
+  const old = showViews[tid];
+  const shown = post ?? old?.post;
+  if (old && old.post === shown && SHOW_VIEW_FLAGS.every((f) => !!old[f] === set.includes(f))) return;
+  showViews[tid] = Object.fromEntries(set.map((f) => [f, true]));
+  if (shown) showViews[tid].post = shown;
   store.writeJson(SHOW_VIEW_KEY, showViews);
 }
 
 function saveShowView() {
-  if (showState.terminalId) setShowView(showState.terminalId, showState);
+  if (showState.terminalId) setShowView(showState.terminalId, showState, showState.posts[showState.idx]?.id);
 }
 
 function resetShowPosts() {
@@ -16118,23 +16145,23 @@ function syncShowCard() {
   }
   const tid = pty ? (terminalIds.get(pty) ?? null) : null;
   if (tid === showState.terminalId) return;
-  const view = (tid && showViews[tid]) || {};
+  const view = (tid && showViews[tid]) || { collapsed: true };
   Object.assign(showState, { terminalId: tid, sessionId: null, idx: 0 });
   for (const f of SHOW_VIEW_FLAGS) showState[f] = !!view[f];
   resetShowPosts();
   renderShow();
-  if (tid) loadShowPosts(tid, { newest: true }).then((ok) => ok && renderShow());
+  if (tid) loadShowPosts(tid, { shownId: view.post }).then((ok) => ok && renderShow());
 }
 
-async function loadShowPosts(tid, { newest = false } = {}) {
+// Opens `shownId` (by default the card on screen) when the list still holds it, else the newest.
+async function loadShowPosts(tid, { shownId = showState.posts[showState.idx]?.id } = {}) {
   const seq = ++showState.listSeq;
   const data = await getJson(apiPath`/api/terminals/${tid}/show`, null, { cache: 'no-store' });
   if (seq !== showState.listSeq || tid !== showState.terminalId) return false;
-  const shownId = showState.posts[showState.idx]?.id;
   showState.sessionId = data?.sessionId ?? null;
   showState.posts = Array.isArray(data?.posts) ? data.posts : [];
   const at = showState.posts.findIndex((p) => p.id === shownId);
-  showState.idx = newest || at < 0 ? Math.max(0, showState.posts.length - 1) : at;
+  showState.idx = at < 0 ? Math.max(0, showState.posts.length - 1) : at;
   return true;
 }
 
@@ -16207,10 +16234,11 @@ function showTicksHtml() {
 }
 
 function renderShow({ flash = false } = {}) {
+  const n = showState.posts.length;
+  if (n) showState.idx = Math.min(Math.max(0, showState.idx), n - 1);
   saveShowView();
   const card = showCardEl();
   const chip = document.getElementById('show-reopen');
-  const n = showState.posts.length;
   const open = n > 0 && !showState.closed;
   chip.hidden = !n || open;
   chip.querySelector('.show-reopen-n').textContent = `show · ${n}`;
@@ -16224,7 +16252,6 @@ function renderShow({ flash = false } = {}) {
     card.replaceChildren();
     return;
   }
-  showState.idx = Math.min(Math.max(0, showState.idx), n - 1);
   const p = showState.posts[showState.idx];
   showState.marked.delete(p.id);
   card.classList.toggle('expanded', showState.expanded && !showState.collapsed);
@@ -16352,22 +16379,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 +16486,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, '*');
 }
 
@@ -17218,8 +17283,9 @@ function onCallstackLoc(e) {
   e.preventDefault();
   e.stopPropagation();
   if (e.shiftKey) window.getSelection().collapseToEnd();
-  const sid = el.closest('#show-card') ? showState.sessionId : currentSessionId;
-  const base = (sid && getSessionBaseDir(sid)) || undefined;
+  const onCard = !!el.closest('#show-card');
+  const sid = onCard ? showState.sessionId : currentSessionId;
+  const base = (onCard && showState.posts[showState.idx]?.base) || (sid && getSessionBaseDir(sid)) || undefined;
   if (e.shiftKey || !sid || el.closest('.modal-overlay')) openPreviewAtLine(loc, base);
   else openPaneAtLine(sid, loc, base);
 }

package/public/style.css

@@ -2734,6 +2734,7 @@ code.ct .ct-loc {
   color: var(--accent-text);
   text-decoration: underline dotted;
   text-underline-offset: 3px;
+  cursor: pointer;
 }
 
 code.ct .ct-focus {

package/server.js

@@ -70,6 +70,7 @@ const { pickFolder } = require('./lib/folder-dialog');
 const { loadSessionCache, saveSessionCache } = require('./lib/session-cache');
 const { countTaskDir } = require('./lib/task-counts');
 const { readTaskDir } = require('./lib/task-dir');
+const { foldAgentLines } = require('./lib/agent-log');
 const { projectMatcher, normalizeProjectPath, sessionProjectKey } = require('./public/project-match');
 const { getParentVerdict, setParentVerdict } = require('./lib/parent-cache');
 
@@ -275,13 +276,7 @@ const RETENTION_FIRST_RUN_MS = 5 * 60 * 1000;
 // #region AGENT_ACTIVITY
 
 function readAgentJsonl(filePath) {
-  const raw = readFileSync(filePath, 'utf8');
-  const merged = {};
-  for (const line of raw.split(/\r?\n/)) {
-    if (!line.trim()) continue;
-    try { Object.assign(merged, JSON.parse(line)); } catch (_) { /* skip malformed */ }
-  }
-  return merged;
+  return foldAgentLines(readFileSync(filePath, 'utf8'));
 }
 
 // Agent-activity record files in a session dir, excluding the `_`-prefixed sidecars