@beastmode-develeap/beastmode 0.1.111 → 0.1.113

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260418-125234-6f01092";</script>
+<script>window.__BUILD_STAMP__ = "20260418-125925-5c4a0ed";</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
    ================================================================ */
@@ -2562,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
 // ================================================================
@@ -3561,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')
@@ -3602,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]);
@@ -3734,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;">
@@ -3919,6 +4112,7 @@ function PipelineView({
   columnSorts,
   cycleSort,
   sortColumnItems,
+  costsByItem,
 }) {
   const [collapseKey, setCollapseKey] = useState(0);
   const [, setEpicCollapseKey] = useState(0);
@@ -3943,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>
@@ -4057,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);
@@ -4073,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');
@@ -4420,6 +4670,7 @@ function BoardPage({ selectedProject }) {
             columnSorts=${columnSorts}
             cycleSort=${cycleSort}
             sortColumnItems=${sortColumnItems}
+            costsByItem=${costsByItem}
           />`
         : html`
       <div class="kanban-wrapper">
@@ -4485,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>

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260418-125234-6f01092
+20260418-125925-5c4a0ed

package/package.json

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