' +
'
' +
'
0' + esc(centerLabel) + '
' +
@@ -1325,47 +1360,141 @@ ${columnSkeleton()}
requestAnimationFrame(step);
});
}
- function renderBudget(rep) {
+ function signatureFor(rows) {
+ return rows.map(function(r) { return r.kind + ':' + Math.round((Number(r.value) || 0) * 100); }).join('|');
+ }
+ function shouldRenderDonut(nextSig, force) {
+ if (force) return true;
+ var now = Date.now();
+ if (!lastDonutSignature || now - lastDonutAt > DONUT_REFRESH_MS) return true;
+ if (nextSig === lastDonutSignature) return false;
+ var prev = {};
+ lastDonutSignature.split('|').forEach(function(part) {
+ if (!part) return;
+ var bits = part.split(':');
+ prev[bits[0]] = Number(bits[1]) || 0;
+ });
+ var changed = false;
+ nextSig.split('|').forEach(function(part) {
+ if (!part) return;
+ var bits = part.split(':');
+ var oldVal = prev[bits[0]] || 0;
+ var newVal = Number(bits[1]) || 0;
+ if (Math.abs(newVal - oldVal) / Math.max(1, oldVal) > 0.10) changed = true;
+ });
+ return changed;
+ }
+ function renderDonut(active, force) {
+ var wrap = document.getElementById('donutWrap');
+ if (!wrap) return;
+ var field = donutMetric === 'cost' ? 'costEur' : 'tokens';
+ var companies = aggregateByCompany(active, field);
+ var sig = donutMetric + ':' + signatureFor(companies);
+ if (!shouldRenderDonut(sig, force)) return;
+ lastDonutSignature = sig;
+ lastDonutAt = Date.now();
+ var center = active.reduce(function(s, a) { return s + (Number(a[field]) || 0); }, 0);
+ wrap.innerHTML = halfDonut(donutMetric === 'cost' ? 'Cost by Company' : 'Tokens by Company', companies, center, donutMetric === 'cost' ? 'EUR' : 'tokens', donutMetric === 'cost' ? fmtEur : fmtTokens);
+ animateCounts(wrap);
+ }
+ function agentBarHtml(a, mx) {
+ var spec = agentSpec(a.name);
+ var est = a.estimated ? '
~ estimated' : 'real';
+ var pct = mx > 0 ? Math.round(((a.tokens || 0) / mx) * 1000) / 10 : 0;
+ var company = companySpec(a.kind);
+ return '
' +
+ '
' + esc(spec.initials) + '' +
+ '' + esc(a.name) + '' +
+ '' + esc(company.name + (a.model ? ' · ' + a.model : '')) + '
' +
+ '
' +
+ '
' + fmtTokens(a.tokens) + ' tok' + esc(est) + ' · ' + fmtEur(a.costEur) + '
' +
+ '
';
+ }
+ function renderAgentBars(active) {
+ var host = document.getElementById('agentBars');
+ if (!host) return;
+ var before = {};
+ host.querySelectorAll('[data-agent-row]').forEach(function(el) {
+ before[el.getAttribute('data-agent-row')] = el.getBoundingClientRect();
+ });
+ var mx = maxTok(active) || 1;
+ var sorted = active.slice().sort(function(a, b) { return (b.tokens || 0) - (a.tokens || 0) || a.name.localeCompare(b.name); });
+ host.innerHTML = '
Token-Verbrauch pro Agent
' + sorted.map(function(a) { return agentBarHtml(a, mx); }).join('');
+ host.querySelectorAll('[data-agent-row]').forEach(function(el) {
+ var key = el.getAttribute('data-agent-row');
+ var old = before[key];
+ if (!old) return;
+ var now = el.getBoundingClientRect();
+ var dy = old.top - now.top;
+ if (!dy) return;
+ el.style.transform = 'translateY(' + dy + 'px)';
+ requestAnimationFrame(function() { el.style.transform = ''; });
+ });
+ }
+ function updateBudgetButtons() {
+ document.querySelectorAll('[data-budget-mode]').forEach(function(btn) {
+ btn.classList.toggle('active', btn.getAttribute('data-budget-mode') === budgetMode);
+ });
+ document.querySelectorAll('[data-donut-tab]').forEach(function(btn) {
+ btn.classList.toggle('active', btn.getAttribute('data-donut-tab') === donutMetric);
+ });
+ }
+ function renderBudget(rep, opts) {
+ opts = opts || {};
BUDGET = rep;
var rows = document.getElementById('budgetRows');
var total = document.getElementById('budgetTotal');
if (!rows || !total) return;
- var active = (rep && rep.agents ? rep.agents : []).filter(function(a) { return a.kind && a.tokens > 0; });
+ var scoped = applyBudgetMode(rep);
+ var active = scoped.agents.filter(function(a) { return a.kind && a.tokens > 0; });
+ updateBudgetButtons();
if (!active.length) {
- rows.innerHTML = '
no real agent token data yet
';
+ rows.innerHTML = '
no real agent token data in this ' + (budgetMode === 'session' ? 'session' : 'total range') + '
';
total.textContent = '';
+ lastDonutSignature = '';
return;
}
- var mx = maxTok(active) || 1;
- var tokenCompanies = aggregateByCompany(active, 'tokens');
- var costCompanies = aggregateByCompany(active, 'costEur');
- var bars = active.slice().sort(function(a, b) { return (b.tokens || 0) - (a.tokens || 0); }).map(function(a) {
- var spec = agentSpec(a.name);
- var est = a.estimated ? '
~' : '';
- var pct = Math.max(4, Math.round(((a.tokens || 0) / mx) * 100));
- var company = companySpec(a.kind);
- return '
' +
- '
' + esc(spec.initials) + '' +
- '' + esc(a.name) + '' +
- '' + esc(company.name + (a.model ? ' · ' + a.model : '')) + '
' +
- '
' +
- '
' + est + fmtTokens(a.tokens) + ' tok' + fmtEur(a.costEur) + '
' +
- '
';
- }).join('');
- rows.innerHTML =
- '
' +
- halfDonut('Tokens by Company', tokenCompanies, active.reduce(function(s, a) { return s + (a.tokens || 0); }, 0), 'tokens', fmtTokens) +
- halfDonut('Cost by Company', costCompanies, active.reduce(function(s, a) { return s + (a.costEur || 0); }, 0), 'EUR', fmtEur) +
- '
' +
- '
Token-Verbrauch pro Agent
' + bars + '';
- total.innerHTML = (rep.totals.estimated ? '~' : '') + fmtTokens(rep.totals.tokens) +
- ' tok
\\u00b7 \\u2248 ' + fmtEur(rep.totals.costEur) + '';
- animateCounts(rows);
+ if (!document.getElementById('donutWrap') || !document.getElementById('agentBars')) {
+ rows.innerHTML = '
';
+ }
+ renderDonut(active, opts.forceDonut);
+ renderAgentBars(active);
+ total.innerHTML = (scoped.totals.estimated ? '~' : '') + fmtTokens(scoped.totals.tokens) +
+ ' tok
\\u00b7 \\u2248 ' + fmtEur(scoped.totals.costEur) + '';
}
async function refreshBudget() {
try { renderBudget(await getJSON('/budget')); } catch (_) {}
}
+ document.addEventListener('click', function(e) {
+ var modeBtn = e.target.closest && e.target.closest('[data-budget-mode]');
+ if (modeBtn) {
+ budgetMode = modeBtn.getAttribute('data-budget-mode') || 'session';
+ localStorage.setItem('agenthub-budget-mode', budgetMode);
+ lastDonutSignature = '';
+ if (BUDGET) renderBudget(BUDGET, { forceDonut: true });
+ return;
+ }
+ var tabBtn = e.target.closest && e.target.closest('[data-donut-tab]');
+ if (tabBtn) {
+ donutMetric = tabBtn.getAttribute('data-donut-tab') || 'tokens';
+ localStorage.setItem('agenthub-donut-metric', donutMetric);
+ if (BUDGET) renderBudget(BUDGET, { forceDonut: true });
+ return;
+ }
+ var reset = e.target.closest && e.target.closest('#budgetReset');
+ if (reset) {
+ if (BUDGET) {
+ writeBaseline(BUDGET);
+ budgetMode = 'session';
+ localStorage.setItem('agenthub-budget-mode', budgetMode);
+ lastDonutSignature = '';
+ renderBudget(BUDGET, { forceDonut: true });
+ toast('Token session reset');
+ }
+ }
+ });
+
// ── Toasts ──────────────────────────────────────────────────────────────
function toast(msg, opts) {
opts = opts || {};
diff --git a/tests/server.test.ts b/tests/server.test.ts
index 34decc0..ab4b948 100644
--- a/tests/server.test.ts
+++ b/tests/server.test.ts
@@ -127,11 +127,11 @@ describe('server routes', () => {
for (const col of ['open', 'in_progress', 'review', 'done', 'cancelled']) {
expect(html).toContain(`data-column="${col}"`);
}
- // Handoffs + decisions panels and the polling logic are wired in.
- expect(html).toContain('Handoffs');
- expect(html).toContain('Decisions');
+ // Board polling stays wired; handoffs/decisions now live on dedicated pages.
expect(html).toContain("getJSON('/tasks')");
expect(html).toContain('setInterval(refresh');
+ expect(html).toContain('Token Insights');
+ expect(html).toContain('data-budget-mode="session"');
});
// ── Activity timeline endpoint ─────────────────────────────────────────
@@ -192,16 +192,6 @@ describe('server routes', () => {
expect(status!.meta?.by).toBe('claude');
});
- it('board HTML contains the who-arrow rendering logic', async () => {
- const res = await app.inject({ method: 'GET', url: '/board' });
- const html = res.payload;
- // The handoffRoute helper and the → arrow must be present
- expect(html).toContain('handoffRoute');
- expect(html).toContain('→');
- // The who-cell class must be used in renderHandoffs
- expect(html).toContain('who-cell');
- });
-
it('board HTML keeps cards slim and links to task detail pages', async () => {
const res = await app.inject({ method: 'GET', url: '/board' });
const html = res.payload;