@beastmode-develeap/beastmode 0.1.263 → 0.1.264

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260515-111550-43871cf";</script>
+<script>window.__BUILD_STAMP__ = "20260515-112233-b18940e";</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">
@@ -3957,7 +3957,7 @@ fetch('/api/pipeline-config')
 // ================================================================
 // CDN Imports
 // ================================================================
-import { h, render } from 'https://unpkg.com/preact@10.25.4/dist/preact.module.js';
+import { h, render, Fragment } from 'https://unpkg.com/preact@10.25.4/dist/preact.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';
 
@@ -10776,6 +10776,8 @@ function CostsPage({ selectedProject }) {
   const [boardItems, setBoardItems] = useState([]);
   const [phaseData, setPhaseData] = useState([]);
   const [inFlightItems, setInFlightItems] = useState([]);
+  const [byIterationMap, setByIterationMap] = useState({});
+  const [expandedRows, setExpandedRows] = useState({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [sortCol, setSortCol] = useState('cost');
@@ -10817,6 +10819,7 @@ function CostsPage({ selectedProject }) {
         const itemIds = Object.keys(costsData || {});
         if (itemIds.length > 0) {
           const phaseMap = {};
+          const iterMap = {};
           const summaryResults = await Promise.allSettled(
             itemIds.map(id => {
               const qs = (selectedProject && selectedProject !== 'all')
@@ -10825,17 +10828,26 @@ function CostsPage({ selectedProject }) {
               return api('GET', '/api/items/' + id + '/costs/summary' + qs);
             })
           );
-          summaryResults.forEach(result => {
-            if (result.status === 'fulfilled' && result.value && result.value.phases) {
-              for (const [phaseName, phaseInfo] of Object.entries(result.value.phases)) {
-                phaseMap[phaseName] = (phaseMap[phaseName] || 0) + (phaseInfo.cost_usd || 0);
+          summaryResults.forEach((result, idx) => {
+            if (result.status === 'fulfilled' && result.value) {
+              const itemId = itemIds[idx];
+              if (result.value.phases) {
+                for (const [phaseName, phaseInfo] of Object.entries(result.value.phases)) {
+                  phaseMap[phaseName] = (phaseMap[phaseName] || 0) + (phaseInfo.cost_usd || 0);
+                }
+              }
+              if (Array.isArray(result.value.by_iteration)) {
+                iterMap[itemId] = result.value.by_iteration;
               }
             }
           });
           const sorted = Object.entries(phaseMap)
             .map(([phase, cost]) => ({ phase, cost }))
             .sort((a, b) => b.cost - a.cost);
-          if (!cancelled) setPhaseData(sorted);
+          if (!cancelled) {
+            setPhaseData(sorted);
+            setByIterationMap(iterMap);
+          }
         }
       } catch (e) {
         if (!cancelled) setError(e.message || 'Failed to load cost data');
@@ -10878,6 +10890,7 @@ function CostsPage({ selectedProject }) {
       totalTokens: (costs.total_input_tokens || 0) + (costs.total_output_tokens || 0),
       costUsd: costs.total_cost_usd || 0,
       records: costs.record_count || 0,
+      byIteration: byIterationMap[itemId] || [],
     };
   });
 
@@ -10992,16 +11005,38 @@ function CostsPage({ selectedProject }) {
               </tr>
             </thead>
             <tbody>
-              ${sortedRows.map(row => html`
-                <tr key=${row.id} class="costs-tr" 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}>${row.name}</td>
-                  <td class="costs-td"><span class=${'badge ' + statusBadgeClass(row.status)}>${row.status}</span></td>
-                  <td class="costs-td costs-td-mono">${formatTokens(row.totalTokens)}</td>
-                  <td class="costs-td costs-td-mono">$${row.costUsd.toFixed(2)}</td>
-                  <td class="costs-td costs-td-mono">${row.records}</td>
-                </tr>
-              `)}
+              ${sortedRows.map(row => {
+                const hasMultiIter = row.byIteration && row.byIteration.length > 1;
+                const isExpanded = !!expandedRows[row.id];
+                const toggle = (e) => {
+                  e.stopPropagation();
+                  setExpandedRows(prev => ({ ...prev, [row.id]: !prev[row.id] }));
+                };
+                return html`
+                  <${Fragment} key=${row.id}>
+                    <tr class="costs-tr" onClick=${() => navigate('#/board?item=' + row.id)}>
+                      <td class="costs-td costs-td-mono">
+                        ${hasMultiIter ? html`<span class="costs-expand-toggle" onClick=${toggle} style="cursor:pointer;display:inline-block;width:14px;">${isExpanded ? '▼' : '▶'}</span> ` : ''}#${row.id}
+                      </td>
+                      <td class="costs-td costs-td-name" title=${row.name}>${row.name}</td>
+                      <td class="costs-td"><span class=${'badge ' + statusBadgeClass(row.status)}>${row.status}</span></td>
+                      <td class="costs-td costs-td-mono">${formatTokens(row.totalTokens)}</td>
+                      <td class="costs-td costs-td-mono">$${row.costUsd.toFixed(2)}</td>
+                      <td class="costs-td costs-td-mono">${row.records}</td>
+                    </tr>
+                    ${hasMultiIter && isExpanded ? row.byIteration.map(it => html`
+                      <tr key=${'iter-' + row.id + '-' + it.iteration} class="costs-tr costs-iter-row" style="background:rgba(0,0,0,0.02);">
+                        <td class="costs-td costs-td-mono" style="padding-left:32px;">Iter ${it.iteration}</td>
+                        <td class="costs-td costs-td-name" style="opacity:0.7;">↳ iteration ${it.iteration}</td>
+                        <td class="costs-td"></td>
+                        <td class="costs-td costs-td-mono">${formatTokens((it.input_tokens || 0) + (it.output_tokens || 0))}</td>
+                        <td class="costs-td costs-td-mono">${it.cost_usd != null ? '$' + it.cost_usd.toFixed(2) : '—'}</td>
+                        <td class="costs-td costs-td-mono">${it.record_count || 0}</td>
+                      </tr>
+                    `) : ''}
+                  </${Fragment}>
+                `;
+              })}
             </tbody>
           </table>
         </div>

package/dist/web/build-commit.txt

@@ -1 +1 @@
-43871cf4eea7789ef20aeed2f50e97a7b722d510
+b18940e14eaa9237e2ee985b0e2a369348447fe0

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260515-111550-43871cf
+20260515-112233-b18940e

package/package.json

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