claude-inspect 0.4.1 → 0.5.1

package/README.de.md

@@ -1,17 +1,33 @@
-# claude-inspect
+# claude-inspect – Claude-Code-Dashboard & Monitor für Agenten, Subagenten und Verbrauch
 
-> English: [README.md](README.md) · Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Screenshots: [docs/screenshots](docs/screenshots)
+[![npm](https://img.shields.io/npm/v/claude-inspect)](https://www.npmjs.com/package/claude-inspect)
+[![npm downloads](https://img.shields.io/npm/dm/claude-inspect)](https://www.npmjs.com/package/claude-inspect)
+[![CI](https://github.com/brokoskokoli/claude_inspect/actions/workflows/ci.yml/badge.svg)](https://github.com/brokoskokoli/claude_inspect/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/brokoskokoli/claude_inspect/blob/main/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/brokoskokoli/claude_inspect?style=social)](https://github.com/brokoskokoli/claude_inspect)
+
+**htop plus Flugschreiber für Claude Code. Keine Hooks, kein Proxy, ein `npx`.**
+
+Lokales Live-Dashboard und Monitor für Claude-Code-Agenten: laufende Sessions, Subagenten,
+per `claude -p` gestartete Worker, Tool-Aufrufe, Zeitleisten, CPU- und Token-Verbrauch
+und ein Transcript-Viewer mit durchsuchbarer History.
+
+```bash
+npx claude-inspect --open          # Node.js ≥ 22 · macOS, Linux, Windows
+```
+
+Liest **passiv** die Dateien unter `~/.claude`, ohne Hooks und ohne Konfigurationsänderung.
+Das Einzige, was es schreibt, ist ein CPU-Protokoll im eigenen Datenverzeichnis (siehe *CPU*).
+
+> English: [README.md](https://github.com/brokoskokoli/claude_inspect/blob/main/README.md) · Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Mitmachen: [CONTRIBUTING.md](https://github.com/brokoskokoli/claude_inspect/blob/main/CONTRIBUTING.md)
 >
 > Die Oberfläche ist englisch; hell, dunkel oder nach Systemeinstellung (Umschalter oben rechts).
 
-Lokales Live-Dashboard für Claude-Code-Agenten. Liest **passiv** die Dateien unter
-`~/.claude`, ohne Hooks und ohne Konfigurationsänderung. Das Einzige, was es schreibt, ist ein
-CPU-Protokoll im eigenen Datenverzeichnis (siehe *CPU*).
+![Live-Dashboard mit laufenden Agenten, Subagenten und einer gestarteten Worker-Session](https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/dashboard.jpg)
 
-## Start
+## Installation
 
 ```bash
-npx claude-inspect --open          # einmal ausprobieren
 npm install -g claude-inspect      # dauerhaft installieren
 claude-inspect service install     # Autostart → http://localhost:47717 (Lesezeichen)
 claude-inspect demo --open         # ohne eigene Daten ausprobieren
@@ -47,6 +63,10 @@ Aus den Quellen: `git clone …`, `npm install`, `npm run build`, `npm start`
   - *Tasks*: Task-Liste der Session als Board
   - *CPU*: Auslastung des Claude-Prozesses samt aller Unterprozesse (Shells, Builds, Tests,
   MCP-Server …) als gestapelter Verlauf je Programmname, dazu die Prozesse mit der meisten CPU-Zeit
+  - *Cost*: geschätzte Kosten (API-Listenpreis) der Session samt aller Subagenten und per
+  `claude` gestarteten Sitzungen, je Agent und je Modell mit Tokens (Input, Output, Cache)
+  und als Zeitleiste mit den teuersten Momenten
+  - Beim Hochscrollen blendet sich eine kompakte Kopfzeile mit Sprung nach oben/unten ein
 - **CPU**: alle 3 s aus der Prozesstabelle gemessen (100 % = ein Kern), Verlaufslinie auf der
   Dashboard-Karte. Pro Session eine CSV-Datei im App-Datenverzeichnis (macOS
   `~/Library/Application Support/claude-inspect/cpu`, Linux `~/.local/share/claude-inspect/cpu`,
@@ -90,11 +110,11 @@ tests/             Fixtures je Claude-Code-Version, Snapshots, Tests
 scripts/           Fixture-Generator
 ```
 
-Neue Dateiformate: siehe [docs/FORMATS.md](docs/FORMATS.md). Gesamtkonzept: [KONZEPT.md](KONZEPT.md).
+Neue Dateiformate: siehe [docs/FORMATS.md](https://github.com/brokoskokoli/claude_inspect/blob/main/docs/FORMATS.md). Gesamtkonzept: [KONZEPT.md](https://github.com/brokoskokoli/claude_inspect/blob/main/KONZEPT.md).
 
 ## Speicher & Leistung
 
-Nichts wird auf Platte geschrieben. Beim Start liest der Server nur Prozess-, Job- und
+Außer dem CPU-Log im eigenen Datenverzeichnis wird nichts auf Platte geschrieben. Beim Start liest der Server nur Prozess-, Job- und
 Kopfdaten (unter 1 s); die komplette History (hier ~600 MB) wird im Hintergrund in
 2–3 s aggregiert und danach nur noch inkrementell nachgeführt. Vollständige Verläufe
 werden erst beim Öffnen geladen und mit einer Obergrenze im Speicher gehalten.

package/README.md

@@ -1,23 +1,33 @@
-# claude-inspect – live dashboard & history viewer for Claude Code agents
+# claude-inspect – Claude Code dashboard & monitor for agents, subagents and usage
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 [![npm](https://img.shields.io/npm/v/claude-inspect)](https://www.npmjs.com/package/claude-inspect)
+[![npm downloads](https://img.shields.io/npm/dm/claude-inspect)](https://www.npmjs.com/package/claude-inspect)
+[![CI](https://github.com/brokoskokoli/claude_inspect/actions/workflows/ci.yml/badge.svg)](https://github.com/brokoskokoli/claude_inspect/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/brokoskokoli/claude_inspect/blob/main/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/brokoskokoli/claude_inspect?style=social)](https://github.com/brokoskokoli/claude_inspect)
 ![Node.js ≥ 22](https://img.shields.io/badge/node-%E2%89%A5%2022-green)
-![TypeScript](https://img.shields.io/badge/TypeScript-Svelte%205-3178c6)
-![Dark mode](https://img.shields.io/badge/dark%20mode-%E2%9C%93-2b2a27)
 ![No hooks](https://img.shields.io/badge/Claude%20Code-no%20hooks%20needed-d97757)
 
-**See what your [Claude Code](https://claude.com/claude-code) agents are doing – right now and in the past.**
-claude-inspect is a local web UI that reads the files Claude Code already writes to `~/.claude`
+**htop plus a flight recorder for [Claude Code](https://claude.com/claude-code). No hooks, no proxy, one `npx`.**
+
+claude-inspect is a local Claude Code dashboard and monitor that reads the files Claude Code already writes to `~/.claude`
 and shows running sessions, subagents, `claude -p` worker sessions started by other agents,
-every tool call with its result, timelines, a call graph, token usage and a searchable history.
+every tool call with its result, timelines, a call graph, CPU and token usage
+and a transcript viewer with a searchable history.
+
+```bash
+npx claude-inspect --open        # Node.js ≥ 22 · macOS, Linux, Windows
+```
+
+No Claude Code data at hand? `npx claude-inspect demo --open` starts it with a fictional data set.
+Permanent install with autostart: see [Installation](#installation).
 
 It is **read-only and passive** towards `~/.claude`: no hooks, no settings changes, no proxy, no data leaves
 your machine. The only thing it writes is a CPU log in its own data directory (see *CPU usage*).
 
-> Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Deutsch: [README.de.md](README.de.md) · Design notes (German): [KONZEPT.md](KONZEPT.md)
+> Website: [brokoskokoli.github.io/claude_inspect](https://brokoskokoli.github.io/claude_inspect/) · Deutsch: [README.de.md](https://github.com/brokoskokoli/claude_inspect/blob/main/README.de.md) · Design notes (German): [KONZEPT.md](https://github.com/brokoskokoli/claude_inspect/blob/main/KONZEPT.md) · [Contributing](https://github.com/brokoskokoli/claude_inspect/blob/main/CONTRIBUTING.md)
 
-![Live dashboard with running agents, subagents and a spawned worker session](docs/screenshots/dashboard.jpg)
+![Live dashboard with running agents, subagents and a spawned worker session](https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/dashboard.jpg)
 
 ## Why
 
@@ -40,6 +50,7 @@ becomes hard to tell *who is doing what*. claude-inspect answers:
 | **Agent tree & call graph** | Main agent → subagents (nested) → `claude` sessions started via Bash, including fork/resume relations. Finished agents are greyed out. |
 | **Timeline** | One lane per agent, tool calls as bars, spawn links between lanes, idle gaps > 10 min collapsed, zoom. Click a bar to jump to the call. |
 | **Spawn linking** | Links sessions started by `claude -p …` to the calling tool use via the process tree (exact), `--session-id`, prompt text, `--agent`, time window and working directory – with a confidence label. |
+| **Cost per agent tree** | Cost tab per session: API list-price estimate for the main agent plus all its subagents and spawned `claude` sessions, per agent and per model with input, output and cache tokens, plus a cost timeline with the most expensive moments. |
 | **Statistics** | API list-price estimate, tokens per model/day/project, cache share, activity heatmap, tool statistics with error rate and p95 duration. |
 | **CPU usage** | CPU of each Claude Code process plus all its subprocesses (shells, builds, test runners, MCP servers …), measured every 3 s from the process table. Sparkline on the dashboard card, a *CPU* tab per session with a stacked chart by process name and the processes that used the most CPU time. Recorded as one CSV per session in the app data directory (`~/Library/Application Support/claude-inspect/cpu` on macOS, `~/.local/share/claude-inspect/cpu` on Linux, `%LOCALAPPDATA%\claude-inspect\cpu` on Windows), so it stays available after the session ended; files older than 30 days are deleted. Only measured while claude-inspect runs; processes that live less than 3 s are missed. `--no-cpu-log` turns recording off. |
 | **Tool explorer & files** | Every tool call across all sessions, filterable; which files agents read, edited or wrote. |
@@ -49,29 +60,29 @@ becomes hard to tell *who is doing what*. claude-inspect answers:
 | **Dark mode** | Light, dark or system theme, remembered per browser. |
 | **Phone-friendly** | On narrow screens (phones, small iframes) the navigation collapses into a menu, tables turn into compact lists, the session view is single-column and long code, paths and JSON scroll inside their block. The server still listens on 127.0.0.1 only – to open it from a phone you need your own tunnel or reverse proxy that forwards to it with a local `Host` header (other hosts are rejected). |
 
-![CPU tab: CPU usage of a worker session and its subprocesses (vitest, tsc, esbuild …) over time](docs/screenshots/cpu.jpg)
+![CPU tab: CPU usage of a worker session and its subprocesses (vitest, tsc, esbuild …) over time](https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/cpu.jpg)
 
 <table>
 <tr>
-<td><img src="docs/screenshots/timeline.jpg" alt="Timeline of an orchestrator with subagents and a spawned worker session"></td>
-<td><img src="docs/screenshots/call-graph.jpg" alt="Call graph: main agent, subagents and a claude -p worker session"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/timeline.jpg" alt="Timeline of an orchestrator with subagents and a spawned worker session"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/call-graph.jpg" alt="Call graph: main agent, subagents and a claude -p worker session"></td>
 </tr>
 <tr>
-<td><img src="docs/screenshots/transcript.jpg" alt="Transcript viewer with an expanded Edit tool call shown as diff"></td>
-<td><img src="docs/screenshots/statistics.jpg" alt="Statistics: API cost estimate per day and model, activity heatmap"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/transcript.jpg" alt="Transcript viewer with an expanded Edit tool call shown as diff"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/statistics.jpg" alt="Statistics: API cost estimate per day and model, activity heatmap"></td>
 </tr>
 </table>
 
 <table>
 <tr>
-<td><img src="docs/screenshots/tool-explorer.jpg" alt="Tool explorer listing tool calls across all sessions"></td>
-<td><img src="docs/screenshots/dashboard-dark.jpg" alt="Live dashboard in dark mode"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/tool-explorer.jpg" alt="Tool explorer listing tool calls across all sessions"></td>
+<td><img src="https://raw.githubusercontent.com/brokoskokoli/claude_inspect/main/docs/screenshots/dashboard-dark.jpg" alt="Live dashboard in dark mode"></td>
 </tr>
 </table>
 
 *All screenshots show the built-in demo data set (`claude-inspect demo`), not real sessions.*
 
-## Quick start
+## Installation
 
 Requirements: Node.js ≥ 22, macOS, Linux or Windows, Claude Code writing to `~/.claude`. On Windows, live process status is read via PowerShell; the autostart service and the live `demo` are macOS/Linux only (`demo --out <dir>` works everywhere).
 
@@ -129,7 +140,7 @@ Light, dark or follow the OS – switch with the button in the header (the choic
 FormatRegistry → versioned decoders → normalized model → REST + SSE → Svelte UI
 ```
 
-- **Per-record format detection:** every decoder scores a record (`type`, version range, structure); the best one wins, a fallback keeps unknown records. Adding support for a new Claude Code version = adding a decoder file. See [docs/FORMATS.md](docs/FORMATS.md).
+- **Per-record format detection:** every decoder scores a record (`type`, version range, structure); the best one wins, a fallback keeps unknown records. Adding support for a new Claude Code version = adding a decoder file. See [docs/FORMATS.md](https://github.com/brokoskokoli/claude_inspect/blob/main/docs/FORMATS.md).
 - **In memory only:** startup reads process/job data and file heads (< 1 s); the full history (hundreds of MB) is aggregated in the background in a few seconds and then followed incrementally.
 - **Privacy & security:** listens on `127.0.0.1` only (never reachable from the network), rejects requests whose `Host` header isn't `localhost`/`127.0.0.1` (DNS rebinding), sends no CORS headers (other websites in your browser can't read the API), is read-only towards `~/.claude` (the CPU log goes to its own data directory and contains only timestamps, PIDs, program names and CPU percentages – no command lines), never reads credential files (`*.key`, `daemon/auth`, `ide/*.lock`, …) and masks token/secret fields in the raw view. The access token is an extra layer against *other local processes or users* on the same machine; on a single-user machine `--no-auth` (used by the autostart service) is a reasonable trade-off. Cost figures are estimates from public API list prices – with a subscription you do not pay these amounts directly.
 
@@ -159,7 +170,7 @@ tests/        anonymized fixtures per Claude Code version, snapshots, tests
 scripts/      fixture generator (demo data: src/server/cli/demo.ts)
 ```
 
-Contributions welcome – especially decoders for new Claude Code versions (run `npm run fixtures` and
+Contributions welcome – see [CONTRIBUTING.md](https://github.com/brokoskokoli/claude_inspect/blob/main/CONTRIBUTING.md), especially decoders for new Claude Code versions (run `npm run fixtures` and
 `npm test`, then check the *Formats* page for unknown fields).
 
 ## Disclaimer
@@ -169,4 +180,4 @@ may change at any time; claude-inspect is designed to degrade gracefully (unknow
 
 ## License
 
-[MIT](LICENSE)
+[MIT](https://github.com/brokoskokoli/claude_inspect/blob/main/LICENSE)

package/dist/app/server/history/aggregator.js

@@ -42,27 +42,7 @@ export class HistoryIndex {
                         seen.add(p);
                 continue;
             }
-            const dir = subagentDir(f.path);
-            let names = [];
-            try {
-                names = await readdir(dir);
-            }
-            catch {
-                /* keine Subagenten */
-            }
-            for (const n of names) {
-                const m = /^agent-(.+)\.jsonl$/.exec(n);
-                if (!m)
-                    continue;
-                const path = join(dir, n);
-                seen.add(path);
-                try {
-                    await this.scan(path, (await stat(path)).size, f.sessionId, m[1], project);
-                }
-                catch {
-                    /* gelöscht */
-                }
-            }
+            await this.scanSubagents(f, project, seen);
         }
         // Von Claude Code aufgeräumte Dateien vergessen
         for (const p of [...this.files.keys()])
@@ -71,7 +51,52 @@ export class HistoryIndex {
         this.totalFiles = this.files.size;
         this.ready = true;
     }
+    async scanSubagents(f, project, seen) {
+        const dir = subagentDir(f.path);
+        let names = [];
+        try {
+            names = await readdir(dir);
+        }
+        catch {
+            /* keine Subagenten */
+        }
+        for (const n of names) {
+            const m = /^agent-(.+)\.jsonl$/.exec(n);
+            if (!m)
+                continue;
+            const path = join(dir, n);
+            seen?.add(path);
+            try {
+                await this.scan(path, (await stat(path)).size, f.sessionId, m[1], project);
+            }
+            catch {
+                /* gelöscht */
+            }
+        }
+    }
+    /**
+     * Eine Session samt Subagenten sofort auf Stand bringen, ohne auf den ersten
+     * vollständigen Scan zu warten (für die Kostenansicht direkt nach dem Start).
+     */
+    async ensureSession(f, project) {
+        try {
+            await this.scan(f.path, (await stat(f.path)).size, f.sessionId, undefined, project);
+        }
+        catch {
+            return; // gelöscht
+        }
+        await this.scanSubagents(f, project);
+    }
+    /** Läuft parallel zum Hintergrund-Scan: pro Datei nur ein Lesevorgang gleichzeitig. */
+    scanning = new Map();
     async scan(path, size, sessionId, agentId, project) {
+        for (let running = this.scanning.get(path); running; running = this.scanning.get(path))
+            await running;
+        const p = this.scanUnlocked(path, size, sessionId, agentId, project).finally(() => this.scanning.delete(path));
+        this.scanning.set(path, p);
+        return p;
+    }
+    async scanUnlocked(path, size, sessionId, agentId, project) {
         let agg = this.files.get(path);
         if (agg && agg.size === size)
             return;
@@ -261,6 +286,33 @@ export class HistoryIndex {
             heat,
         };
     }
+    /**
+     * Tokens je Modell eines Transkripts (Hauptagent oder Subagent) für die Kostenansicht.
+     * `seen` enthält bereits gezählte Message-Ids, damit bei Fork/Resume kopierte Antworten
+     * im selben Baum nicht doppelt zählen.
+     */
+    usageOf(sessionId, agentId, seen, each) {
+        const out = new Map();
+        for (const a of this.files.values()) {
+            if (a.sessionId !== sessionId || a.agentId !== agentId)
+                continue;
+            for (const [messageId, u] of a.usage) {
+                if (seen.has(messageId))
+                    continue;
+                seen.add(messageId);
+                let t = out.get(u.model);
+                if (!t)
+                    out.set(u.model, (t = emptyTotals()));
+                addUsage(t, u.usage);
+                if (each) {
+                    const one = emptyTotals();
+                    addUsage(one, u.usage);
+                    each(u.model, u.ts, one);
+                }
+            }
+        }
+        return out;
+    }
     toolCalls(q) {
         const { aggs, since } = this.selected(q);
         const needle = q.q?.toLowerCase();

package/dist/app/server/http.js

@@ -155,6 +155,11 @@ export function startServer(inspector, opts) {
             m = /^\/api\/cpu\/([\w-]+)$/.exec(p);
             if (m)
                 return json(res, 200, await inspector.cpuHistory(m[1]));
+            m = /^\/api\/cost\/([\w-]+)$/.exec(p);
+            if (m) {
+                const cost = await inspector.sessionCost(m[1]);
+                return cost ? json(res, 200, cost) : json(res, 404, { error: 'unknown session' });
+            }
             m = /^\/api\/flow\/([\w-]+)$/.exec(p);
             if (m) {
                 const flow = await inspector.flow(m[1]);

package/dist/app/server/inspector.js

@@ -6,6 +6,7 @@ import { CLAUDE_DIR, relToClaude } from './config.js';
 import { CpuMonitor } from './cpu-monitor.js';
 import { registry } from './formats/index.js';
 import { HistoryIndex } from './history/aggregator.js';
+import { emptyTotals, estimateCost, mergeTotals } from '../shared/pricing.js';
 import { search } from './history/search.js';
 import { analyze } from './model/analyze.js';
 import { laneData } from './model/flow.js';
@@ -500,7 +501,129 @@ export class Inspector extends EventEmitter {
         }
         return { rootSessionId, lanes, origin };
     }
+    /**
+     * Geschätzte Kosten einer Session samt aller Subagenten und per `claude` gestarteten
+     * Sitzungen (rekursiv, gleicher Baum wie Zeitleiste und Graph).
+     */
+    async sessionCost(rootSessionId) {
+        const flow = await this.flow(rootSessionId);
+        if (!flow)
+            return undefined;
+        // nur die Dateien dieses Baums einlesen, statt auf den ersten vollständigen History-Scan zu warten
+        for (const sid of new Set(flow.lanes.map((l) => l.sessionId))) {
+            const f = this.index.get(sid);
+            if (f)
+                await this.history.ensureSession(f, await this.projectOf(f));
+        }
+        const seen = new Set();
+        const total = emptyTotals();
+        const byModel = new Map();
+        const unpriced = new Set();
+        let costUSD = 0;
+        const points = [];
+        const rows = flow.lanes.map((lane) => {
+            const usage = this.history.usageOf(lane.sessionId, lane.agentId, seen, (model, ts, one) => {
+                if (ts)
+                    points.push({ ts, cost: estimateCost(model, one) ?? 0, output: one.output, model, lane });
+            });
+            const tokens = emptyTotals();
+            let cost = 0;
+            const models = [...usage.entries()].map(([model, t]) => {
+                mergeTotals(tokens, t);
+                let m = byModel.get(model);
+                if (!m)
+                    byModel.set(model, (m = emptyTotals()));
+                mergeTotals(m, t);
+                const c = estimateCost(model, t);
+                if (c === undefined)
+                    unpriced.add(model);
+                else
+                    cost += c;
+                return { model, tokens: t, costUSD: c };
+            });
+            mergeTotals(total, tokens);
+            costUSD += cost;
+            return {
+                id: lane.id,
+                sessionId: lane.sessionId,
+                agentId: lane.agentId,
+                kind: lane.kind,
+                label: lane.label,
+                sublabel: lane.sublabel,
+                parentId: lane.parentId,
+                depth: lane.depth,
+                status: lane.status,
+                byModel: models.sort((a, b) => (b.costUSD ?? 0) - (a.costUSD ?? 0)),
+                tokens,
+                costUSD: cost,
+            };
+        });
+        const rootFile = this.index.get(rootSessionId);
+        return {
+            rootSessionId,
+            rows,
+            total,
+            costUSD,
+            byModel: [...byModel.entries()]
+                .map(([model, tokens]) => ({ model, tokens, costUSD: estimateCost(model, tokens) }))
+                .sort((a, b) => (b.costUSD ?? 0) - (a.costUSD ?? 0)),
+            unpricedModels: [...unpriced],
+            reportedCostUSD: rootFile ? (await this.index.summary(rootFile)).costUSD : undefined,
+            timeline: costTimeline(points),
+        };
+    }
     formats() {
         return registry.report();
     }
 }
+const MIN = 60_000;
+const BUCKET_SIZES = [1, 2, 5, 10, 15, 30, 60, 120, 180, 360, 720, 1440].map((m) => m * MIN);
+/** Verteilt die Modellantworten auf höchstens ~120 gleich lange Zeitabschnitte. */
+function costTimeline(points) {
+    if (!points.length)
+        return { bucketMs: MIN, buckets: [] };
+    let first = Infinity;
+    let last = -Infinity;
+    for (const p of points) {
+        first = Math.min(first, p.ts);
+        last = Math.max(last, p.ts);
+    }
+    const span = last - first;
+    const bucketMs = BUCKET_SIZES.find((b) => span / b <= 120) ?? Math.ceil(span / 120 / (1440 * MIN)) * 1440 * MIN;
+    // an der lokalen Uhr ausrichten (volle Minuten/Stunden/Tage)
+    const offset = new Date(first).getTimezoneOffset() * MIN;
+    const start = Math.floor((first - offset) / bucketMs) * bucketMs + offset;
+    const n = Math.floor((last - start) / bucketMs) + 1;
+    const buckets = Array.from({ length: n }, (_, i) => ({
+        start: start + i * bucketMs,
+        costUSD: 0,
+        outputTokens: 0,
+        requests: 0,
+        byKind: {},
+        byModel: {},
+        top: [],
+        lanes: new Map(),
+    }));
+    for (const p of points) {
+        const b = buckets[Math.floor((p.ts - start) / bucketMs)];
+        b.costUSD += p.cost;
+        b.outputTokens += p.output;
+        b.requests++;
+        b.byKind[p.lane.kind] = (b.byKind[p.lane.kind] ?? 0) + p.cost;
+        b.byModel[p.model] = (b.byModel[p.model] ?? 0) + p.cost;
+        let l = b.lanes.get(p.lane.id);
+        if (!l)
+            b.lanes.set(p.lane.id, (l = { label: p.lane.label, sublabel: p.lane.sublabel, costUSD: 0 }));
+        l.costUSD += p.cost;
+    }
+    return {
+        bucketMs,
+        buckets: buckets.map(({ lanes, ...b }) => ({
+            ...b,
+            top: [...lanes.entries()]
+                .map(([id, l]) => ({ id, ...l }))
+                .sort((x, y) => y.costUSD - x.costUSD)
+                .slice(0, 3),
+        })),
+    };
+}