@beastmode-develeap/beastmode 0.1.212 → 0.1.214

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260509-145929-6395b56";</script>
+<script>window.__BUILD_STAMP__ = "20260509-230834-09eb714";</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">
@@ -1688,6 +1688,29 @@ input[type="range"]::-webkit-slider-thumb {
   color: #f97316;
   border: 1px solid rgba(249, 115, 22, 0.4);
 }
+.badge-superseded {
+  background: rgba(100, 116, 139, 0.2);
+  color: #94a3b8;
+  border: 1px solid rgba(100, 116, 139, 0.4);
+  text-decoration: line-through;
+}
+.kanban-card[data-overlay="superseded"] {
+  opacity: 0.6;
+}
+.kanban-card[data-overlay="superseded"] .card-title {
+  text-decoration: line-through;
+  color: var(--text-muted);
+}
+.badge-successor {
+  background: rgba(100, 116, 139, 0.15);
+  color: #94a3b8;
+  cursor: pointer;
+  text-decoration: none;
+}
+.badge-successor:hover {
+  background: rgba(100, 116, 139, 0.3);
+  color: #cbd5e1;
+}
 
 /* Card-level visual treatment for overlay statuses */
 .kanban-card[data-overlay="stuck"] {
@@ -2161,6 +2184,95 @@ input[type="range"]::-webkit-slider-thumb {
 .filter-toggle:hover { border-color: var(--text-muted); color: var(--text); }
 .filter-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
 
+/* Sort toggle button — mirrors filter-toggle */
+.sort-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  height: 36px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  position: relative;
+}
+.sort-toggle:hover { border-color: var(--text-muted); color: var(--text); }
+.sort-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
+
+.sort-active-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent);
+  margin-left: 2px;
+}
+
+/* Sort dropdown */
+.sort-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 100;
+  min-width: 180px;
+  padding: 4px;
+}
+
+.sort-options {
+  display: flex;
+  flex-direction: column;
+}
+
+.sort-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 0.1s;
+  width: 100%;
+  text-align: left;
+}
+.sort-option:hover { background: var(--bg-hover); color: var(--text); }
+.sort-option.active { color: var(--accent); font-weight: 600; }
+
+.sort-dir-icon {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.sort-clear {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  text-align: center;
+  margin-top: 4px;
+}
+.sort-clear:hover { color: var(--danger); }
+
 .view-toggle {
   display: inline-flex;
   border: 1px solid var(--border);
@@ -3829,6 +3941,7 @@ function Icon({ name, size = 18, className = '' }) {
     lightbulb: html`<path d="M8 1a5 5 0 00-3 9c.5.6.8 1.2 1 1.8V13h4v-1.2c.2-.6.5-1.2 1-1.8A5 5 0 008 1z"/><line x1="6" y1="13.5" x2="10" y2="13.5"/><line x1="6.5" y1="15" x2="9.5" y2="15"/>`,
     help: html`<circle cx="8" cy="8" r="6.5"/><path d="M6 6.5a2 2 0 013.7 1c0 1.5-1.7 1.5-1.7 3"/><circle cx="8" cy="12" r="0.5" fill="currentColor" stroke="none"/>`,
     filter: html`<polygon points="1.5,2 14.5,2 9.5,8.5 9.5,13 6.5,14.5 6.5,8.5"/>`,
+    'arrow-up-down': html`<path d="M4 6l4-4 4 4"/><path d="M4 10l4 4 4-4"/>`,
     costs: html`<circle cx="8" cy="8" r="6.5"/><path d="M8 3.5v1m0 7v1M6 10.5c0 .8.9 1.5 2 1.5s2-.7 2-1.5S9.1 9 8 9s-2-.7-2-1.5S6.9 6 8 6s2 .7 2 1.5"/>`,
   };
 
@@ -4382,7 +4495,9 @@ function isOverlayStatus(status) {
   const overlays = (typeof PIPELINE_CONFIG !== 'undefined' && PIPELINE_CONFIG && PIPELINE_CONFIG.overlay_statuses)
     ? PIPELINE_CONFIG.overlay_statuses
     : ['Stuck', 'Awaiting Input'];
-  return overlays.includes(status);
+  if (overlays.includes(status)) return true;
+  if (status === 'Superseded') return true;
+  return false;
 }
 
 function overlayBadgeClass(status) {
@@ -4390,6 +4505,7 @@ function overlayBadgeClass(status) {
   const s = status.toLowerCase();
   if (s === 'stuck') return 'badge-overlay-stuck';
   if (s === 'awaiting input') return 'badge-overlay-awaiting';
+  if (s === 'superseded') return 'badge-superseded';
   return '';
 }
 
@@ -4398,6 +4514,7 @@ function overlayBadgeLabel(status) {
   const s = status.toLowerCase();
   if (s === 'stuck') return '\u26A0 Stuck';
   if (s === 'awaiting input') return '\u23F3 Awaiting Input';
+  if (s === 'superseded') return 'Superseded';
   return status;
 }
 
@@ -4406,6 +4523,7 @@ function overlayKey(status) {
   const s = status.toLowerCase();
   if (s === 'stuck') return 'stuck';
   if (s === 'awaiting input') return 'awaiting-input';
+  if (s === 'superseded') return 'superseded';
   return null;
 }
 
@@ -4414,6 +4532,7 @@ function overlayTooltip(status) {
   const s = status.toLowerCase();
   if (s === 'stuck') return 'Task is stuck after max retries. Comment \'reset\' to restart or investigate the failure.';
   if (s === 'awaiting input') return 'BeastMode needs your answer to a question before continuing. Check the task updates.';
+  if (s === 'superseded') return 'This item has been superseded by another item. It is terminal and cannot be reactivated.';
   return '';
 }
 
@@ -4566,6 +4685,32 @@ function partitionByEpic(columnItems, allItems) {
       groups[epicId].epicName = groups[epicId].epic.name;
       groups[epicId].epicStatus = groups[epicId].epic.status;
     }
+    const allChildren = allItems.filter(i => String(i.parent_epic) === String(epicId));
+    let doneCount = 0;
+    let supersededCount = 0;
+    let activeCount = 0;
+    let mostCommonSuccessor = null;
+    const successorCounts = {};
+    for (const child of allChildren) {
+      if (child.status === 'Done') {
+        doneCount++;
+      } else if (child.status === 'Superseded') {
+        supersededCount++;
+        const sby = child.extra && child.extra.superseded_by;
+        if (sby) {
+          successorCounts[sby] = (successorCounts[sby] || 0) + 1;
+        }
+      } else {
+        activeCount++;
+      }
+    }
+    if (supersededCount > 0) {
+      let maxCount = 0;
+      for (const [id, count] of Object.entries(successorCounts)) {
+        if (count > maxCount) { maxCount = count; mostCommonSuccessor = id; }
+      }
+    }
+    groups[epicId].breakdown = { doneCount, supersededCount, activeCount, mostCommonSuccessor };
   }
 
   const sortedGroupKeys = Object.keys(groups).sort((a, b) => {
@@ -5419,7 +5564,23 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
     <aside class="detail-sidebar open" ref=${sidebarRef}>
       <div class="detail-resize-handle" onMouseDown=${onResizeStart}></div>
       <div class="detail-header">
-        <h3>${item.name || item.title}</h3>
+        <h3 style=${item.status === 'Superseded' ? 'text-decoration:line-through;color:var(--text-muted);' : ''}>${item.name || item.title}</h3>
+        ${item.status === 'Superseded' && html`
+          <div class="detail-superseded-info" data-testid="sidebar-superseded-info"
+               style="display:flex;align-items:center;gap:8px;padding:4px 0 8px;font-size:13px;color:var(--text-muted);">
+            <span class="badge-superseded" style="font-size:11px;padding:2px 8px;border-radius:4px;">Superseded</span>
+            ${item.extra && item.extra.superseded_by && html`
+              <span>\u2192</span>
+              <a href="#" data-testid="sidebar-successor-link"
+                 style="color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-size:12px;"
+                 onClick=${(e) => {
+                   e.preventDefault();
+                   const target = allItems && allItems.find ? allItems.find(i => String(i.id) === String(item.extra.superseded_by)) : null;
+                   if (target && onSelectItem) onSelectItem(target);
+                 }}>#${item.extra.superseded_by}</a>
+            `}
+          </div>
+        `}
         <button class="detail-close" onClick=${onClose}>\u00d7</button>
       </div>
       <div class="detail-meta">
@@ -5824,8 +5985,7 @@ function PipelineView({
   selectedProject,
   setSelectedItem,
   deleteItem,
-  columnSorts,
-  cycleSort,
+  globalSort,
   sortColumnItems,
   costsByItem,
   envVerifyByItem,
@@ -5849,6 +6009,15 @@ function PipelineView({
       <div class="card-title" style="cursor:pointer;" onClick=${() => setSelectedItem(item)} title=${item.name || item.title}>${item.name || item.title}</div>
       <div class="card-footer">
         ${isOverlayStatus(item.status) && html`<span class=${'card-badge badge-overlay ' + overlayBadgeClass(item.status)} title=${overlayTooltip(item.status)}>${overlayBadgeLabel(item.status)}</span>`}
+        ${item.extra && item.extra.superseded_by && html`<a class="card-badge badge-successor"
+          href="#" data-testid="card-successor-link"
+          title=${'Superseded by #' + item.extra.superseded_by}
+          onClick=${(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const target = filteredItems.find(i => String(i.id) === String(item.extra.superseded_by));
+            if (target) setSelectedItem(target);
+          }}>→ #${item.extra.superseded_by}</a>`}
         ${!isParentEpic && item.parent_epic && html`<span class="card-badge badge-epic">epic:${item.parent_epic}</span>`}
         ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
         ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}
@@ -5915,8 +6084,7 @@ function PipelineView({
               ${columns.map(colId => {
                 const meta = getColumnMeta(colId);
                 const rawColItems = laneItemList.filter(item => getItemColumn(item, columns) === colId);
-                const colItems = sortColumnItems(rawColItems, columnSorts[colId] || '');
-                const sortMode = columnSorts[colId] || '';
+                const colItems = sortColumnItems(rawColItems, globalSort);
                 return html`
                   <div class="pipeline-column"
                        data-testid=${'pipeline-col-' + colId}
@@ -5927,9 +6095,8 @@ function PipelineView({
                        onDrop=${e => onDrop(e, colId)}>
                     <div class="pipeline-column-header"
                          style=${'--col-color: ' + meta.color}
-                         title=${meta.tooltip}
-                         onClick=${() => cycleSort(colId)}>
-                      <span>${meta.label}${sortMode && html`<span class="sort-indicator">${sortMode === 'priority' ? '\u25BC' : '\u25B2'}</span>`}</span>
+                         title=${meta.tooltip}>
+                      <span>${meta.label}</span>
                       <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
                     </div>
                     <div class="pipeline-column-items">
@@ -5957,6 +6124,19 @@ function PipelineView({
                                     <span class="epic-group-color" style="background: var(--accent)"></span>
                                     <span class="epic-group-name">${group.epicName}</span>
                                     <span class="epic-group-count">${totalCount}</span>
+                                    ${(() => {
+                                      const bd = group.breakdown;
+                                      if (!bd || (bd.doneCount === 0 && bd.supersededCount === 0)) return null;
+                                      const parts = [];
+                                      if (bd.doneCount > 0) parts.push(bd.doneCount + ' Done');
+                                      if (bd.supersededCount > 0) parts.push(bd.supersededCount + ' Superseded');
+                                      if (bd.activeCount > 0) parts.push(bd.activeCount + ' Active');
+                                      return html`<span class="epic-group-breakdown" data-testid="epic-group-breakdown"
+                                        style="font-size:10px;color:var(--text-muted);margin-left:4px;">(${parts.join(', ')}${bd.mostCommonSuccessor ? html` → <a href="#" data-testid="epic-breakdown-successor-link" style="color:var(--accent);text-decoration:none;" onClick=${(e) => {
+                                          e.preventDefault();
+                                          e.stopPropagation();
+                                        }}>#${bd.mostCommonSuccessor}</a>` : ''})</span>`;
+                                    })()}
                                   </div>
                                   <div class="epic-group-body" id=${egBodyId}>
                                     ${group.epic && renderCard(group.epic, meta.status, true)}
@@ -6167,7 +6347,14 @@ function BoardPage({ selectedProject }) {
     const allKeys = ((window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || []).map(s => s.key);
     return new Set(allKeys);
   });
-  const [columnSorts, setColumnSorts] = useState({});
+  const [globalSort, setGlobalSort] = useState(() => {
+    try {
+      const saved = localStorage.getItem('beastmode-sort-mode');
+      if (saved) return JSON.parse(saved);
+    } catch {}
+    return { field: '', direction: 'asc' };
+  });
+  const [sortOpen, setSortOpen] = useState(false);
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
   const [costsByItem, setCostsByItem] = useState({});
   const [envVerifyByItem, setEnvVerifyByItem] = useState({});
@@ -6606,6 +6793,25 @@ function BoardPage({ selectedProject }) {
     } catch {}
   }, [activeSwimlanesSet]);
 
+  // Persist sort preference to localStorage whenever it changes.
+  useEffect(() => {
+    localStorage.setItem('beastmode-sort-mode', JSON.stringify(globalSort));
+  }, [globalSort]);
+
+  // Close sort dropdown when clicking outside.
+  useEffect(() => {
+    if (!sortOpen) return;
+    const handler = (e) => {
+      const dropdown = document.querySelector('.sort-dropdown');
+      const toggle = document.querySelector('[data-testid="sort-toggle"]');
+      if (dropdown && !dropdown.contains(e.target) && toggle && !toggle.contains(e.target)) {
+        setSortOpen(false);
+      }
+    };
+    document.addEventListener('click', handler, true);
+    return () => document.removeEventListener('click', handler, true);
+  }, [sortOpen]);
+
   // Expose swimlane state for external scenario verification.
   useEffect(() => {
     const swimlanes = (window.PIPELINE_CONFIG && window.PIPELINE_CONFIG.swimlanes) || [];
@@ -6687,28 +6893,32 @@ function BoardPage({ selectedProject }) {
   const activeFilterCount = _baseFilterCount + (_swimlaneFilterActive ? 1 : 0);
 
   // ── Column sorting ──
+  const SORT_LABELS = {
+    priority: 'Priority',
+    name: 'Name',
+    created: 'Created',
+    updated: 'Updated',
+    status_age: 'Time in Status',
+  };
   const PRIORITY_ORDER = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3, '': 4 };
-  const sortColumnItems = (colItems, mode) => {
-    if (!mode) return colItems; // default: keep API order (newest first)
+  const sortColumnItems = (colItems, sort) => {
+    if (!sort || !sort.field) return colItems;
+    const dir = sort.direction === 'desc' ? -1 : 1;
     const sorted = [...colItems];
-    if (mode === 'priority') {
-      sorted.sort((a, b) => (PRIORITY_ORDER[a.priority || ''] ?? 4) - (PRIORITY_ORDER[b.priority || ''] ?? 4));
-    } else if (mode === 'name') {
-      sorted.sort((a, b) => (a.name || a.title || '').localeCompare(b.name || b.title || ''));
+    if (sort.field === 'priority') {
+      sorted.sort((a, b) => dir * ((PRIORITY_ORDER[a.priority || ''] ?? 4) - (PRIORITY_ORDER[b.priority || ''] ?? 4)));
+    } else if (sort.field === 'name') {
+      sorted.sort((a, b) => dir * (a.name || a.title || '').localeCompare(b.name || b.title || ''));
+    } else if (sort.field === 'created') {
+      sorted.sort((a, b) => dir * ((a.created_at || '').localeCompare(b.created_at || '')));
+    } else if (sort.field === 'updated') {
+      sorted.sort((a, b) => dir * ((a.updated_at || '').localeCompare(b.updated_at || '')));
+    } else if (sort.field === 'status_age') {
+      sorted.sort((a, b) => dir * ((a.status_changed_at || a.updated_at || '').localeCompare(b.status_changed_at || b.updated_at || '')));
     }
     return sorted;
   };
 
-  const cycleSort = (colId) => {
-    setColumnSorts(prev => {
-      const current = prev[colId] || '';
-      const next = current === '' ? 'priority' : current === 'priority' ? 'name' : '';
-      const copy = { ...prev };
-      if (next) copy[colId] = next; else delete copy[colId];
-      return copy;
-    });
-  };
-
   // Unique project IDs and parent epics for filter dropdowns
   const uniqueProjects = [...new Set(items.map(i => i.project_id).filter(Boolean))];
   const uniqueEpics = [...new Set(items.map(i => i.parent_epic).filter(Boolean))].map(String);
@@ -6794,6 +7004,46 @@ function BoardPage({ selectedProject }) {
           ${activeFilterCount > 0 && html`<span class="filter-active-count">${activeFilterCount}</span>`}
         </button>
 
+        <div style="position: relative;">
+          <button class=${'sort-toggle' + (sortOpen || globalSort.field ? ' active' : '')}
+                  onClick=${() => setSortOpen(v => !v)}
+                  data-testid="sort-toggle">
+            <${Icon} name="arrow-up-down" size=${13} />
+            Sort
+            ${globalSort.field && html`<span class="sort-active-label">${SORT_LABELS[globalSort.field]}</span>`}
+          </button>
+          ${sortOpen && html`
+            <div class="sort-dropdown" data-testid="sort-dropdown">
+              <div class="sort-options">
+                ${Object.entries(SORT_LABELS).map(([key, label]) => html`
+                  <button key=${key}
+                          class=${'sort-option' + (globalSort.field === key ? ' active' : '')}
+                          data-testid=${'sort-option-' + key}
+                          onClick=${() => {
+                            if (globalSort.field === key) {
+                              setGlobalSort(s => ({ ...s, direction: s.direction === 'asc' ? 'desc' : 'asc' }));
+                            } else {
+                              const defaultDir = (key === 'created' || key === 'updated') ? 'desc' : 'asc';
+                              setGlobalSort({ field: key, direction: defaultDir });
+                            }
+                          }}>
+                    <span>${label}</span>
+                    ${globalSort.field === key && html`
+                      <span class="sort-dir-icon">${globalSort.direction === 'asc' ? '↑' : '↓'}</span>
+                    `}
+                  </button>
+                `)}
+              </div>
+              ${globalSort.field && html`
+                <button class="sort-clear" data-testid="sort-clear"
+                        onClick=${() => { setGlobalSort({ field: '', direction: 'asc' }); setSortOpen(false); }}>
+                  Clear sort
+                </button>
+              `}
+            </div>
+          `}
+        </div>
+
         <button class="btn btn-primary" onClick=${() => setShowCreateDialog(true)}>
           <${Icon} name="plus" size=${14} />
           New Task
@@ -6891,8 +7141,7 @@ function BoardPage({ selectedProject }) {
             selectedProject=${selectedProject}
             setSelectedItem=${setSelectedItem}
             deleteItem=${deleteItem}
-            columnSorts=${columnSorts}
-            cycleSort=${cycleSort}
+            globalSort=${globalSort}
             sortColumnItems=${sortColumnItems}
             costsByItem=${costsByItem}
             envVerifyByItem=${envVerifyByItem}
@@ -6927,15 +7176,14 @@ function BoardPage({ selectedProject }) {
             if (col.also && col.also.includes(i.status)) return true;
             return false;
           });
-          const colItems = sortColumnItems(rawColItems, columnSorts[col.id] || '');
-          const sortMode = columnSorts[col.id] || '';
+          const colItems = sortColumnItems(rawColItems, globalSort);
           return html`
             <div class="kanban-column" key=${col.id}
                  onDragOver=${e => onDragOver(e, col.id)}
                  onDragLeave=${onDragLeave}
                  onDrop=${e => onDrop(e, col.id)}>
-              <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip} onClick=${() => cycleSort(col.id)}>
-                <span>${col.label}${sortMode && html`<span class="sort-indicator">${sortMode === 'priority' ? '\u25BC' : '\u25B2'}</span>`}</span>
+              <div class="kanban-column-header" style=${'--col-color: ' + col.color} title=${col.tooltip}>
+                <span>${col.label}</span>
                 <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
               </div>
               <div class="kanban-items">
@@ -6957,6 +7205,15 @@ function BoardPage({ selectedProject }) {
                         <div class="card-title" style="cursor:pointer;" onClick=${() => setSelectedItem(item)} title=${item.name || item.title}>${item.name || item.title}</div>
                         <div class="card-footer">
                           ${isOverlayStatus(item.status) && html`<span class=${'card-badge badge-overlay ' + overlayBadgeClass(item.status)} title=${overlayTooltip(item.status)}>${overlayBadgeLabel(item.status)}</span>`}
+                          ${item.extra && item.extra.superseded_by && html`<a class="card-badge badge-successor"
+                            href="#" data-testid="card-successor-link"
+                            title=${'Superseded by #' + item.extra.superseded_by}
+                            onClick=${(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              const target = swimlaneFilteredItems.find(i => String(i.id) === String(item.extra.superseded_by));
+                              if (target) setSelectedItem(target);
+                            }}>→ #${item.extra.superseded_by}</a>`}
                           ${!isParentEpic && item.parent_epic && html`<span class="card-badge badge-epic">epic:${item.parent_epic}</span>`}
                           ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
                           ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}
@@ -7006,6 +7263,19 @@ function BoardPage({ selectedProject }) {
                               <span class="epic-group-color" style="background: var(--accent)"></span>
                               <span class="epic-group-name">${group.epicName}</span>
                               <span class="epic-group-count">${totalCount}</span>
+                              ${(() => {
+                                const bd = group.breakdown;
+                                if (!bd || (bd.doneCount === 0 && bd.supersededCount === 0)) return null;
+                                const parts = [];
+                                if (bd.doneCount > 0) parts.push(bd.doneCount + ' Done');
+                                if (bd.supersededCount > 0) parts.push(bd.supersededCount + ' Superseded');
+                                if (bd.activeCount > 0) parts.push(bd.activeCount + ' Active');
+                                return html`<span class="epic-group-breakdown" data-testid="epic-group-breakdown"
+                                  style="font-size:10px;color:var(--text-muted);margin-left:4px;">(${parts.join(', ')}${bd.mostCommonSuccessor ? html` → <a href="#" data-testid="epic-breakdown-successor-link" style="color:var(--accent);text-decoration:none;" onClick=${(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                  }}>#${bd.mostCommonSuccessor}</a>` : ''})</span>`;
+                              })()}
                             </div>
                             <div class="epic-group-body" id=${bodyId}>
                               ${group.epic && renderCard(group.epic, true)}

package/dist/web/build-commit.txt

@@ -1 +1 @@
-6395b562346253985efd5667de1e2809baa36bf0
+09eb71470e076891f6ed9304e081cc9372bad7fc

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260509-145929-6395b56
+20260509-230834-09eb714

package/package.json

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