@beastmode-develeap/beastmode 0.1.292 → 0.1.294

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260517-064857-d60f0d5";</script>
+<script>window.__BUILD_STAMP__ = "20260517-084327-d4efb67";</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">
@@ -2504,6 +2504,17 @@ input[type="range"]::-webkit-slider-thumb {
   letter-spacing: 0.01em;
 }
 
+/* Forecast badge on card — shown only when no actual cost exists */
+.card-badge.badge-forecast {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #6b7280);
+  border: 1px dashed var(--border, #d1d5db);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-style: italic;
+  letter-spacing: 0.01em;
+}
+
 /* Detail sidebar cost section */
 .detail-cost-section {
   padding: 12px 24px;
@@ -6328,6 +6339,7 @@ function PipelineView({
   globalSort,
   sortColumnItems,
   costsByItem,
+  forecastsByItem,
   envVerifyByItem,
 }) {
   const [collapseKey, setCollapseKey] = useState(0);
@@ -6365,7 +6377,16 @@ function PipelineView({
         ${(() => {
           const cost = costsByItem && costsByItem[String(item.id)];
           const label = cost ? formatCost(cost.total_cost_usd) : null;
-          return label ? html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>` : null;
+          if (label) {
+            return html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>`;
+          }
+          const fc = forecastsByItem && forecastsByItem[String(item.id)];
+          if (fc && typeof fc.median === 'number') {
+            const flabel = '~' + formatCost(fc.median);
+            const title = 'Forecast: ' + formatCost(fc.low) + ' – ' + formatCost(fc.high) + ' (' + fc.confidence + ')';
+            return html`<span class="card-badge-wrap"><span class="card-badge badge-forecast" title=${title}>${flabel}</span></span>`;
+          }
+          return null;
         })()}
         ${(() => {
           const env = item.extra && item.extra.current_env;
@@ -6712,6 +6733,7 @@ function BoardPage({ selectedProject }) {
   const [sortOpen, setSortOpen] = useState(false);
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
   const [costsByItem, setCostsByItem] = useState({});
+  const [forecastsByItem, setForecastsByItem] = useState({});
   const [envVerifyByItem, setEnvVerifyByItem] = useState({});
   const [viewMode, setViewMode] = useState(() => {
     try {
@@ -6789,6 +6811,18 @@ function BoardPage({ selectedProject }) {
       .catch(() => {});
   }, [selectedProject]);
 
+  // Forecast badges: cards without actual cost yet get a predicted
+  // cost range based on historical k-NN over Done items. The endpoint
+  // returns null for items with insufficient neighbor data; those
+  // cards show no forecast badge at all.
+  const fetchForecasts = useCallback(() => {
+    const boardParam = (selectedProject && selectedProject !== 'all') ? '?board=' + encodeURIComponent(selectedProject) : '';
+    fetch('/api/costs/forecasts' + boardParam)
+      .then(r => r.ok ? r.json() : { forecasts: {} })
+      .then(data => setForecastsByItem((data && data.forecasts) || {}))
+      .catch(() => {});
+  }, [selectedProject]);
+
   // Story 7: batch-fetch env verify status for items that have a current_env.
   // The endpoint is per-item, so we issue parallel requests with allSettled
   // — failed individual fetches don't block the others, and the badge falls
@@ -6826,12 +6860,14 @@ function BoardPage({ selectedProject }) {
   useEffect(() => {
     fetchItems();
     fetchCosts();
+    fetchForecasts();
     const interval = setInterval(() => {
       // Silent refresh — don't show loading spinner on polls
       api('GET', '/api/board/items')
         .then(data => setItems(data.items || []))
         .catch(() => {});
       fetchCosts();
+      fetchForecasts();
     }, 10000);
     return () => clearInterval(interval);
   }, [selectedProject]);
@@ -7499,6 +7535,7 @@ function BoardPage({ selectedProject }) {
             globalSort=${globalSort}
             sortColumnItems=${sortColumnItems}
             costsByItem=${costsByItem}
+            forecastsByItem=${forecastsByItem}
             envVerifyByItem=${envVerifyByItem}
           />`
         : html`
@@ -7576,7 +7613,16 @@ function BoardPage({ selectedProject }) {
                           ${(() => {
                             const cost = costsByItem && costsByItem[String(item.id)];
                             const label = cost ? formatCost(cost.total_cost_usd) : null;
-                            return label ? html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>` : null;
+                            if (label) {
+                              return html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>`;
+                            }
+                            const fc = forecastsByItem && forecastsByItem[String(item.id)];
+                            if (fc && typeof fc.median === 'number') {
+                              const flabel = '~' + formatCost(fc.median);
+                              const title = 'Forecast: ' + formatCost(fc.low) + ' – ' + formatCost(fc.high) + ' (' + fc.confidence + ')';
+                              return html`<span class="card-badge-wrap"><span class="card-badge badge-forecast" title=${title}>${flabel}</span></span>`;
+                            }
+                            return null;
                           })()}
                           ${(() => {
                             const env = item.extra && item.extra.current_env;
@@ -10982,13 +11028,11 @@ function CostsPage({ selectedProject }) {
     .map(([cat, amount]) => ({ cat, amount }));
 
   const categoryColors = {
-    spec: '#3b82f6',
-    build: '#10b981',
-    verify: '#f59e0b',
-    review: '#8b5cf6',
-    epic: '#ec4899',
+    productive: '#10b981',
+    retry: '#f59e0b',
     heal: '#ef4444',
-    infra: '#06b6d4',
+    wasted_decomposition: '#8b5cf6',
+    bug_gc_followup: '#ec4899',
     mixed: 'var(--text-muted)',
   };
 

package/dist/web/build-commit.txt

@@ -1 +1 @@
-d60f0d51267f04b9ec994dbcd5f19db788e271c6
+d4efb676cd5deb3ff779c0a5e48ee581a62bc96d

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260517-064857-d60f0d5
+20260517-084327-d4efb67

package/package.json

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