claude-code-kanban 4.14.1 → 4.17.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>
@@ -291,7 +316,7 @@
     </div>
   </div>
 
-  <!-- Markdown Preview Modal -->
+  <!-- File Preview Modal (markdown rendered inline, HTML in a sandboxed iframe) -->
   <div id="preview-modal" class="modal-overlay" style="z-index:10002;" onclick="closePreviewModal()">
     <div class="modal preview-modal-dialog" onclick="event.stopPropagation()">
       <div class="modal-header">
@@ -311,9 +336,9 @@
           </button>
         </div>
       </div>
-      <div class="modal-body" style="flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;">
-        <div id="preview-modal-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="preview-modal-meta" style="margin-top: 12px; font-size: 11px; color: var(--text-muted); flex-shrink: 0;"></div>
+      <div class="modal-body">
+        <div id="preview-modal-body" class="rendered-md"></div>
+        <div id="preview-modal-meta"></div>
       </div>
     </div>
   </div>

package/public/style.css

@@ -31,6 +31,10 @@
   --plan-dim: rgba(134, 168, 134, 0.18);
   --mono: 'IBM Plex Mono', monospace;
   --serif: 'Playfair Display', serif;
+  --card-gap: 7px;
+  /* the name's supporting lines read as one unit with it, so they sit tighter
+     than the gap separating the card's independent rows */
+  --card-gap-tight: 3px;
   /* aliases: many rules reference --font-mono/--font-serif; keep them on-brand */
   --font-mono: var(--mono);
   --font-serif: var(--serif);
