444 lines
15 KiB
JavaScript
444 lines
15 KiB
JavaScript
const $ = id => document.getElementById(id);
|
|
|
|
const ZOOM_LEVELS = [
|
|
{ name: '1 Monat', days: 30 },
|
|
{ name: '2 Wochen', days: 14 },
|
|
{ name: '1 Woche', days: 7 },
|
|
{ name: '3 Tage', days: 3 },
|
|
{ name: '1 Tag', days: 1 },
|
|
{ name: '12 Stunden', days: 0.5 },
|
|
];
|
|
const BAR_COUNT = 30;
|
|
const CHAIN_COLORS = [
|
|
'#4ade80','#60a5fa','#f97316','#c084fc','#f472b6',
|
|
'#facc15','#34d399','#818cf8','#fb7185','#a78bfa',
|
|
'#22d3ee','#e879f9','#84cc16','#f59e0b','#6ee7b7',
|
|
];
|
|
|
|
let zoomIndex = 0;
|
|
let viewFrom, viewTo;
|
|
let zoomStack = [];
|
|
let entryMode = false;
|
|
|
|
init();
|
|
|
|
async function init() {
|
|
$('btn-zoom-out').addEventListener('click', zoomOut);
|
|
$('btn-sync').addEventListener('click', syncData);
|
|
$('modal-close').addEventListener('click', closeModal);
|
|
$('modal').addEventListener('click', e => { if (e.target === $('modal')) closeModal(); });
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
|
|
|
|
viewTo = new Date();
|
|
viewFrom = new Date(viewTo);
|
|
viewFrom.setDate(viewFrom.getDate() - ZOOM_LEVELS[0].days);
|
|
zoomIndex = 0;
|
|
|
|
await loadView();
|
|
}
|
|
|
|
// --- Main load ---
|
|
async function loadView() {
|
|
const from = viewFrom.toISOString();
|
|
const to = viewTo.toISOString();
|
|
|
|
$('range-label').textContent =
|
|
`${fmtDate(viewFrom)} - ${fmtDate(viewTo)} (${entryMode ? 'Einträge' : ZOOM_LEVELS[zoomIndex].name})`;
|
|
$('btn-zoom-out').disabled = zoomStack.length === 0;
|
|
|
|
if (entryMode) {
|
|
const [entries, summary] = await Promise.all([
|
|
api(`/api/entry-chains?from=${enc(from)}&to=${enc(to)}`),
|
|
api(`/api/cost-summary?from=${enc(from)}&to=${enc(to)}`),
|
|
]);
|
|
renderSummary(summary);
|
|
renderEntryChart(entries);
|
|
renderEntryList(entries);
|
|
} else {
|
|
const totalMinutes = (viewTo - viewFrom) / 60000;
|
|
const bucketMinutes = Math.max(1, Math.round(totalMinutes / BAR_COUNT));
|
|
|
|
const [buckets, summary] = await Promise.all([
|
|
api(`/api/cost-buckets?from=${enc(from)}&to=${enc(to)}&bucketMinutes=${bucketMinutes}`),
|
|
api(`/api/cost-summary?from=${enc(from)}&to=${enc(to)}`),
|
|
]);
|
|
|
|
renderSummary(summary);
|
|
renderBucketChart(buckets, bucketMinutes);
|
|
renderBlocks(buckets, bucketMinutes);
|
|
}
|
|
}
|
|
|
|
function renderSummary(s) {
|
|
$('summary').innerHTML = `
|
|
<span>Zeitraum: <span class="cost">$${s.totalCost.toFixed(2)}</span></span>
|
|
<span>Einträge: <span class="val">${s.totalEntries}</span></span>
|
|
`;
|
|
}
|
|
|
|
// --- Bucket chart (normal zoom levels) ---
|
|
function renderBucketChart(buckets, bucketMinutes) {
|
|
const chart = $('chart');
|
|
const labels = $('chart-labels');
|
|
chart.innerHTML = '';
|
|
labels.innerHTML = '';
|
|
|
|
const bucketMap = {};
|
|
buckets.forEach(b => { bucketMap[b.bucket] = b; });
|
|
const maxCost = Math.max(...buckets.map(b => b.cost), 0.001);
|
|
const isMaxZoom = zoomIndex >= ZOOM_LEVELS.length - 1;
|
|
|
|
for (let i = 0; i < BAR_COUNT; i++) {
|
|
const b = bucketMap[i];
|
|
const cost = b ? b.cost : 0;
|
|
const count = b ? b.count : 0;
|
|
const pct = (cost / maxCost) * 100;
|
|
|
|
const bucketStart = new Date(viewFrom.getTime() + i * bucketMinutes * 60000);
|
|
const bucketEnd = new Date(viewFrom.getTime() + (i + 1) * bucketMinutes * 60000);
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'bar-wrapper';
|
|
wrapper.innerHTML = `
|
|
<div class="bar-tooltip">$${cost.toFixed(3)} / ${count}</div>
|
|
<div class="bar" style="height:${Math.max(pct, cost > 0 ? 2 : 0)}%"></div>
|
|
`;
|
|
|
|
if (isMaxZoom) {
|
|
wrapper.addEventListener('click', () => enterEntryMode(bucketStart, bucketEnd));
|
|
} else {
|
|
wrapper.addEventListener('click', () => zoomInto(bucketStart, bucketEnd));
|
|
}
|
|
|
|
chart.appendChild(wrapper);
|
|
|
|
const lbl = document.createElement('div');
|
|
lbl.className = 'chart-label';
|
|
if (i % Math.ceil(BAR_COUNT / 6) === 0) lbl.textContent = fmtShort(bucketStart);
|
|
labels.appendChild(lbl);
|
|
}
|
|
}
|
|
|
|
// --- Entry chart (grouped by chain from server) ---
|
|
function renderEntryChart(entries) {
|
|
const chart = $('chart');
|
|
const labels = $('chart-labels');
|
|
chart.innerHTML = '';
|
|
labels.innerHTML = '';
|
|
|
|
if (!entries.length) return;
|
|
|
|
// Group by chainId from server
|
|
const chainMap = new Map();
|
|
entries.forEach(e => {
|
|
const cid = e.chainId ?? 0;
|
|
if (!chainMap.has(cid)) chainMap.set(cid, []);
|
|
chainMap.get(cid).push(e);
|
|
});
|
|
|
|
const chains = [...chainMap.entries()]
|
|
.sort((a, b) => a[0] - b[0])
|
|
.map(([, v]) => v);
|
|
|
|
const maxCost = Math.max(...entries.map(e => Number(e.cost)), 0.001);
|
|
|
|
window._entryChainColors = new Map();
|
|
|
|
chains.forEach((chain, ci) => {
|
|
const color = CHAIN_COLORS[ci % CHAIN_COLORS.length];
|
|
|
|
if (ci > 0) {
|
|
const spacer = document.createElement('div');
|
|
spacer.className = 'bar-spacer';
|
|
chart.appendChild(spacer);
|
|
labels.appendChild(Object.assign(document.createElement('div'), { className: 'chart-label bar-spacer' }));
|
|
}
|
|
|
|
const chainTotal = chain.reduce((s, e) => s + Number(e.cost), 0);
|
|
|
|
chain.forEach((e, ei) => {
|
|
const cost = Number(e.cost);
|
|
const pct = (cost / maxCost) * 100;
|
|
|
|
window._entryChainColors.set(e.id, color);
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'bar-wrapper bar-in-chain';
|
|
wrapper.innerHTML = `
|
|
<div class="bar-tooltip">$${cost.toFixed(4)} / ${e.model || '?'}<br>Kette: $${chainTotal.toFixed(2)}</div>
|
|
<div class="bar" style="height:${Math.max(pct, 2)}%;background:${color}"></div>
|
|
`;
|
|
wrapper.addEventListener('click', () => openModal(e.data, e.id));
|
|
chart.appendChild(wrapper);
|
|
|
|
// Chain total label above first bar
|
|
if (ei === 0) {
|
|
const totalLbl = document.createElement('div');
|
|
totalLbl.className = 'chain-cost-label';
|
|
totalLbl.style.color = color;
|
|
totalLbl.textContent = `$${chainTotal.toFixed(2)}`;
|
|
wrapper.prepend(totalLbl);
|
|
}
|
|
|
|
const lbl = document.createElement('div');
|
|
lbl.className = 'chart-label';
|
|
if (ei === 0) lbl.textContent = fmtTime(chain[0].timestamp);
|
|
labels.appendChild(lbl);
|
|
});
|
|
});
|
|
}
|
|
|
|
// --- Blocks (normal zoom) ---
|
|
function renderBlocks(buckets, bucketMinutes) {
|
|
const container = $('blocks');
|
|
container.innerHTML = '';
|
|
|
|
const bucketMap = {};
|
|
buckets.forEach(b => { bucketMap[b.bucket] = b; });
|
|
|
|
const sortedBuckets = [];
|
|
for (let i = 0; i < BAR_COUNT; i++) {
|
|
const b = bucketMap[i];
|
|
if (!b || b.cost === 0) continue;
|
|
sortedBuckets.push({ ...b, idx: i });
|
|
}
|
|
sortedBuckets.sort((a, b) => b.cost - a.cost);
|
|
|
|
for (const { idx: i, ...b } of sortedBuckets) {
|
|
const bucketStart = new Date(viewFrom.getTime() + i * bucketMinutes * 60000);
|
|
const bucketEnd = new Date(viewFrom.getTime() + (i + 1) * bucketMinutes * 60000);
|
|
|
|
const block = document.createElement('div');
|
|
block.className = 'block';
|
|
block.innerHTML = `
|
|
<div class="block-header">
|
|
<span class="block-label">${fmtRange(bucketStart, bucketEnd)}</span>
|
|
<span class="block-stats">
|
|
<span class="block-count">${b.count} Einträge</span>
|
|
<span class="block-cost">$${b.cost.toFixed(4)}</span>
|
|
</span>
|
|
</div>
|
|
<div class="block-entries" id="be-${i}"></div>
|
|
`;
|
|
block.querySelector('.block-header').addEventListener('click', () =>
|
|
toggleBlock(i, bucketStart, bucketEnd));
|
|
container.appendChild(block);
|
|
}
|
|
|
|
if (!container.children.length) {
|
|
container.innerHTML = '<p style="color:var(--muted);padding:40px;text-align:center">Keine Einträge mit Kosten in diesem Zeitraum.</p>';
|
|
}
|
|
}
|
|
|
|
// --- Entry list (flat, sorted by cost) ---
|
|
function renderEntryList(entries) {
|
|
const container = $('blocks');
|
|
container.innerHTML = '';
|
|
|
|
if (!entries.length) {
|
|
container.innerHTML = '<p style="color:var(--muted);padding:40px;text-align:center">Keine Einträge mit Kosten in diesem Zeitraum.</p>';
|
|
return;
|
|
}
|
|
|
|
const sorted = [...entries].sort((a, b) => Number(b.cost) - Number(a.cost));
|
|
|
|
sorted.forEach(e => {
|
|
const color = window._entryChainColors?.get(e.id) || 'var(--green)';
|
|
const row = document.createElement('div');
|
|
row.className = 'entry entry-flat';
|
|
row.style.borderLeftColor = color;
|
|
row.innerHTML = `
|
|
<span class="entry-time">${fmtTime(e.timestamp)}</span>
|
|
<span class="entry-model">${e.model || '-'}</span>
|
|
<span class="entry-tokens">${shortNum(e.inputTokens)}/${shortNum(e.outputTokens)}</span>
|
|
<span class="entry-cost">$${Number(e.cost).toFixed(4)}</span>
|
|
<span class="entry-type">${e.type}</span>
|
|
`;
|
|
row.addEventListener('click', () => openModal(e.data, e.id));
|
|
container.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// --- Toggle block entries ---
|
|
async function toggleBlock(idx, from, to) {
|
|
const el = $(`be-${idx}`);
|
|
if (el.classList.contains('open')) { el.classList.remove('open'); return; }
|
|
|
|
if (!el.dataset.loaded) {
|
|
const entries = await api(`/api/cost-entries?from=${enc(from.toISOString())}&to=${enc(to.toISOString())}`);
|
|
el.innerHTML = entries.map(e => `
|
|
<div class="entry" data-json='${escAttr(e.data)}'>
|
|
<span class="entry-time">${fmtTime(e.timestamp)}</span>
|
|
<span class="entry-model">${e.model || '-'}</span>
|
|
<span class="entry-tokens">${shortNum(e.inputTokens)}/${shortNum(e.outputTokens)}</span>
|
|
<span class="entry-cost">$${Number(e.cost).toFixed(4)}</span>
|
|
<span class="entry-type">${e.type}</span>
|
|
</div>
|
|
`).join('');
|
|
el.querySelectorAll('.entry').forEach(row => {
|
|
const eid = JSON.parse(row.dataset.json).id;
|
|
row.addEventListener('click', () => openModal(row.dataset.json, eid));
|
|
});
|
|
el.dataset.loaded = '1';
|
|
}
|
|
el.classList.add('open');
|
|
}
|
|
|
|
// --- Zoom ---
|
|
function zoomInto(clickStart, clickEnd) {
|
|
if (zoomIndex >= ZOOM_LEVELS.length - 1) return;
|
|
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
|
|
const nextLevel = ZOOM_LEVELS[zoomIndex + 1];
|
|
const clickMid = new Date((clickStart.getTime() + clickEnd.getTime()) / 2);
|
|
const halfMs = (nextLevel.days * 86400000) / 2;
|
|
viewFrom = new Date(clickMid.getTime() - halfMs);
|
|
viewTo = new Date(clickMid.getTime() + halfMs);
|
|
zoomIndex++;
|
|
entryMode = false;
|
|
loadView();
|
|
}
|
|
|
|
function enterEntryMode(bucketStart, bucketEnd) {
|
|
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
|
|
viewFrom = bucketStart;
|
|
viewTo = bucketEnd;
|
|
entryMode = true;
|
|
loadView();
|
|
}
|
|
|
|
function zoomOut() {
|
|
if (!zoomStack.length) return;
|
|
const prev = zoomStack.pop();
|
|
viewFrom = prev.from;
|
|
viewTo = prev.to;
|
|
zoomIndex = prev.zoom;
|
|
entryMode = prev.entry;
|
|
loadView();
|
|
}
|
|
|
|
// --- Sync ---
|
|
async function syncData() {
|
|
const btn = $('btn-sync');
|
|
btn.classList.add('syncing');
|
|
btn.textContent = '↻ Sync...';
|
|
try {
|
|
const res = await api('/api/sync', { method: 'POST' });
|
|
btn.textContent = `↻ ${res.output}`;
|
|
setTimeout(() => { btn.textContent = '↻ Sync'; }, 3000);
|
|
await loadView();
|
|
} catch (e) {
|
|
btn.textContent = '↻ Fehler!';
|
|
setTimeout(() => { btn.textContent = '↻ Sync'; }, 3000);
|
|
}
|
|
btn.classList.remove('syncing');
|
|
}
|
|
|
|
// --- Modal ---
|
|
async function openModal(dataStr, clickedId) {
|
|
const chainEl = $('modal-chain');
|
|
const rawEl = $('modal-content');
|
|
|
|
try { rawEl.textContent = JSON.stringify(JSON.parse(dataStr), null, 2); }
|
|
catch { rawEl.textContent = dataStr; }
|
|
|
|
chainEl.innerHTML = '<p style="color:var(--muted)">Lade Kontext...</p>';
|
|
$('modal').classList.remove('hidden');
|
|
|
|
try {
|
|
const parsed = JSON.parse(dataStr);
|
|
const entryId = parsed.id;
|
|
const chain = await api(`/api/entry-chain/${encodeURIComponent(entryId)}`);
|
|
|
|
// Calculate chain total
|
|
const chainCosts = chain.map(entry => {
|
|
try {
|
|
const d = JSON.parse(entry.data);
|
|
return d.message?.usage?.cost?.total || 0;
|
|
} catch { return 0; }
|
|
});
|
|
const chainTotal = chainCosts.reduce((a, b) => a + b, 0);
|
|
const chainCount = chainCosts.filter(c => c > 0).length;
|
|
|
|
let html = `<div class="chain-summary">
|
|
<span class="chain-summary-cost">Kette: $${chainTotal.toFixed(4)}</span>
|
|
<span class="chain-summary-count">${chainCount} Einträge mit Kosten / ${chain.length} gesamt</span>
|
|
</div>`;
|
|
|
|
html += chain.map(entry => {
|
|
const d = JSON.parse(entry.data);
|
|
const msg = d.message;
|
|
if (!msg) return '';
|
|
|
|
const role = msg.role || '?';
|
|
const isUser = role === 'user';
|
|
const isHighlighted = d.id === clickedId;
|
|
const content = extractContent(msg);
|
|
const cost = msg.usage?.cost?.total;
|
|
const model = msg.model;
|
|
const time = fmtTime(entry.timestamp);
|
|
|
|
return `
|
|
<div class="chain-msg ${isUser ? 'chain-user' : 'chain-assistant'} ${isHighlighted ? 'chain-highlighted' : ''}" ${isHighlighted ? 'id="chain-active"' : ''}>
|
|
<div class="chain-header">
|
|
<span class="chain-role">${role}</span>
|
|
<span class="chain-time">${time}</span>
|
|
${model ? `<span class="chain-model">${model}</span>` : ''}
|
|
${cost ? `<span class="chain-cost">$${cost.toFixed(4)}</span>` : ''}
|
|
</div>
|
|
<div class="chain-body">${escHtml(content)}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
chainEl.innerHTML = html;
|
|
|
|
// Scroll to highlighted entry
|
|
const active = $('chain-active');
|
|
if (active) active.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
} catch (e) {
|
|
chainEl.innerHTML = `<p style="color:var(--red)">Kontext konnte nicht geladen werden</p>`;
|
|
}
|
|
}
|
|
|
|
function extractContent(msg) {
|
|
if (typeof msg.content === 'string') return msg.content.slice(0, 2000);
|
|
if (Array.isArray(msg.content)) {
|
|
return msg.content.filter(c => c.type === 'text').map(c => c.text).join('\n').slice(0, 2000);
|
|
}
|
|
return JSON.stringify(msg.content).slice(0, 500);
|
|
}
|
|
|
|
function closeModal() { $('modal').classList.add('hidden'); }
|
|
|
|
// --- Helpers ---
|
|
async function api(url, opts) { return (await fetch(url, opts)).json(); }
|
|
function enc(s) { return encodeURIComponent(s); }
|
|
|
|
function fmtDate(d) {
|
|
return d.toLocaleDateString('de-AT', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
}
|
|
|
|
function fmtShort(d) {
|
|
return d.toLocaleDateString('de-AT', { day: '2-digit', month: '2-digit' })
|
|
+ ' ' + d.toLocaleTimeString('de-AT', { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
function fmtRange(a, b) { return fmtShort(a) + ' - ' + fmtShort(b); }
|
|
|
|
function fmtTime(ts) {
|
|
return ts ? new Date(ts).toLocaleTimeString('de-AT', { hour:'2-digit', minute:'2-digit', second:'2-digit' }) : '';
|
|
}
|
|
|
|
function shortNum(n) {
|
|
if (n == null) return '-';
|
|
return n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
|
|
}
|
|
|
|
function escHtml(s) {
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
|
|
function escAttr(s) {
|
|
return String(s).replace(/'/g, ''').replace(/"/g, '"');
|
|
}
|