@beastmode-develeap/beastmode 0.1.119 → 0.1.121

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260418-141101-0c947a4";</script>
+<script>window.__BUILD_STAMP__ = "20260418-190841-6b44897";</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">
@@ -1448,6 +1448,117 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
+/* Pipeline health panel */
+.pipeline-health {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 16px;
+  margin-bottom: 16px;
+}
+.pipeline-health-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.pipeline-health-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+.pipeline-health-chevron {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.15s ease;
+}
+.pipeline-health-global-text {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+.pipeline-health-bar-global {
+  height: 6px;
+  background: var(--bg-input);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.pipeline-health-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+  background: var(--success);
+}
+.pipeline-health-swimlanes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.swimlane-mini {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.swimlane-mini-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+.swimlane-mini-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+}
+.swimlane-mini-bar {
+  height: 4px;
+  background: var(--bg-input);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.swimlane-mini-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.pipeline-health-warnings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+.bottleneck-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--radius-xs);
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--warning-subtle);
+  color: var(--warning);
+  border: 1px solid rgba(251, 191, 36, 0.2);
+}
+.pipeline-health.collapsed .pipeline-health-bar-global,
+.pipeline-health.collapsed .pipeline-health-swimlanes,
+.pipeline-health.collapsed .pipeline-health-warnings {
+  display: none;
+}
+@media (max-width: 768px) {
+  .pipeline-health-swimlanes { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 480px) {
+  .pipeline-health-swimlanes { grid-template-columns: 1fr; }
+}
+
 /* Board stats bar */
 .board-stats-bar {
   display: flex;
@@ -2615,7 +2726,7 @@ fetch('/api/pipeline-config')
 // CDN Imports
 // ================================================================
 import { h, render } from 'https://unpkg.com/preact@10.25.4/dist/preact.module.js';
-import { useState, useEffect, useCallback, useRef } from 'https://unpkg.com/preact@10.25.4/hooks/dist/hooks.module.js';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'https://unpkg.com/preact@10.25.4/hooks/dist/hooks.module.js';
 import htm from 'https://unpkg.com/htm@3.1.1/dist/htm.module.js';
 
 const html = htm.bind(h);
@@ -3288,6 +3399,91 @@ window.overlayKey = overlayKey;
 window.overlayTooltip = overlayTooltip;
 window.getEffectivePipelineColumn = getEffectivePipelineColumn;
 
+function swimlaneColor(colorKey) {
+  const map = {
+    'accent': 'var(--accent)', 'var(--accent)': 'var(--accent)',
+    'purple': '#a78bfa', 'var(--purple)': '#a78bfa',
+    'orange': '#f97316', 'var(--orange)': '#f97316',
+    'muted': 'var(--text-muted)', 'var(--text-muted)': 'var(--text-muted)',
+  };
+  return map[colorKey] || 'var(--accent)';
+}
+window.swimlaneColor = swimlaneColor;
+
+function computePipelineStats(items) {
+  const config = window.PIPELINE_CONFIG || {};
+  const swimlanes = config.swimlanes || [];
+  const typeStages = config.type_stages || {};
+
+  const totalItems = items.length;
+  const doneItems = items.filter(i => i.status === 'Done').length;
+  const stuckItems = items.filter(i => i.status === 'Stuck').length;
+  const activeItems = items.filter(i =>
+    i.status && i.status !== 'New' && i.status !== 'Done' && i.status !== 'Stuck' && i.status !== ''
+  ).length;
+  const globalProgress = totalItems > 0 ? doneItems / totalItems : 0;
+
+  const swimlaneStats = swimlanes.map(lane => {
+    const taskTypes = lane.taskTypes || lane.task_types || [];
+    const laneItems = items.filter(i => taskTypes.includes(i.task_type || 'code'));
+    const total = laneItems.length;
+    const done = laneItems.filter(i => i.status === 'Done').length;
+    const stuck = laneItems.filter(i => i.status === 'Stuck').length;
+    const active = laneItems.filter(i =>
+      i.status && i.status !== 'New' && i.status !== 'Done' && i.status !== 'Stuck' && i.status !== ''
+    ).length;
+
+    const repType = taskTypes[0] || 'code';
+    const stages = typeStages[repType] || typeStages['code'] || [];
+    const stageCounts = {};
+    stages.forEach(s => { stageCounts[s] = 0; });
+    laneItems.forEach(item => {
+      const col = getEffectivePipelineColumn(item);
+      if (col in stageCounts) stageCounts[col]++;
+      else stageCounts[col] = (stageCounts[col] || 0) + 1;
+    });
+
+    let bottleneck = null, maxCount = 0;
+    for (const [stage, count] of Object.entries(stageCounts)) {
+      if (stage === 'New' || stage === 'Done') continue;
+      if (count > maxCount) { maxCount = count; bottleneck = stage; }
+    }
+
+    return {
+      key: lane.key, label: lane.label, color: lane.color,
+      total, done, active, stuck,
+      progress: total > 0 ? done / total : 0,
+      stageCounts, bottleneck, bottleneckCount: maxCount,
+    };
+  });
+
+  const allActiveCounts = [];
+  swimlaneStats.forEach(lane => {
+    Object.entries(lane.stageCounts).forEach(([stage, count]) => {
+      if (stage !== 'New' && stage !== 'Done' && count > 0) allActiveCounts.push(count);
+    });
+  });
+  const avgCount = allActiveCounts.length > 0
+    ? allActiveCounts.reduce((a, b) => a + b, 0) / allActiveCounts.length : 0;
+
+  const bottlenecks = [];
+  swimlaneStats.forEach(lane => {
+    Object.entries(lane.stageCounts).forEach(([stage, count]) => {
+      if (stage === 'New' || stage === 'Done') return;
+      if (count > 0 && count >= avgCount * 2) {
+        bottlenecks.push({
+          swimlane: lane.key, swimlaneLabel: lane.label,
+          stage, count, thresholdExceeded: true,
+        });
+      }
+    });
+  });
+
+  return { totalItems, doneItems, activeItems, stuckItems, globalProgress, swimlaneStats, bottlenecks };
+}
+window.computePipelineStats = computePipelineStats;
+window.__BEASTMODE_PIPELINE_STATS__ = null;
+
 function isEpicGroupCollapsed(epicId) {
   try {
     const state = JSON.parse(localStorage.getItem('beastmode-epic-collapse') || '{}');
@@ -4242,6 +4438,96 @@ function PipelineView({
   `;
 }
 
+// ── Pipeline Health ──
+
+function SwimlaneMiniBar({ stat }) {
+  const pct = Math.round((stat.progress || 0) * 100);
+  const color = swimlaneColor(stat.color);
+  return html`
+    <div class="swimlane-mini">
+      <div class="swimlane-mini-label">
+        <span>${stat.label}</span>
+        <span class="swimlane-mini-count">${stat.done}/${stat.total}</span>
+      </div>
+      <div class="swimlane-mini-bar"
+           role="progressbar"
+           aria-valuenow=${pct}
+           aria-valuemin="0"
+           aria-valuemax="100"
+           aria-label=${`${stat.label}: ${pct}% complete`}>
+        <div class="swimlane-mini-fill"
+             style=${`width: ${pct}%; background: ${color};`}></div>
+      </div>
+    </div>
+  `;
+}
+
+function BottleneckBadge({ warning }) {
+  const title = `${warning.swimlaneLabel}: ${warning.count} items stuck in ${warning.stage}`;
+  return html`
+    <span class="bottleneck-badge" title=${title}>
+      \u26A0 ${warning.swimlaneLabel}: ${warning.count} in ${warning.stage}
+    </span>
+  `;
+}
+
+function PipelineHealth({ items }) {
+  const stats = useMemo(() => computePipelineStats(items || []), [items]);
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return localStorage.getItem('beastmode-pipeline-health-collapsed') === 'true'; }
+    catch { return false; }
+  });
+
+  useEffect(() => {
+    window.__BEASTMODE_PIPELINE_STATS__ = stats;
+  }, [stats]);
+
+  const toggle = () => {
+    setCollapsed(v => {
+      const next = !v;
+      try { localStorage.setItem('beastmode-pipeline-health-collapsed', String(next)); } catch {}
+      return next;
+    });
+  };
+
+  const globalPct = Math.round((stats.globalProgress || 0) * 100);
+  const globalText = `${stats.doneItems}/${stats.totalItems} done (${globalPct}%)`;
+
+  return html`
+    <div class=${'pipeline-health' + (collapsed ? ' collapsed' : '')}
+         data-testid="pipeline-health">
+      <div class="pipeline-health-header" onClick=${toggle}>
+        <div class="pipeline-health-title">
+          <span class="pipeline-health-chevron">${collapsed ? '\u25B8' : '\u25BE'}</span>
+          <span>Pipeline Health</span>
+        </div>
+        <div class="pipeline-health-global-text">${globalText}</div>
+      </div>
+      <div class="pipeline-health-bar-global"
+           role="progressbar"
+           aria-valuenow=${globalPct}
+           aria-valuemin="0"
+           aria-valuemax="100"
+           aria-label=${`Pipeline progress: ${globalPct}%`}>
+        <div class="pipeline-health-bar-fill"
+             style=${`width: ${globalPct}%`}></div>
+      </div>
+      <div class="pipeline-health-swimlanes">
+        ${stats.swimlaneStats.map(stat => html`
+          <${SwimlaneMiniBar} key=${stat.key} stat=${stat} />
+        `)}
+      </div>
+      ${stats.bottlenecks.length > 0 && html`
+        <div class="pipeline-health-warnings">
+          ${stats.bottlenecks.map((w, i) => html`
+            <${BottleneckBadge} key=${i} warning=${w} />
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}
+
 // ── Board Page ──
 
 function BoardPage({ selectedProject }) {
@@ -4564,6 +4850,9 @@ 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 progressPct = totalItems > 0 ? Math.round((doneItems / totalItems) * 100) : 0;
   const isFiltered = searchTerm.length >= 2 || activeFilterCount > 0;
 
   return html`
@@ -4580,6 +4869,9 @@ function BoardPage({ selectedProject }) {
           <span class="stat-label">Board</span>
           <span class="stat-item"><strong>${totalItems}</strong>${isFiltered ? '/' + items.length : ''} total</span>
           <span class="stat-item"><strong>${activeItems}</strong> active</span>
+          <span class="stat-item" style="color: var(--success);"><strong style="color: var(--success);">${doneItems}</strong> done</span>
+          ${stuckItems > 0 && html`<span class="stat-item" style="color: var(--danger);"><strong style="color: var(--danger);">${stuckItems}</strong> stuck</span>`}
+          <span class="stat-item" style="color: var(--accent);"><strong style="color: var(--accent); font-family: var(--font-mono);">${progressPct}%</strong> complete</span>
         </div>
 
         <div class="board-search-wrap">
@@ -4655,6 +4947,8 @@ function BoardPage({ selectedProject }) {
         </div>
       `}
 
+      ${items.length > 0 && html`<${PipelineHealth} items=${filteredItems} />`}
+
       ${viewMode === 'pipeline'
         ? html`<${PipelineView}
             filteredItems=${filteredItems}

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260418-141101-0c947a4
+20260418-190841-6b44897

package/package.json

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