@beastmode-develeap/beastmode 0.1.110 → 0.1.112

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-125802-c140b02";</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">
@@ -1632,6 +1632,91 @@ input[type="range"]::-webkit-slider-thumb {
   white-space: nowrap;
 }
 
+/* Cost badge on card */
+.card-badge.badge-cost {
+  background: var(--success-subtle);
+  color: var(--success);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+/* Detail sidebar cost section */
+.detail-cost-section {
+  padding: 12px 24px;
+  border-bottom: 1px solid var(--border);
+}
+.detail-cost-title {
+  margin: 0 0 10px 0;
+  font-size: 13px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text);
+}
+.cost-totals {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.cost-total-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  background: var(--bg-input);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-subtle);
+}
+.cost-total-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.cost-total-value {
+  font-size: 16px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--text);
+}
+.cost-value-usd {
+  color: var(--success);
+}
+.cost-phase-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.cost-phase-table th {
+  text-align: left;
+  padding: 6px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  border-bottom: 1px solid var(--border);
+}
+.cost-phase-table td {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.cost-phase-name {
+  font-weight: 500;
+  color: var(--text);
+  text-transform: capitalize;
+}
+.cost-phase-value {
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
 /* ================================================================
    EXTENSIONS / ITEMS LIST
    ================================================================ */
@@ -2149,6 +2234,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 +2370,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 +2390,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; }
 }
 
 /* ================================================================
@@ -2446,6 +2647,36 @@ async function api(method, path, body) {
   return data;
 }
 
+// ================================================================
+// Cost / Token / Duration Formatters
+// ================================================================
+
+function formatCost(usd) {
+  if (usd === null || usd === undefined) return null;
+  if (usd >= 100)  return '$' + Math.round(usd);
+  if (usd >= 10)   return '$' + usd.toFixed(1);
+  if (usd >= 0.01) return '$' + usd.toFixed(2);
+  return '<$0.01';
+}
+
+function formatTokens(n) {
+  if (n === null || n === undefined || n === 0) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (n >= 1_000)     return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
+  return String(n);
+}
+
+function formatDuration(s) {
+  if (!s || s <= 0) return '0s';
+  if (s < 60) return Math.round(s) + 's';
+  const m = Math.floor(s / 60);
+  const sec = Math.round(s % 60);
+  if (m < 60) return sec > 0 ? m + 'm ' + sec + 's' : m + 'm';
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return rm > 0 ? h + 'h ' + rm + 'm' : h + 'h';
+}
+
 // ================================================================
 // Router
 // ================================================================
@@ -2516,6 +2747,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 +2838,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' },
@@ -3443,9 +3676,25 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
   // that open in a new tab when clicked.
   const [attachments, setAttachments] = useState([]);
   const [loadingAttachments, setLoadingAttachments] = useState(true);
+  const [costSummary, setCostSummary] = useState(null);
+  const [loadingCost, setLoadingCost] = useState(true);
   const sidebarRef = useRef(null);
   const topCommentRef = useRef(null);
 
+  // Cost summary fetch — keyed on item.id, refreshed alongside the
+  // 10-second updates/attachments poll below. The api() helper only
+  // auto-scopes /api/board/*, so append ?board=<proj> manually.
+  // Treat record_count=0 as "no cost data" so the sidebar stays clean.
+  const refreshCostSummary = useCallback(() => {
+    if (!item) return;
+    const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
+    fetch('/api/items/' + item.id + '/costs/summary' + boardParam)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
+      .catch(() => setCostSummary(null));
+  }, [item && item.id]);
+
   const refreshUpdates = useCallback(() => {
     if (!item) return;
     api('GET', '/api/board/items/' + item.id + '/updates')
@@ -3484,9 +3733,18 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
       })
       .catch(() => setAttachments([]))
       .finally(() => setLoadingAttachments(false));
+    setLoadingCost(true);
+    const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
+    fetch('/api/items/' + item.id + '/costs/summary' + boardParam)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
+      .catch(() => setCostSummary(null))
+      .finally(() => setLoadingCost(false));
     const interval = setInterval(() => {
       refreshUpdates();
       refreshAttachments();
+      refreshCostSummary();
     }, 10000);
     return () => clearInterval(interval);
   }, [item && item.id]);
@@ -3616,6 +3874,59 @@ function ItemDetailSidebar({ item, onClose, onStatusChange }) {
         <label>Parent Epic</label>
         <div class="detail-value">${item.parent_epic ? '#' + item.parent_epic : '\u2014'}</div>
       </div>
+      ${loadingCost
+        ? html`
+          <div class="detail-cost-section" data-testid="cost-section">
+            <h4 class="detail-cost-title">Cost</h4>
+            <div class="loading-text">Loading costs...</div>
+          </div>`
+        : (costSummary && html`
+          <div class="detail-cost-section" data-testid="cost-section">
+            <h4 class="detail-cost-title">
+              <span style="font-family:var(--font-mono);color:var(--success);">$</span>
+              Cost Summary
+            </h4>
+            <div class="cost-totals">
+              <div class="cost-total-item">
+                <span class="cost-total-label">Total Cost</span>
+                <span class="cost-total-value cost-value-usd">${formatCost(costSummary.total_cost_usd) || '$0.00'}</span>
+              </div>
+              <div class="cost-total-item">
+                <span class="cost-total-label">Tokens</span>
+                <span class="cost-total-value">${formatTokens((costSummary.total_input_tokens || 0) + (costSummary.total_output_tokens || 0))}</span>
+              </div>
+              <div class="cost-total-item">
+                <span class="cost-total-label">Duration</span>
+                <span class="cost-total-value">${formatDuration(costSummary.total_duration_seconds)}</span>
+              </div>
+            </div>
+            ${costSummary.phases && Object.keys(costSummary.phases).length > 0 && html`
+              <table class="cost-phase-table">
+                <thead>
+                  <tr>
+                    <th>Phase</th>
+                    <th>Cost</th>
+                    <th>Tokens</th>
+                    <th>Duration</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${Object.values(costSummary.phases)
+                    .slice()
+                    .sort((a, b) => (b.cost_usd || 0) - (a.cost_usd || 0))
+                    .map((phase) => html`
+                      <tr key=${phase.phase}>
+                        <td class="cost-phase-name">${phase.phase}</td>
+                        <td class="cost-phase-value">${formatCost(phase.cost_usd) || '$0.00'}</td>
+                        <td class="cost-phase-value">${formatTokens((phase.input_tokens || 0) + (phase.output_tokens || 0))}</td>
+                        <td class="cost-phase-value">${formatDuration(phase.duration_seconds)}</td>
+                      </tr>
+                    `)}
+                </tbody>
+              </table>
+            `}
+          </div>
+        `)}
       ${(loadingAttachments || attachments.length > 0) && html`
         <div style="padding:12px 24px 0;">
           <h4 style="margin:0 0 8px 0;font-size:13px;font-weight:600;">
@@ -3801,6 +4112,7 @@ function PipelineView({
   columnSorts,
   cycleSort,
   sortColumnItems,
+  costsByItem,
 }) {
   const [collapseKey, setCollapseKey] = useState(0);
   const [, setEpicCollapseKey] = useState(0);
@@ -3825,6 +4137,11 @@ function PipelineView({
         ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
         ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}
         ${selectedProject === 'all' && item.project_id && html`<span class="card-badge badge-project">${item.project_id}</span>`}
+        ${(() => {
+          const cost = costsByItem && costsByItem[String(item.id)];
+          const label = cost ? formatCost(cost.total_cost_usd) : null;
+          return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
+        })()}
         <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
       </div>
     </div>
@@ -3939,6 +4256,7 @@ function BoardPage({ selectedProject }) {
   const [filters, setFilters] = useState({ priority: '', taskType: '', project: '', dateRange: '', parentEpic: '' });
   const [columnSorts, setColumnSorts] = useState({});
   const [epicCollapseKey, setEpicCollapseKey] = useState(0);
+  const [costsByItem, setCostsByItem] = useState({});
   const viewMode = (() => {
     try {
       const params = new URLSearchParams(window.location.search);
@@ -3955,20 +4273,70 @@ function BoardPage({ selectedProject }) {
       .finally(() => setLoading(false));
   }, [selectedProject]);
 
+  // Cost endpoints are /api/costs/* and /api/items/*/costs/summary —
+  // the api() helper only auto-scopes /api/board/*, so we manually
+  // append ?board=<proj> here. Errors are swallowed: if the cost
+  // batch endpoint is unreachable, cards render without badges.
+  const fetchCosts = useCallback(() => {
+    const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
+    fetch('/api/costs/by-items' + boardParam)
+      .then(r => r.ok ? r.json() : {})
+      .then(data => setCostsByItem(data || {}))
+      .catch(() => {});
+  }, [selectedProject]);
+
   // Re-fetch whenever the selected project changes — each project
   // has its own SQLite board on the server.
   // Also poll every 10s for live updates from the daemon.
   useEffect(() => {
     fetchItems();
+    fetchCosts();
     const interval = setInterval(() => {
       // Silent refresh — don't show loading spinner on polls
       api('GET', '/api/board/items')
         .then(data => setItems(data.items || []))
         .catch(() => {});
+      fetchCosts();
     }, 10000);
     return () => clearInterval(interval);
   }, [selectedProject]);
 
