claude-code-kanban 7.22.0 → 7.23.0

package/lib/show.js

@@ -173,6 +173,16 @@ function createShowStore(o) {
     for (const ext of Object.values(EXT)) fs.rmSync(path.join(dir, `${id}.${ext}`), { force: true });
   }
 
+  // The kind of `file` when it is the post's own claimed file, else null: posting that path as a
+  // file post would have removeContent delete it.
+  function ownContentKind(dir, id, file) {
+    const m = CONTENT_FILE_RE.exec(path.basename(file));
+    if (!m || m[1].toLowerCase() !== id.toLowerCase()) return null;
+    const real = (p) => { try { return fs.realpathSync.native(p); } catch { return path.resolve(p); } };
+    if (real(path.dirname(file)).toLowerCase() !== real(dir).toLowerCase()) return null;
+    return Object.keys(EXT).find((k) => EXT[k] === m[2].toLowerCase());
+  }
+
   // A session resumed in a new terminal gets a new terminal id, so a terminal with no posts yet
   // takes the posts of the session it was started with.
   function sessionOf(terminalId) {
@@ -203,6 +213,11 @@ function createShowStore(o) {
     let at = key == null ? -1 : posts.findIndex((p) => p.key === key);
     const old = at >= 0 ? posts[at] : null;
     const id = old ? old.id : crypto.randomUUID();
+    const ownKind = old && file != null ? ownContentKind(dir, id, file) : null;
+    if (ownKind) {
+      kind = ownKind;
+      file = null;
+    }
     const target = file == null ? contentPath(dir, { id, kind }) : null;
     if (target && old && !old.file) {
       const from = contentPath(dir, old);

package/package.json

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

package/public/app.js

@@ -16951,6 +16951,11 @@ function focusShowBody() {
 
 const SHOW_KEY_COMMANDS = { 'alt+Enter': 'expand', 'alt+shift+Enter': 'dock', 'alt+w': 'close' };
 
+// Docked, the card is a dock item, so it shares the dock's expand with the add-ons.
+const showExpanded = () => (showState.docked ? dockExpanded : showState.expanded);
+
+const expandTitle = (on, home) => (on ? `Back to the ${home} · Alt+Enter or Esc` : 'Fill the terminal · Alt+Enter');
+
 // The body keeps focus, because a render replaces an HTML card's frame.
 function showCardKey(e) {
   if (matchKey(e, '[', ']')) {
@@ -16960,8 +16965,7 @@ function showCardKey(e) {
   }
   const combo = ClaudeHub.comboOf(e);
   let cmd = SHOW_KEY_COMMANDS[combo];
-  if (combo === 'Escape') cmd = showState.expanded && !showState.docked ? 'expand' : 'collapse';
-  else if (cmd === 'expand' && showState.docked) cmd = null;
+  if (combo === 'Escape') cmd = showExpanded() ? 'expand' : 'collapse';
   if (cmd) {
     showCommand(cmd);
     if (cmd === 'expand' || cmd === 'dock') focusShowBody();
@@ -17126,16 +17130,11 @@ function showHeaderHtml(p) {
   const i = showState.idx;
   const key = p.key ? `<span class="show-sep">·</span><span class="show-key">${escapeHtml(p.key)}</span>` : '';
   const btn = (...args) => showBtnHtml('show', ...args);
-  const { collapsed, expanded, docked } = showState;
+  const { collapsed, docked } = showState;
+  const expanded = showExpanded();
   const dockTitle = docked ? 'Back to the overlay · Alt+Shift+Enter' : 'Dock beside the terminal · Alt+Shift+Enter';
   const dock = btn('dock', 'dock', dockTitle, false, docked);
-  const expand = docked
-    ? ''
-    : btn(
-        'expand',
-        expanded ? 'restore' : 'expand',
-        expanded ? 'Back to the card · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter',
-      );
+  const expand = btn('expand', expanded ? 'restore' : 'expand', expandTitle(expanded, docked ? 'dock' : 'card'));
   return `<span class="show-nav"><span class="show-title" title="${escapeHtml(p.title)}">${escapeHtml(p.title)}</span>${key}</span>
     <span class="show-pager">${btn('prev', 'prev', 'Previous post', i === 0)}<span class="show-pos">${i + 1}/${n}</span>${btn('next', 'next', 'Next post', i === n - 1)}</span>
     <span class="show-actions">${btn('pane', 'pane', 'Open in a pane of the session')}${dock}${btn('collapse', collapsed ? 'uncollapse' : 'collapse', collapsed ? 'Show the post' : 'Collapse to the header · Esc')}${expand}${btn('remove', 'clear', 'Remove this post · Ctrl+D · Shift+click clears every post')}${btn('close', 'close', 'Close until the next post · Alt+W')}</span>`;
@@ -17176,7 +17175,7 @@ function renderShow({ flash = false } = {}) {
   }
   const p = showState.posts[showState.idx];
   showState.marked.delete(p.id);
-  card.classList.toggle('expanded', showState.expanded && !showState.collapsed && !showState.docked);
+  card.classList.toggle('expanded', showExpanded() && !showState.collapsed);
   card.classList.toggle('collapsed', showState.collapsed);
   if (!card.firstChild) {
     card.innerHTML = `<header class="show-head"></header><div class="show-ticks"></div><div class="show-body" tabindex="-1"></div>
@@ -17670,11 +17669,11 @@ function renderDockAddon(pane) {
     panel.classList.toggle('expanded', dockExpanded);
     panel.style.setProperty('--show-term-font', `${currentTerminalFontSize()}px`);
     const expand = panel.querySelector('[data-dock="expand"]');
-    const expandTitle = dockExpanded ? 'Back to the dock · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter';
-    if (expand.title !== expandTitle) {
+    const label = expandTitle(dockExpanded, 'dock');
+    if (expand.title !== label) {
       expand.innerHTML = showIcon(dockExpanded ? 'restore' : 'expand');
-      expand.title = expandTitle;
-      expand.setAttribute('aria-label', expandTitle);
+      expand.title = label;
+      expand.setAttribute('aria-label', label);
     }
     if (!dockFrames.has(pane.id)) {
       const view = createDockView(pane);
@@ -17769,7 +17768,7 @@ async function removeDockItem(item) {
 function setDockExpanded(on) {
   dockExpanded = on;
   store.setItem(DOCK_EXPANDED_KEY, on ? '1' : '');
-  renderDockAddon(dockActivePane());
+  renderShow();
 }
 
 // Alt+Enter toggles the full width and Esc goes back; Esc in the dock focuses the terminal.
@@ -17966,8 +17965,9 @@ function showCommand(cmd) {
     showState.docked = !showState.docked;
     showState.collapsed = false;
   } else if (cmd === 'expand') {
-    showState.expanded = !showState.expanded;
     showState.collapsed = false;
+    if (showState.docked) return setDockExpanded(!dockExpanded);
+    showState.expanded = !showState.expanded;
   } else if (cmd === 'close') showState.closed = true;
   else if (cmd === 'remove') {
     const id = showState.posts[showState.idx]?.id;

package/public/style.css

@@ -69,9 +69,10 @@
 /* Tokens derived from theme colors live on body, where color themes set those colors;
    on :root they would resolve to the defaults before a theme applies. */
 body {
-  /* Selection reads as a recess against the darker surface here, but light theme's deep tone
-     sits within a shade of the sidebar, so there it has to rise instead. */
-  --session-active-bg: var(--bg-deep);
+  /* bg-deep and bg-elevated sit within a few shades of the dark sidebar, so dark themes raise
+     the open session to the hover tone; light themes use bg-elevated. */
+  --session-active-bg: var(--bg-hover);
+  --session-active-border: color-mix(in srgb, var(--text-primary) 30%, transparent);
   --ansi-black: var(--text-muted);
   --ansi-white: var(--text-secondary);
   --ansi-bright-black: var(--text-tertiary);
@@ -1059,7 +1060,7 @@ body.booting .boot-splash {
 
 .session-item.active {
   background: var(--session-active-bg);
-  border-color: var(--border);
+  border-color: var(--session-active-border);
 }
 
 .session-item.kb-selected,
@@ -4125,14 +4126,16 @@ code.ct .ct-has[aria-expanded='false'] .ct-name::after {
 }
 
 /* Stops above the prompt rows, as the expanded show card does. */
-.dock-addon.expanded {
+.dock-addon.expanded,
+.show-card.docked.expanded {
   left: 0;
   bottom: calc(7.2 * var(--show-term-font, 13px));
   width: auto;
   border-bottom: 1px solid var(--border);
 }
 
-.dock-addon.expanded .show-dock-edge {
+.dock-addon.expanded .show-dock-edge,
+.show-card.docked.expanded .show-dock-edge {
   display: none;
 }
 
@@ -7994,6 +7997,7 @@ body.light {
   --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
   --session-active-bg: var(--bg-elevated);
+  --session-active-border: var(--border);
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #2c2c2c;
@@ -10526,6 +10530,7 @@ select.form-input option:checked {
     --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
     --session-active-bg: var(--bg-elevated);
+    --session-active-border: var(--border);
     --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #2c2c2c;