claude-code-kanban 7.1.1 → 7.2.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>
 

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;
 }
 
@@ -3526,9 +3527,55 @@ code.language-tree .hljs-title {
 .pane-tab.on {
   background: var(--bg-deep);
   border-color: var(--border);
+  border-top-color: var(--accent);
   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;
@@ -3604,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;
@@ -3628,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;
@@ -3657,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;
 }
@@ -5269,6 +5495,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-list,
 .scratch-file-list,
+.zen-bookmark-list,
 .artifact-list {
   list-style: none;
   padding: 0;
@@ -5280,6 +5507,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-item,
 .scratch-file-item,
+.zen-bookmark-item,
 .artifact-item {
   display: flex;
   align-items: baseline;
@@ -5289,6 +5517,7 @@ code.language-tree .hljs-title {
 
 .linked-doc-link,
 .scratch-file-link,
+.zen-bookmark-link,
 .artifact-link {
   color: var(--accent-text);
   text-decoration: underline;
@@ -5346,6 +5575,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;

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);