claude-code-kanban 6.1.2 → 7.0.1

package/public/index.html

@@ -26,6 +26,7 @@
   <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.12.0/build/highlight.min.js" integrity="sha384-wjfDDhOPPdjtva8vWBhWeVprSpmxisEu5aYT3q1JyACqXpdKpo3PWZTMVq24MBix" crossorigin="anonymous"></script>
   <script>window.__STORAGE_NS__ = null;</script>
   <script defer src="/project-match.js"></script>
+  <script defer src="/tree-highlight.js"></script>
   <script defer src="/link-url.js"></script>
   <script defer src="/app.js"></script>
 </head>
@@ -285,6 +286,22 @@
           </div>
         </header>
 
+        <div id="pane-strip" class="pane-strip" role="tablist" aria-label="Session panes">
+          <div id="pane-pin" class="pane-pin"></div>
+          <div id="pane-tabs" class="pane-tabs"></div>
+          <button id="pane-add" class="icon-btn pane-add" title="Add pane (paste a URL or a file path, or a linked doc)" aria-label="Add pane">
+            <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-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>
+            <button id="pane-open" class="icon-btn pane-tool" title="Open in new tab" aria-label="Open pane in new tab">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </button>
+          </div>
+        </div>
+
         <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">
@@ -336,6 +353,7 @@
           <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>
@@ -435,6 +453,9 @@
       <div class="modal-header">
         <h3 class="modal-title" id="preview-modal-title">Preview</h3>
         <div style="display:flex;gap:4px;align-items:center;">
+          <button id="preview-pane-btn" class="icon-btn" aria-label="Open in a pane" title="Open in a pane" onclick="openPreviewInPane()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M9 4v5"/></svg>
+          </button>
           <button id="preview-link-btn" class="icon-btn" aria-label="Link to current session" title="Link to current session" onclick="togglePreviewSessionLink()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
           </button>
@@ -825,6 +846,22 @@
     </div>
   </div>
 
+  <div id="pane-pop" class="modal-overlay" onclick="closePanePop()">
+    <div class="modal pane-pop-dialog" role="dialog" aria-labelledby="pane-pop-title" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 id="pane-pop-title" class="modal-title">Add a pane</h3>
+        <button class="modal-close" aria-label="Close dialog" onclick="closePanePop()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+      <input id="pane-pop-input" class="form-input" placeholder="Search linked docs, or paste a URL or a file path" autocomplete="off" spellcheck="false">
+      <div id="pane-pop-detect" class="pane-pop-detect"></div>
+      <div class="pane-pop-label">Linked docs</div>
+      <div id="pane-pop-docs" class="pane-pop-docs"></div>
+      <div class="sp-hint"><kbd>Enter</kbd> add &middot; <kbd>&uarr;</kbd><kbd>&darr;</kbd> select &middot; <kbd>Esc</kbd> close</div>
+    </div>
+  </div>
+
   <div id="session-picker-modal" class="modal-overlay top-aligned" onclick="closeSessionPicker()">
     <div class="modal session-picker" onclick="event.stopPropagation()">
       <input type="text" id="session-picker-input" class="form-input sp-input" placeholder="Jump to session..." autocomplete="off" spellcheck="false">

package/public/link-url.js

@@ -1,6 +1,9 @@
 // Loaded by the page as a plain script and by lib/linked-docs.js through require, so the
-// sidebar, the API and the CLI accept the same URLs. Only http(s): linked docs render as
-// links, so a `javascript:` or `data:` value sent through the API must not become one.
+// sidebar, the API and the CLI accept the same URLs and keep the same number of docs.
+const MAX_LINKED_DOCS = 200;
+
+// Only http(s): linked docs render as links, so a `javascript:` or `data:` value sent
+// through the API must not become one.
 function linkUrl(value) {
   if (typeof value !== 'string') return null;
   const v = value.trim();
@@ -12,4 +15,4 @@ function linkUrl(value) {
   }
 }
 
-if (typeof module === 'object' && module.exports) module.exports = { linkUrl };
+if (typeof module === 'object' && module.exports) module.exports = { linkUrl, MAX_LINKED_DOCS };

package/public/style.css

