300 lines
15 KiB
TypeScript
300 lines
15 KiB
TypeScript
/**
|
||
* Verbatim port of the v1 budget-panel client JS (old src/server/board.ts,
|
||
* lines 1466–1750). Kept byte-identical on purpose: session/total baseline
|
||
* logic, donut signature throttling and the reset handler are battle-tested.
|
||
*
|
||
* Depends on page-scope helpers provided by the columns/data-layer port:
|
||
* esc, getJSON, hashColor, agentSpec, toast. Mount points expected in the DOM:
|
||
* #budgetRows, #budgetTotal, #budgetReset, [data-budget-mode].
|
||
*/
|
||
export const v1BudgetJs = `
|
||
// ── Roster ──────────────────────────────────────────────────────────────
|
||
// AGENTS backs the budget panel + resolves a title's "name:" prefix to a
|
||
// known agent when the architect drags a card into In Progress.
|
||
var AGENTS = [];
|
||
var BUDGET = null;
|
||
var budgetMode = localStorage.getItem('agenthub-budget-mode') || 'session';
|
||
var donutMetric = localStorage.getItem('agenthub-donut-metric') || 'tokens';
|
||
var lastDonutSignature = '';
|
||
var lastDonutAt = 0;
|
||
var DONUT_REFRESH_MS = 180000;
|
||
|
||
async function loadAgents() {
|
||
try {
|
||
AGENTS = await getJSON('/agents');
|
||
} catch (_) { AGENTS = []; }
|
||
}
|
||
|
||
// ── Budget panel ────────────────────────────────────────────────────────
|
||
function fmtTokens(n) {
|
||
n = Number(n) || 0;
|
||
if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
|
||
if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
|
||
return String(Math.round(n));
|
||
}
|
||
function fmtEur(n) { return '\\u20ac' + (Number(n) || 0).toFixed(2); }
|
||
function maxTok(list) { return list.reduce(function(m, a) { return Math.max(m, a.tokens || 0); }, 0); }
|
||
function cloneAgent(a) {
|
||
return {
|
||
name: a.name,
|
||
role: a.role,
|
||
model: a.model,
|
||
kind: a.kind,
|
||
tokens: Number(a.tokens) || 0,
|
||
realTokens: Number(a.realTokens) || 0,
|
||
estimatedTokens: Number(a.estimatedTokens) || 0,
|
||
estimated: !!a.estimated,
|
||
costEur: Number(a.costEur) || 0,
|
||
taskCount: Number(a.taskCount) || 0
|
||
};
|
||
}
|
||
function currentSnapshot(rep) {
|
||
var byAgent = {};
|
||
(rep && rep.agents ? rep.agents : []).forEach(function(a) {
|
||
byAgent[a.name] = { tokens: Number(a.tokens) || 0, costEur: Number(a.costEur) || 0 };
|
||
});
|
||
return { createdAt: Date.now(), byAgent: byAgent };
|
||
}
|
||
function readBaseline() {
|
||
try { return JSON.parse(localStorage.getItem('agenthub-budget-baseline') || 'null'); } catch (_) { return null; }
|
||
}
|
||
function writeBaseline(rep) {
|
||
localStorage.setItem('agenthub-budget-baseline', JSON.stringify(currentSnapshot(rep)));
|
||
}
|
||
function applyBudgetMode(rep) {
|
||
var agents = (rep && rep.agents ? rep.agents : []).map(cloneAgent);
|
||
if (budgetMode === 'session') {
|
||
var base = readBaseline();
|
||
if (!base) { writeBaseline(rep); base = readBaseline(); }
|
||
agents.forEach(function(a) {
|
||
var b = base && base.byAgent ? base.byAgent[a.name] : null;
|
||
var baseTokens = b ? Number(b.tokens) || 0 : 0;
|
||
var baseCost = b ? Number(b.costEur) || 0 : 0;
|
||
a.tokens = Math.max(0, a.tokens - baseTokens);
|
||
a.costEur = Math.max(0, a.costEur - baseCost);
|
||
a.realTokens = Math.min(a.realTokens, a.tokens);
|
||
a.estimatedTokens = Math.max(0, a.tokens - a.realTokens);
|
||
a.estimated = a.estimated && a.estimatedTokens > 0;
|
||
});
|
||
}
|
||
var totals = {
|
||
tokens: agents.reduce(function(s, a) { return s + (a.tokens || 0); }, 0),
|
||
costEur: agents.reduce(function(s, a) { return s + (a.costEur || 0); }, 0),
|
||
estimated: agents.some(function(a) { return a.estimated; })
|
||
};
|
||
return { agents: agents, totals: totals };
|
||
}
|
||
function companySpec(kind) {
|
||
var key = String(kind || '').toLowerCase();
|
||
var map = {
|
||
anthropic: { name: 'Anthropic', color: '#D97757' },
|
||
openai: { name: 'OpenAI', color: '#10A37F' },
|
||
moonshot: { name: 'Moonshot', color: '#7C3AED' }
|
||
};
|
||
return map[key] || { name: key ? key.charAt(0).toUpperCase() + key.slice(1) : 'Unknown', color: hashColor(key || 'unknown') };
|
||
}
|
||
function donutPolar(cx, cy, r, angleDeg) {
|
||
var rad = angleDeg * Math.PI / 180;
|
||
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
|
||
}
|
||
function donutArc(cx, cy, r, startDeg, endDeg) {
|
||
var start = donutPolar(cx, cy, r, startDeg);
|
||
var end = donutPolar(cx, cy, r, endDeg);
|
||
var largeArc = endDeg - startDeg > 180 ? 1 : 0;
|
||
return 'M ' + start.x.toFixed(2) + ' ' + start.y.toFixed(2) + ' A ' + r + ' ' + r + ' 0 ' + largeArc + ' 1 ' + end.x.toFixed(2) + ' ' + end.y.toFixed(2);
|
||
}
|
||
function aggregateByCompany(agents, field) {
|
||
var byKind = {};
|
||
(agents || []).forEach(function(a) {
|
||
var kind = String(a.kind || '').toLowerCase();
|
||
if (!kind || !(a.tokens > 0)) return;
|
||
var spec = companySpec(kind);
|
||
if (!byKind[kind]) byKind[kind] = { kind: kind, name: spec.name, color: spec.color, value: 0 };
|
||
byKind[kind].value += Number(a[field]) || 0;
|
||
});
|
||
return Object.keys(byKind).map(function(k) { return byKind[k]; }).sort(function(a, b) { return b.value - a.value; });
|
||
}
|
||
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);
|
||
var cx = 110, cy = 122, r = 90, stroke = 18;
|
||
var angle = 180;
|
||
var paths = '<path d="' + donutArc(cx, cy, r, 180, 360) + '" stroke="rgba(255,255,255,.09)" stroke-width="' + stroke + '" fill="none" stroke-linecap="round" />';
|
||
rows.forEach(function(row, idx) {
|
||
var start = angle;
|
||
var end = angle + 180 * ((row.value || 0) / safeTotal);
|
||
angle = end;
|
||
if (end <= start + 0.4) return;
|
||
paths += '<path class="donut-segment" d="' + donutArc(cx, cy, r, start, end) + '" stroke="' + esc(row.color) + '" stroke-width="' + stroke + '" fill="none" stroke-linecap="round" pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" style="animation-delay:' + (idx * 80) + 'ms" />';
|
||
});
|
||
if (!rows.length) paths += '<circle cx="' + cx + '" cy="' + (cy - r + stroke / 2) + '" r="3" fill="#94A3B8" />';
|
||
var legend = rows.length ? rows.map(function(row) {
|
||
var pct = total > 0 ? Math.round((row.value / total) * 100) : 0;
|
||
return '<div class="legend-row" style="color:' + esc(row.color) + '">' +
|
||
'<span class="legend-dot"></span><span class="legend-name">' + esc(row.name) + '</span>' +
|
||
'<span>' + esc(formatValue(row.value)) + ' · ' + pct + '%</span></div>';
|
||
}).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>' +
|
||
'<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>' +
|
||
'<text class="donut-label" x="110" y="120" text-anchor="middle" dominant-baseline="central">' + esc(centerLabel) + '</text>' +
|
||
'</svg>' +
|
||
'</div>' +
|
||
'<div class="legend">' + legend + '</div>' +
|
||
'</div>';
|
||
}
|
||
function animateCounts(root) {
|
||
var nodes = (root || document).querySelectorAll('[data-count-to]');
|
||
nodes.forEach(function(node) {
|
||
var target = Number(node.getAttribute('data-count-to')) || 0;
|
||
var format = node.getAttribute('data-count-format');
|
||
var start = performance.now();
|
||
function step(now) {
|
||
var p = Math.min(1, (now - start) / 900);
|
||
var eased = 1 - Math.pow(1 - p, 3);
|
||
var val = target * eased;
|
||
node.textContent = format === 'eur' ? fmtEur(val) : fmtTokens(val);
|
||
if (p < 1) requestAnimationFrame(step);
|
||
}
|
||
requestAnimationFrame(step);
|
||
});
|
||
}
|
||
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 ? '<span class="est">~ estimated</span>' : 'real';
|
||
var pct = mx > 0 ? Math.round(((a.tokens || 0) / mx) * 1000) / 10 : 0;
|
||
var company = companySpec(a.kind);
|
||
return '<div class="agent-bar-row" data-agent-row="' + esc(a.name) + '">' +
|
||
'<div class="budget-agent"><span class="ba-core" style="background:' + esc(spec.color) + '">' + esc(spec.initials) + '</span>' +
|
||
'<span style="min-width:0"><span class="ba-name">' + esc(a.name) + '</span>' +
|
||
'<span class="ba-model">' + esc(company.name + (a.model ? ' · ' + a.model : '')) + '</span></span></div>' +
|
||
'<div class="agent-bar-cell"><div class="agent-bar-track" style="--bar-color:' + esc(company.color) + '"><span style="width:' + Math.min(100, pct) + '%"></span></div>' +
|
||
'<div class="agent-bar-meta"><span class="tok">' + fmtTokens(a.tokens) + ' tok</span><span>' + est + ' · ' + fmtEur(a.costEur) + '</span></div></div>' +
|
||
'</div>';
|
||
}
|
||
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 = '<h3>Token-Verbrauch pro Agent</h3>' + 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 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;
|
||
}
|
||
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>';
|
||
}
|
||
renderDonut(active, opts.forceDonut);
|
||
renderAgentBars(active);
|
||
total.innerHTML = (scoped.totals.estimated ? '~' : '') + fmtTokens(scoped.totals.tokens) +
|
||
' tok <small>\\u00b7 \\u2248 ' + fmtEur(scoped.totals.costEur) + '</small>';
|
||
}
|
||
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');
|
||
}
|
||
}
|
||
});
|
||
`;
|