claude-code-kanban 7.1.2 → 7.3.0

package/public/index.html

@@ -293,6 +293,9 @@
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           </button>
           <div class="pane-tools">
+            <button id="pane-split-btn" class="icon-btn pane-split-btn" title="Split with the tab before it (|)" aria-label="Split panes" aria-pressed="false">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="12" y1="4" x2="12" y2="20"/></svg>
+            </button>
             <button id="pane-reload" class="icon-btn pane-tool" title="Reload pane" aria-label="Reload pane">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><polyline points="21 3 21 8 16 8"/></svg>
             </button>
@@ -302,6 +305,8 @@
           </div>
         </div>
 
+        <div id="pane-split" class="pane-split">
+        <div id="board-side" class="board-side">
         <div class="kanban" id="main-content">
           <div id="owner-filter-bar" class="owner-filter-bar">
             <select id="owner-filter" class="filter-dropdown" onchange="filterByOwner(this.value)" aria-label="Filter by team member">
@@ -335,6 +340,18 @@
             <div id="completed-tasks" class="column-tasks" role="list" data-status="completed" ondragover="onColumnDragOver(event)" ondragleave="onColumnDragLeave(event)" ondrop="onColumnDrop(event)"></div>
           </div>
         </div>
+        <div id="agent-footer" class="agent-footer">
+          <div class="agent-footer-header" onclick="toggleAgentFooter()">
+            <span id="agent-footer-label">Agents</span>
+            <button class="agent-footer-toggle" id="agent-footer-toggle" aria-label="Toggle agent panel">&#x25BE;</button>
+          </div>
+          <div class="agent-footer-content" id="agent-footer-content"></div>
+        </div>
+        </div>
+        <div id="pane-divider" class="pane-divider" title="Drag to resize · drag to an edge to unsplit · double-click to reset"></div>
+        <div id="pane-views" class="pane-views"></div>
+        <div id="pane-drop" class="pane-drop"><div data-side="l"></div><div data-side="r"></div></div>
+        </div>
         <div id="terminal-pane" class="terminal-pane">
           <div class="terminal-bar">
             <span id="terminal-status" class="terminal-status"></span>
@@ -353,14 +370,6 @@
           <div id="terminal-host" class="terminal-host"></div>
           <textarea id="terminal-key-proxy" class="terminal-key-proxy" tabindex="-1" aria-hidden="true"></textarea>
         </div>
-        <div id="pane-views" class="pane-views"></div>
-        <div id="agent-footer" class="agent-footer">
-          <div class="agent-footer-header" onclick="toggleAgentFooter()">
-            <span id="agent-footer-label">Agents</span>
-            <button class="agent-footer-toggle" id="agent-footer-toggle" aria-label="Toggle agent panel">&#x25BE;</button>
-          </div>
-          <div class="agent-footer-content" id="agent-footer-content"></div>
-        </div>
       </div>
     </main>
 
@@ -840,6 +849,7 @@
       </div>
       <div class="modal-footer ns-footer">
         <label class="ns-check ns-stay" title="Start in the background and keep the current view"><input type="checkbox" id="ns-stay"> Stay here</label>
+        <label class="ns-check ns-edit" title="Open a shell in the folder with the claude command typed in. Press Enter to run it."><input type="checkbox" id="ns-edit"> Edit before run</label>
         <button type="button" class="btn btn-secondary" onclick="closeNewSession()">Cancel</button>
         <button type="button" id="ns-start" class="btn btn-primary" onclick="startNewSession()" disabled>Start</button>
       </div>

package/public/style.css

@@ -368,7 +368,9 @@ body::before {
   transition: background 0.15s;
 }
 .panel-resize-handle:hover,
