claude-code-kanban 4.29.0 → 4.31.0

package/public/index.html

@@ -26,8 +26,9 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.12.0/build/styles/github-dark.min.css" integrity="sha384-wH75j6z1lH97ZOpMOInqhgKzFkAInZPPSPlZpYKYTOqsaizPvhQZmAtLcPKXpLyH" crossorigin="anonymous" id="hljs-theme-dark">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.12.0/build/styles/github.min.css" integrity="sha384-eFTL69TLRZTkNfYZOLM+G04821K1qZao/4QLJbet1pP4tcF+fdXq/9CdqAbWRl/L" crossorigin="anonymous" id="hljs-theme-light" disabled>
   <script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.12.0/build/highlight.min.js" integrity="sha384-wjfDDhOPPdjtva8vWBhWeVprSpmxisEu5aYT3q1JyACqXpdKpo3PWZTMVq24MBix" crossorigin="anonymous"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/mermaid@12.0.0/dist/mermaid.min.js" integrity="sha384-xzghz1GQ5u9HCpVskeDPqMsdogD1yvuMQbEK53+wi+G70+6J1AG0L2cfi9PHjDWI" crossorigin="anonymous"></script>
   <script>window.__STORAGE_NS__ = null;</script>
+  <script defer src="/project-match.js"></script>
+  <script defer src="/link-url.js"></script>
   <script defer src="/app.js"></script>
 </head>
 <body class="booting">
@@ -81,7 +82,7 @@
               id="zen-mode-btn"
               class="icon-btn section-btn"
               onclick="event.stopPropagation(); toggleZenMode()"
-              title="Zen mode: current session only (Shift+Z)"
+              title="Zen mode: current session only (Ctrl+Shift+Z)"
               aria-label="Zen mode: current session only"
               aria-pressed="false"
             >
@@ -120,24 +121,37 @@
             </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 class="pf-field">
+              <svg class="pf-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+              </svg>
+              <input
+                id="project-filter"
+                type="text"
+                class="pf-input"
+                placeholder="Any project"
+                autocomplete="off"
+                spellcheck="false"
+                role="combobox"
+                aria-expanded="true"
+                aria-controls="project-filter-options"
+                aria-autocomplete="list"
+                aria-label="Project. Type part of a path, or pick a project."
+                oninput="typeProjectFilter(this.value)"
+              />
+              <button
+                id="project-recent-btn"
+                type="button"
+                class="pf-recent"
+                onclick="toggleRecentProjects()"
+                aria-pressed="false"
+                title="Projects with activity in the last 24 hours"
+              >24h</button>
             </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>
+            <ul id="project-filter-options" class="pf-list" role="listbox" aria-label="Projects"></ul>
+            <div class="pf-seg" role="radiogroup" aria-label="Sessions">
+              <button type="button" role="radio" data-session-filter="active" onclick="filterBySessions('active')">Active</button>
+              <button type="button" role="radio" data-session-filter="all" onclick="filterBySessions('all')">All sessions</button>
             </div>
           </div>
         </div>
@@ -188,11 +202,20 @@
         </svg>
         <p id="boot-verb">Clawding…</p>
       </div>
-      <div id="no-session" class="empty-state">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
-        </svg>
-        <p>Select a session to view tasks</p>
+      <div id="no-session" class="empty-state idle-board">
+        <div class="idle-ghost" aria-hidden="true">
+          <div><span></span><span></span><span></span></div>
+          <div><span></span><span></span></div>
+          <div><span></span><span></span><span></span><span></span></div>
+        </div>
+        <div class="idle-glow" aria-hidden="true"><span></span><span></span></div>
+        <div class="idle-content">
+          <div class="idle-clawd" aria-hidden="true">
+            <svg class="clawd" viewBox="1 0 16 10" shape-rendering="crispEdges"><use href="#clawd-shape"/></svg>
+          </div>
+          <p class="idle-title">Select a session to view tasks</p>
+          <div class="idle-hint sp-hint"><kbd>↑</kbd><kbd>↓</kbd> move <span>·</span> <kbd>Enter</kbd> open <span>·</span> <kbd>?</kbd> shortcuts</div>
+        </div>
       </div>
 
       <div id="session-view" class="session-view">
@@ -213,7 +236,7 @@
                 <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
               </svg>
             </button>
-            <button id="message-toggle" class="icon-btn" onclick="toggleMessagePanel()" title="Session log (L)" aria-label="Toggle session log">
+            <button id="message-toggle" class="icon-btn" onclick="toggleMessagePanel()" title="Session log (Shift+L)" aria-label="Toggle session log">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
               </svg>
@@ -344,6 +367,9 @@
         <button class="icon-btn" onclick="openLiveLatestMessage()" title="Follow latest message (Shift+M)" aria-label="Follow latest message">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </button>
+        <button id="message-panel-full-btn" class="icon-btn" onclick="toggleMessagePanelFull()" title="Expand to full width" aria-label="Expand to full width" aria-pressed="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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="detail-close" onclick="toggleMessagePanel()" aria-label="Close message panel">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M6 18L18 6M6 6l12 12"/>

package/public/link-url.js

@@ -0,0 +1,15 @@
+// Loaded by the page as a plain script and by lib/linked-docs.js through require, so the
+// sidebar, the API and the CLI accept the same URLs. Only http(s): linked docs render as
+// links, so a `javascript:` or `data:` value sent through the API must not become one.
+function linkUrl(value) {
+  if (typeof value !== 'string') return null;
+  const v = value.trim();
+  if (!/^https?:\/\//i.test(v)) return null;
+  try {
+    return new URL(v).href;
+  } catch {
+    return null;
+  }
+}
+
+if (typeof module === 'object' && module.exports) module.exports = { linkUrl };

package/public/project-match.js

@@ -0,0 +1,27 @@
+// Loaded by the page as a plain script and by server.js through require, so the sidebar and
+// the API (and the CLI, which sends `project=`) filter projects by one rule.
+const projectMatch = (() => {
+  function normalizeProjectPath(p) {
+    return p.toLowerCase().replace(/\\/g, '/').replace(/\/+$/, '');
+  }
+  function isExactProjectPath(normalized) {
+    return /^([a-z]:)?\//.test(normalized);
+  }
+  function isExactProjectFilter(query) {
+    return isExactProjectPath(normalizeProjectPath(query.trim()));
+  }
+  // An absolute path selects that one project, so the hub's scope does not also pull in
+  // `app-2` next to `app`; any other text matches a part of the path.
+  function projectMatcher(query) {
+    const q = normalizeProjectPath(query.trim());
+    const exact = isExactProjectPath(q);
+    return (project) => {
+      if (!project) return false;
+      const p = normalizeProjectPath(project);
+      return exact ? p === q : p.includes(q);
+    };
+  }
+  return { normalizeProjectPath, isExactProjectPath, isExactProjectFilter, projectMatcher };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = projectMatch;