From 964ddff2f2ee264d29011fea4282125358f8e4b1 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Wed, 22 Jul 2026 17:19:55 +0200
Subject: [PATCH] =?UTF-8?q?feat(board):=20drop=20budget=20=C3=BCber-tabs,?=
 =?UTF-8?q?=20Verlauf=20chart=20lives=20in=20donut=20card=20as=20third=20t?=
 =?UTF-8?q?ab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/board/sidebar.ts   | 63 +++++++++--------------------------
 src/server/board/styles.ts    | 17 ++--------
 src/server/board/v1Budget.ts  | 52 ++++++++++++++++++++++++-----
 tests/boardV2-sidebar.test.ts | 16 ++++++---
 4 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/src/server/board/sidebar.ts b/src/server/board/sidebar.ts
index 90f02ee..b1a47f5 100644
--- a/src/server/board/sidebar.ts
+++ b/src/server/board/sidebar.ts
@@ -1,38 +1,26 @@
 import { throughputSeries, areaPath, dayStart } from './viewmodel.js';
 
 /**
- * Sidebar skeleton: budget card (über-tabs Token Insights | Verlauf; insight
- * is the default) + live feed card. The insight pane keeps the v1 mount
- * points (#budgetRows, #budgetTotal, #budgetReset, [data-budget-mode]) that
- * the ported v1 budget JS (v1Budget.ts) drives; donut sub-tabs (Token/Kosten)
- * are rendered by that same ported code.
+ * Sidebar skeleton: budget card + live feed card. The budget card has no tab
+ * bar of its own — the Token/Kosten/Verlauf tabs live inside the donut card
+ * (rendered client-side by the ported v1 budget JS in v1Budget.ts). The
+ * subhead keeps the v1 mount points: [data-budget-mode] (Session/Gesamt),
+ * #budgetTotal, #budgetReset; #budgetRows is where the donut card mounts.
  */
 export function sidebarHtml(): string {
   return `
 <aside class="b2-side">
   <div class="b2-panel b2-glass" id="b2Budget">
-    <div class="b2-tabhead">
+    <div class="b2-subhead">
       <h6>Budget</h6>
-      <div class="b2-otabs">
-        <button type="button" data-otab="insight" class="active">Token Insights</button>
-        <button type="button" data-otab="verlauf">Verlauf</button>
-      </div>
-    </div>
-    <div data-opane="insight">
-      <div class="b2-subhead">
-        <span class="seg" aria-label="Token insight range">
-          <button type="button" data-budget-mode="session" class="active">Session</button>
-          <button type="button" data-budget-mode="total">Gesamt</button>
-        </span>
-        <span class="total" id="budgetTotal"></span>
-        <button type="button" class="reset-btn" id="budgetReset">Reset</button>
-      </div>
-      <div id="budgetRows"><div class="budget-empty">no agent activity yet</div></div>
-    </div>
-    <div data-opane="verlauf" hidden>
-      <div id="b2Throughput"></div>
-      <div class="b2-chart-tip" id="b2ThroughputTip"></div>
+      <span class="seg" aria-label="Token insight range">
+        <button type="button" data-budget-mode="session" class="active">Session</button>
+        <button type="button" data-budget-mode="total">Gesamt</button>
+      </span>
+      <span class="total" id="budgetTotal"></span>
+      <button type="button" class="reset-btn" id="budgetReset">Reset</button>
     </div>
+    <div id="budgetRows"><div class="budget-empty">no agent activity yet</div></div>
   </div>
   <div class="b2-panel b2-glass">
     <h6>Live</h6>
@@ -42,8 +30,8 @@ export function sidebarHtml(): string {
 }
 
 /**
- * Inline script: über-tab switching (persisted in localStorage), throughput
- * area chart, live feed — followed by the ported v1 budget JS.
+ * Inline script: throughput area chart renderer (used by the Verlauf tab in
+ * the donut card) + live feed, followed by the ported v1 budget JS.
  */
 export function sidebarJs(v1BudgetJs: string): string {
   return `
@@ -51,29 +39,10 @@ var DAY_MS = 24 * 3600 * 1000;
 ${dayStart.toString()}
 ${throughputSeries.toString()}
 ${areaPath.toString()}
-(function () {
-  var OTAB_KEY = 'agenthub-budget-otab';
-  function activate(name) {
-    document.querySelectorAll('[data-otab]').forEach(function (b) {
-      b.classList.toggle('active', b.getAttribute('data-otab') === name);
-    });
-    document.querySelectorAll('[data-opane]').forEach(function (p) {
-      p.hidden = p.getAttribute('data-opane') !== name;
-    });
-  }
-  document.addEventListener('click', function (e) {
-    var btn = e.target.closest && e.target.closest('[data-otab]');
-    if (!btn) return;
-    var name = btn.getAttribute('data-otab');
-    localStorage.setItem(OTAB_KEY, name);
-    activate(name);
-  });
-  activate(localStorage.getItem(OTAB_KEY) || 'insight');
-})();
 window.__b2RenderThroughput = function (tasks) {
   var box = document.getElementById('b2Throughput');
   var tip = document.getElementById('b2ThroughputTip');
-  if (!box) return;
+  if (!box) return; // Verlauf tab not mounted right now — nothing to update
   var s = throughputSeries(tasks, 14);
   var p = areaPath(s, 220, 80);
   box.innerHTML = '<svg width="100%" height="80" viewBox="0 0 220 80" preserveAspectRatio="none">'
diff --git a/src/server/board/styles.ts b/src/server/board/styles.ts
index 66da531..3ee834c 100644
--- a/src/server/board/styles.ts
+++ b/src/server/board/styles.ts
@@ -309,22 +309,9 @@ export function boardV2Css(): string {
       position: sticky; top: 84px; max-height: calc(100vh - 102px); overflow-y: auto; }
     .b2-panel { padding: 13px 15px; }
     .b2-panel h6 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--b2-muted); }
