claude-code-kanban 4.16.0 → 4.18.0

package/public/index.html

@@ -56,10 +56,58 @@
       <!-- Tasks -->
       <div class="sidebar-section flex-1">
         <div class="section-header" onclick="toggleSection('sessions-filters', 'sessions-chevron')" style="cursor: pointer;">
-          <span>Sessions</span>
-          <svg id="sessions-chevron" class="collapse-chevron" viewBox="0 0 24 24">
-            <path d="M6 9l6 6 6-6"/>
-          </svg>
+          <span class="section-header-label">Sessions</span>
+          <span id="filter-summary" class="filter-summary" title=""></span>
+          <span class="section-header-actions">
+            <button
+              id="filter-menu-btn"
+              class="icon-btn section-btn"
+              onclick="toggleFilterMenu(event)"
+              title="Filters"
+              aria-label="Filters"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 4H4l6.5 8v6l3 2v-8L20 4z"/>
+              </svg>
+            </button>
+            <button
+              class="icon-btn section-btn"
+              onclick="event.stopPropagation(); resetState()"
+              title="Reset filters and clear selection"
+              aria-label="Reset filters and clear selection"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 2v6h6"/>
+                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L3 8"/>
+              </svg>
+            </button>
+            <svg id="sessions-chevron" class="collapse-chevron" viewBox="0 0 24 24">
+              <path d="M6 9l6 6 6-6"/>
+            </svg>
+          </span>
+          <div id="filter-menu" class="filter-menu" onclick="event.stopPropagation()">
+            <div class="filter-row">
+              <select id="project-filter" class="filter-dropdown" onchange="filterByProject(this.value)" aria-label="Filter by project">
+                <option value="">All Projects</option>
+              </select>
+            </div>
+            <div class="filter-row">
+              <select id="session-filter" class="filter-dropdown" onchange="filterBySessions(this.value)" aria-label="Filter by session status">
+                <option value="all">All Sessions</option>
+                <option value="active">Active Only</option>
+              </select>
+            </div>
+            <div class="filter-row">
+              <select id="session-limit" class="filter-dropdown" onchange="changeSessionLimit(this.value)" aria-label="Number of sessions to show">
+                <option value="10">Show 10</option>
+                <option value="20">Show 20</option>
+                <option value="50">Show 50</option>
+                <option value="all">Show All</option>
+              </select>
+            </div>
+          </div>
         </div>
         <div id="sessions-filters" class="collapsible-section">
           <div class="search-container">
@@ -76,29 +124,6 @@
               </svg>
             </button>
           </div>
-          <div class="filter-row">
-            <select id="project-filter" class="filter-dropdown" onchange="filterByProject(this.value)" aria-label="Filter by project">
-              <option value="">All Projects</option>
-            </select>
-            <select id="session-filter" class="filter-dropdown" onchange="filterBySessions(this.value)" aria-label="Filter by session status">
-              <option value="all">All Sessions</option>
-              <option value="active">Active Only</option>
-            </select>
-          </div>
-          <div class="filter-row">
-            <select id="session-limit" class="filter-dropdown" onchange="changeSessionLimit(this.value)" aria-label="Number of sessions to show">
-              <option value="10">Show 10</option>
-              <option value="20">Show 20</option>
-              <option value="50">Show 50</option>
-              <option value="all">Show All</option>
-            </select>
-            <button class="icon-btn reset-btn" onclick="resetState()" title="Reset all filters" aria-label="Reset all filters">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
-                <path d="M3 12a9 9 0 1 1 9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
-                <path d="M3 22v-6h6"/>
-              </svg>
-            </button>
-          </div>
         </div>
         <div id="sessions-list" class="sessions-list"></div>
       </div>
@@ -276,7 +301,7 @@
           <button class="icon-btn" aria-label="Open in editor" title="Open in editor" onclick="openMsgInEditor()">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
           </button>
-          <button id="msg-detail-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('msg-detail-modal')">
+          <button id="msg-detail-modal-fullscreen-btn" class="icon-btn" aria-label="Toggle fullscreen" title="Toggle fullscreen" onclick="toggleModalFullscreen('msg-detail-modal')">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
           </button>
           <button class="modal-close" aria-label="Close" onclick="closeMsgDetailModal()">
@@ -285,7 +310,7 @@
         </div>
       </div>
       <div class="modal-body" style="flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
