@beastmode-develeap/beastmode 0.1.22 → 0.1.24

package/dist/web/board.html

@@ -1211,6 +1211,79 @@ input[type="range"]::-webkit-slider-thumb {
   .kanban-card[data-overlay="stuck"] { animation: none; }
 }
 
+/* Epic group nesting */
+.epic-group {
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-input);
+}
+.epic-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  user-select: none;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  transition: background 0.15s;
+  font-size: 12px;
+}
+.epic-group-header:hover {
+  background: var(--surface2, rgba(255,255,255,0.05));
+}
+.epic-group-collapsed .epic-group-header {
+  border-bottom: none;
+}
+.epic-group-chevron {
+  font-size: 10px;
+  color: var(--text-muted);
+  width: 14px;
+  text-align: center;
+  flex-shrink: 0;
+}
+.epic-group-color {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.epic-group-name {
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+.epic-group-count {
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--surface2, rgba(255,255,255,0.08));
+  padding: 1px 7px;
+  border-radius: 8px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.epic-group-body {
+  padding: 4px;
+}
+.epic-group-body .kanban-card {
+  margin-bottom: 4px;
+}
+.epic-group-body .kanban-card:last-child {
+  margin-bottom: 0;
+}
+.epic-parent-card {
+  border-left: 3px dashed var(--accent);
+}
+.epic-group-collapsed .epic-group-body {
+  display: none;
+}
+
 /* Board stats bar */
 .board-stats-bar {
   display: flex;
@@ -2734,6 +2807,67 @@ window.overlayKey = overlayKey;
 window.overlayTooltip = overlayTooltip;
 window.getEffectivePipelineColumn = getEffectivePipelineColumn;
 
+function isEpicGroupCollapsed(epicId) {
+  try {
+    const state = JSON.parse(localStorage.getItem('beastmode-epic-collapse') || '{}');
+    return state[epicId] === true;
+  } catch { return false; }
+}
+
+function saveEpicGroupCollapse(epicId, collapsed) {
+  try {
+    const state = JSON.parse(localStorage.getItem('beastmode-epic-collapse') || '{}');
+    state[epicId] = collapsed;
+    localStorage.setItem('beastmode-epic-collapse', JSON.stringify(state));
+  } catch {}
+}
+
+function partitionByEpic(columnItems, allItems) {
+  const ungrouped = [];
+  const groups = {};
+
+  for (const item of columnItems) {
+    const epicId = item.parent_epic;
+    if (!epicId) {
+      if (item.task_type === 'epic') {
+        const childrenInCol = columnItems.filter(c => String(c.parent_epic) === String(item.id));
+        if (childrenInCol.length > 0) {
+          groups[item.id] = groups[item.id] || { epic: null, children: [] };
+          groups[item.id].epic = item;
+          continue;
+        }
+      }
+      ungrouped.push(item);
+    } else {
+      groups[epicId] = groups[epicId] || { epic: null, children: [] };
+      groups[epicId].children.push(item);
+    }
+  }
+
+  for (const epicId of Object.keys(groups)) {
+    if (!groups[epicId].epic) {
+      const parentItem = allItems.find(i => String(i.id) === String(epicId));
+      groups[epicId].epicName = parentItem ? parentItem.name : 'Epic #' + epicId;
+      groups[epicId].epicStatus = parentItem ? parentItem.status : null;
+    } else {
+      groups[epicId].epicName = groups[epicId].epic.name;
+      groups[epicId].epicStatus = groups[epicId].epic.status;
+    }
+  }
+
+  const sortedGroupKeys = Object.keys(groups).sort((a, b) => {
+    const idsA = groups[a].children.map(c => Number(c.id));
+    if (groups[a].epic) idsA.push(Number(groups[a].epic.id));
+    const idsB = groups[b].children.map(c => Number(c.id));
+    if (groups[b].epic) idsB.push(Number(groups[b].epic.id));
+    const minA = idsA.length > 0 ? Math.min(...idsA) : Infinity;
+    const minB = idsB.length > 0 ? Math.min(...idsB) : Infinity;
+    return minA - minB;
+  });
+
+  return { ungrouped, groups, sortedGroupKeys };
+}
+
 // ── HTML Content Renderer (for Monday.com update bodies) ──
 
 function _sanitizeHtml(raw) {
@@ -3289,6 +3423,7 @@ function BoardPage({ selectedProject }) {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
   const [columnSorts, setColumnSorts] = useState({});
+  const [epicCollapseKey, setEpicCollapseKey] = useState(0);
 
   const fetchItems = useCallback(() => {
     setLoading(true);
@@ -3673,28 +3808,55 @@ function BoardPage({ selectedProject }) {
               <div class="kanban-items">
                 ${colItems.length === 0
                   ? html`<div class="kanban-drop-zone">No items</div>`
-                  : colItems.map(item => html`
-                    <div class="kanban-card" key=${item.id}
-                         data-status=${col.status}
-                         data-overlay=${overlayKey(item.status) || ''}
-                         draggable="true"
-                         onDragStart=${e => onDragStart(e, item.id)}
-                         onDragEnd=${onDragEnd}>
-                      <button class="card-delete" onClick=${(e) => { e.stopPropagation(); deleteItem(item.id); }} title="Delete">
-                        <${Icon} name="trash" size=${12} />
-                      </button>
-                      <div class="card-id">#${item.id}</div>
-                      <div class="card-title" style="cursor:pointer;" onClick=${() => setSelectedItem(item)}>${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.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>`}
-                        ${selectedProject === 'all' && item.project_id && html`<span class="card-badge badge-project">${item.project_id}</span>`}
-                        <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
+                  : (() => {
+                    const { ungrouped, groups, sortedGroupKeys } = partitionByEpic(colItems, items);
+                    const renderCard = (item, isParentEpic) => html`
+                      <div class=${'kanban-card' + (isParentEpic ? ' epic-parent-card' : '')} key=${item.id}
+                           data-status=${col.status}
+                           data-overlay=${overlayKey(item.status) || ''}
+                           draggable="true"
+                           onDragStart=${e => onDragStart(e, item.id)}
+                           onDragEnd=${onDragEnd}>
+                        <button class="card-delete" onClick=${(e) => { e.stopPropagation(); deleteItem(item.id); }} title="Delete">
+                          <${Icon} name="trash" size=${12} />
+                        </button>
+                        <div class="card-id">#${item.id}</div>
+                        <div class="card-title" style="cursor:pointer;" onClick=${() => setSelectedItem(item)}>${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>`}
+                          ${!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>`}
+                          ${selectedProject === 'all' && item.project_id && html`<span class="card-badge badge-project">${item.project_id}</span>`}
+                          <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
+                        </div>
                       </div>
-                    </div>
-                  `)}
+                    `;
+                    return html`
+                      ${ungrouped.map(item => renderCard(item, false))}
+                      ${sortedGroupKeys.map(epicId => {
+                        const group = groups[epicId];
+                        const collapsed = isEpicGroupCollapsed(epicId);
+                        const totalCount = (group.epic ? 1 : 0) + group.children.length;
+                        const bodyId = 'epic-group-body-' + epicId + '-' + col.id;
+                        return html`
+                          <div class=${'epic-group' + (collapsed ? ' epic-group-collapsed' : '')} data-epic-id=${epicId} key=${'eg-' + epicId}>
+                            <div class="epic-group-header" role="button" aria-expanded=${!collapsed} aria-controls=${bodyId}
+                                 onClick=${() => { saveEpicGroupCollapse(epicId, !collapsed); setEpicCollapseKey(k => k + 1); }}>
+                              <span class="epic-group-chevron">${collapsed ? '\u25BA' : '\u25BC'}</span>
+                              <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>
+                            </div>
+                            <div class="epic-group-body" id=${bodyId}>
+                              ${group.epic && renderCard(group.epic, true)}
+                              ${group.children.map(item => renderCard(item, false))}
+                            </div>
+                          </div>
+                        `;
+                      })}
+                    `;
+                  })()}
               </div>
             </div>
           `;

package/package.json

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