claude-code-kanban 4.16.0 → 4.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -1,13 +1,17 @@
 //#region STATE
+// The baseline "nothing is filtered" state: what resetState() returns to, what updateUrl() omits
+// from the query string, and what decides whether a control tints ember in the header summary.
+const FILTER_DEFAULTS = { project: '__recent__', session: 'active', limit: '20' };
+
 let sessions = [];
 let currentSessionId = null;
 let currentTasks = [];
 let viewMode = 'session';
-let sessionFilter = 'active';
+let sessionFilter = FILTER_DEFAULTS.session;
 // Only meaningful while sessionFilter === 'active' (filterBySessions clears it otherwise)
 const activityFilter = new Set(); // kinds: 'waiting' | 'active'
-let sessionLimit = '20';
-let filterProject = '__recent__'; // null = all, '__recent__' = last 24h, or project path
+let sessionLimit = FILTER_DEFAULTS.limit;
+let filterProject = FILTER_DEFAULTS.project; // null = all, '__recent__' = last 24h, or project path
 let recentProjects = new Set();
 let projectsCacheDirty = true;
 const collapsedProjectGroups = new Set();
@@ -75,9 +79,9 @@ function updateUrl() {
   if (viewMode === 'all') params.set('view', 'all');
   if (viewMode === 'project' && currentProjectPath) params.set('projectView', btoa(currentProjectPath));
   if (currentSessionId) params.set('session', currentSessionId);
-  if (sessionFilter !== 'active') params.set('filter', sessionFilter);
-  if (sessionLimit !== '20') params.set('limit', sessionLimit);
-  if (filterProject && filterProject !== '__recent__') params.set('project', filterProject);
+  if (sessionFilter !== FILTER_DEFAULTS.session) params.set('filter', sessionFilter);
+  if (sessionLimit !== FILTER_DEFAULTS.limit) params.set('limit', sessionLimit);
+  if (filterProject && filterProject !== FILTER_DEFAULTS.project) params.set('project', filterProject);
   if (ownerFilter) params.set('owner', ownerFilter);
   if (searchQuery) params.set('search', searchQuery);
   if (messagePanelOpen) params.set('messages', '1');
@@ -94,6 +98,9 @@ function persistLastView() {
       view: viewMode,
       session: currentSessionId,
       projectPath: viewMode === 'project' ? currentProjectPath : null,
+      // The project filter also lives in the URL, but the hub recreates each iframe at the app's
+      // base URL on reload, so the query string alone doesn't survive a hub refresh.
+      project: filterProject,
     };
     localStorage.setItem(LAST_VIEW_KEY, JSON.stringify(data));
   } catch (_) {}
