@beastmode-develeap/beastmode 0.1.284 → 0.1.285

package/dist/web/board.html

@@ -15,7 +15,7 @@
 }
 </script>
 <!--BOARD_DATA-->
-<script>window.__BUILD_STAMP__ = "20260516-174157-f4fbcce";</script>
+<script>window.__BUILD_STAMP__ = "20260516-174800-2440824";</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">
@@ -1259,11 +1259,6 @@ input[type="range"]::-webkit-slider-thumb {
 .card-status-age.status-age-info { color: var(--accent); background: var(--accent-subtle); }
 .card-status-age.status-age-warn { color: #fb923c; background: rgba(249, 115, 22, 0.15); }
 .card-status-age.status-age-stale { color: #f87171; background: rgba(239, 68, 68, 0.15); }
-.card-badge-wrap {
-  /* Flex child wrapper: blockified by parent flex, but sized to content.
-     The inner .card-badge is NOT a direct flex item, so it keeps display:inline-block. */
-  line-height: 0;
-}
 .card-badge {
   display: inline-block;
   padding: 2px 8px;
@@ -5661,10 +5656,12 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
   const refreshCostSummary = useCallback(() => {
     if (!item) return;
     const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const sep = (q) => q ? '&' : '?';
     const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
-    fetch('/api/items/' + item.id + '/costs/summary' + boardParam)
+    const summaryQs = boardParam + sep(boardParam) + 'include_descendants=true';
+    fetch('/api/items/' + item.id + '/costs/summary' + summaryQs)
       .then(r => r.ok ? r.json() : null)
-      .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
+      .then(data => setCostSummary(data && (data.record_count > 0 || (data.descendant_items && data.descendant_items.length > 0)) ? data : null))
       .catch(() => setCostSummary(null));
     if (isNonTerminal) {
       fetch('/api/items/' + item.id + '/costs/live' + boardParam)
@@ -5726,10 +5723,12 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
       .finally(() => setLoadingAttachments(false));
     setLoadingCost(true);
     const proj = localStorage.getItem('beastmode-selected-project') || '';
+    const sep = (q) => q ? '&' : '?';
     const boardParam = (proj && proj !== 'all') ? '?board=' + encodeURIComponent(proj) : '';
-    fetch('/api/items/' + item.id + '/costs/summary' + boardParam)
+    const summaryQs = boardParam + sep(boardParam) + 'include_descendants=true';
+    fetch('/api/items/' + item.id + '/costs/summary' + summaryQs)
       .then(r => r.ok ? r.json() : null)
-      .then(data => setCostSummary(data && data.record_count > 0 ? data : null))
+      .then(data => setCostSummary(data && (data.record_count > 0 || (data.descendant_items && data.descendant_items.length > 0)) ? data : null))
       .catch(() => setCostSummary(null))
       .finally(() => setLoadingCost(false));
     if (isNonTerminal) {
@@ -5988,6 +5987,45 @@ function ItemDetailSidebar({ item, onClose, onStatusChange, selectedProject, all
                 </table>
               `)
             }
+            ${costSummary.categories && Object.keys(costSummary.categories).length > 0 && html`
+              <div data-testid="category-breakdown" style="margin-top:12px;">
+                <div style="font-weight:600;margin-bottom:6px;color:var(--text-dim);font-size:12px;">By Category</div>
+                <table class="cost-phase-table">
+                  <thead>
+                    <tr>
+                      <th>Category</th>
+                      <th>Cost</th>
+                      <th>%</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${(() => {
+                      const cats = costSummary.categories || {};
+                      const totalCat = Object.values(cats).reduce((s, v) => s + (v || 0), 0);
+                      return Object.entries(cats)
+                        .sort((a, b) => b[1] - a[1])
+                        .map(([cat, amount]) => html`
+                          <tr key=${cat}>
+                            <td class="cost-phase-name" data-testid=${'category-row-' + cat}>${cat}</td>
+                            <td class="cost-phase-value">${formatCost(amount) || '$0.00'}</td>
+                            <td class="cost-phase-value">${totalCat > 0 ? ((amount / totalCat) * 100).toFixed(0) + '%' : '—'}</td>
+                          </tr>
+                        `);
+                    })()}
+                  </tbody>
+                </table>
+              </div>
+            `}
+            ${costSummary.descendant_items && costSummary.descendant_items.length > 0 && html`
+              <div data-testid="bug-gc-descendants" style="margin-top:12px;padding:8px 10px;border-radius:4px;background:rgba(245,158,11,0.08);border-left:3px solid #f59e0b;">
+                <div style="font-weight:600;font-size:12px;color:#f59e0b;margin-bottom:4px;">Including Bug GC costs</div>
+                <div style="font-size:11px;color:var(--text-dim);">
+                  ${costSummary.descendant_items.length} child task${costSummary.descendant_items.length === 1 ? '' : 's'}
+                  ${costSummary.descendant_cost_usd != null ? html` · ${formatCost(costSummary.descendant_cost_usd)} from children` : ''}
+                  ${costSummary.combined_cost_usd != null ? html` · combined ${formatCost(costSummary.combined_cost_usd)}` : ''}
+                </div>
+              </div>
+            `}
           </div>
         `)}
       ${envTimeline && (envTimeline.entries.length > 0 || envTimeline.promotion_chain.length > 0) && html`
@@ -6324,7 +6362,7 @@ function PipelineView({
         ${(() => {
           const cost = costsByItem && costsByItem[String(item.id)];
           const label = cost ? formatCost(cost.total_cost_usd) : null;
-          return label ? html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>` : null;
+          return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
         })()}
         ${(() => {
           const env = item.extra && item.extra.current_env;
@@ -6741,7 +6779,8 @@ function BoardPage({ selectedProject }) {
   // append ?board=<proj> here. Errors are swallowed: if the cost
   // batch endpoint is unreachable, cards render without badges.
   const fetchCosts = useCallback(() => {
-    const boardParam = (selectedProject && selectedProject !== 'all') ? '?board=' + encodeURIComponent(selectedProject) : '';
+    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 || {}))
@@ -7535,7 +7574,7 @@ function BoardPage({ selectedProject }) {
                           ${(() => {
                             const cost = costsByItem && costsByItem[String(item.id)];
                             const label = cost ? formatCost(cost.total_cost_usd) : null;
-                            return label ? html`<span class="card-badge-wrap"><span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span></span>` : null;
+                            return label ? html`<span class="card-badge badge-cost" title=${'Total cost: ' + label}>${label}</span>` : null;
                           })()}
                           ${(() => {
                             const env = item.extra && item.extra.current_env;
@@ -8518,18 +8557,6 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
   const [onboardingTier, setOnboardingTier] = useState('standard');
   const [showPicker, setShowPicker] = useState(false);
   const [adding, setAdding] = useState(false);
-  // Per-project analysis state (status pill + last-analyzed timestamp).
-  // Keyed by project name; value is the /analyze/status JSON response.
-  const [analysisStatuses, setAnalysisStatuses] = useState({});
-  // Which project card is currently expanded (only one at a time).
-  const [expandedProject, setExpandedProject] = useState(null);
-  // Cached guide content keyed by project name; each entry holds optional l1/l2 strings.
-  const [guideContent, setGuideContent] = useState({});
-  // Per-project transient errors surfaced inside the card body.
-  const [guideErrors, setGuideErrors] = useState({});
-  // Per-project "show full guide" toggle (l2 visible).
-  const [showFullGuide, setShowFullGuide] = useState({});
-  const pollTimersRef = useRef({});
 
   const fetchProjects = useCallback(() => {
     api('GET', '/api/projects')
@@ -8540,117 +8567,6 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
 
   useEffect(() => { fetchProjects(); }, []);
 
-  const fetchAnalysisStatus = useCallback(async (name) => {
-    try {
-      const status = await api('GET', '/api/projects/' + name + '/analyze/status');
-      setAnalysisStatuses(prev => ({ ...prev, [name]: status }));
-      return status;
-    } catch (e) {
-      setAnalysisStatuses(prev => ({ ...prev, [name]: { status: 'idle', error: e.message } }));
-      return null;
-    }
-  }, []);
-
-  // Refresh per-project analysis status whenever the project list changes.
-  useEffect(() => {
-    projects.forEach(p => { fetchAnalysisStatus(p.name); });
-  }, [projects, fetchAnalysisStatus]);
-
-  // Clean up any running poll intervals on unmount.
-  useEffect(() => () => {
-    Object.values(pollTimersRef.current).forEach(t => clearInterval(t));
-    pollTimersRef.current = {};
-  }, []);
-
-  const fetchGuide = useCallback(async (name, level) => {
-    try {
-      const resp = await api('GET', '/api/projects/' + name + '/codebase-guide?level=' + level);
-      setGuideContent(prev => ({
-        ...prev,
-        [name]: { ...(prev[name] || {}), [level]: resp.content || '' },
-      }));
-      setGuideErrors(prev => ({ ...prev, [name]: null }));
-      return resp;
-    } catch (e) {
-      // 404 means no guide exists yet — treat as empty sentinel so the
-      // render shows the status-based fallback instead of a raw error.
-      const noGuide = e.message && (
-        e.message.includes('No codebase guide') ||
-        e.message.includes('Guide file not found') ||
-        e.message === 'HTTP 404'
-      );
-      if (noGuide) {
-        setGuideContent(prev => ({
-          ...prev,
-          [name]: { ...(prev[name] || {}), [level]: '' },
-        }));
-      } else {
-        setGuideErrors(prev => ({ ...prev, [name]: e.message }));
-      }
-      return null;
-    }
-  }, []);
-
-  const toggleExpand = useCallback(async (name) => {
-    if (expandedProject === name) {
-      setExpandedProject(null);
-      return;
-    }
-    setExpandedProject(name);
-    // Optimistically fetch L1 guide on expand regardless of analysis status.
-    // Guide files exist even when a re-analysis is in progress (previous run's
-    // output persists). fetchGuide silently treats 404 as empty so this is
-    // safe to call unconditionally — it never shows a raw HTTP error.
-    if (!(guideContent[name] && guideContent[name].l1)) {
-      await fetchGuide(name, 'l1');
-    }
-  }, [expandedProject, guideContent, fetchGuide]);
-
-  const stopPolling = useCallback((name) => {
-    if (pollTimersRef.current[name]) {
-      clearInterval(pollTimersRef.current[name]);
-      delete pollTimersRef.current[name];
-    }
-  }, []);
-
-  const startPolling = useCallback((name) => {
-    stopPolling(name);
-    pollTimersRef.current[name] = setInterval(async () => {
-      const st = await fetchAnalysisStatus(name);
-      if (!st) return;
-      if (st.status === 'complete') {
-        stopPolling(name);
-        // Drop stale L1/L2 caches so the next expand re-fetches them.
-        setGuideContent(prev => { const n = { ...prev }; delete n[name]; return n; });
-        setShowFullGuide(prev => ({ ...prev, [name]: false }));
-        if (expandedProject === name) {
-          await fetchGuide(name, 'l1');
-        }
-      } else if (st.status === 'failed' || st.status === 'idle') {
-        stopPolling(name);
-      }
-    }, 5000);
-  }, [fetchAnalysisStatus, fetchGuide, stopPolling, expandedProject]);
-
-  const reanalyze = useCallback(async (name) => {
-    setGuideErrors(prev => ({ ...prev, [name]: null }));
-    setAnalysisStatuses(prev => ({ ...prev, [name]: { status: 'running' } }));
-    try {
-      await api('POST', '/api/projects/' + name + '/analyze?force=true', {});
-      startPolling(name);
-    } catch (e) {
-      setAnalysisStatuses(prev => ({ ...prev, [name]: { status: 'failed', error: e.message } }));
-    }
-  }, [startPolling]);
-
-  const toggleFullGuide = useCallback(async (name) => {
-    const next = !showFullGuide[name];
-    setShowFullGuide(prev => ({ ...prev, [name]: next }));
-    if (next && !(guideContent[name] && guideContent[name].l2)) {
-      await fetchGuide(name, 'l2');
-    }
-  }, [showFullGuide, guideContent, fetchGuide]);
-
   const addProject = async () => {
     const isGithub = addMode === 'github';
     if (isGithub && !githubUrl.trim()) return;
@@ -8667,38 +8583,22 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
       setNewPath('');
       setGithubUrl('');
       setCloneTarget('');
-      // For standard/full tier: do NOT show an intermediate toast before the
-      // analyze call. The analyze API returns immediately (async job) so the
-      // delay is negligible, but showing 'Project added successfully' first
-      // causes the verifier (and real users) to read the wrong message if
-      // they look before the API responds. Only show the final accurate message.
-      if (isGithub) {
-        setSuccess(`Cloned and added: ${registeredPath}`);
-      } else if (onboardingTier !== 'standard' && onboardingTier !== 'full') {
-        setSuccess('Project added successfully');
-      }
+      setSuccess(isGithub ? `Cloned and added: ${registeredPath}` : 'Project added successfully');
 
       if (onboardingTier === 'standard' || onboardingTier === 'full') {
+        setSuccess('Project added — running codebase analysis...');
         try {
-          const analyzeResult = await api('POST', '/api/projects/' + projName + '/analyze', {});
-          if (analyzeResult && analyzeResult.cached) {
-            setSuccess('Project added — codebase already analyzed');
-          } else {
-            setSuccess('Project added — analyzing codebase…');
-            // Begin polling so the operator sees the status pill flip to
-            // "Analyzed" on the new project card in real time. Card may
-            // render slightly later (after fetchProjects), but startPolling
-            // is idempotent and the interval keeps refreshing status.
-            startPolling(projName);
-          }
-        } catch {
-          setSuccess('Project added (analysis failed — can retry later)');
-        }
+          await api('POST', '/api/projects/' + projName + '/analyze', {});
+          setSuccess('Project added and analyzed');
+        } catch { setSuccess('Project added (analysis failed — can retry later)'); }
       }
 
-      // Full tier no longer auto-redirects. The operator stays on the
-      // Projects page so they can watch the analysis status flip and
-      // navigate to /new-session manually when ready.
+      if (onboardingTier === 'full') {
+        setTimeout(() => {
+          if (onProjectChange) onProjectChange(projName);
+          navigate('#/new-session');
+        }, 1000);
+      }
 
       setTimeout(() => setSuccess(null), 5000);
       fetchProjects();
@@ -8792,128 +8692,22 @@ function ProjectsPage({ selectedProject, onProjectChange }) {
                   icon="projects"
                   title="No projects yet"
                   description="Add a project path to start building." />`
-        : projects.map(proj => {
-          const st = analysisStatuses[proj.name] || { status: 'idle' };
-          const expanded = expandedProject === proj.name;
-          const pillState = st.status === 'complete' ? 'complete'
-            : st.status === 'running' ? 'running'
-            : st.status === 'failed' ? 'failed'
-            : 'none';
-          const pillLabel = pillState === 'complete' ? '\u2713 Analyzed'
-            : pillState === 'running' ? '\u23f3 Analyzing\u2026'
-            : pillState === 'failed' ? '\u2717 Failed'
-            : '\u2014 Not analyzed';
-          const pillColor = pillState === 'complete' ? '#22c55e'
-            : pillState === 'running' ? '#f59e0b'
-            : pillState === 'failed' ? '#ef4444'
-            : '#94a3b8';
-          const tsLabel = pillState === 'complete' && st.analyzed_at
-            ? 'Analyzed ' + timeAgo(st.analyzed_at)
-            : pillState === 'failed' ? 'Analysis failed'
-            : pillState === 'running' ? 'Analyzing\u2026'
-            : 'Not analyzed';
-          const guide = guideContent[proj.name] || {};
-          const guideErr = guideErrors[proj.name];
-          const isBusy = pillState === 'running';
-          return html`
-          <div class="ext-item" key=${proj.name} style="flex-wrap:wrap;flex-direction:column;align-items:stretch;">
-            <div style="display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;"
-                 onClick=${() => toggleExpand(proj.name)}>
-              <div style="flex:1;min-width:0;">
-                <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
-                  <div class="ext-name">${proj.name}</div>
-                  <span style="display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
-                               background:${pillColor};color:#fff;white-space:nowrap;"
-                        title=${st.error || ''}
-                        data-testid="project-status-pill"
-                        data-state=${pillState}>${pillLabel}</span>
-                  ${proj.stack && (proj.stack.detected || proj.stack.framework)
-                    ? html`<span style="display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
-                                          background:var(--bg-subtle);color:var(--text-secondary);">
-                              ${proj.stack.detected || proj.stack.framework}
-                            </span>`
-                    : null}
-                </div>
-                <div class="ext-meta" style="margin-top:4px;">
-                  ${proj.repo ? proj.repo + ' \u2014 ' : ''}
-                  ${proj.path || ''}
-                </div>
-                <div class="ext-meta" style="margin-top:2px;font-size:11px;color:var(--text-secondary);"
-                     data-testid="project-analyzed-timestamp">${tsLabel}</div>
-              </div>
-              <div class="ext-actions" style="display:flex;gap:6px;flex-wrap:wrap;"
-                   onClick=${(e) => e.stopPropagation()}>
-                <button class="btn btn-sm btn-secondary"
-                        onClick=${() => reanalyze(proj.name)}
-                        disabled=${isBusy}
-                        data-testid="project-reanalyze-btn">
-                  ${isBusy ? 'Analyzing\u2026' : 'Re-analyze'}
-                </button>
-                <button class="btn btn-sm btn-danger" onClick=${() => removeProject(proj.name)}>Remove</button>
-                <button class="btn btn-sm btn-secondary"
-                        onClick=${() => toggleExpand(proj.name)}
-                        data-testid="project-expand-btn">${expanded ? '\u25b4' : '\u25be'}</button>
+        : projects.map(proj => html`
+          <div class="ext-item" key=${proj.name} style="flex-wrap:wrap;">
+            <div class="ext-info">
+              <div class="ext-name">${proj.name}</div>
+              <div class="ext-meta">
+                ${proj.repo ? proj.repo + ' \u2014 ' : ''}
+                ${proj.stack ? proj.stack.detected || proj.stack.framework || '' : ''}
+                ${proj.path ? ' \u2014 ' + proj.path : ''}
               </div>
             </div>
-            ${expanded ? html`
-              <div style="margin-top:12px;padding:12px;border-top:1px solid var(--border);"
-                   data-testid="codebase-summary-panel">
-                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
-                  <strong style="font-size:13px;">Codebase summary</strong>
-                  ${guide.l1 ? html`
-                    <button class="btn btn-sm btn-secondary"
-                            onClick=${() => toggleFullGuide(proj.name)}
-                            data-testid="project-show-full-guide">
-                      ${showFullGuide[proj.name] ? 'Hide full guide' : 'Show full guide'}
-                    </button>
-                  ` : null}
-                </div>
-                ${guideErr ? html`<div class="error-msg" style="margin-bottom:8px;">${guideErr}</div>` : null}
-                ${guide.l1 === undefined
-                  ? html`<div style="color:var(--text-secondary);font-size:12px;">Loading guide\u2026</div>`
-                  : guide.l1
-                    ? html`
-                      ${isBusy ? html`<div style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;">Re-analysis in progress\u2026</div>` : null}
-                      <pre style="white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.5;
-                                   background:var(--bg-subtle);padding:10px;border-radius:6px;margin:0;"
-                           data-testid="codebase-guide-l1">${guide.l1}</pre>
-                      ${showFullGuide[proj.name]
-                        ? (guide.l2 === undefined
-                            ? html`<div style="margin-top:8px;color:var(--text-secondary);font-size:12px;">Loading full guide\u2026</div>`
-                            : html`
-                              <pre style="white-space:pre-wrap;font-family:inherit;font-size:12px;line-height:1.5;
-                                           background:var(--bg-subtle);padding:10px;border-radius:6px;margin-top:8px;"
-                                   data-testid="codebase-guide-l2">${guide.l2}</pre>
-                            `)
-                        : null}
-                    `
-                    : pillState === 'running'
-                      ? html`<div style="display:flex;align-items:center;gap:8px;color:var(--text-secondary);">
-                                <span class="spinner" style="display:inline-block;width:12px;height:12px;border:2px solid var(--border);
-                                                              border-top-color:var(--accent);border-radius:50%;
-                                                              animation:spin 0.8s linear infinite;"></span>
-                                Analyzing codebase\u2026
-                              </div>`
-                      : pillState === 'failed'
-                        ? html`<div>
-                                  <div class="error-msg" style="margin-bottom:8px;">${st.error || 'Analysis failed'}</div>
-                                  <button class="btn btn-sm btn-primary"
-                                          onClick=${() => reanalyze(proj.name)}
-                                          data-testid="project-retry-btn">Retry</button>
-                                </div>`
-                        : html`<div style="color:var(--text-secondary);">
-                                  Not analyzed yet \u2014
-                                  <button class="btn btn-sm btn-primary"
-                                          style="margin-left:6px;"
-                                          onClick=${() => reanalyze(proj.name)}
-                                          data-testid="project-run-analysis-btn">Run analysis</button>
-                                </div>`}
-              </div>
-            ` : null}
+            <div class="ext-actions">
+              <button class="btn btn-sm btn-danger" onClick=${() => removeProject(proj.name)}>Remove</button>
+            </div>
             <${EnvironmentPanel} projectName=${proj.name} />
           </div>
-          `;
-        })}
+        `)}
       </div>
       ${showPicker && html`<${DirectoryPicker} initialPath=${newPath || null} onClose=${() => setShowPicker(false)} onSelect=${(p) => { setNewPath(p); setShowPicker(false); }} />`}
     </div>
@@ -11038,8 +10832,8 @@ function CostsPage({ selectedProject }) {
     async function fetchCosts() {
       try {
         const costQs = (selectedProject && selectedProject !== 'all')
-          ? '?board=' + encodeURIComponent(selectedProject)
-          : '';
+          ? '?board=' + encodeURIComponent(selectedProject) + '&include_descendants=true'
+          : '?include_descendants=true';
         const inFlightQs = (selectedProject && selectedProject !== 'all')
           ? '?board=' + encodeURIComponent(selectedProject) + '&threshold=5'
           : '?threshold=5';
@@ -11132,13 +10926,33 @@ function CostsPage({ selectedProject }) {
 
   const mergedRows = Object.entries(costsByItems).map(([itemId, costs]) => {
     const item = boardItems.find(i => String(i.id) === String(itemId));
+    const categories = costs.categories || {};
+    const ownCost = costs.total_cost_usd || 0;
+    const descCost = costs.descendant_cost_usd || 0;
+    const combinedCost = costs.combined_cost_usd != null
+      ? costs.combined_cost_usd
+      : (ownCost + descCost);
+    let dominantCategory = '';
+    let dominantShare = 0;
+    const catTotal = Object.values(categories).reduce((s, v) => s + (v || 0), 0);
+    if (catTotal > 0) {
+      const sortedCats = Object.entries(categories).sort((a, b) => b[1] - a[1]);
+      const top = sortedCats[0];
+      dominantShare = top[1] / catTotal;
+      dominantCategory = dominantShare >= 0.6 ? top[0] : 'mixed';
+    }
     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,
+      costUsd: ownCost,
+      descendantCost: descCost,
+      combinedCost: combinedCost,
+      categories: categories,
+      dominantCategory: dominantCategory,
       records: costs.record_count || 0,
+      parentTask: item ? (item.parent_task || '') : '',
       byIteration: byIterationMap[itemId] || [],
     };
   });
@@ -11155,15 +10969,37 @@ function CostsPage({ selectedProject }) {
   const avgCostPerTask = tasksTracked > 0 ? totalSpend / tasksTracked : 0;
   const maxPhaseCost = phaseData.length > 0 ? Math.max(...phaseData.map(p => p.cost)) : 0;
 
+  const categoryTotals = {};
+  mergedRows.forEach(r => {
+    for (const [cat, amount] of Object.entries(r.categories || {})) {
+      categoryTotals[cat] = (categoryTotals[cat] || 0) + (amount || 0);
+    }
+  });
+  const categoryPills = Object.entries(categoryTotals)
+    .sort((a, b) => b[1] - a[1])
+    .map(([cat, amount]) => ({ cat, amount }));
+
+  const categoryColors = {
+    spec: '#3b82f6',
+    build: '#10b981',
+    verify: '#f59e0b',
+    review: '#8b5cf6',
+    epic: '#ec4899',
+    heal: '#ef4444',
+    infra: '#06b6d4',
+    mixed: 'var(--text-muted)',
+  };
+
   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;
+      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.combinedCost - b.combinedCost; break;
+      case 'records':  cmp = a.records - b.records; break;
+      case 'category': cmp = (a.dominantCategory || '').localeCompare(b.dominantCategory || ''); break;
     }
     return sortDir === 'asc' ? cmp : -cmp;
   });
@@ -11200,6 +11036,19 @@ function CostsPage({ selectedProject }) {
         </div>
       </div>
 
+      ${categoryPills.length > 0 && html`
+        <div class="cost-category-row" data-testid="cost-category-pills" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;">
+          ${categoryPills.map(({ cat, amount }) => html`
+            <div key=${cat}
+                 data-testid=${'category-pill-' + cat}
+                 style=${'display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:' + (categoryColors[cat] || '#64748b') + '22;border:1px solid ' + (categoryColors[cat] || '#64748b') + '55;color:' + (categoryColors[cat] || '#64748b') + ';font-size:12px;font-weight:600;'}>
+              <span style="text-transform:lowercase;">${cat}</span>
+              <span style="font-family:var(--font-mono);">$${amount.toFixed(2)}</span>
+            </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">
@@ -11249,7 +11098,8 @@ function CostsPage({ selectedProject }) {
                 <th class="costs-th costs-th-name" onClick=${() => handleSort('name')}>Task${sortIndicator('name')}</th>
                 <th class="costs-th costs-th-status" onClick=${() => handleSort('status')}>Status${sortIndicator('status')}</th>
                 <th class="costs-th costs-th-tokens" onClick=${() => handleSort('tokens')}>Tokens${sortIndicator('tokens')}</th>
-                <th class="costs-th costs-th-cost" onClick=${() => handleSort('cost')}>Cost (USD)${sortIndicator('cost')}</th>
+                <th class="costs-th costs-th-cost" onClick=${() => handleSort('cost')}>Total Cost (incl. children)${sortIndicator('cost')}</th>
+                <th class="costs-th costs-th-category" onClick=${() => handleSort('category')}>Category${sortIndicator('category')}</th>
                 <th class="costs-th costs-th-records" onClick=${() => handleSort('records')}>Records${sortIndicator('records')}</th>
               </tr>
             </thead>
@@ -11261,16 +11111,28 @@ function CostsPage({ selectedProject }) {
                   e.stopPropagation();
                   setExpandedRows(prev => ({ ...prev, [row.id]: !prev[row.id] }));
                 };
+                const hasChildCost = row.descendantCost > 0;
+                const isChild = !!row.parentTask;
+                const catColor = categoryColors[row.dominantCategory] || 'var(--text-muted)';
                 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}
+                        ${isChild ? html`<span data-testid=${'parent-link-' + row.id} title=${'Child of #' + row.parentTask} style="margin-left:4px;color:var(--text-muted);font-size:11px;">↑#${row.parentTask}</span>` : ''}
                       </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" data-testid=${'combined-cost-' + row.id}>
+                        $${row.combinedCost.toFixed(2)}
+                        ${hasChildCost ? html`<div data-testid=${'descendant-indicator-' + row.id} style="font-size:10px;color:var(--text-muted);font-weight:400;">+$${row.descendantCost.toFixed(2)} from children</div>` : ''}
+                      </td>
+                      <td class="costs-td">
+                        ${row.dominantCategory
+                          ? html`<span data-testid=${'category-cell-' + row.id} style=${'display:inline-block;padding:2px 8px;border-radius:4px;background:' + catColor + '22;color:' + catColor + ';font-size:11px;font-weight:600;text-transform:lowercase;'}>${row.dominantCategory}</span>`
+                          : html`<span style="color:var(--text-muted);font-size:11px;">—</span>`}
+                      </td>
                       <td class="costs-td costs-td-mono">${row.records}</td>
                     </tr>
                     ${hasMultiIter && isExpanded ? row.byIteration.map(it => html`
@@ -11280,6 +11142,7 @@ function CostsPage({ selectedProject }) {
                         <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"></td>
                         <td class="costs-td costs-td-mono">${it.record_count || 0}</td>
                       </tr>
                     `) : ''}
@@ -11753,24 +11616,6 @@ function App() {
     setSelectedProjectRaw(value);
   }, []);
 
-  // Auto-select the first registered project when localStorage has no prior
-  // choice. Without this, items and costs both route to the default board
-  // (board.db) which doesn't match project board data — no badges render in
-  // a fresh Playwright or incognito session. Multi-project factories default
-  // to the first registered project; users can override via the sidebar.
-  useEffect(() => {
-    if (localStorage.getItem('beastmode-selected-project')) return;
-    fetch('/api/projects')
-      .then(r => r.ok ? r.json() : null)
-      .then(data => {
-        const projects = data && data.projects;
-        if (Array.isArray(projects) && projects.length > 0) {
-          setSelectedProject(projects[0].name);
-        }
-      })
-      .catch(() => {});
-  }, []);
-
   // If ?view=pipeline or ?view=board is in the URL but no hash route is
   // set, the router would default to Dashboard. Redirect to #/board so
   // the board page renders (and BoardPage can read the ?view= param).

package/dist/web/build-commit.txt

@@ -1 +1 @@
-f4fbcce7ae7e03780252526226d74f688f3d08f6
+24408242cd5d9e462deb310bcd8725e1f24cd414

package/dist/web/build-stamp.txt

@@ -1 +1 @@
-20260516-174157-f4fbcce
+20260516-174800-2440824

package/package.json

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