claude-code-kanban 4.24.0 → 4.26.0

package/public/index.html

@@ -22,6 +22,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css" id="hljs-theme-light" disabled>
   <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>window.__STORAGE_NS__ = null;</script>
   <script defer src="/app.js"></script>
 </head>
 <body>
@@ -59,6 +60,20 @@
           <span class="section-header-label">Sessions</span>
           <span id="filter-summary" class="filter-summary" title=""></span>
           <span class="section-header-actions">
+            <button
+              id="zen-mode-btn"
+              class="icon-btn section-btn"
+              onclick="event.stopPropagation(); toggleZenMode()"
+              title="Zen mode: current session only (Shift+Z)"
+              aria-label="Zen mode: current session only"
+              aria-pressed="false"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="7"/>
+                <circle cx="12" cy="12" r="2"/>
+                <path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>
+              </svg>
+            </button>
             <button
               id="filter-menu-btn"
               class="icon-btn section-btn"
@@ -355,7 +370,7 @@
           </svg>
         </button>
       </div>
-      <div class="modal-body modal-zoomable">
+      <div class="modal-body">
         <dl class="shortcuts" id="help-shortcuts"></dl>
       </div>
     </div>
@@ -611,8 +626,11 @@
   <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">
-      <div id="session-picker-list" class="sp-list"></div>
-      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Esc</kbd> close</div>
+      <div class="sp-body">
+        <div id="session-picker-list" class="sp-list"></div>
+        <div id="session-picker-peek" class="sp-peek"></div>
+      </div>
+      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> open &middot; <kbd>Ctrl</kbd><kbd>Space</kbd> peek &middot; <kbd>Esc</kbd> close</div>
     </div>
   </div>
 

package/public/style.css

@@ -9,6 +9,9 @@
   --bg-surface: #16181c;
   --bg-elevated: #1e2025;
   --bg-hover: #282a30;
+  /* 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);
   --border: #363840;
   --text-primary: #f0f1f3;
   --text-secondary: #c2c4c9;
@@ -440,7 +443,8 @@ body::before {
 }
 
 /* Ember only while something is actually filtered — at rest the funnel is just chrome. */
