restructure: flatten project, add ARCHITECTURE.md, update DEVY.md
- Moved from session-analytics-web/ subfolder to root - Renamed to token-analytics - Added deploy.sh, ARCHITECTURE.md - Moved export.mjs into jsonl-sync/
This commit is contained in:
Meleki committed
1 parent
1d3070ed4c
commit
dbaad6b372
17 files changed
+340
-270
No files matched your search
+472
@@ -0,0 +1,472 @@
|
||||
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;
|
||||
|
||||
restoreFromHash();
|
||||
await loadView();
|
||||
}
|
||||
|
||||
function saveToHash() {
|
||||
const state = {
|
||||
f: viewFrom.toISOString(),
|
||||
t: viewTo.toISOString(),
|
||||
z: zoomIndex,
|
||||
e: entryMode ? 1 : 0,
|
||||
};
|
||||
location.hash = btoa(JSON.stringify(state));
|
||||
}
|
||||
|
||||
function restoreFromHash() {
|
||||
if (!location.hash || location.hash.length < 2) return;
|
||||
try {
|
||||
const state = JSON.parse(atob(location.hash.slice(1)));
|
||||
viewFrom = new Date(state.f);
|
||||
viewTo = new Date(state.t);
|
||||
zoomIndex = state.z ?? 0;
|
||||
entryMode = !!state.e;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// --- 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)}`),
|
||||
]);
|
||||
|
||||
const chains = await api(`/api/cost-chains?from=${enc(from)}&to=${enc(to)}`);
|
||||
|
||||
renderSummary(summary);
|
||||
renderBucketChart(buckets, bucketMinutes);
|
||||
renderChainBlocks(chains);
|
||||
}
|
||||
|
||||
saveToHash();
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- Chain blocks (grouped by conversation chain, sorted by cost) ---
|
||||
function renderChainBlocks(chains) {
|
||||
const container = $('blocks');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (!chains.length) {
|
||||
container.innerHTML = '<p style="color:var(--muted);padding:40px;text-align:center">Keine Einträge mit Kosten in diesem Zeitraum.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
chains.forEach((c, ci) => {
|
||||
const block = document.createElement('div');
|
||||
block.className = 'block';
|
||||
block.innerHTML = `
|
||||
<div class="block-header">
|
||||
<span class="block-label">${fmtShort(new Date(c.first))} - ${fmtShort(new Date(c.last))}</span>
|
||||
<span class="block-stats">
|
||||
<span class="block-count">${c.count} Einträge</span>
|
||||
<span class="block-cost">$${c.totalCost.toFixed(4)}</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
block.querySelector('.block-header').addEventListener('click', () => {
|
||||
// Jump directly to entry mode, centered on this chain
|
||||
const first = new Date(c.first);
|
||||
const last = new Date(c.last);
|
||||
const pad = Math.max((last - first) * 0.5, 60000); // min 1 min padding
|
||||
zoomStack.push({ from: new Date(viewFrom), to: new Date(viewTo), zoom: zoomIndex, entry: false });
|
||||
viewFrom = new Date(first.getTime() - pad);
|
||||
viewTo = new Date(last.getTime() + pad);
|
||||
zoomIndex = ZOOM_LEVELS.length - 1;
|
||||
entryMode = true;
|
||||
loadView();
|
||||
});
|
||||
container.appendChild(block);
|
||||
});
|
||||
}
|
||||
|
||||
// --- 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 chain block entries ---
|
||||
async function toggleChainBlock(idx, chainId) {
|
||||
const el = $(`chain-block-${idx}`);
|
||||
if (el.classList.contains('open')) { el.classList.remove('open'); return; }
|
||||
|
||||
if (!el.dataset.loaded) {
|
||||
// Load the full chain via entry-chain endpoint (using chainId = user message id)
|
||||
const chain = await api(`/api/entry-chain/${encodeURIComponent(chainId)}`);
|
||||
el.innerHTML = chain.map(entry => {
|
||||
const d = JSON.parse(entry.data);
|
||||
const msg = d.message;
|
||||
if (!msg) return '';
|
||||
const cost = msg.usage?.cost?.total;
|
||||
return `
|
||||
<div class="entry" data-json='${escAttr(entry.data)}'>
|
||||
<span class="entry-time">${fmtTime(entry.timestamp)}</span>
|
||||
<span class="entry-model">${msg.model || '-'}</span>
|
||||
<span class="entry-tokens">${shortNum(msg.usage?.input)}/${shortNum(msg.usage?.output)}</span>
|
||||
<span class="entry-cost">${cost ? '$' + cost.toFixed(4) : '-'}</span>
|
||||
<span class="entry-type">${msg.role || entry.type}</span>
|
||||
</div>
|
||||
`;
|
||||
}).filter(Boolean).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, '"');
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Token Analytics</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Cost Analytics</h1>
|
||||
<div id="summary"></div>
|
||||
<button id="btn-sync" title="Neue Einträge importieren">↻ Sync</button>
|
||||
</header>
|
||||
|
||||
<div id="toolbar">
|
||||
<button id="btn-zoom-out" disabled>← Raus-Zoomen</button>
|
||||
<span id="range-label"></span>
|
||||
</div>
|
||||
|
||||
<div id="chart-area">
|
||||
<div id="chart"></div>
|
||||
<div id="chart-labels"></div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="blocks"></div>
|
||||
</div>
|
||||
|
||||
<div id="modal" class="modal hidden">
|
||||
<div class="modal-box">
|
||||
<button id="modal-close">✕</button>
|
||||
<div id="modal-chain"></div>
|
||||
<details class="raw-json">
|
||||
<summary>Raw JSON</summary>
|
||||
<pre id="modal-content"></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,393 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0f1117;
|
||||
--surface: #1a1d27;
|
||||
--border: #2a2d3a;
|
||||
--accent: #6c8ef5;
|
||||
--text: #e2e4f0;
|
||||
--muted: #6b7280;
|
||||
--green: #4ade80;
|
||||
--orange: #fb923c;
|
||||
--red: #f87171;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 14px 24px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
header h1 { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
|
||||
|
||||
#btn-sync {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
margin-left: auto;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
#btn-sync:hover { background: var(--accent); }
|
||||
#btn-sync.syncing { opacity: 0.5; pointer-events: none; }
|
||||
|
||||
#summary {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#summary .val { color: var(--text); font-weight: 600; }
|
||||
#summary .cost { color: var(--green); font-weight: 700; font-size: 1rem; }
|
||||
|
||||
#toolbar {
|
||||
padding: 10px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#btn-zoom-out {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#btn-zoom-out:hover:not(:disabled) { background: var(--accent); }
|
||||
#btn-zoom-out:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
#range-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
#chart-area {
|
||||
padding: 16px 24px 4px;
|
||||
flex-shrink: 0;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 1px;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#chart-labels {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.bar-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-in-chain { gap: 0; }
|
||||
.bar-spacer { width: 10px; min-width: 10px; flex: 0 0 10px; }
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
min-width: 4px;
|
||||
background: #5b7a9d;
|
||||
border-radius: 3px 3px 0 0;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.bar-wrapper:hover .bar {
|
||||
opacity: 1;
|
||||
background: #7a9dc0;
|
||||
}
|
||||
|
||||
.bar-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bar-wrapper:hover .bar-tooltip { display: block; }
|
||||
|
||||
#chart-labels {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
flex: 1;
|
||||
font-size: 0.55rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Content - blocks below chart */
|
||||
#content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.block {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.block-header:hover { background: #22263a; }
|
||||
.block-header .block-label { pointer-events: none; }
|
||||
|
||||
.block-label {
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.block-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.block-cost { color: var(--green); font-weight: 700; }
|
||||
.block-count { color: var(--muted); }
|
||||
|
||||
.block-entries {
|
||||
display: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.block-entries.open { display: block; }
|
||||
|
||||
.entry {
|
||||
padding: 8px 16px 8px 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr 80px 70px 60px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 0.78rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.entry:last-child { border-bottom: none; }
|
||||
.entry:hover { background: #1e2d5a; }
|
||||
|
||||
.entry-flat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--green);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 4px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.entry-time { font-family: monospace; color: var(--muted); }
|
||||
.entry-model { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.entry-tokens { color: var(--muted); text-align: right; }
|
||||
.entry-cost { color: var(--green); font-weight: 600; text-align: right; }
|
||||
.entry-type { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; text-align: right; }
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal.hidden { display: none; }
|
||||
|
||||
.modal-box {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
max-width: 850px; width: 90%; max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#modal-close {
|
||||
position: absolute; top: 12px; right: 14px;
|
||||
background: none; border: none;
|
||||
color: var(--muted); font-size: 1.2rem; cursor: pointer;
|
||||
}
|
||||
|
||||
/* Chain messages */
|
||||
.chain-msg {
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chain-user {
|
||||
background: #1e2d5a;
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
.chain-assistant {
|
||||
background: #1a2a2a;
|
||||
border-left: 3px solid var(--green);
|
||||
}
|
||||
|
||||
.chain-header {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.chain-role {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.chain-user .chain-role { color: var(--accent); }
|
||||
.chain-assistant .chain-role { color: var(--green); }
|
||||
|
||||
.chain-time { color: var(--muted); font-family: monospace; }
|
||||
.chain-model { color: var(--muted); }
|
||||
.chain-cost { color: var(--green); font-weight: 600; }
|
||||
|
||||
/* Chain summary in modal */
|
||||
.chain-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chain-summary-cost {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.chain-summary-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Chain cost label above first bar */
|
||||
.chain-cost-label {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.chain-highlighted {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 12px rgba(108, 142, 245, 0.3);
|
||||
}
|
||||
|
||||
.chain-body {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Raw JSON toggle */
|
||||
.raw-json {
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.raw-json summary {
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
#modal-content {
|
||||
font-family: monospace;
|
||||
font-size: 0.72rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
Reference in new issue
Block a user