@beastmode-develeap/beastmode 0.1.261 → 0.1.262

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260515-100532-d75f8b8";</script>
+<script>window.__BUILD_STAMP__ = "20260515-105557-41eb86a";</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">
@@ -5579,8 +5579,11 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
   const [attachments, setAttachments] = useState([]);
   const [loadingAttachments, setLoadingAttachments] = useState(true);
   const [costSummary, setCostSummary] = useState(null);
+  const [liveCost, setLiveCost] = useState(null);
   const [loadingCost, setLoadingCost] = useState(true);
   const [phaseData, setPhaseData] = useState([]);
+  const TERMINAL_STATUSES = ['Done', 'Superseded', 'New', 'Drafts', 'Ready'];
+  const isNonTerminal = item && item.status && !TERMINAL_STATUSES.includes(item.status);
   const [envTimeline, setEnvTimeline] = useState(null);
   const [deployModal, setDeployModal] = useState(null);
   const [auditEvents, setAuditEvents] = useState([]);
@@ -5658,7 +5661,15 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
       .then(r => r.ok ? r.json() : null)
       .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
       .catch(() => setCostSummary(null));
-  }, [item && item.id]);
+    if (isNonTerminal) {
+      fetch('/api/items/' + item.id + '/costs/live' + boardParam)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => setLiveCost(data && data.record_count > 0 ? data : null))
+        .catch(() => setLiveCost(null));
+    } else {
+      setLiveCost(null);
+    }
+  }, [item && item.id, isNonTerminal]);
 
   const refreshPhaseData = useCallback(() => {
     if (!item) return;
@@ -5716,6 +5727,14 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
       .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
       .catch(() => setCostSummary(null))
       .finally(() => setLoadingCost(false));
+    if (isNonTerminal) {
+      fetch('/api/items/' + item.id + '/costs/live' + boardParam)
+        .then(r => r.ok ? r.json() : null)
+        .then(data => setLiveCost(data && data.record_count > 0 ? data : null))
+        .catch(() => setLiveCost(null));
+    } else {
+      setLiveCost(null);
+    }
     // Also fetch the per-phase breakdown for the expandable table
     fetch('/api/items/' + item.id + '/costs/by-phase' + boardParam)
       .then(r => r.ok ? r.json() : [])
@@ -5902,6 +5921,11 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
               <span style="font-family:var(--font-mono);color:var(--success);">$</span>
               Cost Summary
             </h4>
+            ${liveCost && html`
+              <div class="cost-live-iter-indicator" data-testid="live-iteration-indicator" style="margin-bottom:8px;padding:6px 10px;border-radius:4px;background:rgba(245,158,11,0.1);color:#f59e0b;font-size:12px;font-weight:600;">
+                Iteration ${liveCost.current_iteration} · ${liveCost.latest_phase || 'pending'}
+              </div>
+            `}
             <div class="cost-totals">
               <div class="cost-total-item">
                 <span class="cost-total-label">Total Cost</span>
@@ -5916,6 +5940,21 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
                 <span class="cost-total-value">${formatDuration(costSummary.total_duration_seconds)}</span>
               </div>
             </div>
+            ${liveCost && liveCost.by_iteration && liveCost.by_iteration.length > 0 && html`
+              <div class="cost-by-iteration" data-testid="live-by-iteration" style="margin-top:10px;font-size:12px;">
+                <div style="font-weight:600;margin-bottom:4px;color:var(--text-dim);">By Iteration</div>
+                ${liveCost.by_iteration.map((it, idx) => {
+                  const isLast = idx === liveCost.by_iteration.length - 1;
+                  const isCurrent = isNonTerminal && isLast;
+                  const phaseList = (it.phases || []).join(', ');
+                  return html`
+                    <div key=${it.iteration} data-testid=${'live-iter-' + it.iteration} style="display:flex;justify-content:space-between;padding:2px 0;">
+                      <span>Iter ${it.iteration}: ${formatCost(it.cost_usd) || '$0.00'} (${phaseList})${isCurrent ? html`<span style="color:#f59e0b;margin-left:6px;">← current</span>` : ''}</span>
+                    </div>
+                  `;
+                })}
+              </div>
+            `}
             ${phaseData && phaseData.length > 0
               ? html`<${CostPhaseTable} itemId=${item.id} boardParam=${(() => { const p = localStorage.getItem('beastmode-selected-project') || ''; return (p && p !== 'all') ? '?board=' + encodeURIComponent(p) : ''; })()} />`
               : (costSummary.phases && Object.keys(costSummary.phases).length > 0 && html`
@@ -10736,6 +10775,7 @@ function CostsPage({ selectedProject }) {
   const [costsByItems, setCostsByItems] = useState({});
   const [boardItems, setBoardItems] = useState([]);
   const [phaseData, setPhaseData] = useState([]);
+  const [inFlightItems, setInFlightItems] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [sortCol, setSortCol] = useState('cost');
@@ -10749,15 +10789,30 @@ function CostsPage({ selectedProject }) {
         const costQs = (selectedProject && selectedProject !== 'all')
           ? '?board=' + encodeURIComponent(selectedProject)
           : '';
+        const inFlightQs = (selectedProject && selectedProject !== 'all')
+          ? '?board=' + encodeURIComponent(selectedProject) + '&threshold=5'
+          : '?threshold=5';
 
-        const [costsData, boardData] = await Promise.all([
+        const [costsData, boardData, inFlightData] = await Promise.all([
           api('GET', '/api/costs/by-items' + costQs),
           api('GET', '/api/board/items'),
+          api('GET', '/api/costs/in-flight' + inFlightQs).catch(() => ({})),
         ]);
 
         if (cancelled) return;
         setCostsByItems(costsData || {});
         setBoardItems((boardData && boardData.items) || []);
+        const inFlightArr = Object.values(inFlightData || {})
+          .map(r => ({
+            id: r.item_id,
+            name: r.name || ('Item #' + r.item_id),
+            status: r.status || '',
+            costUsd: r.total_cost_usd || 0,
+            iteration: r.max_iteration || 0,
+            latestPhase: r.latest_phase || '',
+          }))
+          .sort((a, b) => b.costUsd - a.costUsd);
+        setInFlightItems(inFlightArr);
 
         const itemIds = Object.keys(costsData || {});
         if (itemIds.length > 0) {
@@ -10883,6 +10938,42 @@ function CostsPage({ selectedProject }) {
         </div>
       </div>
 
+      ${inFlightItems.length > 0 && html`
+        <div class="card" data-testid="currently-running-card" style="margin-bottom:24px;border-left:4px solid #f59e0b;">
+          <div class="card-header">
+            <h3 style="color:#f59e0b;">Currently Running</h3>
+            <span class="badge badge-accent">${inFlightItems.length} in-flight</span>
+          </div>
+          <div class="costs-table-wrapper">
+            <table class="costs-table" data-testid="currently-running-table">
+              <thead>
+                <tr>
+                  <th class="costs-th costs-th-id">ID</th>
+                  <th class="costs-th costs-th-name">Task</th>
+                  <th class="costs-th costs-th-status">Status</th>
+                  <th class="costs-th costs-th-cost">Cost (USD)</th>
+                  <th class="costs-th costs-th-records">Iter</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${inFlightItems.map(row => {
+                  const truncatedName = row.name.length > 40 ? row.name.slice(0, 40) + '…' : row.name;
+                  return html`
+                    <tr key=${row.id} class="costs-tr" data-testid=${'in-flight-row-' + row.id} onClick=${() => navigate('#/board?item=' + row.id)}>
+                      <td class="costs-td costs-td-mono">#${row.id}</td>
+                      <td class="costs-td costs-td-name" title=${row.name}>${truncatedName}</td>
+                      <td class="costs-td"><span class=${'badge ' + statusBadgeClass(row.status)}>${row.status}</span></td>
+                      <td class="costs-td costs-td-mono" data-testid=${'in-flight-cost-' + row.id}>$${row.costUsd.toFixed(2)}</td>
+                      <td class="costs-td costs-td-mono">${row.iteration}</td>
+                    </tr>
+                  `;
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      `}
+
       <div class="card">
         <div class="card-header">
           <h3>Cost by Task</h3>

package/dist/web/build-commit.txt

@@ -1 +1 @@
-d75f8b8d1254cbe77cd31012325cc3dc64c7cd37
+41eb86adb1d258a1079cdd20df0288a10655dc77

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260515-100532-d75f8b8
+20260515-105557-41eb86a

package/package.json

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