claude-code-kanban 7.12.1 → 7.13.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "7.12.1",
+  "version": "7.13.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.9",
   "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

@@ -17,7 +17,7 @@ The page is a document to read: its text and static exhibits are in the HTML, an
    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`.
+   4. Close with what to do next and `.sources`, one `li` per source. Each `[n]` in the text is an `a.cite` to its row.
 3. **Invent each exhibit.** Ask what form makes this claim obvious at a glance, then build that, the template's blocks or something new: a slope chart, an annotated timeline, small multiples, a cutaway, a ranked strip, a map. The Blocks table is a palette of ready parts, not a menu to choose from. Before you draw an SVG, read the matching guide in the `show` skill — [chart](../show/references/chart.md), [diagram](../show/references/diagram.md) and its type file, [mockup](../show/references/mockup.md) — for patterns: shapes, arrows and labels. Their sizes and directions are for cards; on a page, the Principles below set them. Label masks fill with `--color-bg-subtle`, the figure's background. When the source or the request has a value the reader would want to change, or states one after another, the exhibit can be interactive: a slider or toggle that computes the figure again, a stepper through states, or a model that runs over time. Use the simplest one that proves the claim, and follow [Interactive exhibits](#interactive-exhibits). Never add a control on an input you made up: a claim that rests on fixed facts gets a static exhibit.
 4. **Check.** Render the page in light and in dark, and look at each render, not the source. Done when no text is clipped, no arrow crosses a label, `scrollWidth` equals `clientWidth`, and, when the topic comes from a source such as a file or a conversation, every section and number of it is named where it landed on the page or reported to the user as left out. For an interactive exhibit, also: no console errors, and the numbers the text states are the ones the exhibit shows at its default settings.
 5. **Show.** When `$CCK_URL` is set, the session runs in the cck board: run `claude-code-kanban pane add <page> --title '<h1>'` and tell the user the page waits in that tab. Else give the user the page path.
@@ -62,6 +62,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/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; }
@@ -160,7 +170,7 @@ ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1
 </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"><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>
 
@@ -180,7 +190,7 @@ ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1
     <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>
+      <p>What it is, in one sentence. <a class="cite" href="#src-2">[2]</a></p>
       <pre>on 429: wait, then retry</pre>
       <ul><li class="pro">A strong point.</li><li class="con">A weak point.</li></ul>
     </div>
@@ -194,7 +204,8 @@ ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1
     <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>
+      <tr><td><span class="dot">2</span>Option B</td><td class="c part">partial</td><td class="num">640</td></tr>
+      <tr><td><span class="dot">3</span>Option C</td><td class="c no">no</td><td class="num">300</td></tr>
     </tbody>
   </table></div>
   <ul class="points">
@@ -209,7 +220,14 @@ ol.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1
   <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>logs/errors-7d.csv</code><span>error count and share of minutes</span></li>
+    <li id="src-2"><code>services/api/src/middleware/rate-limit/retry-after-handler.ts:42</code><span>the retry on 429</span></li>
+    <li id="src-3"><a href="https://example.com">Title of the page</a><span>line counts in the table</span></li>
+  </ol>
+  <p>Estimates are marked as estimates.</p>
+</div>
 </main>
 </body>
 </html>

package/public/app.js

@@ -3918,7 +3918,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 +3951,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 +6391,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 +6548,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);
@@ -7825,6 +7833,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 +8645,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.
@@ -13237,6 +13252,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 +13313,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 +13575,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 +13604,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 +13982,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 +14211,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, 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', '') : '')
+  );
 }
 
-const paneMenuItem = (act, label) =>
-  `<button class="pane-menu-item" role="menuitem" data-pane-act="${escapeHtml(act)}">${label}</button>`;
+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 +14342,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 +14385,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 +14579,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 +14611,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 +14699,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 +14724,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 +14755,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/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);
 }
@@ -10441,4 +10517,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 */