@@ -2444,6 +2444,14 @@ body.booting .boot-splash {
   overflow-x: auto;
 }
 
+code.language-tree .hljs-punctuation {
+  color: var(--text-muted);
+}
+
+code.language-tree .hljs-title {
+  font-weight: 600;
+}
+
 .detail-desc code {
   background: color-mix(in srgb, var(--text-muted) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
@@ -3412,6 +3420,419 @@ body.booting .boot-splash {
 
 /* #endregion */
 
+/* #region PANES */
+.pane-strip {
+  display: none;
+  align-items: stretch;
+  gap: 2px;
+  padding: 4px 10px 0;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.pane-pin {
+  display: flex;
+  flex: none;
+  margin-bottom: -1px;
+}
+
+.session-view.has-panes .pane-strip {
+  display: flex;
+}
+
+.session-view.terminal-mode .pane-strip {
+  display: none;
+}
+
+.session-view.pane-mode .kanban,
+.session-view.pane-mode .agent-footer {
+  display: none;
+}
+
+.pane-tabs {
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+  margin-bottom: -1px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+
+.pane-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.pane-tabs.fade-l,
+.pane-tabs.fade-r {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--fade-l, 0),
+    #000 calc(100% - var(--fade-r, 0)),
+    transparent
+  );
+}
+
+.pane-tabs.fade-l {
+  --fade-l: 28px;
+}
+
+.pane-tabs.fade-r {
+  --fade-r: 28px;
+}
+
+.pane-tab {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 6px;
+  min-width: 112px;
+  max-width: 190px;
+  padding: 4px 5px 4px 9px;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  background: none;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.pane-tab:hover {
+  background: var(--bg-hover);
+}
+
+.pane-tab.on {
+  background: var(--bg-deep);
+  border-color: var(--border);
+  color: var(--text-primary);
+}
+
+.pane-tab.pinned {
+  flex: none;
+  min-width: 0;
+  padding-right: 10px;
+  font-weight: 500;
+}
+
+.pane-tab .pane-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pane-tab .pin-meta {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.pane-tab .kind {
+  flex: none;
+  width: 13px;
+  height: 13px;
+}
+
+.pane-tab .state {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border: 1px solid var(--text-muted);
+  border-radius: 50%;
+}
+
+.pane-tab .state.loaded {
+  background: var(--success);
+  border-color: var(--success);
+}
+
+.pane-tab .state.blocked {
+  background: var(--warning);
+  border-color: var(--warning);
+}
+
+.pane-tab .pane-x {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.pane-tab:not(.on, :hover, :focus-within) .pane-x {
+  visibility: hidden;
+}
+
+.pane-tab .pane-x:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.pane-sep {
+  flex: none;
+  width: 1px;
+  margin: 5px 6px 7px;
+  background: var(--border);
+}
+
+.pane-add,
+.pane-tool {
+  width: 26px;
+  height: 26px;
+  border-color: transparent;
+}
+
+.pane-add svg,
+.pane-tool svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pane-add {
+  align-self: center;
+  margin: 0 0 3px 4px;
+}
+
+.pane-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin: 0 0 3px auto;
+}
+
+.pane-tool:disabled {
+  opacity: 0.35;
+  cursor: default;
+  background: none;
+}
+
+.pane-views {
+  position: relative;
+  display: none;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg-deep);
+}
+
+.session-view.pane-mode:not(.terminal-mode) .pane-views {
+  display: flex;
+}
+
+.pane-view {
+  position: absolute;
+  inset: 0;
+  display: none;
+  flex-direction: column;
+}
+
+.pane-view.on {
+  display: flex;
+}
+
+.pane-view:has(> .review-panel) {
+  flex-direction: row;
+}
+
+.pane-view:has(> .pane-doc) {
+  gap: 16px;
+  padding: 16px;
+}
+
+.pane-view:has(> .review-panel) > :not(.review-panel) {
+  width: auto;
+  min-width: 0;
+}
+
+.pane-view > .review-panel {
+  padding: 12px;
+}
+
+.pane-frame {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  border: 0;
+  background: #fff;
+}
+
+.pane-doc {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: var(--pane-doc-w, 860px);
+  margin: 0 auto;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.pane-doc-body {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 24px;
+  font-size: 13px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+/* The modal's corner grip; the pane fills the height, so it sets the width only. */
+.pane-doc > .modal-resize-handle {
+  cursor: ew-resize;
+}
+
+.pane-card {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  font-family: var(--font-mono);
+}
+
+.pane-card-box {
+  max-width: 460px;
+  padding: 26px 28px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-elevated);
+  text-align: center;
+}
+
+.pane-card-box svg {
+  width: 30px;
+  height: 30px;
+  color: var(--warning);
+}
+
+.pane-card-box h3 {
+  margin: 10px 0 6px;
+  font-family: var(--font-serif);
+  font-size: 17px;
+}
+
+.pane-card-box p {
+  margin: 0 0 16px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.pane-card .btn {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.modal.pane-pop-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 520px;
+  max-width: calc(100vw - 32px);
+  padding: 18px 20px 14px;
+  font-family: var(--font-mono);
+}
+
+.pane-pop-dialog .modal-header {
+  margin-bottom: 12px;
+}
+
+.pane-pop-dialog .modal-title {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-weight: 500;
+}
+
+.pane-pop-dialog .form-input {
+  box-sizing: border-box;
+  font: 13px var(--font-mono);
+}
+
+.pane-pop-detect {
+  min-height: 16px;
+  margin: 7px 2px 14px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.pane-pop-detect.error {
+  color: var(--warning);
+}
+
+.pane-pop-dialog .sp-hint {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.pane-pop-label {
+  margin: 6px 2px;
+  color: var(--text-muted);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.pane-pop-docs {
+  max-height: 260px;
+  margin: 0 -6px;
+  overflow-y: auto;
+}
+
+.pane-pop-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 6px;
+  outline: none;
+  background: none;
+  color: var(--text-secondary);
+  font: 12px var(--font-mono);
+  text-align: left;
+  cursor: pointer;
+}
+
+.pane-pop-row:hover,
+.pane-pop-row:focus-visible,
+.pane-pop-row.active {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.pane-pop-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pane-pop-row svg {
+  flex: none;
+  width: 13px;
+  height: 13px;
+}
+
+.pane-pop-empty {
+  padding: 4px 6px;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/* #endregion */
+
 /* #region MESSAGE_PANEL */
 .message-panel {
   position: fixed;
@@ -3925,6 +4346,9 @@ body.booting .boot-splash {
 .rendered-md li {
   margin: 0.2em 0;
 }
+.rendered-md a {
+  color: var(--accent);
+}
 .rendered-md pre {
   margin: 0.6em 0;
 }
@@ -4920,7 +5344,7 @@ body.booting .boot-splash {
   white-space: nowrap;
 }
 
-.scratch-files-more {
+.list-more {
   margin: 6px 0 0;
   font-size: 11px;
 }
@@ -5674,16 +6098,19 @@ body.light .msg-assistant .msg-text {
   padding-right: 8px;
 }
 
-#preview-modal-body .preview-image {
+.preview-image {
   display: block;
   max-width: 100%;
-  max-height: 70vh;
   margin: 0 auto;
   border: 1px solid var(--border);
   border-radius: 4px;
   background: var(--bg-hover);
 }
 
+#preview-modal-body .preview-image {
+  max-height: 70vh;
+}
+
 #preview-modal-meta {
   margin-top: 12px;
   font-size: 11px;
@@ -7975,8 +8402,9 @@ pre.mermaid svg {
   color: var(--text-primary);
 }
 
-/* Move-to-group menu (right-click / long-press) */
-.sg-menu {
+/* Move-to-group menu (right-click / long-press); the pane tab menu shares the look */
+.sg-menu,
+.pane-menu {
   position: fixed;
   z-index: 3000;
   min-width: 180px;
@@ -7991,7 +8419,8 @@ pre.mermaid svg {
   gap: 1px;
 }
 
-.sg-menu-label {
+.sg-menu-label,
+.pane-menu-label {
   padding: 6px 8px 4px;
   font-size: 10px;
   text-transform: uppercase;
@@ -7999,7 +8428,8 @@ pre.mermaid svg {
   color: var(--text-muted);
 }
 
-.sg-menu-item {
+.sg-menu-item,
+.pane-menu-item {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -8016,7 +8446,9 @@ pre.mermaid svg {
 }
 
 .sg-menu-item:hover,
-.sg-menu-item:focus-visible {
+.sg-menu-item:focus-visible,
+.pane-menu-item:hover,
+.pane-menu-item:focus-visible {
   background: var(--bg-hover);
   outline: none;
 }
@@ -8024,4 +8456,16 @@ pre.mermaid svg {
 .sg-menu-remove {
   color: var(--text-secondary);
 }
+
+.pane-menu {
+  font-family: var(--font-mono);
+}
+
+.pane-menu-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: none;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
 /* #endregion */

package/public/tree-highlight.js

@@ -0,0 +1,74 @@
+// Loaded by the page as a plain script and by the tests through require.
+// Highlights plain-text call trees and flows in message code blocks. The output only wraps the
+// input in spans, so a copy of the block stays byte-identical to what Claude wrote.
+const treeHighlight = (() => {
+  const TREE_TAGS = new Set(['tree', 'callstack', 'flow']);
+  const PLAIN_TAGS = new Set(['', 'text', 'txt', 'plaintext', 'diff']);
+  const TREE_LINE = /^[+-]?[ \t]*[│├└▼]/;
+  const BOX_CORNERS = /[┌┐┬┼┴┘╔╗╚╝╠╣╦╩╬]/;
+  const NAME = String.raw`[\p{L}_$@][\p{L}\p{N}_$@.:<>\-/\\]*`;
+  const LINE = new RegExp(
+    String.raw`^([+-](?=[ \t│├└▼]|$))?([ \t]*(?:[│├└─▼↓→ \t]*[│├└─▼↓→][ \t]*)?)(${NAME})?(.*)$`,
+    'su',
+  );
+  const INDENT_NODE_LINE = new RegExp(String.raw`^([ \t]*)${NAME}(\([^()]*\))?( {2,}\S.*)?$`, 'u');
+
+  function escapeText(s) {
+    return s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function span(cls, s) {
+    return s ? `<span class="${cls}">${escapeText(s)}</span>` : '';
+  }
+
+  // Two tree lines at least, and no table corners: box tables and ASCII art draw with those.
+  function looksLikeTree(text) {
+    if (BOX_CORNERS.test(text)) return false;
+    let hits = 0;
+    for (const line of text.split('\n')) {
+      if (TREE_LINE.test(line) && ++hits >= 2) return true;
+    }
+    return false;
+  }
+
+  // A call tree drawn with indentation only: every line is one name or call, with an optional
+  // note after two spaces. Prose and pseudocode have single-spaced words, so they never match.
+  function looksLikeIndentTree(text, diff) {
+    const lines = text.split('\n').filter((l) => l.trim());
+    if (lines.length < 3) return false;
+    const indents = new Set();
+    for (const raw of lines) {
+      if (diff && !/^[ +-]/.test(raw)) return false;
+      const m = (diff ? raw.slice(1) : raw).match(INDENT_NODE_LINE);
+      if (!m) return false;
+      indents.add(m[1].length);
+    }
+    return indents.size >= 2;
+  }
+
+  function wantsTree(lang, text) {
+    const tag = (lang || '').trim().toLowerCase();
+    if (TREE_TAGS.has(tag)) return true;
+    return PLAIN_TAGS.has(tag) && (looksLikeTree(text) || looksLikeIndentTree(text, tag === 'diff'));
+  }
+
+  function highlightLine(line) {
+    const [, marker = '', glyphs, node = '', rest] = line.match(LINE);
+    const body = span('hljs-punctuation', glyphs) + span('hljs-title', node) + escapeText(rest);
+    if (!marker) return body;
+    return `<span class="${marker === '+' ? 'hljs-addition' : 'hljs-deletion'}">${marker}${body}</span>`;
+  }
+
+  function highlightTree(text) {
+    return text.split('\n').map(highlightLine).join('\n');
+  }
+
+  return { wantsTree, highlightTree };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = treeHighlight;