Initial: JSONL→SQLite Exporter + Cost Analytics Web UI

session-analytics-web/Program.cs

@@ -0,0 +1,96 @@
+using Dapper;
+using Microsoft.Data.Sqlite;
+
+var builder = WebApplication.CreateBuilder(args);
+
+var dbPath = builder.Configuration["DbPath"]
+    ?? Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "..", "sessions.db");
+
+builder.Services.AddSingleton<Func<SqliteConnection>>(() =>
+    new SqliteConnection($"Data Source={Path.GetFullPath(dbPath)}"));
+
+var app = builder.Build();
+
+app.UseDefaultFiles();
+app.UseStaticFiles();
+
+// GET /api/cost-buckets?from=&to=&bucketMinutes=
+// Returns N buckets of aggregated cost
+app.MapGet("/api/cost-buckets", (Func<SqliteConnection> factory, string from, string to, int bucketMinutes) =>
+{
+    using var db = factory();
+    var rows = db.Query(@"
+        SELECT
+            CAST((strftime('%s', timestamp) - strftime('%s', @from)) / (@bucketSec) AS INTEGER) AS bucket,
+            SUM(CAST(json_extract(data, '$.message.usage.cost.total') AS REAL)) AS cost,
+            COUNT(*) AS count,
+            MIN(timestamp) AS bucketStart,
+            MAX(timestamp) AS bucketEnd
+        FROM entries
+        WHERE json_extract(data, '$.message.usage.cost.total') IS NOT NULL
+          AND timestamp >= @from AND timestamp < @to
+        GROUP BY bucket
+        ORDER BY bucket ASC",
+        new { from, to, bucketSec = bucketMinutes * 60 });
+
+    return Results.Ok(rows);
+});
+
+// GET /api/cost-entries?from=&to=
+// Returns all cost entries in a time range
+app.MapGet("/api/cost-entries", (Func<SqliteConnection> factory, string from, string to) =>
+{
+    using var db = factory();
+    var rows = db.Query(@"
+        SELECT id, session, type, timestamp,
+               json_extract(data, '$.message.usage.cost.total') AS cost,
+               json_extract(data, '$.message.usage.input') AS inputTokens,
+               json_extract(data, '$.message.usage.output') AS outputTokens,
+               json_extract(data, '$.message.model') AS model,
+               data
+        FROM entries
+        WHERE json_extract(data, '$.message.usage.cost.total') IS NOT NULL
+          AND timestamp >= @from AND timestamp < @to
+        ORDER BY timestamp ASC",
+        new { from, to });
+
+    return Results.Ok(rows);
+});
+
+// GET /api/cost-summary?from=&to=
+app.MapGet("/api/cost-summary", (Func<SqliteConnection> factory, string? from, string? to) =>
+{
+    using var db = factory();
+    var conditions = new List<string> { "json_extract(data, '$.message.usage.cost.total') IS NOT NULL" };
+    if (from != null) conditions.Add("timestamp >= @from");
+    if (to   != null) conditions.Add("timestamp < @to");
+    var where = string.Join(" AND ", conditions);
+
+    var row = db.QuerySingle($@"
+        SELECT COALESCE(SUM(CAST(json_extract(data, '$.message.usage.cost.total') AS REAL)), 0) AS totalCost,
+               COUNT(*) AS totalEntries
+        FROM entries
+        WHERE {where}",
+        new { from, to });
+
+    return Results.Ok(row);
+});
+
+// POST /api/sync - run export.mjs to import new entries
+app.MapPost("/api/sync", async () =>
+{
+    var scriptPath = Path.GetFullPath(Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "..", "export.mjs"));
+    var psi = new System.Diagnostics.ProcessStartInfo("node", scriptPath)
+    {
+        RedirectStandardOutput = true,
+        RedirectStandardError = true,
+        WorkingDirectory = Path.GetDirectoryName(scriptPath)!
+    };
+    var proc = System.Diagnostics.Process.Start(psi)!;
+    var stdout = await proc.StandardOutput.ReadToEndAsync();
+    var stderr = await proc.StandardError.ReadToEndAsync();
+    await proc.WaitForExitAsync();
+    return Results.Ok(new { exitCode = proc.ExitCode, output = (stdout + stderr).Trim() });
+});
+
+app.Run();