-    .b2-tabhead { display: flex; align-items: center; gap: 8px; }
-    .b2-otabs, .b2-stabs { display: flex; gap: 4px; }
-    .b2-otabs { margin-left: auto; }
-    .b2-otabs button, .b2-stabs button {
-      min-height: 26px; padding: 0 10px; border-radius: 999px; cursor: pointer;
-      border: 1px solid transparent; background: transparent;
-      color: var(--b2-muted); font: 600 11px/1 var(--sans);
-      transition: color 140ms, background 140ms, border-color 140ms;
-    }
-    .b2-otabs button.active, .b2-stabs button.active {
-      color: var(--b2-text); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14);
-    }
-    .b2-subhead { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+    .b2-subhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
     .b2-subhead .seg { margin-left: auto; }
-    [data-opane] { margin-top: 10px; }
-    [data-opane][hidden] { display: none; }
+    #budgetRows { margin-top: 10px; }
     .b2-chart-tip { color: var(--b2-muted); font-size: 11px; text-align: right; margin-top: 5px; font-family: var(--mono); }
 
     /* Budget internals (ported v1: seg, reset, donuts, legend, agent bars) */
diff --git a/src/server/board/v1Budget.ts b/src/server/board/v1Budget.ts
index 13d62b4..3ef2e7a 100644
--- a/src/server/board/v1Budget.ts
+++ b/src/server/board/v1Budget.ts
@@ -114,6 +114,17 @@ export const v1BudgetJs = `
       });
       return Object.keys(byKind).map(function(k) { return byKind[k]; }).sort(function(a, b) { return b.value - a.value; });
     }
+    // The donut card hosts three tabs: Token | Kosten | Verlauf (throughput chart).
+    function donutTabsHtml() {
+      return '<div class="donut-tabs">' +
+        '<button type="button" data-donut-tab="tokens" class="' + (donutMetric === 'tokens' ? 'active' : '') + '">Token</button>' +
+        '<button type="button" data-donut-tab="cost" class="' + (donutMetric === 'cost' ? 'active' : '') + '">Kosten</button>' +
+        '<button type="button" data-donut-tab="verlauf" class="' + (donutMetric === 'verlauf' ? 'active' : '') + '">Verlauf</button>' +
+      '</div>';
+    }
+    function donutCardShell(title, bodyHtml) {
+      return '<div class="donut-card"><h3 class="donut-title">' + esc(title) + '</h3>' + donutTabsHtml() + bodyHtml + '</div>';
+    }
     function halfDonut(title, rows, centerValue, centerLabel, formatValue) {
       var total = rows.reduce(function(s, x) { return s + (x.value || 0); }, 0);
       var safeTotal = Math.max(1, total);
@@ -136,7 +147,7 @@ export const v1BudgetJs = `
       }).join('') : '<div class="empty">no provider data</div>';
       return '<div class="donut-card">' +
         '<h3 class="donut-title">' + esc(title) + '</h3>' +
-        '<div class="donut-tabs"><button type="button" data-donut-tab="tokens" class="' + (donutMetric === 'tokens' ? 'active' : '') + '">Token</button><button type="button" data-donut-tab="cost" class="' + (donutMetric === 'cost' ? 'active' : '') + '">Kosten</button></div>' +
+        donutTabsHtml() +
         '<div class="half-donut">' +
           '<svg viewBox="0 0 220 132" role="img" aria-label="' + esc(title) + '">' + paths +
             '<text class="donut-value" x="110" y="102" text-anchor="middle" dominant-baseline="central" data-count-to="' + esc(centerValue) + '" data-count-format="' + (formatValue === fmtEur ? 'eur' : 'tokens') + '">0</text>' +
