@beastmode-develeap/beastmode 0.1.106 → 0.1.108

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260417-234906-1f39a55";</script>
+<script>window.__BUILD_STAMP__ = "20260418-010109-1a0ff01";</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">
@@ -50,6 +50,10 @@
   --accent-subtle: rgba(245, 166, 35, 0.12);
   --accent-glow: rgba(245, 166, 35, 0.2);
 
+  /* Swimlane colors */
+  --purple: #a78bfa;
+  --orange: #f97316;
+
   /* Semantic */
   --success: #34d399;
   --success-subtle: rgba(52, 211, 153, 0.12);
@@ -97,6 +101,8 @@
   --accent-hover: #E5961A;
   --accent-subtle: rgba(245, 166, 35, 0.10);
   --accent-glow: rgba(245, 166, 35, 0.18);
+  --purple: #7c3aed;
+  --orange: #ea580c;
   --success: #059669;
   --success-subtle: rgba(5, 150, 105, 0.08);
   --danger: #dc2626;
@@ -1285,6 +1291,163 @@ input[type="range"]::-webkit-slider-thumb {
   display: none;
 }
 
+/* ================================================================
+   PIPELINE VIEW
+   ================================================================ */
+
+.pipeline-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 0 24px 0;
+}
+
+.pipeline-swimlane {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.pipeline-swimlane-collapsed .pipeline-swimlane-body {
+  display: none;
+}
+
+.pipeline-swimlane-empty {
+  opacity: 0.5;
+}
+
+.pipeline-swimlane-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--surface-elevated);
+  border-bottom: 1px solid var(--border);
+  border-left: 4px solid var(--lane-color, var(--text-muted));
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s ease;
+}
+
+.pipeline-swimlane-collapsed .pipeline-swimlane-header {
+  border-bottom: none;
+}
+
+.pipeline-swimlane-header:hover {
+  background: var(--bg-card-hover);
+}
+
+.pipeline-swimlane-chevron {
+  font-size: 10px;
+  color: var(--text-muted);
+  width: 14px;
+  text-align: center;
+}
+
+.pipeline-swimlane-color {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.pipeline-swimlane-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  flex: 1;
+  letter-spacing: 0.3px;
+}
+
+.pipeline-swimlane-count {
+  background: var(--lane-color, var(--accent));
+  color: #1a1a1a;
+  border-radius: 10px;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 22px;
+  text-align: center;
+}
+
+.pipeline-swimlane-count-zero {
+  background: var(--surface-elevated);
+  color: var(--text-muted);
+}
+
+.pipeline-swimlane-body {
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+
+.pipeline-swimlane-body::-webkit-scrollbar { height: 6px; }
+.pipeline-swimlane-body::-webkit-scrollbar-track { background: transparent; }
+.pipeline-swimlane-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.pipeline-swimlane-body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+.pipeline-column {
+  min-width: 200px;
+  max-width: 240px;
+  flex: 1;
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+}
+
+.pipeline-column:last-child {
+  border-right: none;
+}
+
+.pipeline-column.drag-over {
+  border: 2px dashed var(--accent);
+  background: var(--accent-subtle);
+  box-shadow: var(--shadow-glow);
+}
+
+.pipeline-column-header {
+  padding: 10px 12px;
+  border-top: 3px solid var(--col-color, var(--text-muted));
+  background: var(--bg-card);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.pipeline-column-items {
+  padding: 6px;
+  flex: 1;
+  min-height: 40px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+@media (max-width: 900px) {
+  .pipeline-swimlane-body {
+    flex-direction: column;
+    overflow-x: hidden;
+  }
+  .pipeline-column {
+    max-width: 100%;
+    min-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .pipeline-column:last-child {
+    border-bottom: none;
+  }
+}
+
 /* Board stats bar */
 .board-stats-bar {
   display: flex;
@@ -2953,6 +3116,72 @@ function partitionByEpic(columnItems, allItems) {
   return { ungrouped, groups, sortedGroupKeys };
 }
 
+// ── Pipeline (swimlane) helpers ──
+
+function computeSwimlaneColumns(laneConfig) {
+  const seen = new Set();
+  const ordered = [];
+  for (const taskType of (laneConfig.taskTypes || laneConfig.task_types || [])) {
+    const stages = getStagesForType(taskType);
+    for (const stage of stages) {
+      if (!seen.has(stage)) {
+        seen.add(stage);
+        ordered.push(stage);
+      }
+    }
+  }
+  return ordered;
+}
+
+function assignItemsToSwimlanes(items) {
+  const result = new Map();
+  for (const lane of SWIMLANE_CONFIG) {
+    result.set(lane.key, []);
+  }
+  for (const item of items) {
+    const lane = getSwimlaneForType(item.task_type);
+    if (result.has(lane.key)) {
+      result.get(lane.key).push(item);
+    } else {
+      result.set(lane.key, [item]);
+    }
+  }
+  return result;
+}
+
+function getColumnMeta(stageId) {
+  const col = KANBAN_COLUMNS.find(c => c.id === stageId);
+  return col
+    ? { label: col.label, color: col.color, tooltip: col.tooltip, status: col.status }
+    : { label: stageId, color: '#6b7280', tooltip: '', status: 'waiting' };
+}
+
+function getItemColumn(item, laneColumns) {
+  if (isOverlayStatus(item.status)) {
+    const effective = getEffectivePipelineColumn(item);
+    return laneColumns.includes(effective) ? effective : laneColumns[0];
+  }
+  if (!item.status || item.status === 'New' || item.status === '') {
+    return 'New';
+  }
+  return laneColumns.includes(item.status) ? item.status : laneColumns[0];
+}
+
+function isSwimlaneCollapsed(laneKey) {
+  try {
+    const state = JSON.parse(localStorage.getItem('beastmode-swimlane-collapse') || '{}');
+    return state[laneKey] === true;
+  } catch { return false; }
+}
+
+function saveSwimlaneCollapse(laneKey, collapsed) {
+  try {
+    const state = JSON.parse(localStorage.getItem('beastmode-swimlane-collapse') || '{}');
+    state[laneKey] = collapsed;
+    localStorage.setItem('beastmode-swimlane-collapse', JSON.stringify(state));
+  } catch {}
+}
+
 // ── HTML Content Renderer (for Monday.com update bodies) ──
 
 function _sanitizeHtml(raw) {
@@ -3556,6 +3785,146 @@ function CreateTaskDialog({ onClose, onCreated }) {
   `;
 }
 
+// ── Pipeline (Swimlane) View ──
+
+function PipelineView({
+  filteredItems,
+  items,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  selectedProject,
+  setSelectedItem,
+  deleteItem,
+  columnSorts,
+  cycleSort,
+  sortColumnItems,
+}) {
+  const [collapseKey, setCollapseKey] = useState(0);
+  const [, setEpicCollapseKey] = useState(0);
+
+  const laneItems = assignItemsToSwimlanes(filteredItems);
+
+  const renderCard = (item, colStatus, isParentEpic) => html`
+    <div class=${'kanban-card' + (isParentEpic ? ' epic-parent-card' : '')} key=${item.id}
+         data-status=${colStatus}
+         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>
+  `;
+
+  return html`
+    <div class="pipeline-view" data-testid="pipeline-view">
+      ${SWIMLANE_CONFIG.map(lane => {
+        const columns = computeSwimlaneColumns(lane);
+        const laneItemList = laneItems.get(lane.key) || [];
+        const collapsed = isSwimlaneCollapsed(lane.key);
+        const isEmpty = laneItemList.length === 0;
+        const swimlaneClasses = 'pipeline-swimlane'
+          + (collapsed ? ' pipeline-swimlane-collapsed' : '')
+          + (isEmpty ? ' pipeline-swimlane-empty' : '');
+        const bodyId = 'pipeline-swimlane-body-' + lane.key;
+        return html`
+          <div class=${swimlaneClasses}
+               data-testid=${'pipeline-swimlane-' + lane.key}
+               data-swimlane=${lane.key}
+               key=${'swimlane-' + lane.key}
+               style=${'--lane-color: ' + lane.color}>
+            <div class="pipeline-swimlane-header"
+                 role="button"
+                 aria-expanded=${!collapsed}
+                 aria-controls=${bodyId}
+                 onClick=${() => { saveSwimlaneCollapse(lane.key, !collapsed); setCollapseKey(k => k + 1); }}>
+              <span class="pipeline-swimlane-chevron">${collapsed ? '\u25BA' : '\u25BC'}</span>
+              <span class="pipeline-swimlane-color" style=${'background: ' + lane.color}></span>
+              <span class="pipeline-swimlane-label">${lane.label}</span>
+              <span class=${'pipeline-swimlane-count' + (isEmpty ? ' pipeline-swimlane-count-zero' : '')}>${laneItemList.length}</span>
+            </div>
+            <div class="pipeline-swimlane-body" id=${bodyId}>
+              ${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] || '';
+                return html`
+                  <div class="pipeline-column"
+                       data-testid=${'pipeline-col-' + colId}
+                       data-column=${colId}
+                       key=${'pc-' + lane.key + '-' + colId}
+                       onDragOver=${onDragOver}
+                       onDragLeave=${onDragLeave}
+                       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>
+                      <span class=${'kanban-count' + (colItems.length === 0 ? ' kanban-count-zero' : '')}>${colItems.length}</span>
+                    </div>
+                    <div class="pipeline-column-items">
+                      ${colItems.length === 0
+                        ? html`<div class="kanban-drop-zone">No items</div>`
+                        : (() => {
+                          const { ungrouped, groups, sortedGroupKeys } = partitionByEpic(colItems, items);
+                          return html`
+                            ${ungrouped.map(item => renderCard(item, meta.status, false))}
+                            ${sortedGroupKeys.map(epicId => {
+                              const group = groups[epicId];
+                              const epCollapsed = isEpicGroupCollapsed(epicId);
+                              const totalCount = (group.epic ? 1 : 0) + group.children.length;
+                              const egBodyId = 'pipeline-epic-body-' + epicId + '-' + lane.key + '-' + colId;
+                              return html`
+                                <div class=${'epic-group' + (epCollapsed ? ' epic-group-collapsed' : '')}
+                                     data-epic-id=${epicId}
+                                     key=${'eg-' + epicId}>
+                                  <div class="epic-group-header"
+                                       role="button"
+                                       aria-expanded=${!epCollapsed}
+                                       aria-controls=${egBodyId}
+                                       onClick=${() => { saveEpicGroupCollapse(epicId, !epCollapsed); setEpicCollapseKey(k => k + 1); }}>
+                                    <span class="epic-group-chevron">${epCollapsed ? '\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=${egBodyId}>
+                                    ${group.epic && renderCard(group.epic, meta.status, true)}
+                                    ${group.children.map(item => renderCard(item, meta.status, false))}
+                                  </div>
+                                </div>
+                              `;
+                            })}
+                          `;
+                        })()}
+                    </div>
+                  </div>
+                `;
+              })}
+            </div>
+          </div>
+        `;
+      })}
+    </div>
+  `;
+}
+
 // ── Board Page ──
 
 function BoardPage({ selectedProject }) {
@@ -3570,6 +3939,13 @@ function BoardPage({ selectedProject }) {
   const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
   const [columnSorts, setColumnSorts] = useState({});
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
+  const viewMode = (() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      if (params.get('view') === 'pipeline') return 'pipeline';
+    } catch {}
+    return 'board';
+  })();
 
   const fetchItems = useCallback(() => {
     setLoading(true);
@@ -3911,6 +4287,23 @@ function BoardPage({ selectedProject }) {
         </div>
       `}
 
+      ${viewMode === 'pipeline'
+        ? html`<${PipelineView}
+            filteredItems=${filteredItems}
+            items=${items}
+            onDragStart=${onDragStart}
+            onDragEnd=${onDragEnd}
+            onDragOver=${onDragOver}
+            onDragLeave=${onDragLeave}
+            onDrop=${onDrop}
+            selectedProject=${selectedProject}
+            setSelectedItem=${setSelectedItem}
+            deleteItem=${deleteItem}
+            columnSorts=${columnSorts}
+            cycleSort=${cycleSort}
+            sortColumnItems=${sortColumnItems}
+          />`
+        : html`
       <div class="kanban-wrapper">
       <div class="kanban-scroll-bar">
         <button class="kanban-scroll-btn" onClick=${() => {
@@ -4009,6 +4402,7 @@ function BoardPage({ selectedProject }) {
         })}
       </div>
       </div>
+      `}
 
       ${showCreateDialog && html`<${CreateTaskDialog} onClose=${() => setShowCreateDialog(false)} onCreated=${fetchItems} />`}
       ${selectedItem && html`<${ItemDetailSidebar} item=${selectedItem} onClose=${() => setSelectedItem(null)} onStatusChange=${() => { fetchItems(); setSelectedItem(null); }} />`}
@@ -6660,6 +7054,19 @@ function App() {
     setSelectedProjectRaw(value);
   }, []);
 
+  // If ?view=pipeline or ?view=board is in the URL but no hash route is
+  // set, the router would default to Dashboard. Redirect to #/board so
+  // the board page renders (and BoardPage can read the ?view= param).
+  useEffect(() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const view = params.get('view');
+      if ((view === 'pipeline' || view === 'board') && (!location.hash || location.hash === '#/' || location.hash === '#')) {
+        navigate('#/board');
+      }
+    } catch (_) {}
+  }, []);
+
   const boardData = window.__BOARD_DATA__ || {};
   const factoryName = boardData.factoryName || 'BeastMode Factory';
 

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260417-234906-1f39a55
+20260418-010109-1a0ff01

package/package.json

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