@beastmode-develeap/beastmode 0.1.124 → 0.1.126

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260418-213012-7a72646";</script>
+<script>window.__BUILD_STAMP__ = "20260419-095657-596a382";</script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -1738,6 +1738,105 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .filter-clear-link:hover { text-decoration: underline; }
 
+/* Swimlane filter chips (Story 5) */
+.swimlane-controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+}
+.swimlane-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 0;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.swimlane-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  background: var(--bg-input);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.swimlane-chip:hover {
+  border-color: var(--text-muted);
+  color: var(--text-secondary);
+}
+.swimlane-chip.active {
+  background: color-mix(in srgb, var(--chip-color, var(--accent)) 12%, transparent);
+  color: var(--chip-color, var(--accent));
+  border-color: color-mix(in srgb, var(--chip-color, var(--accent)) 30%, transparent);
+}
+.swimlane-chip-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--chip-color, var(--text-muted));
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+.swimlane-chip.active .swimlane-chip-dot {
+  opacity: 1;
+}
+.swimlane-chip-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  opacity: 0.7;
+}
+.swimlane-chip-all {
+  font-weight: 600;
+}
+.swimlane-chip-all.active {
+  background: var(--accent-subtle);
+  color: var(--accent);
+  border-color: rgba(245, 166, 35, 0.3);
+}
+@supports not (background: color-mix(in srgb, red 12%, transparent)) {
+  .swimlane-chip.active {
+    background: var(--accent-subtle);
+    color: var(--accent);
+    border-color: rgba(245, 166, 35, 0.3);
+  }
+}
+.collapse-all-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: var(--radius-xs);
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.collapse-all-btn:hover {
+  border-color: var(--text-muted);
+  color: var(--text-secondary);
+  background: var(--bg-input);
+}
+@media (max-width: 768px) {
+  .swimlane-controls-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 /* Column sort indicator */
 .kanban-column-header .sort-indicator {
   font-size: 11px;
@@ -3759,6 +3858,12 @@ function saveSwimlaneCollapse(laneKey, collapsed) {
   } catch {}
 }
 
+// NOTE: `swimlaneColor` is declared earlier in this file (first occurrence
+// wins). A second duplicate block lived here and broke the whole page with
+// "Identifier 'swimlaneColor' has already been declared" — fixed 2026-04-19,
+// visible only in the browser (the UI tooling never exercised the in-page
+// script so the syntax error slipped past CI).
+
 // ── HTML Content Renderer (for Monday.com update bodies) ──
 
 function _sanitizeHtml(raw) {
@@ -4610,6 +4715,40 @@ function SwimlaneMiniBar({ stat }) {
   `;
 }
 
+// ── Swimlane Filter Chips + Collapse All (Story 5) ──
+
+function SwimlaneFilterChips({ activeSwimlanesSet, onToggle, onToggleAll, chipCounts }) {
+  const swimlanes = (window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || [];
+  const allActive = swimlanes.length > 0 && activeSwimlanesSet.size === swimlanes.length;
+  return html`
+    <div class="swimlane-chips" data-testid="swimlane-filter-chips">
+      <button class=${'swimlane-chip swimlane-chip-all' + (allActive ? ' active' : '')}
+              onClick=${onToggleAll}
+              aria-pressed=${allActive ? 'true' : 'false'}
+              data-testid="swimlane-chip-all">
+        All
+      </button>
+      ${swimlanes.map(lane => {
+        const isActive = activeSwimlanesSet.has(lane.key);
+        const color = swimlaneColor(lane.color);
+        const count = (chipCounts && typeof chipCounts[lane.key] === 'number') ? chipCounts[lane.key] : 0;
+        return html`
+          <button key=${lane.key}
+                  class=${'swimlane-chip' + (isActive ? ' active' : '')}
+                  style=${'--chip-color: ' + color}
+                  onClick=${() => onToggle(lane.key)}
+                  aria-pressed=${isActive ? 'true' : 'false'}
+                  data-testid=${'swimlane-chip-' + lane.key}>
+            <span class="swimlane-chip-dot"></span>
+            <span>${lane.label}</span>
+            <span class="swimlane-chip-count">${count}</span>
+          </button>
+        `;
+      })}
+    </div>
+  `;
+}
+
 function BottleneckBadge({ warning }) {
   const title = `${warning.swimlaneLabel}: ${warning.count} items stuck in ${warning.stage}`;
   return html`
@@ -4676,6 +4815,17 @@ function PipelineHealth({ items }) {
   `;
 }
 
+function CollapseAllButton({ allCollapsed, onToggle }) {
+  return html`
+    <button class="collapse-all-btn"
+            onClick=${onToggle}
+            title=${allCollapsed ? 'Expand all swimlanes' : 'Collapse all swimlanes'}
+            data-testid="collapse-all-btn">
+      ${allCollapsed ? 'Expand All' : 'Collapse All'}
+    </button>
+  `;
+}
+
 // ── Board Page ──
 
 function BoardPage({ selectedProject }) {
@@ -4683,11 +4833,22 @@ function BoardPage({ selectedProject }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [dragInfo, setDragInfo] = useState(null);
+  const dragInfoRef = useRef(null);
   const [selectedItem, setSelectedItem] = useState(null);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
+  const [activeSwimlanesSet, setActiveSwimlanesSet] = useState(() => {
+    try {
+      const saved = JSON.parse(localStorage.getItem('beastmode-swimlane-filter') || 'null');
+      if (Array.isArray(saved) && saved.length > 0) {
+        return new Set(saved);
+      }
+    } catch {}
+    const allKeys = ((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).map(s => s.key);
+    return new Set(allKeys);
+  });
   const [columnSorts, setColumnSorts] = useState({});
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
   const [costsByItem, setCostsByItem] = useState({});
@@ -4874,6 +5035,7 @@ function BoardPage({ selectedProject }) {
     const item = items.find(i => String(i.id) === String(id));
     const taskType = (item && item.task_type) ? item.task_type : 'code';
     setDragInfo({ id, taskType });
+    dragInfoRef.current = { id, taskType };
     e.dataTransfer.effectAllowed = 'move';
     try { e.dataTransfer.setData('text/plain', String(id)); } catch {}
     e.target.classList.add('dragging');
@@ -4882,6 +5044,7 @@ function BoardPage({ selectedProject }) {
   const onDragEnd = (e) => {
     e.target.classList.remove('dragging');
     setDragInfo(null);
+    dragInfoRef.current = null;
     document.querySelectorAll('.drag-over, .drag-over-invalid').forEach(el => {
       el.classList.remove('drag-over', 'drag-over-invalid');
     });
@@ -4889,9 +5052,10 @@ function BoardPage({ selectedProject }) {
 
   const onDragOver = (e, targetColumnId) => {
     e.preventDefault();
-    if (!dragInfo) return;
+    const di = dragInfoRef.current;
+    if (!di) return;
     const validStages = (typeof getStagesForType === 'function')
-      ? getStagesForType(dragInfo.taskType)
+      ? getStagesForType(di.taskType)
       : [];
     const isValid = validStages.indexOf(targetColumnId) !== -1;
     if (isValid) {
@@ -4912,15 +5076,16 @@ function BoardPage({ selectedProject }) {
   const onDrop = async (e, status) => {
     e.preventDefault();
     e.currentTarget.classList.remove('drag-over', 'drag-over-invalid');
-    if (!dragInfo) return;
+    const di = dragInfoRef.current;
+    if (!di) return;
     const validStages = (typeof getStagesForType === 'function')
-      ? getStagesForType(dragInfo.taskType)
+      ? getStagesForType(di.taskType)
       : [];
     if (validStages.indexOf(status) === -1) return;
-    const current = items.find(i => String(i.id) === String(dragInfo.id));
+    const current = items.find(i => String(i.id) === String(di.id));
     if (current && current.status === status) return;
     try {
-      await api('PATCH', '/api/board/items/' + dragInfo.id, { status });
+      await api('PATCH', '/api/board/items/' + di.id, { status });
       fetchItems();
     } catch (err) { setError(err.message); }
   };
@@ -4958,8 +5123,62 @@ function BoardPage({ selectedProject }) {
     return true;
   });
 
+  // Persist swimlane filter to localStorage whenever it changes.
+  useEffect(() => {
+    try {
+      localStorage.setItem('beastmode-swimlane-filter', JSON.stringify([...activeSwimlanesSet]));
+    } catch {}
+  }, [activeSwimlanesSet]);
+
+  // Expose swimlane state for external scenario verification.
+  useEffect(() => {
+    const swimlanes = (window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || [];
+    window.__BEASTMODE_SWIMLANE_FILTER__ = {
+      active: [...activeSwimlanesSet],
+      total: swimlanes.length,
+    };
+  }, [activeSwimlanesSet]);
+
+  const toggleSwimlane = (key) => {
+    setActiveSwimlanesSet(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        if (next.size > 1) next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const toggleAllSwimlanes = () => {
+    const allKeys = ((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).map(s => s.key);
+    setActiveSwimlanesSet(prev => {
+      if (prev.size === allKeys.length) {
+        return new Set(allKeys.slice(0, 1));
+      }
+      return new Set(allKeys);
+    });
+  };
+
+  // Compute chip counts from filteredItems (pre-swimlane) so users can see
+  // how many items each swimlane holds regardless of the current chip state.
+  const chipCounts = {};
+  ((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).forEach(lane => {
+    const taskTypes = lane.taskTypes || lane.task_types || [];
+    chipCounts[lane.key] = filteredItems.filter(i => taskTypes.includes(i.task_type || 'code')).length;
+  });
+
+  // Apply the swimlane filter on top of the existing filters.
+  const swimlaneFilteredItems = filteredItems.filter(item => {
+    const lane = getSwimlaneForType(item.task_type || 'code');
+    return lane && activeSwimlanesSet.has(lane.key);
+  });
+
   // Active filter count
-  const activeFilterCount = [filters.priority, filters.taskType, filters.project, filters.dateRange, filters.parentEpic].filter(Boolean).length;
+  const _baseFilterCount = [filters.priority, filters.taskType, filters.project, filters.dateRange, filters.parentEpic].filter(Boolean).length;
+  const _swimlaneFilterActive = activeSwimlanesSet.size < (((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).length || 0);
+  const activeFilterCount = _baseFilterCount + (_swimlaneFilterActive ? 1 : 0);
 
   // ── Column sorting ──
   const PRIORITY_ORDER = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3, '': 4 };
@@ -5020,10 +5239,10 @@ function BoardPage({ selectedProject }) {
     `;
   }
 
-  const totalItems = filteredItems.length;
-  const activeItems = filteredItems.filter(i => i.status !== 'Done').length;
-  const doneItems = filteredItems.filter(i => i.status === 'Done').length;
-  const stuckItems = filteredItems.filter(i => i.status === 'Stuck').length;
+  const totalItems = swimlaneFilteredItems.length;
+  const activeItems = swimlaneFilteredItems.filter(i => i.status !== 'Done').length;
+  const doneItems = swimlaneFilteredItems.filter(i => i.status === 'Done').length;
+  const stuckItems = swimlaneFilteredItems.filter(i => i.status === 'Stuck').length;
   const progressPct = totalItems > 0 ? Math.round((doneItems / totalItems) * 100) : 0;
   const isFiltered = searchTerm.length >= 2 || activeFilterCount > 0;
 
@@ -5120,10 +5339,22 @@ function BoardPage({ selectedProject }) {
       `}
 
       ${items.length > 0 && html`<${PipelineHealth} items=${filteredItems} />`}
+      <div class="swimlane-controls-row" data-testid="swimlane-controls">
+        <${SwimlaneFilterChips}
+          activeSwimlanesSet=${activeSwimlanesSet}
+          onToggle=${toggleSwimlane}
+          onToggleAll=${toggleAllSwimlanes}
+          chipCounts=${chipCounts}
+        />
+        <${CollapseAllButton}
+          allCollapsed=${activeSwimlanesSet.size === 1}
+          onToggle=${toggleAllSwimlanes}
+        />
+      </div>
 
       ${viewMode === 'pipeline'
         ? html`<${PipelineView}
-            filteredItems=${filteredItems}
+            filteredItems=${swimlaneFilteredItems}
             items=${items}
             onDragStart=${onDragStart}
             onDragEnd=${onDragEnd}
@@ -5162,7 +5393,7 @@ function BoardPage({ selectedProject }) {
       </div>
       <div class="kanban">
         ${KANBAN_COLUMNS.map(col => {
-          const rawColItems = filteredItems.filter(i => {
+          const rawColItems = swimlaneFilteredItems.filter(i => {
             if (col.id === 'New') return !i.status || i.status === 'New' || i.status === '';
             if (i.status === col.id) return true;
             if (col.also && col.also.includes(i.status)) return true;

package/dist/web/build-commit.txt

@@ -0,0 +1 @@
+596a38260632710347fefd052b85af2a64628e87

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260418-213012-7a72646
+20260419-095657-596a382

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beastmode-develeap/beastmode",
-  "version": "0.1.124",
+  "version": "0.1.126",
   "description": "BeastMode Dark Factory — turn intent into verified software",
   "type": "module",
   "bin": {