claude-code-kanban 6.1.1 → 7.0.0

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;
 }
@@ -4407,13 +4831,19 @@ body.booting .boot-splash {
 }
 .agent-log-title {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 6px;
 }
 .agent-log-id {
   font-size: 11px;
   color: var(--text-tertiary);
 }
+.agent-log-model {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
 .msg-agent-log-btn {
   flex-shrink: 0;
   margin-left: 0;
@@ -4636,7 +5066,8 @@ body.booting .boot-splash {
   border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
   border-radius: 8px;
   white-space: nowrap;
-  min-width: 0;
+  flex-shrink: 0;
+  min-width: 180px;
   overflow: hidden;
   transition:
     opacity 0.3s,
@@ -4675,21 +5106,33 @@ body.booting .boot-splash {
 .agent-card.fading {
   opacity: 0.4;
 }
-.agent-type-row {
+.agent-task {
+  max-width: 240px;
+  padding-right: 14px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agent-ident-row {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 5px;
   min-width: 0;
+  max-width: 240px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+.agent-ident-sep {
+  color: var(--text-muted);
+  flex-shrink: 0;
 }
 .agent-type-ns {
-  font-size: 11px;
   color: var(--text-muted);
-  font-weight: 400;
 }
 .agent-type-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4697,8 +5140,8 @@ body.booting .boot-splash {
   font-size: 9px;
   padding: 2px 6px;
   border-radius: 3px;
-  margin-left: 6px;
-  vertical-align: middle;
+  margin-left: 2px;
+  flex-shrink: 0;
 }
 .agent-status-row {
   display: flex;
@@ -4728,30 +5171,13 @@ body.booting .boot-splash {
   color: var(--text-primary);
 }
 .agent-status {
-  font-size: 11px;
-  color: var(--text-tertiary);
+  font-size: 10px;
+  color: var(--text-muted);
 }
 .agent-card-model {
-  margin-left: auto;
-  padding: 1px 6px;
-  font-family: var(--font-mono, monospace);
-  font-size: 9.5px;
-  line-height: 1.4;
-  color: var(--text-tertiary);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 45%;
-}
-.agent-message {
-  font-size: 11px;
-  color: var(--text-muted);
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
 .agent-dismiss-btn {
@@ -4918,7 +5344,7 @@ body.booting .boot-splash {
   white-space: nowrap;
 }
 
-.scratch-files-more {
+.list-more {
   margin: 6px 0 0;
   font-size: 11px;
 }
@@ -5672,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;
@@ -7973,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;
@@ -7989,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;
@@ -7997,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;
@@ -8014,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;
 }
@@ -8022,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;