claude-code-kanban 4.31.1 → 5.1.0

package/public/index.html

@@ -32,6 +32,7 @@
   <script defer src="/app.js"></script>
 </head>
 <body class="booting">
+<script src="/vendor/claude-hub-sdk.js"></script>
   <div id="offline-overlay" class="offline-overlay">
     <div class="offline-card">
       <div class="clawd-sleep" aria-hidden="true">
@@ -74,7 +75,7 @@
 
       <!-- Tasks -->
       <div class="sidebar-section flex-1">
-        <div class="section-header" onclick="toggleSection('sessions-filters', 'sessions-chevron')" style="cursor: pointer;">
+        <div class="section-header">
           <span class="section-header-label">Sessions</span>
           <span id="filter-summary" class="filter-summary" title=""></span>
           <span class="section-header-actions">
@@ -116,9 +117,16 @@
                 <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>
+            <button
+              class="icon-btn section-btn"
+              onclick="toggleSection('sessions-filters', 'sessions-chevron')"
+              title="Show or hide search and filters"
+              aria-label="Show or hide search and filters"
+            >
+              <svg id="sessions-chevron" class="collapse-chevron" viewBox="0 0 24 24">
+                <path d="M6 9l6 6 6-6"/>
+              </svg>
+            </button>
           </span>
           <div id="filter-menu" class="filter-menu" onclick="event.stopPropagation()">
             <div class="pf-field">
@@ -325,6 +333,7 @@
           <div id="terminal-boot" class="terminal-boot" aria-hidden="true">
             <svg class="clawd clawd-jump" viewBox="1 0 16 10" shape-rendering="crispEdges"><use href="#clawd-shape"/></svg>
             <p id="terminal-boot-verb"></p>
+            <p class="terminal-boot-slow">Slow to connect. Press <kbd>R</kbd> to reconnect.</p>
           </div>
           <div id="terminal-host" class="terminal-host"></div>
         </div>
@@ -450,12 +459,17 @@
     <div class="modal modal-help" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 class="modal-title">Keyboard Shortcuts</h3>
+        <a class="help-docs" id="help-docs" href="https://nikiforovall.blog/claude-code-kanban/" target="_blank" rel="noopener">Docs ↗</a>
         <button class="modal-close" aria-label="Close dialog" onclick="closeHelpModal()">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M18 6L6 18M6 6l12 12"/>
           </svg>
         </button>
       </div>
+      <div class="help-bar">
+        <div class="help-tabs" id="help-tabs" role="tablist" aria-label="Shortcut groups"></div>
+        <input type="search" id="help-filter" class="form-input help-filter" placeholder="Filter shortcuts" aria-label="Filter shortcuts" autocomplete="off" spellcheck="false">
+      </div>
       <div class="modal-body">
         <dl class="shortcuts" id="help-shortcuts"></dl>
       </div>
@@ -801,6 +815,19 @@
     </div>
   </div>
 
+  <div id="project-picker-modal" class="modal-overlay top-aligned" onclick="closeProjectPicker()">
+    <div class="modal session-picker" onclick="event.stopPropagation()">
+      <input type="text" id="project-picker-input" class="form-input sp-input" placeholder="Filter by project..." autocomplete="off" spellcheck="false">
+      <div class="pp-chips">
+        <button type="button" class="pf-recent" id="pp-recent-chip" aria-pressed="false" title="List only projects active in the last 24h" onclick="ppToggleRecentOnly()">Recent</button>
+      </div>
+      <div class="sp-body">
+        <div id="project-picker-list" class="sp-list"></div>
+      </div>
+      <div class="sp-hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> move &middot; <kbd>Enter</kbd> filter &middot; <kbd>Alt</kbd><kbd>R</kbd> recent &middot; <kbd>Alt</kbd><kbd>C</kbd> reset filter &middot; <kbd>Esc</kbd> close</div>
+    </div>
+  </div>
+
   <div id="toast" class="toast"></div>
 </body>
 </html>

package/public/style.css

@@ -232,6 +232,25 @@ body::before {
   animation: pulse 2.5s ease-in-out infinite;
 }
 
+.activity-icon {
+  display: inline-flex;
+  margin: 0 -2px;
+  color: var(--chip-color, var(--accent));
+}
+.activity-icon svg {
+  width: 11px;
+  height: 11px;
+}
+.activity-chip.activity-zero .activity-icon {
+  color: var(--text-muted);
+}
+.activity-chip.activity-warn {
+  --chip-color: var(--warning);
+  background: var(--warning-dim);
+  border-color: color-mix(in srgb, var(--chip-color) 60%, var(--border));
+  color: var(--chip-color);
+}
+
 .sidebar.collapsed .activity-chips {
   display: none;
 }