@@ -189,6 +200,20 @@ export const v1BudgetJs = `
     function renderDonut(active, force) {
       var wrap = document.getElementById('donutWrap');
       if (!wrap) return;
+      // Verlauf tab: throughput area chart instead of the donut. Static
+      // signature — the chart content itself updates via __b2RenderThroughput
+      // on task refreshes, so the 3s budget poll must not rebuild the card.
+      if (donutMetric === 'verlauf') {
+        if (lastDonutSignature === 'verlauf' && !force) return;
+        lastDonutSignature = 'verlauf';
+        lastDonutAt = Date.now();
+        wrap.innerHTML = donutCardShell('Verlauf · erledigte Tasks',
+          '<div id="b2Throughput"></div><div class="b2-chart-tip" id="b2ThroughputTip"></div>');
+        if (window.__b2RenderThroughput) {
+          window.__b2RenderThroughput(typeof lastTasks !== 'undefined' ? lastTasks : []);
+        }
+        return;
+      }
       var field = donutMetric === 'cost' ? 'costEur' : 'tokens';
       var companies = aggregateByCompany(active, field);
       var sig = donutMetric + ':' + signatureFor(companies);
@@ -250,17 +275,28 @@ export const v1BudgetJs = `
       var scoped = applyBudgetMode(rep);
       var active = scoped.agents.filter(function(a) { return a.kind && a.tokens > 0; });
       updateBudgetButtons();
-      if (!active.length) {
-        rows.innerHTML = '<div class="budget-empty">no real agent token data in this ' + (budgetMode === 'session' ? 'session' : 'total range') + '</div>';
-        total.textContent = '';
-        lastDonutSignature = '';
-        return;
-      }
+      // The card skeleton (and with it the Token/Kosten/Verlauf tabs) always
+      // exists — even in the empty state the Verlauf tab must stay reachable.
       if (!document.getElementById('donutWrap') || !document.getElementById('agentBars')) {
         rows.innerHTML = '<div class="donut-grid"><div id="donutWrap"></div></div><div class="agent-bars" id="agentBars"></div>';
       }
+      var bars = document.getElementById('agentBars');
+      if (!active.length) {
+        if (donutMetric === 'verlauf') {
+          renderDonut(active, opts.forceDonut);
+        } else {
+          lastDonutSignature = '';
+          document.getElementById('donutWrap').innerHTML = donutCardShell('Token Insights',
+            '<div class="budget-empty">no real agent token data in this ' + (budgetMode === 'session' ? 'session' : 'total range') + '</div>');
+        }
+        if (bars) bars.innerHTML = '';
+        total.textContent = '';
+        return;
+      }
       renderDonut(active, opts.forceDonut);
-      renderAgentBars(active);
+      // Agent bars belong to the token insights; hidden on the Verlauf tab.
+      if (donutMetric === 'verlauf') { if (bars) bars.innerHTML = ''; }
+      else renderAgentBars(active);
       total.innerHTML = (scoped.totals.estimated ? '~' : '') + fmtTokens(scoped.totals.tokens) +
         ' tok <small>\\u00b7 \\u2248 ' + fmtEur(scoped.totals.costEur) + '</small>';
     }
diff --git a/tests/boardV2-sidebar.test.ts b/tests/boardV2-sidebar.test.ts
index d03a630..545c34d 100644
--- a/tests/boardV2-sidebar.test.ts
+++ b/tests/boardV2-sidebar.test.ts
@@ -3,11 +3,10 @@ import { sidebarHtml, sidebarJs } from '../src/server/board/sidebar.js';
 import { v1BudgetJs } from '../src/server/board/v1Budget.js';
 
 describe('sidebarHtml', () => {
-  it('renders budget card with über-tabs and insight as default', () => {
+  it('renders budget card without über-tabs (tabs live in the donut card)', () => {
     const h = sidebarHtml();
     expect(h).toContain('id="b2Budget"');
-    expect(h).toContain('data-otab="insight"');
-    expect(h).toContain('data-otab="verlauf"');
+    expect(h).not.toContain('data-otab');
     expect(h).toContain('id="budgetReset"');
     expect(h).toContain('id="b2Feed"');
   });
@@ -22,8 +21,8 @@ describe('sidebarHtml', () => {
 
 describe('sidebarJs', () => {
   const js = sidebarJs(v1BudgetJs);
-  it('persists the über-tab and renders throughput', () => {
-    expect(js).toContain('agenthub-budget-otab'); // localStorage key
+  it('renders throughput and feed without über-tab logic', () => {
+    expect(js).not.toContain('agenthub-budget-otab');
     expect(js).toContain('function throughputSeries');
     expect(js).toContain('function dayStart');
     expect(js).toContain('__b2RenderThroughput');
@@ -36,4 +35,11 @@ describe('sidebarJs', () => {
     expect(js).toContain('budgetReset');
     expect(js).toContain('renderBudget');
   });
+  it('hosts the three tabs Token/Kosten/Verlauf inside the donut card', () => {
+    expect(js).toContain('data-donut-tab="tokens"');
+    expect(js).toContain('data-donut-tab="cost"');
+    expect(js).toContain('data-donut-tab="verlauf"');
+    expect(js).toContain('donutTabsHtml');
+    expect(js).toContain('donutCardShell');
+  });
 });