-        <div id="msg-detail-body" class="rendered-md" style="word-break: break-word; font-size: 13px; line-height: 1.6; overflow-y: auto; flex: 0 1 auto; min-height: 0; padding-right: 8px;"></div>
+        <div id="msg-detail-body" class="rendered-md modal-zoomable"></div>
         <div id="msg-detail-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
       </div>
     </div>
@@ -312,7 +337,7 @@
         </div>
       </div>
       <div class="modal-body">
-        <div id="preview-modal-body" class="rendered-md"></div>
+        <div id="preview-modal-body" class="rendered-md modal-zoomable"></div>
         <div id="preview-modal-meta"></div>
       </div>
     </div>
@@ -329,7 +354,7 @@
           </svg>
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body modal-zoomable">
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;">
           <div style="display: grid; gap: 16px; align-content: start;">
             <div>
@@ -434,6 +459,14 @@
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+M</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Open last message detail</td>
               </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl++</kbd> / <kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+-</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Modal text size</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Ctrl+0</kbd></td>
+                <td style="padding: 4px 0; color: var(--text-primary);">Reset text size</td>
+              </tr>
               <tr>
                 <td style="padding: 4px 0; color: var(--text-secondary);"><kbd style="background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-family: monospace;">Shift+S</kbd></td>
                 <td style="padding: 4px 0; color: var(--text-primary);">Storage manager</td>
@@ -502,7 +535,7 @@
           </button>
         </div>
       </div>
-      <div id="team-modal-body" class="modal-body"></div>
+      <div id="team-modal-body" class="modal-body modal-zoomable"></div>
       <div class="modal-footer">
         <button id="session-info-dismiss-btn" class="btn btn-secondary" onclick="toggleDismissSession(_infoModalSessionId); closeTeamModal()">Dismiss</button>
         <button class="btn btn-secondary" onclick="showToolStatsModal(_infoModalSessionId)" title="Tool invocation statistics">Tool Stats</button>
@@ -522,7 +555,7 @@
           </svg>
         </button>
       </div>
-      <div id="tool-stats-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div id="tool-stats-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeToolStatsModal()">Close</button>
       </div>
@@ -551,7 +584,7 @@
           </button>
         </div>
       </div>
-      <div id="plan-modal-body" class="modal-body detail-desc rendered-md" style="overflow-y: auto; flex: 0 1 auto; min-height: 0;"></div>
+      <div id="plan-modal-body" class="modal-body detail-desc rendered-md modal-zoomable"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closePlanModal()">Close</button>
       </div>
@@ -597,7 +630,7 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
         </button>
       </div>
-      <div id="loop-modal-body" class="modal-body" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
+      <div id="loop-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:0 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeLoopModal()">Close</button>
       </div>
@@ -621,7 +654,7 @@
           </button>
         </div>
       </div>
-      <div id="workflow-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div id="workflow-modal-body" class="modal-body modal-zoomable" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
       <div class="modal-footer">
         <button class="btn btn-secondary" onclick="closeWorkflowModal()">Close</button>
       </div>
@@ -652,7 +685,7 @@
           </button>
         </div>
       </div>
-      <div id="agent-modal-body" class="modal-body" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
+      <div id="agent-modal-body" class="modal-body modal-zoomable" style="overflow-y: auto; overflow-x: hidden; flex: 0 1 auto; min-height: 0;"></div>
       <div class="modal-footer">
         <button id="agent-modal-dismiss-btn" class="btn agent-dismiss-btn" style="display:none" onclick="dismissAgent(currentAgentModalId);closeAgentModal()">Dismiss</button>
         <button class="btn btn-secondary" onclick="closeAgentModal()">Close</button>
@@ -695,7 +728,7 @@
         <button class="storage-tab" data-tab="scratchpads" onclick="switchStorageTab('scratchpads')">Scratchpads</button>
         <button class="storage-tab" data-tab="linked-docs" onclick="switchStorageTab('linked-docs')">Linked Docs</button>
       </div>
-      <div class="modal-body" id="storage-modal-body" style="overflow-y:auto;min-height:200px;max-height:60vh;padding-top:16px;padding-right:8px;"></div>
+      <div class="modal-body modal-zoomable" id="storage-modal-body"></div>
       <div class="modal-footer">
         <button id="storage-cleanup-btn" class="btn btn-secondary" onclick="cleanupOrphanedStorage()">Clean Orphaned</button>
         <button class="btn btn-secondary" onclick="closeStorageManager()">Close</button>

package/public/style.css

@@ -38,6 +38,8 @@
   /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
   --font-mono: var(--mono);
   --font-serif: var(--serif);