-.panel-resize-handle.dragging {
+.panel-resize-handle.dragging,
+.pane-divider:hover,
+.pane-divider.dragging {
   background: var(--accent-dim);
 }
 
@@ -3461,8 +3463,7 @@ code.language-tree .hljs-title {
   display: none;
 }
 
-.session-view.pane-mode .kanban,
-.session-view.pane-mode .agent-footer {
+.session-view.pane-mode .board-side {
   display: none;
 }
 
@@ -3530,6 +3531,51 @@ code.language-tree .hljs-title {
   color: var(--text-primary);
 }
 
+.pane-tab.shown {
+  background: var(--bg-deep);
+  border-color: var(--border);
+  color: var(--text-secondary);
+}
+
+.pane-tab.dragging {
+  opacity: 0.5;
+}
+
+.pane-pair {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: stretch;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-bottom: 0;
+  border-radius: 7px 7px 0 0;
+  background: var(--bg-elevated);
+}
+
+.pane-pair.on {
+  border-color: var(--accent-dim);
+}
+
+.pane-pair .pane-tab {
+  min-width: 80px;
+}
+
+.pane-pair .pane-tab.on,
+.pane-pair .pane-tab.shown {
+  border-color: transparent;
+}
+
+.pane-pair-sep {
+  flex: none;
+  width: 1px;
+  margin: 5px 0;
+  background: var(--border);
+}
+
+.pane-strip.drop-hot {
+  background: var(--accent-dim);
+}
+
 .pane-tab.pinned {
   flex: none;
   min-width: 0;
@@ -3605,13 +3651,19 @@ code.language-tree .hljs-title {
 }
 
 .pane-add,
-.pane-tool {
+.pane-tool,
+.pane-split-btn {
   width: 26px;
   height: 26px;
   border-color: transparent;
 }
 
+.pane-split-btn.on {
+  color: var(--accent);
+}
+
 .pane-add svg,
+.pane-split-btn svg,
 .pane-tool svg {
   width: 14px;
   height: 14px;
@@ -3629,7 +3681,8 @@ code.language-tree .hljs-title {
   margin: 0 0 3px auto;
 }
 
-.pane-tool:disabled {
+.pane-tool:disabled,
+.pane-split-btn:disabled {
   opacity: 0.35;
   cursor: default;
   background: none;
@@ -3658,6 +3711,178 @@ code.language-tree .hljs-title {
   display: flex;
 }
 
+.pane-split {
+  --pane-split: 50%;
+  position: relative;
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.board-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  container: board / inline-size;
+}
+
+.board-side > .kanban {
+  min-height: 0;
+}
+
+/* 936px is where the full layout stops fitting: 3 × 280px columns, 2 × 24px gaps, 2 × 24px padding. */
+@container board (max-width: 936px) {
+  .kanban {
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .kanban-column {
+    min-width: 140px;
+  }
+
+  .column-header {
+    gap: 6px;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+  }
+
+  .column-title {
+    font-size: 12px;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .column-tasks {
+    padding-right: 0;
+  }
+}
+
+.session-view.terminal-mode .pane-split {
+  display: none;
+}
+
+.pane-divider,
+.pane-drop {
+  display: none;
+}
+
+.pane-divider {
+  background: linear-gradient(to right, transparent 2px, var(--border) 2px 4px, transparent 4px);
+  transition: background 0.15s;
+}
+
+.session-view.split-mode:not(.terminal-mode) .pane-views {
+  display: contents;
+}
+
+.session-view.split-mode .pane-split > .board-side.side-l,
+.session-view.split-mode .pane-split > .board-side.side-r,
+.session-view.split-mode .pane-view {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--bg-deep);
+}
+
+.session-view.split-mode .side-l {
+  left: 0;
+  right: calc(100% - var(--pane-split) + 3px);
+}
+
+.session-view.split-mode .side-r {
+  left: calc(var(--pane-split) + 3px);
+  right: 0;
+}
+
+.pane-split > .message-panel.log-l,
+.pane-split > .message-panel.log-r {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: auto;
+  height: auto;
+  z-index: 3;
+}
+
+.pane-split > .message-panel.log-l {
+  right: calc(100% - var(--pane-split) + 3px);
+  width: min(var(--message-panel-width, 540px), calc(var(--pane-split) - 3px));
+}
+
+.pane-split > .message-panel.log-r {
+  right: 0;
+  width: min(var(--message-panel-width, 540px), calc(100% - var(--pane-split) - 3px));
+}
+
+.pane-split > .message-panel.full-width.log-l {
+  left: 0;
+  width: auto;
+}
+
+.pane-split > .message-panel.full-width.log-r {
+  left: calc(var(--pane-split) + 3px);
+  width: auto;
+}
+
+.session-view.split-mode .pane-focus::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.session-view.split-mode:not(.terminal-mode) .pane-divider {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--pane-split) - 3px);
+  width: 6px;
+  cursor: col-resize;
+  z-index: 4;
+}
+
+.pane-split.resizing {
+  cursor: col-resize;
+}
+
+.pane-split.resizing iframe {
+  pointer-events: none;
+}
+
+.pane-split.collapse-l .side-l,
+.pane-split.collapse-r .side-r {
+  opacity: 0.35;
+}
+
+.pane-split.dropping .pane-drop {
+  display: flex;
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+}
+
+.pane-drop > div {
+  flex: 1;
+  margin: 8px;
+  border-radius: 8px;
+}
+
+.pane-drop > div.hot {
+  background: var(--accent-dim);
+  outline: 2px dashed var(--accent);
+  outline-offset: -2px;
+}
+
 .pane-view:has(> .review-panel) {
   flex-direction: row;
 }
@@ -3684,6 +3909,49 @@ code.language-tree .hljs-title {
   background: #fff;
 }
 
+.pane-url-bar {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+
+.pane-view:hover > .pane-url-bar,
+.pane-view.frame-focus > .pane-url-bar {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.pane-url-bar .icon-btn {
+  width: auto;
+  min-width: 26px;
+  height: 24px;
+  padding: 0 6px;
+  border-color: transparent;
+  font: inherit;
+}
+
+.pane-url-bar .pane-keys {
+  display: none;
+  color: var(--accent);
+}
+
+.pane-view.frame-focus .pane-keys {
+  display: flex;
+}
+
 .pane-doc {
   flex: 1;
   min-height: 0;
@@ -5270,6 +5538,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-list,
 .scratch-file-list,
+.zen-bookmark-list,
 .artifact-list {
   list-style: none;
   padding: 0;
@@ -5281,6 +5550,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-item,
 .scratch-file-item,
+.zen-bookmark-item,
 .artifact-item {
   display: flex;
   align-items: baseline;
@@ -5290,6 +5560,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-link,
 .scratch-file-link,
+.zen-bookmark-link,
 .artifact-link {
   color: var(--accent-text);
   text-decoration: underline;
@@ -5347,6 +5618,12 @@ code.language-tree .hljs-title {
   font-size: 11px;
 }
 
+.zen-bookmark-who {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.zen-bookmark-link,
 .scratch-file-link {
   background: none;
   border: none;
@@ -7099,7 +7376,7 @@ select.form-input option:checked {
 
 /* #region NEW_SESSION */
 .modal.new-session-modal {
-  width: 520px;
+  width: 640px;
   max-width: calc(100vw - 32px);
   overflow: visible;
 }
@@ -7228,7 +7505,8 @@ select.form-input option:checked {
   accent-color: var(--accent);
 }
 
-.ns-inline .form-input:disabled {
+.ns-inline .form-input:disabled,
+.ns-check:has(input:disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -7311,15 +7589,27 @@ select.form-input option:checked {
   border-top: 1px solid var(--border);
 }
 
-.ns-stay {
-  margin-right: auto;
+.ns-stay,
+.ns-edit {
   color: var(--text-tertiary);
 }
 
-.new-session-modal.ns-resume .ns-stay {
+.ns-edit {
+  margin-right: auto;
+}
+
+.new-session-modal.ns-resume .ns-stay,
+.new-session-modal.ns-resume .ns-edit {
   visibility: hidden;
 }
 
+.ns-footer .btn-primary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ns-footer .btn-primary:disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/public/terminal-frame.js

@@ -11,12 +11,14 @@
   const modsOf = (e) =>
     [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'].filter(Boolean).join('+');
 
-  // A claim names a key by its physical code, or by its character when the layout moves it.
+  // A claim names a key by its physical code, or by its character when the layout moves it. A press
+  // that AltGr turns into a character (Polish AltGr+S is 'ś') is matched by its character only.
   function keySigs(e) {
     const mods = modsOf(e);
-    return [e.code && `${mods}|c:${e.code}`, typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`].filter(
-      Boolean,
-    );
+    return [
+      e.code && !e.getModifierState?.('AltGraph') && `${mods}|c:${e.code}`,
+      typeof e.key === 'string' && `${mods}|k:${e.key.toLowerCase()}`,
+    ].filter(Boolean);
   }
 
   const claimSig = (c) => keySigs(c)[0];

package/public/vendor/claude-hub-sdk.js

@@ -1,18 +1,51 @@
-// claude-hub-sdk 1.2.0 (sha256 62c7d9f477b2). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
-// Claude Code Hub SDK stub: what an app serves when no hub runs it. Under a hub, the hub hands the
-// app its real SDK (client.js) in place of this file. The API must match client.js; a test checks it.
-((root) => {
+// claude-hub-sdk 1.4.0 (sha256 7d559a8888ce). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// Claude Code Hub SDK: the one rule that names a key press, shared by the hub page, client.js and
+// stub.js. The hub serves it to its page as /sdk/keys.js; mount() and sdk:sync put it in front of
+// client.js and stub.js, so an app still loads one file.
+// var, not const: the hub page and an app page each load it as a classic script, and a second
+// const declaration in the same page would throw.
+var ClaudeHubKeys = (() => {
   'use strict';
 
-  // A copy of client.js comboOf(); a test checks they match.
+  // Modifiers in ctrl, alt, shift, meta order, joined by '+' to the key. macOS composes
+  // Option+<key> into a character (Option+1 is '¡', Option+P is 'π') and holding Control does not
+  // undo it, so e.key alone cannot name these presses there. e.code is the physical key, which is
+  // wrong for non-US layouts, hence only as a fallback. No fallback under AltGraph: Chromium sets it
+  // when AltGr types a character, and that press is text. Takes a real KeyboardEvent or a forwarded
+  // {key, code} payload; a payload without code degrades to key. A payload needs no AltGraph: the
+  // SDK forwards only a press whose key already names a bound combo.
+  // Self-contained on purpose: cck puts its source text into a sandboxed frame.
   function comboOf(e) {
     const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
-    const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+    const m = !e.getModifierState?.('AltGraph') && /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
     const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
     const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
     return [...mods, key].filter(Boolean).join('+');
   }
 
+  // The keys of a combo as a help row shows them: ['Ctrl', 'Alt', 'P'], or ['⌃', '⌥', 'P'] on macOS.
+  // The {n} of a numbered combo reads 1…9.
+  function keyParts(combo, mac) {
+    const mods = mac
+      ? { ctrl: '⌃', alt: '⌥', shift: '⇧', meta: '⌘' }
+      : { ctrl: 'Ctrl', alt: 'Alt', shift: 'Shift', meta: 'Win' };
+    const named = { '{n}': '1…9', ArrowLeft: '←', ArrowRight: '→', ArrowUp: '↑', ArrowDown: '↓' };
+    return combo.split('+').map((k) => mods[k] ?? named[k] ?? (k.length === 1 ? k.toUpperCase() : k));
+  }
+
+  return { comboOf, keyParts };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys;
+
+// Claude Code Hub SDK stub: what an app serves when no hub runs it. Under a hub, the hub hands the
+// app its real SDK (client.js) in place of this file. The API must match client.js; a test checks it.
+((root) => {
+  'use strict';
+
+  // keys.js comes first in the synced file. Required as a module, stub.js loads it itself.
+  const { comboOf } = typeof ClaudeHubKeys === 'object' ? ClaudeHubKeys : require('./keys');
+
   function createClaudeHub(win) {
     let hub = null;
     const off = () => {};
@@ -43,6 +76,7 @@
         can: (action) => !!standaloneFn(action),
         forwards: () => false,
         forwardCombos: () => [],
+        keyLabel: () => null,
         closeGuard() {},
         openExternal(url) {
           win.open(url, '_blank', 'noopener');

package/server.js

@@ -4015,6 +4015,12 @@ const panesFileStamp = () => {
   }
 };
 let panesStamp;
+// File panes render the file once; this watch tells the boards when one changes. An editor
+// or an agent often saves several times in a row, so each path waits for a quiet 200 ms.
+const paneFileWatcher = chokidar.watch([], { ignoreInitial: true });
+const paneFileTimers = new Map();
+let paneFilesWatched = new Set();
+let paneFileWatchQueued = false;
 const panes = createPaneStore({
   load: () => {
     const stamp = panesFileStamp();
@@ -4026,7 +4032,37 @@ const panes = createPaneStore({
     writeJsonAtomic(PANES_FILE, data);
     panesStamp = panesFileStamp();
   },
-  onChange: (sessionId, layout) => broadcast({ type: 'pane:changed', sessionId, layout }),
+  onChange: (sessionId, layout) => {
+    broadcast({ type: 'pane:changed', sessionId, layout });
+    queuePaneFileWatch();
+  },
+});
+
+// Deferred: the store's first load reports changes before `panes` is assigned, and a reload
+// reports each changed session, which one sync covers.
+function queuePaneFileWatch() {
+  if (paneFileWatchQueued) return;
+  paneFileWatchQueued = true;
+  setImmediate(() => {
+    paneFileWatchQueued = false;
+    const next = panes.fileTargets();
+    const added = [...next].filter((p) => !paneFilesWatched.has(p));
+    const gone = [...paneFilesWatched].filter((p) => !next.has(p));
+    if (added.length) paneFileWatcher.add(added);
+    if (gone.length) paneFileWatcher.unwatch(gone);
+    paneFilesWatched = next;
+  });
+}
+paneFileWatcher.on('all', (event, filePath) => {
+  if (event !== 'add' && event !== 'change' && event !== 'unlink') return;
+  clearTimeout(paneFileTimers.get(filePath));
+  paneFileTimers.set(
+    filePath,
+    setTimeout(() => {
+      paneFileTimers.delete(filePath);
+      broadcast({ type: 'pane:file-changed', path: filePath });
+    }, 200),
+  );
 });
 chokidar.watch(PANES_FILE, { ignoreInitial: true }).on('all', (event) => {
   if (event === 'add' || event === 'change') panes.reload();
@@ -4143,7 +4179,8 @@ function parseReviewBody(body) {
     selector: code(c?.selector, 500),
   }));
   if (items.some((c) => !c.comment)) throw previewError(400, 'every comment needs text');
-  return { kind: source.kind, label, path: source.kind === 'file' ? source.path : null, items };
+  const locate = oneLine(source.locate, 600) || null;
+  return { kind: source.kind, label, path: source.kind === 'file' ? source.path : null, locate, items };
 }
 
 function formatReviewMarkdown(src, items) {
@@ -4152,6 +4189,7 @@ function formatReviewMarkdown(src, items) {
     '',
     `Each comment is the user's instruction about the quoted text.${src.path ? ' A quote missing from the source means the source changed after the review: say so.' : ''}`,
   ];
+  if (src.locate) parts.push('', src.locate);
   items.forEach((c, i) => {
     const where = [c.line && `line ${c.line}`, c.heading && `under "${c.heading}"`].filter(Boolean).join(', ');
     parts.push('', `## ${i + 1}${where ? ` (${where})` : ''}`, '');
@@ -4491,6 +4529,7 @@ async function runRetention() {
     const opts = { known: scan?.ids, maxAgeMs: retentionMs(CLAUDE_DIR) };
     const markers = dispatched.prune(opts);
     const layouts = panes.prune(opts);
+    if (layouts) queuePaneFileWatch();
     const reviews = await pruneSessionDirs(REVIEW_DIR, opts);
     const contexts = await pruneContextStatus(CONTEXT_STATUS_DIR, opts);
     const wts = worktrees.prune(scan?.dirs);