-.icon-btn.section-btn.has-filters {
+.icon-btn.section-btn.has-filters,
+.icon-btn.section-btn.active {
   color: var(--accent-text);
 }
 
@@ -575,17 +579,15 @@ body::before {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* `.active` is the open session, `.kb-selected` the keyboard cursor. The cursor
-   must win when both land on one card, which is why it is ordered second. */
+/* `.active` is the open session, `.kb-selected` the keyboard cursor. They own different
+   properties — fill and border — so the cursor landing on the open session adds to it
+   instead of replacing how it looks. */
 .session-item.active {
-  background: var(--bg-deep);
-  border-color: var(--accent);
+  background: var(--session-active-bg);
 }
 
 .session-item.kb-selected {
-  background: var(--bg-elevated);
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 
 .session-item.stale {
@@ -633,7 +635,8 @@ body::before {
 }
 
 .session-name {
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -671,6 +674,26 @@ body::before {
   overflow: hidden;
 }
 
+/* inline-block, not inline-flex: a flex box ignores text-overflow, so a long worktree name
+   ran past the card edge instead of truncating. */
+.wt-chip {
+  display: inline-block;
+  max-width: 60%;
+  margin-left: 5px;
+  padding: 0 5px;
+  border: 1px solid var(--accent-dim);
+  border-radius: 999px;
+  background: var(--accent-dim);
+  color: var(--accent-text);
+  font-family: var(--mono);
+  font-size: 9px;
+  line-height: 14px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .session-branch {
   font-size: 10px;
   color: var(--text-secondary);
@@ -858,6 +881,68 @@ body::before {
   color: var(--text-secondary);
 }
 
+/* Zen view: the sidebar holds one card, so the usage detail that normally lives behind the
+   info modal gets rendered underneath it. */
+.zen-panel {
+  margin-top: 10px;
+  /* No bottom padding: the linked-docs section that always closes the panel carries its own. */
+  padding: 10px 10px 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.zen-panel .detail-context {
+  margin-bottom: 0;
+}
+
+.zen-panel .detail-context-stats {
+  gap: 3px 10px;
+}
+
+.zen-panel .linked-docs-section {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.zen-panel .artifacts-section {
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.zen-scratchpad {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+}
+
+.zen-scratchpad-label {
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.zen-scratchpad-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+
+.zen-panel:hover .row-actions {
+  opacity: 1;
+}
+
 .session-time {
   font-size: 11px;
   font-weight: 450;
@@ -2264,7 +2349,8 @@ body::before {
   flex-direction: column;
 }
 #team-modal .modal-body,
-#agent-modal .modal-body {
+#agent-modal .modal-body,
+.modal-help .modal-body {
   flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
@@ -2349,7 +2435,6 @@ body::before {
   padding: 10px 14px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
-  border-left: 3px solid var(--warning);
   border-radius: 8px;
 }
 .info-goal-head {
@@ -3818,7 +3903,8 @@ body::before {
   color: var(--text-primary);
 }
 
-.linked-doc-list {
+.linked-doc-list,
+.artifact-list {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -3827,14 +3913,16 @@ body::before {
   gap: 4px;
 }
 
-.linked-doc-item {
+.linked-doc-item,
+.artifact-item {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
 }
 
-.linked-doc-link {
+.linked-doc-link,
+.artifact-link {
   color: var(--accent-text);
   text-decoration: underline;
   text-decoration-style: dotted;
@@ -3855,13 +3943,15 @@ body::before {
 /* Rides on the shared .row-actions group; only the reveal trigger differs — per row
    here, per grid in the session info. margin-left:auto pins the group to the same
    right edge however long the names in between are. */
-.linked-doc-actions {
+.linked-doc-actions,
+.artifact-actions {
   margin-left: auto;
   align-self: center;
   flex-shrink: 0;
 }
 
-.linked-doc-item:hover .linked-doc-actions {
+.linked-doc-item:hover .linked-doc-actions,
+.artifact-item:hover .artifact-actions {
   opacity: 1;
 }
 
@@ -3885,7 +3975,55 @@ body::before {
   text-decoration-style: dashed;
 }
 
-.linked-docs-empty {
+/* A section of the session panel: linked documents, artifacts. */
+.panel-section {
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+
+/* Artifacts are read out of the transcript, so the section renders before the
+   list arrives and stays in the DOM as the patch target when there is none. */
+.artifacts-section:empty {
+  display: none;
+}
+
+.panel-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.panel-section-header svg {
+  width: 12px;
+  height: 12px;
+}
+
+.panel-section-count {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 0 6px;
+  font-size: 10px;
+  color: var(--text-secondary);
+}
+
+/* The artifact title is a URL away from the reader, so it truncates where a file
+   name, which the linked-doc row shows in full, does not. */
+.artifact-link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.linked-docs-empty,
+.zen-panel-empty {
   color: var(--text-muted);
   font-size: 11px;
   font-style: italic;
@@ -4122,6 +4260,7 @@ body.light {
   --bg-surface: #efede9;
   --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
+  --session-active-bg: var(--bg-elevated);
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
   --text-secondary: #444444;
@@ -4519,8 +4658,21 @@ body.light .msg-assistant .msg-text {
   max-width: 440px;
 }
 
+/* Reference card, not reading material: it stays out of the modal zoom, uses the app's
+   small type, and scrolls its body (rule shared with #team-modal) instead of growing past
+   the viewport cap. */
 .modal-help {
-  max-width: 960px;
+  max-width: 900px;
+  padding: 16px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+}
+.modal-help .modal-header {
+  margin-bottom: 8px;
+}
+.modal-help .modal-title {
+  font-size: 14px;
 }
 
 /* One shared grid for both halves (key | label | spacer | key | label): each key
@@ -4844,13 +4996,59 @@ select.form-input option:checked {
   font-size: 13px;
 }
 
+.modal.session-picker.peeking {
+  max-width: 1240px;
+}
+
+.sp-body {
+  display: flex;
+  gap: 10px;
+  min-height: 0;
+}
+
+.sp-body > * {
+  min-width: 0;
+}
+
 .sp-list {
+  flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
+.sp-peek {
+  flex: 0 0 42%;
+  overflow-y: auto;
+  border-left: 1px solid var(--border);
+  padding-left: 10px;
+}
+
+.modal.session-picker:not(.peeking) .sp-peek {
+  display: none;
+}
+
+.sp-peek-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Row clicks open the live panel's detail modal by index, which means nothing
+   for a peeked session. The renderer's readOnly mode already drops the buttons. */
+.sp-peek-items {
+  pointer-events: none;
+}
+
 .sp-row {
   display: flex;
   align-items: center;
@@ -5391,6 +5589,7 @@ select.form-input option:checked {
     --bg-surface: #efede9;
     --bg-elevated: #fbfaf9;
     --bg-hover: #d2d0cc;
+    --session-active-bg: var(--bg-elevated);
     --border: #cfcbc4;
     --text-primary: #0a0a0a;
     --text-secondary: #444444;