+  // WebSocket listener for real-time cost updates (T4).
+  // On any `cost_recorded` or `costs_cleared` event, re-fetch the
+  // full batch — the endpoint is a single GROUP BY query and is
+  // cheap. Auto-reconnect after 5s on disconnect.
+  useEffect(() => {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = proto + '//' + location.host + '/ws';
+    let ws;
+    let reconnectTimer;
+
+    function connect() {
+      ws = new WebSocket(wsUrl);
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'cost_recorded' || msg.type === 'costs_cleared') {
+            fetchCosts();
+          }
+        } catch {}
+      };
+      ws.onclose = () => {
+        reconnectTimer = setTimeout(connect, 5000);
+      };
+      ws.onerror = () => {
+        ws.close();
+      };
+    }
+    connect();
+
+    return () => {
+      clearTimeout(reconnectTimer);
+      if (ws) ws.close();
+    };
+  }, []);
+
   // Sync scroll thumb position with kanban scroll + drag support
   useEffect(() => {
     const kanban = document.querySelector('.kanban');
@@ -4302,6 +4670,7 @@ function BoardPage({ selectedProject }) {
             columnSorts=${columnSorts}
             cycleSort=${cycleSort}
             sortColumnItems=${sortColumnItems}
+            costsByItem=${costsByItem}
           />`
         : html`
       <div class="kanban-wrapper">
@@ -4367,6 +4736,11 @@ function BoardPage({ selectedProject }) {
                           ${item.priority && html`<span class=${'card-badge ' + priorityBadgeClass(item.priority)}>${item.priority}</span>`}
                           ${item.task_type && html`<span class="card-badge badge-type">${item.task_type}</span>`}
                           ${selectedProject === 'all' && item.project_id && html`<span class="card-badge badge-project">${item.project_id}</span>`}
+                          ${(() => {
+                            const cost = costsByItem && costsByItem[String(item.id)];
+                            const label = cost ? formatCost(cost.total_cost_usd) : null;
+                            return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
+                          })()}
                           <span class="card-time">${timeAgo(item.updated_at || item.created_at)}</span>
                         </div>
                       </div>
@@ -6895,6 +7269,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 +7736,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-125802-c140b02

package/package.json

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