@@ -112,9 +119,9 @@ function resetState() {
   try {
     localStorage.removeItem(LAST_VIEW_KEY);
   } catch (_) {}
-  sessionFilter = 'active';
-  sessionLimit = '20';
-  filterProject = '__recent__';
+  sessionFilter = FILTER_DEFAULTS.session;
+  sessionLimit = FILTER_DEFAULTS.limit;
+  filterProject = FILTER_DEFAULTS.project;
   ownerFilter = '';
   searchQuery = '';
   viewMode = 'all';
@@ -126,7 +133,7 @@ function resetState() {
   const searchInput = document.getElementById('search-input');
   if (searchInput) searchInput.value = '';
   document.getElementById('search-clear-btn')?.classList.remove('visible');
-  loadPreferences();
+  renderFilterState();
   fetchSessions().then(() => showAllTasks());
 }
 
@@ -5819,10 +5826,95 @@ function getOwnerColor(name) {
 //#endregion
 
 //#region FILTERS
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function toggleFilterMenu(e) {
+  // Stops the click reaching .section-header (which would collapse the section) *and*
+  // document (which would immediately close the menu we are opening).
+  e?.stopPropagation();
+  if (closeFilterMenu()) return;
+  document.getElementById('filter-menu').classList.add('open');
+  document.getElementById('filter-menu-btn')?.setAttribute('aria-expanded', 'true');
+  renderFilterState();
+  document.addEventListener('click', closeFilterMenu, { once: true });
+  // Capture phase: the global keydown handler bails out on SELECT targets, and every
+  // focusable thing in this popover is a select — Escape would never reach it otherwise.
+  document.addEventListener('keydown', filterMenuKeydown, true);
+  document.getElementById('project-filter')?.focus();
+}
+
+function filterMenuKeydown(e) {
+  if (e.key !== 'Escape') return;
+  e.stopPropagation();
+  if (closeFilterMenu()) document.getElementById('filter-menu-btn')?.focus();
+}
+
+function closeFilterMenu() {
+  const menu = document.getElementById('filter-menu');
+  if (!menu?.classList.contains('open')) return false;
+  menu.classList.remove('open');
+  document.getElementById('filter-menu-btn')?.setAttribute('aria-expanded', 'false');
+  document.removeEventListener('keydown', filterMenuKeydown, true);
+  return true;
+}
+
+// One row per filter control: the select it mirrors, its value, whether it differs from the
+// default, and two label forms — terse tokens for the header strip (which has ~15 characters
+// before the sidebar's width ellipsises it) and long form for its tooltip.
+const FILTERS = [
+  {
+    id: 'project-filter',
+    value: () => filterProject ?? '',
+    active: () => filterProject !== FILTER_DEFAULTS.project,
+    short: () => (filterProject ? filterProject.split(/[/\\]/).pop() : 'all proj'),
+    long: () => (filterProject ? `project ${filterProject}` : 'all projects'),
+  },
+  {
+    id: 'session-filter',
+    value: () => sessionFilter,
+    active: () => sessionFilter !== FILTER_DEFAULTS.session,
+    short: () => 'inactive',
+    long: () => 'including inactive sessions',
+  },
+  {
+    id: 'session-limit',
+    value: () => sessionLimit,
+    active: () => sessionLimit !== FILTER_DEFAULTS.limit,
+    short: () => (sessionLimit === 'all' ? 'n=∞' : `n=${sessionLimit}`),
+    long: () => (sessionLimit === 'all' ? 'no session limit' : `showing ${sessionLimit}`),
+  },
+];
+
+// Keeps the header (summary + funnel tint) and the popover's selects in sync with state.
+// Safe to call on every filter change — it only touches classes, values, and text.
+function renderFilterState() {
+  const short = [];
+  const long = [];
+  for (const f of FILTERS) {
+    const active = f.active();
+    if (active) {
+      short.push(f.short());
+      long.push(f.long());
+    }
+    const el = document.getElementById(f.id);
+    if (!el) continue;
+    const value = String(f.value());
+    if (el.value !== value) el.value = value;
+    el.classList.toggle('non-default', active);
+  }
+
+  const summary = document.getElementById('filter-summary');
+  if (summary) {
+    summary.textContent = short.join(' · ');
+    summary.title = long.length ? `Active filters: ${long.join(', ')}` : '';
+  }
+  document.getElementById('filter-menu-btn')?.classList.toggle('has-filters', short.length > 0);
+}
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function filterBySessions(value) {
   sessionFilter = value;
   if (value !== 'active') activityFilter.clear();
+  renderFilterState();
   updateUrl();
   // Instant feedback from cached data, then refetch — the cached list was fetched
   // with the previous filter's server params (e.g. filter=active), so "All Sessions"
@@ -5835,6 +5927,7 @@ function filterBySessions(value) {
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
 function changeSessionLimit(value) {
   sessionLimit = value;
+  renderFilterState();
   updateUrl();
   fetchSessions();
 }
@@ -5848,6 +5941,31 @@ function matchesProjectFilter(project) {
 //#endregion
 
 //#region EVENT_DELEGATION
+// Selecting text inside a dialog and releasing past its edge puts the mouseup on the
+// backdrop, so the synthesized click targets the overlay and the `onclick="close…()"`
+// on every .modal-overlay would dismiss it. Only a press that *started* on the
+// backdrop counts as a dismissal.
+let _overlayPressTarget = null;
+document.addEventListener(
+  'mousedown',
+  (e) => {
+    // Only an overlay is ever compared below, so don't hold a reference to any other node —
+    // that would keep the last-pressed element (and a detached subtree, after a re-render)
+    // alive until the next mousedown anywhere.
+    _overlayPressTarget = e.target.classList?.contains('modal-overlay') ? e.target : null;
+  },
+  true,
+);
+document.addEventListener(
+  'click',
+  (e) => {
+    if (!e.target.classList?.contains('modal-overlay')) return;
+    if (_overlayPressTarget === e.target) return;
+    e.stopPropagation();
+  },
+  true,
+);
+
 document.addEventListener('click', (e) => {
   const pathToggle = e.target.closest('[data-group-action="toggle-path"]');
   if (pathToggle) {
@@ -5903,6 +6021,7 @@ document.addEventListener('click', (e) => {
 // Used in HTML; also called by the hub project shim, so no biome suppression is needed.
 function filterByProject(project) {
   filterProject = project || null;
+  renderFilterState();
   updateUrl();
   fetchSessions(false);
   showAllTasks();
@@ -5964,6 +6083,8 @@ function renderProjectDropdown(dropdown, projects) {
         return `<option value="${escapeHtml(p.path)}"${selected} title="${escapeHtml(p.path)}">${escapeHtml(name)}</option>`;
       })
       .join('');
+  // The option list just changed under the select — re-assert tint and header summary.
+  renderFilterState();
 }
 
 function updateThemeColor(isLight) {
@@ -6187,14 +6308,6 @@ function loadPanelWidths() {
 
 //#endregion
 
-//#region PREFERENCES
-function loadPreferences() {
-  document.getElementById('session-filter').value = sessionFilter;
-  document.getElementById('session-limit').value = sessionLimit;
-}
-
-//#endregion
-
 //#region SESSION_INFO
 async function showSessionInfoModal(sessionId) {
   const session = sessions.find((s) => s.id === sessionId);
@@ -7240,13 +7353,16 @@ fetch('/api/version')
   .catch(() => {});
 
 const urlState = getUrlState();
-sessionFilter = urlState.filter || 'active';
-sessionLimit = urlState.limit || '20';
-filterProject = urlState.project || '__recent__';
+const lastView = loadLastView();
+sessionFilter = urlState.filter || FILTER_DEFAULTS.session;
+sessionLimit = urlState.limit || FILTER_DEFAULTS.limit;
+// The URL wins; the persisted view only fills in when it carries a project key, so 'all' (null)
+// restores as 'all' and pre-existing blobs without the key still default to '__recent__'.
+filterProject = urlState.project || (lastView && 'project' in lastView ? lastView.project : FILTER_DEFAULTS.project);
 ownerFilter = urlState.owner || '';
 searchQuery = urlState.search || '';
 
-loadPreferences();
+renderFilterState();
 pinnedSessionIds = loadPinnedSessions();
 stickySessionIds = loadStickySessions();
 setupEventSource();
@@ -7308,12 +7424,12 @@ Promise.all([
 
 window.addEventListener('popstate', () => {
   const s = getUrlState();
-  sessionFilter = s.filter || 'active';
-  sessionLimit = s.limit || '20';
-  filterProject = s.project || '__recent__';
+  sessionFilter = s.filter || FILTER_DEFAULTS.session;
+  sessionLimit = s.limit || FILTER_DEFAULTS.limit;
+  filterProject = s.project || FILTER_DEFAULTS.project;
   ownerFilter = s.owner || '';
   searchQuery = s.search || '';
-  loadPreferences();
+  renderFilterState();
   // fetchSessions derives query params from the globals set above — refetch so
   // back/forward across a filter change doesn't render a stale server-filtered list.
   fetchSessions(false);

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>

package/public/style.css

@@ -353,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;
@@ -364,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 {
@@ -399,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);

package/server.js

@@ -2659,9 +2659,19 @@ async function readPreviewFile(absPath) {
   return { content: await fs.readFile(absPath, 'utf8'), kind };
 }
 
+// Paths copied out of a browser or a slide deck carry a URL fragment
+// ("deck.html#10"). Dropped only when the literal path is missing and the trimmed one
+// exists, so a filename that genuinely contains '#' still resolves to itself.
+function dropUrlFragment(abs) {
+  const i = abs.lastIndexOf('#');
+  if (i <= 0 || existsSync(abs)) return abs;
+  const trimmed = abs.slice(0, i);
+  return existsSync(trimmed) ? trimmed : abs;
+}
+
 function resolvePreviewPath(filePath, base) {
   if (!filePath || typeof filePath !== 'string') return null;
-  if (path.isAbsolute(filePath)) return filePath;
+  if (path.isAbsolute(filePath)) return dropUrlFragment(filePath);
   if (base && typeof base === 'string' && path.isAbsolute(base)) {
     let baseDir = base;
     try {
@@ -2670,9 +2680,9 @@ function resolvePreviewPath(filePath, base) {
       // base doesn't exist — fall back to dirname if it looks like a file
       if (path.extname(base)) baseDir = path.dirname(base);
     }
-    return path.resolve(baseDir, filePath);
+    return dropUrlFragment(path.resolve(baseDir, filePath));
   }
-  return path.resolve(filePath);
+  return dropUrlFragment(path.resolve(filePath));
 }
 
 app.post('/api/preview', async (req, res) => {