feat: add activity breakdown + cost by project to web dashboard

New API: GET /api/activity — returns activity classification,
one-shot rate, and cost by project (all deterministic, no LLM).

Web Overview tab gains two new panels in the right sidebar:
- Activity: bar chart with 8 categories + one-shot rate badge
- Cost by Project: horizontal bars with dollar amounts

Now consistent with TUI dashboard — same data, same panels.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vicarious11

src/agenttop/web/server.py

@@ -141,6 +141,23 @@ def _build_session_index() -> dict[str, Any]:
     return index
 
 
+@app.get("/api/activity")
+def api_activity(days: int = 0) -> JSONResponse:
+    """Activity classification, one-shot rate, cost by project."""
+    from agenttop.analysis.classifier import (
+        classify_sessions,
+        compute_cost_by_project,
+        compute_oneshot_rate,
+    )
+
+    sessions = _collect_all_sessions(days)
+    return JSONResponse({
+        "activities": classify_sessions(sessions),
+        "oneshot_rate": compute_oneshot_rate(sessions),
+        "cost_by_project": compute_cost_by_project(sessions)[:10],
+    })
+
+
 @app.get("/api/sessions")
 def api_sessions(days: int = 7) -> JSONResponse:
     sessions = _collect_all_sessions(days)

src/agenttop/web/static/css/theme.css

@@ -353,6 +353,22 @@ h3 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--sp-3); co
 .cost-value { font-family: var(--font-mono); font-size: var(--text-xs); min-width: 50px; text-align: right; color: var(--text-secondary); }
 .cost-badge { }
 
+/* ── Activity Panel ── */
+.activity-row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; }
+.activity-name { font-size: var(--text-xs); color: var(--text-secondary); min-width: 80px; text-transform: capitalize; }
+.activity-bar-track { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
+.activity-bar-fill { height: 100%; border-radius: 2px; }
+.activity-pct { font-size: var(--text-xs); font-weight: 600; min-width: 30px; text-align: right; }
+.activity-count { font-size: 10px; font-family: var(--font-mono); color: var(--text-dim); min-width: 25px; text-align: right; }
+
+/* ── Project Cost Panel ── */
+.pcost-row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; }
+.pcost-name { font-size: var(--text-xs); color: var(--text-secondary); min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pcost-bar-track { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
+.pcost-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); }
+.pcost-val { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--warning); min-width: 45px; text-align: right; }
+.pcost-sess { font-size: 10px; color: var(--text-dim); min-width: 20px; text-align: right; }
+
 /* ══════════════════════════════════════════════════════
    GRAPH SVG ELEMENTS
    ══════════════════════════════════════════════════════ */

src/agenttop/web/static/index.html

@@ -92,6 +92,21 @@
         <div id="cost-content" class="panel-body"></div>
       </div>
 
+      <div id="activity-panel" class="glass-panel mini-panel">
+        <div class="panel-header">
+          <div class="panel-title"><span class="panel-icon">◧</span> Activity</div>
+          <div id="oneshot-badge" class="panel-badge"></div>
+        </div>
+        <div id="activity-content" class="panel-body"></div>
+      </div>
+
+      <div id="project-cost-panel" class="glass-panel mini-panel">
+        <div class="panel-header">
+          <div class="panel-title"><span class="panel-icon">◇</span> Cost by Project</div>
+        </div>
+        <div id="project-cost-content" class="panel-body"></div>
+      </div>
+
       <div id="workflow-panel" class="glass-panel mini-panel">
         <div class="panel-header">
           <div class="panel-title"><span class="panel-icon">⬡</span> Workflow</div>

src/agenttop/web/static/js/app.js

