claude-code-kanban 7.6.1 → 7.8.0

package/public/group-tree.js

@@ -0,0 +1,21 @@
+// Loaded by the page as a plain script and by lib/user-groups.js through require, so the board's
+// transient sweep and the server's prune and expiry delete nested groups by one rule.
+const groupTree = (() => {
+  // The groups `goes` names whose child groups all go too.
+  function cascade(groups, goes) {
+    const children = new Map();
+    for (const g of groups) {
+      if (!children.has(g.parent)) children.set(g.parent, []);
+      children.get(g.parent).push(g);
+    }
+    const memo = new Map();
+    const all = (g) => {
+      if (!memo.has(g)) memo.set(g, goes(g) && (children.get(g.id) || []).every(all));
+      return memo.get(g);
+    };
+    return new Set(groups.filter(all));
+  }
+  return { cascade };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = groupTree;

package/public/index.html

@@ -28,6 +28,7 @@
   <script defer src="/project-match.js"></script>
   <script defer src="/tree-highlight.js"></script>
   <script defer src="/link-url.js"></script>
+  <script defer src="/group-tree.js"></script>
   <script defer src="/app.js"></script>
 </head>
 <body class="booting">
@@ -391,6 +392,7 @@
               <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
             </svg>
           </button>
+          <button id="expand-detail" class="detail-close detail-expand" type="button"></button>
           <button id="close-detail" class="detail-close" aria-label="Close detail panel">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M6 18L18 6M6 6l12 12"/>
@@ -523,21 +525,25 @@
 
   <!-- Confirmation Modal -->
   <div id="confirm-modal" class="modal-overlay" onclick="closeConfirmModal?.(false)">
-    <div class="modal modal-sm" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h3 id="confirm-modal-title" class="modal-title"></h3>
-        <button class="modal-close" aria-label="Close dialog" onclick="closeConfirmModal?.(false)">
-          <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="modal-body">
-        <p id="confirm-modal-message" style="margin: 0; color: var(--text-primary);"></p>
-      </div>
-      <div class="modal-footer">
-        <button id="confirm-cancel-btn" class="btn btn-secondary" onclick="closeConfirmModal?.(false)">Cancel</button>
-        <button id="confirm-ok-btn" class="btn btn-danger" onclick="closeConfirmModal?.(true)"></button>
+    <div class="modal modal-sm confirm-dialog" onclick="event.stopPropagation()" role="alertdialog" aria-labelledby="confirm-modal-title" aria-describedby="confirm-modal-message">
+      <div class="modal-body confirm-body">
+        <div class="confirm-top">
+          <div class="confirm-icon" aria-hidden="true">!</div>
+          <div>
+            <h3 id="confirm-modal-title" class="confirm-title"></h3>
+            <p id="confirm-modal-message" class="confirm-message"></p>
+          </div>
+        </div>
+        <div id="confirm-modal-chip" class="confirm-chip" hidden></div>
+        <div id="confirm-modal-list" class="confirm-list" hidden></div>
+        <div id="confirm-modal-warn" class="confirm-warn" hidden></div>
+      </div>
+      <div class="modal-footer confirm-footer">
+        <span class="confirm-hint"><span><kbd>Enter</kbd> confirm</span><span><kbd>Esc</kbd> cancel</span></span>
+        <div class="confirm-buttons">
+          <button id="confirm-cancel-btn" class="btn btn-secondary" onclick="closeConfirmModal?.(false)">Cancel</button>
+          <button id="confirm-ok-btn" class="btn btn-danger" onclick="closeConfirmModal?.(true)"></button>
+        </div>
       </div>
     </div>
   </div>
@@ -548,7 +554,7 @@
       <div class="modal-header">
         <h3 id="team-modal-title" class="modal-title">Team</h3>
         <div style="display:flex;align-items:center;gap:4px;">
-          <button id="session-info-sticky-btn" class="icon-btn" style="display:none" title="Sticky pin — always show at top" onclick="toggleSessionSticky(_infoModalSessionId); updateStickyBtnState()">
+          <button id="session-info-sticky-btn" class="icon-btn" style="display:none" title="Sticky pin — always show in the list" onclick="toggleSessionSticky(_infoModalSessionId); updateStickyBtnState()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 18 L5 22 L7 14 L2 9 L9 9 Z"/></svg>
           </button>
           <button id="session-info-cost-btn" class="icon-btn" style="display:none" title="Open in Cost" onclick="openCost(_infoModalSessionId)">
@@ -746,13 +752,16 @@
           </button>
         </div>
       </div>
-      <div class="storage-tabs">
-        <button class="storage-tab active" data-tab="sessions" onclick="switchStorageTab('sessions')">Sessions</button>
-        <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 class="storage-tabs" role="tablist" aria-label="Storage" title="← → switch tab">
+        <button class="storage-tab active" role="tab" aria-selected="true" data-tab="sessions" onclick="switchStorageTab('sessions')">Sessions</button>
+        <button class="storage-tab" role="tab" aria-selected="false" data-tab="dismissed" onclick="switchStorageTab('dismissed')">Dismissed</button>
+        <button class="storage-tab" role="tab" aria-selected="false" data-tab="scratchpads" onclick="switchStorageTab('scratchpads')">Scratchpads</button>
+        <button class="storage-tab" role="tab" aria-selected="false" data-tab="linked-docs" onclick="switchStorageTab('linked-docs')">Linked Docs</button>
+        <button class="storage-tab" role="tab" aria-selected="false" data-tab="groups" onclick="switchStorageTab('groups')">Groups</button>
       </div>
       <div class="modal-body modal-zoomable" id="storage-modal-body"></div>
       <div class="modal-footer">
+        <button id="storage-groups-clean-btn" class="btn btn-secondary" style="display:none" disabled title="Take the sessions the sidebar hides (not active or dismissed, and not pinned) out of every group" onclick="_storageCleanGroup(null)">Clean all</button>
         <button id="storage-cleanup-btn" class="btn btn-secondary" onclick="cleanupOrphanedStorage()">Clean Orphaned</button>
         <button class="btn btn-secondary" onclick="closeStorageManager()">Close</button>
       </div>
@@ -820,15 +829,31 @@
           </div>
         </div>
         <div class="ns-row ns-extra">
-          <label class="ns-label" for="ns-model">Model</label>
+          <span class="ns-label"></span>
           <div class="ns-field">
-            <select id="ns-model" class="form-input">
-              <option value="">Default</option>
-              <option value="fable">Fable</option>
-              <option value="opus">Opus</option>
-              <option value="sonnet">Sonnet</option>
-              <option value="haiku">Haiku</option>
-            </select>
+            <div class="ns-inline">
+              <fieldset class="ns-notched">
+                <legend><label for="ns-model">Model</label></legend>
+                <select id="ns-model" class="form-input">
+                  <option value="">Default</option>
+                  <option value="fable">Fable</option>
+                  <option value="opus">Opus</option>
+                  <option value="sonnet">Sonnet</option>
+                  <option value="haiku">Haiku</option>
+                </select>
+              </fieldset>
+              <fieldset class="ns-notched">
+                <legend><label for="ns-effort">Effort</label></legend>
+                <select id="ns-effort" class="form-input">
+                  <option value="">Default</option>
+                  <option value="low">Low</option>
+                  <option value="medium">Medium</option>
+                  <option value="high">High</option>
+                  <option value="xhigh">XHigh</option>
+                  <option value="max">Max</option>
+                </select>
+              </fieldset>
+            </div>
           </div>
         </div>
         <div id="ns-error" class="ns-error" hidden></div>