+  /* reading-surface scale for the message-detail and preview modals (Ctrl +/-/0) */
+  --modal-zoom: 1;
 }
 
 * {
@@ -353,10 +355,11 @@ body::before {
 }
 
 .section-header {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px 10px;
+  gap: 8px;
+  padding: 14px 16px 10px 20px;
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
@@ -364,16 +367,95 @@ body::before {
   color: var(--text-muted);
 }
 
+.section-header-label {
+  flex: 0 0 auto;
+}
+
+/* Non-default filters, spelled out in the header so folding them into the popover
+   never hides *that* the list is filtered. Empty (and invisible) at defaults. */
+.filter-summary {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  color: var(--accent-text);
+}
+
+.section-header-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+/* Quiet at rest: no box around a header glyph. The hairline arrives on hover.
+   Compounded with .icon-btn because that rule is declared later in this file and would
+   otherwise win on size, border, and colour. */
+.icon-btn.section-btn {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: none;
+  border-color: transparent;
+  color: var(--text-muted);
+}
+
+.icon-btn.section-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text-primary);
+}
+
+.icon-btn.section-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-dim);
+}
+
+.icon-btn.section-btn svg {
+  width: 15px;
+  height: 15px;
+  stroke-width: 1.75;
+}
+
+/* Ember only while something is actually filtered — at rest the funnel is just chrome. */
+.icon-btn.section-btn.has-filters {
+  color: var(--accent-text);
+}
+
+.filter-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% - 2px);
+  right: 16px;
+  left: 16px;
+  z-index: 100;
+  padding: 8px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow:
+    0 16px 44px rgba(0, 0, 0, 0.38),
+    0 4px 12px rgba(0, 0, 0, 0.2);
+  cursor: default;
+}
+
+.filter-menu.open {
+  display: block;
+}
+
 .filter-row {
   display: flex;
-  gap: 6px;
-  padding: 0 16px 10px;
+  gap: 5px;
 }
 
-.reset-btn {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
+.filter-row + .filter-row {
+  margin-top: 5px;
 }
 
 .filter-dropdown {
@@ -399,6 +481,17 @@ body::before {
   border-color: var(--border);
 }
 
+/* A filter holding a non-default value tints toward the ember, so it reads as "active"
+   before you read the value. Border and text only — the fill never floods. */
+.filter-dropdown.non-default {
+  color: var(--accent-text);
+  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
+}
+
+.filter-dropdown.non-default:hover {
+  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
 .filter-dropdown option {
   background: var(--bg-surface);
   color: var(--text-primary);
@@ -3638,10 +3731,12 @@ body.light .msg-assistant .msg-text {
   overflow-y: auto;
 }
 
+/* Height is a cap, not a floor — a two-line message should not sit in a 92vh box.
+   The HTML preview keeps its explicit height below: its iframe is `height: 100%`
+   and needs a resolvable parent height. */
 .modal.fullscreen {
   width: 80vw;
   max-width: 80vw;
-  height: 92vh;
   max-height: 92vh;
 }
 
@@ -3682,7 +3777,9 @@ body.light .msg-assistant .msg-text {
   overflow: hidden;
 }
 
-#preview-modal-body {
+#msg-detail-body,
+#preview-modal-body,
+#plan-modal-body {
   word-break: break-word;
   font-size: 13px;
   line-height: 1.6;
@@ -3692,6 +3789,30 @@ body.light .msg-assistant .msg-text {
   padding-right: 8px;
 }
 
+/* Same reading size as the other modal bodies — `.detail-desc` is really the
+   task-panel inline editor's style, and its 14px/1.7 is wrong here. */
+.agent-tab-panel .detail-desc {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* One reading scale for every modal (Ctrl +/-/0). `zoom` rather than font-size
+   because the bodies mix px, rem, inline sizes from tool rendering and an iframe.
+   It hangs on the inner scrolling body — never on `.modal`, whose own vw/vh
+   sizing would scale with it and push the dialog off-screen. */
+.modal-zoomable {
+  zoom: var(--modal-zoom, 1);
+}
+
+/* Height is left to the flex column under `.storage-modal`'s 85vh cap — a `vh`
+   cap here would be multiplied by the zoom above. */
+#storage-modal-body {
+  overflow-y: auto;
+  min-height: 200px;
+  padding-top: 16px;
+  padding-right: 8px;
+}
+
 #preview-modal-meta {
   margin-top: 12px;
   font-size: 11px;