@@ -942,6 +961,36 @@ body.booting .boot-splash {
   background: var(--success);
 }
 
+.session-item.warm.idle .session-time {
+  color: var(--text-tertiary);
+}
+
+.session-item.warm.idle .session-time::before {
+  background: var(--text-tertiary);
+}
+
+/* Declared on the element, not :root, so it picks up body.light's --success. */
+.session-item.just-finished,
+.sp-state.just-finished {
+  --success-faded: color-mix(in srgb, var(--success) 35%, var(--text-muted));
+}
+
+.session-item.warm.idle.just-finished .session-time {
+  color: var(--success-faded);
+}
+
+.session-item.warm.idle.just-finished .session-time::before {
+  background: var(--success-faded);
+}
+
+.session-item.warm.permission-pending .session-time {
+  color: var(--warning);
+}
+
+.session-item.warm.permission-pending .session-time::before {
+  background: var(--warning);
+}
+
 .session-item.stale .session-time {
   color: var(--text-muted);
 }
@@ -962,6 +1011,27 @@ body.booting .boot-splash {
   padding-right: 22px;
 }
 
+.session-item.unread::before,
+.session-item.permission-pending::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-left: 3px solid var(--accent);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.session-item.permission-pending::before {
+  border-left-color: var(--warning);
+  animation: agent-badge-pulse 1.6s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-item.permission-pending::before {
+    animation: none;
+  }
+}
+
 .session-indicators .pulse,
 .wf-live-name .pulse,
 .session-waiting .pulse {
@@ -3132,6 +3202,14 @@ body.booting .boot-splash {
   animation: boot-fade 0.3s ease-out 0.2s both;
 }
 
+.terminal-boot-slow {
+  display: none;
+}
+
+.terminal-boot.slow .terminal-boot-slow {
+  display: block;
+}
+
 /* Opacity, not visibility: a hidden textarea drops focus, and the terminal must keep it. */
 .terminal-pane:has(.terminal-boot.visible) .xterm {
   opacity: 0;
@@ -5587,6 +5665,7 @@ body.light .msg-assistant .msg-text {
    the viewport cap. */
 .modal-help {
   max-width: 900px;
+  height: min(700px, 90vh);
   padding: 16px 20px 20px;
   display: flex;
   flex-direction: column;
@@ -5599,11 +5678,30 @@ body.light .msg-assistant .msg-text {
   font-size: 14px;
 }
 
+.help-docs {
+  margin: 0 12px 0 auto;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.help-docs:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
 /* One shared grid for both halves (key | label | spacer | key | label): each key
    gutter is sized by its column's widest combo, and left/right rows share row
    tracks, so paired groups line up — a shorter group just leaves empty rows.
    Cells opt into a half via sc-l / sc-r; the markup is generated from
-   SHORTCUT_PAIRS in app.js. */
+   SHORTCUT_TABS in app.js. */
 .shortcuts {
   margin: 0;
   display: grid;
@@ -5666,7 +5764,8 @@ body.light .msg-assistant .msg-text {
 
 /* keycap chips: elevated fill + thicker bottom border reads as a key */
 .sp-hint kbd,
-.shortcuts kbd {
+.shortcuts kbd,
+.terminal-boot-slow kbd {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5689,10 +5788,31 @@ body.light .msg-assistant .msg-text {
   font-size: 11px;
 }
 
-/* Hub jumps are no-ops outside Claude Code Hub, so the standalone board hides
-   that whole column rather than listing keys that do nothing. */
-.shortcuts.sc-standalone .sc-hub {
-  display: none;
+.shortcuts .sc-empty {
+  grid-column: 1 / -1;
+  padding: 24px 0;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.help-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.help-tabs {
+  display: flex;
+}
+
+.help-bar .help-filter {
+  margin: 0 0 6px auto;
+  width: 220px;
+  padding: 4px 10px;
+  font-size: 12px;
 }
 
 @keyframes live-border-pulse {
@@ -5998,16 +6118,46 @@ select.form-input option:checked {
   border-color: var(--accent);
 }
 
-.sp-row .activity-dot.live {
-  background: var(--success);
+.sp-state {
+  flex: none;
+  width: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
 }
 
-.sp-row .activity-dot.active {
-  background: var(--accent);
+.sp-state.live {
+  color: var(--success);
 }
 
-.sp-row .activity-dot.waiting {
-  background: var(--warning);
+.sp-state.active {
+  color: var(--accent);
+}
+
+.sp-state.waiting {
+  color: var(--warning);
+}
+
+.sp-state.just-finished {
+  color: var(--success-faded);
+}
+
+.sp-state.recent {
+  color: var(--text-tertiary);
+}
+
+.sp-state.idle {
+  color: var(--text-muted);
+}
+
+.sp-state .activity-dot {
+  background: currentColor;
+}
+
+.sp-state.idle .activity-dot {
+  background: transparent;
+  border: 1px solid currentColor;
 }
 
 .sp-name,
@@ -6024,6 +6174,24 @@ select.form-input option:checked {
   color: var(--text-primary);
 }
 
+.sp-pin {
+  flex: none;
+  width: 14px;
+  display: flex;
+  justify-content: center;
+  line-height: 0;
+}
+
+.sp-pin.pinned svg {
+  fill: var(--accent);
+  stroke: var(--accent);
+}
+
+.sp-pin.sticky svg {
+  fill: var(--warning);
+  stroke: var(--warning);
+}
+
 .sp-row:not(.outside) + .sp-row.outside {
   margin-top: 8px;
 }
@@ -6076,6 +6244,17 @@ select.form-input option:checked {
   font-size: 11px;
 }
 
+.pp-chips {
+  display: flex;
+  gap: 6px;
+}
+
+.sp-row.recent .sp-name::before {
+  content: '•';
+  margin-right: 5px;
+  color: var(--accent-text);
+}
+
 /* #endregion */
 
 /* #region NEW_SESSION */
@@ -6556,7 +6735,8 @@ select.form-input option:checked {
   flex-shrink: 0;
 }
 
-.storage-tab {
+.storage-tab,
+.help-tab {
   background: none;
   border: none;
   color: var(--text-secondary);
@@ -6570,11 +6750,13 @@ select.form-input option:checked {
     border-color 0.15s;
 }
 
-.storage-tab:hover {
+.storage-tab:hover,
+.help-tab:hover {
   color: var(--text-primary);
 }
 
-.storage-tab.active {
+.storage-tab.active,
+.help-tab.active {
   color: var(--accent);
   border-bottom-color: var(--accent);
 }
@@ -7258,6 +7440,11 @@ pre.mermaid svg {
   background: var(--accent-dim);
 }
 
+/* An empty section shows only while a drag needs its ungroup drop zone. */
+.sessions-list:not(.sg-dragging-active) .sg-section-empty {
+  display: none;
+}
+
 .sessions-list.sg-dragging-active .sg-ungroup-zone {
   border: 1px dashed var(--accent);
   border-radius: 4px;

package/public/vendor/claude-hub-sdk.js

@@ -0,0 +1,50 @@
+// claude-hub-sdk 1.1.0 (sha256 0fed14faa670). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// Claude Code Hub SDK stub: what an app serves when no hub runs it. Under a hub, the hub hands the
+// app its real SDK (client.js) in place of this file. The API must match client.js; a test checks it.
+((root) => {
+  'use strict';
+
+  function createClaudeHub(win) {
+    let hub = null;
+    const off = () => {};
+
+    function connect({ standalone = {} } = {}) {
+      if (hub) return hub;
+      const standaloneFn = (action) => {
+        const fn = (typeof standalone === 'function' ? standalone() : standalone)[action];
+        return typeof fn === 'function' ? fn : null;
+      };
+      hub = {
+        status: 'standalone',
+        themes: [],
+        inHub: false,
+        onStatus: () => off,
+        onActive: () => off,
+        onThemes: () => off,
+        subscribe: () => off,
+        bindTheme: () => off,
+        handle() {},
+        publish() {},
+        invoke(action, params = {}) {
+          const target = standaloneFn(action)?.(params);
+          if (!target) return Promise.resolve({ ok: false, reason: 'unhandled' });
+          win.open(target, '_blank', 'noopener');
+          return Promise.resolve({ ok: true, handledBy: 'standalone' });
+        },
+        can: (action) => !!standaloneFn(action),
+        forwards: () => false,
+        closeGuard() {},
+        openExternal(url) {
+          win.open(url, '_blank', 'noopener');
+        },
+        terminalToken: () => Promise.resolve(null),
+      };
+      return hub;
+    }
+
+    return { connect };
+  }
+
+  if (typeof module === 'object' && module.exports) module.exports = { createClaudeHub };
+  else root.ClaudeHub = createClaudeHub(root);
+})(typeof window !== 'undefined' ? window : globalThis);