@@ -101,13 +101,14 @@ const App = {
 
   async refresh() {
     try {
-      const [graphRes, statsRes, modelsRes, hoursRes, sessionsRes, budgetRes] = await Promise.all([
+      const [graphRes, statsRes, modelsRes, hoursRes, sessionsRes, budgetRes, activityRes] = await Promise.all([
         fetch(`/api/graph?days=${App.days}`),
         fetch(`/api/stats?days=${App.days}`),
         fetch('/api/models'),
         fetch('/api/hours'),
         fetch(`/api/sessions?days=${App.days || 7}`),
         fetch(`/api/budget?days=${App.days}`),
+        fetch(`/api/activity?days=${App.days}`),
       ]);
 
       App.data.graph    = await graphRes.json();
@@ -116,6 +117,7 @@ const App = {
       App.data.hours    = await hoursRes.json();
       App.data.sessions = await sessionsRes.json();
       App.data.budget   = await budgetRes.json();
+      App.data.activity = await activityRes.json();
 
       // Render all panels
       Graph.render(App.data.graph);
@@ -124,6 +126,8 @@ const App = {
       Panels.renderModels(App.data.models);
       Panels.renderHourly(App.data.hours);
       Panels.renderCost(App.data.stats);
+      Panels.renderActivity(App.data.activity);
+      Panels.renderProjectCost(App.data.activity);
 
       // Update session data and tab badges
       if (typeof SessionExplorer !== 'undefined') {

src/agenttop/web/static/js/panels.js

@@ -254,4 +254,85 @@ const Panels = {
       }).join('')}
     `;
   },
+
+  /* ═══════════════════════════════════════════════════════
+     ACTIVITY BREAKDOWN + ONE-SHOT RATE
+     ═══════════════════════════════════════════════════════ */
+
+  ACTIVITY_COLORS: {
+    coding: '#34d399', debugging: '#f87171', testing: '#fbbf24',
+    exploration: '#22d3ee', refactoring: '#c084fc', git_ops: '#60a5fa',
+    planning: '#f97316', other: '#71717a',
+  },
+
+  renderActivity(data) {
+    const el = document.getElementById('activity-content');
+    const badge = document.getElementById('oneshot-badge');
+    if (!data || !data.activities) {
+      el.innerHTML = '<div class="panel-empty">No activity data</div>';
+      return;
+    }
+
+    const acts = data.activities;
+    const rate = data.oneshot_rate || 0;
+    const total = Object.values(acts).reduce((s, v) => s + v, 0);
+
+    if (badge) {
+      const rateColor = rate >= 80 ? 'var(--success)' : rate >= 60 ? 'var(--warning)' : 'var(--error)';
+      badge.innerHTML = `<span style="color:${rateColor};font-weight:700">${rate.toFixed(0)}% one-shot</span>`;
+    }
+
+    if (total === 0) {
+      el.innerHTML = '<div class="panel-empty">No sessions</div>';
+      return;
+    }
+
+    const maxVal = Math.max(...Object.values(acts));
+
+    el.innerHTML = Object.entries(acts)
+      .filter(([, v]) => v > 0)
+      .map(([act, count]) => {
+        const pct = (count / total * 100).toFixed(0);
+        const color = Panels.ACTIVITY_COLORS[act] || '#71717a';
+        const barW = Math.max((count / maxVal * 100), 2).toFixed(1);
+        const name = act.replace('_', ' ');
+        return `
+          <div class="activity-row">
+            <span class="activity-name">${name}</span>
+            <div class="activity-bar-track">
+              <div class="activity-bar-fill" style="width:${barW}%;background:${color}"></div>
+            </div>
+            <span class="activity-pct" style="color:${color}">${pct}%</span>
+            <span class="activity-count">${count}</span>
+          </div>`;
+      }).join('');
+  },
+
+  /* ═══════════════════════════════════════════════════════
+     COST BY PROJECT
+     ═══════════════════════════════════════════════════════ */
+
+  renderProjectCost(data) {
+    const el = document.getElementById('project-cost-content');
+    if (!data || !data.cost_by_project || data.cost_by_project.length === 0) {
+      el.innerHTML = '<div class="panel-empty">No project data</div>';
+      return;
+    }
+
+    const projects = data.cost_by_project;
+    const maxCost = projects[0].cost || 1;
+
+    el.innerHTML = projects.map(p => {
+      const barW = Math.max((p.cost / maxCost * 100), 2).toFixed(1);
+      return `
+        <div class="pcost-row">
+          <span class="pcost-name">${p.project}</span>
+          <div class="pcost-bar-track">
+            <div class="pcost-bar-fill" style="width:${barW}%"></div>
+          </div>
+          <span class="pcost-val">${App.formatCost(p.cost)}</span>
+          <span class="pcost-sess">${p.sessions}s</span>
+        </div>`;
+    }).join('');
+  },
 };