@@ -89,7 +93,7 @@ body::before {
 
 /* #region SIDEBAR */
 .sidebar {
-  width: var(--sidebar-width, 300px);
+  width: var(--sidebar-width, 310px);
   background: var(--bg-surface);
   border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
   box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
@@ -349,10 +353,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;
@@ -360,16 +365,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 {
@@ -395,6 +479,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);
@@ -451,11 +546,11 @@ body::before {
 .session-item {
   display: block;
   width: 100%;
-  padding: 12px 14px;
-  margin-bottom: 4px;
+  padding: 13px 15px;
+  margin-bottom: 6px;
   background: transparent;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 9px;
   text-align: left;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -467,7 +562,7 @@ body::before {
 }
 
 .session-name {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -501,7 +596,7 @@ body::before {
   font-size: 12px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -509,7 +604,7 @@ body::before {
 .session-branch {
   font-size: 10px;
   color: var(--text-secondary);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   display: block;
   font-family: var(--mono);
   white-space: nowrap;
@@ -520,7 +615,7 @@ body::before {
 .session-plan {
   font-size: 10px;
   color: var(--plan);
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -528,7 +623,7 @@ body::before {
 
 .session-goal {
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: var(--card-gap-tight);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -552,8 +647,9 @@ body::before {
 .session-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
+  gap: 9px;
+  margin-top: var(--card-gap);
+  line-height: 1;
 }
 
 .progress-bar {
@@ -579,7 +675,7 @@ body::before {
 
 .context-bar {
   display: none;
-  margin-top: 6px;
+  margin-top: var(--card-gap);
 }
 .has-context .context-bar {
   display: block;
@@ -682,7 +778,7 @@ body::before {
   font-size: 11px;
   font-weight: 450;
   color: var(--text-tertiary);
-  margin-top: 6px;
+  margin-top: var(--card-gap);
 }
 
 .session-latest-msg {
@@ -947,8 +1043,11 @@ body::before {
   background: var(--bg-hover);
   color: var(--text-primary);
 }
+/* Highlighted with the row's *own* theme accent rather than the active theme's, so the selected
+   row previews the theme it names. --sw-accent comes from the theme-swatch-<id> class on the row. */
 .theme-menu-item.on {
-  color: var(--accent-text);
+  color: var(--sw-accent, var(--accent-text));
+  background: color-mix(in srgb, var(--sw-accent, var(--accent-text)) 16%, transparent);
 }
 /* 3-dot palette preview: surface, accent, ink (colors from themes.css vars) */
 .theme-swatch {
@@ -1573,7 +1672,7 @@ body::before {
 .session-indicators {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 5px;
   flex-shrink: 0;
 }
 
@@ -1598,13 +1697,18 @@ body::before {
   flex-shrink: 0;
 }
 
-.team-info-btn {
-  width: 24px;
-  height: 24px;
+/* Every clickable session-card icon shares one box so they blend into a single row;
+   resizing the row means editing this rule, not four. Per-icon rules below override
+   only what actually differs (color, glyph size). */
+.team-info-btn,
+.plan-indicator,
+.loop-badge,
+.workflow-badge {
+  width: 18px;
+  height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -1614,76 +1718,39 @@ body::before {
   transition: all 0.15s ease;
 }
 
-.team-info-btn:hover {
+.team-info-btn:hover,
+.loop-badge:hover,
+.workflow-badge:hover {
   background: var(--bg-hover);
   border-color: var(--border);
   color: var(--text-secondary);
 }
 
+/* The boxes are wider than their 12px glyphs, so the leading icon would sit inset
+   from the card text above it. Cancel that inset — but only when a boxed icon leads;
+   the pill badges and .team-badge have a different inset and must not be shifted. */
+.session-indicators > .team-info-btn:first-child,
+.session-indicators > .plan-indicator:first-child,
+.session-indicators > .loop-badge:first-child,
+.session-indicators > .workflow-badge:first-child {
+  margin-left: -3px;
+}
+
+.team-info-btn {
+  font-size: 11px;
+}
+
 .plan-indicator {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   background: var(--plan-dim);
-  border: 1px solid transparent;
-  border-radius: 4px;
   color: var(--plan);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
 }
 
 .plan-indicator:hover {
-  background: var(--plan-dim);
   border-color: var(--plan);
 }
 
-/* Match .team-info-btn so the wakeups clock blends with the other session-card icons. */
-.loop-badge {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-}
-
-.loop-badge:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
-
 /* #region WORKFLOW */
-/* Match .team-info-btn so the gear blends with the other session-card icons. */
-.workflow-badge {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--text-muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s ease;
-}
-
-.workflow-badge:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
+/* .workflow-badge's box is defined with the other session-card icons in TEAM_BADGE. */
 
 .workflow-row {
   border: 1px solid var(--border);
@@ -3372,6 +3439,113 @@ body::before {
   min-width: 0;
 }
 
+/* margin-left:auto pins every × to the same right edge, so they read as a column
+   however long the names in between are. */
+.linked-doc-remove {
+  margin-left: auto;
+  align-self: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 3px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.45;
+  transition: all 0.15s ease;
+}
+
+.linked-doc-item:hover .linked-doc-remove {
+  opacity: 1;
+}
+
+.linked-doc-remove:hover {
+  background: var(--danger-dim);
+  color: var(--danger);
+}
+
+/* A linked file the previewer can't render opens in the editor — the dashed
+   underline keeps that different destination visible before the click. */
+.linked-doc-item.is-editor .linked-doc-link {
+  color: var(--text-secondary);
+  text-decoration-style: dashed;
+}
+
+.linked-docs-empty {
+  color: var(--text-muted);
+  font-size: 11px;
+  font-style: italic;
+}
+
+.linked-docs-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.linked-docs-add-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.linked-doc-editor-slot:not(:empty) {
+  margin-bottom: 8px;
+}
+
+.linked-doc-input {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-family: var(--mono);
+  font-size: 12px;
+  box-shadow: 0 0 0 2px var(--accent-dim);
+  outline: none;
+}
+
+.linked-doc-hint {
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Present but empty until a path fails to resolve. */
+.linked-doc-error:empty {
+  display: none;
+}
+
+.linked-doc-error {
+  color: var(--danger);
+  font-size: 11px;
+  margin-top: 4px;
+}
+
 /* #endregion */
 
 /* #region PERMISSION_PENDING */
@@ -3592,6 +3766,62 @@ body.light .msg-assistant .msg-text {
   max-height: 90vh;
 }
 
+.preview-modal-dialog .modal-body {
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#preview-modal-body {
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-y: auto;
+  flex: 0 1 auto;
+  min-height: 0;
+  padding-right: 8px;
+}
+
+#preview-modal-meta {
+  margin-top: 12px;
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* Rendered HTML pages need far more room than a markdown doc. */
+.modal.preview-modal-dialog.preview-html {
+  width: 96vw;
+  max-width: 96vw;
+  height: 92vh;
+  max-height: 92vh;
+}
+
+/* Keeps the fullscreen button meaningful — the generic .fullscreen rule is smaller than this. */
+.modal.preview-modal-dialog.preview-html.fullscreen {
+  width: 98vw;
+  max-width: 98vw;
+  height: 98vh;
+  max-height: 98vh;
+}
+
+.preview-html .modal-body,
+.preview-html #preview-modal-body {
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding-right: 0;
+}
+
+.preview-html-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 6px;
+  /* Pages authored for a light page default would be unreadable on the dark theme. */
+  background: #fff;
+}
+
 .preview-fm {
   margin: 0 0 14px;
   border: 1px solid var(--border);