session-analytics-web/Properties/launchSettings.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5169",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7160;http://localhost:5169",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

session-analytics-web/appsettings.Development.json

@@ -0,0 +1,9 @@
+{
+  "DetailedErrors": true,
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

session-analytics-web/appsettings.json

@@ -0,0 +1,11 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "Urls": "http://0.0.0.0:18684",
+  "DbPath": "../sessions.db"
+}

session-analytics-web/session-analytics-web.csproj

@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>session_analytics_web</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Dapper" Version="2.1.66" />
+    <PackageReference Include="Microsoft.Data.Sqlite" Version="10.0.3" />
+  </ItemGroup>
+
+</Project>

session-analytics-web/wwwroot/app.js

@@ -0,0 +1,350 @@
+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 },
+  { name: '6 Stunden',  days: 0.25 },
+];
+const BAR_COUNT = 30;
+
+let zoomIndex = 0;
+let viewFrom, viewTo;
+let zoomStack = [];
+let entryMode = false;   // true = max zoom, individual entries as bars
+let entryData = [];       // cached entries for entry mode
+
+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/cost-entries?from=${enc(from)}&to=${enc(to)}`),
+      api(`/api/cost-summary?from=${enc(from)}&to=${enc(to)}`),
+    ]);
+    entryData = entries;
+    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) {
+      // At max zoom: click switches to entry mode centered on this bucket
+      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 (individual entries as bars) ---
+function renderEntryChart(entries) {
+  const chart = $('chart');
+  const labels = $('chart-labels');
+  chart.innerHTML = '';
+  labels.innerHTML = '';
+
+  if (!entries.length) return;
+
+  const maxCost = Math.max(...entries.map(e => Number(e.cost)), 0.001);
+
+  entries.forEach((e, i) => {
+    const cost = Number(e.cost);
+    const pct = (cost / maxCost) * 100;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'bar-wrapper';
+    wrapper.innerHTML = `
+      <div class="bar-tooltip">$${cost.toFixed(4)} - ${e.model || '?'}</div>
+      <div class="bar" style="height:${Math.max(pct, 2)}%"></div>
+    `;
+
+    wrapper.addEventListener('click', () => openModal(e.data));
+    chart.appendChild(wrapper);
+
+    const lbl = document.createElement('div');
+    lbl.className = 'chart-label';
+    if (entries.length <= 15 || i % Math.ceil(entries.length / 8) === 0) {
+      lbl.textContent = fmtTime(e.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 (entry mode - flat, no expandable blocks) ---
+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;
+  }
+
+  // Sort by cost descending
+  const sorted = [...entries].sort((a, b) => Number(b.cost) - Number(a.cost));
+
+  sorted.forEach(e => {
+    const row = document.createElement('div');
+    row.className = 'entry entry-flat';
+    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));
+    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 => {
+      row.addEventListener('click', () => openModal(row.dataset.json));
+    });
+
+    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 ---
+function openModal(dataStr) {
+  try {
+    $('modal-content').textContent = JSON.stringify(JSON.parse(dataStr), null, 2);
+  } catch { $('modal-content').textContent = dataStr; }
+  $('modal').classList.remove('hidden');
+}
+
+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 escAttr(s) {
+  return String(s).replace(/'/g, '&#39;').replace(/"/g, '&quot;');
+}

session-analytics-web/wwwroot/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Session Cost 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>
+      <pre id="modal-content"></pre>
+    </div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>

session-analytics-web/wwwroot/style.css

@@ -0,0 +1,279 @@
+*, *::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: 2px;
+  height: 140px;
+  width: 100%;
+}
+
+.bar-wrapper {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.bar {
+  width: 100%;
+  min-width: 4px;
+  background: var(--green);
+  border-radius: 3px 3px 0 0;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.bar-wrapper:hover .bar {
+  opacity: 1;
+  background: #6ee7b7;
+}
+
+.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(--green);
+  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-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-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;
+}
+
+#modal-content {
+  font-family: monospace;
+  font-size: 0.78rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }