@beastmode-develeap/beastmode 0.1.110 → 0.1.111

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260418-082837-7de1d16";</script>
+<script>window.__BUILD_STAMP__ = "20260418-125234-6f01092";</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">
@@ -2149,6 +2149,115 @@ input[type="range"]::-webkit-slider-thumb {
   gap: 8px;
 }
 
+/* ================================================================
+   COSTS PAGE
+   ================================================================ */
+
+.costs-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.costs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-sans);
+  font-size: 13px;
+}
+
+.costs-th {
+  text-align: left;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.costs-th:hover {
+  color: var(--accent);
+}
+
+.costs-tr {
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.costs-tr:hover {
+  background: var(--bg-card-hover);
+}
+
+.costs-td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+.costs-td-mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.costs-td-name {
+  font-weight: 500;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.costs-phase-chart {
+  padding: 16px 0;
+}
+
+.costs-phase-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 16px;
+}
+
+.costs-phase-label {
+  width: 100px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: capitalize;
+  flex-shrink: 0;
+}
+
+.costs-phase-bar-bg {
+  flex: 1;
+  height: 24px;
+  background: var(--accent-subtle);
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+}
+
+.costs-phase-bar-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: var(--radius-xs);
+  transition: width 0.4s ease;
+  min-width: 2px;
+}
+
+.costs-phase-amount {
+  width: 80px;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  flex-shrink: 0;
+}
+
 /* ================================================================
    RESPONSIVE
    ================================================================ */
@@ -2176,6 +2285,10 @@ input[type="range"]::-webkit-slider-thumb {
   /* Detail sidebar: full-width on tablets */
   .detail-sidebar { width: 100vw !important; max-width: 100vw; }
   .detail-resize-handle { display: none; }
+  /* Costs page */
+  .costs-phase-label { width: 70px; font-size: 12px; }
+  .costs-phase-amount { width: 60px; font-size: 12px; }
+  .costs-td-name { max-width: 150px; }
 }
 
 @media (max-width: 600px) {
@@ -2192,6 +2305,9 @@ input[type="range"]::-webkit-slider-thumb {
   .detail-sidebar { padding: 16px; }
   .detail-header h3 { font-size: 14px; }
   .update-body { font-size: 12px; }
+  /* Costs page */
+  .costs-table { font-size: 12px; }
+  .costs-th, .costs-td { padding: 8px 6px; }
 }
 
 /* ================================================================
@@ -2516,6 +2632,7 @@ function Icon({ name, size = 18, className = '' }) {
     lightbulb: html`<path d="M8 1a5 5 0 00-3 9c.5.6.8 1.2 1 1.8V13h4v-1.2c.2-.6.5-1.2 1-1.8A5 5 0 008 1z"/><line x1="6" y1="13.5" x2="10" y2="13.5"/><line x1="6.5" y1="15" x2="9.5" y2="15"/>`,
     help: html`<circle cx="8" cy="8" r="6.5"/><path d="M6 6.5a2 2 0 013.7 1c0 1.5-1.7 1.5-1.7 3"/><circle cx="8" cy="12" r="0.5" fill="currentColor" stroke="none"/>`,
     filter: html`<polygon points="1.5,2 14.5,2 9.5,8.5 9.5,13 6.5,14.5 6.5,8.5"/>`,
+    costs: html`<circle cx="8" cy="8" r="6.5"/><path d="M8 3.5v1m0 7v1M6 10.5c0 .8.9 1.5 2 1.5s2-.7 2-1.5S9.1 9 8 9s-2-.7-2-1.5S6.9 6 8 6s2 .7 2 1.5"/>`,
   };
 
   return html`
@@ -2606,6 +2723,7 @@ function Sidebar({ currentHash, factoryName, theme, onToggleTheme, selectedProje
     ...(selectedProject !== 'all' ? [{ path: '#/board', icon: 'board', label: 'Board' }] : []),
     ...(selectedProject !== 'all' ? [{ path: '#/strategy', icon: 'strategy', label: 'Strategy' }] : []),
     { path: '#/runs', icon: 'runs', label: 'Runs' },
+    { path: '#/costs', icon: 'costs', label: 'Costs' },
     { path: '#/learnings', icon: 'lightbulb', label: 'Learnings' },
     { path: '#/projects', icon: 'projects', label: 'Projects' },
     { path: '#/extensions', icon: 'extensions', label: 'Extensions' },
@@ -6895,6 +7013,216 @@ function StrategyPage({ selectedProject }) {
   `;
 }
 
+// ================================================================
+// Costs Page
+// ================================================================
+
+function CostsPage({ selectedProject }) {
+  const [costsByItems, setCostsByItems] = useState({});
+  const [boardItems, setBoardItems] = useState([]);
+  const [phaseData, setPhaseData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [sortCol, setSortCol] = useState('cost');
+  const [sortDir, setSortDir] = useState('desc');
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function fetchCosts() {
+      try {
+        const costQs = (selectedProject && selectedProject !== 'all')
+          ? '?board=' + encodeURIComponent(selectedProject)
+          : '';
+
+        const [costsData, boardData] = await Promise.all([
+          api('GET', '/api/costs/by-items' + costQs),
+          api('GET', '/api/board/items'),
+        ]);
+
+        if (cancelled) return;
+        setCostsByItems(costsData || {});
+        setBoardItems((boardData && boardData.items) || []);
+
+        const itemIds = Object.keys(costsData || {});
+        if (itemIds.length > 0) {
+          const phaseMap = {};
+          const summaryResults = await Promise.allSettled(
+            itemIds.map(id => {
+              const qs = (selectedProject && selectedProject !== 'all')
+                ? '?board=' + encodeURIComponent(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);
+              }
+            }
+          });
+          const sorted = Object.entries(phaseMap)
+            .map(([phase, cost]) => ({ phase, cost }))
+            .sort((a, b) => b.cost - a.cost);
+          if (!cancelled) setPhaseData(sorted);
+        }
+      } catch (e) {
+        if (!cancelled) setError(e.message || 'Failed to load cost data');
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    setLoading(true);
+    setError(null);
+    fetchCosts();
+    const interval = setInterval(fetchCosts, 30000);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [selectedProject]);
+
+  function formatTokens(n) {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+    if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+    return String(n);
+  }
+
+  function handleSort(col) {
+    if (sortCol === col) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortCol(col);
+      setSortDir(col === 'name' || col === 'status' ? 'asc' : 'desc');
+    }
+  }
+
+  if (loading) return html`<${SkeletonLoader} type="stats" />`;
+  if (error) return html`<div class="page-content"><div class="error-msg">${error}</div></div>`;
+
+  const mergedRows = Object.entries(costsByItems).map(([itemId, costs]) => {
+    const item = boardItems.find(i => String(i.id) === String(itemId));
+    return {
+      id: itemId,
+      name: item ? item.name : 'Item #' + itemId,
+      status: item ? item.status : 'Unknown',
+      totalTokens: (costs.total_input_tokens || 0) + (costs.total_output_tokens || 0),
+      costUsd: costs.total_cost_usd || 0,
+      records: costs.record_count || 0,
+    };
+  });
+
+  if (mergedRows.length === 0) {
+    return html`<div class="page-content">
+      <${EmptyState} icon="costs" title="No Cost Data" description="Cost data will appear here as tasks are processed by the pipeline." />
+    </div>`;
+  }
+
+  const totalSpend = mergedRows.reduce((sum, r) => sum + r.costUsd, 0);
+  const totalTokens = mergedRows.reduce((sum, r) => sum + r.totalTokens, 0);
+  const tasksTracked = mergedRows.length;
+  const avgCostPerTask = tasksTracked > 0 ? totalSpend / tasksTracked : 0;
+  const maxPhaseCost = phaseData.length > 0 ? Math.max(...phaseData.map(p => p.cost)) : 0;
+
+  const sortedRows = [...mergedRows].sort((a, b) => {
+    let cmp = 0;
+    switch (sortCol) {
+      case 'id':      cmp = Number(a.id) - Number(b.id); break;
+      case 'name':    cmp = a.name.localeCompare(b.name); break;
+      case 'status':  cmp = a.status.localeCompare(b.status); break;
+      case 'tokens':  cmp = a.totalTokens - b.totalTokens; break;
+      case 'cost':    cmp = a.costUsd - b.costUsd; break;
+      case 'records': cmp = a.records - b.records; break;
+    }
+    return sortDir === 'asc' ? cmp : -cmp;
+  });
+
+  const sortIndicator = (col) => sortCol === col ? (sortDir === 'asc' ? ' \u25B2' : ' \u25BC') : '';
+
+  return html`
+    <div class="page-content">
+      <div class="page-header">
+        <h2>Factory Costs</h2>
+        <p>Token usage and cost analytics across all tasks</p>
+      </div>
+
+      <div class="stat-grid mb-24">
+        <div class="stat-card">
+          <div class="stat-value">$${totalSpend.toFixed(2)}</div>
+          <div class="stat-label">Total Spend</div>
+          <div class="stat-dot"></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${formatTokens(totalTokens)}</div>
+          <div class="stat-label">Total Tokens</div>
+          <div class="stat-dot"></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${tasksTracked}</div>
+          <div class="stat-label">Tasks Tracked</div>
+          <div class="stat-dot"></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">$${avgCostPerTask.toFixed(2)}</div>
+          <div class="stat-label">Avg Cost / Task</div>
+          <div class="stat-dot"></div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <h3>Cost by Task</h3>
+          <span class="badge badge-accent">${sortedRows.length} tasks</span>
+        </div>
+        <div class="costs-table-wrapper">
+          <table class="costs-table">
+            <thead>
+              <tr>
+                <th class="costs-th" onClick=${() => handleSort('id')}>ID${sortIndicator('id')}</th>
+                <th class="costs-th" onClick=${() => handleSort('name')}>Task${sortIndicator('name')}</th>
+                <th class="costs-th" onClick=${() => handleSort('status')}>Status${sortIndicator('status')}</th>
+                <th class="costs-th" onClick=${() => handleSort('tokens')}>Tokens${sortIndicator('tokens')}</th>
+                <th class="costs-th" onClick=${() => handleSort('cost')}>Cost (USD)${sortIndicator('cost')}</th>
+                <th class="costs-th" onClick=${() => handleSort('records')}>Records${sortIndicator('records')}</th>
+              </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">${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>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      ${phaseData.length > 0 && html`
+        <div class="card" style="margin-top:24px;">
+          <div class="card-header">
+            <h3>Cost by Phase</h3>
+          </div>
+          <div class="costs-phase-chart">
+            ${phaseData.map(p => html`
+              <div key=${p.phase} class="costs-phase-row">
+                <div class="costs-phase-label">${p.phase}</div>
+                <div class="costs-phase-bar-bg">
+                  <div class="costs-phase-bar-fill" style=${'width:' + (maxPhaseCost > 0 ? (p.cost / maxPhaseCost * 100) : 0) + '%'}></div>
+                </div>
+                <div class="costs-phase-amount">$${p.cost.toFixed(2)}</div>
+              </div>
+            `)}
+          </div>
+        </div>
+      `}
+    </div>
+  `;
+}
+
 // ================================================================
 // Learnings Page
 // ================================================================
@@ -7152,6 +7480,7 @@ function App() {
     case '#/board':           page = html`<${BoardPage} selectedProject=${selectedProject} />`; break;
     case '#/strategy':        page = html`<${StrategyPage} selectedProject=${selectedProject} />`; break;
     case '#/runs':            page = html`<${RunsPage} selectedProject=${selectedProject} />`; break;
+    case '#/costs':           page = html`<${CostsPage} selectedProject=${selectedProject} />`; break;
     case '#/learnings':      page = html`<${LearningsPage} selectedProject=${selectedProject} />`; break;
     case '#/projects':        page = html`<${ProjectsPage} selectedProject=${selectedProject} onProjectChange=${setSelectedProject} />`; break;
     case '#/extensions':      page = html`<${ExtensionsPage} selectedProject=${selectedProject} />`; break;

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260418-082837-7de1d16
+20260418-125234-6f01092

package/package.json

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